/* APS — main.css
   Tokens are the only colours. Mobile-first, 320px → 2560px.
   Layers: tokens · reset · type · layout · components · home (flat) · traverse · motion. */

/* ── Tokens ───────────────────────────────────────────────────────────────── */
:root {
  --void: #07211F;
  --shift: #0E3330;
  --ivory: #F2EFE7;
  --white: #FFFFFF;
  --accent-from: #4FC1BC;
  --accent-to: #7FE9E1;
  --muted: #8FA9A6;
  --hairline: rgba(242, 239, 231, 0.10);

  --grad: linear-gradient(90deg, var(--accent-from), var(--accent-to));
  --grad-y: linear-gradient(180deg, var(--accent-to), var(--accent-from));
  --ivory-soft: rgba(242, 239, 231, 0.78);
  --accent-line: rgba(79, 193, 188, 0.55);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --t-hover: 240ms;
  --t-reveal: 800ms;
  --travel: 24px;

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --fs-h1: clamp(2.35rem, 1.45rem + 4.5vw, 6rem);
  --fs-display: clamp(1.9rem, 1.3rem + 2.8vw, 3.75rem);
  --fs-definition: clamp(1.35rem, 1.05rem + 1.5vw, 2.35rem);
  --fs-price: clamp(4.25rem, 2.4rem + 8vw, 9.5rem);
  --fs-lead: clamp(1.075rem, 0.98rem + 0.45vw, 1.35rem);
  --fs-body: clamp(1rem, 0.97rem + 0.12vw, 1.0625rem);
  --fs-label: 0.75rem;
  --fs-doc-h1: clamp(2.1rem, 1.5rem + 2.8vw, 3.9rem);
  --fs-doc-h2: clamp(1.4rem, 1.2rem + 0.9vw, 1.95rem);

  --gutter: clamp(1.25rem, 0.6rem + 3.2vw, 4rem);
  --max: 76rem;
  --measure: 40rem;
}

/* ── Reset ────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  min-height: 100vh;
  background: var(--void);
  color: var(--ivory);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg, canvas { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
hr { border: 0; }
[hidden] { display: none !important; }
::selection { background: var(--accent-from); color: var(--void); }

/* ── Type ─────────────────────────────────────────────────────────────────── */
h1, .h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-variation-settings: "opsz" 144;
  color: var(--white);
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h2, h3 { font-weight: 600; line-height: 1.2; }
.display {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-display);
  line-height: 1.06;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.eyebrow, .label, .chip, .fine-print, .rail-label, .readout, .boot-label, .crumbs {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
.eyebrow { color: var(--muted); }
.eyebrow-grad {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.label { color: var(--accent-to); }
.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--ivory-soft); max-width: 38em; }
p { text-wrap: pretty; }

/* ── Links, focus, buttons ────────────────────────────────────────────────── */
a { text-decoration-color: var(--accent-line); text-underline-offset: 0.22em; text-decoration-thickness: 1px;
    transition: color var(--t-hover) var(--ease), text-decoration-color var(--t-hover) var(--ease); }
a:hover { color: var(--accent-to); text-decoration-color: var(--accent-to); }

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

/* Gradient focus ring for block controls: a masked border drawn outside the element. */
.ring, .ring-within { position: relative; }
.ring:focus-visible { outline: none; }
.ring-within input:focus-visible { outline: none; }
.ring:focus-visible::after,
.ring-within:focus-within::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 999px;
  padding: 2px;
  background: var(--grad);
  -webkit-mask: linear-gradient(var(--void) 0 0) content-box, linear-gradient(var(--void) 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(var(--void) 0 0) content-box exclude, linear-gradient(var(--void) 0 0);
  pointer-events: none;
}
.brand.ring:focus-visible::after { border-radius: 6px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 3rem;
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 600;
  font-size: 0.975rem;
  letter-spacing: 0.01em;
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--t-hover) var(--ease), border-color var(--t-hover) var(--ease),
              box-shadow var(--t-hover) var(--ease), opacity var(--t-hover) var(--ease),
              transform 260ms var(--ease);
}
/* The one filled-gradient button on the public site. */
.btn-primary { background: var(--grad); color: var(--void); }
.btn-primary:hover { color: var(--void); box-shadow: 0 0 0 1px var(--accent-to), 0 10px 40px -12px rgba(127, 233, 225, 0.55); }
.btn-outline { background: transparent; border-color: var(--accent-line); color: var(--ivory); }
.btn-outline:hover:not(:disabled) { border-color: var(--accent-to); color: var(--accent-to); }
.btn:disabled { opacity: 0.38; cursor: not-allowed; }

