/* ============================================================
   ZHL Supply Chain Corp — 2026 landing
   Warm sand palette · aurora gradients · grain · kinetic type ·
   bento grid · sticky-stack scroll · horizontal snap rail
   ============================================================ */

:root {
  --bg: #EFE8DC;
  --bg-raise: #FAF6EE;
  --bg-tile: #FAF6EE;
  --ink: #17140F;
  --muted: #4A453D;
  --accent: #E8821E;
  /* Darkened from #A8520A, which landed at 4.44:1 on the sand background —
     just under the 4.5 AA floor, so every link and active nav item using it
     failed. This clears it at 5.0:1 and is visually indistinguishable. */
  --accent-hot: #9C4C08;
  --amber: #C4650F;
  --line: rgba(23, 20, 15, 0.10);
  --display: "Fraunces", Georgia, serif;
  --sans: "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  --container: 1200px;
  --radius: 20px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html {
  /* Clear the fixed header when jumping to an in-page anchor */
  scroll-padding-top: 5.5rem;
}
/* Smooth scrolling switches on only once script.js has run, so the initial
   jump to a #section link is instant and its content is revealed on arrival
   rather than fading in after the animation finishes. */
html.scroll-ready { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.05rem;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 550;
  line-height: 1.05;
  margin: 0 0 0.5em;
  letter-spacing: -0.015em;
}

p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }
address { font-style: normal; }
a { color: var(--ink); }

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

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

.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 300;
  background: var(--accent); color: #17140F;
  padding: 0.6rem 1rem; text-decoration: none; border-radius: 6px;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 1rem; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.section { padding: 7rem 0; position: relative; }

.accent-italic {
  font-style: italic;
  font-weight: 400;
  color: var(--accent-hot);
}

.eyebrow {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.1rem;
}

.section-head { margin-bottom: 3.5rem; }
.section-head h2 { font-size: clamp(2.2rem, 5vw, 3.8rem); }

.section-head--row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
}

.drag-hint {
  color: var(--muted);
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 0.8rem;
  animation: nudge 2.2s var(--ease-out) infinite;
}

@keyframes nudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(8px); }
}

/* ---------- Scroll progress ---------- */

.progress {
  position: fixed; top: 0; left: 0; right: 0;
  height: 3px; z-index: 250;
  background: transparent;
}
.progress-bar {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--amber), var(--accent-hot));
}

/* ---------- Grain overlay ---------- */

.grain {
  position: fixed; inset: -50%;
  width: 200%; height: 200%;
  pointer-events: none;
  z-index: 240;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain-shift 0.9s steps(4) infinite;
}

@keyframes grain-shift {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-2%, 3%); }
  50%  { transform: translate(3%, -2%); }
  75%  { transform: translate(-3%, -3%); }
  100% { transform: translate(2%, 2%); }
}

/* ---------- Nav (glass) ---------- */

.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  padding: 0.9rem 0;
  transition: background-color 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;
}
.nav.is-scrolled {
  background: rgba(239, 232, 220, 0.78);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line);
  padding: 0.6rem 0;
}
.nav-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}
.logo { display: flex; align-items: center; gap: 0.65rem; text-decoration: none; }
.logo-mark {
  font-family: var(--display);
  font-weight: 700; font-size: 1rem; letter-spacing: 0.05em;
  color: var(--accent); background: var(--ink); border: 2px solid var(--accent);
  padding: 0.3rem 0.5rem; border-radius: 6px;
}
.logo-text {
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink);
}
/* On desktop the wrapper dissolves so its two navs sit side by side as
   direct flex children of .nav-inner; on mobile it becomes the dropdown
   panel that holds both groups. */
.nav-menu { display: contents; }
.nav-links { display: flex; gap: 1.9rem; }
.nav-links a,
.nav-side a {
  font-size: 0.92rem; font-weight: 500;
  color: var(--muted); text-decoration: none;
  transition: color 0.15s ease;
}
.nav-links a:hover,
.nav-side a:hover { color: var(--ink); }
.nav-links a[aria-current="page"],
.nav-side a[aria-current="page"] { color: var(--accent-hot); font-weight: 600; }

/* Track + About, pulled out of the main run of links and parked on the
   right-hand side next to the quote button. */
.nav-side {
  display: flex; align-items: center; gap: 1.4rem;
  margin-left: auto;
  padding-left: 1.5rem;
  border-left: 1px solid var(--line);
}
.nav-side a { letter-spacing: 0.03em; }

