/* ============================================
   ENVIRONMENTAL SUSTAINABILITY PAGE
   ============================================ */

/* Vertical section rhythm — bumped from clamp(24-56px, 3vw, 56px) up to
   clamp(56-110px, 7vw, 110px). The previous tighter values left every
   section visually crashing into the next; this gives each body section
   clear top/bottom breathing room so they read as separate beats while
   staying tighter than the default --section-padding (80-150px). */
[id="main-content"] .ev-philosophy,
[id="main-content"] .ev-quote,
[id="main-content"] .ev-partners,
[id="main-content"] .ev-cert,
[id="main-content"] .ev-split,
[id="main-content"] .ev-carbon,
[id="main-content"] .ev-resilience {
    padding-top: clamp(56px, 7vw, 110px);
    padding-bottom: clamp(56px, 7vw, 110px);
}

/* Cinematic figures + stat blocks: minimal spacing */
[id="main-content"] .ev-cinema {
    margin-top: clamp(0.75rem, 2vw, 1.5rem);
    margin-bottom: clamp(0.75rem, 2vw, 1.5rem);
}

[id="main-content"] .ev-philosophy__inner--stats { margin-top: clamp(1rem, 2vw, 1.75rem); }
[id="main-content"] .ev-philosophy__stats {
    margin-top: clamp(1rem, 2vw, 1.5rem);
    padding-top: clamp(1rem, 2vw, 1.5rem);
    gap: clamp(1rem, 2.5vw, 2rem);
}

/* Shared section title */
.ev-section-title {
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    font-weight: var(--font-semibold);
    line-height: var(--leading-tight);
    letter-spacing: -0.6px;
    color: var(--color-text-primary);
    margin: 0 0 var(--space-5);
}


/* ============================================
   1. HERO — Unified centered seal
   Title stack floats inside a single oversized rotating
   text ring that wraps the entire composition.
   ============================================ */
.ev-hero {
    position: relative;
    min-height: 88vh;
    background: #FFFFFF;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ev-hero__grid-bg {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(50, 48, 47, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(50, 48, 47, 0.05) 1px, transparent 1px),
        linear-gradient(rgba(50, 48, 47, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(50, 48, 47, 0.02) 1px, transparent 1px);
    background-size: 160px 160px, 160px 160px, 40px 40px, 40px 40px;
    pointer-events: none;
}

.ev-hero__grid-bg::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 200px;
    background: linear-gradient(to bottom, #FFFFFF, transparent);
    z-index: 1;
}

.ev-hero__inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 160px var(--container-padding) clamp(60px, 8vw, 100px);
    width: 100%;
}

.ev-hero__left {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 720px;
    padding: clamp(40px, 7vw, 100px) clamp(20px, 4vw, 60px);
}

.ev-hero__ghost {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-heading);
    font-size: clamp(8rem, 22vw, 22rem);
    font-weight: 800;
    color: rgba(50, 48, 47, 0.025);
    line-height: 0.85;
    letter-spacing: -0.04em;
    pointer-events: none;
    user-select: none;
    z-index: 0;
    white-space: nowrap;
}

.ev-hero__line--script::after { width: 60%; }
.ev-hero__line--pillars { color: var(--color-text-secondary); }

.ev-hero__lead { max-width: 540px; text-align: center; }

.ev-hero__line--display {
    font-family: var(--font-display);
    font-size: clamp(3rem, 6vw, 5rem);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -2px;
    color: var(--color-text-primary);
    display: block;
}

.ev-hero__line--script {
    font-family: 'Dancing Script', cursive;
    font-size: clamp(2.4rem, 5.5vw, 4.5rem);
    font-weight: 700;
    line-height: 1;
    color: var(--color-text-primary);
    display: block;
    position: relative;
    padding-bottom: 0.2em;
}

