/* ============================================
   COMMUNITY & CITIZENSHIP PAGE
   Bold, full-width, giant typography
   ============================================ */

/* Tighter vertical rhythm — every body section becomes much shorter top/bottom,
   inner header/intro/figure margins collapse. Mirrors the sustainability page. */
[id="main-content"] .cm-mission,
[id="main-content"] .cm-strat,
[id="main-content"] .cm-training,
[id="main-content"] .cm-diverse,
[id="main-content"] .cm-nextgen,
[id="main-content"] .cm-quote,
[id="main-content"] .cm-serve,
[id="main-content"] .cm-supplier {
    padding-top: clamp(24px, 3vw, 56px);
    padding-bottom: clamp(24px, 3vw, 56px);
}

/* Tighten any padded inner cards that used --section-padding for their own paint */
[id="main-content"] .cm-strat__panel,
[id="main-content"] .cm-supplier__card {
    padding: clamp(28px, 4vw, 64px) clamp(2rem, 4vw, 4rem);
}

/* Collapse the oversized header margin-bottom inside the nextgen section */
[id="main-content"] .cm-nextgen__head { margin-bottom: clamp(1.25rem, 3vw, 2.5rem); }


/* ============================================
   1. HERO — Ripple + split
   ============================================ */
.cm-hero {
    position: relative;
    min-height: 100vh;
    display: flex; align-items: center;
    background: #FAF4EB;
    overflow: hidden;
}

.cm-hero__ripples {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 100%; height: 100%; pointer-events: none;
}

.cm-hero__circle {
    position: absolute; top: 50%; left: 50%;
    border-radius: 50%;
    border: 1px solid rgba(50,48,47,0.06);
    transform: translate(-50%, -50%);
    animation: cmRipple 8s ease-in-out infinite;
}

.cm-hero__circle--1 { width: 30vw; height: 30vw; }
.cm-hero__circle--2 { width: 55vw; height: 55vw; animation-delay: 0.5s; }
.cm-hero__circle--3 { width: 80vw; height: 80vw; animation-delay: 1s; }
.cm-hero__circle--4 { width: 110vw; height: 110vw; animation-delay: 1.5s; }

@keyframes cmRipple {
    0%, 100% { opacity: 0.4; transform: translate(-50%,-50%) scale(1); }
    50% { opacity: 1; transform: translate(-50%,-50%) scale(1.03); }
}

.cm-hero__inner {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: 1fr 1.1fr;
    gap: var(--space-10);
    max-width: 1600px; margin: 0 auto;
    padding: 160px var(--container-padding) clamp(60px,8vw,100px);
    align-items: center; min-height: 100vh;
}

.cm-hero__left { position: relative; }

.cm-hero__ghost {
    font-family: var(--font-heading);
    font-size: clamp(5rem,12vw,11rem);
    font-weight: 800; color: rgba(50,48,47,0.03);
    line-height: 0.85; display: block;
    pointer-events: none; user-select: none;
}

.cm-hero__title-main {
    display: block; font-family: var(--font-heading);
    font-size: clamp(3rem,6vw,5.5rem);
    font-weight: var(--font-semibold);
    line-height: var(--leading-none);
    letter-spacing: -0.6px; color: var(--color-text-primary);
}

.cm-hero__title-script {
    display: block; font-family: 'Dancing Script', cursive;
    /* Floor bumped from 2rem → 2.4rem so the cursive subhead reads as
       a confident counter-voice to the display line on phones. */
    font-size: clamp(2.4rem, 5.5vw, 3.5rem);
    font-weight: 700; color: var(--color-text-primary);
    position: relative; padding-bottom: 0.2em;
}

.cm-hero__title-script::after {
    content: ''; position: absolute; left: 0; bottom: 0;
    width: 50%; height: 0.18em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 16' preserveAspectRatio='none'%3E%3Cpath d='M 4,8 C 50,3 130,2 200,6 C 270,10 350,8 396,5 C 350,11 270,15 200,12 C 130,9 50,12 4,13 Z' fill='%23FF1A0F' opacity='0.92'/%3E%3C/svg%3E");
    background-size: 100% 100%;
}

