/* Rigel Freight Systems — visual system.
 *
 * Direction (2026-06-01): premium AI-SaaS aesthetic on the same
 * trucks-and-Manitoba copy. Less white, more color, more depth.
 * Trucks + video + photos kept in place; everything around them
 * goes dark, atmospheric, with rotating accent colors per section
 * (blue → cyan → green → copper) and glow-on-hover instead of
 * white-fill-on-hover (the old hover flipped cards to ~70% white,
 * which was the dominant "too bright" complaint).
 */

:root {
  /* Brand spine — navy base from the carrier identity. */
  --navy-deep:   #03061a;
  --navy:        #060d22;
  --navy-soft:   #0b1530;
  --navy-card:   #0b1430;
  --navy-elev:   #11193a;

  /* Text only. No white surfaces anywhere — only white type. */
  --ink:         #ffffff;
  --ink-soft:    #f0e7d8;
  --ink-mute:    #d4b78e;

  /* Two-accent system: BLUE for brand-logo thread, ORANGE for everything
   * else (eyebrows, hover glows, borders, dividers, dots, arrows, CTAs).
   * Subtle variety inside the orange family — deep orange / soft amber
   * / warm gold — keeps section distinction without breaking the
   * single-accent rule. */
  --blue:          #4a7dff;
  --blue-bright:   #76a4ff;
  --blue-deep:     #1e46b8;

  --orange:        #ff7a18;
  --orange-bright: #ff9c4a;
  --orange-soft:   rgba(255, 122, 24, 0.16);
  --amber:         #ffb547;
  --gold:          #ffd47a;

  /* Lines + tints — all orange-based now, no white-on-dark. */
  --line:        rgba(255, 122, 24, 0.18);
  --line-strong: rgba(255, 122, 24, 0.40);

  --glow-orange: 0 0 36px rgba(255, 122, 24, 0.32);
  --glow-blue:   0 0 36px rgba(74, 125, 255, 0.28);

  --shadow-sm:   0 8px 22px rgba(0, 0, 0, 0.28);
  --shadow:      0 24px 70px rgba(0, 0, 0, 0.42);
  --shadow-lg:   0 42px 120px rgba(0, 0, 0, 0.58);

  --radius:      10px;
  --radius-lg:   14px;
}

* { box-sizing: border-box; }
/* scroll-padding-top accounts for the sticky header so anchor jumps
 * land below the header instead of underneath it. Larger than the
 * compact header height (60px) so headings have breathing room. */
html { scroll-behavior: smooth; scroll-padding-top: 100px; }

/* Body — base dark with drifting orange + blue accent orbs and a
 * subtle orange-tinted dot grid. Page-wide atmospheric layer;
 * sections paint over it, transparent gaps let it breathe through. */
body {
  position: relative;
  margin: 0;
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system,
               BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(60% 50% at 12% 8%, rgba(255, 122, 24, 0.16), transparent 60%),
    radial-gradient(55% 50% at 88% 92%, rgba(74, 125, 255, 0.14), transparent 60%),
    linear-gradient(180deg, var(--navy-deep) 0%, var(--navy) 60%, #04081c 100%);
}

/* Body-wide ambient backdrop — fixed so it doesn't scroll. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255, 122, 24, 0.06) 1px, transparent 0);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 35%, #000 30%, transparent 85%);
          mask-image: radial-gradient(ellipse 80% 60% at 50% 35%, #000 30%, transparent 85%);
  opacity: 0.7;
}
body::after {
  content: "";
  position: fixed;
  inset: -10% -10% auto auto;
  z-index: 0;
  width: 60vmax;
  height: 60vmax;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 122, 24, 0.14), transparent 65%);
  filter: blur(60px);
  animation: rigelOrbDrift 28s ease-in-out infinite alternate;
}
@keyframes rigelOrbDrift {
  0%   { transform: translate(0, 0)        scale(1);    }
  100% { transform: translate(-120px, 80px) scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  body::after { animation: none; }
}

img { display: block; max-width: 100%; }
a   { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }

/* All page content sits ABOVE the body backdrop. Establish stacking. */
.site-header, main, .site-footer { position: relative; z-index: 1; }

/* ---------------------------------------------------------------------
 * Header — dark glass. Used to be white.
 * ------------------------------------------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
  min-height: 78px;
  padding: 14px clamp(18px, 5vw, 72px);
  border-bottom: 1px solid var(--line);
  background: rgba(6, 13, 34, 0.78);
  backdrop-filter: blur(20px) saturate(1.1);
}
.brand img { width: min(230px, 44vw); filter: drop-shadow(0 0 14px rgba(255, 122, 24, 0.28)); }
.nav-links {
  display: flex;
  justify-content: center;
  gap: clamp(20px, 3vw, 44px);
  color: var(--ink-soft);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  /* Bumped up from .80rem and dropped text-transform so labels read
   * as "Services" / "Standards" not "services" / "standards". */
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.nav-links a {
  position: relative;
  transition: color 200ms ease;
}
.nav-links a::before { content: "/"; color: var(--orange); margin-right: 4px; opacity: 0.85; }
.nav-links a:hover { color: var(--orange-bright); }
/* Scrollspy active state — orange dot under the current section's
 * nav link. Glow so it reads as a "live indicator", not a bullet. */
.nav-links a.active { color: var(--orange-bright); }
.nav-links a.active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -10px;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 10px var(--orange);
}

