/* Hallmark · macrostructure: Marquee Hero → thermal descent · H1 knobs: size=xxl, alignment=left-bias
 * genre: atmospheric · theme: custom · vibe: "golden-hour water, high-desert dusk, engineered — then frost"
 * paper: oklch(13% 0.014 62) · accent: oklch(78% 0.150 62) · frost: oklch(93% 0.03 220)
 * display: Bodoni Moda (roman, opsz) · body: Instrument Sans (wdth axis) · mono: Martian Mono
 * axes: dark / didone-serif / chromatic-amber ↔ chromatic-ice
 * nav: N5 floating pill · footer: Ft5 statement (film wordmark band)
 * enrichment: client footage scroll-scrubbed · WebGL raymarched droplet (freezes + swells 9% on scroll)
 *             · scroll-filled air-line schematic · two interactive canvas rigs
 * v2 2026-09-08 · pre-emit critique: P5 H5 E5 S5 R4 V5
 */

/* ══════════════ N5 · FLOATING PILL ═══════════════════════════════════════ */

.nav {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-nav);
  padding: var(--space-md) clamp(0.75rem, 3vw, 1.5rem);
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.nav__pill {
  pointer-events: auto;
  position: relative;
  width: 100%;
  max-width: 70rem;
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-md);
  border: var(--rule-hair) solid transparent;
  border-radius: var(--radius-pill);
  background: transparent;
  transition:
    background-color var(--dur-mid) var(--ease-out),
    border-color var(--dur-mid) var(--ease-out),
    box-shadow var(--dur-mid) var(--ease-out);
}
.nav[data-stuck="true"] .nav__pill {
  background: color-mix(in oklab, var(--color-paper) 78%, transparent);
  border-color: color-mix(in oklab, var(--color-thermal) 18%, var(--color-rule-2));
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  box-shadow: 0 18px 50px -24px color-mix(in oklab, var(--color-paper-sunk) 80%, transparent);
}

.nav__mark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  flex: 0 0 auto;
  min-height: 44px;
}
.nav__glyph {
  width: 20px; height: 20px;
  color: var(--color-thermal);
  flex: 0 0 auto;
  transition: color 600ms linear;
}
/* the drop fills as the page cools — the nav carries the temperature too */
.nav__glyph path:first-child {
  fill: color-mix(in oklab, var(--color-thermal) calc((1 - var(--temp)) * 85%), transparent);
  transition: fill 600ms linear;
}
.nav__word {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 24;
  font-weight: 500;
  font-size: var(--text-lg);
  letter-spacing: 0;
  white-space: nowrap;
}
.nav__word em { font-style: normal; color: var(--color-thermal); transition: color 600ms linear; }

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  margin-inline-start: auto;
  font-size: var(--text-sm);
  font-weight: 600;
}
.nav__links a {
  position: relative;
  color: var(--color-ink-2);
  white-space: nowrap;
  padding-block: var(--space-2xs);
  transition: color var(--dur-short) var(--ease-out);
}
.nav__links a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 1px;
  background: var(--color-thermal);
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform var(--dur-mid) var(--ease-out);
}
.nav__links a:hover, .nav__links a:focus-visible { color: var(--color-ink); }
.nav__links a:hover::after, .nav__links a:focus-visible::after,
.nav__links a[aria-current="true"]::after { transform: scaleX(1); transform-origin: 0 50%; }

.nav__actions { display: flex; align-items: center; gap: var(--space-sm); flex: 0 0 auto; }
.nav__tel {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--color-ink);
  white-space: nowrap;
  padding: var(--space-2xs) var(--space-xs);
  transition: color var(--dur-short) var(--ease-out);
}
.nav__tel:hover { color: var(--color-accent); }
.nav__cta { min-height: 40px; padding-inline: var(--space-md); }

.nav__burger {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  margin-inline-start: auto;
  background: none;
  border: none;
  cursor: pointer;
}
.nav__burger span {
  display: block;
  width: 19px; height: 1.5px;
  background: var(--color-ink);
  transition: transform var(--dur-short) var(--ease-out);
}
.nav__burger[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child  { transform: translateY(-3.25px) rotate(-45deg); }

.navsheet {
  pointer-events: auto;
  position: absolute;
  inset-block-start: calc(100% - var(--space-xs));
  inset-inline: clamp(0.75rem, 3vw, 1.5rem);
  display: grid;
  gap: var(--space-2xs);
  padding: var(--space-sm);
  background: color-mix(in oklab, var(--color-paper-2) 96%, transparent);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transform-origin: 50% 0;
  animation: sheet-in 320ms var(--ease-out);
}
@keyframes sheet-in { from { opacity: 0; transform: translateY(-6px) scale(0.98); } }
.navsheet a {
  min-height: 46px;
  display: flex;
  align-items: center;
  padding-inline: var(--space-md);
  border-radius: var(--radius-md);
  font-weight: 600;
  color: var(--color-ink-2);
  white-space: nowrap;
}
.navsheet a:hover, .navsheet a:focus-visible { background: var(--color-paper-3); color: var(--color-ink); }
.navsheet__tel {
  margin-block-start: var(--space-2xs);
  background: var(--color-accent) !important;
  color: var(--color-accent-ink) !important;
  font-weight: 800;
  justify-content: center;
}

@media (max-width: 62rem) { .nav__links, .nav__tel { display: none; } }
@media (max-width: 40rem) { .nav__cta { display: none; } .nav__burger { display: flex; } }
@media (min-width: 40.0625rem) { .navsheet { display: none !important; } }

/* ══════════════ H1 · MARQUEE — the scroll-scrubbed film ══════════════════ */

.film { position: relative; height: 460vh; }
.film__stage {
  position: sticky;
  inset-block-start: 0;
  height: 100vh;
  height: 100svh;
  overflow: clip;
  isolation: isolate;
  display: grid;
  align-items: end;
}
.film__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 46%;
  background: var(--color-paper-sunk);
}
.film__grade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to top,
      color-mix(in oklab, var(--color-paper) 94%, transparent) 0%,
      color-mix(in oklab, var(--color-paper) 62%, transparent) 26%,
      transparent 58%),
    linear-gradient(to bottom,
      color-mix(in oklab, var(--color-paper) 72%, transparent) 0%,
      transparent 34%),
    radial-gradient(120% 90% at 50% 50%, transparent 55%,
      color-mix(in oklab, var(--color-paper-sunk) 55%, transparent) 100%);
}
.film__grain {
  position: absolute;
  inset: -50%;
  z-index: 2;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Frost creeps in from the corners on the "Ice doesn't ask" beat, and only
   then — the film's own light stays untouched on every other beat. */
.film__frost {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(90% 80% at 50% 50%, transparent 52%,
      color-mix(in oklab, var(--color-frost) 34%, transparent) 100%);
  transition: opacity 1200ms var(--ease-out);
}
/* the crystals themselves are drawn by js/frost.js on this canvas; the layer's
   own gradient is the cold vignette they grow out of */
.film__frost-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 900ms var(--ease-out);
  mix-blend-mode: screen;
}
.film__stage:has(.film__beat[data-beat="2"].is-on) .film__frost { opacity: 1; }
.film__stage:has(.film__beat[data-beat="2"].is-on) .film__frost-canvas { opacity: 1; }

