/* ════════════════════════════════════════════════════════════════════
   LIMECOAL CARRIERS · app.css
   Single bundled stylesheet. Referenced via relative paths so it works
   under file://, localhost, and any static host equally.
   ════════════════════════════════════════════════════════════════════ */

/* ─── TOKENS ─── */
:root {
  /* Signal — lime is the flare, never the field */
  --signal:        #a4c93a;
  --signal-deep:   #7a9628;
  --signal-glow:   #c8e85a;

  /* Anthracite — the dark, with steps */
  --ink:           #0a0d0a;
  --ink-2:         #13181a;
  --ink-3:         #1d2326;
  --ink-4:         #262b30;

  /* Paper — warm cream with dimension */
  --paper:         #f4f2ec;
  --paper-2:       #ebe6d6;
  --paper-3:       #d8d1bf;

  /* Operational accents — role-locked */
  --amber:         #e8a23a;     /* diesel/SecureTrac */
  --cold:          #6db3c4;     /* cold-trucks only */
  --flag:          #c83a2e;     /* genuine alarm */

  /* Type colours */
  --text:          #14171a;
  --text-2:        #4a5159;
  --text-3:        #6b7178;
  --text-inv:      #f4f2ec;
  --text-mute:     #8a929b;

  /* Lines */
  --line:          rgba(20, 23, 26, 0.10);
  --line-strong:   rgba(20, 23, 26, 0.20);
  --line-inv:      rgba(244, 242, 236, 0.12);
  --line-inv-2:    rgba(244, 242, 236, 0.20);

  /* Type families */
  --f-display:     'Archivo Narrow', 'Oswald', 'Arial Narrow', system-ui, sans-serif;
  --f-text:        'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-mono:        'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --f-serif:       'Source Serif 4', 'Iowan Old Style', Georgia, serif;

  /* Layout */
  --container:     1480px;
  --pad-x:         1.25rem;
  --section-y:     5rem;

  /* Motion */
  --ease-settle:   cubic-bezier(.2, .8, .2, 1);
  --ease-heavy:    cubic-bezier(.16, 1, .3, 1);
  --t-fast:        180ms var(--ease-settle);
  --t:             400ms var(--ease-settle);
  --t-slow:        900ms var(--ease-heavy);
}
@media (min-width: 768px) {
  :root { --pad-x: 2.5rem; --section-y: 7rem; }
}
@media (min-width: 1280px) {
  :root { --pad-x: 4rem; --section-y: 9rem; }
}

/* ─── RESET / BASE ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--ink); }
body {
  font-family: var(--f-text);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
  overflow-x: hidden;
}
@media (min-width: 1024px) { body { font-size: 1.0625rem; line-height: 1.6; } }
img, svg, video { max-width: 100%; height: auto; display: block; }
button { font: inherit; cursor: pointer; }

/* ─── DISPLAY TYPE — Archivo Narrow, condensed industrial ─── */
h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
  line-height: 0.92;
  text-transform: uppercase;
}
h1 {
  font-size: clamp(3rem, 9vw, 9rem);
  font-weight: 800;
  line-height: 0.86;
  letter-spacing: -0.02em;
}
h2 {
  font-size: clamp(2.25rem, 5vw + 0.5rem, 5rem);
  font-weight: 700;
  line-height: 0.9;
}
h3 {
  font-size: clamp(1.5rem, 1.5vw + 0.75rem, 2rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0;
}
h4 {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
p { max-width: 62ch; }

.italic { font-family: var(--f-serif); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: -0.005em; }

/* ─── MONO OPERATIONAL LAYER ─── */
.mono {
  font-family: var(--f-mono);
  font-weight: 400;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-2);
  font-feature-settings: "tnum" on, "lnum" on;
}
.mono-md {
  font-family: var(--f-mono);
  font-weight: 400;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  font-feature-settings: "tnum" on, "lnum" on;
}
.mono-lime { color: var(--signal); }
.mono-amber { color: var(--amber); }

.kicker {
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--signal);
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
}
.kicker::before {
  content: "";
  width: 18px;
  height: 1px;
  background: currentColor;
}

a { color: inherit; text-decoration: none; transition: color var(--t-fast); }
a.link {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: var(--line);
}
@media (hover: hover) { a.link:hover { text-decoration-color: currentColor; } }

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

::selection { background: var(--signal); color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .pulse-dot { animation-duration: 4s !important; opacity: 0.5; }
  .marquee-track { animation: none !important; }
}

.skip {
  position: absolute;
  left: -10000px; top: 0;
  background: var(--signal);
  color: var(--ink);
  padding: 0.75rem 1rem;
  z-index: 1000;
  font-family: var(--f-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.skip:focus { left: 0; }

/* ─── LAYOUT ─── */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}
section { padding-top: var(--section-y); padding-bottom: var(--section-y); position: relative; }

.bg-paper      { background: var(--paper); color: var(--text); }
.bg-paper-2    { background: var(--paper-2); color: var(--text); }
.bg-ink        { background: var(--ink); color: var(--text-inv); }
.bg-ink-2      { background: var(--ink-2); color: var(--text-inv); }
.bg-ink h1, .bg-ink h2, .bg-ink h3, .bg-ink h4,
.bg-ink-2 h1, .bg-ink-2 h2, .bg-ink-2 h3, .bg-ink-2 h4 {
  color: var(--text-inv);
}

.grid { display: grid; gap: 1.5rem; }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

.stack > * + * { margin-top: 1rem; }
.stack-md > * + * { margin-top: 1.5rem; }
.stack-lg > * + * { margin-top: 2.5rem; }

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 900ms var(--ease-heavy), transform 900ms var(--ease-heavy);
}
.reveal.in { opacity: 1; transform: translateY(0); }

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

/* ════════════════════════════════════════════════════════════════════
   SECTION BAND — repeated transition device
   ════════════════════════════════════════════════════════════════════ */
.band {
  position: relative;
  height: 140px;
  background: var(--paper);
  border-block: 1px solid var(--line);
  display: flex;
  align-items: center;
  padding-inline: var(--pad-x);
  overflow: hidden;
}
.band-num {
  position: absolute;
  left: -1rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(180px, 22vw, 320px);
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 1px rgba(20, 23, 26, 0.10);
  letter-spacing: -0.04em;
  pointer-events: none;
}
.band-kicker {
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--signal-deep);
  position: relative;
  z-index: 1;
}
.band-sub {
  margin-left: auto;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 1.125rem;
  text-transform: none;
  letter-spacing: -0.005em;
  color: var(--text-2);
  position: relative;
  z-index: 1;
}
@media (max-width: 767px) { .band-sub { display: none; } }

.band-dark { background: var(--ink); border-color: var(--line-inv); }
.band-dark .band-num { -webkit-text-stroke-color: rgba(244, 242, 236, 0.08); }
.band-dark .band-kicker { color: var(--signal); }
.band-dark .band-sub { color: var(--text-mute); }

/* ════════════════════════════════════════════════════════════════════
   NAV
   ════════════════════════════════════════════════════════════════════ */
.nav {
  position: sticky;
  top: 0;
  z-index: 80;
  background: transparent;
  transition: background var(--t-fast), border-color var(--t-fast), backdrop-filter var(--t-fast);
}
.nav.on-dark { background: rgba(10, 13, 10, 0.0); }
.nav.scrolled {
  background: rgba(10, 13, 10, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-inv);
}
.nav.on-paper.scrolled {
  background: rgba(244, 242, 236, 0.92);
  border-bottom-color: var(--line);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
  gap: 1.5rem;
  max-width: var(--container);
  margin: 0 auto;
}
@media (min-width: 1024px) { .nav-inner { height: 80px; } }

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
  color: inherit;
}
.logo-mark {
  width: 38px; height: 38px;
  flex-shrink: 0;
}
.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
  font-family: var(--f-display);
  font-weight: 800;
  letter-spacing: 0.02em;
}
.logo-text .l1 { font-size: 0.9375rem; }
.logo-text .l2 {
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  font-weight: 500;
  margin-top: 2px;
  color: var(--signal);
}
.on-dark .logo-text { color: var(--text-inv); }
.on-dark .logo-text .l2 { color: var(--signal); }

.nav-links {
  display: none;
  list-style: none;
  align-items: center;
  gap: 1.5rem;
}
@media (min-width: 1024px) { .nav-links { display: flex; } }
.nav-links a {
  font-family: var(--f-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--text-inv);
  position: relative;
  padding: 0.5rem 0;
}
.on-paper .nav-links a { color: var(--text); }
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--signal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-fast);
}
.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.nav-links a[aria-current="page"] { color: var(--signal); }

.nav-status {
  display: none;
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-mute);
  align-items: center;
  gap: 0.5rem;
}
@media (min-width: 1280px) { .nav-status { display: inline-flex; } }
.nav-status .pulse-dot { background: var(--signal); }

.nav-cta {
  display: none;
  align-items: center;
  gap: 0.5rem;
  height: 42px;
  padding: 0 1.125rem;
  background: var(--signal);
  color: var(--ink);
  font-family: var(--f-mono);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid var(--signal);
  transition: background var(--t-fast), color var(--t-fast);
}
@media (min-width: 1024px) { .nav-cta { display: inline-flex; } }
.nav-cta::after { content: "→"; }
.nav-cta:hover { background: var(--signal-glow); }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  background: transparent;
  border: 1px solid var(--line-inv-2);
  color: inherit;
}
.on-paper .nav-toggle { border-color: var(--line-strong); }
@media (min-width: 1024px) { .nav-toggle { display: none; } }

.nav-mobile {
  display: none;
  background: var(--ink);
  border-top: 1px solid var(--line-inv);
}
.on-paper .nav-mobile { background: var(--paper); border-top-color: var(--line); }
.nav-mobile.open { display: block; }
.nav-mobile ul {
  list-style: none;
  padding: 0.5rem var(--pad-x) 1.5rem;
}
.nav-mobile a {
  display: block;
  padding: 0.875rem 0;
  font-family: var(--f-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: inherit;
  border-bottom: 1px solid var(--line-inv);
}
.on-paper .nav-mobile a { border-bottom-color: var(--line); }
.nav-mobile .btn { margin-top: 1rem; width: 100%; justify-content: center; }

/* ════════════════════════════════════════════════════════════════════
   BUTTONS
   ════════════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  height: 52px;
  padding: 0 1.5rem;
  font-family: var(--f-mono);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 0;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
  position: relative;
}
.btn::after { content: "→"; transition: transform var(--t-fast); }
.btn:hover::after { transform: translateX(4px); }

.btn-primary {
  background: var(--signal);
  color: var(--ink);
  border-color: var(--signal);
  box-shadow: 0 1px 0 var(--signal-deep), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.btn-primary:hover { background: var(--signal-glow); border-color: var(--signal-glow); }

.btn-ghost {
  background: transparent;
  color: inherit;
  border-color: currentColor;
}
.btn-ghost:hover { background: currentColor; color: var(--paper); }
.bg-ink .btn-ghost:hover, .bg-ink-2 .btn-ghost:hover { color: var(--ink); }

.btn-block { width: 100%; justify-content: center; }
.btn-sm { height: 44px; padding: 0 1.125rem; font-size: 0.6875rem; }

/* ════════════════════════════════════════════════════════════════════
   PULSE DOT — the "system status light"
   ════════════════════════════════════════════════════════════════════ */
.pulse-dot {
  display: inline-block;
  width: 8px; height: 8px;
  background: var(--signal);
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
}
.pulse-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--signal);
  animation: pulse 2.4s infinite var(--ease-settle);
}
@keyframes pulse {
  0%   { transform: scale(1);   opacity: 0.7; }
  70%  { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}

/* ════════════════════════════════════════════════════════════════════
   HERO — Layered, dimensional, instrument-panel
   ════════════════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: 100svh;
  background: var(--ink);
  color: var(--text-inv);
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
}

/* Layer 1 — radial mesh */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 80% 60% at 12% 18%, rgba(164, 201, 58, 0.20), transparent 60%),
    radial-gradient(ellipse 60% 80% at 92% 92%, rgba(126, 160, 36, 0.12), transparent 55%),
    linear-gradient(180deg, #0a0d0a 0%, #13181a 60%, #0a0d0a 100%);
  pointer-events: none;
}

/* Layer 2 — blueprint grid + masked vignette */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image:
    linear-gradient(rgba(164, 201, 58, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(164, 201, 58, 0.06) 1px, transparent 1px);
  background-size: 80px 80px, 80px 80px;
  -webkit-mask-image: radial-gradient(ellipse 100% 80% at 50% 50%, #000 30%, transparent 90%);
  mask-image: radial-gradient(ellipse 100% 80% at 50% 50%, #000 30%, transparent 90%);
  pointer-events: none;
}

/* Hero giant section number watermark */
.hero-stamp {
  position: absolute;
  right: -3vw;
  top: 8%;
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(220px, 30vw, 540px);
  line-height: 0.78;
  color: transparent;
  -webkit-text-stroke: 1px rgba(244, 242, 236, 0.06);
  letter-spacing: -0.04em;
  pointer-events: none;
  z-index: 2;
  user-select: none;
}

/* Top live ticker */
.hero-ticker {
  position: relative;
  z-index: 5;
  border-bottom: 1px solid var(--line-inv);
  padding: 0.875rem var(--pad-x);
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-mute);
  display: flex;
  align-items: center;
  gap: 1.25rem;
  overflow: hidden;
  white-space: nowrap;
  background: rgba(10, 13, 10, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hero-ticker .label {
  color: var(--signal);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.hero-ticker-rows {
  flex: 1;
  display: flex;
  gap: 2.5rem;
  min-width: 0;
  overflow: hidden;
}
.hero-ticker-row {
  display: inline-flex;
  gap: 1rem;
  flex-shrink: 0;
  align-items: center;
}
.hero-ticker-row strong { color: var(--text-inv); font-weight: 500; }
.hero-ticker-row .tag {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  border: 1px solid var(--line-inv-2);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  color: var(--text-mute);
}
.hero-ticker-row .tag.ok { border-color: var(--signal); color: var(--signal); }

/* Hero body */
.hero-body {
  position: relative;
  z-index: 4;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 3.5rem var(--pad-x) 2.5rem;
  gap: 3rem;
  max-width: var(--container);
  margin: 0 auto;
  width: 100%;
}
@media (min-width: 768px) { .hero-body { padding: 5rem var(--pad-x) 3.5rem; } }
@media (min-width: 1280px) { .hero-body { padding: 6rem var(--pad-x) 4rem; } }

.hero-eyebrows {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-mute);
  align-items: center;
}
.hero-eyebrows .sep { color: var(--signal); }
.hero-eyebrows strong { color: var(--text-inv); font-weight: 500; }

.hero h1 {
  margin-top: 2rem;
  color: var(--text-inv);
  max-width: 18ch;
  position: relative;
  z-index: 4;
}
.hero h1 .lime { color: var(--signal); }
.hero h1 .it {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: -0.015em;
  color: var(--text-inv);
}

.hero-sub {
  margin-top: 1.75rem;
  font-size: 1.0625rem;
  color: var(--text-mute);
  max-width: 56ch;
  line-height: 1.55;
}
@media (min-width: 1024px) { .hero-sub { font-size: 1.25rem; } }

.hero-bottom {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: end;
  margin-top: 2.5rem;
}
@media (min-width: 1024px) {
  .hero-bottom {
    grid-template-columns: 1fr auto;
    gap: 3rem;
  }
}

.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.hero-spec {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem 1.5rem;
  align-content: end;
  border-left: 1px solid var(--line-inv-2);
  padding-left: 1.5rem;
}
@media (min-width: 768px) {
  .hero-spec {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--line-inv-2);
    padding-top: 1.5rem;
  }
}
.hero-spec-cell {
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.hero-spec-cell b {
  display: block;
  color: var(--text-inv);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.875rem;
  letter-spacing: -0.01em;
  margin-bottom: 0.375rem;
  font-feature-settings: "tnum" on;
  text-transform: uppercase;
}

/* ════════════════════════════════════════════════════════════════════
   MARQUEE — full-bleed kinetic strip
   ════════════════════════════════════════════════════════════════════ */
.marquee {
  background: var(--signal);
  color: var(--ink);
  border-block: 1px solid var(--ink);
  overflow: hidden;
  position: relative;
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 50s linear infinite;
  padding: 1.125rem 0;
}
.marquee-track:hover, .marquee-track:focus-within { animation-play-state: paused; }
.marquee-item {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0 2.5rem;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.875rem;
}
.marquee-item::after {
  content: "·";
  margin-left: 2.5rem;
  opacity: 0.4;
}
.marquee-dark { background: var(--ink); color: var(--signal); border-color: var(--signal); }
@keyframes marquee {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}

/* ════════════════════════════════════════════════════════════════════
   § 01 CONTAINERS — manifest with featured cell
   ════════════════════════════════════════════════════════════════════ */
.svc-containers { background: var(--paper); }
.s-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-bottom: 3.5rem;
  align-items: end;
}
@media (min-width: 1024px) {
  .s-head {
    grid-template-columns: 1fr 1.6fr;
    gap: 4rem;
  }
}
.s-head h2 {
  font-size: clamp(2.5rem, 6vw, 5.5rem);
  line-height: 0.88;
}
.s-head h2 + p, .s-head .lede {
  margin-top: 1.25rem;
  font-size: 1.125rem;
  color: var(--text-2);
  max-width: 56ch;
}

.manifest {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  background: var(--ink);
  border: 1px solid var(--ink-4);
  margin-top: 2rem;
  position: relative;
}
@media (min-width: 768px) { .manifest { grid-template-columns: repeat(4, 1fr); } }

.manifest-cell {
  position: relative;
  padding: 2.5rem 1.5rem 1.5rem;
  border-right: 1px solid var(--ink-4);
  border-bottom: 1px solid var(--ink-4);
  background: var(--ink-2);
  min-height: 180px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: background var(--t-fast);
}
.manifest-cell:nth-child(odd) { background: var(--ink); }
.manifest-cell:hover { background: var(--ink-3); }
.manifest-num {
  position: absolute;
  top: 0.875rem; left: 1.25rem;
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  color: var(--signal);
}
.manifest-label {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--text-inv);
  margin-top: auto;
}
.manifest-sub {
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.manifest-cell--feat {
  grid-column: span 2;
  grid-row: span 2;
  background: var(--ink-3);
  box-shadow: inset 0 0 0 1px var(--signal),
              0 24px 60px -20px rgba(0, 0, 0, 0.6);
  padding: 2.5rem 2rem 2rem;
}
.manifest-cell--feat::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(164, 201, 58, 0.10), transparent 50%);
  pointer-events: none;
}
.manifest-cell--feat .manifest-label { font-size: clamp(2rem, 3vw, 2.75rem); color: var(--signal); }
@media (max-width: 767px) {
  .manifest-cell--feat { grid-column: span 2; grid-row: span 1; }
}

