/* ============================================================
   LUXAMANA LOGISTICS — "Hi-vis amber on asphalt"
   Surfaces: asphalt (dark) / gold (drenched) / paper (spec sheet)
   Type: Barlow Condensed (display) + Barlow (body)
   ============================================================ */

:root {
  --asphalt: #14110b;
  --asphalt-2: #1d1812;
  --asphalt-3: #272015;
  --gold: #fdc810;
  --gold-deep: #e3b206;
  --gold-ink: #7a6100; /* stamped-amber for text on paper surfaces (≥4.5:1 on --paper) */
  --paper: #f3efe6;
  --paper-2: #eae4d5;
  --ink: #191512;
  --ink-soft: #57503f;
  --chalk: #f0ead9;
  --chalk-dim: #a89f8c;
  --line-dark: #2e2a20;
  --line-paper: #d6cfba;
  --steel: #386fa4;

  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: "Barlow", "Segoe UI", sans-serif;

  --step--1: clamp(0.83rem, 0.8rem + 0.18vw, 0.95rem);
  --step-0: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --step-1: clamp(1.35rem, 1.2rem + 0.7vw, 1.8rem);
  --step-2: clamp(1.8rem, 1.5rem + 1.5vw, 2.7rem);
  --step-3: clamp(2.6rem, 2rem + 3vw, 4.4rem);
  --step-4: clamp(3.4rem, 2.4rem + 5.4vw, 7rem);
  --step-5: clamp(4rem, 2.5rem + 8vw, 9.5rem);

  --space-1: clamp(0.5rem, 0.5vw, 0.75rem);
  --space-2: clamp(1rem, 1.2vw, 1.5rem);
  --space-3: clamp(1.75rem, 2.5vw, 3rem);
  --space-4: clamp(3rem, 5vw, 5.5rem);
  --space-5: clamp(4.5rem, 9vw, 10rem);

  --gutter: clamp(1.25rem, 4vw, 4rem);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--chalk);
  background: var(--asphalt);
  overflow-x: hidden;
}
img, svg, video, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }
ul, ol { list-style: none; }
::selection { background: var(--gold); color: var(--ink); }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.on-paper :focus-visible { outline-color: var(--ink); }

.skip-link {
  position: absolute; left: -200vw; top: 0; z-index: 200;
  background: var(--gold); color: var(--ink); padding: 0.6rem 1.2rem;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

/* ---------- typography ---------- */
h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: 0.005em;
}
.h-giant { font-size: var(--step-5); font-weight: 900; }
.h-xl { font-size: var(--step-4); font-weight: 900; }
.h-lg { font-size: var(--step-3); }
.h-md { font-size: var(--step-2); }
.h-sm { font-size: var(--step-1); font-weight: 700; }
p { max-width: 68ch; }
.lede { font-size: var(--step-1); line-height: 1.45; font-weight: 400; }
.dim { color: var(--chalk-dim); }
.on-paper .dim { color: var(--ink-soft); }
.gold-text { color: var(--gold); }

/* kicker: route-board label */
.kicker {
  display: inline-flex; align-items: center; gap: 0.75rem;
  font-family: var(--font-display);
  font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.18em; font-size: var(--step--1);
  color: var(--gold);
}
.kicker::before { content: ""; width: 2.5rem; height: 2px; background: var(--gold); }
.on-paper .kicker { color: var(--ink); }
.on-paper .kicker::before { background: var(--ink); }

/* waypoint marker — section numbering */
.waypoint {
  display: inline-flex; align-items: baseline; gap: 0.5rem;
  font-family: var(--font-display); font-weight: 900;
  text-transform: uppercase; line-height: 1;
  border: 2px solid var(--gold); color: var(--gold);
  padding: 0.4rem 0.75rem 0.3rem;
  font-size: 1rem; letter-spacing: 0.1em;
}
.waypoint b { font-size: 1.6em; font-weight: 900; }
.on-paper .waypoint { border-color: var(--ink); color: var(--ink); }

/* ---------- layout primitives ---------- */
.wrap { width: min(100% - 2 * var(--gutter), 82rem); margin-inline: auto; }
.section { padding-block: var(--space-5); position: relative; scroll-margin-top: 5.5rem; }
.section-head {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.on-paper { background: var(--paper); color: var(--ink); }
.on-gold { background: var(--gold); color: var(--ink); }

/* hazard divider */
.hazard {
  height: 14px;
  background: repeating-linear-gradient(
    -45deg,
    var(--gold) 0 22px,
    var(--asphalt) 22px 44px
  );
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.7rem;
  font-family: var(--font-display);
  font-size: 1.15rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.07em;
  padding: 0.85rem 1.6rem 0.75rem;
  background: var(--gold); color: var(--ink);
  border: 2px solid var(--gold);
  transition: background 0.25s var(--ease-out), border-color 0.25s var(--ease-out), color 0.25s var(--ease-out), transform 0.14s var(--ease-out);
}
.btn .chev { transition: transform 0.3s var(--ease-out); }
.btn:active { transform: scale(0.97); }
.btn--ghost { background: transparent; color: var(--gold); }
.btn--ink { background: var(--ink); border-color: var(--ink); color: var(--gold); }
.on-paper .btn--ghost { color: var(--ink); border-color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--gold-deep); border-color: var(--gold-deep); }
  .btn:hover .chev { transform: translateX(5px); }
  .btn--ghost:hover { background: var(--gold); color: var(--ink); }
  .btn--ink:hover { background: #2c2418; border-color: #2c2418; }
  .on-paper .btn--ghost:hover { background: var(--ink); color: var(--gold); }
}

.link-more {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--gold); border-bottom: 2px solid transparent;
  transition: border-color 0.25s;
}
.on-paper .link-more { color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .link-more:hover { border-color: var(--gold); }
  .on-paper .link-more:hover { border-color: var(--ink); }
}

