/* ============================================================================
   HIGHLAND TRANSPORT — DESIGN SYSTEM
   Industrial / precision logistics.
   NOTE: the original rationale was Scandinavian-by-way-of-Norse, chosen for the
   Vikings name. The visual system stands on its own, but the heritage story no
   longer matches "Highland" - revisit if the brand wants a Scottish reading.

   Colour is taken from the official logo kit, not invented:
     #C20C0E  brand red      (01_Horizontal Logo Colored.svg)
     #828282  brand steel    (01_Horizontal Logo Colored.svg)
     #000000  brand black    (01_Horizontal Logo Colored.svg)

   One typeface (Archivo variable) worked in three registers via its WIDTH
   axis — expanded for display, normal for prose, condensed for technical
   data. Avoids a second download and gives the data voice a real identity.
   ========================================================================= */

@font-face {
  font-family: 'Archivo';
  src: url('fonts/archivo-var-latin.de2f1fe8.woff2') format('woff2');
  font-weight: 400 800;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- brand constants ---- */
  --brand-red: #C20C0E;
  --brand-steel: #828282;
  --brand-black: #000000;

  /* ---- light theme ---- */
  --bg: #FFFFFF;
  --surface: #F3F4F6;
  --surface-2: #E9EBEE;
  --ink: #0B0B0C;
  --ink-2: #55585E;
  --ink-3: #6E727A;
  --rule: #DBDDE1;
  --rule-2: #BFC2C7;
  --accent: #C20C0E;
  --accent-hover: #9C0A0B;
  --accent-ink: #C20C0E;      /* accent used as TEXT */
  --on-accent: #FFFFFF;

  /* ---- permanent light card (the quote widget, which sits on the dark
         hero and must stay light in BOTH themes, exactly as the --dark-*
         set stays dark in both) ---- */
  --card-bg: #FFFFFF;
  --card-surface: #F4F5F6;
  --card-ink: #0B0B0C;
  --card-ink-2: #55585E;
  --card-ink-3: #6E727A;
  --card-rule: #DBDDE1;
  --card-rule-2: #BFC2C7;
  /* --accent-ink lifts to #FF3B30 in dark mode because it is meant to be read
     on carbon. On this permanently white card that lift kills the contrast, so
     the card carries the brand red itself. */
  --card-accent: #C20C0E;
  --card-accent-hover: #9C0A0B;

  /* ---- permanent dark blocks (hero, bands, footer) ---- */
  --dark-bg: #0B0B0C;
  --dark-surface: #141518;
  --dark-ink: #FFFFFF;
  --dark-ink-2: #A2A6AC;
  --dark-ink-3: #8A8E94;
  --dark-rule: rgba(255,255,255,.14);
  --dark-rule-2: rgba(255,255,255,.30);
  --dark-accent-ink: #FF3B30;  /* red as text on carbon needs a lift for AA */

  /* ---- type ---- */
  --f: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --w-display: 122%;
  --w-head: 112%;
  --w-body: 100%;
  --w-tech: 74%;

  /* ---- space (4px base) ---- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px; --s11: 176px;

  /* ---- structure ---- */
  --wrap: 1440px;
  --gutter: 40px;
  --rule-w: 1px;
  --radius: 0px;

  /* ---- motion ---- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --fast: .18s;
  --mid: .42s;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0B0B0C;
    --surface: #131417;
    --surface-2: #1A1C20;
    --ink: #F5F6F7;
    --ink-2: #A2A6AC;
    --ink-3: #878B91;
    --rule: #25272B;
    --rule-2: #383B40;
    --accent: #D4130F;
    --accent-hover: #E5201F;
    --accent-ink: #FF3B30;
  }
}

/* Legacy aliases — inline styles in page markup still reference these. */
:root { --text: var(--ink); --muted: var(--ink-2); }

/* ---------------------------------------------------------------- base -- */
*, *::before, *::after { box-sizing: border-box }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f);
  font-size: 17px;
  font-stretch: var(--w-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; height: auto }
a { color: inherit }
ul, ol { margin: 0; padding: 0; list-style: none }
p { margin: 0 0 1.1em }
button { font: inherit }
::selection { background: var(--accent); color: #fff }

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

.skip {
  position: absolute; left: -9999px; z-index: 200;
  background: var(--accent); color: #fff; padding: 14px 22px;
  font-stretch: var(--w-tech); text-transform: uppercase;
  letter-spacing: .16em; font-size: .8rem; font-weight: 700;
}
.skip:focus { left: 16px; top: 16px }

/* --------------------------------------------------------- typography -- */
h1, h2, h3, h4 { margin: 0; font-weight: 800; text-transform: uppercase }

.display {
  font-size: clamp(2.9rem, 8.4vw, 7.4rem);
  font-stretch: var(--w-display);
  line-height: .88;
  letter-spacing: -.028em;
}
.h-lg {
  font-size: clamp(1.9rem, 4.4vw, 3.4rem);
  font-stretch: var(--w-head);
  line-height: .98;
  letter-spacing: -.02em;
}
.h-md {
  font-size: clamp(1.25rem, 2.2vw, 1.7rem);
  font-stretch: var(--w-head);
  line-height: 1.08;
  letter-spacing: -.012em;
}
.h-sm {
  font-size: 1rem; font-stretch: var(--w-head);
  line-height: 1.25; letter-spacing: -.005em;
}

/* Technical register — condensed width is what makes this read as data. */
.tech {
  font-size: .7rem;
  font-stretch: var(--w-tech);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .2em;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}
.tech-lg { font-size: .82rem; letter-spacing: .18em }

.lede {
  font-size: clamp(1.05rem, 1.5vw, 1.28rem);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 46ch;
}
.prose { max-width: 62ch }
.prose p { color: var(--ink-2) }
.prose p:first-of-type { color: var(--ink); font-size: 1.1rem }

.muted { color: var(--ink-2) }
.accent { color: var(--accent-ink) }

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

.band { padding: var(--s10) 0; position: relative }
.band-sm { padding: var(--s9) 0 }
.band-surface { background: var(--surface) }
.band-dark { background: var(--dark-bg); color: var(--dark-ink) }

/* Editorial 12-column grid. Interior layouts place onto it explicitly rather
   than repeating one auto-fit card grid everywhere. */
.g12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--s5) }
.c-1-5   { grid-column: 1 / 6 }
.c-1-6   { grid-column: 1 / 7 }
.c-1-7   { grid-column: 1 / 8 }
.c-1-8   { grid-column: 1 / 9 }
.c-2-8   { grid-column: 2 / 9 }
.c-4-13  { grid-column: 4 / 13 }
.c-6-13  { grid-column: 6 / 13 }
.c-7-13  { grid-column: 7 / 13 }
.c-8-13  { grid-column: 8 / 13 }
.c-10-13 { grid-column: 10 / 13 }
.c-full  { grid-column: 1 / -1 }
/* Spans, as classes rather than inline grid-column — an inline style outranks
   the breakpoint rules below and silently keeps desktop columns on mobile. */