/* Trailer line-art SVG container */
.trailer-art {
  margin-top: 3rem;
  padding: 2.5rem 0 0;
  border-top: 1px solid var(--line);
  position: relative;
}
.trailer-art svg {
  width: 100%;
  height: auto;
  max-height: 160px;
}
.trailer-art svg path,
.trailer-art svg line,
.trailer-art svg circle,
.trailer-art svg rect {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.4;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.trailer-anim path,
.trailer-anim line,
.trailer-anim circle,
.trailer-anim rect {
  stroke-dasharray: 2400;
  stroke-dashoffset: 2400;
  transition: stroke-dashoffset 1800ms var(--ease-heavy);
}
.trailer-art.in .trailer-anim path,
.trailer-art.in .trailer-anim line,
.trailer-art.in .trailer-anim circle,
.trailer-art.in .trailer-anim rect {
  stroke-dashoffset: 0;
}
.trailer-spec {
  margin-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  color: var(--text-2);
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ════════════════════════════════════════════════════════════════════
   § 02 COLD TRUCKS — editorial column + temp graph + reefer SVG
   ════════════════════════════════════════════════════════════════════ */
.svc-cold {
  background: var(--paper-2);
  position: relative;
  overflow: hidden;
}
.svc-cold .cold-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3.5rem;
  align-items: start;
}
@media (min-width: 1024px) {
  .svc-cold .cold-grid {
    grid-template-columns: 1.5fr 1fr;
    gap: 5rem;
  }
}
.svc-cold .editorial p {
  font-size: 1.125rem;
  line-height: 1.55;
  max-width: 60ch;
  color: var(--text);
}
@media (min-width: 1024px) {
  .svc-cold .editorial p { font-size: 1.1875rem; line-height: 1.6; }
}
.svc-cold .editorial p + p { margin-top: 1.25rem; }
.cold-quote {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.75rem, 2.5vw, 2.5rem);
  line-height: 1.2;
  color: var(--text);
  letter-spacing: -0.01em;
  margin-top: 2.5rem;
  position: relative;
  padding-left: 2rem;
  max-width: 26ch;
}
.cold-quote::before {
  content: "\201C";
  position: absolute;
  left: -0.25rem;
  top: 0.4em;
  font-size: 5rem;
  line-height: 0;
  color: var(--signal);
  font-family: var(--f-serif);
}

/* Temperature graph */
.temp-graph {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 1.5rem;
  position: relative;
}
.temp-graph-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: 1rem;
}
.temp-graph-head strong { color: var(--cold); }
.temp-graph svg { width: 100%; height: 180px; }
.temp-graph .grid-line { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 4; }
.temp-graph .area { fill: rgba(109, 179, 196, 0.18); }
.temp-graph .line {
  stroke: var(--cold);
  stroke-width: 2;
  fill: none;
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  transition: stroke-dashoffset 2000ms var(--ease-heavy);
}
.temp-graph.in .line { stroke-dashoffset: 0; }
.temp-graph .axis-label {
  font-family: var(--f-mono);
  font-size: 9px;
  fill: var(--text-2);
  letter-spacing: 0.08em;
}

.temp-readouts {
  margin-top: 1.5rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.temp-readout {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.temp-readout .lbl {
  font-family: var(--f-mono);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-2);
}
.temp-readout .val {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.625rem;
  letter-spacing: -0.01em;
  color: var(--text);
  font-feature-settings: "tnum" on;
  text-transform: uppercase;
}
.temp-readout.cold .val { color: var(--cold); }

/* ════════════════════════════════════════════════════════════════════
   § 03 BULK — heavy display words
   ════════════════════════════════════════════════════════════════════ */
.svc-bulk {
  background: var(--ink);
  color: var(--text-inv);
  position: relative;
  overflow: hidden;
}
.svc-bulk h2 { color: var(--text-inv); }
.bulk-display {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 3.5rem 0 3rem;
  position: relative;
}
.bulk-word {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(4rem, 14vw, 14rem);
  line-height: 0.85;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--text-inv);
  display: block;
  position: relative;
}
.bulk-word--outline {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--text-inv);
}
.bulk-word--lime { color: var(--signal); }
.bulk-word--ghost {
  color: transparent;
  -webkit-text-stroke: 1px var(--line-inv-2);
  transform: translateX(-3%);
}
.bulk-word .tonn {
  position: absolute;
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0.16em;
  color: var(--signal);
  text-transform: uppercase;
  -webkit-text-stroke: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.bulk-word .tonn::before { content: ""; width: 6px; height: 6px; background: var(--signal); }
.bulk-word--outline .tonn { right: 5%; bottom: 1rem; }
.bulk-word--lime .tonn { right: 12%; top: 1.5rem; }
.bulk-word--ghost .tonn { right: 15%; bottom: 1rem; }
@media (max-width: 767px) {
  .bulk-word .tonn { display: none; }
}

.bulk-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-top: 3.5rem;
  border-top: 1px solid var(--line-inv);
  padding-top: 2.5rem;
}
@media (min-width: 768px) {
  .bulk-grid { grid-template-columns: repeat(3, 1fr); gap: 3rem; }
}
.bulk-grid .b-num {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 3rem;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--signal);
  margin-bottom: 0.5rem;
  font-feature-settings: "tnum" on;
}
.bulk-grid .b-lbl {
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 0.75rem;
}
.bulk-grid p { color: var(--text-mute); font-size: 0.9375rem; }

/* ════════════════════════════════════════════════════════════════════
   § 04 DIESEL — dashboard with fuel gauge
   ════════════════════════════════════════════════════════════════════ */
.svc-diesel {
  background: var(--ink-2);
  color: var(--text-inv);
  position: relative;
  overflow: hidden;
}
.svc-diesel h2 { color: var(--text-inv); }

.dash {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-top: 2.5rem;
  border-top: 1px solid var(--line-inv);
  padding-top: 2.5rem;
}
@media (min-width: 1024px) {
  .dash {
    grid-template-columns: 1fr 1.4fr 1fr;
    gap: 2.5rem;
  }
}
.dash-col h3 { font-size: 1.25rem; margin-bottom: 1rem; }
.dash-col p { color: var(--text-mute); }

/* Fuel gauge — conic gradient ring (logo callback) */
.gauge {
  --v: 0;
  width: 100%;
  max-width: 240px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(
    from 135deg,
    var(--signal) 0 calc(var(--v) * 0.75%),
    var(--ink-4) calc(var(--v) * 0.75%) 75%,
    transparent 75% 100%
  );
  position: relative;
  display: grid;
  place-items: center;
  margin: 0 auto;
  transition: --v 1.6s var(--ease-heavy);
}
@property --v {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}
.gauge::before {
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  background: var(--ink-2);
  border: 1px solid var(--line-inv-2);
}
.gauge::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--line-inv);
  pointer-events: none;
}
.gauge-needle {
  position: absolute;
  width: 2px; height: 38%;
  background: var(--signal);
  top: 12%;
  left: calc(50% - 1px);
  transform-origin: bottom center;
  transform: rotate(calc(-135deg + var(--v) * 2.7deg));
  transition: transform 1.8s var(--ease-heavy);
  z-index: 2;
}
.gauge-needle::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: -4px;
  width: 10px; height: 10px;
  background: var(--signal);
  border-radius: 50%;
}
.gauge-val {
  position: relative;
  z-index: 2;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 2.75rem;
  letter-spacing: -0.02em;
  color: var(--text-inv);
  font-feature-settings: "tnum" on;
}
.gauge-lbl {
  position: relative;
  z-index: 2;
  font-family: var(--f-mono);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-top: 0.25rem;
}

/* SecureTrac fake-live feed */
.tracfeed {
  border: 1px solid var(--line-inv-2);
  background: var(--ink);
  padding: 1rem 1.25rem;
}
.tracfeed-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 1rem;
  padding-bottom: 0.625rem;
  border-bottom: 1px solid var(--line-inv);
}
.tracfeed-head .live {
  color: var(--signal);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.tracfeed-rows {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.tracfeed-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 0.75rem;
  align-items: center;
  font-family: var(--f-mono);
  font-size: 0.75rem;
  color: var(--text-inv);
  padding: 0.4rem 0;
  border-bottom: 1px dashed var(--line-inv);
}
.tracfeed-row:last-child { border-bottom: 0; }
.tracfeed-row .unit { color: var(--signal); font-weight: 500; letter-spacing: 0.06em; }
.tracfeed-row .where { color: var(--text-inv); letter-spacing: 0.04em; }
.tracfeed-row .speed { color: var(--text-mute); font-feature-settings: "tnum" on; }
.tracfeed-row .stat {
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.125rem 0.4rem;
  border: 1px solid var(--line-inv-2);
  color: var(--text-mute);
}
.tracfeed-row .stat.ok { border-color: var(--signal); color: var(--signal); }

.dash-tiles { display: flex; flex-direction: column; gap: 1rem; }
.dash-tile {
  background: var(--ink);
  border: 1px solid var(--line-inv-2);
  padding: 1.25rem;
}
.dash-tile-lbl {
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 0.5rem;
}
.dash-tile-val {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.875rem;
  letter-spacing: -0.01em;
  color: var(--text-inv);
  font-feature-settings: "tnum" on;
}
.dash-tile-bar {
  margin-top: 0.625rem;
  height: 4px;
  background: var(--ink-4);
  position: relative;
  overflow: hidden;
}
.dash-tile-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  width: var(--w, 0%);
  background: var(--signal);
  transition: width 1.6s var(--ease-heavy);
}

/* ════════════════════════════════════════════════════════════════════
   STAT BAND — gauges
   ════════════════════════════════════════════════════════════════════ */
.stats {
  background: var(--paper);
  position: relative;
  overflow: hidden;
}
.stats-watermark {
  position: absolute;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(280px, 40vw, 720px);
  line-height: 0.78;
  color: transparent;
  -webkit-text-stroke: 1px rgba(20, 23, 26, 0.04);
  letter-spacing: -0.04em;
  pointer-events: none;
  bottom: -8%;
  right: -3vw;
  user-select: none;
}
.stats-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem 1.5rem;
}
@media (min-width: 768px) { .stats-grid { grid-template-columns: repeat(4, 1fr); gap: 2rem; } }
.stat-cell {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  border-top: 2px solid var(--ink);
  padding-top: 1rem;
}
.stat-cell .stat-num {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(3rem, 5vw + 1rem, 5rem);
  line-height: 0.92;
  letter-spacing: -0.03em;
  color: var(--text);
  font-feature-settings: "tnum" on;
}
.stat-cell .stat-num .accent { color: var(--signal); }
.stat-cell .stat-lbl {
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-2);
}
.stat-cell .stat-sub {
  font-size: 0.875rem;
  color: var(--text-2);
  margin-top: 0.5rem;
}

/* ════════════════════════════════════════════════════════════════════
   ACCREDITATIONS
   ════════════════════════════════════════════════════════════════════ */
.creds {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: 2rem;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
@media (min-width: 768px) { .creds { grid-template-columns: repeat(3, 1fr); } }
.cred {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 2rem 1.75rem;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  position: relative;
  transition: background var(--t-fast);
}
.cred:hover { background: var(--paper-2); }
.cred .cred-num {
  font-family: var(--f-mono);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  color: var(--text-3);
  text-transform: uppercase;
  position: absolute;
  top: 1rem; right: 1.25rem;
}
.cred .cred-badge {
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--signal-deep);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.cred .cred-badge::before {
  content: "";
  width: 8px; height: 8px;
  background: var(--signal);
}
.cred h4 { font-size: 1.125rem; line-height: 1.15; }
.cred p { color: var(--text-2); font-size: 0.9375rem; }

/* ════════════════════════════════════════════════════════════════════
   CTA BAND
   ════════════════════════════════════════════════════════════════════ */
.cta-band {
  background: var(--ink);
  color: var(--text-inv);
  position: relative;
  overflow: hidden;
  border-block: 1px solid var(--line-inv);
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 80% 50%, rgba(164, 201, 58, 0.10), transparent 60%);
  pointer-events: none;
}
.cta-band h2 { color: var(--text-inv); max-width: 22ch; }
.cta-band p { color: var(--text-mute); max-width: 56ch; margin-top: 1.25rem; font-size: 1.0625rem; }
.cta-band .cta-inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 2.5rem;
  align-items: end;
}
@media (min-width: 768px) { .cta-band .cta-inner { grid-template-columns: 1.4fr 1fr; gap: 4rem; } }
.cta-band .ctas {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
@media (min-width: 768px) { .cta-band .ctas { align-items: flex-end; } }

/* ════════════════════════════════════════════════════════════════════
   PAGE HEADER (sub-pages)
   ════════════════════════════════════════════════════════════════════ */
.page-head {
  background: var(--ink);
  color: var(--text-inv);
  padding-top: 4rem;
  padding-bottom: 4rem;
  border-bottom: 1px solid var(--line-inv);
  position: relative;
  overflow: hidden;
}
@media (min-width: 1024px) { .page-head { padding-top: 6rem; padding-bottom: 6rem; } }
.page-head::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 12% 20%, rgba(164, 201, 58, 0.14), transparent 55%),
    linear-gradient(180deg, #0a0d0a 0%, #13181a 100%);
  pointer-events: none;
}
.page-head::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(164, 201, 58, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(164, 201, 58, 0.05) 1px, transparent 1px);
  background-size: 80px 80px;
  -webkit-mask-image: radial-gradient(ellipse 100% 100% at 50% 50%, #000 30%, transparent 90%);
  mask-image: radial-gradient(ellipse 100% 100% at 50% 50%, #000 30%, transparent 90%);
  pointer-events: none;
}
.page-head .container { position: relative; z-index: 2; }
.page-head h1 { color: var(--text-inv); max-width: 18ch; }
.page-head h1 .lime { color: var(--signal); }
.page-head h1 .it {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: -0.015em;
}
.page-head .lede {
  margin-top: 1.5rem;
  font-size: 1.0625rem;
  color: var(--text-mute);
  max-width: 60ch;
}
@media (min-width: 1024px) { .page-head .lede { font-size: 1.25rem; } }

/* ════════════════════════════════════════════════════════════════════
   BREADCRUMB
   ════════════════════════════════════════════════════════════════════ */
.breadcrumb {
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-mute);
  padding: 1.5rem var(--pad-x) 0;
  max-width: var(--container);
  margin: 0 auto;
  background: var(--ink);
}
.breadcrumb ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.breadcrumb li:not(:last-child)::after {
  content: "/";
  margin-left: 0.5rem;
  color: var(--text-3);
  opacity: 0.5;
}
.breadcrumb a { color: inherit; }
.breadcrumb a:hover { color: var(--signal); }
.breadcrumb [aria-current="page"] { color: var(--signal); }