/* ---------- nav ---------- */
.nav {
  position: fixed; inset-inline: 0; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--asphalt) 88%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line-dark);
  transition: transform 0.4s var(--ease-out);
}
.nav.is-hidden { transform: translateY(-100%); }
.nav-inner {
  width: min(100% - 2 * var(--gutter), 88rem);
  margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; height: 4.25rem;
}
.nav-brand { display: flex; align-items: center; gap: 0.65rem; }
.nav-brand img { height: 1.7rem; width: auto; }
.nav-brand span {
  font-family: var(--font-display); font-weight: 900;
  font-size: 1.45rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--chalk);
}
.nav-links { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.2rem); }
.nav-links a {
  font-family: var(--font-display); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.09em; font-size: 1.02rem;
  color: var(--chalk-dim);
  transition: color 0.2s;
  padding-block: 0.4rem;
}
.nav-links a[aria-current="page"] { color: var(--gold); }
@media (hover: hover) and (pointer: fine) {
  .nav-links a:hover { color: var(--gold); }
}
.nav-cta { display: inline-flex; }
.nav-cta .btn { padding: 0.5rem 1.1rem 0.4rem; font-size: 1rem; }

/* scroll progress = road line */
.roadline {
  position: absolute; left: 0; bottom: -1px; height: 3px; width: 100%;
  transform: scaleX(0); transform-origin: left;
  background: var(--gold);
}

/* burger */
.burger {
  display: none; flex-direction: column; gap: 5px; padding: 0.5rem;
  transition: transform 0.14s var(--ease-out);
}
.burger:active { transform: scale(0.92); }
.burger span { width: 26px; height: 3px; background: var(--gold); transition: transform 0.3s var(--ease-out), opacity 0.2s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* mobile menu */
.mobile-menu {
  position: fixed; inset: 0; z-index: 90;
  background: var(--asphalt);
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--gutter);
  transform: translateY(-100%);
  /* visibility (not just transform) keeps the closed panel out of the tab order and
     off screen readers; delaying it by the slide duration preserves the exit animation */
  visibility: hidden;
  transition: transform 0.5s var(--ease-out), visibility 0s linear 0.5s;
}
.mobile-menu.is-open {
  transform: translateY(0);
  visibility: visible;
  transition: transform 0.5s var(--ease-out), visibility 0s;
}
.mobile-menu a {
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(2.4rem, 9vw, 4rem); line-height: 1.15;
  color: var(--chalk); padding-block: 0.35rem;
  border-bottom: 1px solid var(--line-dark);
  display: flex; justify-content: space-between; align-items: center;
}
@media (hover: hover) and (pointer: fine) {
  .mobile-menu a:hover { color: var(--gold); }
}
.mobile-menu a .chev { color: var(--gold); font-size: 0.5em; }
/* links cascade in once the panel has landed; exit is immediate (no delay when closing) */
.mobile-menu nav a {
  opacity: 0; transform: translateY(18px);
  transition: opacity 0.3s var(--ease-out), transform 0.4s var(--ease-out);
}
.mobile-menu.is-open nav a { opacity: 1; transform: none; }
.mobile-menu.is-open nav a:nth-child(1) { transition-delay: 0.12s; }
.mobile-menu.is-open nav a:nth-child(2) { transition-delay: 0.16s; }
.mobile-menu.is-open nav a:nth-child(3) { transition-delay: 0.2s; }
.mobile-menu.is-open nav a:nth-child(4) { transition-delay: 0.24s; }
.mobile-menu.is-open nav a:nth-child(5) { transition-delay: 0.28s; }
.mobile-menu.is-open nav a:nth-child(6) { transition-delay: 0.32s; }
.mobile-menu .menu-meta { margin-top: var(--space-3); color: var(--chalk-dim); font-size: var(--step--1); }
.mobile-menu .menu-meta a { font-size: inherit; display: inline; border-bottom: 0; padding-block: 0; }

/* ---------- hero ---------- */
.hero {
  position: relative; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-top: 6rem; overflow: hidden;
}
#hero-canvas, .hero-fallback {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
}
.hero-fallback {
  background:
    radial-gradient(ellipse 80% 55% at 70% 38%, #2a2210 0%, transparent 60%),
    var(--asphalt);
}
.hero::after { /* bottom fade so type sits on solid ground */
  content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 38%;
  background: linear-gradient(to top, var(--asphalt) 12%, transparent);
  z-index: 1; pointer-events: none;
}
.hero-content { position: relative; z-index: 2; padding-bottom: var(--space-3); }
.hero-kicker { margin-bottom: var(--space-2); }
.hero h1 {
  font-size: var(--step-5);
  font-weight: 900;
  letter-spacing: -0.01em;
  max-width: 12ch;
}
.hero h1 .line { display: block; overflow: hidden; }
.hero h1 .line > span { display: inline-block; }
.hero h1 em { font-style: normal; color: var(--gold); }
.hero-sub {
  margin-top: var(--space-2);
  font-size: var(--step-1);
  color: var(--chalk-dim);
  max-width: 44ch;
  line-height: 1.45;
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: var(--space-3); }

/* giant ghosted brand mark in the hero */
.hero-mark {
  position: absolute; z-index: 1;
  right: max(-4rem, -6vw); top: 16vh;
  width: clamp(20rem, 48vw, 46rem);
  opacity: 0.16;
  pointer-events: none; user-select: none;
  filter: drop-shadow(0 0 70px color-mix(in srgb, var(--gold) 30%, transparent));
}

/* departure board — service quick routes */
.routeboard {
  position: relative; z-index: 2;
  border-top: 1px solid var(--line-dark);
  background: color-mix(in srgb, var(--asphalt) 70%, transparent);
  backdrop-filter: blur(4px);
}
.routeboard ul {
  width: min(100% - 2 * var(--gutter), 88rem); margin-inline: auto;
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.routeboard a {
  display: block; padding: 1.1rem 1.25rem 1.2rem;
  border-left: 1px solid var(--line-dark);
  transition: background 0.25s, transform 0.14s var(--ease-out);
}
.routeboard li:last-child a { border-right: 1px solid var(--line-dark); }
.routeboard a:active { transform: scale(0.985); }
@media (hover: hover) and (pointer: fine) {
  .routeboard a:hover { background: var(--asphalt-2); }
}
.routeboard .rb-no { font-family: var(--font-display); color: var(--gold); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.12em; }
.routeboard .rb-title {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.05rem, 1.4vw, 1.45rem); line-height: 1.05; margin-top: 0.2rem;
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem;
}
.routeboard .rb-title .chev { color: var(--gold); transition: transform 0.3s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .routeboard a:hover .rb-title .chev { transform: translateX(4px); }
}
.routeboard .rb-sub { font-size: 0.85rem; color: var(--chalk-dim); margin-top: 0.3rem; line-height: 1.35; max-width: 30ch; }

/* ---------- media frames ---------- */
.frame { position: relative; overflow: hidden; background: var(--asphalt-2); }
.frame img { width: 100%; height: 100%; object-fit: cover; }
.frame .plate {
  position: absolute; left: 0; bottom: 0;
  background: var(--gold); color: var(--ink);
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; font-size: 0.85rem;
  padding: 0.35rem 0.8rem 0.3rem;
}

/* ---------- 3PL / cold chain ---------- */
.coldchain-grid {
  display: grid; grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-4); align-items: start;
}
.coldchain-copy .h-xl { max-width: 11ch; }
.coldchain-copy .h-xl em { font-style: normal; color: var(--gold); }
.coldchain-media { display: grid; gap: var(--space-2); }
.coldchain-media .frame:first-child { aspect-ratio: 4 / 3; }
.coldchain-media .frame:last-child { aspect-ratio: 16 / 7; }

