/* ==========================================================================
   THE LAST YARD LOGISTICS — Design System
   1. Tokens          5. Layout
   2. Reset/Base      6. Components
   3. Typography      7. Sections
   4. Motion          8. Responsive
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root {
  /* ------------------------------------------------------------------
     BRAND — constant in both themes, sampled from the fleet livery
     ------------------------------------------------------------------ */
  --brand-900: #062A22;
  --brand-800: #0B4438;
  --brand-700: #0F5E4B;
  --brand-600: #14795F;
  --brand-500: #199A78;
  --brand-400: #22C58F;
  --brand-300: #4FE3AC;
  --brand-200: #8FF2CB;
  --sage:      #8FB48A;

  /* ------------------------------------------------------------------
     TYPOGRAPHY — shared
     ------------------------------------------------------------------ */
  --f-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-cond: "Barlow Condensed", "Inter", ui-sans-serif, system-ui, sans-serif;

  --t-xs:  0.75rem;
  --t-sm:  0.8125rem;
  --t-base: clamp(0.95rem, 0.9rem + 0.2vw, 1.0625rem);
  --t-lg:  clamp(1.05rem, 1rem + 0.35vw, 1.25rem);
  --t-xl:  clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem);
  --t-2xl: clamp(1.6rem, 1.35rem + 1.15vw, 2.35rem);
  --t-3xl: clamp(2rem, 1.55rem + 2.1vw, 3.4rem);
  --t-4xl: clamp(2.5rem, 1.7rem + 3.6vw, 5rem);
  --t-5xl: clamp(3rem, 1.8rem + 5.2vw, 6.5rem);

  /* Spacing */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px;  --s-10: 128px;
  --section-y: clamp(64px, 8vw, 132px);

  /* Radii */
  --r-xs: 6px;  --r-sm: 10px; --r-md: 16px;
  --r-lg: 24px; --r-xl: 34px; --r-pill: 999px;

  /* Layout */
  --wrap: 1220px;
  --wrap-wide: 1420px;
  --gutter: clamp(20px, 4vw, 44px);
  --nav-h: 76px;

  /* Motion */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-io:  cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-1: .18s; --dur-2: .32s; --dur-3: .55s; --dur-4: .9s;
}

/* ==========================================================================
   THEME: DARK (default)
   ========================================================================== */
:root,
[data-theme="dark"] {
  color-scheme: dark;

  --bg:         #0D1815;
  --bg-deep:    #081110;
  --surface-1:  #142220;
  --surface-2:  #1B2C29;
  --surface-3:  #243833;

  --tx-hi:  #F4FAF7;
  --tx-mid: #C2D3CC;
  --tx-lo:  #8DA39B;

  /* Accent that is legible against --bg */
  --accent:      var(--brand-300);
  --accent-soft: var(--brand-400);
  --accent-line: rgba(79, 227, 172, .32);

  /* Primary action */
  --cta-bg: var(--brand-400);
  --cta-fg: #050908;
  --cta-glow: rgba(34, 197, 143, .70);

  --glass:        rgba(255, 255, 255, .05);
  --glass-strong: rgba(255, 255, 255, .085);
  --line:         rgba(255, 255, 255, .11);
  --line-strong:  rgba(255, 255, 255, .20);

  /* Card + input fills are light washes on a dark base */
  --fill-1: rgba(255, 255, 255, .075);
  --fill-2: rgba(255, 255, 255, .025);
  --fill-input: rgba(255, 255, 255, .05);
  --fill-input-hi: rgba(255, 255, 255, .085);

  /* Scrims over photography and video: page colour, so text sits on the bg */
  --scrim-rgb: 8 17 16;
  --media-opacity: .78;
  --media-opacity-soft: .55;
  --grid-line: rgba(143, 180, 138, .07);
  --logo-dash: #0D1815;

  --sh-sm: 0 1px 2px rgba(0,0,0,.4);
  --sh-md: 0 12px 32px -12px rgba(0,0,0,.5);
  --sh-lg: 0 32px 80px -24px rgba(0,0,0,.6);

  --ambient-1: rgba(25, 154, 120, .26);
  --ambient-2: rgba(79, 227, 172, .14);
  --ambient-3: rgba(15, 94, 75, .34);

  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234FE3AC' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23050908' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  --panel-grad: linear-gradient(165deg, #1B2C29, #101C1A);
  --drawer-grad: linear-gradient(170deg, #162522, #0A1413);
  --toast-grad: linear-gradient(150deg, #1E312C, #12201D);
  --header-bg: rgba(13, 24, 21, .82);
  --picker-filter: invert(1) sepia(1) saturate(4) hue-rotate(105deg);
  --grain-opacity: .035;
}

/* ==========================================================================
   THEME: LIGHT
   ========================================================================== */
[data-theme="light"] {
  color-scheme: light;

  --bg:         #F6FAF8;
  --bg-deep:    #FFFFFF;
  --surface-1:  #FFFFFF;
  --surface-2:  #F0F6F2;
  --surface-3:  #E4EEE8;

  --tx-hi:  #071310;
  --tx-mid: #3B4F48;
  --tx-lo:  #5C7169;

  /* Darker greens so accents keep AA contrast on a light background */
  --accent:      var(--brand-700);
  --accent-soft: var(--brand-600);
  --accent-line: rgba(15, 94, 75, .28);

  --cta-bg: var(--brand-700);
  --cta-fg: #FFFFFF;
  --cta-glow: rgba(15, 94, 75, .40);

  --glass:        rgba(7, 19, 16, .028);
  --glass-strong: rgba(7, 19, 16, .055);
  --line:         rgba(7, 19, 16, .12);
  --line-strong:  rgba(7, 19, 16, .20);

  --fill-1: rgba(255, 255, 255, .92);
  --fill-2: rgba(240, 246, 242, .70);
  --fill-input: #FFFFFF;
  --fill-input-hi: #FFFFFF;

  /* White scrim over media so dark text stays readable on top */
  --scrim-rgb: 246 250 248;
  --media-opacity: .72;
  --media-opacity-soft: .46;
  --grid-line: rgba(15, 94, 75, .07);
  --logo-dash: #F6FAF8;

  --sh-sm: 0 1px 2px rgba(7,19,16,.06);
  --sh-md: 0 12px 30px -14px rgba(7,19,16,.20);
  --sh-lg: 0 30px 70px -26px rgba(7,19,16,.28);

  --ambient-1: rgba(20, 121, 95, .10);
  --ambient-2: rgba(34, 197, 143, .07);
  --ambient-3: rgba(143, 180, 138, .16);

  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F5E4B' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  --panel-grad: linear-gradient(165deg, #FFFFFF, #F2F8F4);
  --drawer-grad: linear-gradient(170deg, #FFFFFF, #EDF4F0);
  --toast-grad: linear-gradient(150deg, #FFFFFF, #EEF5F1);
  --header-bg: rgba(246, 250, 248, .82);
  --picker-filter: sepia(1) saturate(3) hue-rotate(105deg) brightness(.75);
  --grain-opacity: .022;
}

/* Legacy aliases kept so older rules keep resolving */
:root {
  --ink-950: var(--bg-deep);
  --ink-900: var(--bg);
  --ink-850: var(--surface-1);
  --ink-800: var(--surface-1);
  --ink-700: var(--surface-2);
  --ink-600: var(--surface-3);
  --ink-500: var(--surface-3);
  --paper: #FFFFFF;
  --paper-soft: #F4F8F6;
  --tx-inv: var(--bg-deep);
  --sh-glow: 0 0 0 1px var(--accent-line), 0 18px 60px -18px var(--cta-glow);
}

/* ==========================================================================
   2. RESET / BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 24px);
}

body {
  font-family: var(--f-body);
  font-size: var(--t-base);
  line-height: 1.65;
  color: var(--tx-mid);
  background: var(--ink-900);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  min-height: 100vh;
}

body.is-locked { overflow: hidden; }

/* Grid and flex children default to min-width:auto, which lets a wide child
   (a long stat row, a nowrap pill) push its parent past the viewport and
   create horizontal scroll on a phone. Opt every layout child out of that. */
.hero__inner > *,
.split > *,
.grid > *,
.showcase > *,
.footer__top > *,
.wizard__foot > *,
.quote-card__head > * { min-width: 0; }

/* Nothing should ever be able to scroll the page sideways. */
html { overflow-x: hidden; }

[hidden] { display: none !important; }

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

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

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

::selection { background: var(--accent-soft); color: var(--cta-fg); }

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

/* Ambient page texture */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 620px at 12% -8%,  var(--ambient-1), transparent 62%),
    radial-gradient(760px 560px at 92% 6%,   var(--ambient-2), transparent 60%),
    radial-gradient(1000px 700px at 50% 108%, var(--ambient-3), transparent 65%);
}
.site-main, .site-header, .site-footer { position: relative; z-index: 1; }

.skip-link {
  position: absolute;
  left: var(--s-4); top: var(--s-4);
  z-index: 999;
  padding: 10px 18px;
  border-radius: var(--r-sm);
  background: var(--cta-bg);
  color: var(--cta-fg);
  font-weight: 700;
  transform: translateY(-160%);
  transition: transform var(--dur-2) var(--ease-out);
}
.skip-link:focus { transform: translateY(0); }

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

/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */
h1, h2, h3, h4, h5 {
  color: var(--tx-hi);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

h1 { font-size: var(--t-4xl); letter-spacing: -0.038em; }
h2 { font-size: var(--t-3xl); letter-spacing: -0.032em; }
h3 { font-size: var(--t-xl);  letter-spacing: -0.02em; line-height: 1.22; }
h4 { font-size: var(--t-lg);  letter-spacing: -0.015em; line-height: 1.3; }

p { text-wrap: pretty; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-cond);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow::before {
  content: "";
  width: 26px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-soft));
}
.eyebrow--center::after {
  content: "";
  width: 26px; height: 1px;
  background: linear-gradient(90deg, var(--accent-soft), transparent);
}

.lede {
  font-size: var(--t-lg);
  line-height: 1.6;
  color: var(--tx-mid);
  max-width: 62ch;
}

.grad-text {
  background: linear-gradient(102deg, var(--brand-200) 4%, var(--brand-400) 42%, var(--sage) 96%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hl { color: var(--accent); }

/* ==========================================================================
   4. MOTION
   ========================================================================== */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition:
    opacity var(--dur-4) var(--ease-out),
    transform var(--dur-4) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal="left"]  { transform: translate3d(-32px, 0, 0); }
[data-reveal="right"] { transform: translate3d(32px, 0, 0); }
[data-reveal="scale"] { transform: scale(.94); }
[data-reveal="mask"]  { opacity: 1; clip-path: inset(0 100% 0 0); transform: none; transition: clip-path 1.1s var(--ease-out); transition-delay: var(--reveal-delay, 0ms); }

.is-visible[data-reveal] {
  opacity: 1;
  transform: none;
  will-change: auto;
}
.is-visible[data-reveal="mask"] { clip-path: inset(0 0 0 0); }

@keyframes ly-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
@keyframes ly-pulse {
  0%   { transform: scale(1);   opacity: .55; }
  70%  { transform: scale(2.4); opacity: 0; }
  100% { transform: scale(2.4); opacity: 0; }
}
@keyframes ly-dash { to { stroke-dashoffset: -1000; } }
@keyframes ly-marquee { to { transform: translate3d(-50%, 0, 0); } }
@keyframes ly-spin { to { transform: rotate(360deg); } }
@keyframes ly-shine { to { background-position: 220% center; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .road__dashes, .road__van, .convoy__van, .marquee__track { animation: none !important; }
  .split-word { transform: none !important; opacity: 1 !important; }
  .theme-anim, .theme-anim * { transition: none !important; }
  .road__van { left: 46%; }
  .convoy { display: none; }
}

/* ==========================================================================
   5. LAYOUT
   ========================================================================== */
.wrap { width: min(100% - (var(--gutter) * 2), var(--wrap)); margin-inline: auto; }
.wrap--wide { width: min(100% - (var(--gutter) * 2), var(--wrap-wide)); margin-inline: auto; }
.wrap--narrow { width: min(100% - (var(--gutter) * 2), 820px); margin-inline: auto; }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(48px, 5vw, 80px); }
.section--flush-top { padding-top: 0; }

.section-head { max-width: 720px; margin-bottom: clamp(36px, 4vw, 60px); }
.section-head > * + * { margin-top: var(--s-4); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.section-head--center .lede { margin-inline: auto; }

.grid { display: grid; gap: clamp(16px, 2vw, 28px); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Main column + sticky aside (booking wizard, contact page) */
.grid--aside {
  grid-template-columns: minmax(0, 1.55fr) minmax(0, .9fr);
  align-items: start;
  gap: clamp(20px, 3vw, 40px);
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}

.stack > * + * { margin-top: var(--s-4); }
.stack-lg > * + * { margin-top: var(--s-6); }

.divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong) 18%, var(--line-strong) 82%, transparent);
  border: 0;
}

/* ==========================================================================
   6. COMPONENTS
   ========================================================================== */

/* --- Buttons ------------------------------------------------------------ */
.btn {
  --btn-bg: var(--cta-bg);
  --btn-fg: var(--cta-fg);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 28px;
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 650;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  isolation: isolate;
  overflow: hidden;
  transition: transform var(--dur-2) var(--ease-spring), box-shadow var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, transparent 20%, rgb(255 255 255 / .42) 50%, transparent 80%);
  transform: translateX(-120%);
  transition: transform .7s var(--ease-out);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -14px var(--cta-glow); }
.btn:hover::after { transform: translateX(120%); }
.btn:active { transform: translateY(0) scale(.985); }

.btn svg { width: 17px; height: 17px; flex: none; transition: transform var(--dur-2) var(--ease-out); }
.btn:hover svg { transform: translateX(4px); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--tx-hi);
  border: 1px solid var(--line-strong);
  backdrop-filter: blur(10px);
}
.btn--ghost:hover {
  --btn-bg: var(--glass-strong);
  border-color: var(--accent-soft);
  color: var(--accent);
  box-shadow: var(--sh-md);
}
.btn--ghost::after { display: none; }

