/* ============================================================
   LIFE'S A WRENCH - Flagship 01, plumbing
   Design system: "Craftsman's Bench"
   Mobile first. Reference viewport 390px. Desktop full tier
   lives inside @media (min-width: 1024px).
   Fonts (loaded in index.html via Google Fonts, display=swap):
   Anton (display), Source Serif 4 (body), IBM Plex Mono (labels).
   Contrast rule: every text/background pair below is a Pass row
   from the PRD 1.1a audit. Brass text on light grounds always
   uses --brass-deep; on dark grounds always --brass-pale.
   Deviations forced by the audit (noted inline):
   - header sub-line and desktop nav links on ink use brass-pale
     (brass-deep on ink fails near 2.3:1, not a Pass row)
   - S9 pull quote is bone on an oxblood block (oxblood text on
     ink fails near 1.5:1, not a Pass row)
   - footer fine print and credit on ink use bone at small sizes
     (stone-deep on ink fails, not a Pass row)
   ============================================================ */

:root {
  --bone: #F3EEE3;
  --bone-deep: #E9E1CF;
  --ink: #1C1712;
  --ink-soft: #3A322A;
  --oxblood: #6E1F1A;
  --oxblood-deep: #4A140F;
  --brass: #C9962E;
  --brass-deep: #6E5312;
  --brass-pale: #E4C87F;
  --stone: #8A7F6D;
  --stone-deep: #5F5648;
  --paper-line: #D8CFB8;

  --font-display: "Anton", "Arial Narrow", sans-serif;
  --font-serif: "Source Serif 4", Georgia, serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;

  --header-h: 64px;
  --bar-h: 56px;
  --radius-card: 16px;
  --radius-btn: 12px;
  --maxw: 1200px;
}

/* ---------- Base ---------- */

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

html {
  scroll-behavior: smooth;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

body.menu-open { overflow: hidden; }

img, svg { max-width: 100%; }

a { color: inherit; }

::selection { background: var(--oxblood); color: var(--bone); }

:focus-visible {
  outline: 3px solid var(--brass-deep);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Brass-pale focus ring on dark grounds (brass-deep fails there) */
#s1 :focus-visible,
#s2 :focus-visible,
#s6 :focus-visible,
#s9 :focus-visible,
#s12 :focus-visible,
#s13 :focus-visible,
#sticky-bar :focus-visible,
#menu-overlay :focus-visible,
#build-beat :focus-visible {
  outline-color: var(--brass-pale);
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 16px; top: -72px;
  z-index: 200;
  background: var(--ink);
  color: var(--bone);
  font: 600 14px/1 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 20px;
  border-radius: 0 0 12px 12px;
  transition: top .2s ease;
}
.skip-link:focus { top: 0; color: var(--bone); }

/* ---------- Layout helpers ---------- */

.section-inner {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 20px;
}

main { position: relative; z-index: 1; }

main > section {
  position: relative;
  padding: 72px 0;
  scroll-margin-top: calc(var(--header-h) + 12px);
}

/* Shared type voices */
.kicker {
  display: block;
  margin: 0 0 16px;
  font: 600 12px/1.4 var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brass-deep);
}

main section h2 {
  margin: 0 0 20px;
  font: 400 40px/.95 var(--font-display);
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--ink);
  text-wrap: balance;
}

.lede {
  margin: 0 0 8px;
  max-width: 40ch;
  font: 400 19px/1.6 var(--font-serif);
  color: var(--ink-soft);
}

/* Dark-ground sections restate the shared voices in Pass pairs */
#s6 .kicker, #s9 .kicker { color: var(--brass-pale); }
#s6 h2, #s9 h2 { color: var(--bone); }
#s6 .lede, #s9 .lede { color: var(--bone); }
#s12 .kicker { color: var(--bone); }

/* ---------- Reveal on scroll ---------- */
/* Hidden state applies only when JS runs (html.js): if app.js fails to
   load, content stays visible and tappable from first paint (PRD K1). */

.js .reveal {
  opacity: 0;
  transform: translateY(24px);
}
.reveal {
  transition: opacity .6s ease-out, transform .6s ease-out;
  transition-delay: var(--rd, 0s);
}
.reveal.in { opacity: 1; transform: none; }

/* ============================================================
   3D WORLD: pinned canvas, fallback, part labels
   ============================================================ */

