/* =========================================================
   ADMITH LEGACY
   STRATEGY & CONSULTING — DEDICATED PAGE

   FILE:
   css/pages/strategy-consulting.css

   PURPOSE:
   Premium Strategy & Consulting service page

   DEPENDS ON:
   css/style.css
========================================================= */


/* =========================================================
   01. PAGE FOUNDATION
========================================================= */

.strategy-page {

    position: relative;

    overflow: hidden;

    background:
        #ffffff;

    color:
        #111412;

}


/* =========================================================
   02. GLOBAL PAGE LABELS
========================================================= */

.strategy-page .section-label {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    color:
        #3d9865;

    font-size:
        0.72rem;

    font-weight:
        800;

    letter-spacing:
        0.18em;

    line-height:
        1;

    text-transform:
        uppercase;

}


.strategy-page .section-label::before {

    content:
        "";

    width:
        8px;

    height:
        8px;

    flex-shrink:
        0;

    border-radius:
        50%;

    background:
        #5bb780;

    box-shadow:

        0
        0
        0
        5px
        rgba(
            91,
            183,
            128,
            0.12
        );

}


/* =========================================================
   03. STRATEGY HERO
========================================================= */

.strategy-hero {

    position:
        relative;

    isolation:
        isolate;

    min-height:
        min(
            900px,
            92vh
        );

    display:
        flex;

    align-items:
        center;

    overflow:
        hidden;

    padding:
        clamp(
            8rem,
            12vw,
            11rem
        )
        0
        clamp(
            6rem,
            9vw,
            8rem
        );

    background:

        radial-gradient(
            circle at 8% 15%,
            rgba(
                91,
                183,
                128,
                0.12
            ),
            transparent 30%
        ),

        radial-gradient(
            circle at 92% 75%,
            rgba(
                150,
                20,
                20,
                0.055
            ),
            transparent 28%
        ),

        linear-gradient(
            135deg,
            #f5faf7 0%,
            #ffffff 48%,
            #f7f9f8 100%
        );

}


.strategy-hero-grid {

    position:
        absolute;

    inset:
        0;

    z-index:
        -2;

    opacity:
        0.42;

    background-image:

        linear-gradient(
            rgba(
                22,
                42,
                31,
                0.035
            )
            1px,
            transparent
            1px
        ),

        linear-gradient(
            90deg,
            rgba(
                22,
                42,
                31,
                0.035
            )
            1px,
            transparent
            1px
        );

    background-size:
        72px
        72px;

    mask-image:

        linear-gradient(
            to bottom,
            transparent,
            black 18%,
            black 80%,
            transparent
        );

    pointer-events:
        none;

}


.strategy-hero-glow {

    position:
        absolute;

    z-index:
        -1;

    border-radius:
        50%;

    filter:
        blur(
            10px
        );

    pointer-events:
        none;

}


.strategy-hero-glow-one {

    top:
        10%;

    right:
        18%;

    width:
        300px;

    height:
        300px;

    background:
        rgba(
            91,
            183,
            128,
            0.06
        );

}


.strategy-hero-glow-two {

    bottom:
        8%;

    left:
        10%;

    width:
        240px;

    height:
        240px;

    background:
        rgba(
            150,
            20,
            20,
            0.035
        );

}


/* =========================================================
   04. HERO LAYOUT
========================================================= */

.strategy-hero-layout {

    display:
        grid;

    grid-template-columns:
        minmax(
            0,
            1.05fr
        )
        minmax(
            420px,
            0.95fr
        );

    align-items:
        center;

    gap:
        clamp(
            4rem,
            8vw,
            9rem
        );

}


/* =========================================================
   05. HERO CONTENT
========================================================= */

.strategy-hero-content {

    max-width:
        760px;

}


.strategy-eyebrow {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        12px;

    margin-bottom:
        1.8rem;

    color:
        #3d9865;

    font-size:
        0.72rem;

    font-weight:
        800;

    letter-spacing:
        0.18em;

    text-transform:
        uppercase;

}


.strategy-eyebrow::before {

    content:
        "";

    width:
        34px;

    height:
        1px;

    background:
        #5bb780;

}


.strategy-hero-content h1 {

    max-width:
        780px;

    margin:
        0;

    color:
        #111412;

    font-size:
        clamp(
            3.2rem,
            6vw,
            6.5rem
        );

    font-weight:
        700;

    line-height:
        0.98;

    letter-spacing:
        -0.065em;

}