/* Language switcher */
.lang-toggle {
  flex: none;
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.45rem 0.9rem;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.lang-toggle:hover { border-color: var(--accent); color: var(--accent-hot); }

/* Hide content until stored-language translations apply (failsafe in i18n.js) */
html.i18n-wait body { visibility: hidden; }

/* Chinese typography: CJK-capable stacks when 中文 is active */
html.lang-zh {
  --display: "Noto Serif SC", "Songti SC", "STSong", "SimSun", Georgia, serif;
  --sans: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "IBM Plex Sans", sans-serif;
}
html.lang-zh h1, html.lang-zh h2, html.lang-zh h3 { letter-spacing: 0.02em; }
html.lang-zh .hero-title { font-size: clamp(2.4rem, 7.5vw, 5.6rem); line-height: 1.18; }
/* Faux-italic on CJK glyphs just shears them — keep the accent upright. */
html.lang-zh .soon-word--accent { font-style: normal; }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.5rem 0.55rem;
  cursor: pointer;
  flex: none;
}
.nav-toggle-bar {
  display: block;
  width: 20px; height: 2px;
  background: var(--ink);
  margin: 4px 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

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

.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.95rem; font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  padding: 0.75rem 1.6rem;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s var(--ease-out);
  will-change: transform;
}
.btn-lg { padding: 1rem 2.1rem; font-size: 1.02rem; }
.btn-accent {
  background: var(--accent); color: #17140F;
  box-shadow: 0 8px 24px rgba(232, 130, 30, 0.28);
}
/* The hover background is dark enough that the resting dark label drops to
   3.1:1 against it — the label lightens with it. */
.btn-accent:hover { background: var(--accent-hot); color: var(--bg-tile); }
.btn-ghost {
  color: var(--ink);
  border-color: var(--line);
}
.btn-ghost:hover { border-color: var(--muted); }

/* ---------- Pulse dot ---------- */

.pulse-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent-hot);
  margin-right: 0.45rem;
  vertical-align: 1px;
  animation: pulse 2s ease-out infinite;
}

@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(232, 130, 30, 0.5); }
  70%  { box-shadow: 0 0 0 10px rgba(232, 130, 30, 0); }
  100% { box-shadow: 0 0 0 0 rgba(232, 130, 30, 0); }
}

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

.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  padding: 8rem 1.5rem 6rem;
  overflow: hidden;
}
.hero-inner { position: relative; max-width: 900px; }

.hero-eyebrow {
  font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2rem;
}

.hero-title {
  font-size: clamp(2.7rem, 8.5vw, 6.4rem);
  margin-bottom: 1.6rem;
}
.hero-title .line { display: block; overflow: hidden; padding-bottom: 0.08em; }
.hero-title .word { display: inline-block; }

.hero-sub {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: var(--muted);
  max-width: 36em;
  margin: 0 auto 2.6rem;
}
.hero-sub em { color: var(--ink); font-style: italic; }

.hero-actions {
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center;
}

/* Kinetic entrance (staggered via --d) */

.kinetic {
  opacity: 0;
  transform: translateY(28px);
  animation: rise 0.9s var(--ease-out) forwards;
  animation-delay: calc(var(--d, 0) * 90ms);
}

@keyframes rise {
  to { opacity: 1; transform: translateY(0); }
}

/* Aurora background */

.aurora { position: absolute; inset: 0; overflow: hidden; }
.aurora-blob {
  position: absolute;
  width: 55vw; height: 55vw;
  min-width: 420px; min-height: 420px;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.45;
}
.aurora-blob--red {
  background: radial-gradient(circle, rgba(232, 130, 30, 0.30), transparent 65%);
  top: -18%; right: -12%;
  animation: drift-a 16s ease-in-out infinite alternate;
}
.aurora-blob--blue {
  background: radial-gradient(circle, rgba(196, 101, 15, 0.18), transparent 65%);
  bottom: -22%; left: -14%;
  animation: drift-b 19s ease-in-out infinite alternate;
}
.aurora-blob--deep {
  background: radial-gradient(circle, rgba(224, 209, 184, 0.85), transparent 60%);
  top: 25%; left: 28%;
  animation: drift-a 23s ease-in-out infinite alternate-reverse;
}

@keyframes drift-a {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-6%, 9%) scale(1.15); }
}
@keyframes drift-b {
  from { transform: translate(0, 0) scale(1.1); }
  to   { transform: translate(8%, -7%) scale(0.95); }
}


/* ---------- Marquee ---------- */

.marquee {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 1.1rem 0;
  overflow: hidden;
  background: rgba(250, 246, 238, 0.7);
}
.marquee-track {
  display: flex; align-items: center; gap: 2.5rem;
  width: max-content;
  animation: marquee 36s linear infinite;
}
.marquee-track span {
  font-family: var(--display);
  font-size: 1.05rem; font-style: italic;
  color: var(--muted);
  white-space: nowrap;
}
.marquee-track .mq-dot { color: var(--accent-hot); font-size: 0.7rem; font-style: normal; }
.marquee:hover .marquee-track { animation-play-state: paused; }

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- Scroll reveals ----------
   Reveal-on-scroll is opt-in: the hidden start state only applies once
   i18n.js has stamped <html class="js">, and script.js is what adds .in.
   If either script is blocked, fails, or is switched off, the content stays
   plainly visible instead of being stranded at opacity 0 forever. */

html.js .reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
html.js .reveal.in {
  opacity: 1;
  transform: translateY(0);
}
/* Applied for a single frame to content revealed on arrival, so it appears
   rather than fading in. */
html.js .reveal.is-instant,
html.js .tile.is-instant { transition: none; }