#bench-pin {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

#bench-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

#bench-fallback {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

body.bench-fallback #bench-fallback { display: flex; }
body.bench-fallback #bench-canvas { display: none; }
/* M5: on the SVG/static fallback path the counter and progress rule stay
   hidden; the captions (rewritten by app.js) describe the finished
   illustration, not a valve that cannot be tapped. */
body.bench-fallback #part-counter,
body.bench-fallback #build-beat .beat-progress { display: none; }

#bench-fallback svg {
  width: min(560px, 92vw);
  height: auto;
  display: block;
  margin: 0 auto;
}

.fb-act { display: none; }
.fb-act.active { display: block; }

#part-label {
  position: absolute;
  display: none;
  z-index: 3;
  transform: translate(-50%, -140%);
  max-width: 78vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: rgba(28, 23, 18, .9);
  color: var(--bone);
  font: 500 14px/1.2 var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid var(--brass);
  pointer-events: none;
}
#part-label.show { display: block; }

/* ============================================================
   S1. TICKET HEADER (sticky)
   ============================================================ */

#s1, #site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ink);
  color: var(--bone);
  animation: header-in .4s ease-out;
}

@keyframes header-in {
  from { transform: translateY(-64px); }
  to { transform: translateY(0); }
}

#s1.scrolled, #site-header.scrolled {
  border-bottom: 1px solid var(--paper-line);
}

.header-inner {
  height: var(--header-h);
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.wordmark-block { display: flex; flex-direction: column; justify-content: center; }

.wordmark {
  font: 400 20px/1 var(--font-display);
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--bone);
  text-decoration: none;
  white-space: nowrap;
}

.wordmark-sub {
  margin: 5px 0 0;
  font: 500 10px/1.3 var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--brass-pale); /* audit: brass-deep on ink is not a Pass row */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 58vw;
}
@media (max-width: 480px) {
  /* The business name must never truncate on phones; the suffix is
     redundant with the CONCEPT PREVIEW pill on pitch builds. */
  .wordmark-sub .sub-suffix { display: none; }
}

.header-nav { display: none; }

.header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

#header-call {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--brass);
  border-radius: var(--radius-btn);
  color: var(--brass-pale);
  text-decoration: none;
  font: 600 14px/1 var(--font-mono);
  letter-spacing: .08em;
}

#header-call .call-icon { font-size: 18px; line-height: 1; }
#header-call .call-label { display: none; margin-left: 10px; }

#menu-toggle {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 1px solid var(--brass);
  border-radius: var(--radius-btn);
  cursor: pointer;
}

#menu-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--bone);
}

/* Full-screen menu overlay */
#menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--ink);
  display: flex;
  flex-direction: column;
  padding: 20px 20px calc(20px + env(safe-area-inset-bottom));
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
#menu-overlay[hidden] { display: none; }
#menu-overlay.open { opacity: 1; visibility: visible; }

#menu-close {
  align-self: flex-end;
  width: 44px;
  height: 44px;
  background: none;
  border: 1px solid var(--brass);
  border-radius: var(--radius-btn);
  color: var(--bone);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

#menu-overlay nav {
  display: flex;
  flex-direction: column;
  margin: 32px 0;
}

#menu-overlay .nav-link {
  display: flex;
  align-items: baseline;
  gap: 16px;
  min-height: 64px;
  padding: 8px 0;
  font: 400 40px/1.1 var(--font-display);
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--bone);
  text-decoration: none;
}

#menu-overlay .nav-no {
  font: 600 12px/1 var(--font-mono);
  letter-spacing: .08em;
  color: var(--brass-pale);
}

.overlay-call {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  border: 1px solid var(--brass);
  border-radius: var(--radius-btn);
  color: var(--brass-pale);
  font: 600 16px/1 var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
}

/* Concept pill: fixed top-right below the header. Shown on every build;
   the whole site is a concept preview (the footer disclosure says so). */
#concept-pill {
  position: fixed;
  top: calc(var(--header-h) + 12px);
  right: 16px;
  z-index: 70;
  margin: 0;
  background: var(--oxblood);
  color: var(--bone);
  font: 600 10px/1 var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 9px 14px;
  border-radius: 999px;
  white-space: nowrap;
}

