/* ==========================================================
   MERITZA CLASSES
   WHY MERITZA
   Version : 3.3.0

   Layout:
   Header       = 100%
   Illustration = 40%
   Journey      = 60%

   Spacing:
   Hero → Section = Increased
   Section bottom = 0

   Icons:
   Same visual language as HOW IT WORKS
========================================================== */


/* ==========================================================
   SECTION
========================================================== */

.mc-why-meritza{

    position:relative;

    /*
     * Outer vertical spacing is controlled globally
     * by .mc-home-section.
     *
     * This section controls only its own internal layout.
     */

    padding-top:0;

    padding-bottom:0;

    overflow:hidden;

}


/* ==========================================================
   SECTION HEADER
========================================================== */

.mc-why-header{

    position:relative;

    max-width:850px;

    margin:0 auto 0px;

    text-align:center;

    z-index:3;

}


/* ==========================================================
   EDITORIAL EYEBROW
========================================================== */

.mc-why-eyebrow{
    display:flex;
    align-items:center;
    justify-content:center;

    width:100%;
    max-width:720px;

    margin:0 auto 6px;

    gap:18px;
}


/* ==========================================================
   EYEBROW TEXT
========================================================== */

.mc-why-eyebrow-text{

    flex-shrink:0;

    color:#B98C14;

    font-size:.92rem;

    font-weight:800;

    letter-spacing:.17em;

    line-height:1;

    white-space:nowrap;

}


/* ==========================================================
   GOLD FADING LINES
========================================================== */

.mc-why-eyebrow-line{

    flex:1;

    height:2px;

    opacity:1;

}


/* LEFT LINE */

.mc-why-eyebrow-line:first-child{

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(212,175,55,.20) 15%,
            rgba(212,175,55,.55) 55%,
            rgba(212,175,55,.95) 100%
        );

}


/* RIGHT LINE */

.mc-why-eyebrow-line:last-child{

    background:
        linear-gradient(
            90deg,
            rgba(212,175,55,.95) 0%,
            rgba(212,175,55,.55) 45%,
            rgba(212,175,55,.20) 85%,
            transparent 100%
        );

}


/* ==========================================================
   TITLE
========================================================== */

.mc-why-header .mc-section-title{

    margin:0;

    color:#0A1946;

    font-size:2.35rem;

    font-weight:800;

    line-height:1.12;

    letter-spacing:-.7px;

}


/* ==========================================================
   DESCRIPTION
========================================================== */

.mc-why-header .mc-section-description{

    max-width:650px;

    margin:3px auto 0;

    color:#52627A;

    font-size:.95rem;

    line-height:1.35;

}


/* ==========================================================
   40 / 60 MAIN LAYOUT
========================================================== */

.mc-why-layout{

    display:grid;

    grid-template-columns:40% 60%;

    align-items:center;

}


/* ==========================================================
   LEFT 40%
   ILLUSTRATION
========================================================== */

.mc-why-visual{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:visible;

}


/* ==========================================================
   ILLUSTRATION WRAPPER
========================================================== */

.mc-why-illustration-wrap{

    position:relative;

    width:100%;

    max-width:430px;

    height:430px;

    display:flex;

    align-items:center;

    justify-content:center;

    z-index:2;

}


/* ==========================================================
   MAIN ILLUSTRATION
========================================================== */

.mc-why-illustration{

    display:block;

    width:100%;

    max-width:430px;

    height:100%;

    object-fit:contain;

    filter:
        drop-shadow(
            0 18px 35px rgba(10,25,70,.12)
        );

}


/* ==========================================================
   DECORATIVE ORBITS
========================================================== */

.mc-why-visual-orbit{

    position:absolute;

    border-radius:50%;

    pointer-events:none;

    z-index:1;

}


.orbit-one{

    width:370px;

    height:370px;

    top:50%;

    left:50%;

    border:1px solid rgba(212,175,55,.24);

    transform:translate(-50%,-50%);

}


.orbit-two{

    width:455px;

    height:455px;

    top:50%;

    left:50%;

    border:1px solid rgba(10,25,70,.07);

    transform:translate(-50%,-50%);

}


/* ==========================================================
   RIGHT 60%
   CONTENT
========================================================== */

.mc-why-content{

    width:100%;

    max-width:760px;

    padding-left:10px;

    padding-right:10px;

}


/* ==========================================================
   JOURNEY
========================================================== */

.mc-why-journey{

    position:relative;

    width:100%;

    padding:5px 0;

}


