/* ════════════════════════════════════════════════════════════════════
   CELL 1 — HERO · "BACK FROM THE GRAVEYARD"
   ALL selectors scoped under #cell-1 (no leak into siblings).
   Authority: picks.json cell:1 + WOW_CONTRACTS cell:1 + DESIGN.md.
   Palette from tokens.css ONLY (base #222222 · accent #C2231B Signal Red ·
   support #B7BCC1 Polished Steel · ink-deep #141414). Radius 0 = machined edge.
   ════════════════════════════════════════════════════════════════════ */

/* Kill the default .section padding; the hero owns a full viewport and bleeds
   UP under the fixed transparent nav (base.css --nav-h). Its own floor holds
   the odometer strip, so no bottom pad either. */
/* T2.32/T2.35 SHRINK-TO-FIT: the hero + odometer credential strip must fit in ONE
   below-nav viewport (David: the bottom four strips were cut off — "command-minus…
   if the image has to shrink, I'm cool with that"). Cap the whole cell at 100svh
   (NOT min-height, which let it overflow) so the media row gives space to the
   odometer instead of pushing it off-screen. Media shrinks; odometer always lands. */
#cell-1 {
  padding-block: 0;
  height: 100svh;
  max-height: 100svh;
  display: grid;
  /* one layer: media + headline overlap, odometer pinned to the floor row */
  grid-template-rows: 1fr auto;
  overflow: clip;
  background: var(--ink-900);
  isolation: isolate;                /* contain z-index / blend to this cell */
}

/* ---- HERO STAGE ---- */
#cell-1 .hero {
  position: relative;
  grid-row: 1 / -1;
  display: grid;
  /* P4 ITEM 6 — credential strip pinned in-view. The headline row is minmax(0,1fr)
     (NOT the default minmax(auto,1fr)): it may shrink BELOW the tall 4-line title's
     content height, so the odometer (auto row) always lands on the viewport floor
     instead of being pushed below the fold on short (~768–900px) windows. On very
     short windows the title's TOP tucks toward the nav rather than shoving the strip
     off-screen — and the monotonic title clamp below keeps it from hiding behind it. */
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: 0;                     /* let the media row compress so the odometer fits */
}

/* ---- FULL-BLEED MEDIA (edge-to-edge, bleeds under the headline) ---- */
#cell-1 .hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
/* R97: the responsive <picture> wrapper generates no box — the img keeps
   sizing against hero__media exactly as before */
#cell-1 .hero__media picture { display: contents; }
#cell-1 .hero__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* car anchors the RIGHT; hold that framing so the calm left stays type-room
     across widths. Nudges the car off the extreme edge on ultrawide. */
  object-position: 68% 62%;
  /* THE ONE CONSISTENT GRADE (DESIGN.md photography treatment): slight desat +
     WARM LIFT (kill the blue-hour cool cast → honest tungsten daylight), never
     faked to studio gloss. sepia() pulls warmth back, hue-rotate keeps greens
     true, brightness lifts the shadow floor. Shared look across every cell. */
  filter: saturate(0.92) contrast(1.03) brightness(1.0) sepia(0.16) hue-rotate(-8deg);
}
/* scroll-0 nav legibility scrim — attached to the hero media, not the fixed nav,
   so the feather moves with the sky/photo instead of sliding across it. */
#cell-1 .hero__media::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(10,10,10,0.85) 0%,
    rgba(10,10,10,0.55) 9%,
    rgba(12,12,12,0.28) 19%,
    rgba(14,14,14,0.10) 30%,
    rgba(16,16,16,0.00) 44%);
}
/* warm wash layer — a low terracotta/amber tint over the whole photo so the
   cool original sits inside the site's tungsten world (compositor-cheap). */
#cell-1 .hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: soft-light;
  background: linear-gradient(120deg,
    rgba(255, 170, 96, 0.16) 0%,
    rgba(255, 150, 80, 0.05) 45%,
    rgba(120, 90, 70, 0.00) 78%);
}

