/* ==========================================================================
   Tom Mackellar — Motion Design portfolio
   Stage 05 build · "Title Sequence" direction (design-spec.md, 2026-07-21)
   Tokens are verbatim from stages/04_design/output/design-spec.md §1–§3.
   ========================================================================== */

/* ---------- 1. Colour tokens ---------- */
:root {
  /* paper / surface */
  --color-paper:      #EFEDE6;  /* bone — base */
  --color-paper-2:    #E4E0D6;  /* deeper oat — alternating bands, hairline fields */
  --color-stage:      #141109;  /* warm near-black — the "video stage" + footer + end-card */

  /* ink / text */
  --color-ink:        #17140F;  /* warm near-black espresso — primary text on paper */
  --color-muted:      #655F52;  /* warm grey — secondary text on paper */
  --color-hairline:   #D6D1C4;  /* rules/borders on paper */

  /* on the dark stage */
  --color-on-stage:       #EFEDE6;
  --color-on-stage-muted: #A8A192;
  --color-hairline-stage: rgba(239,237,230,0.16);

  /* accent — flare vermilion, rationed */
  --color-accent:      #E8390B;
  --color-accent-deep: #B72806;
  --color-accent-ink:  #FBF7EF;

  /* translucent scrims/glows — same base hues as above, alpha-only variants,
     named so no rule improvises a literal rgba() (anti-slop §3 / gate 48) */
  --color-scrim-paper: rgba(239, 237, 230, 0.92); /* = --color-paper @ 92%, scrolled nav */
  --color-scrim-stage: rgba(20, 17, 9, 0.88);      /* = --color-stage @ 88%, scrolled nav over stage */
  --color-glow-1:       rgba(226, 162, 75, 0.16);  /* warm amber hero glow, inner */
  --color-glow-2:       rgba(226, 162, 75, 0.07);  /* warm amber hero glow, outer */

  /* ---------- 2. Type tokens — single family, sizing-only ---------- */
  --font-display: "Bricolage Grotesque", "Arial Narrow", system-ui, sans-serif;
  --font-body:    "Bricolage Grotesque", system-ui, sans-serif;
  --font-ui:      "Bricolage Grotesque", system-ui, sans-serif; /* labels/timecode */

  --text-display-xl: clamp(3.25rem, 8.5vw, 8rem);
  --text-display-l:  clamp(2.25rem, 5.5vw, 4.5rem);
  --text-display-m:  clamp(1.75rem, 3.4vw, 2.6rem);
  --text-title:      1.375rem;
  --text-lede:       clamp(1.125rem, 1.6vw, 1.3rem);
  --text-body:       1.0625rem;
  --text-label:      0.8125rem;
  --text-micro:      0.75rem;

  --wt-reg: 400; --wt-med: 500; --wt-semi: 600; --wt-bold: 700; --wt-black: 800;

  /* ---------- 3. Spacing, layout, motion ---------- */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px; --space-10:128px;
  --space-11:160px; --space-12:224px;
  --measure: 60ch;
  --container: 1216px;
  --rail: 88px;
  --ease-out: cubic-bezier(0.22,1,0.36,1);
  --ease-in-out: cubic-bezier(0.65,0,0.35,1);
  --ease-in: cubic-bezier(0.55,0,1,0.45);
  --dur-fast:180ms; --dur-mid:420ms; --dur-slow:640ms;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 {
  font-family: var(--font-display);
  font-style: normal;               /* no italic headings, ever */
  overflow-wrap: anywhere;
  min-width: 0;
  margin: 0;
}
p { margin: 0 0 var(--space-4); max-width: var(--measure); }
img, video { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }
a { color: inherit; }

::selection { background: var(--color-accent-deep); color: var(--color-accent-ink); }

/* Focus — instant, flare, never faded (anti-slop §8) */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  transition: none;
}

.skip-link {
  position: absolute;
  left: var(--space-4); top: -100px;
  z-index: 200;
  background: var(--color-ink); color: var(--color-paper);
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-ui); font-size: var(--text-label);
  font-weight: var(--wt-semi); letter-spacing: .09em; text-transform: uppercase;
  text-decoration: none;
}
.skip-link:focus-visible { top: var(--space-4); }