/* Stagger bento tiles */
.bento .reveal:nth-child(2) { transition-delay: 90ms; }
.bento .reveal:nth-child(3) { transition-delay: 180ms; }
.bento .reveal:nth-child(4) { transition-delay: 90ms; }
.bento .reveal:nth-child(5) { transition-delay: 180ms; }

/* ---------- Bento grid ---------- */

.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
}

.tile {
  background: var(--bg-tile);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.8rem;
  transition: border-color 0.25s ease, transform 0.4s var(--ease-out), opacity 0.8s var(--ease-out);
  transform-style: preserve-3d;
}
.tile:hover { border-color: rgba(232, 130, 30, 0.55); }

.tile--map { grid-column: span 4; grid-row: span 2; display: flex; flex-direction: column; }
.tile--stat, .tile--stat-duo { grid-column: span 2; }
/* Bottom row: two tiles sharing the six columns */
.bento .tile:nth-child(4),
.bento .tile:nth-child(5) { grid-column: span 3; }

.tile-label {
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.2rem;
}
.tile h3 { font-size: 1.45rem; }
.tile-body { color: var(--muted); font-size: 0.95rem; margin: 0; }

.tile--stat-duo {
  display: grid; grid-template-rows: 1fr 1fr; gap: 1rem;
}
.tile--stat-duo > div:first-child { border-bottom: 1px solid var(--line); padding-bottom: 1rem; }

.stat-big {
  font-family: var(--display);
  font-size: clamp(3.4rem, 6vw, 5rem);
  font-weight: 550;
  line-height: 0.95;
  margin: 0 0 0.35rem;
  background: linear-gradient(120deg, var(--accent-hot) 20%, var(--amber));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat-big--sm { font-size: clamp(2.1rem, 3.5vw, 2.9rem); }
.stat-caption { color: var(--muted); font-size: 0.9rem; margin: 0; }

/* Route SVG */

.route-svg { width: 100%; height: auto; margin: auto 0; }

/* Three tones only: unhighlighted land, the two endpoint countries, and the
   route layer. The endpoints are deliberately identical — they are two ends
   of one lane, not two categories. */
.route-svg {
  --map-land: rgba(23, 20, 15, 0.09);
  --map-land-edge: rgba(23, 20, 15, 0.26);
  --map-country: rgba(232, 130, 30, 0.38);
  --map-country-edge: rgba(168, 82, 10, 0.95);
  /* On the sand palette the route reads darker than the countries it crosses.
     On the old dark theme it was the lighter of the two — the relationship
     that matters is contrast against the land, not the specific direction. */
  --map-route: #A8520A;
}

.route-world {
  fill: var(--map-land);
  stroke: var(--map-land-edge);
  stroke-width: 0.5;
  stroke-linejoin: round;
}
.route-hl {
  fill: var(--map-country);
  stroke: var(--map-country-edge);
  stroke-width: 0.9;
  stroke-linejoin: round;
}
.route-plane,
.route-pin { fill: var(--map-route); }
.route-pin-hole { fill: var(--bg-tile); }
.node-ring { stroke: var(--map-route); }
.route-city {
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  letter-spacing: 0.16em; fill: var(--ink);
}
.route-port {
  font-family: var(--sans); font-size: 10.5px;
  fill: var(--muted);
}

.route-arc {
  stroke: var(--map-route);
  stroke-width: 2.2;
  stroke-dasharray: 5 6;
  animation: dash-march 1.5s linear infinite;
}
@keyframes dash-march { to { stroke-dashoffset: -22; } }

.node-ring { animation: node-pulse 2.4s ease-out infinite; }
.node-ring--late { animation-delay: 1.2s; }
@keyframes node-pulse {
  0%   { r: 6; opacity: 0.8; }
  100% { r: 20; opacity: 0; }
}

.route-times {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem;
  border-top: 1px solid var(--line);
  padding-top: 1.2rem; margin-top: 1rem;
}
.route-times li { text-align: center; }
.route-times span {
  display: block;
  font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 0.25rem;
}
.route-times strong { font-family: var(--display); font-size: 1.25rem; font-weight: 550; }
.route-times em { font-family: var(--sans); font-style: normal; font-size: 0.72rem; color: var(--muted); }

/* ---------- Services sticky stack ---------- */

.stack { display: grid; gap: 1.2rem; }

.stack-card {
  position: sticky;
  /* Every card sticks at the same height so each fully covers the one behind
     it. The cards used to be offset 16px apart, which left a sliver of the
     previous card peeking above — and since the cards carry 2.6rem of top
     padding, that sliver was always empty border, reading as a stray clipped
     box rather than a stack. */
  /* 84px, not the nav's 92px resting height: while these cards are stuck the
     nav is always in its shrunken 70px state, so 92px left a 22px gap under
     the bar instead of the intended ~14px. */
  top: 84px;
  /* Was a gradient that ran to near-black (#0D0D0F) — a leftover from the
     dark palette. On this sand/ink theme it swallowed the dark body copy and
     tags, so the lower two thirds of every card was unreadable. Now an opaque
     light gradient: still gives the stack some depth, but keeps contrast, and
     staying opaque is what lets a stuck card hide the one scrolling behind. */
  background: linear-gradient(150deg, #FFFCF6, var(--bg-raise) 65%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2.6rem;
  margin-bottom: 1.2rem;
  box-shadow: 0 -10px 30px rgba(23, 20, 15, 0.06);
}
.stack-card:last-child { margin-bottom: 0; }

.stack-head {
  display: flex; align-items: baseline; gap: 1.4rem;
  margin-bottom: 1rem;
}
.stack-num {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--accent-hot);
}
.stack-head h3 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); margin: 0; }
.stack-card > p { color: var(--muted); max-width: 56em; }