.text-link { color: var(--accent-to); text-decoration: none; font-weight: 500; }
.text-link:hover { text-decoration: underline; }

.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  padding: 0.6rem 1rem; background: var(--ivory); color: var(--void); border-radius: 4px;
  transition: top var(--t-hover) var(--ease);
}
.skip:focus { top: 1rem; }

/* ── Header / footer ──────────────────────────────────────────────────────── */
.site-header {
  position: relative; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem var(--gutter);
  max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto;
}
.brand { display: block; border-radius: 6px; }
.brand img { width: clamp(78px, 6vw + 50px, 112px); height: auto; }
.site-nav a {
  font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.18em;
  text-transform: uppercase; text-decoration: none; color: var(--ivory-soft);
}
.site-nav a[aria-current="page"] { color: var(--accent-to); }

.site-footer { position: relative; z-index: 20; background: var(--void); border-top: 1px solid var(--hairline); }
.footer-inner {
  max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto;
  padding: 2.5rem var(--gutter) 3rem;
  display: grid; gap: 0.6rem;
  font-size: 0.9rem; color: var(--muted);
}
.footer-name { font-weight: 600; color: var(--ivory); }
.footer-contact { margin-top: 0.4rem; }
.footer-contact a { text-decoration: none; }
.footer-links { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; margin-top: 0.4rem; }
.footer-links a { text-decoration: none; }
.footer-legal { font-size: 0.8rem; margin-top: 0.8rem; }

/* ── Shared pieces ────────────────────────────────────────────────────────── */
.rule { height: 1px; background: var(--hairline); transform-origin: left center; }
.card {
  border: 1px solid var(--hairline);
  border-radius: 3px;
  padding: 1.4rem 1.4rem 1.5rem;
  background: rgba(7, 33, 31, 0.55);
}
.card .label { margin-bottom: 0.6rem; }
.card p { color: var(--ivory-soft); }