.ev-hero__line--script::after {
    content: '';
    position: absolute;
    /* Center the brush horizontally under the (text-align:center) "to Last"
       text. The previous `left: 0` anchored the brush to the line element's
       left edge, which left the brush sitting to the left of the centered
       text. Using left:50% + translateX(-50%) makes the brush itself centered
       within the parent's width so it sits under the centered glyphs. */
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    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%3Cpath d='M 12,10 C 70,7 150,6 210,9 C 270,12 360,10 390,8' stroke='%23FF1A0F' stroke-width='1' fill='none' opacity='0.45' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.ev-hero__line--pillars {
    font-family: var(--font-heading);
    font-size: clamp(1.4rem, 2.8vw, 2.2rem);
    font-weight: var(--font-regular);
    line-height: var(--leading-snug);
    letter-spacing: -0.6px;
    color: var(--color-text-secondary);
    display: block;
    margin-top: var(--space-4);
}

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

/* Badge — oversized seal ring framing the entire hero composition */
.ev-hero__right {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ev-hero__badge-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    will-change: transform;
}

/* Outer ring — no fill, just a circle for the text path to orbit on */
.ev-hero__badge {
    position: relative;
    width: clamp(560px, 70vw, 900px);
    height: clamp(560px, 70vw, 900px);
    border-radius: 50%;
    background: transparent;
    border: 1px solid rgba(50, 48, 47, 0.12);
    color: var(--color-text-primary);
    display: block;
}

/* Inner concentric guideline — subtle architectural detail */
.ev-hero__badge::before,
.ev-hero__badge::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    border: 0.5px solid rgba(50, 48, 47, 0.08);
    pointer-events: none;
}
.ev-hero__badge::before { inset: 24px; }
.ev-hero__badge::after  { inset: 56px; }

/* Rotating SVG text ring */
.ev-hero__badge-text {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    animation: evRotateBadge 60s linear infinite;
}

.ev-hero__badge-text text {
    font-family: var(--font-display);
    font-size: 6px;
    font-weight: var(--font-semibold);
    fill: var(--color-text-primary);
    letter-spacing: 3.5px;
    text-transform: uppercase;
    opacity: 0.55;
}