.strategy-hero-content h1 span {

    display:
        block;

    color:
        #3d9865;

}


.strategy-hero-content p {

    max-width:
        620px;

    margin:
        2rem
        0
        0;

    color:
        #647069;

    font-size:
        clamp(
            1rem,
            1.3vw,
            1.15rem
        );

    line-height:
        1.85;

}


.strategy-hero-actions {

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        14px;

    margin-top:
        2.5rem;

}


/* =========================================================
   06. HERO STRATEGIC VISUAL
========================================================= */

.strategy-hero-visual {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        520px;

}


.strategy-orbit {

    position:
        relative;

    width:
        min(
            480px,
            100%
        );

    aspect-ratio:
        1;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

}


.orbit-ring {

    position:
        absolute;

    border:
        1px
        solid
        rgba(
            61,
            152,
            101,
            0.18
        );

    border-radius:
        50%;

    animation:
        strategyOrbit
        16s
        linear
        infinite;

}


.orbit-ring-one {

    width:
        100%;

    height:
        100%;

}


.orbit-ring-two {

    width:
        72%;

    height:
        72%;

    animation-duration:
        12s;

    animation-direction:
        reverse;

}


.orbit-ring-three {

    width:
        46%;

    height:
        46%;

    animation-duration:
        9s;

}


.strategy-core {

    position:
        relative;

    z-index:
        5;

    width:
        190px;

    height:
        190px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px
        solid
        rgba(
            61,
            152,
            101,
            0.28
        );

    border-radius:
        50%;

    background:

        radial-gradient(
            circle at 35% 30%,
            rgba(
                255,
                255,
                255,
                0.98
            ),
            rgba(
                235,
                246,
                239,
                0.95
            )
        );

    box-shadow:

        0
        25px
        70px
        rgba(
            35,
            78,
            53,
            0.13
        ),

        inset
        0
        1px
        0
        rgba(
            255,
            255,
            255,
            1
        );

}


.strategy-core-label {

    color:
        #3d9865;

    font-size:
        0.62rem;

    font-weight:
        800;

    letter-spacing:
        0.2em;

}


.strategy-core strong {

    margin-top:
        8px;

    color:
        #111412;

    font-size:
        1.6rem;

    letter-spacing:
        -0.04em;

}


.strategy-core-line {

    width:
        38px;

    height:
        1px;

    margin:
        12px
        0;

    background:
        #5bb780;

}


.strategy-core-subtitle {

    color:
        #718078;

    font-size:
        0.62rem;

    letter-spacing:
        0.03em;

}


.strategy-node {

    position:
        absolute;

    z-index:
        6;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    width:
        100px;

    height:
        100px;

    border:
        1px
        solid
        rgba(
            25,
            40,
            31,
            0.09
        );

    border-radius:
        50%;

    background:
        rgba(
            255,
            255,
            255,
            0.82
        );

    box-shadow:
        0
        12px
        35px
        rgba(
            20,
            35,
            27,
            0.08
        );

    backdrop-filter:
        blur(
            12px
        );

    animation:
        strategyFloat
        5s
        ease-in-out
        infinite;

}


.strategy-node span {

    color:
        #5bb780;

    font-size:
        0.58rem;

    font-weight:
        800;

}


.strategy-node strong {

    margin-top:
        5px;

    color:
        #171a18;

    font-size:
        0.72rem;

}


.strategy-node-one {

    top:
        3%;

    left:
        48%;

}


.strategy-node-two {

    right:
        0%;

    top:
        50%;

    animation-delay:
        -1.5s;

}


.strategy-node-three {

    bottom:
        4%;

    left:
        10%;

    animation-delay:
        -3s;

}


/* =========================================================
   07. STRATEGIC INTRODUCTION
========================================================= */

.strategy-introduction {

    padding:
        clamp(
            6rem,
            10vw,
            10rem
        )
        0;

    background:
        #ffffff;

}


.strategy-intro-grid {

    display:
        grid;

    grid-template-columns:
        0.7fr
        1.3fr;

    gap:
        clamp(
            3rem,
            8vw,
            9rem
        );

    align-items:
        start;

}


.strategy-intro-label {

    padding-top:
        8px;

}


.strategy-intro-content {

    max-width:
        850px;

}