.btn--light { --btn-bg: var(--paper); --btn-fg: var(--ink-900); }
.btn--light:hover { box-shadow: var(--sh-md); }

.btn--lg { padding: 18px 34px; font-size: 1.02rem; }
.btn--sm { padding: 11px 20px; font-size: .875rem; }
.btn--block { width: 100%; }

.btn[disabled] { opacity: .45; pointer-events: none; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--accent);
  transition: gap var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.link-arrow svg { width: 15px; height: 15px; }
.link-arrow:hover { gap: 14px; color: var(--accent-soft); }

/* --- Pills / chips ------------------------------------------------------ */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 16px 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--glass);
  backdrop-filter: blur(12px);
  font-size: var(--t-sm);
  font-weight: 550;
  color: var(--tx-mid);
}
.pill .dot {
  position: relative;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent-soft);
  flex: none;
}
.pill .dot::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  background: var(--accent-soft);
  animation: ly-pulse 2.4s var(--ease-out) infinite;
}

/* --- Cards -------------------------------------------------------------- */
.card {
  position: relative;
  padding: clamp(24px, 2.4vw, 34px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(158deg, var(--fill-1), var(--fill-2));
  backdrop-filter: blur(14px);
  overflow: hidden;
  transition: transform var(--dur-3) var(--ease-out), border-color var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out);
}
.card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), var(--accent-soft), transparent 62%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--dur-3) var(--ease-out);
  pointer-events: none;
}
.card:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); }
.card:hover::before { opacity: 1; }

.card__icon {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  margin-bottom: var(--s-5);
  border-radius: 15px;
  background: linear-gradient(150deg, color-mix(in srgb, var(--accent-soft) 22%, transparent), color-mix(in srgb, var(--brand-800) 40%, transparent));
  border: 1px solid var(--accent-line);
  color: var(--brand-300);
}
.card__icon svg { width: 24px; height: 24px; }
.card h3 { margin-bottom: 10px; }
.card p { font-size: .96rem; color: var(--tx-mid); }
.card__foot { margin-top: var(--s-5); }

.card--feature { padding: clamp(28px, 3vw, 44px); }

.card--num { padding-top: clamp(28px, 3vw, 40px); }
.card__num {
  font-family: var(--f-cond);
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--accent) 55%, transparent);
  margin-bottom: var(--s-4);
}

/* --- Stats -------------------------------------------------------------- */
.stat { min-width: 0; }
.stat__value {
  font-family: var(--f-cond);
  font-size: clamp(2.6rem, 5vw, 4.1rem);
  font-weight: 700;
  line-height: .95;
  letter-spacing: -0.02em;
  color: var(--tx-hi);
  display: flex;
  align-items: baseline;
  gap: 2px;
}
.stat__value .suffix { color: var(--accent); }
.stat__label {
  margin-top: 10px;
  font-size: var(--t-sm);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tx-lo);
}

/* --- Accordion ---------------------------------------------------------- */
.acc { border-top: 1px solid var(--line); }
.acc__item { border-bottom: 1px solid var(--line); }
.acc__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  width: 100%;
  padding: 24px 4px;
  text-align: left;
  font-size: var(--t-lg);
  font-weight: 600;
  color: var(--tx-hi);
  transition: color var(--dur-2) var(--ease-out);
}
.acc__btn:hover { color: var(--accent); }
.acc__sign {
  position: relative;
  flex: none;
  width: 34px; height: 34px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  transition: background var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), transform var(--dur-3) var(--ease-out);
}
.acc__sign::before, .acc__sign::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 13px; height: 1.5px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform var(--dur-3) var(--ease-out), opacity var(--dur-2) var(--ease-out);
}
.acc__sign::after { transform: translate(-50%, -50%) rotate(90deg); }
.acc__item.is-open .acc__sign { background: var(--cta-bg); border-color: var(--cta-bg); color: var(--cta-fg); transform: rotate(180deg); }
.acc__item.is-open .acc__sign::after { opacity: 0; }
.acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-3) var(--ease-io);
}
.acc__item.is-open .acc__panel { grid-template-rows: 1fr; }
.acc__panel > div { overflow: hidden; }
.acc__panel p { padding: 0 60px 26px 4px; max-width: 78ch; }

/* --- Tabs --------------------------------------------------------------- */
.tabs {
  display: flex;
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--glass);
  backdrop-filter: blur(12px);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  padding: 11px 22px;
  border-radius: var(--r-pill);
  font-size: .92rem;
  font-weight: 600;
  color: var(--tx-lo);
  white-space: nowrap;
  transition: color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);
}
.tab[aria-selected="true"] { background: var(--cta-bg); color: var(--cta-fg); }
.tab:hover:not([aria-selected="true"]) { color: var(--tx-hi); }

.tabpanel[hidden] { display: none; }

/* --- Forms -------------------------------------------------------------- */
.field { display: block; }
.field + .field { margin-top: var(--s-5); }

.field__label {
  display: block;
  margin-bottom: 9px;
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tx-lo);
}
.field__label .req { color: var(--accent); }

.input, .select, .textarea {
  width: 100%;
  padding: 15px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--fill-input);
  color: var(--tx-hi);
  font-size: 1rem;
  transition: border-color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
  appearance: none;
}
.textarea { min-height: 132px; resize: vertical; line-height: 1.6; }
.input::placeholder, .textarea::placeholder { color: var(--tx-lo); opacity: .68; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--line-strong); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--accent-soft);
  background: var(--fill-input-hi);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-soft) 18%, transparent);
}
.select {
  background-image: var(--chevron);
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 18px;
  padding-right: 46px;
  cursor: pointer;
}
.select option { background: var(--ink-800); color: var(--tx-hi); }

.input[type="date"], .input[type="time"] { cursor: pointer; }
.input::-webkit-calendar-picker-indicator { filter: var(--picker-filter); cursor: pointer; opacity: .85; }

.field.has-error .input,
.field.has-error .select,
.field.has-error .textarea { border-color: #FF6B6B; box-shadow: 0 0 0 4px rgba(255,107,107,.13); }

.field__error {
  display: none;
  margin-top: 7px;
  font-size: var(--t-sm);
  color: #FF8B8B;
}
.field.has-error .field__error { display: block; }

.field__hint { margin-top: 7px; font-size: var(--t-sm); color: var(--tx-lo); }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.field-row .field + .field { margin-top: 0; }

/* Choice tiles (radio / checkbox cards) */
.choices { display: grid; gap: var(--s-3); }
.choices--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.choices--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.choice { position: relative; display: block; cursor: pointer; }
.choice input {
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
}
.choice__box {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--fill-input);
  transition: border-color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.choice:hover .choice__box { border-color: var(--line-strong); transform: translateY(-2px); }
.choice__title { font-weight: 650; color: var(--tx-hi); font-size: 1rem; }
.choice__meta { font-size: var(--t-sm); color: var(--tx-lo); line-height: 1.45; }
.choice__tag {
  align-self: flex-start;
  margin-top: 4px;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--accent-soft) 15%, transparent);
  border: 1px solid var(--accent-line);
  font-size: .72rem;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent);
}
.choice input:checked + .choice__box {
  border-color: var(--accent-soft);
  background: color-mix(in srgb, var(--accent-soft) 12%, transparent);
  box-shadow: 0 0 0 1px var(--accent-soft) inset;
}
.choice input:focus-visible + .choice__box { outline: 2px solid var(--accent-soft); outline-offset: 3px; }

