/* ==========================================================================
   Haunt Engine · hauntengine.com

   One-page site for a growth agency that works only with haunted attractions.
   The page is the agency's homepage: what it is, how it works, the ten
   services, and who does the work. The free audit is the first step and the
   one call to action, so it is the primary button in every viewport and the
   form gets its own section rather than the hero.

   Dark surface: the audience reads this at night, in the off-season, after a
   build day. Red is the brand's one color (#D80E0C, from the Figma logo) and
   it is rationed: the primary button, one word in the headline, the current
   nav item, the focus ring, and one soft field behind the form.

   Type roles (four, nothing outside them):
     brand    the Figma wordmark, inlined SVG, never set in a font
     display  Gabarito 700-900   headlines
     control  Rubik 500-600      nav, buttons, labels, small caps
     body     Rubik 400          running text

   Fonts are self-hosted (assets/fonts). Refresh URL in the README.
   ========================================================================== */

:root {
  color-scheme: dark;
  --bg: #0b0b0d;
  --bg-raised: #131317;
  --bg-sunk: #050507;
  --fg: #f4f2f0;
  --fg-dim: rgba(244, 242, 240, 0.74);
  --fg-mute: rgba(244, 242, 240, 0.56);
  --accent: #d80e0c;
  --accent-deep: #a90a09;
  --ink: #ffffff;
  --rule: rgba(244, 242, 240, 0.12);
  --rule-strong: rgba(244, 242, 240, 0.22);
  --field: rgba(5, 5, 7, 0.55);

  --font-display: "Gabarito", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --font-ui: "Rubik", "Helvetica Neue", Arial, sans-serif;

  /* Every step bottoms out at 14px on a phone, 16px on desktop. */
  --step-hero: clamp(2.25rem, 1.1rem + 4.6vw, 4.125rem);
  --step-h2: clamp(1.75rem, 1.2rem + 2.2vw, 2.625rem);
  --step-h3: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --step-lead: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  --step-body: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
  --step-small: 1rem;          /* floor: nothing on the page sets below 16px */
  --step-caps: 1rem;

  --wrap: 76rem;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section-y: clamp(3.5rem, 8vw, 6.5rem);
  --header-h: 5rem;            /* read by the script for anchor offsets */
  --radius: 0.875rem;
  --radius-sm: 0.5rem;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Fonts ------------------------------------------------------------------
   Taken from the `latin` block of
   https://fonts.googleapis.com/css2?family=Gabarito:wght@400..900&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap
   Google's unicode-range kept so a stray non-latin glyph falls to the system
   face instead of a notdef box. */
@font-face {
  font-family: "Gabarito";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/gabarito-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Rubik";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("../fonts/rubik-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Rubik";
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url("../fonts/rubik-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

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

html {
  /* clip, not hidden: hidden makes body the scroll container and the sticky
     header scrolls away with it. */
  overflow-x: clip;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-ui);
  font-size: var(--step-body);
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
button, input, select, textarea { font: inherit; color: inherit; }
strong { font-weight: 600; }

::selection { background: var(--accent); color: var(--ink); }

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

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

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

.section {
  padding-block: var(--section-y);
  border-top: 1px solid var(--rule);
}
.section--raised { background: var(--bg-raised); }
.section--flush { border-top: 0; padding-top: 0; }

/* Panel: a bordered, raised container. Used once, for the values. */
.panel {
  position: relative;
  z-index: 1;   /* sits over the tail of the hero backdrop */
  padding: clamp(1.5rem, 4vw, 3rem);
  background: var(--bg-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.panel .section__head { margin-bottom: clamp(1rem, 2.5vw, 1.5rem); text-align: center; }

.section__head {
  margin-bottom: clamp(2rem, 5vw, 3rem);
}
.section__head h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--step-h2);
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.section__head p {
  margin-top: 0.75rem;
  font-size: var(--step-lead);
  line-height: 1.5;
  color: var(--fg-dim);
  text-wrap: pretty;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem;                       /* 44px tap target */
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.1;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.18s var(--ease-out), border-color 0.18s var(--ease-out), transform 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out);
}
.btn--primary {
  background: var(--accent);
  color: var(--ink);
  box-shadow: 0 10px 24px -12px rgba(216, 14, 12, 0.7);
}
.btn--primary:hover { background: #ea1a17; }
.btn--primary:active { background: var(--accent-deep); transform: translateY(1px); }
.btn--ghost {
  background: transparent;
  color: var(--fg);
  border-color: var(--rule-strong);
}
.btn--ghost:hover { border-color: var(--fg-dim); }
.btn--dark {
  background: var(--bg);
  color: var(--fg);
}
.btn--dark:hover { background: var(--bg-raised); }
.btn--lg { min-height: 3.25rem; padding: 0.9rem 1.5rem; font-size: 1.0625rem; }

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

.skip {
  position: absolute;
  top: -100%;
  left: var(--gutter);
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--accent);
  color: var(--ink);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}
.skip:focus { top: 0; }

.caps {
  font-size: var(--step-caps);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-mute);
}

/* Brand: the Figma lockup, inlined so the wordmark inherits currentColor ---- */
.brand {
  display: inline-flex;
  align-items: center;
  color: var(--fg);
  text-decoration: none;
}
.brand img { height: 3rem; width: auto; }
.brand--foot img { height: 3rem; }

/* Header: sits over the hero with no fill, hides as the page scrolls down
   and slides back in on the first scroll up, on a plain dark fill with no
   rule. No current-section marker. --------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  background: transparent;
  transition: background-color 0.35s var(--ease-out), transform 0.4s var(--ease-out);
}
body.is-scrolled .site-header { background: var(--bg); }
body.header-hidden:not(.nav-open) .site-header { transform: translateY(-100%); }

.site-header .wrap {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2rem);
}
.site-nav__list {
  display: flex;
  gap: clamp(1rem, 2.5vw, 2rem);
}
.site-nav__list a {
  font-weight: 500;
  font-size: 1rem;
  color: var(--fg-dim);
  text-decoration: none;
  padding: 0.5rem 0;
  transition: color 0.18s var(--ease-out);
}
.site-nav__list a:hover { color: var(--fg); }

.nav-toggle {
  display: none;
  width: 2.75rem; height: 2.75rem;
  padding: 0;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-sm);
  background: transparent;
  place-items: center;
  cursor: pointer;
}
.nav-toggle svg { width: 1.25rem; height: 1.25rem; stroke: var(--fg); fill: none; stroke-width: 2; stroke-linecap: round; }
.nav-toggle .icon-close { display: none; }
body.nav-open .nav-toggle .icon-close { display: block; }
body.nav-open .nav-toggle .icon-menu { display: none; }

.nav-scrim { display: none; }

/* Mobile nav: a full-height page sliding in from the right, the links set
   large in the display face. The header stays above it so the brand and
   the close button remain in place. */
@media (max-width: 54rem) {
  .nav-toggle { display: grid; }
  .site-nav__cta { min-height: 2.5rem; padding: 0.55rem 0.85rem; font-size: 1rem; }
  /* The list is a sibling of these inside the nav, so they need their own
     layer to stay above the open panel. */
  .site-nav__cta, .nav-toggle { position: relative; z-index: 51; }
  .site-nav__list {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 49;
    width: min(100%, 26rem);
    flex-direction: column;
    justify-content: center;
    gap: 0;
    padding: calc(var(--header-h) + 1rem) var(--gutter) 3rem;
    background: var(--bg-sunk);
    border-left: 1px solid var(--rule);
    transform: translateX(100%);
    visibility: hidden;
  }
  /* The panel only animates once .is-ready lands after load, or it slides
     shut on first paint. */
  body.is-ready .site-nav__list { transition: transform 0.4s var(--ease-out), visibility 0s linear 0.4s; }
  body.nav-open .site-nav__list { transform: none; visibility: visible; transition-delay: 0s; }
  body.nav-open { overflow: hidden; }
  body.nav-open .site-header { background: transparent; }
  .site-nav__list li { opacity: 0; transform: translateX(1.5rem); transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out); }
  body.nav-open .site-nav__list li { opacity: 1; transform: none; }
  body.nav-open .site-nav__list li:nth-child(2) { transition-delay: 0.05s; }
  body.nav-open .site-nav__list li:nth-child(3) { transition-delay: 0.1s; }
  body.nav-open .site-nav__list li:nth-child(4) { transition-delay: 0.15s; }
  .site-nav__list a {
    display: block;
    padding: 0.75rem 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(2.25rem, 10vw, 3rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--fg);
  }
  .site-nav__list a:hover { color: var(--accent); }
  .nav-scrim {
    position: fixed; inset: 0; z-index: 48;
    background: rgba(5, 5, 7, 0.6);
  }
  body.nav-open .nav-scrim { display: block; }
}

/* Hero ------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-block: clamp(2.5rem, 6vw, 5.5rem) clamp(3rem, 7vw, 6rem);
}
.hero .wrap {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  text-align: center;
}

/* Page load: the header fades, the hero copy rises line by line, the
   backdrop and gear fade up behind it. Keyframes only set the start, so
   each element lands on its own opacity. Gated on .js so a visitor
   without the script sees everything at once. ------------------------- */
@keyframes load-fade { from { opacity: 0; } }
@keyframes load-rise { from { opacity: 0; transform: translateY(18px); } }
.js .site-header { animation: load-fade 0.9s var(--ease-out) both; }
.js .hero__copy h1 { animation: load-rise 0.9s var(--ease-out) 0.2s both; }
.js .hero__lead { animation: load-rise 0.9s var(--ease-out) 0.38s both; }
.js .hero__actions { animation: load-rise 0.9s var(--ease-out) 0.55s both; }
.js .hero::before { animation: hero-grain 0.9s steps(1) infinite, load-fade 1.8s var(--ease-out) both; }
.js .hero::after {
  animation:
    hero-roll 9s linear infinite,
    hero-flicker 5s steps(1) infinite,
    load-fade 1.8s var(--ease-out) both;
}
.js .hero__gear { animation: closer-spin 120s linear infinite, load-fade 2.2s var(--ease-out) 0.3s both; }

/* Hero backdrop: a worn projection. Two layers, no files.
   ::before is film grain, an inline SVG turbulence tile, screened over the
   black and jumped between eight positions so it crawls like stock.
   ::after is the scan lines, a slow roll bar passing down the frame, and a
   red vignette rising from the floor; the whole layer flickers a few
   percent. Both are off under reduced motion via the global rule. ------ */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  pointer-events: none;
  /* fade out at the floor so the hero melts into the page instead of
     ending on a hard edge above the values panel */
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
}
.hero::before {
  inset: calc(-1 * var(--header-h)) 0 -14rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 320px 320px;
  mix-blend-mode: screen;
  opacity: 0.13;
  animation: hero-grain 0.9s steps(1) infinite;
}
.hero::after {
  inset: calc(-1 * var(--header-h)) 0 -14rem;
  background:
    /* roll bar */
    linear-gradient(to bottom, transparent 0%, rgba(255, 255, 255, 0.045) 50%, transparent 100%) 0 -40% / 100% 40% no-repeat,
    /* scan lines */
    repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0, 0, 0, 0.28) 2px 3px),
    /* red rising from the floor */
    radial-gradient(70% 60% at 50% 100%, rgba(216, 14, 12, 0.26), transparent 70%),
    /* dark corners */
    radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0, 0, 0, 0.55) 100%);
  animation:
    hero-roll 9s linear infinite,
    hero-flicker 5s steps(1) infinite;
}
/* The gear: the mark as a faint silhouette turning slowly off the right
   edge, with a red ghost copy that tears into horizontal slices every few
   seconds as the roll bar scans it. The scan lines sit over both. ------- */
