/* === critical-metal-recovery.css — CMR page rebuilt to the 1440 Figma canvas (node 1:5917) === */

@font-face {
    font-family: "NHaasGroteskTX";
    src: url("/dist/fonts/NHaasGroteskTXPro-Rg.ttf") format("truetype");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

.page-cmr {
    background: #f2f2f2;
    color: #021c25;
}
body.page-cmr main { padding-top: 0; }
body.page-cmr { overflow-x: hidden; }
.page-cmr #site-footer { background: #021c25; }

/* Fluid: scale the fixed 1440 design to fill the viewport edge-to-edge */
.cmr-scale {
    width: 1440px;
    margin: 0 auto;
    zoom: calc(100vw / 1440px);
}

.cmr-stage img { max-width: none; }  /* app.css caps img at 100%; stage art is sized exactly */

.cmr-stage {
    position: relative;
    width: 1440px;
    height: 3202px;
    margin: 0 auto;
    background: #f2f2f2;
    overflow: hidden;
}

/* ══ HERO — gradient banner, rotated mineral strips, overlay, title ══ */
.cmr-hero {
    position: absolute;
    top: 0;
    left: 0;
    width: 1440px;
    height: 600px;
    overflow: hidden;
}
.cmr-hero__banner {
    position: absolute;
    top: 0;
    left: 0;
    width: 1440px;
    height: 611px;
    background: linear-gradient(to bottom, #101315, #545b5d);
    overflow: hidden;
}
.cmr-hero__banner-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 1440px;
    height: 611px;
    object-fit: cover;
}

.cmr-hero__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 1440px;
    height: 750px;
    background: #000;
    opacity: 0.3;
}
.cmr-hero__head {
    position: absolute;
    left: 61px;
    bottom: 114px;                 /* Figma bottom 127 is cap-trimmed */
    width: 953px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 20px;
}
.cmr-crumb {
    margin: 0;
    font-size: 18px;
    line-height: 16px;
    color: #f2f2f2;
    width: 100%;
}
.cmr-crumb strong { font-weight: 700; }
.cmr-hero__title {
    margin: 0;
    font-size: 80px;
    font-weight: 700;
    line-height: 80px;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 4px 4px 10px rgba(0, 0, 0, 0.25);
    width: 100%;
}
.cmr-hero__swipe { position: absolute; inset: 0; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; }
.cmr-hero__mouse {
    position: absolute;
    left: 1343px;
    bottom: 72px;
    width: 21px;
    height: 40px;
    border: 1px solid #fff;
    border-radius: 10px;
}
.cmr-hero__arrow {
    position: absolute;
    left: 1345.5px;
    bottom: 85.5px;
    width: 15px;
    height: 8px;
    transform: rotate(-90deg);
}
.cmr-hero__swipe-label {
    position: absolute;
    left: 1354px;
    bottom: 56.5px;
    transform: translate(-50%, 50%);
    font-size: 18px;
    line-height: 16px;
    color: #fff;
    text-align: center;
}

/* ══ INTRO ══ */
.cmr-lead {
    position: absolute;
    left: 155px;
    top: 644px;                    /* cap top at 650 */
    width: 1131px;
    margin: 0;
    font-size: 32px;
    font-weight: 500;
    line-height: 40px;
    color: #074158;
    text-align: center;
}
.cmr-lead strong { font-weight: 700; }
.cmr-h2 {
    position: absolute;
    left: 0;
    top: 757px;                    /* cap top at 764 */
    width: 100%;
    margin: 0;
    font-size: 60px;
    font-weight: 700;
    line-height: 60px;
    color: #000;
    text-align: center;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
    white-space: nowrap;
}
.cmr-body {
    position: absolute;
    left: 122px;
    top: 853px;                    /* cap top at 859 */
    width: 1197px;
    margin: 0;
    font-size: 24px;
    line-height: 32px;
    color: #000;
    text-align: left;
}

