/* ============================================================
   Nebula Wash — design tokens
   Palette is deliberately narrow: black, one raised grey, one
   card grey, one field grey, one blue accent. Do not add hues.
   ============================================================ */
:root {
  --black:       #000000;
  --raised:      #0A0A0C;
  --card:        #141416;
  --field:       #1D1D21;

  --line:        rgba(255, 255, 255, 0.10);
  --line-strong: rgba(255, 255, 255, 0.22);

  --text:        #ffffff;
  --body:        #CACACD;
  --muted:       #8A8A90;
  --faint:       #59595E;

  --accent:      #4A6CF0;
  --accent-lt:   #6F8BFF;
  --glow:        rgba(74, 108, 240, 0.45);
  --warn:        #FF8A7A;

  --grad:        linear-gradient(135deg, #4A6CF0, #6F8BFF);

  --sans: 'Space Grotesk', system-ui, sans-serif;
  --mono: 'Space Mono', ui-monospace, monospace;

  /* Section rhythm — interpolates between the 1440px and 390px designs. */
  --pad-y: 96px;
  --pad-x: 32px;
}

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

/* Any display value beats the hidden attribute's UA display:none, and
   .formcard is display:flex - so form.hidden = true set the property and
   changed nothing on screen. hidden means gone, whatever else applies. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; scroll-padding-top: 96px; }

body {
  margin: 0;
  background: var(--black);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--text); text-decoration: none; }
a:hover { color: var(--accent-lt); }

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

img, video { display: block; max-width: 100%; }

h1, h2, h3, p { margin: 0; }

input, textarea, select, button { font-family: inherit; }

/* Focus — none were designed, so they derive from the accent. */
:focus-visible {
  outline: 2px solid var(--accent-lt);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 100;
  background: var(--text);
  color: var(--black);
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
}
.skip:focus { left: 16px; color: var(--black); }

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

/* ============================================================
   Type primitives
   ============================================================ */
.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.4;
}

.h2 {
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--text);
  text-wrap: pretty;
}

.lede {
  font-size: 15px;
  color: var(--body);
  line-height: 1.65;
  text-wrap: pretty;
}

.mono { font-family: var(--mono); }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  border: 1px solid transparent;
  transition: filter 150ms ease, border-color 150ms ease, background-color 150ms ease;
}

.btn--primary {
  background: var(--grad);
  color: var(--text);
  box-shadow: 0 0 24px var(--glow);
  padding: 12px 26px;
}
.btn--primary:hover { filter: brightness(1.12); color: var(--text); }

.btn--white {
  background: var(--text);
  color: var(--black);
  padding: 16px 34px;
  font-size: 17px;
}
.btn--white:hover { filter: brightness(0.9); color: var(--black); }

.btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--line-strong);
  padding: 16px 34px;
  font-size: 17px;
}
.btn--ghost:hover { border-color: var(--text); color: var(--text); }

.btn--sm { padding: 8px 18px; font-size: 13px; }
.btn--nav { padding: 10px 22px; font-size: 13px; }

/* ============================================================
   Header
   ============================================================ */
.header {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  padding: 0 var(--pad-x);
}
.header--bordered { border-bottom: 1px solid var(--line); }

.wordmark {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--text);
  white-space: nowrap;
}
.wordmark:hover { color: var(--text); }

.nav { display: flex; gap: 32px; align-items: center; }
/* The nav's CTA is the collapsed-menu copy; the header end-cap owns it on desktop. */
.nav > .btn { display: none; }
.nav a, .nav span {
  font-size: 15px;
  color: var(--muted);
  padding-bottom: 5px;
  border-bottom: 1px solid transparent;
}
.nav a:hover { color: var(--text); }
.nav [aria-current="page"],
.nav .is-active { color: var(--text); border-bottom-color: var(--text); }

.header__end { display: flex; align-items: center; gap: 20px; }
.header__phone { font-family: var(--mono); font-size: 13px; color: var(--body); white-space: nowrap; }
.header__phone:hover { color: var(--accent-lt); }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--text);
  font-size: 22px;
  line-height: 1;
  padding: 8px;
  cursor: pointer;
}

