/* ==========================================================================
   DIHYAH RAJ — v7 "ONE-TAKE FOUNDRY"  ·  app.css
   KILN brand system: carbon ground, bone type, ember heat, paper ledger.
   One stylesheet for every page. Builder 2 appends page-specific sections
   at the very end (see the V7 PAGE SECTIONS marker).
   ========================================================================== */

/* ==========================================================================
   00 · FONTS (self-hosted variable files)
   ========================================================================== */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/assets/fonts/bricolage-var.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/assets/fonts/instrument-sans-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/assets/fonts/instrument-sans-italic-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Spline Sans Mono";
  src: url("/assets/fonts/spline-mono-var.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   01 · TOKENS
   ========================================================================== */
:root {
  /* carbon ground */
  --carbon-950: #070605;
  --carbon-900: #0B0908;
  --carbon-850: #120F0C;
  --carbon-800: #1A1612;
  --carbon-700: #26211B;
  --hair: rgba(244, 239, 231, 0.09);
  --hair-strong: rgba(244, 239, 231, 0.16);

  /* bone type */
  --bone-100: #F4EFE7;
  --bone-300: #B4AA99;
  --bone-500: #857A69;

  /* ember heat */
  --ember-100: #FFEFD1;
  --ember-200: #FFDFA8;
  --ember-300: #FFC978;
  --ember-400: #FFAE42;
  --ember-500: #F28C1E;
  --ember-600: #B35C00;
  --ember-700: #8A4A05;
  --ember-ink: #1A0F02;

  /* paper ledger */
  --paper-0: #F6F1E7;
  --paper-1: #EDE5D5;
  --ink-900: #181310;
  --ink-600: #57503F;
  --hair-paper: rgba(24, 19, 16, 0.16);

  --danger: #E5484D;

  /* type */
  --font-display: "Bricolage Grotesque", "Avenir Next", system-ui, sans-serif;
  --font-body: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: "Spline Sans Mono", "SFMono-Regular", ui-monospace, monospace;

  /* motion */
  --ease-kiln: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-kiln-io: cubic-bezier(0.77, 0, 0.175, 1);

  /* rhythm */
  --gutter: clamp(1.4rem, 4.5vw, 4.5rem);
  --measure: 68ch;
  --radius: 10px;
}

/* ==========================================================================
   02 · RESET
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  background: var(--carbon-900);
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto; /* the engine owns scroll feel */
}

body {
  margin: 0;
  background: var(--carbon-900);
  color: var(--bone-100);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg, video { max-width: 100%; height: auto; display: block; }
button, input {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
}
button { cursor: pointer; }

::selection { background: var(--ember-500); color: var(--carbon-950); }

:focus-visible {
  outline: 2px solid var(--ember-400);
  outline-offset: 3px;
  border-radius: 2px;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.skip-link {
  position: fixed;
  top: 12px; left: 12px;
  z-index: 990;
  padding: 10px 16px;
  background: var(--ember-400);
  color: var(--ember-ink);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: var(--radius);
  transform: translateY(-260%);
}
.skip-link:focus-visible { transform: translateY(0); }

/* film grain — fixed, decorative, never on scrolling containers */
.grain {
  position: fixed;
  inset: 0;
  z-index: 400;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}
/* the scene engine drifts the grain at 1.06× scroll (wrapped on the
   180px tile) — one spare tile above and below keeps edges covered */
@media (min-width: 900px) {
  html.scenes-on .grain {
    inset: -180px 0;
    will-change: transform;
  }
}

/* ==========================================================================
   03 · TYPE KIT — display scale, mono labels, outlined numerals
   ========================================================================== */
.t-display {
  font-family: var(--font-display);
  font-weight: 750;
  font-size: clamp(3.4rem, 11vw, 10rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.t-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 6.4vw, 5.6rem);
  line-height: 1.0;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.t-statement {
  font-family: var(--font-display);
  font-weight: 560;
  font-size: clamp(1.8rem, 4.4vw, 3.7rem);
  line-height: 1.16;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.t-h3 {
  font-family: var(--font-display);
  font-weight: 640;
  font-size: clamp(1.45rem, 2.6vw, 2.25rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
}
.t-body {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--bone-300);
  max-width: var(--measure);
}
.t-accent {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 480;
  font-size: 0.965em;
  letter-spacing: -0.005em;
}

/* mono micro-label: the KILN signature */
.k-label {
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone-500);
}
.k-label::before {
  content: "";
  width: 18px;
  height: 1px;
  background: var(--ember-500);
  flex: none;
}
.k-label--ember { color: var(--ember-400); }

.k-micro {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone-500);
}

/* oversized thin outlined numerals */
.k-num {
  font-family: var(--font-display);
  font-weight: 340;
  font-size: clamp(4.2rem, 9vw, 8.5rem);
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(244, 239, 231, 0.34);
}

.hairline { height: 1px; background: var(--hair); border: 0; margin: 0; }

.wrap {
  width: min(100% - calc(var(--gutter) * 2), 1480px);
  margin-inline: auto;
}

/* ==========================================================================
   04 · BUTTONS & LINKS
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 0.95em 1.7em;
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  transition: transform 160ms var(--ease-kiln), background-color 200ms var(--ease-kiln), border-color 200ms var(--ease-kiln), color 200ms var(--ease-kiln);
}
.btn:active { transform: scale(0.97); }

.btn--fill {
  background: var(--ember-400);
  color: var(--ember-ink);
}
.btn--ghost {
  border: 1px solid var(--hair-strong);
  color: var(--bone-100);
}
.btn .btn__arrow {
  display: inline-block;
  transition: transform 220ms var(--ease-kiln);
}

@media (hover: hover) and (pointer: fine) {
  .btn--fill:hover { background: var(--ember-300); }
  .btn--ghost:hover { border-color: var(--ember-500); color: var(--ember-200); }
  .btn:hover .btn__arrow { transform: translateX(4px); }
  .link-line:hover { color: var(--ember-300); }
  .link-line:hover::after { transform: scaleX(1); transform-origin: left; }
}

.link-line {
  position: relative;
  display: inline-block;
  transition: color 200ms var(--ease-kiln);
}
.link-line::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 280ms var(--ease-kiln);
}

/* ==========================================================================
   05 · NAV
   ========================================================================== */
#nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 300;
  color: var(--bone-100);
  transition: color 300ms var(--ease-kiln);
}
#nav::before {
  /* legibility scrim — gradient, never blur */
  content: "";
  position: absolute;
  inset: 0 0 -28px 0;
  background: linear-gradient(180deg, rgba(7, 6, 5, 0.72), rgba(7, 6, 5, 0));
  pointer-events: none;
  opacity: 1;
  transition: opacity 300ms var(--ease-kiln);
}
#nav.nav-dark { color: var(--ink-900); }
#nav.nav-dark::before { opacity: 0; }

.nav__row {
  width: min(100% - calc(var(--gutter) * 2), 1480px);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding-block: 1.15rem;
  position: relative;
}
.nav__mark {
  font-family: var(--font-display);
  font-weight: 740;
  font-size: 1.02rem;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
}
.nav__mark i {
  font-style: normal;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ember-400);
  align-self: center;
}
.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 2.4vw, 2.4rem);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.nav__cta { padding: 0.8em 1.35em; }

/* hamburger — two lines morph to X */
.nav__burger {
  display: none;
  position: relative;
  width: 44px; height: 44px;
  margin-right: -10px;
}
.nav__burger b {
  position: absolute;
  left: 10px; right: 10px;
  height: 2px;
  background: currentColor;
  transition: transform 300ms var(--ease-kiln);
}
.nav__burger b:nth-child(1) { top: 17px; }
.nav__burger b:nth-child(2) { bottom: 17px; }
html.menu-open .nav__burger b:nth-child(1) { transform: translateY(4px) rotate(45deg); }
html.menu-open .nav__burger b:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

/* full-screen carbon overlay menu */
#menu {
  position: fixed;
  inset: 0;
  z-index: 290;
  background: var(--carbon-950);
  display: flex;
  align-items: center;
  visibility: hidden;
  opacity: 0;
  transition: opacity 300ms var(--ease-kiln), visibility 0s linear 300ms;
}
html.menu-open #menu {
  visibility: visible;
  opacity: 1;
  transition: opacity 300ms var(--ease-kiln);
}
.menu__inner {
  width: min(100% - calc(var(--gutter) * 2), 1480px);
  margin-inline: auto;
  display: grid;
  gap: 0.4rem;
}
.menu__mask { overflow: hidden; }
.menu__link {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 9.5vw, 4.6rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--bone-100);
  transform: translateY(112%);
  transition: transform 480ms var(--ease-kiln), color 200ms var(--ease-kiln);
}
html.menu-open .menu__link { transform: translateY(0); }
.menu__mask:nth-child(1) .menu__link { transition-delay: 60ms; }
.menu__mask:nth-child(2) .menu__link { transition-delay: 110ms; }
.menu__mask:nth-child(3) .menu__link { transition-delay: 160ms; }
.menu__mask:nth-child(4) .menu__link { transition-delay: 210ms; }
.menu__mask:nth-child(5) .menu__link { transition-delay: 260ms; }
.menu__mask:nth-child(6) .menu__link { transition-delay: 310ms; }
html:not(.menu-open) .menu__link { transition-delay: 0ms; }
.menu__foot {
  margin-top: 2.2rem;
  display: flex;
  gap: 1.6rem;
  flex-wrap: wrap;
}
@media (hover: hover) and (pointer: fine) {
  .menu__link:hover { color: var(--ember-300); }
}

/* ==========================================================================
   06 · LOADER — counter + carbon shutter
   ========================================================================== */
#loader {
  position: fixed;
  inset: 0;
  z-index: 900;
  pointer-events: none; /* page stays scrollable underneath */
  display: block;
}
.loader__panel {
  position: absolute;
  left: 0; right: 0;
  height: 50.5%;
  background: var(--carbon-900);
}
.loader__panel--t { top: 0; border-bottom: 1px solid var(--hair); }
.loader__panel--b { bottom: 0; }
.loader__seam {
  position: absolute;
  top: 50%; left: 0; right: 0;
  height: 1px;
  margin-top: -0.5px;
  background: linear-gradient(90deg, transparent, var(--ember-400) 18%, var(--ember-200) 50%, var(--ember-400) 82%, transparent);
  transform: scaleX(0);
}
.loader__mark {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -130%);
  font-family: var(--font-display);
  font-weight: 740;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  color: var(--bone-100);
  white-space: nowrap;
}
.loader__count {
  position: absolute;
  left: clamp(1.4rem, 4.5vw, 4.5rem);
  bottom: clamp(1.2rem, 3.5vh, 2.6rem);
  font-family: var(--font-mono);
  font-weight: 300;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 1;
  color: var(--bone-100);
}
.loader__count::after {
  content: " %";
  font-size: 0.4em;
  color: var(--ember-400);
}
.loader__tag {
  position: absolute;
  right: clamp(1.4rem, 4.5vw, 4.5rem);
  bottom: clamp(1.5rem, 4vh, 3rem);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone-500);
}

/* ==========================================================================
   07 · CURSOR (fine pointer ≥900 only; JS adds html.cursor-on)
   ========================================================================== */
#cursor-dot, #cursor-ring {
  display: none;
  position: fixed;
  top: 0; left: 0;
  z-index: 950;
  pointer-events: none;
  border-radius: 50%;
}
#cursor-dot {
  width: 10px; height: 10px;
  margin: -5px 0 0 -5px;
  background: var(--ember-400);
}
#cursor-ring {
  width: 28px; height: 28px;
  margin: -14px 0 0 -14px;
  border: 1px solid var(--hair-strong);
}
@media (min-width: 900px) and (pointer: fine) {
  html.cursor-on #cursor-dot,
  html.cursor-on #cursor-ring { display: block; }
  html.cursor-on body,
  html.cursor-on a,
  html.cursor-on button,
  html.cursor-on input { cursor: none; }
}

/* ==========================================================================
   08 · ACT BASE — sections, stages, heat horizon
   ========================================================================== */
main { display: block; }

.act { position: relative; }
.act--flow { padding-block: clamp(7rem, 16vh, 12rem); }