.strategy-intro-content h2 {

    max-width:
        850px;

    margin:
        0;

    color:
        #111412;

    font-size:
        clamp(
            2.4rem,
            4vw,
            4.5rem
        );

    font-weight:
        700;

    line-height:
        1.04;

    letter-spacing:
        -0.055em;

}


.strategy-intro-content p {

    max-width:
        720px;

    margin:
        2rem
        0
        0;

    color:
        #657069;

    font-size:
        1rem;

    line-height:
        1.85;

}


/* =========================================================
   08. CAPABILITIES
========================================================= */

.strategy-capabilities {

    position:
        relative;

    isolation:
        isolate;

    padding:
        clamp(
            6rem,
            10vw,
            10rem
        )
        0;

    background:

        linear-gradient(
            145deg,
            #f5faf7,
            #ffffff 52%,
            #f7f9f8
        );

}


.strategy-capabilities::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        -1;

    opacity:
        0.3;

    background-image:

        linear-gradient(
            rgba(
                20,
                35,
                27,
                0.035
            )
            1px,
            transparent
            1px
        ),

        linear-gradient(
            90deg,
            rgba(
                20,
                35,
                27,
                0.035
            )
            1px,
            transparent
            1px
        );

    background-size:
        70px
        70px;

}


.strategy-section-heading {

    max-width:
        760px;

    margin:
        0
        auto
        4.5rem;

    text-align:
        center;

}


.strategy-section-heading h2 {

    margin:
        1.4rem
        0
        0;

    color:
        #111412;

    font-size:
        clamp(
            2.4rem,
            4vw,
            4.5rem
        );

    line-height:
        1.05;

    letter-spacing:
        -0.055em;

}


.strategy-section-heading p {

    max-width:
        650px;

    margin:
        1.5rem
        auto
        0;

    color:
        #657069;

    line-height:
        1.8;

}


.strategy-capability-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(
                0,
                1fr
            )
        );

    gap:
        20px;

}


.strategy-capability-card {

    position:
        relative;

    min-height:
        360px;

    padding:
        2.25rem;

    overflow:
        hidden;

    border:
        1px
        solid
        rgba(
            25,
            40,
            31,
            0.09
        );

    border-radius:
        26px;

    background:
        rgba(
            255,
            255,
            255,
            0.8
        );

    box-shadow:
        0
        12px
        35px
        rgba(
            20,
            35,
            27,
            0.05
        );

    backdrop-filter:
        blur(
            12px
        );

    transition:
        transform
        0.4s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        ),

        box-shadow
        0.4s
        ease,

        border-color
        0.4s
        ease;

}


.strategy-capability-card::after {

    content:
        "";

    position:
        absolute;

    right:
        -80px;

    bottom:
        -80px;

    width:
        200px;

    height:
        200px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(
                91,
                183,
                128,
                0.13
            ),
            transparent
            70%
        );

    transition:
        transform
        0.5s
        ease;

}


.strategy-capability-card:hover {

    transform:
        translateY(
            -8px
        );

    border-color:
        rgba(
            91,
            183,
            128,
            0.3
        );

    box-shadow:
        0
        24px
        55px
        rgba(
            20,
            35,
            27,
            0.1
        );

}


.strategy-capability-card:hover::after {

    transform:
        scale(
            1.5
        );

}


.capability-number {

    position:
        absolute;

    top:
        2rem;

    right:
        2rem;

    color:
        rgba(
            61,
            152,
            101,
            0.35
        );

    font-size:
        0.72rem;

    font-weight:
        800;

    letter-spacing:
        0.12em;

}


.capability-icon {

    width:
        62px;

    height:
        62px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin-bottom:
        2rem;

    border:
        1px
        solid
        rgba(
            61,
            152,
            101,
            0.2
        );

    border-radius:
        17px;

    color:
        #3d9865;

    background:
        rgba(
            91,
            183,
            128,
            0.1
        );

    transition:
        transform
        0.35s
        ease,

        background
        0.35s
        ease;

}


.capability-icon svg {

    width:
        28px;

    height:
        28px;

}


.strategy-capability-card:hover
.capability-icon {

    transform:
        translateY(
            -4px
        )
        scale(
            1.05
        );

    background:
        rgba(
            91,
            183,
            128,
            0.17
        );

}