/* ---- READING SCRIMS — feather to FULL transparent (T2.19, no hard edge) ---- */
#cell-1 .hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
/* LEFT column darkens so the headline reads on the honest sky/grass.
   T2.19 DIAGNOSIS (David's "opacity line"): the OLD left scrim faded to true-zero
   by 74% horizontally AND the floor scrim didn't start until 58% down — leaving a
   bright, un-scrimmed mid-band of the raw photo (the pale sky strip) with the floor
   darkening BELOW it, reading as a horizontal light strip + a reversed falloff.
   FIX: deepen the left toward TRUE BLACK (rgba 8,8,8 ~ near-#080808), stretch the
   falloff slightly RIGHT (transparent point pushed 74%→84%), and feather smoothly
   so there is no hard alpha step. */
#cell-1 .hero__scrim--left {
  background: linear-gradient(
    100deg,
    rgba(5,5,5,1.00) 0%,
    rgba(8,8,8,0.96) 24%,
    rgba(12,12,12,0.72) 46%,
    rgba(16,16,16,0.34) 66%,
    rgba(20,20,20,0.10) 78%,
    rgba(20,20,20,0.00) 90%
  );
}
/* FLOOR scrim seats the odometer strip; blends into the charcoal base below.
   Starts its lift EARLIER (58%→40%) and ramps in small, even steps so it meets the
   left scrim's falloff with NO visible reversal band — the raw pale mid-strip is
   now feathered under a continuous darkening instead of peeking through. Reaches the
   charcoal base at true 1.0 so the seam into the odometer strip is seamless. */
#cell-1 .hero__scrim--floor {
  background: linear-gradient(
    to bottom,
    rgba(20,20,20,0.00) 40%,
    rgba(20,20,20,0.10) 56%,
    rgba(22,22,22,0.32) 70%,
    rgba(26,26,26,0.60) 84%,
    rgba(34,34,34,0.95) 100%
  );
}

/* ---- WARM TUNGSTEN GLOW — ambient worklight, ABOVE the photo, never on the
   car itself. Shared @keyframes tungsten-idle (base.css) breathes its opacity.
   A soft warm radial in the upper-left, the working-light of a lit shop.
   Presence RAISED (~2x alpha) so the shared idle opacity cycle (.73→.95) moves
   PERCEPTIBLE luma — a felt breath, not a technically-firing invisible one
   (T2.24). Kept in the upper-LEFT sky/scrim zone (centre 22% 30%, faded to 0
   by 66% radius) so it never reaches the car (object-position 68%) — the honest
   car luma stays pinned constant; only the atmosphere breathes. ---- */
#cell-1 .hero__tungsten {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: screen;
  background:
    radial-gradient(58% 52% at 20% 28%,
      rgba(255, 178, 96, 0.16) 0%,
      rgba(255, 156, 74, 0.08) 30%,
      rgba(255, 150, 70, 0.03) 50%,
      rgba(255, 150, 70, 0.00) 66%);
}

/* H13 — 8-bit gradient banding in the smooth sky/scrim falloff (David ×5).
   A static film-grain dither breaks the bands; also on-brand patina. */
#cell-1 .hero__grain {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
}

/* ---- HEADLINE BLOCK — left-anchored, protected above every state ---- */
#cell-1 .hero__inner {
  position: relative;
  z-index: 3;
  grid-row: 1;
  align-self: start;
  width: 100%;
  /* clear the fixed nav + give the odometer breathing room below */
  padding-top: calc(var(--nav-h) + var(--space-l) + 20px);
  /* H11 — equalize lede→CTA gap (52px, set by the lede's collapsed margin) with
     CTA→odometer gap; centered content means +2px padding ≈ +1px gap. Measured
     headlessly @1440×1000: 39px → ~48px. */
  /* R93b: the bleed plate invades the hero's floor by ~92px from below — the
     old 48px floor pad plus that invasion keeps the CTAs clear of the plate */
  padding-bottom: max(140px, calc(var(--space-l) + 110px));
  pointer-events: none;              /* headline never eats clicks... */
}
#cell-1 .hero__cta,
:is(.hero__odometer, .odo--rehomed) .odo--phone {
  pointer-events: auto;             /* ...only the interactive bits do */
}
#cell-1 .hero__content {
  max-width: 53rem;
}

