/* ============================================================
   Detroit Metro Car Delivery -- design system

   THE PALETTE IS THE NETWORK'S ORIGINAL ONE, RESTORED. This site
   spent a while on a warm charcoal ground with an amber accent.
   That divergence is gone: the ground is black again, the two
   surfaces above it are the neutral near-blacks, and the single
   accent is Rochester's gold, exactly the values every site in
   the network was cut from.

   Restored verbatim from the baseline commit's stylesheet:
   --void, --surface, --raised, --fg, --fg-mute, --gold,
   --gold-lit, --on-gold.

   What did NOT come back with it, and why:

   - The two rules, --line and --line-strong, were white at 10%
     and 20% alpha in the original. Composited, that is 1.31:1
     and 1.84:1 against --surface, and a border is UI: it owes
     3:1. They are restored to the original's NEUTRAL WHITE
     family rather than to the warm brown this site invented,
     but as solid greys strong enough to clear the gate. Nothing
     else on this page is allowed to be a hairline nobody can
     see, and the contrast gate is not weakened to let one be.
   - --ok and --danger. The original palette predates the shared
     wiring kit and has no state colors at all, and a success
     row that paints the same as an error row is not a palette
     decision, it is a bug. They stay, held to the same computed
     thresholds as everything else.

   Structure, copy, radii and layout are untouched by the
   restore. Only color was reverted.

   The hero still puts no text over a photograph: copy sits on
   flat ground on the left, the photograph is an inset plate on
   the right with the route strip under it. That is what makes
   every ratio on this page a measurement rather than a guess
   about what a photograph happens to contain.

   The face is TeX Gyre Adventor, an open metric clone of ITC
   Avant Garde Gothic (GUST Font License / LPPL 1.3c). Regular
   and Bold only; display type is set Bold and body Regular
   rather than faked with a synthetic weight.

   CONTRAST. Every pair on this page is computed, not judged, and
   tests/contrast.mjs reads this file and fails the build if any
   of them slips. The measured worst cases are recorded there.
   ============================================================ */