.check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: .93rem;
  color: var(--tx-mid);
  cursor: pointer;
}
.check input {
  flex: none;
  width: 19px; height: 19px;
  margin-top: 2px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  background: var(--fill-input);
  appearance: none;
  cursor: pointer;
  transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.check input:checked {
  background: var(--cta-bg) var(--tick) center / 13px no-repeat;
  border-color: var(--cta-bg);
}
.check a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* --- Modal -------------------------------------------------------------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: var(--s-4);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-2) var(--ease-out), visibility var(--dur-2);
}
.modal.is-open { opacity: 1; visibility: visible; }
.modal__scrim {
  position: absolute;
  inset: 0;
  background: rgb(var(--scrim-rgb) / .84);
  backdrop-filter: blur(10px);
}
.modal__panel {
  position: relative;
  width: min(100%, 560px);
  max-height: min(88vh, 760px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(26px, 4vw, 44px);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--panel-grad);
  box-shadow: var(--sh-lg);
  transform: translateY(22px) scale(.97);
  transition: transform var(--dur-3) var(--ease-spring);
}
.modal.is-open .modal__panel { transform: none; }
.modal__close {
  position: absolute;
  top: 16px; right: 16px;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--tx-mid);
  transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.modal__close:hover { background: var(--glass-strong); color: var(--tx-hi); transform: rotate(90deg); }
.modal__close svg { width: 17px; height: 17px; }

/* --- Toast -------------------------------------------------------------- */
.toast-zone {
  position: fixed;
  left: 50%;
  bottom: 26px;
  z-index: 300;
  display: grid;
  gap: 10px;
  width: min(calc(100% - 32px), 440px);
  transform: translateX(-50%);
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 20px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--toast-grad);
  box-shadow: var(--sh-lg);
  color: var(--tx-hi);
  font-size: .93rem;
  font-weight: 550;
  transform: translateY(18px);
  opacity: 0;
  transition: transform var(--dur-3) var(--ease-spring), opacity var(--dur-2) var(--ease-out);
}
.toast.is-in { transform: none; opacity: 1; }
.toast svg { width: 19px; height: 19px; flex: none; color: var(--brand-400); }
.toast--err svg { color: #FF8B8B; }

/* ==========================================================================
   7. SECTIONS & PAGE FURNITURE
   ========================================================================== */

/* --- Header ------------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  transition: background var(--dur-3) var(--ease-out), border-color var(--dur-3) var(--ease-out), backdrop-filter var(--dur-3), height var(--dur-3) var(--ease-out);
  border-bottom: 1px solid transparent;
}
.site-header.is-stuck {
  height: 64px;
  background: var(--header-bg);
  backdrop-filter: blur(18px) saturate(150%);
  border-bottom-color: var(--line);
}
.nav {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  width: min(100% - (var(--gutter) * 2), var(--wrap-wide));
  margin-inline: auto;
}

.brand { display: inline-flex; align-items: center; flex: none; }
.brand__logo {
  width: auto;
  height: clamp(38px, 4.2vw, 50px);
  transition: transform var(--dur-3) var(--ease-spring);
}
.brand:hover .brand__logo { transform: translateY(-2px) scale(1.03); }
.site-header.is-stuck .brand__logo { height: clamp(34px, 3.6vw, 42px); }
.site-footer .brand__logo { height: 58px; }

/* One artwork per theme — no CSS-variable support needed inside the file */
.brand__logo--ondark  { display: block; }
.brand__logo--onlight { display: none; }
[data-theme="light"] .brand__logo--ondark  { display: none; }
[data-theme="light"] .brand__logo--onlight { display: block; }

.nav__links { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav__link {
  position: relative;
  padding: 9px 15px;
  border-radius: var(--r-pill);
  font-size: .93rem;
  font-weight: 550;
  color: var(--tx-mid);
  transition: color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);
}
.nav__link:hover { color: var(--tx-hi); background: var(--glass); }
.nav__link[aria-current="page"] { color: var(--accent); }
.nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 15px; right: 15px; bottom: 2px;
  height: 1.5px;
  border-radius: 2px;
  background: var(--accent-soft);
}

.nav__cta { display: flex; align-items: center; gap: var(--s-3); flex: none; }

.nav__burger {
  display: none;
  position: relative;
  width: 44px; height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  flex: none;
}
.nav__burger span {
  position: absolute;
  left: 50%;
  width: 18px; height: 1.6px;
  background: var(--tx-hi);
  border-radius: 2px;
  transform: translateX(-50%);
  transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-1) var(--ease-out);
}
.nav__burger span:nth-child(1) { top: 16px; }
.nav__burger span:nth-child(2) { top: 21.5px; }
.nav__burger span:nth-child(3) { top: 27px; }
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateX(-50%) translateY(5.5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateX(-50%) translateY(-5.5px) rotate(-45deg); }

/* Mobile drawer */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 99;
  display: flex;
  flex-direction: column;
  padding: calc(var(--nav-h) + 28px) var(--gutter) 40px;
  background: var(--drawer-grad);
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform var(--dur-3) var(--ease-io), visibility var(--dur-3);
  overflow-y: auto;
}
.drawer.is-open { transform: none; visibility: visible; }
.drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 19px 4px;
  border-bottom: 1px solid var(--line);
  font-family: var(--f-cond);
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--tx-hi);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out), color var(--dur-2) var(--ease-out);
}
.drawer.is-open .drawer__link { opacity: 1; transform: none; }
.drawer__link:hover, .drawer__link[aria-current="page"] { color: var(--accent); }
.drawer__link svg { width: 17px; height: 17px; color: var(--accent); }
.drawer__foot { margin-top: auto; padding-top: 32px; display: grid; gap: 14px; }
.drawer__contact { display: grid; gap: 8px; font-size: .95rem; }
.drawer__contact a { display: flex; align-items: center; gap: 10px; color: var(--tx-mid); }
.drawer__contact svg { width: 16px; height: 16px; color: var(--accent); flex: none; }

/* --- Hero --------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(100svh, 940px);
  padding-top: calc(var(--nav-h) + 40px);
  padding-bottom: clamp(48px, 7vw, 96px);
  overflow: hidden;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__media img, .hero__media video {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: var(--media-opacity);
  transform: scale(1.06);
}
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgb(var(--scrim-rgb) / .72) 0%, rgb(var(--scrim-rgb) / .30) 38%, rgb(var(--scrim-rgb) / .70) 76%, var(--bg) 100%),
    linear-gradient(90deg, rgb(var(--scrim-rgb) / .92) 0%, rgb(var(--scrim-rgb) / .40) 46%, rgb(var(--scrim-rgb) / .18) 100%);
}
.hero__grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 74px 74px;
  mask-image: radial-gradient(ellipse 80% 62% at 50% 42%, #000 20%, transparent 78%);
  pointer-events: none;
}
.hero__inner { display: grid; gap: clamp(40px, 5vw, 72px); grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); align-items: center; }
.hero__copy > * + * { margin-top: var(--s-5); }
.hero h1 { max-width: 15ch; }
.hero .lede { max-width: 52ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); padding-top: var(--s-2); }

.hero__proof {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 3vw, 44px);
  margin-top: var(--s-7);
  padding-top: var(--s-6);
  border-top: 1px solid var(--line);
}
.hero__proof .stat__value { font-size: clamp(1.9rem, 3.2vw, 2.7rem); }
.hero__proof .stat__label { font-size: .72rem; }

.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  font-size: .68rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--tx-lo);
}
.hero__scroll i {
  display: block;
  width: 1px; height: 42px;
  background: linear-gradient(180deg, var(--brand-400), transparent);
}

/* Quote widget in hero */
.quote-card {
  padding: clamp(22px, 2.4vw, 30px);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: linear-gradient(162deg, color-mix(in srgb, var(--surface-2) 94%, transparent), color-mix(in srgb, var(--surface-1) 94%, transparent));
  backdrop-filter: blur(20px);
  box-shadow: var(--sh-lg);
}
.quote-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-5); }
.quote-card__head h2 { font-size: var(--t-xl); }
.quote-card .field + .field { margin-top: var(--s-4); }

/* --- Marquee / logo strip ---------------------------------------------- */
.marquee {
  position: relative;
  overflow: hidden;
  padding-block: 26px;
  border-block: 1px solid var(--line);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex;
  width: max-content;
  gap: clamp(36px, 5vw, 78px);
  animation: ly-marquee 38s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--f-cond);
  font-size: clamp(1rem, 1.4vw, 1.22rem);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tx-lo);
  white-space: nowrap;
}
.marquee__item svg { width: 17px; height: 17px; color: var(--accent-soft); flex: none; }

/* --- Route / van animation --------------------------------------------- */
.route {
  position: relative;
  width: 100%;
  overflow: visible;
}
.route__line {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 2;
  stroke-linecap: round;
}
.route__dash {
  fill: none;
  stroke: color-mix(in srgb, var(--accent) 45%, transparent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 10 14;
  animation: ly-dash 22s linear infinite;
}
.route__progress {
  fill: none;
  stroke: url(#lyRouteGrad);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: var(--len, 1200);
  stroke-dashoffset: var(--len, 1200);
  transition: stroke-dashoffset .1s linear;
}
.route__node circle { transition: r var(--dur-2) var(--ease-spring), fill var(--dur-2) var(--ease-out); }
.route__node.is-hit circle.ring { fill: color-mix(in srgb, var(--accent-soft) 22%, transparent); }
.route__node.is-hit circle.core { fill: var(--brand-300); }
.route__van { transition: opacity var(--dur-2) var(--ease-out); }

.van-svg .van-body { fill: var(--paper); }
.van-svg .van-glass { fill: color-mix(in srgb, var(--brand-600) 34%, transparent); }
.van-svg .van-trim { fill: #10201A; }
.van-svg .van-accent { fill: var(--brand-500); }
.van-svg .wheel { transform-box: fill-box; transform-origin: center; }
.van-svg.is-driving .wheel { animation: ly-spin .55s linear infinite; }

/* --- Service showcase --------------------------------------------------- */
.showcase { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(28px, 4vw, 60px); align-items: start; }
.showcase__nav { display: grid; gap: 8px; position: sticky; top: calc(var(--nav-h) + 28px); }
.showcase__btn {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 20px 22px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  text-align: left;
  color: var(--tx-lo);
  transition: background var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.showcase__btn:hover { background: var(--glass); color: var(--tx-mid); }
.showcase__btn[aria-selected="true"] {
  background: linear-gradient(120deg, color-mix(in srgb, var(--accent-soft) 15%, transparent), transparent);
  border-color: var(--accent-line);
  color: var(--tx-hi);
}
.showcase__btn .idx {
  font-family: var(--f-cond);
  font-size: .82rem;
  letter-spacing: .16em;
  color: var(--brand-400);
  flex: none;
}
.showcase__btn .ttl { font-weight: 650; font-size: 1.05rem; line-height: 1.25; }
.showcase__btn .sub { display: block; font-weight: 400; font-size: .84rem; color: var(--tx-lo); margin-top: 3px; }

.showcase__panel { display: grid; gap: var(--s-6); }
.showcase__figure {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 16 / 9;
  background: var(--ink-800);
}
.showcase__figure img { width: 100%; height: 100%; object-fit: cover; }
.showcase__figure::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 38%, rgb(var(--scrim-rgb) / .88));
}
.showcase__cap {
  position: absolute;
  left: 24px; right: 24px; bottom: 20px;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.showcase__cap span {
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: rgb(var(--scrim-rgb) / .78);
  border: 1px solid var(--line);
  backdrop-filter: blur(10px);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--tx-hi);
}

.feature-list { display: grid; gap: 13px; }
.feature-list li { display: flex; align-items: flex-start; gap: 12px; font-size: .97rem; }
.feature-list svg { width: 19px; height: 19px; flex: none; margin-top: 3px; color: var(--accent); }

/* --- Media band --------------------------------------------------------- */
.band {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  isolation: isolate;
}
.band__media { position: absolute; inset: 0; z-index: -1; }
.band__media img, .band__media video { width: 100%; height: 100%; object-fit: cover; }
.band__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgb(var(--scrim-rgb) / .93) 8%, rgb(var(--scrim-rgb) / .62) 48%, rgb(var(--scrim-rgb) / .20) 100%);
}
.band__inner { padding: clamp(40px, 6vw, 92px); max-width: 720px; }
.band__inner > * + * { margin-top: var(--s-5); }