/* ============================================================
   BUTTONS: two kinds only. No gradients, no shadows, no pills.
   Anton never appears in buttons.
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px; /* flex collapses inter-item whitespace (e.g. CALL [phone]) */
  min-height: 52px;
  padding: 16px 28px;
  border-radius: var(--radius-btn);
  border: 1px solid transparent;
  font: 600 14px/1.3 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
}

.btn-primary {
  background: var(--oxblood);
  border-color: var(--oxblood);
  color: var(--bone);
}

.btn-secondary {
  background: transparent;
  border-color: var(--brass);
  color: var(--brass-deep);
}

/* ============================================================
   S2. HERO (Act 1 opens, canvas pinned behind)
   ============================================================ */

#s2 {
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 96px 0 72px;
  overflow: clip;
}

/* Legibility veil over the 3D scene. Text sits on solid-feeling
   dark ground; the veil is chrome, not water color. */
#s2::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    180deg,
    rgba(28, 23, 18, .62) 0%,
    rgba(28, 23, 18, .30) 42%,
    rgba(28, 23, 18, .68) 100%
  );
  pointer-events: none;
}

.hero-inner { position: relative; z-index: 1; padding: 0 20px; }

#s2 .kicker { color: var(--brass-pale); } /* PRD 2.x says brass-deep; the PRD 1.1a
   contrast audit wins: brass-deep on the dark legibility veil fails. */

#s2 h1 {
  margin: 0 0 20px;
  font: 400 clamp(3rem, 14.5vw, 3.5rem)/.95 var(--font-display);
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--bone);
  text-shadow: 0 2px 26px rgba(28, 23, 18, .5);
  text-wrap: balance;
}

#s2 .lede {
  color: var(--bone);
  text-shadow: 0 1px 14px rgba(28, 23, 18, .5);
  margin-bottom: 20px;
}

.rating-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 28px;
  font: 500 14px/1.4 var(--font-mono);
  letter-spacing: .04em;
  color: var(--bone);
}

.stars {
  color: var(--brass);
  letter-spacing: 3px;
  font-size: 15px;
}

.hero-ctas {
  display: grid;
  gap: 12px;
}

.hero-ctas .btn { width: 100%; }

/* Secondary on the dark scene: brass outline kept, text moves to
   brass-pale (brass-deep on dark is not a Pass row). */
#s2 .btn-secondary {
  color: var(--brass-pale);
  background: rgba(28, 23, 18, .45);
}

.microcopy {
  margin: 18px 0 0;
  font: 400 14px/1.6 var(--font-serif);
  color: var(--bone);
}

.microcopy a {
  color: var(--brass-pale);
  text-underline-offset: 4px;
}

/* ============================================================
   S3. BUILD BEAT (~160svh of scroll room for Act 1)
   ============================================================ */

#build-beat {
  position: relative;
  z-index: 1;
  height: 160svh;
  pointer-events: none;
  scroll-margin-top: 0;
}

.beat-caption {
  width: max-content;
  max-width: calc(100vw - 40px);
  margin: 0 auto;
  padding: 10px 16px;
  border-radius: 6px;
  background: rgba(243, 238, 227, .88);
  color: var(--brass-deep);
  font: 600 12px/1.5 var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
}

.beat-caption-top {
  position: sticky;
  top: calc(var(--header-h) + 24px);
}

.beat-caption-bottom {
  position: sticky;
  bottom: calc(var(--bar-h) + 40px);
}

.beat-progress {
  position: absolute;
  left: 14px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--paper-line);
  opacity: .55;
}

.beat-progress span {
  display: block;
  width: 100%;
  height: 0;
  background: var(--brass);
}

#part-counter {
  position: sticky;
  bottom: calc(var(--bar-h) + 96px);
  width: max-content;
  margin-left: 28px;
  padding: 8px 12px;
  border-radius: 6px;
  background: rgba(243, 238, 227, .88);
  color: var(--brass-deep);
  font: 600 14px/1.4 var(--font-mono);
  letter-spacing: .08em;
  white-space: nowrap;
}

/* ============================================================
   S4. TRUST TICKER (marquee)
   ============================================================ */

#s3 { padding: 0; }

#s4 { padding: 0; background: var(--oxblood); }

#ticker {
  overflow: hidden;
  background: var(--oxblood);
  padding: 16px 0;
}

