/* ==========================================================
   CRESTBRIDGE SERVICES
   HOME PAGE
   Version : 3.0
   Status  : Production
   ----------------------------------------------------------
   Notes
   ----------------------------------------------------------
   • Homepage-specific styles only
   • Global spacing comes from layout.css
   • Design tokens come from variables.css
   • Shared components belong in components.css
========================================================== */



/* ==========================================================
   HERO
========================================================== */

/* ----------------------------------------------------------
   SECTION
---------------------------------------------------------- */

.hero{
    position:relative;
    isolation:isolate;

    display:flex;
    flex-direction:column;
    justify-content:center;

    min-height:100svh;

    background:var(--navy);
    color:var(--white);

    overflow:hidden;
}

.hero.section{
    padding:120px 0 0;
}

.hero *{
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    text-rendering:optimizeLegibility;
}

.hero img{
    display:block;
    user-select:none;
}

.hero a,
.hero button{
    user-select:none;
}

.hero :focus-visible{
    outline:2px solid var(--gold);
    outline-offset:4px;
}


/* ----------------------------------------------------------
   MEDIA
---------------------------------------------------------- */

.hero__media{
    position:absolute;
    inset:0;
    z-index:-2;

    overflow:hidden;
}

.hero__image{
    width:100%;
    height:100%;

    object-fit:cover;
    object-position:78% center;

    filter:
        saturate(.88)
        brightness(.62)
        contrast(1.05);

    transform:scale(1.03);
}


/* ----------------------------------------------------------
   SCRIM
---------------------------------------------------------- */

.hero__scrim{
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(8,18,38,.94) 0%,
            rgba(8,18,38,.82) 34%,
            rgba(8,18,38,.48) 60%,
            rgba(8,18,38,.20) 100%
        ),
        linear-gradient(
            180deg,
            rgba(6,13,28,.10) 0%,
            rgba(6,13,28,.30) 55%,
            rgba(6,13,28,.82) 100%
        );
}

.hero__scrim::before{
    content:"";

    position:absolute;
    inset:0;

    background:
        radial-gradient(
            circle at 18% 35%,
            rgba(255,255,255,.08),
            transparent 48%
        );
}

.hero__scrim::after{
    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            to right,
            rgba(0,0,0,.16),
            transparent 35%
        );

    mix-blend-mode:soft-light;
}


/* ----------------------------------------------------------
   DECORATIVE LAYERS
---------------------------------------------------------- */

.hero::before{
    content:"";

    position:absolute;
    left:-180px;
    bottom:-180px;

    width:520px;
    height:520px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(212,175,55,.14),
            transparent 70%
        );

    filter:blur(30px);

    pointer-events:none;
}

.hero::after{
    content:"";

    position:absolute;
    top:0;
    right:-140px;

    width:420px;
    height:100%;

    background:
        linear-gradient(
            to left,
            rgba(255,255,255,.04),
            transparent
        );

    transform:skewX(-18deg);

    pointer-events:none;
}


/* ----------------------------------------------------------
   INNER LAYOUT
---------------------------------------------------------- */

.hero__inner{
    display:flex;
    align-items:center;

    flex:1;

    padding-bottom:80px;
}

/* ----------------------------------------------------------
   CONTENT
---------------------------------------------------------- */

.hero__content{
    display:flex;
    flex-direction:column;
    align-items:flex-start;

    width:min(900px,100%);

    gap:2.6rem;
}


/* ----------------------------------------------------------
   EYEBROW
---------------------------------------------------------- */

.hero .section-tag{
    display:inline-flex;
    align-items:center;

    gap:1rem;

    margin:0;

    font-size:.82rem;
    font-weight:700;
    letter-spacing:.22em;
    text-transform:uppercase;

    color:var(--gold);
}

.hero .section-tag::before{
    content:"";

    width:56px;
    height:1px;

    background:currentColor;

    opacity:.8;
}


/* ----------------------------------------------------------
   TITLE
---------------------------------------------------------- */

.hero h1{
    margin:0;

    max-width:650px;

    font-family:var(--font-heading);
    font-size:clamp(3.2rem,5vw,5.3rem);
    font-weight:600;
    line-height:.96;
    letter-spacing:-.05em;

    color:var(--white);

    text-wrap:balance;
}

.hero h1 span{
    display:block;

    color:inherit;
}


/* ----------------------------------------------------------
   DESCRIPTION
---------------------------------------------------------- */

.hero p{
    max-width:38rem;
}