/* eyebrow — Plex Mono caps + steel hairline lead-in (DESIGN.md text system) */
#cell-1 .hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-family: var(--font-mono);
  color: var(--support);
  margin-bottom: var(--space-s);
}
/* H7 — one lead-in only: the steel hairline. The red ::before tick (sections.css)
   made it red-then-gray-then-text; David killed the red one. */
#cell-1 .hero__eyebrow::before { content: none; }
#cell-1 .hero__eyebrow-rule {
  display: inline-block;
  width: clamp(1.75rem, 4vw, 3rem);
  height: 1px;
  background: var(--support);
  flex: none;
}
/* the provenance text is its own flex item so the hairline rule never forces a
   break. If it must wrap on the narrowest screens, break cleanly at the middot
   (each clause stays whole) — never orphan a single word (T2.13). */
#cell-1 .hero__eyebrow-text {
  min-width: 0;
  text-wrap: balance;
}

/* headline — H1A: display caps, Primer-white on dark. Fix the "too tall" feel
   (annotation): heavier weight (800), capped hero step, slightly wider
   tracking — judged against the gaveled tile's type, not the mockup approx. */
#cell-1 .hero__title {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  /* P4 ITEM 5 — MONOTONIC, density-free. Cap the hero step by viewport height so
     the title never exceeds 10.4vh. On normal laptops (height ≥ ~886px) it holds
     the full commanding 92px (--step-hero cap); below that it scales DOWN smoothly
     (83px@800 · 80px@768 · 75px@720) — no hard 92→58 step, and it stays clear of
     the nav once the strip is floor-pinned. NO global scale. */
  font-size: min(var(--step-hero), 10.4vh);
  line-height: 0.9;
  letter-spacing: 0.006em;
  color: var(--breath);             /* Primer Gray #E9E6E1 */
  text-wrap: initial;
  text-shadow: 0 2px 22px rgba(0,0,0,0.42);   /* seat it on the photo */
}
#cell-1 .hero__title { max-width: none; }  /* H6b — lift the shared 7.25ch cap; the explicit <br> owns the shape */
/* H1A-red — the one Signal Red word ("BACK"), the resurrection word */
#cell-1 .hero__title-accent {
  color: var(--accent);             /* #C2231B */
}

/* lede — their voice, on the honest field. Plex Sans, measured. */
#cell-1 .hero__lede {
  margin-top: var(--space-m);
  max-width: 34rem;
  font-size: var(--step-mini);
  line-height: 1.55;
  color: var(--text-on-dark);
}

/* ---- CTAs — stamped steel plates, 0px machined edge (radius token) ---- */
#cell-1 .hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  margin-top: var(--space-l);
}
#cell-1 .hero__btn {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 1rem 1.6rem;
  border-radius: var(--radius);
  white-space: nowrap;
  transition: transform 140ms var(--ease-out),
              box-shadow 140ms var(--ease-out),
              background 140ms var(--ease-out),
              color 140ms var(--ease-out);
}
/* primary — red plate, pressed-steel drop */
#cell-1 .hero__btn--primary {
  color: #fff;
  background: var(--accent);
  box-shadow: 0 3px 0 var(--terracotta-deep);
}
/* ghost — brushed-steel hairline plate */
#cell-1 .hero__btn--ghost {
  color: var(--breath);
  background: rgba(20,20,20,0.35);
  border: 1px solid var(--support);
  box-shadow: 0 3px 0 rgba(0,0,0,0.4);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