/* --- Gallery ------------------------------------------------------------ */
.gallery { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(10px, 1.2vw, 18px); }
.gallery__item {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--ink-800);
  cursor: zoom-in;
}
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.gallery__item:hover img { transform: scale(1.06); }
.gallery__item::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgb(var(--scrim-rgb) / .62));
  opacity: 0;
  transition: opacity var(--dur-3) var(--ease-out);
}
.gallery__item:hover::after { opacity: 1; }
.g-a { grid-column: span 7; aspect-ratio: 16/10; }
.g-b { grid-column: span 5; aspect-ratio: 4/5; }
.g-c { grid-column: span 4; aspect-ratio: 1/1; }
.g-d { grid-column: span 4; aspect-ratio: 1/1; }
.g-e { grid-column: span 4; aspect-ratio: 1/1; }
.g-f { grid-column: span 12; aspect-ratio: 21/8; }

/* --- Testimonials ------------------------------------------------------- */
.quote-block {
  position: relative;
  padding: clamp(30px, 3.2vw, 44px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(158deg, var(--fill-1), var(--fill-2));
}
.quote-block__mark {
  font-family: var(--f-cond);
  font-size: 4.4rem;
  line-height: .6;
  color: color-mix(in srgb, var(--accent) 32%, transparent);
}
.quote-block p { font-size: var(--t-lg); color: var(--tx-hi); line-height: 1.55; margin-block: var(--s-4); }
.quote-block__who { display: flex; align-items: center; gap: 13px; margin-top: var(--s-5); }
.quote-block__avatar {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--brand-600), var(--brand-800));
  border: 1px solid var(--accent-line);
  font-family: var(--f-cond);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--brand-200);
  flex: none;
}
.quote-block__name { font-weight: 650; color: var(--tx-hi); font-size: .96rem; }
.quote-block__role { font-size: var(--t-sm); color: var(--tx-lo); }
.stars { display: flex; gap: 3px; color: var(--accent); }
.stars svg { width: 15px; height: 15px; }

/* --- Timeline / process ------------------------------------------------- */
.steps { position: relative; display: grid; gap: clamp(20px, 2.4vw, 30px); }
.steps::before {
  content: "";
  position: absolute;
  top: 30px; bottom: 30px; left: 27px;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--line-strong) 12%, var(--line-strong) 88%, transparent);
}
.step { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--s-5); align-items: start; }
.step__dot {
  position: relative;
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 1px solid var(--accent-line);
  background: linear-gradient(150deg, color-mix(in srgb, var(--accent-soft) 18%, transparent), var(--surface-1));
  backdrop-filter: blur(10px);
  font-family: var(--f-cond);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--brand-300);
}
.step h3 { margin-bottom: 8px; }
.step p { font-size: .97rem; }

/* --- Coverage ----------------------------------------------------------- */
.zone-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.zone {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--glass);
  transition: border-color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.zone:hover { border-color: var(--accent-line); background: color-mix(in srgb, var(--accent-soft) 9%, transparent); transform: translateY(-2px); }
.zone strong { color: var(--tx-hi); font-weight: 600; font-size: .97rem; }
.zone span { font-size: var(--t-sm); color: var(--accent); font-weight: 600; white-space: nowrap; }

/* --- Booking wizard ----------------------------------------------------- */
.wizard {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xl);
  background: linear-gradient(168deg, color-mix(in srgb, var(--surface-2) 92%, transparent), color-mix(in srgb, var(--surface-1) 96%, transparent));
  backdrop-filter: blur(18px);
  box-shadow: var(--sh-lg);
  overflow: hidden;
}
.wizard__bar { padding: clamp(20px, 2.5vw, 30px) clamp(22px, 3vw, 40px) 0; }
.wizard__meter {
  height: 4px;
  border-radius: 4px;
  background: var(--glass-strong);
  overflow: hidden;
}
.wizard__meter i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand-600), var(--accent));
  transition: width var(--dur-3) var(--ease-io);
}
.wizard__crumbs {
  display: flex;
  gap: 6px;
  margin-top: 16px;
  overflow-x: auto;
  scrollbar-width: none;
}
.wizard__crumbs::-webkit-scrollbar { display: none; }
.wizard__crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  border-radius: var(--r-pill);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--tx-lo);
  white-space: nowrap;
  transition: color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);
}
.wizard__crumb i {
  display: grid;
  place-items: center;
  width: 21px; height: 21px;
  border-radius: 50%;
  border: 1px solid currentColor;
  font-size: .68rem;
  font-style: normal;
  font-weight: 700;
  flex: none;
}
.wizard__crumb.is-active { color: var(--accent); background: color-mix(in srgb, var(--accent-soft) 12%, transparent); }
.wizard__crumb.is-done { color: var(--accent); }
.wizard__crumb.is-done i { background: var(--cta-bg); border-color: var(--cta-bg); color: var(--cta-fg); }
.wizard__crumb.is-done i::before { content: "✓"; }
.wizard__crumb.is-done i .n { display: none; }

.wizard__body { padding: clamp(24px, 3vw, 40px); }

/* Without JS every fieldset is visible and the form still posts.
   JS adds .is-enhanced and turns it into a stepped wizard. */
.wizard__step { display: block; }
.wizard__step + .wizard__step { margin-top: var(--s-7); padding-top: var(--s-7); border-top: 1px solid var(--line); }
.wizard__bar, .wizard__foot { display: none; }
.wizard.is-enhanced .wizard__bar { display: block; }
.wizard.is-enhanced .wizard__foot { display: flex; }
.wizard.is-enhanced .wizard__step { display: none; margin-top: 0; padding-top: 0; border-top: 0; }
.wizard.is-enhanced .wizard__step.is-active { display: block; animation: ly-step .45s var(--ease-out) both; }
@keyframes ly-step { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.wizard__step-head { margin-bottom: var(--s-6); }
.wizard__step-head h2 { font-size: var(--t-2xl); margin-bottom: 8px; }
.wizard__step-head p { font-size: .97rem; color: var(--tx-lo); }

.wizard__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: clamp(20px, 2.5vw, 26px) clamp(22px, 3vw, 40px);
  border-top: 1px solid var(--line);
  background: var(--glass);
}
.wizard__foot .spacer { flex: 1; }

.wizard__aside {
  position: sticky;
  top: calc(var(--nav-h) + 28px);
  padding: clamp(24px, 2.6vw, 32px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent-soft) 10%, transparent), var(--glass));
}
.summary { display: grid; gap: 12px; }
.summary__row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; font-size: .93rem; }
.summary__row dt { color: var(--tx-lo); flex: none; }
.summary__row dd { color: var(--tx-hi); font-weight: 600; text-align: right; }
.summary__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}
.summary__total dt { font-size: .93rem; color: var(--tx-mid); }
.summary__total dd {
  font-family: var(--f-cond);
  font-size: 2.3rem;
  font-weight: 700;
  line-height: 1;
  color: var(--brand-300);
}

.wizard__done { text-align: center; padding: clamp(30px, 5vw, 60px) 0; }
.wizard__tick {
  display: grid;
  place-items: center;
  width: 84px; height: 84px;
  margin: 0 auto var(--s-6);
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent-soft) 15%, transparent);
  border: 1px solid var(--accent-line);
  color: var(--accent);
}
.wizard__tick svg { width: 38px; height: 38px; }
.ref-code {
  display: inline-block;
  margin-top: var(--s-5);
  padding: 12px 22px;
  border: 1px dashed var(--accent-line);
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--accent-soft) 9%, transparent);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 1.12rem;
  letter-spacing: .12em;
  color: var(--accent);
}

/* --- Page hero (inner pages) -------------------------------------------- */
.page-hero {
  position: relative;
  padding-top: calc(var(--nav-h) + clamp(56px, 8vw, 112px));
  padding-bottom: clamp(44px, 6vw, 84px);
  overflow: hidden;
}
.page-hero__media { position: absolute; inset: 0; z-index: -1; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; opacity: var(--media-opacity-soft); }
.page-hero__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgb(var(--scrim-rgb) / .92), rgb(var(--scrim-rgb) / .7) 45%, var(--ink-900));
}
.page-hero > .wrap > * + * { margin-top: var(--s-5); }
.page-hero h1 { max-width: 18ch; }

.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--t-sm); color: var(--tx-lo); }
.crumbs a { transition: color var(--dur-2) var(--ease-out); }
.crumbs a:hover { color: var(--accent); }
.crumbs svg { width: 13px; height: 13px; opacity: .5; }
.crumbs [aria-current] { color: var(--tx-mid); }

/* --- CTA band ----------------------------------------------------------- */
.cta-band {
  position: relative;
  padding: clamp(44px, 6vw, 86px) clamp(26px, 4vw, 64px);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-xl);
  background:
    radial-gradient(700px 340px at 82% 12%, color-mix(in srgb, var(--accent-soft) 22%, transparent), transparent 62%),
    linear-gradient(150deg, color-mix(in srgb, var(--brand-600) 20%, transparent), var(--surface-1));
  overflow: hidden;
  text-align: center;
}
.cta-band > * + * { margin-top: var(--s-5); }
.cta-band h2 { max-width: 20ch; margin-inline: auto; }
.cta-band .lede { margin-inline: auto; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; }
.cta-band__van {
  position: absolute;
  right: -40px; bottom: -18px;
  width: min(46%, 460px);
  opacity: .14;
  pointer-events: none;
}