/* ════════════════════════════════════════════════════════════════════
   DLIST (key/value table)
   ════════════════════════════════════════════════════════════════════ */
.dlist {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--line);
  margin-top: 2rem;
}
.bg-ink .dlist, .bg-ink-2 .dlist { border-top-color: var(--line-inv); }
.dlist > div {
  border-bottom: 1px solid var(--line);
  padding: 1.25rem 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
}
.bg-ink .dlist > div, .bg-ink-2 .dlist > div { border-bottom-color: var(--line-inv); }
@media (min-width: 768px) {
  .dlist > div {
    grid-template-columns: 1fr 2.4fr;
    gap: 2rem;
    align-items: baseline;
  }
}
.dlist dt {
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--signal-deep);
}
.bg-ink .dlist dt, .bg-ink-2 .dlist dt { color: var(--signal); }
.dlist dd { color: var(--text); max-width: 60ch; }
.bg-ink .dlist dd, .bg-ink-2 .dlist dd { color: var(--text-mute); }

/* ════════════════════════════════════════════════════════════════════
   ROUTES (chips)
   ════════════════════════════════════════════════════════════════════ */
.routes {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-top: 2rem;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.bg-ink .routes, .bg-ink-2 .routes { border-color: var(--line-inv); }
.route {
  font-family: var(--f-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 1rem 1.25rem;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--text-2);
  flex-grow: 1;
}
.bg-ink .route, .bg-ink-2 .route { border-color: var(--line-inv); color: var(--text-mute); }
.route strong {
  color: var(--text);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.bg-ink .route strong, .bg-ink-2 .route strong { color: var(--text-inv); }

/* ════════════════════════════════════════════════════════════════════
   FORM
   ════════════════════════════════════════════════════════════════════ */
.form { display: flex; flex-direction: column; gap: 1.5rem; max-width: 640px; }
.form-row { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 640px) { .form-row.row-2 { grid-template-columns: 1fr 1fr; } }
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field label {
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-2);
}
.field .req { color: var(--signal-deep); }
.field .help { font-size: 0.8125rem; color: var(--text-2); }
.field input, .field select, .field textarea {
  font-family: var(--f-text);
  font-size: 1rem;
  color: var(--text);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--text);
  border-radius: 0;
  padding: 0.625rem 0;
  height: 48px;
  transition: border-color var(--t-fast);
  width: 100%;
}
.field textarea {
  height: auto;
  min-height: 110px;
  padding: 0.875rem;
  resize: vertical;
  line-height: 1.5;
  border: 1px solid var(--line-strong);
}
.field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%237a9628' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0 center;
  padding-right: 2rem;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 0;
  border-color: var(--signal);
}
.form-note {
  font-family: var(--f-mono);
  font-size: 0.75rem;
  line-height: 1.7;
  letter-spacing: 0.04em;
  border-left: 1px solid var(--signal);
  padding: 0.875rem 0 0.875rem 1rem;
  color: var(--text-2);
}
.form-note strong { color: var(--signal-deep); font-weight: 500; }
.form-note a { color: var(--signal-deep); text-decoration: underline; text-underline-offset: 3px; }
.form-success {
  display: none;
  border: 1px solid var(--signal);
  background: rgba(164, 201, 58, 0.08);
  color: var(--text);
  padding: 1.25rem 1.5rem;
  font-size: 0.9375rem;
  margin-bottom: 1.5rem;
}
.form-success.show { display: block; }
.form-success strong { color: var(--signal-deep); }

/* ════════════════════════════════════════════════════════════════════
   FOOTER — layered with giant outlined wordmark
   ════════════════════════════════════════════════════════════════════ */
.footer {
  background: var(--ink);
  color: var(--text-inv);
  padding: 5rem 0 0;
  border-top: 1px solid var(--signal);
  position: relative;
  overflow: hidden;
}
.footer-watermark {
  position: absolute;
  bottom: -8%;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(180px, 28vw, 460px);
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 1px rgba(164, 201, 58, 0.12);
  letter-spacing: -0.04em;
  pointer-events: none;
  white-space: nowrap;
  user-select: none;
}
.footer-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  padding-bottom: 4rem;
}
@media (min-width: 640px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 3rem; } }
.footer h4 {
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--signal);
  margin-bottom: 1.25rem;
}
.footer ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  font-size: 0.9375rem;
}
.footer a { color: var(--text-inv); opacity: 0.85; transition: color var(--t-fast), opacity var(--t-fast); }
.footer a:hover { opacity: 1; color: var(--signal); }

.footer-brand { display: flex; flex-direction: column; gap: 1.25rem; }
.footer-brand p { color: var(--text-mute); max-width: 36ch; font-size: 0.9375rem; }

.footer-clock {
  margin-top: 0.5rem;
  border: 1px solid var(--line-inv);
  padding: 0.875rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.footer-clock-label {
  font-family: var(--f-mono);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-mute);
  display: flex;
  justify-content: space-between;
}
.footer-clock-time {
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 1.5rem;
  letter-spacing: 0.04em;
  color: var(--signal);
  font-feature-settings: "tnum" on;
}
.footer-clock-loc {
  font-family: var(--f-mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  color: var(--text-mute);
  text-transform: uppercase;
}

.footer-social {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.footer-social a {
  width: 40px; height: 40px;
  border: 1px solid var(--line-inv-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.85;
}
.footer-social a:hover { background: var(--signal); color: var(--ink); border-color: var(--signal); opacity: 1; }
.footer-social svg { width: 16px; height: 16px; }

.footer-bottom {
  position: relative;
  z-index: 1;
  margin-top: 0;
  padding: 1.5rem 0 1.5rem;
  border-top: 1px solid var(--line-inv);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  justify-content: space-between;
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.footer-bottom .legal { display: flex; gap: 1.25rem; }
.footer-bottom a { color: inherit; }
.footer-bottom a:hover { color: var(--signal); }

/* --- legacy variable aliases + small layout fixes --- */

/* ─── Variable aliases for legacy names still referenced inline ─── */
:root {
  --ff-display: var(--f-display);
  --ff-text:    var(--f-text);
  --ff-mono:    var(--f-mono);
  --ff-serif:   var(--f-serif);
  --steel-dim:  var(--text-mute);
  --steel:      var(--text-2);
  --lime:       var(--signal);     /* legacy var alias — used in inline style attrs */
}

/* ─── 100svh fallback for older Safari / Samsung / Firefox ─── */
.hero { min-height: 100vh; min-height: 100svh; }

/* ─── aspect-ratio fallback for the gauge ─── */
@supports not (aspect-ratio: 1) {
  .gauge { padding-top: 100%; height: 0; }
}

/* ─── .nav-meta — used on every sub-page nav, was missing styling ─── */
.nav-meta {
  display: none;
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-mute);
  align-items: center;
  flex-shrink: 1;
  min-width: 0;
}
@media (min-width: 1280px) { .nav-meta { display: inline-flex; } }

/* ─── Global accent classes (were hero-h1-scoped only) ─── */
.lime, h1 .lime, h2 .lime, h3 .lime, h4 .lime,
.page-head h1 .lime, .hero h1 .lime { color: var(--signal) !important; }

.it, h1 .it, h2 .it, h3 .it,
.page-head h1 .it, .hero h1 .it {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: -0.015em;
}

/* ─── Footer logo lockup ─── */
.lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.875rem;
  text-decoration: none;
  color: inherit;
}
.lockup img { width: 48px; height: 48px; flex-shrink: 0; }
.lockup .logo-text {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--text-inv);
}
.lockup .logo-text em { font-style: normal; color: var(--signal); }
.footer-brand .logo-text { font-size: 1.5rem; line-height: 1; color: var(--text-inv); }
.footer-brand .logo-text em { color: var(--signal); font-style: normal; }

/* Nav uses LIME<em>COAL</em> markup on sub-pages */
.nav .logo-text {
  flex-direction: row;
  align-items: baseline;
  gap: 0;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.0625rem;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--text-inv);
}
.nav .logo-text em { font-style: normal; color: var(--signal); }
.nav.on-paper .logo-text { color: var(--text); }

/* ─── Editorial column wrapper (used on about + cold trucks) ─── */
.editorial { max-width: 65ch; }
.editorial p { font-size: 1.0625rem; line-height: 1.65; color: var(--text-2); }
.editorial p + p { margin-top: 1.25rem; }
.svc-cold .editorial { max-width: none; }

/* ─── Live time digital read-out ─── */
.live-time {
  display: block;
  font-family: var(--f-mono);
  font-feature-settings: "tnum" on;
  color: var(--signal);
  font-size: 1.5rem;
  letter-spacing: 0.06em;
  font-weight: 500;
  margin: 0.125rem 0;
}

/* ─── Dash quote (used on diesel + about) ─── */
.dash-quote {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.25rem, 2vw + 0.5rem, 1.75rem);
  line-height: 1.35;
  color: var(--text-inv);
  max-width: 32ch;
  letter-spacing: -0.005em;
  position: relative;
  padding-left: 1.5rem;
  border-left: 2px solid var(--signal);
}

/* Pull-quote fallback */
.pull-quote {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(1.5rem, 2vw + 0.5rem, 2rem);
  line-height: 1.25;
  color: var(--text);
  letter-spacing: -0.01em;
  border-left: 2px solid var(--signal);
  padding-left: 1.5rem;
  max-width: 32ch;
  margin-top: 2rem;
}

/* Section-tag legacy class */
.section-tag {
  color: var(--signal);
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

/* ─── Sub-page nav-mobile readability on dark pages ─── */
.nav.on-dark .nav-mobile { color: var(--text-inv); }
.nav.on-dark .nav-mobile a { color: var(--text-inv); }

/* ─── Hero ticker mobile fix ─── */
@media (max-width: 767px) {
  .hero-ticker { padding: 0.625rem var(--pad-x); gap: 0.875rem; }
  .hero-ticker-rows { gap: 1.25rem; }
  .hero-ticker-row { gap: 0.625rem; font-size: 0.625rem; }
  .hero-ticker-row .tag { padding: 0.0625rem 0.375rem; }
  .hero-stamp { display: none; }
}

/* ─── Hero h1 size cap on small screens ─── */
@media (max-width: 639px) {
  .hero h1 { font-size: clamp(2.25rem, 11vw, 3rem); line-height: 0.95; }
  .hero-eyebrows { font-size: 0.625rem; gap: 0.625rem 1rem; }
  .hero-eyebrows .sep { display: none; }
}

/* ─── Bulk display words on mobile ─── */
@media (max-width: 639px) {
  .bulk-word { font-size: clamp(2.5rem, 12vw, 4rem); line-height: 0.92; }
}

/* ─── Marquee on mobile — slightly smaller, faster ─── */
@media (max-width: 639px) {
  .marquee-track { animation-duration: 35s; padding: 0.875rem 0; }
  .marquee-item { font-size: 1.0625rem; padding: 0 1.25rem; }
  .marquee-item::after { margin-left: 1.25rem; }
}

/* ─── Section bands on mobile — shrink the giant outlined number ─── */
@media (max-width: 639px) {
  .band { height: 96px; }
  .band-num { font-size: clamp(120px, 32vw, 180px); left: -0.5rem; }
}

/* ─── Manifest cells on mobile ─── */
@media (max-width: 767px) {
  .manifest-cell { min-height: 140px; padding: 2rem 1rem 1rem; }
  .manifest-cell--feat { min-height: 200px; padding: 2rem 1.25rem 1.25rem; }
  .manifest-label { font-size: 1.125rem; }
  .manifest-cell--feat .manifest-label { font-size: 1.375rem; }
}

/* ─── Stat cell numerics on mobile ─── */
.stat-cell .stat-num { white-space: nowrap; }
@media (max-width: 419px) {
  .stat-cell .stat-num { font-size: 2.5rem; white-space: normal; }
}

/* ─── CTA band misc ─── */
.cta-band .kicker { color: var(--signal); }
.cta-band .mono { color: var(--text-mute); }

/* ─── Form note in dark contexts ─── */
.bg-ink .form-note, .bg-ink-2 .form-note, .cta-band .form-note { color: var(--text-mute); }

/* ─── Dlist links on dark surfaces ─── */
.bg-ink .dlist a, .bg-ink-2 .dlist a, .svc-diesel .dlist a {
  color: var(--signal);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ─── Footer-clock layout on contact + quote sidebars ─── */
.footer-clock {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--line-inv);
}
.bg-paper .footer-clock, .bg-paper-2 .footer-clock { border-color: var(--line); color: var(--text-2); }
.bg-paper .footer-clock .live-time, .bg-paper-2 .footer-clock .live-time { color: var(--signal-deep); }

/* ─── Page-head buttons on dark ─── */
.page-head .btn-ghost { color: var(--text-inv); border-color: var(--text-inv); }
.page-head .btn-ghost:hover { background: var(--text-inv); color: var(--ink); }

/* ─── Pulse-dot brighter on dark navs ─── */
.nav.on-dark .pulse-dot::after { background: var(--signal-glow); }

@media (max-width: 1380px) {
  .nav-status { font-size: 0.625rem; gap: 0.4rem; }
}

body.bg-ink { background: var(--ink); color: var(--text-inv); }

/* ─── Hero spec cell tighten on mobile ─── */
@media (max-width: 639px) {
  .hero-spec { gap: 1rem 1.25rem; padding-left: 1rem; }
  .hero-spec-cell b { font-size: 1.375rem; }
}

/* ─── lede paragraph link colour ─── */
.lede a { color: var(--signal); text-decoration: underline; text-underline-offset: 3px; }
.lede a:hover { text-decoration-thickness: 2px; }

/* ─── Field input on dark contexts ─── */
.bg-ink .field input, .bg-ink .field textarea, .bg-ink .field select {
  color: var(--text-inv);
  border-bottom-color: var(--text-inv);
}

/* ─── Body line-height for editorial paragraphs ─── */
.editorial > div p { color: var(--text-2); }
.bg-ink-2 .editorial > div p, .svc-diesel .editorial > div p { color: var(--text-mute); }

/* ════════════════════════════════════════════════════════════════════
   LIFT PASS — UI critique applied. Demote lime from field to flare,
   tighten hierarchy, reclaim editorial restraint.
   ════════════════════════════════════════════════════════════════════ */

/* A. Lime marquee → dark with lime — was a 100% lime field, too loud */
.marquee {
  background: var(--ink);
  color: var(--signal);
  border-block: 1px solid var(--signal);
}
.marquee-item {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.125rem;
  letter-spacing: 0.18em;
  color: var(--signal);
}
.marquee-item::after {
  color: var(--text-mute);
  margin-left: 2.5rem;
  opacity: 0.6;
}

/* B. Cap H1 — was clamp(3rem, 9vw, 9rem) — fighting the hero-stamp */
h1 { font-size: clamp(2.5rem, 7vw, 6.5rem); }
.hero h1 { font-size: clamp(2.5rem, 7vw, 6.5rem); }
.page-head h1 { font-size: clamp(2.25rem, 6vw, 5.5rem); }

/* C. Lime hairline above every section head — costs nothing, reads as system */
.s-head { position: relative; padding-top: 3.5rem; }
.s-head::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 64px;
  height: 1px;
  background: var(--signal);
}
@media (min-width: 1024px) {
  .s-head { padding-top: 4rem; }
}

/* D. Section-tag rule on dark surfaces was disappearing into the bg */
.bg-ink .s-head::before, .bg-ink-2 .s-head::before, .svc-diesel .s-head::before, .svc-bulk .s-head::before { background: var(--signal); }

/* E. Nav-status — show on standard laptop widths, not just ≥1280px */
@media (min-width: 1024px) {
  .nav-status { display: inline-flex; }
}

/* F. Bulk display: simplify to 2 outlined + 1 lime, kill ghost word */
.bulk-word--ghost {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--text-inv);
  transform: none;
}
.bulk-word { font-size: clamp(3rem, 9vw, 7rem); line-height: 0.92; }
@media (min-width: 768px) {
  .bulk-word { font-size: clamp(4rem, 11vw, 8.5rem); }
}
/* Tonnage chips: move OUT of absolute positioning so they're readable */
.bulk-word .tonn {
  position: static;
  display: block;
  margin-top: -0.5rem;
  margin-bottom: 1.5rem;
  font-size: 0.6875rem;
}