.hero p{
    margin:0;

    font-size:1.15rem;
    font-weight:400;
    line-height:2;

    color:rgba(255,255,255,.74);

    text-wrap:pretty;
}
/* ----------------------------------------------------------
   ACTIONS
---------------------------------------------------------- */

.hero__actions{
    display:flex;
    align-items:center;

    gap:1.75rem;

    margin-top:.75rem;
}


/* ----------------------------------------------------------
   PRIMARY BUTTON
---------------------------------------------------------- */

.btn-primary{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:64px;
    padding:0 2.5rem;

    border:none;
    border-radius:999px;

    background:
        linear-gradient(
            135deg,
            var(--gold),
            #E5C06A
        );

    color:var(--navy);

    font-size:.95rem;
    font-weight:700;
    letter-spacing:.04em;
    text-transform:uppercase;
    text-decoration:none;

    box-shadow:
        0 20px 40px rgba(0,0,0,.28),
        inset 0 0 0 1px rgba(255,255,255,.08);

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        background .35s ease;
}

.btn-primary:hover{
    transform:translateY(-4px);

    box-shadow:
        0 28px 55px rgba(0,0,0,.34),
        inset 0 0 0 1px rgba(255,255,255,.12);
}

.btn-primary:focus-visible{
    outline:2px solid var(--gold);
    outline-offset:4px;
}


/* ----------------------------------------------------------
   SECONDARY LINK
---------------------------------------------------------- */

.hero__link{
    display:inline-flex;
    align-items:center;

    gap:.8rem;

    font-size:.98rem;
    font-weight:600;
    letter-spacing:.02em;
    text-decoration:none;

    color:rgba(255,255,255,.90);

    transition:
        color .3s ease,
        gap .3s ease,
        transform .3s ease;
}

.hero__link i{
    font-size:.95rem;

    transition:transform .3s ease;
}

.hero__link:hover{
    gap:1rem;

    color:var(--white);
}

.hero__link:hover i{
    transform:translateX(6px);
}

/* ----------------------------------------------------------
   HERO FOOTER
---------------------------------------------------------- */

.hero__footer{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    z-index:5;

    background:rgba(8,18,38,.72);

    backdrop-filter:blur(20px);

    border-top:1px solid rgba(255,255,255,.08);
}


/* ----------------------------------------------------------
   CAPABILITY BAR
---------------------------------------------------------- */

.hero__capabilities{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;

    gap:2rem;

    min-height:70px;
}


/* ----------------------------------------------------------
   CAPABILITY ITEM
---------------------------------------------------------- */

.hero__capability{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:6px 0;

    white-space:nowrap;

    font-size:.90rem;
    font-weight:600;
    letter-spacing:.18em;
    text-transform:uppercase;
    text-decoration:none;

    color:rgba(255,255,255,.78);

    transition:
        color .30s ease,
        transform .30s ease,
        text-shadow .30s ease;
}

.hero__capability:hover{
    color:#D8DDE6;

    text-shadow:0 0 10px rgba(216,221,230,.25);

    transform:translateY(-2px);
}

.hero__capability:focus-visible{
    outline:2px solid var(--gold);
    outline-offset:4px;

    border-radius:4px;
}


/* ----------------------------------------------------------
   CAPABILITY DIVIDER
---------------------------------------------------------- */

.hero__divider{
    width:1px;
    height:18px;

    background:rgba(212,175,55,.45);
}


/* ----------------------------------------------------------
   LARGE SCREEN REFINEMENTS
---------------------------------------------------------- */

@media (max-width:1200px){

    .hero h1{
        font-size:clamp(3rem,5vw,5rem);
    }

}


/* ----------------------------------------------------------
   TABLET
---------------------------------------------------------- */

@media (max-width:991px){

    .hero{
        min-height:auto;
    }

    .hero__image{
        object-position:72% center;
    }

    .hero__inner{
        padding-top:8rem;
        padding-bottom:8rem;
    }

    .hero__content{
        max-width:600px;
        gap:1.75rem;
    }


    .hero p{
        font-size:1.05rem;
        line-height:1.8;
    }

    .hero__capabilities{
        gap:1.5rem;
    }

}

/* ----------------------------------------------------------
   MOBILE
---------------------------------------------------------- */

