/* ==========================================================================
   Industry Showcase 2026 · site.css
   --------------------------------------------------------------------------
   Design plan
   - Palette: deep navy base, navy panels, ONE accent (gold), soft gold for
     secondary text, off-white body. No other hues, including for errors.
   - Type: Libre Franklin. Display 800 / tight tracking up to 9rem. Ledes 300.
     Hero: tiny wide-tracked gold labels + mono HUD readouts. Below the hero:
     sentence case, italic margin notes, no HUD (see "BELOW THE HERO").
   - Rhythm: 8px base unit. Sections breathe on clamp(6rem, 14vw, 12rem).
   - Motion: transform + opacity only. One easing curve, defined once below.
     Every hidden start state lives inside (prefers-reduced-motion: no-preference)
     and behind html.js, so content is visible without JS or with reduced motion.
   ========================================================================== */

:root {
  --navy-deep: #0B1730;
  --navy: #122447;
  --gold: #B8962E;
  --gold-soft: #E7D9A8;
  --ink: #ECEEF2;           /* off-white body copy */

  --ink-dim: rgba(236, 238, 242, 0.72);
  --hair: rgba(184, 150, 46, 0.32);     /* decorative gold hairline */
  --hair-strong: rgba(184, 150, 46, 0.6);
  --field-line: rgba(231, 217, 168, 0.5); /* 3:1+ against --navy for input boundaries */

  --font: "Libre Franklin", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 240ms;
  --t-reveal: 900ms;

  --gutter: clamp(1rem, 4vw, 3rem);
  --max: 1360px;
  --topbar-h: 72px;
  --section-pad: clamp(6rem, 14vw, 12rem);

  --fs-display: clamp(3.25rem, 12vw, 9rem);
  --fs-h2: clamp(2.4rem, 6.4vw, 5.75rem);
  --fs-statement: clamp(2.4rem, 7vw, 6.5rem);
  --fs-lede: clamp(1.15rem, 1.7vw, 1.55rem);
  --fs-body: clamp(1rem, 1.05vw, 1.0625rem);
  --fs-label: 0.7rem;
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }

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

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--navy-deep);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Fine grid + noise, fixed behind everything. Decorative only. */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
body::before { display: none; }
body::after {
  opacity: 0.07;
  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.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.9 0 0 0 0 0.85 0 0 0 0 0.66 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img, svg, canvas { display: block; max-width: 100%; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 800; }
ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--gold); color: var(--navy-deep); }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 12px; left: 12px;
  z-index: 200;
  padding: 0.75rem 1.1rem;
  background: var(--gold);
  color: var(--navy-deep);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--t-fast) var(--ease);
}
.skip-link:focus { transform: none; }

.container {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ------------------------------------------------------------------ type primitives */
.label {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  line-height: 1.4;
}
.label__rule {
  display: inline-block;
  width: 2.25rem;
  height: 1px;
  background: var(--gold);
}

.h2 {
  font-size: var(--fs-h2);
  line-height: 0.95;
  letter-spacing: -0.04em;
  font-weight: 800;
  color: var(--ink);
  max-width: 16ch;
  text-wrap: balance;
}

.lede {
  font-size: var(--fs-lede);
  font-weight: 300;
  line-height: 1.45;
  color: var(--ink);
  max-width: 40ch;
}

.link {
  color: var(--gold-soft);
  text-decoration: underline;
  text-decoration-color: var(--hair-strong);
  text-underline-offset: 0.25em;
  text-decoration-thickness: 1px;
  transition: color var(--t-fast) var(--ease), text-decoration-color var(--t-fast) var(--ease);
}
.link:hover { color: #fff; text-decoration-color: var(--gold); }

/* Corner brackets, shared by hero notice + form panel */
.bracket {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 0 solid var(--gold);
  pointer-events: none;
}
.bracket--tl { top: -1px; left: -1px; border-top-width: 1.5px; border-left-width: 1.5px; transform-origin: top left; }
.bracket--tr { top: -1px; right: -1px; border-top-width: 1.5px; border-right-width: 1.5px; transform-origin: top right; }
.bracket--bl { bottom: -1px; left: -1px; border-bottom-width: 1.5px; border-left-width: 1.5px; transform-origin: bottom left; }
.bracket--br { bottom: -1px; right: -1px; border-bottom-width: 1.5px; border-right-width: 1.5px; transform-origin: bottom right; }

/* ------------------------------------------------------------------ buttons */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  min-height: 56px;
  padding: 0.9rem 1.5rem;
  border: 1px solid var(--gold);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.btn--gold { background: var(--gold); color: var(--navy-deep); }
/* gold sweep: a soft-gold panel slides across on hover */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--gold-soft);
  transform: translateX(-101%);
  transition: transform 420ms var(--ease);
}
.btn:hover::before,
.btn:focus-visible::before { transform: none; }
.btn__arrow {
  width: 20px; height: 20px;
  flex: none;
  transition: transform var(--t-fast) var(--ease);
}
.btn:hover .btn__arrow,
.btn:focus-visible .btn__arrow { transform: translateX(4px); }
.btn__sub { font-weight: 500; letter-spacing: 0.08em; text-transform: none; }

/* ------------------------------------------------------------------ brand slots */
/* max-height, never height: an absent file reserves zero space (no layout shift). */
.brand-logo {
  max-height: 34px;
  width: auto;
  flex: none;
}
.brand-logo--footer { max-height: 48px; margin-bottom: 1.25rem; }

/* Event mark (assets/brand/is26-mark.svg) */
.event-mark { width: 30px; height: 30px; flex: none; }
.event-mark--footer { display: inline-block; width: 0.85em; height: 0.85em; margin-right: 0.3em; vertical-align: -0.04em; }