.act__stage {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

/* deep ember heat-horizon — a gradient div, never canvas */
.heat-horizon {
  position: absolute;
  left: -12%; right: -12%; bottom: -18%;
  height: 70%;
  pointer-events: none;
  background:
    radial-gradient(58% 58% at 50% 100%, rgba(242, 140, 30, 0.52), rgba(179, 92, 0, 0.20) 46%, rgba(179, 92, 0, 0) 72%),
    radial-gradient(30% 34% at 50% 100%, rgba(255, 174, 66, 0.38), rgba(255, 174, 66, 0) 70%);
  opacity: 0.45;
  transform-origin: 50% 100%;
  will-change: transform, opacity;
}

/* travelling ember spine — ONE fixed horizon behind the whole journey
   (outside the smoother, additive light only: screen blend never
   occludes content). JS keyframes its intensity per act; hidden under
   reduced motion, below 560px, and whenever the scene engine is off. */
.ember-spine {
  position: fixed;
  left: -14%; right: -14%; bottom: -12%;
  height: 58%;
  z-index: 240;
  pointer-events: none;
  mix-blend-mode: screen;
  background:
    radial-gradient(56% 60% at 50% 100%, rgba(242, 140, 30, 0.5), rgba(179, 92, 0, 0.18) 48%, rgba(179, 92, 0, 0) 74%),
    radial-gradient(28% 34% at 50% 100%, rgba(255, 174, 66, 0.42), rgba(255, 174, 66, 0) 70%);
  opacity: 0;
  transform-origin: 50% 100%;
  will-change: transform, opacity;
}
html:not(.scenes-on) .ember-spine { display: none; }
@media (max-width: 559.98px) { .ember-spine { display: none; } }
@media (prefers-reduced-motion: reduce) { .ember-spine { display: none; } }

/* ==========================================================================
   09 · ACT 0 — FORGE (index hero)
   ========================================================================== */
.act--forge { background: var(--carbon-950); }
.forge-stage { background: var(--carbon-950); }

/* v8 · the forge hero is now a COMPOSITION: headline (left) beside the
   molten orb (right, a real object in a defined container). The orb is
   furniture in the room — hide it and a designed hero still stands. */
.forge-scene {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  align-items: center;
  gap: clamp(1.4rem, 3.6vw, 3.6rem);
  padding-inline: var(--gutter);
  perspective: 1300px;
  perspective-origin: 32% 44%;
}
.forge-display {
  justify-self: start;
  display: grid;
  justify-items: start;
  text-align: left;
  transform-style: preserve-3d;
  font-family: var(--font-display);
  font-weight: 750;
  font-size: clamp(2.7rem, 7.2vw, 7.4rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
}
/* right column — the orb is the hero's subject; the live readout rides
   beneath it like the machine's own ticker tape */
.forge-object-col {
  position: relative;
  justify-self: center;
  align-self: center;
  width: 100%;
  display: grid;
  justify-items: center;
  gap: clamp(0.8rem, 2.2vh, 1.7rem);
}
.forge-object-col .hero-object {
  width: min(44vmin, 100%);
  aspect-ratio: 1;
}
.forge-line {
  display: block;
  will-change: transform;
  transform-style: preserve-3d;
}
.forge-line .ch { display: inline-block; }
.forge-line--molten {
  /* solid ember base — JS refines it into a per-char ramp. No gradients
     on text, glow is text-shadow only, never background-clip (the v6
     ghost class is banned). Base color keeps no-js/reduced motion molten. */
  color: var(--ember-300);
  text-shadow: 0 0 38px rgba(242, 140, 30, 0.38), 0 0 90px rgba(242, 140, 30, 0.22);
}

/* mono readout — now composed under the orb inside the object column */
.forge-ticker {
  position: relative;
  display: grid;
  gap: 0.5rem;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: var(--bone-500);
  border-top: 1px solid var(--hair);
  padding-top: clamp(0.7rem, 1.6vh, 1.2rem);
  width: min(44vmin, 100%);
}
.forge-ticker span { display: block; white-space: nowrap; }
.forge-ticker b {
  font-weight: 500;
  color: var(--ember-300);
  margin-left: 0.6em;
}

/* lower-third: sub-copy + CTAs */
.forge-under {
  position: absolute;
  left: 0; right: 0;
  bottom: clamp(1.6rem, 5.5vh, 4rem);
}
.forge-under__grid {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(1.6rem, 4vw, 4rem);
}
.forge-sub { max-width: 44ch; }
.forge-sub .k-label { margin-bottom: 0.9rem; }
.forge-sub p { color: var(--bone-300); font-size: 1rem; line-height: 1.65; }
.forge-actions {
  display: grid;
  justify-items: end;
  gap: 1rem;
}
.forge-actions__row { display: flex; gap: 0.8rem; flex-wrap: wrap; justify-content: flex-end; }

/* ==========================================================================
   10 · ACT 1 — THE LEAK (editorial statement, dark)
   ========================================================================== */
.act--leak {
  background: linear-gradient(180deg, var(--carbon-950), var(--carbon-900) 32%);
}
/* v9 · the pinned-overlap era is retired. Sections flow naturally now;
   no negative-margin handoffs, no dead frames — the cinematic system in
   section 40 owns index + wsend composition. */
.leak-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(2.4rem, 6vw, 7rem);
  align-items: start;
}
.leak-copy { display: grid; gap: clamp(1.8rem, 3.6vh, 2.8rem); max-width: 21em; }
.leak-copy .t-statement { color: var(--bone-100); }
.leak-copy .t-accent { color: var(--ember-300); }
.leak-note { margin-top: 1.4rem; }

/* right rail numeral with self-drawing circle */
.rail-num {
  position: relative;
  width: clamp(120px, 13vw, 190px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
.rail-num svg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  transform: rotate(-90deg);
}
.rail-num svg circle {
  fill: none;
  stroke: var(--hair-strong);
  stroke-width: 1;
}
.rail-num .k-num { font-size: clamp(2.6rem, 4.6vw, 4.4rem); }

/* ==========================================================================
   11 · MARQUEE RIBBON
   ========================================================================== */
.marquee {
  position: relative;
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
  padding-block: 1.05rem;
  overflow: hidden;
  background: var(--carbon-900);
}
.marquee__track {
  display: flex;
  width: max-content;
  white-space: nowrap;
  will-change: transform;
}
.marquee__seq {
  display: flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone-500);
}
.marquee__seq em {
  font-style: normal;
  color: var(--ember-400);
  padding-inline: 1.4em;
}

/* ==========================================================================
   12 · ACT 2 — THE MACHINE (CSS phone + chat thread)
   ========================================================================== */
.act--machine { background: var(--carbon-900); }
.machine-stage { background: var(--carbon-900); }
.machine-grid {
  position: absolute;
  inset: 0;
  width: min(100% - calc(var(--gutter) * 2), 1480px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 6rem);
}
.machine-copy { display: grid; gap: 1.5rem; align-content: center; }
.machine-copy .t-title { max-width: 9em; }
.machine-copy .t-body { max-width: 38ch; }

.machine-phone-wrap {
  position: relative;
  display: grid;
  place-items: center;
  perspective: 1400px;
}
.phone-halo {
  position: absolute;
  width: 130%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(242, 140, 30, 0.16), rgba(242, 140, 30, 0) 70%);
  opacity: 0.35;
  pointer-events: none;
}
.phone {
  position: relative;
  width: min(clamp(240px, 23vw, 330px), 40vh);
  aspect-ratio: 9 / 19;
  border-radius: clamp(28px, 2.6vw, 38px);
  background: linear-gradient(160deg, var(--carbon-800), var(--carbon-850) 58%);
  border: 1px solid var(--hair-strong);
  padding: 9px;
  box-shadow:
    inset 0 1px 0 rgba(244, 239, 231, 0.08),
    0 60px 120px -30px rgba(0, 0, 0, 0.85);
  will-change: transform;
}
.phone__screen {
  position: relative;
  height: 100%;
  border-radius: clamp(20px, 2vw, 30px);
  background: linear-gradient(180deg, #0A0807, #0D0A08);
  border: 1px solid var(--hair);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.phone__bar {
  display: flex;
  align-items: center;
  gap: 0.55em;
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--hair);
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone-300);
}
.phone__bar i {
  font-style: normal;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ember-400);
  flex: none;
}
.phone__bar span:last-child { margin-left: auto; color: var(--bone-500); }
.chat {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* thread hugs the bottom like a real chat */
  gap: 8px;
  padding: 12px 12px 14px;
  min-height: 0;
  overflow: hidden;
}
.bubble {
  max-width: 82%;
  padding: 8px 11px;
  border-radius: 12px;
  font-size: clamp(0.68rem, 0.72vw + 0.4rem, 0.8rem);
  line-height: 1.45;
  color: var(--bone-100);
  will-change: transform;
}
.bubble time {
  display: block;
  margin-top: 3px;
  font-family: var(--font-mono);
  font-size: 0.52rem;
  letter-spacing: 0.08em;
  color: var(--bone-500);
}
.bubble--in {
  align-self: flex-start;
  background: #211C16;
  border: 1px solid var(--hair);
  border-bottom-left-radius: 4px;
}
.bubble--out {
  align-self: flex-end;
  background: rgba(242, 140, 30, 0.12);
  border: 1px solid rgba(242, 140, 30, 0.26);
  border-bottom-right-radius: 4px;
}
.bubble--out time { color: var(--ember-600); }
.order-chip {
  align-self: stretch;
  text-align: center;
  margin-top: 4px;
  padding: 10px 8px;
  border-radius: 9px;
  border: 1px solid var(--ember-600);
  background: linear-gradient(180deg, rgba(242, 140, 30, 0.18), rgba(242, 140, 30, 0.06));
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ember-200);
  will-change: transform;
}
.screen-heat {
  position: absolute;
  left: -20%; right: -20%; bottom: -30%;
  height: 70%;
  pointer-events: none;
  background: radial-gradient(60% 60% at 50% 100%, rgba(242, 140, 30, 0.30), rgba(242, 140, 30, 0) 70%);
  opacity: 0.25;
}

/* ==========================================================================
   13 · ACT 3 — THE LEDGER (horizontal receipts)
   ========================================================================== */
.act--ledger { background: var(--carbon-950); }
.ledger-stage {
  background: var(--carbon-950);
  display: flex;
  flex-direction: column;
}
.ledger-head {
  padding-top: clamp(5.2rem, 12vh, 8rem);
  display: grid;
  gap: 1.1rem;
}
.ledger-viewport {
  flex: 1;
  display: flex;
  align-items: center;
  overflow-x: auto;               /* native swipe by default (no-js / mobile) */
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-block: 1.5rem;
}
.ledger-viewport::-webkit-scrollbar { display: none; }
html.js .is-scrubbed .ledger-viewport {
  overflow: visible;              /* the scrub owns x when pinned */
  scroll-snap-type: none;
}
.ledger-track {
  display: flex;
  align-items: stretch;
  gap: clamp(1.1rem, 2vw, 1.8rem);
  padding-inline: var(--gutter);
  width: max-content;
  will-change: transform;
}
.receipt {
  scroll-snap-align: center;
  flex: none;
  width: clamp(272px, 23vw, 340px);
  display: flex;
  flex-direction: column;
  gap: 0.95rem;
  background: var(--carbon-850);
  border: 1px solid var(--hair);
  border-radius: 12px;
  padding: clamp(1.3rem, 2vw, 1.7rem);
  box-shadow: inset 0 1px 0 rgba(244, 239, 231, 0.05);
}
.receipt__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone-500);
}
.receipt__row b { font-weight: 500; color: var(--ember-300); }
.receipt__amount {
  font-family: var(--font-display);
  font-weight: 640;
  font-size: clamp(1.7rem, 2.3vw, 2.3rem);
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--bone-100);
}
.receipt__rule { width: 100%; height: 2px; overflow: visible; }
.receipt__rule line { stroke: var(--ember-500); stroke-width: 2; }
.receipt__meta {
  margin-top: auto;
  padding-top: 0.85rem;
  border-top: 1px dashed var(--hair);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bone-500);
}
.receipt--report {
  border-color: rgba(242, 140, 30, 0.45);
  background: linear-gradient(180deg, rgba(242, 140, 30, 0.12), rgba(242, 140, 30, 0.02) 55%), var(--carbon-850);
}
.receipt--report .receipt__amount { color: var(--ember-200); }
.receipt--report .receipt__rule line { stroke: var(--ember-300); }
.ledger-progress {
  height: 2px;
  margin-inline: var(--gutter);
  margin-bottom: clamp(1.6rem, 4.5vh, 3rem);
  background: var(--hair);
  overflow: hidden;
}
.ledger-progress i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--ember-600), var(--ember-400));
  transform: scaleX(0);
  transform-origin: left;
  will-change: transform;
}

/* ==========================================================================
   14 · ACT 4 — HOUSE RULES (kiln door → paper)
   ========================================================================== */
.act--rules { background: var(--carbon-950); }
.rules-door {
  background: var(--carbon-950);
  display: grid;
  place-items: center;
}
.door-ghost {
  /* carbon layer the paper covers: giant outlined whisper — lifted
     above centre so it reaches the viewport early while the door
     slides over the ledger (no dead upper band during the approach) */
  font-family: var(--font-display);
  font-weight: 320;
  font-size: clamp(3rem, 10vw, 9rem);
  letter-spacing: 0.02em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(244, 239, 231, 0.3);
  text-align: center;
  line-height: 1;
  margin-bottom: 26vh;
}
.door-paper {
  position: absolute;
  inset: 0;
  background: var(--paper-0);
  color: var(--ink-900);
  display: grid;
  place-items: center;
  will-change: clip-path;
}
.door-paper__inner {
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 1.3rem;
}
.door-paper__inner .k-label { color: var(--ink-600); }
.door-paper__inner .k-label::before { background: var(--ember-600); }
.door-title { color: var(--ink-900); }
.door-seam {
  position: absolute;
  top: 0; left: -4%; right: -4%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--ember-500) 22%, var(--ember-300) 50%, var(--ember-500) 78%, transparent);
  transform: skewY(-1.1deg);
  opacity: 0;
  will-change: transform, opacity;
}
/* soft drop shadow the sliding paper casts ahead of its edge
   (desktop depth accent — rides the same scrub as the seam; opacity 1
   at rest so the pinned-scrub refresh render records sane starts) */