.span-3  { grid-column: span 3 }
.span-4  { grid-column: span 4 }
.span-6  { grid-column: span 6 }

/* ------------------------------------------------- section identifiers -- */
/* 01 — TRANSPORT. A ruled masthead, not a centred heading. */
.sec-id {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--s5);
  padding-bottom: var(--s4);
  border-bottom: var(--rule-w) solid var(--rule);
  margin-bottom: var(--s8);
}
.sec-id__num { color: var(--accent-ink) }
.sec-id__name { color: var(--ink-2) }
.sec-id__meta { color: var(--ink-3); justify-self: end }
.band-dark .sec-id { border-bottom-color: var(--dark-rule) }
.band-dark .sec-id__num { color: var(--dark-accent-ink) }
.band-dark .sec-id__name { color: var(--dark-ink-2) }
.band-dark .sec-id__meta { color: var(--dark-ink-3) }

/* Oversized outline numeral used in process sequences. */
.bignum {
  font-size: clamp(3.6rem, 7vw, 6.4rem);
  font-stretch: var(--w-display);
  font-weight: 800;
  line-height: .8;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--rule-2);
  font-variant-numeric: tabular-nums;
}
.band-dark .bignum { -webkit-text-stroke-color: var(--dark-rule-2) }

/* ------------------------------------------------------------ the mark -- */
/* V-derived chevron. The one geometric motif, reused deliberately. */
.chev {
  width: 10px; height: 10px; flex: none;
  background: var(--accent);
  clip-path: polygon(0 0, 52% 0, 100% 50%, 52% 100%, 0 100%, 48% 50%);
}
.band-dark .chev { background: var(--dark-accent-ink) }

/* ------------------------------------------------------------- header -- */
.site-head {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: var(--rule-w) solid var(--rule);
}
@supports not (backdrop-filter: blur(1px)) { .site-head { background: var(--bg) } }

.head-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s6); min-height: 84px }

/* The horizontal lockup carries the wordmark, so the header no longer sets
   "HIGHLAND TRANSPORT" as live text — the official letterforms are the artwork.
   Clear space: at least the height of the mark on every side. */
.brand { display: flex; align-items: center; text-decoration: none; flex: none }
.brand img { width: auto; height: 42px }
.foot-brand img { height: 36px }

.nav { display: flex; align-items: center; gap: var(--s7) }
.nav a {
  position: relative; padding: 6px 0; text-decoration: none;
  font-size: .72rem; font-weight: 700; font-stretch: var(--w-tech);
  text-transform: uppercase; letter-spacing: .17em; color: var(--ink-2);
  transition: color var(--fast) var(--ease);
}
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform var(--mid) var(--ease);
}
.nav a:hover { color: var(--ink) }
.nav a:hover::after, .nav a[aria-current]::after { transform: scaleX(1) }
.nav a[aria-current] { color: var(--ink) }
.nav .btn::after { display: none }
/* `.nav a` (0,1,1) outranks `.btn` (0,1,0), so without these the quote button
   inherits the muted nav grey — near-unreadable on crimson. The :hover variant
   needs 2 classes + a pseudo-class to beat `.nav a:hover` (0,2,1). */
.nav .btn { color: var(--on-accent) }
.nav .btn:hover, .nav .btn:focus-visible { color: var(--on-accent) }
/* Roomier than the shared .btn-sm, and the right pad is trimmed by one
   letter-space to cancel the trailing gap `letter-spacing` leaves after the
   final glyph — otherwise the label sits visibly left of centre. */
.nav .btn { padding-left: 28px; padding-right: calc(28px - .18em) }

.nav-toggle {
  display: none; background: none; border: 0; cursor: pointer;
  padding: 12px; flex-direction: column; gap: 5px;
}
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--ink); transition: transform var(--fast) var(--ease), opacity var(--fast) }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg) }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0 }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) }

/* ------------------------------------------------------------ buttons -- */
.btn {
  display: inline-flex; align-items: center; gap: 14px;
  background: var(--accent); color: var(--on-accent);
  border: 0; cursor: pointer; text-decoration: none;
  padding: 19px 30px; border-radius: var(--radius);
  font-size: .74rem; font-weight: 700; font-stretch: var(--w-tech);
  text-transform: uppercase; letter-spacing: .18em;
  transition: background var(--fast) var(--ease);
}
.btn::after {
  content: "→"; font-stretch: 100%; letter-spacing: 0; font-size: .95rem;
  transition: transform var(--mid) var(--ease);
}
.btn:hover { background: var(--accent-hover) }
.btn:hover::after { transform: translateX(6px) }
.btn:disabled { opacity: .5; cursor: not-allowed }
.btn-sm { padding: 13px 20px; font-size: .66rem }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--rule-2) }
.btn-ghost:hover { background: transparent; border-color: var(--accent) }
.band-dark .btn-ghost { color: var(--dark-ink); border-color: var(--dark-rule-2) }
.btn-quiet { background: transparent; color: var(--ink-2); border: 0; padding: 10px 0 }
.btn-quiet::after { content: none }
.btn-quiet:hover { background: transparent; color: var(--accent-ink) }

/* Inline text link with a moving arrow. */
.lnk {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--ink);
  font-size: .74rem; font-weight: 700; font-stretch: var(--w-tech);
  text-transform: uppercase; letter-spacing: .18em;
  padding-bottom: 6px; border-bottom: 1px solid var(--rule-2);
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.lnk::after { content: "→"; font-stretch: 100%; letter-spacing: 0; transition: transform var(--mid) var(--ease) }
.lnk:hover { color: var(--accent-ink); border-color: var(--accent) }
.lnk:hover::after { transform: translateX(5px) }
.band-dark .lnk { color: var(--dark-ink); border-color: var(--dark-rule-2) }
.band-dark .lnk:hover { color: var(--dark-accent-ink); border-color: var(--dark-accent-ink) }