.hero__gear {
  --gear: clamp(20rem, 46vw, 40rem);
  position: absolute;
  top: 50%;
  right: calc(var(--gear) * -0.3);
  width: var(--gear);
  height: var(--gear);
  margin-top: calc(var(--gear) / -2);
  pointer-events: none;
  animation: closer-spin 120s linear infinite;
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
}
.hero__gear img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__gear-base { filter: brightness(0) invert(1); opacity: 0.07; }
.hero__gear-ghost {
  opacity: 0;
  animation: hero-glitch 6s steps(1) infinite;
}
@keyframes hero-glitch {
  0%, 100% { opacity: 0; clip-path: inset(0 0 100% 0); transform: none; }
  41% { opacity: 0.22; clip-path: inset(12% 0 74% 0); transform: translateX(-4%); }
  43% { opacity: 0.22; clip-path: inset(48% 0 38% 0); transform: translateX(5%); }
  45% { opacity: 0.22; clip-path: inset(30% 0 62% 0); transform: translateX(-2%); }
  46% { opacity: 0; }
  47% { opacity: 0.28; clip-path: inset(66% 0 20% 0); transform: translateX(6%); }
  49% { opacity: 0; }
  78% { opacity: 0.2; clip-path: inset(20% 0 70% 0); transform: translateX(3%); }
  80% { opacity: 0.2; clip-path: inset(55% 0 35% 0); transform: translateX(-5%); }
  81% { opacity: 0; }
}
@media (max-width: 62rem) {
  .hero__gear { --gear: clamp(16rem, 70vw, 24rem); right: calc(var(--gear) * -0.45); }
}