/* ── Document pages (answers, legal, utility) ─────────────────────────────── */
.doc {
  max-width: calc(var(--measure) + 2 * var(--gutter));
  margin: 0 auto;
  padding: clamp(2rem, 6vw, 5rem) var(--gutter) clamp(3rem, 8vw, 6rem);
}
.doc-title { font-size: var(--fs-doc-h1); margin: 1rem 0 1.25rem; }
.doc > .lead { margin-bottom: 2rem; }
.crumbs { margin-bottom: 2rem; color: var(--muted); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 0.3rem 0.6rem; }
.crumbs li + li::before { content: "/"; margin-right: 0.6rem; color: var(--hairline); }
.crumbs a { text-decoration: none; }
.crumbs [aria-current] { color: var(--ivory-soft); }
.question { color: var(--muted); font-style: italic; margin-bottom: 1.5rem; }
.summary {
  font-size: var(--fs-lead); line-height: 1.55; color: var(--ivory);
  padding-left: 1.25rem; border-left: 2px solid var(--accent-from);
  border-image: var(--grad-y) 1;
}
.meta { margin: 1.25rem 0 2rem; font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.prose { margin-top: 2.25rem; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 {
  font-family: var(--font-display); font-weight: 900; font-size: var(--fs-doc-h2);
  line-height: 1.15; letter-spacing: -0.01em; color: var(--ivory);
  margin-top: 2.4em; text-wrap: balance;
}
.prose h3 { font-size: 1.1rem; margin-top: 1.8em; color: var(--ivory); }
.prose p, .prose li { color: var(--ivory-soft); }
.prose strong { color: var(--ivory); font-weight: 600; }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose ul { list-style: none; }
.prose ul li { position: relative; }
.prose ul li::before {
  content: ""; position: absolute; left: -1.1rem; top: 0.8em;
  width: 0.45rem; height: 1px; background: var(--accent-from);
}
.prose ol { list-style: decimal; }
.prose ol li::marker { font-family: var(--font-mono); color: var(--accent-to); font-size: 0.85em; }
.prose li + li { margin-top: 0.5em; }
.prose a { color: var(--accent-to); }
.prose blockquote { border-left: 1px solid var(--hairline); padding-left: 1.25rem; color: var(--muted); }
.related { margin-top: 3.5rem; padding-top: 1.75rem; border-top: 1px solid var(--hairline); }
.related ul { margin-top: 1rem; display: grid; gap: 0.75rem; }
.related a { text-decoration: none; font-weight: 500; }
.related a:hover { text-decoration: underline; }
.answer-cta { margin-top: 3rem; color: var(--muted); }
.answer-group { margin-top: 3rem; }
.answer-group .rule { margin: 0.9rem 0 0.5rem; }
.answer-list li { padding: 1.4rem 0; border-bottom: 1px solid var(--hairline); }
.answer-list h3 { font-size: 1.15rem; line-height: 1.35; }
.answer-list h3 a { text-decoration: none; }
.answer-list p { color: var(--muted); margin-top: 0.5rem; font-size: 0.95rem; }

/* ── Home — flat layout (the default; also the no-JS and reduced-motion layout) ── */
.station { padding: clamp(4rem, 10vw, 8rem) var(--gutter); }
.station:nth-child(even) { background: var(--shift); }
.station-inner { max-width: var(--max); margin: 0 auto; }
.station .eyebrow { margin-bottom: 1.4rem; }

.s1 { padding-top: clamp(2.5rem, 8vw, 6rem); padding-bottom: clamp(5rem, 12vw, 9rem); }
.s1 .h1 { font-size: var(--fs-h1); max-width: 15ch; }
.hero-sub { margin-top: clamp(1.5rem, 3vw, 2.25rem); }

.definition {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-definition); line-height: 1.22; letter-spacing: -0.01em;
  max-width: 34ch; color: var(--ivory);
}
.s2-grid { display: grid; gap: 2.5rem; margin-top: clamp(2.25rem, 5vw, 3.5rem); }
.cards { display: grid; gap: 1rem; }

.probe { display: grid; gap: 0.9rem; align-content: start; }
.probe-fields { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 0.75rem; }
.probe-fields legend { padding: 0; margin-bottom: 0.15rem; float: left; width: 100%; }
.probe-field { display: grid; gap: 0.4rem; }
.probe-field-label { font-size: 0.9rem; font-weight: 500; color: var(--ivory-soft); }
.probe-field-label .optional { font-weight: 400; color: var(--muted); }
.probe .field textarea { min-height: 6.5rem; }
.probe-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.field { flex: 1 1 16rem; display: block; border-radius: 999px; }
.field input {
  width: 100%; min-height: 3rem; padding: 0.8rem 1.25rem;
  border-radius: 999px; border: 1px solid var(--hairline);
  background: rgba(7, 33, 31, 0.7); color: var(--ivory);
  transition: border-color var(--t-hover) var(--ease);
}
.field input::placeholder { color: var(--muted); opacity: 1; }
.field input:hover { border-color: var(--accent-line); }
.probe-notice { font-size: 0.85rem; color: var(--muted); }
.verdict { border-top: 1px solid var(--hairline); padding-top: 1.1rem; display: grid; gap: 0.7rem; }
.chip {
  justify-self: start; display: inline-block;
  padding: 0.35rem 0.75rem; border: 1px solid var(--accent-from); border-radius: 999px;
  color: var(--accent-to);
}
.verdict-body { color: var(--ivory); }

.s3 .display { max-width: 18ch; }
.s3-body { margin-top: 1.5rem; }
.s3 .rule { margin: clamp(2.5rem, 6vw, 4rem) 0 0; }
.methods, .sectors { display: grid; }
.methods li, .sectors li { padding: 1.4rem 0; border-bottom: 1px solid var(--hairline); }
.methods .label, .sectors .label { margin-bottom: 0.45rem; }
.methods p, .sectors p { color: var(--ivory-soft); }

.s4-lead { max-width: 30em; color: var(--ivory); }
.sectors { margin-top: clamp(2rem, 5vw, 3rem); border-top: 1px solid var(--hairline); }
.payoff { text-align: center; margin: clamp(3rem, 7vw, 5rem) auto 0; max-width: 20ch; }
.s4 .rule { margin: clamp(2.5rem, 6vw, 4rem) auto 0; max-width: 40rem; }
.confidential { max-width: 40rem; margin: 1.75rem auto 0; text-align: center; color: var(--muted); }

.price-block { display: flex; align-items: stretch; gap: clamp(1rem, 2.5vw, 1.75rem); }
.price-line { width: 2px; background: var(--grad-y); transform-origin: top center; flex: none; }
.price {
  font-family: var(--font-display); font-weight: 900; font-size: var(--fs-price);
  line-height: 0.92; letter-spacing: -0.03em; color: var(--white);
  font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum", "lnum";
}
.price-note { margin-top: 0.6rem; font-size: var(--fs-lead); color: var(--muted); }
.s5-body { margin-top: clamp(1.75rem, 4vw, 2.5rem); }
.steps {
  display: flex; flex-direction: column; gap: 0;
  margin: clamp(2rem, 5vw, 3rem) 0;
  font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ivory);
}
/* Each step carries the hairline connector to the next: vertical when stacked, horizontal from 900px. */
.step { display: flex; flex-direction: column; align-items: flex-start; }
.step:not(:last-child)::after {
  content: ""; display: block; width: 1px; height: 1.4rem; background: var(--accent-line);
  margin: 0.45rem 0 0.45rem 0.25rem; transform-origin: top center;
}
.cta-block { display: grid; gap: 0.9rem; justify-items: start; }
.cta-note { font-size: 0.85rem; color: var(--muted); }
.s5 .rule { margin-top: clamp(3.5rem, 9vw, 6rem); }
.fine-print { margin-top: 1.4rem; color: var(--muted); }