/* G. Footer-grid awkward 2-col → just stack until 1024px */
@media (min-width: 640px) and (max-width: 1023px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-brand { max-width: none; }
}

/* H. CTA band ctas — phone-line orphan fix */
.cta-band .ctas .mono { padding-top: 0.5rem; border-top: 1px solid var(--line-inv); width: 100%; max-width: 240px; text-align: right; }
@media (max-width: 767px) {
  .cta-band .ctas .mono { text-align: left; }
}

/* I. Bulk display vertical spacing — was tight at smaller font sizes */
.bulk-display { margin: 2.5rem 0 2rem; gap: 0.5rem; }
@media (min-width: 768px) { .bulk-display { margin: 3.5rem 0 3rem; gap: 0.5rem; } }

/* J. svc-bulk and svc-diesel padding consistency on mobile */
@media (max-width: 767px) {
  .svc-bulk, .svc-diesel { padding-top: 4rem; padding-bottom: 4rem; }
}

/* K. Add a paper "intermission" strip before §04 — breaks the dark run */
.intermission {
  background: var(--paper-2);
  padding: 1.75rem var(--pad-x);
  border-block: 1px solid var(--line);
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-2);
  text-align: center;
}
.intermission strong { color: var(--signal-deep); font-weight: 500; }

/* L. Manifest-cell .is-active (was missing) */
.manifest-cell.is-active {
  background: var(--ink-3);
  box-shadow: inset 0 0 0 1px var(--signal);
  position: relative;
}
.manifest-cell.is-active::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(164, 201, 58, 0.12), transparent 55%);
  pointer-events: none;
}
.manifest-cell.is-active .manifest-num { color: var(--signal); }
.manifest-cell.is-active .manifest-label { color: var(--signal); }
.manifest-cell.is-active .manifest-sub { color: var(--text-inv); }
.manifest-cell.is-active[style*="grid-column"] { padding: 2rem 1.75rem 1.5rem; }

.manifest-cell .manifest-label[style*="font-size"] {
  font-family: var(--f-display);
  font-weight: 700;
  letter-spacing: -0.005em;
  text-transform: lowercase;
  word-break: break-all;
}

/* (manifest-cell.is-active rules now live above in the LIFT PASS section) */

/* ════════════════════════════════════════════════════════════════════
   TRUCK GALLERY — replaces the line-art SVG with real photography
   ════════════════════════════════════════════════════════════════════ */
.truck-gallery {
  margin: 3rem 0 0;
  padding: 0;
}
.truck-gallery-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  background: var(--ink);
  padding: 0;
  border: 1px solid var(--ink-4);
}
@media (min-width: 768px) {
  .truck-gallery-grid {
    grid-template-columns: 2fr 1fr;
    gap: 0;
  }
}
.truck-shot {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  aspect-ratio: 16 / 10;
  isolation: isolate;
}
.truck-shot--wide { aspect-ratio: 16 / 10; }
@media (min-width: 768px) {
  .truck-shot { aspect-ratio: 1; }
  .truck-shot--wide { aspect-ratio: auto; min-height: 360px; }
}
@media (min-width: 1024px) {
  .truck-shot { aspect-ratio: auto; min-height: 440px; }
  .truck-shot--wide { min-height: 440px; }
}
.truck-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1200ms var(--ease-heavy), filter 600ms var(--ease-settle);
  /* Subtle warm grade so photos sit with the brand instead of fighting it */
  filter: contrast(1.05) saturate(0.85) brightness(0.92);
}
@media (hover: hover) {
  .truck-shot:hover img {
    transform: scale(1.03);
    filter: contrast(1.1) saturate(1) brightness(1);
  }
}
/* Subtle gradient overlay so caption stays legible */
.truck-shot::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 50%, rgba(10, 13, 10, 0.65) 100%);
  pointer-events: none;
  z-index: 1;
}
/* Caption */
.truck-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 1rem 1.25rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-inv);
}
.truck-caption span:first-child { color: var(--signal); }
.truck-caption span:last-child { color: var(--text-mute); }

/* Reveal-on-scroll */
.truck-gallery {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 900ms var(--ease-heavy), transform 900ms var(--ease-heavy);
}
.truck-gallery.in {
  opacity: 1;
  transform: translateY(0);
}

/* On dark backgrounds (svc-containers is paper, but on container service page
   the parent .container is on .bg-paper too — so this is for safety only) */
.bg-ink .truck-gallery-grid, .bg-ink-2 .truck-gallery-grid { border-color: var(--line-inv-2); }

/* Three-up gallery variant (one photo per service line) */
.truck-gallery--three .truck-gallery-grid {
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .truck-gallery--three .truck-gallery-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
  }
}
.truck-gallery--three .truck-shot {
  aspect-ratio: 4 / 3;
}
@media (min-width: 1024px) {
  .truck-gallery--three .truck-shot {
    aspect-ratio: 1;
    min-height: 360px;
  }
}

/* ════════════════════════════════════════════════════════════════════
   MINIMAP — Western Cape with glowing truck dots (replaces SecureTrac feed)
   ════════════════════════════════════════════════════════════════════ */
.minimap {
  position: relative;
  border: 1px solid var(--line-inv-2);
  background: var(--ink);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  aspect-ratio: 1.4 / 1;
  overflow: hidden;
}
.minimap-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-mute);
  z-index: 3;
  position: relative;
}
.minimap-head .live {
  color: var(--signal);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.minimap-canvas {
  position: relative;
  flex: 1;
  width: 100%;
}
.minimap-canvas svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.minimap-canvas .map-outline {
  fill: var(--ink-2);
  stroke: var(--ink-4);
  stroke-width: 1;
}
.minimap-canvas .map-grid {
  stroke: rgba(164, 201, 58, 0.06);
  stroke-width: 1;
  fill: none;
}
.minimap-canvas .map-route {
  stroke: var(--line-inv-2);
  stroke-width: 1;
  stroke-dasharray: 2 3;
  fill: none;
}
.minimap-canvas .map-city {
  font-family: var(--f-mono);
  font-size: 8px;
  fill: var(--text-mute);
  letter-spacing: 0.1em;
}
.minimap-canvas .map-city-dot {
  fill: var(--steel);
}
.minimap-truck {
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--signal);
  transform: translate(-50%, -50%);
  z-index: 2;
}
.minimap-truck::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--signal);
  animation: minimap-glow 2.6s infinite var(--ease-settle);
}
.minimap-truck--idle {
  background: var(--steel);
}
.minimap-truck--idle::after {
  animation: minimap-glow-idle 4s infinite var(--ease-settle);
}
@keyframes minimap-glow {
  0%   { transform: scale(1);   opacity: 0.65; box-shadow: 0 0 0 0 rgba(164, 201, 58, 0.5); }
  70%  { transform: scale(3);   opacity: 0;    box-shadow: 0 0 0 8px rgba(164, 201, 58, 0); }
  100% { transform: scale(3);   opacity: 0;    box-shadow: 0 0 0 0 rgba(164, 201, 58, 0); }
}
@keyframes minimap-glow-idle {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 0.8; }
}
.minimap-foot {
  display: flex;
  justify-content: space-between;
  font-family: var(--f-mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-mute);
  border-top: 1px solid var(--line-inv);
  padding-top: 0.625rem;
}
.minimap-foot .live { color: var(--signal); }
.minimap-foot .legend { display: inline-flex; gap: 0.875rem; }
.minimap-foot .legend span { display: inline-flex; align-items: center; gap: 0.375rem; }
.minimap-foot .legend .dot {
  width: 6px; height: 6px; border-radius: 50%;
}
.minimap-foot .legend .dot.live { background: var(--signal); }
.minimap-foot .legend .dot.idle { background: var(--steel); }

/* ════════════════════════════════════════════════════════════════════
   LIVE LOAD-COUNT TICKER — replaces the old "Live Yard" feed
   ════════════════════════════════════════════════════════════════════ */
.hero-ticker .label .pulse-dot { background: var(--signal); }

/* ════════════════════════════════════════════════════════════════════
   SUBCONTRACTOR APPLICATION FORM (drive-with-us page)
   ════════════════════════════════════════════════════════════════════ */
.subbie-callout {
  background: var(--ink-3);
  border: 1px solid var(--line-inv-2);
  border-left: 2px solid var(--signal);
  padding: 1.25rem 1.5rem;
  font-family: var(--f-mono);
  font-size: 0.8125rem;
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: var(--text-inv);
  margin-bottom: 2rem;
}
.subbie-callout strong { color: var(--signal); font-weight: 500; }

/* --- brand palette + corporate styling --- */

:root {
  /* Brand colours — exact from user's guide */
  --signal:        #C6D72F;     /* primary lime */
  --signal-deep:   #AEBE24;     /* hover/pressed lime */
  --signal-glow:   #DCE85A;     /* highlight only */
  --soft-lime:     #F1F5D5;     /* footer banner / accent surface */

  /* Surfaces */
  --paper:         #FAFAF6;     /* warm off-white — primary page bg */
  --paper-2:       #F5F5EE;     /* very subtle alt */
  --paper-3:       #E2E2DD;     /* line / divider tone */
  --white:         #FFFFFF;     /* card surface */

  /* Ink steps */
  --ink:           #111111;
  --ink-2:         #1A1A1A;
  --ink-3:         #242424;     /* charcoal */
  --ink-4:         #2E2E2E;
  --charcoal:      #242424;

  /* Type colours */
  --text:          #111111;
  --text-2:        #767676;     /* warm grey for body + section subtitle */
  --text-3:        #909090;
  --text-inv:      #FAFAF6;
  --text-mute:     #909090;

  /* Lines */
  --line:          #E2E2DD;
  --line-strong:   rgba(17, 17, 17, 0.18);
  --line-inv:      rgba(250, 250, 246, 0.14);
  --line-inv-2:    rgba(250, 250, 246, 0.22);

  /* Aliases (kept for legacy inline styles) */
  --steel-dim:     var(--text-2);
  --steel:         var(--text-2);
  --lime:          var(--signal);
  --cold:          #6B8FB8;     /* keep cold accent calmer */
  --amber:         #D49A2A;
  --flag:          #C8442D;
}

/* ─── Typography refinement ───
   Single-family Inter approach. Drop the heavy condensed display feel for
   a cleaner, more corporate hierarchy. */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
h1, h2, h3, h4 {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 700;
  text-transform: none;
  letter-spacing: -0.04em;
  line-height: 1.0;
  color: var(--ink);
}
h1 {
  font-size: clamp(2.75rem, 7vw + 0.5rem, 5.25rem);
  letter-spacing: -0.055em;
  line-height: 0.98;
  font-weight: 700;
}
h2 {
  font-size: clamp(2rem, 4vw + 0.5rem, 2.875rem);
  letter-spacing: -0.045em;
  line-height: 1;
  font-weight: 700;
}
h3 {
  font-size: 1.375rem;
  letter-spacing: -0.03em;
  font-weight: 700;
}

/* The "lime" highlight in headings — matches the user's guide pattern */
h1 .lime, h2 .lime, h3 .lime,
.hero h1 .lime, .page-head h1 .lime { color: var(--signal-deep) !important; }
/* Italic accent: serif fallback — much subtler in the V3 system */
.it, h1 .it, h2 .it, .hero h1 .it, .page-head h1 .it {
  font-family: 'Inter', sans-serif;
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: -0.04em;
  color: inherit;
}

/* ─── Eyebrow / kicker — calmer than the mono operational feel ─── */
.kicker {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-2);
}
.kicker::before { display: none; }   /* drop the hairline-before flourish */

/* ─── Body type ─── */
.lede, .hero-sub, .editorial p, .s-head h2 + p, .s-head .lede {
  font-size: 1.125rem;
  color: var(--text-2);
  line-height: 1.55;
}
@media (min-width: 1024px) {
  .lede, .hero-sub { font-size: 1.1875rem; }
}

/* ─── BUTTONS — pill shape, premium-corporate feel ─── */
.btn {
  border-radius: 999px;
  height: 48px;
  padding: 0 1.625rem;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  text-transform: none;
  border-width: 1px;
  box-shadow: none;
  gap: 0.5rem;
}
.btn::after { display: none; }  /* drop the always-visible arrow */
.btn-primary {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
  box-shadow: none;
}
.btn-primary:hover {
  background: var(--signal);
  color: var(--ink);
  border-color: var(--signal);
}
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn-ghost:hover {
  background: var(--signal);
  color: var(--ink);
  border-color: var(--signal);
}
.bg-ink .btn-ghost,
.bg-ink-2 .btn-ghost,
.svc-bulk .btn-ghost,
.svc-diesel .btn-ghost,
.cta-band .btn-ghost,
.page-head .btn-ghost,
.hero .btn-ghost,
.footer .btn-ghost {
  color: var(--white);
  border-color: var(--white);
}
.bg-ink .btn-ghost:hover,
.bg-ink-2 .btn-ghost:hover,
.svc-bulk .btn-ghost:hover,
.svc-diesel .btn-ghost:hover,
.cta-band .btn-ghost:hover,
.page-head .btn-ghost:hover,
.hero .btn-ghost:hover,
.footer .btn-ghost:hover {
  background: var(--signal);
  color: var(--ink);
  border-color: var(--signal);
}
.btn-sm { height: 40px; padding: 0 1.125rem; font-size: 0.8125rem; }

/* ─── CARDS / surfaces — 14px radius, white on paper ─── */
.cred,
.dash-tile,
.subbie-callout,
.contact-card,
.footer-clock,
.form-success,
.tracfeed,
.minimap,
.temp-graph,
.intermission {
  border-radius: 14px;
}
.cred { background: var(--white); border-color: var(--line); }
.cred:hover { background: var(--soft-lime); }

/* Manifest cells — keep dark for service section, but soften corners */
.manifest { border-radius: 14px; overflow: hidden; }
.manifest-cell--feat { border-radius: 8px; }   /* still wants a slight pop */

/* Truck gallery & cells */
.truck-gallery-grid, .truck-shot { border-radius: 14px; overflow: hidden; }

/* ─── Section bands — calmer, lower contrast ─── */
.band { background: var(--white); border-block-color: var(--line); height: 96px; }
.band-num {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  -webkit-text-stroke-color: rgba(17, 17, 17, 0.06);
  letter-spacing: -0.05em;
}
.band-kicker {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--text-2);
}
.band-sub { font-family: 'Inter', sans-serif; color: var(--text-2); }
.band-dark { background: var(--ink); }
.band-dark .band-num { -webkit-text-stroke-color: rgba(250, 250, 246, 0.06); }
.band-dark .band-kicker { color: var(--signal); }
.band-dark .band-sub { color: var(--text-mute); }

/* ─── Surface palette ─── */
.bg-paper      { background: var(--paper); color: var(--ink); }
.bg-paper-2    { background: var(--paper-2); color: var(--ink); }
.bg-ink        { background: var(--ink); color: var(--text-inv); }
.bg-ink-2      { background: var(--charcoal); color: var(--text-inv); }

/* ─── Hero — softer, less harsh ─── */
.hero {
  background: var(--ink);
  color: var(--text-inv);
}
.hero h1 { color: var(--text-inv); letter-spacing: -0.055em; }
.hero h1 .lime { color: var(--signal); }
.hero-sub { color: rgba(250, 250, 246, 0.72); }
.hero-spec-cell { color: rgba(250, 250, 246, 0.64); }
.hero-spec-cell b {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--white);
  text-transform: none;
}

/* Page-head sub-pages */
.page-head { background: var(--ink); }
.page-head h1 { letter-spacing: -0.05em; }
.page-head .lede { color: rgba(250, 250, 246, 0.72); }

/* ─── MARQUEE — calmer, less shouty ─── */
.marquee {
  background: var(--ink);
  color: var(--signal);
  border-block: 1px solid var(--ink-3);
}
.marquee-item {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.18em;
  color: var(--signal);
  text-transform: uppercase;
}
.marquee-item::after { color: rgba(250, 250, 246, 0.3); }

/* ─── Stats section ─── */
.stat-cell .stat-num {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  letter-spacing: -0.055em;
  line-height: 0.95;
  color: var(--ink);
}
.stat-cell .stat-num .accent { color: var(--signal-deep); }
.stat-cell .stat-lbl {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--text-2);
}
.stats { background: var(--paper); }

/* ─── Bulk display — soften ─── */
.bulk-word {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  letter-spacing: -0.045em;
  font-size: clamp(3rem, 8vw, 7rem);
}

/* ─── Service section backgrounds tone-down ─── */
.svc-containers { background: var(--paper); }
.svc-cold { background: var(--paper-2); }
.svc-bulk { background: var(--ink); }
.svc-diesel { background: var(--charcoal); }