.film__beats {
  position: relative;
  z-index: 3;
  padding-block-end: clamp(4.5rem, 11vh, 8rem);
  display: grid;
}
.film__beats > .shell { display: grid; }
.film__beat {
  grid-area: 1 / 1;
  align-self: end;
  max-width: 20ch;
  font-family: var(--font-display);
  font-variation-settings: "opsz" 96;
  font-weight: 400;
  font-size: var(--text-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
  text-shadow: 0 2px 30px color-mix(in oklab, var(--color-paper) 70%, transparent);
  opacity: 0;
  transform: translateY(18px);
  filter: blur(6px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out),
              filter var(--dur-slow) var(--ease-out);
  pointer-events: none;
}
.film__beat.is-on { opacity: 1; transform: none; filter: none; pointer-events: auto; }
.film__beat[data-beat="2"] { color: var(--color-frost); }

.film__beat--close {
  display: grid;
  justify-items: start;
  gap: var(--space-md);
  max-width: 34ch;
  text-shadow: none;
}
.film__close-line { margin: 0; color: var(--color-ink-2); }

.film__meter {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: 4;
  height: 2px;
  background: color-mix(in oklab, var(--color-ink) 12%, transparent);
}
.film__meter-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--color-accent), var(--color-frost));
  transform-origin: left;
}

.film__hint {
  position: absolute;
  inset-block-end: var(--space-lg);
  inset-inline-end: clamp(1.15rem, 4.5vw, 3rem);
  z-index: 4;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.7em;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-muted);
  transition: opacity var(--dur-mid) var(--ease-out);
}
.film__hint::after {
  content: "";
  width: 1px; height: 2.4em;
  background: linear-gradient(to bottom, var(--color-accent), transparent);
  animation: hint-drip 1.8s var(--ease-in-out) infinite;
}
@keyframes hint-drip { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
.film[data-progress="moved"] .film__hint { opacity: 0; }

/* poster fallback */
.film[data-film-state="poster"] { height: 100vh; height: 100svh; }
.film[data-film-state="poster"] .film__stage { background:
  var(--color-paper-sunk) url("../assets/img/hero-poster.jpg") center/cover no-repeat; }
.film[data-film-state="poster"] .film__meter,
.film[data-film-state="poster"] .film__hint { display: none; }
.film[data-film-state="poster"] .film__beat { display: none; }
.film[data-film-state="poster"] .film__beat[data-beat="0"],
.film[data-film-state="poster"] .film__beat--close {
  display: grid; grid-area: auto; opacity: 1; transform: none; filter: none;
}
.film[data-film-state="poster"] .film__beats > .shell { gap: var(--space-xl); align-content: end; }

/* ══════════════ The thermal seam — where the film hands off to the page ══ */

.seam {
  position: relative;
  height: var(--rule-thick);
  margin: 0;
  border: 0;
  background: linear-gradient(90deg,
    var(--color-accent) 0%, var(--color-accent) 46%,
    var(--color-frost) 54%, var(--color-glacier) 100%);
  overflow: hidden;
}
.seam::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in oklab, white 70%, transparent), transparent);
  width: 18%;
  animation: seam-sweep 6s var(--ease-in-out) infinite;
}
@keyframes seam-sweep { from { transform: translateX(-120%); } to { transform: translateX(680%); } }

/* ══════════════ Spotlight surfaces — a pointer-tracked light on the edge ═ */

.spot {
  position: relative;
  isolation: isolate;
}
.spot::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(360px circle at var(--px, -400px) var(--py, -400px),
    color-mix(in oklab, var(--color-thermal) 70%, transparent) 0%,
    color-mix(in oklab, var(--color-thermal) 18%, transparent) 40%,
    transparent 72%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-mid) var(--ease-out);
  z-index: 2;
}
.spot:hover::before, .spot:focus-within::before { opacity: 1; }
.spot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(520px circle at var(--px, -400px) var(--py, -400px),
    color-mix(in oklab, var(--color-thermal) 7%, transparent), transparent 60%);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-mid) var(--ease-out);
  z-index: 0;
}
.spot:hover::after { opacity: 1; }
.spot > * { position: relative; z-index: 1; }