/* --------------------------------------------------------------- hero -- */
.hero {
  position: relative; background: var(--dark-bg); color: var(--dark-ink);
  padding: clamp(var(--s9), 14vh, var(--s11)) 0 var(--s9);
  border-bottom: 1px solid var(--dark-rule);
  overflow: hidden;
}
.hero__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--s5); align-items: end }
.hero__body { grid-column: 1 / 10 }
.hero__kicker { display: flex; align-items: center; gap: 12px; color: var(--dark-ink-2); margin-bottom: var(--s7) }
.hero .display { color: #fff; margin-bottom: var(--s5) }
.hero .display em { font-style: normal; color: var(--dark-accent-ink) }
.hero__sub { color: var(--dark-ink-2); font-size: clamp(1rem, 1.4vw, 1.18rem); max-width: 42ch; margin-bottom: var(--s7) }

/* Route rail — real coordinates, restrained. */
.hero__rail { grid-column: 11 / 13; align-self: end; padding-bottom: 6px }
.route { display: grid; gap: var(--s2) }
.route__node { display: grid; gap: 3px }
.route__label { color: var(--dark-ink-3) }
.route__place { color: #fff; font-stretch: var(--w-tech); font-size: .82rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase }
.route__coord { color: var(--dark-ink-2); font-variant-numeric: tabular-nums }
.route__line { height: 44px; width: 1px; background: var(--dark-rule-2); margin: var(--s2) 0 var(--s2) 3px; position: relative }
.route__line::after {
  content: ""; position: absolute; left: -3px; bottom: 0;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 6px solid var(--dark-accent-ink);
}

/* ---------------------------------------------------------- ruled list -- */
/* Replaces card grids: rows separated by hairlines, number + title + body. */
.rows { border-top: var(--rule-w) solid var(--rule) }
.row {
  display: grid; grid-template-columns: 5rem 1fr 1.15fr; gap: var(--s5);
  padding: var(--s6) 0; border-bottom: var(--rule-w) solid var(--rule);
  align-items: start;
  transition: background var(--fast) var(--ease);
}
.row__idx { color: var(--ink-3); padding-top: 5px }
.row__title { color: var(--ink) }
.row__body { color: var(--ink-2); font-size: .97rem; margin: 0 }
.row:hover .row__idx { color: var(--accent-ink) }
.band-dark .rows { border-top-color: var(--dark-rule) }
.band-dark .row { border-bottom-color: var(--dark-rule) }
.band-dark .row__idx { color: var(--dark-ink-3) }
.band-dark .row__title { color: #fff }
.band-dark .row__body { color: var(--dark-ink-2) }
.band-dark .row:hover .row__idx { color: var(--dark-accent-ink) }

/* Bulleted spec list — hairline dashes, technical register. */
.specs { display: grid; gap: 10px; margin-top: var(--s4) }
.specs li { position: relative; padding-left: 26px; color: var(--ink-2); font-size: .82rem; font-stretch: var(--w-tech); text-transform: uppercase; letter-spacing: .1em; font-weight: 600 }
.specs li::before { content: ""; position: absolute; left: 0; top: .72em; width: 14px; height: 1px; background: var(--rule-2) }
.band-dark .specs li { color: var(--dark-ink-2) }
.band-dark .specs li::before { background: var(--dark-rule-2) }

/* --------------------------------------------------------- statements -- */
/* Large pull-quote style block used to break rhythm between dense sections. */
.statement { font-size: clamp(1.5rem, 3.4vw, 2.6rem); font-stretch: var(--w-head); font-weight: 800; line-height: 1.06; letter-spacing: -.018em; text-transform: uppercase; max-width: 18ch }
.statement em { font-style: normal; color: var(--accent-ink) }
.band-dark .statement em { color: var(--dark-accent-ink) }

/* ------------------------------------------------------------ coverage -- */
.coverage { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1px; background: var(--dark-rule); border-block: 1px solid var(--dark-rule) }
.coverage__cell { background: var(--dark-bg); padding: var(--s5) var(--s5) var(--s6) 0 }
.coverage__city { color: #fff; font-stretch: var(--w-tech); font-weight: 700; font-size: .92rem; letter-spacing: .13em; text-transform: uppercase; margin-bottom: 6px }
.coverage__coord { color: var(--dark-ink-3); font-variant-numeric: tabular-nums }

/* ---------------------------------------------------------------- FAQ -- */
.faq { border-top: var(--rule-w) solid var(--rule) }
.faq details { border-bottom: var(--rule-w) solid var(--rule) }
.faq summary {
  cursor: pointer; list-style: none; padding: var(--s5) 0;
  display: grid; grid-template-columns: 1fr auto; gap: var(--s5); align-items: center;
  font-stretch: var(--w-head); font-weight: 700; font-size: 1.02rem; text-transform: uppercase; letter-spacing: -.005em;
}
.faq summary::-webkit-details-marker { display: none }
.faq summary::after {
  content: ""; width: 13px; height: 13px; background: var(--accent);
  clip-path: polygon(46% 0,54% 0,54% 46%,100% 46%,100% 54%,54% 54%,54% 100%,46% 100%,46% 54%,0 54%,0 46%,46% 46%);
  transition: transform var(--mid) var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg) }
.faq details p { margin: 0 0 var(--s5); color: var(--ink-2); max-width: 68ch }

/* --------------------------------------------------------------- form -- */
.field { margin-bottom: var(--s5) }
.field label { display: block; margin-bottom: 10px; color: var(--ink-3); font-size: .68rem; font-weight: 700; font-stretch: var(--w-tech); text-transform: uppercase; letter-spacing: .18em }
.field .req { color: var(--accent-ink) }
.field input, .field select, .field textarea {
  width: 100%; padding: 17px 0; font: inherit; font-size: 1.05rem;
  color: var(--ink); background: transparent;
  border: 0; border-bottom: 1px solid var(--rule-2); border-radius: 0;
  transition: border-color var(--fast) var(--ease);
}
.field select { padding-right: 24px }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3) }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-bottom-color: var(--accent); border-bottom-width: 2px; padding-bottom: 16px;
}
.field textarea { min-height: 120px; resize: vertical }
.field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-bottom-color: var(--accent-ink) }
.field__err { display: none; margin: 8px 0 0; color: var(--accent-ink); font-size: .8rem; font-stretch: var(--w-tech); text-transform: uppercase; letter-spacing: .12em }
.field__err.on { display: block }
.hp { position: absolute; left: -9999px; opacity: 0; width: 0; height: 0 }
.form-note { margin: var(--s5) 0 0; color: var(--ink-3); font-size: .86rem; line-height: 1.6; max-width: 52ch }