.cm-hero__lead {
    font-family: var(--font-body); font-size: var(--text-lg);
    color: var(--color-text-secondary); line-height: var(--leading-normal);
    margin-top: var(--space-6); max-width: 480px;
}

.cm-hero__right { display: flex; justify-content: center; }

.cm-hero__photo {
    border-radius: var(--radius-lg); overflow: hidden;
    box-shadow: 0 16px 48px rgba(0,0,0,0.12);
    max-width: 560px; width: 100%;
}

.cm-hero__photo img { width: 100%; height: auto; display: block; }

@media (max-width: 1024px) {
    .cm-hero__inner { grid-template-columns: 1fr; padding-top: 130px; gap: var(--space-8); }
}


/* ============================================
   2. MISSION — Massive full-width statement
   ============================================ */
.cm-mission {
    background: #FFFFFF;
    padding: var(--section-padding) 0;
}

.cm-mission__inner {
    padding: 0 clamp(2rem, 5vw, 6rem);
}

.cm-mission__heading {
    font-family: var(--font-heading);
    font-size: clamp(2.2rem, 4.5vw, 4rem);
    font-weight: var(--font-regular);
    line-height: var(--leading-tight);
    letter-spacing: -0.6px;
    color: var(--color-text-primary);
    margin: 0 0 var(--space-10);
}

.cm-mission__heading em {
    font-style: normal;
    font-family: 'Dancing Script', cursive;
    font-size: 1.05em;
}

.cm-mission__cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
}

.cm-mission__cols p {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    line-height: var(--leading-normal);
    margin: 0;
    background: var(--color-pure-white);
    border: 0.5px solid #d8d8d4;
    border-radius: 18px;
    padding: clamp(1.75rem, 3vw, 2.5rem);
    box-shadow: 0 22px 50px -28px rgba(0, 0, 0, 0.22),
                0 2px 6px rgba(0, 0, 0, 0.04);
    transition: transform 520ms cubic-bezier(0.4, 0, 0.1, 1),
                box-shadow 520ms cubic-bezier(0.4, 0, 0.1, 1);
}

.cm-mission__cols p:hover {
    transform: translateY(-3px);
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.28),
                0 4px 10px rgba(0, 0, 0, 0.05);
}

@media (max-width: 768px) {
    .cm-mission__cols { grid-template-columns: 1fr; }
}


/* ============================================
   3. STRATEGIES — Turner-style 3-column
   ============================================ */
.cm-strat {
    background: #F5F5F5;
    padding: var(--section-padding) 0;
}

.cm-strat__layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    min-height: 70vh;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 var(--container-padding);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

/* Sidebar — dark card like team blueprint */
.cm-strat__sidebar {
    background: #1a1814;
    padding: var(--space-10) var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    position: relative;
}

/* Blueprint grid on sidebar */
.cm-strat__sidebar::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
}

.cm-strat__nav {
    display: flex; align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    background: none; border: none;
    border-left: 3px solid transparent;
    cursor: pointer; text-align: left;
    position: relative; z-index: 1;
    transition: color var(--duration-base) var(--ease-out);
}

.cm-strat__indicator {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 0;
    background: rgba(255,255,255,0.06);
    border-left: 3px solid #FFFFFF;
    z-index: 0;
    pointer-events: none;
    transition: transform 520ms cubic-bezier(0.4, 0, 0.1, 1), height 520ms cubic-bezier(0.4, 0, 0.1, 1), width 520ms cubic-bezier(0.4, 0, 0.1, 1);
}

.cm-strat__nav-num {
    font-family: var(--font-heading);
    font-size: var(--text-sm); font-weight: var(--font-bold);
    color: rgba(255,255,255,0.2);
    min-width: 24px;
    transition: color var(--duration-base) var(--ease-out);
}