/* ══════════════ THE STAKE — the droplet that freezes ═══════════════════ */

.stake {
  position: relative;
  /* the runway: three viewports of scroll, one viewport of stage */
  height: 320vh;
}
.stake__stage {
  position: sticky;
  inset-block-start: 0;
  height: 100vh;
  height: 100svh;
  overflow: clip;
  display: grid;
  align-items: center;
  padding-block-start: 4.5rem;   /* clear the nav pill */
}
.stake__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(var(--space-lg), 4vw, var(--space-3xl));
}
.stake__copy {
  display: grid;
  gap: var(--space-md);
  justify-items: start;
  padding-block: var(--space-md);
}
.stake__title { font-size: clamp(2.5rem, 1rem + 4.4vw, 5rem); max-width: 14ch; }
.stake__title strong {
  font-weight: 600;
  color: var(--color-thermal);
  transition: color 600ms linear;
}
.stake__lede { max-width: 46ch; font-size: var(--text-lg); }

/* live gauge — the numbers are scroll-driven, not invented */
.gauge {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-xs) var(--space-xl);
  align-items: baseline;
  margin: 0;
  padding-block-start: var(--space-md);
  border-block-start: var(--rule-hair) solid var(--color-rule);
  min-width: min(100%, 26rem);
}
.gauge__big {
  grid-row: 1 / 4;
  align-self: center;
  font-family: var(--font-display);
  font-variation-settings: "opsz" 96;
  font-weight: 400;
  font-size: clamp(3.2rem, 7vw, 5.6rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--color-ink);
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
  transition: color 400ms linear;
}
.gauge__big small {
  font-size: 0.42em;
  vertical-align: top;
  margin-inline-start: 0.08em;
  color: var(--color-muted);
  font-variation-settings: "opsz" 40;
}
.stake[data-phase="ice"] .gauge__big, .stake[data-phase="split"] .gauge__big { color: var(--color-frost); }
.gauge__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
}
.gauge__row dt { color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.12em; font-size: var(--text-2xs); }
.gauge__row dd { margin: 0; color: var(--color-ink); font-weight: 500; }
.stake[data-phase="split"] .gauge__row--stress dd { color: var(--color-ember-text); }

.stake__scene {
  position: relative;
  aspect-ratio: 1;
  max-height: 74svh;
  width: 100%;
  justify-self: center;
  border-radius: 50%;
}
.stake__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}
/* the bloom behind the drop — warms and cools with the story */
.stake__halo {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 55%,
    color-mix(in oklab, var(--color-thermal) 34%, transparent) 0%,
    color-mix(in oklab, var(--color-thermal-bloom) 18%, transparent) 40%,
    transparent 70%);
  filter: blur(28px);
  transition: background 600ms linear;
  pointer-events: none;
}
.stake__caption {
  position: absolute;
  inset-block-end: -0.4rem;
  inset-inline: 0;
  text-align: center;
  color: var(--color-muted);
  transition: opacity var(--dur-mid) var(--ease-out);
}
.stake[data-phase="split"] .stake__caption { opacity: 0; }
.stake[data-webgl="off"] .stake__canvas { display: none; }
.stake[data-webgl="off"] .stake__halo { inset: 22%; filter: blur(18px); }

@media (max-width: 60rem) {
  .stake { height: 260vh; }
  .stake__stage { padding-block-start: 4.2rem; align-items: start; }
  .stake__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: start;
    gap: 0;
  }
  .stake__scene { width: min(100%, 40svh); max-height: 40svh; order: -1; }
  .stake__copy { padding-block: var(--space-sm) 5rem; gap: var(--space-sm); }
  .stake__title { font-size: clamp(2rem, 8vw, 2.6rem); }
  .stake__lede { font-size: var(--text-sm); line-height: 1.45; }
  .gauge { grid-template-columns: auto 1fr; gap: var(--space-2xs) var(--space-lg); padding-block-start: var(--space-sm); }
  .gauge__big { font-size: 2.6rem; }
  .stake__caption { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .stake { height: auto; }
  .stake__stage { position: static; height: auto; padding-block: var(--space-3xl); }
  .stake__caption { display: none; }
}

/* ══════════════ Shared: interactive rigs ════════════════════════════════ */