/* ==========================================================
   CENTRAL VERTICAL LINE
========================================================== */

.mc-why-journey::before{

    content:"";

    position:absolute;

    top:27px;

    bottom:27px;

    left:50%;

    width:2px;

    background:
        linear-gradient(
            180deg,
            rgba(54,103,170,.12),
            rgba(54,103,170,.78) 20%,
            #3667AA 50%,
            rgba(54,103,170,.78) 80%,
            rgba(54,103,170,.12)
        );

    transform:translateX(-50%);

}


/* ==========================================================
   FEATURE ROW
========================================================== */

.mc-why-feature{

    position:relative;

    width:100%;

    height:64px;

    margin:0;

}


/* ==========================================================
   FEATURE CONTENT
========================================================== */

.mc-why-feature-content{

    position:absolute;

    top:50%;

    width:calc(50% - 72px);

    transform:translateY(-50%);

    transition:transform .25s ease;

}


/* ==========================================================
   FEATURE NUMBER
========================================================== */

.mc-why-feature-number{

    position:absolute;

    top:50%;

    color:rgba(10,25,70,.20);

    font-size:1.15rem;

    font-weight:800;

    line-height:1;

    transform:translateY(-50%);

    transition:color .25s ease;

    z-index:4;

}


/* ==========================================================
   FEATURE ICON
   Same visual language as HOW IT WORKS
========================================================== */

.mc-why-feature-icon{

    position:absolute;

    top:50%;

    left:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    width:54px;

    height:54px;

    margin:0;

    border-radius:50%;

    background:#FFFFFF;

    border:3px solid #2867C7;

    color:#2867C7;

    box-shadow:
        0 7px 18px rgba(10,25,70,.08);

    font-size:1.15rem;

    transform:translate(-50%,-50%);

    z-index:5;

    transition:
        transform .25s ease,
        border-color .25s ease,
        color .25s ease,
        box-shadow .25s ease;

}


/* ==========================================================
   GOLD ACCENT DOT
========================================================== */

.mc-why-feature-icon::after{

    content:"";

    position:absolute;

    width:7px;

    height:7px;

    right:2px;

    bottom:5px;

    border-radius:50%;

    background:#D4AF37;

    border:2px solid #FFFFFF;

    box-shadow:
        0 2px 5px rgba(212,175,55,.18);

}


/* ==========================================================
   RIGHT SIDE
   01 / 03 / 05
========================================================== */

.mc-why-feature-right
.mc-why-feature-content{

    left:calc(50% + 72px);

    text-align:left;

}


.mc-why-feature-right
.mc-why-feature-number{

    left:calc(50% + 34px);

}


/* ==========================================================
   LEFT SIDE
   02 / 04 / 06
========================================================== */

.mc-why-feature-left
.mc-why-feature-content{

    right:calc(50% + 72px);

    text-align:right;

}


.mc-why-feature-left
.mc-why-feature-number{

    right:calc(50% + 34px);

}


/* ==========================================================
   FEATURE HEADING
========================================================== */

.mc-why-feature-content h3{

    margin:0;

    color:#0A1946;

    font-size:.94rem;

    font-weight:750;

    line-height:1.2;

}


/* ==========================================================
   FEATURE DESCRIPTION
========================================================== */

.mc-why-feature-content p{

    margin:2px 0 0;

    color:#607089;

    font-size:.73rem;

    line-height:1.25;

}


/* ==========================================================
   CENTER DOT
========================================================== */

.mc-why-feature::after{

    content:"";

    position:absolute;

    top:50%;

    left:50%;

    width:6px;

    height:6px;

    border-radius:50%;

    background:#D4AF37;

    box-shadow:
        0 0 0 3px rgba(212,175,55,.10);

    transform:translate(-50%,-50%);

    z-index:2;

}


/* ==========================================================
   HOVER
   IMPORTANT:
   DO NOT FILL ICON BLUE
========================================================== */

.mc-why-feature:hover
.mc-why-feature-content{

    transform:
        translateY(-50%)
        translateX(4px);

}


.mc-why-feature-left:hover
.mc-why-feature-content{

    transform:
        translateY(-50%)
        translateX(-4px);

}


.mc-why-feature:hover
.mc-why-feature-number{

    color:#B98C14;

}


/* Keep white background on hover */