.ticker-track {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  will-change: transform;
  animation: ticker-scroll 30s linear infinite;
}

.ticker-group {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.tick-item {
  padding: 0 28px;
  font: 400 18px/1 var(--font-display);
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--bone);
}

.tick-sep {
  color: var(--brass);
  font-size: 11px;
  line-height: 1;
}

@keyframes ticker-scroll {
  to { transform: translateX(-50%); }
}

#ticker.paused .ticker-track { animation-play-state: paused; }

/* ============================================================
   S5. SERVICES AS JOB TICKETS
   ============================================================ */

#s5 { background: transparent; /* Act 2's water thread runs behind the tickets */ }

#ticket-list {
  display: grid;
  gap: 20px;
  margin-top: 32px;
}

.ticket {
  /* Translucent: Act 2's glowing thread shows through softly between and
     behind the cards while text stays fully legible. */
  background: rgba(231, 224, 206, 0.93);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-card);
  padding: 24px;
  color: var(--ink-soft);
  transition: background .3s ease, color .3s ease, transform .3s ease,
    border-color .3s ease;
}

.ticket-top {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
}

.ticket-no {
  font: 600 14px/1.4 var(--font-mono);
  letter-spacing: .08em;
  color: var(--brass-deep);
}

.ticket-name {
  margin: 0 0 14px;
  font: 400 28px/1 var(--font-display);
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--ink);
}

.ticket-rule {
  height: 2px;
  border: 0;
  margin: 0 0 16px;
  background: var(--brass);
}

.ticket-desc {
  margin: 0;
  font: 400 16px/1.6 var(--font-serif);
  color: inherit;
}

.what-next {
  border-top: 1px solid var(--paper-line);
  margin-top: 18px;
  padding-top: 16px;
}

.what-next h4 {
  margin: 0 0 10px;
  font: 600 12px/1.4 var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brass-deep);
}

.what-next p {
  margin: 0;
  font: 400 14px/1.65 var(--font-mono);
  letter-spacing: .02em;
  color: inherit;
}

.ticket-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--paper-line);
}

.ticket-meta {
  font: 400 14px/1.5 var(--font-mono);
  color: var(--stone-deep);
}

.ticket-cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font: 600 14px/1 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--oxblood);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

/* The .active outline works on every tier (tap on touch, observer set) */
.ticket.active {
  outline: 2px solid var(--brass-deep);
  outline-offset: 4px;
}

/* ============================================================
   S6. THE 3AM TEST (dark, oxblood-deep ground)
   ============================================================ */

#s6 { background: transparent; color: var(--bone); /* Act 3 renders its own oxblood-deep ground */ }

.protocol {
  list-style: none;
  margin: 36px 0 0;
  padding: 0;
  border-top: 1px solid rgba(243, 238, 227, .22);
}

.protocol-row {
  position: relative;
  display: flex;
  gap: 16px;
  min-height: 56px;
  padding: 22px 0;
  border-bottom: 1px solid rgba(243, 238, 227, .22);
}

.protocol-row::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  width: 100%; height: 2px;
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: left;
}

.protocol-row.in::after { transform: scaleX(1); transition: transform .6s ease .15s; }

.protocol-no {
  flex: 0 0 34px;
  padding-top: 4px;
  font: 600 14px/1.4 var(--font-mono);
  letter-spacing: .08em;
  color: var(--brass-pale);
}

.protocol-row h3 {
  margin: 0 0 8px;
  font: 600 14px/1.5 var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--bone);
}

.protocol-row p {
  margin: 0;
  font: 400 16px/1.65 var(--font-serif);
  color: var(--bone);
}

/* ============================================================
   S7. PRICE BEFORE WORK
   ============================================================ */

#s7 { background: var(--bone); }

.pledges {
  margin: 28px 0 8px;
  border-top: 1px solid var(--paper-line);
}

.pledge-row {
  padding: 20px 0;
  border-bottom: 1px solid var(--paper-line);
}

.pledge-row h3 {
  margin: 0 0 8px;
  font: 600 14px/1.4 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--brass-deep);
}

.pledge-row p {
  margin: 0;
  font: 400 17px/1.6 var(--font-serif);
  color: var(--ink-soft);
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}

.price-chip {
  min-height: 44px;
  padding: 12px 20px;
  border-radius: var(--radius-btn);
  border: 1px solid var(--brass-deep);
  background: transparent;
  color: var(--brass-deep);
  font: 600 14px/1.2 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}