/* ---------------------------------------------------------------------
 * Buttons — gradient primary, glass secondary. Soft shadow becomes a
 * subtle inner glow so the buttons read as light sources on the dark.
 * ------------------------------------------------------------------ */
.header-action,
.button-primary,
.button-secondary,
.quote-form button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border-radius: var(--radius);
  font-weight: 700;
  letter-spacing: -0.005em;
  transition: transform 220ms ease, background 220ms ease,
              border-color 220ms ease, color 220ms ease,
              box-shadow 220ms ease;
}
.header-action,
.button-primary,
.quote-form button {
  border: 1px solid rgba(255, 156, 74, 0.40);
  background: linear-gradient(135deg, var(--orange-bright) 0%, var(--orange) 60%, #e0560b 100%);
  color: white;
  /* Softer drop shadow + no outer glow. Old version had a 32px shadow
   * + a separate orange ring; both at high opacity, which read as
   * over-lit. */
  box-shadow:
    0 8px 20px rgba(255, 122, 24, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.header-action:hover,
.button-primary:hover,
.quote-form button:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #ffae6b, var(--orange-bright) 60%, var(--orange));
  border-color: rgba(255, 156, 74, 0.62);
  box-shadow:
    0 12px 28px rgba(255, 122, 24, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.button-secondary {
  border: 1px solid var(--line-strong);
  color: white;
  background: rgba(255, 122, 24, 0.06);
  backdrop-filter: blur(14px) saturate(1.08);
}
.button-secondary:hover {
  transform: translateY(-2px);
  border-color: var(--orange-bright);
  background: rgba(255, 122, 24, 0.12);
  box-shadow: 0 14px 36px rgba(255, 122, 24, 0.22);
  color: white;
}

/* ---------------------------------------------------------------------
 * Eyebrows — pill style with mono font, accent color rotates per section.
 * Default = blue; per-section overrides below set cyan/green/copper.
 * ------------------------------------------------------------------ */
.eyebrow,
.section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  padding: 6px 12px;
  border: 1px solid rgba(255, 122, 24, 0.45);
  border-radius: 999px;
  background: rgba(255, 122, 24, 0.10);
  color: var(--orange-bright);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.eyebrow::before,
.section-kicker::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
}

h1, h2, h3, p { margin-top: 0; }
h1 {
  margin-bottom: 26px;
  max-width: 920px;
  font-size: clamp(2.9rem, 6.2vw, 6.25rem);
  /* See h2 — clear descender/ascender collisions while staying tight. */
  line-height: 1.02;
  letter-spacing: -0.02em;
  font-weight: 800;
  color: white;
}
/* Gradient highlight on key punchline words — wrap inline in HTML
 * with class .gradient-word. Blue (logo thread) flowing into orange
 * (main accent) — the brand journey from identity to action. */
.gradient-word {
  background: linear-gradient(120deg, var(--blue-bright) 0%, var(--orange-bright) 55%, var(--orange) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}
h2 {
  font-size: clamp(2.35rem, 5.3vw, 5.7rem);
  /* line-height bumped from .95 → 1.04 so descenders (p / g / y)
   * on one line don't crash into ascenders or i/j dots on the next.
   * Was visible on the contact h2 "Speak with Rigel..." where the
   * "p" in "Speak" touched the i-dot in "Rigel". */
  line-height: 1.04;
  letter-spacing: -0.02em;
  font-weight: 800;
  color: white;
}

/* ---------------------------------------------------------------------
 * Hero — dark gradient + perspective grid + drifting glow.
 * ------------------------------------------------------------------ */
.hero {
  position: relative;
  min-height: calc(100vh - 78px);
  overflow: hidden;
  color: white;
  background:
    radial-gradient(60% 50% at 78% 14%, rgba(255, 122, 24, 0.28), transparent 60%),
    radial-gradient(45% 50% at 14% 80%, rgba(74, 125, 255, 0.22), transparent 55%),
    radial-gradient(50% 60% at 50% 100%, rgba(255, 156, 74, 0.20), transparent 60%),
    linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 50%, #1a1140 100%);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 122, 24, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 122, 24, 0.07) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 88%);
          mask-image: linear-gradient(to bottom, #000, transparent 88%);
}
.hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(300px, .62fr);
  gap: clamp(28px, 6vw, 86px);
  align-items: end;
  padding: clamp(74px, 9vw, 116px) clamp(18px, 5vw, 72px) 34px;
}
.hero-copy { max-width: 960px; }
.hero-copy .eyebrow { color: var(--amber); border-color: rgba(255, 181, 71, 0.45); background: rgba(255, 181, 71, 0.10); }
.hero-lede {
  max-width: 760px;
  color: var(--ink-soft);
  font-size: clamp(1.08rem, 1.55vw, 1.34rem);
  line-height: 1.68;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

/* Hero proof tile — 3-up glass with subtle accent rotation. */
.hero-proof {
  display: grid;
  gap: 1px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(255, 122, 24, 0.32), rgba(74, 125, 255, 0.22));
  overflow: hidden;
  box-shadow: var(--shadow), 0 0 40px rgba(255, 122, 24, 0.16);
  backdrop-filter: blur(18px) saturate(1.1);
}
.proof-item {
  padding: 22px;
  background: rgba(6, 13, 34, 0.92);
  transition: background 240ms ease, transform 240ms ease;
}
.proof-item:hover {
  background: rgba(30, 18, 8, 0.95);
  transform: translateY(-1px);
}
.proof-item span {
  display: block;
  margin-bottom: 10px;
  color: var(--orange-bright);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: .70rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.proof-item strong { display: block; font-size: 1.02rem; line-height: 1.45; color: white; }

/* ---------------------------------------------------------------------
 * Hero video — keeps the truck/road video front and center.
 * ------------------------------------------------------------------ */
.hero-visual {
  position: relative;
  z-index: 1;
  padding: 4px clamp(10px, 3.2vw, 58px) clamp(44px, 6vw, 86px);
}
.route-video-card {
  position: relative;
  max-width: 1360px;
  aspect-ratio: 16 / 8.15;
  margin-inline: auto;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--navy-soft);
  box-shadow: var(--shadow-lg), 0 0 60px rgba(255, 122, 24, 0.22);
  isolation: isolate;
  /* Parallax mouse-tilt — JS sets transform on mousemove. Ease back
   * to neutral on mouseleave via this transition. transform-style:
   * preserve-3d so the rotateX/Y feels three-dimensional, not flat. */
  transform-style: preserve-3d;
  transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
@media (prefers-reduced-motion: reduce), (pointer: coarse) {
  .route-video-card { transition: none; transform: none !important; }
}
.route-video {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transform: scale(1.04);
  filter: saturate(1.10) contrast(1.04) brightness(.86);
}
.video-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(3, 6, 26, 0.55), rgba(3, 6, 26, 0.10) 35%, rgba(3, 6, 26, 0.10) 64%, rgba(3, 6, 26, 0.50)),
    linear-gradient(to top, rgba(3, 6, 26, 0.55), transparent 45%),
    radial-gradient(circle at 74% 28%, rgba(33, 75, 179, 0.20), transparent 28%);
}
.video-badge {
  position: absolute;
  right: clamp(16px, 3vw, 34px);
  top: clamp(16px, 3vw, 30px);
  z-index: 6;
  display: grid;
  gap: 5px;
  padding: 13px 16px;
  border: 1px solid rgba(255, 156, 74, 0.45);
  border-radius: 8px;
  background: rgba(3, 6, 26, 0.74);
  color: white;
  backdrop-filter: blur(18px) saturate(1.1);
  box-shadow: 0 0 24px rgba(255, 122, 24, 0.20);
}
.video-badge span {
  color: var(--orange-bright);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.video-badge strong { font-size: .96rem; color: white; }
@media (prefers-reduced-motion: reduce) {
  .route-video { display: none; }
  .route-video-card { background-image: url('assets/rigel-truck-front.png'); background-size: cover; background-position: center; }
}

/* ---------------------------------------------------------------------
 * Signal strip — 3 promises. Dark glass, accent number per cell.
 * ------------------------------------------------------------------ */
.signal-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  /* Orange frame top + bottom — matches the dividers between cells
   * so the whole strip reads as one orange-bounded surface. */
  border-top: 1px solid rgba(255, 122, 24, 0.36);
  border-bottom: 1px solid rgba(255, 122, 24, 0.36);
  background: rgba(255, 122, 24, 0.36);
}
.signal-strip article {
  position: relative;
  padding: clamp(28px, 4vw, 48px) clamp(20px, 4vw, 56px);
  background: var(--navy);
  transition: background 280ms ease, transform 280ms ease;
}
/* Three subtle shades of orange across the trio — deep, mid, warm. */
.signal-strip article:nth-child(1) span { color: var(--orange); }
.signal-strip article:nth-child(2) span { color: var(--orange-bright); }
.signal-strip article:nth-child(3) span { color: var(--amber); }
.signal-strip article:hover {
  background: rgba(30, 18, 8, 0.96);
  transform: translateY(-2px);
}
.signal-strip span {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: 0.10em;
}
.signal-strip strong { display: block; margin: 18px 0 8px; font-size: 1.18rem; color: white; font-weight: 700; letter-spacing: -0.005em; }
.signal-strip p { margin: 0; color: var(--ink-soft); line-height: 1.65; }

/* ---------------------------------------------------------------------
 * Generic section + split-heading.
 * ------------------------------------------------------------------ */
.section { padding: clamp(76px, 10vw, 136px) clamp(18px, 5vw, 72px); }
.service-section {
  color: white;
  background:
    radial-gradient(circle at 92% 4%, rgba(255, 122, 24, 0.22), transparent 30%),
    radial-gradient(circle at 0% 100%, rgba(74, 125, 255, 0.18), transparent 30%),
    linear-gradient(180deg, var(--navy) 0%, #14081f 100%);
}
.coverage-section {
  color: white;
  background:
    radial-gradient(circle at 8% 8%, rgba(255, 181, 71, 0.18), transparent 28%),
    radial-gradient(circle at 100% 100%, rgba(255, 122, 24, 0.18), transparent 28%),
    linear-gradient(180deg, #1a0e22 0%, var(--navy) 100%);
}
.service-section .section-kicker,
.coverage-section .section-kicker { color: var(--orange-bright); border-color: rgba(255, 156, 74, 0.45); background: rgba(255, 156, 74, 0.10); }

.split-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .68fr);
  gap: clamp(28px, 6vw, 90px);
  align-items: start;
  margin-bottom: clamp(36px, 7vw, 76px);
}
.split-heading p {
  position: relative;
  padding: 12px 0 12px 22px;
  border-left: 3px solid var(--orange);
  color: var(--ink-soft);
  font-size: 1.12rem;
  line-height: 1.72;
  margin-top: 14px;
}
.split-heading p,
.standards-copy p,
.coverage-copy p,
.contact-copy p { color: var(--ink-soft); font-size: 1.06rem; line-height: 1.76; }

/* ---------------------------------------------------------------------
 * Service cards — dark glass with glow border on hover (not white).
 * ------------------------------------------------------------------ */
.service-grid { display: grid; grid-template-columns: 1.08fr .96fr .96fr; gap: 18px; }
.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 380px;
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(11, 20, 48, 0.72);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(12px) saturate(1.04);
  transition: transform 280ms ease, border-color 280ms ease,
              background 280ms ease, box-shadow 280ms ease;
}
.service-card:hover {
  transform: translateY(-3px);
  border-color: var(--orange-bright);
  background: rgba(28, 18, 8, 0.85);
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.40), var(--glow-orange);
}
/* All three service cards share the same treatment now — the
 * previous "featured" highlight on Truckload Freight created visual
 * inconsistency the user called out. Keep the class for HTML
 * compatibility but render it identical to the base card. */
.service-card-featured {
  color: white;
  border-color: var(--line);
  background: rgba(11, 20, 48, 0.72);
}
.service-card-featured:hover {
  border-color: var(--orange-bright);
  background: rgba(28, 18, 8, 0.85);
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.40), var(--glow-orange);
}
.model-label {
  display: inline-flex;
  margin-bottom: 84px;
  padding: 4px 10px;
  border: 1px solid rgba(255, 156, 74, 0.45);
  border-radius: 999px;
  background: rgba(255, 156, 74, 0.10);
  color: var(--orange-bright);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
/* model-label on the (formerly) featured card now matches the base
 * orange-bright style — no separate amber treatment. */
.service-card-featured .model-label {
  color: var(--orange-bright);
  border-color: rgba(255, 156, 74, 0.45);
  background: rgba(255, 156, 74, 0.10);
}
.service-card h3 {
  margin-bottom: 18px;
  font-size: clamp(1.55rem, 2.2vw, 2.1rem);
  line-height: 1.08;
  color: white;
  letter-spacing: -0.015em;
  font-weight: 700;
}
.service-card p { margin: 0 0 14px; color: var(--ink-soft); line-height: 1.72; }
.service-card p:last-child { margin-bottom: 0; }
.service-card-featured p { color: var(--ink); }

.service-example {
  /* margin-top: auto pushes this block to the bottom of the flex
   * column so the EXAMPLE blocks bottom-align across all three
   * cards even when the h3 above varies from 2 to 3 lines. */
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: .94rem;
  color: var(--ink-mute);
  line-height: 1.68;
}
.service-example span {
  display: inline-block;
  margin-right: 6px;
  color: var(--orange-bright);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: .68rem;
}
.service-card-featured .service-example {
  border-top-color: var(--line);
  color: var(--ink-mute);
}
.service-card-featured .service-example span { color: var(--orange-bright); }

/* ---------------------------------------------------------------------
 * Fleet feature — truck photo + copy.
 * ------------------------------------------------------------------ */
.fleet-feature {
  display: grid;
  grid-template-columns: minmax(360px, .95fr) minmax(0, .85fr);
  gap: clamp(28px, 6vw, 86px);
  align-items: center;
  padding: clamp(72px, 10vw, 132px) clamp(18px, 5vw, 72px);
  background:
    radial-gradient(circle at 82% 18%, rgba(255, 181, 71, 0.22), transparent 30%),
    radial-gradient(circle at 18% 82%, rgba(255, 122, 24, 0.16), transparent 28%),
    #14081f;
  color: white;
}
.fleet-image-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--navy-soft);
  box-shadow: var(--shadow);
}
.fleet-image-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgba(3, 8, 26, 0.32), transparent 44%);
}
.fleet-image-card img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: center;
}
.fleet-copy .eyebrow { color: var(--amber); border-color: rgba(255, 181, 71, 0.45); background: rgba(255, 181, 71, 0.12); }
.fleet-copy h2 {
  margin-bottom: 22px;
  font-size: clamp(2.1rem, 4.8vw, 5rem);
  /* See base h2 — bumped to clear descenders into i/j dots below. */
  line-height: 1.04;
}
.fleet-copy p {
  color: var(--ink-soft);
  font-size: 1.06rem;
  line-height: 1.76;
}