.door-shade {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 84px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(7, 6, 5, 0.5), rgba(7, 6, 5, 0));
  will-change: transform, opacity;
}
@media (max-width: 899.98px) { .door-shade { display: none; } }
.door-index {
  position: absolute;
  left: 0; right: 0;
  bottom: clamp(1.6rem, 5vh, 3.2rem);
  display: flex;
  justify-content: center;
  gap: clamp(1.2rem, 3.4vw, 3.2rem);
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-600);
}
.door-index b { font-weight: 500; color: var(--ember-600); margin-right: 0.55em; }

/* the paper body — editorial index of 4 rules */
.rules-body {
  background: var(--paper-0);
  color: var(--ink-900);
  padding-block: clamp(3rem, 7vh, 5.5rem) clamp(7rem, 15vh, 11rem);
}
.rules-body .k-label { color: var(--ink-600); }
.rules-body .k-label::before { background: var(--ember-600); }
.rules-list { display: grid; }
.rule-row {
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
  gap: clamp(1.6rem, 4vw, 4.5rem);
  align-items: start;
  padding-block: clamp(2.6rem, 6vh, 4.2rem);
}
/* rows sit at children 1,3,5,7 (separators between) — alternate rows 2 & 4 */
.rule-row:nth-child(4n+3) { grid-template-columns: minmax(0, 0.58fr) minmax(0, 0.42fr); }
.rule-row:nth-child(4n+3) .rule-num { order: 2; justify-self: end; }
.rule-num {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(4.6rem, 10vw, 9.5rem);
  line-height: 0.85;
  letter-spacing: -0.02em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(24, 19, 16, 0.4);
}
.rule-body { display: grid; gap: 0.9rem; max-width: 52ch; }
.rule-body .t-h3 { color: var(--ink-900); }
.rule-body p { color: var(--ink-600); }
.rule-sep { width: 100%; height: 1px; overflow: visible; display: block; }
.rule-sep line { stroke: var(--hair-paper); stroke-width: 1; }

/* ==========================================================================
   15 · ACT 5 — THE CLOSE (carbon, full heat)
   ========================================================================== */
.act--close {
  position: relative;
  background: var(--carbon-950);
  padding-block: clamp(8rem, 20vh, 14rem) clamp(6rem, 14vh, 10rem);
  overflow: hidden;
}
.act--close .heat-horizon {
  opacity: 0.9;
  height: 84%;
  background:
    radial-gradient(58% 58% at 50% 100%, rgba(242, 140, 30, 0.6), rgba(179, 92, 0, 0.24) 48%, rgba(179, 92, 0, 0) 74%),
    radial-gradient(30% 36% at 50% 100%, rgba(255, 174, 66, 0.5), rgba(255, 174, 66, 0) 70%);
}
.close-inner {
  position: relative;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: clamp(2rem, 5vh, 3.2rem);
}
.close-inner .t-display { font-size: clamp(3rem, 9vw, 8.2rem); }

/* (section 16 · CAPTURE removed — the old signup funnel is retired; the
   product is live. app.js keeps a capture slot that no-ops with no forms.) */

/* ==========================================================================
   17 · FOOTER LEDGER
   ========================================================================== */
footer {
  position: relative;
  background: var(--carbon-950);
  border-top: 1px solid var(--hair);
  overflow: hidden;
}
.foot-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.6rem, 4vw, 4rem);
  padding-block: clamp(3.2rem, 8vh, 5.5rem) clamp(2.6rem, 6vh, 4rem);
}
.foot-col { display: grid; gap: 0.95rem; align-content: start; }
.foot-col .k-micro { margin-bottom: 0.35rem; color: var(--bone-500); }
.foot-col a {
  justify-self: start;
  font-size: 0.9rem;
  color: var(--bone-300);
}
.foot-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.4rem;
  border-top: 1px solid var(--hair);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone-500);
}
.footmark {
  position: relative;
  height: clamp(4.6rem, 11vw, 10rem);
  overflow: hidden;
}
.footmark span {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(8.4rem, 19.5vw, 18rem);
  line-height: 0.82;
  letter-spacing: -0.03em;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(244, 239, 231, 0.22);
}

/* ==========================================================================
   18 · RESPONSIVE <900 — stacked variants
   ========================================================================== */
@media (max-width: 899.98px) {
  .nav__links { display: none; }
  .nav__burger { display: block; }

  /* forge hero stacks: headline over the orb as one group, anchored to the
     top so the pair never collides with the bottom CTA band on short phones.
     Flex column keeps the two adjacent (no grid-track gap blow-out). */
  .forge-scene {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    grid-template-columns: none;
    gap: clamp(1.5rem, 5vh, 3rem);
    padding-top: clamp(4.6rem, 12vh, 7.5rem);
    padding-bottom: 0;
  }
  .forge-object-col { justify-self: start; }
  .forge-object-col .hero-object { width: min(46vmin, 54vw); }
  .forge-display { font-size: clamp(2.5rem, 10.5vw, 4.2rem); }
  .forge-object-col { justify-self: center; }
  .forge-object-col .hero-object { width: min(48vmin, 62vw); }
  .forge-ticker { display: none; }
  .forge-under__grid {
    flex-direction: column;
    align-items: flex-start;
  }
  .forge-sub p { font-size: 0.92rem; max-width: 52ch; }
  .forge-actions { justify-items: start; }
  .forge-actions__row { justify-content: flex-start; }

  .leak-grid { grid-template-columns: 1fr; }
  .rail-num { order: -1; }

  .machine-grid {
    grid-template-columns: 1fr;
    align-content: center;
    gap: clamp(1.4rem, 4vh, 2.4rem);
    padding-block: 4.6rem 1.4rem;
  }
  .machine-copy { gap: 1rem; }
  .machine-copy .t-body { display: none; }
  .phone { width: min(min(clamp(240px, 23vw, 330px), 40vh), 62vw); }
  .machine-stage .machine-phone-wrap { align-self: start; }

  .ledger-stage { height: auto; min-height: 0; padding-bottom: 2rem; }
  .ledger-head { padding-top: clamp(6rem, 14vh, 8rem); }
  .ledger-progress { display: none; }
  .receipt { width: min(78vw, 320px); }

  .rule-row,
  .rule-row:nth-child(4n+3) { grid-template-columns: 1fr; gap: 1.2rem; }
  .rule-row:nth-child(4n+3) .rule-num { order: 0; justify-self: start; }
  .rule-num { font-size: clamp(3.6rem, 14vw, 5.4rem); }

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

/* ==========================================================================
   19 · RESPONSIVE <560 — tightening
   ========================================================================== */
@media (max-width: 559.98px) {
  :root { --gutter: 1.15rem; }

  .t-display { font-size: clamp(2.9rem, 12.5vw, 3.4rem); }
  .t-statement { font-size: clamp(1.5rem, 7vw, 1.8rem); }

  /* the sub-copy returns on small phones so the CTA band doesn't sit empty */
  .forge-sub { max-width: 100%; }
  .forge-sub .k-label { margin-bottom: 0.6rem; }
  .forge-sub p { font-size: 0.85rem; line-height: 1.6; }
  .forge-under { bottom: 1.3rem; }
  .forge-actions { width: 100%; }
  .forge-actions__row { width: 100%; }
  .forge-actions__row .btn { flex: 1; }

  .marquee__seq { font-size: 0.62rem; }

  .phone { width: min(64vw, 34vh); aspect-ratio: 9 / 19.6; }
  .chat { gap: 5px; padding: 8px 8px 10px; }
  .bubble { padding: 6px 8px; font-size: 0.64rem; line-height: 1.4; }
  .bubble time { font-size: 0.48rem; margin-top: 2px; }
  .order-chip { padding: 7px 6px; font-size: 0.5rem; }
  .machine-grid { padding-block: 4.2rem 1rem; }

  .receipt { width: 82vw; }

  .close-inner .t-display { font-size: clamp(2.6rem, 11.5vw, 3rem); }

  .foot-grid { grid-template-columns: 1fr 1fr; gap: 1.6rem; }
  .foot-legal { flex-direction: column; gap: 0.4rem; }
  /* footmark: let the viewport rule the size so the whole word shows
     (the 8.4rem floor used to crop it to "HYAH R" on phones) */
  .footmark { height: clamp(2.9rem, 12vw, 4.2rem); }
  .footmark span { font-size: clamp(3.8rem, 19.5vw, 8.4rem); }
}

/* ≤400 — the narrowest phones: the thread keeps every word, loses its stamps */
@media (max-width: 400px) {
  .bubble time { display: none; }
}

/* ==========================================================================
   20 · REDUCED MOTION — content visible, zero choreography
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  #loader, #cursor-dot, #cursor-ring { display: none !important; }
  .heat-horizon { opacity: 0.4 !important; }
  .marquee__track { transform: none !important; }
}

/* ==========================================================================
   21 · NO-JS — fully readable static document
   ========================================================================== */
html.no-js #loader,
html.no-js #cursor-dot,
html.no-js #cursor-ring { display: none; }
html.no-js .act__stage { height: auto; min-height: 100vh; }
html.no-js .forge-scene { position: relative; min-height: 72vh; }
html.no-js .forge-under { position: relative; margin-top: 2rem; }
html.no-js .forge-ticker { display: none; }
html.no-js .machine-grid { position: relative; padding-block: 6rem 3rem; }
html.no-js #menu { display: none; }
@media (max-width: 899.98px) {
  html.no-js .nav__burger { display: none; }
  html.no-js .nav__links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.9rem; }
}

/* ==========================================================================
   V7 PAGE SECTIONS — builder 2 appends page-specific styles BELOW this line.
   Do not add index styles here; index lives above.
   ========================================================================== */

/* ==========================================================================
   22 · PAGE SHELL — hero band, paper scope, lite close (builder 2)
   ========================================================================== */
.page-hero {
  position: relative;
  overflow: hidden;
  background: var(--carbon-950);
  padding-block: clamp(8.5rem, 20vh, 12.5rem) clamp(3rem, 7vh, 5rem);
}
.page-hero .heat-horizon { opacity: 0.3; height: 58%; }
.page-hero__inner {
  position: relative;
  display: grid;
  gap: clamp(1.1rem, 2.6vh, 1.7rem);
  justify-items: start;
}
.t-display.page-h1 {
  font-size: clamp(2.7rem, 7.2vw, 6.6rem);
  font-weight: 730;
  line-height: 0.98;
}
.page-h1 .t-accent { color: var(--ember-300); }
.page-sub {
  color: var(--bone-300);
  max-width: 58ch;
  font-size: 1.0625rem;
  line-height: 1.7;
}

/* paper scope — sections set on paper ground */
.on-paper { background: var(--paper-0); color: var(--ink-900); }
.on-paper .k-label { color: var(--ink-600); }
.on-paper .k-label::before { background: var(--ember-600); }
.on-paper .k-label--ember { color: var(--ember-600); }
.on-paper .k-micro { color: var(--ink-600); }
.on-paper .t-title,
.on-paper .t-h3,
.on-paper .t-statement { color: var(--ink-900); }
.on-paper .t-accent { color: var(--ember-700); }
.page-hero--paper { background: var(--paper-0); }
.page-hero--paper .page-sub { color: var(--ink-600); }

/* full-paper pages (faq, legal) — nav reads ink over a paper scrim,
   statically, so reduced-motion and no-js stay legible too */
body.page-paper { background: var(--paper-0); }
body.page-paper #nav { color: var(--ink-900); }
body.page-paper #nav::before {
  background: linear-gradient(180deg, rgba(246, 241, 231, 0.92), rgba(246, 241, 231, 0));
  opacity: 1;
}

/* lite close band on secondary pages */
.act--close { color: var(--bone-100); }
.act--close-lite { padding-block: clamp(6rem, 14vh, 9rem) clamp(5rem, 12vh, 8rem); }
.act--close-lite .heat-horizon { opacity: 0.55; }
.act--close .t-title { max-width: 17em; }
.close-ctas {
  display: flex;
  gap: 0.9rem;
  flex-wrap: wrap;
  justify-content: center;
}

/* ==========================================================================
   23 · WSEND ACT 0 — split-flap clock, live chip, drifting receipts
   ========================================================================== */
.act--wshero { background: var(--carbon-950); }
/* v8 · the night-shift hero MIRRORS the forge: a cooler orb (left) beside
   the split-flap clock + copy (right). Distinct axis + palette from index,
   so the two pages read as siblings, not clones. */
.wshero-stage {
  background: var(--carbon-950);
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  align-items: center;
  gap: clamp(1.4rem, 3.6vw, 3.6rem);
  padding-inline: var(--gutter);
}
.wshero-stage .heat-horizon { opacity: 0.18; }

/* left column — the cool orb, a real object (its own container) */
.wshero-object {
  position: relative;
  z-index: 2;
  justify-self: center;
  align-self: center;
  width: 100%;
  display: grid;
  place-items: center;
}
.wshero-object .hero-object {
  width: min(40vmin, 100%);
  aspect-ratio: 1;
}