.rig {
  margin: 0;
  display: grid;
  gap: clamp(var(--space-lg), 3vw, var(--space-2xl));
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  align-items: start;
  padding: clamp(var(--space-md), 2.4vw, var(--space-xl));
  background: color-mix(in oklab, var(--color-paper-2) 88%, transparent);
  border: var(--rule-hair) solid var(--color-rule-2);
  border-radius: var(--radius-xl);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.rig__canvas-wrap {
  position: relative;
  min-width: 0;
  border-radius: var(--radius-lg);
  overflow: clip;
  background: var(--color-paper-sunk);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-ink) 4%, transparent);
}
.rig__canvas { width: 100%; height: auto; aspect-ratio: 16 / 9; display: block; touch-action: pan-y; }
.rig--coverage .rig__canvas { aspect-ratio: 4 / 3; }
.rig__verdict {
  position: absolute;
  inset-block-start: var(--space-sm);
  inset-inline-start: var(--space-sm);
  display: grid;
  gap: 1px;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-md);
  background: color-mix(in oklab, var(--color-paper) 76%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.rig__verdict-val {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 40;
  font-weight: 500;
  font-size: var(--text-xl);
  line-height: 1.1;
  color: var(--color-ink);
  transition: color var(--dur-mid) var(--ease-out);
}
.rig[data-alarm="warn"] .rig__verdict-val { color: var(--color-accent); }
.rig[data-alarm="fail"] .rig__verdict-val { color: var(--color-ember-text); }

.rig__controls { display: grid; gap: var(--space-lg); min-width: 0; }
.rig__slider { display: grid; gap: var(--space-xs); }
.rig__slider input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 44px; background: transparent; cursor: grab;
}
.rig__slider input[type="range"]:active { cursor: grabbing; }
.rig__slider input[type="range"]::-webkit-slider-runnable-track {
  height: 3px; border-radius: 2px;
  background: linear-gradient(to right,
    var(--color-accent) 0 var(--fill, 50%),
    var(--color-rule) var(--fill, 50%) 100%);
}
.rig__slider input[type="range"]::-moz-range-track { height: 3px; border-radius: 2px; background: var(--color-rule); }
.rig__slider input[type="range"]::-moz-range-progress { height: 3px; border-radius: 2px; background: var(--color-accent); }
.rig__slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px; height: 22px; margin-top: -9.5px;
  border-radius: 50%;
  background: var(--color-accent);
  border: 3px solid var(--color-paper-2);
  box-shadow: 0 0 0 0 color-mix(in oklab, var(--color-accent) 40%, transparent);
  transition: transform var(--dur-short) var(--ease-out), box-shadow var(--dur-mid) var(--ease-out);
}
.rig__slider input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--color-accent); border: 3px solid var(--color-paper-2);
}
.rig__slider input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.09); box-shadow: 0 0 0 8px color-mix(in oklab, var(--color-accent) 18%, transparent); }

.rig__readout { display: grid; gap: 0; margin: 0; }
.rig__row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-md); padding-block: var(--space-xs);
  border-block-end: var(--rule-hair) solid var(--color-rule-2);
}
.rig__row:last-child { border-block-end: 0; }
.rig__row dt { font-size: var(--text-sm); color: var(--color-muted); }
.rig__row dd {
  margin: 0; font-family: var(--font-mono); font-size: var(--text-xs);
  font-weight: 500; color: var(--color-ink); text-align: end;
}
.rig__row--stress dd { transition: color var(--dur-mid) var(--ease-out); }
.rig[data-alarm="warn"] .rig__row--stress dd { color: var(--color-accent); }
.rig[data-alarm="fail"] .rig__row--stress dd { color: var(--color-ember-text); }
.rig__note { font-size: var(--text-sm); line-height: 1.55; color: var(--color-muted); max-width: 42ch; }

@media (max-width: 60rem) { .rig { grid-template-columns: minmax(0, 1fr); } }

/* ══════════════ THE FREEZE (pipe rig) ══════════════════════════════════ */

.freeze { padding-block: clamp(var(--space-2xl), 8vh, var(--space-4xl)) var(--space-3xl); }
.freeze__head {
  display: grid;
  gap: var(--space-lg);
  margin-block-end: clamp(var(--space-xl), 5vh, var(--space-3xl));
  max-width: 62rem;
}
.freeze__title { font-size: var(--text-display-s); max-width: 16ch; }
.freeze__lede { max-width: 54ch; }
.freeze__after {
  margin-block-start: var(--space-2xl);
  display: grid; gap: var(--space-md); justify-items: start; max-width: 58ch;
}

/* ══════════════ BOOKING ════════════════════════════════════════════════ */

.book {
  position: relative;
  padding-block: clamp(var(--space-3xl), 10vh, var(--space-4xl));
  background: var(--color-paper-sunk);
  border-block: var(--rule-hair) solid var(--color-rule-2);
  overflow: clip;
}
/* the thaw: a warm light returns behind the booking, because this is where
   the visitor solves the problem the last two sections set up */
.book::before {
  content: "";
  position: absolute;
  inset: auto -10% -30% -10%;
  height: 70%;
  background: radial-gradient(60% 60% at 50% 100%,
    color-mix(in oklab, var(--color-accent) 16%, transparent), transparent 70%);
  pointer-events: none;
}
.book__grid {
  position: relative;
  display: grid;
  gap: clamp(var(--space-xl), 5vw, var(--space-4xl));
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  align-items: start;
}
@media (max-width: 62rem) { .book__grid { grid-template-columns: minmax(0, 1fr); } }

.book__pitch { display: grid; gap: var(--space-lg); }
.book__title { font-size: var(--text-display-s); }

.book__tel {
  display: grid; gap: var(--space-2xs); justify-items: start;
  padding-block: var(--space-sm);
  border-block: var(--rule-hair) solid var(--color-rule);
  transition: border-color var(--dur-short) var(--ease-out);
}
.book__tel strong {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(2rem, 4.9vw, 2.9rem);
  line-height: 1.05;
  color: var(--color-accent);
  letter-spacing: -0.005em;
  font-variant-numeric: lining-nums tabular-nums;
}
.book__tel strong .tel-sep {
  margin-inline: 0.04em;
  opacity: 0.85;
}
.book__tel:hover { border-color: var(--color-accent); }

.book__facts { display: grid; gap: var(--space-md); }
.book__facts li {
  display: grid; gap: var(--space-2xs);
  font-size: var(--text-sm); line-height: 1.55; color: var(--color-ink-2); max-width: 46ch;
}