/* ---------------------------------------------------------------------
 * Standards — numbered rows with mono accents + live-dot on hover.
 * ------------------------------------------------------------------ */
.standards-section {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(360px, .9fr);
  gap: clamp(30px, 6vw, 96px);
  align-items: center;
  padding: clamp(74px, 10vw, 132px) clamp(18px, 5vw, 72px);
  background:
    radial-gradient(circle at 10% 10%, rgba(255, 122, 24, 0.20), transparent 30%),
    radial-gradient(circle at 100% 90%, rgba(74, 125, 255, 0.16), transparent 28%),
    var(--navy-deep);
  color: white;
}
.standards-copy .eyebrow { color: var(--orange-bright); border-color: rgba(255, 156, 74, 0.45); background: rgba(255, 156, 74, 0.10); }
.standards-panel {
  display: grid;
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(255, 122, 24, 0.35), rgba(255, 181, 71, 0.22));
  box-shadow: var(--shadow), 0 0 40px rgba(255, 122, 24, 0.16);
}
.standard-row {
  display: grid;
  grid-template-columns: .78fr 1.35fr;
  gap: 22px;
  align-items: center;
  min-height: 88px;
  padding: 22px;
  background: rgba(8, 16, 40, 0.94);
  transition: background 240ms ease, transform 240ms ease;
}
.standard-row:hover {
  background: rgba(20, 32, 70, 0.96);
  transform: translateX(2px);
}
.standard-row span {
  position: relative;
  padding-left: 18px;
  color: var(--orange-bright);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.standard-row span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 14px rgba(255, 122, 24, 0.65);
}
.standard-row strong { line-height: 1.50; color: white; font-weight: 500; letter-spacing: -0.005em; }