.ws-center {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: start;
  text-align: left;
  gap: clamp(0.85rem, 2.1vh, 1.35rem);
  max-width: 660px;
  padding-top: 0;
}
.ws-flap {
  display: flex;
  align-items: flex-start;
  gap: clamp(4px, 0.9vw, 12px);
  font-family: var(--font-mono);
  font-weight: 320;
  font-size: clamp(4.4rem, 14.5vw, 11.5rem);
  line-height: 1;
  color: var(--bone-100);
}
.flap-digit {
  position: relative;
  overflow: hidden;
  height: 1em;
  width: 0.74em;
  background: linear-gradient(180deg, var(--carbon-800), var(--carbon-850) 62%);
  border: 1px solid var(--hair);
  border-radius: clamp(8px, 1vw, 16px);
  box-shadow: inset 0 1px 0 rgba(244, 239, 231, 0.07);
}
.flap-digit::after {
  /* the split-flap hinge */
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: rgba(7, 6, 5, 0.6);
}
.flap-col { display: block; will-change: transform; }
.flap-col b { display: block; height: 1em; font-weight: 320; text-align: center; }
.flap-colon {
  height: 1em;
  color: var(--ember-500);
  font-weight: 300;
}
.ws-h {
  font-family: var(--font-display);
  font-weight: 740;
  font-size: clamp(1.9rem, 4.4vw, 3.4rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin-top: clamp(0.5rem, 1.8vh, 1.1rem);
  text-wrap: balance;
}
.ws-sub {
  color: var(--bone-300);
  font-size: clamp(0.92rem, 1.1vw, 1.02rem);
  line-height: 1.65;
  max-width: 62ch;
}
.ws-ctas {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-top: 0.25rem;
}
.ws-meta {
  display: flex;
  gap: clamp(1rem, 2.4vw, 1.8rem);
  flex-wrap: wrap;
  justify-content: flex-start;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone-500);
}
.ws-meta span { display: inline-flex; align-items: center; gap: 0.6em; }
.ws-meta span::before {
  content: "";
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--ember-500);
}

/* wrapper owns placement — the scrub exit fades the wrapper while the
   load intro reveals the chip inside (never the same node twice) */
.ws-clockwrap {
  position: absolute;
  z-index: 2;
  top: clamp(4.6rem, 9vh, 6rem);
  right: var(--gutter);
  will-change: opacity;
}
.ws-clockchip {
  display: inline-flex;
  align-items: center;
  gap: 0.65em;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bone-300);
  border: 1px solid var(--hair);
  border-radius: 8px;
  padding: 0.55em 0.9em;
  background: rgba(18, 15, 12, 0.6);
}
.ws-clockchip i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ember-400);
  animation: ws-pulse 2.2s var(--ease-kiln-io) infinite;
}
.ws-clockchip b { font-weight: 500; color: var(--ember-200); }
@keyframes ws-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.78); }
}

.ws-chips {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.ws-chip {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  white-space: nowrap;
  color: var(--bone-500);
  background: rgba(18, 15, 12, 0.72);
  border: 1px solid var(--hair);
  border-radius: 8px;
  padding: 0.6em 0.9em;
}
.ws-chip--1 { top: 22%; left: 5%; }
.ws-chip--2 { top: 31%; right: 6%; }
.ws-chip--3 { top: 56%; left: 3.5%; }
.ws-chip--4 { top: 67%; right: 5%; }
.ws-chip--5 { top: 82%; left: 11%; }
.ws-chip--6 { top: 76%; right: 4.5%; }
/* short desktop viewports: the centered column reaches further down,
   so the lower-right chips would collide with the sub-copy — drop them */
@media (min-width: 900px) and (max-height: 719.98px) {
  .ws-chip--4, .ws-chip--6 { display: none; }
  .ws-chip--2 { top: 24%; }
  .ws-chip--5 { top: 88%; left: 4%; }
}

/* ==========================================================================
   24 · LEDGER ROWS — shared row pattern (wsend caps, about creed, wsend qa)
   ========================================================================== */
.caps-head, .qa-head {
  display: grid;
  gap: 1.2rem;
  margin-bottom: clamp(2.4rem, 6vh, 4rem);
  max-width: 62rem;
}
.caps-list, .creed-list, .qa-list { display: grid; }

.cap-row, .creed-row, .qa-row {
  position: relative;
  display: grid;
  align-items: start;
  padding-block: clamp(2rem, 4.6vh, 3.1rem);
}
.cap-row { grid-template-columns: clamp(3.4rem, 6vw, 5.4rem) minmax(0, 1fr) minmax(0, 0.4fr); gap: clamp(1.2rem, 3vw, 3rem); }
.creed-row, .qa-row { grid-template-columns: clamp(4.2rem, 8vw, 8rem) minmax(0, 1fr); gap: clamp(1.2rem, 3.4vw, 3.4rem); }

.draw-sep {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 1px;
  display: block;
  overflow: visible;
}
.draw-sep line { stroke: var(--hair-strong); stroke-width: 1; }
.on-paper .draw-sep line { stroke: var(--hair-paper); }

.cap-num {
  font-family: var(--font-mono);
  font-weight: 350;
  font-size: clamp(1.05rem, 1.7vw, 1.5rem);
  letter-spacing: 0.04em;
  color: var(--ember-500);
  padding-top: 0.3rem;
}
.creed-num {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.6rem, 5vw, 4.6rem);
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(244, 239, 231, 0.34);
}
.qa-num {
  font-family: var(--font-mono);
  font-weight: 350;
  font-size: clamp(1.05rem, 1.7vw, 1.5rem);
  letter-spacing: 0.04em;
  color: var(--ember-600);
  padding-top: 0.3rem;
}
.cap-body, .creed-body, .qa-body { display: grid; gap: 0.8rem; max-width: 56ch; }
.cap-body p, .creed-body p { color: var(--bone-300); }
.qa-body p { color: var(--ink-600); }
.qa-body b { color: var(--ink-900); font-weight: 650; }
.cap-quote {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.8;
  color: var(--bone-500);
  text-align: right;
  justify-self: end;
  max-width: 24ch;
  padding-top: 0.45rem;
}

/* ==========================================================================
   25 · WSEND ACT 2 EXTRAS — payment-slip bubble
   ========================================================================== */
.slip {
  display: flex;
  align-items: center;
  gap: 0.55em;
  margin-bottom: 6px;
  padding: 7px 8px;
  border-radius: 8px;
  border: 1px dashed rgba(244, 239, 231, 0.22);
  background: rgba(244, 239, 231, 0.05);
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bone-300);
  min-width: 0;
}
.slip b {
  flex: none;
  font-weight: 500;
  color: var(--ember-ink);
  background: var(--ember-400);
  border-radius: 4px;
  padding: 2px 4px;
  font-size: 0.48rem;
}

/* ==========================================================================
   26 · PRICING — ledger cards (double-bezel), trial strip, fine print
   ========================================================================== */
.price-main .wrap { display: grid; gap: clamp(2.2rem, 5vh, 3.4rem); }
.trial-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.6rem;
  flex-wrap: wrap;
  border: 1px solid var(--hair);
  border-radius: 14px;
  padding: clamp(1.2rem, 2.4vw, 1.8rem) clamp(1.3rem, 2.6vw, 2rem);
  background: linear-gradient(180deg, rgba(242, 140, 30, 0.07), rgba(242, 140, 30, 0) 60%), var(--carbon-850);
}
.trial-strip__copy { display: grid; gap: 0.6rem; }
.trial-strip__copy p { color: var(--bone-300); font-size: 0.95rem; }

.plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
  align-items: stretch;
}
/* double-bezel: carbon-850 shell around a carbon-900 core */
.plan {
  background: var(--carbon-850);
  border: 1px solid var(--hair);
  border-radius: 16px;
  padding: 7px;
  box-shadow: inset 0 1px 0 rgba(244, 239, 231, 0.05);
}
.plan__core {
  height: 100%;
  background: var(--carbon-900);
  border: 1px solid var(--hair);
  border-radius: 10px;
  padding: clamp(1.4rem, 2vw, 1.9rem);
  display: grid;
  gap: 1rem;
  align-content: start;
  grid-template-rows: auto auto auto 1fr auto;
}
.plan__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}
.plan__name {
  font-family: var(--font-display);
  font-weight: 680;
  font-size: 1.35rem;
  letter-spacing: -0.01em;
}
.plan__tag {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ember-ink);
  background: var(--ember-400);
  padding: 0.4em 0.7em;
  border-radius: 6px;
}
.plan__price {
  font-family: var(--font-display);
  font-weight: 640;
  font-size: clamp(2.6rem, 3.6vw, 3.4rem);
  letter-spacing: -0.02em;
  line-height: 1;
}
.plan__price span {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bone-500);
  margin-left: 0.6em;
}
.plan__usd {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bone-500);
}
.plan__meter {
  align-self: end;
  display: flex;
  align-items: baseline;
  gap: 0.6em;
  border-top: 1px dashed var(--hair);
  padding-top: 1rem;
}
.plan__meter b {
  font-family: var(--font-display);
  font-weight: 620;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
}
.plan__meter span {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bone-500);
}
.plan--pop { border-color: rgba(242, 140, 30, 0.5); }
.plan--pop .plan__core {
  background: linear-gradient(180deg, rgba(242, 140, 30, 0.1), rgba(242, 140, 30, 0) 46%), var(--carbon-900);
  border-color: rgba(242, 140, 30, 0.22);
}
.plan-incl {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--bone-500);
  text-align: center;
}
.plan-incl b { color: var(--bone-100); font-weight: 500; }
.plan-wide {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.6rem;
  flex-wrap: wrap;
  border: 1px solid var(--hair);
  border-radius: 14px;
  background: var(--carbon-850);
  padding: clamp(1.3rem, 2.4vw, 1.9rem) clamp(1.3rem, 2.6vw, 2rem);
}
.plan-wide__copy { display: grid; gap: 0.55rem; }
.plan-wide__copy p { color: var(--bone-300); max-width: 52ch; font-size: 0.98rem; }
.price-fine {
  display: grid;
  grid-template-columns: 1fr; /* single overage card; the retired second card left one column */
  gap: clamp(1rem, 2vw, 1.6rem);
}
.fine-card {
  border: 1px solid var(--hair);
  border-radius: 12px;
  padding: clamp(1.3rem, 2vw, 1.7rem);
  background: var(--carbon-850);
  display: grid;
  gap: 0.9rem;
  align-content: start;
}
.fine-card p { color: var(--bone-300); font-size: 0.98rem; max-width: 72ch; }
.price-note { font-size: 0.85rem; color: var(--bone-500); max-width: 72ch; }

/* ==========================================================================
   27 · ABOUT — manifesto prose, recap paper cells, founder note
   ========================================================================== */
.about-manifesto { padding-top: clamp(2rem, 5vh, 4rem); }
.about-prose { max-width: 68ch; display: grid; gap: 1.7rem; }
.about-prose p {
  font-size: clamp(1.12rem, 1.55vw, 1.32rem);
  line-height: 1.65;
  color: var(--bone-300);
}
.about-prose p::first-line { color: var(--bone-100); }
.about-creed { padding-top: 0; }
.about-recap .caps-head { margin-bottom: clamp(2rem, 5vh, 3.2rem); }
.recap-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.1rem, 2.4vw, 2rem);
}
.recap-cell {
  display: grid;
  gap: 0.7rem;
  align-content: start;
  padding: clamp(1.4rem, 2.4vw, 2rem);
  border: 1px solid var(--hair-paper);
  border-radius: 12px;
}
.recap-num {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(24, 19, 16, 0.4);
}
.recap-cell .t-h3 { font-size: clamp(1.2rem, 1.9vw, 1.6rem); }
.recap-cell p { color: var(--ink-600); font-size: 0.98rem; }
.about-note { padding-top: clamp(4rem, 9vh, 6.5rem); }
.note-card {
  border: 1px solid var(--hair);
  border-left: 2px solid var(--ember-500);
  border-radius: 12px;
  background: var(--carbon-850);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  display: grid;
  gap: 1.3rem;
  max-width: 780px;
}
.note-body {
  font-style: italic;
  font-weight: 450;
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  line-height: 1.65;
  color: var(--bone-100);
}
.note-links { display: flex; gap: 0.8rem; flex-wrap: wrap; }

