/* Traverse Freight
   Design tokens: motorway-sign blue, signal amber, map-paper white.
   One family (Archivo) used at two widths: expanded for headings, normal for text. */

:root {
  --ink: #0E1A2B;
  --ink-2: #3B4B5F;
  --paper: #F4F6F5;
  --white: #FFFFFF;
  --blue: #0B3A75;
  --blue-deep: #082C5A;
  --blue-soft: #C4D3E6;
  --on-blue-2: #C3D2E7;
  --amber: #F4B000;
  --amber-deep: #A87700;
  --line: #D5DDE3;
  --grid: #E3E8EB;
  --ok: #1E7A4C;
  --err: #B42318;

  --font: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --wide: 118%;

  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.25rem;
  --step-2: clamp(1.375rem, 1.2rem + 0.6vw, 1.625rem);
  --step-3: clamp(1.75rem, 1.4rem + 1.4vw, 2.375rem);
  --step-4: clamp(2.125rem, 1.5rem + 2.8vw, 3.375rem);
  --step-5: clamp(2.5rem, 1.5rem + 4.6vw, 5.25rem);

  --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.5rem;
  --s6: 2rem; --s7: 3rem; --s8: 4rem; --s9: 6rem; --s10: 8rem;

  --radius-s: 4px;
  --radius-m: 10px;
  --wrap: 76rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);

  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in: cubic-bezier(.55, 0, 1, .45);
  --dur-1: 150ms;
  --dur-2: 280ms;
  --dur-3: 600ms;

  --z-header: 40;
  --z-menu: 50;
  --z-skip: 100;
  --header-h: 4.5rem;
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.6;
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3, h4 {
  margin: 0;
  font-stretch: var(--wide);
  font-weight: 760;
  line-height: 1.05;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); line-height: 1.15; }
h4 { font-size: var(--step-1); line-height: 1.2; }

p { margin: 0; }
p + p { margin-top: var(--s4); }

a { color: var(--blue); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: 2px;
}

.on-blue :focus-visible { outline-color: var(--amber); }

ul[role="list"], ol[role="list"] { list-style: none; margin: 0; padding: 0; }

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

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  left: var(--s4);
  top: -100px;
  z-index: var(--z-skip);
  padding: var(--s3) var(--s4);
  background: var(--ink);
  color: var(--white);
  border-radius: var(--radius-s);
  font-weight: 600;
}
.skip-link:focus { top: var(--s4); }

.lede {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 38rem;
}

.prose { max-width: 40rem; }
.prose p, .prose li { color: var(--ink-2); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 3rem;
  padding: .7rem 1.35rem;
  border: 2px solid transparent;
  border-radius: var(--radius-s);
  font: inherit;
  font-weight: 650;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color var(--dur-1) ease, border-color var(--dur-1) ease,
              color var(--dur-1) ease, transform var(--dur-1) ease;
}
.btn:active { transform: scale(.98); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

.btn-amber { background: var(--amber); color: var(--ink); }
.btn-amber:hover { background: #FFC21F; }

.btn-blue { background: var(--blue); color: var(--white); }
.btn-blue:hover { background: var(--blue-deep); }

.btn-outline { border-color: currentColor; color: var(--ink); background: transparent; }
.btn-outline:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }

.on-blue .btn-outline { color: var(--white); }
.on-blue .btn-outline:hover { background: var(--white); color: var(--blue); border-color: var(--white); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s3); }

.btn .spinner {
  width: 1rem; height: 1rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--white);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: var(--s5);
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  color: var(--ink);
  text-decoration: none;
  font-stretch: var(--wide);
  font-weight: 780;
  font-size: 1.125rem;
  letter-spacing: -0.01em;
  margin-right: auto;
  min-height: 44px;
}
.brand svg { width: 2.25rem; height: 2.25rem; flex: none; }
.brand-sub { display: block; font-stretch: 100%; font-weight: 500; font-size: .75rem; color: var(--ink-2); letter-spacing: 0; line-height: 1.2; }
.brand-name { line-height: 1.1; }

.nav-toggle {
  display: none;
  min-height: 44px;
  padding: 0 var(--s4);
  border: 2px solid var(--ink);
  border-radius: var(--radius-s);
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-weight: 650;
  font-size: .95rem;
  cursor: pointer;
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1) var(--s2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--s3);
  color: var(--ink);
  text-decoration: none;
  font-weight: 560;
  font-size: .975rem;
  border-radius: var(--radius-s);
  position: relative;
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: var(--s3); right: var(--s3); bottom: 8px;
  height: 3px;
  background: var(--amber);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-2) var(--ease-out);
}
.site-nav a:hover::after,
.site-nav a[aria-current="page"]::after { transform: scaleX(1); }
.site-nav a[aria-current="page"] { font-weight: 700; }