/* Tap state is the primary path on touch; ink on brass is a Pass row */
.price-chip.on {
  background: var(--brass);
  border-color: var(--brass);
  color: var(--ink);
}

#price-explainer {
  margin: 16px 0 0;
  padding: 20px;
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-btn);
  background: var(--bone-deep);
  font: 400 14px/1.7 var(--font-mono);
  letter-spacing: .02em;
  color: var(--ink-soft);
  transition: border-color .3s ease;
}

#price-explainer.flash { border-color: var(--brass); }

/* ============================================================
   S8. WALL OF PROOF
   ============================================================ */

#s8 { background: transparent; /* Act 3 calm lingers behind the header; canvas releases on scroll */ }

.rating-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 28px 0 36px;
}

.rating-num {
  font: 400 64px/1 var(--font-display);
  letter-spacing: .01em;
  color: var(--ink);
}

.rating-sub {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#s8 .stars { color: var(--brass-deep); font-size: 18px; }

.rating-count {
  font: 500 14px/1.4 var(--font-mono);
  letter-spacing: .04em;
  color: var(--stone-deep);
}

#review-list {
  display: grid;
  gap: 20px;
}

.review {
  background: var(--bone);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-card);
  padding: 24px;
  transition: transform .3s ease;
}

.review-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 12px;
}

.review-name {
  font: 600 14px/1.4 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--brass-deep);
}

.review-recency {
  font: 400 14px/1.4 var(--font-mono);
  color: var(--stone-deep);
}

.review-text {
  margin: 0 0 10px;
  font: 400 17px/1.65 var(--font-serif);
  color: var(--ink);
}

.review-job {
  margin: 0;
  font: 500 14px/1.5 var(--font-mono);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--stone-deep);
}

.review-meta {
  margin: 14px 0 0;
  font: 400 12px/1.6 var(--font-mono);
  letter-spacing: .04em;
  color: var(--stone-deep);
}

.shop-reply {
  margin: 18px 0 0;
  padding: 16px 0 0 16px;
  border-top: 1px solid var(--paper-line);
  border-left: 2px solid var(--brass);
}

.shop-reply h4 {
  margin: 0 0 8px;
  font: 600 12px/1.4 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--brass-deep);
}

.shop-reply p {
  margin: 0;
  font: 400 16px/1.6 var(--font-serif);
  color: var(--ink-soft);
}

/* ============================================================
   S9. THE CRAFT (ink ground, editorial)
   ============================================================ */

#s9 { background: var(--ink); color: var(--bone); }

#s9 .story p {
  margin: 0 0 20px;
  max-width: 62ch;
  font: 400 17px/1.7 var(--font-serif);
  color: var(--bone);
}

/* Pull quote: oxblood text on ink fails contrast, so the quote
   sits bone on an oxblood block, a Pass row at 9.69:1. */
.pull-quote {
  margin: 32px 0;
  padding: 32px 24px;
  border-radius: var(--radius-btn);
  background: var(--oxblood);
}

.pull-quote p {
  margin: 0;
  font: 400 28px/1.08 var(--font-display);
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--bone);
  text-wrap: balance;
}

.credentials-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin: 32px 0 0;
  padding-top: 24px;
  border-top: 1px solid rgba(243, 238, 227, .22);
  font: 500 12px/1.6 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bone);
}

.credentials-row span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
}

/* ============================================================
   S10. DISPATCH MAP
   ============================================================ */

#s10 { background: var(--bone); }

#area-list {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  border-top: 1px solid var(--paper-line);
}

.area-row {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 6px 0;
  border-bottom: 1px solid var(--paper-line);
  font: 500 14px/1.4 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
}

/* ============================================================
   S11. FAQ (accordion, tap only)
   ============================================================ */

#s11 { background: var(--bone); }

#faq-list {
  margin-top: 28px;
  border-top: 1px solid var(--paper-line);
}

.faq-row { border-bottom: 1px solid var(--paper-line); }

.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding: 14px 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
}

.faq-q-text {
  font: 600 18px/1.4 var(--font-serif);
  color: var(--ink);
}

.faq-marker {
  position: relative;
  flex: 0 0 24px;
  height: 24px;
  transition: transform .3s ease;
}