/* -- Typeface -- */
@font-face {
  font-family: 'Adventor';
  src: url('adventor-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Adventor';
  src: url('adventor-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* -- Tokens -- */
:root {
  /* Ground and the two surfaces that sit on it. Baseline values, restored. */
  --void:    #000000;
  --surface: #121212;
  --raised:  #1B1B1B;

  /* Text. --fg-mute is body copy in the tiles and the FAQ, so it is held to
     the 4.5:1 body threshold against --raised, the lightest thing it ever
     sits on, and not merely against the ground: 4.86:1 there, 5.28:1 on
     --surface, 5.92:1 on the ground. */
  --fg:      #FFFFFF;
  --fg-mute: #888888;

  /* One gold, used for every accent. 8.10:1 on --void, 7.23:1 on --surface,
     and 7.59:1 the other way round for text on a gold fill. */
  --gold:     #C49A55;
  --gold-lit: #D9B679;
  --on-gold:  #0B0B0B;

  /* The two rules. The original wrote these as white at 10% and 20% alpha.
     Composited against --surface that is 1.31:1 and 1.84:1, and a border is
     UI: it owes 3:1. So they keep the original's neutral white family and
     drop the alpha, at the lowest greys that clear the threshold against
     --raised, the lightest thing either can land on:
       --line        3.38:1 on --raised, 3.67:1 on --surface, 4.12:1 on --void
       --line-strong 5.33:1 on --raised, 5.79:1 on --surface, 6.49:1 on --void
     Every one of those is measured by tests/contrast.mjs, not asserted here. */
  --line:        #6E6E6E;
  --line-strong: #8F8F8F;

  /* States, shared with the wiring kit below. The original palette predates
     the kit and carries no state color, so these two are the minimum the kit
     needs to tell a success row from an error row. The third state, "warn",
     is not a third color here: an unavailable car is marked in --gold, the
     one accent this system has. */
  --ok:     #7DD98A;
  --danger: #FF8A73;

  --sans: 'Adventor', 'Century Gothic', 'URW Gothic', -apple-system,
          BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* Small and mechanical, against the network's 1.25rem workhorse. */
  --r-sm: 0.375rem;
  --r:    0.625rem;
  --r-lg: 0.875rem;

  --maxw:   1180px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --nav-h:  72px;

  --band: clamp(4rem, 8vw, 7.5rem);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --z-nav: 80;

  /* ---------------------------------------------------------------------
     The shared wiring kit reads these and nothing else. rr-network.css
     hard-codes no color, so every one of the nineteen color properties
     has to be set here or that part of the page paints nothing.
     Kit contract: docs/rr-network-kit.md section 4.

     EVERY ONE OF THESE WAS REPOINTED WITH THE PALETTE. They used to name
     --amber, --amber-lit, --on-amber and --field, none of which exist any
     more. A var() at a name nothing declares does not fall back to something
     sensible, it paints nothing at all, so the form, the grid and the state
     rows would have gone out unstyled while the page around them looked
     right. tests/run.mjs asserts all nineteen are declared and
     tests/contrast.mjs resolves each one to a literal, so a dangling name
     fails rather than ships.
     --------------------------------------------------------------------- */
  --rr-text:            var(--fg);
  --rr-text-muted:      var(--fg-mute);
  --rr-surface:         var(--surface);
  --rr-surface-2:       var(--raised);
  --rr-border:          var(--line);
  --rr-accent:          var(--gold);
  --rr-price:           var(--gold);
  --rr-ok:              var(--ok);
  /* Rented and in maintenance. The one accent, not a fourth hue. */
  --rr-warn:            var(--gold);
  --rr-danger:          var(--danger);
  --rr-focus:           var(--gold-lit);
  /* The field is the ground showing through the form panel: a black well cut
     into --surface. It is the darkest thing on the page, which is what gives
     typed text 21:1 and the placeholder 5.92:1. */
  --rr-input-bg:        var(--void);
  --rr-input-text:      var(--fg);
  --rr-input-border:    var(--line);
  /* Placeholder text is text. It used to be --line-strong, a border value;
     against the restored well that is a rule color doing a reader's job, so
     it is the palette's own muted text instead. */
  --rr-placeholder:     var(--fg-mute);
  --rr-button-bg:       var(--gold);
  --rr-button-bg-hover: var(--gold-lit);
  --rr-button-text:     var(--on-gold);
  --rr-button-border:   var(--gold);

  --rr-card-min:         20rem;
  --rr-gap:              clamp(1rem, 2vw, 1.5rem);
  --rr-gap-tight:        0.5rem;
  --rr-card-pad:         clamp(1.15rem, 2.2vw, 1.5rem);
  --rr-card-aspect:      16 / 10;
  --rr-radius:           var(--r);
  --rr-radius-inner:     var(--r-sm);
  --rr-border-width:     1px;
  --rr-title-size:       clamp(1.25rem, 2vw, 1.5rem);
  --rr-price-size:       clamp(1.5rem, 2.6vw, 1.875rem);
  --rr-small-size:       0.9375rem;
  --rr-font-display:     var(--sans);
  --rr-status-transform: uppercase;
  --rr-status-tracking:  0.14em;
  /* --rr-loading-opacity is deliberately absent, and this comment is the
     record of why. It used to be set here, at 0.9, as the shallowest dim that
     still cleared the gate once the grid stopped shipping the class. That was
     a smaller number, not a fix. Dimming server rendered cards composites the
     card fill and every word on it against --void, and at the 0.55 this site
     once shipped, body copy on a card measured 2.24:1 with the script off.
     The kit no longer carries any opacity rule on a card, so setting the
     property again would do nothing except mislead the next reader.
     Cards paint at full alpha, always. The refresh cue is the extra row of
     text below instead. */
  /* The disabled submit button. WCAG 2.2 1.4.3 exempts an inactive control,
     and this one is inactive for the second the POST is in flight. It is
     declared to the contrast gate as an exemption with that reason rather
     than being quietly skipped. */
  --rr-disabled-opacity: 0.55;
  --rr-motion:           180ms;
  --rr-form-width:       100%;
  --rr-form-pad:         clamp(1.25rem, 2.4vw, 1.75rem);
  --rr-control-height:   3rem;
  --rr-control-pad:      0.75rem 0.9rem;
  --rr-button-pad:       0.9rem 1.6rem;
  --rr-textarea-height:  8rem;
  --rr-focus-width:      2px;
  --rr-focus-offset:     3px;
  /* The reveal the kit runs, tuned to this site's motion. */
  --rr-reveal-shift:     14px;
  --rr-reveal-motion:    600ms;

  /* Written for this page. Seven identical sentences across the network
     would breach its structural distinctness rule. */
  --rr-msg-loading:  "Asking dispatch which cars are free today, and what each one runs.";
  --rr-msg-stale:    "This list was saved earlier. The dashboard did not answer just now, so rates may have moved.";
  --rr-msg-empty:    "Nothing is published to this page at the moment. The whole fleet is on the main site.";
  --rr-mark-success: "\2192";
  --rr-mark-error:   "\0021";
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 1.5rem);
}
:target,
[id]:not(body):not(html) { scroll-margin-top: calc(var(--nav-h) + 1.5rem); }

body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--void);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

main { flex: 1 0 auto; }

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

ul, ol { list-style: none; }

a { color: inherit; text-decoration: none; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

::selection { background: var(--gold); color: var(--on-gold); }

/* -- Focus -- */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--gold-lit);
  outline-offset: 3px;
  border-radius: 3px;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100%;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--gold);
  color: var(--on-gold);
  border-radius: var(--r-sm);
  font-weight: 700;
  transition: top 0.2s var(--ease);
}
.skip-link:focus-visible { top: 1rem; }