/* ─── Cred badge — make it pill ─── */
.cred .cred-badge {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--signal-deep);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.cred .cred-badge::before {
  width: 8px; height: 8px;
  background: var(--signal);
  border-radius: 50%;   /* dot, not square */
}
.cred h4 {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* ─── Manifest cells — keep dark, polish typography ─── */
.manifest-num {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  letter-spacing: 0.14em;
}
.manifest-label {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: none;
}
.manifest-sub {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  letter-spacing: 0.04em;
}

/* ─── Form inputs — softer borders, rounded corners ─── */
.field input, .field select, .field textarea {
  border-bottom-width: 1px;
  border-bottom-color: var(--line-strong);
}
.field textarea {
  border: 1px solid var(--line);
  border-radius: 14px;
}

/* ─── Footer ─── */
.footer { background: var(--ink); }
.footer h4 {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--signal);
}
.footer-watermark {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  -webkit-text-stroke-color: rgba(198, 215, 47, 0.08);
}

/* ─── Footer-bottom: replace mono caps with sentence case ─── */
.footer-bottom {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: none;
}

/* ─── Live time + footer-clock — keep the mono digital look subtle ─── */
.live-time {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-feature-settings: "tnum" on;
}
.footer-clock-time { font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; }

/* ─── Nav ─── */
.nav .logo-text {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  letter-spacing: -0.01em;
  font-size: 1rem;
}
.nav-links a {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
  font-size: 0.9375rem;
  color: rgba(250, 250, 246, 0.85);
}
.on-paper .nav-links a { color: var(--text-2); }
.on-paper .nav-links a:hover, .on-paper .nav-links a[aria-current="page"] { color: var(--ink); }
.nav-cta {
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
  background: var(--signal);
  color: var(--ink);
  border-color: var(--signal);
  height: 40px;
  padding: 0 1.25rem;
}
.nav-cta::before { display: none; }
.nav-cta:hover { background: var(--signal-glow); }

.nav-meta, .nav-status {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  letter-spacing: 0.16em;
  font-size: 0.6875rem;
  text-transform: uppercase;
  color: rgba(250, 250, 246, 0.55);
}

/* ─── CTA band — softer ─── */
.cta-band { background: var(--ink); }
.cta-band h2 { color: var(--white); letter-spacing: -0.045em; }
.cta-band p { color: rgba(250, 250, 246, 0.7); }

/* ─── Routes / chips ─── */
.route {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: none;
}
.route strong { font-weight: 700; }

/* ─── Hero ticker — quieter ─── */
.hero-ticker {
  background: rgba(0, 0, 0, 0.4);
  border-bottom-color: rgba(250, 250, 246, 0.08);
}
.hero-ticker .label {
  color: var(--signal);
  font-weight: 600;
  letter-spacing: 0.16em;
}
.hero-ticker-row .tag {
  border-radius: 999px;
  border-color: rgba(250, 250, 246, 0.18);
  font-weight: 500;
  letter-spacing: 0.12em;
  padding: 0.125rem 0.625rem;
}

/* ─── Soft-lime banner (matches user's footer-note pattern) ─── */
.intermission { background: var(--soft-lime); color: var(--ink-3); }
.intermission strong { color: var(--ink); font-weight: 700; }

/* ─── Gauge + dash tile typography refresh ─── */
.gauge-val, .dash-tile-val {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.dash-tile-lbl {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  letter-spacing: 0.14em;
}

/* ─── Body bg — paper by default ─── */
body { background: var(--paper); }

/* ─── Better focus ring ─── */
:focus-visible {
  outline: 2px solid var(--signal-deep);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ════════════════════════════════════════════════════════════════════
   TICKER v2 — continuous-scroll smooth banner of load counts
   ════════════════════════════════════════════════════════════════════ */
.hero-ticker {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0.875rem var(--pad-x);
  background: rgba(0, 0, 0, 0.45);
  border-bottom: 1px solid rgba(250, 250, 246, 0.08);
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  z-index: 5;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hero-ticker .label {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--signal);
  padding-right: 1.25rem;
  border-right: 1px solid rgba(250, 250, 246, 0.12);
}
.hero-ticker-rows {
  display: flex;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  position: relative;
  /* fade edges so text doesn't slam into the boundaries */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.ticker-strip {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  gap: 1.5rem;
  padding-right: 1.5rem;
  animation: ticker-roll 60s linear infinite;
}
.hero-ticker-rows:hover .ticker-strip,
.hero-ticker-rows:focus-within .ticker-strip { animation-play-state: paused; }
.ticker-item {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.05em;
  color: rgba(250, 250, 246, 0.92);
  flex-shrink: 0;
}
.ticker-dot {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  color: var(--signal);
  flex-shrink: 0;
  opacity: 0.6;
}
@keyframes ticker-roll {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-100%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .ticker-strip { animation: none; }
}

/* ════════════════════════════════════════════════════════════════════
   NAV — solid backgrounds (kill transparent-at-top trick that exposed
   the cream body bg behind a dark-themed nav, making white text
   invisible on white). Now the nav is always opaque on its theme.
   ════════════════════════════════════════════════════════════════════ */
.nav.on-dark {
  background: var(--ink);
  border-bottom: 1px solid rgba(250, 250, 246, 0.06);
}
.nav.on-dark.scrolled {
  background: rgba(10, 10, 10, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: rgba(250, 250, 246, 0.10);
}
.nav.on-paper {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.nav.on-paper.scrolled {
  background: rgba(250, 250, 246, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Body always paints behind nav — set the page-base bg to ink on sub-pages
   that have a dark page-head as their first section, so any tiny pre-render
   gap doesn't flash cream. We do this defensively via an html-level class
   that any page can opt into; for now, force the body to match the first
   section visible on dark-theme pages. */
html { background: var(--ink); }
body { background: var(--paper); }
/* On pages where the nav is on-dark and the first content section is also
   dark (page-head, hero), keep the body bg dark to prevent cream flash
   behind the nav at scroll-top. */
body:has(.nav.on-dark) { background: var(--ink); }

/* ════════════════════════════════════════════════════════════════════
   LOGO + WORDMARK SPACING — nicer kerning + alignment
   ════════════════════════════════════════════════════════════════════ */
.nav-inner .logo { gap: 0.875rem; align-items: center; }
.logo-mark {
  width: 56px;
  height: 56px;
  object-fit: contain;
  flex-shrink: 0;
}
@media (min-width: 1024px) {
  .logo-mark { width: 60px; height: 60px; }
}
/* Home nav uses the stacked LIMECOAL / CARRIERS · EST. 2001 wordmark — give it a
   slightly larger mark so the two-line stack feels anchored. */
.nav-inner .logo:has(.l2) .logo-mark { width: 64px; height: 64px; }
@media (min-width: 1024px) {
  .nav-inner .logo:has(.l2) .logo-mark { width: 72px; height: 72px; }
}
/* Wordmark sizing: bumped to match the bigger mark. */
.nav .logo-text { font-size: 1.125rem; }
.nav .logo-text .l1 { font-size: 1.25rem; letter-spacing: 0.01em; }
.nav .logo-text .l2 { font-size: 0.8125rem; letter-spacing: 0.16em; }
@media (min-width: 1024px) {
  .nav .logo-text .l1 { font-size: 1.4375rem; }
  .nav .logo-text .l2 { font-size: 0.875rem; }
}
.nav .logo-text {
  display: inline-flex;
  flex-direction: column;
  line-height: 1;
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  letter-spacing: -0.01em;
  font-size: 0.875rem;
  color: var(--text-inv);
}
.nav .logo-text em {
  font-style: normal;
  color: var(--signal);
  margin-left: 0.125em;
}
.nav.on-paper .logo-text { color: var(--text); }

/* Footer lockup with same spacing */
.lockup { gap: 1rem; align-items: center; }
.lockup img { width: 80px; height: 80px; object-fit: contain; flex-shrink: 0; }
.footer-brand .lockup .logo-text {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.015em;
  line-height: 1;
  color: var(--text-inv);
}
.footer-brand .lockup .logo-text em {
  font-style: normal;
  color: var(--signal);
  margin-left: 0.1em;
}

/* ════════════════════════════════════════════════════════════════════
   CONTRAST GUARDS — text-on-bg safety net
   Catch every common mismatch via cascading rules.
   ════════════════════════════════════════════════════════════════════ */

/* On dark sections, keep all body and link text light by default */
.bg-ink, .bg-ink-2, .svc-bulk, .svc-diesel, .cta-band, .page-head, .hero, .footer {
  color: var(--text-inv);
}
.bg-ink p, .bg-ink-2 p, .svc-bulk p, .svc-diesel p, .cta-band p, .page-head p, .footer p {
  color: rgba(250, 250, 246, 0.78);
}
.bg-ink a:not(.btn):not(.nav-cta), .bg-ink-2 a:not(.btn):not(.nav-cta),
.svc-bulk a:not(.btn):not(.nav-cta), .svc-diesel a:not(.btn):not(.nav-cta),
.cta-band a:not(.btn):not(.nav-cta), .footer a:not(.btn):not(.nav-cta) {
  color: var(--text-inv);
}
.bg-ink a:not(.btn):not(.nav-cta):hover,
.bg-ink-2 a:not(.btn):not(.nav-cta):hover,
.svc-bulk a:not(.btn):not(.nav-cta):hover,
.svc-diesel a:not(.btn):not(.nav-cta):hover,
.cta-band a:not(.btn):not(.nav-cta):hover,
.footer a:not(.btn):not(.nav-cta):hover { color: var(--signal); }

/* On light sections, make sure dark text wins */
.bg-paper, .bg-paper-2, .svc-containers, .svc-cold, .stats {
  color: var(--text);
}
.bg-paper p, .bg-paper-2 p, .svc-containers p, .svc-cold p, .stats p {
  color: var(--text-2);
}

/* Overrides for inline styles using --text on dark contexts (defensive) */
.bg-ink [style*="color: var(--text)"],
.bg-ink-2 [style*="color: var(--text)"],
.svc-diesel [style*="color: var(--text)"],
.svc-bulk [style*="color: var(--text)"],
.cta-band [style*="color: var(--text)"],
.page-head [style*="color: var(--text)"] {
  color: var(--text-inv) !important;
}

/* Footer-clock used inside light sidebars (.bg-paper, .bg-paper-2) — invert */
.bg-paper .footer-clock,
.bg-paper-2 .footer-clock {
  border-color: var(--line);
  color: var(--text-2);
}
.bg-paper .footer-clock span,
.bg-paper-2 .footer-clock span { color: var(--text); }
.bg-paper .footer-clock .live-time,
.bg-paper-2 .footer-clock .live-time { color: var(--signal-deep); }
.bg-paper .footer-clock-loc,
.bg-paper-2 .footer-clock-loc { color: var(--text-2); }

/* Skip-to-content visible on focus */
.skip { background: var(--signal); color: var(--ink); }

/* ════════════════════════════════════════════════════════════════════
   BRAND-MANTRA STRIP — replaces the lime route marquee
   ════════════════════════════════════════════════════════════════════ */
.mantra {
  background: var(--ink);
  color: var(--signal);
  border-block: 1px solid var(--ink-3);
  overflow: hidden;
  position: relative;
  white-space: nowrap;
}
.mantra-track {
  display: flex;
  width: max-content;
  padding: 1rem 0;
  animation: mantra-roll 50s linear infinite;
  gap: 3rem;
}
.mantra-track:hover, .mantra-track:focus-within { animation-play-state: paused; }
.mantra-item {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 0.9375rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--signal);
  flex-shrink: 0;
  padding: 0 1rem;
}
.mantra-item.dot {
  color: rgba(250, 250, 246, 0.3);
  padding: 0;
}
@keyframes mantra-roll {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}

/* ════════════════════════════════════════════════════════════════════
   MAP V3 — Southern Africa (proper coastline + cities + Lesotho cutout)
   ════════════════════════════════════════════════════════════════════ */
.minimap.minimap-sa {
  aspect-ratio: 1.4 / 1;
  padding: 1rem;
}
.minimap-sa .map-grid line {
  stroke: rgba(250, 250, 246, 0.04);
  stroke-width: 1;
}
.minimap-sa .map-outline {
  fill: var(--ink-3);
  stroke: rgba(250, 250, 246, 0.18);
  stroke-width: 1.2;
  stroke-linejoin: round;
}
.minimap-sa .map-namibia {
  fill: var(--ink-2);
  stroke: rgba(250, 250, 246, 0.10);
  stroke-width: 1;
  stroke-dasharray: 4 4;
  stroke-linejoin: round;
}
.minimap-sa .map-lesotho {
  fill: var(--ink);
  stroke: rgba(250, 250, 246, 0.16);
  stroke-width: 1;
}
.minimap-sa .map-route-major {
  stroke: rgba(198, 215, 47, 0.32);
  stroke-width: 1.4;
  stroke-linecap: round;
  fill: none;
}
.minimap-sa .map-country {
  font-family: 'Inter', sans-serif;
  font-size: 7px;
  font-weight: 600;
  letter-spacing: 0.2em;
  fill: rgba(250, 250, 246, 0.12);
  text-transform: uppercase;
  pointer-events: none;
}
.minimap-sa .map-city {
  font-family: 'Inter', sans-serif;
  font-size: 6.5px;
  font-weight: 500;
  letter-spacing: 0.05em;
  fill: rgba(250, 250, 246, 0.55);
  text-transform: uppercase;
}
.minimap-sa .map-city--major {
  font-size: 7.5px;
  font-weight: 700;
  fill: var(--text-inv);
  letter-spacing: 0.06em;
}
.minimap-sa .map-city-dot {
  fill: rgba(250, 250, 246, 0.5);
}
.minimap-sa .map-city-dot--major {
  fill: var(--signal);
}

/* ════════════════════════════════════════════════════════════════════
   MAPLIBRE GL JS — real interactive map of Southern Africa
   Self-hosted from /assets/vendor/. Lazy-loaded into .map-real
   when the diesel section scrolls into view. The SVG above stays
   visible until the real map is mounted, then we hide it.
   ════════════════════════════════════════════════════════════════════ */
.minimap-real-wrap {
  position: relative;
  flex: 1;
  width: 100%;
  min-height: 0;
}
.minimap-real {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 6px;
  overflow: hidden;
  background: var(--ink-2);
  opacity: 0;
  transition: opacity 700ms var(--ease-heavy);
}
.minimap-real.is-ready { opacity: 1; }

/* When the real map is ready, hide the SVG fallback above it */
.minimap-canvas.is-replaced > svg { display: none; }
.minimap-canvas.is-replaced > .minimap-truck { display: none; }

/* Override MapLibre default UI to match the brand */
.minimap-real .maplibregl-canvas-container { background: var(--ink-2); }
.minimap-real .maplibregl-ctrl-attrib {
  background: rgba(10, 10, 10, 0.6);
  color: rgba(250, 250, 246, 0.5);
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  padding: 2px 6px;
}
.minimap-real .maplibregl-ctrl-attrib a {
  color: rgba(250, 250, 246, 0.7);
}
.minimap-real .maplibregl-ctrl-bottom-right .maplibregl-ctrl,
.minimap-real .maplibregl-ctrl-bottom-left .maplibregl-ctrl {
  margin: 0 4px 4px 0;
}

/* Custom city markers — HTML elements positioned by MapLibre */
.lc-marker {
  position: relative;
  width: 10px;
  height: 10px;
  cursor: default;
}
.lc-marker .dot {
  position: absolute;
  inset: 0;
  background: var(--signal);
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(10, 10, 10, 0.8);
}
.lc-marker .ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--signal);
  animation: lc-marker-pulse 2.6s infinite var(--ease-settle);
}
.lc-marker--major { width: 14px; height: 14px; }
.lc-marker--idle .dot { background: rgba(250, 250, 246, 0.45); }
.lc-marker--idle .ring { animation: lc-marker-pulse-idle 4s infinite var(--ease-settle); }
.lc-marker .label {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(250, 250, 246, 0.85);
  white-space: nowrap;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}
.lc-marker--major .label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-inv);
}
.lc-marker--idle .label { color: rgba(250, 250, 246, 0.55); }
@keyframes lc-marker-pulse {
  0%   { transform: scale(1);   opacity: 0.7; }
  70%  { transform: scale(3);   opacity: 0; }
  100% { transform: scale(3);   opacity: 0; }
}
@keyframes lc-marker-pulse-idle {
  0%, 100% { opacity: 0.25; }
  50%      { opacity: 0.5; }
}
@media (prefers-reduced-motion: reduce) {
  .lc-marker .ring { animation: none; opacity: 0; }
}

/* ════════════════════════════════════════════════════════════════════
   PHOTO BANDS — full-bleed editorial imagery
   ════════════════════════════════════════════════════════════════════ */
.photo-band {
  width: 100%;
  margin: 0;
  position: relative;
  overflow: hidden;
  background: var(--ink);
}
.photo-band img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 560px;
  object-fit: cover;
  object-position: center;
}
.photo-band--tall img { max-height: 720px; }
.photo-band--short img { max-height: 380px; }

.photo-band__cap {
  position: absolute;
  left: 1.25rem;
  bottom: 1rem;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(250, 250, 246, 0.82);
  background: rgba(10, 13, 10, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 0.45rem 0.75rem;
  border-left: 2px solid var(--signal);
  pointer-events: none;
}
@media (min-width: 768px) {
  .photo-band__cap { left: 2rem; bottom: 1.5rem; padding: 0.55rem 0.95rem; font-size: 0.75rem; }
}

/* ════════════════════════════════════════════════════════════════════
   PARTNER STRIP — external tools we link out to (Transnet, MarineTraffic, Windguru)
   Sits above the footer. Greyscale at rest, colour on hover.
   ════════════════════════════════════════════════════════════════════ */
.partner-strip {
  background: #ffffff;
  border-top: 1px solid rgba(10, 13, 10, 0.08);
  border-bottom: 1px solid rgba(10, 13, 10, 0.08);
  padding: 1.75rem 1.25rem;
}
.partner-strip__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}
.partner-strip__label {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(10, 13, 10, 0.55);
}
.partner-strip__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2rem 3rem;
  width: 100%;
}
@media (min-width: 768px) {
  .partner-strip { padding: 2.25rem 1.5rem; }
  .partner-strip__row { gap: 2.5rem 4rem; }
}
.partner-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  width: 160px;             /* fixed slot keeps all 5 logos visually balanced */
  text-decoration: none;
  filter: grayscale(0.4);   /* lighter touch — was 1.0 (fully grey) */
  opacity: 0.85;
  transition: filter 200ms ease, opacity 200ms ease, transform 200ms ease;
}
.partner-link:hover,
.partner-link:focus-visible {
  filter: grayscale(0);
  opacity: 1;
  transform: translateY(-1px);
}
.partner-link img {
  display: block;
  max-height: 48px;
  max-width: 140px;
  width: auto;
  object-fit: contain;
}
@media (min-width: 768px) {
  .partner-link { height: 64px; width: 180px; }
  .partner-link img { max-height: 56px; max-width: 160px; }
}