/* ==========================================================================
   28 · CONTACT — channels ledger + mono form on hairlines
   ========================================================================== */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2.4rem, 6vw, 6rem);
  align-items: start;
}
.contact-channels { display: grid; gap: clamp(1.5rem, 3.4vh, 2.3rem); align-content: start; }
.chan-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hair);
}
.chan-num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--ember-500);
  padding-top: 0.45rem;
}
.chan-body { display: grid; gap: 0.45rem; justify-items: start; }
.chan-body p { color: var(--bone-300); font-size: 0.95rem; }
.chan-link {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  color: var(--ember-300);
  margin-top: 0.3rem;
}
.cform { display: grid; align-content: start; }
.cform .k-label { margin-bottom: 1.2rem; }
.cform__row {
  display: grid;
  grid-template-columns: clamp(88px, 11vw, 140px) minmax(0, 1fr);
  align-items: center;
  border-top: 1px solid var(--hair);
}
.cform__row--area { align-items: start; }
.cform__row--area label { padding-top: 1.1rem; }
.cform label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone-500);
}
.cform input,
.cform textarea {
  width: 100%;
  padding: 1.05rem 0 1.05rem 1.1rem;
  border-left: 1px solid var(--hair);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  color: var(--bone-100);
  background: transparent;
  resize: vertical;
  transition: background-color 200ms var(--ease-kiln);
}
.cform input::placeholder,
.cform textarea::placeholder { color: var(--bone-500); }
.cform input:focus,
.cform textarea:focus {
  outline: none;
  background: rgba(244, 239, 231, 0.03);
  border-left-color: var(--ember-500);
}
.cform__foot {
  border-top: 1px solid var(--hair);
  padding-top: 1.4rem;
  display: flex;
  gap: 1.1rem;
  align-items: center;
  flex-wrap: wrap;
}

/* ==========================================================================
   29 · FAQ — paper accordion, clip-path reveal, one open at a time
   ========================================================================== */
.faq-main { padding-top: clamp(1.5rem, 4vh, 3rem); }
.faq-wrap { width: min(100% - calc(var(--gutter) * 2), 880px); }
.faq-list { border-top: 1px solid var(--hair-paper); }
.faq-item { border-bottom: 1px solid var(--hair-paper); }
.faq-q {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: clamp(1rem, 2.5vw, 1.8rem);
  padding: 1.3rem 0;
  cursor: pointer;
  list-style: none;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q__num {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  color: var(--ember-600);
}
.faq-q__t {
  font-family: var(--font-display);
  font-weight: 620;
  font-size: clamp(1.05rem, 1.75vw, 1.45rem);
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--ink-900);
  transition: color 200ms var(--ease-kiln);
}
.faq-chev {
  width: 13px;
  height: 9px;
  align-self: center;
  transition: transform 250ms var(--ease-kiln);
}
.faq-chev path { fill: none; stroke: var(--ink-600); stroke-width: 1.5; }
.faq-item[open] .faq-chev { transform: rotate(180deg); }
.faq-a {
  padding: 0.1rem 0 1.5rem;
  max-width: 62ch;
  color: var(--ink-600);
  font-size: 1rem;
  line-height: 1.7;
}
.faq-a a { color: var(--ember-700); }
html.js .faq-item[open] .faq-a { animation: faq-wipe 250ms var(--ease-kiln) both; }
@keyframes faq-wipe {
  from { clip-path: inset(0 0 100% 0); transform: translateY(-5px); opacity: 0.2; }
  to { clip-path: inset(-8px 0 -8px 0); transform: translateY(0); opacity: 1; }
}
@media (hover: hover) and (pointer: fine) {
  .faq-q:hover .faq-q__t { color: var(--ember-700); }
}

/* ==========================================================================
   30 · LEGAL — reading pages on paper, mono eyebrow headings
   ========================================================================== */
.page-hero--legal { padding-block: clamp(7.5rem, 16vh, 10rem) clamp(1.4rem, 4vh, 2.6rem); }
.legal-main { padding-block: clamp(1.5rem, 4vh, 3rem) clamp(6rem, 12vh, 9rem); }
.legal-prose { max-width: 68ch; }
.legal-prose h2 {
  display: flex;
  align-items: center;
  gap: 0.75em;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-600);
  border-top: 1px solid var(--hair-paper);
  margin: 2.6rem 0 1rem;
  padding-top: 1.6rem;
}
.legal-prose h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.legal-prose h2::before {
  content: "";
  width: 18px;
  height: 1px;
  background: var(--ember-600);
  flex: none;
}
.legal-prose p {
  color: var(--ink-900);
  font-size: 1.0625rem;
  line-height: 1.7;
  margin-bottom: 1.1rem;
}
.legal-prose strong { font-weight: 650; }
.legal-prose em { font-style: italic; }
.legal-prose a {
  color: var(--ember-700);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* ==========================================================================
   31 · 404 — outlined numeral, one line, home link
   ========================================================================== */
.err-hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--carbon-950);
  padding-block: 7rem 4rem;
}
.err-hero .heat-horizon { opacity: 0.4; }
.err-inner {
  position: relative;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 1.3rem;
}
.err-num {
  font-family: var(--font-display);
  font-weight: 280;
  font-size: clamp(9rem, 28vw, 21rem);
  line-height: 0.85;
  letter-spacing: -0.01em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(244, 239, 231, 0.3);
}

/* ==========================================================================
   32 · PAGE RESPONSIVE — <900 stacked, <560 tightened
   ========================================================================== */
@media (max-width: 899.98px) {
  .ws-chip--3, .ws-chip--4, .ws-chip--5, .ws-chip--6 { display: none; }
  .ws-clockchip { top: 4.4rem; }

  .cap-row { grid-template-columns: clamp(2.6rem, 9vw, 3.4rem) minmax(0, 1fr); }
  .cap-quote {
    grid-column: 2;
    justify-self: start;
    text-align: left;
    max-width: none;
    padding-top: 0.1rem;
  }
  .creed-row, .qa-row { grid-template-columns: clamp(3rem, 10vw, 4.4rem) minmax(0, 1fr); }

  .plans { grid-template-columns: 1fr; }

  .recap-grid { grid-template-columns: 1fr; }

  .contact-grid { grid-template-columns: 1fr; }
  .cform { margin-top: 0.5rem; }
}

@media (max-width: 559.98px) {
  .page-hero { padding-top: 7.2rem; }
  .t-display.page-h1 { font-size: clamp(2.3rem, 10.5vw, 2.9rem); }

  .ws-chip { display: none; }
  .ws-clockchip { display: none; }
  .ws-flap { font-size: clamp(3.6rem, 19vw, 4.6rem); }
  .ws-sub { font-size: 0.9rem; }
  .ws-ctas { width: 100%; }
  .ws-ctas .btn { flex: 1; }

  .cform__row { grid-template-columns: 1fr; }
  .cform label { padding-top: 0.95rem; }
  .cform__row--area label { padding-top: 0.95rem; }
  .cform input, .cform textarea { border-left: 0; padding-left: 0; padding-top: 0.5rem; }

  .err-num { font-size: clamp(7rem, 40vw, 10rem); }

  .trial-strip .btn, .plan-wide .btn { width: 100%; }
}

/* ==========================================================================
   33 · PAGE REDUCED-MOTION / NO-JS addenda
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .ws-clockchip i { animation: none; }
}
html.no-js .wshero-stage { padding-block: 6.5rem 3rem; }
html.no-js .ws-chips { display: none; }

/* ==========================================================================
   34 · MENU-OPEN NAV GUARD — the overlay menu is always carbon, so the nav
   chrome must read bone while it is open, even over paper pages/acts.
   (Placed last so it wins over #nav.nav-dark and body.page-paper #nav.)
   ========================================================================== */
html.menu-open #nav,
html.menu-open body.page-paper #nav { color: var(--bone-100); }
html.menu-open #nav::before { opacity: 0; }

/* ============ 34. BRAND MARK RESTORE (original dR monogram) ============ */
.nav__mark { align-items: center; }
.nav__logo { width: 26px; height: 26px; display: block; flex: none; }
.nav__logo--dark { display: none; }
html.nav-dark .nav__logo--light,
body.page-paper .nav__logo--light { display: none; }
html.nav-dark .nav__logo--dark,
body.page-paper .nav__logo--dark { display: block; }
html.menu-open #nav .nav__logo--light { display: block; }
html.menu-open #nav .nav__logo--dark { display: none; }
@media (max-width: 559.98px) { .nav__logo { width: 22px; height: 22px; } }

/* ==========================================================================
   35 · POINTER MICRO-LAYER (v104) — ember scroll hairline + fine-pointer
   sheen sweeps. Transform/opacity only; every hover state is gated so
   touch devices never see it. The tilt/magnet motion itself lives in JS.
   ========================================================================== */
/* scroll progress — fixed at the very top, outside the smoother (JS-injected) */
.scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 310;
  background: linear-gradient(90deg, var(--ember-600), var(--ember-400));
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
  will-change: transform;
}
@media (max-width: 559.98px) { .scroll-progress { display: none; } }
@media (prefers-reduced-motion: reduce) { .scroll-progress { display: none; } }

/* card sheen — one hairline of kiln light crosses the card per hover */
@media (hover: hover) and (pointer: fine) {
  .receipt, .plan { position: relative; overflow: hidden; }
  .receipt::after, .plan::after {
    content: "";
    position: absolute;
    top: -14%; bottom: -14%;
    left: 0;
    width: 34%;
    background: linear-gradient(100deg, transparent 42%, rgba(255, 223, 168, 0.11) 50%, transparent 58%);
    transform: translateX(-160%) skewX(-12deg);
    pointer-events: none;
  }
  .receipt:hover::after, .plan:hover::after {
    transform: translateX(430%) skewX(-12deg);
    transition: transform 450ms var(--ease-kiln);
  }
}

/* the wsend hero needs true depth for its pointer tilt to read as 3D */
.wshero-stage { perspective: 1200px; }

/* ==========================================================================
   36 · V8 "LIVING RIBBON" — contained hero orbs + the three signature
   effects that make the CONTENT live in 3D. There is NO full-viewport
   scene: the only WebGL is the .hero-object orb, composed into each hero
   at a real size/position. KILN tokens, type, nav, footer, paper, ledger
   above are untouched — this restyles the SCENE layer only.
   ========================================================================== */

/* off-screen home for the shared SVG filter primitives */
.dr-fx-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }

/* ---- v9 · the WebGL orb renderer and the velocity/glitch filters are
   gone. Any leftover .hero-object box on a not-yet-rebuilt secondary page
   is hidden so it can never show an empty frame or a broken-filter blank. ---- */
.hero-object { display: none !important; }

/* ---- wsend split composition — hide the left-side drifting chips on
   desktop so they never collide with the cool orb in the left column ---- */
@media (min-width: 900px) {
  .ws-chip--1, .ws-chip--3, .ws-chip--5 { display: none; }
}

/* ---- heroes stack + recentre below 900 ---- */
@media (max-width: 899.98px) {
  .wshero-stage {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: clamp(1rem, 3vh, 2rem);
    padding-top: clamp(4.4rem, 10vh, 6.5rem);
    padding-bottom: clamp(2.4rem, 6vh, 4rem);
  }
  .wshero-object { order: -1; }
  .wshero-object .hero-object { width: min(42vmin, 56vw); }
  .ws-center { justify-items: center; text-align: center; max-width: 640px; }
  .ws-flap { justify-content: center; }
  .ws-ctas, .ws-meta { justify-content: center; }
}

/* ---- narrowest phones (down to 320) — keep the orb + type composed ---- */
@media (max-width: 559.98px) {
  .forge-object-col .hero-object { width: min(44vmin, 52vw); }
  .wshero-object .hero-object { width: min(44vmin, 58vw); }
  .forge-ticker { display: none; }
}
@media (max-width: 360px) {
  .forge-display { font-size: clamp(2.2rem, 11vw, 2.9rem); }
  .forge-object-col .hero-object { width: min(38vmin, 46vw); }
  .wshero-object .hero-object { width: min(40vmin, 52vw); }
}

/* ---- REDUCED MOTION — every effect off, content fully visible. The orb
   renderer never boots, so its empty box is removed and the heroes
   recentre to a clean single-column reading layout. ---- */
@media (prefers-reduced-motion: reduce) {
  .dr-seg { filter: none !important; }
  .hero-object { display: none !important; }
  .forge-scene {
    grid-template-columns: 1fr;
    justify-items: start;
    align-content: center;
  }
  .wshero-stage { grid-template-columns: 1fr; justify-items: center; }
  .ws-center { justify-items: center; text-align: center; }
  .ws-flap, .ws-ctas, .ws-meta { justify-content: center; }
}

/* ---- NO-JS — no renderer, no filters; heroes read as static single
   columns with the orb box removed. ---- */
html.no-js .hero-object { display: none; }
html.no-js .forge-scene { grid-template-columns: 1fr; }
html.no-js .wshero-stage { grid-template-columns: 1fr; place-items: center; }
html.no-js .ws-center { justify-items: center; text-align: center; }
html.no-js .ws-flap, html.no-js .ws-ctas, html.no-js .ws-meta { justify-content: center; }

/* ==========================================================================
   37 · V8 PER-PAGE COMPOSITIONS (builder 2) — a distinct hero axis + a
   contained orb per page, so flipping pages reads as siblings, never clones:
     · pricing  — the ledger header: headline + a restrained coin-seal orb,
                  then plan cards on tilted planes that straighten in (JS).
     · about    — the manifesto: oversized type that bends, one small seal.
     · contact  — the console: a single focused double-bezel panel, calm orb.
     · 404      — a giant bent numeral over one glowing orb.
   Reading pages (faq, legal) stay scene-free for legibility (a whisper of
   grain + one edge glow on faq; a soft lead on legal). Every orb is
   furniture — §36 hides .hero-object under reduced-motion / no-js, and the
   collapse rules at the tail keep each hero composed when it's gone.
   ========================================================================== */