/* -- Layout -- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.band { padding-block: var(--band); }
.band-tight { padding-block: calc(var(--band) * 0.62); }

/* -- The chevron, this site's one ornament -------------------
   A CSS triangle rather than a glyph, so it sits on the
   baseline the same way at every size and never waits on a
   font. It is decorative everywhere it appears.              */
.chev {
  display: inline-block;
  width: 0;
  height: 0;
  margin-inline: 0.45em 0;
  vertical-align: 0.05em;
  border-block: 0.32em solid transparent;
  border-inline-start: 0.42em solid var(--gold);
}

/* -- Type -- */
h1, h2, h3, h4 {
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

.h-page { font-size: clamp(2.5rem, 6.4vw, 4.25rem); line-height: 1.08; }
.h-sec  { font-size: clamp(1.875rem, 4.2vw, 3.125rem); line-height: 1.16; }
.h-card { font-size: clamp(1.25rem, 2vw, 1.5rem); line-height: 1.2; }

.h-sec .mute, .h-page .mute, .footer-mark .mute, .wordmark .mute {
  font-style: normal;
  color: var(--fg-mute);
}

.lede {
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.5;
  color: var(--fg-mute);
  max-width: 46ch;
}

.body-copy { color: var(--fg-mute); max-width: 68ch; }
.body-copy + .body-copy { margin-top: 1rem; }

.answer-block > p:first-child {
  font-size: clamp(1rem, 1.2vw, 1.0625rem);
  line-height: 1.62;
  max-width: 62ch;
}

.micro {
  font-size: 0.75rem;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-mute);
}

.sec-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}
.sec-head .lede { margin-top: 1rem; }

/* A fact this build could not source. It is meant to be seen. */
.todo {
  display: inline-block;
  padding: 0.15em 0.5em;
  border: 1px dashed var(--gold);
  border-radius: var(--r-sm);
  color: var(--gold);
  font-size: 0.9375rem;
}

/* -- Links -- */
.inline-link {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  transition: color 0.18s var(--ease);
}
.inline-link:hover { color: var(--gold-lit); }

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--gold);
  font-weight: 700;
  transition: color 0.18s var(--ease);
}
.arrow-link::after {
  content: '\2192';
  font-weight: 400;
  transition: transform 0.24s var(--ease);
}
.arrow-link:hover { color: var(--gold-lit); }
.arrow-link:hover::after { transform: translateX(0.32em); }

/* -- Buttons: square-shouldered, bordered, not pills -- */
.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 52px;
  padding: 0.85rem 1.75rem;
  border-radius: var(--r-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: center;
  border: 1px solid transparent;
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease),
              border-color 0.18s var(--ease), transform 0.18s var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--gold); color: var(--on-gold); border-color: var(--gold); }
.btn-primary:hover { background: var(--gold-lit); border-color: var(--gold-lit); }

.btn-ghost { border-color: var(--gold); color: var(--gold); }
.btn-ghost:hover { background: rgba(196, 154, 85, 0.12); color: var(--gold-lit); border-color: var(--gold-lit); }

.btn-quiet { border-color: var(--line); color: var(--fg); }
.btn-quiet:hover { border-color: var(--line-strong); background: rgba(255, 255, 255, 0.06); }

.btn-sm { min-height: 44px; padding: 0.55rem 1.15rem; }