.form-status { display: none; margin-top: var(--s5); padding: var(--s4) var(--s5); background: var(--surface); border-left: 3px solid var(--rule-2); font-size: 1.02rem }
.form-status.ok { display: block; border-left-color: #1E8E4A }
.form-status.err { display: block; border-left-color: var(--accent) }

/* -------------------------------------------------------- quote groups -- */
/* The quote form is one page, grouped into labelled blocks: route, shipping,
   contact. The grouping is borrowed from consumer quote tools; the surface is
   not. A block is a flat hairline-ruled container — radius 0, no shadow, rows
   divided by the same 1px rule the ruled lists use — so this stays inside the
   "hairline rows, never cards" rule rather than importing a card component. */
.qgroup { border: 0; padding: 0; margin: 0 0 var(--s6); min-inline-size: auto }
.qgroup[hidden] { display: none }
/* Spacing is a margin, not a flex gap: Safari has historically forced
   `display: block` on <legend>, and the two spans carry no whitespace. */
.qgroup__hd { display: flex; align-items: baseline; padding: 0; margin-bottom: var(--s3); color: var(--ink); font-size: .8rem }
.qgroup__num { color: var(--accent-ink); margin-right: var(--s3) }
.qgroup__box { border: var(--rule-w) solid var(--rule); background: var(--bg) }

.qrow { position: relative; padding: var(--s4) var(--s5); border-top: var(--rule-w) solid var(--rule) }
.qrow:first-child, .qgroup__box > div:first-child > .qrow:first-child { border-top: 0 }
/* Focus marker on the row, since the inputs inside carry no box of their own. */
.qrow::before {
  content: ""; position: absolute; left: 0; top: -1px; bottom: -1px; width: 2px;
  background: var(--card-accent); opacity: 0; transition: opacity var(--fast) var(--ease);
}
.qrow:focus-within::before { opacity: 1 }
.qrow--split { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s5) }
.qrow--split > .field + .field { padding-left: var(--s5); border-left: var(--rule-w) solid var(--rule) }

/* Inside a block the container supplies the rules, so the fields drop their
   own underline and tighten up. The underline comes back, in accent, on focus. */
.qrow .field { margin: 0 }
.qrow .field label { margin-bottom: 3px; font-size: .7rem; letter-spacing: .16em }
.qrow .field input, .qrow .field select, .qrow .field textarea {
  padding: 3px 0; font-size: 1.12rem; border-bottom-color: transparent;
}
.qrow .field input:focus, .qrow .field select:focus, .qrow .field textarea:focus {
  border-bottom-width: 1px; border-bottom-color: var(--accent); padding-bottom: 2px;
}
.qrow .field textarea { min-height: 84px }
.qrow .field__err { margin-top: 4px }

/* Route rail — the square-marker-to-red-arrowhead motif the home page hero
   already uses, turned on its side into a form. The rail stretches to the
   row, so origin and destination read as one leg rather than two fields. */
.qrow--route { display: grid; grid-template-columns: 11px 1fr; gap: var(--s4) }
.qrail { position: relative; width: 11px }
.qrail::before {
  content: ""; position: absolute; left: 2px; top: 6px; width: 7px; height: 7px;
  border: var(--rule-w) solid var(--rule-2);
}
.qrail::after {
  content: ""; position: absolute; left: 5px; top: 15px; bottom: 14px; width: 1px;
  background: var(--rule-2);
}
.qrail__head {
  position: absolute; left: 1px; bottom: 6px;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 6px solid var(--accent);
}
.qrail-fields > .field + .field {
  margin-top: var(--s4); padding-top: var(--s4); border-top: var(--rule-w) solid var(--rule);
}

/* Add-a-vehicle control. Quiet by design — most enquiries ship one unit. */
.qadd {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: var(--s3); padding: 6px 0;
  background: transparent; border: 0; cursor: pointer; color: var(--accent-ink);
  font: inherit; font-size: .74rem; font-weight: 700; font-stretch: var(--w-tech);
  text-transform: uppercase; letter-spacing: .16em;
}
.qadd:hover { color: var(--accent-hover) }
.qadd[hidden] { display: none }
.qadd__sign { font-size: 1rem; line-height: 1 }
.qveh__hd {
  grid-column: 1 / -1; display: flex; align-items: center;
  justify-content: space-between; gap: var(--s4); margin-bottom: var(--s3);
}
.qveh__n { color: var(--ink-3) }
.qveh__drop {
  background: transparent; border: 0; cursor: pointer; padding: 0;
  color: var(--ink-3); font: inherit; font-size: .68rem; font-weight: 700;
  font-stretch: var(--w-tech); text-transform: uppercase; letter-spacing: .14em;
}
.qveh__drop:hover { color: var(--accent-ink) }

/* Dealer / auction toggle. */
.check { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s5); cursor: pointer }
.check input { width: 18px; height: 18px; flex: none; accent-color: var(--accent); margin: 0 }
.check__label { color: var(--ink-2); font-size: 1.04rem }

/* ------------------------------------------------------- address lookup -- */
/* Google Places predictions. The list is ours, not Google's widget, so it
   inherits the same hairline language as everything else on the form. */
.qplace { position: relative }
.qplace__list {
  position: absolute; z-index: 40; left: 0; right: 0; top: 100%;
  margin: 6px 0 0; padding: 0; list-style: none;
  max-height: 272px; overflow-y: auto;
  background: var(--bg); border: var(--rule-w) solid var(--rule-2);
}
.qplace__list[hidden] { display: none }
.qplace__item {
  padding: 11px var(--s4); cursor: pointer; font-size: 1rem; color: var(--ink-2);
  border-top: var(--rule-w) solid var(--rule);
}
.qplace__item:first-child { border-top: 0 }
.qplace__item.is-active { background: var(--surface); color: var(--ink) }

/* Measured lane. Reads as instrumentation, not as a quote. */
.qdist { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4) }
.qdist[hidden] { display: none }
.qdist__label { color: var(--ink-3) }
.qdist__value {
  color: var(--ink); font-size: 1.12rem; font-stretch: var(--w-tech);
  font-weight: 700; letter-spacing: .04em; font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------- vehicle picker -- */
/* The native <select> stays in the DOM carrying the value; once JS has built
   the tiles it is parked off-screen rather than removed, so FormData,
   `required` and a JS-off visitor all keep working. */
.qpick { position: relative }
.qpick[data-enhanced="true"] select {
  position: absolute; width: 1px; height: 1px; padding: 0;
  opacity: 0; pointer-events: none;
}
.qpick__trigger {
  display: flex; align-items: center; gap: var(--s3);
  width: 100%; padding: 3px 0; background: transparent; border: 0; cursor: pointer;
  border-bottom: var(--rule-w) solid transparent;
  font: inherit; font-size: 1.12rem; color: var(--ink); text-align: left;
}
.qpick__value { flex: 1 }
.qpick__trigger-icon { flex: none; color: var(--ink-2); line-height: 0 }
.qpick__trigger-icon:empty { display: none }
.qpick__trigger-icon .qpick__icon { width: 36px; height: 18px }
.qpick__trigger:focus-visible { outline: none; border-bottom-color: var(--accent) }
.qpick.is-empty .qpick__value { color: var(--ink-3) }
.qpick:has(select[aria-invalid="true"]) .qpick__trigger { border-bottom-color: var(--accent-ink) }
/* The chevron is the V-derived motif from .chev, pointing down. */
.qpick__chev {
  width: 9px; height: 9px; flex: none; background: var(--ink-3);
  clip-path: polygon(0 0, 52% 0, 100% 50%, 52% 100%, 0 100%, 48% 50%);
  transform: rotate(90deg); transition: transform var(--fast) var(--ease);
}
.qpick__trigger[aria-expanded="true"] .qpick__chev { transform: rotate(270deg); background: var(--accent) }

/* The picker sits in a half-width cell but the tile grid needs more room, so
   the panel is allowed to overhang its cell. It is a popover over a solid
   background, so overlapping the rows beside and below it is intended. */
.qpick__panel {
  position: absolute; z-index: 50; left: 0; top: 100%;
  min-width: 460px; max-width: calc(100vw - var(--gutter) * 2);
  margin-top: 6px; padding: var(--s4);
  max-height: 60vh; overflow-y: auto;
  background: var(--bg); border: var(--rule-w) solid var(--rule-2);
}
.qpick__panel[hidden] { display: none }
.qpick__group {
  margin: var(--s4) 0 var(--s3); padding-top: var(--s3);
  color: var(--ink-3); border-top: var(--rule-w) solid var(--rule);
}
.qpick__group:first-child { margin-top: 0; padding-top: 0; border-top: 0 }
.qpick__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3) }
/* Tiles are centred around the drawing, the way a vehicle picker reads
   fastest: silhouette first, class name second, examples last. */