.cm-strat__nav--active .cm-strat__nav-num { color: #FFFFFF; }

.cm-strat__nav-label {
    font-family: var(--font-heading);
    font-size: var(--text-base); font-weight: var(--font-semibold);
    color: rgba(255,255,255,0.4);
    letter-spacing: -0.6px;
    transition: color var(--duration-base) var(--ease-out);
}

.cm-strat__nav--active .cm-strat__nav-label,
.cm-strat__nav:hover .cm-strat__nav-label { color: #FFFFFF; }

/* Panels — text + image side by side */
.cm-strat__panel {
    display: none;
    grid-template-columns: 1fr 1fr;
    animation: cmPanelIn 0.5s var(--ease-out-expo) forwards;
}

@keyframes cmPanelIn {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

.cm-strat__panel--active { display: grid; }

.cm-strat__panel-text {
    padding: clamp(2rem, 4vw, 4rem);
    display: flex; flex-direction: column;
    justify-content: center;
}

.cm-strat__panel-title {
    font-family: var(--font-heading);
    font-size: clamp(1.6rem, 2.5vw, 2.4rem);
    font-weight: var(--font-semibold);
    letter-spacing: -0.6px; color: var(--color-text-primary);
    line-height: var(--leading-tight);
    margin: 0 0 var(--space-5);
}

.cm-strat__panel-text p {
    font-family: var(--font-body); font-size: var(--text-base);
    color: var(--color-text-secondary); line-height: var(--leading-normal);
    margin: 0;
}

.cm-strat__panel-img {
    overflow: hidden;
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

.cm-strat__panel-img img {
    width: 100%; height: 100%; object-fit: cover;
    min-height: 400px;
}

/* Mobile stepper — hidden on desktop, replaces the sidebar tab strip
   on mobile/tablet portrait. Desktop default: */
.cm-strat__mobile-nav { display: none; }

@media (max-width: 900px) {
    /* Page-level horizontal-scroll guard. If anything on the
       community page widens past the viewport (ripple circles in
       the hero, oversized images, etc.) the body becomes
       horizontally scrollable and every element below it appears
       shifted left — that's what reads as "the stepper isn't
       centered" in the screenshot. Clipping at the main element
       keeps the page width-locked to the viewport. */
    main#main-content {
        overflow-x: clip;
    }

    .cm-strat__layout { grid-template-columns: 1fr; }

    /* Hide the sidebar entirely on mobile — the horizontal-scroll
       strip of four tab buttons was awkward to navigate. The hidden
       sidebar still owns the active state (the JS click-cycles its
       buttons); the visible UI is now the stepper below. */
    .cm-strat__sidebar { display: none; }

    /* Allow the sticky stepper child to render past the layout's
       rounded-corner clip on mobile. The desktop `overflow: hidden`
       is there to clip the sidebar/panel corners against the
       layout's border-radius — on mobile (1-column stack) those
       inner corners aren't clipped anyway, and the overflow rule
       would otherwise pin a sticky child to the layout's box and
       stop it from sticking to the viewport top. */
    .cm-strat__layout { overflow: visible; }

    /* Stepper bar — dark pill matching the sidebar's dark surface,
       with two 44px circular arrow buttons flanking the current
       strategy name + index. Tap an arrow to cycle prev/next.
       Sticky: pins below the site header (76px tall on mobile, so
       an 80px top offset clears it with 4px of breathing room) and
       un-sticks naturally when the .cm-strat section scrolls past
       the viewport. z-index sits above the panel content but below
       the floating page-nav pill (which uses z-index: 50). */
    /* Styled to match the homepage .page-explorer__pager — square-ish
       buttons (56x56, radius 10), bigger drop shadow, larger label,
       sticky at top:0 so it pins to the viewport top while the
       section is in view. Background kept dark (#1a1814) instead of
       the homepage's red since this stepper sits inside the dark
       strategies section rather than against page chrome. */
    .cm-strat__mobile-nav {
        display: flex;
        align-items: stretch;
        gap: 0.5rem;
        padding: 0.55rem;
        background: #1a1814;
        color: #FFFFFF;
        border-radius: 14px;
        box-shadow: 0 10px 28px -10px rgba(0, 0, 0, 0.35);
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        margin: 0 auto var(--space-4);
        position: sticky;
        top: 0;
        z-index: 20;
    }
    .cm-strat__mobile-btn {
        flex-shrink: 0;
        width: 56px;
        height: 56px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: none;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.16);
        color: #fff;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: background 0.15s ease, transform 0.15s ease;
        font-size: 1.25rem;
        line-height: 1;
    }
    .cm-strat__mobile-btn:active {
        background: rgba(255, 255, 255, 0.3);
        transform: scale(0.94);
    }
    .cm-strat__mobile-current {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 0.15rem;
        padding: 0 0.25rem;
        text-align: center;
    }
    .cm-strat__mobile-num {
        font-family: var(--font-body, "Urbanist", sans-serif);
        font-size: 0.58rem;
        font-weight: 700;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.7);
    }
    .cm-strat__mobile-label {
        font-family: var(--font-body, "Urbanist", sans-serif);
        font-size: 0.95rem;
        font-weight: 700;
        line-height: 1.15;
        color: #fff;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .cm-strat__panel--active { grid-template-columns: 1fr; }
    .cm-strat__panel-img img {
        min-height: 250px;
        max-width: 100%;
    }

    /* Grid items default to min-width:auto (= their min-content size).
       The panel images are full-resolution photos (typically 1200-1920px
       intrinsic width), so their min-content was forcing the panel grid
       column to that natural width — making the panel wider than the
       viewport and pushing the WHOLE strategies section past the right
       edge. That body-level horizontal scroll is what was making the
       sticky stepper appear "not centered" in the screenshots. Setting
       min-width:0 on every grid item in the chain lets each one shrink
       below its intrinsic content size and respect the 1fr column. */
    .cm-strat__panel,
    .cm-strat__panel-text,
    .cm-strat__panel-img {
        min-width: 0;
    }
}


/* ============================================
   4. TRAINING — Full split edge-to-edge
   ============================================ */
.cm-training {
    background: #FFFFFF;
    padding: var(--section-padding) 0;
}

.cm-training__layout {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 var(--container-padding);
    gap: var(--space-8);
    align-items: center;
}

.cm-training__image {
    overflow: hidden;
    min-height: 560px;
    position: relative;
    border-radius: var(--radius-lg);
}

.cm-training__image img {
    position: absolute; top: -10%; left: 0;
    width: 100%; height: 120%; object-fit: cover;
    will-change: transform;
}

.cm-training__text {
    padding: clamp(3rem, 5vw, 5rem) clamp(2rem, 4vw, 5rem);
    display: flex; flex-direction: column;
    justify-content: center;
}

.cm-training__title {
    font-family: var(--font-heading);
    font-size: clamp(1.6rem, 2.8vw, 2.6rem);
    font-weight: var(--font-semibold);
    letter-spacing: -0.6px; color: var(--color-text-primary);
    line-height: var(--leading-tight);
    margin: 0 0 var(--space-6);
}

.cm-training__text p {
    font-family: var(--font-body); font-size: var(--text-base);
    color: var(--color-text-secondary); line-height: var(--leading-normal);
    margin: 0;
}

@media (max-width: 900px) {
    .cm-training__layout { grid-template-columns: 1fr; }
    .cm-training__image { min-height: 300px; }
}


/* ============================================
   5. DIVERSE WORKFORCE — Blueprint card + photo split
   ============================================ */
.cm-diverse {
    background: #F5F5F5;
    padding: var(--section-padding) 0;
}

.cm-diverse__layout {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 var(--container-padding);
    gap: 0;
    border-radius: var(--radius-lg);
    overflow: visible;
    position: relative;
}

/* Dark blueprint card — left side */
.cm-diverse__card {
    background: #1a1814;
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
    overflow: hidden;
    position: relative;
}

/* Blueprint grid */
.cm-diverse__card::before {
    content: ''; position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
}

.cm-diverse__card-bar {
    display: flex; justify-content: space-between;
    padding: var(--space-3) var(--space-6);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    font-family: 'Courier New', monospace;
    font-size: 0.55rem; font-weight: 700;
    letter-spacing: 0.2em; text-transform: uppercase;
    color: rgba(255,255,255,0.2);
    position: relative; z-index: 1;
}

.cm-diverse__card-body {
    padding: clamp(2.5rem, 4vw, 4rem);
    position: relative; z-index: 1;
}

.cm-diverse__title {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 3.5vw, 3rem);
    font-weight: var(--font-semibold);
    letter-spacing: -0.6px; color: #FFFFFF;
    line-height: var(--leading-tight);
    margin: 0 0 var(--space-5);
}

.cm-diverse__card-body p {
    font-family: var(--font-body); font-size: var(--text-base);
    color: rgba(255,255,255,0.55); line-height: var(--leading-normal);
    margin: 0 0 var(--space-4);
}

/* Image — right side */
.cm-diverse__image-wrap {
    position: relative;
}

.cm-diverse__image {
    overflow: hidden;
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    height: 100%;
}

.cm-diverse__image img {
    width: 100%; height: 100%; object-fit: cover;
    min-height: 450px;
}

/* Double-ring geometric bridge — overlaps both sides */
.cm-diverse__bridge {
    position: absolute;
    top: 50%; left: -48px;
    transform: translateY(-50%);
    width: 96px; height: 96px;
    z-index: 5;
}

.cm-diverse__bridge-outer {
    position: absolute; inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.15);
}