/* --- Footer ------------------------------------------------------------- */
.site-footer {
  margin-top: var(--section-y);
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, var(--glass), transparent);
}
.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 56px);
  padding-block: clamp(48px, 6vw, 76px);
}
.footer__brand > * + * { margin-top: var(--s-4); }
.footer__brand p { font-size: .95rem; max-width: 38ch; }
.footer__col h2 {
  font-family: var(--f-cond);
  font-size: .84rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--s-4);
}
.footer__col ul { list-style: none; padding: 0; display: grid; gap: 11px; }
.footer__col a {
  font-size: .95rem;
  color: var(--tx-mid);
  transition: color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.footer__col a:hover { color: var(--accent); }
.footer__col svg { width: 15px; height: 15px; color: var(--accent-soft); flex: none; }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: 26px;
  border-top: 1px solid var(--line);
  font-size: var(--t-sm);
  color: var(--tx-lo);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: 20px; }
.footer__legal a:hover { color: var(--accent); }

.socials { display: flex; gap: 9px; }
.socials a {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--tx-mid);
  transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.socials a:hover { background: var(--cta-bg); border-color: var(--cta-bg); color: var(--cta-fg); transform: translateY(-3px); }
.socials svg { width: 17px; height: 17px; }

/* --- Floating action ---------------------------------------------------- */
.fab {
  position: fixed;
  right: 20px; bottom: 20px;
  z-index: 90;
  display: none;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: var(--r-pill);
  background: var(--cta-bg);
  color: var(--cta-fg);
  font-weight: 700;
  font-size: .93rem;
  box-shadow: 0 14px 40px -12px var(--cta-glow);
  transform: translateY(120%);
  transition: transform var(--dur-3) var(--ease-spring);
}
.fab.is-in { transform: none; }
.fab svg { width: 17px; height: 17px; }

/* --- Lightbox ----------------------------------------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 250;
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 48px);
  background: rgb(var(--scrim-rgb) / .95);
  backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-2) var(--ease-out), visibility var(--dur-2);
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox img {
  max-width: 100%;
  max-height: 86vh;
  width: auto;
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
  transform: scale(.96);
  transition: transform var(--dur-3) var(--ease-spring);
}
.lightbox.is-open img { transform: none; }
.lightbox__close {
  position: absolute;
  top: 22px; right: 22px;
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--tx-hi);
}
.lightbox__close:hover { background: var(--glass-strong); }
.lightbox__close svg { width: 19px; height: 19px; }

/* --- Utilities ---------------------------------------------------------- */
.u-center { text-align: center; }
.u-mt-6 { margin-top: var(--s-6); }
.u-mt-7 { margin-top: var(--s-7); }
.u-muted { color: var(--tx-lo); }
.u-sm { font-size: var(--t-sm); }
.u-flex { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.u-flex-c { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; }
.u-rounded { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); }


/* ==========================================================================
   7b. THEME TOGGLE, TEXTURE, PROGRESS & VAN MOTION
   ========================================================================== */

/* --- Theme toggle ------------------------------------------------------- */
.theme-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex: none;
  width: 62px;
  height: 32px;
  padding: 3px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--glass);
  backdrop-filter: blur(10px);
  cursor: pointer;
  transition: border-color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);
}
.theme-toggle:hover { border-color: var(--accent-line); background: var(--glass-strong); }
.theme-toggle__knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--cta-bg);
  box-shadow: 0 2px 10px -2px var(--cta-glow);
  transition: transform var(--dur-3) var(--ease-spring);
}
[data-theme="light"] .theme-toggle__knob { transform: translateX(30px); }
.theme-toggle svg {
  position: relative;
  z-index: 1;
  width: 15px; height: 15px;
  margin: 0 auto;
  transition: color var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-out);
}
.theme-toggle .i-moon { color: var(--cta-fg); opacity: 1; }
.theme-toggle .i-sun  { color: var(--tx-lo); opacity: .75; }
[data-theme="light"] .theme-toggle .i-moon { color: var(--tx-lo); opacity: .75; }
[data-theme="light"] .theme-toggle .i-sun  { color: var(--cta-fg); opacity: 1; }

/* --- Film grain --------------------------------------------------------- */
.grain {
  position: fixed;
  inset: -50%;
  z-index: 0;
  pointer-events: none;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- Scroll progress: a road with a van riding it ----------------------- */
.scroll-rail {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 101;
  height: 3px;
  background: var(--line);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease-out);
}
.scroll-rail.is-on { opacity: 1; }
.scroll-rail__fill {
  height: 100%;
  width: 0;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(90deg, var(--brand-700), var(--accent-soft), var(--accent));
}
.scroll-rail__van {
  position: absolute;
  top: -11px;
  left: 0;
  width: 30px;
  transform: translateX(-50%);
  filter: drop-shadow(0 2px 4px rgb(0 0 0 / .35));
}

/* --- Road divider between sections -------------------------------------- */
.road {
  position: relative;
  height: 62px;
  margin-block: clamp(8px, 2vw, 26px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.road__surface {
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: var(--line-strong);
}
.road__dashes {
  position: absolute;
  left: 0; top: calc(50% - 1px);
  width: 200%;
  height: 2px;
  background: repeating-linear-gradient(90deg,
    var(--accent-line) 0 22px, transparent 22px 46px);
  animation: ly-road 3.4s linear infinite;
}
.road__van {
  position: absolute;
  bottom: calc(50% + 2px);
  left: -70px;
  width: 54px;
  animation: ly-drive 13s cubic-bezier(.42,0,.58,1) infinite;
}
@keyframes ly-road  { to { transform: translateX(-46px); } }
@keyframes ly-drive { 0% { left: -70px; } 100% { left: 105%; } }

/* --- Hero convoy (parallax van silhouettes) ----------------------------- */
.convoy {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: -1;
  height: 180px;
  pointer-events: none;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 60%);
  mask-image: linear-gradient(180deg, transparent, #000 60%);
}
.convoy__van {
  position: absolute;
  bottom: 22px;
  width: 130px;
  opacity: .12;
  color: var(--accent);
  animation: ly-convoy linear infinite;
}
.convoy__van:nth-child(1) { animation-duration: 26s; animation-delay:  0s;  width: 130px; opacity: .13; }
.convoy__van:nth-child(2) { animation-duration: 38s; animation-delay: -9s;  width:  92px; opacity: .09; bottom: 54px; }
.convoy__van:nth-child(3) { animation-duration: 48s; animation-delay: -22s; width:  64px; opacity: .06; bottom: 82px; }
@keyframes ly-convoy { 0% { transform: translateX(-160px); } 100% { transform: translateX(calc(100vw + 160px)); } }

/* --- Headlight sweep on hover ------------------------------------------- */
.van-svg .headlight {
  transform-box: fill-box;
  transform-origin: left center;
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease-out);
}
.van-svg.is-driving .headlight,
.card:hover .van-svg .headlight { opacity: .5; }

/* --- Van on the booking progress meter ---------------------------------- */
.wizard__meter { position: relative; overflow: visible; }
.wizard__meter i { position: relative; z-index: 0; }
.wizard__van {
  position: absolute;
  top: -13px;
  left: 0;
  width: 30px;
  transform: translateX(-50%);
  transition: left var(--dur-3) var(--ease-io);
  pointer-events: none;
}

/* --- Media player control ----------------------------------------------- */
.media-ctl {
  position: absolute;
  right: 18px; bottom: 18px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: rgb(var(--scrim-rgb) / .70);
  backdrop-filter: blur(12px);
  color: var(--tx-hi);
  font-size: var(--t-sm);
  font-weight: 600;
  transition: background var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.media-ctl:hover { background: rgb(var(--scrim-rgb) / .9); border-color: var(--accent-line); }
.media-ctl svg { width: 13px; height: 13px; }
.media-ctl__label { line-height: 1; }
.media-ctl .i-pause { display: block; }
.media-ctl .i-play  { display: none; }
.media-ctl[aria-pressed="true"] .i-pause { display: none; }
.media-ctl[aria-pressed="true"] .i-play  { display: block; }

/* --- Careers ------------------------------------------------------------ */
.role {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-5);
  align-items: center;
  padding: clamp(22px, 2.4vw, 32px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(158deg, var(--fill-1), var(--fill-2));
  transition: border-color var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out);
}
.role:hover { border-color: var(--accent-line); transform: translateY(-4px); box-shadow: var(--sh-lg); }
.role__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.role__meta span {
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--glass);
  font-size: var(--t-sm);
  font-weight: 550;
  color: var(--tx-mid);
}
.role__pay { color: var(--accent); font-weight: 650; }

.file-drop {
  position: relative;
  display: block;
  padding: 26px 22px;
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--r-md);
  background: var(--glass);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);
}
.file-drop:hover, .file-drop.is-over { border-color: var(--accent-soft); background: color-mix(in srgb, var(--accent-soft) 8%, transparent); }
.file-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.file-drop svg { width: 26px; height: 26px; margin: 0 auto 12px; color: var(--accent); }
.file-drop__name { display: block; margin-top: 8px; font-size: var(--t-sm); color: var(--accent); font-weight: 600; }


/* ==========================================================================
   7c. PREMIUM DETAIL
   ========================================================================== */

/* --- Theme crossfade (only while switching, so nothing else feels laggy) -- */
.theme-anim, .theme-anim * {
  transition: background-color .34s var(--ease-out),
              border-color .34s var(--ease-out),
              color .34s var(--ease-out),
              fill .34s var(--ease-out) !important;
}

/* --- Hairline highlight along the top of raised surfaces ----------------- */
.card::after,
.quote-block::after,
.role::after,
.wizard::after,
.cta-band::after,
.quote-card::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong) 22%, var(--line-strong) 78%, transparent);
  pointer-events: none;
}
.quote-block, .role, .wizard, .quote-card { position: relative; }

/* --- Button spotlight ---------------------------------------------------- */
.btn { --sx: 50%; --sy: 50%; }
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(120px circle at var(--sx) var(--sy), rgb(255 255 255 / .28), transparent 65%);
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease-out);
  pointer-events: none;
}
.btn:hover::before { opacity: 1; }
.btn--ghost::before { background: radial-gradient(140px circle at var(--sx) var(--sy), color-mix(in srgb, var(--accent-soft) 26%, transparent), transparent 65%); }

/* --- Kinetic headline ---------------------------------------------------- */
.split-line { display: block; overflow: hidden; }
.split-word {
  display: inline-block;
  transform: translateY(105%);
  opacity: 0;
  transition: transform .95s var(--ease-out), opacity .7s var(--ease-out);
  transition-delay: var(--wd, 0ms);
}
.is-split-in .split-word { transform: none; opacity: 1; }

/* --- Section numeral rail ------------------------------------------------ */
.section-head { position: relative; }
.section-head[data-index]::before {
  content: attr(data-index);
  position: absolute;
  top: -.35em; right: 0;
  font-family: var(--f-cond);
  font-size: clamp(3.4rem, 8vw, 6.5rem);
  font-weight: 700;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--line-strong);
  pointer-events: none;
  user-select: none;
}
.section-head--center[data-index]::before { display: none; }