/* ---------- Type utilities ---------- */
.label {
  font-family: var(--font-ui);
  font-size: var(--text-label);
  font-weight: var(--wt-semi);
  letter-spacing: .09em;
  text-transform: uppercase;
  font-feature-settings: "tnum" 1;
}
.eyebrow, .cut-mark {
  font-family: var(--font-ui);
  font-size: var(--text-label);
  font-weight: var(--wt-semi);
  letter-spacing: .09em;
  text-transform: uppercase;
  font-feature-settings: "tnum" 1;
  color: var(--color-muted);
  display: block;
  margin-bottom: var(--space-4);
}
.on-stage .eyebrow, .on-stage .cut-mark { color: var(--color-on-stage-muted); }
.cut-mark { color: var(--color-accent-deep); }
.on-stage .cut-mark { color: var(--color-accent); } /* large-ish UI mark, ≥3:1 on stage */

.display-l {
  font-size: var(--text-display-l);
  font-weight: var(--wt-bold);
  line-height: .98;
  letter-spacing: -.02em;
}
.display-m {
  font-size: var(--text-display-m);
  font-weight: var(--wt-bold);
  line-height: 1.02;
}
.title { font-size: var(--text-title); font-weight: var(--wt-semi); line-height: 1.15; }
.lede { font-size: var(--text-lede); line-height: 1.5; }
.muted { color: var(--color-muted); }
.on-stage .muted { color: var(--color-on-stage-muted); }
.micro { font-size: var(--text-micro); font-weight: var(--wt-med); }

/* flare underline — the rationed accent phrase device */
.u-flare {
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
}

/* ---------- Layout ---------- */
.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-5);
}
@media (min-width: 1024px) {
  .container { padding-inline-start: calc(var(--rail) + var(--space-5)); }
}

/* Section archetypes — deliberately varied vertical rhythm (anti-slop §11) */
.band-statement { padding-block: var(--space-12); }
.band-split     { padding-block: var(--space-10); }
.band-index     { padding-block: var(--space-9); }
.band-stage     { padding-block: var(--space-10); }
@media (max-width: 767px) {
  .band-statement { padding-block: var(--space-10); }
  .band-split     { padding-block: var(--space-9); }
  .band-index     { padding-block: var(--space-8); }
  .band-stage     { padding-block: var(--space-8); }
}

.on-stage {
  background: var(--color-stage);
  color: var(--color-on-stage);
}
.band-alt { background: var(--color-paper-2); }