@media (max-width:767px){

    .hero{
        min-height:auto;
    }

    .hero__image{
        object-position:74% center;
        transform:none;
    }

    .hero__scrim{
        background:
            linear-gradient(
                180deg,
                rgba(6,13,28,.12) 0%,
                rgba(6,13,28,.38) 45%,
                rgba(6,13,28,.72) 100%
            );
    }

    .hero__inner{
        align-items:flex-start;

        padding-top:1.5rem;
        padding-bottom:2.25rem;
    }

    .hero__content{
        max-width:100%;

        gap:2rem;
    }

    .hero .section-tag{
        font-size:.72rem;
        letter-spacing:.20em;
    }

    .hero .section-tag::before{
        width:40px;
    }

    .hero h1{
        font-size:clamp(2.7rem,9vw,3.4rem);
        line-height:.95;
        letter-spacing:-.04em;
    }

    .hero p{
        max-width:34ch;
    }


    .hero p{
        font-size:1rem;
        line-height:1.8;
    }

    .hero__actions{
        display:flex;
        flex-direction:column;
        align-items:stretch;

        width:100%;

        gap:1rem;
    }

    .btn-primary{
        width:100%;
        min-height:60px;
    }

    .hero__link{
        justify-content:center;
        width:100%;
    }

    .hero__capabilities{
        display:flex;
        flex-wrap:nowrap;
        justify-content:flex-start;

        gap:1.25rem;

        overflow-x:auto;
        overflow-y:hidden;

        padding:0 20px;

        scroll-snap-type:x proximity;

        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
        -ms-overflow-style:none;
    }

    .hero__capabilities::-webkit-scrollbar{
        display:none;
    }

    .hero__capability,
    .hero__divider{
        flex:0 0 auto;
    }

    .hero__capability{
        scroll-snap-align:start;
    }

}


/* ----------------------------------------------------------
   SMALL MOBILE
---------------------------------------------------------- */

@media (max-width:576px){

    .hero__inner{
        padding-top:1rem;
        padding-bottom:3rem;
    }

    .hero h1{
        font-size:2.55rem;
    }


    .hero p{
        font-size:.96rem;
        line-height:1.75;
    }

    .btn-primary{
        min-height:58px;
        font-size:.90rem;
    }

    .hero__link{
        font-size:.92rem;
    }

}


/* ----------------------------------------------------------
   REDUCED MOTION
---------------------------------------------------------- */

@media (prefers-reduced-motion:reduce){

    .hero *,
    .hero *::before,
    .hero *::after{
        animation:none !important;
        transition:none !important;
        scroll-behavior:auto !important;
    }

    .hero__link:hover,
    .hero__capability:hover,
    .btn-primary:hover{
        transform:none;
    }

    .hero__link:hover i{
        transform:none;
    }

}

/* ==========================================================
   CAPABILITIES
========================================================== */

/* ----------------------------------------------------------
   SECTION
---------------------------------------------------------- */

.capabilities{
    position:relative;

    background:#F8FAFC;

    overflow:hidden;
}


/* ----------------------------------------------------------
   LAYOUT
---------------------------------------------------------- */

.capabilities__layout{
    display:grid;
    grid-template-columns:28% 72%;
    align-items:start;
    gap:48px;
}


/* ----------------------------------------------------------
   INTRO
---------------------------------------------------------- */

.capabilities__intro{
    position:sticky;
    top:40px;
}


/* ----------------------------------------------------------
   SECTION HEADER
   (Uses global .section-header, .section-tag,
   .section-title and .section-description)
---------------------------------------------------------- */

.capabilities .section-header{
    margin-bottom:0;
}

.capabilities .section-title span{
    display:block;

    margin-top:10px;

    font-weight:300;

    color:#7A8593;
}

.capabilities .section-description{
    max-width:380px;

    margin-top:42px;
}


/* ----------------------------------------------------------
   CONTENT
---------------------------------------------------------- */

.capabilities__right{
    width:100%;
}

.capabilities__items{
    display:flex;
    flex-direction:column;
}


/* ----------------------------------------------------------
   CARD
---------------------------------------------------------- */

.capability{
    position:relative;

    display:block;

    padding:20px 20px;

    overflow:hidden;

    text-decoration:none;
    color:inherit;

    border-top:1px solid rgba(8,18,38,.08);

    transition:
        background .45s ease,
        box-shadow .45s ease;
}

.capability:last-child{
    border-bottom:1px solid rgba(8,18,38,.08);
}


/* ----------------------------------------------------------
   BACKGROUND
---------------------------------------------------------- */

.capability::before{
    content:"";

    position:absolute;
    inset:0;

    background:rgba(8,18,38,.025);

    transform:scaleX(0);
    transform-origin:left;

    transition:transform .45s cubic-bezier(.22,1,.36,1);
}