/* ============================================================
   Sections
   ============================================================ */
.section { padding: var(--pad-y) var(--pad-x); background: var(--black); }
.section--raised { background: var(--raised); }
.section--flush-top { padding-top: 0; }

/* ============================================================
   Hero
   ============================================================ */
.hero {
  position: relative;
  height: 820px;
  background: var(--black);
  overflow: hidden;
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
  /* Saturation pulled back so the footage does not fight the narrow palette,
     and brightness cut hard. A top scrim alone is not enough here: `cover`
     puts a different part of the frame behind the headline at every viewport
     aspect, so legibility cannot depend on which part that is. Darkening the
     source uniformly is the only fix that holds at every width - do not raise
     brightness without re-running the contrast check. */
  filter: saturate(0.7) contrast(1.06) brightness(0.42);
}

/* Three stacked overlays, in the order the design specifies. */
.hero__vignette {
  position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 50% 45%, rgba(0,0,0,0) 30%, rgba(0,0,0,0.7) 100%);
}
.hero__scrim-b {
  position: absolute; left: 0; right: 0; bottom: 0; height: 340px;
  background: linear-gradient(0deg, rgba(0,0,0,0.94) 0%, rgba(0,0,0,0) 100%);
}
/* Deepened and extended from the original 180px/0.80. The footage is far
   brighter behind the headline than the still it replaced, and the blue grade
   removed the tonal separation the lead span relied on. */
.hero__scrim-t {
  position: absolute; left: 0; right: 0; top: 0; height: 420px;
  /* The title band sits at roughly 48-85% of this height on desktop, which
     is exactly where the old 0.62 stop was falling away to nothing. Holding
     the ramp higher through that band is what carries the blue lead span. */
  background: linear-gradient(180deg,
    rgba(0,0,0,0.94) 0%,
    rgba(0,0,0,0.92) 38%,
    rgba(0,0,0,0.80) 72%,
    rgba(0,0,0,0) 100%);
}

.hero__inner {
  position: relative;
  padding: 84px var(--pad-x) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  text-align: center;
}

.hero__title {
  font-size: 76px;
  line-height: 1.02;
  letter-spacing: -0.02em;
  font-weight: 300;
  color: var(--muted);
  max-width: 1000px;
  text-wrap: pretty;
}
.hero__title .lead { color: var(--accent-lt); }
.hero__title .emph { font-weight: 700; color: var(--text); }

.hero__sub { display: none; }

.hero__actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* ============================================================
   Legal pages (privacy)
   Long-form prose: one column, measure capped for readability,
   no decoration. Nothing here is reused elsewhere.
   ============================================================ */
.legal__summary { max-width: 62ch; margin: 24px 0 8px; color: var(--body); }
.legal__body { max-width: 68ch; }
.legal__h {
  margin: 44px 0 12px;
  font-size: 19px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.01em;
}
.legal__body p { margin: 0 0 16px; color: var(--body); line-height: 1.7; }
.legal__list { margin: 0 0 16px; padding-left: 20px; color: var(--body); line-height: 1.7; }
.legal__list li { margin-bottom: 8px; }
.legal__body strong { color: var(--text); font-weight: 500; }
.legal__body a { color: var(--accent-lt); text-decoration: underline; text-underline-offset: 2px; }
.legal__body a:hover { color: var(--text); }
.legal__date {
  margin-top: 44px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 13px;
  color: var(--faint);
}

.footer__link { font-size: 13px; color: var(--muted); }
.footer__link:hover { color: var(--text); }

/* ============================================================
   Spec card
   ============================================================ */
.speccard {
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 32px;
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 48px;
  align-items: center;
}

.well {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--black);
}
.well video { width: 100%; height: 100%; object-fit: cover; }
.well--tall { height: 280px; }