.mc-why-feature:hover
.mc-why-feature-icon{

    transform:
        translate(-50%,-50%)
        translateY(-2px);

    background:#FFFFFF;

    border-color:#D4AF37;

    color:#2867C7;

    box-shadow:
        0 10px 24px rgba(212,175,55,.18);

}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width:991.98px){

    .mc-why-meritza{

    padding-top:0;

}


    .mc-why-header{

        margin-bottom:25px;

    }


    .mc-why-header .mc-section-title{

        font-size:2.05rem;

    }


    .mc-why-layout{

        grid-template-columns:1fr 1fr;

        min-height:470px;

    }


    .mc-why-visual{

        min-height:470px;

    }


    .mc-why-illustration-wrap{

        height:390px;

    }


    .orbit-one{

        width:320px;

        height:320px;

    }


    .orbit-two{

        width:390px;

        height:390px;

    }


    .mc-why-content{

        padding-left:5px;

        padding-right:5px;

    }


    .mc-why-feature{

        min-height:60px;

    }


    .mc-why-feature-content{

        width:calc(50% - 16px);

    }


    .mc-why-feature-right
    .mc-why-feature-content{

        left:calc(50% + 12px);

    }


    .mc-why-feature-left
    .mc-why-feature-content{

        right:calc(50% + 12px);

    }


    .mc-why-feature-content h3{

        font-size:.88rem;

    }


    .mc-why-feature-content p{

        font-size:.7rem;

    }


    .mc-why-feature-number{

        font-size:1.1rem;

    }


    .mc-why-feature-icon{

        width:48px;

        height:48px;

        font-size:.95rem;

    }


    .mc-why-feature-right
    .mc-why-feature-number{

        left:calc(50% + 30px);

    }


    .mc-why-feature-left
    .mc-why-feature-number{

        right:calc(50% + 30px);

    }

}


/* ==========================================================
   MOBILE
   Temporary desktop-derived structure.
   Dedicated mobile pass later.
========================================================== */

@media (max-width:767.98px){

.mc-why-meritza{

    padding-top:0;

}


    .mc-why-header{

        margin-bottom:30px;

    }


    .mc-why-header .mc-section-title{

        font-size:1.8rem;

    }


    .mc-why-header .mc-section-description{

        font-size:.88rem;

    }


    .mc-why-layout{

        display:flex;

        flex-direction:column;

        min-height:auto;

    }


    .mc-why-eyebrow{

        gap:10px;

    }


    .mc-why-eyebrow-text{

        font-size:.64rem;

        letter-spacing:.12em;

    }


    .mc-why-eyebrow-line{

        height:1px;

    }


    /* ------------------------------------------
       Illustration
    ------------------------------------------ */

    .mc-why-visual{

        width:100%;

        min-height:280px;

        margin-bottom:25px;

    }


    .mc-why-illustration-wrap{

        width:100%;

        max-width:300px;

        height:280px;

    }


    .orbit-one{

        width:250px;

        height:250px;

    }


    .orbit-two{

        width:300px;

        height:300px;

    }


    /* ------------------------------------------
       Content
    ------------------------------------------ */

    .mc-why-content{

        max-width:none;

        padding:0;

    }


    /* ------------------------------------------
       Timeline
    ------------------------------------------ */

    .mc-why-journey{

        padding-left:0;

    }


    .mc-why-journey::before{

        left:27px;

        top:10px;

        bottom:10px;

        transform:none;

    }


    .mc-why-feature{

        display:grid;

        grid-template-columns:54px 1fr;

        column-gap:15px;

        min-height:70px;

        height:auto;

        padding:5px 0;

        margin-bottom:8px;

    }


    .mc-why-feature-right,
    .mc-why-feature-left{

        justify-content:initial;

        padding:0;

    }


    .mc-why-feature-icon{

        position:relative;

        top:auto;

        left:auto !important;

        grid-column:1;

        grid-row:1;

        width:54px;

        height:54px;

        transform:none;

    }


    .mc-why-feature-number{

        display:none;

    }


    .mc-why-feature-content,
    .mc-why-feature-right
    .mc-why-feature-content,
    .mc-why-feature-left
    .mc-why-feature-content{

        grid-column:2;

        grid-row:1;

        width:auto;

        margin:0;

        padding:0;

        text-align:left;

        position:relative;

        top:auto;

        right:auto;

        left:auto;

        transform:none;

    }


    .mc-why-feature-content h3{

        font-size:.92rem;

    }


    .mc-why-feature-content p{

        font-size:.75rem;

    }


    .mc-why-feature::after{

        display:none;

    }

}