/* ====================================================================
   CURO DIGITAL · The Job Capture System
   Brand system: night navy + hi-vis amber + signal cyan.
   Premium-industrial. Documentary imagery, serif display, honest UI.
   ==================================================================== */

:root {
  /* Night surfaces (never pure black) */
  --night-0: #07090d;
  --night-1: #0b0f15;
  --night-2: #121823;
  --night-3: #1a2230;
  --line: rgba(235, 240, 255, 0.1);
  --line-soft: rgba(235, 240, 255, 0.06);

  /* Text on night */
  --text-hi: #f2f4f8;
  --text-mid: #b6bdca;
  --text-low: #7e8798;

  /* Hi-vis amber: the work-light. Urgency, warmth, action. */
  --amber: #f5a524;
  --amber-deep: #cd820a;
  /* Darker amber for accents on the light paper sections: #9a5d00 on #f6f4ef is ~4.9:1 (WCAG AA). */
  --amber-on-paper: #9a5d00;
  --amber-ink: #1c1303;
  --amber-glow: rgba(245, 165, 36, 0.16);

  /* Signal cyan: reserved for the system being "on duty" */
  --signal: #46e3e9;
  --signal-soft: rgba(70, 227, 233, 0.12);

  /* Stone paper for light sections */
  --paper: #f6f4ef;
  --paper-2: #ecE9e1;
  --paper-line: #ddd8cc;
  --ink: #161a21;
  --ink-mid: #4b5160;
  --ink-low: #767e8e;

  /* Type */
  --font-display: 'DM Serif Display', 'Times New Roman', serif;
  --font-ui: 'Manrope', -apple-system, 'Segoe UI', sans-serif;

  /* Scale */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
  --display-sm: clamp(1.6rem, 1.3rem + 1.6vw, 2.6rem);
  --display-md: clamp(2rem, 1.5rem + 2.6vw, 3.6rem);
  --display-lg: clamp(2.6rem, 1.8rem + 4.2vw, 5rem);
  --display-xl: clamp(3rem, 2rem + 5.5vw, 6.2rem);

  /* Rhythm */
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --section-pad: clamp(4.5rem, 10vw, 9rem);
  --radius-s: 10px;
  --radius-m: 18px;
  --radius-l: 28px;
  --radius-pill: 999px;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-quick: 200ms;
  --dur-soft: 480ms;

  --z-nav: 100;
  --z-skip: 200;
}

/* ============================ Base ============================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  /* Anchor targets (e.g. #readiness) land below the fixed nav (~79px on mobile)
     instead of hiding under it, so menu CTAs reach a clean, readable position. */
  scroll-padding-top: 5.5rem;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  font-family: var(--font-ui);
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--text-mid);
  background: var(--night-1);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }
::selection { background: var(--amber); color: var(--amber-ink); }

.wrap {
  width: min(72rem, 100% - var(--gutter) * 2);
  margin-inline: auto;
}

.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 */
.curo-skip {
  position: absolute;
  left: -9999px;
  z-index: var(--z-skip);
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-pill);
  background: var(--amber);
  color: var(--amber-ink);
  font-weight: 700;
  font-size: var(--text-sm);
  text-decoration: none;
}
.curo-skip:focus { left: 1rem; top: 1rem; }

/* Focus visibility everywhere */
:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ============================ Typography ============================ */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--amber);
}
.eyebrow::before {
  content: "";
  width: 1.6rem;
  height: 1px;
  background: var(--amber);
  opacity: 0.7;
}
.on-paper .eyebrow { color: var(--amber-on-paper); }
.on-paper .eyebrow::before { background: var(--amber-on-paper); }

.display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--text-hi);
  /* Serif display glyphs (ascenders/descenders) need room or iOS Safari clips them. */
  padding-bottom: 0.08em;
}
.on-paper .display { color: var(--ink); }
.display em { font-style: italic; color: var(--amber); }
.on-paper .display em { color: var(--amber-on-paper); }

.lede {
  font-size: var(--text-lg);
  line-height: 1.75;
  color: var(--text-mid);
  max-width: 38em;
}
.on-paper .lede { color: var(--ink-mid); }