/* plate-press — scale-not-shift, ≤150ms, hover-capable only (T2.27, motion lib) */
@media (hover: hover) {
  #cell-1 .hero__btn--primary:hover {
    transform: translateY(2px) scale(1.01);
    box-shadow: 0 1px 0 var(--terracotta-deep);
  }
  #cell-1 .hero__btn--ghost:hover {
    transform: translateY(2px) scale(1.01);
    box-shadow: 0 1px 0 rgba(0,0,0,0.4);
    border-color: var(--breath);
    background: rgba(20,20,20,0.5);
  }
}

/* ════════════════════════════════════════════════════════════════════
   ODOMETER DATA PLATE (R93 — David's held callout, Dex-gen mock) — ONE
   machined brushed-steel plate: corner screws, digit wheels INLAID in
   recessed wells (shadow inside the well, light catching the bottom lip —
   never embossed). Per slot: top label · wheels · sublabel. Plex Mono.
   Pinned to the hero floor row. Wheels spin with the scroll wheel and land
   on release (js/cells/cell-1.js). Alive at t0 as static digits, no JS.
   ════════════════════════════════════════════════════════════════════ */
.hero__odometer {
  position: relative;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0;
  /* a mounted plate, not a full-bleed strip — it floats just off the frame
     edges so the rounded corners + screws read as hardware on the wall.
     R93b BLEED: the plate is a bridge element BETWEEN the sections; this
     negative top margin pulls it up over the hero so the hero's bottom edge
     cuts it right above the sublabel row (JS refines to plateHeight-34px on
     load/resize — this static value is the close-enough no-JS floor). */
  margin: -92px clamp(14px, 2vw, 30px) 0;
  border: 1px solid #262626;                 /* R93b: outer edge darker, deeper (mock read) */
  border-radius: 10px;
  overflow: hidden;
  /* brushed steel: fine horizontal grain over a vertical sheen. R93c: the
     bottom sheen rebound (the lighter strip on the underside) is KILLED —
     the whole bottom side leans dark now. */
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,0.014) 0 1px, rgba(0,0,0,0.02) 1px 2px, transparent 2px 3px),
    linear-gradient(to bottom, #2c2c2c 0%, #1c1c1c 48%, #131313 86%, #0e0e0e 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),    /* top edge catches the worklight */
    inset 0 -2px 3px rgba(0,0,0,0.8),        /* bottom edge falls HARD to shadow (mock read) */
    /* R93c: depth ALL AROUND — the plate pops off the hero like dashboard
       hardware, not just a downward drop */
    0 0 24px rgba(0,0,0,0.55),               /* ambient halo, every direction */
    0 3px 10px rgba(0,0,0,0.65),             /* tight contact shadow underneath */
    0 26px 56px rgba(0,0,0,0.55);            /* long float off the hero floor */
}
/* corner screws — turned-steel heads, slot lines at mismatched angles
   (a real fitter never clocks four screws identically) */
