/* ==========================================================================
   OUTRUN — introduction site
   Material: graphite, bone-white light, one warm accent. Nothing else.
   ========================================================================== */

:root {
    --void: #05060a;
    --rock: #0c0e13;
    --ash: #8d939b;
    --ash-dim: rgba(210, 214, 219, 0.58);
    --bone: #f1efea;
    --hot: #e2683a;
    --line: rgba(226, 228, 232, 0.12);

    --display: "Jost", "Futura", "Avenir Next", "Helvetica Neue", sans-serif;
    --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --gut: clamp(20px, 4.4vw, 76px);

    /* written from JS */
    --cx: 52%;
    --rw: 60vw;
    --rh: 100vh;
}

* { box-sizing: border-box; }

html {
    background: var(--void);
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--void);
    color: var(--bone);
    font-family: var(--display);
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    isolation: isolate;
}

body.is-locked { overflow: hidden; }

.defs { position: absolute; width: 0; height: 0; }

.skip {
    position: fixed;
    top: -100px;
    left: 16px;
    z-index: 99;
    padding: 10px 16px;
    background: var(--bone);
    color: var(--void);
    font-size: 13px;
    text-decoration: none;
}

.skip:focus { top: 16px; }

:focus-visible {
    outline: 1px solid var(--bone);
    outline-offset: 6px;
}

/* ------------------------------------------------------------------ world */

.world {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: var(--void);
    contain: layout paint;
}

.world__cam {
    position: absolute;
    inset: 0;
    will-change: transform;
}

/* Every rock layer shares one geometry so the three slices of the
   photograph line up to the pixel. */
.rock__plate,
.rock__core,
.fissure,
.rock__flank {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--rw);
    height: var(--rh);
    margin-left: calc(var(--rw) / -2);
    margin-top: calc(var(--rh) / -2);
    background-image: var(--rock-src);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

/* The photograph is a portrait crop; the flanks carry the material out to
   the edges of a wide screen instead of fading to flat black. */
.rock__flank {
    filter: blur(18px) brightness(0.38) contrast(1.04);
    transform: scaleX(-1);
    opacity: 0.85;
}