/* ══ CAPACITY — 70,000 TPA ══ */
.cmr-cap__gear1 { position: absolute; left: 340px; top: 1151.05px; width: 298.66px; height: 298.79px; }
.cmr-cap__gear3 { position: absolute; left: 375.84px; top: 1186.94px; width: 226.94px; height: 227.01px; }
.cmr-cap__arrow {
    position: absolute;
    left: 578px;
    top: 1188.13px;
    width: 522.625px;
    height: 222.5px;
}
.cmr-cap__arrow img { position: absolute; inset: -1.12% -0.48% -1.12% 0; width: 100.48%; height: 102.24%; }
.cmr-cap__num {
    position: absolute;
    left: 692.125px;
    top: 1275px;
    width: 349px;
    margin: 0;
    font-size: 60px;
    font-weight: 700;
    color: #074158;
    text-align: center;
    line-height: 45px;
}
.cmr-cap__over,
.cmr-cap__sub {
    position: absolute;
    left: 716.125px;
    width: 300px;
    margin: 0;
    font-size: 24px;
    line-height: 18px;
    color: #000;
    text-align: center;
}
.cmr-cap__over { top: 1240px; }
.cmr-cap__sub { top: 1341px; }

/* ══ FACILITIES — grey band, dashed orange arc, mineral bubbles (page y 1504) ══ */
.cmr-fac,
.cmr-tech {
    position: absolute;
    left: 0;
    width: 1440px;
    background: rgba(54, 57, 61, 0.1);
    border-radius: 10px;
    overflow: hidden;
}
.cmr-fac { top: 1504px; height: 506px; }
.cmr-tech { top: 2010px; height: 583px; }

/* Runaya logo tile pattern, 5% teal, bleeding past the section */
.cmr-band__pattern {
    position: absolute;
    left: -200.471px;
    width: 1840.947px;
    height: 652.001px;
    background: url("/dist/images/cmr/runaya-logo-tile.svg") 0 0 / 38.3547px 38.3555px repeat;
    opacity: 0.05;
}
.cmr-fac .cmr-band__pattern { top: -146px; }
.cmr-tech .cmr-band__pattern { top: 0; }