/* ============================ Buttons ============================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.95rem 1.9rem;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-weight: 700;
  font-size: var(--text-sm);
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: transform var(--dur-quick) var(--ease-out),
              background var(--dur-quick) var(--ease-out),
              border-color var(--dur-quick) var(--ease-out),
              box-shadow var(--dur-quick) var(--ease-out);
}
.btn:active { transform: scale(0.98); }

.btn-amber {
  background: var(--amber);
  color: var(--amber-ink);
  box-shadow: 0 8px 30px -8px var(--amber-glow), 0 0 0 0 transparent;
}
.btn-amber:hover { background: #ffb637; box-shadow: 0 10px 36px -6px rgba(245, 165, 36, 0.35); }

.btn-ghost {
  border-color: var(--line);
  color: var(--text-hi);
  background: transparent;
}
.btn-ghost:hover { border-color: var(--text-low); background: rgba(255, 255, 255, 0.04); }

.on-paper .btn-ghost { border-color: var(--paper-line); color: var(--ink); }
.on-paper .btn-ghost:hover { background: rgba(0, 0, 0, 0.04); }

.btn-block { width: 100%; }

/* ============================ Nav ============================ */
.site-nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-nav);
  transition: background var(--dur-soft) var(--ease-out),
              border-color var(--dur-soft) var(--ease-out);
  border-bottom: 1px solid transparent;
}
.site-nav.is-solid {
  background: rgba(7, 9, 13, 0.82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line-soft);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.05rem;
}
.wordmark {
  font-family: var(--font-display);
  font-size: 1.55rem;
  color: var(--text-hi);
  text-decoration: none;
  line-height: 1;
}
.wordmark .dot { color: var(--amber); }
.nav-links {
  display: none;
  align-items: center;
  gap: 2rem;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-mid);
}
.nav-links a { text-decoration: none; transition: color var(--dur-quick); }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--text-hi); }
.nav-cta { display: none; }

@media (min-width: 60rem) {
  .nav-links { display: flex; }
  .nav-cta { display: inline-flex; padding: 0.6rem 1.3rem; }
  .menu-toggle-wrap { display: none; }
}

/* Mobile menu (details/summary, works without JS) */
.menu-toggle-wrap summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--text-hi);
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
  /* Stay above the open panel so the toggle is always tappable to close */
  position: relative;
  z-index: 90;
}
.menu-toggle-wrap summary::-webkit-details-marker { display: none; }
/* Keep the wordmark visible on top of the open full-screen panel */
.site-nav .wordmark { position: relative; z-index: 90; }
.menu-panel {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: var(--night-0);
  padding: 6rem var(--gutter) 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow-y: auto;
}
.menu-panel nav { display: grid; }
/* Scope the big serif link styling to the nav list only, so the .btn CTAs in
   .menu-foot keep their button styling instead of becoming giant serif links. */
.menu-panel nav a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--line-soft);
  color: var(--text-hi);
  font-family: var(--font-display);
  font-size: 1.8rem;
  text-decoration: none;
}
.menu-panel nav a small {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--text-low);
  letter-spacing: 0.2em;
}
.menu-foot { display: grid; gap: 0.8rem; padding-top: 2rem; }

/* The open mobile menu must cover the whole viewport. The fixed .menu-panel is a
   descendant of .site-nav, and once the page is scrolled .is-solid adds a
   backdrop-filter, which establishes a containing block and collapses the panel
   to the nav bar's box (the "menu bleeds through after scrolling" bug). While the
   menu is open, drop the filter so the panel is sized to the viewport again, and
   make the bar opaque to match the panel. :has() handles the no-JS path; the JS
   sets html.menu-open both as a fallback for browsers without :has and to lock
   background scroll behind the overlay. */
.site-nav:has(.menu-toggle-wrap[open]),
html.menu-open .site-nav {
  background: var(--night-0);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom-color: transparent;
}
html.menu-open { overflow: hidden; }

/* ============================ Hero ============================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  isolation: isolate;
  overflow: clip;
}
.hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero-media img {
  width: 100%;
  height: 112%;
  object-fit: cover;
  object-position: center 35%;
}
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgba(7, 9, 13, 0.96) 6%, rgba(7, 9, 13, 0.55) 38%, rgba(7, 9, 13, 0.25) 62%, rgba(7, 9, 13, 0.55) 100%),
    radial-gradient(120% 80% at 78% 30%, transparent 40%, rgba(7, 9, 13, 0.45) 100%);
}
.hero-inner {
  padding-block: 7.5rem clamp(3rem, 8vh, 5.5rem);
}
.hero h1 {
  font-size: var(--display-xl);
  max-width: 11em;
  margin-top: 1.1rem;
}
.hero .lede { margin-top: 1.4rem; }
.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 2.2rem;
}
.hero-fine {
  margin-top: 1.4rem;
  font-size: var(--text-sm);
  color: var(--text-low);
}
.hero-fine strong { color: var(--text-mid); font-weight: 600; }

.scroll-cue {
  position: absolute;
  right: var(--gutter);
  bottom: 2.2rem;
  display: none;
  align-items: center;
  gap: 0.7rem;
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-low);
  writing-mode: vertical-rl;
}
.scroll-cue::after {
  content: "";
  width: 1px;
  height: 3.4rem;
  background: linear-gradient(to bottom, var(--amber), transparent);
}
@media (min-width: 60rem) { .scroll-cue { display: inline-flex; } }

@media (min-width: 48rem) {
  .hero {
    align-items: center;
  }
}

/* ============================ Sections ============================ */
.section { padding-block: var(--section-pad); position: relative; }
.section-night { background: var(--night-1); }
.section-deep { background: var(--night-0); }
.section-paper { background: var(--paper); color: var(--ink-mid); }
.section-head { max-width: 46rem; }
.section-head .display { font-size: var(--display-md); margin-top: 1.1rem; }
.section-head .lede { margin-top: 1.2rem; }