.strategy-capability-card h3 {

    position:
        relative;

    z-index:
        2;

    max-width:
        300px;

    margin:
        0
        0
        1rem;

    color:
        #171a18;

    font-size:
        1.35rem;

    line-height:
        1.25;

    letter-spacing:
        -0.025em;

}


.strategy-capability-card p {

    position:
        relative;

    z-index:
        2;

    max-width:
        400px;

    margin:
        0;

    color:
        #657069;

    font-size:
        0.95rem;

    line-height:
        1.8;

}


/* =========================================================
   09. STRATEGIC FRAMEWORK
========================================================= */

.strategy-framework {

    padding:
        clamp(
            7rem,
            11vw,
            11rem
        )
        0;

    background:
        #101512;

    color:
        #ffffff;

}


.framework-layout {

    display:
        grid;

    grid-template-columns:
        0.9fr
        1.1fr;

    gap:
        clamp(
            4rem,
            9vw,
            10rem
        );

    align-items:
        center;

}


.framework-content .section-label {

    color:
        #75c895;

}


.framework-content h2 {

    max-width:
        680px;

    margin:
        1.5rem
        0
        0;

    color:
        #ffffff;

    font-size:
        clamp(
            2.5rem,
            4.5vw,
            5rem
        );

    line-height:
        1;

    letter-spacing:
        -0.055em;

}


.framework-content p {

    max-width:
        600px;

    margin:
        2rem
        0
        0;

    color:
        #aebbb3;

    line-height:
        1.85;

}


.framework-content .service-link {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        12px;

    margin-top:
        2rem;

    color:
        #75c895;

    font-weight:
        700;

    text-decoration:
        none;

}


.framework-content .service-link span {

    transition:
        transform
        0.3s
        ease;

}


.framework-content .service-link:hover span {

    transform:
        translateX(
            5px
        );

}


/* =========================================================
   10. FRAMEWORK VISUAL
========================================================= */

.framework-visual {

    position:
        relative;

    display:
        flex;

    flex-direction:
        column;

    gap:
        18px;

    padding:
        2rem
        0;

}


.framework-line {

    position:
        absolute;

    top:
        0;

    bottom:
        0;

    left:
        34px;

    width:
        1px;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(
                91,
                183,
                128,
                0.5
            ),
            transparent
        );

}


.framework-step {

    position:
        relative;

    display:
        grid;

    grid-template-columns:
        68px
        1fr;

    align-items:
        center;

    gap:
        24px;

    padding:
        1.5rem;

    border:
        1px
        solid
        rgba(
            255,
            255,
            255,
            0.08
        );

    border-radius:
        18px;

    background:
        rgba(
            255,
            255,
            255,
            0.035
        );

    transition:
        transform
        0.35s
        ease,

        border-color
        0.35s
        ease,

        background
        0.35s
        ease;

}


.framework-step:hover {

    transform:
        translateX(
            8px
        );

    border-color:
        rgba(
            91,
            183,
            128,
            0.35
        );

    background:
        rgba(
            91,
            183,
            128,
            0.06
        );

}


.framework-step > span {

    position:
        relative;

    z-index:
        2;

    width:
        50px;

    height:
        50px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px
        solid
        rgba(
            91,
            183,
            128,
            0.3
        );

    border-radius:
        50%;

    color:
        #75c895;

    background:
        #101512;

    font-size:
        0.7rem;

    font-weight:
        800;

}


.framework-step strong {

    display:
        block;

    color:
        #ffffff;

    font-size:
        1.2rem;

}


.framework-step small {

    display:
        block;

    margin-top:
        5px;

    color:
        #8f9e95;

}


/* =========================================================
   11. STRATEGY PROCESS
========================================================= */

.strategy-process {

    padding:
        clamp(
            7rem,
            10vw,
            10rem
        )
        0;

    background:
        #ffffff;

}


.strategy-process-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            4,
            minmax(
                0,
                1fr
            )
        );

    gap:
        16px;

}


.strategy-process-card {

    min-height:
        300px;

    padding:
        2rem;

    border:
        1px
        solid
        rgba(
            25,
            40,
            31,
            0.09
        );

    border-radius:
        22px;

    background:
        #ffffff;

    transition:
        transform
        0.35s
        ease,

        box-shadow
        0.35s
        ease;

}


.strategy-process-card:hover {

    transform:
        translateY(
            -6px
        );

    box-shadow:
        0
        20px
        45px
        rgba(
            20,
            35,
            27,
            0.08
        );

}