.cmr-fac__intro {
    position: absolute;
    left: 298px;
    top: 44px;                     /* cap top at 50 */
    width: 844px;
    margin: 0;
    font-size: 24px;
    font-weight: 500;
    line-height: 32px;
    color: #074158;
    text-align: center;
}
.cmr-fac__arc {
    position: absolute;
    left: -518px;
    top: -2152px;
    width: 2476px;
    height: 2476px;
}
.cmr-fac__bubble {
    position: absolute;
    width: 168px;
    height: 168px;
    border-radius: 130px;
    background: #074158;
    cursor: pointer;
    overflow: hidden;
}
.cmr-fac__bubble img { position: absolute; max-width: none; pointer-events: none; }
.cmr-fac__bubble--cadmium { left: 128px; top: 128px; background: #074158; }
/* Keep the mineral clipped inside its circle on hover (was overflow:visible,
   which let the rock spill out of the circle — home has no such pop-out). */
.cmr-fac__bubble.is-hover-popping { overflow: hidden; z-index: 2; }
/* Cadmium source PNG has a wide transparent canvas; size by the visible rock, not the canvas. */
.cmr-fac__photo--cadmium { position: absolute; left: -16px; top: 11px; width: 200px; height: 147px; max-width: none; }
.cmr-fac__bubble--cobalt { left: 358px; top: 212px; }
.cmr-fac__bubble--cobalt img { left: 6px; top: 11px; width: 153px; height: 146px; }
.cmr-fac__bubble--zinc { left: 636px; top: 240px; }
.cmr-fac__bubble--zinc img { left: 8px; top: 39px; width: 150px; height: 93px; }
.cmr-fac__bubble--copper { left: 914px; top: 212px; }
.cmr-fac__bubble--copper img { left: 3px; top: 1px; width: 161px; height: 145px; }
.cmr-fac__bubble--antimony { left: 1144px; top: 128px; }
.cmr-fac__bubble--antimony img { left: 2px; top: -2px; width: 170px; height: 170px; }
.cmr-fac__pin { position: absolute; left: 258px; top: 245px; width: 21px; height: 21px; }
.cmr-fac__label {
    position: absolute;
    margin: 0;
    font-size: 30px;
    line-height: 38px;
    color: #074158;
    text-align: center;
    white-space: nowrap;
}
.cmr-fac__label--active { left: 145px; top: 311px; width: 134px; font-weight: 500; }        /* cap top 321 */
.cmr-fac__label--dim {
    font-family: "Eina01-SemiBold", "Eina01", "NHaasGroteskTX", sans-serif;
    font-weight: 600;
    opacity: 0.8;
}
.cmr-fac__label--cobalt { left: 393px; top: 395px; width: 97px; }
.cmr-fac__label--zinc { left: 689px; top: 425px; width: 63px; }
.cmr-fac__label--copper { left: 943px; top: 395px; width: 109px; }
.cmr-fac__label--antimony { left: 1159px; top: 313px; width: 137px; }

.cmr-tc--flame,
.cmr-tc--flask,
.cmr-tech__card-text,
.cmr-impact__item,
.cmr-impact__circle,
.cmr-impact__title {
    cursor: pointer;
}

/* ══ TECHNOLOGY — Our Technology + bracketed cards (page y 2010) ══ */
.cmr-tech__title {
    position: absolute;
    left: 59px;
    top: 127px;                    /* cap top at 134 */
    margin: 0;
    font-size: 60px;
    font-weight: 700;
    line-height: 60px;
    color: #000;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
    white-space: nowrap;
}
.cmr-tech__body {
    position: absolute;
    left: 59px;
    top: 253px;                    /* cap top at 259 */
    width: 467px;
    margin: 0;
    font-size: 24px;
    line-height: 32px;
    color: #000;
}
.cmr-tech__cards {
    position: absolute;
    left: 596px;
    top: 51px;
    width: 774.999px;
    height: 468.716px;
}
.cmr-tech__cards img { position: absolute; }
.cmr-tc--body-l { left: 35px; top: 34.391px; width: 341.508px; height: 399.657px; }
.cmr-tc--body-r { left: 399px; top: 34.391px; width: 341.508px; height: 399.657px; }
.cmr-tc--bracket-ol { left: 0; top: 2.547px; width: 157.026px; height: 463.801px; }
.cmr-tc--bracket-ob { left: 68.031px; top: 454.617px; width: 327.499px; height: 14.099px; }
.cmr-tc--bar-o { left: 35.086px; top: 35.211px; width: 10.048px; height: 398.461px; }
.cmr-tc--arrow-o { left: 111.793px; top: 6.484px; width: 241.931px; height: 2.08px; }
.cmr-tc--dot-o { left: 350.383px; top: 1.453px; width: 12.14px; height: 12.14px; }
.cmr-tc--bracket-tr { left: 617.973px; top: 2.375px; width: 157.027px; height: 463.801px; }
.cmr-tc--bracket-tt { left: 379.461px; top: 0; width: 348.324px; height: 14.099px; }
.cmr-tc--bar-t { left: 730.344px; top: 35.207px; width: 10.048px; height: 398.461px; }
.cmr-tc--arrow-t { left: 421.273px; top: 460.152px; width: 251.132px; height: 2.08px; }
.cmr-tc--dot-t { left: 412.477px; top: 455.125px; width: 12.141px; height: 12.141px; }
.cmr-tc--flame { left: 164px; top: 68px; width: 83px; height: 125px; }
.cmr-tc--flask { left: 517px; top: 68px; width: 105px; height: 125px; }
/* Each icon carries its process's character, but only while hovered — which is
   what the cursor: pointer above has always promised. The flame licks up off its
   base, the flask rocks the way liquid in one does. critical-metal-recovery.js
   clears the inline transform-origin GSAP's entrance leaves behind, otherwise
   the flame pivots about its middle instead of its base. */
.cmr-tc--flame:hover {
    transform-origin: 50% 100%;             /* fire is anchored at its base */
    animation: cmrFlameFlicker 2.6s ease-in-out infinite;
}
.cmr-tc--flask:hover {
    transform-origin: 50% 86%;              /* the flask's wide base */
    animation: cmrFlaskRock 3.4s ease-in-out infinite;
}

/* Uneven steps, and a period that doesn't divide the rock's — the two never
   land in sync, so neither reads as a metronome. */
@keyframes cmrFlameFlicker {
    0%   { transform: scale(1, 1) rotate(0deg); }
    18%  { transform: scale(0.97, 1.06) rotate(-1.4deg); }
    34%  { transform: scale(1.02, 0.98) rotate(1.1deg); }
    52%  { transform: scale(0.96, 1.08) rotate(-0.6deg); }
    68%  { transform: scale(1.01, 1) rotate(1.6deg); }
    84%  { transform: scale(0.98, 1.04) rotate(-0.9deg); }
    100% { transform: scale(1, 1) rotate(0deg); }
}

@keyframes cmrFlaskRock {
    0%   { transform: rotate(-2.4deg) translateY(0); }
    50%  { transform: rotate(2.4deg) translateY(-3px); }
    100% { transform: rotate(-2.4deg) translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .cmr-tc--flame:hover,
    .cmr-tc--flask:hover { animation: none; }
}
.cmr-tech__card-text {
    position: absolute;
    top: 214px;                    /* cap top at 220 */
    width: 272px;
    margin: 0;
    font-size: 18px;
    line-height: 24px;
    color: #000;
    text-align: center;
}
.cmr-tech__card-text--l { left: 70px; }
.cmr-tech__card-text--r { left: 434px; }
.cmr-tech__card-text b {
    font-size: 20px;
    font-weight: 700;
}

/* ══ IMPACT — petal ring + four labels (page 91, 2643) ══ */
.cmr-impact {
    position: absolute;
    left: 91px;
    top: 2643px;
    width: 1259px;
    height: 509.272px;
}
.cmr-impact img, .cmr-impact > svg { position: absolute; }
.cmr-petal { cursor: pointer; }
.cmr-impact__ring { left: 239px; top: 0; width: 781.179px; height: 509.272px; }
.cmr-impact__circle { left: 428.6px; top: 64.4px; width: 392.02px; height: 392.02px; }
.cmr-impact__title {
    position: absolute;
    left: 495.2px;
    top: 196px;                    /* cap top at 203 */
    width: 258.797px;
    margin: 0;
    font-size: 60px;
    font-weight: 700;
    line-height: 60px;
    color: #000;
    text-align: center;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
}
.cmr-impact__label {
    position: absolute;
    margin: 0;
    width: 220px;
    font-size: 20px;
    font-weight: 500;
    line-height: 24px;
    color: #021c25;
}
.cmr-impact__label--1 { left: 5px; top: 105px; text-align: right; }     /* cap top 110 */
.cmr-impact__label--2 { left: 0; top: 354px; text-align: right; }
.cmr-impact__label--3 { left: 1039px; top: 105px; text-align: left; }
.cmr-impact__label--4 { left: 1039px; top: 354px; text-align: left; }

.cmr-impact__ic-rec-a { left: 343.6px; top: 148.8px; width: 40.04px; height: 32.1px; }
.cmr-impact__ic-rec-b { left: 308px; top: 137px; width: 26.3px; height: 38.3px; }
.cmr-impact__ic-rec-c { left: 330.8px; top: 108px; width: 36.7px; height: 33.4px; }
.cmr-impact__ic-circ { left: 311px; top: 330px; width: 75px; height: 75px; }
.cmr-impact__ic-multi { left: 891px; top: 108px; width: 64.34px; height: 75px; }
.cmr-impact__ic-foot { left: 884px; top: 331px; width: 80.1px; height: 75px; }
.cmr-impact__ic-bar { width: 8.98px; height: 4.7px; top: 388.2px; }
.cmr-impact__ic-bar--1 { left: 914.5px; }
.cmr-impact__ic-bar--2 { left: 929.7px; }
.cmr-impact__ic-bar--3 { left: 944.9px; }

/* ═══════════════════════════════════════════════════════════════
   MOBILE (<768px) — real phone layout, desktop untouched above.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .cmr-scale { zoom: 1 !important; width: auto; }
    .cmr-stage { width: auto; height: auto; overflow: visible; }
    .cmr-stage img { max-width: 100%; }

    /* hero */
    .cmr-hero { position: relative; width: auto; height: 800px; }
    .cmr-hero__banner { width: 100%; height: 100%; }
    .cmr-hero__banner-img { width: 100%; height: 100%; object-fit: cover; }
    .cmr-hero__overlay { width: 100%; height: 100%; }
    .cmr-hero__head { left: 16px; right: 16px; bottom: 32px; width: auto; gap: 10px; }
    .cmr-crumb { font-size: 13px; line-height: 15px; }
    .cmr-hero__title { font-size: 40px; line-height: 42px; }
    .cmr-hero__mouse { left: auto; right: 24px; bottom: 44px; }
    .cmr-hero__arrow { left: auto; right: 30.5px; bottom: 57.5px; }
    .cmr-hero__swipe-label { left: auto; right: 12px; bottom: 28px; transform: none; font-size: 14px; }

    /* intro */
    .cmr-lead { position: relative; left: 0; top: 0; width: auto; margin: 32px 16px 0; font-size: 20px; line-height: 28px; }
    .cmr-h2 { position: relative; top: 0; width: auto; margin: 24px 16px 0; font-size: 32px; line-height: 38px; white-space: normal; }
    .cmr-body { position: relative; left: 0; top: 0; width: auto; margin: 18px 16px 0; font-size: 16px; line-height: 24px; }

    /* capacity — gear above, stat below */
    .cmr-cap__gear1 { position: relative; left: 0; top: 0; width: 180px; height: 180px; margin: 32px auto 0; display: block; }
    .cmr-cap__gear3 {
        position: relative; left: 0; top: 0; display: block;
        width: 136px; height: 136px;
        margin: -158px auto 32px;             /* overlays the centre of gear1 */
    }
    .cmr-cap__arrow { display: none; }        /* 1440-wide connector frame */
    .cmr-cap__over,
    .cmr-cap__num,
    .cmr-cap__sub { position: relative; left: 0; top: 0; width: auto; margin: 0 16px; }
    .cmr-cap__over { margin-top: 32px; font-size: 18px; line-height: 22px; }
    .cmr-cap__num { margin-top: 6px; font-size: 44px; line-height: 48px; }
    .cmr-cap__sub { margin-top: 6px; font-size: 18px; line-height: 22px; }

    /* facilities — bubbles wrap in a centered row */
    .cmr-fac { position: relative; top: 0; width: auto; height: auto; margin-top: 36px; padding: 28px 0 32px; }
    .cmr-band__pattern { width: 200%; height: 100%; top: 0; }
    .cmr-fac__arc { display: none; }          /* 2476px circle tuned to the desktop band */
    .cmr-fac__intro { position: relative; left: 0; top: 0; width: auto; margin: 0 16px; font-size: 16px; line-height: 24px; }
    .cmr-fac__bubbles { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px 24px; margin: 26px 12px 0; }
    .cmr-fac__metal { width: 120px; }
    .cmr-fac__bubble { position: relative; left: 0 !important; top: 0 !important; width: 120px; height: 120px; margin: 0 auto; }
    .cmr-fac__bubble--cadmium { overflow: hidden; }
    .cmr-fac__bubble--cadmium .cmr-fac__photo--cadmium {
        position: absolute; left: -11px; top: 8px; width: 143px; height: 105px; max-width: none;
    }
    .cmr-fac__bubble img { max-width: none; }
    .cmr-fac__bubble--cobalt img { left: 4px; top: 8px; width: 109px; height: 104px; }
    .cmr-fac__bubble--zinc img { left: 6px; top: 28px; width: 107px; height: 66px; }
    .cmr-fac__bubble--copper img { left: 2px; top: 1px; width: 115px; height: 104px; }
    .cmr-fac__bubble--antimony img { left: 1px; top: -1px; width: 121px; height: 121px; }
    .cmr-fac__pin { display: none; }
    .cmr-fac__label {
        position: relative; left: 0 !important; top: 0 !important; width: auto !important;
        margin-top: 10px; font-size: 18px; line-height: 22px;
    }
    /* No active/dim hover state on the static phone grid — every metal label reads the same */
    .cmr-fac__label--active,
    .cmr-fac__label--dim {
        opacity: 1;
        font-weight: 600;
    }

    /* technology — stacked simple cards, same content */
    .cmr-tech { position: relative; top: 0; width: auto; height: auto; margin-top: 0; padding: 44px 16px 32px; }
    .cmr-tech__title { position: relative; left: 0; top: 0; margin: 0; font-size: 32px; line-height: 38px; white-space: normal; }
    .cmr-tech__body { position: relative; left: 0; top: 0; width: auto; margin: 14px 0 0; font-size: 16px; line-height: 24px; }
    .cmr-tech__cards { position: relative; left: 0; top: 0; width: auto; height: auto; margin-top: 22px; }
    .cmr-tech__cards > img { display: none; }  /* desktop bracket chrome is built for 775px */
    .cmr-tech__card {
        display: grid;
        grid-template-columns: 59px minmax(0, 1fr);
        align-items: center;
        gap: 16px;
        background: #f2f2f2;
        border-radius: 12px;
        padding: 22px 18px;
    }
    .cmr-tech__card--l { border-top: 5px solid #ff5f1a; }
    .cmr-tech__card--r { margin-top: 18px; border-top: 5px solid #074158; }
    .cmr-tech__cards .cmr-tc--flame,
    .cmr-tech__cards .cmr-tc--flask { display: block !important; position: static; margin: 0; }
    .cmr-tech__cards .cmr-tc--flame { width: 46px; height: 70px; }
    .cmr-tech__cards .cmr-tc--flask { width: 59px; height: 70px; }
    .cmr-tech__card-text {
        position: static;
        width: auto;
        margin: 0;
        padding: 0;
        font-size: 15px;
        line-height: 22px;
        text-align: left;
    }
    .cmr-tech__card-text--l,
    .cmr-tech__card-text--r { left: auto; }
    .cmr-tech__card-text b { display: block; margin-bottom: 8px; font-size: 18px; }
    .cmr-tech__card-text br { display: none; }
    .cmr-tech__card-text--l::before,
    .cmr-tech__card-text--r::before { display: none; }

    /* impact — title + four petal chips.
       overflow:hidden because the GSAP entrance parks labels 3/4 at x:+24 (see
       critical-metal-recovery.js:57) — harmless on the 1440 stage where they are absolutely
       placed, but on phone they sit against the right edge, so that pre-animation state
       pushed the document to 398px wide and the page scrolled sideways. */
    .cmr-impact { position: relative; left: 0; top: 0; width: auto; height: auto; margin: 36px 16px 44px; overflow: hidden; }
    /* 1259px petal composition — !important because the GSAP entrance writes an inline
       display:block onto these, which otherwise beats this rule and overflows the phone */
    .cmr-impact__ring, .cmr-impact__circle { display: none !important; }
    .cmr-impact__title { position: relative; left: 0; top: 0; width: auto; margin: 0 0 18px; font-size: 32px; line-height: 38px; }
    .cmr-impact__item { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
    .cmr-impact__chip {
        flex: none; width: 64px; height: 64px; border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
    }
    /* The impact SVGs declare percentage dimensions. Give every mobile glyph a
       concrete box so Chromium on Android preserves the intended artwork. */
    .cmr-impact__chip img { position: static !important; width: 34px; height: 34px; object-fit: fill; }
    /* recycle glyph is 3 vectors — recompose at 0.53x inside the chip */
    .cmr-impact__chip--1 { position: relative; }
    .cmr-impact__chip--1 img { position: absolute !important; }
    .cmr-impact__chip--1 .cmr-impact__ic-rec-a { left: 31px; top: 34px; width: 21.2px; height: 17.1px; }
    .cmr-impact__chip--1 .cmr-impact__ic-rec-b { left: 12px; top: 28px; width: 13.9px; height: 20px; }
    .cmr-impact__chip--1 .cmr-impact__ic-rec-c { left: 24px; top: 13px; width: 19.5px; height: 17.8px; }
    .cmr-impact__chip--3 .cmr-impact__ic-multi { width: 29.2px; height: 34px; }
    .cmr-impact__chip--4 .cmr-impact__ic-foot { width: 34px; height: 31.8px; }
    .cmr-impact__chip--1 { background: #4f6068; }
    .cmr-impact__chip--2 { background: #688b98; }
    .cmr-impact__chip--3 { background: #26c8b8; }
    .cmr-impact__chip--4 { background: #074158; }
    .cmr-impact__label {
        position: static !important; width: auto; margin: 0;
        flex: 1; min-width: 0;
        font-size: 16px; line-height: 22px; text-align: left !important;
    }
    .cmr-impact__ic-bar { display: none; }
}

/* ── Full-bleed hero past the 16" cap ─────────────────────────────────────
   The page freezes + centres past 1728px. Let the hero span the full viewport
   while its text stays in the centred 1440 column. The stage clips to 1440, so
   it must not clip horizontally here; body{overflow-x:hidden} still stops any
   scrollbar since the hero bleeds to exactly the viewport width. */
@media (min-width: 1729px) {
    .cmr-stage { overflow: visible; }
    .cmr-hero { left: var(--bleed-left); width: var(--bleed-w); }
    .cmr-hero__banner,
    .cmr-hero__banner-img,
    .cmr-hero__overlay { width: var(--bleed-w); }
    .cmr-hero__head { left: calc(61px + var(--bleed-shift)); }
    .cmr-hero__mouse { left: calc(1343px + var(--bleed-shift)); }
    .cmr-hero__arrow { left: calc(1345.5px + var(--bleed-shift)); }
    .cmr-hero__swipe-label { left: calc(1354px + var(--bleed-shift)); }
    .cmr-fac,
    .cmr-tech {
        left: var(--bleed-left);
        width: var(--bleed-w);
        border-radius: 0;
    }
    .cmr-band__pattern {
        left: 0;
        width: 100%;
    }
    .cmr-fac__arc,
    .cmr-fac__intro,
    .cmr-fac__bubble,
    .cmr-fac__pin,
    .cmr-fac__label,
    .cmr-tech__title,
    .cmr-tech__body,
    .cmr-tech__cards {
        translate: var(--bleed-shift) 0;
    }
}