.faq-marker::before,
.faq-marker::after {
  content: "";
  position: absolute;
  background: var(--brass);
}

.faq-marker::before { left: 11px; top: 2px; width: 2px; height: 20px; }
.faq-marker::after { left: 2px; top: 11px; width: 20px; height: 2px; }

.faq-row.open .faq-marker { transform: rotate(45deg); }

.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s ease;
}

.faq-a > p {
  overflow: hidden;
  margin: 0;
  font: 400 16px/1.65 var(--font-serif);
  color: var(--ink-soft);
}

.faq-row.open .faq-a { grid-template-rows: 1fr; }
.faq-row.open .faq-a > p { padding-bottom: 22px; }

/* ============================================================
   S12. CONTACT BILLBOARD (oxblood ground) + QUOTE FORM
   ============================================================ */

#s12 { background: var(--oxblood); color: var(--bone); }

.giant-number {
  display: inline-flex;
  align-items: center;
  min-height: 56px;
  margin: 8px 0 28px;
  font: 400 clamp(3rem, 14.5vw, 3.5rem)/1 var(--font-display);
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--bone);
  text-decoration: none;
}

.contact-paths {
  display: grid;
  gap: 12px;
  margin-bottom: 44px;
}

.contact-paths .btn { width: 100%; }

/* Buttons inverted for the oxblood ground: bone fill carries the
   primary, bone outline the secondary. Both are Pass rows. */
#s12 .btn-primary {
  background: var(--bone);
  border-color: var(--bone);
  color: var(--oxblood);
}

#s12 .btn-secondary {
  border-color: var(--bone);
  color: var(--bone);
}

/* Quote form: ticket-styled card on the oxblood ground */
#quote-form {
  background: var(--bone-deep);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-card);
  padding: 24px;
}

#quote-form h3 {
  margin: 0 0 20px;
  font: 400 28px/1 var(--font-display);
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--ink);
}

#quote-form label {
  display: block;
  margin: 0 0 16px;
  font: 600 14px/1.5 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--brass-deep);
}

#quote-form input[type="text"],
#quote-form input[type="tel"],
#quote-form select,
#quote-form textarea {
  display: block;
  width: 100%;
  min-height: 48px;
  margin-top: 8px;
  padding: 12px 16px;
  font: 400 16px/1.4 var(--font-serif);
  color: var(--ink);
  background: var(--bone);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-btn);
}

#quote-form textarea { min-height: 120px; resize: vertical; }

#quote-form select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236E5312' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}

#quote-form input:focus,
#quote-form select:focus,
#quote-form textarea:focus {
  border-color: var(--brass-deep);
}

.contact-pref {
  margin: 0 0 20px;
  padding: 6px 16px 10px;
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-btn);
}

.contact-pref legend {
  padding: 0 8px;
  font: 600 14px/1.5 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--brass-deep);
}

.contact-pref label {
  display: flex !important;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  margin: 0;
  font: 500 14px/1.4 var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  cursor: pointer;
}

.contact-pref input[type="radio"] {
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--oxblood);
  flex: 0 0 auto;
}

.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

#quote-form .btn[type="submit"] { width: 100%; }

#quote-form.submitted .btn[type="submit"] {
  opacity: .55;
  pointer-events: none;
}

.form-microcopy,
.form-privacy {
  margin: 16px 0 0;
  font: 400 14px/1.6 var(--font-serif);
  color: var(--stone-deep);
}

.form-privacy { margin-top: 8px; }
.form-privacy a { color: var(--oxblood); text-underline-offset: 3px; }

#form-success,
#form-failure {
  display: none;
  margin-top: 20px;
  padding: 24px;
  background: var(--bone);
  border: 1px solid var(--paper-line);
  border-top: 4px solid var(--brass);
  border-radius: var(--radius-btn);
}

#form-success.show,
#form-failure.show { display: block; }

#form-success p {
  margin: 0;
  font: 600 14px/1.6 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--oxblood);
}

#form-failure p {
  margin: 0 0 10px;
  font: 400 16px/1.6 var(--font-serif);
  color: var(--ink-soft);
}

#form-failure a {
  font: 400 40px/1.1 var(--font-display);
  letter-spacing: .01em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--oxblood);
}

/* ============================================================
   S13. FOOTER (ink)
   ============================================================ */