/* ============================ The 2:14pm story ============================ */
.story-stage { position: relative; }
.story-pin {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: clip;
}
.story-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.story-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.34; }
.story-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(90% 90% at 50% 50%, rgba(7, 9, 13, 0.2), rgba(7, 9, 13, 0.93));
}
.story-frames { position: relative; z-index: 1; }
.story-frame { display: grid; gap: 2rem; align-items: center; }
.story-frame + .story-frame { margin-top: 4.5rem; }
@media (min-width: 60rem) {
  .story-frame { grid-template-columns: 1.1fr 0.9fr; gap: 4rem; }
  .story-frame + .story-frame { margin-top: 0; }
  .js-story { min-height: min(34rem, 72svh); }
  .js-story .story-frame { position: absolute; inset: 0; display: grid; align-content: center; }
}
.story-time {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-low);
}
.story-frame h3 {
  font-family: var(--font-display);
  font-size: var(--display-md);
  color: var(--text-hi);
  line-height: 1.08;
  margin-top: 0.9rem;
}
.story-frame p { margin-top: 1rem; max-width: 30em; }

/* Phone UI chips used inside the story */
.phone-card {
  background: rgba(18, 24, 35, 0.85);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  padding: 1.4rem;
  max-width: 24rem;
}
.phone-row {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-m);
  border: 1px solid var(--line-soft);
  background: var(--night-2);
}
.phone-row + .phone-row { margin-top: 0.7rem; }
.phone-row .ico {
  flex: none;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1rem;
}
.ico-miss { background: rgba(244, 63, 94, 0.14); color: #fb7185; }
.ico-text { background: var(--signal-soft); color: var(--signal); }
.ico-ok { background: var(--amber-glow); color: var(--amber); }
.phone-row .t { font-size: var(--text-sm); line-height: 1.45; }
.phone-row .t strong { color: var(--text-hi); display: block; }
.bubble {
  margin-top: 0.7rem;
  background: var(--signal-soft);
  border: 1px solid rgba(70, 227, 233, 0.3);
  border-radius: var(--radius-m) var(--radius-m) var(--radius-m) 4px;
  padding: 0.9rem 1.1rem;
  font-size: var(--text-sm);
  color: var(--text-hi);
  line-height: 1.5;
}

/* ============================ System parts ============================ */
.parts { display: grid; gap: 1.2rem; margin-top: 3.2rem; }
@media (min-width: 60rem) { .parts { grid-template-columns: repeat(2, 1fr); gap: 1.6rem; } }
.part {
  position: relative;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-l);
  background: linear-gradient(160deg, var(--night-2), var(--night-1) 70%);
  padding: 2rem;
  overflow: clip;
  transition: border-color var(--dur-quick) var(--ease-out), transform var(--dur-soft) var(--ease-out);
}
.part:hover { border-color: rgba(245, 165, 36, 0.35); }
.part .num {
  font-family: var(--font-display);
  font-size: 3.4rem;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--amber);
  opacity: 0.85;
}
.part h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.7rem;
  color: var(--text-hi);
  margin-top: 1.1rem;
}
.part p { margin-top: 0.7rem; font-size: var(--text-sm); line-height: 1.75; }
.part .tag {
  display: inline-block;
  margin-top: 1.2rem;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--signal);
}

/* Image strips between editorial blocks */
.strip {
  margin-top: 3.5rem;
  border-radius: var(--radius-l);
  overflow: clip;
  position: relative;
}
.strip img { width: 100%; height: clamp(16rem, 42vw, 30rem); object-fit: cover; }
.strip figcaption {
  position: absolute;
  left: 1.4rem;
  bottom: 1.2rem;
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-mid);
  background: rgba(7, 9, 13, 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  padding: 0.45rem 0.9rem;
  border-radius: var(--radius-pill);
}

/* ============================ Quiz ============================ */
.quiz-shell {
  margin-top: 3rem;
  display: grid;
  gap: 1.5rem;
}
@media (min-width: 64rem) {
  .quiz-shell { grid-template-columns: 0.9fr 1.1fr; align-items: stretch; }
}
.quiz-side {
  border-radius: var(--radius-l);
  overflow: clip;
  position: relative;
  min-height: 18rem;
}
.quiz-side img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.quiz-side::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(7, 9, 13, 0.9), rgba(7, 9, 13, 0.15) 60%);
}
.quiz-side .side-copy {
  position: absolute;
  left: 1.6rem;
  right: 1.6rem;
  bottom: 1.5rem;
  z-index: 1;
}
.quiz-side .side-copy p {
  color: var(--text-mid);
  font-size: var(--text-sm);
}
.quiz-side .side-copy strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.5rem;
  color: var(--text-hi);
  margin-bottom: 0.4rem;
}