/* ----------------------------------------------------------
   WATERMARK
---------------------------------------------------------- */

.capability__watermark{
    position:absolute;

    top:50%;
    left:18px;

    transform:translateY(-50%) scale(.96);

    opacity:0;

    pointer-events:none;
    user-select:none;

    font-size:9rem;
    font-weight:700;
    line-height:1;
    letter-spacing:-.08em;

    color:rgba(8,18,38,.08);

    transition:
        opacity .45s ease,
        transform .45s ease;
}


/* ----------------------------------------------------------
   BODY
---------------------------------------------------------- */

.capability__body{
    position:relative;
    z-index:2;

    transition:transform .45s cubic-bezier(.22,1,.36,1);
}


/* ----------------------------------------------------------
   HEADER
---------------------------------------------------------- */

.capability__header{
    display:grid;
    grid-template-columns:1fr auto;
    align-items:center;

    gap:24px;
}

.capability__header h3{
    margin:0;

    font-size:2rem;
    font-weight:800;
    letter-spacing:-.03em;

    color:var(--navy);

    transition:color .35s ease;
}

/* ----------------------------------------------------------
   ARROW
---------------------------------------------------------- */

.capability__arrow{
    display:flex;
    align-items:center;
    justify-content:center;

    width:44px;
    height:44px;

    font-size:1.2rem;

    color:#AEB8C3;

    transition:
        color .35s ease,
        transform .35s ease;
}


/* ----------------------------------------------------------
   DIVIDER
---------------------------------------------------------- */

.capability__line{
    display:block;

    width:0;
    height:2px;

    margin:20px 0 24px;

    background:var(--gold);

    transition:width .45s cubic-bezier(.22,1,.36,1);
}


/* ----------------------------------------------------------
   DESCRIPTION
---------------------------------------------------------- */

.capability__body p{
    margin:0;

    max-width:var(--content-reading);

    font-size:1.02rem;
    line-height:1.8;

    color:#66707D;

    transition:color .35s ease;
}


/* ----------------------------------------------------------
   STATES
---------------------------------------------------------- */

.capability:hover{
    box-shadow:inset 4px 0 0 var(--gold);
}

.capability:hover::before{
    transform:scaleX(1);
}

.capability:hover .capability__body{
    transform:translateX(-6px);
}

.capability:hover .capability__line{
    width:72px;
}

.capability:hover .capability__arrow{
    color:var(--gold);
    transform:translateX(6px);
}

.capability:hover .capability__watermark{
    opacity:1;
    transform:translateY(-50%) scale(1);
}

.capability:hover h3{
    color:#06101E;
}

.capability:hover p{
    color:#4D5966;
}


/* ----------------------------------------------------------
   TABLET
---------------------------------------------------------- */

@media (max-width:991px){

    .capabilities__layout{
        display:block;
    }

    .capabilities__intro{
        position:relative;
        top:auto;

        margin-bottom:48px;
    }

    .capabilities .section-description{
        max-width:100%;
        margin-top:30px;
    }

    .capability{
        padding:28px 0;
    }

    .capability__watermark{
        display:none;
    }

    .capability__header h3{
        font-size:1.65rem;
    }

    .capability__body p{
        max-width:100%;
    }

}


/* ----------------------------------------------------------
   MOBILE
---------------------------------------------------------- */

@media (max-width:767px){

    .capabilities__intro{
        margin-bottom:36px;
    }

    .capabilities .section-description{
        margin-top:24px;
    }

    .capability{
        padding:24px 0;
    }

    .capability__header{
        gap:16px;
    }

    .capability__header h3{
        font-size:1.3rem;
        line-height:1.3;
    }

    .capability__arrow{
        width:36px;
        height:36px;

        font-size:1rem;
    }

    .capability__line{
        margin:14px 0 18px;
    }

    .capability__body p{
        font-size:.94rem;
        line-height:1.7;
    }

    .capability:hover .capability__body{
        transform:none;
    }

    .capability:hover .capability__arrow{
        transform:translateX(3px);
    }

}

/* ==========================================================
   OUR PERSPECTIVE
========================================================== */

/* ----------------------------------------------------------
   SECTION
---------------------------------------------------------- */

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

.perspective{
    position:relative;
    overflow:hidden;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.97) 0%,
            rgba(255,255,255,.95) 45%,
            rgba(255,255,255,.90) 100%
        ),
        url("../../images/hero/hero-home.webp");

    background-size:cover;
    background-position:85% center;
    background-repeat:no-repeat;
}