/* ==========================================================================
   TOP BAR
   ========================================================================== */
.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--topbar-h);
  color: var(--ink);
}
/* two stacked backgrounds; only opacity animates between them */
.topbar::before,
.topbar::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  transition: opacity 400ms var(--ease);
}
.topbar::before { background: linear-gradient(180deg, rgba(11, 23, 48, 0.85), rgba(11, 23, 48, 0)); }
.topbar::after {
  background: var(--navy-deep);
  border-bottom: 1px solid rgba(184, 150, 46, 0.18);
  opacity: 0;
}
.topbar.is-solid::before { opacity: 0; }
.topbar.is-solid::after { opacity: 0.97; }

.topbar__inner {
  height: 100%;
  max-width: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0 var(--gutter);
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 44px;
  text-decoration: none;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1.35;
}
.wordmark__text { display: inline; }
.wordmark__dot { color: var(--gold); }

.nav__list { display: flex; align-items: center; gap: 0.25rem; }
.nav__link {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  min-height: 44px;
  align-items: center;
  padding: 0 0.9rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-dim);
  transition: color var(--t-fast) var(--ease);
}
.nav__num { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.05em; color: var(--gold); }
.nav__link::after {
  content: "";
  position: absolute;
  left: 0.9rem; right: 0.9rem; bottom: 10px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 320ms var(--ease);
}
.nav__link:hover,
.nav__link.is-active { color: var(--gold-soft); }
.nav__link:hover::after,
.nav__link.is-active::after { transform: scaleX(1); }
.nav__link--cta { color: var(--gold-soft); }

.menu-btn {
  display: none;
  align-items: center;
  gap: 0.75rem;
  min-height: 44px;
  min-width: 44px;
  padding: 0 0.25rem 0 0.75rem;
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.menu-btn__bars { position: relative; width: 22px; height: 10px; }
.menu-btn__bars span {
  position: absolute;
  left: 0; right: 0;
  height: 1.5px;
  background: var(--gold);
  transition: transform var(--t-fast) var(--ease);
}
.menu-btn__bars span:first-child { top: 0; }
.menu-btn__bars span:last-child { bottom: 0; }
.menu-btn[aria-expanded="true"] .menu-btn__bars span:first-child { transform: translateY(4.25px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__bars span:last-child { transform: translateY(-4.25px) rotate(-45deg); }

.topbar__progress {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  opacity: 0;
  transition: opacity 400ms var(--ease);
}
.topbar.is-solid .topbar__progress { opacity: 1; }
.topbar__progress-fill {
  display: block;
  height: 100%;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  height: 500vh;
}
.hero__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100lvh;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 60% at 70% 40%, rgba(18, 36, 71, 0.9), transparent 70%),
    var(--navy-deep);
}
.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* Scrim + vignette: keeps overlaid copy at AA over every frame. Copy sits left
   and low, so those edges carry the heaviest darkening. */
.hero__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(11, 23, 48, 0.82) 0%, rgba(11, 23, 48, 0.45) 45%, rgba(11, 23, 48, 0.1) 75%),
    linear-gradient(0deg, rgba(11, 23, 48, 0.92) 0%, rgba(11, 23, 48, 0) 50%),
    linear-gradient(180deg, rgba(11, 23, 48, 0.6) 0%, rgba(11, 23, 48, 0) 22%),
    radial-gradient(ellipse 120% 100% at 50% 50%, transparent 45%, rgba(5, 11, 24, 0.7) 100%);
}

/* the content layer is pinned to the SMALL viewport so bottom-anchored copy
   never sits under a mobile browser's toolbar */
.hero__block,
.hud,
.loader,
.hero__scrollcue {
  --vh: 100vh;
}
@supports (height: 100svh) {
  .hero__block, .hud, .loader, .hero__scrollcue { --vh: 100svh; }
}

/* ---- loader */
.loader {
  position: absolute;
  top: var(--topbar-h);
  left: var(--gutter);
  right: var(--gutter);
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-soft);
  pointer-events: none;
  transition: opacity 600ms var(--ease) 200ms;
}
.loader__bar {
  display: block;
  height: 1px;
  background: rgba(184, 150, 46, 0.2);
  overflow: hidden;
}
.loader__fill {
  display: block;
  height: 100%;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 300ms var(--ease);
}
.loader__label { color: var(--gold); }
.hero.is-ready .loader { opacity: 0; }
html:not(.js) .loader { display: none; }

/* ---- HUD */
.hud {
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--vh);
  z-index: 2;
  pointer-events: none;
  color: var(--gold);
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.hud__corner {
  position: absolute;
  width: 26px; height: 26px;
  border: 0 solid var(--hair-strong);
}
.hud__corner--tl { top: calc(var(--topbar-h) + 16px); left: var(--gutter); border-top-width: 1px; border-left-width: 1px; }
.hud__corner--tr { top: calc(var(--topbar-h) + 16px); right: var(--gutter); border-top-width: 1px; border-right-width: 1px; }
.hud__corner--bl { bottom: 20px; left: var(--gutter); border-bottom-width: 1px; border-left-width: 1px; }
.hud__corner--br { bottom: 20px; right: var(--gutter); border-bottom-width: 1px; border-right-width: 1px; }

.hud__meta {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  color: var(--gold-soft);
}
.hud__meta--top { top: calc(var(--topbar-h) + 24px); right: calc(var(--gutter) + 40px); }
.hud__sep { width: 18px; height: 1px; background: var(--hair-strong); }
.hud__clock { color: var(--gold); font-variant-numeric: tabular-nums; }