.book__form {
  display: grid;
  gap: var(--space-md);
  padding: clamp(var(--space-lg), 3vw, var(--space-xl));
  background: color-mix(in oklab, var(--color-paper-2) 92%, transparent);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-xl);
  box-shadow: 0 40px 80px -50px color-mix(in oklab, var(--color-paper-sunk) 100%, transparent);
}

.field { display: grid; gap: var(--space-2xs); min-width: 0; }
.field label { font-size: var(--text-sm); font-weight: 600; color: var(--color-ink-2); }
.field__opt { color: var(--color-muted); font-weight: 400; }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-paper);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-md);
  color: var(--color-ink);
  font-size: var(--text-base);
  transition: border-color var(--dur-short) var(--ease-out),
              box-shadow var(--dur-short) var(--ease-out);
}
.field textarea { min-height: 84px; resize: vertical; line-height: 1.5; padding-block: var(--space-sm); }
.field select { appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 17px) 22px, calc(100% - 12px) 22px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-inline-end: var(--space-2xl);
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--color-neutral); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  border-color: var(--color-accent);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-accent) 22%, transparent);
}
.field[data-invalid="true"] input,
.field[data-invalid="true"] select,
.field[data-invalid="true"] textarea { border-color: var(--color-ember); }
.field__err { font-size: var(--text-sm); color: var(--color-ember-text); font-weight: 600; }
.field--split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-md); }
.field--split > div { display: grid; gap: var(--space-2xs); min-width: 0; }
@media (max-width: 30rem) { .field--split { grid-template-columns: minmax(0, 1fr); } }

.book__status { font-size: var(--text-sm); font-weight: 600; color: var(--color-accent); min-height: 1.4em; }
.book__fineprint { font-size: var(--text-xs); line-height: 1.5; color: var(--color-muted); }

/* ══════════════ SERVICES · spec sheet with a ghost word ═════════════════ */

.services { padding-block: clamp(var(--space-3xl), 11vh, var(--space-4xl)); }
.services__head {
  display: grid;
  gap: var(--space-md);
  margin-block-end: clamp(var(--space-xl), 5vh, var(--space-2xl));
}
.services__title { font-size: var(--text-display-s); max-width: 20ch; }

.svc { display: grid; }
.svc__item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 16rem) minmax(0, 1fr) auto;
  gap: clamp(var(--space-md), 3vw, var(--space-2xl));
  align-items: start;
  padding-block: clamp(var(--space-lg), 3.5vh, var(--space-xl));
  padding-inline: var(--space-md);
  margin-inline: calc(var(--space-md) * -1);
  border-block-start: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-md);
  overflow: clip;
  transition: background-color var(--dur-mid) var(--ease-out), transform var(--dur-mid) var(--ease-out);
}
.svc__item:last-child { border-block-end: var(--rule-hair) solid var(--color-rule); }
.svc__item:hover { background: color-mix(in oklab, var(--color-paper-2) 70%, transparent); }
/* the ghost: one word from the row, set enormous behind it, sliding in on
   hover. Encodes the row's subject — it isn't a decoration, it's the index. */
.svc__ghost {
  position: absolute;
  inset-inline-end: 1%;
  inset-block-start: 50%;
  translate: 0 -50%;
  font-family: var(--font-display);
  font-variation-settings: "opsz" 96;
  font-weight: 700;
  font-size: clamp(5rem, 14vw, 12rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in oklab, var(--color-thermal) 30%, transparent);
  opacity: 0;
  transform: translateX(40px);
  transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}
.svc__item:hover .svc__ghost { opacity: 1; transform: none; }
.svc__item--lead { border-block-start-color: var(--color-accent); }
.svc__item--lead .svc__key h3 { color: var(--color-accent); }

.svc__key { position: relative; display: grid; gap: var(--space-2xs); min-width: 0; }
.svc__key h3 { font-size: var(--text-2xl); line-height: 1.05; }
.svc__season {
  display: inline-flex; align-items: center; gap: 0.5em;
  color: var(--color-accent);
}
.svc__season::before {
  content: "";
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 0 color-mix(in oklab, var(--color-accent) 60%, transparent);
  animation: season-pulse 2.4s var(--ease-out) infinite;
}
@keyframes season-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--color-accent) 60%, transparent); } 100% { box-shadow: 0 0 0 10px transparent; } }

.svc__val { position: relative; min-width: 0; }
.svc__val p { color: var(--color-ink-2); max-width: 52ch; line-height: 1.6; }

.svc__go {
  position: relative;
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  min-height: 44px; padding-inline: var(--space-sm);
  font-size: var(--text-sm); font-weight: 700; color: var(--color-accent);
  white-space: nowrap;
  transition: transform var(--dur-short) var(--ease-out);
}
.svc__go:hover { transform: translateX(3px); }

/* the peek: one floating card of the client's own footage, following the
   pointer across whichever row it's over (js/peek.js) */
.peek {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: var(--z-raised);
  width: clamp(220px, 22vw, 320px);
  aspect-ratio: 16 / 9;
  margin: 0;                       /* js/peek.js positions it with transform only */
  border-radius: var(--radius-lg);
  overflow: clip;
  border: var(--rule-hair) solid color-mix(in oklab, var(--color-ink) 14%, transparent);
  box-shadow:
    0 30px 60px -20px color-mix(in oklab, var(--color-paper-sunk) 90%, transparent),
    0 0 0 1px color-mix(in oklab, var(--color-accent) 12%, transparent);
  background: var(--color-paper-sunk);
  pointer-events: none;
  opacity: 0;
  scale: 0.92;
  transition: opacity var(--dur-mid) var(--ease-out), scale var(--dur-long) var(--ease-spring);
  will-change: transform;
}
.peek[data-show="true"] { opacity: 1; scale: 1; }
.peek video { width: 100%; height: 100%; object-fit: cover; display: block; }
.peek::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, color-mix(in oklab, var(--color-paper-sunk) 45%, transparent), transparent 45%);
  pointer-events: none;
}