/* ---------------------------------------------------------------------
 * Coverage — lane board.
 * ------------------------------------------------------------------ */
.coverage-section {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(360px, .85fr);
  gap: clamp(30px, 6vw, 96px);
  align-items: start;
}
.lane-board {
  display: grid;
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(255, 122, 24, 0.32), rgba(255, 181, 71, 0.20));
  box-shadow: var(--shadow), 0 0 40px rgba(255, 122, 24, 0.14);
}
.lane-row {
  display: grid;
  grid-template-columns: .92fr 1.12fr;
  gap: 22px;
  min-height: 80px;
  align-items: center;
  padding: 18px 22px;
  background: rgba(8, 16, 40, 0.94);
  transition: background 240ms ease, transform 240ms ease;
}
.lane-row:hover {
  background: rgba(20, 32, 70, 0.96);
  transform: translateX(2px);
}
.lane-row span {
  color: var(--ink-mute);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-weight: 600;
  font-size: .85rem;
  letter-spacing: 0.04em;
}
.lane-row strong { position: relative; padding-left: 28px; color: white; font-weight: 500; }
.lane-row strong::before {
  content: "→";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  color: var(--orange);
  font-weight: 700;
  font-size: 1.15rem;
  text-shadow: 0 0 12px rgba(255, 122, 24, 0.55);
}