/* ----------------------------------------------------------
   CONTAINER
---------------------------------------------------------- */

.perspective .container{
    width:min(1180px,92%);
    margin:0 auto;
}


/* ----------------------------------------------------------
   SECTION HEADER
   (Uses global section-header system)
---------------------------------------------------------- */

.perspective .section-header{
    max-width:780px;
    margin:0 0 56px;
    text-align:left;
}

.perspective .section-title{
    max-width:780px;
}

.perspective .section-title span{
    display:block;

    margin-top:20px;

    max-width:700px;

    font-size:1.6rem;
    font-weight:400;
    line-height:1.5;

    color:var(--text-light);
}


/* ----------------------------------------------------------
   CONTENT
---------------------------------------------------------- */

.perspective__content{
    display:grid;
    grid-template-columns:1fr;

    gap:20px;
}

.perspective__content p{
    margin:0;

    max-width:1080px;

    font-size:1.2rem;
    line-height:1.5;

    color:#59616C;
}


/* ----------------------------------------------------------
   QUOTE
---------------------------------------------------------- */

.perspective__quote{
    position:relative;

    max-width:1080px;
    margin:5rem auto 0;
    padding:2rem 4rem;
    
    text-align:center;
}

.perspective__quote::before{
    content:"“";

    position:absolute;
    top:-.25rem;
    left:0;

    font-family:Georgia, serif;
    font-size:7rem;
    line-height:1;

    color:rgba(212,175,55,.42);
    text-shadow:
    0 2px 8px rgba(212,175,55,.12);
}

.perspective__quote::after{
    content:"”";

    position:absolute;
    right:0;
    bottom:-2rem;

    font-family:Georgia, serif;
    font-size:7rem;
    line-height:1;

    color:rgba(212,175,55,.42);
    text-shadow:
    0 2px 8px rgba(212,175,55,.12);
}

.perspective__quote h3{
    margin:0;

    font-family:var(--font-heading);
    font-size:clamp(2rem,3vw,3.25rem);
    font-weight:700;
    line-height:1.25;
    letter-spacing:-.03em;

    color:var(--navy);
}

.perspective__quote h3 span{
    display:block;
    margin-top:.35rem;

    color:var(--primary);
}

.perspective__quote::marker{
    content:"";
}

/* ----------------------------------------------------------
   TABLET
---------------------------------------------------------- */

@media (max-width:991px){

    .perspective__content{
        max-width:100%;
    }

    .perspective__hero{
        margin:40px auto 50px;
    }

}

/* ----------------------------------------------------------
   MOBILE
---------------------------------------------------------- */

@media (max-width:767px){

    .perspective .section-header{
        margin-bottom:36px;
    }

    .perspective .section-title{
        font-size:2.3rem;
        line-height:1.05;
    }

    .perspective .section-title span{
        margin-top:12px;

        max-width:100%;

        font-size:1.15rem;
        line-height:1.55;
    }

    .perspective__hero{
        width:100%;

        margin:32px auto 40px;

        border-radius:0;
    }

    .perspective__hero img{
        height:300px;
    }

    .perspective__content{
        gap:18px;
    }

    .perspective__content p{
        font-size:.96rem;
        line-height:1.75;
    }

    .perspective__quote{
        margin-top:40px;
    }

    .perspective__quote p{
        font-size:1.7rem;
        line-height:1.35;
    }

    .perspective__quote span{
        margin-top:14px;

        font-size:.72rem;
        letter-spacing:.22em;
    }

}


/* ----------------------------------------------------------
   SMALL MOBILE
---------------------------------------------------------- */

@media (max-width:576px){

    .perspective .section-title{
        font-size:2rem;
    }

    .perspective__hero{
        margin:28px auto 36px;
    }

    .perspective__hero img{
        height:240px;
    }

    .perspective__content p{
        font-size:.92rem;
    }

    .perspective__quote p{
        font-size:1.45rem;
    }

}


/* ----------------------------------------------------------
   REDUCED MOTION
---------------------------------------------------------- */

@media (prefers-reduced-motion:reduce){

    .perspective *,
    .perspective *::before,
    .perspective *::after{
        animation:none !important;
        transition:none !important;
    }

    .perspective:hover .perspective__hero img{
        transform:none;
    }

}

/* ==========================================================
   METHODOLOGY
========================================================== */

/* ----------------------------------------------------------
   SECTION
---------------------------------------------------------- */