.hud__scene {
  position: absolute;
  right: calc(var(--gutter) + 40px);
  bottom: 30px;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.hud__scene-tag { color: var(--gold); opacity: 0.8; }
.hud__scene-label {
  display: inline-block;
  min-width: 9ch;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--hair-strong);
  color: var(--gold-soft);
  transition: opacity 200ms var(--ease);
}
.hud__scene-label.is-swapping { opacity: 0; }

.hud__rail {
  position: absolute;
  right: calc(var(--gutter) + 8px);
  top: 30%;
  height: 40%;
  width: 1px;
}
.hud__rail-track {
  position: absolute;
  inset: 0;
  background: rgba(184, 150, 46, 0.22);
}
.hud__rail-fill {
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform: scaleY(0);
  transform-origin: top;
}
.hud__tick {
  position: absolute;
  right: -4px;
  width: 9px;
  height: 1px;
  background: var(--gold);
}
.hud__tick i {
  position: absolute;
  right: 16px;
  top: -0.55em;
  font-style: normal;
  color: var(--gold-soft);
  opacity: 0.55;
  transition: opacity var(--t-fast) var(--ease);
}
.hud__tick.is-active i { opacity: 1; }

.hud__reticle {
  position: absolute;
  top: 50%;
  left: 62%;
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60px;
  color: var(--gold);
  opacity: 0.35;
}

/* the reticle is for the fallback canvas; real footage has its own subject */
.hero[data-mode="frames"] .hud__reticle { display: none; }

/* ---- component callouts (exploded view). JS positions each via transform. */
.callouts {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.callout {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-soft);
  translate: 0 -50%;   /* marker centre sits on the anchor point */
  opacity: 0;
  transition: opacity 400ms var(--ease);
}
.callout i {
  position: relative;
  flex: none;
  width: 7px;
  height: 7px;
  margin-left: -3.5px;
  border: 1px solid var(--gold);
  background: var(--navy-deep);
  transform: rotate(45deg);
}
.callout i::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34px;
  height: 1px;
  background: var(--gold);
  transform-origin: left center;
  transform: rotate(-45deg) scaleX(0);
  transition: transform 500ms var(--ease);
}
.callout__tag {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-left: 34px;
  padding: 0.32rem 0.55rem;
  border: 1px solid var(--hair-strong);
  background: rgba(11, 23, 48, 0.86);
  transform: translateX(-8px);
  transition: transform 500ms var(--ease);
}
.callout__tag b { color: var(--gold); font-weight: 600; }
.callout.is-on { opacity: 1; }
.callout.is-on i::after { transform: rotate(-45deg) scaleX(1); }
.callout.is-on .callout__tag { transform: none; }
/* flip: label to the left of the marker when it would run off the right edge */
.callout--flip { flex-direction: row-reverse; translate: -100% -50%; }
.callout--flip i { margin-left: 0; margin-right: -3.5px; }
.callout--flip i::after { left: auto; right: 50%; transform-origin: right center; }
.callout--flip .callout__tag { margin-left: 0; margin-right: 34px; transform: translateX(8px); }
@media (max-width: 820px) { .callouts { display: none; } }

/* ---- copy blocks */
.hero__block {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  z-index: 3;
  will-change: opacity, transform;
}
.hero__stage { --vb: 0px; }
@supports (height: 100lvh) {
  /* gap between the large viewport (stage) and the small one (visible area) */
  .hero__stage { --vb: calc(100lvh - 100svh); }
}
.hero__block { transform: translate3d(0, var(--y, 0px), 0); }
.hero__block--1 { bottom: calc(var(--vb) + max(9vh, 64px)); }
.hero__block--2,
.hero__block--3 { top: calc(var(--vh) * 0.5); transform: translate3d(0, calc(-50% + var(--y, 0px)), 0); }
.hero__block--4 { bottom: calc(var(--vb) + max(8vh, 56px)); max-width: 680px; }

.hero__kicker { margin-bottom: 1.5rem; }

.hero__title {
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: 0.86;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  color: var(--ink);
}
.hero__title .w {
  display: block;
  overflow: hidden;
  padding-bottom: 0.06em;
  margin-bottom: -0.06em;
}
.hero__title .w > span { display: inline-block; }
.hero__title .w--gold { color: var(--gold); }

.hero__facts {
  margin-top: 1.75rem;
  display: grid;
  gap: 0.25rem;
  font-size: var(--fs-lede);
  font-weight: 300;
  line-height: 1.35;
  color: var(--gold-soft);
  max-width: 36ch;
}

.hero__statement {
  margin-top: 1.25rem;
  font-size: var(--fs-statement);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.04em;
  color: var(--ink);
  max-width: 13ch;
  text-wrap: balance;
}

.notice {
  position: relative;
  padding: clamp(1.25rem, 2.6vw, 2rem);
  border: 1px solid var(--gold);
  background: rgba(11, 23, 48, 0.84);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.notice .bracket { width: 14px; height: 14px; }
.notice .bracket--tl { top: -6px; left: -6px; }
.notice .bracket--tr { top: -6px; right: -6px; }
.notice .bracket--bl { bottom: -6px; left: -6px; }
.notice .bracket--br { bottom: -6px; right: -6px; }
.notice__label { margin-bottom: 0.9rem; }
.notice__text {
  font-size: clamp(1rem, 1.35vw, 1.15rem);
  line-height: 1.55;
  color: var(--ink);
}
.notice__text--secondary {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--hair);
  color: var(--gold-soft);
}
.hero__cta { margin-top: 1.5rem; }