.header-phone {
  display: none;
  color: var(--ink);
  font-weight: 650;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (min-width: 1180px) {
  .header-phone { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Mobile menu (only when JS is running; without JS the nav simply wraps) */
@media (max-width: 1079px) {
  .js .nav-toggle { display: inline-flex; align-items: center; }
  .js .site-nav ul {
    position: fixed;
    top: var(--header-h);
    left: 0; right: 0;
    z-index: var(--z-menu);
    display: grid;
    gap: 0;
    padding: var(--s3) var(--gutter) var(--s6);
    background: var(--white);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 24px 40px -24px rgba(14, 26, 43, .35);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out), visibility 0s linear var(--dur-2);
  }
  .js .menu-open .site-nav ul {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
  }
  .js .site-nav a { display: flex; font-size: var(--step-1); min-height: 52px; border-bottom: 1px solid var(--grid); border-radius: 0; padding: 0; }
  .js .site-nav a::after { left: 0; right: auto; width: 2.5rem; bottom: 10px; }
  .header-cta { display: none; }
  .site-nav { order: 3; }
  .js .site-nav { order: 0; }
}

@media (max-width: 1079px) {
  html:not(.js) .header-inner { flex-wrap: wrap; padding-block: var(--s3); }
  html:not(.js) .site-nav { width: 100%; }
}

/* ---------- Sections ---------- */

.section { padding-block: clamp(var(--s8), 9vw, var(--s10)); }
.section-tight { padding-block: clamp(var(--s7), 6vw, var(--s9)); }
.section-white { background: var(--white); }
.section-head { max-width: 44rem; margin-bottom: clamp(var(--s6), 5vw, var(--s8)); }
.section-head h2 + p { margin-top: var(--s4); }

/* ---------- Motorway sign surface ---------- */

.sign {
  position: relative;
  background: var(--blue);
  color: var(--white);
  border-radius: var(--radius-m);
  padding: clamp(var(--s6), 6vw, var(--s8)) clamp(var(--s5), 5vw, var(--s8));
  isolation: isolate;
}
.sign::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 2px solid rgba(255, 255, 255, .92);
  border-radius: 6px;
  pointer-events: none;
}
.sign p, .sign li { color: var(--on-blue-2); }
.sign a:not(.btn) { color: var(--white); }

/* ---------- Page header (inner pages) ---------- */

.page-head { padding-top: clamp(var(--s5), 4vw, var(--s7)); }
.page-head .sign { display: grid; gap: var(--s4); }
.page-head h1 { font-size: var(--step-5); max-width: 18ch; }
.page-head .lede { color: var(--on-blue-2); }
.page-head-route {
  width: min(22rem, 70%);
  height: 18px;
  margin-top: var(--s3);
}
.page-head-route path {
  fill: none;
  stroke: var(--amber);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 1.1s var(--ease-out) .25s forwards;
}
.page-head-route circle { fill: var(--white); stroke: var(--amber); stroke-width: 3; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  padding-block: clamp(var(--s6), 5vw, var(--s8)) clamp(var(--s7), 7vw, var(--s9));
  overflow: hidden;
}

.hero-grid {
  display: grid;
  gap: var(--s6);
  align-items: center;
}

.hero-copy h1 {
  font-size: var(--step-5);
  max-width: 11ch;
}
.hero-copy .lede { margin-top: var(--s5); }
.hero-copy .btn-row { margin-top: var(--s6); }

.hero-points {
  display: grid;
  gap: var(--s3);
  margin-top: var(--s6);
  padding: 0;
  list-style: none;
  color: var(--ink-2);
  font-size: 1rem;
}
.hero-points li { display: flex; gap: var(--s3); align-items: flex-start; }
.hero-points svg { flex: none; width: 1.25rem; height: 1.25rem; margin-top: .2rem; color: var(--blue); }

.hero-map { position: relative; }

@media (min-width: 960px) {
  .hero-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s7); }
}

/* Load-in sequence: headline lines rise once, then the map draws. */
.js .hero-copy [data-intro] {
  opacity: 0;
  transform: translateY(18px);
  animation: rise .8s var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * 90ms + 80ms);
}
@keyframes rise { to { opacity: 1; transform: none; } }

/* ---------- Network map ---------- */

.net-frame {
  position: relative;
  aspect-ratio: 420 / 510;
  width: 100%;
  max-width: 34rem;
  margin-inline: auto;
}
.net-frame > svg { width: 100%; height: 100%; overflow: visible; }

.net-grid line { stroke: var(--grid); stroke-width: 1; }

.net-route {
  fill: none;
  stroke: var(--blue);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.net-sea {
  fill: none;
  stroke: var(--blue);
  stroke-width: 2.5;
  stroke-dasharray: 3 6;
  stroke-linecap: round;
  opacity: 0;
}
.net-active {
  fill: none;
  stroke: var(--amber);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.net-node circle { fill: var(--white); stroke: var(--blue); stroke-width: 2.5; }
.net-node text, .net-hub text {
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 620;
  fill: var(--ink);
  paint-order: stroke;
  stroke: var(--paper);
  stroke-width: 4px;
  stroke-linejoin: round;
}
.net-hub text { font-weight: 800; font-size: 14px; font-stretch: var(--wide); }
.net-node, .net-shield { opacity: 0; }
.net-node { transform-box: fill-box; transform-origin: center; }

.net-hub-dot { fill: var(--amber); stroke: var(--ink); stroke-width: 2.5; }
.net-hub-pulse {
  fill: none;
  stroke: var(--amber);
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
}

.net-shield rect { fill: var(--blue); stroke: var(--white); stroke-width: 1.5; }
.net-shield text { font-family: var(--font); font-size: 9px; font-weight: 700; fill: var(--white); }

.net-courier { opacity: 0; }
.net-courier circle { fill: var(--amber); stroke: var(--ink); stroke-width: 2.5; }

.is-drawn .net-route {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset var(--d, 1.2s) var(--ease-out) var(--delay, 0s);
}
.is-drawn .net-node,
.is-drawn .net-shield {
  opacity: 1;
  transition: opacity .4s ease var(--delay, 0s);
}
.is-drawn .net-sea { opacity: .7; transition: opacity .6s ease 1.4s; }

@media (prefers-reduced-motion: no-preference) {
  .is-drawn .net-hub-pulse { animation: pulse 2.8s var(--ease-out) 1.6s infinite; }
}
@keyframes pulse {
  0% { opacity: .9; transform: scale(1); }
  70%, 100% { opacity: 0; transform: scale(3.2); }
}

/* Dim other routes while one is highlighted */
.net-frame.is-focused .net-route { stroke: var(--blue-soft); transition: stroke var(--dur-2) ease; }
.net-node.is-selected circle { fill: var(--amber); stroke: var(--ink); }

/* Interactive nodes on the coverage map */
.net-node[role="button"] { cursor: pointer; }
.net-node[role="button"]:focus { outline: none; }
.net-node[role="button"]:focus-visible circle { stroke: var(--ink); stroke-width: 4; }
.net-node .net-hit { fill: transparent; stroke: none; }

/* Example job ticket */
.ticket {
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 6px solid var(--amber);
  border-radius: var(--radius-s);
  padding: var(--s4) var(--s5);
  box-shadow: 0 18px 36px -22px rgba(14, 26, 43, .45);
  font-size: .9rem;
  font-variant-numeric: tabular-nums;
  width: 100%;
  max-width: 21rem;
  margin: var(--s4) auto 0;
}
.ticket-top { display: flex; justify-content: space-between; gap: var(--s3); color: var(--ink-2); font-size: .8125rem; }
.ticket-route { display: grid; grid-template-columns: auto 1fr; gap: 2px var(--s4); margin: var(--s3) 0; }
.ticket-route dt { color: var(--ink-2); }
.ticket-route dd { margin: 0; font-weight: 700; }
.ticket-status {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding-top: var(--s3);
  border-top: 1px dashed var(--line);
  font-weight: 600;
  min-height: 2.6em;
}
.ticket-status .dot {
  flex: none;
  width: .6rem; height: .6rem;
  border-radius: 50%;
  background: var(--amber);
}
.ticket-status[data-state="delivered"] .dot { background: var(--ok); }
.ticket-fade { transition: opacity var(--dur-2) ease; }
.ticket-fade.is-swapping { opacity: 0; }

.hero-map .net-frame { max-width: 27rem; }
.hero-map .ticket { max-width: 27rem; margin-top: var(--s2); }

/* ---------- Trust strip ---------- */

.strip { border-block: 1px solid var(--line); background: var(--white); }
.strip ul {
  display: grid;
  gap: var(--s5);
  padding-block: var(--s6);
  margin: 0;
  list-style: none;
}
.strip li { display: grid; grid-template-columns: auto 1fr; gap: var(--s3); align-items: start; }
.strip svg { width: 1.75rem; height: 1.75rem; color: var(--blue); }
.strip strong { display: block; font-stretch: var(--wide); font-weight: 720; }
.strip span { color: var(--ink-2); font-size: .95rem; }
@media (min-width: 760px) { .strip ul { grid-template-columns: repeat(3, 1fr); gap: var(--s6); } }

/* ---------- Fleet selector ---------- */

.fleet { display: grid; gap: var(--s5); }

.fleet-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}
.fleet-tab {
  flex: none;
  min-height: 44px;
  padding: .55rem 1rem;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--dur-1) ease, background-color var(--dur-1) ease, color var(--dur-1) ease;
}
.fleet-tab:hover { border-color: var(--ink); }
.fleet-tab[aria-selected="true"] { background: var(--ink); color: var(--white); border-color: var(--ink); }