/* Inline photo card — used inside content sections, not full-bleed */
.photo-card {
  display: block;
  width: 100%;
  margin: 1.5rem 0;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.bg-paper .photo-card,
.svc-cold .photo-card { border-color: rgba(10, 13, 10, 0.08); }
.photo-card img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 460px;
  object-fit: cover;
}

/* --- lighten pass --- */

/* Body sits on paper. (Was already paper, but html bg was dark — fix the
   peek-through under bounce-scroll, etc.) */
html { background: var(--paper); }

/* ── Subpage hero (page-head): flip from ink to paper ───────────────── */
.page-head {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.page-head h1 { color: var(--text); }
.page-head .lede { color: var(--text-2); }
.page-head .kicker { color: var(--signal-deep); }
.page-head h1 .lime { color: var(--signal-deep); }

/* ── Service section bands: flip the dark ones to paper ─────────────── */
.svc-bulk,
.svc-diesel {
  background: var(--paper-2);
  color: var(--text);
}
.svc-bulk h2, .svc-bulk h3, .svc-bulk h4,
.svc-diesel h2, .svc-diesel h3, .svc-diesel h4 { color: var(--text); }
.svc-bulk p, .svc-bulk dd, .svc-bulk li,
.svc-diesel p, .svc-diesel dd, .svc-diesel li { color: var(--text-2); }
.svc-bulk .kicker, .svc-diesel .kicker { color: var(--signal-deep); }
.svc-bulk .bulk-word { color: var(--text); }
.svc-bulk .bulk-word--ghost { color: var(--paper-3); }

/* Bulk hero word/typography — keep impact but on paper */
.svc-bulk .b-num,
.svc-diesel .b-num { color: var(--text); }
.svc-bulk .b-lbl,
.svc-diesel .b-lbl { color: var(--signal-deep); }

/* ── CTA band — keep ONE dark moment but soften the rest ────────────── */
/* Default CTA bands now paper with a lime accent left-border. */
.cta-band {
  background: var(--paper-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-left: none;
}
.cta-band h2 { color: var(--text); }
.cta-band p  { color: var(--text-2); }
.cta-band .kicker { color: var(--signal-deep); }
/* Mark a SINGLE band as the dramatic dark moment by adding .cta-band--dark in HTML */
.cta-band--dark {
  background: var(--ink);
}
.cta-band--dark h2 { color: var(--text-inv); }
.cta-band--dark p  { color: rgba(250, 250, 246, 0.78); }
.cta-band--dark .kicker { color: var(--signal); }

/* ── Marquee + hero-ticker — kill the fake "live data" theatre ──────── */
.marquee,
.hero-ticker {
  display: none !important;
}
/* If marquee is reused inside a section legitimately, the explicit
   `.marquee--keep` opt-in re-enables it: */
.marquee.marquee--keep { display: flex !important; }

/* ── Mantra strip — keep on home only. Hide on subpages by default
   (subpages can still opt in with .mantra-strip--show) ─────────────── */
.page-head + .mantra-strip,
main > .mantra-strip:not(.mantra-strip--show) {
  display: none;
}

/* ── Hero (homepage) — keep dark but cut the radial-mesh + grid layers
   so it reads as a confident dark moment instead of a sci-fi shot ──── */
.hero::before {
  background: linear-gradient(180deg, #0a0d0a 0%, #13181a 100%);
}
.hero::after {
  display: none;          /* drop the blueprint grid + vignette */
}

/* ── Bands (the §01 §02 §03 dividers) — slimmer, less shouty ───────── */
.band {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  background: transparent;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.band-num {
  font-size: clamp(2.5rem, 6vw, 4rem);
  -webkit-text-stroke-color: rgba(20, 23, 26, 0.06);
  color: transparent;
}
.band-dark {
  background: transparent;
  border-color: var(--line);
}
.band-dark .band-num {
  -webkit-text-stroke-color: rgba(20, 23, 26, 0.06);
}
.band-dark .band-kicker { color: var(--signal-deep); }
.band-dark .band-sub    { color: var(--text-3); }

/* ── Kickers everywhere: tone the § glyph spam down ─────────────────── */
.kicker { color: var(--signal-deep); opacity: 0.85; }

/* ── Nav: when the hero is dark stays on-dark; when page-head is now
   paper, nav needs to flip to on-paper. Cheap heuristic: if the FIRST
   <main> child is .page-head (which is now paper), make nav paper. ─── */
body:has(main > .page-head:first-child) .nav {
  background: rgba(244, 242, 236, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
body:has(main > .page-head:first-child) .nav .logo-text { color: var(--text); }
body:has(main > .page-head:first-child) .nav .logo-text em { color: var(--signal-deep); }
body:has(main > .page-head:first-child) .nav-links a { color: var(--text-2); }
body:has(main > .page-head:first-child) .nav-links a:hover,
body:has(main > .page-head:first-child) .nav-links a[aria-current="page"] { color: var(--text); }
body:has(main > .page-head:first-child) .nav-meta { color: var(--text-3); }
body:has(main > .page-head:first-child) .nav-toggle { color: var(--text); }

/* ── Breadcrumb on paper ────────────────────────────────────────────── */
.breadcrumb { background: transparent; border-bottom: 1px solid var(--line); }
.breadcrumb a, .breadcrumb [aria-current] { color: var(--text-2); }
.breadcrumb a:hover { color: var(--text); }

/* ── Photo-band caption: tone the lime border-left ──────────────────── */
.photo-band__cap { border-left-color: var(--signal-deep); }

/* ── Lime usage cleanup: anywhere a body bg used `--signal` as fill,
   step it down to a soft tint ────────────────────────────────────── */
.bg-signal,
.signal-fill { background: rgba(164, 201, 58, 0.14); color: var(--text); }

/* ── Manifest cells: keep them as a dark spec-table moment, but tighter */
.manifest-cell:nth-child(odd) { background: var(--ink-2); }
.manifest-cell:nth-child(even) { background: var(--ink); }

/* ── Reduce the "ALL CAPS EVERYTHING" feel on subpage h2/h3 ─────────── */
.bg-paper h2, .bg-paper-2 h2, .svc-bulk h2, .svc-diesel h2,
.bg-paper h3, .bg-paper-2 h3, .svc-bulk h3, .svc-diesel h3 {
  text-transform: none;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

/* ── Cred badges (the '24-hour live tracking' style chips) ──────────── */
.cred .cred-badge { color: var(--signal-deep); }
.svc-diesel .cred .cred-badge { color: var(--signal-deep); }

/* ── On-paper nav scroll state (already exists upstream; reinforce) ── */
.nav.on-paper.scrolled { background: rgba(244, 242, 236, 0.96); }

/* ── Footer stays dark — that's our anchor moment ───────────────────── */
/* (no override needed; .footer rule remains as upstream) */

/* ── New diesel-grid (replaces the old gauge + minimap dashboard) ──── */
.diesel-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  margin-top: 2rem;
}
@media (min-width: 880px) {
  .diesel-grid { grid-template-columns: 1.4fr 1fr; gap: 4rem; align-items: start; }
}
.diesel-grid h3 {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2rem);
  letter-spacing: -0.02em;
  text-transform: none;
  margin-bottom: 1rem;
  color: var(--text);
}
.diesel-grid p {
  color: var(--text-2);
  margin-bottom: 1rem;
  max-width: 56ch;
}
.diesel-stats {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
}
.diesel-stats > div {
  padding: 1.25rem 1.5rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--signal-deep);
  border-radius: 4px;
}
.diesel-stats dt {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 0.35rem;
}
.diesel-stats dd {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 1.75rem;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1;
}
.diesel-stats dd.sub {
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--text-2);
  margin-top: 0.35rem;
}

/* ── Diesel-tracking subpage: kill its dash widgets too ────────────── */
.svc-diesel .dash,
.svc-diesel .gauge,
.svc-diesel .gauge-needle,
.svc-diesel .gauge-val,
.svc-diesel .gauge-lbl,
.svc-diesel .minimap,
.svc-diesel .dash-tiles,
.svc-diesel .tracfeed {
  /* These were styled for dark bg + faux-telemetry vibe.
     On the new paper background they look broken. Hiding by default;
     re-enable per-instance with .keep-widget if ever wanted. */
  display: none;
}

/* --- contrast + logo + component polish --- */

/* ── Page-head: belt-and-braces. The upstream rule at line 2736 set
   ink, but on some Safari render passes the cascade fights the :has()
   nav heuristic. Force paper with body-class fallback specificity. ─── */
body main > .page-head {
  background: var(--paper) !important;
  color: var(--text);
}
body main > .page-head h1,
body main > .page-head .lede,
body main > .page-head .kicker {
  color: var(--text);
}
body main > .page-head .lede { color: var(--text-2); }
body main > .page-head .kicker { color: var(--signal-deep); }
body main > .page-head h1 .lime { color: var(--signal-deep); }
/* Subpage page-head no longer needs the dark gradient art */
body main > .page-head::before,
body main > .page-head::after { display: none !important; }

/* ── Buttons: clean, accessible, never invisible ────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 1.25rem;
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
  text-transform: none;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
  cursor: pointer;
}
.btn-primary {
  background: var(--signal-deep);
  color: var(--ink);
  border-color: var(--signal-deep);
}
.btn-primary:hover { background: var(--signal); border-color: var(--signal); }
.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--line-strong);
}
.btn-ghost:hover {
  background: var(--ink);
  color: var(--text-inv);
  border-color: var(--ink);
}
/* On dark sections, ghost buttons need inverted defaults */
.bg-ink .btn-ghost,
.svc-bulk.is-dark .btn-ghost,
.cta-band--dark .btn-ghost,
.hero .btn-ghost,
.footer .btn-ghost {
  color: var(--text-inv);
  border-color: rgba(250, 250, 246, 0.45);
}
.bg-ink .btn-ghost:hover,
.svc-bulk.is-dark .btn-ghost:hover,
.cta-band--dark .btn-ghost:hover,
.hero .btn-ghost:hover,
.footer .btn-ghost:hover {
  background: var(--text-inv);
  color: var(--ink);
  border-color: var(--text-inv);
}

/* ── Owner-drivers kicker on dark hero — the lime was being cut by
   the gradient. Use the brighter signal on dark, the deeper one on paper */
.hero .kicker { color: var(--signal); }
body main > .page-head .kicker { color: var(--signal-deep); }

/* ── Logo + wordmark proportion: bigger mark, generous tracking, vertical
   alignment locked. ─────────────────────────────────────────────────── */
.nav .logo { gap: 0.875rem; align-items: center; line-height: 1; }
.lockup     { gap: 0.875rem; align-items: center; line-height: 1; }

/* ── Dark hero LIMECOAL wordmark: restore proper white on dark ──────── */
.nav.on-dark .logo-text { color: var(--text-inv); }
.nav.on-dark .logo-text em,
.nav.on-dark .logo-text .l2 { color: var(--signal); }

/* ── On-paper nav (subpages) wordmark: ink black, signal-deep accent ── */
body:has(main > .page-head:first-child) .nav .logo-text { color: var(--text); }
body:has(main > .page-head:first-child) .nav .logo-text em,
body:has(main > .page-head:first-child) .nav .logo-text .l2 { color: var(--signal-deep); }

/* ── Footer wordmark sizing matches the bigger mark ─────────────────── */
.footer .lockup .logo-text { font-size: 1.625rem; letter-spacing: -0.01em; }
.footer .lockup .logo-text em,
.footer .lockup .logo-text .l2 { color: var(--signal); }

/* ── Stats: kill the green +/ accent the user called out ────────────── */
.stat-cell .stat-num .accent {
  color: inherit;
  font-weight: inherit;
}

/* ── "Talk to ops" / contact-style ghost CTAs: always legible ───────── */
.bg-paper .btn-ghost,
.bg-paper-2 .btn-ghost,
.svc-cold .btn-ghost,
.svc-containers .btn-ghost {
  color: var(--text);
  border-color: var(--text);
}
.bg-paper .btn-ghost:hover,
.bg-paper-2 .btn-ghost:hover,
.svc-cold .btn-ghost:hover,
.svc-containers .btn-ghost:hover {
  background: var(--ink);
  color: var(--text-inv);
  border-color: var(--ink);
}

/* ── Drop the cold-quote treatment if it survives anywhere ──────────── */
.cold-quote {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-size: 1.125rem;
  font-weight: 500;
  border-left: 3px solid var(--signal-deep);
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
  color: var(--text-2);
  background: transparent;
}
.cold-quote::before { content: none; }

/* ── Manifest cells: 4-col on wider, smaller numbers, paper-friendly ─ */
.manifest { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; }
@media (min-width: 700px)  { .manifest { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .manifest { grid-template-columns: repeat(4, 1fr); } }

/* ── Team page tile grid ────────────────────────────────────────────── */
.team-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 2rem;
}
@media (min-width: 640px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .team-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }

.team-tile {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}
.team-tile:hover {
  border-color: var(--text);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -8px rgba(20, 23, 26, 0.12);
}
.team-tile.is-lead { border-color: var(--signal-deep); border-width: 2px; }

.team-photo {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--paper-2);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 1.625rem;
  letter-spacing: 0.02em;
  color: var(--text-3);
  flex-shrink: 0;
  overflow: hidden;
}
.team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.team-name {
  font-family: 'Inter', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0;
  line-height: 1.2;
}
.team-role {
  font-family: 'Inter', sans-serif;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-2);
  margin: 0;
  line-height: 1.4;
}
.team-portfolios {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.25rem;
}
.team-portfolio {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-2);
}
.team-tile.is-lead .team-portfolio {
  background: rgba(164, 201, 58, 0.14);
  border-color: rgba(122, 150, 40, 0.3);
  color: var(--signal-deep);
}
.team-phone,
.team-email {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 0.8125rem;
  color: var(--text-2);
  text-decoration: none;
  word-break: break-all;
  display: block;
}
.team-phone {
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
  color: var(--text);
  font-weight: 600;
}
.team-phone + .team-email {
  margin-top: 0.2rem;
  padding-top: 0;
  border-top: none;
}
.team-email {
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
}
.team-phone:hover,
.team-email:hover { color: var(--signal-deep); text-decoration: underline; }