.tags { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.tags li {
  font-size: 0.8rem; font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.tags li:hover {
  border-color: var(--accent-hot);
  background: rgba(232, 130, 30, 0.12);
}

/* ---------- Industries rail ---------- */

.rail-wrap { overflow: hidden; }

/* The rail deliberately clips its last visible card as a "there is more"
   affordance, but a hard cut through the middle of a sentence reads as a
   rendering bug. Fading the edge says the same thing and looks intentional.
   The fade is dropped on whichever side has nothing left to scroll to (see
   syncRailEdges in script.js), so it never implies content that isn't there.
   It belongs on .rail rather than .rail-wrap: .rail is also a .container, so
   it is the 1200px centered box that actually clips the card — a mask on the
   full-bleed wrapper would fade the empty margin beside it instead. */
.rail {
  --fade: 90px;
  -webkit-mask-image: linear-gradient(to right,
    transparent 0, #000 var(--fade-l, 0px),
    #000 calc(100% - var(--fade-r, var(--fade))), transparent 100%);
  mask-image: linear-gradient(to right,
    transparent 0, #000 var(--fade-l, 0px),
    #000 calc(100% - var(--fade-r, var(--fade))), transparent 100%);
  display: flex; gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 1.2rem;
  scrollbar-width: none;
  cursor: grab;
}
.rail::-webkit-scrollbar { display: none; }
.rail-wrap.at-start .rail { --fade-l: 0px; }
.rail-wrap:not(.at-start) .rail { --fade-l: var(--fade); }
.rail-wrap.at-end .rail { --fade-r: 0px; }
.rail.dragging { cursor: grabbing; scroll-snap-type: none; }

.rail-card {
  flex: 0 0 min(340px, 78vw);
  scroll-snap-align: start;
  background: var(--bg-tile);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2rem;
  min-height: 240px;
  display: flex; flex-direction: column;
  transition: transform 0.4s var(--ease-out), border-color 0.25s ease;
}
.rail-card:hover {
  transform: translateY(-6px);
  border-color: rgba(232, 130, 30, 0.55);
}
.rail-num {
  font-family: var(--display); font-style: italic;
  color: var(--accent-hot);
  font-size: 0.95rem;
  margin-bottom: auto;
}
.rail-card h3 { font-size: 1.5rem; margin: 1.6rem 0 0.4rem; }
.rail-card p { color: var(--muted); font-size: 0.94rem; margin: 0; }

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

.cta {
  position: relative;
  padding: 9rem 0;
  text-align: center;
  overflow: hidden;
  border-top: 1px solid var(--line);
}
.aurora--cta .aurora-blob { opacity: 0.35; }
.cta-inner { position: relative; }
.cta-title { font-size: clamp(2.6rem, 7.5vw, 5.6rem); margin-bottom: 1.2rem; }
.cta-sub { color: var(--muted); max-width: 34em; margin: 0 auto 2.6rem; font-size: 1.1rem; }
.cta-actions {
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center;
  margin-bottom: 2.4rem;
}
.cta-address { color: var(--muted); font-size: 0.92rem; }

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

.footer {
  border-top: 1px solid var(--line);
  padding: 1.6rem 0;
}
.footer-inner {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between;
  gap: 0.7rem 1.6rem;
  font-size: 0.85rem;
  color: var(--muted);
}
/* Padded to a >=24px target height (WCAG 2.5.8); the row is flex, so the
   extra block padding grows the hit area without moving the baselines. */
.footer a {
  display: inline-block;
  padding: 0.3rem 0;
  color: var(--muted); text-decoration: none;
}
.footer a:hover { color: var(--ink); }
.build-tag {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  /* 0.62 alpha put this at 3.09:1 on the sand background — under the 4.5
     floor for text this size. Full --muted clears it at 8.0:1. */
  color: var(--muted);
  cursor: help;
}

@media (max-width: 767px) {
  .footer-inner {
    justify-content: center;
    text-align: center;
    gap: 0.6rem 1rem;
  }
  /* Slightly tighter type and gap so the two legal links and the support
     email clear a single row on a phone rather than breaking apart. */
  .footer-inner,
  .footer .footer-legal a { font-size: 0.8rem; }
  /* Two rows: the copyright and its build stamp, then the links and email.
     script.js appends the build stamp last, so `order` pulls it up beside the
     copyright, and a zero-height full-width ::after forces the line break
     ahead of the links — they are all direct flex children now that
     .footer-legal is display:contents. */
  .footer-inner > :first-child { order: 1; }
  .footer-inner > .build-tag { order: 2; }
  .footer-inner::after {
    content: "";
    order: 3;
    flex-basis: 100%;
    height: 0;
    margin-top: -0.6rem;
  }
  .footer .footer-legal a { order: 4; }
  .footer-inner > a[href^="mailto:"] { order: 5; }
}

/* ---------- Tracking: coming soon ---------- */

.soon {
  position: relative;
  overflow: hidden;
  min-height: 100svh;
  display: flex; align-items: center;
  padding: 9rem 0 5rem;
  text-align: center;
}
.soon-inner { position: relative; }

.soon-eyebrow {
  font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.6rem;
}

/* The whole point of the page: two words, as big as the viewport allows. */
.soon-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(3.2rem, 15vw, 11rem);
  line-height: 0.92;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 0 0 1.8rem;
}
.soon-word { display: block; }
.soon-word--accent { color: var(--accent-hot); font-style: italic; }

.soon-lede {
  font-size: clamp(1.02rem, 1.6vw, 1.2rem);
  color: var(--muted);
  max-width: 34em;
  margin: 0 auto 2.4rem;
}

.soon-actions {
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center;
}

.soon-note {
  margin: 2.4rem auto 0;
  max-width: 34em;
  font-size: 0.92rem;
  color: var(--muted);
}

/* ---------- Quote page ---------- */

.quote-hero {
  position: relative;
  padding: 11rem 0 4rem;
  overflow: hidden;
}
.quote-hero h1 {
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  margin-bottom: 0.4em;
}
.quote-hero .lede {
  color: var(--muted);
  max-width: 46em;
  font-size: 1.1rem;
  margin: 0;
}

.quote-layout {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: 1rem;
  align-items: start;
}

.quote-form {
  background: var(--bg-tile);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2.5rem;
}
.quote-form h2 { font-size: 1.6rem; margin-bottom: 1.6rem; }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
}

.field { margin-bottom: 1.2rem; }
.field > label {
  display: block;
  font-size: 0.82rem; font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink);
  margin-bottom: 0.4rem;
}
.req { color: var(--accent-hot); }

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 0.98rem;
  color: var(--ink);
  background: rgba(23, 20, 15, 0.035);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.8rem 1rem;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(232, 130, 30, 0.07);
}
.field input::placeholder,
.field textarea::placeholder { color: rgba(74, 69, 61, 0.55); }
.field textarea { resize: vertical; min-height: 150px; }