.fleet-panel {
  display: grid;
  gap: var(--s5);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: clamp(var(--s4), 3vw, var(--s6));
}
.fleet-figure { margin: 0; aspect-ratio: 640 / 245; }
.fleet-figure svg { width: 100%; height: 100%; overflow: visible; }

.fleet-v { opacity: 0; transform: translateX(-28px); transition: opacity var(--dur-2) ease, transform .5s var(--ease-out); }
.fleet-v.is-current { opacity: 1; transform: none; }

.v-ground { stroke: var(--line); stroke-width: 2; }
.v-body { fill: var(--white); stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; }
.v-glass { fill: var(--blue-soft); stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; }
.v-detail { fill: var(--ink); }
.v-tyre { fill: var(--ink); }
.v-hub { fill: #A9B4C1; }
.v-load { fill: rgba(244, 176, 0, .22); stroke: var(--amber-deep); stroke-width: 1.5; stroke-dasharray: 6 4; }
.v-dim path { fill: none; stroke: var(--ink-2); stroke-width: 1.5; }
.v-dim text { font-family: var(--font); font-size: 15px; font-weight: 600; fill: var(--ink-2); text-anchor: middle; }

.fleet-specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s4) var(--s5);
  margin: 0;
}
.fleet-specs div { border-top: 2px solid var(--ink); padding-top: var(--s2); }
.fleet-specs dt { font-size: .875rem; color: var(--ink-2); }
.fleet-specs dd { margin: 0; font-weight: 720; font-stretch: var(--wide); font-size: var(--step-1); font-variant-numeric: tabular-nums; }
.fleet-note { font-size: .9rem; color: var(--ink-2); }
.fleet-name { font-size: var(--step-2); }
.fleet-use { color: var(--ink-2); margin-top: var(--s2); }

@media (min-width: 860px) {
  .fleet-panel { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: center; gap: var(--s7); }
  .fleet-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Journey (sequenced steps with a route line) ---------- */

.journey { position: relative; }
.journey-list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(var(--s6), 5vw, var(--s8)); }

.journey-step {
  position: relative;
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: var(--s4);
}
.journey-num {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--white);
  border: 3px solid var(--blue-soft);
  font-weight: 800;
  font-stretch: var(--wide);
  color: var(--ink-2);
  transition: border-color var(--dur-2) ease, background-color var(--dur-2) ease, color var(--dur-2) ease;
}
.journey-step.is-reached .journey-num { border-color: var(--blue); background: var(--blue); color: var(--white); }
.journey-step h3 { margin-top: .55rem; }
.journey-step p { margin-top: var(--s2); color: var(--ink-2); max-width: 36rem; }

.journey-track {
  position: absolute;
  left: calc(1.5rem - 2px);
  top: 1.5rem;
  bottom: 1.5rem;
  width: 4px;
  background: var(--blue-soft);
  border-radius: 2px;
  z-index: 1;
}
.journey-fill {
  position: absolute;
  inset: 0;
  background: var(--blue);
  border-radius: 2px;
  transform-origin: top;
  transform: scaleY(0);
}
.journey-van {
  position: absolute;
  left: 50%;
  top: 0;
  width: 1.4rem;
  height: 1.4rem;
  margin-top: -.7rem;
  border-radius: 50%;
  background: var(--amber);
  border: 3px solid var(--ink);
  transform: translate(-50%, 0);
  z-index: 3;
}
html:not(.js) .journey-fill { transform: none; }
html:not(.js) .journey-van { display: none; }

@media (min-width: 860px) {
  .journey-step { grid-template-columns: 3rem minmax(0, 1fr) minmax(0, 1fr); gap: var(--s6); }
  .journey-step .journey-aside { color: var(--ink-2); font-size: .95rem; padding-top: .7rem; }
}
.journey-aside { grid-column: 2; }
@media (min-width: 860px) { .journey-aside { grid-column: 3; } }

/* ---------- Promise panel ---------- */

.promises { display: grid; gap: var(--s6); margin-top: var(--s7); }
.promise h3 { color: var(--white); font-size: var(--step-1); }
.promise p { margin-top: var(--s2); }
.promise { border-top: 2px solid rgba(255, 255, 255, .35); padding-top: var(--s4); }
@media (min-width: 760px) { .promises { grid-template-columns: repeat(2, 1fr); gap: var(--s7) var(--s8); } }

/* ---------- Sector list ---------- */

.sectors { display: grid; gap: 0; border-top: 1px solid var(--line); }
.sector {
  display: grid;
  gap: var(--s2);
  padding-block: var(--s5);
  border-bottom: 1px solid var(--line);
}
.sector h3 { font-size: var(--step-1); }
.sector p { color: var(--ink-2); }
@media (min-width: 760px) {
  .sector { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--s6); align-items: baseline; }
}

/* ---------- Services list ---------- */