.quiz-card {
  background: var(--night-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  padding: clamp(1.5rem, 4vw, 2.6rem);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.6);
}
.quiz-progress {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 1.8rem;
}
.quiz-progress span {
  height: 4px;
  flex: 1;
  border-radius: var(--radius-pill);
  background: var(--night-3);
  transition: background var(--dur-quick);
}
.quiz-progress span.done { background: var(--amber); }

.quiz-q {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--display-sm);
  color: var(--text-hi);
  line-height: 1.15;
}
.quiz-hint { margin-top: 0.5rem; font-size: var(--text-sm); color: var(--text-low); }

.quiz-opts { display: grid; gap: 0.7rem; margin-top: 1.6rem; }
@media (min-width: 40rem) { .quiz-opts.cols-2 { grid-template-columns: 1fr 1fr; } }
.quiz-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  width: 100%;
  text-align: left;
  padding: 1rem 1.2rem;
  border-radius: var(--radius-m);
  border: 1px solid var(--line);
  background: var(--night-1);
  color: var(--text-hi);
  font-weight: 600;
  font-size: var(--text-sm);
  transition: border-color var(--dur-quick), background var(--dur-quick), transform var(--dur-quick);
}
.quiz-opt small { display: block; color: var(--text-low); font-weight: 500; margin-top: 0.15rem; }
.quiz-opt:hover { border-color: var(--amber); background: var(--night-3); }
.quiz-opt:active { transform: scale(0.99); }
.quiz-opt[aria-pressed="true"] {
  border-color: var(--amber);
  background: var(--amber-glow);
}
.quiz-opt .mark { color: var(--amber); opacity: 0; flex: none; }
.quiz-opt[aria-pressed="true"] .mark { opacity: 1; }

.quiz-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1.8rem;
}
.quiz-back {
  background: none;
  border: none;
  color: var(--text-low);
  font-size: var(--text-sm);
  font-weight: 600;
  padding: 0.4rem 0;
}
.quiz-back:hover { color: var(--text-hi); }

/* Result */
.score-wrap {
  display: grid;
  gap: 1.6rem;
  align-items: center;
  grid-template-columns: auto 1fr;
}
.score-ring { position: relative; width: 7.5rem; height: 7.5rem; flex: none; }
.score-ring svg { transform: rotate(-90deg); }
.score-ring .track { stroke: var(--night-3); }
.score-ring .fill {
  stroke: var(--amber);
  stroke-linecap: round;
  transition: stroke-dashoffset 1200ms var(--ease-out);
}
.score-ring .val {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--text-hi);
}
.score-band {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--text-hi);
  line-height: 1.15;
}
.score-note { margin-top: 0.4rem; font-size: var(--text-sm); color: var(--text-low); }

.money-panel {
  margin-top: 1.6rem;
  border: 1px solid rgba(245, 165, 36, 0.35);
  background: var(--amber-glow);
  border-radius: var(--radius-m);
  padding: 1.3rem 1.4rem;
}
.money-panel .label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--amber);
}
.money-fig {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 5vw, 3rem);
  color: var(--text-hi);
  line-height: 1.05;
  margin-top: 0.4rem;
}
.money-formula {
  margin-top: 0.7rem;
  font-size: var(--text-sm);
  color: var(--text-mid);
  line-height: 1.6;
}
.money-assume {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem;
  font-size: var(--text-sm);
  color: var(--text-mid);
}
.money-assume input[type="range"] { accent-color: var(--amber); flex: 1; min-width: 8rem; }
.money-foot { margin-top: 0.9rem; font-size: var(--text-xs); color: var(--text-low); }

/* Lead capture + classic form */
.field { margin-top: 1rem; }
.field label {
  display: block;
  font-size: var(--text-sm);
  color: var(--text-mid);
  margin-bottom: 0.45rem;
}
.field input, .field select, .field textarea {
  width: 100%;
  padding: 0.85rem 1.05rem;
  border-radius: var(--radius-m);
  border: 1px solid var(--line);
  background: var(--night-1);
  color: var(--text-hi);
  font: inherit;
  transition: border-color var(--dur-quick);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--amber);
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-low); }
.field-grid { display: grid; gap: 0 1rem; }
@media (min-width: 40rem) { .field-grid { grid-template-columns: 1fr 1fr; } }
.hidden { display: none !important; }