@keyframes evRotateBadge {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Hide the inner stack — the centered H1 title is now the focal point */
.ev-hero__badge-inner { display: none; }

/* Two orbital text variants share the SVG. Default: desktop circle is
   visible, mobile square is hidden. The mobile @media block below
   flips visibility and disables the SVG rotation so the SMIL animation
   on the square's textPath startOffset takes over the motion. */
.ev-hero__badge-text-glyph--square { display: none; }

@media (prefers-reduced-motion: reduce) {
    .ev-hero__badge-text { animation: none !important; }
    .ev-hero__badge-wrap { transform: none !important; }
}

@media (max-width: 700px) {
    /* ===== Mobile badge: STATIC rounded-rectangle frame =====
       The badge now COVERS the entire visible hero area (with a
       small inset) so the snake of glyphs can wrap around the
       full corners of the hero, not just a 95vw square that sat
       halfway up the section. .ev-hero__right is repositioned
       from centered-absolute to filling the hero with a 16px
       margin on three sides and 88px at the top (clears the
       site header), and the badge inside fills its parent.
       The SVG path is computed by JS based on the badge's actual
       rendered size so the rectangle's aspect ratio matches the
       viewport and text-along-path stays undistorted. */
    .ev-hero__right {
        position: absolute;
        inset: 88px 16px 16px 16px;
        top: 88px;
        transform: none;
        display: block;
    }
    /* .ev-hero__badge-wrap is the intermediate flex container. Without
       explicit dimensions it shrinks to its content's intrinsic size,
       which made the badge inside (width:100%;height:100%) collapse to
       0×0 — the snake vanished. Force the wrap to fill .ev-hero__right
       so the badge has a real parent box to resolve its percentages
       against. */
    .ev-hero__badge-wrap {
        width: 100%;
        height: 100%;
    }
    .ev-hero__badge {
        width: 100%;
        height: 100%;
        border-radius: 12px;
    }
    .ev-hero__badge::before {
        inset: 10px;
        border-radius: 8px;
    }
    .ev-hero__badge::after {
        inset: 24px;
        border-radius: 6px;
    }
    /* Kill the desktop SVG rotation — the SMIL <animate> on the
       square text's startOffset is what drives the snake motion. */
    .ev-hero__badge-text {
        animation: none;
        width: 100%;
        height: 100%;
    }
    /* Bigger, heavier, more opaque snake text on mobile so the glyphs
       read clearly along the badge's full perimeter. The base rule
       uses 6px / weight 600 / opacity 0.55 — all tuned for the
       desktop ring inside a small viewBox. Override here for the
       larger mobile rectangle. */
    .ev-hero__badge-text text {
        font-size: 18px;
        font-weight: 800;
        letter-spacing: 3px;
        opacity: 0.85;
    }
    .ev-hero__badge-text-glyph--circle { display: none; }
    .ev-hero__badge-text-glyph--square { display: inline; }
}


/* ============================================
   2. PHILOSOPHY — Centered editorial
   ============================================ */
.ev-philosophy {
    background: #fafaf8;
    padding: var(--section-padding) 0;
    border-top: 0.5px solid #c8c8c8;
    border-bottom: 0.5px solid #c8c8c8;
    position: relative;
}

/* Tick marks */
.ev-philosophy::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        repeating-linear-gradient(90deg, #bbb 0px, #bbb 1px, transparent 1px, transparent 36px) 0 0 / 100% 5px no-repeat,
        repeating-linear-gradient(90deg, #bbb 0px, #bbb 1px, transparent 1px, transparent 36px) 0 100% / 100% 5px no-repeat;
}

.ev-philosophy__inner {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 var(--container-padding);
    text-align: center;
}

/* Editorial variant — decade rail on the left, copy on the right */
.ev-philosophy__inner--editorial {
    max-width: 1080px;
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: clamp(2rem, 5vw, 4rem);
    text-align: left;
    align-items: stretch;
}

/* Decade rail — vertical timeline running 1957 → today */
.ev-philosophy__rail {
    position: relative;
    min-height: 320px;
}

.ev-philosophy__rail-line {
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: calc(96px - 1px);
    width: 1px;
    background: linear-gradient(to bottom,
        rgba(50, 48, 47, 0.06),
        rgba(50, 48, 47, 0.32) 12%,
        rgba(50, 48, 47, 0.32) 88%,
        rgba(50, 48, 47, 0.06));
}

.ev-philosophy__rail-marks {
    list-style: none;
    margin: 0;
    padding: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.ev-philosophy__rail-mark {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 16px;
    font-family: 'Courier New', monospace;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

/* Horizontal tick connecting label to the vertical line */
.ev-philosophy__rail-mark::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 1px;
    background: rgba(50, 48, 47, 0.4);
}

/* Anchor marks (1957 + Today) — bolder, with a small dot */
.ev-philosophy__rail-mark--anchor {
    color: var(--color-text-primary);
    font-weight: 800;
}

.ev-philosophy__rail-mark--anchor::before {
    content: '';
    position: absolute;
    right: -3.5px;
    top: 50%;
    transform: translateY(-50%);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-text-primary);
}

.ev-philosophy__rail-mark--anchor::after {
    width: 14px;
    background: var(--color-text-primary);
}

/* Editorial eyebrow above the lead */
.ev-philosophy__eyebrow {
    display: block;
    font-family: 'Courier New', monospace;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-4);
}

.ev-philosophy__eyebrow em {
    font-style: italic;
    text-transform: none;
    letter-spacing: 0.05em;
    color: var(--color-text-primary);
}

.ev-philosophy__lead {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4.2vw, 3.4rem);
    font-weight: var(--font-semibold);
    color: var(--color-text-primary);
    letter-spacing: -0.8px;
    line-height: 1.08;
    margin: 0 0 var(--space-6);
}

.ev-philosophy__lead em {
    font-style: normal;
    font-family: 'Dancing Script', cursive;
    font-size: 1.15em;
}

.ev-philosophy__body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    line-height: var(--leading-normal);
    margin: 0 0 var(--space-5);
    max-width: 640px;
}

/* Mobile: rail collapses to a horizontal bar above the copy */
@media (max-width: 700px) {
    .ev-philosophy__inner--editorial {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }
    .ev-philosophy__rail {
        min-height: 0;
        height: 48px;
    }
    .ev-philosophy__rail-line {
        top: calc(50% - 0.5px);
        bottom: auto;
        left: 32px;
        right: 32px;
        width: auto;
        height: 1px;
        background: linear-gradient(to right,
            rgba(50, 48, 47, 0.06),
            rgba(50, 48, 47, 0.32) 8%,
            rgba(50, 48, 47, 0.32) 92%,
            rgba(50, 48, 47, 0.06));
    }
    .ev-philosophy__rail-marks {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        height: auto;
    }
    .ev-philosophy__rail-mark {
        flex-direction: column;
        padding: 0;
        gap: 4px;
    }
    .ev-philosophy__rail-mark::after { display: none; }
    .ev-philosophy__rail-mark--anchor::before { right: auto; top: auto; left: auto; transform: none; position: static; margin-top: 4px; }
}