.hero__scrollcue {
  position: absolute;
  left: 50%;
  top: calc(var(--vh) - 64px);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-soft);
  pointer-events: none;
  transition: opacity 400ms var(--ease);
}
.hero__scrollcue i {
  display: block;
  width: 1px;
  height: 28px;
  background: linear-gradient(var(--gold), transparent);
}
.hero.is-scrolled .hero__scrollcue { opacity: 0; }

/* Animated hero: JS drives block opacity/transform. Start states only exist
   when JS is running AND motion is allowed. */
@media (prefers-reduced-motion: no-preference) {
  .js .hero__block { opacity: 0; }
  .js .hero__title .w > span { transform: translateY(105%); }
  .js .hero__kicker,
  .js .hero__facts { opacity: 0; transform: translateY(16px); }
  .js .hero.is-ready .hero__title .w > span {
    transform: none;
    transition: transform 1100ms var(--ease);
  }
  .js .hero.is-ready .hero__title .w:nth-child(2) > span { transition-delay: 110ms; }
  .js .hero.is-ready .hero__title .w:nth-child(3) > span { transition-delay: 220ms; }
  .js .hero.is-ready .hero__kicker,
  .js .hero.is-ready .hero__facts {
    opacity: 1;
    transform: none;
    transition: opacity 900ms var(--ease) 380ms, transform 900ms var(--ease) 380ms;
  }
  .js .hero.is-ready .hero__kicker { transition-delay: 0ms; }
  .js .hud { opacity: 0; transition: opacity 900ms var(--ease) 500ms; }
  .js .hero.is-ready .hud { opacity: 1; }
  .hud__scene-label { transition: opacity 200ms var(--ease); }
}

/* ---- Static hero: reduced motion (html.static-hero, set by scroll.js) or no JS.
   No scrubbing; one static frame; blocks 1 and 4 stacked; 2 and 3 removed. */
html:not(.js) .hero,
.static-hero .hero { height: auto; }
html:not(.js) .hero__stage,
.static-hero .hero__stage {
  position: relative;
  height: auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 3rem;
  padding: calc(var(--topbar-h) + 8vh) var(--gutter) 10vh;
}
html:not(.js) .hero__block,
.static-hero .hero__block {
  position: relative;
  inset: auto;
  left: auto;
  right: auto;
  transform: none;
  opacity: 1;
  visibility: visible;
}
html:not(.js) .hero__block--2,
html:not(.js) .hero__block--3,
.static-hero .hero__block--2,
.static-hero .hero__block--3,
html:not(.js) .hud__rail,
.static-hero .hud__rail,
html:not(.js) .hero__scrollcue,
.static-hero .hero__scrollcue,
.static-hero .loader { display: none; }
html:not(.js) .hud,
.static-hero .hud { height: 100%; }

/* ==========================================================================
   BELOW THE HERO: "printed programme"
   --------------------------------------------------------------------------
   Everything after the hero reads like an official event programme / briefing
   document rather than a landing-page template:
   - Ruled mastheads ("01 · About" + italic margin note) instead of tracked-caps
     labels; solid rules, never gradient fades; sentence case throughout.
   - No HUD garnish below the hero (no coordinates, brackets or grid).
   - The form is an official form: ruled cells, labels inside each box.
   Motion is unchanged: line reveals, staggers, count-up, rule slide-in,
   logistics lighting, form rise. Start states stay behind html.js and
   (prefers-reduced-motion: no-preference).
   ========================================================================== */
:root {
  --rule: rgba(231, 217, 168, 0.16);
  --rule-strong: rgba(231, 217, 168, 0.34);
  --cell: #0F1E3D;
  --cell-hover: #13254A;
  --cell-focus: #162B54;
  --body-ink: rgba(236, 238, 242, 0.8);
  --bleed: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
}

.section {
  position: relative;
  padding: clamp(5rem, 10vw, 8.5rem) 0 clamp(6rem, 12vw, 10.5rem);
}

.h2 {
  font-size: clamp(2.6rem, 6.2vw, 5.6rem);
  line-height: 0.93;
  letter-spacing: -0.045em;
  font-weight: 800;
  color: var(--ink);
  max-width: 17ch;
  text-wrap: balance;
}
.lede { font-size: var(--fs-lede); font-weight: 300; line-height: 1.45; max-width: 36ch; text-wrap: pretty; }
.section p { text-wrap: pretty; }

/* ---- masthead row */
.section__head { margin-bottom: clamp(3rem, 6vw, 5.5rem); }
.section__rule {
  position: relative;
  display: block;
  height: 1px;
  background: var(--rule-strong);
  transform-origin: left;
}
.section__rule::after {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: 64px;
  height: 3px;
  background: var(--gold);
}
.kicker {
  display: grid;
  grid-template-columns: 3rem auto 1fr;
  align-items: baseline;
  gap: 0 1rem;
  padding-top: 1rem;
  margin-bottom: clamp(2.25rem, 4.5vw, 3.75rem);
  font-size: 0.95rem;
  line-height: 1.3;
}
.kicker__num { font-weight: 700; color: var(--gold); font-variant-numeric: tabular-nums; }
.kicker__name { font-weight: 600; color: var(--ink); }
.kicker__note { justify-self: end; text-align: right; font-style: italic; font-weight: 300; color: var(--gold-soft); }

/* headline left, lede right */
.head-split {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 2rem clamp(2rem, 5vw, 5rem);
  align-items: end;
}
.head-split .lede { margin-bottom: 0.4em; }

/* ---- motion (unchanged behaviour, new targets) */
.js-lines .ln {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}
.js-lines .ln__in { display: inline-block; }