/* Asymmetric splits — 7/5 or 8/4, never 3 equal (anti-slop §4) */
.split {
  display: grid;
  gap: var(--space-7) var(--space-5);
  align-items: center;
}
@media (min-width: 768px) {
  .split-75          { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .split-75.mirrored { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .split-84          { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
  .split-48          { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
}
.split .rule + h2 { margin-top: var(--space-5); }
.mb-5 { margin-bottom: var(--space-5); }

hr.rule {
  border: 0;
  border-top: 1px solid var(--color-hairline);
  margin: 0;
}

/* ---------- Header / nav ---------- */
.site-head {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background-color var(--dur-mid) var(--ease-out),
              color var(--dur-mid) var(--ease-out),
              border-color var(--dur-mid) var(--ease-out);
  border-bottom: 1px solid transparent;
  color: var(--color-ink);
}
.site-head .head-inner {
  max-width: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-4) var(--space-5);
}
@media (min-width: 1024px) {
  .site-head .head-inner { padding-inline-start: calc(var(--rail) + var(--space-5)); }
}
.site-head.is-scrolled {
  background: var(--color-scrim-paper);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--color-hairline);
}
.site-head.is-over-stage {
  color: var(--color-on-stage);
}
.site-head.is-over-stage.is-scrolled {
  background: var(--color-scrim-stage);
  border-bottom-color: var(--color-hairline-stage);
}

.wordmark {
  font-family: var(--font-display);
  font-weight: var(--wt-bold);
  font-size: 1.125rem;
  letter-spacing: -.01em;
  text-decoration: none;
  color: inherit;
}
.wordmark .tick { color: var(--color-accent); } /* the wordmark's period — the only wordmark accent */

.site-nav ul {
  list-style: none;
  display: flex;
  gap: var(--space-6);
  margin: 0; padding: 0;
}
.site-nav a {
  font-family: var(--font-ui);
  font-size: var(--text-label);
  font-weight: var(--wt-semi);
  letter-spacing: .09em;
  text-transform: uppercase;
  text-decoration: none;
  color: inherit;
  transition: color var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.site-nav a:hover { color: var(--color-accent-deep); }
.site-head.is-over-stage .site-nav a:hover { color: var(--color-accent); }
.site-nav a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.menu-toggle {
  display: none;
  font-family: var(--font-ui);
  font-size: var(--text-label);
  font-weight: var(--wt-semi);
  letter-spacing: .09em;
  text-transform: uppercase;
  background: none;
  border: 0;
  color: inherit;
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
}
@media (max-width: 767px) {
  .menu-toggle { display: block; }
  .site-nav {
    position: fixed;
    inset: 0;
    background: var(--color-paper);
    color: var(--color-ink);
    display: none;
    z-index: 90;
    padding: calc(var(--space-9)) var(--space-5) var(--space-5);
  }
  .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; gap: var(--space-5); }
  .site-nav.is-open a {
    font-size: var(--text-display-m);
    font-weight: var(--wt-bold);
    letter-spacing: -.01em;
    text-transform: none;
  }
  .site-nav .menu-timecode {
    display: block;
    margin-top: var(--space-8);
    color: var(--color-muted);
  }
}
@media (min-width: 768px) {
  .site-nav .menu-timecode { display: none; }
}

/* ---------- The Cut — edit-timeline rail (signature move, §4) ---------- */
.rail {
  display: none;
}
@media (min-width: 1024px) {
  .rail {
    display: block;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: var(--rail);
    z-index: 60;
    pointer-events: none;
  }
  .rail::before {                    /* the hairline */
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    right: 0;
    width: 1px;
    background: var(--color-hairline);
  }
  .rail .rail-fill {                 /* the flare scroll playhead */
    position: absolute;
    top: 0; bottom: 0;
    right: 0;
    width: 3px;
    background: var(--color-accent);
    transform-origin: top;
    transform: scaleY(0);
  }
  .rail .rail-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    writing-mode: vertical-rl;
    font-family: var(--font-ui);
    font-size: var(--text-label);
    font-weight: var(--wt-semi);
    letter-spacing: .09em;
    text-transform: uppercase;
    font-feature-settings: "tnum" 1;
    color: var(--color-muted);
    white-space: nowrap;
  }
  .rail.on-dark .rail-label { color: var(--color-on-stage-muted); }
  .rail.on-dark::before { background: var(--color-hairline-stage); }
}

/* ---------- Staged reveals (§5.1) ---------- */
/* With JS off (html.no-js) everything is simply visible — no dependence on script */
.no-js .rv { opacity: 1 !important; transform: none !important; }
.rv {
  opacity: 0;
  transform: translateY(16px);
  transition: transform var(--dur-mid) var(--ease-out),
              opacity var(--dur-mid) var(--ease-out);
}
.rv-1 { transition-delay: 0ms; }
.rv-2 { transition-delay: 80ms; }
.rv-3 { transition-delay: 170ms; }
.rv-4 { transition-delay: 260ms; }
.in-view .rv,
.rv.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Home · Cut 1 — cold open (dark stage + CSS fallback loop) ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: clip;
  padding-block: var(--space-9) var(--space-11); /* heavier bottom padding (anti-slop §4) */
}
.hero-backdrop {
  position: absolute;
  inset: 0;
  overflow: clip;
}
.hero-loop-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* The real Higgsfield hero loop now plays (asset-manifest asset-01); the CSS
   raking-light stays as a subtle companion layer, reduced, so it reads as one
   coherent atmosphere with the video rather than fighting it. Still the sole
   visual under prefers-reduced-motion (video hidden there, see media query below). */
