/* ==========================================================================
   DIESEL DIGITAL — site.css
   Two typefaces, both self-hosted in /assets/fonts:
     NF Ultra      every headline and button (caps only — it has no lowercase)
     Martian Mono  everything else: body in regular, eyebrows and subheads in bold
   One ink, one paper, the logo's grey. Marker red marks problems; the
   museum's gold marks fixes.
   ========================================================================== */

@layer reset, base, components, sections, states;

/* ---------------------------------------------------------------- fonts */
@font-face {
  font-family: "NF Ultra";
  src: url("../fonts/NFUltra-Regular.woff2") format("woff2"), url("../fonts/NFUltra-Regular.woff") format("woff");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Martian Mono";
  src: url("../fonts/MartianMono-latin.woff2") format("woff2");
  font-weight: 100 800;
  font-stretch: 75% 112.5%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Martian Mono";
  src: url("../fonts/MartianMono-latin-ext.woff2") format("woff2");
  font-weight: 100 800;
  font-stretch: 75% 112.5%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------------------------------------------------------------- reset */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ol, ul { margin: 0; }
  ol, ul { padding: 0; list-style: none; }
  img, picture, svg, video { display: block; max-width: 100%; }
  img { height: auto; }
  input, button { font: inherit; color: inherit; }
  button { background: none; border: 0; padding: 0; cursor: pointer; }
  a { color: inherit; text-decoration: none; }
  [hidden] { display: none !important; }
}

/* ---------------------------------------------------------------- base */
@layer base {
  :root {
    --ink: #0a0a0b;
    --ink-2: #111113;
    --ink-3: #1a1a1d;
    --paper: #efede8;
    --smoke: #9a9a9a;          /* the grey in the logo */
    --smoke-2: #66666b;
    --soft: #c4c2bc;           /* body copy on ink */
    --rule: rgb(239 237 232 / .14);
    --rule-2: rgb(239 237 232 / .07);
    --marker: #e3261a;         /* problems */
    --gold: #fcbc02;           /* fixes */

    --f-display: "NF Ultra", "Arial Black", Impact, sans-serif;
    --f-mono: "Martian Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    --pad: clamp(16px, 3.4vw, 56px);
    --gap: clamp(12px, 1.6vw, 24px);
    --nav-h: 76px;

    --t-body: 15px;
    --t-lede: clamp(15.5px, 1.12vw, 18px);
    --t-eyebrow: 11px;

    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --ease-io: cubic-bezier(.76, 0, .24, 1);
    --chamfer: 12px;
  }
  @media (max-width: 760px) { :root { --nav-h: 64px; --t-body: 14.5px; } }

  html { background: var(--ink); color: var(--paper); }
  body {
    font-family: var(--f-mono);
    font-size: var(--t-body);
    font-weight: 380;
    font-stretch: 87.5%;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
    min-height: 100vh;
  }
  ::selection { background: var(--paper); color: var(--ink); }
  :focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }
  main:focus { outline: none; }

  /* Headlines: NF Ultra. It ships a 0.6em word space, so it's brought in;
     em spacing resolves where it's declared, so it's restated on every
     descendant (fitted lines set their own font-size). */
  .display {
    font-family: var(--f-display);
    font-weight: 400;
    text-transform: uppercase;
    line-height: .92;
    font-kerning: normal;
  }
  .display, .display * { letter-spacing: -.004em; word-spacing: -.26em; }

  /* Eyebrows, labels and subheads: Martian Mono, bold. */
  .eyebrow {
    font-family: var(--f-mono);
    font-size: var(--t-eyebrow);
    font-weight: 700;
    font-stretch: 100%;
    line-height: 1.45;
    letter-spacing: .07em;
    text-transform: uppercase;
  }
  .lede { font-size: var(--t-lede); line-height: 1.62; font-weight: 400; color: var(--paper); text-wrap: pretty; }

  .wrap { padding-inline: var(--pad); }
  .sr-only, .sr-defs {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  .skip {
    position: fixed; left: 12px; top: 12px; z-index: 300; padding: 10px 14px;
    background: var(--paper); color: var(--ink); transform: translateY(-160%);
    font: 700 12px var(--f-mono); text-transform: uppercase;
  }
  .skip:focus { transform: none; }

  html.lenis, html.lenis body { height: auto; }
  .lenis.lenis-smooth { scroll-behavior: auto !important; }
  .lenis.lenis-stopped { overflow: clip; }
  @media (max-width: 760px) { .hide-s { display: none; } }
}