.process-topline {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding-bottom:
        1.5rem;

    border-bottom:
        1px
        solid
        rgba(
            25,
            40,
            31,
            0.08
        );

}


.process-topline span:first-child {

    color:
        #5bb780;

    font-weight:
        800;

}


.process-topline span:last-child {

    color:
        #8b968f;

    font-size:
        0.62rem;

    font-weight:
        800;

    letter-spacing:
        0.15em;

}


.strategy-process-card h3 {

    margin:
        2rem
        0
        1rem;

    color:
        #111412;

    font-size:
        1.5rem;

}


.strategy-process-card p {

    margin:
        0;

    color:
        #657069;

    line-height:
        1.8;

}


/* =========================================================
   12. DELIVERABLES
========================================================= */

.strategy-deliverables {

    padding:
        clamp(
            6rem,
            10vw,
            10rem
        )
        0;

    background:
        #f6faf7;

}


.deliverables-layout {

    display:
        grid;

    grid-template-columns:
        0.8fr
        1.2fr;

    gap:
        clamp(
            4rem,
            9vw,
            10rem
        );

    align-items:
        start;

}


.deliverables-heading {

    position:
        sticky;

    top:
        120px;

}


.deliverables-heading h2 {

    max-width:
        600px;

    margin:
        1.5rem
        0
        0;

    color:
        #111412;

    font-size:
        clamp(
            2.3rem,
            4vw,
            4.3rem
        );

    line-height:
        1.04;

    letter-spacing:
        -0.05em;

}


.deliverables-list {

    border-top:
        1px
        solid
        rgba(
            25,
            40,
            31,
            0.1
        );

}


.deliverable-item {

    display:
        grid;

    grid-template-columns:
        50px
        minmax(
            160px,
            0.7fr
        )
        1fr;

    gap:
        24px;

    align-items:
        start;

    padding:
        1.8rem
        0;

    border-bottom:
        1px
        solid
        rgba(
            25,
            40,
            31,
            0.1
        );

}


.deliverable-item > span {

    color:
        #5bb780;

    font-size:
        0.7rem;

    font-weight:
        800;

}


.deliverable-item strong {

    color:
        #171a18;

    font-size:
        1rem;

}


.deliverable-item p {

    margin:
        0;

    color:
        #657069;

    font-size:
        0.92rem;

    line-height:
        1.7;

}


/* =========================================================
   13. AUDIENCE
========================================================= */

.strategy-audience {

    padding:
        clamp(
            7rem,
            10vw,
            10rem
        )
        0;

    background:
        #ffffff;

}


.audience-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            4,
            minmax(
                0,
                1fr
            )
        );

    gap:
        16px;

}


.audience-card {

    position:
        relative;

    min-height:
        280px;

    padding:
        2rem;

    overflow:
        hidden;

    border:
        1px
        solid
        rgba(
            25,
            40,
            31,
            0.09
        );

    border-radius:
        22px;

    background:
        #ffffff;

    transition:
        transform
        0.35s
        ease,

        border-color
        0.35s
        ease,

        box-shadow
        0.35s
        ease;

}


.audience-card::after {

    content:
        "";

    position:
        absolute;

    right:
        -70px;

    bottom:
        -70px;

    width:
        180px;

    height:
        180px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(
                91,
                183,
                128,
                0.12
            ),
            transparent
            70%
        );

}


.audience-card:hover {

    transform:
        translateY(
            -6px
        );

    border-color:
        rgba(
            91,
            183,
            128,
            0.3
        );

    box-shadow:
        0
        20px
        45px
        rgba(
            20,
            35,
            27,
            0.07
        );

}


.audience-number {

    color:
        #5bb780;

    font-size:
        0.7rem;

    font-weight:
        800;

}


.audience-card h3 {

    margin:
        2rem
        0
        1rem;

    color:
        #171a18;

    font-size:
        1.25rem;

}


.audience-card p {

    margin:
        0;

    color:
        #657069;

    font-size:
        0.92rem;

    line-height:
        1.75;

}


/* =========================================================
   14. FINAL CTA
========================================================= */