.qpick__opt {
  display: grid; justify-items: center; gap: 5px;
  padding: 11px var(--s3) 10px; text-align: center; cursor: pointer;
  background: transparent; border: var(--rule-w) solid var(--rule); font: inherit;
  transition: border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.qpick__opt:hover { border-color: var(--rule-2) }
.qpick__opt:focus-visible { outline: none; border-color: var(--accent) }
.qpick__opt.is-active { border-color: var(--accent); border-width: 2px; padding: 10px 11px 9px }
.qpick__icon { display: block; width: 52px; height: 26px; color: var(--ink-2) }
.qpick__opt:hover .qpick__icon { color: var(--ink) }
.qpick__opt.is-active .qpick__icon { color: var(--accent-ink) }
.qpick__opt-name { color: var(--ink); font-size: .92rem; line-height: 1.2 }
.qpick__opt.is-active .qpick__opt-name { color: var(--accent-ink) }
.qpick__opt-eg { color: var(--ink-3); font-size: .74rem; line-height: 1.3 }

/* ------------------------------------------------------------- estimate -- */
/* The figure the whole form exists to produce, so it gets the display width
   and the one accent edge. Still a hairline block: no radius, no shadow. */
.qprice {
  margin-top: var(--s5); padding: var(--s5);
  border: var(--rule-w) solid var(--rule-2); border-left: 3px solid var(--accent);
  background: var(--surface);
}
.qprice[hidden] { display: none }
.qprice__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4) }
.qprice__label { color: var(--ink-3) }
.qprice__value {
  color: var(--ink); font-size: clamp(2.1rem, 5vw, 2.9rem);
  font-stretch: var(--w-display); font-weight: 700; letter-spacing: -.02em;
  line-height: 1; font-variant-numeric: tabular-nums;
}
.qprice__basis { margin: var(--s4) 0 0; color: var(--ink-2); font-size: .98rem; line-height: 1.5 }
.qprice__note { margin: var(--s3) 0 0; color: var(--ink-3); font-size: .82rem; line-height: 1.5; max-width: 58ch }
/* Quoted by hand: no number to show, so the basis line carries it alone. */
.qprice--manual { border-left-color: var(--rule-2) }
.qprice--manual .qprice__value { display: none }
.qprice--manual .qprice__basis { margin-top: var(--s3); color: var(--ink) }

.qsubmit { margin-top: var(--s6) }
.btn-block { width: 100%; justify-content: space-between }
/* Two-line label: what the button does, and what happens when you press it. */
.btn-stack { padding: 17px 26px }
.btn__stack { display: grid; gap: 5px; text-align: left }
.btn__main { font-size: 1rem; letter-spacing: .12em }
.btn__sub {
  font-size: .76rem; font-weight: 600; font-stretch: var(--w-body);
  text-transform: none; letter-spacing: .01em; opacity: .85;
}

/* ------------------------------------------------------------- footer -- */
.site-foot { background: var(--dark-bg); color: var(--dark-ink-2); padding: var(--s9) 0 0; position: relative }
.site-foot::before { content: ""; position: absolute; top: 0; left: 0; width: 160px; height: 2px; background: var(--accent) }
.foot-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.2fr; gap: var(--s7); padding-bottom: var(--s8) }
.foot-brand { margin-bottom: var(--s5); color: #fff }
.foot-tag { margin: 0 0 10px; color: #fff; font-size: .7rem; font-weight: 700; font-stretch: var(--w-tech); text-transform: uppercase; letter-spacing: .22em }
.foot-auth { margin: 0; color: var(--dark-ink-3); font-size: .72rem; font-stretch: var(--w-tech); text-transform: uppercase; letter-spacing: .14em }
.site-foot h4 { margin-bottom: var(--s5); color: #fff; font-size: .66rem; font-stretch: var(--w-tech); letter-spacing: .22em }
.site-foot li { margin-bottom: 12px; font-size: .92rem }
.site-foot a { color: var(--dark-ink-2); text-decoration: none; transition: color var(--fast) var(--ease) }
.site-foot a:hover { color: var(--dark-accent-ink) }
.foot-base { border-top: 1px solid var(--dark-rule); padding: var(--s5) 0; display: flex; justify-content: space-between; gap: var(--s5); flex-wrap: wrap }
.foot-base p { margin: 0; color: var(--dark-ink-3); font-size: .66rem; font-stretch: var(--w-tech); text-transform: uppercase; letter-spacing: .16em }

/* ------------------------------------------------------------- motion -- */
/* Scoped to .js (set inline in <head>, so no flash). Unscoped, a JS failure
   would leave every revealable element at opacity:0 — an invisible website. */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .55s var(--ease), transform .55s var(--ease) }
.js .reveal.in { opacity: 1; transform: none }
.js .reveal-rule { transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease) }
.js .reveal-rule.in { transform: scaleX(1) }
.reveal[data-d="1"] { transition-delay: .06s } .reveal[data-d="2"] { transition-delay: .12s }
.reveal[data-d="3"] { transition-delay: .18s } .reveal[data-d="4"] { transition-delay: .24s }

/* --------------------------------------------------------- responsive -- */
@media (max-width: 1180px) {
  :root { --gutter: 32px }
  .hero__body { grid-column: 1 / 11 }
  .hero__rail { display: none }
  .foot-grid { grid-template-columns: 1.4fr 1fr 1fr }
}
@media (max-width: 900px) {
  :root { --s9: 72px; --s10: 88px; --s11: 104px }
  .c-1-5, .c-1-6, .c-1-7, .c-1-8, .c-2-8, .c-4-13, .c-6-13, .c-7-13, .c-8-13, .c-10-13 { grid-column: 1 / -1 }
  .span-3, .span-4 { grid-column: span 6 }
  .span-6 { grid-column: 1 / -1 }
  .row { grid-template-columns: 3.5rem 1fr; row-gap: var(--s3) }
  .row__body { grid-column: 2 }
  .foot-grid { grid-template-columns: 1fr 1fr }
}
@media (max-width: 720px) {
  :root { --gutter: 20px; --s9: 60px; --s10: 72px }
  body { font-size: 16px }
  .display { font-size: clamp(2.6rem, 13vw, 4rem); letter-spacing: -.03em }
  .hero { padding: var(--s8) 0 var(--s9) }
  .hero__kicker { margin-bottom: var(--s6) }
  .brand img { height: 32px }
  .nav-toggle { display: flex }
  .nav {
    display: none; position: fixed; inset: 84px 0 0; z-index: 90;
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 0; padding: var(--s5) var(--gutter) var(--s8);
    background: var(--bg); overflow-y: auto;
  }
  .nav.open { display: flex }
  .nav a { padding: var(--s5) 0; border-bottom: 1px solid var(--rule); font-size: 1.5rem; font-stretch: var(--w-head); letter-spacing: -.01em; color: var(--ink) }
  .nav a::after { display: none }
  .nav a[aria-current] { color: var(--accent-ink) }
  .nav .btn { margin-top: var(--s6); justify-content: space-between; border-bottom: 0 }
  .foot-grid { grid-template-columns: 1fr; gap: var(--s6) }
  .sec-id { grid-template-columns: auto 1fr; row-gap: 6px }
  .sec-id__meta { display: none }
  .coverage__cell { padding-bottom: var(--s5) }
  /* Two-up rows stack, so the vertical divider between them becomes a
     horizontal one. */
  .qrow { padding: var(--s4) var(--s4) }
  .qrow--split { grid-template-columns: 1fr }
  .qrow--split > .field + .field {
    margin-top: var(--s4); padding-top: var(--s4); padding-left: 0;
    border-left: 0; border-top: var(--rule-w) solid var(--rule);
  }
  .qrow--route { gap: var(--s3) }
  .qpick__grid { grid-template-columns: repeat(2, 1fr) }
  .qpick__panel { right: 0; min-width: 0; padding: var(--s3) }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important }
  .reveal { opacity: 1; transform: none }
  .reveal-rule { transform: none }
}