#s13 {
  position: relative;
  z-index: 1;
  background: var(--ink);
  color: var(--bone);
  /* Clear the sticky call bar on mobile */
  padding-bottom: calc(72px + var(--bar-h) + env(safe-area-inset-bottom));
}

.footer-wordmark {
  margin: 0 0 8px;
  font: 400 28px/1 var(--font-display);
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--bone);
}

.footer-nav {
  display: flex;
  flex-direction: column;
  margin: 12px 0 16px;
}

.footer-nav .nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  font-size: 14px;
  color: var(--brass-pale);
  text-decoration: none;
}

#s13 .credentials-row {
  border-top-color: rgba(243, 238, 227, .22);
  color: var(--bone);
}

.disclosure {
  margin: 20px 0 0;
  max-width: 60ch;
  font: 400 12px/1.7 var(--font-mono);
  letter-spacing: .04em;
  color: var(--bone);
  opacity: .78;
}

/* Footer credit: PRD says stone-deep, but stone-deep on ink is not
   a Pass row, so it renders bone at a discreet size instead. */
.footer-credit {
  margin: 16px 0 0;
  font: 400 10px/1.7 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bone);
  opacity: .7;
}

/* Retired-preview notice (hidden unless the flagship has sold) */
#retired-note { display: none; }
#retired-note:not([hidden]) {
  display: block;
  position: relative;
  z-index: 1;
  padding: 14px 20px;
  background: var(--oxblood-deep);
  color: var(--bone);
  text-align: center;
  font: 500 12px/1.6 var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}
#retired-note p { margin: 0; }

/* "Illustrative sample" tag on config-rendered reviews.
   brass-deep on bone is a 6.24:1 Pass row. */
.illustrative-tag {
  display: inline-block;
  margin: 0 0 10px;
  padding: 4px 8px;
  border: 1px dashed var(--brass-deep);
  border-radius: 4px;
  font: 500 10px/1.5 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--brass-deep);
}

/* ============================================================
   STICKY CALL BAR (mobile primary chrome)
   ============================================================ */

#sticky-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 80;
  background: var(--ink);
  border-top: 1px solid rgba(228, 200, 127, .25);
  padding-bottom: env(safe-area-inset-bottom);
  transform: translateY(0);
  transition: transform .3s ease;
}

#sticky-bar.bar-hidden { transform: translateY(110%); }

#sticky-call {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--bar-h);
  padding: 0 20px;
  font: 600 14px/1.4 var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  color: var(--brass); /* 6.68:1 on ink, Pass */
}

/* ============================================================
   DESKTOP FULL TIER (min-width 1024px)
   ============================================================ */

@media (min-width: 1024px) {
  .section-inner { padding: 0 32px; }

  main > section { padding: 120px 0; }

  main section h2 { font-size: 64px; }
  .lede { font-size: 21px; }

  /* S1: inline numbered nav, backdrop blur once the hero scrolls */
  .header-nav {
    display: flex;
    align-items: center;
    gap: 32px;
    margin: 0 auto;
  }

  .header-actions { margin-left: 0; }
  #menu-toggle { display: none; }

  #s1.scrolled, #site-header.scrolled {
    background: rgba(28, 23, 18, .88);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }

  #header-call .call-label { display: inline; }

  /* S2: 96px headline, CTAs side by side */
  #s2 h1 { font-size: 6rem; }
  .hero-ctas {
    grid-template-columns: 1fr 1fr;
    max-width: 560px;
  }
  .hero-ctas .btn { width: auto; }

  /* S4: larger ticker type */
  .tick-item { font-size: 22px; }

  /* S5: wider ticket gutters */
  #ticket-list { gap: 24px; }

  /* S6: pledge stamp settle on protocol rows (desktop only) */
  body:not(.reduced-motion) .pledge-row.reveal {
    transform: translateY(24px) scale(.98) rotate(-1deg);
  }
  body:not(.reduced-motion) .pledge-row.reveal.in {
    transform: none;
  }

  /* S8: wider measure, larger pull type */
  .review-text { font-size: 19px; }

  /* S9: pull quote steps up */
  .pull-quote { padding: 44px 40px; }
  .pull-quote p { font-size: 40px; }

  /* S10: stagger handled by --rd delays set in markup/JS */
  .area-row { font-size: 15px; }

  /* S12: 96px billboard, inline paths */
  .giant-number { font-size: 6rem; }
  .contact-paths {
    grid-template-columns: repeat(3, 1fr);
    max-width: 900px;
  }
  #quote-form { padding: 40px; max-width: 760px; }

  /* S13: nav and fine print sit inline in columns */
  #s13 .section-inner {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 16px 64px;
    align-items: start;
  }
  .footer-nav { flex-direction: row; flex-wrap: wrap; gap: 8px 32px; }
  #s13 .credentials-row,
  .disclosure,
  .footer-credit { grid-column: 1 / -1; }

  /* Sticky bar is mobile chrome; desktop keeps the header call button */
  #sticky-bar { display: none; }
  #s13 { padding-bottom: 72px; }

  /* Beat captions read larger on desktop */
  .beat-caption { font-size: 14px; }
  #part-counter { font-size: 16px; }
}