.service {
  display: grid;
  gap: var(--s5);
  padding-block: clamp(var(--s6), 5vw, var(--s8));
  border-top: 1px solid var(--line);
}
.service:first-child { border-top: 0; padding-top: 0; }
.service-title h2 { font-size: var(--step-3); }
.service-title p { margin-top: var(--s3); color: var(--ink-2); }
.service-detail ul { margin: 0; padding-left: 1.1rem; color: var(--ink-2); }
.service-detail li + li { margin-top: var(--s2); }
.service-detail h3 { font-size: 1rem; font-stretch: 100%; font-weight: 700; margin-bottom: var(--s2); }
.service-detail .btn { margin-top: var(--s5); }
@media (min-width: 860px) {
  .service { grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); gap: var(--s8); }
}

/* ---------- Data table ---------- */

.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--white); }
.table-scroll:focus-visible { outline-offset: 2px; }
table { border-collapse: collapse; width: 100%; min-width: 40rem; font-variant-numeric: tabular-nums; }
caption { text-align: left; padding: var(--s4) var(--s5); font-weight: 700; }
th, td { text-align: left; padding: var(--s3) var(--s5); border-top: 1px solid var(--line); vertical-align: top; }
thead th { font-size: .875rem; color: var(--ink-2); font-weight: 600; background: var(--paper); }

/* ---------- FAQ ---------- */

.faq { border-top: 1px solid var(--line); max-width: 52rem; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s4);
  min-height: 3.5rem;
  padding-block: var(--s4);
  cursor: pointer;
  font-weight: 650;
  font-size: var(--step-1);
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: .75rem; height: .75rem;
  border-right: 2.5px solid var(--ink);
  border-bottom: 2.5px solid var(--ink);
  transform: rotate(45deg) translateY(-3px);
  transition: transform var(--dur-2) var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.faq .faq-body { padding-bottom: var(--s5); color: var(--ink-2); max-width: 42rem; }

/* ---------- Coverage ---------- */

.coverage { display: grid; gap: var(--s6); align-items: start; }
.coverage .net-frame { max-width: 38rem; }
.coverage-panel {
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 6px solid var(--amber);
  border-radius: var(--radius-s);
  padding: var(--s5);
}
.coverage-panel h2 { font-size: var(--step-3); }
.coverage-panel dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); margin: var(--s5) 0; }
.coverage-panel dt { font-size: .875rem; color: var(--ink-2); }
.coverage-panel dd { margin: 0; font-weight: 720; font-stretch: var(--wide); font-size: var(--step-2); font-variant-numeric: tabular-nums; }
.coverage-panel .note { color: var(--ink-2); font-size: .95rem; }
.coverage-panel .btn { margin-top: var(--s5); }

.city-list { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s5); padding: 0; list-style: none; }
.city-btn {
  min-height: 44px;
  padding: .45rem .9rem;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--dur-1) ease, background-color var(--dur-1) ease;
}
.city-btn:hover { border-color: var(--ink); }
.city-btn[aria-pressed="true"] { background: var(--amber); border-color: var(--amber); }

@media (min-width: 960px) {
  .coverage { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s8); }
  .coverage-side { position: sticky; top: calc(var(--header-h) + var(--s5)); }
}

.regions { display: grid; gap: var(--s5); }
.regions h3 { font-size: var(--step-1); }
.regions p { color: var(--ink-2); margin-top: var(--s2); }
@media (min-width: 760px) { .regions { grid-template-columns: repeat(3, 1fr); gap: var(--s6); } }

/* ---------- Two-column split ---------- */

.split { display: grid; gap: var(--s6); }
@media (min-width: 900px) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s8); } }

.checklist { list-style: none; padding: 0; margin: var(--s4) 0 0; display: grid; gap: var(--s3); }
.checklist li { display: grid; grid-template-columns: 1.5rem 1fr; gap: var(--s3); color: var(--ink-2); }
.checklist svg { width: 1.25rem; height: 1.25rem; margin-top: .2rem; color: var(--ok); }
.sign .checklist li { color: var(--on-blue-2); }
.sign .checklist svg { color: var(--amber); }

/* ---------- CTA band ---------- */

.cta .sign { display: grid; gap: var(--s5); }
.cta h2 { max-width: 18ch; }
.cta p { max-width: 36rem; }
@media (min-width: 900px) {
  .cta .sign { grid-template-columns: minmax(0, 3fr) auto; align-items: end; gap: var(--s7); }
}

/* ---------- Forms ---------- */

.form-layout { display: grid; gap: var(--s7); align-items: start; }
@media (min-width: 1000px) {
  .form-layout { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--s8); }
  .form-aside { position: sticky; top: calc(var(--header-h) + var(--s5)); }
}

.form { display: grid; gap: var(--s6); }
.form fieldset {
  margin: 0;
  padding: var(--s5) clamp(var(--s4), 3vw, var(--s6)) var(--s6);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--white);
  min-width: 0;
}
.form legend {
  padding: 0 var(--s2);
  margin-left: calc(var(--s2) * -1);
  font-stretch: var(--wide);
  font-weight: 760;
  font-size: var(--step-1);
}
.fields { display: grid; gap: var(--s5); margin-top: var(--s3); }
@media (min-width: 640px) {
  .fields-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field-full { grid-column: 1 / -1; }
}

.field { display: grid; gap: var(--s2); align-content: start; }
.field label, .field .label { font-weight: 620; font-size: .975rem; }
.req { color: var(--err); font-weight: 700; }
.hint { font-size: .875rem; color: var(--ink-2); }

.input,
.field select,
.field textarea {
  width: 100%;
  min-height: 3rem;
  padding: .7rem .85rem;
  border: 2px solid #8C99A8;
  border-radius: var(--radius-s);
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  transition: border-color var(--dur-1) ease, box-shadow var(--dur-1) ease;
}
.field textarea { min-height: 7.5rem; resize: vertical; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%230E1A2B' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .9rem center;
  padding-right: 2.5rem;
}
.input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink); }
.input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(11, 58, 117, .25); }
.field.has-error .input,
.field.has-error select,
.field.has-error textarea { border-color: var(--err); }
.field-error { display: none; color: var(--err); font-size: .9rem; font-weight: 600; }
.field.has-error .field-error { display: flex; gap: var(--s2); }
.field-error::before { content: "!"; display: inline-grid; place-items: center; flex: none; width: 1.1rem; height: 1.1rem; margin-top: .15rem; border-radius: 50%; background: var(--err); color: var(--white); font-size: .75rem; font-weight: 800; }