/* trusted-by marquee */
.marquee-band { border-block: 1px solid var(--line-dark); padding-block: 1.1rem; overflow: hidden; }
.marquee-label {
  font-family: var(--font-display); font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; font-size: var(--step--1); color: var(--chalk-dim);
  text-align: center; margin-bottom: 0.9rem;
}
.marquee { display: flex; overflow: hidden; user-select: none; gap: 0; }
.marquee-track {
  display: flex; flex-shrink: 0; min-width: 100%;
  align-items: center; gap: 3.5rem; padding-right: 3.5rem;
  animation: marquee 38s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.3rem, 2.4vw, 2rem); color: var(--chalk-dim);
  white-space: nowrap; transition: color 0.25s;
}
@media (hover: hover) and (pointer: fine) {
  .marquee-track span:hover { color: var(--gold); }
}
.marquee-track i { color: var(--gold); font-style: normal; font-size: 0.9em; }
@keyframes marquee { to { transform: translateX(-100%); } }

/* FAMA bulletin */
.bulletin {
  margin-top: var(--space-4);
  border: 1px solid var(--line-dark);
  background: var(--asphalt-2);
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
}
.bulletin-main { padding: var(--space-3); }
.bulletin-side {
  border-left: 1px solid var(--line-dark);
  padding: var(--space-3);
  display: flex; flex-direction: column; gap: var(--space-2); justify-content: space-between;
}
.bulletin-date {
  font-family: var(--font-display); font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gold); font-size: var(--step--1);
}
.bulletin h3 { font-size: var(--step-2); margin: 0.5rem 0 var(--space-2); max-width: 16ch; }
.bulletin p + p { margin-top: 1em; }
.commitments { display: grid; gap: 0.7rem; }
.commitments li {
  display: flex; gap: 0.7rem; align-items: baseline; line-height: 1.4;
  padding-bottom: 0.7rem; border-bottom: 1px solid var(--line-dark);
}
.commitments li::before {
  content: "✓"; color: var(--gold); font-weight: 700; flex-shrink: 0;
  font-family: var(--font-display);
}
.pullquote {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: var(--step-1); line-height: 1.1; color: var(--gold);
}
.pullquote footer { font-family: var(--font-body); font-weight: 400; text-transform: none; color: var(--chalk-dim); font-size: var(--step--1); margin-top: 0.8rem; }
.bulletin-gallery { margin-top: var(--space-2); display: grid; gap: var(--space-2); }
.bulletin-gallery .bg-lead { aspect-ratio: 16 / 9; }
.bg-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
.bg-row .frame { aspect-ratio: 4 / 3; }
@media (max-width: 720px) {
  .bg-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- bulletin slider ---------- */
.bulletin-slider { margin-top: var(--space-4); position: relative; }
.bulletin-viewport { overflow: hidden; transition: height 0.45s var(--ease-out); }
.bulletin-track { display: flex; align-items: flex-start; will-change: transform; }
.bulletin-slide { flex: 0 0 100%; min-width: 0; }
.bulletin-slide .bulletin { margin-top: 0; }

.bulletin-controls {
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-2); margin-top: var(--space-3);
}
.bull-arrow {
  flex-shrink: 0;
  width: 3rem; height: 3rem; min-width: 44px; min-height: 44px;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 1.7rem; line-height: 1;
  border: 2px solid var(--gold); color: var(--gold); background: transparent;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, transform 0.14s var(--ease-out);
}
.bull-arrow:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) {
  .bull-arrow:hover { background: var(--gold); color: var(--ink); }
}
.bulletin-dots { display: flex; align-items: center; gap: 0.3rem; }
.bulletin-dots button {
  width: 40px; height: 40px; padding: 0;
  display: grid; place-items: center;
  background: transparent; border: 0; cursor: pointer;
}
.bulletin-dots button::before {
  content: ""; width: 10px; height: 10px;
  border: 2px solid var(--chalk-dim); background: transparent;
  transition: background 0.2s, border-color 0.2s, transform 0.2s var(--ease-out);
}
.bulletin-dots button[aria-selected="true"]::before {
  background: var(--gold); border-color: var(--gold); transform: rotate(45deg);
}