@keyframes hero-grain {
  0%    { background-position: 0 0; }
  12.5% { background-position: -37px 59px; }
  25%   { background-position: 83px -41px; }
  37.5% { background-position: -121px 97px; }
  50%   { background-position: 149px 23px; }
  62.5% { background-position: -67px -113px; }
  75%   { background-position: 29px 139px; }
  87.5% { background-position: 101px -79px; }
  100%  { background-position: 0 0; }
}
@keyframes hero-roll {
  from { background-position: 0 -40%, 0 0, 0 0, 0 0; }
  to   { background-position: 0 140%, 0 0, 0 0, 0 0; }
}
@keyframes hero-flicker {
  0%, 100% { opacity: 1; }
  7%  { opacity: 0.92; }
  9%  { opacity: 1; }
  31% { opacity: 0.96; }
  33% { opacity: 1; }
  58% { opacity: 0.9; }
  60% { opacity: 1; }
  61% { opacity: 0.95; }
  63% { opacity: 1; }
  84% { opacity: 0.97; }
  86% { opacity: 1; }
}
.hero__copy { display: grid; justify-items: center; max-width: 46rem; }

.hero__copy h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--step-hero);
  line-height: 1.02;
  letter-spacing: -0.025em;
  text-wrap: balance;
  max-width: 18ch;
}
.hero__copy h1 em { font-style: normal; color: var(--accent); }
.hero__lead {
  margin-top: 1.5rem;
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  line-height: 1.5;
  color: var(--fg-dim);
}
.hero__lead strong { color: var(--fg); }