/* Cinematic full-bleed banner — sits between editorial copy and stats trio */
.ev-philosophy__banner {
    position: relative;
    margin: clamp(3rem, 6vw, 5rem) 0 0;
    width: 100%;
    aspect-ratio: 21 / 9;
    max-height: 620px;
    overflow: hidden;
}

.ev-philosophy__banner-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    will-change: transform;
}

.ev-philosophy__banner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(20, 20, 18, 0.55) 0%,
        rgba(20, 20, 18, 0.2) 50%,
        rgba(20, 20, 18, 0) 100%
    );
    pointer-events: none;
}

.ev-philosophy__banner-caption {
    position: absolute;
    left: clamp(1.5rem, 5vw, 4rem);
    bottom: clamp(1.5rem, 4vw, 3rem);
    max-width: 540px;
    color: #FFFFFF;
    z-index: 1;
}

.ev-philosophy__banner-eyebrow {
    display: block;
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: var(--space-3);
}

.ev-philosophy__banner-text {
    display: block;
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 3vw, 2.4rem);
    font-weight: var(--font-semibold);
    line-height: 1.15;
    letter-spacing: -0.5px;
    color: #FFFFFF;
}

.ev-philosophy__inner--stats {
    margin-top: clamp(3rem, 6vw, 5rem);
}

/* Live-stats trio (mirrors .projects-hero__stats) */
.ev-philosophy__stats {
    display: flex;
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3rem);
    margin-top: clamp(2rem, 4vw, 3rem);
    padding-top: clamp(2rem, 4vw, 3rem);
    border-top: 0.5px solid var(--color-border);
    flex-wrap: wrap;
}

.ev-philosophy__stat {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 160px;
    min-width: 0;
}

.ev-philosophy__stat-num {
    font-family: var(--font-heading);
    font-size: clamp(2.4rem, 4.5vw, 3.5rem);
    font-weight: var(--font-bold);
    color: var(--color-text-primary);
    letter-spacing: -1px;
    line-height: 1;
}

.ev-philosophy__stat-label {
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: var(--font-semibold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-gray-300);
    line-height: 1.5;
}

.ev-philosophy__stat-divider {
    width: 1px;
    align-self: stretch;
    min-height: 64px;
    background: var(--color-border);
    flex-shrink: 0;
}

@media (max-width: 720px) {
    .ev-philosophy__stat-divider { display: none; }
    .ev-philosophy__stats { gap: var(--space-6); }
}


/* ============================================
   3. REDUCING OUR FOOTPRINT — Criteria number-cards trio
   (mirrors .usa-criteria__grid)
   ============================================ */
.ev-footprint__criteria {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: clamp(3rem, 8vw, 8rem);
    max-width: var(--container-max);
    margin: clamp(3rem, 6vw, 5rem) auto 0;
    padding: 0 var(--container-padding);
}