.cm-diverse__bridge-inner {
    position: absolute;
    inset: 14px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.1);
    background: #1a1814;
}

@media (max-width: 900px) {
    .cm-diverse__layout { grid-template-columns: 1fr; }
    .cm-diverse__card { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
    .cm-diverse__image { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
    .cm-diverse__bridge { display: none; }
    .cm-diverse__image img { min-height: 300px; }
}


/* ============================================
   6. NEXT GEN — Edge-to-edge reversed split
   ============================================ */
.cm-nextgen {
    background: #F5F5F5;
    padding: var(--section-padding) 0;
}

.cm-nextgen__layout {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 var(--container-padding);
    gap: var(--space-10);
    align-items: center;
}

.cm-nextgen__text {
    padding: clamp(3rem, 5vw, 5rem) clamp(2rem, 4vw, 4rem);
    display: flex; flex-direction: column;
    justify-content: center;
    gap: clamp(2rem, 4vw, 3.5rem);
}

.cm-nextgen__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-6);
    flex-wrap: wrap;
}

.cm-nextgen__title {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 3.5vw, 3rem);
    font-weight: var(--font-semibold);
    letter-spacing: -0.6px;
    color: var(--color-text-primary);
    line-height: var(--leading-tight);
    margin: 0;
}

/* Filter pills — "All" sits inside a circular border, others are plain text */
.cm-nextgen__filters {
    position: relative;
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2vw, 1.75rem);
    padding-top: 0.4rem;
}