/* == Header ================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.site-header.pinned {
  background: rgba(0, 0, 0, 0.9);
  border-bottom-color: var(--line);
}

.site-nav {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.75rem);
}

.wordmark {
  font-size: 0.9375rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
  margin-right: auto;
}
.wordmark b { font-weight: 700; }
.wordmark span { font-weight: 400; color: var(--fg-mute); }

.nav-links { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.25rem); }
.nav-links a {
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--fg-mute);
  transition: color 0.18s var(--ease);
}
.nav-links a:hover, .nav-links a[aria-current='page'] { color: var(--fg); }

.nav-book {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0.45rem 1.2rem;
  border-radius: var(--r-sm);
  background: var(--gold);
  color: var(--on-gold);
  font-weight: 700;
  font-size: 0.9375rem;
  white-space: nowrap;
  transition: background-color 0.18s var(--ease);
}
.nav-book:hover { background: var(--gold-lit); }

.hamburger {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
}
.hamburger i {
  display: block;
  width: 16px;
  height: 1.5px;
  background: var(--fg);
  transition: transform 0.22s var(--ease), opacity 0.22s var(--ease);
}
.hamburger[aria-expanded='true'] i:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.hamburger[aria-expanded='true'] i:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded='true'] i:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.mobile-menu {
  display: none;
  overflow: hidden;
  max-height: 0;
  /* max-height:0 clips the pixels but leaves every link focusable and in the
     accessibility tree, so a keyboard user tabs into a menu they cannot see.
     visibility:hidden is what actually makes it inert. */
  visibility: hidden;
  background: var(--surface);
  border-top: 1px solid var(--line);
  transition: max-height 0.32s var(--ease);
}
.mobile-menu.open { max-height: 24rem; visibility: visible; }
.mobile-menu a {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 1rem var(--gutter);
  font-size: 1.125rem;
  font-weight: 700;
  border-bottom: 1px solid var(--line);
}
.mobile-menu a:last-child { border-bottom: 0; color: var(--gold); }
.mobile-menu a span {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  color: var(--fg-mute);
  font-weight: 400;
}

@media (max-width: 900px) {
  .nav-links, .nav-book { display: none; }
  .hamburger { display: flex; }
  .mobile-menu { display: block; }
}

/* == Hero ====================================================
   Flat ground, no scrim, no full-bleed photograph. Copy on the
   left, an inset plate on the right, and the route strip under
   the plate. Nothing here paints text on top of a photograph,
   which is also why every ratio on this page is measurable
   against a known flat color.                                */
.hero { padding-block: clamp(2.5rem, 6vw, 5rem) clamp(2rem, 4vw, 3.25rem); }

.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.hero-eyebrow { display: flex; align-items: center; color: var(--gold); }
.hero-eyebrow .chev { margin-inline: 0.5rem 0.6rem; }
.hero-copy .h-page { margin-top: 1.25rem; }
.hero-copy .lede { margin-top: 1.5rem; }
.hero-actions { margin-top: clamp(1.75rem, 3vw, 2.5rem); }

.hero-plate { position: relative; }
.hero-plate img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

/* The route strip. Overlaps the plate's lower edge so the page opens with
   something crossing a boundary, which is the whole subject. */