.ev-footprint__item {
    padding-top: var(--space-8);
    border-top: 2px solid var(--color-gray-300);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.ev-footprint__value {
    font-family: var(--font-heading);
    font-size: clamp(2.25rem, 4.5vw, 3.5rem);
    font-weight: var(--font-regular);
    line-height: 1;
    letter-spacing: -1.5px;
    color: var(--color-text-primary);
    margin: 0;
}

.ev-footprint__label {
    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) {
    .ev-footprint__criteria {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }
}


/* ============================================
   3 & 9. SPLIT — Image + text (reversible)
   ============================================ */
.ev-split {
    background: #FFFFFF;
    padding: var(--section-padding) 0;
}

.ev-split__inner {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: var(--space-12);
    max-width: none;
    margin: 0;
    padding: 0 var(--space-4) 0 0;
    align-items: center;
}

.ev-split--reversed .ev-split__inner {
    grid-template-columns: 1fr 1.4fr;
    padding: 0 0 0 var(--space-4);
}

.ev-split--reversed .ev-split__inner {
    direction: rtl;
}

.ev-split--reversed .ev-split__inner > * {
    direction: ltr;
}

.ev-split__image {
    overflow: hidden;
    min-height: clamp(350px, 50vw, 550px);
    border-radius: var(--radius-lg);
    position: relative;
}

.ev-split--reversed .ev-split__image {
    will-change: clip-path;
}

.ev-split__image img {
    position: absolute;
    top: -15%;
    left: 0;
    width: 100%;
    height: 130%;
    object-fit: cover;
    display: block;
    will-change: transform;
}

.ev-split__text {
    padding: var(--space-10) clamp(2rem, 5vw, 5rem);
}

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

@media (max-width: 900px) {
    /* "Built for the Long Run" (.ev-split--reversed) mobile fix
       --------------------------------------------------------------
       Desktop pairs a 1.4fr text column with a 1fr image column where
       the image is `position: relative; min-height: clamp(350,50vw,
       550px)` and the inner <img> is `position: absolute; top: -15%;
       height: 130%` so a JS rAF parallax loop (sustainability-page
       .js:8-33) can translateY it. None of that works at mobile
       widths: the image bleeds out of its 1fr column, the parallax
       transform keeps mutating inline style after the layout has
       collapsed to a single column, and the `.ev-split--reversed
       .ev-split__inner` desktop selector (0,2,0 specificity) was
       beating the mobile `.ev-split__inner` rule (0,1,0) — so the
       reversed split was staying 2-column even on phones. Each issue
       handled below. */

    /* Both selectors must reset grid-template-columns explicitly so
       the cascade actually applies on .ev-split--reversed. */
    .ev-split__inner {
        grid-template-columns: 1fr;
        gap: var(--space-6);
        padding: 0 var(--container-padding);
        align-items: stretch;
    }
    .ev-split--reversed .ev-split__inner {
        grid-template-columns: 1fr;
        direction: ltr;
        padding: 0 var(--container-padding);
    }

    /* Drop the 350-550px desktop min-height — let aspect-ratio drive
       the image's mobile height proportionally to viewport width.
       Image goes to top via order:-1 (image-first visual hierarchy
       to match the safety page splits). */
    .ev-split__image {
        order: -1;
        min-height: 0;
        aspect-ratio: 16 / 10;
        border-radius: var(--radius-md);
    }

    /* Take the inner <img> out of absolute parallax mode — fill the
       now-aspect-ratio'd parent in normal flow. `transform: none
       !important` overrides the inline translateY the parallax rAF
       script keeps writing every frame. */
    .ev-split__image img {
        position: static;
        top: auto;
        left: auto;
        width: 100%;
        height: 100%;
        transform: none !important;
    }

    /* Drop the desktop horizontal cushion on the text column —
       it stacks with the inner's container-padding on mobile. */
    .ev-split__text {
        padding: var(--space-6) 0;
    }

    /* Grid items default to min-width:auto (= min-content), and a
       high-resolution panel image's intrinsic width would otherwise
       push the column past viewport. */
    .ev-split__inner > * {
        min-width: 0;
    }
}


/* ============================================
   4. TACKLING CARBON — Text + numbered steps
   ============================================ */
.ev-carbon {
    background: #F5F5F5;
    padding: var(--section-padding) 0;
}

.ev-carbon__inner {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: var(--space-16);
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
    align-items: start;
}

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

/* Numbered step frames */
.ev-carbon__frame {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.ev-carbon__frame-inner {
    background: transparent;
    border: 1.5px solid var(--color-text-primary);
    border-radius: 28px;
    padding: clamp(1.5rem, 2.5vw, 2rem) clamp(1.75rem, 2.5vw, 2.25rem);
    display: flex;
    align-items: center;
    gap: var(--space-5);
    transition: background 280ms var(--ease-out);
}

.ev-carbon__frame-inner:hover {
    background: rgba(0, 0, 0, 0.03);
}

.ev-carbon__frame-num {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.15em;
    color: var(--color-text-secondary);
    flex-shrink: 0;
    line-height: 1;
}

.ev-carbon__frame-label {
    font-family: var(--font-heading);
    font-size: clamp(1.4rem, 2vw, 1.8rem);
    font-weight: var(--font-regular);
    color: var(--color-text-primary);
    letter-spacing: -0.5px;
    line-height: 1.1;
}

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


/* ============================================
   5. CLIMATE RESILIENCE — Dark blueprint section
   ============================================ */
.ev-resilience {
    background: #1a1814;
    padding: var(--section-padding) 0;
    position: relative;
    overflow: hidden;
}

/* Blueprint grid */
.ev-resilience::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;
}

.ev-resilience__inner {
    position: relative;
    z-index: 1;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.ev-resilience__header {
    position: relative;
    margin-bottom: var(--space-12);
}

.ev-resilience__ghost {
    font-family: var(--font-heading);
    font-size: clamp(5rem, 12vw, 10rem);
    font-weight: 800;
    color: rgba(255, 255, 255, 0.02);
    line-height: 0.85;
    display: block;
    margin-bottom: var(--space-2);
    pointer-events: none;
    user-select: none;
}

.ev-resilience__header .ev-section-title {
    color: #FFFFFF;
}

.ev-resilience__header p {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: rgba(255, 255, 255, 0.5);
    line-height: var(--leading-normal);
    max-width: 540px;
    margin: 0;
}

/* Concentric ripples — pulled from cm-hero__ripples; pulses behind content */
.ev-resilience__ripples {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 0;
}

.ev-resilience__circle {
    position: absolute; top: 50%; left: 50%;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transform: translate(-50%, -50%);
    animation: evRipple 9s ease-in-out infinite;
}

.ev-resilience__circle--1 { width: 28vw; height: 28vw; }
.ev-resilience__circle--2 { width: 50vw; height: 50vw; animation-delay: 0.6s; }
.ev-resilience__circle--3 { width: 75vw; height: 75vw; animation-delay: 1.2s; }
.ev-resilience__circle--4 { width: 105vw; height: 105vw; animation-delay: 1.8s; }

@keyframes evRipple {
    0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
    50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.04); }
}