.hud, .boot { display: none; }

@media (min-width: 640px) {
  .cards { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .s2-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; gap: clamp(2rem, 4vw, 4rem); }
  .methods, .sectors { grid-template-columns: repeat(3, 1fr); border-top: 0; }
  .methods li, .sectors li { padding: 1.6rem clamp(1.25rem, 2.5vw, 2.25rem); border-bottom: 0; border-left: 1px solid var(--hairline); }
  .methods li:first-child, .sectors li:first-child { padding-left: 0; border-left: 0; }
  .sectors { border-top: 1px solid var(--hairline); }
  .steps { flex-direction: row; align-items: center; flex-wrap: wrap; }
  .step { flex-direction: row; align-items: center; }
  .step:not(:last-child)::after { width: clamp(2rem, 5vw, 4.5rem); height: 1px; margin: 0 1rem; transform-origin: left center; }
}
@media (min-width: 1800px) {
  :root { --max: 88rem; }
}

/* ── Traverse mode (html.traverse) ────────────────────────────────────────── */
/* While the scene boots, hide the stations and show the boot overlay. mode.js sets
   t-boot only when the scene can actually run; it removes it on any failure. */
.t-boot .stations, .t-boot .site-footer { visibility: hidden; }
.t-boot .boot, .traverse .boot {
  display: grid; position: fixed; inset: 0; z-index: 50;
  place-content: center; justify-items: center; gap: 1.5rem;
  background: var(--void);
  transition: opacity 700ms var(--ease), visibility 0s linear 700ms;
}
.boot img { width: 180px; height: auto; }
.boot-bar { width: 180px; height: 1px; background: var(--hairline); overflow: hidden; }
.boot-fill { display: block; height: 100%; background: var(--grad); transform: scaleX(var(--boot, 0.08)); transform-origin: left; transition: transform 400ms var(--ease); }
.boot-label { color: var(--muted); }
.traverse.booted .boot { opacity: 0; visibility: hidden; }