.choices { display: grid; gap: var(--s2); margin-top: var(--s1); }
.choice { display: flex; align-items: center; gap: var(--s3); min-height: 44px; cursor: pointer; font-weight: 500; }
.choice input { width: 1.25rem; height: 1.25rem; accent-color: var(--blue); margin: 0; flex: none; }
.choices-inline { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); }

.error-summary {
  border: 3px solid var(--err);
  border-radius: var(--radius-s);
  background: #FDF1F0;
  padding: var(--s4) var(--s5);
}
.error-summary h2 { font-size: var(--step-1); color: var(--err); }
.error-summary ul { margin: var(--s2) 0 0; padding-left: 1.1rem; }
.error-summary a { color: var(--err); font-weight: 600; }
.error-summary:focus-visible { outline-color: var(--err); }

.form-submit { display: grid; gap: var(--s3); justify-items: start; }
.form-note { font-size: .875rem; color: var(--ink-2); max-width: 36rem; }
.form-fail { color: var(--err); font-weight: 600; }

.form-success {
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 6px solid var(--ok);
  border-radius: var(--radius-s);
  padding: var(--s6);
}
.form-success h2 { font-size: var(--step-3); }
.form-success p { margin-top: var(--s3); color: var(--ink-2); }
.form-success svg { width: 3rem; height: 3rem; margin-bottom: var(--s4); }
.form-success .tick { fill: none; stroke: var(--ok); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw .6s var(--ease-out) .15s forwards; }
.form-success .ring { fill: none; stroke: var(--ok); stroke-width: 3; }

.contact-card { display: grid; gap: var(--s5); }
.contact-card h2 { font-size: var(--step-2); }
.contact-line { display: grid; gap: 2px; }
.contact-line span { font-size: .875rem; color: var(--on-blue-2); }
.contact-line a { font-weight: 700; font-size: var(--step-1); font-variant-numeric: tabular-nums; text-decoration: none; }
.contact-line a:hover { text-decoration: underline; }

/* ---------- Footer ---------- */

.site-footer {
  background: var(--ink);
  color: #C9D2DC;
  padding-block: var(--s8) var(--s6);
  margin-top: 0;
}
.site-footer a { color: var(--white); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer :focus-visible { outline-color: var(--amber); }
.footer-grid { display: grid; gap: var(--s6); }
.footer-brand .brand { color: var(--white); }
.footer-brand .brand-sub { color: #C9D2DC; }
.footer-brand p { margin-top: var(--s4); max-width: 22rem; }
.footer-col h2 { font-size: 1rem; font-stretch: 100%; font-weight: 700; color: var(--white); margin-bottom: var(--s3); letter-spacing: 0; }
.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s1); }
.footer-col li a { display: inline-flex; min-height: 36px; align-items: center; }
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s3);
  margin-top: var(--s7);
  padding-top: var(--s5);
  border-top: 1px solid rgba(255, 255, 255, .15);
  font-size: .875rem;
}
@media (min-width: 760px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1.3fr; gap: var(--s7); } }

/* ---------- Scroll reveal (used sparingly) ---------- */

@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
  .js .hero-copy [data-intro] { opacity: 1; transform: none; }
}

/* ---------- Print ---------- */