/* Sidebar + panels layout (mirrors community strategy 3-col) */
.ev-resilience__layout {
    display: grid;
    grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
}

/* ---- Sidebar nav with sliding pill ---- */
.ev-resilience__nav {
    position: relative;
    display: flex;
    flex-direction: column;
    isolation: isolate;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.ev-resilience__indicator {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.05);
    border-left: 3px solid #FFFFFF;
    z-index: 0;
    pointer-events: none;
    transform: translateY(0);
    transition: transform 520ms cubic-bezier(0.4, 0, 0.1, 1),
                height 520ms cubic-bezier(0.4, 0, 0.1, 1);
}

.ev-resilience__navitem {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: baseline;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-5);
    background: none;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    cursor: pointer;
    text-align: left;
    outline: none;
    transition: color 280ms ease;
}

.ev-resilience__navitem:last-child { border-bottom: none; }

.ev-resilience__navnum {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    color: rgba(255, 255, 255, 0.25);
    line-height: 1;
    flex-shrink: 0;
    transition: color 280ms ease;
}

.ev-resilience__navlabel {
    font-family: var(--font-heading);
    font-size: clamp(1rem, 1.6vw, 1.2rem);
    font-weight: var(--font-semibold);
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: -0.4px;
    line-height: 1.25;
    transition: color 280ms ease;
}

.ev-resilience__navitem:hover .ev-resilience__navlabel,
.ev-resilience__navitem--active .ev-resilience__navlabel,
.ev-resilience__navitem:hover .ev-resilience__navnum,
.ev-resilience__navitem--active .ev-resilience__navnum {
    color: #FFFFFF;
}

/* ---- Panels ---- */
.ev-resilience__panels {
    position: relative;
    min-height: 320px;
    isolation: isolate;
}

/* Atmospheric backdrop photo — concrete + trees, very low opacity */
.ev-resilience__panel-bg {
    position: absolute;
    top: -10%;
    right: -5%;
    width: 60%;
    height: 120%;
    object-fit: cover;
    z-index: -1;
    opacity: 0.12;
    filter: grayscale(0.4);
    mask-image: radial-gradient(ellipse at right center, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 75%);
    -webkit-mask-image: radial-gradient(ellipse at right center, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 75%);
    pointer-events: none;
}

@media (max-width: 900px) { .ev-resilience__panel-bg { display: none; } }