.form-note { margin-top: 1rem; font-size: var(--text-sm); color: var(--text-low); text-align: center; }
.form-note a { color: var(--amber); font-weight: 700; text-decoration: none; }
.form-result {
  margin-top: 1rem;
  border: 1px solid var(--line);
  background: var(--night-1);
  border-radius: var(--radius-m);
  padding: 1.2rem 1.3rem;
  font-size: var(--text-sm);
  line-height: 1.65;
}
.form-result strong { color: var(--text-hi); display: block; margin-bottom: 0.2rem; }
.quiz-alt {
  margin-top: 1.4rem;
  text-align: center;
  font-size: var(--text-sm);
  color: var(--text-low);
}
.quiz-alt button {
  background: none;
  border: none;
  color: var(--amber);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ============================ Proof / scoreboard ============================ */
.board { display: grid; gap: 1.4rem; margin-top: 3rem; }
@media (min-width: 60rem) { .board { grid-template-columns: 1fr 1fr; } }
.board-card {
  border: 1px solid var(--paper-line);
  background: #fff;
  border-radius: var(--radius-l);
  padding: 2rem;
}
.board-card.is-amber { border-color: rgba(205, 130, 10, 0.4); }
.board-card .k {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mid);
}
.board-card.is-amber .k { color: var(--amber-on-paper); }
.board-card h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.7rem;
  color: var(--ink);
  margin-top: 0.8rem;
}
.board-card ul { list-style: none; margin-top: 1.2rem; display: grid; gap: 0.8rem; }
.board-card li {
  display: flex;
  gap: 0.8rem;
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--ink-mid);
}
.board-card li::before {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--amber-deep);
  margin-top: 0.55rem;
}

/* ============================ Pricing plaque ============================ */
.plaque {
  margin-top: 3rem;
  border-radius: var(--radius-l);
  background: linear-gradient(165deg, var(--night-2), var(--night-0) 80%);
  border: 1px solid var(--line);
  padding: clamp(1.8rem, 5vw, 3.2rem);
  position: relative;
  overflow: clip;
}
.plaque::before {
  content: "";
  position: absolute;
  top: -40%;
  right: -10%;
  width: 50%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--amber-glow), transparent 70%);
  pointer-events: none;
}
.plaque-grid { display: grid; gap: 2.2rem; position: relative; }
@media (min-width: 60rem) { .plaque-grid { grid-template-columns: 1.1fr 0.9fr; } }
.price-line { display: flex; align-items: baseline; gap: 0.8rem; flex-wrap: wrap; }
.price-line .fig {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6vw, 4rem);
  color: var(--text-hi);
  line-height: 1;
}
.price-line .per { color: var(--text-low); font-size: var(--text-sm); }
.price-sub { margin-top: 1.1rem; font-size: var(--text-sm); line-height: 1.75; max-width: 30em; }
.plaque ul { list-style: none; display: grid; gap: 0.85rem; }
.plaque li {
  display: flex;
  gap: 0.8rem;
  font-size: var(--text-sm);
  color: var(--text-mid);
  line-height: 1.65;
}
.plaque li::before {
  content: "";
  flex: none;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--amber);
  margin-top: 0.55rem;
}
.roi-line {
  margin-top: 1.6rem;
  font-weight: 700;
  color: var(--amber);
}
.guarantee {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.8rem;
  padding: 0.55rem 1.1rem;
  border: 1px solid rgba(245, 165, 36, 0.4);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  color: var(--text-hi);
}
.guarantee::before { content: "✓"; color: var(--amber); font-weight: 800; }

/* ============================ Steps ============================ */
.steps { margin-top: 3rem; display: grid; gap: 1.2rem; counter-reset: step; }
@media (min-width: 60rem) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step {
  border-top: 2px solid var(--paper-line);
  padding-top: 1.2rem;
  counter-increment: step;
}
.step::before {
  content: "0" counter(step);
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--amber-on-paper);
}
.step h3 { font-size: 1.05rem; font-weight: 700; color: var(--ink); margin-top: 0.5rem; }
.step p { font-size: var(--text-sm); margin-top: 0.4rem; line-height: 1.7; }

/* ============================ Split (who it's for) ============================ */
.split { display: grid; gap: 2.4rem; align-items: center; }
@media (min-width: 60rem) { .split { grid-template-columns: 0.85fr 1.15fr; gap: 4rem; } }
.split-media { border-radius: var(--radius-l); overflow: clip; position: relative; }
.split-media img { width: 100%; height: 100%; object-fit: cover; }
.trade-rows { list-style: none; margin-top: 2rem; }
.trade-rows li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--line-soft);
}
.trade-rows .t {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--text-hi);
}
.trade-rows .d { font-size: var(--text-sm); color: var(--text-low); text-align: right; max-width: 22em; }

