/* --- Value grid (About 1006:2019) ---------------------------------------- */
.value-grid {
    padding-block: 119px;
    background: #F6F6F6;
}

.value-grid-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 47px;
    max-width: calc(1548px + var(--gutter) * 2);
}

.value-grid .head {
    display: flex;
    align-items: center;
    gap: 20px;
}

.value-grid .badge {
    width: 72px;
    height: 72px;
}

.value-grid .badge .cnm-icon {
    width: 36px;
    height: 36px;
}

.value-grid h2 {
    margin: 0;
    font-size: clamp(32px, 3.33vw, 64px);
    line-height: 1.234;
    color: var(--brand, #008AF7);
}

.value-grid .cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 50px 84px;
    width: 100%;
}

.value-grid .card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    min-height: 284px;
    padding: 46px 49px 46px 50px;
    border-radius: 18px;
    background: var(--white, #ffffff);
    text-align: center;
}

.value-grid .card h3 {
    margin: 0;
    font-size: clamp(24px, 1.875vw, 36px);
    line-height: 1.222;
    color: var(--brand, #008AF7);
}

.value-grid .card p {
    margin: 0;
    font-size: 18px;
    line-height: 1.4444;
    color: var(--ink, #212529);
}

@media (max-width: 991px) {
    .page-hero h1 .break {
        display: none;
    }

    .intro-figures,
    .value-grid,
    .pillars,
    .cta-band {
        padding-block: 64px;
    }

    .intro-figures-inner {
        gap: 56px;
    }

    .intro-figures .split {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .intro-figures .figures {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    /* One label per line once the card is a single column. "Industry Partnership
       Began" is the wide one, and side by side it pushes "Officially Founded" out
       past the year it labels — stacking is what keeps each reading as its own
       caption instead of a run-on row. Operator-approved simplification (2026-08-12):
       the captions no longer line up under their own year, and the reader takes the
       mapping from the order instead. */
    .intro-figures .figure .label:has(span) {
        flex-direction: column;
        gap: 8px;
    }

    /* The field content hardcodes a break mid-caption ("Industry Partnership<br>
       Began"), which was there to fit the two-column arrangement. Stacked, each
       caption gets the full width, so let it flow and wrap only when it has to.
       Scoped to the spans, so the other figures keep their authored breaks. */
    .intro-figures .figure .label:has(span) span br {
        display: none;
    }

    .eyebrow-band {
        padding-block: 40px;
    }

    .process .cards {
        --cards-per-row: 2;
    }

    .pillars-inner {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .value-grid .cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Stacked Team section: the photo goes full-bleed on all three edges — sides
       and top — and only the copy keeps the gutter, so the image reads as a band
       instead of a framed thumbnail (client round 13). */
    .media-content {
        grid-template-columns: 1fr;
        gap: 32px;
        padding-block: 0 48px;
        padding-inline: 0;
    }

    .media-content .text {
        padding-inline: var(--gutter);
    }

    .cta-band-inner {
        flex-direction: column;
        gap: 40px;
        text-align: center;
    }

    .cta-band .mark {
        width: 160px;
    }

    .cta-band .buttons {
        justify-content: center;
    }
}

@media (max-width: 767px) {
    .process .cards {
        --cards-per-row: 1;
    }

    /* One card per row means the 329/273 photo scales with the full viewport: 598px
       tall at 767, and a 4543px section to scroll past. Cap it to a banner crop
       (client round 18) — the card lands around 380-420px instead of 483-797. */
    .process .card > img {
        aspect-ratio: auto;
        height: clamp(150px, 42vw, 220px);
    }

    .value-grid .cards {
        grid-template-columns: 1fr;
    }

    /* Card copy runs to 20px of the edge on phones — the desktop 32/40px inset
       wastes a third of the line length at this width (client round 13). */
    .value-grid .card {
        padding: 20px;
    }

    .process .card .body {
        padding: 20px;
    }

    .process .card .watermark {
        right: 20px;
        bottom: 20px;
    }

    /* Shorter eyebrow band on phones (client round 13) — a floor, so a label that
       wraps to two lines grows the band instead of being clipped. The tighter
       padding keeps even the two-line label ("Why contractors choose Crush") at
       the 110px the client asked for. */
    .eyebrow-band {
        min-height: 110px;
        padding-block: 24px;
    }

    /* The two founding labels sit side by side in the Figma; at phone width the
       pair overruns the card, so they stack. */
    .intro-figures .figure-founded .label {
        flex-direction: column;
        gap: 8px;
    }

    /* Smaller icon chip and wrappable values, so the copy gets the width back
       (client round 13). The 90px badge plus a nowrap "2012 - 2025" was 342px of
       content in a 320px viewport — the overflow the mobile gate caught. */
    .intro-figures .badge {
        width: 64px;
        height: 64px;
        border-radius: 14px;
    }

    .intro-figures .badge .cnm-icon {
        width: 26px;
        height: 26px;
    }

    .intro-figures .figure .value {
        white-space: normal;
    }

    .cta-band .buttons {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 16px;
    }
}

@media (max-width: 575px) {
    .intro-figures .figures {
        padding: 32px 24px;
    }
}