/* --- Nav underline ------------------------------------------------------- */
.nav__link::before {
  content: "";
  position: absolute;
  left: 15px; right: 15px; bottom: 2px;
  height: 1.5px;
  border-radius: 2px;
  background: var(--accent-soft);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur-3) var(--ease-out);
}
.nav__link:hover::before { transform: scaleX(1); transform-origin: left; }
.nav__link[aria-current="page"]::before { display: none; }

/* --- Registration plate detail ------------------------------------------- */
.plate {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 4px;
  border: 1px solid rgb(0 0 0 / .35);
  background: #F5D400;
  color: #101010;
  font-family: var(--f-cond);
  font-weight: 700;
  font-size: .92rem;
  letter-spacing: .1em;
  line-height: 1.25;
}
.plate--front { background: #FFFFFF; }

/* --- Gallery caption ----------------------------------------------------- */
.gallery__item figcaption {
  position: absolute;
  left: 14px; right: 14px; bottom: 12px;
  z-index: 1;
  font-size: var(--t-sm);
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 6px rgb(0 0 0 / .8);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);
}
.gallery__item:hover figcaption { opacity: 1; transform: none; }

/* --- Lightbox caption ---------------------------------------------------- */
.lightbox__cap {
  position: absolute;
  left: 0; right: 0; bottom: 22px;
  text-align: center;
  font-size: var(--t-sm);
  color: var(--tx-mid);
  padding-inline: 60px;
}

/* --- Refined focus ring -------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--accent-soft);
  outline-offset: 3px;
  border-radius: 6px;
}
.card:focus-visible, .role:focus-visible { outline-offset: 5px; }


/* ==========================================================================
   7d. POSTCODE + ROUTE
   ========================================================================== */
.pc-field { position: relative; }
.pc-field .input { padding-right: 46px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.pc-field .input::placeholder { text-transform: none; letter-spacing: normal; font-weight: 400; }

.pc-state {
  position: absolute;
  top: 50%; right: 15px;
  transform: translateY(-50%);
  width: 18px; height: 18px;
  pointer-events: none;
}
.pc-state svg { width: 100%; height: 100%; }
.pc-state .i-spin { animation: ly-spin .8s linear infinite; color: var(--tx-lo); }
.pc-state > * { display: none; }
.pc-field[data-state="checking"] .i-spin { display: block; }
.pc-field[data-state="ok"]       .i-ok   { display: block; color: var(--accent); }
.pc-field[data-state="bad"]      .i-bad  { display: block; color: #FF8B8B; }

.pc-result {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 9px;
  font-size: var(--t-sm);
  color: var(--tx-mid);
}
.pc-result strong { color: var(--tx-hi); }
.pc-badge {
  padding: 4px 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--accent-line);
  background: color-mix(in srgb, var(--accent-soft) 12%, transparent);
  color: var(--accent);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.pc-badge--extended { border-color: rgba(245, 212, 0, .4); background: rgba(245, 212, 0, .12); color: #E9C93A; }
.pc-badge--national { border-color: var(--line-strong); background: var(--glass); color: var(--tx-mid); }

/* --- Quick-quote readout in the hero card -------------------------------- */
.quick-out {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 18px;
  padding: 16px 18px;
  border: 1px solid var(--accent-line);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--accent-soft) 10%, transparent);
  animation: ly-step .4s var(--ease-out) both;
}
.quick-out__lbl {
  display: block;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tx-lo);
}
.quick-out__val {
  display: block;
  margin-top: 5px;
  font-family: var(--f-cond);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
}

/* --- Route summary card -------------------------------------------------- */
.route-card {
  margin-top: var(--s-6);
  padding: clamp(20px, 2.4vw, 28px);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-lg);
  background: linear-gradient(150deg, color-mix(in srgb, var(--accent-soft) 10%, transparent), var(--glass));
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);
}
.route-card.is-on { opacity: 1; transform: none; }

.route-card__ends { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; }
.route-card__end .lbl {
  display: block;
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tx-lo);
  margin-bottom: 5px;
}
.route-card__end .pc {
  display: block;
  font-family: var(--f-cond);
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1;
  color: var(--tx-hi);
  letter-spacing: .02em;
}
.route-card__end .place { display: block; font-size: var(--t-sm); color: var(--tx-mid); margin-top: 5px; }
.route-card__end--to { text-align: right; }

.route-mini { position: relative; width: clamp(70px, 16vw, 150px); height: 34px; }
.route-mini svg { width: 100%; height: 100%; overflow: visible; }
.route-mini__line { fill: none; stroke: var(--line-strong); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 6 7; }
.route-mini__van  { width: 26px; }

.route-card__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.route-card__facts div { text-align: center; }
.route-card__facts dt { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tx-lo); }
.route-card__facts dd {
  margin-top: 6px;
  font-family: var(--f-cond);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
}
.route-card__note { margin-top: 16px; font-size: var(--t-sm); color: var(--tx-lo); text-align: center; }

@media (max-width: 640px) {
  .route-card__ends { grid-template-columns: 1fr; text-align: left; }
  .route-card__end--to { text-align: left; }
  .route-card__facts { grid-template-columns: 1fr; }
  .route-card__facts div { display: flex; justify-content: space-between; align-items: baseline; }
  .route-card__facts dd { font-size: 1.25rem; }
}


/* ==========================================================================
   7e. THE STAGE — cinematic parallax van scene
   ========================================================================== */
.stage {
  position: relative;
  padding-block: clamp(40px, 5vw, 70px) 0;
}
.stage__scene {
  position: relative;
  width: 100%;
  aspect-ratio: 1440 / 420;
  max-height: 62svh;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-bottom: 0;
  background: var(--stage-sky, linear-gradient(180deg, #0B1A17 0%, #12312A 55%, #164134 100%));
}
[data-theme="light"] .stage__scene {
  --stage-sky: linear-gradient(180deg, #DCEBE3 0%, #EAF4EE 50%, #F3F9F5 100%);
}
.stage__scene svg { width: 100%; height: 100%; display: block; }

/* Parallax bands — two copies of each layer scroll seamlessly */
.stage__layer { animation: ly-band linear infinite; }
.stage__layer--far  { animation-duration: 64s; }
.stage__layer--mid  { animation-duration: 38s; }
.stage__layer--near { animation-duration: 17s; }
.stage__dashes      { animation: ly-band 2.6s linear infinite; }
@keyframes ly-band { to { transform: translateX(-1440px); } }

/* Speed multiplier written by JS as the section scrolls through view */
.stage__scene { --speed: 1; }
.stage__layer, .stage__dashes { animation-duration: calc(var(--base, 30s) / var(--speed)); }
.stage__layer--far  { --base: 64s; }
.stage__layer--mid  { --base: 38s; }
.stage__layer--near { --base: 17s; }
.stage__dashes      { --base: 2.6s; }

/* Van sits still in frame; the world moves past it */
/* NOTE: a CSS transform replaces an SVG transform attribute entirely, so anything
   animated here must sit inside a separate positioning <g>. */
.stage__van { animation: ly-suspension 1.15s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes ly-suspension {
  0%, 100% { transform: translateY(0)   rotate(0deg); }
  25%      { transform: translateY(-2px) rotate(-.25deg); }
  60%      { transform: translateY(1.5px) rotate(.2deg); }
}
.stage__wheel { transform-box: fill-box; transform-origin: center; animation: ly-spin .42s linear infinite; }
.stage__beam  { animation: ly-beam 3.6s ease-in-out infinite; }
@keyframes ly-beam { 0%,100% { opacity: .30; } 50% { opacity: .55; } }

.stage__puff { animation: ly-puff 2.1s ease-out infinite; transform-box: fill-box; }
.stage__puff:nth-of-type(2) { animation-delay: .7s; }
.stage__puff:nth-of-type(3) { animation-delay: 1.4s; }
@keyframes ly-puff {
  0%   { opacity: .35; transform: translate(0,0) scale(.5); }
  100% { opacity: 0;   transform: translate(-70px,-16px) scale(2.2); }
}

.stage__pin { animation: ly-pin 7s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; opacity: 0; }
.stage__pin:nth-of-type(1) { animation-delay: .4s; }
.stage__pin:nth-of-type(2) { animation-delay: 2.7s; }
.stage__pin:nth-of-type(3) { animation-delay: 4.9s; }
@keyframes ly-pin {
  0%, 6%    { opacity: 0; transform: translateY(14px) scale(.6); }
  12%, 26%  { opacity: 1; transform: translateY(0) scale(1); }
  34%, 100% { opacity: 0; transform: translateY(-10px) scale(.9); }
}

.stage__ripple { animation: ly-pulse 2.8s var(--ease-out) infinite; transform-box: fill-box; transform-origin: center; }

/* Readout strip sitting under the scene */
.stage__hud {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--line);
  border-radius: 0 0 var(--r-xl) var(--r-xl);
  overflow: hidden;
  background: var(--line);
}
.stage__hud > div {
  padding: 20px clamp(14px, 2vw, 26px);
  background: var(--surface-1);
}
.stage__hud dt {
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tx-lo);
}
.stage__hud dd {
  margin-top: 8px;
  display: flex;
  align-items: baseline;
  gap: 5px;
  font-family: var(--f-cond);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 700;
  line-height: 1;
  color: var(--tx-hi);
}
.stage__hud dd i { font-style: normal; font-size: .6em; color: var(--accent); }

@media (max-width: 900px) { .stage__hud { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .stage__scene { aspect-ratio: 3 / 2; } }

@media (prefers-reduced-motion: reduce) {
  .stage__layer, .stage__dashes, .stage__van, .stage__wheel,
  .stage__beam, .stage__puff, .stage__pin, .stage__ripple { animation: none !important; }
  .stage__pin { opacity: 1; }
}

/* ==========================================================================
   7f. SHOWREEL — the van video, framed rather than buried
   ========================================================================== */
.reel {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--line-strong);
  background: #000;
  box-shadow: var(--sh-lg);
  aspect-ratio: 16 / 9;
}
.reel video, .reel img { width: 100%; height: 100%; object-fit: cover; opacity: 1; }
.reel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(0 0 0 / .32) 0%, transparent 26%, transparent 62%, rgb(0 0 0 / .62) 100%);
  pointer-events: none;
}
.reel__meta {
  position: absolute;
  left: clamp(18px, 2.4vw, 32px);
  bottom: clamp(16px, 2.2vw, 28px);
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.reel__tag {
  padding: 7px 14px;
  border-radius: var(--r-pill);
  border: 1px solid rgb(255 255 255 / .22);
  background: rgb(0 0 0 / .42);
  backdrop-filter: blur(10px);
  color: #fff;
  font-size: var(--t-sm);
  font-weight: 600;
}
.reel__play {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  cursor: pointer;
}
.reel__play span {
  display: grid;
  place-items: center;
  width: clamp(64px, 8vw, 92px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgb(255 255 255 / .32);
  background: rgb(0 0 0 / .34);
  backdrop-filter: blur(12px);
  color: #fff;
  transition: transform var(--dur-3) var(--ease-spring), background var(--dur-2) var(--ease-out);
}
.reel__play:hover span { transform: scale(1.08); background: var(--cta-bg); color: var(--cta-fg); border-color: transparent; }
.reel__play svg { width: 34%; height: 34%; margin-left: 8%; }
.reel__play::before {
  content: "";
  position: absolute;
  width: clamp(64px, 8vw, 92px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgb(255 255 255 / .3);
  animation: ly-pulse 2.6s var(--ease-out) infinite;
}
.reel.is-playing .reel__play { opacity: 0; pointer-events: none; }
.reel.is-playing::after { opacity: .55; }
.reel__play { transition: opacity var(--dur-3) var(--ease-out); }


/* ==========================================================================
   7g. LIVE TRACKING
   ========================================================================== */
.map-frame {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  background:
    radial-gradient(700px 420px at 32% 34%, color-mix(in srgb, var(--accent-soft) 12%, transparent), transparent 70%),
    var(--surface-1);
}
.map-frame svg { display: block; width: 100%; height: auto; }

.map__grid line { stroke: var(--line); stroke-width: 1; }
.map__land  { fill: color-mix(in srgb, var(--brand-700) 18%, transparent); stroke: var(--line-strong); stroke-width: 1.5; }
.map__water { fill: color-mix(in srgb, var(--brand-900) 45%, transparent); }
.map__thames { fill: none; stroke: color-mix(in srgb, #7FD4FF 40%, transparent); stroke-width: 6; stroke-linecap: round; opacity: .55; }
.map__m25   { fill: none; stroke: var(--line-strong); stroke-width: 1.5; stroke-dasharray: 5 6; }
.map__label { fill: var(--tx-lo); font-size: 13px; font-family: var(--f-cond); letter-spacing: .12em; text-transform: uppercase; }

.map__trail { fill: none; stroke-width: 2.5; opacity: .22; stroke-linecap: round; stroke-dasharray: 7 8; }
.map__done  { fill: none; stroke-width: 3;   opacity: .9;  stroke-linecap: round; transition: stroke-dashoffset .2s linear; }
.map__stop text { fill: var(--tx-lo); font-size: 11px; font-family: var(--f-cond); letter-spacing: .1em; }
.map__stop.is-origin text { fill: var(--tx-mid); }
.map__halo { animation: ly-pulse 2.6s var(--ease-out) infinite; transform-box: fill-box; transform-origin: center; }
.map__reg { fill: var(--tx-hi); font-size: 11px; font-weight: 700; font-family: var(--f-cond); letter-spacing: .1em; }

.map-legend {
  position: absolute;
  left: 18px; top: 18px;
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgb(var(--scrim-rgb) / .72);
  backdrop-filter: blur(14px);
  font-size: var(--t-sm);
}
.map-legend b { display: flex; align-items: center; gap: 8px; color: var(--tx-hi); font-weight: 600; }
.map-legend i { width: 9px; height: 9px; border-radius: 50%; display: block; }

.map-live {
  position: absolute;
  right: 18px; top: 18px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 16px;
  border: 1px solid var(--accent-line);
  border-radius: var(--r-pill);
  background: rgb(var(--scrim-rgb) / .72);
  backdrop-filter: blur(14px);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--tx-hi);
}
.map-live .dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.map-live .dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--accent); animation: ly-pulse 2s var(--ease-out) infinite; }
.map-live time { font-variant-numeric: tabular-nums; color: var(--accent); }

/* --- Fleet board --------------------------------------------------------- */
.vanrow {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) minmax(0, 1.2fr) auto;
  gap: clamp(12px, 2vw, 22px);
  align-items: center;
  padding: 18px clamp(16px, 2vw, 24px);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--glass);
  transition: border-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.vanrow + .vanrow { margin-top: 10px; }
.vanrow:hover { border-color: var(--accent-line); transform: translateX(3px); }
.vanrow__dot { width: 10px; height: 10px; border-radius: 50%; }
.vanrow__meta { font-size: var(--t-sm); color: var(--tx-lo); margin-top: 6px; }
.vanrow__bar { height: 5px; margin-top: 9px; border-radius: 3px; background: var(--glass-strong); overflow: hidden; }
.vanrow__bar i { display: block; height: 100%; border-radius: inherit; }
.vanrow__count { text-align: right; white-space: nowrap; }
.vanrow__count strong { font-family: var(--f-cond); font-size: 1.6rem; color: var(--tx-hi); line-height: 1; }
.vanrow__count span { display: block; font-size: var(--t-sm); color: var(--tx-lo); margin-top: 3px; }

/* --- Consignment result -------------------------------------------------- */
.track-result {
  padding: clamp(24px, 3vw, 38px);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-lg);
  background: linear-gradient(158deg, var(--fill-1), var(--fill-2));
  animation: ly-step .45s var(--ease-out) both;
}
.track-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px; }
.track-head h3 { font-family: var(--f-cond); font-size: 2rem; letter-spacing: .06em; margin: 8px 0 6px; }
.track-status {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 16px;
  border: 1px solid var(--accent-line);
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--accent-soft) 12%, transparent);
  color: var(--accent);
  font-size: var(--t-sm); font-weight: 700;
}
.track-status .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.track-status.is-done { border-color: var(--line-strong); background: var(--glass); color: var(--tx-mid); }