.methodology{
    position:relative;

    background:#F8FAFC;

    overflow:visible;
}


/* ----------------------------------------------------------
   SECTION HEADER
   (Uses global .section-header system)
---------------------------------------------------------- */

.methodology .section-header{
    margin-bottom:56px;
}


/* ----------------------------------------------------------
   GRID
---------------------------------------------------------- */

.methodology__grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    align-items:stretch;

    gap:2rem;
}


/* ----------------------------------------------------------
   CARD
---------------------------------------------------------- */

.methodology-card{
    position:relative;

    display:flex;
    flex-direction:column;
    justify-content:space-between;

    min-height:100%;

    padding:2rem;

    background:var(--white);

    border:1px solid rgba(15,23,42,.06);
    border-radius:22px;

    overflow:hidden;

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

.methodology-card::before{
    content:"";

    position:absolute;
    top:0;
    left:0;

    width:100%;
    height:3px;

    background:var(--navy);

    transform:scaleX(0);
    transform-origin:left;

    transition:transform .45s ease;
}


/* ----------------------------------------------------------
   NUMBER
---------------------------------------------------------- */

.methodology-card__number{
    display:block;

    margin-bottom:1rem;

    font-size:3.6rem;
    font-weight:500;
    line-height:1;

    color:rgba(15,23,42,.08);

    transition:color .35s ease;
}


/* ----------------------------------------------------------
   TITLE
---------------------------------------------------------- */

.methodology-card h3{
    margin:0 0 .75rem;

    font-size:1.45rem;
    font-weight:800;
    letter-spacing:-.02em;

    color:var(--navy);
}


/* ----------------------------------------------------------
   DESCRIPTION
---------------------------------------------------------- */

.methodology-card p{
    flex:1;

    margin:0 0 2rem;

    font-size:1rem;
    line-height:1.85;

    color:var(--color-text);
}

/* ----------------------------------------------------------
   LINK
---------------------------------------------------------- */

.methodology-card__link{
    display:inline-flex;
    align-items:center;

    gap:.5rem;

    margin-top:auto;

    font-size:.92rem;
    font-weight:600;
    letter-spacing:.04em;

    color:var(--color-primary);

    text-decoration:none;
}

.methodology-card__link .arrow{
    display:inline-block;

    transition:transform .35s ease;
}


/* ----------------------------------------------------------
   STATES
---------------------------------------------------------- */

.methodology-card:hover{
    transform:translateY(-12px);

    border-color:rgba(14,70,140,.18);

    box-shadow:
        0 18px 45px rgba(15,23,42,.08),
        0 35px 80px rgba(15,23,42,.06);
}

.methodology-card:hover::before{
    transform:scaleX(1);
}

.methodology-card:hover .methodology-card__number{
    color:rgba(14,70,140,.18);
}

.methodology-card:hover h3{
    color:var(--color-primary);
}

.methodology-card:hover .arrow{
    transform:translateX(8px);
}


/* ----------------------------------------------------------
   ANIMATION
---------------------------------------------------------- */

.methodology-card.is-visible{
    opacity:1;
    transform:translateY(0);
}


/* ----------------------------------------------------------
   TABLET
---------------------------------------------------------- */

@media (max-width:1200px){

    .methodology__grid{
        grid-template-columns:repeat(2,1fr);
    }

}

@media (max-width:991px){

    .methodology .section-header{
        margin-bottom:40px;
    }

    .methodology__grid{
        grid-template-columns:repeat(2,1fr);

        gap:1.75rem;
    }

}


/* ----------------------------------------------------------
   MOBILE
---------------------------------------------------------- */

@media (max-width:767px){

    .methodology .section-header{
        margin-bottom:32px;
    }

    .methodology__grid{
        grid-template-columns:1fr;

        gap:1.5rem;
    }

    .methodology-card{
        padding:1.5rem;
    }

    .methodology-card__number{
        font-size:3rem;
    }

    .methodology-card h3{
        font-size:1.35rem;
    }

    .methodology-card p{
        margin-bottom:1.5rem;

        font-size:.95rem;
        line-height:1.7;
    }

}

@media (max-width:576px){

    .methodology-card{
        padding:1.25rem;
    }

    .methodology-card__number{
        font-size:2.7rem;
    }

    .methodology-card h3{
        font-size:1.25rem;
    }

    .methodology-card p{
        font-size:.92rem;
    }

}


/* ----------------------------------------------------------
   REDUCED MOTION
---------------------------------------------------------- */

@media (prefers-reduced-motion:reduce){

    .methodology-card,
    .methodology-card::before,
    .methodology-card__number,
    .methodology-card h3,
    .methodology-card .arrow{
        animation:none !important;
        transition:none !important;
    }

    .methodology-card:hover,
    .methodology-card:hover .arrow{
        transform:none;
    }

}

/* ==========================================================
   INDUSTRIES
========================================================== */

/* ----------------------------------------------------------
   SECTION
---------------------------------------------------------- */

.industries{
    background:var(--silver);
}


/* ----------------------------------------------------------
   SECTION HEADER
---------------------------------------------------------- */

.industries .section-header{
    margin-bottom:56px;
}


/* ----------------------------------------------------------
   GRID
---------------------------------------------------------- */

.industries-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);

    gap:1.5rem;
}