.strategy-cta {

    position:
        relative;

    isolation:
        isolate;

    overflow:
        hidden;

    padding:
        clamp(
            7rem,
            12vw,
            12rem
        )
        0;

    background:

        radial-gradient(
            circle at 20% 20%,
            rgba(
                91,
                183,
                128,
                0.13
            ),
            transparent
            30%
        ),

        radial-gradient(
            circle at 80% 80%,
            rgba(
                150,
                20,
                20,
                0.07
            ),
            transparent
            30%
        ),

        #111412;

}


.strategy-cta-grid {

    position:
        absolute;

    inset:
        0;

    z-index:
        -1;

    opacity:
        0.2;

    background-image:

        linear-gradient(
            rgba(
                255,
                255,
                255,
                0.08
            )
            1px,
            transparent
            1px
        ),

        linear-gradient(
            90deg,
            rgba(
                255,
                255,
                255,
                0.08
            )
            1px,
            transparent
            1px
        );

    background-size:
        80px
        80px;

}


.strategy-cta-inner {

    max-width:
        850px;

    margin:
        0
        auto;

    text-align:
        center;

}


.strategy-cta-inner .section-label {

    color:
        #75c895;

}


.strategy-cta-inner h2 {

    margin:
        1.5rem
        0
        0;

    color:
        #ffffff;

    font-size:
        clamp(
            3rem,
            6vw,
            6rem
        );

    line-height:
        0.98;

    letter-spacing:
        -0.06em;

}


.strategy-cta-inner p {

    max-width:
        600px;

    margin:
        1.8rem
        auto
        0;

    color:
        #aebbb3;

    line-height:
        1.8;

}


.strategy-cta-inner .btn {

    margin-top:
        2.5rem;

}


/* =========================================================
   15. ANIMATIONS
========================================================= */

@keyframes strategyOrbit {

    from {

        transform:
            rotate(
                0deg
            );

    }

    to {

        transform:
            rotate(
                360deg
            );

    }

}


@keyframes strategyFloat {

    0%,
    100% {

        transform:
            translateY(
                0
            );

    }

    50% {

        transform:
            translateY(
                -10px
            );

    }

}


/* =========================================================
   16. TABLET
========================================================= */

@media (max-width: 1100px) {

    .strategy-hero-layout {

        grid-template-columns:
            1fr;

        gap:
            4rem;

    }


    .strategy-hero-content {

        max-width:
            850px;

        margin:
            0
            auto;

        text-align:
            center;

    }


    .strategy-hero-content p {

        margin-inline:
            auto;

    }


    .strategy-hero-actions {

        justify-content:
            center;

    }


    .strategy-hero-visual {

        min-height:
            440px;

    }


    .strategy-capability-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );

    }


    .strategy-process-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );

    }


    .audience-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );

    }

}


/* =========================================================
   17. TABLET / SMALL LAPTOP
========================================================= */

@media (max-width: 900px) {

    .strategy-intro-grid {

        grid-template-columns:
            1fr;

        gap:
            2rem;

    }


    .framework-layout {

        grid-template-columns:
            1fr;

        gap:
            4rem;

    }


    .deliverables-layout {

        grid-template-columns:
            1fr;

        gap:
            4rem;

    }


    .deliverables-heading {

        position:
            static;

    }

}


/* =========================================================
   18. MOBILE
========================================================= */

@media (max-width: 700px) {

    .strategy-hero {

        min-height:
            auto;

        padding:
            7rem
            0
            5rem;

    }


    .strategy-hero-content h1 {

        font-size:
            clamp(
                2.8rem,
                13vw,
                4.5rem
            );

    }


    .strategy-hero-content p {

        font-size:
            0.95rem;

    }


    .strategy-hero-actions {

        flex-direction:
            column;

        align-items:
            stretch;

    }


    .strategy-hero-actions .btn {

        width:
            100%;

        justify-content:
            center;

    }


    .strategy-hero-visual {

        min-height:
            360px;

    }


    .strategy-orbit {

        width:
            min(
                350px,
                100%
            );

    }


    .strategy-core {

        width:
            145px;

        height:
            145px;

    }


    .strategy-core strong {

        font-size:
            1.25rem;

    }


    .strategy-node {

        width:
            76px;

        height:
            76px;

    }


    .strategy-node strong {

        font-size:
            0.6rem;

    }


    .strategy-capability-grid {

        grid-template-columns:
            1fr;

    }


    .strategy-capability-card {

        min-height:
            auto;

        padding:
            1.75rem;

    }


    .strategy-process-grid {

        grid-template-columns:
            1fr;

    }


    .strategy-process-card {

        min-height:
            auto;

    }


    .audience-grid {

        grid-template-columns:
            1fr;

    }


    .audience-card {

        min-height:
            auto;

    }


    .deliverable-item {

        grid-template-columns:
            40px
            1fr;

        gap:
            12px;

    }


    .deliverable-item p {

        grid-column:
            2;

    }


    .strategy-framework {

        padding:
            5rem
            0;

    }


    .framework-step {

        grid-template-columns:
            54px
            1fr;

        padding:
            1.2rem;

    }


    .framework-line {

        left:
            27px;

    }


    .strategy-cta-inner h2 {

        font-size:
            clamp(
                2.8rem,
                13vw,
                4.5rem
            );

    }

}