/* ---------------------------------------------------------------- components */
@layer components {

  /* Logo — one set of traced paths, drawn anywhere with <use> */
  .logo { width: 100%; height: auto; overflow: visible; color: currentColor; }
  .logo use { fill: currentColor; }
  .logo .lg-slash, .logo .lg-script { fill: var(--logo-grey, #9a9a9a); }
  .logo use, .logo g { transform-box: fill-box; }

  .label { display: flex; align-items: center; gap: 12px; color: var(--smoke); }
  .label__n {
    display: inline-grid; place-items: center; min-width: 30px; height: 21px; padding: 0 6px;
    border: 1px solid var(--rule); color: var(--paper);
    clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  }

  .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
  .dot--red { background: var(--marker); }
  .dot--gold { background: var(--gold); }
  .dot--smoke { background: var(--smoke-2); }
  .live { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: 8px; vertical-align: 1px; animation: live 2.4s var(--ease-io) infinite; }
  @keyframes live { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

  /* Buttons — chamfered like the diagonal cuts in the D */
  .btn {
    --h: 56px; --c: var(--chamfer);
    position: relative; isolation: isolate;
    display: inline-flex; align-items: center; justify-content: center; gap: 14px;
    height: var(--h); padding: 0 26px;
    font-family: var(--f-display); font-weight: 400; font-size: 13px;
    letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
    background: var(--paper); color: var(--ink);
    clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
    transition: background-color .4s var(--ease-out), color .4s var(--ease-out);
  }
  .btn, .btn * { word-spacing: -.18em; }
  .btn::before { /* slash sweep */
    content: ""; position: absolute; inset: 0 -30%; z-index: -1;
    background: #fff;
    clip-path: polygon(0 0, 22% 0, 8% 100%, -14% 100%);
    transform: translateX(-40%);
    transition: transform .7s var(--ease-out);
  }
  .btn:hover::before { transform: translateX(110%); }
  .btn__icon { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: square; transition: transform .5s var(--ease-out); }
  .btn:hover .btn__icon { transform: translateX(3px); }
  .btn--ghost { background: var(--rule); color: var(--paper); }
  .btn--ghost::after {
    content: ""; position: absolute; inset: 1px; z-index: -2; background: var(--ink);
    clip-path: polygon(calc(var(--c) - .4px) 0, 100% 0, 100% calc(100% - var(--c) + .4px), calc(100% - var(--c) + .4px) 100%, 0 100%, 0 calc(var(--c) - .4px));
  }
  .btn--ghost::before { background: rgb(239 237 232 / .08); }
  .btn--ghost:hover { background: var(--paper); }
  .btn--sm { --h: 40px; --c: 9px; padding: 0 16px; font-size: 12px; }
  .btn--xl { --h: 74px; --c: 16px; padding: 0 36px; font-size: 15px; gap: 20px; }
  .btn--ink { background: var(--ink); color: var(--paper); }
  .btn--ink::before { background: #26262a; }
  .btn--block { width: 100%; }

  /* Text roll on hover */
  [data-roll] { position: relative; display: inline-block; overflow: hidden; vertical-align: top; line-height: 1.3; }
  [data-roll] > span { display: inline-block; transition: transform .55s var(--ease-out); }
  [data-roll]::after { content: attr(data-roll); position: absolute; left: 0; top: 100%; white-space: nowrap; transition: transform .55s var(--ease-out); }
  a:hover [data-roll] > span, a[data-roll]:hover > span { transform: translateY(-100%); }
  a:hover [data-roll]::after, a[data-roll]:hover::after { transform: translateY(-100%); }

  /* Marker annotations */
  .mark { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
  .mark path { fill: none; stroke-width: 11; stroke-linecap: round; stroke-linejoin: round; filter: url(#marker); }
  .shot--phone .mark path { stroke-width: 8; }
  .mark--red path { stroke: var(--marker); }
  .mark--gold path { stroke: var(--gold); }
  .tag {
    position: absolute; left: var(--x); top: var(--y); z-index: 2;
    padding: 6px 9px 5px; font-size: 10.5px; white-space: nowrap;
    transform: translate(-50%, -50%) rotate(-3deg);
    box-shadow: 0 10px 24px rgb(0 0 0 / .35);
  }
  .tag--red { background: var(--marker); color: #fff; }
  .tag--gold { background: var(--gold); color: var(--ink); }
  .chip {
    position: absolute; top: 14px; left: 14px; z-index: 2;
    display: inline-flex; align-items: center; gap: 8px; padding: 7px 11px 6px;
    background: var(--ink); color: var(--paper);
    clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  }
  .chip i { width: 7px; height: 7px; border-radius: 50%; }
  .chip--before i { background: var(--marker); }
  .chip--after i { background: var(--gold); }

  /* Phone shell */
  .phone {
    position: relative; width: 100%; aspect-ratio: 390 / 844;
    padding: 3.4%; border-radius: 15% / 7%;
    background: linear-gradient(160deg, #2a2a2e, #141416 40%, #0e0e10);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / .09), inset 0 0 0 3px #0b0b0c, 0 50px 90px -30px rgb(0 0 0 / .8);
  }
  .phone__screen { position: relative; height: 100%; overflow: hidden; border-radius: 12.4% / 5.8%; background: #f7f7f7; }
  .phone__screen--dark { background: #000; }
  .phone__island { position: absolute; z-index: 3; top: 1.9%; left: 50%; width: 30%; height: 3.3%; border-radius: 99px; background: #000; transform: translateX(-50%); }
  .phone__scroll { position: absolute; inset: 0 0 auto; will-change: transform; }
  .phone__scroll img { width: 100%; }

  /* Pins over screenshots */
  .pin {
    --c: var(--marker);
    position: absolute; left: var(--x); top: var(--y); z-index: 3;
    display: flex; align-items: center; gap: 8px;
    transform: translate(-13px, -50%) scale(var(--inv, 1));
    transform-origin: 13px 50%;
    opacity: 0; pointer-events: none;
    transition: opacity .45s var(--ease-out), transform 1.25s var(--ease-io);
  }
  .pin b {
    position: relative; display: grid; place-items: center; flex: none;
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--c); color: #fff;
    font: 700 11px/1 var(--f-mono);
    box-shadow: 0 0 0 3px rgb(255 255 255 / .92), 0 6px 18px rgb(0 0 0 / .35);
  }
  .pin b::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--c); opacity: 0; }
  .pin em {
    font: 700 10.5px/1.25 var(--f-mono); font-style: normal; letter-spacing: .04em; text-transform: uppercase;
    padding: 7px 9px 6px; white-space: nowrap;
    background: var(--ink); color: var(--paper);
    box-shadow: 0 8px 22px rgb(0 0 0 / .35);
    clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
    transform: translateX(-6px); opacity: 0;
    transition: transform .6s var(--ease-out) .25s, opacity .4s ease .25s;
  }
  .pin--l { flex-direction: row-reverse; transform: translate(calc(-100% + 13px), -50%) scale(var(--inv, 1)); transform-origin: calc(100% - 13px) 50%; }
  .pin--l em { transform: translateX(6px); }
  .pin--b { flex-direction: column; transform: translate(-50%, -13px) scale(var(--inv, 1)); transform-origin: 50% 13px; }
  .pin--b em { transform: translateY(-6px); }
  .pin.is-on { opacity: 1; }
  .pin.is-on em { transform: none; opacity: 1; }
  .pin.is-on b::after { animation: ping 1.8s var(--ease-out) infinite; }
  @keyframes ping { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(2.1); opacity: 0; } }
  .story--after .pin { --c: var(--gold); }
  .story--after .pin b { color: var(--ink); }
  @media (max-width: 760px) {
    .pin { gap: 5px; transform: translate(-10px, -50%) scale(var(--inv, 1)); transform-origin: 10px 50%; }
    .pin--l { transform: translate(calc(-100% + 10px), -50%) scale(var(--inv, 1)); transform-origin: calc(100% - 10px) 50%; }
    .pin--b { transform: translate(-50%, -10px) scale(var(--inv, 1)); transform-origin: 50% 10px; }
    .pin b { width: 20px; height: 20px; font-size: 9.5px; box-shadow: 0 0 0 2px rgb(255 255 255 / .9), 0 4px 12px rgb(0 0 0 / .35); }
    .pin em { font-size: 9px; padding: 5px 6px; white-space: normal; width: max-content; max-width: 124px; }
  }

  /* "How to read this" hint */
  .hint { display: flex; align-items: center; gap: 14px; margin-top: 30px; color: var(--smoke); max-width: calc(72ch + var(--pad) * 2); }
  .hint__icon { position: relative; flex: none; width: 16px; height: 25px; border: 1.5px solid var(--smoke); border-radius: 9px; }
  .hint__icon i { position: absolute; left: 50%; top: 5px; width: 2px; height: 5px; margin-left: -1px; border-radius: 2px; background: var(--paper); animation: wheel 1.8s var(--ease-io) infinite; }
  @keyframes wheel { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(8px); opacity: 0; } 100% { transform: translateY(0); opacity: 0; } }

  /* Grain */
  .grain {
    position: fixed; inset: -60%; z-index: 90; pointer-events: none; opacity: .05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    animation: grain 1.2s steps(6) infinite;
  }
  @keyframes grain {
    0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -4%); }
    60% { transform: translate(-4%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); }
  }
}

/* ---------------------------------------------------------------- sections */
@layer sections {

  /* ── LOADER ─────────────────────────────────────────────── */
  .loader { display: none; position: fixed; inset: 0; z-index: 200; pointer-events: none; }
  .is-loading .loader { display: block; pointer-events: auto; }
  .is-loading body { overflow: hidden; }
  .is-intro .hero__title, .is-intro [data-intro], .is-intro .chero__title { visibility: hidden; }
  .loader__bg {
    position: absolute; inset: 0 0 -18vh; background: var(--paper);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18vh), 0 100%);
  }
  .loader__logo {
    --w: min(62vw, 760px);
    position: absolute; width: var(--w);
    left: calc(50% - var(--w) / 2); top: calc(50% - var(--w) * .114);
    color: var(--ink); --logo-grey: #999;
  }
  .is-loading .loader__logo .lg-slash, .is-loading .loader__logo .lg-word use { opacity: 0; }
  .loader__meta { position: absolute; left: var(--pad); right: var(--pad); bottom: 22px; display: flex; justify-content: space-between; color: var(--ink); }
  .loader__meta b { font-weight: 700; display: inline-block; min-width: 3ch; text-align: right; }

  /* ── NAV ─────────────────────────────────────────────────── */
  .nav {
    position: fixed; inset: 0 0 auto; z-index: 60;
    display: flex; align-items: center; gap: clamp(16px, 2.4vw, 36px);
    height: var(--nav-h); padding-inline: var(--pad);
    color: #fff; mix-blend-mode: difference;
    transition: transform .7s var(--ease-out);
  }
  .nav.is-hidden { transform: translateY(-105%); }
  .nav__logo { width: clamp(118px, 10vw, 150px); flex: none; }
  .nav__logo .logo { --logo-grey: #8a8a8a; }
  .is-loading .nav__logo { opacity: 0; }
  .nav__links { display: flex; gap: clamp(18px, 2.2vw, 34px); margin-left: auto; }
  .nav__links a { color: #fff; }
  .nav__clock { color: rgb(255 255 255 / .6); white-space: nowrap; }
  .nav__clock time { color: #fff; margin-left: 6px; }
  .nav__cta { background: #fff; color: #000; }
  .nav__menu { display: none; }
  .nav__progress { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: #fff; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
  @media (max-width: 1100px) { .nav__clock { display: none; } }
  @media (max-width: 860px) {
    .nav__links, .nav__cta { display: none; }
    .nav__menu { display: block; margin-left: auto; padding: 10px 0 10px 14px; color: #fff; }
    .nav__menu-close { display: none; }
    .menu-open .nav__menu-open { display: none; }
    .menu-open .nav__menu-close { display: inline; }
  }
  .menu {
    position: fixed; inset: 0; z-index: 55; background: var(--ink);
    display: flex; flex-direction: column; justify-content: space-between;
    padding: calc(var(--nav-h) + 6vh) var(--pad) 28px;
  }
  .menu__links { display: grid; gap: 8px; }
  .menu__links a { display: flex; align-items: baseline; gap: 14px; padding: 20px 0; border-bottom: 1px solid var(--rule-2); }
  .menu__links .display { font-size: clamp(34px, 11vw, 64px); }
  .menu__links .eyebrow, .menu__foot { color: var(--smoke); }

  /* ── HUD (vertical section label) ────────────────────────── */
  .hud {
    position: fixed; right: calc(var(--pad) / 2); bottom: 22px; z-index: 40;
    display: flex; gap: 12px; color: #fff; mix-blend-mode: difference; pointer-events: none;
    writing-mode: vertical-rl; transform: rotate(180deg); translate: 50% 0;
    transition: opacity .5s ease;
  }
  .hud.is-off { opacity: 0; }
  .hud__k { opacity: .5; }
  @media (max-width: 860px) { .hud { display: none; } }

  /* ── HERO ────────────────────────────────────────────────── */
  .hero {
    position: relative; min-height: 100svh;
    display: flex; flex-direction: column;
    padding: calc(var(--nav-h) + 14px) var(--pad) clamp(24px, 4vh, 44px);
  }
  .hero__title { position: relative; margin-top: clamp(28px, 7vh, 88px); font-size: clamp(34px, 8.6vw, 150px); }
  .hero__title .line, .cta__title .line, .chero__title .line { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
  .hero__title .line__in, .cta__title .line__in, .chero__title .line__in { position: relative; display: inline-block; white-space: nowrap; }
  [data-fit] .line { font-size: var(--fs, inherit); }
  .line--bad { color: #9d9c9c; }   /* halfway between the old #4b4b50 and paper */
  /* A slight clockwise tilt on every screen; the extra room above and below
     keeps its raised left end and lowered right end clear of the other lines. */
  .hero__title .line--bad { rotate: 2deg; margin-block: .15em; }
  /* no-JS / reduced motion: a plain strike, drawn over the words */
  .struck { text-decoration: line-through; text-decoration-color: var(--marker); text-decoration-thickness: .14em; }
  .has-sharpie .struck { text-decoration: none; }
  .sharpie { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; z-index: 2; }
  .sharpie path { fill: none; stroke: var(--marker); stroke-linecap: round; filter: url(#marker); }

  .hero__foot {
    margin-top: auto; padding-top: clamp(28px, 6vh, 72px);
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 28px; align-items: end;
  }
  .hero__lede { grid-column: 1 / 7; max-width: 48ch; }
  .hero__ctas { grid-column: 8 / 13; display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
  .hero__cue { display: flex; align-items: center; gap: 12px; margin-top: clamp(24px, 4vh, 44px); color: var(--smoke); }
  .cue-bar { position: relative; width: 1px; height: 34px; background: var(--rule); overflow: hidden; }
  .cue-bar::after { content: ""; position: absolute; inset: 0; background: var(--paper); animation: cue 2.2s var(--ease-io) infinite; }
  @keyframes cue { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } }
  @media (max-width: 900px) {
    .hero__lede, .hero__ctas { grid-column: 1 / -1; justify-content: flex-start; }
  }
  @media (max-width: 760px) {
    .hero { min-height: auto; }
    .hero__title { font-size: clamp(26px, 8.5vw, 60px); margin-top: 30px; }
    .hero__title .line__in { white-space: normal; }
    .hero__ctas .btn { flex: 1 1 auto; }
  }

  /* ── SECTION HEAD ────────────────────────────────────────── */
  .sec { position: relative; padding-top: clamp(96px, 14vh, 180px); }
  .sec__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 22px; align-items: end; }
  .sec__head .label { grid-column: 1 / -1; }
  .sec__title { grid-column: 1 / 9; font-size: clamp(30px, 6.2vw, 116px); }
  .sec__sub { grid-column: 9 / 13; }
  .sec__sub.lede, .sec__sub .lede { color: var(--soft); }
  .sec__head--flush { padding-inline: 0; }
  @media (max-width: 900px) { .sec__title, .sec__sub { grid-column: 1 / -1; } }
  @media (max-width: 420px) { .sec__title { font-size: 9.2vw; } }

  /* ── BUILD 001: BEFORE / AFTER ───────────────────────────── */
  .work { padding-top: clamp(96px, 14vh, 180px); }
  .work__meta { margin-top: 14px; color: var(--smoke); }
  .bna { margin-top: clamp(40px, 7vh, 88px); display: grid; row-gap: clamp(28px, 4vw, 56px); }
  .bna__row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 28px; }
  .bna__row--laptop .shot:nth-child(1) { grid-column: 1 / 7; }
  .bna__row--laptop .shot:nth-child(2) { grid-column: 7 / 13; }
  .bna__row--phone .shot:nth-child(1) { grid-column: 1 / 5; }
  .bna__row--phone .shot:nth-child(2) { grid-column: 5 / 9; }
  .bna__row--phone .tldr { grid-column: 9 / 13; }

  .shot { display: grid; gap: 16px; align-content: start; }
  .shot__frame {
    --r: 1;                                   /* 0 → 1 wipes the frame up into view */
    --t: calc((1 - var(--r)) * 100%);
    position: relative; aspect-ratio: var(--ar); overflow: hidden; background: var(--ink-3);
    clip-path: polygon(18px var(--t), 100% var(--t), 100% max(var(--t), calc(100% - 18px)), calc(100% - 18px) 100%, 0 100%, 0 calc(var(--t) + 18px));
  }
  .shot__img, .shot__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .shot__img img { transform: scale(var(--zoom, 1)); transform-origin: 50% 50%; will-change: transform; }
  .shot figcaption { font-size: 13.5px; line-height: 1.6; color: var(--soft); max-width: 50ch; text-wrap: pretty; }
  .shot figcaption b { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; color: var(--paper); }

  .tldr {
    display: flex; flex-direction: column; gap: 6px; align-self: start;
    padding: clamp(20px, 2vw, 30px); background: var(--ink-2); border: 1px solid var(--rule);
    clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
  }
  .tldr__rows { margin: 12px 0 22px; }
  .tldr__row { display: grid; gap: 8px; padding: 14px 0; border-top: 1px solid var(--rule); }
  .tldr__row dt { color: var(--smoke); }
  .tldr__row dd { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; font-family: var(--f-display); text-transform: uppercase; font-size: clamp(17px, 1.45vw, 23px); line-height: 1; }
  .tldr__row dd, .tldr__row dd * { word-spacing: -.26em; }
  .tldr__row s { color: var(--smoke-2); text-decoration-color: var(--marker); text-decoration-thickness: .12em; }
  .tldr__row b { font-weight: 400; color: var(--paper); }
  .arr { width: 14px; height: 14px; flex: none; fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: square; }

  .more {
    position: relative; isolation: isolate; margin-top: clamp(40px, 7vh, 88px);
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center;
    min-height: clamp(340px, 40vw, 500px); padding: clamp(24px, 3.4vw, 56px);
    background: var(--ink-2); border: 1px solid var(--rule); overflow: hidden;
    clip-path: polygon(28px 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%, 0 28px);
    transition: background-color .6s var(--ease-out);
  }
  .more:hover { background: var(--ink-3); }
  .more__txt { grid-column: 1 / 7; display: grid; gap: 20px; position: relative; z-index: 2; }
  .more__title { font-size: clamp(24px, 4.6vw, 80px); }
  .more > * { min-width: 0; }
  .more__p { color: var(--soft); max-width: 50ch; }
  .more__meta { display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--smoke); }
  .more__meta span { display: inline-flex; align-items: center; gap: 18px; }
  .more__meta span + span::before { content: ""; width: 5px; height: 5px; background: var(--smoke-2); transform: rotate(45deg); }
  .more__thumbs { grid-column: 7 / 13; position: relative; height: 100%; min-height: 300px; display: grid; place-items: center; }
  .more__thumb { grid-area: 1 / 1; width: 62%; box-shadow: 0 30px 60px -20px rgb(0 0 0 / .8), 0 0 0 1px rgb(255 255 255 / .07); transition: transform .9s var(--ease-out); }
  .more__thumb img { width: 100%; }
  .more__thumb--doc { width: 30%; z-index: 2; }
  .more__thumb:nth-child(1) { transform: translate(-30%, 4%) rotate(-7deg); }
  .more__thumb:nth-child(2) { transform: translate(0, -2%) rotate(1deg); }
  .more__thumb:nth-child(3) { transform: translate(30%, 8%) rotate(6deg); }
  .more:hover .more__thumb:nth-child(1) { transform: translate(-40%, 2%) rotate(-10deg); }
  .more:hover .more__thumb:nth-child(2) { transform: translate(0, -8%) rotate(0deg) scale(1.06); }
  .more:hover .more__thumb:nth-child(3) { transform: translate(40%, 6%) rotate(9deg); }
  .more__go {
    position: absolute; right: clamp(20px, 2.4vw, 36px); bottom: clamp(20px, 2.4vw, 36px); z-index: 3;
    display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%;
    background: var(--paper); color: var(--ink); transition: transform .6s var(--ease-out);
  }
  .more__go svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: square; }
  .more:hover .more__go { transform: rotate(-45deg) scale(1.08); }

  @media (max-width: 900px) {
    .bna__row--laptop .shot:nth-child(n), .bna__row--phone .tldr { grid-column: 1 / -1; }
    .bna__row--phone .shot:nth-child(1) { grid-column: 1 / 7; }
    .bna__row--phone .shot:nth-child(2) { grid-column: 7 / 13; }
    .more__txt, .more__thumbs { grid-column: 1 / -1; }
    .more__thumbs { min-height: 240px; margin-top: 28px; }
  }
  @media (max-width: 760px) {
    .shot--phone figcaption { font-size: 12.5px; }
    .chip { top: 10px; left: 10px; padding: 6px 8px 5px; }
    .tag { font-size: 9.5px; padding: 5px 7px 4px; }
    .more__go { width: 52px; height: 52px; }
  }

  /* ── PROCESS ─────────────────────────────────────────────── */
  .process { padding-top: clamp(96px, 14vh, 180px); padding-bottom: 10vh; }
  .cards { margin-top: clamp(40px, 8vh, 96px); display: grid; }
  .card {
    --dim: 0;
    position: sticky; top: calc(var(--nav-h) + 3vh + var(--i) * 22px);
    min-height: min(76svh, 720px); margin-bottom: 8vh;
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr; column-gap: var(--gap);
    padding: clamp(22px, 3vw, 48px);
    border: 1px solid var(--rule);
    background:
      linear-gradient(to bottom right, transparent calc(50% - 1px), var(--rule) calc(50% - 1px) 50%, transparent 50%) 0 0 / 28px 28px no-repeat,
      linear-gradient(to bottom right, transparent 50%, var(--rule) 50% calc(50% + 1px), transparent calc(50% + 1px)) 100% 100% / 28px 28px no-repeat,
      var(--ink-2);
    background-origin: border-box;
    clip-path: polygon(28px 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%, 0 28px);
    transform-origin: 50% 0;
  }
  .card::after { content: ""; position: absolute; inset: 0; background: #000; opacity: var(--dim); pointer-events: none; }
  .card:last-child { margin-bottom: 0; }
  .card__n { grid-column: 1 / 4; grid-row: 1 / 3; font-size: clamp(64px, 11vw, 200px); line-height: .8; color: transparent; -webkit-text-stroke: 1px var(--smoke-2); }
  .card__txt { grid-column: 4 / 8; grid-row: 1 / 3; align-self: end; display: grid; gap: 18px; }
  .card__txt p { color: var(--soft); font-size: var(--t-lede); line-height: 1.62; text-wrap: pretty; }
  .card__t { font-size: clamp(26px, 3vw, 52px); }
  .card__vis { grid-column: 8 / 13; grid-row: 1 / 3; position: relative; align-self: stretch; min-height: 300px; }
  .card__vis--scan { display: flex; flex-direction: column; justify-content: center; font-size: 12px; font-weight: 700; font-stretch: 100%; text-transform: uppercase; letter-spacing: .04em; }
  .scan__row { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px dashed var(--rule); color: var(--smoke); }
  .scan__row b { font-weight: 700; color: var(--paper); text-align: right; }
  .scan__row b.bad { color: #ff5a4f; }
  .scan__row--flag { border-bottom: 0; margin-top: 8px; padding: 12px 14px; background: var(--paper); color: var(--ink); }
  .scan__row--flag b { color: var(--ink); }
  .card__vis--pages { display: grid; place-items: center; }
  .card__vis--pages picture { grid-area: 1 / 1; width: min(46%, 250px); box-shadow: 0 30px 60px -20px rgb(0 0 0 / .7), 0 0 0 1px rgb(255 255 255 / .06); }
  .is-static .card__vis--pages picture:nth-child(1) { transform: translateX(-40%) rotate(-10deg); }
  .is-static .card__vis--pages picture:nth-child(2) { transform: translateX(-20%) rotate(-5deg); }
  .is-static .card__vis--pages picture:nth-child(4) { transform: translateX(20%) rotate(5deg); }
  .is-static .card__vis--pages picture:nth-child(5) { transform: translateX(40%) rotate(10deg); }
  .card__vis--shot { display: grid; place-items: center; }
  .card__vis--shot picture { width: 100%; box-shadow: 0 40px 80px -30px rgb(0 0 0 / .8); clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); }
  .card__vis--switch { display: grid; place-content: center; justify-items: center; gap: 20px; }
  .switch { position: relative; width: clamp(160px, 16vw, 240px); aspect-ratio: 2 / 1; border-radius: 999px; background: var(--ink-3); border: 1px solid var(--rule); transition: background-color .6s var(--ease-out); }
  .switch__knob { position: absolute; top: 8%; left: 4%; height: 84%; aspect-ratio: 1; border-radius: 50%; background: var(--smoke-2); transition: left .8s var(--ease-io), background-color .6s var(--ease-out); }
  .switch.is-on { background: var(--gold); }
  .switch.is-on .switch__knob { left: calc(96% - 42%); background: var(--ink); }
  .switch__label { display: grid; color: var(--smoke); }
  .switch__label span { grid-area: 1 / 1; transition: opacity .4s ease; }
  .switch__label .on { opacity: 0; color: var(--gold); }
  .switch.is-on + .switch__label .on { opacity: 1; }
  .switch.is-on + .switch__label .off { opacity: 0; }
  @media (max-width: 900px) {
    .card { min-height: 0; grid-template-rows: auto; row-gap: 24px; top: calc(var(--nav-h) + var(--i) * 14px); }
    .card__n { grid-column: 1 / -1; grid-row: auto; font-size: 64px; }
    .card__txt, .card__vis { grid-column: 1 / -1; grid-row: auto; }
    .card__vis { min-height: 240px; }
  }

  /* ── OZARKS ──────────────────────────────────────────────── */
  .ozarks { padding-top: clamp(96px, 14vh, 180px); overflow: hidden; }
  .ozarks__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 48px; align-items: center; }
  .ozarks__head { grid-column: 1 / 6; align-self: start; position: sticky; top: calc(var(--nav-h) + 40px); }
  .ozarks__head .sec__title, .ozarks__head .sec__sub { grid-column: 1 / -1; }
  .ozarks__head .sec__title { font-size: clamp(32px, 3.6vw, 66px); }
  .map { grid-column: 6 / 13; }
  .map__svg { width: 100%; height: auto; overflow: visible; }
  .map__grat line { stroke: var(--rule-2); stroke-width: 1; }
  .map__gl text, .map__rl text { font: 400 10px var(--f-mono); fill: var(--smoke-2); letter-spacing: .04em; }
  .map__rings circle { fill: none; stroke: var(--rule); stroke-width: 1; stroke-dasharray: .004 .006; }
  .map__borders path { fill: none; stroke: var(--smoke-2); stroke-width: 1.2; }
  .map__borders .map__state { stroke: var(--smoke); stroke-width: 1.6; }
  .map__states text { font: 400 17px var(--f-display); fill: var(--ink-3); letter-spacing: .24em; }
  .map__sl { font: 700 9.5px var(--f-mono); fill: var(--smoke); letter-spacing: .08em; }
  .map__route { fill: none; stroke: var(--gold); stroke-width: 2; stroke-dasharray: 6 4; animation: flow 1.2s linear infinite; }
  .map__rmask { fill: none; stroke: #fff; stroke-width: 14; }
  @keyframes flow { to { stroke-dashoffset: -10; } }
  @keyframes flow-m { to { stroke-dashoffset: -25; } }
  .map__city rect { fill: var(--smoke); }
  .map__city text { font: 700 10.5px var(--f-mono); fill: var(--smoke); letter-spacing: .04em; }
  .map__hq path { fill: var(--paper); }
  .map__hq text, .map__dest text { font: 400 18px var(--f-display); fill: var(--paper); word-spacing: -.26em; }
  .map__hq .map__sub, .map__dest .map__sub { font: 700 10px var(--f-mono); fill: var(--smoke); letter-spacing: .06em; word-spacing: 0; }
  .map__dest rect { fill: var(--gold); }
  .map__dest text:not(.map__sub) { fill: var(--gold); }
  .map__pulse { fill: none; stroke: var(--paper); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: mapPulse 2.6s var(--ease-out) infinite; }
  .map__dest .map__pulse { stroke: var(--gold); }
  @keyframes mapPulse { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(4.5); opacity: 0; } }
  @media (max-width: 900px) {
    .ozarks__head { grid-column: 1 / -1; position: static; }
    .map { grid-column: 1 / -1; margin-inline: calc(var(--pad) * -.5); }
  }
  @media (max-width: 760px) {
    .map__city--minor, .map__gl, .map__rl text:nth-child(-n + 2), .map__sl { display: none; }
    .map__city text { font-size: 25px; }
    .map__city rect { transform: scale(1.8); transform-box: fill-box; transform-origin: center; }
    .map__hq text, .map__dest text { font-size: 28px; }
    .map__hq .map__sub, .map__dest .map__sub { font-size: 17px; transform: translateY(12px); }
    .map__rl text { font-size: 20px; }
    .map__states text { font-size: 32px; }
    .map__route { stroke-width: 4; stroke-dasharray: 15 10; animation-name: flow-m; }
  }
  .marquee { margin-top: clamp(60px, 10vh, 120px); padding-block: 24px; border-block: 1px solid var(--rule); overflow: hidden; }
  .marquee__track { display: flex; align-items: center; gap: .5em; width: max-content; font-size: clamp(40px, 6.4vw, 116px); animation: marquee 70s linear infinite; }
  .marquee__track span { color: transparent; -webkit-text-stroke: 1px var(--smoke-2); }
  .marquee__track span:nth-of-type(10n + 8) { color: var(--gold); -webkit-text-stroke: 0; }
  .marquee__track span:nth-of-type(10n + 4) { color: var(--paper); -webkit-text-stroke: 0; }
  .marquee__track i { width: .34em; height: .5em; flex: none; background: var(--smoke-2); clip-path: polygon(50% 0, 100% 0, 50% 100%, 0 100%); }
  @keyframes marquee { to { transform: translateX(-50%); } }

  /* ── CTA ─────────────────────────────────────────────────── */
  .cta { background: var(--paper); color: var(--ink); padding-block: clamp(90px, 16vh, 200px) clamp(60px, 10vh, 120px); margin-top: clamp(96px, 14vh, 180px); }
  .cta .label { color: #6b6a66; }
  .cta .label__n { color: var(--ink); border-color: rgb(10 10 11 / .2); }
  .cta__title { margin-top: 26px; font-size: clamp(40px, 10vw, 180px); }
  .cta__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 32px; align-items: end; margin-top: clamp(40px, 7vh, 80px); }
  .cta__lede { grid-column: 1 / 7; color: #2b2b2e; max-width: 50ch; }
  .cta__actions { grid-column: 8 / 13; display: grid; justify-items: end; gap: 14px; }
  .cta__alt a { border-bottom: 1px solid currentColor; }
  .cta__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin-top: clamp(56px, 10vh, 120px); color: #3a3a3d; }
  .cta__steps li { border-top: 1px solid rgb(10 10 11 / .18); padding-top: 14px; display: grid; gap: 4px; }
  .cta__steps b { color: var(--ink); }
  .cta :focus-visible { outline-color: var(--ink); }
  @media (max-width: 760px) {
    .cta__title { font-size: clamp(30px, 10.4vw, 60px); }
    .cta__title .line__in { white-space: normal; }
    .cta__lede, .cta__actions { grid-column: 1 / -1; justify-items: stretch; }
    .cta__actions .btn { width: 100%; }
    .cta__steps { grid-template-columns: 1fr; }
  }

  /* ── FOOTER ──────────────────────────────────────────────── */
  .foot { padding-block: clamp(60px, 10vh, 110px) 28px; background: var(--ink); }
  .foot__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 28px; align-items: start; }
  .foot__about { grid-column: 1 / 5; color: var(--soft); max-width: 40ch; }
  .foot__nav { grid-column: 6 / 10; display: grid; gap: 8px; }
  .foot__nav a, .foot__top { color: var(--paper); width: fit-content; background: linear-gradient(currentColor 0 0) 0 100% / 0 1px no-repeat; transition: background-size .5s var(--ease-out); }
  .foot__nav a:hover, .foot__top:hover { background-size: 100% 1px; }
  .foot__meta { grid-column: 10 / 13; display: grid; gap: 8px; color: var(--smoke); justify-items: end; text-align: right; }
  .foot__meta time { color: var(--paper); }
  .foot__logo { margin-top: clamp(60px, 12vh, 140px); color: var(--paper); }
  .foot__base { display: flex; justify-content: space-between; gap: 16px; margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--rule); color: var(--smoke-2); }
  @media (max-width: 760px) {
    .foot__about, .foot__nav, .foot__meta { grid-column: 1 / -1; justify-items: start; text-align: left; }
    .foot__base { flex-direction: column; }
  }

  /* ══════════════════════ CASE STUDY PAGE ══════════════════════ */
  .chero { padding-top: calc(var(--nav-h) + 14px); }
  .chero__top { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-inline: var(--pad); padding: 14px 0 0; border-top: 1px solid var(--rule); }
  .back { display: inline-flex; align-items: center; gap: 10px; color: var(--paper); }
  .back svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: square; transition: transform .5s var(--ease-out); }
  .back:hover svg { transform: translateX(-4px); }
  .chero__kicker { color: var(--smoke); }
  .chero__title { margin-top: clamp(28px, 6vh, 80px); font-size: clamp(40px, 12vw, 220px); }
  .spec { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); margin-top: clamp(40px, 6vh, 72px); }
  .spec > div { border-top: 1px solid var(--rule); padding-top: 14px; }
  .spec dt { color: var(--smoke); margin-bottom: 8px; }
  .spec dd { font-size: 14px; line-height: 1.5; color: var(--paper); }
  .chero__img { position: relative; margin-top: clamp(40px, 8vh, 96px); height: clamp(380px, 82svh, 920px); overflow: hidden; }
  .chero__img picture { position: absolute; inset: -9% 0; }
  .chero__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; will-change: transform; }
  @media (max-width: 900px) { .spec { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; } }
  @media (max-width: 760px) {
    .chero__title { font-size: clamp(34px, 11vw, 64px); }
    .chero__title .line__in { white-space: normal; }
    .chero__img { height: 64svh; }
  }

  .cintro { padding-top: clamp(96px, 14vh, 180px); }
  .cintro__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 36px; align-items: end; }
  .thesis { grid-column: 1 / 9; font-size: clamp(28px, 4.2vw, 74px); line-height: .98; }
  .thesis__a, .thesis__b { display: block; }
  .thesis__a { color: var(--smoke-2); }
  .cintro__p { grid-column: 9 / 13; color: var(--soft); }
  .chapters { margin-top: clamp(64px, 10vh, 120px); }
  .chapters ol { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gap); margin-top: 18px; }
  .chapters a { display: grid; gap: 10px; padding: 16px 0 6px; border-top: 1px solid var(--rule); transition: border-color .4s ease; }
  .chapters a:hover { border-color: var(--paper); }
  .chapters .eyebrow { color: var(--smoke); }
  .chapters .display { font-size: clamp(20px, 1.9vw, 32px); transition: transform .6s var(--ease-out); }
  .chapters a:hover .display { transform: translateX(6px); }
  .chapters__d { font-size: 13px; color: var(--soft); }
  @media (max-width: 900px) {
    .thesis, .cintro__p { grid-column: 1 / -1; }
    .chapters ol { grid-template-columns: 1fr; gap: 0; }
    .chapters a { grid-template-columns: 40px 1fr; align-items: baseline; }
    .chapters__d { grid-column: 2; }
  }

  /* ── STORY (teardown + rebuild) ──────────────────────────── */
  .story {
    --vh: min(74svh, 40vw);
    --c: var(--marker);
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
    margin-top: clamp(28px, 5vh, 56px);
  }
  .story--after { --c: var(--gold); }
  .story__viewer { grid-column: 1 / 8; grid-row: 1; position: sticky; top: calc((100svh - var(--vh)) / 2 + 12px); height: var(--vh); align-self: start; }
  .story__steps { grid-column: 9 / 13; grid-row: 1; padding-block: 10vh 26vh; }
  .story--after .story__viewer { grid-column: 6 / 13; }
  .story--after .story__steps { grid-column: 1 / 5; }

  .viewer { height: 100%; display: flex; flex-direction: column; background: var(--ink-2); border: 1px solid var(--rule); }
  .viewer__bar { flex: none; height: 40px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding-inline: 14px; color: var(--smoke); }
  .viewer__dots { display: flex; gap: 6px; }
  .viewer__dots i { width: 7px; height: 7px; background: var(--rule); }
  .viewer__url { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .viewer__count b { color: var(--c); font-weight: 700; }
  .viewer__segs { flex: none; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 0 14px 10px; border-bottom: 1px solid var(--rule); }
  .viewer__segs i { height: 3px; background: var(--rule); transition: background-color .5s ease; }
  .viewer__segs i.is-done { background: rgb(239 237 232 / .4); }
  .viewer__segs i.is-on { background: var(--c); }
  .viewer__screen { position: relative; flex: 1; overflow: hidden; background: #0d0d0f; }
  .viewer--light .viewer__screen { background: #1a1a1c; }
  .viewer__page { position: absolute; left: 0; top: 0; width: 100%; transform-origin: 50% 0; will-change: transform; transition: transform 1.25s var(--ease-io); }
  .viewer__page img { width: 100%; }
  .viewer__page::after { content: ""; position: absolute; inset: 0; z-index: 4; background: var(--ink); opacity: 0; transition: opacity .8s ease; pointer-events: none; }
  .is-phone .viewer__page::after { opacity: .74; }
  /* Spotlight: lives inside the page, so it pans and scales with it */
  .spot {
    position: absolute; z-index: 1; left: 0; top: 0; width: 100%; height: 10%;
    border-radius: 10px; pointer-events: none; opacity: 0;
    box-shadow: 0 0 0 300vmax rgb(10 10 11 / .62), inset 0 0 0 2px var(--c);
    transition: left 1.25s var(--ease-io), top 1.25s var(--ease-io), width 1.25s var(--ease-io), height 1.25s var(--ease-io), opacity .6s ease;
  }
  .spot.is-on { opacity: 1; }
  .viewer__phone { position: absolute; z-index: 5; left: 50%; top: 5%; width: min(31%, 250px); transform: translate(-50%, 115%); transition: transform 1.1s var(--ease-io); }
  .is-phone .viewer__phone { transform: translate(-50%, 0); }
  .phone--mini { padding: 3%; }

  .step { min-height: 72svh; display: flex; flex-direction: column; justify-content: center; gap: 18px; opacity: .2; transition: opacity .6s ease; }
  .step.is-active { opacity: 1; }
  .step__n { color: var(--smoke); }
  .step__n span { color: var(--c); }
  .step__t { font-size: clamp(22px, 2.1vw, 36px); line-height: 1; }
  .step__p { color: var(--soft); max-width: 46ch; text-wrap: pretty; }
  .step__aside { display: grid; gap: 6px; margin-top: 4px; padding: 12px 0 2px 16px; border-left: 2px solid var(--marker); font-size: 15px; font-weight: 500; color: var(--paper); line-height: 1.45; }
  .step__aside .eyebrow { color: var(--smoke); }
  @media (max-width: 900px) {
    .story { --vh: 46svh; }
    .story__viewer, .story--after .story__viewer { grid-column: 1 / -1; top: 12px; z-index: 2; }
    .story__steps, .story--after .story__steps { grid-column: 1 / -1; grid-row: 2; padding-block: 10vh 30vh; }
    .step { min-height: 62svh; justify-content: flex-start; padding-top: 6vh; }
    .viewer__phone { width: 36%; }
    .viewer__url { display: none; }
    .viewer__bar { grid-template-columns: auto 1fr; }
    .viewer__count { text-align: right; }
  }

  /* ── PHONES ──────────────────────────────────────────────── */
  .hand { padding-top: clamp(96px, 14vh, 180px); }
  .hand__stage {
    height: 100svh; display: grid; grid-template-rows: 1fr auto; justify-items: center; align-items: center; gap: 18px;
    padding: calc(var(--nav-h) + 8px) var(--pad) 26px;
  }
  .hand__phones { display: flex; align-items: center; justify-content: center; gap: clamp(20px, 7vw, 120px); }
  .hand__fig { width: min(26vw, calc((100svh - 270px) * .462), 320px); display: grid; gap: 14px; }
  .hand__fig figcaption .eyebrow { display: flex; align-items: center; gap: 8px; color: var(--paper); }
  .hand__note { font-size: 13px; line-height: 1.55; color: var(--soft); }
  .hand__progress { width: min(560px, 86vw); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; color: var(--smoke); }
  .hand__progress i { position: relative; height: 2px; background: var(--rule); overflow: hidden; }
  .hand__progress b { position: absolute; inset: 0; background: var(--paper); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
  @media (max-width: 760px) {
    .hand__phones { gap: 14px; }
    .hand__fig { width: 42vw; }
    .hand__note { font-size: 12px; }
  }

  /* ── DYNO SHEET ──────────────────────────────────────────── */
  .dyno { padding-top: clamp(96px, 14vh, 180px); padding-bottom: clamp(40px, 6vh, 80px); }
  .dyno__legend { display: flex; gap: 22px; justify-content: flex-end; margin-top: 56px; color: var(--smoke); }
  .dyno__legend span { display: inline-flex; align-items: center; gap: 8px; }
  .dyno__rows { margin-top: 16px; border-bottom: 1px solid var(--rule); }
  .dyno__row {
    display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 1.4fr) minmax(0, 5fr) minmax(0, 1.6fr);
    column-gap: var(--gap); align-items: center;
    padding-block: clamp(18px, 2.6vh, 30px); border-top: 1px solid var(--rule);
  }
  .dyno__k { font-size: clamp(14px, 1.1vw, 17px); font-weight: 500; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
  .dyno__k .eyebrow { color: var(--smoke); font-size: 10px; }
  .dyno__k .tag-proj { color: var(--gold); }
  .dyno__v { font-size: clamp(28px, 3.9vw, 70px); line-height: 1; }
  .dyno__v--b { color: var(--smoke-2); text-align: right; }
  .dyno__v--b span { position: relative; display: inline-block; }
  .dyno__v--b span::after { content: ""; position: absolute; left: -6%; right: -6%; top: 46%; height: .08em; background: var(--marker); opacity: .85; }
  .dyno__v--a { color: var(--paper); }
  .inf { height: .62em; width: auto; fill: none; stroke: currentColor; stroke-width: 5.5; display: inline-block; vertical-align: .08em; }
  .dyno__bars { display: grid; gap: 6px; }
  .dyno__bar { display: block; height: 6px; transform-origin: 0 50%; }
  .dyno__bar--b { background: var(--smoke-2); transform: scaleX(var(--b, 0)); }
  .dyno__bar--a { background: var(--gold); transform: scaleX(var(--a, 0)); }
  .dyno__row--proj .dyno__bar--a { background: repeating-linear-gradient(90deg, var(--gold) 0 10px, transparent 10px 16px); }
  .dyno__row--spin .dyno__bar--b { background: repeating-linear-gradient(90deg, var(--smoke-2) 0 10px, transparent 10px 16px); background-size: 32px 100%; animation: spinbar 1s linear infinite; }
  @keyframes spinbar { to { background-position: 32px 0; } }
  .dyno__note { margin-top: 22px; color: var(--smoke-2); max-width: 90ch; font-size: 12.5px; }
  @media (max-width: 760px) {
    .dyno__row { grid-template-columns: 1fr auto auto; row-gap: 12px; }
    .dyno__k { grid-column: 1 / -1; }
    .dyno__bars { grid-column: 1; grid-row: 2; }
    .dyno__v--b { grid-column: 2; grid-row: 2; }
    .dyno__v--a { grid-column: 3; grid-row: 2; min-width: 2.2ch; text-align: right; }
    .dyno__legend { justify-content: flex-start; }
  }

  /* ── AUDIT ───────────────────────────────────────────────── */
  .audit { padding-top: clamp(96px, 14vh, 180px); }
  .audit__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 40px; align-items: center; }
  .audit__head { grid-column: 1 / 7; }
  .audit__head .sec__title, .audit__head .sec__sub { grid-column: 1 / -1; }
  .audit__head .sec__title { font-size: clamp(32px, 4.6vw, 84px); }
  .audit__head .btn { grid-column: 1 / -1; justify-self: start; margin-top: 10px; }
  .audit__pages { grid-column: 7 / 13; min-height: clamp(320px, 36vw, 520px); }
  @media (max-width: 900px) { .audit__head, .audit__pages { grid-column: 1 / -1; } }
}

/* ---------------------------------------------------------------- states */
@layer states {
  .is-static .hand__stage { height: auto; }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .grain { display: none; }
  }
}

/* ══════════════════════════════ v3 ══════════════════════════════ */
@layer components {
  button:hover [data-roll] > span, button:hover [data-roll]::after { transform: translateY(-100%); }
  .btn--gold { background: var(--gold); color: var(--ink); }
  .btn--gold::before { background: #ffd65c; }
}

@layer sections {
  /* ── HERO: the typed line, its caret and the marker smiley ── */
  .hero__title .line--fix { overflow: visible; }
  .line--fix .line__in { white-space: nowrap; }
  .caret { display: inline-block; width: .07em; height: .7em; margin: 0 -.11em 0 .04em; vertical-align: baseline; background: var(--paper); }
  .caret.is-idle { animation: caret .5s steps(1) infinite; }
  @keyframes caret { 50% { opacity: 0; } }
  .smile-slot { display: inline-block; width: 1.12em; height: .7em; margin-left: .1em; vertical-align: baseline; }
  .sharpie .smile { filter: url(#marker-smile); }
  .sharpie .smile path { filter: none; stroke-linejoin: round; }
  @media (max-width: 760px) { .hero__title { font-size: clamp(24px, 8vw, 58px); } }

  /* ── PROCESS: live scan + the rebuild wireframe ── */
  .scan__row b { transition: color .3s ease; }
  .scan__row b.is-pending { color: var(--smoke-2); }
  .card__vis--rb { display: grid; place-items: center; }
  .rb {
    --w: 1; --x: calc(var(--w) * 128% - 3%);
    position: relative; width: 100%; max-width: 580px; aspect-ratio: 16 / 11;
    display: flex; flex-direction: column; overflow: hidden; border-radius: 10px;
    font-size: clamp(7px, .72vw, 10.5px); background: #1d1d20;
    box-shadow: 0 0 0 1px var(--rule), 0 50px 90px -40px rgb(0 0 0 / .9);
  }
  .rb__chrome { flex: none; display: flex; align-items: center; gap: .5em; height: 2.8em; padding: 0 1em; background: #2b2b2f; }
  .rb__chrome i { width: .75em; height: .75em; border-radius: 50%; background: #4b4b51; }
  .rb__url { flex: 1; max-width: 58%; height: 1.8em; margin: 0 auto; display: grid; place-items: center; border-radius: 5px; background: #19191c; color: var(--smoke); font: 700 .95em/1 var(--f-mono); }
  .rb__view { position: relative; flex: 1; overflow: hidden; }
  .rb__old, .rb__new { position: absolute; inset: 0; }
  .rb__old { background: #ececec; }
  .rb__old img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
  .rb__spin {   /* a live wheel over the screenshot's frozen one */
    position: absolute; left: 50.35%; top: 33.8%; width: 1.7%; aspect-ratio: 1; translate: -50% -50%;
    border-radius: 50%; border: max(1.5px, .16em) solid rgb(0 0 0 / .14); border-top-color: rgb(0 0 0 / .6);
    box-shadow: 0 0 0 .5em #ececec; background: #ececec; animation: rbspin .9s linear infinite;
  }
  @keyframes rbspin { to { transform: rotate(1turn); } }
  .rb__new { background: #000; clip-path: polygon(0 0, var(--x) 0, calc(var(--x) - 25%) 100%, 0 100%); }
  .rb__live { position: absolute; left: 0; top: 0; width: 1440px; height: 900px; border: 0; transform-origin: 0 0; pointer-events: none; background: #000; }
  .rb__state { display: grid; flex: none; justify-items: end; min-width: 9.5em; }
  .rb__tag {
    grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px 3px; font-size: 9px;
    background: #19191c; color: var(--paper); border-radius: 4px; transition: opacity .25s ease;
  }
  .rb__tag i { width: 6px; height: 6px; border-radius: 50%; }
  .rb__tag--old i { background: var(--marker); }
  .rb__tag--new i { background: var(--gold); }
  .rb__tag--new, .rb.is-new .rb__tag--old { opacity: 0; }
  .rb.is-new .rb__tag--new, .is-static .rb__tag--new { opacity: 1; }
  .is-static .rb__tag--old { opacity: 0; }
  .rb__wipe { position: absolute; inset: 0; background: var(--gold); pointer-events: none; clip-path: polygon(var(--x) 0, calc(var(--x) + 3%) 0, calc(var(--x) - 22%) 100%, calc(var(--x) - 25%) 100%); }

  /* ── PORTFOLIO ── */
  .phero__foot { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); margin-top: clamp(28px, 5vh, 56px); }
  .phero__lede { grid-column: 1 / 8; color: var(--soft); max-width: 58ch; }
  .pindex { margin-top: clamp(44px, 8vh, 96px); }
  .pindex li { border-top: 1px solid var(--rule); }
  .pindex li:last-child { border-bottom: 1px solid var(--rule); }
  .pindex__row {
    position: relative; isolation: isolate;
    display: grid; grid-template-columns: 4.5em minmax(0, 1fr) minmax(0, 16em) 4.5em 24px; align-items: center; column-gap: var(--gap);
    padding: clamp(18px, 2.8vh, 30px) 0; transition: color .45s var(--ease-out), padding .6s var(--ease-out);
  }
  .pindex__row::before { content: ""; position: absolute; inset: 0 calc(var(--pad) * -1); z-index: -1; background: var(--paper); transform: scaleY(0); transform-origin: 50% 100%; transition: transform .6s var(--ease-out); }
  .pindex__row:hover, .pindex__row:focus-visible { color: var(--ink); padding-inline: clamp(8px, 1.4vw, 22px); outline: none; }
  .pindex__row:hover::before, .pindex__row:focus-visible::before { transform: scaleY(1); }
  .pindex__n { color: var(--smoke); }
  .pindex__name { font-size: clamp(22px, 3.4vw, 58px); }
  .pindex__meta { font-size: 13px; color: var(--soft); transition: color .45s; }
  .pindex__yr { text-align: right; }
  .pindex__row:hover .pindex__meta, .pindex__row:hover .pindex__n { color: #4a4a4f; }
  .pindex__go { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: square; transition: transform .5s var(--ease-out); }
  .pindex__row:hover .pindex__go { transform: scale(1.2); }
  .pindex__row--open .pindex__name { color: transparent; -webkit-text-stroke: 1px var(--smoke); }
  .pindex__row--open:hover .pindex__name { -webkit-text-stroke-color: var(--ink); }
  @media (max-width: 760px) {
    .phero__lede { grid-column: 1 / -1; }
    .pindex__row { grid-template-columns: 3.2em minmax(0, 1fr) 22px; row-gap: 6px; }
    .pindex__meta { grid-column: 2; }
    .pindex__yr { display: none; }
    .pindex__go { grid-column: 3; grid-row: 1; }
  }

  /* ── LEAD FORM ── */
  .lead { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 44px; align-items: start; margin-top: clamp(40px, 7vh, 88px); }
  .lead__side { grid-column: 1 / 6; display: grid; gap: 22px; position: sticky; top: calc(var(--nav-h) + 24px); }
  .lead__h { font-size: clamp(28px, 2.9vw, 50px); }
  .lead__p { color: #2b2b2e; max-width: 46ch; }
  .lead__steps li { display: grid; grid-template-columns: 3.2em 1fr; align-items: baseline; padding: 13px 0; border-top: 1px solid rgb(10 10 11 / .16); font-weight: 500; }
  .lead__steps li:last-child { border-bottom: 1px solid rgb(10 10 11 / .16); }
  .lead__promise, .lead__alt { color: #5f5e5a; }
  .lead__alt a { color: var(--ink); border-bottom: 1px solid currentColor; }
  .lead__card {
    grid-column: 7 / 13; position: relative; padding: clamp(22px, 3vw, 46px);
    background: var(--ink); color: var(--paper);
    clip-path: polygon(26px 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%, 0 26px);
  }
  .lead__card :focus-visible { outline-color: var(--gold); }
  .form { display: grid; gap: clamp(22px, 3vh, 30px); }
  .form__head { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--rule); color: var(--smoke); }
  .form__head time { color: var(--paper); }
  .form__row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(22px, 3vh, 30px) var(--gap); }
  .field { display: grid; gap: 8px; }
  .field label { display: flex; align-items: baseline; gap: 10px; color: var(--smoke); transition: color .3s ease; }
  .field__n { color: var(--smoke-2); transition: color .3s ease; }
  .field__opt { margin-left: auto; font-weight: 400; color: var(--smoke-2); }
  .field__ctl { position: relative; display: block; }
  .field__ctl::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: 0 50%; transition: transform .55s var(--ease-out), background-color .3s; }
  .field input, .field textarea {
    display: block; width: 100%; margin: 0; padding: 6px 0 12px;
    border: 0; border-bottom: 1px solid rgb(239 237 232 / .24); border-radius: 0; background: transparent;
    color: var(--paper); font: 400 var(--t-body)/1.45 var(--f-mono); font-stretch: 87.5%;
    outline: none; -webkit-appearance: none; appearance: none;
  }
  .field textarea { min-height: 3.4em; resize: none; overflow: hidden; }
  .field ::placeholder { color: #55555a; opacity: 1; }
  .field input:-webkit-autofill { -webkit-text-fill-color: var(--paper); -webkit-box-shadow: 0 0 0 100px var(--ink) inset; caret-color: var(--paper); }
  .field:focus-within label, .field:focus-within .field__n { color: var(--gold); }
  .field:focus-within .field__ctl::after, .field.is-bad .field__ctl::after { transform: scaleX(1); }
  .field.is-filled .field__n { color: var(--paper); }
  .field.is-bad label, .field.is-bad .field__n { color: #ff6b5e; }
  .field.is-bad .field__ctl::after { background: var(--marker); }
  .field__err { font-size: 12.5px; line-height: 1.4; color: #ff6b5e; }
  .field__err:empty { display: none; }
  .form__hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; opacity: 0; }
  .form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 6px; }
  .form__submit { flex: 1 1 auto; }
  .form__fine { flex: 1 1 200px; font-size: 12px; line-height: 1.5; color: var(--smoke); }
  .form__status { font-size: 13px; color: #ff6b5e; }
  .form__status:empty { display: none; }
  .form__status a { color: var(--paper); border-bottom: 1px solid currentColor; }
  .form.is-sending .form__submit { opacity: .6; pointer-events: none; }
  .lead__done { display: grid; align-content: center; justify-items: start; gap: 18px; min-height: 480px; outline: none; }
  .done__smile { width: clamp(90px, 9vw, 130px); height: auto; overflow: visible; }
  .done__smile g { filter: url(#marker-smile); }
  .done__smile path { fill: none; stroke: var(--marker); stroke-width: 25; stroke-linecap: round; stroke-linejoin: round; }
  .done__title { font-size: clamp(38px, 5vw, 86px); }
  .done__msg { max-width: 44ch; color: var(--soft); }
  .done__meta { color: var(--smoke); }
  @media (max-width: 900px) {
    .lead__side, .lead__card { grid-column: 1 / -1; }
    .lead__side { position: static; }
  }
  .lead > * { min-width: 0; }
  @media (max-width: 600px) {
    .form__row { grid-template-columns: 1fr; }
    .form__submit { width: 100%; --h: 64px; padding: 0 18px; font-size: 13px; }
  }
  @media (max-width: 760px) { .map__dest text { font-size: 22px; } }
}

/* ══════════════════════════════ v4: phones ══════════════════════════════ */
@layer sections {
  @media (max-width: 760px) {
    /* Titles, 15% smaller than before. */
    .hero__title { font-size: clamp(20px, 6.8vw, 50px); }
    .sec__title { font-size: calc(clamp(30px, 6.2vw, 116px) * .85); }
    .ozarks__head .sec__title { font-size: calc(clamp(32px, 3.6vw, 66px) * .85); }
    .audit__head .sec__title { font-size: calc(clamp(32px, 4.6vw, 84px) * .85); }
    .cta__title { font-size: clamp(25px, 8.84vw, 51px); }
    .chero__title { font-size: clamp(29px, 9.35vw, 54px); }
    .thesis { font-size: calc(clamp(28px, 4.2vw, 74px) * .85); }
    .card__t { font-size: 22px; }
    .card__n { font-size: 54px; }
    .step__t { font-size: 18.7px; }
    .more__title { font-size: 20.4px; }
    .lead__h { font-size: 23.8px; }
    .done__title { font-size: 32.3px; }
    .pindex__name { font-size: 18.7px; }
    .chapters .display { font-size: 17px; }

    /* Phones read centred. Tables, lists, the scan, the form and anything
       pinned left or right keep their alignment. */
    .hero__title, .hero__lede, .sec__head, .card__txt, .card__n, .ozarks__head, .cta__title,
    .lead__h, .lead__p, .lead__promise, .lead__alt, .lead__done, .foot__about, .foot__nav, .foot__meta, .foot__base,
    .phero__foot, .chero__title, .shot figcaption, .more__txt, .cintro__grid, .step, .hand__fig figcaption, .hand__note,
    .audit__head, .menu__foot, .hint { text-align: center; }
    .label, .hero__cue, .hint, .shot figcaption b, .more__meta, .hand__fig figcaption .eyebrow, .hero__ctas { justify-content: center; }
    .hero__lede, .sec__sub, .lead__p, .more__p, .foot__about, .phero__lede, .step__p, .done__msg, .shot figcaption { margin-inline: auto; }
    .card__txt, .more__txt, .lead__side, .lead__done, .audit__head, .foot__nav, .foot__meta, .foot__about { justify-items: center; }
    .lead__steps { justify-self: stretch; }
    .foot__base { align-items: center; }
    .audit__head .btn { justify-self: center; }
    .step { align-items: center; }
    .step__aside { border-left: 0; border-top: 2px solid var(--marker); padding: 12px 0 0; }
  }
  @media (max-width: 420px) { .sec__title { font-size: 7.82vw; } }
}

/* ══════════════════════════════ v5: phones ══════════════════════════════ */
@layer sections {
  @media (max-width: 760px) {
    /* A slight tilt on the struck line, and one word-space before the smiley. */
    .smile-slot { margin-left: .44em; }

    /* Body copy: 20% smaller, line spacing 35% tighter (1.7 → 1.1).
       Headlines, eyebrow labels and form inputs (16px stops iOS zooming)
       keep their size. */
    :root { --t-body: 11.6px; --t-lede: 12.4px; }
    body, .lede, .card__txt p, .shot figcaption, .hand__note, .step__aside, .step__p, .dyno__k, .dyno__note,
    .spec dd, .chapters__d, .pindex__meta, .form__fine, .form__status, .field__err, .done__msg, .lead__p,
    .more__p, .foot__about, .lead__steps li { line-height: 1.1; }
    .shot figcaption { font-size: 10.8px; }
    .shot--phone figcaption { font-size: 10px; }
    .hand__note { font-size: 9.6px; }
    .step__aside { font-size: 12px; }
    .dyno__k { font-size: 11.2px; }
    .dyno__note { font-size: 10px; }
    .spec dd { font-size: 11.2px; }
    .chapters__d, .pindex__meta, .form__status { font-size: 10.4px; }
    .form__fine { font-size: 9.6px; }
    .field__err { font-size: 10px; }
  }
}

@layer sections {
  @media (max-width: 760px) {
    /* Form text matches the paragraphs (11.6px). iOS zooms into any field set
       under 16px, so fields are set at 16px and drawn at 72.5%; site.js pulls
       the space the scale frees back up. */
    .field__ctl { overflow: clip; }
    .field input, .field textarea { --k: .725; font-size: 16px; width: 137.93%; transform: scale(.725); transform-origin: 0 0; }
  }
}

/* ══════════════════════════════ v6 ══════════════════════════════ */
@layer components {
  /* Main CTAs: solid red, white type. Secondary: black inside a 2px red ring. */
  .btn, .btn--gold { background: var(--marker); color: #fff; }
  .btn::before, .btn--gold::before { background: #ff4b3e; }
  .btn--ghost, .btn--ghost:hover { background: var(--marker); color: #fff; }
  .btn--ghost::after {
    inset: 2px;
    clip-path: polygon(calc(var(--c) - .83px) 0, 100% 0, 100% calc(100% - var(--c) + .83px), calc(100% - var(--c) + .83px) 100%, 0 100%, 0 calc(var(--c) - .83px));
  }
  .btn--ghost::before { background: rgb(227 38 26 / .22); }
}

@layer sections {
  /* The nav no longer inverts colours (that would turn the red CTA cyan);
     it switches to ink over the paper contact section instead. */
  .nav { --nav-fg: #fff; color: var(--nav-fg); mix-blend-mode: normal; transition: transform .7s var(--ease-out), color .35s ease; }
  .nav.is-light { --nav-fg: var(--ink); }
  /* Once the page moves, a frosted bar keeps the nav legible over anything. */
  .nav::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: rgb(10 10 11 / .74); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
    box-shadow: inset 0 -1px 0 var(--rule-2); opacity: 0; transition: opacity .4s ease, background-color .35s ease;
  }
  .nav.is-scrolled::before { opacity: 1; }
  .nav.is-light::before { background: rgb(239 237 232 / .82); box-shadow: inset 0 -1px 0 rgb(10 10 11 / .1); }
  .menu-open .nav::before { opacity: 0; }
  .menu-open .nav { --nav-fg: #fff; }
  .nav__links a, .nav__menu { color: inherit; }
  .nav__clock { color: color-mix(in srgb, var(--nav-fg) 60%, transparent); }
  .nav__clock time { color: var(--nav-fg); }
  .nav__progress { background: var(--nav-fg); }
  .nav__cta { background: var(--marker); color: #fff; }

  @media (min-width: 761px) {
    /* Same size as "Built in the Ozarks. For the Ozarks." */
    .process .sec__title { font-size: clamp(32px, 3.6vw, 66px); }

    /* Body copy: 15% smaller, line spacing 25% tighter. */
    :root { --t-body: 12.75px; --t-lede: clamp(13.2px, .952vw, 15.3px); }
    body { line-height: 1.275; }
    .lede, .card__txt p { line-height: 1.215; }
    .shot figcaption { font-size: 11.5px; line-height: 1.2; }
    .hand__note { font-size: 11px; line-height: 1.16; }
    .step__aside { font-size: 12.75px; line-height: 1.09; }
    .dyno__k { font-size: clamp(11.9px, .935vw, 14.45px); }
    .dyno__note { font-size: 10.6px; }
    .spec dd { font-size: 11.9px; line-height: 1.125; }
    .chapters__d, .pindex__meta, .form__status { font-size: 11px; }
    .form__fine { font-size: 10.2px; line-height: 1.125; }
    .field__err { font-size: 10.6px; line-height: 1.05; }
  }

  @media (min-width: 901px) {
    /* Process cards: everything hangs from the cap-top of the big number, and
       the card ends one padding below its tallest column. NF Ultra's cap top
       sits (line-height / 2 - 0.3)em below the top of its line box, so the
       number (lh .8) and title (lh .92) are pulled up by exactly that. */
    .card { min-height: 0; grid-template-rows: auto; align-items: start; }
    .card__n, .card__txt, .card__vis { grid-row: 1; align-self: start; }
    .card__n { margin-top: -.1em; }
    .card__txt { align-content: start; }
    .card__t { margin-top: -.16em; }
    .card__vis { min-height: 0; }
    .card__vis--scan .scan__row:first-child { padding-top: 0; }
    .card__vis--pages { min-height: clamp(280px, 26vw, 380px); }
  }
}