/* ============================================================================
   VIKINGS TRANSPORT — DESIGN SYSTEM
   Scandinavian industrial / precision logistics.

   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.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 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
   "VIKINGS 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: .74rem; font-stretch: var(--w-tech); text-transform: uppercase; letter-spacing: .12em }
.field__err.on { display: block }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6) }
.hp { position: absolute; left: -9999px; opacity: 0; width: 0; height: 0 }
.form-note { margin: var(--s5) 0 0; color: var(--ink-3); font-size: .78rem; 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: .95rem }
.form-status.ok { display: block; border-left-color: #1E8E4A }
.form-status.err { display: block; border-left-color: var(--accent) }

/* --------------------------------------------------------- quote steps -- */
/* Progressive flow. Without JS every step stays visible and the form still
   submits — the stepper is an enhancement, never a dependency. */
.stepper { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--rule); border-block: 1px solid var(--rule); margin-bottom: var(--s8) }
.stepper__item { background: var(--bg); padding: var(--s4) var(--s3) var(--s5) 0; color: var(--ink-3); transition: color var(--fast) var(--ease) }
.stepper__item[data-state="done"] { color: var(--ink-2) }
.stepper__item[data-state="current"] { color: var(--ink) }
.stepper__num { display: block; color: inherit }
.stepper__label { display: block; margin-top: 6px; font-size: .62rem; letter-spacing: .16em; color: inherit }
.stepper__item[data-state="current"] .stepper__num { color: var(--accent-ink) }

.step { border: 0; padding: 0; margin: 0 0 var(--s7); min-inline-size: auto }
.step legend { padding: 0; margin-bottom: var(--s6) }
.step__hd { display: flex; align-items: baseline; gap: var(--s4); color: var(--ink) }
.step__hd span { color: var(--accent-ink) }

/* Progressive enhancement, stated the safe way round: without JS every step
   is visible and the submit button works. The stepping only exists once the
   `js` class is on <html>, so a JS failure degrades to one long form rather
   than to a form that cannot be completed or submitted. */
.stepper { display: none }
.js .stepper { display: grid }
.js .step { margin-bottom: 0 }
.js .step:not(.is-active) { display: none }
.step-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--s5); margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid var(--rule) }

/* ------------------------------------------------------------- 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 }
  .stepper__label { display: none }
  .stepper__item { padding-right: 0; text-align: center }
}
@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 }
  .row2 { grid-template-columns: 1fr; gap: 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) }
  .step-nav { flex-direction: column-reverse; align-items: stretch }
  .step-nav .btn { justify-content: space-between }
}

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