:is(.hero__odometer, .odo--rehomed) .odo-plate__screw {
  position: absolute;
  z-index: 2;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #5a5a5a 0%, #333 45%, #171717 100%);
  box-shadow: inset 0 -1px 1px rgba(0,0,0,0.7), 0 1px 1px rgba(255,255,255,0.06);
  pointer-events: none;
}
:is(.hero__odometer, .odo--rehomed) .odo-plate__screw::before {
  content: "";
  position: absolute;
  left: 1px;
  right: 1px;
  top: 50%;
  height: 1px;
  background: rgba(0,0,0,0.75);
}
:is(.hero__odometer, .odo--rehomed) .odo-plate__screw--tl { top: 7px; left: 8px; }
:is(.hero__odometer, .odo--rehomed) .odo-plate__screw--tr { top: 7px; right: 8px; transform: rotate(58deg); }
:is(.hero__odometer, .odo--rehomed) .odo-plate__screw--bl { bottom: 7px; left: 8px; transform: rotate(-32deg); }
:is(.hero__odometer, .odo--rehomed) .odo-plate__screw--br { bottom: 7px; right: 8px; transform: rotate(15deg); }
:is(.hero__odometer, .odo--rehomed) .odo {
  flex: 1 1 0;
  min-width: 0;                       /* let flex items shrink, never clip */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  /* R93b "maximally thin" — the plate stops eating the car; same type sizes,
     the whitespace does the shrinking */
  padding: clamp(0.6rem, 1.2vw, 0.9rem) var(--space-s);
  border-left: 1px solid rgba(0,0,0,0.55);
  box-shadow: inset 1px 0 0 rgba(255,255,255,0.045);  /* machined divider: dark cut + lit edge */
  text-align: center;
}
:is(.hero__odometer, .odo--rehomed) .odo:first-child { border-left: none; box-shadow: none; }

/* top label — the engraved header line (EST. / SHOP FLOOR / …) */
:is(.hero__odometer, .odo--rehomed) .odo__toplabel {
  font-family: var(--font-mono);
  font-size: clamp(0.6rem, 0.85vw, 0.7rem);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--breath);
  opacity: 0.82;
  text-shadow: 0 1px 0 rgba(0,0,0,0.6);   /* stamped into the steel */
  white-space: nowrap;
}
/* the phone carries 12 cells (10 digits + 2 dashes) — give it more track. */
:is(.hero__odometer, .odo--rehomed) .odo--phone { flex-grow: 1.7; }

/* the digit row — each char a boxed steel cell */
:is(.hero__odometer, .odo--rehomed) .odo__value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  max-width: 100%;
  gap: 0.4ch;
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--breath);
}
:is(.hero__odometer, .odo--rehomed) .odo__digits {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
/* prefix/suffix (EST·, SQ FT, +) — steel-muted, not boxed, sits inline
   (rendered as .odo__affix spans by js/cells/cell-1.js) */
:is(.hero__odometer, .odo--rehomed) .odo__affix {
  font-size: 0.66em;
  letter-spacing: 0.1em;
  color: var(--support);
  align-self: center;
  white-space: nowrap;   /* unit (SQ FT / EST · / +) NEVER stacks — wrap parity
                            across every sibling unit (§4#4 / T2.2), all breakpoints */
}
/* one digit wheel — an INLAID well cut into the plate. The old cell was
   embossed (top inner highlight = sticks out); the inlay reads the other way:
   deep shadow INSIDE the top of the well, and the light catches the well's
   bottom lip OUTSIDE it (R93, David's callout). */
:is(.hero__odometer, .odo--rehomed) .odo__cell {
  position: relative;
  display: inline-flex;
  align-items: flex-start;   /* anchor the wheel band to the well TOP — centering
                                a 30-glyph band adds a half-strip offset under the
                                JS translate and splits every digit */
  justify-content: center;
  min-width: 1.05em;
  height: 1.5em;
  padding: 0 0.16em;
  font-size: clamp(1.15rem, 2vw, 1.7rem);
  line-height: 1;
  color: var(--breath);
  background: linear-gradient(to bottom, #070707 0%, #131313 42%, #0b0b0b 100%);
  border: 1px solid #050505;
  border-radius: 4px;
  box-shadow: inset 0 3px 6px rgba(0,0,0,0.85),      /* recess depth under the top edge */
              inset 0 -1px 0 rgba(255,255,255,0.05), /* faint wheel sheen at the well floor */
              0 1px 0 rgba(255,255,255,0.04);        /* bottom lip catch — R93c: halved, the
                                                        underside leans dark (David) */
  overflow: hidden;
  font-variant-numeric: tabular-nums;
}
/* the wheel strip inside the well — a vertical band of glyphs the JS
   translates continuously (scroll-spin) and lands on the true digit */
:is(.hero__odometer, .odo--rehomed) .odo__strip {
  display: flex;
  flex-direction: column;
  will-change: transform;
}
:is(.hero__odometer, .odo--rehomed) .odo__g {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 1.5em;                       /* must equal .odo__cell height */
  flex: none;
}
/* wheel-well vignette — the strip curls away into shadow top and bottom */
:is(.hero__odometer, .odo--rehomed) .odo__cell::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, transparent 30%, transparent 70%, rgba(0,0,0,0.45) 100%);
  pointer-events: none;
}