/* ---------- PRICING · the ledger header + tilted plan cards ---------- */
.price-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.16fr) minmax(0, 0.84fr);
  align-items: center;
  gap: clamp(1.6rem, 4vw, 4.4rem);
}
.price-lede { display: grid; gap: clamp(1.1rem, 2.6vh, 1.7rem); justify-items: start; }
.price-coin { justify-self: center; align-self: center; width: 100%; display: grid; place-items: center; }
.price-coin .hero-object { width: min(30vmin, 100%); aspect-ratio: 1; }
.price-rail {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.55em;
  margin-top: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone-500);
}
.price-rail span { color: var(--bone-100); }
.price-rail i { color: var(--ember-500); font-style: normal; }
.price-rail b { color: var(--bone-500); font-weight: 400; }

/* the three plans lean off the ribbon and square up as they enter (JS owns
   the transform + opacity). Perspective is set per-card in JS; here we just
   keep the row from clipping the lean and give the cut a little breathing
   room above. transform-only, GPU-safe. */
.price-main .plans { padding-top: clamp(0.5rem, 1.4vh, 1rem); }
html.scenes-on .plans .plan { will-change: transform, opacity; }

/* ---------- ABOUT · the manifesto — oversized bending type + a seal ---------- */
.about-hero__inner { display: grid; gap: clamp(1.7rem, 4.4vh, 2.9rem); justify-items: start; }
.about-lede { display: grid; gap: clamp(1.1rem, 2.6vh, 1.7rem); justify-items: start; max-width: 20ch; }
.about-h1 { font-size: clamp(3rem, 9vw, 8.2rem); line-height: 0.94; }
.about-hero .page-sub { max-width: 46ch; }
.about-seal { display: flex; align-items: center; gap: clamp(0.9rem, 1.8vw, 1.4rem); }
.about-seal .hero-object { width: clamp(74px, 12vmin, 132px); aspect-ratio: 1; flex: none; }
.about-seal__tag {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone-500);
  max-width: 12ch;
  line-height: 1.5;
}
/* the manifesto prose sits on a shared perspective so its ribbon bend reads
   as real depth, and the first line stays bone-bright as it curves */
.about-manifesto .wrap { perspective: 1500px; }

/* ---------- CONTACT · the console — one focused double-bezel panel ---------- */
.contact-main .wrap { perspective: 1500px; }
.contact-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(1.8rem, 4vw, 4rem);
  align-items: start;
  border: 1px solid var(--hair-strong);
  border-radius: 22px;
  padding: clamp(1.6rem, 3.2vw, 2.8rem);
  background:
    linear-gradient(180deg, rgba(242, 140, 30, 0.05), rgba(242, 140, 30, 0) 34%),
    var(--carbon-850);
  box-shadow: inset 0 1px 0 rgba(244, 239, 231, 0.06);
  transform-style: preserve-3d;
}
.contact-panel__aside { display: grid; gap: clamp(1.4rem, 3vh, 2.2rem); align-content: start; }
.contact-orb {
  width: 100%;
  display: grid;
  place-items: center;
  padding-bottom: clamp(0.4rem, 1.4vh, 1rem);
  border-bottom: 1px dashed var(--hair);
}
.contact-orb .hero-object { width: min(24vmin, 172px); aspect-ratio: 1; }
/* the aside channels drop their extra top border — the panel frames them */
.contact-panel .contact-channels .chan-row:first-of-type { border-top: 0; padding-top: 0; }

/* ---------- FAQ · reading-first — one warm edge glow + glitch-on-open ---------- */
body[data-page="faq"] .page-hero { position: relative; }
body[data-page="faq"] .page-hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: clamp(64px, 12vh, 120px);
  pointer-events: none;
  background: radial-gradient(60% 100% at 50% 100%, rgba(242, 140, 30, 0.16), rgba(242, 140, 30, 0) 72%);
}
body[data-page="faq"] .page-hero__inner { position: relative; z-index: 1; }
/* the seam hairline where the paper hero meets the reading list */
body[data-page="faq"] .faq-main { position: relative; }
body[data-page="faq"] .faq-list { position: relative; }
/* v9 · the glitch-on-open is removed; the accordion reveal is a clean
   height/clip transition (no filter, always crisp). */

/* ---------- LEGAL · pure reading — a soft lead paragraph, nothing else ---------- */
.legal-prose h2:first-child + p {
  font-size: clamp(1.1rem, 1.5vw, 1.26rem);
  line-height: 1.62;
  color: var(--ink-900);
}
.legal-prose h2:first-child + p strong { font-weight: 680; }

/* ---------- 404 · a giant bent numeral over one glowing orb ---------- */
.err-orb {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.err-orb .hero-object {
  width: min(46vmin, 520px);
  aspect-ratio: 1;
  transform: translateY(-9%);
}
.err-inner { position: relative; z-index: 1; }
.err-block { display: grid; justify-items: center; text-align: center; gap: 1.3rem; }
.err-block .err-num { margin-bottom: clamp(-1.2rem, -2vh, -0.4rem); }

/* ==========================================================================
   38 · V8 PER-PAGE RESPONSIVE + REDUCED / NO-JS COLLAPSE (builder 2)
   ========================================================================== */
@media (max-width: 899.98px) {
  .price-hero__grid { grid-template-columns: 1fr; justify-items: start; }
  .price-coin { order: -1; justify-self: center; }
  .price-coin .hero-object { width: min(34vmin, 52vw); }
  .about-lede { max-width: none; }
  .contact-panel { grid-template-columns: 1fr; gap: clamp(1.6rem, 5vh, 2.6rem); }
  .contact-orb { justify-items: center; }
}
@media (max-width: 559.98px) {
  .price-coin .hero-object { width: min(40vmin, 56vw); }
  .price-rail { font-size: 0.66rem; letter-spacing: 0.1em; }
  .about-h1 { font-size: clamp(2.5rem, 12vw, 3.4rem); }
  .about-seal .hero-object { width: clamp(64px, 18vmin, 92px); }
  .contact-panel { padding: clamp(1.2rem, 5vw, 1.6rem); border-radius: 18px; }
  .contact-orb .hero-object { width: min(30vmin, 44vw); }
  .err-orb .hero-object { width: min(60vmin, 74vw); }
}

/* reduced-motion + no-js: §36 already hides every .hero-object; collapse the
   orb columns so each hero stays a clean, intentional single-column read */
@media (prefers-reduced-motion: reduce) {
  .price-hero__grid, .contact-panel { grid-template-columns: 1fr; }
  .price-coin, .contact-orb, .err-orb { display: none; }
  .about-seal { display: none; }
}
html.no-js .price-hero__grid,
html.no-js .contact-panel { grid-template-columns: 1fr; }
html.no-js .price-coin,
html.no-js .contact-orb,
html.no-js .err-orb,
html.no-js .about-seal { display: none; }

/* ==========================================================================
   40 · V9 "CINEMATIC" — the real-imagery system (index + wsend)
   A restrained, film-grade dark-luxury layer built on real photography.
   Rules of the house: every image is object-fit:cover inside an
   overflow-hidden frame with a dark scrim wherever text overlays; images
   drift with a subtle parallax and the hero breathes with a slow ken-burns;
   CONTENT NEVER blurs, glitches, skews or warps. Motion = transform/opacity/
   clip-path only. Everything is visible by default (no-js / reduced-motion).
   ========================================================================== */

/* ---------- core image primitives ---------- */
.cine { position: relative; background: var(--carbon-900); }
.cine-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}
.cine-visual {
  position: absolute;
  left: 0; top: -10%;
  width: 100%; height: 120%;
  object-fit: cover;
  object-position: center;
  display: block;
  will-change: transform;
}
/* emissive subjects photographed on pure black (orb, ribbon) compose as
   LIGHT over carbon — the rectangular frame vanishes, the object floats */
.cine-emissive { mix-blend-mode: screen; }

/* legibility scrims — gradients, never blur */
.scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.scrim--bottom {
  background: linear-gradient(0deg, rgba(7,6,5,0.92) 0%, rgba(7,6,5,0.5) 26%, rgba(7,6,5,0) 58%);
}
.scrim--left {
  background:
    linear-gradient(96deg, rgba(7,6,5,0.94) 0%, rgba(7,6,5,0.78) 26%, rgba(7,6,5,0.34) 55%, rgba(7,6,5,0) 80%),
    linear-gradient(0deg, rgba(7,6,5,0.86) 0%, rgba(7,6,5,0) 46%);
}
.scrim--center {
  background: radial-gradient(70% 62% at 50% 50%, rgba(7,6,5,0) 34%, rgba(7,6,5,0.4) 72%, rgba(7,6,5,0.82) 100%);
}
.scrim--vignette {
  box-shadow: inset 0 0 clamp(80px, 16vw, 240px) rgba(7,6,5,0.7);
  background: linear-gradient(180deg, rgba(7,6,5,0.4) 0%, rgba(7,6,5,0) 22%, rgba(7,6,5,0) 70%, rgba(7,6,5,0.6) 100%);
}

/* masked line helper (SplitText writes .cine-line; overflow-hidden = crisp) */
.cine-line { display: block; will-change: transform; }
.cine-h-em { color: var(--ember-400); text-shadow: 0 0 42px rgba(242,140,30,0.42), 0 0 100px rgba(242,140,30,0.24); }

/* ---------- curved carbon divider (between major shifts) ---------- */
.cine-divider {
  position: relative;
  height: clamp(96px, 13vw, 190px);
  overflow: hidden;
  background: var(--carbon-950);
  z-index: 2;
  clip-path: ellipse(140% 100% at 50% 100%);
  margin-top: clamp(-3.4rem, -7vw, -6rem);
}
.cine-divider .cine-visual { opacity: 0.5; }
.cine-divider::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 130% at 50% 0%, rgba(242,140,30,0.16), rgba(242,140,30,0) 62%),
    linear-gradient(180deg, rgba(7,6,5,0.4), rgba(7,6,5,0) 40%);
  pointer-events: none;
}
.cine-divider__seam {
  position: absolute;
  top: 0; left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,174,66,0.5) 30%, rgba(255,223,168,0.7) 50%, rgba(255,174,66,0.5) 70%, transparent);
}

/* ==========================================================================
   40.1 · CINE HERO — full-bleed real imagery + masked headline
   ========================================================================== */
.cine-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  overflow: hidden;
  background: var(--carbon-950);
}
.cine-hero__media { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.cine-hero__media .cine-visual { top: -12%; height: 124%; }
.cine-hero__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.cine-hero__inner {
  position: relative;
  z-index: 2;
  width: min(100% - calc(var(--gutter) * 2), 1480px);
  margin-inline: auto;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(7rem, 15vh, 10rem) clamp(2.4rem, 7vh, 4.4rem);
  gap: clamp(2rem, 6vh, 4rem);
}
.cine-hero__copy {
  display: grid;
  justify-items: start;
  gap: clamp(1.3rem, 3vh, 2.1rem);
  max-width: min(64rem, 72%);
}
.cine-h {
  font-family: var(--font-display);
  font-weight: 750;
  font-size: clamp(3rem, 8.4vw, 8.4rem);
  line-height: 0.92;
  letter-spacing: -0.032em;
  color: var(--bone-100);
  text-wrap: balance;
}
.cine-hero__sub {
  color: var(--bone-300);
  font-size: clamp(1rem, 1.15vw, 1.16rem);
  line-height: 1.68;
  max-width: 48ch;
}
.cine-hero__ctas { display: flex; gap: 0.85rem; flex-wrap: wrap; }
.cine-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.8rem, 2.2vw, 1.9rem);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bone-500);
}
.cine-hero__meta span { display: inline-flex; align-items: center; gap: 0.55em; white-space: nowrap; }
.cine-hero__meta b { font-weight: 500; color: var(--ember-300); }

/* night-shift variant (wsend) — a live clock chip rides the top-right */
.cine-hero--night .cine-h { font-size: clamp(2.9rem, 8vw, 7.8rem); }
.cine-clock {
  position: absolute;
  z-index: 2;
  top: clamp(5rem, 11vh, 7rem);
  right: var(--gutter);
  display: inline-flex;
  align-items: center;
  gap: 0.65em;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bone-300);
  border: 1px solid var(--hair-strong);
  border-radius: 9px;
  padding: 0.6em 0.95em;
  background: rgba(11, 9, 8, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.cine-clock i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ember-400);
  animation: ws-pulse 2.2s var(--ease-kiln-io) infinite;
}
.cine-clock b { font-weight: 500; color: var(--ember-200); }

/* ==========================================================================
   40.2 · CINE STATEMENT — quiet editorial lines (reveal)
   ========================================================================== */
.cine-statement {
  position: relative;
  background: var(--carbon-900);
  padding-block: clamp(7rem, 16vw, 14rem);
}
.cine-statement__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: end;
}
.cine-statement__lines { display: grid; gap: clamp(1.4rem, 3.2vh, 2.4rem); max-width: 20em; }
.cine-statement__lines .t-statement { color: var(--bone-100); }
.cine-statement__lines .t-accent { color: var(--ember-300); }
.cine-statement__note {
  max-width: 22ch;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  line-height: 1.9;
  text-transform: uppercase;
  color: var(--bone-500);
  text-align: right;
  border-right: 1px solid var(--ember-600);
  padding-right: 1.1rem;
}