.ev-resilience__panel {
    display: none;
    animation: evResPanelIn 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.ev-resilience__panel--active { display: block; }

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

.ev-resilience__panel-num {
    font-family: var(--font-heading);
    font-size: clamp(4rem, 9vw, 7rem);
    font-weight: 800;
    color: rgba(255, 255, 255, 0.04);
    line-height: 0.85;
    display: block;
    margin-bottom: var(--space-3);
    pointer-events: none;
    user-select: none;
}

.ev-resilience__panel-title {
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    font-weight: var(--font-semibold);
    letter-spacing: -0.6px;
    line-height: var(--leading-tight);
    color: #FFFFFF;
    margin: 0 0 var(--space-5);
}

.ev-resilience__panel-desc {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: rgba(255, 255, 255, 0.7);
    line-height: var(--leading-normal);
    margin: 0 0 var(--space-6);
    max-width: 60ch;
}

.ev-resilience__panel-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-3);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: var(--space-5);
}

.ev-resilience__panel-list li {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.4;
    position: relative;
    padding-left: var(--space-5);
}

.ev-resilience__panel-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 10px;
    height: 1px;
    background: rgba(255, 255, 255, 0.4);
}

@media (max-width: 900px) {
    .ev-resilience__layout {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }
    .ev-resilience__nav {
        flex-direction: row;
        overflow-x: auto;
        border-left: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        scrollbar-width: none;
    }
    .ev-resilience__nav::-webkit-scrollbar { display: none; }
    .ev-resilience__navitem {
        flex-shrink: 0;
        border-bottom: none;
        white-space: nowrap;
    }
    .ev-resilience__indicator {
        top: auto;
        bottom: 0;
        border-left: none;
        border-bottom: 3px solid #FFFFFF;
    }
}


/* ============================================
   6. QUOTE — Large centered
   ============================================ */
.ev-quote {
    background: #F5F5F2;
    padding: var(--section-padding) var(--container-padding);
    position: relative;
}

.ev-quote__inner {
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    background: var(--color-pure-white);
    border: 0.5px solid #d8d8d4;
    border-radius: 18px;
    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);
    padding: clamp(3rem, 6vw, 5rem) clamp(2rem, 5vw, 4rem);
}

.ev-quote__inner: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);
}

.ev-quote__mark {
    font-family: var(--font-heading);
    font-size: clamp(6rem, 12vw, 10rem);
    font-weight: 800;
    color: rgba(50, 48, 47, 0.04);
    line-height: 0.5;
    display: block;
    margin-bottom: var(--space-4);
    pointer-events: none;
}

.ev-quote__text {
    font-family: var(--font-heading);
    font-size: clamp(1.4rem, 3vw, 2.2rem);
    font-weight: var(--font-regular);
    color: var(--color-text-primary);
    line-height: var(--leading-snug);
    letter-spacing: -0.6px;
    margin: 0;
    font-style: italic;
}


/* ============================================
   7. PARTNERSHIPS — Clean text section
   ============================================ */
.ev-partners {
    background: #FFFFFF;
    padding: var(--section-padding) 0;
}

.ev-partners__inner {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.ev-partners__intro {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    line-height: var(--leading-normal);
    margin: 0 0 clamp(2rem, 4vw, 3rem);
}

/* Numbered partner cards (mirrors .usa-clients-strip) */
.ev-partners__strip {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}

.ev-partners__item {
    padding: clamp(2.5rem, 5vw, 4rem);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-pure-white);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    align-items: flex-start;
    transition: transform 520ms cubic-bezier(0.4, 0, 0.1, 1),
                box-shadow 520ms cubic-bezier(0.4, 0, 0.1, 1);
}

.ev-partners__item:hover {
    transform: translateY(-3px);
    box-shadow: 0 22px 50px -28px rgba(0, 0, 0, 0.22),
                0 2px 6px rgba(0, 0, 0, 0.04);
}

.ev-partners__num {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: var(--font-bold);
    color: rgba(50, 48, 47, 0.08);
    line-height: 1;
    flex-shrink: 0;
}

.ev-partners__info {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.ev-partners__name {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    font-weight: var(--font-regular);
    line-height: 1.1;
    letter-spacing: -0.8px;
    color: var(--color-text-primary);
    margin: 0;
}

.ev-partners__desc {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-text-primary);
    line-height: 1.5;
    margin: 0;
}

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