/* Serai slide — 3-photo grid */
.serai-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.serai-photos .frame { aspect-ratio: 4 / 5; }
@media (max-width: 720px) {
  .serai-photos { grid-template-columns: 1fr; }
  .serai-photos .frame { aspect-ratio: 4 / 3; }
}

/* Serai slide — brand-family logo wall (bright panel inset into the dark page) */
.serai-wall {
  margin-top: var(--space-2);
  background: var(--paper);
  border: 1px solid var(--line-paper);
  padding: var(--space-3);
}
.serai-wall .kicker { color: var(--ink-soft); margin-bottom: var(--space-2); }
.serai-wall-grid {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: var(--space-2); row-gap: var(--space-3); align-items: center;
}
.serai-logo { display: grid; place-items: center; padding: 0.25rem 0.4rem; }
.serai-logo img {
  height: clamp(40px, 5.2vw, 60px); width: auto; max-width: 100%;
  object-fit: contain; mix-blend-mode: multiply; opacity: 0.92;
  transition: transform 0.25s var(--ease-out), opacity 0.25s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .serai-logo:hover img { opacity: 1; transform: scale(1.07); }
}
@media (max-width: 900px) { .serai-wall-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) { .serai-wall-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) {
  .serai-logo img { transition: none; }
  .serai-logo:hover img { transform: none; }
}

/* ---------- movers workflow (paper) ---------- */
.movers-intro {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-4); align-items: end; margin-bottom: var(--space-4);
}
.movers-intro .h-xl { max-width: 12ch; }
.movers-intro .m-scope {
  font-family: var(--font-display); font-weight: 900; color: var(--gold);
  -webkit-text-stroke: 2px var(--ink);
  paint-order: stroke fill;
  font-size: var(--step-3); line-height: 0.9;
}
.movers-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border: 2px solid var(--ink); background: var(--paper);
  margin-bottom: var(--space-4);
}
.mg-cell { padding: var(--space-2) var(--space-3); border-left: 1px solid var(--line-paper); }
.mg-cell:first-child { border-left: 0; }
.mg-cell h3 { font-size: var(--step-1); margin-bottom: 0.6rem; }
.mg-cell li {
  padding: 0.45rem 0; border-bottom: 1px solid var(--line-paper);
  color: var(--ink-soft); display: flex; gap: 0.6rem; line-height: 1.4;
}
.mg-cell li::before { content: "»"; color: var(--ink); font-weight: 700; }
.mg-cell li:last-child { border-bottom: 0; }
.movers-tags { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.movers-tags span {
  border: 1px solid var(--ink); padding: 0.35rem 0.8rem;
  font-family: var(--font-display); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.08em; font-size: var(--step--1);
}

.workflow { position: relative; }
.workflow-line {
  position: absolute; left: 1.45rem; top: 0; bottom: 0; width: 2px;
  background: var(--line-paper);
}
.workflow-line .progress {
  position: absolute; inset: 0; background: var(--ink);
  transform: scaleY(0); transform-origin: top;
}
.workflow-truck {
  position: absolute; left: 1.45rem; top: 0; z-index: 2;
  width: 3rem; height: 3rem; margin-left: -1.5rem;
  background: var(--gold); border: 2px solid var(--ink);
  display: grid; place-items: center;
}
.workflow-truck svg { width: 1.6rem; height: 1.6rem; }
.wf-step {
  position: relative;
  padding: 0 0 var(--space-4) 4.5rem;
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--space-2);
}
.wf-step:last-child { padding-bottom: 0; }
.wf-step::before {
  content: ""; position: absolute; left: 1.45rem; top: 0.4rem;
  width: 14px; height: 14px; margin-left: -6px;
  background: var(--paper); border: 3px solid var(--ink);
}
.wf-no {
  font-family: var(--font-display); font-weight: 900;
  font-size: var(--step-3); line-height: 0.8; color: transparent;
  -webkit-text-stroke: 2px var(--ink);
}
.wf-step.is-active .wf-no { color: var(--gold); }
.wf-step h3 { font-size: var(--step-2); margin-top: 0.4rem; }
.wf-detail li {
  padding: 0.55rem 0; border-bottom: 1px solid var(--line-paper);
  display: flex; gap: 0.7rem; line-height: 1.45;
}
.wf-detail li::before { content: "»"; color: var(--ink); font-weight: 700; }

/* ---------- rental ---------- */
.rental-head .h-xl { max-width: 13ch; }
.rental-head .h-xl em { font-style: normal; color: var(--gold); }

.avail {
  margin-top: var(--space-3);
  border: 1px solid var(--line-dark); background: var(--asphalt-2);
  padding: var(--space-3);
}
.avail-title { font-size: var(--step-1); margin-bottom: var(--space-2); }
.avail form {
  display: grid; gap: var(--space-2);
  grid-template-columns: repeat(5, 1fr) auto; align-items: end;
}
.field { display: grid; gap: 0.4rem; }
.field label {
  font-family: var(--font-display); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.1em; font-size: 0.85rem; color: var(--chalk-dim);
}
.field input, .field select, .field textarea {
  font: inherit; color: var(--chalk);
  background: var(--asphalt); border: 1px solid var(--line-dark);
  padding: 0.7rem 0.9rem; width: 100%;
  transition: border-color 0.2s;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--gold); outline: none; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 12px) 55%; background-size: 6px 6px; background-repeat: no-repeat; }
.field ::placeholder { color: #6b6354; }

/* travel essays */
.travel { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-2); margin-top: var(--space-5); align-items: center; }
.travel + .travel { margin-top: var(--space-5); }
.travel .frame { grid-column: 1 / 7; aspect-ratio: 4 / 3; }
.travel .travel-copy { grid-column: 8 / 13; }
.travel.is-flipped .frame { grid-column: 7 / 13; order: 2; }
.travel.is-flipped .travel-copy { grid-column: 1 / 6; order: 1; }
.travel h3 { font-size: var(--step-2); max-width: 14ch; margin-bottom: var(--space-2); }
.travel p + p { margin-top: 1em; }
.travel p { color: var(--chalk-dim); }