.track-route { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; margin: 28px 0; }
.track-route .lbl { display: block; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tx-lo); }
.track-route .pc { display: block; margin-top: 5px; font-family: var(--f-cond); font-size: 1.3rem; font-weight: 700; color: var(--tx-hi); letter-spacing: .04em; }
.track-route__bar { position: relative; height: 5px; border-radius: 3px; background: var(--glass-strong); }
.track-route__bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--brand-600), var(--accent)); transition: width .8s var(--ease-out); }
.track-route__van { position: absolute; top: -15px; width: 26px; transform: translateX(-50%); transition: left .8s var(--ease-out); }

.track-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 20px 0; border-block: 1px solid var(--line); }
.track-facts dt { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tx-lo); }
.track-facts dd { margin-top: 7px; color: var(--tx-hi); font-weight: 600; }

.track-steps { list-style: none; padding: 0; margin: 26px 0 0; position: relative; }
.track-steps::before { content: ""; position: absolute; left: 7px; top: 12px; bottom: 12px; width: 1px; background: var(--line-strong); }
.track-steps li { position: relative; display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 16px; padding-bottom: 22px; }
.track-steps li:last-child { padding-bottom: 0; }
.track-steps__mark { position: relative; z-index: 1; width: 15px; height: 15px; margin-top: 3px; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--surface-1); }
.track-steps li.is-done .track-steps__mark { border-color: var(--accent); background: var(--accent); }
.track-steps strong { display: block; color: var(--tx-hi); }
.track-steps li:not(.is-done) strong { color: var(--tx-lo); }
.track-steps__when { display: block; font-size: var(--t-sm); color: var(--accent); margin-top: 3px; }
.track-steps li:not(.is-done) .track-steps__when { color: var(--tx-lo); }
.track-steps p { font-size: var(--t-sm); color: var(--tx-mid); margin-top: 6px; }

.demo-refs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.demo-refs button {
  padding: 7px 13px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--glass);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: .8rem;
  color: var(--tx-mid);
  transition: border-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.demo-refs button:hover { border-color: var(--accent-soft); color: var(--accent); }

@media (max-width: 900px) {
  .vanrow { grid-template-columns: 12px minmax(0, 1fr) auto; }
  .vanrow > div:nth-child(3) { grid-column: 2 / -1; }
}
@media (max-width: 640px) {
  .map-legend { position: static; margin: 14px; }
  .map-live { position: static; margin: 0 14px 14px; justify-content: center; }
  .track-route { grid-template-columns: 1fr; }
  .track-route__bar { height: 4px; }
  .track-facts { grid-template-columns: 1fr; }
  .track-facts div { display: flex; justify-content: space-between; align-items: baseline; }
}


/* ==========================================================================
   7h. HEADER — utility strip + mega menu
   ========================================================================== */
:root { --topbar-h: 38px; }

.topbar {
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-1) 70%, transparent);
  backdrop-filter: blur(14px);
  font-size: var(--t-sm);
  overflow: hidden;
  transition: height var(--dur-3) var(--ease-out), opacity var(--dur-2) var(--ease-out);
}
.site-header.is-stuck .topbar { height: 0; opacity: 0; border-bottom-color: transparent; }
.topbar__inner {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.4vw, 30px);
  width: min(100% - (var(--gutter) * 2), var(--wrap-wide));
  margin-inline: auto;
  white-space: nowrap;
}
.topbar a, .topbar span { display: inline-flex; align-items: center; gap: 7px; color: var(--tx-lo); }
.topbar a { transition: color var(--dur-2) var(--ease-out); }
.topbar a:hover { color: var(--accent); }
.topbar svg { width: 13px; height: 13px; color: var(--accent-soft); flex: none; }
.topbar__spacer { margin-left: auto; }
.topbar__live { color: var(--tx-mid); font-weight: 600; }
.topbar__live .dot { position: relative; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.topbar__live .dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--accent); animation: ly-pulse 2.4s var(--ease-out) infinite; }

.site-header { height: auto; flex-direction: column; align-items: stretch; }
.site-header .nav { height: var(--nav-h); transition: height var(--dur-3) var(--ease-out); }
.site-header.is-stuck .nav { height: 62px; }

/* --- Mega menu ----------------------------------------------------------- */
.nav__item { position: relative; }
.nav__link--has-menu { display: inline-flex; align-items: center; gap: 6px; }
.nav__link--has-menu svg { width: 13px; height: 13px; transition: transform var(--dur-2) var(--ease-out); }
.nav__item.is-open .nav__link--has-menu svg { transform: rotate(180deg); }

.mega {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  z-index: 60;
  width: min(92vw, 740px);
  padding: 22px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--panel-grad);
  box-shadow: var(--sh-lg);
  transform: translateX(-50%) translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-3) var(--ease-out), visibility var(--dur-2);
}
.nav__item.is-open .mega { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.mega::before {
  content: "";
  position: absolute;
  top: -14px; left: 0; right: 0;
  height: 14px;
}
.mega__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.mega__link {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 13px;
  align-items: center;
  padding: 13px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  transition: background var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.mega__link:hover { background: var(--glass); border-color: var(--line); }
.mega__ico {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--accent-soft) 15%, transparent);
  border: 1px solid var(--accent-line);
  color: var(--accent);
}
.mega__ico svg { width: 18px; height: 18px; }
.mega__link b { display: block; color: var(--tx-hi); font-size: .95rem; font-weight: 650; }
.mega__link span { display: block; font-size: var(--t-sm); color: var(--tx-lo); margin-top: 3px; line-height: 1.45; }
.mega__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
  margin-top: 16px; padding-top: 16px;
  border-top: 1px solid var(--line);
}
.mega__foot p { font-size: var(--t-sm); color: var(--tx-lo); margin: 0; }

@media (max-width: 900px) { .mega { display: none; } }

/* ==========================================================================
   7i. FOOTER — premium rebuild
   ========================================================================== */