/* ============================ Final CTA ============================ */
.final {
  position: relative;
  isolation: isolate;
  overflow: clip;
}
.final-media { position: absolute; inset: 0; z-index: -2; }
.final-media img { width: 100%; height: 100%; object-fit: cover; }
.final::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to right, rgba(7, 9, 13, 0.95) 20%, rgba(7, 9, 13, 0.55));
}
.final-inner { padding-block: clamp(6rem, 14vw, 11rem); }
.final-inner h2 { max-width: 13em; }
.final-inner .lede, .final-inner .hero-ctas { max-width: 40rem; }

/* ============================ Footer ============================ */
.site-foot {
  background: var(--night-0);
  border-top: 1px solid var(--line-soft);
  padding-block: 3.5rem 2rem;
  font-size: var(--text-sm);
}
.foot-grid { display: grid; gap: 2rem; }
@media (min-width: 60rem) { .foot-grid { grid-template-columns: 1.2fr 0.8fr; align-items: end; } }
.foot-grid .wordmark { font-size: 1.9rem; }
.foot-desc { margin-top: 1rem; max-width: 34em; color: var(--text-low); line-height: 1.7; }
.foot-contact { display: grid; gap: 0.4rem; color: var(--text-mid); }
@media (min-width: 60rem) { .foot-contact { text-align: right; } }
.foot-contact a { color: var(--text-mid); text-decoration: none; }
.foot-contact a:hover { color: var(--text-hi); }
.foot-legal {
  margin-top: 2.5rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.8rem;
  color: var(--text-low);
  font-size: var(--text-xs);
}
.foot-legal a { color: inherit; text-decoration: none; }
.foot-legal a:hover { color: var(--text-mid); }

/* ============================ Reveal animations ============================
   .rv elements are fully visible by default, so no-JS, reduced-motion and any
   script failure all leave content readable (fail-safe). Only after JS confirms
   support does it add html.reveal-on, opting elements into a hidden-then-revealed
   state that an IntersectionObserver clears by adding .in on scroll. The hidden
   state is also gated behind no-preference so reduced-motion never hides content. */
@media (prefers-reduced-motion: no-preference) {
  html.reveal-on .rv {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity var(--dur-soft) var(--ease-out),
                transform var(--dur-soft) var(--ease-out);
  }
  html.reveal-on .rv.in {
    opacity: 1;
    transform: none;
  }
}

/* ============================ Inner-page additions ============================ */
/* Shorter hero for inner pages */
.hero-short { min-height: min(46rem, 78svh); }
.hero-short .hero-inner { padding-top: 8.5rem; }

/* Three-up variant of the parts grid (plumbers buying moments) */
@media (min-width: 60rem) {
  .parts.cols-3 { grid-template-columns: repeat(3, 1fr); }
}

/* Numbered typographic list. Night by default, paper via .on-paper */
.num-list { list-style: none; margin-top: 2.6rem; border-top: 1px solid var(--line-soft); }
.num-list li {
  display: flex;
  align-items: baseline;
  gap: 1.4rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--text-lg);
  color: var(--text-hi);
  line-height: 1.55;
}
.num-list .n {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--amber);
  flex: none;
  width: 2.2rem;
}
.on-paper .num-list { border-color: var(--paper-line); }
.on-paper .num-list li { border-color: var(--paper-line); color: var(--ink); }
.on-paper .num-list .n { color: var(--amber-on-paper); }
.list-foot { margin-top: 1.4rem; font-weight: 700; color: var(--text-hi); }
.on-paper .list-foot { color: var(--ink); }

/* FAQ rows */
.faq { margin-top: 2.6rem; border-top: 1px solid var(--paper-line); }
.faq > div { padding: 1.4rem 0; border-bottom: 1px solid var(--paper-line); }
.faq h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.35rem;
  color: var(--ink);
}
.faq p { margin-top: 0.5rem; font-size: var(--text-sm); line-height: 1.75; color: var(--ink-mid); }

/* Long-form prose (privacy, terms) */
.prose { max-width: 42rem; }
.prose h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.6rem;
  color: var(--ink);
  margin-top: 2.4rem;
}
.prose p { margin-top: 0.8rem; line-height: 1.8; color: var(--ink-mid); }
.prose a { color: var(--amber-on-paper); text-decoration: underline; text-underline-offset: 2px; }

/* Small stat chip row used in inner heroes */
.chips { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 2rem; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-mid);
}
.chip::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--amber); }

/* Pull-quote plaque (about, work) */
.quote-plaque {
  margin-top: 2.6rem;
  border-radius: var(--radius-l);
  background: linear-gradient(165deg, var(--night-2), var(--night-0) 80%);
  border: 1px solid var(--line);
  padding: clamp(1.8rem, 5vw, 3rem);
}
.quote-plaque .k {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--amber);
}
.quote-plaque p.big {
  font-family: var(--font-display);
  font-size: var(--display-sm);
  color: var(--text-hi);
  line-height: 1.2;
  margin-top: 0.9rem;
}