.traverse body { background: var(--void); }
.traverse .scene {
  position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%;
  opacity: 0; transition: opacity 1200ms var(--ease);
}
.traverse.booted .scene { opacity: 1; }
.traverse .site-header { position: fixed; top: 0; left: 0; right: 0; max-width: none; }
.traverse .track { position: relative; z-index: 1; pointer-events: none; }
.traverse .stations .station {
  position: fixed; inset: 0; z-index: 10;
  display: flex; align-items: center;
  padding: max(5.5rem, 13vh) calc(var(--gutter) + 4rem) max(3.75rem, 8vh) var(--gutter);
  background: transparent;
  opacity: 0; pointer-events: none;
  will-change: opacity, filter, transform;
}
/* Faded stations stay in the accessibility tree; only the station in focus takes pointer input. */
.traverse .stations .station.is-live { pointer-events: auto; }
.traverse .s5 .station-inner { max-width: min(var(--max), 100%); }
.traverse .s5 .station-inner > * { max-width: 50%; }
.traverse .s5 .rule { max-width: 46%; }
.traverse .s5 .steps { max-width: 62%; flex-wrap: nowrap; white-space: nowrap; }
.traverse .s5 .step:not(:last-child)::after { width: clamp(1.5rem, 3vw, 3rem); margin: 0 0.85rem; }
.traverse .station-inner { width: 100%; }
/* Vertical rhythm follows viewport height so every station fits between header and readout. */
.traverse .station .eyebrow { margin-bottom: min(1.4rem, 2.2vh); }
.traverse .s1 .h1 { font-size: min(var(--fs-h1), 10.5vh); }
.traverse .station .lead { font-size: min(var(--fs-lead), 2.9vh); }
.traverse .price-note { margin-top: 0.3rem; font-size: min(var(--fs-lead), 2.8vh); }
.traverse .s5-body { margin-top: min(2.5rem, 3vh); }
.traverse .fine-print { margin-top: min(1.4rem, 2vh); }
.traverse .cta-note { white-space: nowrap; }
.traverse .s4 .confidential { margin-top: min(1.75rem, 2.5vh); }
.traverse .methods li, .traverse .sectors li { padding-top: min(1.6rem, 2.4vh); padding-bottom: min(1.6rem, 2.4vh); }
.traverse .display { font-size: min(var(--fs-display), 6.6vh); }
.traverse .price { font-size: min(var(--fs-price), 13vh); }
/* Station 2: definition and cards on the left, the probe gets the full height on the right. */
.traverse .s2 .station-inner {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  grid-template-areas: "eyebrow probe" "def probe" "cards probe";
  grid-template-rows: auto auto 1fr; column-gap: clamp(2.5rem, 5vw, 5rem); align-items: start;
}
.traverse .s2-grid { display: contents; }
.traverse .s2 .eyebrow { grid-area: eyebrow; }
.traverse .s2 .definition { grid-area: def; font-size: min(var(--fs-definition), 3.4vh); }
.traverse .s2 .cards { grid-area: cards; margin-top: min(2.5rem, 3.5vh); }
.traverse .s2 .probe { grid-area: probe; align-self: center; gap: min(0.9rem, 1.5vh); }
/* Three fields, the notice and a verdict share one viewport: spacing follows its height. */
.traverse .s2 .probe-fields { gap: min(0.75rem, 1.1vh); }
.traverse .s2 .probe-fields legend { margin-bottom: 0; }
.traverse .s2 .probe-field { gap: min(0.4rem, 0.5vh); }
.traverse .s2 .probe-field-label { font-size: min(0.9rem, 2.2vh); }
.traverse .s2 .probe-row { flex-wrap: nowrap; }
.traverse .s2 .probe .field input { min-height: min(3rem, 6vh); padding-top: min(0.8rem, 1vh); padding-bottom: min(0.8rem, 1vh); }
.traverse .s2 .probe .field textarea { min-height: 0; height: min(6.5rem, 10vh); padding-top: min(0.9rem, 1.1vh); padding-bottom: min(0.9rem, 1.1vh); }
.traverse .s2 .probe .btn { min-height: min(3rem, 6vh); padding-top: 0; padding-bottom: 0; }
.traverse .s2 .probe-notice { font-size: min(0.85rem, 2.1vh); }
.traverse .s2 .verdict { padding-top: min(1.1rem, 1.5vh); gap: min(0.7rem, 0.9vh); }
.traverse .s2 .verdict-body { font-size: min(1rem, 2.4vh); line-height: 1.4; }
.traverse .s2 .card { padding: min(1.4rem, 2.2vh) 1.2rem; }
.traverse .s3 .rule, .traverse .s4 .rule { margin-top: min(4rem, 3.5vh); }
.traverse .payoff { margin-top: min(5rem, 4.5vh); max-width: 28ch; font-size: min(var(--fs-display), 5.4vh); }
.traverse .sectors { margin-top: min(3rem, 3.5vh); }
.traverse .s4 .confidential { font-size: min(1rem, 2.5vh); }
.traverse .s3 .display { font-size: min(var(--fs-display), 6.6vh); }
.traverse .s5 .rule { margin-top: min(6rem, 4vh); }
.traverse .steps { margin: min(3rem, 3.5vh) 0; }
.traverse .card { background: rgba(7, 33, 31, 0.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.traverse .site-footer { z-index: 30; }

.traverse .hud { display: block; }
.hud .rail {
  position: fixed; z-index: 15; right: calc(var(--gutter) * 0.6); top: 50%;
  transform: translateY(-50%);
  display: grid; justify-items: center; gap: 0.8rem;
}
.rail-label { color: var(--muted); writing-mode: vertical-rl; transform: rotate(180deg); font-size: 0.65rem; }
.rail-track { position: relative; width: 1px; height: 38vh; background: var(--hairline); }
.rail-dot {
  position: absolute; left: 50%; top: 0; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
  border-radius: 50%; background: var(--accent-to);
  box-shadow: 0 0 0 4px rgba(127, 233, 225, 0.12);
  transform: translateY(calc(var(--p, 0) * 38vh));
}
.hud .readout {
  position: fixed; z-index: 15; left: var(--gutter); bottom: 1.4rem;
  display: flex; gap: 1.75rem; color: var(--muted); font-size: 0.68rem;
}
.readout b { color: var(--ivory); font-weight: 500; }

/* ── Booking: checkout modal, scheduler, /booked, the brief (SPEC §6–§7) ──── */
.field-label { display: block; margin-bottom: 0.5rem; font-weight: 500; color: var(--ivory); }
.field-label .optional, .req { font-weight: 400; color: var(--muted); font-size: 0.9em; }
.field-help { font-size: 0.9rem; color: var(--muted); margin-top: 0.45rem; }
.field textarea {
  width: 100%; display: block; padding: 0.9rem 1.15rem; resize: vertical; min-height: 7rem;
  border-radius: 6px; border: 1px solid var(--hairline);
  background: rgba(7, 33, 31, 0.7); color: var(--ivory); line-height: 1.55;
  transition: border-color var(--t-hover) var(--ease);
}
.field textarea:hover { border-color: var(--accent-line); }
.field-area { border-radius: 6px; }
.ring-within textarea:focus-visible { outline: none; }
.ring-within.field-area:focus-within::after { border-radius: 9px; }
.field input[type="datetime-local"] { color-scheme: dark; }
[aria-invalid="true"] { border-color: var(--accent-to) !important; }
.link-button {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--accent-to); font-weight: 500; text-decoration: underline;
  text-decoration-color: var(--accent-line); text-underline-offset: 0.22em;
  transition: text-decoration-color var(--t-hover) var(--ease);
}
.link-button:hover { text-decoration-color: var(--accent-to); }
.link-button:disabled { opacity: 0.38; cursor: not-allowed; }
.notice { border-left: 1px solid var(--accent-from); padding-left: 1rem; color: var(--ivory-soft); }
.sched-status { min-height: 1.6em; color: var(--ivory-soft); font-size: 0.95rem; }

/* Checkout modal — --void at high opacity with backdrop blur. */
html.modal-open { overflow: hidden; }
.checkout {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center; padding: var(--gutter);
  background: rgba(7, 33, 31, 0.9);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.checkout[hidden] { display: none; }
.checkout-panel {
  width: min(100%, 30rem); display: grid; gap: 1.25rem;
  padding: clamp(1.5rem, 4vw, 2.25rem);
  background: var(--shift); border: 1px solid var(--hairline); border-radius: 4px;
}
.motion .checkout-panel { opacity: 0; transform: translateY(var(--travel)); transition: opacity 600ms var(--ease), transform 600ms var(--ease); }
.motion .checkout.is-open .checkout-panel { opacity: 1; transform: none; }
.checkout-summary { color: var(--ivory-soft); }
.checkout-field .field { display: block; }
.rzp-slot { min-height: 3rem; }
.checkout-close { justify-self: start; }

/* Scheduler */
.scheduler { margin-top: 1rem; }
.ref-field { margin-bottom: 2rem; max-width: 26rem; }
.sched-grid { display: grid; gap: 2.5rem; }
@media (min-width: 760px) { .sched-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.doc .scheduler, .doc .alt { max-width: none; }
.tz-note { font-size: 0.85rem; color: var(--muted); margin: 0.4rem 0 1rem; }
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.75rem; }
.cal-month { font-weight: 600; color: var(--ivory); }
.cal-nav {
  width: 2.5rem; height: 2.5rem; border-radius: 999px; border: 1px solid var(--hairline);
  background: transparent; color: var(--ivory); cursor: pointer;
  transition: border-color var(--t-hover) var(--ease), color var(--t-hover) var(--ease);
}
.cal-nav:hover:not(:disabled) { border-color: var(--accent-to); color: var(--accent-to); }
.cal-nav:disabled { opacity: 0.3; cursor: default; }
.cal-grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cal-grid th {
  font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 400; color: var(--muted); padding: 0.4rem 0;
}
.cal-grid td { padding: 2px; text-align: center; }
.cal-day {
  width: 100%; aspect-ratio: 1; max-width: 3rem; border-radius: 999px;
  border: 1px solid transparent; background: transparent; color: var(--muted);
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; cursor: default;
  transition: border-color var(--t-hover) var(--ease), color var(--t-hover) var(--ease), background-color var(--t-hover) var(--ease);
}
.cal-day:disabled { opacity: 0.4; }
.cal-day.has-slots { color: var(--ivory); border-color: var(--accent-line); cursor: pointer; }
.cal-day.has-slots:hover { border-color: var(--accent-to); color: var(--accent-to); }
.cal-day.is-active { border-color: var(--accent-to); color: var(--accent-to); background: rgba(79, 193, 188, 0.12); }
.times-empty { color: var(--muted); margin-top: 0.75rem; }
.time-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 0.6rem; margin-top: 0.9rem; }
.time {
  width: 100%; display: grid; gap: 0.15rem; text-align: left;
  padding: 0.7rem 1rem; border-radius: 6px; border: 1px solid var(--hairline);
  background: transparent; color: var(--ivory); cursor: pointer;
  transition: border-color var(--t-hover) var(--ease), color var(--t-hover) var(--ease);
}
.time:hover { border-color: var(--accent-to); }
.time[aria-pressed="true"] { border-color: var(--accent-to); background: rgba(79, 193, 188, 0.12); }
.time.ring:focus-visible::after { border-radius: 9px; }
.time-local { font-weight: 600; font-variant-numeric: tabular-nums; }
.time-ist { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.08em; color: var(--muted); }
.sched-confirm { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--hairline); display: grid; gap: 0.6rem; justify-items: start; }
.selected { color: var(--ivory); }
.alt-open { margin-top: 2.5rem; }
.alt { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--hairline); }
.alt-form { display: grid; gap: 1.1rem; max-width: 28rem; margin-top: 0.9rem; justify-items: start; }
.alt-row { width: 100%; }
.alt-row .field { display: block; }