/* Hover-only enhancements: never carry information the tap path lacks */
@media (min-width: 1024px) and (hover: hover) {
  /* Nav underline sweep */
  .nav-link { position: relative; }
  .nav-link::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 6px;
    height: 2px;
    background: var(--brass);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s ease;
  }
  .nav-link:hover::after { transform: scaleX(1); }

  #header-call:hover {
    background: var(--brass);
    border-color: var(--brass);
    color: var(--ink);
  }

  .btn-primary:hover {
    background: var(--oxblood-deep);
    border-color: var(--oxblood-deep);
  }
  #s12 .btn-primary:hover {
    background: var(--brass-pale);
    border-color: var(--brass-pale);
    color: var(--ink);
  }
  .btn-secondary:hover { background: rgba(201, 150, 46, .14); }
  #s2 .btn-secondary:hover { background: rgba(201, 150, 46, .2); }
  #s12 .btn-secondary:hover { background: rgba(243, 238, 227, .12); }

  /* Ticket invert to ink with bone text and brass accents, 4px lift */
  .ticket:hover {
    background: var(--ink);
    color: var(--bone);
    border-color: var(--ink);
    transform: translateY(-4px);
  }
  .ticket:hover .ticket-no { color: var(--brass-pale); }
  .ticket:hover .ticket-name { color: var(--bone); }
  .ticket:hover .what-next { border-top-color: rgba(243, 238, 227, .25); }
  .ticket:hover .what-next h4 { color: var(--brass-pale); }
  .ticket:hover .ticket-foot { border-top-color: rgba(243, 238, 227, .25); }
  .ticket:hover .ticket-meta { color: var(--bone); opacity: .75; }
  .ticket:hover .ticket-cta { color: var(--brass-pale); }
  .ticket.active:hover { outline-color: var(--brass-pale); }

  /* Chip fill sweep */
  .price-chip:hover {
    background: var(--brass);
    border-color: var(--brass);
    color: var(--ink);
  }

  /* Ticker pause + item underline sweep */
  #ticker:hover .ticker-track { animation-play-state: paused; }
  .tick-item { position: relative; }
  .tick-item:hover { text-decoration: underline; text-decoration-color: var(--brass); text-underline-offset: 6px; }

  /* Review hover lift */
  .review:hover { transform: translateY(-4px); }

  /* Dispatch map row brighten + brass underline */
  .area-row:hover { color: var(--brass-deep); }
  .area-row:hover { text-decoration: underline; text-decoration-color: var(--brass); text-underline-offset: 6px; }

  /* Footer nav sweep reuses the .nav-link sweep above */
  .giant-number:hover { color: var(--brass-pale); }
}

/* ============================================================
   REDUCED MOTION: first-class static path
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  .reveal { opacity: 1; transform: none; }
  .ticker-track { animation: none; }
  #s1, #site-header { animation: none; }
  .protocol-row::after { transform: scaleX(1); }
}

/* Mirrors for the JS-detected reduced-motion class (app.js adds
   body.reduced-motion from the same media query) */
body.reduced-motion .reveal,
body.reduced-motion .reveal.in {
  opacity: 1;
  transform: none;
  transition: none;
}
body.reduced-motion .ticker-track { animation: none; }
body.reduced-motion #s1,
body.reduced-motion #site-header { animation: none; }
body.reduced-motion .protocol-row::after { transform: scaleX(1); transition: none; }