/* ---------------------------------------------------------------------
 * CTA band — large gradient strip.
 * ------------------------------------------------------------------ */
.cta-band {
  display: flex;
  justify-content: space-between;
  gap: 28px;
  align-items: center;
  padding: clamp(48px, 8vw, 88px) clamp(18px, 5vw, 72px);
  color: white;
  background:
    radial-gradient(circle at 16% 50%, rgba(255, 122, 24, 0.32), transparent 50%),
    radial-gradient(circle at 84% 50%, rgba(74, 125, 255, 0.26), transparent 50%),
    linear-gradient(135deg, #1a0e08 0%, #2a1408 50%, #0d1a3d 100%);
  border-top: 1px solid rgba(255, 122, 24, 0.36);
  border-bottom: 1px solid rgba(255, 122, 24, 0.36);
}
.cta-band .eyebrow { color: var(--amber); border-color: rgba(255, 181, 71, 0.45); background: rgba(255, 181, 71, 0.12); }
.cta-band h2 { max-width: 880px; margin-bottom: 0; font-size: clamp(2rem, 4.6vw, 4.8rem); }
.cta-copy { flex: 1 1 420px; min-width: 0; }

/* ---------------------------------------------------------------------
 * Quote form — lives in the CTA band beside the headline. Builds a
 * mailto: link on submit (see app.js block 6) so users get a pre-
 * filled email in their default client. Dark-glass styling, orange
 * focus rings, single primary action.
 * ------------------------------------------------------------------ */
.quote-form {
  flex: 1 1 460px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 22px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: rgba(3, 6, 26, 0.55);
  backdrop-filter: blur(12px) saturate(1.08);
  box-shadow: var(--shadow), 0 0 36px rgba(255, 122, 24, 0.10);
}
.quote-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.quote-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.quote-field-wide { grid-column: 1 / -1; }
.quote-field span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--orange-bright);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.quote-field span em {
  color: var(--ink-mute);
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: none;
}
.quote-field input,
.quote-field select,
.quote-field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  color: white;
  font-family: inherit;
  font-size: .95rem;
  line-height: 1.4;
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}
.quote-field input::placeholder,
.quote-field textarea::placeholder { color: var(--ink-mute); }
.quote-field input:focus,
.quote-field select:focus,
.quote-field textarea:focus {
  outline: none;
  border-color: var(--orange);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 0 0 3px rgba(255, 122, 24, 0.16);
}
.quote-field textarea { resize: vertical; min-height: 56px; }
/* Date / select native styling — give them a hint of orange so they
 * don't look out of place on the dark surface. */