.rock__flank--l {
    margin-left: calc(var(--rw) / -2 - var(--rw) * 0.82);
    mask-image: linear-gradient(90deg, transparent 4%, rgba(0, 0, 0, 0.7) 58%, #000 100%);
}

.rock__flank--r {
    margin-left: calc(var(--rw) / -2 + var(--rw) * 0.82);
    mask-image: linear-gradient(270deg, transparent 4%, rgba(0, 0, 0, 0.7) 58%, #000 100%);
}

.rock__plate,
.rock__core {
    /* the crop must dissolve into the dark instead of ending on an edge */
    mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
}

.rock__plate {
    will-change: transform;
    transform-origin: 50% 50%;
}

.rock__plate--l { z-index: 3; }
.rock__plate--r { z-index: 3; }

/* The lit seam of the original photograph, kept intact and free to widen. */
.rock__core {
    z-index: 4;
    will-change: transform, filter;
    transform-origin: var(--cx) 50%;
}

/* Synthetic light that only becomes visible once the plates part. */
.fissure {
    z-index: 2;
    background: none;
    opacity: 0;
    will-change: opacity, transform;
}

.fissure svg { width: 100%; height: 100%; display: block; }

.debris {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.debris--far {
    position: absolute;
    z-index: 5;
    will-change: transform;
}

.debris--near {
    position: fixed;
    z-index: 10;
    filter: blur(4px);
    opacity: 0.78;
    will-change: transform;
}

.grain {
    position: fixed;
    inset: -120px;
    z-index: 11;
    pointer-events: none;
    opacity: 0.055;
    background-repeat: repeat;
    animation: grain 0.9s steps(1) infinite;
}

@keyframes grain {
    0% { transform: translate(0, 0); }
    20% { transform: translate(-34px, 18px); }
    40% { transform: translate(22px, -26px); }
    60% { transform: translate(-14px, -34px); }
    80% { transform: translate(30px, 22px); }
}

/* Ground for the words: sits under the content, so it darkens the world
   and never the type. */
.scrim {
    position: fixed;
    inset: 0;
    z-index: 7;
    pointer-events: none;
    background: linear-gradient(180deg,
        rgba(3, 4, 7, 0.66) 0%,
        rgba(3, 4, 7, 0) 20%,
        rgba(3, 4, 7, 0) 62%,
        rgba(3, 4, 7, 0.8) 92%,
        rgba(3, 4, 7, 0.9) 100%);
}

/* Lens vignette: this one may fall across everything, gently. */
.vignette {
    position: fixed;
    inset: 0;
    z-index: 12;
    pointer-events: none;
    background: radial-gradient(126% 94% at 50% 46%,
        transparent 36%, rgba(3, 4, 7, 0.44) 80%, rgba(3, 4, 7, 0.78) 100%);
}

.curtain {
    position: fixed;
    inset: 0;
    z-index: 20;
    pointer-events: none;
    background: #010204;
}


/* ------------------------------------------------------------------- page */

.page {
    position: relative;
    z-index: 8;
}

.hud {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: clamp(16px, 2.4vw, 30px) var(--gut);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--ash);
    mix-blend-mode: difference;
}

.hud__mark {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: var(--bone);
}

.hud__mark b {
    font-family: var(--display);
    font-weight: 400;
    letter-spacing: 0.42em;
    font-size: 12px;
}

.mark { width: 13px; height: 18px; display: block; }

.sec {
    position: relative;
    padding: 0 var(--gut);
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.sec--hero {
    justify-content: flex-end;
    padding-bottom: clamp(28px, 5vh, 64px);
    min-height: 100svh;
}

/* Section seams: a hairline that lights up as it passes, and sheds dust. */
.seam {
    position: absolute;
    top: 0;
    left: var(--gut);
    right: var(--gut);
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(241, 239, 234, 0.5), transparent);
    transform: scaleX(0.2);
    opacity: 0;
}

/* -------------------------------------------------------------- hero type */

.eyebrow {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 clamp(20px, 4vh, 46px);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--ash);
}

.eyebrow i {
    width: clamp(26px, 5vw, 64px);
    height: 1px;
    background: var(--hot);
    display: block;
}

.title {
    margin: 0;
    font-weight: 200;
    line-height: 0.86;
    font-size: clamp(3.1rem, 15.2vw, 13.5rem);
}

/* The word stands in front of the light, so it is drawn by difference:
   pale against the graphite, silhouetted where the fissure burns through.
   Per pixel, so a letter that is half in the light reads correctly. */
.title__row {
    /* inline-block so its measured width is the word, not the column */
    display: inline-block;
    letter-spacing: 0.3em;
    margin-right: -0.3em;
    white-space: nowrap;
    mix-blend-mode: difference;
}

.ch {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
}

/* One viewport-fixed gradient shared by every letter, so the light of the
   fissure appears to fall across the word. */
.ch > span {
    display: block;
    color: #ffffff;
    will-change: transform;
}

.creed {
    margin: clamp(18px, 3.4vh, 40px) 0 0;
    font-family: var(--mono);
    font-size: clamp(10px, 1.05vw, 12px);
    letter-spacing: 0.44em;
    text-transform: uppercase;
    color: var(--ash);
}

.creed em { font-style: normal; color: var(--hot); }

.lede {
    margin: clamp(20px, 3.4vh, 34px) 0 0;
    max-width: 30ch;
    font-size: clamp(1.05rem, 1.55vw, 1.5rem);
    font-weight: 300;
    line-height: 1.4;
    letter-spacing: -0.005em;
}

.lede__dim { color: var(--ash); }

.cta-wrap { margin-top: clamp(26px, 4.4vh, 52px); }

/* A plate of polished stone, not a rounded SaaS pill. */
.cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 18px;
    padding: 17px 26px 17px 24px;
    text-decoration: none;
    color: var(--bone);
    font-size: 12px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    font-weight: 400;
    background: rgba(160, 172, 186, 0.045);
    -webkit-backdrop-filter: saturate(1.15) brightness(1.05);
    backdrop-filter: saturate(1.15) brightness(1.05);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        inset 0 0 0 1px rgba(255, 255, 255, 0.06),
        0 20px 40px -28px rgba(0, 0, 0, 0.9);
    clip-path: inset(0 0 0 0);
    transition: background 0.4s var(--ease), color 0.3s var(--ease);
}