.hero__actions {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

/* Checked points: one drawn red check per line. Used in the hero strip, the
   value cards and the audit copy. */
.points { display: grid; gap: 0.75rem; }
.points li {
  display: grid;
  grid-template-columns: 1.25rem 1fr;
  gap: 0.75rem;
  align-items: start;
  color: var(--fg-dim);
  line-height: 1.55;
}
.points svg { width: 1.25rem; height: 1.25rem; margin-top: 0.2rem; stroke: var(--accent); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.points strong { color: var(--fg); }

/* Media placeholders: where the photos and video go once they exist. A
   labeled well, not a fake image. Replace the whole element with the real
   <img> or <video>; the aspect ratio is the brief for the shot. */
.media {
  position: relative;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.5rem;
  padding: 1.25rem;
  text-align: center;
  background: var(--bg-raised);
  border: 1px dashed var(--rule-strong);
  border-radius: var(--radius);
  color: var(--fg-mute);
  aspect-ratio: 16 / 10;
}
.media svg { width: 1.75rem; height: 1.75rem; stroke: var(--fg-mute); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.media__label {
  font-size: var(--step-caps);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.media__note { font-size: 1rem; line-height: 1.5; max-width: 26rem; }
.media--audit { margin-top: 2rem; aspect-ratio: 16 / 9; }

@media (max-width: 62rem) {
  .hero__copy h1 { max-width: 16ch; }
  .audit-section .wrap { grid-template-columns: 1fr; }
  .audit-section::before { inset: auto -20% -10% -20%; height: 50%; }
  .audit { max-width: 32rem; }
}
@media (max-width: 30rem) {
  .hero__actions .btn { width: 100%; }
}

/* Free audit section: copy left, form right ------------------------------- */
.audit-section { position: relative; overflow: clip; }
/* The one place red is material: a soft field behind the form. */
.audit-section::before {
  content: "";
  position: absolute;
  inset: -20% -10% -30% 45%;
  background: radial-gradient(closest-side, rgba(216, 14, 12, 0.22), transparent 70%);
  pointer-events: none;
}
.audit-section .wrap {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(20rem, 28rem);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.audit-copy h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--step-h2);
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.audit-copy h2 em { font-style: normal; color: var(--accent); }
.audit-copy__lead {
  margin-top: 1rem;
  font-size: var(--step-lead);
  line-height: 1.5;
  color: var(--fg-dim);
  text-wrap: pretty;
}
/* Audit form -------------------------------------------------------------- */
.audit {
  position: relative;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background: var(--bg-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8), 0 1px 0 rgba(255, 255, 255, 0.04) inset;
}
.audit h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.375rem;
  letter-spacing: -0.015em;
  line-height: 1.15;
}
.audit__intro { margin-top: 0.375rem; color: var(--fg-dim); font-size: var(--step-small); }

/* Audit picker: two radio rows with a visible radio and a one-line hint. */

.pick {
  margin: 1.5rem 0 0;
  padding: 0;
  border: 0;
  display: grid;
  gap: 0.5rem;
}
.pick legend {
  padding: 0;
  margin-bottom: 0.625rem;
  font-size: var(--step-small);
  font-weight: 500;
  color: var(--fg-dim);
}
.pick__option {
  position: relative;
  display: grid;
  grid-template-columns: 1.25rem 1fr;
  gap: 0.75rem;
  align-items: start;
  padding: 0.75rem 0.875rem;
  background: var(--field);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.18s var(--ease-out), background-color 0.18s var(--ease-out);
}
.pick__option:hover { border-color: var(--fg-mute); }
.pick__option input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.pick__mark {
  width: 1.25rem; height: 1.25rem;
  margin-top: 0.1rem;
  border-radius: 50%;
  border: 2px solid var(--fg-mute);
  display: grid; place-items: center;
  transition: border-color 0.18s var(--ease-out);
}
.pick__mark::after { content: ""; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--accent); transform: scale(0); transition: transform 0.18s var(--ease-out); }
.pick__option:has(input:checked) { border-color: var(--accent); background: var(--bg); }
.pick__option:has(input:checked) .pick__mark { border-color: var(--accent); }
.pick__option:has(input:checked) .pick__mark::after { transform: scale(1); }
.pick__option:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.pick__text { display: grid; gap: 0.125rem; }
.pick__name { font-weight: 600; font-size: 1rem; color: var(--fg); }
.pick__tag { font-weight: 400; color: var(--fg-mute); }
.pick__hint { font-size: 1rem; line-height: 1.45; color: var(--fg-dim); }
.audit { transition: border-color 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out); }
.audit:has(#tier-full:checked) {
  border-color: rgba(216, 14, 12, 0.55);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(216, 14, 12, 0.25), 0 1px 0 rgba(255, 255, 255, 0.04) inset;
}

.field { margin-top: 1rem; }
.field label {
  display: block;
  margin-bottom: 0.375rem;
  font-size: var(--step-small);
  font-weight: 500;
  color: var(--fg-dim);
}
.field input {
  width: 100%;
  height: 2.875rem;
  padding: 0 0.875rem;
  background: var(--field);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-sm);
  color: var(--fg);
  caret-color: var(--accent);
  transition: border-color 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out);
}
.field input::placeholder { color: var(--fg-mute); }
.field input:hover { border-color: var(--fg-mute); }
.field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(216, 14, 12, 0.25); }
/* Only shout after the visitor has been in the field. */
.field input:user-invalid,
.field.is-invalid input { border-color: var(--accent); }
.field__error {
  display: none;
  margin-top: 0.375rem;
  font-size: 1rem;
  color: #ff6b69;
}
.field:has(input:user-invalid) .field__error,
.field.is-invalid .field__error { display: block; }