.route {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: -2.25rem 1.25rem 0;
  padding: 0.9rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.route-node { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.route-node b { font-size: 0.9375rem; font-weight: 700; }
.route-node-mid b { color: var(--gold); }
.route-line {
  flex: 1;
  height: 1px;
  min-width: 1.25rem;
  background: repeating-linear-gradient(to right,
    var(--line-strong) 0 8px, transparent 8px 14px);
}

@media (max-width: 960px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-plate img { aspect-ratio: 16 / 10; }
}
@media (max-width: 560px) {
  .route { flex-wrap: wrap; margin-inline: 0.75rem; }
  .route-line { min-width: 100%; }
}

/* -- Fact rail -- */
.rail {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.rail > div { background: var(--surface); padding: clamp(1.15rem, 2.2vw, 1.6rem); }
.rail dt { margin-bottom: 0.4rem; }
.rail dd { font-size: clamp(1rem, 1.5vw, 1.25rem); font-weight: 700; }
.rail dd b { color: var(--gold); font-weight: 700; font-variant-numeric: tabular-nums; }

@media (max-width: 880px) { .rail { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .rail { grid-template-columns: 1fr; } }

/* == Fleet ===================================================
   The grid itself is the wiring kit's. Everything below is this
   site's handwriting laid over it, and it is loaded before
   rr-network.css so these rules win where the two overlap.    */
.fleet-claim {
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
  padding-left: 1rem;
  border-left: 2px solid var(--gold);
  color: var(--fg-mute);
  max-width: 64ch;
}
.fleet-claim b { color: var(--fg); font-variant-numeric: tabular-nums; }

.fleet-grid { align-items: stretch; }

.car {
  gap: 0;
  padding: 0;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  transition: border-color 0.22s var(--ease), transform 0.22s var(--ease);
}
.car:hover, .car:focus-within { border-color: var(--gold); transform: translateY(-3px); }

/* The media box is an <a> here, so it needs display:block. Left inline it
   picks up a baseline gap and paints a sliver of card above the photograph. */
.car-media {
  display: block;
  position: relative;
  border-radius: 0;
  border-bottom: 1px solid var(--line);
  background: var(--raised);
}
.car-media img { transition: transform 0.5s var(--ease); }
.car:hover .car-media img { transform: scale(1.03); }

.car-tag {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.28rem 0.7rem;
  border-radius: var(--r-sm);
  background: var(--void);
  border: 1px solid var(--line);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--fg);
}

.car-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.6rem;
  padding: clamp(1.15rem, 2.2vw, 1.5rem);
}
/* The title holds three separate spans, one per live field, so the kit can
   repaint year, make and model independently. As a flex row those spans became
   flex items: the words were spaced by the link's gap and a long name broke
   into a ragged column instead of wrapping. Inline puts the sentence back
   together and lets "2022 Ford Expedition Max" wrap like text. */
.car-body h3 .arrow-link { display: inline; gap: 0; color: var(--fg); }
.car-body h3 .arrow-link::after { display: inline-block; margin-left: 0.4em; }
.car-body h3 .arrow-link::after { color: var(--fg-mute); transition: color 0.18s var(--ease), transform 0.24s var(--ease); }
.car:hover .car-body h3 .arrow-link, .car-body h3 .arrow-link:hover { color: var(--gold); }
.car:hover .car-body h3 .arrow-link::after { color: var(--gold); }

.car-specs > div { display: flex; gap: 0.4rem; }
.car-status { margin-top: 0.1rem; }

.car-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: auto;
  padding-top: 1.15rem;
  border-top: 1px solid var(--line);
}
.car-price {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  margin: 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.car[hidden] { display: none; }

/* == Bento =================================================== */
.bento {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr 1.15fr;
  gap: clamp(1rem, 2vw, 1.5rem);
  align-items: start;
}
.bento-lede { padding-top: 0.25rem; }
.bento-stack {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-column: span 2;
  grid-template-columns: 1fr 1fr;
}

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: clamp(1.35rem, 2.6vw, 1.9rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  min-height: 200px;
}
.tile p { color: var(--fg-mute); }
.tile .arrow-link { margin-top: auto; padding-top: 0.75rem; }

/* No text is ever set over a photograph on this site, in the hero or here.
   A scrim heavy enough to guarantee 4.5:1 over an unknown image kills the
   image anyway, and a lighter one makes the contrast figure a guess about
   what the photograph happens to contain. So the photograph gets the top of
   the tile at full strength and the copy gets a solid band underneath, which
   is a color that can actually be measured. */
.tile-photo {
  grid-row: span 2;
  padding: 0;
  min-height: 340px;
}
.tile-photo img {
  flex: 1 1 9rem;
  width: 100%;
  min-height: 9rem;
  object-fit: cover;
  border-bottom: 1px solid var(--line);
}
.tile-photo .tile-copy {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  flex: none;
  padding: clamp(1.35rem, 2.6vw, 1.9rem);
  background: var(--surface);
}
.tile-photo p { color: var(--fg-mute); }

@media (max-width: 1040px) {
  .bento { grid-template-columns: 1fr 1fr; }
  .bento-lede, .bento-stack { grid-column: span 2; }
}
@media (max-width: 720px) {
  .bento, .bento-stack { grid-template-columns: 1fr; }
  .bento-lede, .bento-stack { grid-column: auto; }
  .tile-photo { grid-row: auto; }
}

/* == The run ================================================= */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}
.step {
  padding: clamp(1.35rem, 2.6vw, 1.9rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.step-n {
  display: flex;
  align-items: center;
  margin-bottom: 1.15rem;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  color: var(--gold);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.step h3 { margin-bottom: 0.6rem; }
.step p { color: var(--fg-mute); }

/* == Ask: copy beside the lead form ========================== */
.ask {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
.ask-copy { position: sticky; top: calc(var(--nav-h) + 2rem); }

.rr-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--rr-gap);
}

@media (max-width: 900px) {
  .ask { grid-template-columns: 1fr; }
  .ask-copy { position: static; }
}
@media (max-width: 460px) { .rr-row { grid-template-columns: 1fr; } }

/* == Spec list =============================================== */
.spec {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.spec > div {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 1.5rem;
  padding: clamp(1.05rem, 2.2vw, 1.5rem) clamp(1.15rem, 2.4vw, 1.9rem);
  background: var(--surface);
}
/* Safety net for the rule above: these rows sit on a grid whose own
   background IS the hairline, so a row faded to opacity:0 does not disappear,
   it turns into a slab of --line. They are never revealed individually. */
.spec > div, .rail > div { opacity: 1; transform: none; }

.spec dt { color: var(--fg-mute); }
.spec dd { color: var(--fg); }
.spec dd b { color: var(--gold); font-variant-numeric: tabular-nums; }

@media (max-width: 720px) {
  .spec > div { grid-template-columns: 1fr; gap: 0.35rem; }
}

/* == FAQ =====================================================
   Open, never behind a disclosure: an answer a crawler or an
   assistant cannot read is an answer that does not exist.     */
.qa {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 2vw, 1.5rem);
  align-items: start;
}
.qa > div {
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.qa dt {
  display: flex;
  gap: 0.6rem;
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.3;
  margin-bottom: 0.75rem;
}
.qa dt::before {
  content: '\2192';
  color: var(--gold);
  font-weight: 400;
  flex: none;
}
.qa dd { color: var(--fg-mute); }

@media (max-width: 860px) { .qa { grid-template-columns: 1fr; } }

/* == CTA band ================================================ */
.cta {
  position: relative;
  padding-block: clamp(3rem, 6vw, 5rem);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  text-align: center;
}
.cta::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 3px;
  background: repeating-linear-gradient(to right,
    var(--gold) 0 28px, transparent 28px 52px);
}
.cta .actions { justify-content: center; margin-top: 2rem; }
.cta .lede { margin-inline: auto; margin-top: 1rem; }
.cta-inner { padding-inline: clamp(1.5rem, 4vw, 3rem); }

/* == Footer ================================================== */
.site-footer {
  flex: none;
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
}
.footer-inner { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

.footer-mark {
  font-size: 0.9375rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.footer-mark b { font-weight: 700; }
.footer-mark span { color: var(--fg-mute); }

.footer-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2.5rem 2rem;
}
.footer-cols h2 {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-mute);
  font-weight: 400;
  margin-bottom: 1.1rem;
}
.footer-cols ul { display: grid; gap: 0.7rem; }
.footer-cols a, .footer-cols li {
  font-size: 0.9375rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-mute);
  /* The longest token in this footer is a link label rather than an address
     now, but the guard stays: a word wider than the column escapes it instead
     of wrapping while auto-fit is still handing out 200px tracks. */
  overflow-wrap: anywhere;
}
.footer-cols a { transition: color 0.18s var(--ease); }
.footer-cols a:hover { color: var(--gold); }

.footer-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-mute);
}

/* == Reveals =================================================
   C5. There is deliberately NO reveal rule here.

   There used to be: `.rise { opacity: 0 }`, brought back by
   site.js. That is the trap. The stylesheet always loads and
   the script sometimes does not, so one 404 on site.js painted
   a blank page under a perfectly healthy CSS file.

   rr-network.css now owns the reveal. Its base state is
   VISIBLE, the hidden state is scoped to .rr-js on <html>, and
   that class is added by assets/rr-reveal.js and taken back off
   by its own watchdog unless the kit claims it. Do not
   reintroduce an opacity rule for .rise or [data-rr-reveal]
   here: a site rule can only make the failure mode worse, and
   nothing here can make the animation better.

   Reveal distance and timing are tuned through the kit's own
   properties, up in the palette block.                        */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .car:hover { transform: none; }
  .car:hover .car-media img { transform: none; }
}