.lens-on .cta {
    -webkit-backdrop-filter: url(#lens-cta) saturate(1.15) brightness(1.05);
    backdrop-filter: url(#lens-cta) saturate(1.15) brightness(1.05);
}

.lens-on .cta--final {
    -webkit-backdrop-filter: url(#lens-cta2) saturate(1.15) brightness(1.05);
    backdrop-filter: url(#lens-cta2) saturate(1.15) brightness(1.05);
}

.no-lens .cta {
    -webkit-backdrop-filter: blur(9px) saturate(1.3) brightness(1.06);
    backdrop-filter: blur(9px) saturate(1.3) brightness(1.06);
}

.cta__arrow {
    font-size: 14px;
    transform: translateX(0);
    transition: transform 0.5s var(--ease);
}

/* The light under the plate, running out from the fissure. */
.cta__edge {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 1px;
    width: 100%;
    background: linear-gradient(90deg, rgba(241, 239, 234, 0.5), rgba(241, 239, 234, 0.06));
    transform-origin: left;
    transform: scaleX(0.24);
    transition: transform 0.7s var(--ease), background 0.7s var(--ease);
}

.cta:hover { background: rgba(180, 192, 208, 0.085); }
.cta:hover .cta__arrow { transform: translateX(7px); }
.cta:hover .cta__edge {
    transform: scaleX(1);
    background: linear-gradient(90deg, #fff, rgba(226, 104, 58, 0.55));
}

.hero__foot {
    display: flex;
    align-items: flex-end;
    gap: clamp(22px, 4vw, 58px);
    margin-top: clamp(30px, 6vh, 74px);
    padding-top: 18px;
    border-top: 1px solid var(--line);
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ash-dim);
}

.spec { margin: 0; }

.spec b {
    display: block;
    margin-bottom: 5px;
    font-family: var(--display);
    font-size: 15px;
    font-weight: 300;
    letter-spacing: 0.12em;
    color: var(--bone);
}

.scroll {
    margin: 0 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
}

.scroll i {
    display: block;
    width: 46px;
    height: 1px;
    background: var(--line);
    position: relative;
    overflow: hidden;
}

.scroll i::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--bone);
    transform-origin: left;
    animation: sweep 3.2s var(--ease) infinite;
}

@keyframes sweep {
    0% { transform: translateX(-100%); }
    58%, 100% { transform: translateX(100%); }
}

/* ------------------------------------------------------------------- acts */

.sec--act { justify-content: center; }

/* The seam decides where the words may stand. JS writes --seam-l/--seam-r
   (viewport px) on layout; the columns take their room from there. */
.act {
    position: relative;
    z-index: 2;
    max-width: calc(var(--seam-l, 52vw) - var(--gut) - 26px);
}

.act--right {
    margin-left: auto;
    text-align: right;
    max-width: calc(100vw - var(--seam-r, 58vw) - var(--gut) - 26px);
}

.act__no {
    display: block;
    margin-bottom: 20px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.3em;
    color: var(--hot);
}

.act__title {
    display: inline-block;
    margin: 0;
    font-size: clamp(2.7rem, 9.6vw, 8.4rem);
    font-weight: 200;
    line-height: 0.92;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.act__line {
    margin: clamp(18px, 2.6vh, 30px) 0 0;
    max-width: min(34ch, 100%);
    font-size: clamp(0.98rem, 1.25vw, 1.16rem);
    line-height: 1.55;
    color: var(--ash);
}

.act--right .act__line { margin-left: auto; }

/* route ------------------------------------------------------------------ */

.route {
    position: absolute;
    left: var(--gut);
    right: 0;
    bottom: 12vh;
    width: auto;
    height: 34vh;
    overflow: visible;
    pointer-events: none;
}

.route__ghost,
.route__line {
    fill: none;
    stroke-linecap: round;
}

.route__ghost {
    stroke: rgba(226, 228, 232, 0.07);
    stroke-width: 1;
    stroke-dasharray: 2 9;
}

.route__line {
    stroke: var(--bone);
    stroke-width: 1.4;
    filter: drop-shadow(0 0 7px rgba(241, 239, 234, 0.4));
}

.route__dot {
    fill: var(--bone);
    filter: drop-shadow(0 0 9px rgba(241, 239, 234, 0.85));
}

/* scanner ---------------------------------------------------------------- */

.scanfield {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
}

.spot {
    position: absolute;
    width: 3px;
    height: 3px;
    margin: -1.5px 0 0 -1.5px;
    border-radius: 50%;
    background: rgba(241, 239, 234, 0.34);
    transition: background 0.5s var(--ease), box-shadow 0.6s var(--ease), transform 0.6s var(--ease);
}

.spot[data-key] { background: rgba(226, 104, 58, 0.5); }

.spot.is-found {
    background: var(--bone);
    transform: scale(2.1);
    box-shadow: 0 0 14px 2px rgba(241, 239, 234, 0.55);
}

.spot[data-key].is-found {
    background: var(--hot);
    box-shadow: 0 0 18px 3px rgba(226, 104, 58, 0.6);
}

.scan-lens {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--lens-size, 300px);
    height: var(--lens-size, 300px);
    border-radius: 50%;
    opacity: 0;
    will-change: transform, opacity;
    -webkit-backdrop-filter: brightness(1.16) saturate(1.1);
    backdrop-filter: brightness(1.16) saturate(1.1);
    box-shadow:
        inset 0 0 0 1px rgba(241, 239, 234, 0.14),
        inset 10px 14px 40px -22px rgba(255, 255, 255, 0.7),
        0 30px 60px -40px rgba(0, 0, 0, 0.9);
}

.lens-on .scan-lens {
    -webkit-backdrop-filter: url(#lens-scan) brightness(1.14) saturate(1.1);
    backdrop-filter: url(#lens-scan) brightness(1.14) saturate(1.1);
}

.no-lens .scan-lens {
    -webkit-backdrop-filter: blur(3px) brightness(1.2) saturate(1.2);
    backdrop-filter: blur(3px) brightness(1.2) saturate(1.2);
}

.scan-lens::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%,
        transparent 54%,
        rgba(200, 216, 232, 0.1) 80%,
        rgba(255, 255, 255, 0.5) 97%,
        transparent 100%);
    mix-blend-mode: screen;
}

.scan-ring {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--lens-size, 300px);
    height: var(--lens-size, 300px);
    border-radius: 50%;
    border: 1px solid rgba(226, 104, 58, 0.55);
    opacity: 0;
    pointer-events: none;
    will-change: transform, opacity;
}

.scanfield__hint {
    position: relative;
    z-index: 2;
    margin: clamp(26px, 4vh, 46px) 0 0;
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ash-dim);
}

