/* Hallmark · macrostructure: Marquee Hero · H1 knobs: size=xxl, alignment=left-bias, underlay=rule-below
 * genre: atmospheric · theme: custom · vibe: "golden-hour water, high-desert dusk, engineered"
 * paper: oklch(13% 0.014 62) · accent: oklch(78% 0.150 62)
 * display: Instrument Serif (roman) · body: Manrope · mono: JetBrains Mono
 * axes: dark / classical-serif / chromatic-amber (~62°)
 * nav: N5 floating pill · footer: Ft5 statement · enrichment: real client footage, scroll-scrubbed
 * studied: no · context: user-provided · 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)
           calc(var(--space-md) + env(safe-area-inset-bottom, 0px));
  padding-block-end: var(--space-md);
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.nav__pill {
  pointer-events: auto;
  width: 100%;
  max-width: 68rem;
  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),
    backdrop-filter var(--dur-mid) var(--ease-out);
}
.nav[data-stuck="true"] .nav__pill {
  background: color-mix(in oklab, var(--color-paper) 82%, transparent);
  border-color: var(--color-rule-2);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
}

.nav__mark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  flex: 0 0 auto;
  min-height: 44px;          /* touch target */
}
.nav__glyph {
  width: 20px; height: 20px;
  color: var(--color-accent);
  flex: 0 0 auto;
}
.nav__word {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.nav__word em { font-style: normal; color: var(--color-accent); }

.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 {
  color: var(--color-ink-2);
  white-space: nowrap;
  padding-block: var(--space-2xs);
  border-bottom: var(--rule-hair) solid transparent;
  transition: color var(--dur-short) var(--ease-out),
              border-color var(--dur-short) var(--ease-out);
}
.nav__links a:hover, .nav__links a:focus-visible {
  color: var(--color-ink);
  border-bottom-color: var(--color-accent);
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex: 0 0 auto;
}
.nav__tel {
  font-size: var(--text-sm);
  font-weight: 700;
  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: 18px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.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;
  /* The scroll runway. 460vh over a 26.3s film gives ~7s of footage per
     viewport-height of scroll — slow enough to read as a camera move rather
     than a scrub. */
  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);
}
/* Colour grade: pulls the footage toward the token palette and buys
   text contrast at the bottom edge without washing out the sun. */
.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%);
}
.film__grain {
  position: absolute;
  inset: -50%;
  z-index: 2;
  pointer-events: none;
  opacity: 0.06;
  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");
}

.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-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(14px);
  transition: opacity var(--dur-long) var(--ease-out),
              transform var(--dur-long) var(--ease-out);
  pointer-events: none;
}
.film__beat.is-on { opacity: 1; transform: none; pointer-events: auto; }

.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: var(--color-accent);
  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;
  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[data-progress="moved"] .film__hint { opacity: 0; }

/* poster fallback: no video, reduced motion, save-data */
.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; }
/* Poster fallback: the beats are normally stacked in one grid cell and
   cross-faded by scroll. With no film there is no scroll to drive them, so the
   mid beats are removed outright and the two survivors flow normally —
   leaving them in grid-area 1/1 would overlap the headline and the CTA. */
.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;
}
.film[data-film-state="poster"] .film__beats > .shell {
  gap: var(--space-xl);
  align-content: end;
}

.rule-thick {
  height: var(--rule-thick);
  margin: 0;
  border: 0;
  background: var(--color-accent);
}

/* ══════════════ 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: var(--color-paper-2);
  border: var(--rule-hair) solid var(--color-rule-2);
  border-radius: 20px;
}
.rig__canvas-wrap {
  position: relative;
  min-width: 0;
  border-radius: 14px;
  overflow: clip;
  background: var(--color-paper-sunk);
}
.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-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;              /* touch target; the 3px track stays centred */
  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);
  transition: transform var(--dur-short) 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); }

.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-sm);
  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 ══════════════════════════════════════════════ */

.freeze {
  padding-block: clamp(var(--space-3xl), 12vh, 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); }
.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 {
  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);
}
.book__grid {
  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-display);
  font-size: clamp(2rem, 5.4vw, 3.1rem);
  line-height: 1;
  color: var(--color-accent);
  letter-spacing: -0.015em;
}
.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: var(--color-paper-2);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: 18px;
}