.audit .btn { width: 100%; margin-top: 1.25rem; }
.audit__fine {
  margin-top: 0.75rem;
  text-align: center;
  font-size: 1rem;
  color: var(--fg-mute);
}

/* Honeypot: off-screen, not display:none, so bots still fill it. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 62rem) {
  .hero .wrap { grid-template-columns: 1fr; }
  .hero__copy h1 { max-width: 16ch; }
  .hero__facts { padding-left: 0; border-left: 0; padding-top: 1.75rem; border-top: 1px solid var(--rule); max-width: 34rem; }
  .audit-section .wrap { grid-template-columns: 1fr; }
  .audit-section::before { inset: auto -20% -10% -20%; height: 50%; }
  .audit { max-width: 32rem; }
}
@media (max-width: 30rem) {
  .hero__actions .btn { width: 100%; }
}

/* Values: five rows, the statement large, the explanation beside it. Each
   row fades up when it enters and its check draws in. -------------------- */
.values { border-top: 1px solid var(--rule); }
.value:last-child { border-bottom: 0; padding-bottom: 0; }
.value {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1.1fr) minmax(0, 1fr);
  background: transparent;
  gap: 0.5rem clamp(1.25rem, 3vw, 2.5rem);
  align-items: start;
  padding: clamp(1.5rem, 3.5vw, 2.5rem) 0;
  border-bottom: 1px solid var(--rule);
}
.value__check {
  width: 3rem; height: 3rem;
  margin-top: -0.25rem;
  fill: none;
  stroke: var(--accent);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 44;
  stroke-dashoffset: 0;
}
.value h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-wrap: balance;
}
.value p { color: var(--fg-dim); line-height: 1.55; text-wrap: pretty; padding-top: 0.35em; }

/* Reveal: shared by the value rows and the process steps. */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); }
.js .reveal.is-in { opacity: 1; transform: none; }
.js .value__check { stroke-dashoffset: 44; }
.js .value.is-in .value__check { transition: stroke-dashoffset 0.6s var(--ease-out) 0.25s; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .value__check { stroke-dashoffset: 0; transition: none; }
}
@media (max-width: 62rem) {
  .value { grid-template-columns: 2.5rem minmax(0, 1fr); }
  .value p { grid-column: 2; padding-top: 0; }
  .value__check { width: 2.5rem; height: 2.5rem; margin-top: 0; }
}