.quote-field input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.7) sepia(1) saturate(8) hue-rotate(-15deg);
  cursor: pointer;
}
.quote-form button[type="submit"] {
  align-self: flex-start;
  min-height: 48px;
  padding: 0 22px;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 156, 74, 0.40);
  background: linear-gradient(135deg, var(--orange-bright) 0%, var(--orange) 60%, #e0560b 100%);
  color: white;
  font-weight: 700;
  font-size: .95rem;
  cursor: pointer;
  box-shadow:
    0 8px 20px rgba(255, 122, 24, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: transform 220ms ease, background 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}
.quote-form button[type="submit"]:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #ffae6b, var(--orange-bright) 60%, var(--orange));
  border-color: rgba(255, 156, 74, 0.62);
  box-shadow:
    0 12px 28px rgba(255, 122, 24, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

/* ---------------------------------------------------------------------
 * Contact section — glass detail rows on dark.
 * ------------------------------------------------------------------ */
.contact-section {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(340px, .72fr);
  gap: clamp(28px, 6vw, 92px);
  align-items: start;
  padding: clamp(64px, 7vw, 96px) clamp(18px, 5vw, 72px) clamp(52px, 6vw, 82px);
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(circle at 86% 14%, rgba(255, 122, 24, 0.22), transparent 30%),
    radial-gradient(circle at 8% 88%, rgba(74, 125, 255, 0.18), transparent 28%),
    var(--navy);
  color: white;
}
.contact-copy .eyebrow { color: var(--orange-bright); border-color: rgba(255, 156, 74, 0.45); background: rgba(255, 156, 74, 0.10); }
.contact-copy h2 {
  max-width: 900px;
  font-size: clamp(3rem, 7.2vw, 6.4rem);
}
.contact-copy p {
  max-width: 820px;
  color: var(--ink-soft);
}
.contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}
.contact-actions .button-primary,
.contact-actions .button-secondary {
  min-height: 52px;
  padding: 0 28px;
  font-size: 1rem;
  line-height: 1;
  white-space: nowrap;
}
.contact-details {
  display: grid;
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(255, 122, 24, 0.32), rgba(74, 125, 255, 0.22));
  box-shadow: var(--shadow), 0 0 36px rgba(255, 122, 24, 0.14);
  backdrop-filter: blur(14px) saturate(1.08);
}
.detail-row {
  display: grid;
  grid-template-columns: .55fr 1fr;
  gap: 18px;
  align-items: center;
  min-height: 88px;
  padding: 22px;
  background: rgba(8, 16, 40, 0.94);
  transition: background 240ms ease;
}
.detail-row:hover { background: rgba(20, 32, 70, 0.96); }
.detail-row span {
  color: var(--orange-bright);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.detail-row a,
.detail-row strong {
  color: white;
  font-size: 1.02rem;
  line-height: 1.45;
  font-weight: 500;
}
.detail-row a { transition: color 200ms ease; }
.detail-row a:hover { color: var(--orange-bright); }

/* ---------------------------------------------------------------------
 * Footer.
 * ------------------------------------------------------------------ */
.site-footer {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
  padding: 28px clamp(18px, 5vw, 72px);
  border-top: 1px solid var(--line);
  background: var(--navy-deep);
  color: var(--ink-mute);
}
.site-footer img { width: 225px; opacity: 0.85; }
.site-footer p { margin: 0; text-align: right; font-size: .92rem; }

/* ---------------------------------------------------------------------
 * Scroll-triggered section reveal. Each .reveal element starts
 * slightly down + invisible; JS adds .in-view when the element
 * scrolls into the viewport, triggering the fade-up.
 * ------------------------------------------------------------------ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 720ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}
/* Stagger child elements when the parent reveals — gives the section
 * a "settling into place" feel rather than one big block dropping in. */
.reveal.in-view > * { animation: revealStagger 720ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.reveal.in-view > *:nth-child(2) { animation-delay: 80ms; }
.reveal.in-view > *:nth-child(3) { animation-delay: 140ms; }
.reveal.in-view > *:nth-child(4) { animation-delay: 200ms; }
.reveal.in-view > *:nth-child(5) { animation-delay: 260ms; }
.reveal.in-view > *:nth-child(6) { animation-delay: 320ms; }
@keyframes revealStagger {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal.in-view,
  .reveal.in-view > * {
    opacity: 1;
    transform: none;
    animation: none;
    transition: none;
  }
}

/* Header stays one consistent size on scroll — user feedback was
 * the reshape felt distracting. Compact-on-scroll behavior removed. */

/* ---------------------------------------------------------------------
 * Black stat strips — palate cleansers between heavy sections.
 * Pure black band with one bold sentence centered, optional accent
 * orange word. Adds visual rhythm + emphasis.
 * ------------------------------------------------------------------ */
.stat-strip {
  position: relative;
  padding: clamp(56px, 7vw, 96px) clamp(18px, 5vw, 72px);
  background: #000;
  color: white;
  text-align: center;
  border-top: 1px solid rgba(255, 122, 24, 0.20);
  border-bottom: 1px solid rgba(255, 122, 24, 0.20);
  overflow: hidden;
}
.stat-strip::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 50%, rgba(255, 122, 24, 0.10), transparent 50%),
    radial-gradient(circle at 80% 50%, rgba(74, 125, 255, 0.08), transparent 50%);
}
.stat-strip .stat-line {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  font-family: var(--display, inherit);
  font-size: clamp(1.6rem, 4vw, 3.4rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
}
.stat-strip .stat-line .accent {
  background: linear-gradient(120deg, var(--orange-bright) 0%, var(--amber) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}
.stat-strip .stat-eyebrow {
  display: inline-block;
  margin-bottom: 18px;
  padding: 5px 12px;
  border: 1px solid rgba(255, 122, 24, 0.40);
  border-radius: 999px;
  color: var(--orange-bright);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------------
 * Marquee — slow horizontal scroll of equipment + coverage terms.
 * Pure CSS animation, duplicates content so the scroll loops
 * seamlessly. Pauses on hover for accessibility.
 * ------------------------------------------------------------------ */
.marquee {
  position: relative;
  padding: 22px 0;
  background: linear-gradient(180deg, #000 0%, var(--navy-deep) 100%);
  border-top: 1px solid rgba(255, 122, 24, 0.18);
  border-bottom: 1px solid rgba(255, 122, 24, 0.18);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.marquee-track {
  display: flex;
  gap: 56px;
  width: max-content;
  animation: marqueeScroll 38s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: white;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.marquee-item .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 10px var(--orange);
}
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .marquee { -webkit-mask-image: none; mask-image: none; padding: 22px clamp(18px, 5vw, 72px); }
  .marquee-track { flex-wrap: wrap; }
}

/* ---------------------------------------------------------------------
 * Custom cursor — small orange ring follows the cursor inside dark
 * sections (hero / fleet / contact / stat strips / standards /
 * timeline). JS adds .visible when cursor enters a target section,
 * removes when it leaves. translate3d via inline style for GPU
 * acceleration. mix-blend-mode: screen makes it pop on dark surfaces
 * without painting over content unreadably.
 * ------------------------------------------------------------------ */
.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  border: 1.5px solid var(--orange);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  mix-blend-mode: screen;
  box-shadow: 0 0 14px rgba(255, 122, 24, 0.45);
  transition: opacity 220ms ease, width 220ms ease, height 220ms ease;
  will-change: transform, opacity;
}
.custom-cursor.visible { opacity: 1; }
@media (pointer: coarse), (prefers-reduced-motion: reduce) {
  .custom-cursor { display: none; }
}

/* ---------------------------------------------------------------------
 * Process timeline — horizontal flow of the freight lifecycle.
 * Each step is a card with number badge, title, short detail, and
 * a tiny timing tag. Connected by a faint orange line that runs
 * behind the row. On mobile, steps stack vertically with the line
 * running down the left edge instead.
 * ------------------------------------------------------------------ */
.process-timeline {
  position: relative;
  padding: clamp(76px, 10vw, 132px) clamp(18px, 5vw, 72px);
  background:
    radial-gradient(circle at 12% 14%, rgba(255, 122, 24, 0.16), transparent 28%),
    radial-gradient(circle at 88% 86%, rgba(74, 125, 255, 0.14), transparent 28%),
    var(--navy-deep);
  color: white;
  overflow: hidden;
}
.process-inner { max-width: 1280px; margin: 0 auto; }
.process-header { max-width: 820px; margin-bottom: clamp(40px, 6vw, 72px); }
.process-header .eyebrow {
  /* Same orange pill the other section eyebrows use, declared
   * locally so the timeline section doesn't depend on parent
   * eyebrow color cascades. */
  color: var(--orange-bright);
  border-color: rgba(255, 156, 74, 0.45);
  background: rgba(255, 156, 74, 0.10);
}
.process-header h2 .accent {
  background: linear-gradient(120deg, var(--orange-bright) 0%, var(--amber) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}
.process-header p {
  color: var(--ink-soft);
  font-size: 1.06rem;
  line-height: 1.76;
  margin-top: 18px;
}

.process-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
}
/* Horizontal connector line behind the cards — sits across the
 * vertical center of the row. The dashed style reads as "in flow,
 * not finished" which fits a process diagram better than a solid
 * line. */
.process-steps::before {
  content: "";
  position: absolute;
  top: 28px; /* aligns with the center of the step-num badge */
  left: 2%;
  right: 2%;
  height: 1px;
  background-image: linear-gradient(to right, rgba(255, 122, 24, 0.45) 50%, transparent 0);
  background-size: 10px 1px;
  background-repeat: repeat-x;
  z-index: 0;
}
.process-step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(11, 20, 48, 0.92);
  transition: transform 240ms ease, border-color 240ms ease,
              background 240ms ease, box-shadow 240ms ease;
}
.process-step:hover {
  transform: translateY(-3px);
  border-color: var(--orange-bright);
  background: rgba(28, 18, 8, 0.92);
  box-shadow: var(--glow-orange);
}
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--orange);
  color: white;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  box-shadow: 0 0 14px rgba(255, 122, 24, 0.45);
}
.process-step strong {
  font-size: 1rem;
  color: white;
  letter-spacing: -0.01em;
}
.process-step .step-detail {
  color: var(--ink-soft);
  font-size: .82rem;
  line-height: 1.55;
}
.process-step .step-time {
  display: inline-flex;
  align-self: flex-start;
  margin-top: auto;
  padding: 3px 8px;
  border: 1px solid rgba(255, 156, 74, 0.35);
  border-radius: 999px;
  background: rgba(255, 156, 74, 0.08);
  color: var(--orange-bright);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------------
 * Responsive.
 * ------------------------------------------------------------------ */
@media (max-width: 1060px) {
  /* Process timeline stacks vertically with the connector running
   * down the left edge of the step badges instead of through the
   * row centerline. Cards become left-aligned rows. */
  .process-steps {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .process-steps::before {
    top: 0;
    bottom: 0;
    left: 32px;     /* aligns with center of step-num */
    right: auto;
    width: 1px;
    height: auto;
    background-image: linear-gradient(to bottom, rgba(255, 122, 24, 0.45) 50%, transparent 0);
    background-size: 1px 10px;
    background-repeat: repeat-y;
  }
  .process-step {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 12px 18px;
    padding: 16px 18px;
  }
  .process-step .step-num { grid-row: span 3; }
  .process-step strong { grid-column: 2; }
  .process-step .step-detail { grid-column: 2; }
  .process-step .step-time { grid-column: 2; align-self: flex-start; margin-top: 0; }
}

@media (max-width: 1060px) {
  .site-header { grid-template-columns: auto auto; justify-content: space-between; }
  .nav-links { display: none; }
  .hero-inner,
  .split-heading,
  .standards-section,
  .coverage-section,
  .contact-section,
  .fleet-feature { grid-template-columns: 1fr; }
  .hero { min-height: auto; }
  .hero-proof { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .service-grid { grid-template-columns: 1fr; }
  .service-card { min-height: auto; }
  .model-label { margin-bottom: 44px; }
  .signal-strip { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .site-header { min-height: 66px; padding: 12px 16px; }
  .brand img { width: 176px; }
  .header-action { min-height: 40px; padding: 0 13px; font-size: .84rem; }
  .hero-inner { padding-top: 62px; }
  h1 { font-size: clamp(3rem, 16vw, 4.6rem); }
  h2 { font-size: clamp(2.15rem, 11vw, 3.5rem); }
  .hero-proof { grid-template-columns: 1fr; }
  .hero-actions,
  .button-primary,
  .button-secondary { width: 100%; }
  .hero-visual { padding-inline: 0; }
  .route-video-card { aspect-ratio: 1.05 / 1; border-left: 0; border-right: 0; }
  .video-badge { left: 16px; right: 16px; top: 16px; }
  .standard-row,
  .lane-row,
  .detail-row { grid-template-columns: 1fr; gap: 8px; }
  .cta-band { align-items: flex-start; flex-direction: column; }
  .cta-copy, .quote-form { flex: 1 1 100%; width: 100%; }
  .quote-grid { grid-template-columns: 1fr; }
  .quote-form button[type="submit"] { width: 100%; }
  .contact-section { padding-block: 54px 44px; }
  .contact-copy h2 { font-size: clamp(2.7rem, 13vw, 4.4rem); }
  .contact-actions .button-primary,
  .contact-actions .button-secondary { min-height: 50px; font-size: .96rem; }
  .fleet-feature { padding-block: 58px; }
  .fleet-image-card img { aspect-ratio: 1.1 / 1; }

  .site-footer { flex-direction: column; align-items: flex-start; }
  .site-footer p { text-align: left; }
}