/* ── Soften the lime "behind" highlight on dark hero (was vibrating) ── */
.svc-diesel .lime, .hero .lime { color: var(--signal); }
body main > .page-head .lime { color: var(--signal-deep); }

/* ── Bulk page: drop the giant TAUTLINER/FLAT-DECK display ─────────── */
.bulk-display { display: none !important; }

/* ── Bulk grid: paper-friendly type, never washed-out ──────────────── */
.svc-bulk .bulk-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 1.5rem;
}
@media (min-width: 768px)  { .svc-bulk .bulk-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; } }
@media (min-width: 1024px) { .svc-bulk .bulk-grid { grid-template-columns: repeat(4, 1fr); gap: 2rem; } }

.svc-bulk .bulk-grid > div {
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--signal-deep);
  border-radius: 4px;
  padding: 1.25rem 1.5rem;
}
.svc-bulk .b-num {
  font-family: 'Inter', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
  text-transform: none;
  line-height: 1.15;
}
.svc-bulk .b-lbl {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--signal-deep);
  margin-top: 0.25rem;
}
.svc-bulk .bulk-grid p {
  margin-top: 0.6rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--text-2);
}

/* ── CTA-band: ensure ghost buttons are visible on the paper variant ── */
.cta-band:not(.cta-band--dark) .btn-ghost {
  color: var(--text);
  border-color: var(--text);
  background: transparent;
}
.cta-band:not(.cta-band--dark) .btn-ghost:hover {
  background: var(--ink);
  color: var(--text-inv);
  border-color: var(--ink);
}
.cta-band:not(.cta-band--dark) .btn-primary {
  background: var(--signal-deep);
  color: var(--ink);
  border-color: var(--signal-deep);
}
.cta-band:not(.cta-band--dark) .btn-primary:hover {
  background: var(--signal);
  border-color: var(--signal);
}

/* ── Diesel-grid CTAs ("Owner-driver platform detail"): primary = visible */
.diesel-grid .btn,
.diesel-grid a.btn-primary,
.diesel-grid a.btn-ghost {
  margin-right: 0.5rem;
}

/* --- tighter spacing + softer hero --- */

/* Compress section vertical rhythm everywhere */
:root {
  --section-y: 3rem;
}
@media (min-width: 768px)  { :root { --section-y: 4rem; } }
@media (min-width: 1024px) { :root { --section-y: 5rem; } }

main > section,
main > div > section {
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
}

/* Tighten s-head (the "kicker + h2 + lede" intro block) */
.s-head { gap: 0.5rem; margin-bottom: 1.25rem; }
.s-head .kicker { margin-bottom: 0.25rem; }
.s-head h2 { margin-top: 0.25rem; }
.s-head p { margin-top: 0.5rem; }
@media (min-width: 1024px) {
  .s-head { margin-bottom: 1.75rem; }
}

/* Page-head: was very tall on subpages */
.page-head { padding-top: 3rem !important; padding-bottom: 2.5rem !important; }
@media (min-width: 1024px) { .page-head { padding-top: 4rem !important; padding-bottom: 3rem !important; } }
.page-head h1 { margin-top: 0.5rem !important; }
.page-head .lede { margin-top: 0.75rem !important; max-width: 60ch; }

/* Bands (the §01 §02 dividers) — shave them down */
.band { padding-top: 0.875rem !important; padding-bottom: 0.875rem !important; }
.band-num { font-size: clamp(2rem, 4.5vw, 3.25rem); }

/* CTA bands lose some breathing room */
.cta-band { padding-top: 2.5rem; padding-bottom: 2.5rem; }
@media (min-width: 1024px) { .cta-band { padding-top: 3.5rem; padding-bottom: 3.5rem; } }

/* Photo bands — cap at a sensible height; massive photos felt empty */
.photo-band img { max-height: 380px !important; }
.photo-band--tall img { max-height: 460px !important; }
.photo-band--short img { max-height: 280px !important; }
@media (min-width: 1280px) {
  .photo-band img { max-height: 460px !important; }
  .photo-band--tall img { max-height: 540px !important; }
}

/* Diesel-grid + bulk-grid: tighter gaps */
.diesel-grid { gap: 1.5rem; margin-top: 1rem; }
@media (min-width: 880px)  { .diesel-grid { gap: 2.5rem; } }
.diesel-stats { gap: 0.625rem; }
.diesel-stats > div { padding: 1rem 1.25rem; }
.svc-bulk .bulk-grid { gap: 1rem; margin-top: 1rem; }
@media (min-width: 1024px) { .svc-bulk .bulk-grid { gap: 1.25rem; } }
.svc-bulk .bulk-grid > div { padding: 1rem 1.25rem; }

/* Stats grid spacing */
.stats { padding-top: var(--section-y); padding-bottom: var(--section-y); }
.stats-grid { gap: 1.5rem; margin-top: 1.5rem; }
@media (min-width: 1024px) { .stats-grid { gap: 2.5rem; } }

/* Footer: slimmer */
.footer { padding-top: 3rem; padding-bottom: 2rem; }
.footer-grid { gap: 2rem; }
@media (min-width: 1024px) { .footer { padding-top: 4rem; padding-bottom: 2.5rem; } .footer-grid { gap: 3rem; } }

/* Container pad */
.container { padding-left: 1.25rem; padding-right: 1.25rem; }
@media (min-width: 1024px) { .container { padding-left: 2.5rem; padding-right: 2.5rem; } }

/* ── HOME HERO: real freight photo as backdrop, no gradients ────────── */
.hero {
  min-height: auto !important;
  border-bottom: 1px solid var(--ink-3);
  display: block !important;          /* override flex column from upstream */
}
.hero::before {
  background:
    linear-gradient(180deg, rgba(10, 13, 10, 0.72) 0%, rgba(10, 13, 10, 0.88) 100%),
    url("assets/photos/fleet-aerial.jpg") center/cover no-repeat !important;
  filter: saturate(0.7);
}
.hero::after { display: none !important; }
/* Hero body — generous but not cavernous */
.hero-body {
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
  min-height: 0 !important;
}
@media (min-width: 1024px) {
  .hero-body { padding-top: 4.5rem !important; padding-bottom: 4rem !important; }
}
.hero h1 {
  font-size: clamp(2rem, 5vw, 3.75rem) !important;
  line-height: 1 !important;
  letter-spacing: -0.025em;
  margin-top: 0.5rem !important;
  margin-bottom: 0.75rem !important;
}
/* Hero stamp/eyebrow above the h1 — was reserving big empty rows */
.hero-stamp,
.hero-eyebrows { margin-top: 0 !important; margin-bottom: 0.5rem !important; }

/* --- breathing room restored --- */
:root {
  --section-y: 3.5rem;
}
@media (min-width: 768px)  { :root { --section-y: 4.5rem; } }
@media (min-width: 1024px) { :root { --section-y: 5.5rem; } }

/* Mantra hidden — was pure noise. Bands rebuilt as chapter markers. */
.mantra { display: none !important; }

/* ── Section bands as chapter cards ──────────────────────────────────
   The upstream design positioned a giant outlined number absolutely behind
   a 140px band. Cropped + ugly. Replace with a clean horizontal marker:
   chunky lime number → bold section name → fine-print subtitle. */
.band {
  position: relative !important;
  display: flex !important;
  align-items: baseline !important;
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
  gap: 0.875rem 1.25rem !important;
  height: auto !important;
  padding: 1.25rem 1.5rem !important;
  background: var(--paper) !important;
  border-top: 1px solid var(--line) !important;
  border-bottom: 1px solid var(--line) !important;
  overflow: visible !important;
  color: var(--text);
}
@media (min-width: 1024px) {
  .band { padding: 1.5rem 2.5rem !important; gap: 1.25rem 2rem !important; }
}
.band-dark {
  background: var(--ink) !important;
  color: var(--text-inv) !important;
  border-top-color: var(--ink-3) !important;
  border-bottom-color: var(--ink-3) !important;
}

/* The number — readable, not background art */
.band-num {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  inset: auto !important;
  transform: none !important;
  display: inline-flex !important;
  align-items: baseline;
  font-family: 'Inter', sans-serif !important;
  font-weight: 800 !important;
  font-size: 1.625rem !important;
  letter-spacing: -0.02em !important;
  line-height: 1 !important;
  color: var(--signal-deep) !important;
  -webkit-text-stroke: 0 transparent !important;
  text-stroke: 0 transparent !important;
  text-transform: none !important;
  opacity: 1 !important;
  padding-right: 0.75rem;
  margin-right: 0.5rem;
  border-right: 1px solid var(--line);
  flex-shrink: 0;
}
@media (min-width: 1024px) {
  .band-num { font-size: 1.875rem !important; padding-right: 1rem; }
}
.band-dark .band-num {
  color: var(--signal) !important;
  border-right-color: var(--ink-3);
}

/* Section name */
.band-kicker {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.005em;
  color: var(--text);
  text-transform: none;
}
@media (min-width: 1024px) {
  .band-kicker { font-size: 1.125rem; }
}
.band-dark .band-kicker { color: var(--text-inv); }

/* Subtitle — pushed to the far right on wide screens */
.band-sub {
  margin-left: auto;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
}
.band-dark .band-sub { color: var(--text-mute); }
@media (max-width: 640px) {
  .band-sub { margin-left: 0; width: 100%; }
}

main > section,
main > div > section {
  padding-top: var(--section-y) !important;
  padding-bottom: var(--section-y) !important;
}

/* Cap the page width so paragraphs don't stretch into oblivion */
.container { max-width: 1180px; margin-left: auto; margin-right: auto; }

/* Section heads — tight pyramid */
.s-head { gap: 0.25rem; margin-bottom: 1rem !important; }
.s-head h2 { margin-top: 0.25rem !important; line-height: 1.05; }
.s-head p { margin-top: 0.5rem !important; max-width: 60ch; }

/* h1/h2 sizing — was clamp(huge, *vw, gigantic) */
h1 { font-size: clamp(2rem, 5vw, 3.5rem) !important; line-height: 1; }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.5rem) !important; line-height: 1.05; letter-spacing: -0.015em; }
h3 { font-size: clamp(1.1875rem, 2.5vw, 1.625rem) !important; line-height: 1.15; }

/* Page-head heading override (was bigger than h1 base) */
.page-head h1 { font-size: clamp(2rem, 5.5vw, 4rem) !important; }

/* Photo bands — caps tighter still */
.photo-band img { max-height: 320px !important; }
.photo-band--tall img { max-height: 400px !important; }
.photo-band--short img { max-height: 240px !important; }
@media (min-width: 1280px) {
  .photo-band img { max-height: 380px !important; }
  .photo-band--tall img { max-height: 460px !important; }
}

/* Bands (the §01 §02 dividers) — slim band */
.band { padding-top: 0.625rem !important; padding-bottom: 0.625rem !important; }
.band-num { font-size: clamp(1.625rem, 3.5vw, 2.5rem) !important; }

/* Inside-section grids: tighter gaps */
.grid { gap: 1.5rem !important; }
.grid-2, .grid-3, .grid-4 { gap: 1.5rem !important; }
@media (min-width: 1024px) {
  .grid-2, .grid-3, .grid-4 { gap: 2rem !important; }
}

/* Editorial paragraphs */
.editorial { max-width: 58ch; }
.editorial p + p { margin-top: 0.625rem !important; }

/* Stats — was a 25 watermark + huge gaps */
.stats-watermark { display: none; }            /* the giant "25" was empty bulk */
.stats { padding-top: 2rem !important; padding-bottom: 2.5rem !important; }
.stats-grid { gap: 1.25rem !important; margin-top: 1rem !important; }
@media (min-width: 1024px) { .stats-grid { gap: 2rem !important; } }
.stat-cell { padding: 0 !important; }
.stat-cell .stat-num { font-size: clamp(1.875rem, 4vw, 2.5rem) !important; line-height: 1; }
.stat-cell .stat-lbl { margin-top: 0.4rem !important; font-size: 0.6875rem; }
.stat-cell .stat-sub { margin-top: 0.2rem !important; font-size: 0.875rem; }

/* Manifest cells — make every span flow in document order, no overlapping. */
.manifest-cell {
  padding: 0.875rem 1rem !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0.25rem !important;
  position: relative !important;
}
.manifest-num,
.manifest-label,
.manifest-sub {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  inset: auto !important;
  transform: none !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
}
.manifest-num {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace !important;
  font-size: 0.6875rem !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--signal) !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  -webkit-text-stroke: 0 transparent !important;
  margin: 0 0 0.125rem 0 !important;
}
.manifest-label {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.9375rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.005em !important;
  text-transform: none !important;
  color: var(--text-inv) !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}
.manifest-sub {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  color: rgba(250, 250, 246, 0.55) !important;
  line-height: 1.3 !important;
  margin: 0.1rem 0 0 0 !important;
  text-transform: none !important;
}

/* CTA bands tighter */
.cta-band { padding-top: 2rem !important; padding-bottom: 2rem !important; }
@media (min-width: 1024px) { .cta-band { padding-top: 2.75rem !important; padding-bottom: 2.75rem !important; } }
.cta-band h2 { font-size: clamp(1.5rem, 3.25vw, 2.25rem) !important; }

/* Footer slim */
.footer { padding-top: 2.25rem !important; padding-bottom: 1.5rem !important; }
.footer-grid { gap: 1.5rem !important; }
@media (min-width: 1024px) { .footer { padding-top: 3rem !important; padding-bottom: 1.75rem !important; } .footer-grid { gap: 2.5rem !important; } }
.footer h4 { margin-bottom: 0.625rem !important; font-size: 0.6875rem; }
.footer ul { list-style: none; padding: 0; margin: 0; line-height: 1.7; }
.footer-watermark { display: none; }           /* the giant LIMECOAL outline behind footer */

/* Diesel grid */
.diesel-grid { margin-top: 0.5rem !important; gap: 1.25rem !important; }
@media (min-width: 880px) { .diesel-grid { gap: 2rem !important; } }
.diesel-stats { gap: 0.5rem !important; }
.diesel-stats > div { padding: 0.875rem 1rem !important; }
.diesel-stats dd { font-size: 1.5rem; }

/* Bulk grid */
.svc-bulk .bulk-grid { margin-top: 0.5rem !important; gap: 0.875rem !important; }
.svc-bulk .bulk-grid > div { padding: 0.875rem 1rem !important; }
.svc-bulk .b-num { font-size: 1.0625rem; }

/* Hero ticker / mantra strip — the home one */
.mantra { padding-top: 0.5rem; padding-bottom: 0.5rem; font-size: 0.75rem; }
@media (min-width: 768px) { .mantra { padding-top: 0.75rem; padding-bottom: 0.75rem; } }

/* Team grid tighter */
.team-grid { gap: 0.875rem !important; margin-top: 1rem !important; }
@media (min-width: 1024px) { .team-grid { gap: 1.25rem !important; } }
.team-tile { padding: 1.25rem !important; gap: 0.5rem !important; }
.team-photo { width: 72px !important; height: 72px !important; font-size: 1.125rem !important; }

/* Reduce kicker bottom-margin */
.kicker { margin-bottom: 0.4rem !important; font-size: 0.625rem !important; letter-spacing: 0.18em !important; }

/* Photo-band caption smaller */
.photo-band__cap { padding: 0.4rem 0.7rem !important; font-size: 0.625rem !important; bottom: 0.75rem !important; left: 1rem !important; }
@media (min-width: 768px) {
  .photo-band__cap { bottom: 1rem !important; left: 1.5rem !important; padding: 0.45rem 0.85rem !important; font-size: 0.6875rem !important; }
}


/* ── NAV LOGO LOCKUP — single, consistent treatment for every page ──── */
.nav .logo {
  display: inline-flex;
  align-items: center;
  gap: 0;
  line-height: 1;
  text-decoration: none;
}
.nav .logo > .logo-text {
  margin-left: -0.5rem;          /* tuck wordmark in toward the mark */
}
@media (min-width: 1024px) {
  .nav .logo > .logo-text { margin-left: -0.625rem; }
}
.nav .logo-mark {
  width: 76px;
  height: 76px;
  object-fit: contain;
  flex-shrink: 0;
}
@media (min-width: 1024px) {
  .nav .logo-mark { width: 88px; height: 88px; }
}
.nav .logo-text {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  gap: 0 !important;
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: -0.02em;
  line-height: 1;
}
@media (min-width: 1024px) {
  .nav .logo-text { font-size: 1.125rem; letter-spacing: -0.025em; }
}
.nav .logo-text em {
  font-style: normal;
  margin-left: 0;
}
/* On-dark nav (home hero, etc.) */
.nav.on-dark .logo-text { color: var(--text-inv); }
.nav.on-dark .logo-text em { color: var(--signal); }
/* On-paper nav (subpages) */
body:has(main > .page-head:first-child) .nav .logo-text { color: var(--text); }
body:has(main > .page-head:first-child) .nav .logo-text em { color: var(--signal-deep); }