/* Services: ten specs in five columns. Each sits under its own hairline
   like a line on a spec sheet; the numeral counts, hover turns the rule
   red. They reveal left to right as the block enters. ------------------ */
.specs {
  counter-reset: spec;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3rem) clamp(1.25rem, 2.5vw, 2rem);
}
.spec {
  counter-increment: spec;
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.5rem;
  padding-top: 1.25rem;
  border-top: 2px solid var(--rule-strong);
  transition: border-color 0.3s var(--ease-out);
}
.spec::before {
  content: counter(spec, decimal-leading-zero);
  margin-bottom: 0.75rem;
  font-weight: 600;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  color: var(--fg-mute);
  transition: color 0.3s var(--ease-out);
}
.spec:hover { border-color: var(--accent); }
.spec:hover::before { color: var(--accent); }
.spec h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.spec p { color: var(--fg-dim); font-size: 1rem; line-height: 1.5; text-wrap: pretty; }
.specs > .reveal:nth-child(2) { transition-delay: 0.05s; }
.specs > .reveal:nth-child(3) { transition-delay: 0.1s; }
.specs > .reveal:nth-child(4) { transition-delay: 0.15s; }
.specs > .reveal:nth-child(5) { transition-delay: 0.2s; }
.specs > .reveal:nth-child(6) { transition-delay: 0.25s; }
.specs > .reveal:nth-child(7) { transition-delay: 0.3s; }
.specs > .reveal:nth-child(8) { transition-delay: 0.35s; }
.specs > .reveal:nth-child(9) { transition-delay: 0.4s; }
.specs > .reveal:nth-child(10) { transition-delay: 0.45s; }
@media (max-width: 62rem) {
  .specs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 46rem) {
  .specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .specs > .reveal { transition-delay: 0s; }
}
@media (max-width: 30rem) {
  .specs { grid-template-columns: 1fr; gap: 1.75rem; }
}

/* Process: four steps down a vertical line. Each step draws the dash from
   its own circle to the next, as a repeating gradient whose position
   marches, so the line reads as moving down the year and stops at 4. ---- */
.steps {
  --steps-gap: clamp(2rem, 4vw, 3rem);
  position: relative;
  display: grid;
  gap: var(--steps-gap);
}
.step {
  position: relative;
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) clamp(13rem, 24vw, 19rem);
  gap: 0.25rem clamp(1.25rem, 3vw, 2rem);
  align-items: start;
}
.step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: calc(1.5rem - 1px);
  top: 3rem;
  bottom: calc(-1 * var(--steps-gap));
  width: 2px;
  background: repeating-linear-gradient(to bottom, var(--rule-strong) 0 6px, transparent 6px 12px);
  animation: steps-march 0.8s linear infinite;
}
@keyframes steps-march { to { background-position: 0 12px; } }
.step__num {
  position: relative;
  display: grid;
  place-items: center;
  width: 3rem; height: 3rem;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--accent);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.1875rem;
  color: var(--fg);
}
.step h3 {
  margin-top: 0.6rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
  letter-spacing: -0.015em;
  line-height: 1.15;
}
.step p { grid-column: 2; margin-top: 0.5rem; color: var(--fg-dim); line-height: 1.55; text-wrap: pretty; max-width: 36rem; }
.step.reveal:nth-child(2) { transition-delay: 0.1s; }
.step.reveal:nth-child(3) { transition-delay: 0.2s; }
.step.reveal:nth-child(4) { transition-delay: 0.3s; }

/* Step visuals: one small drawing per stage, inline SVG, looping once the
   step is in view. Calendar dates set, a list growing, nights selling,
   reviews coming in. ------------------------------------------------------ */