/* Service checkboxes as selectable chips */

.chips {
  display: flex; flex-wrap: wrap; gap: 0.6rem;
  border: 0; padding: 0; margin: 0 0 0.2rem;
}
.chips legend {
  padding: 0;
  font-size: 0.82rem; font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink);
  margin-bottom: 0.65rem;
}
.chip { position: relative; }
.chip input {
  position: absolute; inset: 0;
  opacity: 0;
  cursor: pointer;
}
.chip span {
  display: inline-block;
  font-size: 0.88rem; font-weight: 500;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.5rem 1.1rem;
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}
.chip input:hover + span { border-color: var(--muted); color: var(--ink); }
.chip input:checked + span {
  color: #17140F;
  background: var(--accent);
  border-color: var(--accent);
  font-weight: 600;
}
.chip input:focus-visible + span {
  outline: 2px solid var(--accent-hot);
  outline-offset: 3px;
}

.quote-form .btn { border: 0; cursor: pointer; }
.quote-form .btn:disabled { opacity: 0.6; cursor: wait; }
.form-note {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 1rem 0 0;
}

/* Honeypot field — visually removed, invisible to real users */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form-status {
  display: none;
  font-size: 0.95rem;
  font-weight: 500;
  margin: 1rem 0 0;
  padding: 0.8rem 1.1rem;
  border-radius: 12px;
  border: 1px solid transparent;
}
.form-status.is-ok {
  display: block;
  color: #1C6B36;
  border-color: rgba(28, 107, 54, 0.35);
  background: rgba(28, 107, 54, 0.08);
}
.form-status.is-error {
  display: block;
  color: #B3321B;
  border-color: rgba(179, 50, 27, 0.35);
  background: rgba(179, 50, 27, 0.07);
}

/* Contact side panel */

.quote-side {
  display: grid; gap: 1rem;
  /* The contact tiles are much shorter than the form, which left the right
     half of the page empty from about 40% down. Sticking them keeps the
     phone number and address in view for the whole scroll. Same 84px offset
     as the sticky service cards, so both clear the shrunken nav alike. */
  position: sticky;
  top: 84px;
}
.side-tile {
  background: var(--bg-tile);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.6rem;
}
.side-tile h3 { font-size: 1.15rem; margin-bottom: 0.8rem; }
.side-tile p { color: var(--muted); font-size: 0.92rem; margin: 0; }
.side-list li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.92rem;
}
.side-list li:last-child { border-bottom: 0; }
.side-list .k { color: var(--muted); }
.side-list a { color: var(--ink); font-weight: 600; text-decoration: none; }
.side-list a:hover { color: var(--accent-hot); }