@media print {
  .site-header, .site-footer, .hero-map, .btn { display: none !important; }
  body { background: #fff; }
}

/* ---------- Additions ---------- */

.hero-copy h1 .line { display: block; }
.nav-quote { display: none; }
@media (max-width: 1079px) { .js .nav-quote { display: block; } }
.fleet-info { display: grid; gap: var(--s5); }
.sign .lede { color: var(--on-blue-2); }
.sign h2 + .lede { margin-top: var(--s4); }
.sign .checklist { margin-top: var(--s5); }
.split h2 + .checklist { margin-top: var(--s5); }
.contact-line a, .contact-line p { overflow-wrap: anywhere; color: var(--white); }
.section-foot { margin-top: var(--s6); font-weight: 600; }
@media (max-width: 599px) {
  .v-dim text { font-size: 26px; }
  .fleet-tab { padding: .5rem .85rem; font-size: .9rem; }
}

/* ---------- Feature cards: dashed grid with a faint grid-pattern wash ---------- */

.features {
  --dash: #B3BFCA;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-top: 1px dashed var(--dash);
  border-left: 1px dashed var(--dash);
}
@media (min-width: 600px) { .features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .features { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.feature {
  position: relative;
  overflow: hidden;
  padding: var(--s5) var(--s5) var(--s6);
  border-right: 1px dashed var(--dash);
  border-bottom: 1px dashed var(--dash);
  isolation: isolate;
  transition: background-color var(--dur-2) ease;
}
.feature:hover { background: var(--white); }
.feature:has(a:focus-visible) { outline: 3px solid var(--blue); outline-offset: -3px; }

.feature-pattern {
  pointer-events: none;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 50%;
  width: 100%;
  height: 100%;
  margin-top: -.5rem;
  margin-left: -5rem;
  -webkit-mask-image: linear-gradient(#fff, transparent);
  mask-image: linear-gradient(#fff, transparent);
}
.feature-pattern-wash {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(11, 58, 117, .06), rgba(11, 58, 117, .015));
  -webkit-mask-image: radial-gradient(farthest-side at top, #fff, transparent);
  mask-image: radial-gradient(farthest-side at top, #fff, transparent);
}
.feature-grid-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: rgba(11, 58, 117, .07);
  stroke: rgba(11, 58, 117, .22);
}
.feature-squares { overflow: visible; }

.feature .feature-icon {
  width: 1.75rem;
  height: 1.75rem;
  color: rgba(14, 26, 43, .78);
  transition: color var(--dur-2) ease;
}
.feature:hover .feature-icon { color: var(--blue); }

.feature h3 { margin-top: var(--s7); font-size: var(--step-1); }
.feature h3 a { color: var(--ink); text-decoration: none; }
.feature h3 a:focus-visible { outline: none; }
.feature h3 a::after { content: ""; position: absolute; inset: 0; }
.feature p { margin-top: var(--s2); color: var(--ink-2); font-size: .975rem; max-width: 30ch; }

@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal="blur"] {
    opacity: 0;
    transform: translateY(-8px);
    filter: blur(4px);
    transition: opacity .8s ease, transform .8s ease, filter .8s ease;
    transition-delay: var(--reveal-delay, .1s);
  }
  .js [data-reveal="blur"].is-in { opacity: 1; transform: none; filter: none; }
}

/* ---------- Quote form: titled sections, quiet inputs ---------- */

.head-contact { display: grid; gap: var(--s3); margin-top: var(--s4); }
.head-contact p { font-weight: 600; color: var(--white); }

.qform {
  --q-border: #C5CFD8;
  --q-ring: rgba(11, 58, 117, .2);
  max-width: 68rem;
}
.qform .form { gap: 0; }
.qform .form > .hint { margin-bottom: var(--s5); }
.qform .error-summary { margin-bottom: var(--s6); }

.qsec { display: grid; gap: var(--s5) var(--s8); }
@media (min-width: 900px) { .qsec { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } }
.qsec-intro h2 { font-size: var(--step-1); line-height: 1.25; }
.qsec-intro p { margin-top: var(--s1); color: var(--ink-2); font-size: .95rem; max-width: 28ch; }

.qsec-fields {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--s5) var(--s4);
  max-width: 48rem;
}
.qsec-fields > .field { grid-column: 1 / -1; }
@media (min-width: 640px) { .qsec-fields > .field.half { grid-column: span 3; } }

.qsep { border: 0; height: 1px; background: var(--line); margin: var(--s7) 0; }

.qform .field { gap: var(--s2); }
.qform .field label,
.qform .field .label { font-size: .9375rem; font-weight: 600; line-height: 1.3; }
.qform .field .hint { order: 3; font-size: .8125rem; }
.qform .field .field-error { order: 4; }

.qform .input,
.qform .field select,
.qform .field textarea {
  min-height: 2.75rem;
  padding: .55rem .8rem;
  border: 1px solid var(--q-border);
  border-radius: 6px;
  background-color: var(--white);
  box-shadow: 0 1px 2px rgba(14, 26, 43, .05);
  font-size: 1rem;
  transition: border-color var(--dur-1) ease, box-shadow var(--dur-1) ease;
}
.qform .field textarea { min-height: 6.5rem; }
.qform .input::placeholder,
.qform .field textarea::placeholder { color: #8391A0; }
.qform .input:hover,
.qform .field select:hover,
.qform .field textarea:hover { border-color: #97A6B4; }
.qform .input:focus,
.qform .field select:focus,
.qform .field textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--q-ring); }
.qform .field.has-error .input,
.qform .field.has-error select,
.qform .field.has-error textarea { border-color: var(--err); box-shadow: 0 0 0 3px rgba(180, 35, 24, .15); }
.qform .field select { background-position: right .8rem center; }

/* Radios and checkboxes */
.qform .choices-inline { gap: var(--s2) var(--s6); }
.qform .choice { font-size: .9375rem; font-weight: 500; }
.qform .choice input {
  appearance: none;
  -webkit-appearance: none;
  display: grid;
  place-items: center;
  width: 1.125rem;
  height: 1.125rem;
  margin: 0;
  border: 1px solid var(--ink);
  background: var(--white);
  cursor: pointer;
  transition: background-color var(--dur-1) ease, border-color var(--dur-1) ease;
}
.qform .choice input[type="radio"] { border-radius: 50%; }
.qform .choice input[type="radio"]::after {
  content: "";
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: var(--ink);
  transform: scale(0);
  transition: transform var(--dur-1) var(--ease-out);
}
.qform .choice input[type="radio"]:checked::after { transform: scale(1); }
.qform .choice input[type="checkbox"] { border-radius: 4px; }
.qform .choice input[type="checkbox"]::after {
  content: "";
  width: .3rem;
  height: .6rem;
  margin-top: -2px;
  border: solid var(--white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform var(--dur-1) var(--ease-out);
}
.qform .choice input[type="checkbox"]:checked { background: var(--ink); }
.qform .choice input[type="checkbox"]:checked::after { transform: rotate(45deg) scale(1); }
.qform .choice input:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--q-ring); border-color: var(--blue); }

/* Actions row */
.qactions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s4) var(--s6); }
.qactions .form-note { flex: 1 1 22rem; }
.qactions .form-fail { flex-basis: 100%; order: -1; }
.qbuttons { display: flex; flex-wrap: wrap; gap: var(--s3); margin-left: auto; }