/* ---------- fleet (paper) ---------- */
.fleet-intro { max-width: 62ch; }
.fleet-tabs {
  display: flex; flex-wrap: wrap; gap: 0.5rem; margin: var(--space-3) 0 var(--space-3);
}
.fleet-tabs button {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; font-size: 1.05rem;
  padding: 0.55rem 1.1rem 0.45rem;
  border: 2px solid var(--ink); color: var(--ink);
  transition: background 0.2s, color 0.2s, transform 0.14s var(--ease-out);
}
.fleet-tabs button[aria-selected="true"] { background: var(--ink); color: var(--gold); }
.fleet-tabs button:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .fleet-tabs button:hover:not([aria-selected="true"]) { background: var(--paper-2); }
}

.vehicle-sheet {
  border: 2px solid var(--ink);
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  background: var(--paper);
}
.vehicle-sheet[hidden] { display: none; }
.vehicle-art {
  padding: var(--space-3);
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-2);
  border-right: 2px solid var(--ink);
  background: var(--paper);
}
.vehicle-photo { margin: 0; }
.vp-stage { aspect-ratio: 4 / 3; display: grid; place-items: center; border: 1px solid var(--line-paper); }
.vp-stage img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: opacity 0.16s var(--ease-out), filter 0.16s var(--ease-out);
}
.vp-stage img.is-swapping { opacity: 0.5; filter: blur(2px); }
.vp-cap {
  font-family: var(--font-display); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.12em; font-size: 0.78rem; color: var(--ink-soft);
  border-top: 1px solid var(--line-paper); padding-top: 0.5rem; margin-top: 0.4rem;
}
.vp-rail { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.7rem; }
.vp-thumb {
  width: 72px; aspect-ratio: 4 / 3; padding: 0.15rem;
  background: transparent; border: 2px solid var(--line-paper);
  cursor: pointer; position: relative;
  transition: border-color 0.2s, transform 0.14s var(--ease-out);
}
.vp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vp-thumb:active { transform: scale(0.95); }
@media (hover: hover) and (pointer: fine) {
  .vp-thumb:hover { border-color: var(--ink); }
}
.vp-thumb.is-current { border-color: var(--ink); }
.vp-thumb.is-current::after {
  content: ""; position: absolute; left: -2px; right: -2px; bottom: -8px;
  height: 3px; background: var(--gold);
}
.vehicle-specs { display: flex; flex-direction: column; }
.vehicle-specs h3 {
  font-size: var(--step-2); padding: var(--space-2) var(--space-2) var(--space-1);
}
.spec-rows { flex: 1; }
.spec-rows > div {
  display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
  padding: 0.7rem var(--space-2);
  border-top: 1px solid var(--line-paper);
  font-size: var(--step--1);
}
.spec-rows dt {
  font-family: var(--font-display); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--ink-soft);
}
.spec-rows dd { font-weight: 600; text-align: right; }
.price-tiers { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 2px solid var(--ink); }
.price-tiers > div { padding: var(--space-2) var(--space-2); border-left: 1px solid var(--line-paper); }
.price-tiers > div:first-child { border-left: 0; }
.price-tiers .tier {
  font-family: var(--font-display); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.1em; font-size: 0.8rem; color: var(--ink-soft);
}
.price-tiers .amount { font-family: var(--font-display); font-weight: 900; font-size: var(--step-2); line-height: 1; }
.price-tiers .amount sup { font-size: 0.45em; font-weight: 700; }
.price-tiers .per { font-size: 0.8rem; color: var(--ink-soft); }
.price-request {
  border-top: 2px solid var(--ink); padding: var(--space-2);
  font-family: var(--font-display); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.08em; font-size: var(--step-0); color: var(--gold-ink);
}
.vehicle-cta { border-top: 2px solid var(--ink); padding: var(--space-2); display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; }
.vehicle-cta small { color: var(--ink-soft); }

/* delivery2u strip */
.delivery2u {
  margin-top: var(--space-3);
  border: 2px solid var(--ink);
  display: grid; grid-template-columns: auto 1fr 1fr auto; align-items: stretch;
}
.delivery2u .d2u-tag {
  background: var(--ink); color: var(--gold);
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  display: flex; align-items: center; padding: 1rem 1.3rem;
  font-size: var(--step-1); letter-spacing: 0.04em;
}
.delivery2u .d2u-cell { padding: 1rem 1.3rem; border-left: 1px solid var(--line-paper); }
.delivery2u .d2u-cell b { font-family: var(--font-display); font-size: var(--step-1); font-weight: 800; display: block; line-height: 1.1; }
.delivery2u .d2u-cell span { font-size: var(--step--1); color: var(--ink-soft); }
.delivery2u .d2u-note {
  display: flex; flex-direction: column; justify-content: center;
  padding: 1rem 1.3rem; border-left: 1px solid var(--line-paper);
  font-size: var(--step--1); color: var(--ink-soft);
}

/* ---------- warehouse ---------- */
.wss-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.wss-copy p { color: var(--chalk-dim); }
.wss-media { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-2); }
.wss-media .frame:nth-child(1) { aspect-ratio: 4 / 3; }
.wss-media .frame:nth-child(2) { aspect-ratio: 3 / 4; margin-top: var(--space-3); }
.wss-media .frame:nth-child(3) { grid-column: 1 / -1; aspect-ratio: 16 / 7; }
.why-list { margin-top: var(--space-3); counter-reset: why; }
.why-list li {
  counter-increment: why;
  display: flex; align-items: baseline; gap: 1.1rem;
  padding: 0.85rem 0; border-bottom: 1px solid var(--line-dark);
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: var(--step-1); line-height: 1;
}
.why-list li::before {
  content: counter(why, decimal-leading-zero);
  font-size: 0.95rem; color: var(--gold); font-weight: 600; letter-spacing: 0.08em;
}
.on-paper .why-list li::before { color: var(--gold-ink); }
.on-paper .why-list li { border-bottom-color: var(--line-paper); }