@media (prefers-reduced-motion: no-preference) {
  .js .section__rule { transform: scaleX(0); }
  .js .is-in .section__rule { transform: scaleX(1); transition: transform 1200ms var(--ease) 100ms; }
  .js .js-lines .ln__in { transform: translateY(108%); }
  .js .js-lines.is-in .ln__in {
    transform: none;
    transition: transform var(--t-reveal) var(--ease);
    transition-delay: var(--d, 0ms);
  }
  .js .stagger { opacity: 0; transform: translateY(22px); }
  .js .stagger.is-in {
    opacity: 1;
    transform: none;
    transition: opacity var(--t-reveal) var(--ease), transform var(--t-reveal) var(--ease);
    transition-delay: var(--d, 0ms);
  }
}

/* ------------------------------------------------------------------ About */
.figures {
  margin: 0 0 clamp(4rem, 8vw, 7rem);
  font-size: clamp(2.1rem, 5.2vw, 4.9rem);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -0.035em;
  color: var(--ink);
  max-width: 22ch;
}
.figures__n {
  font-weight: 800;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

.about__body {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 2.5rem clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}
.about__figure {
  grid-column: 1 / span 6;
  margin: 0 0 0 calc(-1 * var(--bleed));
}
.about__figure img { width: 100%; height: auto; }
.about__figure figcaption {
  margin: 1rem 0 0 var(--bleed);
  max-width: 44ch;
  font-size: 0.875rem;
  font-style: italic;
  font-weight: 300;
  line-height: 1.5;
  color: var(--gold-soft);
}
.about__figure figcaption span { font-style: normal; font-weight: 600; color: var(--gold); margin-right: 0.35rem; }
.about__text {
  grid-column: 8 / span 5;
  display: grid;
  gap: 1.35rem;
  color: var(--body-ink);
}
.about__text p { max-width: 58ch; }
.about__text .lede { color: var(--ink); margin-bottom: 0.6rem; }
.about__org {
  margin-top: 1rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule-strong);
  font-style: italic;
  font-weight: 300;
  color: var(--gold-soft);
}
@media (prefers-reduced-motion: no-preference) {
  .js .about__figure img { transform: scale(1.06); }
  .js .about__figure.is-in img { transform: none; transition: transform 1600ms var(--ease); }
  .about__figure { overflow: hidden; }
}

/* ------------------------------------------------------------------ Rules */
.rules__list { border-top: 1px solid var(--rule-strong); }
.rule {
  position: relative;
  display: grid;
  grid-template-columns: 3rem minmax(0, 5fr) minmax(0, 7fr);
  gap: 0.75rem clamp(1.5rem, 3vw, 3rem);
  align-items: baseline;
  padding: clamp(1.75rem, 3vw, 2.5rem) 0;
  border-bottom: 1px solid var(--rule);
  transition: opacity 300ms var(--ease);
}
.rule::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 500ms var(--ease);
}
.rule__index { font-weight: 700; color: var(--gold); font-variant-numeric: tabular-nums; }
.rule__title {
  font-size: clamp(1.3rem, 2vw, 1.75rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.rule__body { color: var(--body-ink); }
.rule__body p { max-width: 58ch; }

/* zero-gift rule: the banned items, struck through */
.strike { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.1rem; }
.strike li {
  position: relative;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--rule-strong);
  font-size: 0.875rem;
  color: var(--gold-soft);
}
.strike li::after {
  content: "";
  position: absolute;
  left: 0.45rem; right: 0.45rem; top: 52%;
  height: 1.5px;
  background: var(--gold);
  transform-origin: left;
}

@media (hover: hover) {
  .rules__list:hover .rule { opacity: 0.65; }
  .rules__list .rule:hover { opacity: 1; }
  .rules__list .rule:hover::after { transform: scaleX(1); }
}
@media (prefers-reduced-motion: no-preference) {
  .js .rule { opacity: 0; transform: translateY(28px); }
  .js .rule.is-in {
    opacity: 1;
    transform: none;
    transition: opacity 800ms var(--ease), transform 800ms var(--ease);
    transition-delay: var(--d, 0ms);
  }
  .js .rule.is-in.is-done { transition: opacity 300ms var(--ease); transition-delay: 0ms; }
  @media (hover: hover) {
    .js .rules__list:hover .rule.is-done { opacity: 0.65; }
    .js .rules__list .rule.is-done:hover { opacity: 1; }
  }
  .js .rule .strike li::after { transform: scaleX(0); }
  .js .rule.is-in .strike li::after { transform: scaleX(1); transition: transform 500ms var(--ease); }
  .js .rule.is-in .strike li:nth-child(1)::after { transition-delay: 600ms; }
  .js .rule.is-in .strike li:nth-child(2)::after { transition-delay: 690ms; }
  .js .rule.is-in .strike li:nth-child(3)::after { transition-delay: 780ms; }
  .js .rule.is-in .strike li:nth-child(4)::after { transition-delay: 870ms; }
  .js .rule.is-in .strike li:nth-child(5)::after { transition-delay: 960ms; }
  .js .rule.is-in .strike li:nth-child(6)::after { transition-delay: 1050ms; }
}

/* ------------------------------------------------------------------ Logistics */
.logistics__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
.logistics__aside { height: 100%; }
.logistics__sticky { position: sticky; top: calc(var(--topbar-h) + 5vh); }
.logistics__sticky .section__head { margin-bottom: clamp(2rem, 4vw, 3rem); }

.dateplate { display: grid; justify-items: start; margin-bottom: 1.75rem; }
.dateplate__dow { font-style: italic; font-weight: 300; font-size: 1.15rem; color: var(--gold-soft); }
.dateplate__day {
  font-size: clamp(7rem, 15vw, 12.5rem);
  font-weight: 800;
  line-height: 0.8;
  letter-spacing: -0.06em;
  color: var(--gold);
  margin: 0.1em 0 0.12em -0.05em;
}
.dateplate__month { font-size: clamp(1.2rem, 1.8vw, 1.5rem); font-weight: 600; letter-spacing: -0.01em; }
.venue { font-style: normal; color: var(--body-ink); line-height: 1.55; padding-top: 1.25rem; border-top: 1px solid var(--rule); max-width: 32ch; }

.facts { border-top: 1px solid var(--rule-strong); }
.fact {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 7fr);
  gap: 0.5rem 2rem;
  padding: clamp(1.6rem, 3vw, 2.4rem) 0 clamp(1.6rem, 3vw, 2.4rem) 1.25rem;
  border-bottom: 1px solid var(--rule);
}
.fact::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--gold);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 600ms var(--ease);
}
.fact.is-lit::before { transform: scaleY(1); }
.fact__term { font-weight: 600; color: var(--gold-soft); padding-top: 0.2em; }
.fact__def { font-size: clamp(1.1rem, 1.55vw, 1.35rem); font-weight: 300; line-height: 1.45; color: var(--ink); transition: opacity 600ms var(--ease); }
@media (prefers-reduced-motion: no-preference) {
  /* 0.62 keeps off-white body text above 5:1 on the navy base */
  .js .logistics.is-scrolly .fact__def { opacity: 0.62; }
  .js .logistics.is-scrolly .fact.is-lit .fact__def { opacity: 1; }
}