.hero-light {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(90rem 42rem at 18% 30%, var(--color-glow-1), transparent 62%),
    radial-gradient(70rem 36rem at 78% 68%, var(--color-glow-2), transparent 60%);
  animation: rake 16s var(--ease-in-out) infinite alternate;
  will-change: transform;
  opacity: .4;
}
@keyframes rake {
  from { transform: translate3d(-2.5%, -1.5%, 0) scale(1); }
  to   { transform: translate3d(2.5%, 1.5%, 0) scale(1.06); }
}
.hero-grain {
  position: absolute;
  inset: 0;
  opacity: .35;
}
.hero-timecode {
  position: absolute;
  top: calc(var(--space-9) + var(--space-5));
  right: var(--space-6);
  z-index: 5;
  color: var(--color-on-stage-muted);
  margin: 0;
}
.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
}
.hero h1 {
  font-size: var(--text-display-xl);
  font-weight: var(--wt-black);
  line-height: .92;
  letter-spacing: -.03em;
  max-width: 14ch;                 /* lower-left biased, never centred */
}
.hero .hero-kicker { margin-bottom: var(--space-5); }

/* ---------- Home · Cut 2 — proof cut (dark stage + wipe) ---------- */
.stage-wipe {
  position: absolute;
  inset: 0;
  background: var(--color-stage);
  transform-origin: top;
}
.proof { position: relative; overflow: clip; }
.proof > .container { position: relative; z-index: 2; }
.proof-media {
  position: relative;
  aspect-ratio: 21 / 9;              /* the teaser crop — deliberately different from Portfolio's full frame */
  overflow: clip;
  background: var(--color-stage);
}
.proof-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 767px) {
  .proof-media { aspect-ratio: 16 / 9; }
}
.proof-caption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3) var(--space-6);
  margin-top: var(--space-5);
}

/* ---------- Buttons & text links ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 1.25rem;               /* large text — accent-ink on flare needs ≥3:1 large */
  font-weight: var(--wt-bold);
  letter-spacing: .01em;
  text-decoration: none;
  background: var(--color-accent);
  color: var(--color-accent-ink);
  padding: var(--space-4) var(--space-7);
  border: 0;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.btn:hover { background: var(--color-accent-deep); }
.btn:active { transform: translateY(1px); }
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: .5;
  cursor: not-allowed;
}
.on-stage .btn:focus-visible { outline-color: var(--color-on-stage); }