/* ---------- home story teaser ---------- */
.story-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--space-4); align-items: start; }
.story-grid .h-xl { max-width: 10ch; }
.story-grid .h-xl em { font-style: normal; color: var(--gold); }
.story-copy p { color: var(--chalk-dim); }
.story-copy p + p { margin-top: 1.2em; }
.story-copy .accent-line, .bigwhy-copy .accent-line, .wss-copy .accent-line {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  color: var(--gold); font-size: var(--step-1); line-height: 1.15; margin-block: 1.4em; max-width: 26ch;
}

/* ---------- stats (gold drench) ---------- */
.stats { padding-block: var(--space-4); }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.stat { padding: var(--space-2) var(--space-3); border-left: 2px solid var(--ink); }
.stat:first-child { border-left: 0; }
.stat .num {
  font-family: var(--font-display); font-weight: 900;
  font-size: var(--step-4); line-height: 0.9; letter-spacing: -0.01em;
}
.stat .num sup { font-size: 0.5em; }
.stat .label {
  font-family: var(--font-display); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.12em; margin-top: 0.5rem; font-size: var(--step--1);
}

/* ---------- partners ---------- */
.partners-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3); align-items: end; margin-bottom: var(--space-4); }
.partners-head p { color: var(--chalk-dim); }
.partners-head p + p { margin-top: 1em; }
.client-group { border-top: 2px solid var(--gold); padding-top: var(--space-2); margin-top: var(--space-3); }
.client-group h3 {
  font-family: var(--font-display); font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; font-size: var(--step--1); color: var(--gold);
}
/* partner logos on the dark asphalt ("trusted by" wall): mixed treatment —
   naturally-colorful logos kept in full colour, dark-ink logos recoloured to chalk */
.client-wall {
  display: grid; grid-template-columns: repeat(auto-fit, 190px); justify-content: center;
  align-items: center; gap: var(--space-2) var(--space-1); margin-top: var(--space-2);
}
.client-logo {
  min-height: 92px; margin: 0; padding: 0.5rem 1rem;
  display: grid; place-items: center;
}
.client-logo img {
  max-width: 100%; object-fit: contain; display: block;
  opacity: 0.95; transition: opacity 0.25s ease, transform 0.25s ease;
}
.client-logo.is-wide  img { max-height: 36px; }
.client-logo.is-mid   img { max-height: 50px; }
.client-logo.is-badge img { max-height: 66px; }
@media (hover: hover) and (pointer: fine) {
  .client-logo:hover img { opacity: 1; transform: scale(1.04); }
}

/* ---------- testimonials ---------- */
.testi-rows { display: grid; gap: var(--space-2); margin-top: var(--space-4); }
.testi-marquee { overflow: hidden; display: flex; }
.testi-track { display: flex; gap: var(--space-2); padding-right: var(--space-2); flex-shrink: 0; animation: marquee 55s linear infinite; }
.testi-marquee:hover .testi-track { animation-play-state: paused; }
.testi-marquee.is-reverse .testi-track { animation-direction: reverse; animation-duration: 62s; }
.tcard {
  width: clamp(18rem, 34vw, 26rem); flex-shrink: 0;
  border: 1px solid var(--line-dark); background: var(--asphalt-2);
  padding: var(--space-2);
  display: flex; flex-direction: column; gap: var(--space-2); justify-content: space-between;
}
.tcard blockquote { font-size: var(--step-1); line-height: 1.3; font-weight: 500; }
.tcard blockquote::before { content: "“"; color: var(--gold); }
.tcard blockquote::after { content: "”"; color: var(--gold); }
.tcard figcaption { font-size: var(--step--1); color: var(--chalk-dim); }
.tcard figcaption b { color: var(--gold); font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; font-size: 1.05rem; display: block; }

/* ---------- outro CTA ---------- */
.outro { text-align: left; }
.outro .h-giant { max-width: 10ch; }
.outro .h-giant em { font-style: normal; color: var(--gold); }

/* ---------- footer ---------- */
.footer { border-top: 1px solid var(--line-dark); background: #0e0c07; }
.footer-grid {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: var(--space-3); padding-block: var(--space-4);
}
.footer a { overflow-wrap: anywhere; }
/* h2, not h4 — h4 after a section h2 skipped a level and broke the heading outline */
.footer h2 {
  font-family: var(--font-display); font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; font-size: var(--step--1); color: var(--gold);
  margin-bottom: var(--space-2);
}
.footer p, .footer a, .footer li { font-size: var(--step--1); color: var(--chalk-dim); line-height: 1.7; }
/* tap targets: inline footer links measured 16px tall — WCAG 2.5.8 wants 24px minimum */
.footer li a { display: inline-block; padding-block: 0.3rem; }
@media (hover: hover) and (pointer: fine) {
  .footer a:hover { color: var(--gold); }
}
.footer-brand img { height: 2.2rem; margin-bottom: 1rem; }
.footer-brand .tagline { color: var(--chalk); font-weight: 500; }
.footer-bottom {
  border-top: 1px solid var(--line-dark);
  padding-block: 1.2rem;
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center;
  font-size: var(--step--1); color: var(--chalk-dim);
}
.socials { display: flex; gap: 1rem; }
.socials a { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border: 1px solid var(--line-dark); transition: border-color 0.2s, color 0.2s, transform 0.14s var(--ease-out); color: var(--chalk-dim); }
.socials a:active { transform: scale(0.92); }
@media (hover: hover) and (pointer: fine) {
  .socials a:hover { border-color: var(--gold); color: var(--gold); }
}
.socials svg { width: 1.1rem; height: 1.1rem; fill: currentColor; }

/* ---------- subpage hero ---------- */
.page-hero {
  position: relative; min-height: 72svh;
  display: flex; align-items: flex-end; overflow: hidden;
  padding-top: 6rem;
}
.page-hero .bg { position: absolute; inset: 0; }
.page-hero .bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.45; }
.page-hero .bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--asphalt) 8%, transparent 70%); }
.page-hero .wrap { position: relative; z-index: 1; padding-bottom: var(--space-4); }
.page-hero h1 { font-size: var(--step-5); font-weight: 900; max-width: 19ch; }
.page-hero h1 em { font-style: normal; color: var(--gold); }
.page-hero .lede { margin-top: var(--space-2); color: var(--chalk-dim); max-width: 48ch; }