/* ------------------------------------------------------------------ Register: the form sheet */
.sheet {
  position: relative;
  max-width: 1080px;
  background: var(--navy-deep);
  border: 1px solid var(--rule-strong);
}
@media (prefers-reduced-motion: no-preference) {
  .js .panel { opacity: 0; transform: translateY(48px); }
  .js .panel.is-in { opacity: 1; transform: none; transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
  .js .panel .form__intro,
  .js .panel .fieldset,
  .js .panel .form__submit { opacity: 0; transform: translateY(20px); }
  .js .panel.is-in .form__intro,
  .js .panel.is-in .fieldset,
  .js .panel.is-in .form__submit {
    opacity: 1;
    transform: none;
    transition: opacity 500ms var(--ease), transform 500ms var(--ease);
    transition-delay: var(--d, 0ms);
  }
}

.sheet__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding: 1.1rem clamp(1.25rem, 3vw, 2.25rem);
  border-bottom: 1px solid var(--rule-strong);
  background: var(--navy);
}
.sheet__title { font-weight: 700; letter-spacing: -0.01em; }
.sheet__title span { margin-left: 0.6rem; font-style: italic; font-weight: 300; color: var(--gold-soft); }

.progress { display: flex; align-items: center; gap: 1rem; }
.progress__segments { display: flex; gap: 4px; }
.progress__segments span { position: relative; width: 34px; height: 4px; background: rgba(231, 217, 168, 0.22); overflow: hidden; }
.progress__segments span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 500ms var(--ease);
}
.progress__segments span.is-done::after { transform: scaleX(1); }
.progress__text { font-size: 0.875rem; color: var(--gold-soft); font-variant-numeric: tabular-nums; }
.progress__count { font-weight: 700; color: var(--gold); }

.form { padding: clamp(1.5rem, 4vw, 3rem) clamp(1.25rem, 3vw, 2.25rem) clamp(1.75rem, 4vw, 3rem); }
.form__intro { font-size: 1.125rem; font-weight: 300; line-height: 1.5; max-width: 52ch; margin-bottom: clamp(2rem, 4vw, 3rem); }

.fieldset { margin: 0 0 clamp(2.25rem, 4vw, 3rem); padding: 0; border: 0; min-width: 0; }
.fieldset__legend {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  width: 100%;
  padding: 0 0 0.85rem;
  font-size: clamp(1.3rem, 2.1vw, 1.65rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.fieldset__num { font-size: 0.875rem; font-weight: 400; font-style: italic; letter-spacing: 0; color: var(--gold-soft); }
.fieldset__hint { margin: -0.35rem 0 1rem; color: var(--body-ink); max-width: 60ch; }

/* ruled cells: the 1px gap shows the grid colour as hairlines */
.cells {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule-strong);
  border: 1px solid var(--rule-strong);
}
.cell {
  position: relative;
  min-width: 0;
  margin: 0;
  padding: 0.85rem 1rem 0.7rem;
  border: 0;
  background: var(--cell);
  transition: background-color var(--t-fast) var(--ease);
}
.cell--full { grid-column: 1 / -1; }
.cell:hover { background: var(--cell-hover); }
.cell:focus-within { background: var(--cell-focus); }

.field__label {
  display: block;
  float: none;
  margin: 0 0 0.3rem;
  padding: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--gold-soft);
}
.field__input {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 0.3rem 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--ink);
  font-size: 1.0625rem;
  line-height: 1.5;
  -webkit-appearance: none;
  appearance: none;
}
textarea.field__input { resize: vertical; min-height: 92px; }
.field__input::placeholder { color: rgba(236, 238, 242, 0.6); opacity: 1; }
.field__input:focus-visible { outline: none; }
.field__line {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 360ms var(--ease);
  pointer-events: none;
}
.field:focus-within .field__line { transform: scaleX(1); }

.select { position: relative; }
.select::after {
  content: "";
  position: absolute;
  right: 0.25rem;
  top: 50%;
  width: 8px; height: 8px;
  margin-top: -6px;
  border-right: 1.5px solid var(--gold);
  border-bottom: 1.5px solid var(--gold);
  transform: rotate(45deg);
  pointer-events: none;
}
.select .field__input { padding-right: 2rem; cursor: pointer; }
select.field__input option { background: var(--navy); color: var(--ink); }