/* Anchor targets must clear the 84px sticky header. */
.svc, [id^="open-"], [id^="enclosed-"], [id^="dealer-"], [id^="inoperable"] { scroll-margin-top: 104px }

/* ============================================================================
   PHOTOGRAPHY
   Images are cropped architecturally and sit flush to their container. No
   rounded corners, no shadows, no floating rectangles.
   ========================================================================= */

/* Fills its container completely; the aspect box is set by the parent. */
.media { position: relative; overflow: hidden; background: var(--surface) }
.media picture, .media img { display: block; width: 100%; height: 100%; object-fit: cover }

.media-4x3  { aspect-ratio: 4 / 3 }
.media-3x2  { aspect-ratio: 3 / 2 }
.media-3x4  { aspect-ratio: 3 / 4 }
.media-21x9 { aspect-ratio: 21 / 9 }

/* Escapes the .wrap gutters to touch both edges of the viewport. */
.bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.bleed .media { aspect-ratio: 21 / 9 }
@media (max-width: 720px) { .bleed .media { aspect-ratio: 4 / 3 } }

/* Hero photography sits behind the type. The scrim is a flat two-stop wash
   rather than a decorative gradient — without it the display type fails
   contrast over the lighter regions of any real photograph. */
.hero--photo .hero__media {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden; background: var(--dark-bg);
}
.hero--photo .hero__media img { width: 100%; height: 100%; object-fit: cover; opacity: .5 }
.hero--photo .hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--dark-bg) 0%, rgba(11,11,12,.82) 46%, rgba(11,11,12,.45) 100%);
}
.hero--photo .wrap { position: relative; z-index: 1 }
/* The V watermark is redundant once a photograph is carrying the hero. */
.hero--photo::before { display: none }
@media (max-width: 720px) {
  .hero--photo .hero__media::after {
    background: linear-gradient(180deg, rgba(11,11,12,.72) 0%, rgba(11,11,12,.92) 70%);
  }
}

/* Caption in the technical register, hung under the frame on a hairline. */
.media-cap {
  display: flex; justify-content: space-between; gap: var(--s5);
  margin-top: var(--s3); padding-top: var(--s3);
  border-top: 1px solid var(--rule); color: var(--ink-3);
}
.band-dark .media-cap { border-top-color: var(--dark-rule); color: var(--dark-ink-3) }

/* Slow scale-up on hover, only where an image is a link. */
@media (hover: hover) {
  a .media img { transition: transform .7s var(--ease) }
  a:hover .media img { transform: scale(1.03) }
}

/* ---------------------------------------------------------- hero photo -- */
/* The supplied hero frames the truck centre-left, which is exactly where the
   display type sits. Overlaying would bury the branded door and the sunset, so
   the photograph runs flush BELOW the type block instead of behind it — one
   continuous carbon composition, and the photograph stays uncompromised. */
.hero--stack { border-bottom: 0; padding-bottom: var(--s8) }
.hero--stack::before { display: none }          /* watermark is redundant now */

.hero-media { position: relative; background: var(--dark-bg); line-height: 0 }
.hero-media .media { aspect-ratio: 16 / 9; background: var(--dark-bg) }
.hero-media::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 148px; height: 2px; background: var(--accent);
}
@media (max-width: 720px) { .hero-media .media { aspect-ratio: 5 / 4 } }

/* Full-bleed divider band. */
.band-media { background: var(--dark-bg); line-height: 0 }
.band-media .media { aspect-ratio: 21 / 9 }
@media (max-width: 720px) { .band-media .media { aspect-ratio: 4 / 3 } }

/* Closing imperatives on the About page — a ruled sequence, in the heading
   register, so the three commitments read as a standard rather than as trailing
   sentences. */
.creed { margin-top: var(--s7); border-top: var(--rule-w) solid var(--rule) }
.creed li {
  display: grid; grid-template-columns: 3.5rem 1fr; gap: var(--s5);
  align-items: baseline; padding: var(--s5) 0;
  border-bottom: var(--rule-w) solid var(--rule);
}
.creed .tech { color: var(--accent-ink) }
.creed .h-md { color: var(--ink) }
@media (max-width: 720px) { .creed li { grid-template-columns: 2.6rem 1fr; gap: var(--s4) } }

/* ============================================================================
   LEGAL / INFORMATIONAL PAGES
   Reading-first. No cards, no reveal animation, no decoration — just measure,
   hierarchy and rule work.
   ========================================================================= */