/* Inner-page utility classes (replace inline styles, keep CSP strict) */
.board-row { width: 100%; }
.lede-stack p + p { margin-top: 1.2rem; }
.quote-plaque p.note { margin-top: 0.9rem; max-width: 34em; }
.hero-prose { min-height: auto; }
.hero-prose .hero-inner { padding-block: 9rem 0; }

/* Inner heroes sit higher and sometimes over lighter images, so guarantee
   text contrast with a stronger, left-weighted scrim. */
.hero-short .hero-scrim {
  background:
    linear-gradient(to top, rgba(7, 9, 13, 0.96) 8%, rgba(7, 9, 13, 0.74) 48%, rgba(7, 9, 13, 0.6) 100%),
    linear-gradient(to right, rgba(7, 9, 13, 0.85), rgba(7, 9, 13, 0.2) 78%);
}

/* ============================ Two ways in (path selector) ============================ */
.paths { display: grid; gap: 1.4rem; margin-top: 3rem; }
@media (min-width: 60rem) { .paths { grid-template-columns: 1fr 1fr; gap: 1.8rem; } }
.path-card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  overflow: clip;
  background: var(--night-2);
  display: flex;
  flex-direction: column;
  min-height: 24rem;
  isolation: isolate;
}
.path-card .path-media { position: absolute; inset: 0; z-index: -2; }
.path-card .path-media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.5; }
.path-card::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(7,9,13,0.97) 30%, rgba(7,9,13,0.6));
}
.path-card .path-body { margin-top: auto; padding: 2rem; }
.path-card .path-q {
  font-family: var(--font-display);
  font-size: var(--display-sm);
  color: var(--text-hi);
  line-height: 1.12;
}
.path-list { list-style: none; margin-top: 1.2rem; display: grid; gap: 0.6rem; padding-left: 0; }
.path-list li {
  display: flex; gap: 0.6rem; font-size: var(--text-sm); color: var(--text-mid); line-height: 1.5;
}
.path-list li::before { content: ""; flex: none; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--amber); margin-top: 0.55rem; }
.path-card .btn { margin-top: 1.6rem; align-self: flex-start; }

/* ============================ Service menu (grouped) ============================ */
.menu-group + .menu-group { margin-top: 3rem; }
.menu-group .group-head {
  display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap;
  padding-bottom: 1rem; border-bottom: 1px solid var(--line);
}
.menu-group .group-head .gk {
  font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--amber);
}
.menu-group .group-head h2 {
  font-family: var(--font-display); font-weight: 400; font-size: var(--display-sm); color: var(--text-hi); line-height: 1.1;
}
.menu-items { display: grid; gap: 0; }
.menu-item {
  display: grid; grid-template-columns: auto 1fr auto; gap: 1rem 1.3rem; align-items: start;
  padding: 1.5rem 0; border-bottom: 1px solid var(--line-soft);
}
.menu-item .mi-num { font-family: var(--font-display); font-size: 1.3rem; color: var(--amber); }
.menu-item h3 { font-size: 1.1rem; font-weight: 700; color: var(--text-hi); }
.menu-item p { margin-top: 0.35rem; font-size: var(--text-sm); color: var(--text-mid); line-height: 1.65; }
.menu-item .mi-tag {
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--signal); white-space: nowrap; padding-top: 0.2rem;
}
.menu-item .mi-tag.is-new { color: var(--amber); }
@media (max-width: 40rem) {
  .menu-item { grid-template-columns: auto 1fr; }
  .menu-item .mi-tag { grid-column: 2; }
}

/* ============================ Voice spotlight ============================ */
.spotlight { display: grid; gap: 2.4rem; align-items: center; }
@media (min-width: 60rem) { .spotlight { grid-template-columns: 1.05fr 0.95fr; gap: 4rem; } }
.spotlight-media { border-radius: var(--radius-l); overflow: clip; position: relative; }
.spotlight-media img { width: 100%; height: 100%; object-fit: cover; min-height: 18rem; }
.callbar {
  display: flex; align-items: center; gap: 0.9rem;
  margin-top: 1.6rem; padding: 0.9rem 1.1rem;
  border: 1px solid rgba(70,227,233,0.3); border-radius: var(--radius-m);
  background: var(--signal-soft); font-size: var(--text-sm); color: var(--text-hi);
}
.callbar .pulse {
  flex: none; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--signal);
  box-shadow: 0 0 0 0 rgba(70,227,233,0.6);
}
@media (prefers-reduced-motion: no-preference) {
  .callbar .pulse { animation: pulse 2s var(--ease-out) infinite; }
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(70,227,233,0.5); }
  70% { box-shadow: 0 0 0 0.7rem rgba(70,227,233,0); }
  100% { box-shadow: 0 0 0 0 rgba(70,227,233,0); }
}