.btn-sc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 2.75rem;
  padding: 0 1.15rem;
  border: 1px solid transparent;
  border-radius: 6px;
  font: inherit;
  font-size: .9375rem;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  box-shadow: 0 1px 2px rgba(14, 26, 43, .05);
  transition: background-color var(--dur-1) ease, border-color var(--dur-1) ease, transform var(--dur-1) ease;
}
.btn-sc:active { transform: scale(.98); }
.btn-sc:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--q-ring, rgba(11, 58, 117, .2)); }
.btn-sc[disabled] { opacity: .5; cursor: not-allowed; }
.btn-sc-primary { background: var(--ink); color: var(--white); }
.btn-sc-primary:hover { background: #22324A; }
.btn-sc-outline { background: var(--white); color: var(--ink); border-color: var(--q-border, var(--line)); }
.btn-sc-outline:hover { background: var(--paper); }
.btn-sc .spinner { width: 1rem; height: 1rem; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }

@media (max-width: 479px) {
  .qbuttons { width: 100%; }
  .qbuttons .btn-sc { flex: 1; }
}

/* =========================================================
   Finish layer: texture, depth and hand-made interactions
   ========================================================= */

:root {
  /* Fine print-like grain, tiled. Ink-tinted so it never reads as grey dirt. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .05 0 0 0 0 .1 0 0 0 0 .17 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --press: cubic-bezier(.3, 1.4, .5, 1);
}

/* ---------- Backgrounds ---------- */

body { background: var(--grain), var(--paper); }

/* White sections become "sign-face white": a soft top-lit tone with the same grain,
   and a hairline highlight where they meet the paper. */
.section-white,
.strip {
  position: relative;
  background:
    var(--grain),
    linear-gradient(180deg, #FFFFFF 0%, #FBFCFC 70%, #F7F9F9 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 -1px 0 var(--line);
}

/* A faint corner of a map sheet behind the van section */
.section-sheet { isolation: isolate; overflow: hidden; }
.section-sheet::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 48px 48px;
  background-position: right -1px top -1px;
  -webkit-mask-image: radial-gradient(70% 90% at 100% 0%, #000 0%, transparent 70%);
  mask-image: radial-gradient(70% 90% at 100% 0%, #000 0%, transparent 70%);
}
.sheet-ref {
  position: absolute;
  top: var(--s5);
  right: var(--gutter);
  font-size: .75rem;
  font-weight: 600;
  color: #8291A1;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}

/* Signs: lit from above like retroreflective sheeting, with real depth */
.sign {
  background:
    var(--grain),
    radial-gradient(120% 90% at 15% 0%, #164C93 0%, var(--blue) 48%, #08306A 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    0 1px 2px rgba(8, 44, 90, .25),
    0 32px 64px -36px rgba(8, 44, 90, .6);
}

.site-footer {
  background:
    var(--grain),
    radial-gradient(90% 120% at 50% 0%, #15243A 0%, var(--ink) 60%);
  border-top: 3px solid var(--amber);
}

/* Fleet panel sits on a loading-bay floor with a soft shadow under the van */
.fleet-panel {
  background: linear-gradient(180deg, #FFFFFF, #FAFBFC);
  box-shadow: 0 1px 2px rgba(14, 26, 43, .04), 0 24px 48px -32px rgba(14, 26, 43, .28);
}
.v-shadow { fill: rgba(14, 26, 43, .12); filter: blur(4px); }

/* ---------- Route progress along the header ---------- */

.route-progress {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  pointer-events: none;
}
.route-progress span {
  position: absolute;
  inset: 0;
  background: var(--amber);
  transform-origin: left;
  transform: scaleX(0);
}
.route-progress i {
  position: absolute;
  top: 50%;
  left: 0;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 2px var(--white);
}

/* ---------- Buttons: tactile, with a press you can feel ---------- */

.btn {
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 -2px 0 rgba(14, 26, 43, .14), 0 1px 2px rgba(14, 26, 43, .08);
  transition: background-color var(--dur-1) ease, border-color var(--dur-1) ease, color var(--dur-1) ease,
              transform var(--dur-2) var(--press), box-shadow var(--dur-2) ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: inset 0 -2px 0 rgba(14, 26, 43, .14), 0 8px 18px -10px rgba(14, 26, 43, .45); }
.btn:active { transform: translateY(1px); box-shadow: inset 0 1px 2px rgba(14, 26, 43, .2); transition-duration: 60ms; }
.btn-outline { box-shadow: none; }
.btn-outline:hover { box-shadow: 0 8px 18px -10px rgba(14, 26, 43, .45); }
.btn-outline:active { box-shadow: none; }

/* Amber buttons catch the light once, like an indicator lens */
.btn-amber::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-18deg) translateX(0);
  opacity: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .btn-amber:hover::after { animation: glint .7s var(--ease-out); }
}
@keyframes glint {
  0% { opacity: 1; transform: skewX(-18deg) translateX(0); }
  100% { opacity: 1; transform: skewX(-18deg) translateX(420%); }
}

/* ---------- Nav underline: draws in from the left, leaves to the right ---------- */

.site-nav a::after { transform-origin: right; transition: transform .35s var(--ease-out); }
.site-nav a:hover::after { transform-origin: left; }
.site-nav a[aria-current="page"]::after { transform-origin: left; }

/* Phone icon gives a small ring on hover */
.header-phone { gap: var(--s2); }
.phone-icon { width: 1rem; height: 1rem; color: var(--blue); transform-origin: 50% 60%; }
@media (prefers-reduced-motion: no-preference) {
  .header-phone:hover .phone-icon { animation: ring .6s ease-in-out; }
}
@keyframes ring {
  0%, 100% { transform: rotate(0); }
  15%, 45% { transform: rotate(-14deg); }
  30%, 60% { transform: rotate(12deg); }
  75% { transform: rotate(-4deg); }
}

/* ---------- Feature cards: icon redraws, map squares warm up ---------- */

.feature-icon [pathLength] { stroke-dasharray: 1; }
.feature-grid-svg { transition: fill .5s ease, stroke .5s ease; }
.feature:hover .feature-grid-svg { fill: rgba(244, 176, 0, .2); }
@media (prefers-reduced-motion: no-preference) {
  .feature:hover .feature-icon [pathLength] { animation: redraw .8s var(--ease-out); }
}
@keyframes redraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* ---------- Promise rules fill amber, sector rows nudge forward ---------- */

.promise { position: relative; }
.promise::before {
  content: "";
  position: absolute;
  top: -2px; left: 0; right: 0;
  height: 2px;
  background: var(--amber);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .6s var(--ease-out);
}
.promise:hover::before { transform: scaleX(1); }

.sector h3 { position: relative; transition: transform .35s var(--ease-out); }
.sector h3::before {
  content: "";
  position: absolute;
  left: -1.1rem;
  top: .45em;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--amber);
  opacity: 0;
  transform: scale(.4);
  transition: opacity .3s ease, transform .35s var(--press);
}
.sector:hover h3 { transform: translateX(1.1rem); }
.sector:hover h3::before { opacity: 1; transform: scale(1); }

/* ---------- Vans roll in: wheels turn as the body arrives ---------- */

.v-wheel { transform-box: fill-box; transform-origin: center; }
.v-spoke { stroke: #6E7D8D; stroke-width: 2; stroke-linecap: round; }
.fleet-v { transform: translateX(-56px); transition: opacity .3s ease, transform .75s var(--ease-out); }
@media (prefers-reduced-motion: no-preference) {
  .fleet-v.is-arriving .v-wheel { animation: roll .75s var(--ease-out); }
  .fleet-v.is-arriving .v-bob { animation: bob .75s var(--ease-out); }
}
@keyframes roll { from { transform: rotate(-300deg); } to { transform: rotate(0); } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 70% { transform: translateY(1.5px); } 85% { transform: translateY(-.5px); } }

/* ---------- Form: labels light up, postcodes confirm themselves ---------- */

.qform .field label { transition: color var(--dur-1) ease; }
.qform .field:focus-within > label { color: var(--blue); }
.field.is-valid .input {
  padding-right: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%231E7A4C' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .8rem center;
}

/* ---------- City pills and van tabs press in ---------- */

.fleet-tab, .city-btn { transition: border-color var(--dur-1) ease, background-color var(--dur-1) ease, color var(--dur-1) ease, transform var(--dur-2) var(--press); }
.fleet-tab:active, .city-btn:active { transform: scale(.96); }

/* =========================================================
   Type pairing: Archivo Expanded for display and interface,
   Source Serif 4 for reading text and ledes.
   ========================================================= */

:root { --serif: "Source Serif 4", "Iowan Old Style", Georgia, serif; }

body {
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.65;
  font-optical-sizing: auto;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}

/* Ledes: a larger optical size, set a touch lighter and looser */
.lede {
  font-size: clamp(1.1875rem, 1.1rem + .35vw, 1.375rem);
  line-height: 1.5;
  letter-spacing: -0.003em;
}

/* Headings, and everything you operate, scan or read as data, stay in Archivo */
h1, h2, h3, h4,
.site-header, .site-nav, .brand, .skip-link,
.btn, .btn-sc, button, input, select, textarea,
label, .label, legend, .hint, .form-note, .form-fail, .field-error, .error-summary, .choice,
.ticket, .fleet-specs, .fleet-tab, .city-btn, .sheet-ref,
.coverage-panel dl, .coverage-panel .hint,
table, .faq summary, .journey-num,
.strip strong, .section-foot,
.footer-col, .footer-legal, .contact-line span,
.net-frame, .fleet-figure {
  font-family: var(--font);
}

/* Small serif text needs a little more size and air than the sans did */
.feature p, .sector p, .regions p, .journey-step p, .service-title p,
.service-detail li, .checklist li, .promise p, .strip span, .faq .faq-body {
  font-size: 1.0625rem;
  line-height: 1.6;
}
.qsec-intro p { font-size: 1rem; line-height: 1.55; }
.fleet-note { font-size: .95rem; }
.footer-brand p { font-size: 1.0625rem; }

/* Phone and reading refinements for the serif */
.strip span { display: block; line-height: 1.5; margin-top: 2px; }
.faq summary { line-height: 1.3; }
.feature p { max-width: 34ch; }
.checklist li { line-height: 1.5; }
@media (max-width: 599px) {
  body { font-size: 1.0625rem; }
  .feature p, .sector p, .regions p, .journey-step p, .service-title p,
  .service-detail li, .checklist li, .promise p, .strip span, .faq .faq-body { font-size: 1.03125rem; }
}

/* Form controls and pills use `font: inherit`, so pin them to Archivo explicitly */
.input, .field select, .field textarea,
.qform .input, .qform .field select, .qform .field textarea,
.fleet-tab, .city-btn, .nav-toggle, .btn, .btn-sc {
  font-family: var(--font);
}

/* ---------- Reviews: each one reads as a signed proof-of-delivery slip ---------- */

.review-grid { display: grid; gap: var(--s5); }
@media (min-width: 760px) { .review-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .review-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.review {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: var(--s5) var(--s5) var(--s4);
  background: linear-gradient(180deg, #FFFFFF, #FBFCFC);
  border: 1px solid var(--line);
  border-top: 4px solid var(--amber);
  border-radius: var(--radius-s);
  box-shadow: 0 1px 2px rgba(14, 26, 43, .04), 0 18px 36px -26px rgba(14, 26, 43, .35);
  transition: transform .35s var(--ease-out), box-shadow .35s ease;
}
.review:hover { transform: translateY(-3px); box-shadow: 0 1px 2px rgba(14, 26, 43, .04), 0 26px 44px -26px rgba(14, 26, 43, .45); }

.review-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s3);
  font-family: var(--font);
  font-size: .8125rem;
  color: var(--ink-2);
}
.review-stars { display: inline-flex; gap: 2px; }
.review-stars svg { width: 1rem; height: 1rem; fill: var(--line); }
.review-stars .is-on svg { fill: var(--amber); }

.review blockquote { margin: var(--s4) 0 var(--s5); flex: 1; }
.review blockquote p { font-size: 1.125rem; line-height: 1.55; color: var(--ink); }
.review blockquote p::before { content: "\201C"; }
.review blockquote p::after { content: "\201D"; }

.review figcaption {
  display: grid;
  gap: 2px;
  padding-top: var(--s3);
  border-top: 1px dashed var(--line);
  font-family: var(--font);
}
.review-name { font-weight: 700; font-stretch: var(--wide); }
.review-meta { font-size: .875rem; color: var(--ink-2); }

/* Empty state: an unsigned slip waiting for its first signature */
.review-empty {
  display: grid;
  gap: var(--s6);
  align-items: center;
  padding: clamp(var(--s5), 4vw, var(--s7));
  border: 1px dashed #B3BFCA;
  border-radius: var(--radius-m);
}
@media (min-width: 860px) { .review-empty { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--s8); } }
.review-empty-copy h3 { font-size: var(--step-2); }
.review-empty-copy p { margin-top: var(--s3); color: var(--ink-2); max-width: 40rem; }
.review-empty-copy .btn-row { margin-top: var(--s5); }

.review-ghost {
  padding: var(--s5);
  background: rgba(255, 255, 255, .7);
  border: 1px solid var(--line);
  border-top: 4px solid rgba(244, 176, 0, .45);
  border-radius: var(--radius-s);
  transform: rotate(-1.5deg);
  box-shadow: 0 18px 36px -28px rgba(14, 26, 43, .35);
  max-width: 22rem;
}
.ghost-stars { width: 5.5rem; height: .75rem; border-radius: 2px; background: repeating-linear-gradient(90deg, var(--line) 0 .9rem, transparent .9rem 1.15rem); }
.ghost-line { height: .65rem; margin-top: var(--s4); border-radius: 2px; background: var(--grid); }
.ghost-line.short { width: 62%; margin-top: var(--s2); }
.ghost-sign {
  margin-top: var(--s6);
  padding-top: var(--s2);
  border-top: 1px dashed #B3BFCA;
  font-family: var(--font);
  font-size: .8125rem;
  color: #8291A1;
}

/* Star rating input: hover previews, click sets, arrow keys move */
.star-input { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: var(--s1); }
.star-input input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.star-input label {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 6px;
  cursor: pointer;
}
.star-input svg {
  width: 1.75rem;
  height: 1.75rem;
  fill: var(--white);
  stroke: #8C99A8;
  stroke-width: 1.25;
  stroke-linejoin: round;
  transition: fill var(--dur-1) ease, stroke var(--dur-1) ease, transform var(--dur-2) var(--press);
}
.star-input input:checked ~ label svg,
.star-input label:hover svg,
.star-input label:hover ~ label svg { fill: var(--amber); stroke: var(--amber-deep); }
.star-input:hover input:checked ~ label svg { fill: var(--amber); }
.star-input label:hover svg { transform: scale(1.12); }
.star-input input:focus-visible + label { box-shadow: 0 0 0 3px rgba(11, 58, 117, .25); }
.field.has-error .star-input svg { stroke: var(--err); }
.star-input { position: relative; }