.footer-cta {
  position: relative;
  overflow: hidden;
  padding: clamp(38px, 5vw, 62px) clamp(24px, 4vw, 56px);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-xl);
  background:
    radial-gradient(620px 300px at 88% 10%, color-mix(in srgb, var(--accent-soft) 22%, transparent), transparent 65%),
    linear-gradient(140deg, color-mix(in srgb, var(--brand-600) 20%, transparent), var(--surface-1));
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(20px, 3vw, 44px);
  align-items: center;
}
.footer-cta h2 { font-size: var(--t-2xl); max-width: 18ch; }
.footer-cta p { margin-top: 10px; color: var(--tx-mid); max-width: 46ch; }
.footer-cta__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }

.footer-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.footer-strip span {
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--glass);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--tx-lo);
  transition: color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.footer-strip span:hover { color: var(--accent); border-color: var(--accent-line); }
.footer-strip b { color: var(--tx-mid); font-weight: 600; font-size: .78rem; align-self: center; margin-right: 4px; }

.footer__top { grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, .9fr)) minmax(0, 1.15fr); }

.footer-sub__form { display: flex; gap: 8px; margin-top: 12px; }
.footer-sub__form .input { padding: 12px 15px; font-size: .92rem; }
.footer-sub__form .btn { flex: none; padding-inline: 18px; }

.footer-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 22px 0;
  border-top: 1px solid var(--line);
}
.footer-badges div {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 15px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--glass);
  font-size: var(--t-sm);
  color: var(--tx-mid);
}
.footer-badges svg { width: 16px; height: 16px; color: var(--accent); flex: none; }

@media (max-width: 1080px) {
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer-cta { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .topbar__hide-sm { display: none !important; }
}
@media (max-width: 640px) {
  .footer-sub__form { flex-direction: column; }
  .footer-sub__form .btn { width: 100%; }
}

/* ==========================================================================
   8. RESPONSIVE
   ========================================================================== */
@media (max-width: 1080px) {
  .grid--aside { grid-template-columns: 1fr; }
  .hero__inner { grid-template-columns: 1fr; }
  .hero { min-height: auto; }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
  .showcase { grid-template-columns: 1fr; }
  .showcase__nav { position: static; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wizard__aside { position: static; }
}

@media (max-width: 900px) {
  [data-reveal="left"], [data-reveal="right"] { transform: translate3d(0, 26px, 0); }

  .nav__links { display: none; }
  .nav__burger { display: block; }
  .nav__cta .btn--desktop { display: none; }
  .split { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fab { display: flex; }
  .g-a, .g-b { grid-column: span 12; }
  .g-c, .g-d, .g-e { grid-column: span 6; }
  .g-e { display: none; }
}

@media (max-width: 640px) {
  :root { --nav-h: 66px; }
  .role { grid-template-columns: 1fr; }
  .section-head[data-index]::before { display: none; }
  .road { height: 48px; }
  .convoy { display: none; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .choices--3, .choices--2 { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .field-row .field + .field { margin-top: var(--s-5); }
  .footer__top { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
  .hero__proof { gap: 22px 32px; }
  .brand__sub { letter-spacing: .3em; font-size: .62rem; }
  .acc__panel p { padding-right: 12px; }
  .wizard__foot { flex-wrap: wrap; }
  .wizard__foot .btn { flex: 1 1 auto; }
  .g-c, .g-d { grid-column: span 12; }
  .quick-out { grid-template-columns: 1fr; gap: 14px; }
  .quick-out > div { display: flex; align-items: baseline; justify-content: space-between; }
  /* rotating the mini route 90° read oddly on a phone — just drop it */
  .route-mini { display: none; }
  .stage__hud dd { font-size: 1.35rem; }
  .steps::before { left: 22px; }
  .step { grid-template-columns: 46px minmax(0, 1fr); gap: var(--s-4); }
  .step__dot { width: 46px; height: 46px; font-size: 1.02rem; }
  .cta-band__van { display: none; }
  .toast-zone { bottom: 84px; }
}

@media print {
  .site-header, .site-footer, .fab, .drawer, .hero__media, .modal { display: none !important; }
  body { background: #fff; color: #000; }
}


/* --- alignment fixes -------------------------------------------------- */
/* The icon chip was display:block, so the 18px glyph sat 9px above centre. */
.mega__ico{display:grid!important;place-items:center!important;line-height:0}
.mega__ico > svg{display:block;margin:0}

/* Wizard headings take focus on step change so screen readers announce them.
   That should not paint a visible ring for mouse users. */
[tabindex="-1"]:focus:not(:focus-visible){outline:none!important;box-shadow:none!important}

/* Quick-quote inline validation */
.pc-field.is-invalid .input{border-color:var(--danger,#ff6b6b)}
.qq-error{display:block;margin-top:6px;font-size:.82rem;color:var(--danger,#ff6b6b)}


/* --- build credit ----------------------------------------------------- */
.footer__credit { padding-block: 0 26px; }
.footer__credit p {
  margin: 0;
  text-align: center;
  font-size: .8rem;
  color: var(--tx-lo);
  letter-spacing: .01em;
  opacity: .9;
}
.footer__credit a {
  color: var(--tx-hi);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  padding-bottom: 1px;
  transition: color var(--dur-1, .16s), border-color var(--dur-1, .16s);
}
.footer__credit a:hover,
.footer__credit a:focus-visible { color: var(--accent); border-bottom-color: var(--accent); }


/* --- light-theme header legibility -----------------------------------
   On pages with a photo hero the header sits over a light scrim in light
   mode, and the nav/breadcrumbs were still painting with dark-theme text
   (measured 1.48:1 and 2.54:1). Pin them to the light tokens. */
[data-theme="light"] .site-header .nav__link { color: var(--tx-mid) !important; }
[data-theme="light"] .site-header .nav__link:hover,
[data-theme="light"] .site-header .nav__link[aria-current="page"] { color: var(--accent) !important; }
[data-theme="light"] .crumbs { color: var(--tx-lo) !important; }
[data-theme="light"] .crumbs a { color: var(--tx-mid) !important; }
[data-theme="light"] .crumbs [aria-current] { color: var(--tx-hi) !important; }
[data-theme="light"] .topbar { color: var(--tx-mid); }


/* ======================================================================
   ROUTES — national network map
   ====================================================================== */
.net { display: grid; grid-template-columns: 1.35fr 1fr; gap: var(--s-6); align-items: start; }
@media (max-width: 980px) { .net { grid-template-columns: 1fr; } }
.net__map { position: relative; background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 10px; overflow: hidden; }
.net__map svg { display: block; width: 100%; height: auto; }
.net__gridline { stroke: var(--line); stroke-width: 1; opacity: .5; }
.net__line { fill: none; stroke: var(--line-strong); stroke-width: 1.6; opacity: .55; }
.net__line--trunk { stroke: var(--accent); stroke-width: 2.2; opacity: .38; }
.net__line--live { stroke: var(--accent); stroke-width: 2.4; opacity: .9; stroke-dasharray: 5 12; stroke-linecap: round; animation: netFlow 2.4s linear infinite; }
@keyframes netFlow { to { stroke-dashoffset: -34; } }
.net__halo { fill: var(--accent); opacity: .14; transition: opacity var(--dur-2) var(--ease-out); }
.net__dot { fill: var(--accent); }
.net__hub--regional .net__dot { fill: var(--tx-mid); }
.net__hub { cursor: pointer; }
.net__hub:hover .net__halo, .net__hub.is-on .net__halo { opacity: .34; }
.net__hub.is-on .net__dot { fill: var(--accent); }
.net__hub:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.net__label { font-size: 13px; font-weight: 600; fill: var(--tx-mid); paint-order: stroke; stroke: var(--bg); stroke-width: 3px; stroke-linejoin: round; }
.net__hub--primary .net__label { fill: var(--tx-hi); font-size: 14px; }
.net__van .van-svg { overflow: visible; }
.net__legend { position: absolute; left: 16px; bottom: 14px; display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: var(--r-md); background: rgb(var(--scrim-rgb) / .78); border: 1px solid var(--line); font-size: .78rem; color: var(--tx-mid); }
.net__legend span { display: flex; align-items: center; gap: 8px; }
.net__key { width: 16px; height: 3px; border-radius: 2px; background: var(--line-strong); }
.net__key--trunk { background: var(--accent); }
.net__key--hub { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.net__side { display: grid; gap: var(--s-4); }
.net__panel h3 { margin: 8px 0 4px; }
.net__links { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.net__links li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); font-size: var(--t-sm); }
.net__links span { color: var(--tx-lo); font-size: .78rem; text-align: right; }
.net__check form { margin-top: 14px; }
.net__check .btn { margin-top: 12px; }
.net__examples { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.net__examples .chip { padding: 6px 13px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: transparent; color: var(--tx-mid); font: inherit; font-size: .78rem; cursor: pointer; transition: border-color var(--dur-2), color var(--dur-2); }
.net__examples .chip:hover { border-color: var(--accent); color: var(--accent); }
.net__result { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); font-size: var(--t-sm); }
.net__hit { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.net__hit div { display: flex; flex-direction: column; gap: 2px; }
.net__hit strong { color: var(--tx-hi); font-size: 1.02rem; }
.net__miss { color: var(--tx-mid); }
.net__step { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: .78rem; font-weight: 700; letter-spacing: .04em; margin-bottom: 12px; }
.grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-4); }
@media (max-width: 1100px) { .grid-5 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid-5 { grid-template-columns: 1fr; } }


/* --- routes map: land, towns, vans ----------------------------------- */
.net__coast { fill: color-mix(in srgb, var(--accent) 9%, transparent); stroke: color-mix(in srgb, var(--accent) 34%, transparent); stroke-width: 1.2; stroke-linejoin: round; }
.net__towndot { fill: var(--tx-lo); opacity: .55; transition: opacity .18s, fill .18s; }
.net__townlabel { font-size: 9.5px; fill: var(--tx-lo); opacity: 0; pointer-events: none; paint-order: stroke; stroke: var(--bg); stroke-width: 3px; stroke-linejoin: round; transition: opacity .18s; }
.net__town:hover .net__towndot { opacity: 1; fill: var(--accent); }
.net__town:hover .net__townlabel { opacity: 1; }
.net__vanbody { fill: var(--accent); }
.net__vanwheel { fill: var(--bg); stroke: var(--accent); stroke-width: 1; }
.net__van--trunk .net__vanbody { fill: #FFFFFF; }
.net__van--trunk .net__vanwheel { stroke: #FFFFFF; }
.net__van { filter: drop-shadow(0 1px 2px rgb(0 0 0 / .55)); }

/* five-step row: 5 columns squeezed headings onto three lines */
.grid-5 { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
.net__flow .card { display: flex; flex-direction: column; }
.net__flow h3 { font-size: 1.05rem; line-height: 1.25; text-wrap: balance; }
.net__flow p { font-size: .92rem; }