/* ============================================================
   BECOME A DEALER — page styles
   ------------------------------------------------------------
   Loaded only by dealers.html, after tokens.css and style.css.

   Everything here is built from the existing design tokens: the
   one accent (--ct-red), the graphite surface, the 45-degree
   chamfer, the three typefaces. No new red, no new font, no new
   card shape.

   Light and dark are handled by four local variables declared on
   .dealers-page and flipped once, near the bottom of this file.
   Every component below uses those four rather than hard-coding a
   colour, so the whole page themes from one place.
   ============================================================ */

.dealers-page {
  --surf:    var(--ct-graphite);          /* cards, panels           */
  --surf-2:  #191c20;                     /* insets, tracks, wells   */
  --ink:     var(--ct-white);             /* primary text            */
  --ink-dim: rgba(255, 255, 255, 0.66);   /* secondary text          */
  --edge:    var(--line);                 /* hairlines               */
}

/* The 45-degree corner cut, as one reusable rule. */
.dl-chamfer {
  clip-path: polygon(
    var(--chamfer) 0, 100% 0,
    100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%,
    0 100%, 0 var(--chamfer));
}

/* ------------------------------------------------------------
   SCROLL PROGRESS — 2px accent rule under the top bar
   ------------------------------------------------------------ */
.scroll-progress {
  position: fixed; top: 62px; left: 0; right: 0; height: 2px;
  background: var(--ct-red); transform: scaleX(0); transform-origin: 0 50%;
  z-index: 60; pointer-events: none; will-change: transform;
}
@media (max-width: 900px) { .scroll-progress { top: 56px; } }

/* ------------------------------------------------------------
   REVEALS — shared by every section on this page
   ------------------------------------------------------------
   Scoped to .reveal-ready, which public/js/reveal.js only sets
   once it has confirmed motion is wanted and IntersectionObserver
   exists. Without that class nothing is ever hidden, so a JS
   failure can never leave the page blank.
   ------------------------------------------------------------ */
/* reveal.js marks each element `revealed` — and for a group it
   marks the CHILDREN, setting their stagger delay inline. So the
   hidden state goes on the same elements it observes, and no
   nth-child delays are needed here. */
.reveal-ready .dealers-page [data-reveal],
.reveal-ready .dealers-page [data-reveal-group] > * {
  opacity: 0; transform: translateY(24px);
  transition: opacity .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1);
}
.reveal-ready .dealers-page [data-reveal].revealed,
.reveal-ready .dealers-page [data-reveal-group] > *.revealed {
  opacity: 1; transform: none;
}

/* ============================================================
   1. HERO
   ============================================================ */
.dhero {
  position: relative; min-height: 92vh; display: flex; align-items: flex-end;
  padding: 0 var(--gutter) 8vh; overflow: hidden; isolation: isolate;
}
.dhero-shot { position: absolute; inset: 0; z-index: 0; }
.dhero-shot img {
  width: 100%; height: 100%; object-fit: cover; object-position: 60% center;
  transform: scale(1.12); will-change: transform;
}
/* Two gradients: one to seat the copy, one to close the bottom edge. */
.dhero-scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(100deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.72) 34%, rgba(0,0,0,.18) 64%, rgba(0,0,0,.05) 100%),
    linear-gradient(to top, rgba(17,17,17,.96) 0%, rgba(17,17,17,0) 42%);
}
.dhero-inner { position: relative; z-index: 2; max-width: min(880px, 92%); }

.dhero-kicker { color: var(--ct-red); }

/* Sized DOWN from .display.xl on purpose. The headline is split
   into four lines that rise in sequence, and that only reads as a
   sequence if each line actually fits on one line — at the xl
   scale every line wrapped internally and the stagger turned into
   a stutter. The size below is the largest that keeps all four
   lines unwrapped from 360px up. tests/dealers.mjs asserts it. */
/* Note the .dealers-page prefix: the headline also carries
   .display.xl, which is TWO classes and therefore out-specifies a
   bare .dhero-h1. Without the prefix the font-size below is simply
   ignored while the line-height applies, which looks like a
   half-working rule rather than a broken one. */