/* floated legend = part of the content box, so the cell background runs behind it */
.group > legend { float: left; width: 100%; margin-bottom: 0.4rem; }
.group > legend + * { clear: both; }
.choices { display: grid; gap: 0; }
.choices--row { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 0 1.5rem; }
.choices--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.5rem; }
.choice {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  min-height: 44px;
  padding: 0.55rem 0;
  cursor: pointer;
  line-height: 1.45;
  color: var(--ink);
}
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.choice__box {
  position: relative;
  flex: none;
  width: 19px;
  height: 19px;
  margin-top: 0.12em;
  border: 1.5px solid var(--field-line);
  border-radius: 50%;
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.choice:hover .choice__box { border-color: var(--gold); }
.choice__box::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--gold);
  transform: scale(0);
  transition: transform var(--t-fast) var(--ease);
}
.choice__box--check { border-radius: 0; }
.choice__box--check::after {
  inset: 2px 5px 5px 5px;
  border-radius: 0;
  background: none;
  border-right: 2px solid var(--navy-deep);
  border-bottom: 2px solid var(--navy-deep);
  transform: rotate(45deg) scale(0);
}
.choice input:checked + .choice__box { border-color: var(--gold); }
.choice input:checked + .choice__box::after { transform: scale(1); }
.choice input:checked + .choice__box--check { background: var(--gold); }
.choice input:checked + .choice__box--check::after { transform: rotate(45deg) scale(1); }
.choice input:focus-visible + .choice__box { outline: 2px solid var(--gold); outline-offset: 3px; }

/* hardware block: nested ruled cells with a gold spine */
.conditional { background: var(--gold); padding-left: 3px; }
.conditional[hidden] { display: none; }
.cells--nested { border: 0; }
@media (prefers-reduced-motion: no-preference) {
  .conditional.is-opening { animation: cond-in 420ms var(--ease); }
  @keyframes cond-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
}

/* acknowledgments: gold-left-bordered panel */
.acks { grid-template-columns: 1fr; border-left: 3px solid var(--gold); }
.choice--ack { font-size: 0.98rem; }

/* inline errors: soft gold message + marker, gold-tinted cell; no red by design */
.field__error {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin: 0.45rem 0 0.15rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--gold-soft);
}
.field__error[hidden] { display: none; }
.field__error::before {
  content: "!";
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 17px;
  height: 17px;
  margin-top: 0.05em;
  background: var(--gold);
  color: var(--navy-deep);
  font-size: 0.7rem;
  font-weight: 800;
}
.cell.is-invalid,
.group.is-invalid,
.ack.is-invalid { background: #1D2A3F; box-shadow: inset 3px 0 0 var(--gold); }

.form__submit {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 1rem 2rem;
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--rule-strong);
}
.btn--submit { min-height: 60px; padding: 1rem 2rem; font-size: 0.9rem; }
.form__after { display: grid; gap: 0.4rem; }
.form__status { color: var(--gold-soft); font-weight: 600; }
.form__status:empty { display: none; }
.form__fine { font-size: 0.9rem; color: var(--body-ink); max-width: 52ch; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer {
  position: relative;
  padding: clamp(4rem, 8vw, 6.5rem) 0 2rem;
  border-top: 1px solid var(--rule-strong);
  background: var(--navy);
}
.footer__mast {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
  border-bottom: 1px solid var(--rule);
}
.footer__lockup { width: clamp(240px, 32vw, 400px); height: auto; }
.footer__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem clamp(1.5rem, 4vw, 4rem);
  padding: clamp(2rem, 4vw, 3rem) 0;
}
.footer__h { margin-bottom: 0.6rem; font-size: 0.875rem; font-style: italic; font-weight: 300; color: var(--gold-soft); }
.footer__meta { color: var(--body-ink); max-width: 42ch; }
.footer__notice {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 0.5rem clamp(1.5rem, 4vw, 4rem);
  padding: clamp(1.75rem, 3vw, 2.25rem) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.footer__disclaimer { color: var(--ink); max-width: 70ch; }
.footer__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.5rem;
  font-size: 0.875rem;
  color: var(--body-ink);
}

/* ---- below-the-hero, small screens */
@media (max-width: 820px) {
  .kicker { grid-template-columns: 2.25rem 1fr; }
  .kicker__note { grid-column: 2; justify-self: start; text-align: left; margin-top: 0.15rem; }
  .head-split { grid-template-columns: 1fr; }

  .about__body { grid-template-columns: 1fr; }
  .about__figure { grid-column: auto; margin: 0 calc(-1 * var(--gutter)); }
  .about__figure figcaption { margin-left: var(--gutter); margin-right: var(--gutter); }
  .about__text { grid-column: auto; }

  .rule { grid-template-columns: 2rem minmax(0, 1fr); }
  .rule__body { grid-column: 2; }

  /* no pinned logistics column on small screens */
  .logistics__grid { grid-template-columns: 1fr; }
  .logistics__sticky { position: static; }
  .fact { grid-template-columns: 1fr; padding-left: 1.1rem; }

  .sheet { margin: 0 calc(var(--gutter) * -1); border-left: 0; border-right: 0; }
  .cells { grid-template-columns: 1fr; }
  .choices--grid { grid-template-columns: 1fr; }
  .form__submit { grid-template-columns: 1fr; }
  .btn--submit { width: 100%; justify-content: space-between; }

  .footer__mast { flex-direction: column; align-items: flex-start; }
  .footer__grid,
  .footer__notice { grid-template-columns: 1fr; }
}