.viz { grid-column: 3; grid-row: 1 / span 2; width: 100%; height: auto; }
.viz__frame { fill: none; stroke: var(--rule-strong); stroke-width: 2; }
.viz__cell { fill: var(--rule); }
.viz__cell--on { fill: var(--rule); }
.is-in .viz__cell--on { animation: viz-cell 4s var(--ease-out) infinite; }
.is-in .viz__cell--on:nth-of-type(2n) { animation-delay: 0.4s; }
.is-in .viz__cell--on:nth-of-type(3n) { animation-delay: 0.8s; }
.is-in .viz__cell--on:nth-of-type(5n) { animation-delay: 1.2s; }
.is-in .viz__cell--on:nth-of-type(7n) { animation-delay: 1.6s; }
@keyframes viz-cell {
  0%, 10% { fill: var(--rule); }
  30%, 80% { fill: var(--accent); }
  100% { fill: var(--rule); }
}
.viz__area { fill: rgba(216, 14, 12, 0.14); opacity: 0; }
.viz__line { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 260; stroke-dashoffset: 260; }
.viz__dot { fill: var(--accent); opacity: 0; }
.is-in .viz__line { animation: viz-draw 5s var(--ease-out) infinite; }
.is-in .viz__area { animation: viz-fade 5s var(--ease-out) infinite; }
.is-in .viz__dot { animation: viz-fade 5s var(--ease-out) infinite; }
@keyframes viz-draw { 0% { stroke-dashoffset: 260; } 45%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 260; } }
@keyframes viz-fade { 0%, 30% { opacity: 0; } 50%, 85% { opacity: 1; } 100% { opacity: 0; } }
.viz__bar { fill: var(--rule-strong); transform-origin: center 118px; transform: scaleY(0.15); }
.viz__bar--hot { fill: var(--accent); }
.is-in .viz__bar { animation: viz-bar 3.6s var(--ease-out) infinite alternate; animation-delay: calc(var(--i) * 0.18s); }
@keyframes viz-bar { 0% { transform: scaleY(0.15); } 40%, 100% { transform: scaleY(1); } }
.viz__star { fill: var(--rule); }
.is-in .viz__star { animation: viz-star 5s var(--ease-out) infinite; animation-delay: calc(var(--i) * 0.25s); }
@keyframes viz-star { 0%, 10% { fill: var(--rule); } 25%, 80% { fill: var(--accent); } 100% { fill: var(--rule); } }
.viz__fill { fill: var(--fg); transform-origin: 40px center; transform: scaleX(0); }
.is-in .viz__fill { animation: viz-fill 5s var(--ease-out) infinite; animation-delay: 0.6s; }
@keyframes viz-fill { 0%, 10% { transform: scaleX(0); } 45%, 85% { transform: scaleX(0.72); } 100% { transform: scaleX(0); } }
@media (max-width: 46rem) {
  .step { grid-template-columns: 3rem minmax(0, 1fr); }
  .viz { grid-column: 2; grid-row: auto; max-width: 16rem; margin-top: 1rem; }
}

/* Pricing: a table, our column lifted, theirs plain ------------------------- */
.fee { overflow-x: auto; }
.fee:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 2px; }
.fee table {
  width: 100%;
  min-width: 40rem;
  border-collapse: separate;
  border-spacing: 0;
}
.fee th, .fee td {
  padding: 1rem 1.25rem;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--rule);
}
.fee thead th {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--step-h3);
  letter-spacing: -0.01em;
  color: var(--fg-dim);
  border-bottom-color: var(--rule-strong);
}
.fee tbody th { font-weight: 500; color: var(--fg-dim); width: 34%; }
.fee td { color: var(--fg-mute); }
.fee .is-ours { background: var(--bg); color: var(--fg); }
.fee thead .is-ours { color: var(--fg); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.fee tbody tr:last-child .is-ours { border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
.fee tbody tr:last-child th, .fee tbody tr:last-child td { border-bottom: 0; }
.fee td.is-ours { font-weight: 500; }
.fee__group th, .fee__group td { padding: 2.25rem 1.25rem 0.5rem; border-bottom-color: var(--rule-strong); }
.fee__group th {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--step-h3);
  letter-spacing: -0.01em;
  color: var(--fg);
}
.fee tbody tr:first-child .fee__group th, .fee tbody tr:first-child th, .fee tbody tr:first-child td { padding-top: 1.25rem; }
.tick { display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; }
.tick svg { width: 1rem; height: 1rem; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.tick--yes { background: var(--accent); }
.tick--yes svg { stroke: var(--ink); }
.tick--no { border: 1px solid var(--rule-strong); }
.tick--no svg { stroke: var(--fg-mute); }
@media (max-width: 46rem) {
  .fee th, .fee td { padding: 0.75rem 0.875rem; }
  .fee tbody th { width: auto; }
}

/* Scorecard: the sample audit, built in HTML so it reads at any size ------- */
.score {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--rule);
}
.score__head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--fg-dim);
  font-size: var(--step-small);
}
.score__total {
  margin-top: 1.25rem;
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: 1.25rem;
  align-items: center;
}
.score__total svg { grid-area: 1 / 1; width: 7rem; height: 7rem; transform: rotate(-90deg); }
.score__ring-track { fill: none; stroke: var(--field); stroke-width: 12; }
.score__ring { fill: none; stroke: var(--accent); stroke-width: 12; stroke-linecap: round; stroke-dashoffset: var(--off); transition: stroke-dashoffset 1.6s var(--ease-out); }
.js .score:not(.is-live) .score__ring { stroke-dashoffset: 326.7; }
.score__value {
  grid-area: 1 / 1;
  display: grid;
  justify-items: center;
  align-content: center;
  line-height: 1;
}
.score__value strong { font-family: var(--font-display); font-weight: 900; font-size: 2.25rem; letter-spacing: -0.03em; }
.score__value span { margin-top: 0.25rem; font-size: 1rem; color: var(--fg-mute); }
.score__read h3 { font-family: var(--font-display); font-weight: 800; font-size: 1.375rem; letter-spacing: -0.015em; }
.score__read p { margin-top: 0.375rem; color: var(--fg-dim); font-size: var(--step-body); line-height: 1.45; }
.score__rows { margin-top: 1.75rem; display: grid; }
.score__rows li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem 1rem;
  padding: 0.875rem 0;
  border-top: 1px solid var(--rule);
  font-size: var(--step-small);
}
.score__name { color: var(--fg); }
.score__num { color: var(--fg-dim); font-variant-numeric: tabular-nums; }
.score__bar {
  grid-column: 1 / -1;
  height: 0.375rem;
  border-radius: 999px;
  background: var(--field);
  position: relative;
  overflow: hidden;
}
.score__bar::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w);
  border-radius: inherit;
  background: var(--fg);
  transition: width 1.4s var(--ease-out);
}
.js .score:not(.is-live) .score__bar::after { width: 0; }
.score__rows li:nth-child(2) .score__bar::after { transition-delay: 0.1s; }
.score__rows li:nth-child(3) .score__bar::after { transition-delay: 0.2s; }
.score__rows li:nth-child(4) .score__bar::after { transition-delay: 0.3s; }
.score__rows li:nth-child(5) .score__bar::after { transition-delay: 0.4s; }
.score__rows li:nth-child(6) .score__bar::after { transition-delay: 0.5s; }
.score__bar--hot::after { background: var(--accent); }
.score figcaption { margin-top: 1rem; font-size: 1rem; color: var(--fg-mute); }