/* /booked — logo centred */
.page-centred .site-header { justify-content: center; }
.page-centred .site-nav { display: none; }
.page-centred .doc { text-align: center; }
.page-centred .doc > .lead { margin-left: auto; margin-right: auto; }
.booked-list { display: grid; gap: 1.1rem; margin: 2rem auto; max-width: 30rem; }
.booked-list dd { color: var(--ivory); font-size: var(--fs-lead); margin-top: 0.3rem; overflow-wrap: anywhere; }
.booked-missing { color: var(--muted); }
.booked-brief { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--hairline); display: grid; gap: 1.25rem; justify-items: center; }

/* The brief */
.brief { display: grid; gap: clamp(2rem, 5vw, 3rem); margin-top: 1rem; }
.q { display: grid; gap: 0.2rem; }
.q-label { font-family: var(--font-body); font-weight: 600; font-size: 1.1rem; color: var(--ivory); margin-bottom: 0.5rem; }
.q .field { display: block; }
.file-input { margin-top: 0.75rem; color: var(--ivory-soft); font-size: 0.95rem; }
.file-input::file-selector-button {
  margin-right: 1rem; padding: 0.6rem 1.1rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--accent-line); background: transparent; color: var(--ivory); font: inherit;
  transition: border-color var(--t-hover) var(--ease), color var(--t-hover) var(--ease);
}
.file-input::file-selector-button:hover { border-color: var(--accent-to); color: var(--accent-to); }
.file-list { margin-top: 0.75rem; display: grid; gap: 0.4rem; }
.file-list li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.55rem 0; border-bottom: 1px solid var(--hairline); }
.file-name { overflow-wrap: anywhere; color: var(--ivory-soft); }
.brief-actions { display: grid; gap: 0.75rem; justify-items: start; }
.brief-done { font-weight: 600; font-size: var(--fs-lead); line-height: 1.4; color: var(--ivory); margin-top: 1rem; }
.brief-done:focus { outline: none; }