/* separators (comma / dot / dash) sit between cells, un-boxed */
:is(.hero__odometer, .odo--rehomed) .odo__sep {
  display: inline-flex;
  align-items: flex-end;
  padding-bottom: 0.15em;
  font-size: clamp(1.15rem, 2vw, 1.7rem);
  color: var(--support);
}

/* NO-JS FLOOR — if the JS never runs at all (html has no .js class), the
   digit cells are never built, so paint the true value as plain mono text.
   With JS the cells replace this and it collapses to nothing. */
html:not(.js) .hero__odometer .odo__digits::before {
  content: attr(data-odo-fallback);
  font-size: clamp(1.15rem, 2vw, 1.7rem);
  color: var(--breath);
  font-variant-numeric: tabular-nums;
}

/* labels — steel-tinted Plex Sans mini (DESIGN.md captions) */
:is(.hero__odometer, .odo--rehomed) .odo__label {
  font-family: var(--font-body);
  font-size: clamp(0.62rem, 0.9vw, 0.72rem);
  letter-spacing: 0.04em;
  line-height: 1.25;
  color: var(--slate-400);
  text-transform: none;
}

/* the phone as the "call" element — its digits go red-hot, a stamped plate CTA */
:is(.hero__odometer, .odo--rehomed) .odo--phone {
  text-decoration: none;
  transition: background 160ms var(--ease-out);
}
:is(.hero__odometer, .odo--rehomed) .odo--phone .odo__label { color: var(--support); }
@media (hover: hover) {
  .hero__odometer .odo--phone:hover { background: rgba(194,35,27,0.10); }
  .hero__odometer .odo--phone:hover .odo__label { color: var(--accent); }
}

/* ════════════════════════════════════════════════════════════════════
   RESPONSIVE — mobile is desktop RECOMPOSED, not squished (T2.31).
   ════════════════════════════════════════════════════════════════════ */

/* tablet: odometer wraps to a 3+2 grid rather than crushing five across */
@media (max-width: 900px) {
  .hero__odometer {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 12px;      /* no bleed on small screens — the plate sits in normal
                              flow BELOW the hero (mobile pass owns this surface) */
    margin-bottom: 12px;
  }
  .hero__odometer .odo {
    border-top: 1px solid rgba(0,0,0,0.55);
  }
  .hero__odometer .odo:nth-child(-n+3) { border-top: none; }
  .hero__odometer .odo:nth-child(3n+1) { border-left: none; box-shadow: none; }
}

/* mobile: headline re-clamps (never re-cases), photo shifts to keep the car
   readable, odometer becomes a 2-col + phone-full-width block */