/* House motion — single sliding pill behind the active filter, animated with the
   site-wide curve. JS sets transform/width/height/top from the active button's
   offsets; this rule defines the look + the easing. */
.cm-nextgen__indicator {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    background: var(--color-text-primary);
    border-radius: 999px;
    z-index: 0;
    pointer-events: none;
    transition: transform 520ms cubic-bezier(0.4, 0, 0.1, 1),
                width 520ms cubic-bezier(0.4, 0, 0.1, 1),
                height 520ms cubic-bezier(0.4, 0, 0.1, 1);
}

.cm-nextgen__filter {
    position: relative;
    z-index: 1;
    background: none;
    border: none;
    padding: 0.55rem 1rem;
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: color 520ms cubic-bezier(0.4, 0, 0.1, 1);
}

.cm-nextgen__filter:hover {
    color: var(--color-text-primary);
}

.cm-nextgen__filter--active,
.cm-nextgen__filter--active:hover {
    color: var(--color-pure-white, #fff);
}

/* Card grid — large rounded outlined cards, two per row */
.cm-nextgen__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1rem, 1.6vw, 1.5rem);
}

.cm-nextgen__card {
    border: 1.5px solid var(--color-text-primary);
    border-radius: 28px;
    padding: clamp(1.5rem, 2.5vw, 2rem) clamp(1.5rem, 2.5vw, 2rem);
    background: transparent;
    min-height: 140px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* House motion — cards translate between grid slots and fade in/out using
       the same 520ms cubic-bezier(0.4, 0, 0.1, 1) curve as the sliding pill.
       FLIP in JS clears these inline styles between phases, so the rule here
       is the resting transition the cards fall back to. */
    transition: transform 520ms cubic-bezier(0.4, 0, 0.1, 1),
                opacity 520ms cubic-bezier(0.4, 0, 0.1, 1),
                background 280ms var(--ease-out);
}

/* Leaving phase — card stays in its grid slot but fades and shrinks slightly
   so the layout below stays still until the next phase collapses it. */