.legal { max-width: 68ch }
.legal > p:first-child { font-size: 1.1rem; color: var(--ink) }
.legal p, .legal li { color: var(--ink-2); line-height: 1.78 }
.legal p { margin: 0 0 1.25em }
.legal strong { color: var(--ink); font-weight: 700 }

/* Section heads: label-scale rather than display-scale, so a page of fifteen
   of them stays calm. Hairline above, with a crimson leading segment. */
.legal h2 {
  position: relative;
  margin: var(--s9) 0 var(--s5);
  padding-top: var(--s5);
  border-top: var(--rule-w) solid var(--rule);
  font-size: 1.08rem;
  font-stretch: var(--w-head);
  letter-spacing: .04em;
  line-height: 1.25;
  color: var(--ink);
}
.legal h2::before {
  content: ""; position: absolute; top: -1px; left: 0;
  width: 42px; height: 2px; background: var(--accent);
}
.legal > h2:first-of-type { margin-top: var(--s8) }

/* Prose lists — sentence case, unlike the uppercase .specs technical list. */
.legal ul { margin: 0 0 1.35em; display: grid; gap: 10px }
.legal ul li { position: relative; padding-left: 26px }
.legal ul li::before {
  content: ""; position: absolute; left: 0; top: .78em;
  width: 12px; height: 1px; background: var(--accent);
}

.legal a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px }
.legal a:hover { text-decoration-thickness: 2px }

.legal address {
  font-style: normal; line-height: 1.9; color: var(--ink-2);
  margin-top: var(--s4); padding-left: var(--s5);
  border-left: 2px solid var(--accent);
}

.legal-updated { color: var(--dark-ink-2); margin-top: var(--s4) }

@media (max-width: 720px) {
  .legal { max-width: none }
  .legal h2 { margin-top: var(--s8); font-size: 1.02rem }
  .legal p, .legal li { line-height: 1.72 }
}

/* Footer legal links. */
.foot-legal { display: flex; gap: var(--s5); flex-wrap: wrap }
.foot-legal a {
  color: var(--dark-ink-3); text-decoration: none;
  font-size: .66rem; font-stretch: var(--w-tech);
  text-transform: uppercase; letter-spacing: .16em; font-weight: 700;
}
.foot-legal a:hover { color: var(--dark-accent-ink) }

/* ============================================================
   Hero quote widget (.hq) — instant auction-run rate, in-hero.
   A LIGHT card sitting on the permanently dark hero, so it uses the --card-*
   token set, which stays light in both themes the way --dark-* stays dark.
   Never swap these for --bg/--ink: those flip in dark mode and the card would
   go black against a black hero.
   Data: /assets/quote-data.js  Behaviour: main.js (§ hero quote)
   ============================================================ */
.hq {
  display: grid; align-content: start;
  background: var(--card-bg);
  border: 1px solid var(--card-rule-2);
  color: var(--card-ink);
  text-align: left;
}
/* The card's own padding lives on the body, so the CTA can run flush to the
   card's bottom edge with no gutter either side. */
.hq__body { padding: var(--s5) var(--s5) var(--s4); display: grid; gap: var(--s4) }

.hq__head { display: grid }
.hq__eyebrow { color: var(--card-accent) }

/* Section = numeral + label above a hairline box, the same idiom the full
   quote form uses. Radius 0, no shadow; the box rules do the grouping. */
.hq__sec { display: grid; gap: var(--s2) }
.hq__legend { color: var(--card-ink); font-size: .64rem; letter-spacing: .18em }
.hq__num { color: var(--card-accent); margin-right: 8px }
.hq__box { border: 1px solid var(--card-rule); background: var(--card-bg) }
.hq__line {
  position: relative; display: grid; grid-template-columns: 20px 1fr;
  gap: 11px; align-items: center; padding: 10px 13px;
}
.hq__ico {
  width: 20px; height: 20px; fill: none; stroke: var(--card-ink-3);
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.hq__field { display: grid; gap: 3px; min-width: 0 }
.hq__label { color: var(--card-ink-3); font-size: .58rem; letter-spacing: .16em }

.hq__input {
  width: 100%; font: inherit; font-size: 1rem; color: var(--card-ink);
  background: transparent; border: 0; padding: 0;
}
.hq__input::placeholder { color: var(--card-ink-3) }
.hq__select {
  width: 100%; font: inherit; font-size: 1rem; color: var(--card-ink);
  background: transparent; border: 0; border-radius: 0; padding: 0;
  appearance: none; cursor: pointer;
}
.hq__select:focus { outline: none }
/* The chevron is the V motif, same as the full form's picker. */
.hq__line:has(.hq__select)::after {
  content: ""; position: absolute; right: 13px; top: 50%; width: 9px; height: 9px;
  background: var(--card-ink-3); transform: translateY(-50%) rotate(90deg);
  clip-path: polygon(0 0, 52% 0, 100% 50%, 52% 100%, 0 100%, 48% 50%);
  pointer-events: none;
}
.hq__line:has(.hq__select) .hq__field { padding-right: 20px }
.hq__input[type="date"] { color: var(--card-ink); min-height: 1.5em }

/* Route rail — the square-marker-to-arrowhead motif the hero and the full
   quote form both already use. */
.hq__line--route { align-items: stretch }
.hq__stack { display: grid; min-width: 0 }
.hq__stack > .hq__field + .hq__field {
  margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--card-rule);
}
.hq__rail { position: relative; width: 20px; justify-self: center }
.hq__rail::before {
  content: ""; position: absolute; left: 6px; top: 7px; width: 7px; height: 7px;
  border: 1px solid var(--card-rule-2);
}
.hq__rail::after {
  content: ""; position: absolute; left: 9px; top: 16px; bottom: 14px; width: 1px;
  background: var(--card-rule-2);
}
.hq__railhead {
  position: absolute; left: 5px; bottom: 6px;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 6px solid var(--card-accent);
}

/* The shared vehicle picker, re-tinted for the permanently light card: its own
   rules use --ink/--rule/--bg, which flip in dark mode and would turn the panel
   black inside a white card. */
.hq .qpick__trigger { font-size: 1rem; color: var(--card-ink); padding: 0; border-bottom: 0 }
.hq .qpick.is-empty .qpick__value { color: var(--card-ink-3) }
.hq .qpick__chev { background: var(--card-ink-3) }
.hq .qpick__trigger[aria-expanded="true"] .qpick__chev { background: var(--card-accent) }
/* The hero clips its overflow, so a tall panel would be cut off at the band's
   bottom edge rather than overhanging it. Capped to fit, and it scrolls. */