.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: 46px;
  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),
              background-color 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) 21px, calc(100% - 12px) 21px;
  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);
}
.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);
}

/* ══════════════ F3 · SERVICES SPEC SHEET ═══════════════════════════════ */

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

.svc { display: grid; }
.svc__item {
  display: grid;
  grid-template-columns: minmax(0, 15rem) 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));
  border-block-start: var(--rule-hair) solid var(--color-rule);
  transition: background-color 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) 60%, transparent); }

.svc__item--lead { border-block-start-color: var(--color-accent); }
.svc__item--lead .svc__key h3 { color: var(--color-accent); }

.svc__key { display: grid; gap: var(--space-2xs); min-width: 0; }
.svc__key h3 {
  font-size: var(--text-2xl);
  line-height: 1.05;
}
.svc__season { color: var(--color-accent); }

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

.svc__go {
  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); }

@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; }
}

/* ══════════════ 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: var(--color-paper); }

/* ══════════════ F4 · PROCESS ═══════════════════════════════════════════ */

.process { padding-block: clamp(var(--space-3xl), 11vh, var(--space-4xl)) var(--space-3xl); }
.process__title { font-size: var(--text-display-s); max-width: 18ch; }
.process__lede { margin-block-start: var(--space-md); }

.steps {
  --rail-x: 0.6rem;          /* single source of truth: rail and dots share it */
  --dot: 13px;
  position: relative;
  margin-block-start: clamp(var(--space-xl), 5vh, var(--space-3xl));
  display: grid;
  gap: 0;
}
/* the air line: a rail that fills as you scroll the sequence — the same
   zone-by-zone progression the copy is describing */
.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-accent-dim));
  transition: height 120ms linear;
}
@media (max-width: 44rem) {
  .steps::before, .steps::after { display: none; }
}
.step {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 5rem) minmax(0, 1fr);
  gap: var(--space-md) clamp(var(--space-md), 3vw, var(--space-2xl));
  padding-block: clamp(var(--space-lg), 3.5vh, var(--space-xl));
  border-block-start: var(--rule-hair) solid var(--color-rule);
  align-items: start;
}
.step:last-child { border-block-end: var(--rule-hair) solid var(--color-rule); }
.step__n {
  position: relative;
  color: var(--color-accent);
  font-size: var(--text-sm);
  padding-block-start: 0.35em;
  padding-inline-start: 1.6rem;
}
.step__n::before {
  content: "";
  position: absolute;
  /* centre the dot on the rail: rail sits at --rail-x, dot is --dot wide,
     and the 2px rail means its centre is --rail-x + 1px */
  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);
}
.step[data-reached="true"] .step__n::before {
  background: var(--color-accent);
  border-color: var(--color-accent);
}
@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; }
}

/* ══════════════ 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__title {
  font-size: var(--text-display-s);
  margin-block-end: clamp(var(--space-lg), 4vh, var(--space-2xl));
}

.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: 62px;
  padding-block: var(--space-md);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: 1.25;
  transition: color var(--dur-short) var(--ease-out);
}
.qa__item summary::-webkit-details-marker { display: none; }
.qa__item summary:hover { color: var(--color-accent); }
.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; }

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

.close {
  padding-block: clamp(var(--space-4xl), 16vh, var(--space-5xl));
  text-align: center;
}
.close__kicker { display: block; margin-block-end: var(--space-md); }
.close__title {
  font-size: var(--text-display);
  margin-block-end: var(--space-xl);
}
.close__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  justify-content: center;
}

/* ══════════════ Ft5 · STATEMENT FOOTER ═════════════════════════════════ */

.foot {
  padding-block: clamp(var(--space-2xl), 8vh, var(--space-3xl));
  border-block-start: var(--rule-hair) solid var(--color-rule);
  background: var(--color-paper-sunk);
}
.foot__statement {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4.6vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
  max-width: 22ch;
  margin-block-end: clamp(var(--space-xl), 6vh, var(--space-3xl));
}
.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-start: var(--space-lg);
  border-block-start: var(--rule-hair) solid var(--color-rule-2);
}
.foot__word {
  font-family: var(--font-display);
  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; }
}

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

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