.dealers-page .dhero-h1 {
  margin: 22px 0 0;
  font-size: clamp(25px, 4.15vw, 62px);
  line-height: 1.06;
}
.dhero-h1 .rise { display: block; overflow: hidden; }
.dhero-h1 .rise > span {
  display: block;
  transform: translateY(105%);
  transition: transform .72s cubic-bezier(.16,1,.3,1);
}
.dhero.is-in .dhero-h1 .rise > span { transform: none; }
.dhero-h1 .rise:nth-child(2) > span { transition-delay: .07s; }
.dhero-h1 .rise:nth-child(3) > span { transition-delay: .14s; }
.dhero-h1 .rise:nth-child(4) > span { transition-delay: .21s; }

/* The accent rule draws left-to-right once the words have landed. */
.dhero-rule {
  height: 2px; background: var(--ct-red); margin: 30px 0 26px;
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .7s cubic-bezier(.16,1,.3,1) .34s;
  max-width: 340px;
}
.dhero.is-in .dhero-rule { transform: scaleX(1); }

.dhero-sub {
  max-width: 500px; font-size: 16px; line-height: 1.65; color: var(--ink-dim);
  opacity: 0; transform: translateY(14px);
  transition: opacity .6s ease .44s, transform .6s cubic-bezier(.16,1,.3,1) .44s;
}
.dhero.is-in .dhero-sub { opacity: 1; transform: none; }

.dhero-ctas {
  display: flex; gap: 16px; flex-wrap: wrap; margin-top: 34px;
  opacity: 0; transform: translateY(14px);
  transition: opacity .6s ease .54s, transform .6s cubic-bezier(.16,1,.3,1) .54s;
}
.dhero.is-in .dhero-ctas { opacity: 1; transform: none; }

.dhero-cue {
  position: absolute; left: var(--gutter); bottom: 22px; z-index: 3;
  font-size: 10px; letter-spacing: .3em; color: var(--ink-dim);
  display: flex; align-items: center; gap: 10px; transition: opacity .4s;
}
.dhero-cue::after {
  content: ''; width: 1px; height: 26px; background: var(--ct-red);
  animation: dcue 1.9s ease-in-out infinite;
}
.dhero-cue.is-gone { opacity: 0; }
@keyframes dcue { 0%,100% { transform: scaleY(.35); opacity: .4; } 50% { transform: scaleY(1); opacity: 1; } }

@media (max-width: 900px) {
  /* Tighter side padding than the page gutter, purely so the
     longest headline line still fits on one line on a 360px
     phone. Anything wider forces a wrap and the stagger stutters. */
  .dhero { min-height: 88vh; padding-inline: max(4vw, 18px); padding-bottom: 12vh; }
  .dhero-cue { left: max(4vw, 18px); }
  .dhero-shot img { object-position: 64% center; filter: brightness(.72); }
  .dhero-sub { max-width: 100%; }
  .dhero-ctas .cta { flex: 1 1 100%; text-align: center; }
}

/* ============================================================
   2. PROOF BAR
   ============================================================ */
.proof {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--edge); border-block: 1px solid var(--edge);
}
.proof-cell { background: var(--ct-black); padding: 40px 26px; }
.dealers-page .proof-cell { background: var(--surf-2); }
.proof-num {
  display: block; font-family: var(--font-mono); font-size: clamp(32px, 4vw, 52px);
  font-weight: 600; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums;
}
.proof-cell.accent .proof-num { color: var(--ct-red); }
.proof-label { display: block; margin-top: 14px; font-size: 13px; color: var(--ink-dim); }
.proof-note {
  grid-column: 1 / -1; background: var(--surf-2); padding: 12px 26px;
  font-size: 10px; letter-spacing: .24em; color: var(--ink-dim);
}
/* A stat with no confirmed number renders as an obvious gap, not a zero. */
.proof-todo {
  display: inline-block; font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em;
  color: var(--ct-red); border: 1px dashed currentColor; padding: 8px 12px; line-height: 1.3;
}
@media (max-width: 820px) {
  .proof { grid-template-columns: repeat(2, 1fr); }
  .proof-cell { padding: 28px 20px; }
}

/* ============================================================
   3. SPLIT SECTIONS  (legacy, partner)
   ============================================================ */
.dsplit {
  display: grid; grid-template-columns: 1fr 1fr; gap: 5vw; align-items: center;
}
.dsplit.flip .dsplit-media { order: -1; }
.dsplit-media { position: relative; }
.dsplit-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dsplit-media figcaption {
  margin-top: 14px; font-size: 10px; letter-spacing: .24em; color: var(--ct-red);
}
.dsplit-copy .cta-row { margin-top: 5vh; }
@media (max-width: 900px) {
  .dsplit { grid-template-columns: 1fr; gap: 5vh; }
  .dsplit.flip .dsplit-media { order: 0; }
}