/* coarse pointers: the clip lives in the row */
.svc__clip {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-md);
  margin-block: var(--space-xs) var(--space-2xs);
  background: var(--color-paper-sunk);
  border: var(--rule-hair) solid var(--color-rule-2);
}

@media (max-width: 56rem) {
  .svc__item { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-sm) var(--space-md); }
  .svc__key { grid-column: 1 / -1; }
  .svc__go { justify-self: start; padding-inline: 0; }
  .svc__ghost { display: none; }
}

/* ══════════════ COVERAGE ═══════════════════════════════════════════════ */

.coverage {
  padding-block: clamp(var(--space-3xl), 11vh, var(--space-4xl));
  background: var(--color-paper-sunk);
  border-block: var(--rule-hair) solid var(--color-rule-2);
}
.coverage__head {
  display: grid; gap: var(--space-lg); max-width: 60rem;
  margin-block-end: clamp(var(--space-xl), 5vh, var(--space-2xl));
}
.coverage__title { font-size: var(--text-display-s); max-width: 18ch; }
.rig--coverage { background: color-mix(in oklab, var(--color-paper) 90%, transparent); }

/* ══════════════ PROCESS · the air line ═════════════════════════════════ */

.process { padding-block: clamp(var(--space-3xl), 11vh, var(--space-4xl)) var(--space-3xl); }
.process__head { display: grid; gap: var(--space-md); max-width: 60rem; }
.process__title { font-size: var(--text-display-s); max-width: 18ch; }

.process__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(var(--space-xl), 5vw, var(--space-4xl));
  align-items: start;
  margin-block-start: clamp(var(--space-xl), 5vh, var(--space-3xl));
}
@media (max-width: 60rem) { .process__grid { grid-template-columns: minmax(0, 1fr); } }

.steps {
  --rail-x: 0.6rem;
  --dot: 13px;
  position: relative;
  display: grid;
  gap: 0;
}
.steps::before {
  content: "";
  position: absolute; inset-block: 0; inset-inline-start: var(--rail-x);
  width: 2px; background: var(--color-rule);
}
.steps::after {
  content: "";
  position: absolute; inset-block-start: 0; inset-inline-start: var(--rail-x);
  width: 2px;
  height: calc(var(--steps-progress, 0) * 100%);
  background: linear-gradient(to bottom, var(--color-accent), var(--color-frost));
  transition: height 120ms linear;
}
@media (max-width: 44rem) { .steps::before, .steps::after { display: none; } }
.step {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 4.5rem) minmax(0, 1fr);
  gap: var(--space-md) clamp(var(--space-md), 3vw, var(--space-xl));
  padding-block: clamp(var(--space-lg), 3.5vh, var(--space-xl));
  border-block-start: var(--rule-hair) solid var(--color-rule);
  align-items: start;
  transition: opacity var(--dur-mid) var(--ease-out);
}
.step:last-child { border-block-end: var(--rule-hair) solid var(--color-rule); }
.step[data-reached="false"] { opacity: 0.55; }
.step__n {
  position: relative;
  color: var(--color-accent);
  font-size: var(--text-xs);
  padding-block-start: 0.35em;
  padding-inline-start: 1.6rem;
}
.step__n::before {
  content: "";
  position: absolute;
  inset-inline-start: calc(var(--rail-x) + 1px - var(--dot) / 2);
  inset-block-start: 0.72em;
  width: var(--dot); height: var(--dot);
  border-radius: 50%;
  background: var(--color-paper);
  border: 2px solid var(--color-rule);
  transition: background-color var(--dur-mid) var(--ease-out),
              border-color var(--dur-mid) var(--ease-out),
              box-shadow var(--dur-mid) var(--ease-out);
}
.step[data-reached="true"] .step__n::before {
  background: var(--color-accent);
  border-color: var(--color-accent);
  box-shadow: 0 0 18px color-mix(in oklab, var(--color-accent) 60%, transparent);
}
@media (max-width: 44rem) {
  .step__n { padding-inline-start: 0; }
  .step__n::before { display: none; }
}
.step h3 { font-size: var(--text-2xl); margin-block-end: var(--space-xs); }
.step p { color: var(--color-ink-2); max-width: 58ch; line-height: 1.6; }
.step > h3, .step > p { grid-column: 2; }
@media (max-width: 44rem) {
  .step { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
  .step > h3, .step > p { grid-column: 1; }
  .step__n { padding-block-start: 0; }
}

/* the schematic — pinned beside the steps, fills with air as they pass */
.airline {
  position: sticky;
  inset-block-start: calc(6.5rem + 2vh);
  display: grid;
  gap: var(--space-sm);
  padding: clamp(var(--space-md), 2.4vw, var(--space-xl));
  background: color-mix(in oklab, var(--color-paper-2) 88%, transparent);
  border: var(--rule-hair) solid var(--color-rule-2);
  border-radius: var(--radius-xl);
}
.airline__svg { width: 100%; height: auto; overflow: visible; }
.airline__svg text {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  fill: var(--color-muted);
}
.airline__pipe { fill: none; stroke: var(--color-rule); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.airline__water {
  fill: none; stroke: var(--color-glacier); stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 0;
  opacity: calc(1 - var(--drain, 0));
  transition: opacity 300ms linear;
}
.airline__air {
  fill: none; stroke: var(--color-accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--air, 0));
  filter: drop-shadow(0 0 5px color-mix(in oklab, var(--color-accent) 70%, transparent));
}
.airline__fitting { fill: var(--color-paper-3); stroke: var(--color-neutral); stroke-width: 1.5; }
.airline__brass { fill: var(--color-accent-dim); stroke: var(--color-accent); stroke-width: 1; }
.airline__head { fill: var(--color-paper); stroke: var(--color-neutral); stroke-width: 1.5; transition: stroke var(--dur-mid) var(--ease-out); }
.airline__mist { fill: none; stroke: var(--color-frost); stroke-width: 1.2; stroke-linecap: round; opacity: 0; }
.airline__zone[data-live="true"] .airline__head { stroke: var(--color-accent); }
.airline__zone[data-live="true"] .airline__mist { animation: mist 1.4s var(--ease-out) infinite; }
.airline__zone[data-live="true"] .airline__mist:nth-child(2) { animation-delay: 0.25s; }
.airline__zone[data-live="true"] .airline__mist:nth-child(3) { animation-delay: 0.5s; }
.airline__zone[data-done="true"] .airline__mist { animation: none; opacity: 0; }
.airline__zone[data-done="true"] .airline__head { stroke: var(--color-frost); }
@keyframes mist { 0% { opacity: 0; transform: translateY(0) scale(0.6); } 25% { opacity: 0.9; } 100% { opacity: 0; transform: translateY(-14px) scale(1.4); } }
.airline__zone .airline__mist { transform-box: fill-box; transform-origin: 50% 100%; }
.airline__ctl { fill: var(--color-paper-sunk); stroke: var(--color-neutral); stroke-width: 1.5; }
.airline__ctl-lamp { fill: var(--color-rule); transition: fill var(--dur-mid) var(--ease-out); }
.airline[data-rain="true"] .airline__ctl-lamp { fill: var(--color-glacier); filter: drop-shadow(0 0 4px var(--color-glacier)); }
.airline__gauge-needle { transform-box: fill-box; transform-origin: 50% 100%; transform: rotate(calc(-60deg + var(--air, 0) * 100deg)); transition: transform 200ms var(--ease-out); stroke: var(--color-ember-text); stroke-width: 1.5; stroke-linecap: round; }
.airline__legend {
  display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg);
  padding-block-start: var(--space-xs);
  border-block-start: var(--rule-hair) solid var(--color-rule-2);
}
.airline__legend span { display: inline-flex; align-items: center; gap: 0.5em; }
.airline__legend i { width: 14px; height: 3px; border-radius: 2px; }
.airline__legend i.is-water { background: var(--color-glacier); }
.airline__legend i.is-air { background: var(--color-accent); }
/* On a phone the schematic goes first and rides the top of the viewport while
   the steps scroll beneath it — so the animation the steps drive is still
   visible while you read them. */