/* ----------------------------------------------------------
   CARD
---------------------------------------------------------- */

.industry-card{
    padding:2rem;

    background:#DAE7F2;

    border:1px solid var(--border);
    border-radius:18px;

    transition:
        background .35s ease,
        border-color .35s ease,
        color .35s ease,
        transform .35s ease,
        box-shadow .35s ease;
}


/* ----------------------------------------------------------
   ICON
---------------------------------------------------------- */

.industry-card i{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:52px;
    height:52px;

    margin-bottom:1.5rem;

    border-radius:50%;

    background:rgba(200,164,93,.12);

    color:var(--gold);

    font-size:1.15rem;

    transition:
        background .35s ease,
        color .35s ease;
}


/* ----------------------------------------------------------
   TITLE
---------------------------------------------------------- */

.industry-card h3{
    margin:0 0 .85rem;

    font-size:1.22rem;
    font-weight:600;
    line-height:1.35;

    color:var(--navy-dark);

    transition:color .35s ease;
}


/* ----------------------------------------------------------
   DESCRIPTION
---------------------------------------------------------- */

.industry-card p{
    margin:0;

    font-size:.97rem;
    line-height:1.75;

    color:var(--text-light);

    transition:color .35s ease;
}


/* ----------------------------------------------------------
   STATES
---------------------------------------------------------- */

.industry-card:hover{
    background:var(--navy);

    border-color:var(--navy);

    transform:translateY(-8px);

    box-shadow:0 22px 45px rgba(15,39,69,.18);
}

.industry-card:hover i{
    background:rgba(255,255,255,.12);

    color:var(--gold-light);
}

.industry-card:hover h3{
    color:var(--silver);
}

.industry-card:hover p{
    color:rgba(236,239,242,.82);
}


/* ----------------------------------------------------------
   TABLET
---------------------------------------------------------- */

@media (max-width:991px){

    .industries .section-header{
        margin-bottom:48px;
    }

    .industries-grid{
        grid-template-columns:repeat(2,1fr);

        gap:24px;
    }

}


/* ----------------------------------------------------------
   MOBILE
---------------------------------------------------------- */

@media (max-width:767px){

    .industries-grid{
        display:flex;

        gap:20px;

        overflow-x:auto;

        padding:0 10px 8px;

        scroll-snap-type:x mandatory;

        -webkit-overflow-scrolling:touch;

        scrollbar-width:none;
    }

    .industries-grid::-webkit-scrollbar{
        display:none;
    }

    .industry-card{
        flex:0 0 90%;
        max-width:90%;

        padding:24px;

        scroll-snap-align:start;
    }

    .industry-card h3{
        font-size:1.3rem;
    }

    .industry-card p{
        font-size:.95rem;
        line-height:1.7;
    }

}

@media (max-width:576px){

    .industry-card{
        padding:20px;
    }

    .industry-card h3{
        font-size:1.2rem;
    }

    .industry-card p{
        font-size:.92rem;
    }

}

/* ==========================================================
   ACADEMY
========================================================== */

/* ----------------------------------------------------------
   SECTION
---------------------------------------------------------- */

.academy-home{
    position:relative;

    background:var(--navy);

    overflow:hidden;
}

.academy-home::before{
    content:"";

    position:absolute;
    top:-150px;
    left:-180px;

    width:700px;
    height:700px;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.05) 0%,
            transparent 70%
        );

    pointer-events:none;
}


/* ----------------------------------------------------------
   LAYOUT
---------------------------------------------------------- */

.academy-home__content{
    display:grid;
    grid-template-columns:.95fr 1.05fr;
    align-items:stretch;

    gap:4rem;
}