/* ==========================================================================
   STICKY REGISTER PILL
   ========================================================================== */
.pill {
  position: fixed;
  right: var(--gutter);
  bottom: 24px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 52px;
  padding: 0 1.4rem;
  border: 1px solid var(--gold);
  border-radius: 999px;
  background: rgba(11, 23, 48, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--gold-soft);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(24px);
  transition: opacity 320ms var(--ease), transform 320ms var(--ease), visibility 0s linear 320ms, color var(--t-fast) var(--ease);
}
.pill.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 320ms var(--ease), transform 320ms var(--ease), visibility 0s, color var(--t-fast) var(--ease);
}
.pill:hover { color: #fff; }
.pill__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gold);
}
@media (prefers-reduced-motion: no-preference) {
  .pill__dot { animation: pulse 2.4s var(--ease) infinite; }
  @keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.35; transform: scale(0.7); }
  }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1100px) {
  .hud__meta--top .hud__clock,
  .hud__meta--top .hud__sep:nth-of-type(2) { display: none; }
}

@media (max-width: 820px) {
  :root { --topbar-h: 64px; }

  .wordmark { font-size: 0.6rem; letter-spacing: 0.14em; gap: 0.6rem; }
  .event-mark { width: 24px; height: 24px; }
  .wordmark__text { display: flex; flex-direction: column; }
  .wordmark__dot { display: none; }

  .menu-btn { display: inline-flex; }
  .nav {
    position: fixed;
    inset: 0;
    z-index: -2;
    display: flex;
    align-items: center;
    padding: calc(var(--topbar-h) + 2rem) var(--gutter) 2rem;
    background: var(--navy-deep);
    opacity: 0;
    visibility: hidden;
    transition: opacity 320ms var(--ease), visibility 0s linear 320ms;
  }
  .nav.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity 320ms var(--ease), visibility 0s;
  }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  .nav__list li { border-bottom: 1px solid var(--hair); }
  .nav__link {
    width: 100%;
    min-height: 72px;
    padding: 0;
    font-size: clamp(1.8rem, 9vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    text-transform: none;
    color: var(--ink);
    gap: 1rem;
  }
  .nav__num { font-size: 0.75rem; }
  .nav__link::after { left: 0; right: auto; width: 3rem; bottom: 16px; }

  .hud__meta--top { right: var(--gutter); left: var(--gutter); justify-content: flex-end; top: calc(var(--topbar-h) + 18px); font-size: 0.6rem; }
  .hud__corner--tl, .hud__corner--tr { top: calc(var(--topbar-h) + 8px); }
  .hud__rail { right: 14px; top: 34%; height: 32%; }
  .hud__tick i { display: none; }
  .hud__scene { right: var(--gutter); bottom: 22px; font-size: 0.6rem; }
  .hud__reticle { left: 70%; top: 36%; width: 84px; height: 84px; margin: -42px 0 0 -42px; }

  .hero__block { right: calc(var(--gutter) + 12px); }
  .hero__block--1 { bottom: calc(var(--vb) + max(10vh, 72px)); }
  /* the aircraft sits in the upper half on phones, so mid-scroll copy moves below it */
  .hero__block--2,
  .hero__block--3 { top: auto; bottom: calc(var(--vb) + 12vh); transform: translate3d(0, var(--y, 0px), 0); }
  .hero__block--4 { bottom: calc(var(--vb) + 64px); }
  .hero__facts { font-size: 1.05rem; }
  .btn__sub { display: block; margin-top: 0.2rem; }
  .hero__cta { width: 100%; justify-content: space-between; }
  .notice__text { font-size: 0.98rem; }


  .pill { left: 50%; right: auto; transform: translate(-50%, 24px); }
  .pill.is-visible { transform: translate(-50%, 0); }
}

@media (max-width: 380px) {
  .wordmark { letter-spacing: 0.09em; gap: 0.5rem; }
  .event-mark { width: 20px; height: 20px; }
  .menu-btn__label { letter-spacing: 0.16em; }
}

@media (max-width: 420px) {
  .hud__meta--top span:not(:first-child) { display: none; }
  .hero__title { font-size: clamp(3rem, 15.5vw, 4.5rem); }
}

/* Short landscape viewports: keep block 4 inside the frame */
@media (max-height: 640px) and (min-width: 821px) {
  .notice__text { font-size: 0.95rem; }
  .hero__block--4 { bottom: calc(var(--vb) + 40px); }
  .hero__title { font-size: clamp(3rem, 15vh, 7rem); }
}

/* ==========================================================================
   THANKS PAGE
   ========================================================================== */
.thanks {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--topbar-h) + 4rem) var(--gutter) 4rem;
  position: relative;
}
.thanks__inner {
  position: relative;
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
}
.thanks__kicker {
  margin-bottom: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule-strong);
  font-style: italic;
  font-weight: 300;
  color: var(--gold-soft);
}
.thanks__title {
  font-size: clamp(3rem, 10vw, 8rem);
  font-weight: 800;
  line-height: 0.88;
  letter-spacing: -0.045em;
  margin-bottom: 2rem;
}
.thanks__title span { color: var(--gold); }
.thanks__copy { max-width: 46ch; margin-bottom: 2.5rem; }
.thanks__notice { margin-top: 3.5rem; max-width: 720px; }
.thanks__hud {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 1.5rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}
.topbar--static::before { opacity: 0; }
.topbar--static::after { opacity: 0.97; }
@media (max-width: 820px) {
  .thanks__hud span:last-child { display: none; }
}

/* ==========================================================================
   REDUCED MOTION: belt and braces
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
}