/* ── Motion (html.motion: JS present and no reduced-motion preference) ────── */
.motion [data-reveal] { transition-timing-function: var(--ease); }

.motion [data-reveal="label"] {
  opacity: 0; letter-spacing: 0.34em;
  transition-property: opacity, letter-spacing; transition-duration: 700ms, 900ms;
}
.motion [data-reveal="label"].is-in { opacity: 1; letter-spacing: 0.18em; }

.motion [data-reveal="fade"] {
  opacity: 0; transform: translateY(var(--travel));
  transition-property: opacity, transform; transition-duration: var(--t-reveal);
  transition-delay: calc(var(--i, 0) * 120ms);
}
.motion [data-reveal="fade"].is-in { opacity: 1; transform: none; }

.motion [data-reveal="from-left"], .motion [data-reveal="from-right"] {
  opacity: 0; transition-property: opacity, transform; transition-duration: 850ms;
}
.motion [data-reveal="from-left"] { transform: translateX(-28px); }
.motion [data-reveal="from-right"] { transform: translateX(28px); }
.motion [data-reveal="from-left"].is-in, .motion [data-reveal="from-right"].is-in { opacity: 1; transform: none; }

.motion [data-reveal="rule"] { transform: scaleX(0); transition: transform 900ms var(--ease); }
.motion [data-reveal="rule"].is-in { transform: scaleX(1); }
.motion .s4 [data-reveal="rule"] { transform-origin: center; }