/* ---------- about ---------- */
.bigwhy-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--space-4); }
.bigwhy-grid .frame { aspect-ratio: 3 / 4; position: sticky; top: 6rem; }
.bigwhy-copy p { color: var(--chalk-dim); }
.bigwhy-copy p + p { margin-top: 1.2em; }
.bigwhy-copy .accent-line { max-width: 24ch; }
.ceo-block {
  border: 1px solid var(--line-dark); background: var(--asphalt-2);
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-3);
  padding: var(--space-3); align-items: start;
}
.ceo-mark { font-family: var(--font-display); font-weight: 900; font-size: var(--step-4); color: var(--gold); line-height: 0.8; }
.ceo-quote p { font-size: var(--step-1); line-height: 1.4; font-weight: 500; max-width: 56ch; }
.ceo-quote p + p { margin-top: 1em; }
.ceo-quote footer { margin-top: var(--space-2); color: var(--chalk-dim); }
.ceo-quote footer b { color: var(--gold); font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.06em; }

.roster { margin-top: var(--space-3); }
.roster-group { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; margin-top: var(--space-3); mix-blend-mode: multiply; }
.roster-row {
  display: grid; grid-template-columns: 96px minmax(0, 0.8fr) minmax(0, 0.6fr) minmax(0, 1.6fr);
  gap: var(--space-2); padding: var(--space-2) 0;
  border-top: 1px solid var(--line-dark); align-items: baseline;
}
.r-photo {
  width: 96px; aspect-ratio: 3 / 4; overflow: hidden; align-self: center;
  border: 2px solid var(--ink); background: var(--asphalt-2);
}
.r-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.r-photo--mono {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; font-size: 1.6rem;
  letter-spacing: 0.05em; color: var(--gold);
}
.roster-row:last-child { border-bottom: 1px solid var(--line-dark); }
.roster-row .r-name { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: var(--step-2); line-height: 0.95; }
.roster-row .r-role { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gold-ink); font-size: var(--step--1); }
.roster-row .r-quote { color: var(--ink-soft); max-width: 56ch; }

/* ---------- contact ---------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--space-4); align-items: start; }
.contact-card { border: 1px solid var(--line-dark); background: var(--asphalt-2); }
.contact-card > div { padding: var(--space-2) var(--space-3); border-top: 1px solid var(--line-dark); }
.contact-card > div:first-child { border-top: 0; }
.contact-card .cc-label {
  font-family: var(--font-display); font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; font-size: 0.85rem; color: var(--gold); margin-bottom: 0.4rem;
}
.contact-card .cc-value { font-size: var(--step-0); line-height: 1.55; }
.contact-card .cc-value.big { font-family: var(--font-display); font-weight: 800; font-size: var(--step-1); text-transform: uppercase; }
@media (hover: hover) and (pointer: fine) {
  .contact-card a.cc-value:hover { color: var(--gold); }
}
.contact-form { display: grid; gap: var(--space-2); }
.contact-form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.map-frame { margin-top: var(--space-4); border: 1px solid var(--line-dark); }
.map-frame iframe { width: 100%; height: clamp(280px, 40vw, 420px); border: 0; display: block; filter: grayscale(1) contrast(1.05); }

/* ---------- faq ---------- */
.faq-list { max-width: 56rem; }
.faq-item { border-bottom: 1px solid var(--line-paper); }
.faq-item summary {
  list-style: none; cursor: pointer;
  display: flex; gap: var(--space-2); align-items: baseline;
  padding: var(--space-2) 0;
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: var(--step-1); line-height: 1.05;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .q-no {
  color: transparent; -webkit-text-stroke: 1.5px var(--ink);
  font-weight: 900; flex-shrink: 0; min-width: 2.2ch;
}
.faq-item[open] summary .q-no { color: var(--gold); -webkit-text-stroke: 1.5px var(--ink); }
.faq-item summary .q-toggle { margin-left: auto; flex-shrink: 0; font-weight: 600; transition: transform 0.35s var(--ease-out); }
.faq-item[open] summary .q-toggle { transform: rotate(45deg); }
.faq-answer { overflow: hidden; }
.faq-answer p { padding: 0 0 var(--space-2) calc(2.2ch + var(--space-2)); color: var(--ink-soft); max-width: 62ch; }

/* ---------- esg ---------- */
/* pillars reuse the .travel two-column pattern (incl. .is-flipped and its 1020px collapse);
   each pillar sits in its own .section, so the .travel top margin is dialled back. */
.esg-pillar { margin-top: var(--space-3); position: relative; overflow: hidden; }
.esg-pillar h2 { font-size: var(--step-2); max-width: 16ch; margin-bottom: var(--space-2); }
/* content rides above the ghosted letter */
.esg-pillar .frame, .esg-pillar .travel-copy { position: relative; z-index: 1; }
/* giant ghosted pillar letter — outlined type as .m-scope / .q-no, ghosted as .hero-mark */
.esg-mark {
  position: absolute; z-index: 0; top: -0.22em; right: -0.06em;
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(11rem, 30vw, 26rem); line-height: 0.72;
  color: transparent;
  /* stroke in em so it stays ~1.8% of the glyph at every size — a fixed px
     stroke thins out as the clamp() font grows, which reads as "invisible" on desktop */
  -webkit-text-stroke-width: 0.018em;
  -webkit-text-stroke-color: color-mix(in srgb, var(--gold) 40%, transparent);
  paint-order: stroke fill;
  pointer-events: none; user-select: none;
}
.esg-pillar.is-flipped .esg-mark { right: auto; left: -0.06em; }
/* ink on paper, matching .m-scope / .q-no — gold-on-paper is what --gold-ink exists to avoid */
.on-paper .esg-mark { -webkit-text-stroke-color: color-mix(in srgb, var(--ink) 46%, transparent); }
.esg-quote { border-left: 3px solid var(--gold); padding-left: var(--space-2); margin-bottom: var(--space-3); }
.esg-quote p {
  font-family: var(--font-display); font-weight: 600; font-size: var(--step-1);
  line-height: 1.25; color: var(--chalk); max-width: 34ch;
}
.esg-pillar .esg-program {
  display: inline-block; margin-top: var(--space-3);
  border: 2px solid var(--gold); padding: 0.6rem 1.1rem 0.5rem;
  font-family: var(--font-display); font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.06em;
  font-size: var(--step-0); line-height: 1; color: var(--gold);
}
/* paper-surface variants — --gold on --paper fails contrast, so text uses --gold-ink */
.on-paper .travel p { color: var(--ink-soft); }
.on-paper .esg-quote { border-left-color: var(--ink); }
.on-paper .esg-quote p { color: var(--ink); }
.on-paper .esg-pillar .esg-program { color: var(--gold-ink); border-color: var(--gold-ink); }

/* media slots: a <video> drops into .frame exactly like an <img> */
.frame video { width: 100%; height: 100%; object-fit: cover; display: block; }
.frame--empty {
  display: grid; place-items: center; border: 2px solid var(--line-dark);
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; font-size: var(--step--1); color: var(--chalk-dim);
}

/* ---------- floating whatsapp cta ---------- */
/* Sits under the mobile menu (z-index 90) so the open menu covers it.
   Hidden state is CSS-owned; main.js only toggles .is-visible on scroll. */
.wa-fab {
  position: fixed; z-index: 80;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  width: 3.5rem; height: 3.5rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--gold);
  color: var(--asphalt);
  box-shadow: 0 6px 20px rgb(0 0 0 / 0.45);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(14px) scale(0.92);
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out),
              background-color 0.25s ease, visibility 0s linear 0.4s;
}
.wa-fab.is-visible {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: none;
  transition-delay: 0s;
}
.wa-fab svg { width: 1.85rem; height: 1.85rem; fill: currentColor; }
.wa-fab:focus-visible { outline-color: var(--chalk); }