/* ==========================================================================
   40.3 · CINE MACHINE — the orb object + copy beside it
   ========================================================================== */
.cine-machine {
  position: relative;
  overflow: hidden;
  background: var(--carbon-950);
  padding-block: clamp(6rem, 13vw, 11rem);
}
.cine-machine__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 6.5rem);
}
.cine-machine__copy { display: grid; gap: clamp(1.1rem, 2.6vh, 1.8rem); align-content: center; max-width: 32ch; }
.cine-machine__copy .t-body { max-width: 42ch; }
/* section titles read a step below the hero so they never wrap into a
   ragged 6-line column — a confident 3–4 line editorial headline */
.cine-machine__copy .t-title,
.cine-demo__copy .t-title {
  font-size: clamp(2rem, 3.8vw, 3.9rem);
  line-height: 1.03;
  letter-spacing: -0.022em;
  max-width: 15ch;
}
.cine-machine__object {
  position: relative;
  aspect-ratio: 1;
  width: min(100%, 62vh);
  justify-self: center;
  display: grid;
  place-items: center;
}
.cine-machine__glow {
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(242,140,30,0.24), rgba(242,140,30,0.05) 52%, rgba(242,140,30,0) 70%);
  pointer-events: none;
}
.cine-machine__orb {
  position: relative;
  z-index: 1;
  width: 100%; height: 100%;
  object-fit: contain;
  mix-blend-mode: screen;
  will-change: transform;
  /* the photograph's near-black ground would screen a faint rectangle over
     carbon — fade the corners so only the molten sphere floats */
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 60%, rgba(0,0,0,0) 77%);
  mask-image: radial-gradient(circle at 50% 50%, #000 60%, rgba(0,0,0,0) 77%);
}

/* ==========================================================================
   40.4 · CINE BAND — full-bleed cinematic band + one overlaid line
   ========================================================================== */
.cine-band {
  position: relative;
  height: clamp(380px, 62vh, 680px);
  overflow: hidden;
  background: var(--carbon-950);
  display: flex;
}
.cine-band__inner {
  position: relative;
  z-index: 2;
  width: min(100% - calc(var(--gutter) * 2), 1480px);
  margin-inline: auto;
  align-self: flex-end;
  display: grid;
  justify-items: start;
  gap: 1rem;
  padding-block: clamp(2.4rem, 6vh, 4rem);
}
.cine-band__line {
  font-family: var(--font-display);
  font-weight: 720;
  font-size: clamp(2.2rem, 6vw, 5rem);
  line-height: 1.0;
  letter-spacing: -0.028em;
  color: var(--bone-100);
  max-width: 16ch;
  text-wrap: balance;
}
.cine-band--center { text-align: center; }
.cine-band--center .cine-band__inner { align-self: center; justify-items: center; }
.cine-band--center .cine-band__line { max-width: 20ch; }

/* ==========================================================================
   40.5 · CINE DEMO — CSS phone thread on a carbon-textured ground
   ========================================================================== */
.cine-demo {
  position: relative;
  overflow: hidden;
  background: var(--carbon-900);
  padding-block: clamp(6rem, 13vw, 11rem);
}
.cine-demo__tex { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.cine-demo__tex .cine-visual { opacity: 0.22; }
.cine-demo__tex::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--carbon-900), rgba(11,9,8,0.65) 45%, var(--carbon-900));
}
.cine-demo__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 6rem);
}
.cine-demo__copy { display: grid; gap: clamp(1.1rem, 2.6vh, 1.7rem); align-content: center; max-width: 32ch; }
.cine-demo__copy .t-body { max-width: 40ch; }
.cine-phone { position: relative; display: grid; place-items: center; }
.cine-phone .phone-halo {
  position: absolute;
  width: 128%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(242,140,30,0.16), rgba(242,140,30,0) 68%);
  pointer-events: none;
}

/* ==========================================================================
   40.6 · CINE BUILD — 3-up "what we build" (reveal, stagger)
   ========================================================================== */
.cine-build {
  position: relative;
  background: var(--carbon-950);
  padding-block: clamp(5rem, 11vw, 9rem) clamp(6rem, 14vw, 11rem);
}
.cine-build__head { display: grid; gap: 1.1rem; margin-bottom: clamp(2.4rem, 6vh, 4rem); max-width: 40ch; }
.cine-build__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
}
.cine-card {
  position: relative;
  display: grid;
  gap: 0.9rem;
  align-content: start;
  padding: clamp(1.5rem, 2.4vw, 2.2rem);
  border: 1px solid var(--hair);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(244,239,231,0.028), rgba(244,239,231,0) 40%), var(--carbon-850);
  box-shadow: inset 0 1px 0 rgba(244,239,231,0.05);
  transition: transform 320ms var(--ease-kiln), border-color 320ms var(--ease-kiln), box-shadow 320ms var(--ease-kiln);
}
.cine-card__tick {
  width: 26px; height: 2px;
  background: var(--ember-500);
  border-radius: 2px;
}
.cine-card h3 { color: var(--bone-100); max-width: 14ch; }
.cine-card p { color: var(--bone-300); font-size: 0.98rem; line-height: 1.62; }
@media (hover: hover) and (pointer: fine) {
  .cine-card:hover {
    transform: translateY(-4px);
    border-color: var(--hair-strong);
    box-shadow: inset 0 1px 0 rgba(244,239,231,0.06), 0 26px 50px -28px rgba(0,0,0,0.9);
  }
}

/* ==========================================================================
   40.7 · CINE CLOSE — the always-on ribbon centerpiece
   ========================================================================== */
.cine-close {
  position: relative;
  overflow: hidden;
  background: var(--carbon-950);
  min-height: 92svh;
  display: flex;
  align-items: center;
  padding-block: clamp(6rem, 14vh, 10rem);
}
.cine-close__ribbon {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.cine-close__ribbon .cine-visual {
  position: relative;
  top: 0;
  width: min(1200px, 108%);
  height: auto;
  max-width: none;
  object-fit: contain;
  opacity: 0.9;
}
.cine-close__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(58% 58% at 50% 50%, rgba(7,6,5,0.72) 0%, rgba(7,6,5,0.32) 44%, rgba(7,6,5,0) 72%);
}
.cine-close__inner {
  position: relative;
  z-index: 2;
  width: min(100% - calc(var(--gutter) * 2), 1480px);
  margin-inline: auto;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: clamp(1.8rem, 4.5vh, 3rem);
}
.cine-close__inner .t-display { font-size: clamp(3rem, 9vw, 8.4rem); }
.cine-close--night { background: var(--carbon-950); }
.cine-close--night .heat-horizon { opacity: 0.78; height: 82%; }

/* ==========================================================================
   40.8 · V9 RESPONSIVE (down to 320) + reduced-motion + no-js
   ========================================================================== */
@media (max-width: 899.98px) {
  .cine-hero__copy { max-width: 100%; }
  .cine-hero__inner { padding-block: clamp(6rem, 14vh, 8rem) clamp(2rem, 6vh, 3.4rem); }
  .cine-hero__scrim { background: linear-gradient(0deg, rgba(7,6,5,0.94) 8%, rgba(7,6,5,0.5) 42%, rgba(7,6,5,0.2) 100%) !important; }
  .cine-clock { top: clamp(4.4rem, 9vh, 5.6rem); }

  .cine-statement__inner { grid-template-columns: 1fr; align-items: start; gap: clamp(1.8rem, 6vh, 3rem); }
  .cine-statement__note { text-align: left; border-right: 0; border-left: 1px solid var(--ember-600); padding-right: 0; padding-left: 1rem; }

  .cine-machine__grid { grid-template-columns: 1fr; gap: clamp(1.8rem, 6vh, 3rem); }
  .cine-machine__object { order: -1; width: min(70vw, 46vh); }
  .cine-machine__copy { max-width: none; }

  .cine-demo__grid { grid-template-columns: 1fr; gap: clamp(1.8rem, 6vh, 3rem); }
  .cine-phone { order: -1; }
  .cine-demo__copy { max-width: none; }
  .cine-demo__copy .t-body { display: block; }

  .cine-build__grid { grid-template-columns: 1fr; gap: 0.9rem; }

  .cine-band__line { font-size: clamp(2rem, 8vw, 3.4rem); }
}

@media (max-width: 559.98px) {
  .cine-h { font-size: clamp(2.7rem, 13vw, 3.6rem); letter-spacing: -0.028em; }
  .cine-hero--night .cine-h { font-size: clamp(2.5rem, 12vw, 3.3rem); }
  .cine-hero__sub { font-size: 0.96rem; }
  .cine-hero__ctas { width: 100%; }
  .cine-hero__ctas .btn { flex: 1; }
  .cine-clock { font-size: 0.58rem; padding: 0.5em 0.75em; }
  .cine-band { height: clamp(320px, 56vh, 460px); }
  .cine-band__line { font-size: clamp(1.9rem, 9vw, 2.8rem); }
  .cine-close__inner .t-display { font-size: clamp(2.6rem, 12vw, 3.4rem); }
  .cine-close__ribbon .cine-visual { width: 128%; }
}

@media (max-width: 360px) {
  .cine-h { font-size: clamp(2.3rem, 12.5vw, 3rem); }
  .cine-hero__meta { font-size: 0.56rem; gap: 0.7rem; }
}

/* short landscape phones: never trap the hero copy taller than the screen */
@media (max-height: 560px) and (min-width: 560px) {
  .cine-hero { min-height: 620px; }
}

/* reduced motion — every layer static, all imagery fully visible & crisp */
@media (prefers-reduced-motion: reduce) {
  .cine-visual, .cine-machine__orb { transform: none !important; }
  .cine-hero__media { opacity: 1 !important; visibility: visible !important; }
  .cine-clock i { animation: none; }
  .cine-divider { clip-path: none; }
}

/* no-js — readable static document, images shown, sane hero height */
html.no-js .cine-hero { min-height: 0; }
html.no-js .cine-hero__inner { padding-block: clamp(7rem, 18vh, 11rem) clamp(3rem, 8vh, 5rem); }
html.no-js .cine-hero__media { position: absolute; }
html.no-js .cine-divider { clip-path: none; }

/* ==========================================================================
   41 · V9 CINEMATIC — SECONDARY PAGES (builder 2)
   pricing · about · contact · faq · 404 each get an art-directed composition
   on the same real-imagery engine: a cine hero (image cover + scrim + masked
   headline via the shared hero-intro), reveal/parallax/ken-burns beats, and a
   cine close. Legal pages stay pure paper reading (no imagery) — handled by
   §30. Every image is object-fit:cover in an overflow frame with a dark scrim
   where text sits; content never blurs, glitches, skews or warps.
   ========================================================================== */

/* ---------- page-scale hero heights (shorter than the full index hero) ---- */
/* about  → tall & quiet (full).  contact → mid crop.  pricing/faq → thin band */
.cine-hero--page { min-height: clamp(460px, 66vh, 700px); }
.cine-hero--band { min-height: clamp(360px, 52vh, 540px); }

/* band + mid heroes anchor their copy low, like a film title card */
.cine-hero--band .cine-hero__inner,
.cine-hero--page .cine-hero__inner { justify-content: flex-end; }

/* a step down in display size so short bands never crowd the nav */
.cine-hero--page .cine-h { font-size: clamp(2.7rem, 6.6vw, 5.8rem); }
.cine-hero--band .cine-h { font-size: clamp(2.4rem, 5.8vw, 4.8rem); }

/* pricing rail lives in the hero meta row — bone figures, ember dots */
.cine-hero__meta b.rate { color: var(--bone-100); font-weight: 600; }
.cine-hero__meta .sep { color: var(--ember-500); }

/* ---------- ABOUT · manifesto prose sits on carbon (no perspective bend) --- */
/* §27 owns .about-prose / .creed-*; here we only relax the retired 3D bend */
.about-manifesto .wrap { perspective: none; }
.about-manifesto { padding-top: clamp(4rem, 9vh, 6.5rem); }