/* tracking --------------------------------------------------------------- */

.track {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.track__ping {
    position: absolute;
    top: 0;
    left: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--hot);
    opacity: 0;
    box-shadow: 0 0 0 0 rgba(226, 104, 58, 0.45);
}

.track__read {
    position: absolute;
    right: var(--gut);
    bottom: clamp(60px, 12vh, 130px);
    margin: 0;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.24em;
    color: var(--ash-dim);
}

.track__read b {
    color: var(--hot);
    font-weight: 400;
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ roles */

.sec--roles { justify-content: center; }

.roles__eyebrow {
    margin: 0 0 clamp(26px, 5vh, 56px);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--ash);
}

.roles {
    display: grid;
    grid-template-columns:
        calc(var(--seam-l, 48vw) - var(--gut) - 88px)
        calc(var(--seam-r, 56vw) - var(--seam-l, 48vw) + 176px)
        1fr;
    align-items: center;
    width: 100%;
}

.role__tag {
    display: block;
    margin-bottom: clamp(10px, 1.6vh, 18px);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--ash-dim);
}

/* The two roles are the game, so they are set at act scale — sized to their
   column by fitTitles(), both sides to the same value. */
.role h3 {
    display: inline-block;
    margin: 0 0 clamp(14px, 2vh, 22px);
    font-size: clamp(1.7rem, 4.6vw, 3.6rem);
    font-weight: 300;
    line-height: 0.98;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.role__intro {
    margin: 0 0 clamp(20px, 3vh, 34px);
    max-width: 30ch;
    font-size: clamp(0.95rem, 1.2vw, 1.1rem);
    line-height: 1.5;
    color: rgba(206, 212, 220, 0.78);
}

.role ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: clamp(9px, 1.5vh, 17px);
    font-size: clamp(1.05rem, 1.8vw, 1.6rem);
    font-weight: 300;
    color: rgba(233, 237, 243, 0.86);
}

.role--run { text-align: right; }
.role--run h3 { color: var(--bone); }
.role--run .role__intro { margin-left: auto; }

.role--hunt h3 { color: var(--hot); }
.role--hunt li { color: rgba(236, 138, 98, 0.94); }

/* deliberately empty: the fissure itself divides the two sides */
.roles__split { align-self: stretch; }
.roles__split span { display: none; }

.roles__note {
    margin: clamp(34px, 7vh, 78px) 0 0;
    max-width: min(40ch, calc(var(--seam-l, 48vw) - var(--gut) - 88px));
    font-size: clamp(0.95rem, 1.2vw, 1.12rem);
    color: var(--ash);
}

/* ------------------------------------------------------------- real world */

.sec--real { justify-content: center; }