.text-link {
  font-weight: var(--wt-semi);
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-color: var(--color-hairline);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  transition: text-decoration-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.text-link:hover {
  color: var(--color-accent-deep);
  text-decoration-color: var(--color-accent);
}
.on-stage .text-link { color: var(--color-on-stage); }
.on-stage .text-link:hover { color: var(--color-on-stage); text-decoration-color: var(--color-accent); }

/* ---------- Portrait figure — as-is, hairline frame at most (§7) ---------- */
.portrait {
  border: 1px solid var(--color-hairline);
  padding: var(--space-2);
  background: var(--color-paper);
}
.portrait img { width: 100%; height: auto; }
.portrait figcaption {
  padding-top: var(--space-3);
  color: var(--color-muted);
}

/* ---------- Statement bands ---------- */
.statement-body { max-width: var(--measure); }
.statement-narrow {
  text-align: center;
}
.statement-narrow p {
  margin-inline: auto;
  max-width: var(--measure);
}

/* holds-space device: hairline + pulled phrase on the open side */
.holdside {
  border-top: 1px solid var(--color-hairline);
  padding-top: var(--space-5);
}
.on-stage .holdside { border-top-color: var(--color-hairline-stage); }

/* ---------- End-card (Home Cut 7 / Portfolio close) ---------- */
.endcard {
  text-align: center;
  position: relative;
}
.endcard .endcard-inner {
  max-width: 44rem;
  margin-inline: auto;
  display: grid;
  justify-items: center;
  gap: var(--space-6);
}
.endcard h2 {
  font-size: var(--text-display-l);
  font-weight: var(--wt-bold);
  line-height: .98;
  letter-spacing: -.02em;
}
.endcard .micro { color: var(--color-on-stage-muted); max-width: none; }

/* ---------- Portfolio — case-study stage modules ---------- */
.piece {
  position: relative;
  overflow: clip;
}
.piece > .container,
.endcard > .container { position: relative; z-index: 2; }
.piece + .piece { border-top: 1px solid var(--color-hairline-stage); }
.piece-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3) var(--space-6);
  margin-bottom: var(--space-6);
}
.piece-head h2 {
  font-size: var(--text-display-m);
  font-weight: var(--wt-bold);
  line-height: 1.02;
}
.spec-line {
  color: var(--color-on-stage-muted);
  font-feature-settings: "tnum" 1;
}
.piece-media { margin-block: var(--space-6); }
.piece-media video {
  width: 100%;
  height: auto;
  background: var(--color-stage);
}
/* 9:16 vertical (Dyson) — native aspect held, flanked margins, never cropped/stretched */
.piece-media.vertical {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: var(--space-5);
}
.piece-media.vertical video {
  width: min(38vw, calc(78svh * 9 / 16), 420px);
  height: auto;
}
.piece-media.vertical .flank {
  border-top: 1px solid var(--color-hairline-stage);
  position: relative;
  min-width: 0;
}
.piece-media.vertical .flank .label {
  position: absolute;
  top: var(--space-4);
  color: var(--color-on-stage-muted);
}
.piece-media.vertical .flank:first-child .label { right: 0; }
@media (max-width: 767px) {
  .piece-media.vertical { grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: var(--space-3); }
  .piece-media.vertical video { width: min(72vw, calc(70svh * 9 / 16)); }
}
.howmade {
  display: grid;
  gap: var(--space-6);
  border-top: 1px solid var(--color-hairline-stage);
  padding-top: var(--space-6);
}
@media (min-width: 768px) {
  .howmade { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}
.howmade h3 { margin-bottom: var(--space-4); }
.stills {
  display: grid;
  gap: var(--space-4);
}
.stills figure { border: 1px solid var(--color-hairline-stage); }
.stills figcaption {
  padding: var(--space-3);
  color: var(--color-on-stage-muted);
  font-size: var(--text-micro);
  font-weight: var(--wt-med);
}

/* ---------- FAQ — hairline-ruled Q&A rows (archetype D, always open) ---------- */
.qa { border-top: 1px solid var(--color-hairline); }
.qa .qa-row {
  border-bottom: 1px solid var(--color-hairline);
  padding-block: var(--space-6);
  display: grid;
  gap: var(--space-4);
}
@media (min-width: 768px) {
  .qa .qa-row { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-6); }
}
.qa h3 { font-size: var(--text-title); font-weight: var(--wt-semi); line-height: 1.15; }

/* the one place FAQ raises its voice */
.pricing-pull {
  max-width: none;
}
.pricing-pull .display-m { max-width: 24ch; }

/* ---------- About — background placeholder (honest, labelled) ---------- */
.needs-block {
  border: 1px dashed var(--color-hairline);
  background: var(--color-paper-2);
  color: var(--color-muted);
  padding: var(--space-6);
  max-width: var(--measure);
}
.needs-block .label { display: block; margin-bottom: var(--space-3); color: var(--color-accent-deep); }