/* ── Nav: never let labels wrap mid-word; shrink type if space is tight ── */
.nav-links a,
.nav-cta {
  white-space: nowrap;
  min-height: 0;
}
.nav-cta {
  height: 40px;
  padding: 0 1rem;
  line-height: 40px;
}
@media (min-width: 1024px) and (max-width: 1280px) {
  .nav-links { gap: 1.125rem; }
  .nav-links a { font-size: 0.875rem; }
  .nav-cta { font-size: 0.875rem; padding: 0 0.875rem; }
}
@media (min-width: 1281px) {
  .nav-links { gap: 1.5rem; }
}

.svc-diesel .dash.keep-widget,
.svc-diesel .gauge.keep-widget,
.svc-diesel .minimap.keep-widget,
.svc-diesel .dash-tiles.keep-widget,
.svc-diesel .tracfeed.keep-widget { display: block; }

/* ── FOOTER LOGO LOCKUP — force LIME COAL on one line, balanced sizing ── */
.footer-brand .lockup,
.footer .footer-brand .logo {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.625rem !important;
  line-height: 1 !important;
  text-decoration: none !important;
}
.footer-brand .lockup img,
.footer-brand .logo .logo-mark {
  width: 56px !important;
  height: 56px !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
}
.footer-brand .logo-text {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  gap: 0 !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 800 !important;
  font-size: 1.5rem !important;
  letter-spacing: -0.025em !important;
  line-height: 1 !important;
  color: var(--text-inv) !important;
  margin-left: -0.25rem !important;
}
.footer-brand .logo-text em,
.footer-brand .logo-text .l1 + .l2 {
  font-style: normal !important;
  color: var(--signal) !important;
  margin-left: 0 !important;
}
/* When the .l1/.l2 markup is used (home footer), keep them stacked but small */
.footer-brand .logo-text .l1,
.footer-brand .logo-text .l2 {
  display: block !important;
}
.footer-brand .logo-text .l1 { font-size: 1.125rem !important; letter-spacing: 0.01em !important; }
.footer-brand .logo-text .l2 { font-size: 0.6875rem !important; letter-spacing: 0.16em !important; font-weight: 500 !important; margin-top: 2px !important; }
.footer-brand .logo[href] .logo-text:has(.l1) {
  flex-direction: column !important;
  align-items: flex-start !important;
}

/* Footer blurb — slightly larger, clean wrap */
.footer-brand p {
  color: var(--text-mute) !important;
  max-width: 34ch !important;
  font-size: 1rem !important;
  line-height: 1.55 !important;
  margin-top: 0.875rem !important;
}

/* --- button contrast guardrails --- */

/* Default: paper background, dark ink ghost */
.btn-ghost {
  color: var(--text) !important;
  border-color: var(--text) !important;
  background: transparent !important;
}
.btn-ghost:hover,
.btn-ghost:focus-visible {
  background: var(--ink) !important;
  color: var(--text-inv) !important;
  border-color: var(--ink) !important;
}

/* Dark-section ghost: light text + light border */
.hero .btn-ghost,
.bg-ink .btn-ghost,
.bg-ink-2 .btn-ghost,
.svc-bulk.is-dark .btn-ghost,
.cta-band--dark .btn-ghost,
.footer .btn-ghost,
.svc-diesel .btn-ghost,
.on-dark .btn-ghost,
body:not(:has(main > .page-head:first-child)) .nav.on-dark + main .hero .btn-ghost {
  color: var(--text-inv) !important;
  border-color: rgba(250, 250, 246, 0.6) !important;
  background: transparent !important;
}
.hero .btn-ghost:hover,
.bg-ink .btn-ghost:hover,
.bg-ink-2 .btn-ghost:hover,
.svc-bulk.is-dark .btn-ghost:hover,
.cta-band--dark .btn-ghost:hover,
.footer .btn-ghost:hover,
.svc-diesel .btn-ghost:hover,
.on-dark .btn-ghost:hover {
  background: var(--text-inv) !important;
  color: var(--ink) !important;
  border-color: var(--text-inv) !important;
}

/* Page-head ghost: page-head is paper on subpages, so use ink. */
main > .page-head .btn-ghost {
  color: var(--text) !important;
  border-color: var(--text) !important;
  background: transparent !important;
}
main > .page-head .btn-ghost:hover {
  background: var(--ink) !important;
  color: var(--text-inv) !important;
  border-color: var(--ink) !important;
}

/* Primary buttons: keep signal-deep on paper, brighter signal on dark */
.btn-primary {
  background: var(--signal-deep) !important;
  color: var(--ink) !important;
  border-color: var(--signal-deep) !important;
}
.btn-primary:hover,
.btn-primary:focus-visible {
  background: var(--signal) !important;
  border-color: var(--signal) !important;
  color: var(--ink) !important;
}

/* Focus ring for keyboard users — visible on every background */
.btn:focus-visible {
  outline: 2px solid var(--signal-deep);
  outline-offset: 3px;
}
.hero .btn:focus-visible,
.bg-ink .btn:focus-visible,
.footer .btn:focus-visible {
  outline-color: var(--signal);
}

/* --- contact page interactive map --- */
.office-map {
  margin: 4rem 0 0;
  padding: 0;
  position: relative;
}
.office-map__frame {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: var(--ink);
  box-shadow: 0 8px 32px rgba(10, 13, 10, 0.16),
              0 1px 0 rgba(10, 13, 10, 0.04);
  border: 1px solid var(--line);
}
.office-map__frame iframe {
  background: #1a1f12;
  filter: saturate(0.85);
}
.office-map__cap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  margin-top: 1rem;
  padding: 0 0.25rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.9375rem;
  color: var(--text-2);
  line-height: 1.5;
}
.office-map__cap strong { color: var(--text); font-weight: 600; }
.office-map__cap a {
  color: var(--signal-deep);
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
  border-bottom: 1px solid transparent;
  transition: border-color 180ms ease;
}
.office-map__cap a:hover { border-bottom-color: var(--signal-deep); }
@media (max-width: 720px) {
  .office-map { margin-top: 3rem; }
  .office-map__frame iframe { height: 360px; }
}

/* --- partner strip: round logos (TFN, etc.) sit slightly differently --- */
.partner-strip__row .partner-link img[width="56"] {
  border-radius: 50%;
  background: #fff;
  padding: 4px;
  box-shadow: 0 1px 4px rgba(10, 13, 10, 0.08);
}

/* --- container manifest: photo backdrops on each cell --- */
.manifest-cell.has-photo {
  position: relative !important;
  overflow: hidden !important;
  background-color: var(--ink) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  isolation: isolate;
  min-height: 180px !important;
  transition: transform 320ms ease;
}
/* Dark gradient overlay so the kicker / label / sub stay legible regardless of photo */
.manifest-cell.has-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(10, 13, 10, 0.35) 0%,
    rgba(10, 13, 10, 0.55) 55%,
    rgba(10, 13, 10, 0.85) 100%
  );
  z-index: 1;
  transition: background 320ms ease;
  pointer-events: none;
}
.manifest-cell.has-photo > * {
  position: relative !important;
  z-index: 2 !important;
}
/* Force readable colors on top of the photo */
.manifest-cell.has-photo .manifest-num {
  color: var(--signal) !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
.manifest-cell.has-photo .manifest-sub {
  color: rgba(250, 250, 246, 0.78) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.manifest-cell.has-photo .manifest-label {
  color: var(--text-inv) !important;
  font-weight: 700 !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
}
@media (hover: hover) {
  .manifest-cell.has-photo:hover {
    transform: translateY(-2px);
  }
  .manifest-cell.has-photo:hover::before {
    background: linear-gradient(
      180deg,
      rgba(10, 13, 10, 0.20) 0%,
      rgba(10, 13, 10, 0.40) 55%,
      rgba(10, 13, 10, 0.78) 100%
    );
  }
}

/* --- contact page: ops-desk cards (replaces the heavy black manifest blocks) --- */
.desk-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: 2rem;
}
@media (max-width: 720px) {
  .desk-grid { grid-template-columns: 1fr; gap: 1rem; }
}

.desk-card {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto auto 1fr;
  gap: 0.5rem;
  padding: 1.75rem 1.75rem 1.5rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
  box-shadow: 0 1px 0 rgba(10, 13, 10, 0.02);
}
.desk-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--accent, var(--signal-deep));
  transition: height 220ms ease;
}
.desk-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(10, 13, 10, 0.10), 0 2px 8px rgba(10, 13, 10, 0.04);
  border-color: var(--accent, var(--signal-deep));
}
.desk-card:hover::before { height: 6px; }
.desk-card:focus-visible {
  outline: 2px solid var(--accent, var(--signal-deep));
  outline-offset: 4px;
}

.desk-card .desk-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--accent, var(--signal-deep));
  margin-top: 0.25rem;
}
.desk-card .desk-kicker {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.015em;
  color: var(--text);
  line-height: 1.05;
  margin-top: 0.125rem;
}
.desk-card .desk-email {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
  font-size: 1.0625rem;
  letter-spacing: -0.005em;
  color: var(--text);
  word-break: break-all;
  margin-top: 0.5rem;
  line-height: 1.3;
}
.desk-card .desk-email-at { color: var(--accent, var(--signal-deep)); }
.desk-card .desk-meta {
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-2);
  margin-top: 0.25rem;
}
.desk-card .desk-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--accent, var(--signal-deep));
  margin-top: 1.25rem;
  align-self: end;
}
.desk-card .desk-cta svg {
  transition: transform 220ms ease;
}
.desk-card:hover .desk-cta svg {
  transform: translateX(3px);
}

/* per-service accent colours — feel different but stay on-brand */
.desk-card--containers { --accent: #2C7A2C; }     /* signal-deep green */
.desk-card--cold       { --accent: #1F6FA8; }     /* cool blue */
.desk-card--bulk       { --accent: #A65A1F; }     /* warm rust */
.desk-card--admin      { --accent: #4A4A4A; }     /* neutral graphite */

/* --- pull-quote contrast: dark text on paper, lime accent rule --- */
.dash-quote {
  color: var(--text) !important;
  opacity: 0.92 !important;
}
.dash-quote::before {
  background: var(--signal-deep) !important;
}
/* Restore light treatment when the quote sits on a genuinely dark section */
.bg-ink .dash-quote,
.bg-ink-2 .dash-quote,
.cta-band--dark .dash-quote,
.hero .dash-quote {
  color: var(--text-inv) !important;
  opacity: 0.95 !important;
}
.bg-ink .dash-quote::before,
.bg-ink-2 .dash-quote::before,
.cta-band--dark .dash-quote::before,
.hero .dash-quote::before {
  background: var(--signal) !important;
}

/* ════════════════════════════════════════════════════════════════════
   NAV — SERVICES DROPDOWN + MOBILE SHEET
   Groups the three freight services under one top-level item so the bar
   fits comfortably at 1024px instead of crowding eight links.
   ════════════════════════════════════════════════════════════════════ */

.nav-has-sub { position: relative; }

/* the trigger has to read exactly like the sibling links */
.nav-sub-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--f-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--text-inv);
  position: relative;
}
.on-paper .nav-sub-toggle { color: var(--text); }
.nav-sub-toggle::after {
  content: "";
  position: absolute;
  left: 0; right: 14px; bottom: -2px;
  height: 1px;
  background: var(--signal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-fast);
}
.nav-has-sub:hover .nav-sub-toggle::after,
.nav-has-sub.open .nav-sub-toggle::after { transform: scaleX(1); }

.nav-chev {
  width: 10px; height: 6px;
  flex-shrink: 0;
  transition: transform var(--t-fast);
}
.nav-has-sub.open .nav-chev { transform: rotate(180deg); }

.nav-sub {
  position: absolute;
  top: calc(100% + 0.75rem);
  left: -1rem;
  min-width: 268px;
  list-style: none;
  padding: 0.375rem;
  background: var(--ink-2);
  border: 1px solid var(--ink-4);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.44);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast);
  z-index: 90;
}
/* bridge the gap so the pointer can travel from trigger to panel */
.nav-sub::before {
  content: "";
  position: absolute;
  top: -0.75rem; left: 0; right: 0;
  height: 0.75rem;
}
.nav-has-sub.open .nav-sub {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-sub a {
  display: block;
  padding: 0.7rem 0.85rem;
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.nav-sub a::after { display: none; }        /* kill the inherited underline sweep */
.nav-sub a b {
  display: block;
  font-family: var(--f-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-inv);
}
.nav-sub a span {
  display: block;
  margin-top: 0.2rem;
  font-family: var(--f-text);
  font-size: 0.75rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-mute);
}
.nav-sub a:hover,
.nav-sub a:focus-visible {
  background: var(--ink-3);
  border-left-color: var(--signal);
}
.nav-sub a:hover b, .nav-sub a:focus-visible b { color: var(--signal); }
.nav-sub a[aria-current="page"] {
  border-left-color: var(--signal);
  background: var(--ink-3);
}
.nav-sub a[aria-current="page"] b { color: var(--signal); }

/* ─── mobile sheet ─── */
.nav-mobile-head {
  font-family: var(--f-mono);
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-mute);
  padding: 1.1rem 0 0.4rem;
}
.nav-mobile-head:first-child { padding-top: 0.35rem; }

/* the sheet now carries more links than a short phone can show — let it scroll,
   and keep the last item clear of the iOS home indicator */
.nav-mobile.open {
  max-height: calc(100svh - 72px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.nav-mobile ul { padding-bottom: calc(1.5rem + env(safe-area-inset-bottom)); }

/* Freeze the page behind the open sheet. Touch the vertical axis only —
   `overflow: hidden`/`visible` would also clobber the `overflow-x: hidden`
   guard body carries from the reset, which is what keeps stray wide elements
   from producing a horizontal scrollbar. */
body.nav-open { overflow-y: hidden; }
@media (min-width: 1024px) { body.nav-open { overflow-y: visible; } }

/* <picture> must not become a layout box — the <img> stays the flex/grid child */
picture { display: contents; }

/* The generic `section` padding also lands on .hero (it is a <section>), which
   pushed the sticky nav ~88px down the page and left a slice of the hero photo
   floating above it. The hero manages its own vertical rhythm via .hero-body. */
.hero { padding-top: 0; padding-bottom: 0; }

/* Hero backdrop is a CSS background, so <picture> can't reach it. Serve WebP
   via image-set where supported; the JPEG above stays the fallback everywhere
   else, so an unsupporting browser still gets the photo. */
@supports (background-image: image-set(url("assets/photos/fleet-aerial.webp") type("image/webp"))) {
  .hero::before {
    background:
      linear-gradient(180deg, rgba(10, 13, 10, 0.72) 0%, rgba(10, 13, 10, 0.88) 100%),
      image-set(
        url("assets/photos/fleet-aerial.webp") type("image/webp"),
        url("assets/photos/fleet-aerial.jpg")  type("image/jpeg")
      ) center/cover no-repeat !important;
  }
}

/* ─── Touch targets ───
   Footer link lists and the legal row rendered ~17-19px tall, well under the
   44px a thumb needs. Gate on the POINTER, not the viewport width: a narrow
   desktop window is still driven by a mouse, and padding every footer link to
   44px there just made the single-column footer ~390px taller for no benefit. */
@media (pointer: coarse) {
  .footer-grid ul li a,
  .footer-bottom .legal a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .footer-grid ul li { line-height: 1.2; }
  .footer-bottom .legal { gap: 1.5rem; flex-wrap: wrap; }
}

/* Tap highlight + no accidental text selection on repeated taps */
@media (hover: none) {
  a, button { -webkit-tap-highlight-color: rgba(164, 201, 58, 0.18); }
}

/* The nav-theming layers predate the Services dropdown, so they only recolour
   `.nav-links a`. Without these the toggle keeps its dark-nav cream and renders
   nearly invisible on the paper nav used by every sub-page. */
.on-paper .nav-sub-toggle { color: var(--text-2); }
.on-paper .nav-has-sub:hover .nav-sub-toggle,
.on-paper .nav-has-sub.open .nav-sub-toggle { color: var(--ink); }

body:has(main > .page-head:first-child) .nav-sub-toggle { color: var(--text-2); }
body:has(main > .page-head:first-child) .nav-has-sub:hover .nav-sub-toggle,
body:has(main > .page-head:first-child) .nav-has-sub.open .nav-sub-toggle { color: var(--text); }