.cm-nextgen__card.is-leaving {
    opacity: 0;
    transform: scale(0.94);
    pointer-events: none;
}

/* One-shot pulse on the image when the active tab changes — never blanks
   fully, so the eye reads it as a single continuous transition rather than
   an out/in cut. Same easing as the pill. */
@keyframes cmNextgenImagePulse {
    0%   { opacity: 1;    transform: scale(1); }
    45%  { opacity: 0.55; transform: scale(0.985); }
    100% { opacity: 1;    transform: scale(1); }
}

.cm-nextgen__image.is-switching {
    animation: cmNextgenImagePulse 520ms cubic-bezier(0.4, 0, 0.1, 1);
}

.cm-nextgen__card:hover {
    background: rgba(0, 0, 0, 0.03);
}

.cm-nextgen__card-title {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 3vw, 2.6rem);
    font-weight: var(--font-regular);
    letter-spacing: -0.5px;
    color: var(--color-text-primary);
    line-height: 1;
    margin: 0 0 0.6rem;
}

.cm-nextgen__card-sub {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-text-primary);
    line-height: 1.4;
    margin: 0;
}

.cm-nextgen__card.is-hidden { display: none; }

.cm-nextgen__image {
    overflow: hidden; min-height: 500px;
    position: relative;
    border-radius: var(--radius-lg);
}

.cm-nextgen__image img {
    position: absolute; top: -10%; left: 0;
    width: 100%; height: 120%; object-fit: cover;
    will-change: transform;
}

@media (max-width: 900px) {
    /* ===== Industry Mentorship — mobile-friendly layout =====
       The desktop design pairs a 1.35fr text column (title + filter
       pills + 2×2 card grid) with a tall 1fr image column. At mobile
       widths that 2-column card grid puts the 32px-floor card title
       into a ~140px column, the head's flex space-between makes the
       title and filter pills crash into each other, and the text
       container's clamp padding (3-5rem each side) eats most of the
       viewport. Resolved with a vertical stack: image on top, title
       row, filter row, single-column card list. */
    .cm-nextgen__layout { grid-template-columns: 1fr; }
    .cm-nextgen__image {
        min-height: 280px;
        order: -1;
        border-radius: var(--radius-md);
    }

    /* Tighten the text-container padding so the cards use the full
       container width rather than sitting in a half-width pocket. */
    .cm-nextgen__text {
        padding: var(--space-5) 0;
        gap: var(--space-6);
    }

    /* Stack title ABOVE filter pills (was side-by-side via space-between
       which cramped both elements once the column got narrow). */
    .cm-nextgen__head {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-3);
    }

    /* Tighter filter pill row — narrower gaps, smaller pills, allow
       wrap onto a second line on the smallest phones. The sliding
       indicator (positioned by JS from button offsets) adapts to
       the new pill sizes automatically. */
    .cm-nextgen__filters {
        gap: 4px;
        flex-wrap: wrap;
        padding-top: 0;
    }
    .cm-nextgen__filter {
        padding: 0.45rem 0.85rem;
        font-size: var(--text-xs);
    }

    /* Single-column card list — the two-column grid was forcing each
       card's title font (clamp 2rem floor) into a tight box where it
       wrapped to 2-3 lines on common phone widths. One column per row
       gives each card the full container width. */
    .cm-nextgen__grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .cm-nextgen__card {
        min-height: 0;
        padding: 1.1rem 1.4rem;
        border-radius: 18px;
    }
    .cm-nextgen__card-title {
        font-size: 1.4rem;
        margin-bottom: 0.35rem;
    }
    .cm-nextgen__card-sub {
        font-size: var(--text-sm);
    }
    .cm-nextgen__grid { grid-template-columns: 1fr; }
    .cm-nextgen__head { flex-direction: column; align-items: flex-start; }
}


/* ============================================
   7. QUOTE — Architectural drawing sheet with geometry
   ============================================ */
.cm-quote {
    padding: var(--section-padding) var(--container-padding);
    background: #F5F5F2;
}