@media (max-width: 60rem) {
  .airline {
    order: -1;
    inset-block-start: 4.4rem;
    z-index: 2;
    padding: var(--space-sm);
    background: color-mix(in oklab, var(--color-paper) 94%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  .airline__legend { display: none; }
}

/* ══════════════ FAQ ════════════════════════════════════════════════════ */

.faq {
  padding-block: clamp(var(--space-3xl), 10vh, var(--space-4xl));
  background: var(--color-paper-sunk);
  border-block: var(--rule-hair) solid var(--color-rule-2);
}
.faq__head { display: grid; gap: var(--space-md); margin-block-end: clamp(var(--space-lg), 4vh, var(--space-2xl)); }
.faq__title { font-size: var(--text-display-s); }

.qa { display: grid; }
.qa__item { border-block-end: var(--rule-hair) solid var(--color-rule); }
.qa__item:first-child { border-block-start: var(--rule-hair) solid var(--color-rule); }
.qa__item summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-md); min-height: 64px; padding-block: var(--space-md);
  cursor: pointer; list-style: none;
  font-family: var(--font-display);
  font-variation-settings: "opsz" 40;
  font-weight: 500;
  font-size: var(--text-xl);
  line-height: 1.25;
  transition: color var(--dur-short) var(--ease-out), padding-inline-start var(--dur-mid) var(--ease-out);
}
.qa__item summary::-webkit-details-marker { display: none; }
.qa__item summary:hover { color: var(--color-accent); padding-inline-start: var(--space-xs); }
.qa__item summary i { position: relative; flex: 0 0 auto; width: 15px; height: 15px; }
.qa__item summary i::before, .qa__item summary i::after {
  content: "";
  position: absolute; inset-block-start: 50%; inset-inline-start: 0;
  width: 15px; height: 1.5px; margin-block-start: -0.75px;
  background: var(--color-accent);
  transition: transform var(--dur-mid) var(--ease-out);
}
.qa__item summary i::after { transform: rotate(90deg); }
.qa__item[open] summary i::after { transform: rotate(0deg); }
.qa__body { padding-block-end: var(--space-lg); max-width: 62ch; }
.qa__body p { color: var(--color-ink-2); line-height: 1.65; animation: qa-in 420ms var(--ease-out); }
@keyframes qa-in { from { opacity: 0; transform: translateY(-4px); } }

/* ══════════════ CLOSE ══════════════════════════════════════════════════ */