/* ---------- CINE FIGURE · a contained emissive centerpiece + one line ------ */
/* used by about for its ribbon beat: the object floats as light over carbon */
.cine-figure {
  position: relative;
  overflow: hidden;
  background: var(--carbon-950);
  min-height: clamp(360px, 56vh, 620px);
  display: flex;
  align-items: center;
}
.cine-figure__vis {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.cine-figure__vis .cine-visual {
  position: relative;
  top: 0; left: 0;
  width: min(1080px, 112%);
  height: auto;
  max-width: none;
  object-fit: contain;
  opacity: 0.86;
  /* the photograph's near-black ground would screen a faint rectangle over
     carbon — fade the frame edges hard so only the chrome ribbon floats as light */
  -webkit-mask-image: radial-gradient(112% 74% at 50% 50%, #000 42%, rgba(0,0,0,0) 76%);
  mask-image: radial-gradient(112% 74% at 50% 50%, #000 42%, rgba(0,0,0,0) 76%);
}
.cine-figure__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(56% 60% at 50% 50%, rgba(7,6,5,0.74) 0%, rgba(7,6,5,0.34) 44%, rgba(7,6,5,0) 74%);
}
.cine-figure__inner {
  position: relative;
  z-index: 2;
  width: min(100% - calc(var(--gutter) * 2), 1480px);
  margin-inline: auto;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: clamp(1rem, 2.6vh, 1.6rem);
}
.cine-figure__inner .k-label { justify-self: center; }

/* ---------- CINE CLOSE · accent variant (pricing) — a small ribbon glow ---- */
.cine-close--accent {
  min-height: auto;
  padding-block: clamp(6rem, 14vh, 10rem);
}
.cine-close--accent .cine-close__ribbon .cine-visual {
  width: min(600px, 74%);
  opacity: 0.62;
}
.cine-close--accent .cine-close__scrim {
  background: radial-gradient(56% 56% at 50% 50%, rgba(7,6,5,0.6) 0%, rgba(7,6,5,0.2) 46%, rgba(7,6,5,0) 72%);
}

/* ---------- CONTACT · the console panel loses its orb; the calm crop is the
   hero now, so the panel reads as a clean double-bezel of channels + form --- */
.contact-panel { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); }
.contact-panel .contact-channels { align-content: start; }
.contact-panel__aside { gap: clamp(1.3rem, 3vh, 2rem); }

/* ---------- FAQ · dark cine band hero, then the paper accordion. The nav
   flips to ink over the paper section via the .on-paper trigger (JS), and its
   dark scrim keeps bone links legible under no-js. ------------------------- */
body[data-page="faq"] .faq-main { padding-top: clamp(2.4rem, 6vh, 4rem); }
/* a hairline seam of ember where the dark band meets the paper reading */
.faq-main.on-paper { position: relative; }

/* ---------- 404 · the orb is a real emissive photograph now (not the retired
   WebGL box). It floats as light behind the giant numeral. ----------------- */
.err-orb .cine-orb {
  width: min(52vmin, 560px);
  aspect-ratio: 1;
  object-fit: contain;
  mix-blend-mode: screen;
  transform: translateY(-8%);
  will-change: transform;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 56%, rgba(0,0,0,0) 76%);
  mask-image: radial-gradient(circle at 50% 50%, #000 56%, rgba(0,0,0,0) 76%);
}

/* ==========================================================================
   41.1 · SECONDARY RESPONSIVE (down to 320)
   ========================================================================== */
@media (max-width: 899.98px) {
  .cine-figure { min-height: clamp(320px, 48vh, 460px); }
  .cine-figure__vis .cine-visual { width: min(760px, 128%); }
  .contact-panel { grid-template-columns: 1fr; gap: clamp(1.6rem, 5vh, 2.6rem); }
}
@media (max-width: 559.98px) {
  .cine-hero--page .cine-h { font-size: clamp(2.4rem, 12vw, 3.2rem); }
  .cine-hero--band .cine-h { font-size: clamp(2.2rem, 11vw, 3rem); }
  .cine-figure__vis .cine-visual { width: min(560px, 132%); }
  .err-orb .cine-orb { width: min(64vmin, 78vw); }
}

/* ==========================================================================
   41.2 · SECONDARY REDUCED-MOTION / NO-JS — imagery stays visible & crisp
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .cine-figure__vis .cine-visual { transform: none !important; }
  /* the 404 orb is real imagery — override §38's collapse so it stays shown */
  .err-orb { display: grid !important; }
  .err-orb .cine-orb { transform: translateY(-8%) !important; }
}
html.no-js .cine-figure { min-height: 0; padding-block: clamp(4rem, 10vh, 7rem); }
html.no-js .err-orb { display: grid; }

/* ==========================================================================
   42 · V11 "IMMERSION" — WEBGL CHAPTER JOURNEY (index + wsend)
   One fixed full-viewport canvas owns every visual; crisp HTML chapter text
   is overlaid and choreographed with the canvas cross-dissolve. Text is
   NEVER blurred/filtered — legibility comes from CSS scrims + the shader
   vignette. Reduced-motion / no-js fall back to a static, readable document.
   ========================================================================== */

/* the canvas — behind all content, decorative, dark before first paint */
#gl {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: block;
  pointer-events: none;
  background: var(--carbon-900);
}
.webgl-fallback #gl { display: none; }

/* the crisp chapter overlay — fixed, above the canvas, click-through */
.chapters {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  will-change: opacity;
}
.ch {
  position: absolute;
  inset: 0;
  display: grid;
  padding: clamp(5rem, 12vh, 8rem) var(--gutter) clamp(2.4rem, 8vh, 5rem);
  opacity: 1;                 /* fallback / reduced default; JS drives in motion */
  pointer-events: none;
  will-change: opacity, transform;
}
.ch__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.webgl-live .ch__bg { display: none; }   /* the canvas owns the imagery */
.ch__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(132% 96% at 50% 50%, rgba(7,6,5,0.66), rgba(7,6,5,0.32) 42%, rgba(7,6,5,0.08) 68%, transparent 82%);
}
.ch__scrim--left {
  background:
    linear-gradient(92deg, rgba(7,6,5,0.82), rgba(7,6,5,0.42) 40%, rgba(7,6,5,0.06) 68%, transparent 82%),
    linear-gradient(0deg, rgba(7,6,5,0.58), rgba(7,6,5,0.08) 40%, transparent 60%);
}
.ch__scrim--close {
  background: radial-gradient(122% 104% at 50% 60%, rgba(7,6,5,0.74), rgba(7,6,5,0.34) 46%, rgba(7,6,5,0.05) 74%, transparent 86%);
}
.ch__inner {
  position: relative;
  z-index: 2;
  display: grid;
  gap: clamp(1rem, 2.4vh, 1.7rem);
  pointer-events: none;
}
.ch__inner a,
.ch__inner .btn { pointer-events: auto; }

/* alignment per chapter kind */
.ch--hero { align-items: end; justify-items: start; }
.ch--hero .ch__inner { max-width: min(100%, 60ch); justify-items: start; text-align: left; }
.ch--center { place-items: center; }
.ch--center .ch__inner { max-width: min(100%, 60ch); justify-items: center; text-align: center; }
.ch--close { place-items: center; }
.ch--close .ch__inner { max-width: min(100%, 46ch); justify-items: center; text-align: center; }

/* chapter type — crisp, brand display scale */
.ch__title {
  font-family: var(--font-display);
  font-weight: 720;
  font-size: clamp(2.1rem, 5.4vw, 4.7rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--bone-100);
  text-wrap: balance;
}
.ch__title--hero {
  font-weight: 760;
  font-size: clamp(3rem, 9.2vw, 8.4rem);
  line-height: 0.94;
  letter-spacing: -0.03em;
}
.ch__title--demo { font-size: clamp(1.9rem, 4vw, 3.5rem); line-height: 1.04; }
.ch__title--flow { display: flex; flex-wrap: wrap; gap: 0.2em 0.5em; align-items: baseline; justify-content: center; }
.ch__title--flow em { color: var(--ember-400); font-style: normal; font-weight: 400; }
.ch__em { color: var(--ember-300); }
.ch__sub {
  font-family: var(--font-body);
  font-size: clamp(0.98rem, 1.15vw, 1.15rem);
  line-height: 1.62;
  color: var(--bone-200, #d8cfc0);
  max-width: 54ch;
}
.ch--center .ch__sub, .ch--close .ch__sub { margin-inline: auto; }
.ch__ctas { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 0.4rem; }
.ch--center .ch__ctas, .ch--close .ch__ctas { justify-content: center; }

/* the phone-demo chapter — crisp HTML over a dark canvas frame */
.ch--demo { place-items: center; }
.ch--demo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(7,6,5,0.66), rgba(7,6,5,0.28) 52%, rgba(7,6,5,0.12) 100%);
}
.ch__inner--demo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.8rem, 5vw, 5rem);
  align-items: center;
  width: min(100%, 1180px);
  pointer-events: none;
}
.ch-demo__copy { display: grid; gap: clamp(0.9rem, 2vh, 1.4rem); max-width: 46ch; }
.ch-demo__copy .ch__sub { max-width: 44ch; }

/* bubbles land on scrub (motion only); static modes show them all */
.scenes-on .ch[data-demo] .bubble,
.scenes-on .ch[data-demo] .order-chip {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.34s var(--ease-kiln), transform 0.34s var(--ease-kiln);
}
.scenes-on .ch[data-demo] .bubble.is-in,
.scenes-on .ch[data-demo] .order-chip.is-in { opacity: 1; transform: none; }

/* the tall, transparent scroll track that drives the canvas + chapters */
.journey-spacer {
  --ch-span: 116vh;
  height: calc(var(--n, 6) * var(--ch-span));
  width: 100%;
  pointer-events: none;
}

/* ---- responsive ---- */
@media (max-width: 899.98px) {
  .journey-spacer { --ch-span: 110vh; }
  .ch { padding-top: clamp(4.6rem, 12vh, 7rem); }
  .ch__inner--demo { grid-template-columns: 1fr; justify-items: center; gap: clamp(1.4rem, 4vh, 2.4rem); }
  .ch-demo__copy { max-width: 100%; justify-items: center; text-align: center; }
  .ch-demo__copy .ch__sub { display: none; }        /* keep the phone the hero on small screens */
  .ch--demo .ch__inner--demo { align-content: center; }
}
@media (max-width: 559.98px) {
  .ch { padding-inline: var(--gutter); }
  .ch__title--hero { font-size: clamp(2.7rem, 13vw, 3.6rem); }
  .ch__title { font-size: clamp(1.9rem, 8.5vw, 2.7rem); }
  .ch__sub { font-size: 0.92rem; max-width: 100%; }
  .ch--hero .ch__inner { max-width: 100%; }
}
@media (max-width: 360px) {
  .ch__title--hero { font-size: clamp(2.3rem, 13vw, 2.9rem); }
  .ch__ctas .btn { flex: 1 1 auto; }
}

/* ---- reduced-motion + no-js: static, readable, imagery + crisp text ---- */
@media (prefers-reduced-motion: reduce) {
  #gl { display: none !important; }
  .chapters { position: static; overflow: visible; }
  .ch {
    position: relative;
    inset: auto;
    min-height: 100vh;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    place-items: center;
  }
  .ch__bg { display: block !important; }
  .journey-spacer { display: none; }
}
html.no-js #gl { display: none; }
html.no-js .chapters { position: static; overflow: visible; }
html.no-js .ch {
  position: relative;
  inset: auto;
  min-height: 100vh;
  opacity: 1;
  visibility: visible;
  place-items: center;
}
html.no-js .ch__bg { display: block; }
html.no-js .journey-spacer { display: none; }

/* ==========================================================================
   43 · V11 "IMMERSION" — LIGHTER WEBGL HERO (secondary pages · builder 2)
   pricing / about / contact / faq / 404 each get ONE contained WebGL hero
   chapter: a single dissolve-in of the page's hero image with the engine's
   idle ripple, then normal crisp DOM content below. webgl.js reads two hidden
   .ch[data-ch] texture carriers (same image → a stable, breathing still); page
   scroll never drives a chapter change here, so the overlaid text stays
   rock-crisp. A static <img> covers the canvas until it is live; in
   reduced-motion / no-webgl the <img> is all that shows — imagery + crisp text.
   ========================================================================== */

/* engine texture carriers are data only — never rendered, in any mode */
.webgl-src,
.webgl-src .ch { display: none !important; }

/* contained canvas: fills the hero media box, sits behind the scrim + text.
   Beats the journeys' global `#gl { position:fixed }` by specificity. */
.cine-hero--webgl .cine-hero__media #gl,
.err-hero__media #gl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: block;
  pointer-events: none;
  background: var(--carbon-950);
}

/* static fallback image — DOM order stacks it above the canvas, so it shows
   instantly and the live canvas (same frame) takes over seamlessly. */
.cine-hero__fallback,
.err-hero__media .whero__fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.webgl-live .cine-hero__fallback,
.webgl-live .err-hero__media .whero__fallback { display: none; }

/* 404 — a contained WebGL orb hero (no .cine-hero, so it owns its dissolve-in) */
.err-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
html.js .err-hero__media { animation: whero-fade 1.25s var(--ease-kiln) both; }
@keyframes whero-fade { from { opacity: 0; } to { opacity: 1; } }
/* seat the numeral + eyebrow + copy over the bright orb core (legibility
   first); the orb stays vivid at the edges. Above the canvas, below .err-inner. */
.err-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(130% 82% at 50% 64%, rgba(7, 6, 5, 0.66), rgba(7, 6, 5, 0.24) 46%, rgba(7, 6, 5, 0.04) 72%, transparent 84%);
}

/* reduced-motion / no-js: engine never boots, the CSS dissolve is skipped,
   the static <img> stays visible and the text is crisp. */
@media (prefers-reduced-motion: reduce) {
  html.js .err-hero__media { animation: none; }
}
html.no-js .cine-hero__fallback,
html.no-js .err-hero__media .whero__fallback { display: block; }