/* Placeholder panel for photos that have not been supplied.
   Reuses the site's existing "missing media" idea so it reads as
   deliberate rather than broken. */
.dl-missing {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 260px; padding: 30px; background: var(--surf-2);
  border: 1px dashed var(--ct-red);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em;
  color: var(--ct-red); line-height: 1.8;
}

/* ============================================================
   4. STAT BAND — three cards on the accent
   ============================================================ */
.dband { background: var(--ct-red); padding: 8vh var(--gutter); }
.dband-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.dband-card { background: var(--ct-black); padding: 34px 28px; }
.dband-card.accent { background: #0b0b0b; outline: 1px solid rgba(255,255,255,.14); outline-offset: -1px; }
.dband-ico { width: 30px; height: 30px; color: var(--ct-red); margin-bottom: 20px; }
.dband-ico svg { width: 100%; height: 100%; display: block; }
.dband-card h3 { font-family: var(--font-head); font-size: 22px; font-stretch: 112%; color: #fff; }
.dband-card p { margin-top: 12px; font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,.66); }
@media (max-width: 900px) { .dband-grid { grid-template-columns: 1fr; gap: 16px; } }

/* ============================================================
   5. TESTIMONIALS — two 9:16 cards
   ============================================================ */
.testi-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 320px)); gap: 26px; justify-content: center;
}
.testi-card {
  position: relative; aspect-ratio: 9 / 16; background: var(--surf-2);
  overflow: hidden; display: flex; align-items: flex-end;
}
.testi-card img, .testi-card video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.testi-card video { z-index: 3; background: #000; }
.testi-scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.1) 55%);
}
.testi-body { position: relative; z-index: 2; padding: 24px; }
.testi-card.is-playing .testi-body,
.testi-card.is-playing .testi-scrim,
.testi-card.is-playing .testi-play { display: none; }
.testi-quote { font-size: 15px; line-height: 1.55; color: #fff; }
.testi-who { margin-top: 12px; font-size: 10px; letter-spacing: .22em; color: var(--ct-red); }
.testi-play {
  position: absolute; z-index: 4; inset: 0; margin: auto; width: 62px; height: 62px;
  border-radius: 50%; border: 1px solid rgba(255,255,255,.5); background: rgba(0,0,0,.42);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  cursor: pointer; display: grid; place-items: center; color: #fff;
  transition: transform .2s, background .2s, border-color .2s;
}
.testi-play:hover, .testi-play:focus-visible { transform: scale(1.08); background: var(--ct-red); border-color: var(--ct-red); color: #111; }
.testi-play svg { width: 20px; height: 20px; margin-left: 3px; }
.testi-card.is-empty { display: grid; place-items: center; aspect-ratio: 9 / 16; }
@media (max-width: 760px) {
  .testi-grid { grid-template-columns: 1fr; max-width: 320px; margin-inline: auto; }
}

/* ============================================================
   6. CARD GRIDS — opportunity, why
   ============================================================ */
.dcards { display: grid; gap: 22px; }
.dcards.three { grid-template-columns: repeat(3, 1fr); }
.dcards.two   { grid-template-columns: repeat(2, 1fr); }

.dcard {
  position: relative; background: var(--surf); padding: 32px 28px 34px;
  border: 1px solid transparent;
  transition: transform .28s cubic-bezier(.16,1,.3,1), background .28s;
}
.dcard-tag { font-size: 9px; letter-spacing: .28em; color: var(--ct-red); }
.dcard h3 { margin: 16px 0 12px; font-family: var(--font-head); font-size: 21px; font-stretch: 112%; }
.dcard p { font-size: 14.5px; line-height: 1.62; color: var(--ink-dim); }
.dcard.accent { outline: 1px solid rgba(255,90,31,.45); outline-offset: -1px; }

/* The 1px accent trace runs the card's perimeter on activation.
   Two pseudo-elements: one draws the top+right, one the bottom+left. */
.dcard-trace { position: absolute; inset: 0; pointer-events: none; }
.dcard-trace::before, .dcard-trace::after {
  content: ''; position: absolute; background: var(--ct-red); transition: transform .34s cubic-bezier(.16,1,.3,1);
}
.dcard-trace::before { top: 0; left: 0; height: 1px; width: 100%; transform: scaleX(0); transform-origin: 0 50%; }
.dcard-trace::after  { bottom: 0; right: 0; width: 1px; height: 100%; transform: scaleY(0); transform-origin: 50% 100%; }
.dcard.is-active { transform: translateY(-4px); }
.dcard.is-active .dcard-trace::before { transform: scaleX(1); }
.dcard.is-active .dcard-trace::after  { transform: scaleY(1); transition-delay: .1s; }

/* The icon strokes draw in on activation. */
.dcard-ico { width: 32px; height: 32px; color: var(--ct-red); margin-bottom: 18px; }
.dcard-ico svg { width: 100%; height: 100%; display: block; overflow: visible; }
.dcard-ico path, .dcard-ico circle, .dcard-ico rect, .dcard-ico line, .dcard-ico polyline {
  stroke-dasharray: 90; stroke-dashoffset: 90;
  transition: stroke-dashoffset .7s cubic-bezier(.16,1,.3,1);
}
.dcard.is-active .dcard-ico path,
.dcard.is-active .dcard-ico circle,
.dcard.is-active .dcard-ico rect,
.dcard.is-active .dcard-ico line,
.dcard.is-active .dcard-ico polyline { stroke-dashoffset: 0; }

@media (max-width: 1000px) { .dcards.three { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px)  { .dcards.three, .dcards.two { grid-template-columns: 1fr; } }

/* ============================================================
   7. EARNINGS ESTIMATOR
   ============================================================ */
.est-grid {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 30px; align-items: start;
}
.est-panel { background: var(--surf); padding: 34px 30px; }
.est-flag {
  display: inline-block; margin-bottom: 24px; padding: 8px 12px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em;
  color: var(--ct-red); border: 1px dashed currentColor;
}
.est-field { margin-bottom: 30px; }
.est-field > label, .est-legend {
  display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: .24em;
  color: var(--ink-dim); margin-bottom: 14px;
}
.est-units-row { display: flex; align-items: center; gap: 18px; }
.est-units-row input[type="range"] { flex: 1; }
.est-units-val { font-family: var(--font-mono); font-size: 15px; white-space: nowrap; }
.est-units-val b { color: var(--ct-red); font-size: 22px; }

/* Range input — same treatment as the VX1 savings slider. */
.dealers-page input[type="range"] {
  -webkit-appearance: none; appearance: none; height: 2px; background: var(--edge);
  outline: none; border-radius: 0;
}
.dealers-page input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 22px; height: 22px;
  background: var(--ct-red); cursor: pointer;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.dealers-page input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px; background: var(--ct-red); border: 0; cursor: pointer;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.dealers-page input[type="range"]:focus-visible { outline: 2px solid var(--ct-red); outline-offset: 6px; }

/* Segmented control */
.est-seg { display: flex; gap: 1px; background: var(--edge); }
.est-seg button {
  flex: 1; background: var(--surf-2); color: var(--ink); border: 0; cursor: pointer;
  padding: 14px 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
  transition: background .2s, color .2s; text-align: center;
}
.est-seg button em { display: block; font-style: normal; font-size: 9px; opacity: .55; margin-top: 5px; letter-spacing: .06em; }
.est-seg button.active { background: var(--ct-red); color: #111; }
.est-seg button.active em { opacity: .75; }
.est-seg button:focus-visible { outline: 2px solid var(--ct-red); outline-offset: -2px; }

/* Checkbox */
.est-check { display: flex; gap: 14px; align-items: flex-start; cursor: pointer; }
.est-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.est-check .box {
  flex: none; width: 22px; height: 22px; border: 1px solid var(--edge); background: var(--surf-2);
  display: grid; place-items: center; margin-top: 2px; transition: background .2s, border-color .2s;
}
.est-check .box::after {
  content: ''; width: 10px; height: 6px; border-left: 2px solid #111; border-bottom: 2px solid #111;
  transform: rotate(-45deg) scale(0); transition: transform .2s;
}
.est-check input:checked + .box { background: var(--ct-red); border-color: var(--ct-red); }
.est-check input:checked + .box::after { transform: rotate(-45deg) scale(1); }
.est-check input:focus-visible + .box { outline: 2px solid var(--ct-red); outline-offset: 3px; }
.est-check-text strong { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em; }
.est-check-text span { display: block; margin-top: 6px; font-size: 13.5px; color: var(--ink-dim); line-height: 1.55; }

/* Outputs */
.est-out { background: var(--surf-2); padding: 34px 30px; position: sticky; top: 96px; }
.est-out-main { padding-bottom: 26px; border-bottom: 1px solid var(--edge); }
.est-out-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .24em; color: var(--ink-dim); }
.est-out-big {
  display: block; margin-top: 10px; font-family: var(--font-mono); font-weight: 600;
  font-size: clamp(34px, 4.4vw, 52px); line-height: 1; color: var(--ct-red);
  font-variant-numeric: tabular-nums;
}
.est-out-rows { display: grid; gap: 18px; margin-top: 26px; }
.est-out-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.est-out-row dt { font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em; color: var(--ink-dim); }
.est-out-row dd { font-family: var(--font-mono); font-size: 19px; font-variant-numeric: tabular-nums; text-align: right; }
.est-out-row dd.is-negative { color: var(--ct-red); }
.est-disclaimer { margin-top: 26px; font-size: 12px; line-height: 1.6; color: var(--ink-dim); }
.est-out .cta { margin-top: 24px; width: 100%; text-align: center; }

@media (max-width: 980px) {
  .est-grid { grid-template-columns: 1fr; }
  .est-out { position: static; }
}

/* ============================================================
   8. TERRITORY MAP
   ============================================================ */
.terr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.terr-mapwrap { position: relative; }
.terr-map { width: 100%; max-width: 100%; height: auto; display: block; max-height: 74vh; }

.terr-map path {
  fill: var(--surf-2); stroke: var(--ct-black); stroke-width: 1.1; stroke-linejoin: round;
  cursor: pointer; outline: none;
  transition: fill .45s cubic-bezier(.16,1,.3,1), opacity .45s;
  opacity: 0;
}
.terr-map.is-in path { opacity: 1; }
.terr-map.is-in path[data-status="open"]      { fill: var(--ct-red); }
.terr-map.is-in path[data-status="limited"]   { fill: #8a3a1a; }
.terr-map.is-in path[data-status="appointed"] { fill: #3a3d43; }
.terr-map.no-stagger path { transition: none; }

.terr-map path:hover,
.terr-map path:focus-visible { fill: #fff; }
.terr-map path:focus-visible { stroke: var(--ct-red); stroke-width: 2.4; }
.terr-map path.is-selected { fill: #fff; stroke: var(--ct-red); stroke-width: 2.4; }

/* Tooltip */
.terr-tip {
  position: absolute; top: 0; left: 0; z-index: 5; pointer-events: none;
  background: var(--ct-black); border: 1px solid var(--edge); padding: 12px 16px;
  min-width: 168px; box-shadow: 0 18px 40px rgba(0,0,0,.5);
  transition: transform .12s ease-out;
}
.terr-tip[hidden] { display: none; }
.terr-tip strong { display: block; font-family: var(--font-head); font-size: 17px; font-stretch: 112%; color: #fff; margin-top: 6px; }
.maptip-status, .mapres-status {
  font-size: 9px; letter-spacing: .2em; text-transform: uppercase;
}
.maptip-status[data-status="open"], .mapres-status[data-status="open"]           { color: var(--ct-red); }
.maptip-status[data-status="limited"], .mapres-status[data-status="limited"]     { color: #d2793f; }
.maptip-status[data-status="appointed"], .mapres-status[data-status="appointed"] { color: rgba(255,255,255,.5); }
.maptip-line { display: block; margin-top: 6px; font-size: 12.5px; color: rgba(255,255,255,.66); }

/* Search */
.terr-search { position: relative; margin-bottom: 26px; }
.terr-search label {
  display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: .24em;
  color: var(--ink-dim); margin-bottom: 12px;
}
.terr-search input {
  width: 100%; background: var(--surf-2); border: 1px solid var(--edge); color: var(--ink);
  padding: 15px 16px; font-family: var(--font-body); font-size: 15px;
}
.terr-search input:focus { outline: none; border-color: var(--ct-red); }
.terr-results {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 6; list-style: none;
  background: var(--ct-black); border: 1px solid var(--edge); border-top: 0; max-height: 260px; overflow-y: auto;
}
.terr-results[hidden] { display: none; }
.terr-results button {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 14px;
  background: transparent; border: 0; color: var(--ink); cursor: pointer; text-align: left;
  padding: 13px 16px; font-size: 14.5px; border-bottom: 1px solid var(--edge);
}
.terr-results button:hover, .terr-results button:focus-visible { background: var(--surf); outline: none; }
.mapres-empty { padding: 14px 16px; font-size: 13.5px; color: var(--ink-dim); }

/* Legend + readout */
.terr-legend { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 24px; }
.terr-legend li { display: flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em; color: var(--ink-dim); }
.terr-legend i { width: 13px; height: 13px; display: block; }
.terr-legend i[data-status="open"]      { background: var(--ct-red); }
.terr-legend i[data-status="limited"]   { background: #8a3a1a; }
.terr-legend i[data-status="appointed"] { background: #3a3d43; }
.terr-readout { font-family: var(--font-mono); font-size: 13px; color: var(--ink-dim); min-height: 1.4em; margin-bottom: 24px; }

@media (max-width: 980px) {
  .terr-grid { grid-template-columns: 1fr; gap: 30px; }
  .terr-mapwrap { order: -1; }
  .terr-map { max-height: 56vh; margin-inline: auto; }
}

/* ============================================================
   9. IN-HOUSE CAPABILITIES — rail on mobile, 2x2 on desktop
   ============================================================ */
.caps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.cap {
  position: relative; overflow: hidden; background: var(--surf-2);
  aspect-ratio: 16 / 11; display: flex; align-items: flex-end;
}
.cap img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transform: scale(1); transition: transform 1.6s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}
/* Ken Burns, capped at 1.06 and GPU-composited. Each .cap is a
   direct child of the reveal group, so it gets `revealed` itself. */
.cap.revealed img, .cap.is-in img { transform: scale(1.06); }
.cap-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.9) 0%, rgba(0,0,0,.08) 62%);
}
.cap h3 {
  position: relative; z-index: 2; padding: 24px; font-family: var(--font-head);
  font-size: 18px; font-stretch: 112%; color: #fff; line-height: 1.3;
}
.cap-note {
  position: absolute; z-index: 3; top: 12px; left: 12px;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em;
  color: var(--ct-red); background: rgba(0,0,0,.72); border: 1px dashed currentColor; padding: 5px 8px;
}
@media (max-width: 820px) {
  /* Horizontal scroll-snap rail.

     Deliberately NOT full-bleed. Bleeding it out to the viewport
     edge with a negative margin made the element itself wider than
     the viewport, which the browser counts as document overflow
     even though the cards scroll inside it — the whole page could
     then be dragged sideways by 38px. Sitting inside the gutters
     costs a little drama and removes the bug entirely. */
  .caps {
    display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
    max-width: 100%;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .caps::-webkit-scrollbar { display: none; }
  .cap { flex: 0 0 78%; scroll-snap-align: center; aspect-ratio: 4 / 3; }
}

/* ============================================================
   10. QUALIFICATION CHECKLIST
   ============================================================ */
.qual { list-style: none; margin: 30px 0 0; display: grid; gap: 14px; }
.qual li { display: flex; gap: 14px; align-items: flex-start; font-size: 15px; line-height: 1.6; color: var(--ink-dim); }
.qual li::before {
  content: ''; flex: none; width: 9px; height: 9px; margin-top: 8px;
  background: var(--ct-red); transform: rotate(45deg);
}
.qual-note { margin-top: 22px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; color: var(--ct-red); }

/* ============================================================
   11. APPLICATION FORM
   ============================================================ */
.apply { background: var(--surf); padding: 8vh var(--gutter); }
.apply-inner { max-width: 780px; margin-inline: auto; }
.apply-head { margin-bottom: 5vh; }

/* The four-step wizard was collapsed to one screen when the form
   came down to five fields, so the progress rail, the step slide
   animations and the review table went with it. Their CSS is
   deleted rather than left dangling — dead rules outlive the
   memory of why they were there. */

.astep h3 { font-family: var(--font-head); font-size: clamp(24px, 3vw, 34px); font-stretch: 112%; }
.astep-note { margin-top: 10px; font-size: 14px; color: var(--ink-dim); }
.afields { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 34px; }
.afield.wide { grid-column: 1 / -1; }
.afield label {
  display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: .22em;
  color: var(--ink-dim); margin-bottom: 10px;
}
.afield input, .afield select {
  width: 100%; background: var(--surf-2); border: 1px solid var(--edge); color: var(--ink);
  padding: 14px 15px; font-family: var(--font-body); font-size: 15px;
}
.afield select {
  appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 42px;
}
.afield input:focus, .afield select:focus { outline: none; border-color: var(--ct-red); }
.afield.has-error input, .afield.has-error select { border-color: var(--ct-red); }
/* "(OPTIONAL)" used to be an inline opacity:.5, which dropped the
   label to a 2.96:1 contrast ratio — an AA failure on the one
   word that tells someone they can skip a field. It now carries
   the label's own colour and is distinguished by weight instead. */
.afield-optional { font-weight: 400; letter-spacing: .14em; }

.afield-error { display: block; margin-top: 8px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; color: var(--ct-red); min-height: 1em; }
.afield.shake { animation: ashake .3s; }
@keyframes ashake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

/* The honeypot must be reachable by bots but never by people. */
.ahoney { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.aactions { display: flex; gap: 16px; margin-top: 40px; flex-wrap: wrap; }
.aactions .cta.ghost { color: var(--ink); }
.cta.is-busy { opacity: .6; pointer-events: none; }

/* Success */
.asuccess { text-align: left; }
.asuccess[hidden] { display: none; }
.asuccess:focus { outline: none; }
.asuccess-tick {
  width: 54px; height: 54px; background: var(--ct-red); display: grid; place-items: center; margin-bottom: 26px;
  clip-path: polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
}
.asuccess-tick svg { width: 24px; height: 24px; color: #111; }
.asuccess h3 { font-family: var(--font-head); font-size: clamp(28px, 4vw, 42px); font-stretch: 112%; }
.asuccess p { margin-top: 16px; font-size: 16px; line-height: 1.65; color: var(--ink-dim); max-width: 52ch; }
.asuccess p b { color: var(--ct-red); font-weight: 600; }
.asuccess-ref { margin-top: 30px; padding: 18px 20px; background: var(--surf-2); display: inline-block; }
.asuccess-ref span { display: block; font-family: var(--font-mono); font-size: 9px; letter-spacing: .24em; color: var(--ink-dim); }
.asuccess-ref strong { display: block; margin-top: 8px; font-family: var(--font-mono); font-size: 22px; letter-spacing: .06em; color: var(--ct-red); }
.asuccess-next { margin-top: 34px; }
.asuccess-next > span { font-family: var(--font-mono); font-size: 10px; letter-spacing: .24em; color: var(--ink-dim); }
.asuccess-next ol { margin: 18px 0 0; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 12px; }
.asuccess-next li {
  counter-increment: s; display: flex; gap: 14px; font-size: 15px; line-height: 1.55; color: var(--ink-dim);
}
.asuccess-next li::before {
  content: counter(s); flex: none; width: 24px; height: 24px; background: var(--surf-2);
  display: grid; place-items: center; font-family: var(--font-mono); font-size: 11px; color: var(--ct-red);
}
.aerror { margin-top: 20px; padding: 18px 20px; border: 1px solid var(--ct-red); color: var(--ct-red); font-size: 14.5px; line-height: 1.6; }
.aerror[hidden] { display: none; }
/* The WhatsApp fallback button inside the error box. */
.aerror .cta { display: inline-flex; }

/* Screen-reader-only live region. */
.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;
}

@media (max-width: 640px) {
  .afields { grid-template-columns: 1fr; }
  .arail-seg .lbl { display: none; }
  .aactions .cta { flex: 1 1 100%; text-align: center; }
}

/* ============================================================
   12. FAQ
   ============================================================ */
.faq-list { max-width: 860px; border-top: 1px solid var(--edge); }
.faq-item { border-bottom: 1px solid var(--edge); }
.faq-q {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 24px;
  background: transparent; border: 0; color: var(--ink); cursor: pointer; text-align: left;
  padding: 26px 4px; font-family: var(--font-body); font-size: 17px; line-height: 1.45;
}
.faq-q:hover { color: var(--ct-red); }
.faq-q:focus-visible { outline: 2px solid var(--ct-red); outline-offset: -2px; }
.faq-icon { flex: none; width: 16px; height: 16px; position: relative; }
.faq-icon::before, .faq-icon::after {
  content: ''; position: absolute; background: var(--ct-red); transition: transform .3s cubic-bezier(.16,1,.3,1);
}
.faq-icon::before { top: 50%; left: 0; right: 0; height: 2px; margin-top: -1px; }
.faq-icon::after  { left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; }
.faq-item.is-open .faq-icon::after { transform: scaleY(0); }
.faq-a { height: 0; overflow: hidden; transition: height .34s cubic-bezier(.16,1,.3,1); }
.faq-a-inner { padding: 0 60px 30px 4px; font-size: 15.5px; line-height: 1.7; color: var(--ink-dim); }
.faq-todo { color: var(--ct-red); font-family: var(--font-mono); font-size: 13px; }

/* ============================================================
   13. STICKY MOBILE CTA
   ============================================================ */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; display: none;
  grid-template-columns: 1fr 1fr; gap: 1px; background: var(--edge);
  transform: translateY(100%); transition: transform .3s cubic-bezier(.16,1,.3,1);
  padding-bottom: env(safe-area-inset-bottom);
}
.sticky-cta.is-on { transform: none; }
.sticky-cta a {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 17px 12px; text-decoration: none; font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
}
.sticky-cta .s-apply { background: var(--ct-red); color: #111; font-weight: 600; }
.sticky-cta .s-wa { background: var(--ct-black); color: #fff; }
.sticky-cta svg { width: 15px; height: 15px; }
@media (max-width: 820px) { .sticky-cta { display: grid; } }
/* The floating WhatsApp bubble would sit on top of the bar. */
@media (max-width: 820px) { .dealers-page ~ .wa-float, body.dealers-body .wa-float { bottom: 76px; } }

/* ============================================================
   14. LIGHT THEME
   ------------------------------------------------------------
   Four variables carry almost all of it. What is left below is
   the handful of places that sit on photography or the accent,
   where the dark values are correct in both themes.
   ============================================================ */
html[data-theme="light"] .dealers-page {
  --surf:    #ffffff;
  --surf-2:  #e9e9e4;
  --ink:     #17181b;
  --ink-dim: rgba(23, 24, 27, 0.68);
}
html[data-theme="light"] .dealers-page .proof-cell,
html[data-theme="light"] .dealers-page .proof-note { background: #ffffff; }
html[data-theme="light"] .dealers-page .apply { background: #ffffff; }
html[data-theme="light"] .dealers-page .est-panel { background: #ffffff; }
html[data-theme="light"] .dealers-page .dcard { background: #ffffff; }
html[data-theme="light"] .dealers-page .terr-map path { stroke: #f2f2ef; }
html[data-theme="light"] .dealers-page .terr-map.is-in path[data-status="appointed"] { fill: #c3c4c0; }
html[data-theme="light"] .dealers-page .terr-map path:hover,
html[data-theme="light"] .dealers-page .terr-map path:focus-visible,
html[data-theme="light"] .dealers-page .terr-map path.is-selected { fill: #17181b; }
/* Tooltip and results stay dark — they float over the map and the
   contrast is better this way in both themes. */
html[data-theme="light"] .dealers-page .terr-tip,
html[data-theme="light"] .dealers-page .terr-results { background: #17181b; border-color: rgba(255,255,255,.16); }
html[data-theme="light"] .dealers-page .terr-results button { color: #fff; }
html[data-theme="light"] .dealers-page .terr-results button:hover,
html[data-theme="light"] .dealers-page .terr-results button:focus-visible { background: #24262b; }
html[data-theme="light"] .dealers-page .sticky-cta .s-wa { background: #17181b; }
/* The hero and the accent band are photographic / on-brand-red in
   both themes, so their white text is correct as-is. */

/* ============================================================
   15. REDUCED MOTION
   ------------------------------------------------------------
   Degrade to instant, never to broken: everything that animates
   in must end up in its final, visible state.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .dealers-page *,
  .dealers-page *::before,
  .dealers-page *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .dhero-h1 .rise > span { transform: none; }
  .dhero-rule { transform: scaleX(1); }
  .dhero-sub, .dhero-ctas { opacity: 1; transform: none; }
  .dhero-shot img { transform: scale(1.02); }
  .dhero-cue::after { animation: none; transform: scaleY(1); opacity: 1; }
  .terr-map path { opacity: 1; }
  .cap img, .cap.revealed img, .cap.is-in img { transform: none; }
  .arail-seg.is-current .bar::after { animation: none; }
  .reveal-ready .dealers-page [data-reveal],
  .reveal-ready .dealers-page [data-reveal-group] > * { opacity: 1; transform: none; }
}