@media (hover: hover) and (pointer: fine) {
  .wa-fab:hover { background: var(--gold-deep); transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .wa-fab, .wa-fab:hover { transition: none; transform: none; }
}

/* keep the copyright line clear of the floating button */
.footer-bottom { padding-inline-end: 4rem; }
@media (max-width: 700px) {
  .footer-bottom { padding-inline-end: 0; padding-bottom: 5rem; }
}

/* ---------- responsive ---------- */
@media (max-width: 1020px) {
  .nav-links { display: none; }
  .nav-cta { display: none; }
  .burger { display: flex; }
  .coldchain-grid, .wss-grid, .story-grid, .bigwhy-grid, .contact-grid,
  .movers-intro, .partners-head { grid-template-columns: 1fr; }
  .client-wall { grid-template-columns: repeat(auto-fit, 148px); }
  .client-logo { min-height: 78px; padding: 0.4rem 0.6rem; }
  .client-logo.is-wide img { max-height: 30px; }
  .client-logo.is-mid img { max-height: 42px; }
  .client-logo.is-badge img { max-height: 54px; }
  .movers-grid { grid-template-columns: 1fr; }
  .mg-cell { border-left: 0; border-top: 1px solid var(--line-paper); }
  .mg-cell:first-child { border-top: 0; }
  .hero-mark { width: clamp(14rem, 60vw, 24rem); top: 10vh; opacity: 0.12; }
  .bigwhy-grid .frame { position: static; aspect-ratio: 16 / 10; }
  .bulletin { grid-template-columns: 1fr; }
  .bulletin-side { border-left: 0; border-top: 1px solid var(--line-dark); }
  .routeboard ul { grid-template-columns: 1fr 1fr; }
  .routeboard li:nth-child(-n + 2) a { border-bottom: 1px solid var(--line-dark); }
  .vehicle-sheet { grid-template-columns: 1fr; }
  .vehicle-art { border-right: 0; border-bottom: 2px solid var(--ink); }
  .avail form { grid-template-columns: 1fr 1fr; }
  .avail form .btn { grid-column: 1 / -1; justify-content: center; }
  .travel, .travel.is-flipped { display: block; }
  .travel .frame { margin-bottom: var(--space-2); }
  .esg-mark { font-size: clamp(7rem, 32vw, 13rem); top: -0.16em; }
  .wf-step { grid-template-columns: 1fr; }
  .delivery2u { grid-template-columns: 1fr; }
  .delivery2u .d2u-cell, .delivery2u .d2u-note { border-left: 0; border-top: 1px solid var(--line-paper); }
  .stats-grid { grid-template-columns: 1fr; }
  .stat { border-left: 0; border-top: 2px solid var(--ink); padding-inline: 0; }
  .stat:first-child { border-top: 0; }
  .ceo-block { grid-template-columns: 1fr; }
  .roster-row { grid-template-columns: 1fr; gap: 0.4rem; }
  .contact-form .row2 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .routeboard ul { grid-template-columns: 1fr; }
  .routeboard li a { border-bottom: 1px solid var(--line-dark); }
  .price-tiers { grid-template-columns: 1fr; }
  .price-tiers > div { border-left: 0; border-top: 1px solid var(--line-paper); }
  .avail form { grid-template-columns: 1fr; }
  .wss-media { grid-template-columns: 1fr; }
  .wss-media .frame:nth-child(2) { margin-top: 0; aspect-ratio: 16 / 10; }
  .wss-media .frame:nth-child(3) { grid-column: auto; aspect-ratio: 16 / 10; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .marquee-track, .testi-track { animation: none; }
  #hero-canvas { display: none; }
}