.specrows { margin-top: 24px; }
.specrow {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.specrow:last-child { border-bottom: none; }
.specrow dt { font-size: 15px; color: var(--body); }
.specrow dd {
  margin: 0;
  font-family: var(--mono);
  font-size: 15px;
  color: var(--text);
  text-align: right;
}

/* ============================================================
   Services
   ============================================================ */
.services__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 48px;
}
.services__head .h2 { margin-top: 14px; }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}
.card__media { height: 180px; background-size: cover; background-repeat: no-repeat; }
.card__body { padding: 32px; display: flex; flex-direction: column; gap: 12px; }
.card__title { font-size: 22px; font-weight: 500; color: var(--text); letter-spacing: -0.01em; line-height: 1.25; }

/* Second unit on the same card — gutters price per linear foot, not per sq ft. */

/* ============================================================
   Video-backed section (the demo band)
   Same grade as the hero. Kept as its own set of classes rather
   than shared with .hero__* — the hero's numbers are tuned to a
   measured contrast result and are not worth disturbing.
   ============================================================ */
.section--media {
  position: relative;
  overflow: hidden;
}
.section--media > .split { position: relative; z-index: 1; }

.section__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 50%;
  filter: saturate(0.7) contrast(1.06) brightness(0.42);
}

/* Copy sits in the left column, so the wash stays heavy there and opens up
   under the form card, which is opaque anyway. */
.section__wash {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      rgba(0,0,0,0.93) 0%,
      rgba(0,0,0,0.88) 42%,
      rgba(0,0,0,0.60) 76%,
      rgba(0,0,0,0.50) 100%),
    linear-gradient(180deg,
      rgba(0,0,0,0.70) 0%,
      rgba(0,0,0,0.34) 22%,
      rgba(0,0,0,0.38) 74%,
      rgba(0,0,0,0.78) 100%);
}

/* ============================================================
   Split (demo + quote)
   ============================================================ */
.split { display: grid; gap: 96px; }
.split--demo  { grid-template-columns: 1fr 1fr;   align-items: center; }
.split--quote { grid-template-columns: 1fr 1.1fr; align-items: start; }

.split__head .h2 { margin: 14px 0 24px; }
.split__head p { max-width: 48ch; }

.steps { margin-top: 32px; display: flex; flex-direction: column; gap: 14px; }
.steps li { display: flex; gap: 14px; align-items: baseline; }
.steps__n { font-family: var(--mono); font-size: 13px; color: var(--accent-lt); }
.steps__t { font-size: 15px; color: var(--body); }

.contactblock {
  margin-top: 48px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--muted);
  line-height: 2;
}
.contactblock a { color: var(--muted); }
.contactblock a:hover { color: var(--accent-lt); }

/* ============================================================
   Forms
   ============================================================ */
.formcard {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.field { display: flex; flex-direction: column; gap: 8px; }
.field__label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 13px 16px;
  color: var(--text);
  font-size: 15px;
  outline: none;
  transition: border-color 150ms ease;
}
.field input::placeholder,
.field textarea::placeholder { color: var(--muted); }
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--line-strong); }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible { border-color: var(--accent-lt); outline-offset: 1px; }
.field textarea { resize: vertical; min-height: 104px; }