@media (max-width: 620px) {
  /* MOB pass: with the plate living BELOW the hero now (bridge element), the
     100svh hero left ~500px of empty dark floor under the CTAs. Cut the
     section to the content's real height — the fold lands just under the
     CTAs and the plate arrives on the first scroll. */
  #cell-1 { height: 88svh; max-height: 88svh; }
  /* R94: the provenance is ONE clean line — "Bradyville, Tennessee" restates
     what the cred row says two scrolls down; the middot dies with it */
  #cell-1 .hero__eyebrow-clause { display: block; }
  #cell-1 .hero__eyebrow-clause:last-of-type { display: none; }
  #cell-1 .hero__eyebrow-dot { display: none; }
  /* R94/R96/R97/R98: phones load the WIDER medium gen (see index.html picture
     source) — 42% weights the car lower right (R98: David pulled it left
     35-60px from the 38% frame), left headlight full, calm treeline left */
  #cell-1 .hero__photo { object-position: 42% 62%; }
  /* R98: an ACTUAL eyebrow — it sits on the brow, not mid-forehead */
  #cell-1 .hero__eyebrow { margin-bottom: 0.5rem; }
  /* R98: the lede pairs UP with its header (Fable's pick) — the CTA pair
     lives at the floor now, so the copy reads as one title block */
  #cell-1 .hero__lede { margin-top: 0.9rem; }
  /* R94: the desktop C-fade, not a flat top-down wash — left edge falls to
     near-black for type depth, feathers out before the car */
  #cell-1 .hero__scrim--left {
    background: linear-gradient(
      100deg,
      rgba(5,5,5,0.96) 0%,
      rgba(8,8,8,0.82) 26%,
      rgba(14,14,14,0.48) 52%,
      rgba(20,20,20,0.16) 74%,
      rgba(20,20,20,0.00) 92%
    );
  }
  #cell-1 .hero__content { max-width: 100%; }
  /* R94: lift the block up under the nav — hero reads immediately */
  #cell-1 .hero__inner { padding-top: calc(var(--nav-h) + var(--space-s)); }
  /* R95: CTAs sink to the hero floor — the copy holds the top, the car gets
     the whole middle (the reveal), the buttons land in the thumb zone just
     above the fold. Inner stretches the full 88svh; auto-margin does the drop. */
  #cell-1 .hero__inner {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    /* R98: the CTA pair slides DOWN — barely any padding between the ghost
       button and the plate peeking in below the fold */
    padding-bottom: 10px;
  }
  #cell-1 .hero__content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    /* the shell's optical translateY(1.4rem) (sections.css) would push the
       floor-anchored CTAs 22px into the fold — content is layout-true here */
    transform: none;
  }
  #cell-1 .hero__title { font-size: clamp(2.9rem, 12vw, 4rem); line-height: 0.92; }
  /* R94: the lede was reading as a paragraph, not a hero line — smaller,
     tighter measure, and the CTAs step down with it */
  #cell-1 .hero__lede {
    font-size: 0.95rem;
    line-height: 1.5;
    /* R96: the measure stops BEFORE the car — the copy stacks down the dark
       left column under the title instead of indenting around the roofline */
    max-width: 17.5rem;
  }
  #cell-1 .hero__cta { gap: 0.6rem; margin-top: auto; }
  /* R96: the shell lays CTAs as a left-aligned column, so each button hugged
     its own label (218px vs 211px — David's "one is a flag bigger"). Both
     span the full column — identical width, bigger thumb targets. */
  #cell-1 .hero__btn {
    width: 100%;
    text-align: center;
    font-size: 0.7rem;
    padding: 0.85rem 1.1rem;
  }

  /* R98: CTA pair sits tight on the plate — plate tucks up from 12px */
  .hero__odometer { grid-template-columns: repeat(2, 1fr); margin-top: 8px; }
  .hero__odometer .odo:nth-child(3n+1) { border-left: 1px solid rgba(0,0,0,0.55); }
  .hero__odometer .odo:nth-child(2n+1) { border-left: none; box-shadow: none; }
  .hero__odometer .odo:nth-child(-n+2) { border-top: none; }
  /* R98: SLICE the horizontal divider all the way through — four equal tiles
     (the left column's cut was missing; David drew this line six times).
     Machined like the verticals: dark cut + lit edge below it. */
  .hero__odometer .odo:nth-child(n+3) {
    border-top: 1px solid rgba(0,0,0,0.55);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.045);
  }
  .hero__odometer .odo:nth-child(4) {
    box-shadow: inset 1px 0 0 rgba(255,255,255,0.045),
                inset 0 1px 0 rgba(255,255,255,0.045);
  }
  /* R98: slim the tiles top-to-bottom — text sizes untouched, whitespace
     does the condensing (same move as the desktop hero thin-out) */
  .hero__odometer .odo { padding: 0.5rem var(--space-s); gap: 0.28rem; }
  .hero__odometer .odo__toplabel { font-size: 0.56rem; }
  .hero__odometer .odo__cell { font-size: 1.05rem; }
  .hero__odometer .odo__sep { font-size: 1.05rem; }

  /* R98: the phone slot is CHOPPED out of the plate (js/cells/cell-1.js
     re-homes the node at ≤620) and lands as its own machined tile directly
     under the BRADYVILLE, TENNESSEE cred line. Wheels ride along. */
  .odo--rehomed {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.28rem;
    width: fit-content;
    /* -10px tucks it to the cred rhythm (probed: 25px raw → ~15px ≈ row gap) */
    margin: -10px auto clamp(2rem, 1.5rem + 2vw, 3.2rem);
    padding: 0.6rem 1.4rem 0.65rem;
    border: 1px solid #262626;
    border-radius: 10px;
    background:
      repeating-linear-gradient(180deg, rgba(255,255,255,0.014) 0 1px, rgba(0,0,0,0.02) 1px 2px, transparent 2px 3px),
      linear-gradient(to bottom, #2c2c2c 0%, #1c1c1c 48%, #131313 86%, #0e0e0e 100%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.10),
      inset 0 -2px 3px rgba(0,0,0,0.8),
      0 0 18px rgba(0,0,0,0.45),
      0 3px 8px rgba(0,0,0,0.55);
    text-align: center;
    text-decoration: none;
  }
  .odo--rehomed .odo__toplabel { font-size: 0.56rem; }
  .odo--rehomed .odo__cell { font-size: 1.05rem; }
  .odo--rehomed .odo__sep { font-size: 1.05rem; }
}