/* Closer: the red band, the mark as a faint silhouette behind ----------- */
.closer {
  position: relative;
  overflow: clip;
  padding-block: clamp(4rem, 9vw, 7rem);
  background: var(--accent);
  color: var(--ink);
  text-align: center;
}
.closer {
  --gear: clamp(18rem, 42vw, 34rem);
}
.closer__mark {
  position: absolute;
  top: 50%;
  width: var(--gear);
  margin-top: calc(var(--gear) / -2);
  opacity: 0.18;
  filter: brightness(0) saturate(100%);   /* the red mark as a black silhouette */
  pointer-events: none;
  animation: closer-spin 90s linear infinite;
}
.closer__mark--left  { left: calc(var(--gear) * -0.45); }
.closer__mark--right { right: calc(var(--gear) * -0.45); animation-direction: reverse; }
@keyframes closer-spin { to { transform: rotate(360deg); } }
@media (max-width: 46rem) {
  .closer__mark--left { display: none; }
  .closer__mark--right { right: calc(var(--gear) * -0.55); }
}
.closer .wrap { position: relative; display: grid; justify-items: center; gap: 1rem; }
.closer h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.5rem, 1.5rem + 5vw, 4.75rem);
  line-height: 1;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.closer p { font-size: var(--step-lead); color: rgba(255, 255, 255, 0.88); max-width: 34rem; }
.closer .btn { margin-top: 0.5rem; }
.closer ::selection { background: var(--bg); color: var(--fg); }

/* Footer ------------------------------------------------------------------- */
.site-footer {
  padding-block: 2.5rem;
  border-top: 1px solid var(--rule);
  background: var(--bg-sunk);
  color: var(--fg-dim);
  font-size: var(--step-small);
}
.site-footer .wrap { display: grid; gap: 2.5rem; }
.site-footer__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
}
.site-footer__copy { text-align: center; color: var(--fg-mute); font-size: 1rem; }
.site-footer__links { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.site-footer__links a { color: var(--fg-dim); text-decoration: none; }
.site-footer__links a:hover { color: var(--fg); text-decoration: underline; }

/* Thanks / 404 ------------------------------------------------------------- */
.page-min {
  min-height: calc(100vh - var(--header-h) - 8rem);
  display: grid;
  align-content: center;
  padding-block: var(--section-y);
}
.page-min .wrap { max-width: 40rem; display: grid; gap: 1.25rem; }
.page-min h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--step-hero);
  line-height: 1.02;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.page-min h1 em { font-style: normal; color: var(--accent); }
.page-min p { font-size: var(--step-lead); color: var(--fg-dim); }
.page-min .btn { justify-self: start; }