.field select {
  appearance: none;
  cursor: pointer;
  /* Chevron drawn in the accent-neutral muted grey, no new hue. */
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%238A8A90' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}
.field select option { background: var(--card); color: var(--text); }

.formrow { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.formfoot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.formfoot__hint { font-size: 13px; color: var(--muted); }
.formfoot__hint--bad { color: var(--warn); }
.formfoot__hint--bad a { color: inherit; text-decoration: underline; }
.formfoot .btn[disabled] { opacity: 0.55; cursor: default; }

/* A field only a bot fills in. Formspree silently drops any
   submission that arrives with it set. Parked off-screen rather
   than display:none, which the better bots know to skip. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.sent {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 64px 32px;
  text-align: center;
}
.sent__title { font-size: 22px; font-weight: 500; color: var(--text); }
.sent p { margin: 12px 0 24px; font-size: 15px; color: var(--body); }

/* ============================================================
   FAQ accordion
   ============================================================ */
.faq__list { border-bottom: 1px solid var(--line); }
.faq__item { border-top: 1px solid var(--line); }

.faq__q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  padding: 24px 0;
  background: none;
  border: none;
  color: var(--text);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
}
.faq__q:hover { color: var(--accent-lt); }

.faq__sign {
  font-size: 22px;
  color: var(--muted);
  flex: 0 0 auto;
  line-height: 1;
  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
.faq__q[aria-expanded="true"] .faq__sign { transform: rotate(45deg); }

/* 0fr -> 1fr animates to the content's intrinsic height with no
   JS measurement and no max-height cap, and is supported
   everywhere the site targets. */
.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  /* Collapsed answers are 0fr tall but stay in the accessibility tree, so a
     screen reader reads all five whatever aria-expanded says. visibility
     removes them. It is stepped, not interpolated, so the delay carries it:
     hide only after the row has finished collapsing... */
  visibility: hidden;
  transition: grid-template-rows 250ms cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0s linear 250ms;
}
.faq__q[aria-expanded="true"] + .faq__a {
  grid-template-rows: 1fr;
  /* ...and show immediately on open, or the text pops in halfway through. */
  visibility: visible;
  transition: grid-template-rows 250ms cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0s linear 0s;
}
.faq__a > div { overflow: hidden; }
.faq__a p { max-width: 70ch; padding-bottom: 24px; }

/* ============================================================
   Specification page
   ============================================================ */
.page__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  margin-bottom: 48px;
}
.page__title {
  margin-top: 14px;
  font-size: 48px;
  font-weight: 400;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-wrap: pretty;
  max-width: 20ch;
}
.page__caption { font-size: 13px; color: var(--muted); text-align: right; }

.turntable {
  margin-bottom: 48px;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 32px;
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 48px;
  align-items: center;
}
.turntable .well { height: 360px; }
.turntable .well video { object-fit: contain; }
.turntable__copy { display: flex; flex-direction: column; gap: 12px; }
.turntable__title { font-size: 22px; font-weight: 500; color: var(--text); letter-spacing: -0.01em; }

.stepgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }

.step {
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}
.step__media {
  height: 180px;
  background: var(--black);
  border-bottom: 1px solid var(--line);
}
.step__media video { width: 100%; height: 100%; object-fit: cover; }
.step__body { padding: 28px; display: flex; flex-direction: column; gap: 10px; }
.step__n { font-family: var(--mono); font-size: 13px; color: var(--accent-lt); }
.step__title { font-size: 19px; font-weight: 500; color: var(--text); letter-spacing: -0.01em; line-height: 1.3; }

.outcomes {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  border-top: 1px solid var(--line);
  padding-top: 32px;
}
.outcome { display: flex; flex-direction: column; gap: 8px; }
.outcome__v { font-family: var(--mono); font-size: 15px; color: var(--text); }
.outcome__l { font-size: 15px; color: var(--muted); line-height: 1.5; }

.cta {
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 64px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}
.cta .h2 { max-width: 24ch; }
.cta p { max-width: 52ch; }

/* ============================================================
   Footer
   ============================================================ */
.footer {
  padding: var(--pad-x);
  background: var(--black);
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}
.footer__meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: right;
}

/* ============================================================
   Property-type chooser
   ============================================================ */