.hq .qpick__panel {
  min-width: 0; max-height: 276px;
  background: var(--card-bg); border-color: var(--card-rule-2);
}
.hq .qpick__group { color: var(--card-ink-3); border-top-color: var(--card-rule) }
.hq .qpick__opt { border-color: var(--card-rule) }
.hq .qpick__opt:hover { border-color: var(--card-rule-2) }
.hq .qpick__opt.is-active { border-color: var(--card-accent) }
.hq .qpick__icon { color: var(--card-ink-2) }
.hq .qpick__opt:hover .qpick__icon { color: var(--card-ink) }
.hq .qpick__opt.is-active .qpick__icon,
.hq .qpick__opt.is-active .qpick__opt-name { color: var(--card-accent) }
.hq .qpick__opt-name { color: var(--card-ink) }
.hq .qpick__opt-eg { color: var(--card-ink-3) }
/* The card supplies its own chevron on select rows; the picker brings one. */
.hq__line:has(.qpick[data-enhanced="true"])::after { display: none }
.hq__line:has(.qpick[data-enhanced="true"]) .hq__field { padding-right: 0 }

.hq__check { display: flex; align-items: center; gap: 10px; cursor: pointer; margin-top: 2px }
.hq__check input { width: 16px; height: 16px; flex: none; accent-color: var(--card-accent); margin: 0 }
.hq__check span { color: var(--card-ink-2); font-size: .88rem }
.hq__input:focus { outline: none }
/* Focus marker on the row, since the fields inside carry no box of their own. */
.hq__line::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--accent); opacity: 0; transition: opacity var(--fast) var(--ease);
}
.hq__line:focus-within::before { opacity: 1 }

/* Predictions hang off the field, not the row, so the two route fields each
   get their own list in the right place. */
.hq__place { position: relative }
.hq__opts {
  position: absolute; inset-inline: 0; top: calc(100% + 6px); z-index: 30;
  margin: 0; padding: 0; list-style: none;
  background: var(--card-bg); border: 1px solid var(--card-rule-2);
  max-height: 224px; overflow-y: auto;
}
.hq__row {
  padding: 9px 13px; cursor: pointer; font-size: .9rem; color: var(--card-ink);
  border-bottom: 1px solid var(--card-rule); display: flex; gap: 10px;
  justify-content: space-between; align-items: baseline;
}
.hq__row:last-child { border-bottom: 0 }
.hq__row:hover, .hq__row[aria-selected="true"] { background: var(--card-surface) }
.hq__row span { color: var(--card-ink-3); font-size: .76rem; flex: 0 0 auto }
.hq__row--none { color: var(--card-ink-2); cursor: default; display: block; font-size: .85rem; line-height: 1.5 }
.hq__row--none:hover { background: transparent }
.hq__row--none .lnk { color: var(--card-accent) }

.hq__seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px }
.hq__seg--2 { grid-template-columns: repeat(2, 1fr) }
.hq__opt {
  min-width: 0;
  font: inherit; font-size: .64rem; font-weight: 700; cursor: pointer;
  font-stretch: var(--w-tech); letter-spacing: .09em; text-transform: uppercase;
  padding: 7px 3px; color: var(--card-ink-2); background: transparent;
  border: 1px solid var(--card-rule); border-radius: var(--radius);
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.hq__opt:hover { color: var(--card-ink); border-color: var(--card-rule-2) }
.hq__opt[aria-pressed="true"] {
  color: var(--card-accent); border-color: var(--card-accent);
  border-width: 2px; padding: 6px 2px;
}
.hq__opt:focus-visible { outline: 2px solid var(--card-accent); outline-offset: 1px }
.hq__opt small {
  display: block; margin-top: 2px; font-size: .56rem;
  letter-spacing: .05em; color: var(--card-ink-3);
}
.hq__opt[aria-pressed="true"] small { color: var(--card-ink-2) }

.hq__out { display: grid; gap: 3px; border-top: 1px solid var(--card-rule); padding-top: var(--s4) }
.hq__price { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4) }
.hq__ratelabel { color: var(--card-ink-3) }
.hq__amt {
  font-size: 2.5rem; line-height: .94; color: var(--card-ink); font-weight: 700;
  font-stretch: var(--w-display); letter-spacing: -.035em; font-variant-numeric: tabular-nums;
}
.hq__per { margin: 0; color: var(--card-ink-3); font-size: .6rem; letter-spacing: .14em }
.hq__meta { margin: 5px 0 0; font-size: .82rem; color: var(--card-ink-2); line-height: 1.45 }
.hq__empty { margin: 0; font-size: .84rem; color: var(--card-ink-3); line-height: 1.5 }

/* Flush accent CTA: a direct child of the card, so it spans edge to edge. */
.hq__cta {
  width: 100%; border: 0; cursor: pointer; font-family: inherit; text-align: left;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 18px var(--s5); text-decoration: none;
  background: var(--card-accent); color: #FFFFFF;
  font-size: .78rem; font-weight: 700; font-stretch: var(--w-tech);
  text-transform: uppercase; letter-spacing: .16em;
  transition: background var(--fast) var(--ease);
}
.hq__cta:hover { background: var(--card-accent-hover) }
.hq__cta-arrow { font-stretch: 100%; letter-spacing: 0; font-size: 1rem; transition: transform var(--mid) var(--ease) }
.hq__cta:hover .hq__cta-arrow { transform: translateX(6px) }

/* ---- hero rebalance -----------------------------------------------------
   The rail carries a real card now, so it needs real width — and the display
   headline has to come down to match the narrower body column, or `.hero`'s
   overflow:hidden clips it. */
.hero--quote .hero__grid { align-items: center }
.hero--quote .hero__body { grid-column: 1 / 7 }
.hero--quote .hero__rail { grid-column: 7 / 13; align-self: center; padding-bottom: 0 }
.hero--quote .hero__sub { margin-bottom: var(--s6); max-width: 34ch }

@media (min-width: 901px) {
  .hero--quote .display { font-size: clamp(2.3rem, 4vw, 3.8rem) }
}

/* The base rule hides .hero__rail below 1180px because it used to hold only
   the decorative route rail. The quote card must survive that. */
@media (max-width: 1180px) {
  .hero--quote .hero__rail { display: block }
}

@media (max-width: 900px) {
  .hero--quote .hero__grid { grid-template-columns: 1fr }
  .hero--quote .hero__body,
  .hero--quote .hero__rail { grid-column: 1 / -1 }
  .hero--quote .hero__rail { margin-top: var(--s7) }
  .hq__amt { font-size: 2.2rem }
}

/* "TRANSPORT." is one unbreakable word. Below ~720px the site-wide display
   size makes its min-content width wider than the viewport, which widens the
   whole hero grid and drags the quote card out past the screen edge with it.
   Scoped to this hero so other pages' headlines are untouched. */
@media (max-width: 720px) {
  .hero--quote .display { font-size: clamp(1.9rem, 10.4vw, 3.4rem) }
}

@media (max-width: 420px) {
  .hq__body { padding: var(--s4) var(--s4) var(--s4) }
  .hq__line { padding: 9px 10px; gap: 9px }
  .hq__cta { padding: 16px var(--s4) }
}