/* index rows (About background) */
.index-row {
  border-top: 1px solid var(--color-hairline);
  padding-block: var(--space-6);
  display: grid;
  gap: var(--space-5);
}
@media (min-width: 768px) {
  .index-row { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
}

/* "Get in touch" (About §4 closing prompt) wraps mid-phrase at 320px inside its
   sentence — keep the clickable phrase on one line and let the parent line wrap
   before it instead (anti-slop §9 / gate 49: no two-line clickable text). */
.band-index .lede a.text-link { white-space: nowrap; }

/* ---------- Contact form (anti-slop §8 input rules) ---------- */
.form-grid {
  display: grid;
  gap: var(--space-6);
}
.field { display: grid; gap: var(--space-2); }
.field label {
  font-family: var(--font-ui);
  font-size: var(--text-label);
  font-weight: var(--wt-semi);
  letter-spacing: .09em;
  text-transform: uppercase;
}
.field .helper {
  color: var(--color-muted);
  font-size: var(--text-micro);
  font-weight: var(--wt-med);
  min-height: 1.2em;                 /* helper-text space reserved */
  margin: 0;
  max-width: none;
}
.field input,
.field textarea {
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--color-ink);
  background: var(--color-paper);
  border: 1px solid var(--color-hairline);   /* border width never shifts between states */
  padding: var(--space-4);
  height: 3.5rem;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.field textarea { height: auto; min-height: 9rem; resize: vertical; }
.field input:hover, .field textarea:hover { border-color: var(--color-muted); }
.field input:focus-visible, .field textarea:focus-visible {
  outline: 2px solid var(--color-accent);    /* focus ring via outline, not border */
  outline-offset: 2px;
  border-color: var(--color-hairline);
}
.field input:disabled, .field textarea:disabled {
  opacity: .5;
  cursor: not-allowed;
}
.form-grid .btn { height: 3.5rem; padding-block: 0; line-height: 3.5rem; justify-self: start; }
.form-grid .btn:disabled { opacity: .5; cursor: not-allowed; }
.cf-turnstile-wrap { margin-top: var(--space-2); }
.form-status {
  color: var(--color-accent-deep);
  font-weight: var(--wt-med);
  min-height: 1.5em;
  margin: 0;
}

/* Honeypot — off-screen (not display:none, which some bots skip), never
   reachable by keyboard or a screen reader. Real visitors never see this. */
.hp-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-aside {
  border-top: 1px solid var(--color-hairline);
  padding-top: var(--space-6);
  align-self: start;
}

/* ---------- Footer — single compact band (anti-slop §4) ---------- */
.site-foot {
  background: var(--color-stage);
  color: var(--color-on-stage);
  border-top: 2px solid var(--color-accent);  /* the "final cut" flare hairline */
  padding-block: var(--space-8);
}
.foot-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-6);
}
.foot-inner .foot-id p { margin: 0; max-width: none; }
.foot-inner .foot-id .tagline { color: var(--color-on-stage-muted); }
.foot-nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin: 0; padding: 0;
}
.foot-nav a {
  font-family: var(--font-ui);
  font-size: var(--text-label);
  font-weight: var(--wt-semi);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--color-on-stage);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.foot-nav a:hover { color: var(--color-accent); }
.foot-contact { margin: 0; max-width: none; }
.foot-contact a { color: var(--color-on-stage); }
.foot-copy { color: var(--color-on-stage-muted); margin: 0; max-width: none; }
/* low-key footer link (Privacy) — same muted register as the copyright line it sits beside */
.site-foot .text-link { color: var(--color-on-stage-muted); text-decoration-color: var(--color-hairline-stage); }
.site-foot .text-link:hover { color: var(--color-accent); text-decoration-color: var(--color-accent); }

/* ---------- Match-cut numeral (§5.3 — one instance, Home cuts 1→2) ---------- */
.matchcut-wrap { position: relative; }

/* ---------- Reduced motion (mandatory, §5) ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv, .rv-1, .rv-2, .rv-3, .rv-4 {
    transition: opacity 150ms linear;
    transition-delay: 0ms;
    transform: none;
  }
  .hero-light { animation: none; transform: none; opacity: .6; }
  .hero-loop-video { display: none; } /* poster + static CSS glow only, no autoplay */
  .rail .rail-fill { transform: scaleY(1); transition: none; }
  .stage-wipe { transform: none !important; }
  .hero-timecode { transform: none !important; opacity: 1 !important; }
  .btn { transition: none; }
  .btn:active { transform: none; }
}

/* ---------- Small-screen sanity ---------- */
@media (max-width: 413px) {
  .hero h1 { font-size: clamp(2.5rem, 12vw, 3.25rem); }
  .btn { font-size: 1.25rem; padding-inline: var(--space-6); } /* stays large-bold: accent-ink on flare needs the large-text 3:1 allowance */
  /* long-label CTA (Home cut 4): at very narrow widths the filled button would
     force its label to two lines (gate: no two-line clickable text) — it steps
     down to the text-link treatment instead, one line, full contrast on paper */
  .btn--long {
    background: none;
    color: var(--color-ink);
    padding: 0;
    font-size: 1.125rem;
    font-weight: var(--wt-semi);
    text-decoration: underline;
    text-decoration-color: var(--color-accent);
    text-decoration-thickness: 3px;
    text-underline-offset: 6px;
  }
  .btn--long:hover { background: none; color: var(--color-accent-deep); }
}