.real__claim {
    margin: 0;
    max-width: calc(var(--seam-l, 52vw) - var(--gut) + 2vw);
    font-size: clamp(2rem, 6.6vw, 5.6rem);
    font-weight: 200;
    line-height: 1.02;
    letter-spacing: -0.02em;
}

.ln {
    display: block;
    overflow: hidden;
    padding-bottom: 0.04em;
}

.ln > span { display: block; }

.hot { color: var(--hot); }

.marquee {
    position: relative;
    margin: clamp(34px, 6vh, 72px) calc(var(--gut) * -1);
    overflow: hidden;
    background: linear-gradient(90deg,
        rgba(4, 5, 9, 0) 0%,
        rgba(4, 5, 9, 0.82) 14%,
        rgba(4, 5, 9, 0.88) 50%,
        rgba(4, 5, 9, 0.82) 86%,
        rgba(4, 5, 9, 0) 100%);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: clamp(14px, 2.2vh, 24px) 0;
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.marquee__row {
    display: flex;
    align-items: center;
    gap: clamp(18px, 2.6vw, 40px);
    white-space: nowrap;
    will-change: transform;
    font-size: clamp(1.1rem, 2.6vw, 2.2rem);
    font-weight: 200;
    letter-spacing: 0.02em;
    color: var(--ash);
}

.marquee__row i {
    font-style: normal;
    color: var(--hot);
    font-size: 0.6em;
}

.real__line {
    margin: 0;
    max-width: 48ch;
    font-size: clamp(0.95rem, 1.25vw, 1.12rem);
    line-height: 1.6;
    color: var(--ash);
}

/* ----------------------------------------------------------------- finale */

.sec--final::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(58% 40% at 50% 44%,
        rgba(4, 5, 9, 0.88) 0%,
        rgba(4, 5, 9, 0.72) 46%,
        rgba(4, 5, 9, 0) 78%);
}

.sec--final {
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 108svh;
}

.final__title {
    position: relative;
    margin: 0;
    font-size: clamp(2.3rem, 8.4vw, 7.4rem);
    font-weight: 200;
    line-height: 1.14;
    letter-spacing: -0.012em;
}

/* Both lines carry descenders (jij, voorblijven); give them room under the clip. */
.final__title .ln { padding-bottom: 0.12em; }

.creed--final { position: relative; margin-top: clamp(20px, 3vh, 34px); }

.sec--final .cta-wrap { position: relative; }

.foot {
    position: absolute;
    left: var(--gut);
    right: var(--gut);
    bottom: clamp(20px, 4vh, 40px);
    display: flex;
    justify-content: space-between;
    gap: 16px;
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(210, 214, 219, 0.46);
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 860px) {
    .act, .act--right, .real__claim, .roles__note { max-width: none; }
    .creed { color: rgba(226, 230, 236, 0.78); }
    .hero__foot { color: rgba(214, 219, 226, 0.72); }
    .route { position: relative; left: 0; height: 30vh; margin-top: 6vh; bottom: auto; }
    .scrim {
        background: linear-gradient(180deg,
            rgba(3, 4, 7, 0.64) 0%,
            rgba(3, 4, 7, 0) 16%,
            rgba(3, 4, 7, 0.34) 40%,
            rgba(3, 4, 7, 0.82) 72%,
            rgba(3, 4, 7, 0.94) 100%);
    }
    .hud__meta { display: none; }
    .lede { max-width: 24ch; }
    .act, .act--right { max-width: none; text-align: left; }
    .act--right .act__line { margin-left: 0; }
    .hero__foot { flex-wrap: wrap; gap: 18px 26px; }
    .scroll { margin-left: 0; width: 100%; }
    .roles {
        grid-template-columns: 1fr;
        gap: 34px;
    }
    .role--run { text-align: left; }
    .role--run .role__intro { margin-left: 0; }
    .roles__eyebrow { margin-bottom: 26px; }
    .roles__split {
        width: 100%;
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--line), transparent);
    }
    .roles__split span {
        width: 34%;
        height: 1px;
        margin: 0;
        background: linear-gradient(90deg, transparent, #fff, transparent);
    }
    .foot { flex-direction: column; gap: 6px; }
    /* background-attachment: fixed is expensive and unreliable on mobile */
    .marquee { margin-inline: calc(var(--gut) * -1); }
}

@media (prefers-reduced-motion: reduce) {
    .grain { animation: none; }
    .scroll i::after { animation: none; transform: none; }
}

@media (prefers-reduced-transparency: reduce) {
    .cta,
    .scan-lens {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        background: rgba(24, 28, 36, 0.92);
    }
}