/* Small utilities (avoid inline styles, keep CSP strict) */
.tag.is-new { color: var(--amber); }
.mt-list { margin-top: 1.6rem; }
.center-cta { margin-top: 2.4rem; }

/* ============================ Pricing tiers ============================ */
.tiers { display: grid; gap: 1.4rem; margin-top: 3rem; align-items: start; }
@media (min-width: 64rem) { .tiers { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }
.tier {
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background: linear-gradient(165deg, var(--night-2), var(--night-1) 75%);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.tier.is-featured {
  border-color: rgba(245, 165, 36, 0.5);
  box-shadow: 0 0 0 1px rgba(245, 165, 36, 0.25), 0 30px 70px -40px rgba(0,0,0,0.7);
}
.tier-flag {
  align-self: flex-start;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--amber-ink);
  background: var(--amber);
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-pill);
  margin-bottom: 1.1rem;
}
.tier h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.7rem; color: var(--text-hi); }
.tier .tier-for { margin-top: 0.4rem; font-size: var(--text-sm); color: var(--text-low); min-height: 2.6em; }
.tier .tier-price { margin-top: 1.2rem; display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.tier .tier-price .setup { font-family: var(--font-display); font-size: 2.2rem; color: var(--text-hi); line-height: 1; }
.tier .tier-price .mo { font-size: var(--text-sm); color: var(--text-mid); }
.tier .tier-note { margin-top: 0.5rem; font-size: var(--text-xs); color: var(--text-low); }
.tier ul { list-style: none; margin-top: 1.4rem; display: grid; gap: 0.65rem; flex: 1; }
.tier li { display: flex; gap: 0.6rem; font-size: var(--text-sm); line-height: 1.55; color: var(--text-mid); }
.tier li::before { content: ""; flex: none; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--amber); margin-top: 0.55rem; }
.tier li.muted { color: var(--text-low); }
.tier li.muted::before { background: var(--text-low); }
.tier .btn { margin-top: 1.8rem; }

/* Add-on chips grid */
.addons { display: grid; gap: 0.7rem; margin-top: 2.2rem; }
@media (min-width: 40rem) { .addons { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64rem) { .addons { grid-template-columns: repeat(3, 1fr); } }
.addon {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-m);
  background: var(--night-2);
  font-size: var(--text-sm);
  color: var(--text-mid);
}
.addon::before { content: "+"; color: var(--amber); font-weight: 800; flex: none; }
.on-paper .addon { background: #fff; border-color: var(--paper-line); color: var(--ink-mid); }

/* ============================ Fix pass 2026-06-13 ============================ */
/* Cheap insurance against any future long-string overflow on the dark layout */
body { overflow-wrap: break-word; }

/* Tablet (768 to 959px): take the card grids to two columns instead of a tall single column */
@media (min-width: 48rem) and (max-width: 59.999rem) {
  .parts, .board, .paths, .foot-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Minimum comfortable tap targets for secondary controls */
.menu-toggle-wrap summary { min-height: 2.75rem; }
.quiz-back { min-height: 2.75rem; display: inline-flex; align-items: center; }
.quiz-alt button {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 0.6rem;
}
.text-center { text-align: center; }


/* Final-pass hooks */
.money-anchor { margin-top: 0.7rem; font-size: var(--text-sm); font-weight: 700; color: var(--amber); }
.reassure-row { margin-top: 1.4rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.reassure-row .hero-fine { color: var(--text-mid); }
.reassure-row strong { color: var(--text-hi); }

/* ============================ Fix pass 2026-06-14 ============================ */
/* Pricing tiers and add-on chips were stuck single-column from 768px to 1023px:
   the earlier tablet bridge took the other card grids to two columns but omitted
   these. Give them two columns through that band, then three at the 64rem desktop
   layout, so iPad-portrait pricing no longer reads as one tall column. */
@media (min-width: 48rem) and (max-width: 63.999rem) {
  .tiers, .addons { grid-template-columns: repeat(2, 1fr); }
}

/* Footer legal links and the quiz skip control sat below a comfortable mobile tap
   size. Give them a ~44px hit area without changing the visual run of text. */
.foot-legal a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding-inline: 0.3rem;
}

/* A selected quiz option lightens its own background (amber-glow), which dropped
   the small sub-label under AA contrast. Lift it to text-mid only when selected. */
.quiz-opt[aria-pressed="true"] small { color: var(--text-mid); }

/* On the narrowest phones the fixed 120px score ring crowded the band text into a
   thin ribbon; stack the ring above the text below ~416px. */
@media (max-width: 26rem) {
  .score-wrap { grid-template-columns: 1fr; justify-items: start; gap: 1.1rem; }
}