/* ---------- Tracking page ---------- */

.track-form {
  display: flex;
  gap: 0.7rem;
  max-width: 560px;
  margin-top: 2.2rem;
}
.track-form input {
  flex: 1;
  min-width: 0;
  font-family: var(--sans);
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  color: var(--ink);
  background: rgba(23, 20, 15, 0.035);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.9rem 1.4rem;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.track-form input:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(232, 130, 30, 0.07);
}
.track-form .btn { border: 0; cursor: pointer; }
.track-form .btn:disabled { opacity: 0.6; cursor: wait; }

.track-hint {
  color: var(--muted);
  font-size: 0.88rem;
  margin-top: 0.9rem;
}
.demo-link {
  font: inherit;
  font-weight: 600;
  color: var(--accent-hot);
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(156, 76, 8, 0.45);
  padding: 0;
  cursor: pointer;
}
.demo-link:hover { border-bottom-color: var(--accent-hot); }

.track-section { padding-top: 1rem; }

.track-demo-note {
  font-size: 0.85rem;
  color: var(--muted);
  border: 1px dashed rgba(232, 130, 30, 0.5);
  border-radius: 12px;
  padding: 0.6rem 1rem;
  margin-bottom: 1rem;
}

.track-banner {
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  background: var(--bg-tile);
  padding: 1.6rem 1.8rem;
  margin-bottom: 1rem;
}
.track-banner h2 {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  margin-bottom: 0.25em;
  letter-spacing: 0.02em;
}
.track-banner p { color: var(--muted); margin: 0; }
.track-banner strong { color: var(--ink); font-weight: 600; }
.track-banner--done { border-left-color: #1C6B36; }
.track-banner--info { border-left-color: var(--amber); }
/* The error bar was #FF9B87, a pale pink left over from the dark theme that
   reads at 1.68:1 on sand — the one state that must be loudest was the one
   you could not see. Matches .form-status.is-error. */
.track-banner--error { border-left-color: #B3321B; }
.track-banner--loading { border-left-color: var(--line); }

/* Loading skeleton — stands in for the dashboard while the lookup is in
   flight, so the panel is never blank and never shows a placeholder count. */
.track-skeleton { display: grid; gap: 0.9rem; margin-top: 1rem; }
.sk {
  display: block;
  border-radius: 12px;
  background: linear-gradient(
    90deg,
    rgba(23, 20, 15, 0.05) 25%,
    rgba(23, 20, 15, 0.11) 37%,
    rgba(23, 20, 15, 0.05) 63%
  );
  background-size: 400% 100%;
  animation: sk-sweep 1.4s ease-in-out infinite;
}
.sk--rail { height: 74px; }
.sk--row { height: 128px; }
@keyframes sk-sweep {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .sk { animation: none; }
}

.track-alert {
  margin-top: 0.8rem !important;
  color: var(--accent-hot) !important;
  font-size: 0.92rem;
}

.muted { color: var(--muted); font-weight: 400; }

/* Route + progress rail */

.track-route {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-tile);
  padding: 1.6rem 1.8rem 2.4rem;
  margin-bottom: 1rem;
}
.route-stops {
  font-family: var(--display);
  font-size: clamp(1.05rem, 2.2vw, 1.4rem);
  color: var(--ink);
  margin-bottom: 1.6rem;
}
.route-sep { color: var(--accent-hot); }

.rail-progress { position: relative; }
.rail-line {
  position: absolute;
  top: 7px; left: 10%; right: 10%;
  height: 2px;
  background: rgba(23, 20, 15, 0.12);
}
.rail-line-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--amber), var(--accent-hot));
  transition: width 1s var(--ease-out);
}
.rail-stops {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  position: relative;
}
.rail-stops li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  text-align: center;
}
.rail-dot {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--bg-raise);
  border: 2px solid rgba(23, 20, 15, 0.2);
  z-index: 1;
}
.rail-stops li.done .rail-dot {
  background: var(--accent);
  border-color: var(--accent);
}
.rail-stops li.current .rail-dot {
  background: var(--accent-hot);
  border-color: var(--accent-hot);
  box-shadow: 0 0 0 5px rgba(232, 130, 30, 0.25);
}
.rail-label {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.rail-stops li.current .rail-label { color: var(--ink); font-weight: 600; }

/* Key dates */

.date-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1rem;
  margin-bottom: 2.4rem;
}
.date-tile {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-tile);
  padding: 1.1rem 1.3rem;
  display: grid;
  gap: 0.2rem;
}
.date-tile .k {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.date-tile strong {
  font-family: var(--display);
  font-size: 1.12rem;
  font-weight: 550;
  color: var(--ink);
}
.date-tile .sub { font-size: 0.78rem; color: var(--muted); }

/* Container cards */

.ctn-title { font-size: 1.6rem; margin: 0 0 1rem; }

.ctn-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-tile);
  padding: 1.7rem 1.8rem;
  margin-bottom: 1rem;
}
.ctn-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.8rem;
}
.ctn-head h3 {
  font-size: 1.35rem;
  margin: 0;
  letter-spacing: 0.03em;
}
.ctn-chip {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
}
.ctn-chip--stage {
  color: #17140F;
  background: var(--accent);
  border-color: var(--accent);
}
.ctn-last { color: var(--ink); font-size: 0.98rem; margin-bottom: 1.1rem; }