.cm-quote__sheet {
    background: var(--color-pure-white);
    border: 0.5px solid #d8d8d4;
    max-width: 1600px;
    margin: 0 auto;
    border-radius: 18px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 22px 50px -28px rgba(0, 0, 0, 0.22),
                0 2px 6px rgba(0, 0, 0, 0.04);
    transition: transform 520ms cubic-bezier(0.4, 0, 0.1, 1),
                box-shadow 520ms cubic-bezier(0.4, 0, 0.1, 1);
}

.cm-quote__sheet:hover {
    transform: translateY(-3px);
    box-shadow: 0 32px 70px -32px rgba(0, 0, 0, 0.28),
                0 4px 12px rgba(0, 0, 0, 0.05);
}

/* Tick marks all four edges — very subtle to keep the white card aesthetic */
.cm-quote__sheet::after {
    content: ''; position: absolute; inset: 0;
    z-index: 1; pointer-events: none; opacity: 0.35;
    background:
        repeating-linear-gradient(90deg, #d0d0cc 0px, #d0d0cc 1px, transparent 1px, transparent 36px) 0 0 / 100% 6px no-repeat,
        repeating-linear-gradient(90deg, #d0d0cc 0px, #d0d0cc 1px, transparent 1px, transparent 36px) 0 100% / 100% 6px no-repeat,
        repeating-linear-gradient(180deg, #d0d0cc 0px, #d0d0cc 1px, transparent 1px, transparent 36px) 0 0 / 6px 100% no-repeat,
        repeating-linear-gradient(180deg, #d0d0cc 0px, #d0d0cc 1px, transparent 1px, transparent 36px) 100% 0 / 6px 100% no-repeat;
}

/* Concentric circles — architectural geometry */
.cm-quote__geo {
    position: absolute;
    top: 50%; right: clamp(3rem, 8vw, 10rem);
    transform: translateY(-50%);
    pointer-events: none;
}

.cm-quote__ring {
    position: absolute;
    top: 50%; left: 50%;
    border-radius: 50%;
    border: 1.5px solid rgba(50,48,47,0.05);
    transform: translate(-50%, -50%);
}

.cm-quote__ring--1 { width: 140px; height: 140px; }
.cm-quote__ring--2 { width: 240px; height: 240px; }
.cm-quote__ring--3 { width: 360px; height: 360px; }

/* Annotation bar */
.cm-quote__bar {
    display: flex; justify-content: space-between;
    padding: var(--space-3) var(--space-8);
    border-bottom: 0.5px solid #e4e4e0;
    font-family: 'Courier New', monospace;
    font-size: 0.55rem; font-weight: 700;
    letter-spacing: 0.2em; text-transform: uppercase;
    color: #b8b8b4;
    position: relative; z-index: 2;
}

.cm-quote__inner {
    position: relative; z-index: 2;
    padding: clamp(4rem, 8vw, 8rem) clamp(3rem, 6vw, 8rem);
    text-align: left;
}

.cm-quote__text {
    font-family: var(--font-heading);
    font-size: clamp(2.2rem, 5vw, 4.5rem);
    font-weight: var(--font-semibold);
    line-height: var(--leading-tight);
    letter-spacing: -0.6px;
    color: var(--color-text-primary);
    margin: 0;
    max-width: 800px;
}

.cm-quote__word {
    display: inline-block; opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.5s var(--ease-out-expo), transform 0.5s var(--ease-out-expo);
}

.cm-quote__word--visible { opacity: 1; transform: translateY(0); }

@media (max-width: 768px) {
    .cm-quote__geo { display: none; }
    .cm-quote__sheet { margin: 0 var(--space-4); }
}


/* ============================================
   8. SERVING — Big text like mission
   ============================================ */
.cm-serve {
    background: #FFFFFF;
    padding: var(--section-padding) 0;
}

.cm-serve__inner {
    padding: 0 clamp(2rem, 5vw, 6rem);
}

.cm-serve__heading {
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: var(--font-semibold);
    letter-spacing: -0.6px; color: var(--color-text-primary);
    line-height: var(--leading-tight);
    margin: 0 0 var(--space-8);
}

/* Stat cards — two large outlined cards (mirrors .usa-impact__card) */
.cm-serve__cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
    margin-bottom: clamp(3rem, 6vw, 5rem);
}

.cm-serve__card {
    padding: clamp(2.5rem, 5vw, 4rem);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-pure-white);
}

.cm-serve__value {
    font-family: var(--font-heading);
    font-size: clamp(3rem, 5.5vw, 4.5rem);
    font-weight: var(--font-regular);
    line-height: 1;
    letter-spacing: -1.5px;
    color: var(--color-text-primary);
    margin: 0 0 var(--space-5);
}

.cm-serve__card-label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.4;
    color: var(--color-text-primary);
    margin: 0;
}

.cm-serve__card-info {
    font-size: 1rem;
    color: var(--color-gray-300);
    line-height: 1;
}

/* Feature columns — bold title + body, no card chrome (mirrors .usa-impact__feature) */
.cm-serve__features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(2rem, 4vw, 4rem);
}