/* =========================================================
   19. SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .strategy-hero {

        padding-top:
            6rem;

    }


    .strategy-hero-visual {

        min-height:
            300px;

    }


    .strategy-orbit {

        width:
            300px;

    }


    .strategy-node-one {

        top:
            0;

    }


    .strategy-node-two {

        right:
            -2%;

    }


    .strategy-node-three {

        left:
            0;

    }


    .strategy-node {

        width:
            68px;

        height:
            68px;

    }


    .strategy-node span {

        font-size:
            0.5rem;

    }


    .strategy-node strong {

        font-size:
            0.55rem;

    }


    .strategy-core {

        width:
            125px;

        height:
            125px;

    }


    .strategy-core-label {

        font-size:
            0.5rem;

    }


    .strategy-core strong {

        font-size:
            1.05rem;

    }


    .strategy-core-subtitle {

        font-size:
            0.5rem;

    }


    .strategy-section-heading {

        margin-bottom:
            3rem;

    }


    .strategy-section-heading h2 {

        font-size:
            2.3rem;

    }


    .strategy-intro-content h2 {

        font-size:
            2.3rem;

    }


    .framework-content h2 {

        font-size:
            2.4rem;

    }


    .deliverables-heading h2 {

        font-size:
            2.3rem;

    }

}


/* =========================================================
   20. REDUCED MOTION
========================================================= */

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

    .strategy-page *,
    .strategy-page *::before,
    .strategy-page *::after {

        animation-duration:
            0.01ms
            !important;

        animation-iteration-count:
            1
            !important;

        scroll-behavior:
            auto
            !important;

        transition-duration:
            0.01ms
            !important;

    }


    .strategy-capability-card:hover,
    .strategy-process-card:hover,
    .audience-card:hover,
    .framework-step:hover {

        transform:
            none;

    }

}


/* =========================================================
   END STRATEGY & CONSULTING
========================================================= */



/* =========================================================
   STRATEGY & CONSULTING
   EXPLORE OUR APPROACH CTA
========================================================= */

.strategy-hero-actions {
    position: relative;
    z-index: 10;

    display: flex;
    align-items: center;
    gap: 16px;

    margin-top: 32px;
}


/* =========================================================
   EXPLORE OUR APPROACH BUTTON
========================================================= */

.strategy-hero-actions .btn-secondary {

    position: relative;
    z-index: 2;

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

    min-height: 52px;

    padding: 14px 24px;

    color: #171a18;

    background: rgba(255, 255, 255, 0.96);

    border: 1px solid rgba(255, 255, 255, 0.75);

    border-radius: 999px;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);

    text-decoration: none;

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


/* =========================================================
   BUTTON HOVER
========================================================= */

.strategy-hero-actions .btn-secondary:hover {

    transform: translateY(-4px);

    color: #ffffff;

    background: #3d9865;

    border-color: #3d9865;

    box-shadow:
        0 16px 35px rgba(61, 152, 101, 0.25);

}


/* =========================================================
   BUTTON FOCUS
========================================================= */

.strategy-hero-actions .btn-secondary:focus-visible {

    outline: 3px solid rgba(91, 183, 128, 0.35);

    outline-offset: 4px;

}


/* =========================================================
   HERO ACTIONS — MOBILE
========================================================= */

@media (max-width: 700px) {

    .strategy-hero-actions {

        flex-direction: column;

        align-items: stretch;

        width: 100%;

        margin-top: 28px;

    }


    .strategy-hero-actions .btn-secondary {

        width: 100%;

    }

}