.ctn-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.4rem 1.5rem;
  margin-bottom: 1rem;
}
.ctn-facts li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.9rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--line);
}
.ctn-facts span { color: var(--muted); }
.ctn-facts strong { color: var(--ink); font-weight: 600; text-align: right; }

.ctn-note {
  font-size: 0.88rem;
  color: var(--muted);
  background: rgba(23, 20, 15, 0.04);
  border-radius: 10px;
  padding: 0.7rem 1rem;
  margin-bottom: 1rem;
}

.free-dates {
  display: grid;
  gap: 0.4rem;
  margin-bottom: 1.2rem;
}
.free-date {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.9rem;
  border: 1px solid rgba(196, 101, 15, 0.3);
  background: rgba(232, 130, 30, 0.08);
  border-radius: 10px;
  padding: 0.55rem 1rem;
}
.free-date span { color: var(--muted); }
.free-date strong { color: var(--accent-hot); }
.free-date.overdue {
  border-color: rgba(179, 50, 27, 0.45);
  background: rgba(179, 50, 27, 0.08);
}
.free-date.overdue strong { color: #B3321B; }

.ctn-details { margin-top: 0.9rem; }
.ctn-details summary {
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0.4rem 0;
}
.ctn-details summary:hover { color: var(--ink); }

.timeline {
  margin: 0.7rem 0 0.4rem;
  padding-left: 1.1rem;
  border-left: 2px solid rgba(232, 130, 30, 0.4);
  display: grid;
  gap: 0.65rem;
}
.timeline li {
  position: relative;
  display: grid;
  gap: 0.1rem;
  font-size: 0.9rem;
}
.timeline li::before {
  content: "";
  position: absolute;
  left: -1.42rem;
  top: 0.35rem;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
}
.t-date { color: var(--muted); font-size: 0.78rem; letter-spacing: 0.05em; }
.t-label { color: var(--ink); }

/* ---------- About page ---------- */

.about-body {
  max-width: 720px;
  margin-bottom: 2.5rem;
}
.about-body p {
  color: var(--muted);
  font-size: 1.08rem;
  line-height: 1.75;
}
.about-body strong { color: var(--ink); }

.about-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 0 0 2.5rem;
}

.about-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.port-list li {
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.95rem;
  color: var(--ink);
}
.port-list li:last-child { border-bottom: 0; }

/* Long hub lists scroll inside their tile */
.port-list--scroll {
  max-height: 235px;
  overflow-y: auto;
  padding-right: 0.6rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(232, 130, 30, 0.6) rgba(23, 20, 15, 0.07);
}
.port-list--scroll::-webkit-scrollbar { width: 6px; }
.port-list--scroll::-webkit-scrollbar-track { background: rgba(23, 20, 15, 0.07); border-radius: 3px; }
.port-list--scroll::-webkit-scrollbar-thumb { background: rgba(232, 130, 30, 0.6); border-radius: 3px; }
.port-list--scroll:focus-visible { outline: 2px solid var(--accent-hot); outline-offset: 3px; }
.about-cols address { color: var(--muted); font-size: 0.95rem; line-height: 1.7; }

.about-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 2.2rem;
}
.about-cta h3 {
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  margin: 0;
  max-width: 24em;
}
.about-cta-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; }

@media (max-width: 1023px) {
  .about-cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
  .about-stats, .about-cols { grid-template-columns: 1fr; }
}

/* ---------- Legal pages ---------- */

.legal { max-width: 760px; }
.legal .updated {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2rem;
}
.legal h2 {
  font-size: 1.45rem;
  margin: 2.4rem 0 0.6rem;
}
.legal p, .legal li { color: var(--muted); font-size: 0.98rem; }
.legal strong { color: var(--ink); }
.legal ul { margin: 0.4rem 0 1rem; padding-left: 1.2rem; }
.legal li { list-style: disc; padding: 0.2rem 0; }
/* Underlined, not colour-only: inline links in body copy have to be
   distinguishable without relying on the orange (WCAG 1.4.1). */
.legal a {
  color: var(--accent-hot);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}
.legal a:hover { text-decoration-thickness: 2px; }
.legal code {
  font-size: 0.85em;
  background: rgba(23, 20, 15, 0.05);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.1em 0.4em;
}
/* Sits alone in its own paragraph rather than inline in a sentence, so the
   2.5.8 inline exception does not apply — pad it to a 24px target. */
.text-link-legal {
  display: inline-block;
  padding: 0.15rem 0;
  font-family: var(--display); font-style: italic; font-size: 1.05rem;
}