/* ════════════════════════════════════════════════════════════════════
   T2.35 SHRINK-TO-FIT (height-constrained) — on standard laptop viewports the
   hero content + odometer overran 100svh, hiding the bottom credential strips
   (David's exact complaint). Compress the content block's vertical padding and
   the odometer cell padding so the WHOLE section — headline through all five
   credential cells — lands inside one below-nav viewport. The Buick + the
   0→100 odometer (both LOVE-NOTES) are untouched; only whitespace shrinks.
   ════════════════════════════════════════════════════════════════════ */
@media (max-height: 860px) and (min-width: 621px) {
  #cell-1 .hero__inner {
    padding-top: calc(var(--nav-h) + var(--space-m));
    /* R93b: keep the CTAs above the bleed plate's ~92px invasion */
    padding-bottom: max(132px, calc(var(--space-m) + 92px));
  }
  #cell-1 .hero__lede { margin-top: var(--space-s); }
  #cell-1 .hero__cta { margin-top: var(--space-m); }
  .hero__odometer .odo { padding-block: clamp(0.55rem, 1.1vh, 0.8rem); }
}
@media (max-height: 720px) and (min-width: 621px) {
  #cell-1 .hero__inner { padding-top: calc(var(--nav-h) + var(--space-s) + 14px); }
  /* P4 ITEM 5 — the old per-tier title override (clamp 3.2rem/8vh/5rem → a hard
     92→58 CLIFF at 720) is REMOVED. The base title is now min(--step-hero,10.4vh),
     which already gives ~75px here, continuous with 80px@768 above — monotonic. */
  #cell-1 .hero__lede { display: none; }   /* lede yields first; headline+odometer are the keepers */
  .hero__odometer .odo { padding-block: clamp(0.55rem, 1.1vh, 0.9rem); gap: 0.3rem; }
}