.chooser {
  margin-top: 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.choice {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 48px 32px 40px;
  transition: border-color 150ms ease, background-color 150ms ease;
}
.choice:hover { border-color: var(--line-strong); background: #17171A; color: var(--text); }

/* The icon carries the identification — windows are punched through by a
   mask, so they read as the card behind rather than a painted-on colour
   that would drift when the card background changes on hover. */
.choice__icon {
  width: 88px;
  height: 88px;
  margin-bottom: 14px;
  color: var(--accent-lt);
  transition: color 150ms ease, transform 200ms ease;
}
.choice:hover .choice__icon { color: var(--text); transform: translateY(-2px); }

.choice__title { font-size: 22px; font-weight: 500; color: var(--text); letter-spacing: -0.01em; line-height: 1.25; }
.choice__cta { margin-top: 10px; font-size: 15px; font-weight: 500; color: var(--accent-lt); }
.choice__cta span { display: inline-block; transition: transform 150ms ease; }
.choice:hover .choice__cta span { transform: translateX(4px); }

/* ============================================================
   Intake pages
   ============================================================ */
.intake { max-width: 760px; position: relative; }
.intake__head { max-width: 640px; margin-bottom: 40px; }
.intake__head .lede { margin-top: 20px; }

/* Photo backdrop behind the residential form. The form column is capped at
   760px and left-aligned, so the gradient keeps the left side near-black for
   legibility and lets the photograph breathe in the empty right-hand space. */
.intake-section { position: relative; overflow: hidden; }

.intake-bg {
  position: absolute;
  inset: 0;
  background-image: url("assets/residential-gutter.webp");
  background-position: center 40%;
  background-size: cover;
  background-repeat: no-repeat;
}

.intake-bg__wash {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      rgba(0,0,0,0.95) 0%,
      rgba(0,0,0,0.92) 46%,
      rgba(0,0,0,0.62) 78%,
      rgba(0,0,0,0.48) 100%),
    linear-gradient(180deg,
      rgba(0,0,0,0.90) 0%,
      rgba(0,0,0,0.30) 26%,
      rgba(0,0,0,0.35) 70%,
      rgba(0,0,0,0.92) 100%);
}

/* Lifts the solid card off the photograph rather than letting it sit flat. */
.intake-section .formcard,
.intake-section .sent { box-shadow: 0 24px 60px rgba(0,0,0,0.55); }

.checkgroup {
  border: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.checkgroup__label {
  padding: 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.checkgroup__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.check {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 15px;
  color: var(--body);
  cursor: pointer;
  transition: border-color 150ms ease, color 150ms ease;
}
.check:hover { border-color: var(--line-strong); }
.check input {
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
  margin: 0;
  flex: 0 0 auto;
  cursor: pointer;
}
.check:has(input:checked) { border-color: var(--accent-lt); color: var(--text); }

/* Mobile-only closing CTA, from the 390px column. */
.mobile-cta { display: none; }

/* ============================================================
   Responsive — the two designed ends are 1440px and 390px.
   Everything between is interpolated.
   ============================================================ */
@media (max-width: 1100px) {
  .hero__title { font-size: 60px; }
  .cards      { grid-template-columns: repeat(2, 1fr); }
  .stepgrid   { grid-template-columns: repeat(2, 1fr); }
  .speccard   { grid-template-columns: 360px 1fr; gap: 32px; }
  .turntable  { grid-template-columns: 1fr 340px; gap: 32px; }
  .split      { gap: 48px; }
}

@media (max-width: 900px) {
  .split--demo,
  .split--quote { grid-template-columns: 1fr; }
  .speccard,
  .turntable    { grid-template-columns: 1fr; }
  .turntable .well { height: 300px; }
  .outcomes     { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
  .page__head   { flex-direction: column; align-items: flex-start; }
  .page__caption { text-align: left; }
  .chooser      { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  :root { --pad-y: 48px; --pad-x: 16px; }

  .header { height: 60px; }
  .wordmark { font-size: 13px; }
  .header__end .header__phone,
  .header__end .btn { display: none; }
  .nav-toggle { display: block; }

  /* Collapsed nav opens as a panel under the bar. */
  .nav {
    position: absolute;
    top: 60px;
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--pad-x) 16px;
    background: var(--raised);
    border-bottom: 1px solid var(--line);
  }
  .nav[hidden] { display: none; }
  .nav a, .nav span {
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
  }
  .nav > .btn { display: inline-flex; margin-top: 16px; align-self: flex-start; border-bottom: none; }

  .hero { height: 640px; }
  .hero__video { object-position: center 42%; }

  /* Single column here, so the copy has no dark side column to sit in —
     the wash goes vertical and stays heavy the whole way down. */
  .section__wash {
    background: linear-gradient(180deg,
      rgba(0,0,0,0.86) 0%,
      rgba(0,0,0,0.72) 26%,
      rgba(0,0,0,0.80) 60%,
      rgba(0,0,0,0.92) 100%);
  }
  .hero__vignette { background: radial-gradient(120% 90% at 50% 45%, rgba(0,0,0,0) 25%, rgba(0,0,0,0.8) 100%); }
  .hero__scrim-b  { height: 280px; background: linear-gradient(0deg, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0) 100%); }
  /* 120px was sized for the old static hero and never revisited when the
     video went in. The title starts around 151px, so the scrim ended
     above the text it exists to protect and the headline measured 1.55:1. */
  .hero__scrim-t  { height: 340px; }

  .hero__inner { padding-top: 56px; gap: 20px; }
  .hero__title { font-size: 38px; line-height: 1.05; }
  .hero__sub   { display: block; font-size: 15px; color: var(--body); }
  .hero__actions { flex-direction: column; width: 100%; padding: 0 16px; }
  .hero__actions .btn { width: 100%; padding: 14px 0; font-size: 15px; }

  .h2 { font-size: 26px; }
  .page__title { font-size: 32px; }

  .speccard,
  .formcard,
  .turntable { padding: 20px; }
  .well--tall { height: 200px; }

  .specrow { flex-direction: column; align-items: flex-start; gap: 4px; }
  .specrow dd { text-align: left; }

  .services__head { display: block; margin-bottom: 24px; }
  .cards { grid-template-columns: 1fr; gap: 16px; }
  .card__media { height: 120px; }
  .card__body  { padding: 20px; gap: 8px; }
  .card__title { font-size: 17px; }
  .card__price { font-size: 13px; margin-top: 0; }

  .formrow { grid-template-columns: 1fr; }
  .checkgroup__grid { grid-template-columns: 1fr; }
  /* The card fills the width on mobile, so the photo reads as texture behind
     the header rather than as a scene beside the form. */
  .intake-bg { background-position: center 32%; }
  /* Kept at >=0.72 through the heading band: the photograph has a bright sky,
     and 15px #CACACD body copy has to stay readable over the worst of it. */
  .intake-bg__wash {
    background:
      linear-gradient(180deg,
        rgba(0,0,0,0.88) 0%,
        rgba(0,0,0,0.74) 30%,
        rgba(0,0,0,0.86) 55%,
        rgba(0,0,0,0.95) 100%);
  }
  .intake-section .formcard,
  .intake-section .sent { box-shadow: 0 12px 32px rgba(0,0,0,0.5); }
  .chooser { margin-top: 24px; gap: 16px; }
  .choice { padding: 20px; }
  .choice__title { font-size: 17px; }
  .intake__head { margin-bottom: 24px; }
  .formfoot { flex-direction: column; align-items: stretch; gap: 12px; }
  .formfoot .btn { width: 100%; }
  .formfoot__hint { order: 2; text-align: center; }
  .sent { padding: 40px 20px; }

  .faq__q { font-size: 15px; gap: 16px; padding: 16px 0; }
  .faq__sign { font-size: 17px; }
  .faq__a p { font-size: 13px; padding-bottom: 16px; }

  .stepgrid { grid-template-columns: 1fr; gap: 16px; }
  .step__body { padding: 20px; }
  .outcomes { grid-template-columns: 1fr 1fr; }
  .cta { padding: 40px 20px; }
  .cta .btn { width: 100%; }

  /* The 390px column ends with this block before the footer. */
  .mobile-cta {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: var(--pad-y) var(--pad-x);
    background: var(--black);
  }
  .mobile-cta .btn { width: 100%; padding: 14px 0; }

  .footer { flex-direction: column; align-items: flex-start; gap: 8px; padding: 24px 16px; }
  .footer__meta { text-align: left; }
  .wordmark--footer { font-size: 13px; }
}

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

  /* A full-bleed looping backdrop is exactly what this setting exists to stop.
     The poster frame takes over and still receives the blue grade above. */
  .hero__video { display: none; }
  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("assets/hero-poster.webp") center 45% / cover no-repeat;
    filter: saturate(0.7) contrast(1.06);
  }
}