.close {
  position: relative;
  padding-block: clamp(var(--space-4xl), 18vh, var(--space-5xl));
  text-align: center;
  overflow: clip;
}
/* the thaw ring — a slow warm pulse under the final ask */
.close::before {
  content: "";
  position: absolute;
  inset-inline-start: 50%; inset-block-start: 50%;
  width: min(120vw, 60rem); aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle,
    color-mix(in oklab, var(--color-accent) 18%, transparent) 0%,
    color-mix(in oklab, var(--color-ember) 10%, transparent) 38%,
    transparent 66%);
  animation: thaw 7s var(--ease-in-out) infinite alternate;
  pointer-events: none;
}
@keyframes thaw { from { transform: scale(0.86); opacity: 0.7; } to { transform: scale(1.06); opacity: 1; } }
.close > .shell { position: relative; }
.close__kicker { justify-content: center; margin-block-end: var(--space-md); }
.close__title { font-size: var(--text-display-xl); margin-block-end: var(--space-xl); }
.close__actions { display: flex; flex-wrap: wrap; gap: var(--space-md); justify-content: center; }

/* ══════════════ Ft5 · STATEMENT FOOTER — the film's own wordmark ═══════ */

.foot { background: var(--color-paper-sunk); }
.foot__band {
  position: relative;
  margin: 0;
  height: clamp(20rem, 52vw, 44rem);
  overflow: clip;
  isolation: isolate;
}
.foot__band img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 28%;
  transform: scale(1.08) translateY(calc(var(--par, 0) * -1.8%));
  filter: saturate(0.92);
}
.foot__band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top, var(--color-paper-sunk) 0%, color-mix(in oklab, var(--color-paper-sunk) 55%, transparent) 30%, transparent 62%),
    linear-gradient(to bottom, var(--color-paper) 0%, color-mix(in oklab, var(--color-paper) 70%, transparent) 16%, transparent 40%);
}
.foot__statement {
  position: absolute;
  z-index: 2;
  inset-inline: 0;
  inset-block-end: clamp(var(--space-lg), 5vw, var(--space-2xl));
  margin: 0;
  font-family: var(--font-display);
  font-variation-settings: "opsz" 96;
  font-size: clamp(1.5rem, 3.4vw, 2.8rem);
  line-height: 1.06;
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
  text-shadow: 0 2px 24px color-mix(in oklab, var(--color-paper-sunk) 80%, transparent);
}
.foot__statement > .shell { max-width: var(--shell); }
.foot__statement span { display: block; max-width: 30ch; }

/* Phones: the band can't crop the wordmark, so the image keeps its full frame
   and the statement sits beneath it instead of on it. */
@media (max-width: 40rem) {
  .foot__band { height: auto; display: grid; }
  .foot__band img { position: static; aspect-ratio: 16 / 9; height: auto; transform: none; }
  .foot__band::after { background: linear-gradient(to bottom, var(--color-paper) 0%, transparent 18%, transparent 70%, var(--color-paper-sunk) 100%); }
  .foot__statement { position: static; padding-block: var(--space-lg) var(--space-md); text-shadow: none; }
}

.foot__meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto);
  gap: var(--space-lg) var(--space-2xl);
  align-items: end;
  padding-block: var(--space-xl) var(--space-2xl);
  border-block-start: var(--rule-hair) solid var(--color-rule-2);
}
.foot__word { font-family: var(--font-display); font-variation-settings: "opsz" 24; font-weight: 500; font-size: var(--text-xl); }
.foot__word em { font-style: normal; color: var(--color-accent); }
.foot__where { font-size: var(--text-sm); color: var(--color-muted); margin-block-start: var(--space-2xs); }
.foot__links { display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-lg); font-size: var(--text-sm); font-weight: 600; }
.foot__links a {
  color: var(--color-ink-2); white-space: nowrap; min-height: 44px;
  display: inline-flex; align-items: center;
  border-bottom: var(--rule-hair) solid transparent;
  transition: color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);
}
.foot__links a:hover, .foot__links a:focus-visible { color: var(--color-ink); border-bottom-color: var(--color-accent); }
.foot__legal { grid-column: 1 / -1; font-size: var(--text-xs); color: var(--color-muted); }
@media (max-width: 44rem) { .foot__meta { grid-template-columns: minmax(0, 1fr); align-items: start; } }

/* ══════════════ C4 · STICKY CALL BAR (phones) ══════════════════════════ */

.callbar {
  position: fixed;
  inset-inline: 0; inset-block-end: 0;
  z-index: var(--z-sticky);
  display: none;
  align-items: center; justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md) calc(var(--space-sm) + env(safe-area-inset-bottom, 0px));
  background: color-mix(in oklab, var(--color-paper-2) 94%, transparent);
  border-block-start: var(--rule-hair) solid var(--color-rule);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transform: translateY(105%);
  transition: transform var(--dur-mid) var(--ease-out);
}
.callbar[data-show="true"] { transform: none; }
.callbar__line { font-size: var(--text-sm); font-weight: 600; color: var(--color-ink-2); }
.callbar__btn {
  display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--space-md);
  border-radius: var(--radius-pill);
  background: var(--color-accent); color: var(--color-accent-ink);
  font-size: var(--text-sm); font-weight: 800; white-space: nowrap;
}
@media (max-width: 40rem) { .callbar { display: flex; } body { padding-block-end: 68px; } }
@media (max-width: 22rem) { .callbar__line { display: none; } .callbar__btn { flex: 1; justify-content: center; } }

/* ══════════════ One orchestrated entrance ══════════════════════════════ */

[data-rise] { opacity: 0; transform: translateY(18px); }
[data-rise].is-in {
  opacity: 1; transform: none;
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
@media (prefers-reduced-motion: reduce) { [data-rise] { opacity: 1; transform: none; } }