/* ----------------------------------------------------------
   CONTENT
---------------------------------------------------------- */

.academy-home__text{
    display:flex;
    flex-direction:column;
    justify-content:flex-start;

    max-width:820px;

    padding:1rem 0;
}

.academy-home .section-header{
    margin-bottom:1.75rem;
}

.academy-home .section-tag{
    color:var(--gold-light);
}

.academy-home .section-title{
    color:var(--silver);
}

.academy-home .section-description{
    color:rgba(236,239,242,.82);
}


/* ----------------------------------------------------------
   FEATURES
---------------------------------------------------------- */

.academy-home__features{
    margin:0 0 2.75rem;
    padding:0;

    list-style:none;
}

.academy-home__features li{
    display:flex;
    align-items:center;

    gap:.9rem;

    margin-bottom:1rem;

    font-size:1rem;
    font-weight:500;

    color:var(--silver);
}

.academy-home__features li::before{
    content:"✓";

    display:flex;
    align-items:center;
    justify-content:center;

    width:28px;
    height:28px;

    border:1px solid rgba(200,164,93,.25);
    border-radius:50%;

    background:rgba(200,164,93,.12);

    color:var(--gold);

    font-size:.8rem;
    font-weight:700;
}


/* ----------------------------------------------------------
   BUTTON
---------------------------------------------------------- */

.academy-home .btn{
    align-self:flex-start;

    margin-top:.5rem;
}


/* ----------------------------------------------------------
   IMAGE
---------------------------------------------------------- */

.academy-home__image{
    max-height:650px;
}

.academy-home__image img{
    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center;

    opacity:0.7;
}


/* ----------------------------------------------------------
   TABLET
---------------------------------------------------------- */

@media (max-width:1100px){

    .academy-home__content{
        gap:3rem;
    }

}

@media (max-width:991px){

    .academy-home__content{
        grid-template-columns:1fr;

        gap:3rem;
    }

    .academy-home__text{
        order:2;

        max-width:100%;

        padding:0;
    }

    .academy-home__image{
        order:1;

        max-height:450px;
    }

}


/* ----------------------------------------------------------
   MOBILE
---------------------------------------------------------- */

@media (max-width:767px){

    .academy-home__content{
        gap:2rem;
    }

    .academy-home__image{
        max-height:360px;
    }

    .academy-home__image img{
        width:100%;
        height:100%;
    }

    .academy-home .btn{
        width:100%;
    }

}

@media (max-width:576px){

    .academy-home__image{
        max-height:300px;
    }

}

/* ==========================================================
   HOME CTA
========================================================== */

/* ----------------------------------------------------------
   SECTION
---------------------------------------------------------- */

.home-cta{
    background:var(--navy-dark);

    border-top:1px solid var(--border);
}


/* ----------------------------------------------------------
   LAYOUT
---------------------------------------------------------- */

.home-cta__content{
    max-width:760px;
}


/* ----------------------------------------------------------
   SECTION HEADER
---------------------------------------------------------- */

.home-cta .section-header{
    margin-bottom:2rem;
}

.home-cta .section-title{
    max-width:900px;
    color:var(--white);
}

.home-cta .section-description{
    max-width:900px;
    color:var(--white);
}


/* ----------------------------------------------------------
   ACTIONS
---------------------------------------------------------- */

.home-cta__actions{
    display:flex;
    flex-wrap:wrap;

    gap:1rem;

    margin-top:2.5rem;
}


/* ----------------------------------------------------------
   TABLET
---------------------------------------------------------- */

@media (max-width:991px){

    .home-cta__content{
        margin:0 auto;

        text-align:center;
    }

    .home-cta__actions{
        justify-content:center;

        gap:18px;
    }

}


/* ----------------------------------------------------------
   MOBILE
---------------------------------------------------------- */

@media (max-width:767px){

    .home-cta .section-header{
        margin-bottom:1.5rem;
    }

    .home-cta__actions{
        display:flex;
        flex-direction:column;
        align-items:stretch;

        gap:14px;

        margin-top:2rem;
    }

    .home-cta__actions .btn-primary,
    .home-cta__actions .btn-secondary{
        width:100%;
    }

}

@media (max-width:576px){

    .home-cta__actions{
        gap:12px;
    }

}


/* ----------------------------------------------------------
   REDUCED MOTION
---------------------------------------------------------- */

@media (prefers-reduced-motion:reduce){

    .home-cta *,
    .home-cta *::before,
    .home-cta *::after{
        animation:none !important;
        transition:none !important;
    }

}