/* Inline link inside a paragraph of body copy */
.text-link {
  color: var(--accent-hot);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

/* Flatten the legal nav so its two links distribute as peers of the copyright,
   email and build stamp — as a flex container of its own it bunched them into a
   single clump that took up one slot in the footer row. */
.footer-legal { display: contents; }
.footer-legal a { color: var(--muted); text-decoration: none; font-size: 0.85rem; }
.footer-legal a:hover { color: var(--ink); }

/* ---------- Privacy notice banner ---------- */

.privacy-banner {
  position: fixed;
  left: 1rem; right: 1rem; bottom: 1rem;
  z-index: 280;
  max-width: 620px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  background: rgba(250, 246, 238, 0.98);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1rem 1.25rem;
  box-shadow: 0 12px 36px rgba(23, 20, 15, 0.14);
}
.privacy-banner p {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--muted);
}
.privacy-banner strong { color: var(--ink); }
.privacy-banner a { color: var(--accent-hot); }
.privacy-banner .btn {
  flex: none;
  border: 0;
  cursor: pointer;
  padding: 0.55rem 1.2rem;
  font-size: 0.85rem;
}

@media (max-width: 600px) {
  .privacy-banner { flex-direction: column; align-items: stretch; text-align: left; }
  .privacy-banner .btn { text-align: center; }
}

/* ---------- Responsive ---------- */

@media (max-width: 1023px) {
  .quote-layout { grid-template-columns: 1fr; }
  /* Stacked above the form, not beside it — nothing to follow. */
  .quote-side { position: static; }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .tile--map { grid-column: span 2; grid-row: auto; }
  .tile--stat, .tile--stat-duo,
  .bento .tile:nth-child(4),
  .bento .tile:nth-child(5) { grid-column: span 1; }
}

@media (max-width: 767px) {
  .section { padding: 4.5rem 0; }

  /* Nav links collapse into a hamburger dropdown — same links as desktop */
  .nav-toggle { display: block; }
  .nav-menu {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    background: rgba(239, 232, 220, 0.97);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 0.4rem 1.5rem 0.9rem;
  }
  .nav-menu.is-open { display: flex; }
  .nav-links,
  .nav-side {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }
  .nav-links a,
  .nav-side a {
    font-size: 1rem;
    color: var(--ink);
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--line);
  }
  .nav-side a:last-child { border-bottom: 0; }

  .nav .btn { padding: 0.55rem 1.15rem; font-size: 0.85rem; }
  .lang-toggle { padding: 0.4rem 0.7rem; font-size: 0.75rem; }
  .nav-inner { gap: 0.7rem; }
  .logo-text { display: none; }
  .hero { min-height: 92svh; padding-top: 7rem; }
  .bento { grid-template-columns: 1fr; }
  .tile--map,
  .tile--stat, .tile--stat-duo,
  .bento .tile:nth-child(4),
  .bento .tile:nth-child(5) { grid-column: span 1; }
  .route-times { grid-template-columns: repeat(2, 1fr); gap: 1rem 0.5rem; }
  .stack-card { padding: 1.8rem; position: static; }
  .section-head--row { flex-direction: column; align-items: flex-start; }
  .cta { padding: 6rem 0; }
  .quote-hero { padding: 8rem 0 3rem; }
  .quote-form { padding: 1.6rem; }
  /* iOS zooms the viewport when a focused control's text is under 16px, and
     never zooms back out. 0.98rem lands at 15.68px, so every field in the
     quote form triggered it. */
  .field input[type="text"],
  .field input[type="email"],
  .field input[type="tel"],
  .field textarea { font-size: 16px; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .track-form { flex-direction: column; }
  /* A 90px fade eats most of the narrow peeking card at this width. */
  .rail { --fade: 60px; }
  .rail-label { font-size: 0.62rem; letter-spacing: 0.04em; }
  .ctn-card, .track-route, .track-banner { padding: 1.2rem 1.3rem; }
  .track-banner h2 { word-break: break-word; }
  .date-grid { grid-template-columns: repeat(2, 1fr); gap: 0.7rem; }
  .date-tile { padding: 0.9rem 1rem; }
  .ctn-head h3 { font-size: 1.15rem; }
  .ctn-facts { grid-template-columns: 1fr; }
  .route-stops { line-height: 1.4; }
}

/* Small phones. Below roughly 374px the nav's four items hit their
   min-content widths and stopped shrinking, so the row overflowed: at 320px
   (the width WCAG 1.4.10 Reflow asks for) the hamburger sat fully off-screen
   behind body's overflow-x clip, leaving no way to reach the navigation at
   all. Tightening the gap, the padding, and the two pill controls brings the
   row back inside the viewport. */
@media (max-width: 400px) {
  .nav-inner { gap: 0.45rem; padding: 0 1rem; }
  .nav .btn { padding: 0.5rem 0.8rem; font-size: 0.78rem; }
  .lang-toggle { padding: 0.35rem 0.5rem; font-size: 0.72rem; }
}

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .kinetic {
    animation: none;
    opacity: 1;
    transform: none;
  }
  html.js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .grain,
  .aurora-blob,
  .marquee-track,
  .pulse-dot,
  .node-ring,
  .route-arc,
  .drag-hint { animation: none !important; }

  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}