.motion [data-reveal="draw-y"] { transform: scaleY(0); transition: transform 900ms var(--ease) 150ms; }
.motion [data-reveal="draw-y"].is-in { transform: scaleY(1); }

.motion [data-reveal="price"] {
  opacity: 0; font-weight: 700;
  transition: opacity 800ms var(--ease) 200ms, font-weight 900ms var(--ease) 200ms;
}
.motion [data-reveal="price"].is-in { opacity: 1; font-weight: 900; }

/* The strip reveals in strict sequence: step, connector, step, connector, step. */
.motion [data-reveal="steps"] .step {
  opacity: 0; transform: translateY(12px);
  transition: opacity 600ms var(--ease), transform 600ms var(--ease);
  transition-delay: calc(var(--i) * 160ms);
}
.motion [data-reveal="steps"] .step::after {
  transform: scaleY(0);
  transition: transform 600ms var(--ease);
  transition-delay: calc((var(--i) + 1) * 160ms);
}
@media (min-width: 900px) {
  .motion [data-reveal="steps"] .step::after { transform: scaleX(0); }
}
.motion [data-reveal="steps"].is-in .step { opacity: 1; transform: none; }
.motion [data-reveal="steps"].is-in .step::after { transform: none; }

/* Line-by-line mask reveal. motion.js wraps lines; until then the text is held back. */
.motion [data-reveal="lines"]:not(.is-split):not(.is-done) { opacity: 0; }
.line { display: block; }
.line-inner {
  display: block;
  clip-path: inset(calc(100% + 0.35em) -0.2em -0.35em -0.2em);
  transform: translateY(var(--travel));
  transition: clip-path 900ms var(--ease), transform 900ms var(--ease);
  transition-delay: calc(var(--l) * 90ms);
}
.is-in .line-inner { clip-path: inset(-0.35em -0.2em -0.35em -0.2em); transform: none; }

[data-magnetic] { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}