/* ============================================
   8. CERTIFICATIONS — Drawing sheet card
   ============================================ */
.ev-cert {
    background: #F5F5F2;
    padding: var(--section-padding) 0;
}

.ev-cert__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.ev-cert__sheet {
    background: var(--color-pure-white);
    border: 0.5px solid #d8d8d4;
    border-radius: 18px;
    position: relative;
    overflow: hidden;
    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);
}

.ev-cert__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);
}

.ev-cert__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;
}

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

.ev-cert__sheet-body { position: relative; z-index: 2; }

.ev-cert__sheet-body {
    padding: clamp(2rem, 4vw, 3.5rem) clamp(2rem, 4vw, 4rem);
    max-width: 720px;
}

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



/* ====================================================================
   .sf-reveal — Mobile-only "read more" disclosure component
   --------------------------------------------------------------------
   Same pattern as the safety page: a 44px black-circle + button that
   collapses long body paragraphs behind a single tap on mobile, while
   on desktop (≥901px) the button is display:none and the panel content
   renders inline. Used across the sustainability page on every section
   with multi-paragraph copy (Philosophy, Quality on Every Site,
   Materials Built to Last, LEED, Built for the Long Run).
   Class names mirror the safety-page implementation so the markup
   pattern stays portable; the toggle JS is delegated and lives at
   the bottom of sustainability/index.html.
   ==================================================================== */
@media (max-width: 900px) {
    .sf-reveal {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        max-width: 100%;
        margin-top: var(--space-4);
    }
    .sf-reveal__btn {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        border: 0;
        padding: 0;
        background: #0A1119;
        color: #fff;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
        transition: transform 520ms cubic-bezier(0.4, 0, 0.1, 1),
                    box-shadow 520ms cubic-bezier(0.4, 0, 0.1, 1);
    }
    .sf-reveal__btn:hover {
        transform: scale(1.06);
        box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
    }
    .sf-reveal__btn:focus-visible {
        outline: 2px solid var(--color-orange, #C0392B);
        outline-offset: 3px;
    }
    .sf-reveal__icon {
        position: relative;
        width: 16px;
        height: 16px;
        display: inline-block;
        transition: transform 520ms cubic-bezier(0.4, 0, 0.1, 1);
    }
    .sf-reveal__icon-bar {
        position: absolute;
        top: 50%;
        left: 50%;
        background: #fff;
        border-radius: 1px;
    }
    .sf-reveal__icon-bar:nth-child(1) { width: 14px; height: 2px;  transform: translate(-50%, -50%); }
    .sf-reveal__icon-bar:nth-child(2) { width: 2px;  height: 14px; transform: translate(-50%, -50%); }
    .sf-reveal__btn[aria-expanded="true"] .sf-reveal__icon {
        transform: rotate(45deg);
    }
    .sf-reveal__panel {
        display: grid;
        grid-template-rows: 0fr;
        opacity: 0;
        margin-top: 0;
        transition: grid-template-rows 520ms cubic-bezier(0.4, 0, 0.1, 1),
                    opacity 420ms cubic-bezier(0.4, 0, 0.1, 1),
                    margin-top 520ms cubic-bezier(0.4, 0, 0.1, 1);
        width: 100%;
    }
    .sf-reveal__panel > * {
        min-height: 0;
        overflow: hidden;
    }
    .sf-reveal__panel-inner {
        margin: 0;
    }
    .sf-reveal__panel-inner > p:last-child {
        margin-bottom: 0;
    }
    .sf-reveal__btn[aria-expanded="true"] + .sf-reveal__panel {
        grid-template-rows: 1fr;
        opacity: 1;
        margin-top: var(--space-4);
    }
}

/* Desktop / tablet-landscape: button hidden, panel renders inline. */
@media (min-width: 901px) {
    .sf-reveal__btn {
        display: none;
    }
    .sf-reveal__panel {
        display: block;
    }
}

/* Reduced motion: snap-open the panel, no slide-in. */
@media (prefers-reduced-motion: reduce) {
    .sf-reveal__btn,
    .sf-reveal__icon,
    .sf-reveal__panel {
        transition: none !important;
    }
}