.cm-serve__feature {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.cm-serve__feature-title {
    font-family: var(--font-body);
    font-size: var(--text-lg);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.2px;
    color: var(--color-text-primary);
    margin: 0;
}

.cm-serve__feature-desc {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--color-text-primary);
    margin: 0;
}

@media (max-width: 900px) {
    .cm-serve__features {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }
}

@media (max-width: 768px) {
    .cm-serve__cards {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }
}


/* ============================================
   9. PEOPLE — Reuses .team from main.css
   ============================================ */
.cm-people__header {
    max-width: 1600px; margin: 0 auto;
    padding: var(--section-padding) var(--container-padding) var(--space-6);
    background: #F5F5F5;
}

.cm-people__heading {
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: var(--font-semibold);
    letter-spacing: -0.6px; color: var(--color-text-primary);
    line-height: var(--leading-tight);
    margin: 0 0 var(--space-4);
}

.cm-people__intro {
    font-family: var(--font-body); font-size: var(--text-lg);
    color: var(--color-text-secondary); line-height: var(--leading-normal);
    max-width: 600px; margin: 0;
}


/* ============================================
   10. SUPPLIER DIVERSITY — Bold split card + image
   ============================================ */
.cm-supplier__wrap {
    background: #FAF4EB;
}

.cm-supplier {
    background: #FFFFFF;
    padding: var(--section-padding) 0;
}

.cm-supplier__layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 var(--container-padding);
    gap: var(--space-6);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.cm-supplier__card {
    background: #1a1814;
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
    padding: clamp(4rem, 6vw, 7rem) clamp(3rem, 5vw, 6rem);
    display: flex; flex-direction: column;
    justify-content: center;
    position: relative;
}

/* Blueprint grid */
.cm-supplier__card::before {
    content: ''; position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
}

.cm-supplier__title {
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: var(--font-semibold);
    letter-spacing: -0.6px; color: #FFFFFF;
    line-height: var(--leading-tight);
    margin: 0 0 var(--space-5);
    position: relative; z-index: 1;
}

.cm-supplier__desc {
    font-family: var(--font-body); font-size: var(--text-base);
    color: rgba(255,255,255,0.55); line-height: var(--leading-normal);
    max-width: 440px; margin: 0 0 var(--space-8);
    position: relative; z-index: 1;
}

.cm-supplier__link {
    display: flex; align-items: center; justify-content: center;
    width: 56px; height: 56px;
    border-radius: 50%;
    background: #FFFFFF;
    color: #1a1814;
    font-size: 1.4rem;
    text-decoration: none;
    position: relative; z-index: 1;
    transition: transform var(--duration-base) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out);
}

.cm-supplier__link:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 24px rgba(255,255,255,0.15);
}

.cm-supplier__image {
    overflow: hidden;
    min-height: 520px;
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

.cm-supplier__image img {
    width: 100%; height: 100%; object-fit: cover;
}

@media (max-width: 900px) {
    .cm-supplier__layout { grid-template-columns: 1fr; }

    /* On desktop the card and image sit side-by-side and share a single
       rounded shape — the card rounds its LEFT corners, the image rounds
       its RIGHT corners. Once they stack vertically on mobile each one
       becomes its own free-standing block, so give both elements all four
       corners. Image moves to the top via order:-1 for visual hierarchy. */
    .cm-supplier__card {
        border-radius: var(--radius-lg);
    }
    .cm-supplier__image {
        min-height: 280px;
        order: -1;
        border-radius: var(--radius-lg);
    }
}