/* =========================================================
   Miral Transportation: site styles
   Brand: lime green (from the "Green Machine") + deep navy
   ========================================================= */

/* Fonts: Barlow + Barlow Condensed (SIL Open Font License), self-hosted, latin subset */
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 300; font-display: swap; src: url(../assets/fonts/barlow-300.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url(../assets/fonts/barlow-400.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap; src: url(../assets/fonts/barlow-500.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url(../assets/fonts/barlow-600.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 700; font-display: swap; src: url(../assets/fonts/barlow-700.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 500; font-display: swap; src: url(../assets/fonts/barlow-condensed-500.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url(../assets/fonts/barlow-condensed-600.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url(../assets/fonts/barlow-condensed-700.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* Brand */
  --lime: #a6e22e;
  --lime-hover: #b9ef4a;
  --lime-press: #8fcb17;
  --lime-ink: #3d6a00;        /* lime-family text that passes AA on light bg */
  --lime-soft: #eef8dc;

  --navy-950: #050e18;
  --navy-900: #081522;
  --navy-800: #0e2236;
  --navy-700: #16314c;
  --navy-600: #24486b;

  /* Semantic */
  --bg: #ffffff;
  --bg-tint: #f3f6f1;
  --ink: #0b1a29;
  --ink-muted: #4a5a6a;
  --line: #dfe5e0;
  --on-dark: #ffffff;
  --on-dark-muted: #b5c2cf;
  --danger: #c62828;
  --success: #2e7d32;

  /* Type */
  --font: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-cond: "Barlow Condensed", "Barlow", system-ui, sans-serif;

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

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;

  --shadow-sm: 0 1px 2px rgba(5, 14, 24, .06), 0 2px 8px rgba(5, 14, 24, .06);
  --shadow: 0 10px 30px -10px rgba(5, 14, 24, .25);
  --shadow-lg: 0 30px 60px -20px rgba(5, 14, 24, .45);

  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --dur-fast: 160ms;
  --dur: 280ms;

  --header-h: 112px;
  --z-header: 100;
  --z-overlay: 1000;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }
/* Nothing may make the page wider than the screen (clip keeps the sticky hero working). */
html, body { overflow-x: clip; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3 { line-height: 1.1; margin: 0; text-wrap: balance; }
p { margin: 0 0 var(--s-4); }
p:last-child { margin-bottom: 0; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; }
address { font-style: normal; }

:focus-visible {
  outline: 3px solid var(--lime);
  outline-offset: 3px;
  border-radius: 4px;
}
.section:not(.section--dark) :focus-visible { outline-color: var(--navy-600); }

.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;
}
.skip-link {
  position: absolute; left: var(--s-4); top: -60px; z-index: calc(var(--z-overlay) + 1);
  background: var(--lime); color: var(--navy-900); padding: var(--s-3) var(--s-4);
  border-radius: var(--radius-sm); font-weight: 600; text-decoration: none;
  transition: top var(--dur-fast);
}
.skip-link:focus { top: var(--s-4); }

.container {
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: var(--s-4);
}
@media (min-width: 768px) { .container { padding-inline: var(--s-6); } }

.icon {
  width: 1.15em; height: 1.15em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 44px; padding: 10px 20px;
  border: 2px solid transparent; border-radius: 999px;
  font-family: var(--font); font-weight: 600; font-size: .95rem; letter-spacing: .02em;
  text-decoration: none; white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur) var(--ease-out);
  touch-action: manipulation;
}
.btn:active { transform: scale(.97); }
.btn--lg { min-height: 52px; padding: 14px 28px; font-size: 1rem; }
.btn--block { width: 100%; }

.btn--primary { background: var(--lime); color: var(--navy-900); }
.btn--primary:hover { background: var(--lime-hover); box-shadow: 0 8px 24px -8px rgba(166, 226, 46, .7); }
.btn--primary:active { background: var(--lime-press); }
.btn--primary .icon { transition: transform var(--dur) var(--ease-out); }
.btn--primary:hover .icon { transform: translateX(3px); }

.btn--ghost { color: var(--on-dark); border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.04); backdrop-filter: blur(4px); }
.btn--ghost:hover { border-color: var(--on-dark); background: rgba(255,255,255,.12); }

.btn--dark { background: var(--navy-900); color: var(--on-dark); }
.btn--dark:hover { background: var(--navy-700); }

.link-arrow {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-weight: 600; text-decoration: none; color: var(--lime-ink);
  min-height: 44px;
}
.link-arrow .icon { transition: transform var(--dur) var(--ease-out); }
.link-arrow:hover .icon { transform: translateX(4px); }
.link-arrow:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Eyebrows & headings ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-cond); font-weight: 600;
  font-size: .9rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--lime-ink); margin-bottom: var(--s-3);
}
.eyebrow--light { color: var(--lime); }
.eyebrow .dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--lime);
  box-shadow: 0 0 0 0 rgba(166,226,46,.6); animation: pulse 2.4s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(166,226,46,.6); }
  70% { box-shadow: 0 0 0 10px rgba(166,226,46,0); }
  100% { box-shadow: 0 0 0 0 rgba(166,226,46,0); }
}

.section { padding-block: var(--s-9); }
@media (max-width: 767px) { .section { padding-block: var(--s-8); } }
.section--tint { background: var(--bg-tint); }
.section--dark { background: var(--navy-900); color: var(--on-dark); }

.section__head { max-width: 720px; margin-bottom: var(--s-7); }
.section__head--center { margin-inline: auto; text-align: center; }
.section__head--split {
  max-width: none; display: grid; gap: var(--s-5); align-items: end;
}
@media (min-width: 900px) { .section__head--split { grid-template-columns: 1fr 1fr; } }
.section__title {
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.1rem);
  font-weight: 600; letter-spacing: -.015em; margin-bottom: var(--s-4);
}
.section__lead { font-size: 1.125rem; color: var(--ink-muted); max-width: 62ch; }
.section--dark .section__lead { color: var(--on-dark-muted); }
.hl { color: var(--lime); }
.hl-dark {
  background: linear-gradient(transparent 62%, rgba(166,226,46,.55) 62%);
  padding-inline: 2px;
}

/* =========================================================
   HEADER
   ========================================================= */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-header);
  color: var(--on-dark);
  transition: background-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.site-header.is-scrolled {
  background: rgba(8, 21, 34, .92);
  backdrop-filter: saturate(140%) blur(12px);
  box-shadow: 0 1px 0 rgba(255,255,255,.06), 0 10px 30px -15px rgba(0,0,0,.5);
}

.topbar {
  font-size: .82rem; color: var(--on-dark-muted);
  border-bottom: 1px solid rgba(255,255,255,.1);
  transition: margin-top var(--dur) var(--ease-out), opacity var(--dur);
}
.site-header.is-scrolled .topbar { margin-top: -41px; opacity: 0; }
.topbar__inner {
  display: flex; justify-content: space-between; align-items: center;
  min-height: 40px; gap: var(--s-4);
}
.topbar__meta { display: flex; gap: var(--s-2); letter-spacing: .04em; font-family: var(--font-cond); font-size: .9rem; }
.topbar__links { display: flex; gap: var(--s-5); }
.topbar__links a {
  display: inline-flex; align-items: center; gap: 6px;
  text-decoration: none; color: var(--on-dark); min-height: 40px;
}
.topbar__links a:hover { color: var(--lime); }
@media (max-width: 640px) {
  .hide-sm { display: none !important; }
}
@media (max-width: 420px) {
  .topbar__meta span:nth-child(n+2) { display: none; }
}

.nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-5); min-height: 72px;
}
.nav__logo img { width: 128px; height: auto; }
@media (min-width: 1024px) { .nav__logo img { width: 140px; } }

.nav__links { display: flex; gap: var(--s-1); align-items: center; }
.nav__links a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
  text-decoration: none; font-weight: 500; font-size: .95rem; letter-spacing: .04em;
  text-transform: uppercase; font-family: var(--font-cond); font-size: 1.02rem;
  color: rgba(255,255,255,.88); position: relative;
  transition: color var(--dur-fast);
}
.nav__links a:not(.btn)::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 8px; height: 2px;
  background: var(--lime); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease-out);
}
.nav__links a:not(.btn):hover, .nav__links a.is-active { color: #fff; }
.nav__links a:not(.btn):hover::after, .nav__links a.is-active::after { transform: scaleX(1); }
.nav__mobile-cta { display: none; }

.nav__toggle {
  display: none; width: 44px; height: 44px; border: 0; background: transparent;
  border-radius: var(--radius-sm); position: relative;
}
.nav__toggle span {
  position: absolute; left: 11px; right: 11px; height: 2px; background: #fff; border-radius: 2px;
  transition: transform var(--dur) var(--ease-out), opacity var(--dur-fast);
}
.nav__toggle span:nth-child(1) { top: 15px; }
.nav__toggle span:nth-child(2) { top: 21px; }
.nav__toggle span:nth-child(3) { top: 27px; }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1023px) {
  .nav__toggle { display: block; }
  .nav__cta { display: none; }
  .nav__links {
    position: fixed; inset: 0 0 0 auto; width: min(340px, 86vw);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 96px var(--s-5) var(--s-6);
    background: var(--navy-900);
    box-shadow: var(--shadow-lg);
    /* Closed, the drawer is clipped away in place rather than pushed past the
       right edge: iPhones count a fixed element sitting off-screen as page
       width and let the whole page slide sideways. */
    clip-path: inset(0 0 0 100%); visibility: hidden;
    transition: clip-path var(--dur) var(--ease-out), visibility 0s linear var(--dur);
    z-index: -1;
  }
  .nav__links.is-open { clip-path: inset(0); visibility: visible; transition: clip-path var(--dur) var(--ease-out); }
  .nav__links a:not(.btn) { min-height: 56px; font-size: 1.3rem; border-bottom: 1px solid rgba(255,255,255,.08); padding: 0 var(--s-2); }
  .nav__links a:not(.btn)::after { display: none; }
  .nav__mobile-cta { display: block; margin-top: var(--s-5); }
  .nav__mobile-cta .btn { width: 100%; min-height: 52px; }
  body.nav-open::after {
    content: ""; position: fixed; inset: 0; background: rgba(5,14,24,.55); z-index: 50;
  }
}

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: min(100vh, 1000px); min-height: min(100svh, 1000px);
  display: flex; flex-direction: column; justify-content: flex-end;
  color: var(--on-dark); background: var(--navy-900);
  padding-top: calc(var(--header-h) + var(--s-6));
}
/* Scroll-scrubbed hero: on roomy screens the hero pins while the
   video plays through, then releases into the rest of the page. */
.hero-scroll { position: relative; }
@media (min-width: 1024px) and (min-height: 760px) and (prefers-reduced-motion: no-preference) {
  .hero-scroll { height: calc(100vh + 120vh); height: calc(100svh + 120svh); }
  .hero { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 0 !important; }
}
.hero__progress {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: rgba(255,255,255,.08); z-index: 1;
}
.hero__progress span {
  display: block; height: 100%; background: var(--lime);
  transform-origin: left; transform: scaleX(var(--p, 0));
  box-shadow: 0 0 10px rgba(166,226,46,.7);
}
.hero__shade { opacity: calc(1 - var(--p, 0) * .2); }

.hero__media { position: absolute; inset: 0; z-index: -1; }
.hero__video {
  width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%;
}
.hero__shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(5,14,24,.92) 0%, rgba(5,14,24,.72) 38%, rgba(5,14,24,.25) 70%, rgba(5,14,24,.45) 100%),
    linear-gradient(180deg, rgba(5,14,24,.55) 0%, rgba(5,14,24,0) 30%, rgba(5,14,24,0) 60%, rgba(5,14,24,.95) 100%);
}
@media (max-width: 899px) {
  .hero__shade {
    background: linear-gradient(180deg, rgba(5,14,24,.75) 0%, rgba(5,14,24,.65) 40%, rgba(5,14,24,.92) 100%);
  }
}

.hero__trails { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; }
.trail {
  fill: none; stroke: url(#trail); stroke-linecap: round;
  stroke-dasharray: 520 1800; stroke-dashoffset: 2320;
  filter: drop-shadow(0 0 6px rgba(166,226,46,.8));
  animation: trail 6.5s cubic-bezier(.45,.05,.3,1) infinite;
}
.trail--1 { stroke-width: 3; }
.trail--2 { stroke-width: 1.5; opacity: .6; animation-delay: 1.4s; animation-duration: 7.5s; }
.trail--3 { stroke-width: 1; opacity: .45; animation-delay: 3s; animation-duration: 8.5s; }
@keyframes trail {
  0% { stroke-dashoffset: 2320; }
  70%, 100% { stroke-dashoffset: 0; }
}

.hero__grid {
  display: grid; gap: var(--s-7); align-items: center;
  padding-bottom: var(--s-7);
  flex: 1;
}
@media (min-width: 1024px) {
  .hero__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: var(--s-8); }
}

.hero__title {
  font-size: clamp(2.6rem, 1.6rem + 4.6vw, 5rem);
  font-weight: 300; letter-spacing: -.025em; line-height: 1.02;
  margin-bottom: var(--s-5);
}
.hero__title .hl { font-weight: 600; }
.hero__lead {
  font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem);
  color: #d6dee6; max-width: 54ch; margin-bottom: var(--s-6);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* Entrance */
.hero__copy > * { animation: rise .9s var(--ease-out) both; }
.hero__copy > *:nth-child(2) { animation-delay: .08s; }
.hero__copy > *:nth-child(3) { animation-delay: .16s; }
.hero__copy > *:nth-child(4) { animation-delay: .24s; }
.quick-quote { animation: rise 1s var(--ease-out) .3s both; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* Quick-quote card */
.quick-quote {
  background: rgba(8, 21, 34, .62);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius-lg);
  padding: var(--s-5);
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow: var(--shadow-lg);
  position: relative;
}
.quick-quote::before {
  content: ""; position: absolute; left: var(--s-5); right: var(--s-5); top: -1px; height: 3px;
  background: linear-gradient(90deg, transparent, var(--lime), transparent); border-radius: 3px;
}
@media (min-width: 768px) { .quick-quote { padding: var(--s-6); } }
.quick-quote__head h2 { font-size: 1.45rem; font-weight: 600; margin-bottom: 4px; }
.quick-quote__head p { color: var(--on-dark-muted); font-size: .95rem; margin-bottom: var(--s-5); }
.quick-quote .field { margin-bottom: var(--s-4); }
.quick-quote label { color: #dbe3ea; }
.quick-quote .btn { margin-top: var(--s-2); }
.quick-quote__alt { text-align: center; color: var(--on-dark-muted); font-size: .9rem; margin-top: var(--s-4); }
.quick-quote__alt a { color: var(--lime); font-weight: 600; text-decoration: none; }
.quick-quote__alt a:hover { text-decoration: underline; }

/* Trust marquee */
.hero__trust {
  border-top: 1px solid rgba(255,255,255,.1);
  padding-block: var(--s-5) var(--s-5);
  text-align: center;
}
.hero__trust-label {
  font-family: var(--font-cond); text-transform: uppercase; letter-spacing: .2em;
  font-size: .85rem; color: var(--on-dark-muted); margin-bottom: var(--s-4);
}
.marquee {
  overflow: hidden;
  /* Headroom so a logo scaled up on hover isn't clipped top and bottom;
     the negative margin keeps the strip's overall height unchanged. */
  padding-block: 8px; margin-block: -8px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
/* Seamless loop: the track holds two identical halves, each at least as
   wide as the viewport (JS fills them), and slides exactly one half.
   Spacing lives on each item, not as flex gap, so both halves are equal. */
.marquee__track {
  display: flex; align-items: center; width: max-content;
  animation: marquee var(--marquee-dur, 36s) linear infinite;
  will-change: transform;
}
.marquee__track li { flex: none; padding-inline: calc(var(--s-9) / 2); }
.marquee:hover .marquee__track { animation-play-state: paused; }
/* Optical sizing: wide wordmarks sit lower, round badges taller,
   so every partner reads at the same visual weight. */
img[src$="fedex.webp"]         { --logo-h: 34px; }
img[src$="dollargeneral.webp"] { --logo-h: 28px; }
img[src$="toyota.webp"]        { --logo-h: 50px; }
img[src$="utility.webp"]       { --logo-h: 46px; }
img[src$="busch.webp"]         { --logo-h: 58px; }
img[src$="tempurpedic.webp"]   { --logo-h: 40px; }
.marquee__track img {
  height: var(--logo-h, 40px); width: auto; opacity: .82;
  transition: opacity 220ms ease, transform 220ms ease;
}
/* Hovering the strip (it pauses) spotlights one logo and dims the rest. */
@media (hover: hover) and (pointer: fine) {
  .marquee:hover .marquee__track img { opacity: .38; }
  .marquee:hover .marquee__track img:hover { opacity: 1; transform: scale(1.08); }
}
@keyframes marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

/* =========================================================
   STATS
   ========================================================= */
.stats { background: var(--lime); color: var(--navy-900); }
.stats__grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  padding-block: var(--s-6);
}
@media (min-width: 900px) { .stats__grid { grid-template-columns: repeat(4, 1fr); padding-block: var(--s-7); } }
.stat { padding: var(--s-3) var(--s-4); text-align: center; }
@media (min-width: 900px) {
  .stat + .stat { border-left: 1px solid rgba(8,21,34,.18); }
}
.stat__num {
  font-family: var(--font-cond); font-weight: 700;
  font-size: clamp(2.4rem, 1.8rem + 2.4vw, 3.6rem); line-height: 1; margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
}
.stat__num small { font-size: .5em; font-weight: 600; opacity: .7; }
.stat__label { font-weight: 600; font-size: .95rem; letter-spacing: .02em; }

/* =========================================================
   SERVICES
   ========================================================= */
.cards { display: grid; gap: var(--s-5); }
@media (min-width: 900px) { .cards { grid-template-columns: repeat(3, 1fr); } }
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-3);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: transparent; }
.card h3 { font-size: 1.45rem; font-weight: 600; }
.card p { color: var(--ink-muted); }
.card .link-arrow { margin-top: auto; }
.card__icon {
  width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center;
  background: var(--lime-soft); color: var(--lime-ink); margin-bottom: var(--s-2);
}
.card__icon svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.card--featured { background: var(--navy-900); color: var(--on-dark); border-color: var(--navy-900); }
.card--featured p { color: var(--on-dark-muted); }
.card--featured .card__icon { background: rgba(166,226,46,.14); color: var(--lime); }
.card--featured .link-arrow { color: var(--lime); }

.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: auto; padding-top: var(--s-2); }
.chips li {
  font-size: .85rem; font-weight: 600; padding: 6px 12px; border-radius: 999px;
  background: var(--bg-tint); border: 1px solid var(--line); color: var(--ink);
}

/* =========================================================
   ABOUT
   ========================================================= */
.about { display: grid; gap: var(--s-8); align-items: center; }
@media (min-width: 1024px) { .about { grid-template-columns: 1fr 1.05fr; } }
.about__media { position: relative; padding-right: 18%; padding-bottom: 14%; }
.about__img { border-radius: var(--radius-lg); object-fit: cover; }
.about__img--main { aspect-ratio: 4 / 5; width: 100%; box-shadow: var(--shadow); }
.about__img--inset {
  position: absolute; right: 0; bottom: 0; width: 52%; aspect-ratio: 4 / 3;
  border: 6px solid var(--bg-tint); box-shadow: var(--shadow-lg);
}
.about__badge {
  position: absolute; left: -12px; top: 32px;
  background: var(--lime); color: var(--navy-900);
  border-radius: var(--radius); padding: var(--s-4) var(--s-5);
  box-shadow: var(--shadow); text-align: center;
}
@media (min-width: 768px) { .about__badge { left: -24px; } }
.about__badge strong { display: block; font-family: var(--font-cond); font-size: 2.6rem; line-height: 1; }
.about__badge span { font-weight: 600; font-size: .85rem; }
.about__copy > p { color: var(--ink-muted); font-size: 1.08rem; }

.checks { display: grid; gap: var(--s-4); margin-top: var(--s-6); }
.checks li { display: flex; gap: var(--s-4); align-items: flex-start; }
.checks .icon {
  width: 32px; height: 32px; padding: 7px; border-radius: 50%;
  background: var(--navy-900); color: var(--lime); stroke-width: 3; margin-top: 2px;
}
.checks strong { display: block; font-size: 1.08rem; }
.checks span { color: var(--ink-muted); }

/* =========================================================
   FLEET
   ========================================================= */
/* Curved reel: a canvas (drawn in js/main.js) streams photos round the
   inside of a cylinder. One flat drawing surface, so no 3D layer seams. */
.section--reel { padding-block: 0; overflow: hidden; }
.fleet-reel {
  position: relative; overflow: hidden; isolation: isolate;
  height: clamp(560px, 86vh, 760px);
  background:
    radial-gradient(60% 50% at 50% 56%, rgba(36,72,107,.45), transparent 70%),
    var(--navy-900);
}
@media (max-width: 767px) { .fleet-reel { height: 640px; } }
.fleet-reel__band {
  position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;
  opacity: 0; transition: opacity .8s var(--ease-out);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.fleet-reel__band.is-ready { opacity: 1; }

/* Phones: two rows of photos drifting opposite ways (built in js/main.js). */
.fleet-rows { display: none; }
@media (max-width: 767px) {
  .fleet-reel__band { display: none; }
  .fleet-rows {
    display: grid; gap: 12px;
    position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
    pointer-events: none;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  }
  .fleet-row {
    display: flex; width: max-content;
    animation: fleetRow 46s linear infinite;
    will-change: transform;
  }
  .fleet-row--rev { animation-direction: reverse; animation-duration: 52s; }
  .fleet-rows.is-paused .fleet-row { animation-play-state: paused; }
  .fleet-row img {
    flex: none; width: 200px; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
    margin-right: 10px; border-radius: 12px;
    box-shadow: 0 10px 24px -14px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.06);
  }
}
@keyframes fleetRow { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@media (prefers-reduced-motion: reduce) { .fleet-row { animation: none; } }

.fleet-reel__content {
  position: relative; z-index: 1; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  text-align: center; padding: var(--s-8) var(--s-4) var(--s-7);
  pointer-events: none;
}
.fleet-reel__content a, .fleet-reel__content button { pointer-events: auto; }
.fleet-reel__head .section__title { margin-bottom: 0; font-weight: 300; letter-spacing: -.02em; }
.fleet-reel__foot { max-width: 560px; }
.fleet-reel__foot p { color: var(--on-dark-muted); font-size: 1rem; margin-bottom: var(--s-4); text-wrap: pretty; }
.fleet-reel__facts { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); }
.fleet-reel__facts li {
  font-size: .9rem; padding: 6px 14px; border-radius: 999px; color: var(--on-dark-muted);
  background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
}
.fleet-reel__facts strong { color: var(--lime); font-weight: 600; }

/* =========================================================
   PARTNERS
   ========================================================= */
.partners { display: grid; gap: var(--s-8); align-items: center; }
@media (min-width: 1024px) { .partners { grid-template-columns: 1fr 1fr; } }
.partners__copy > p { color: var(--ink-muted); font-size: 1.08rem; }
.partner-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3);
  margin: var(--s-6) 0;
}
/* Each tile holds a white logo and its full-colour twin in the same cell.
   Lit (hover, or scrolled into view on touch screens) the tile turns
   white and the colour logo fades in: brand colours only ever sit on
   white, where they read as intended. */
.partner-grid li {
  display: grid; place-items: center; height: 96px; padding: var(--s-4);
  background: var(--navy-900); border-radius: var(--radius);
  box-shadow: 0 0 0 1px rgba(8,21,34,0);
  transition:
    background-color 320ms var(--ease-out),
    box-shadow 320ms var(--ease-out),
    transform 320ms var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.partner-grid img {
  grid-area: 1 / 1;
  height: calc(var(--logo-h, 40px) * 1.1); width: auto; max-width: 100%; object-fit: contain;
  transition: opacity 320ms var(--ease-out), transform 320ms var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.partner-grid .logo-c { opacity: 0; transform: scale(.96); }
.partner-grid li.is-lit {
  background: #fff;
  box-shadow: 0 0 0 1px rgba(8,21,34,.08), 0 12px 28px -14px rgba(8,21,34,.35);
  transform: translateY(-3px);
}
.partner-grid li.is-lit .logo-w { opacity: 0; transform: scale(1.04); }
.partner-grid li.is-lit .logo-c { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) {
  .partner-grid li:hover {
    background: #fff;
    box-shadow: 0 0 0 1px rgba(8,21,34,.08), 0 12px 28px -14px rgba(8,21,34,.35);
    transform: translateY(-3px);
  }
  .partner-grid li:hover .logo-w { opacity: 0; transform: scale(1.04); }
  .partner-grid li:hover .logo-c { opacity: 1; transform: none; }
}
@media (max-width: 480px) {
  .partner-grid { grid-template-columns: repeat(2, 1fr); }
}

.partners__feature { margin: 0; position: relative; }
.partners__feature img { border-radius: var(--radius-lg); box-shadow: var(--shadow); width: 100%; }
.partners__feature blockquote {
  margin: calc(-1 * var(--s-8)) var(--s-4) 0 auto; position: relative; max-width: 420px;
  background: #fff; border-radius: var(--radius); padding: var(--s-5);
  box-shadow: var(--shadow-lg); border-left: 4px solid var(--lime);
}
.partners__feature blockquote p { font-size: 1.05rem; font-style: italic; }
.partners__feature blockquote footer { font-weight: 700; margin-top: var(--s-3); color: var(--lime-ink); }

/* =========================================================
   CAREERS
   ========================================================= */
.careers {
  position: relative; isolation: isolate; overflow: hidden;
  color: var(--on-dark); background: var(--navy-950);
  padding-block: var(--s-10);
}
@media (max-width: 767px) { .careers { padding-block: var(--s-8); } }
.careers__bg { position: absolute; inset: 0; z-index: -1; }
.careers__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; opacity: .32; }
.careers__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, var(--navy-950) 20%, rgba(5,14,24,.75) 60%, rgba(5,14,24,.55));
}
.careers__grid { display: grid; gap: var(--s-7); align-items: center; }
@media (min-width: 1024px) { .careers__grid { grid-template-columns: 1.15fr .85fr; gap: var(--s-8); } }
.careers__lead { font-size: 1.15rem; color: #d6dee6; max-width: 56ch; }
.perks { display: grid; gap: var(--s-4); margin: var(--s-6) 0 var(--s-7); }
@media (min-width: 640px) { .perks { grid-template-columns: repeat(3, 1fr); } }
.perks li {
  display: flex; flex-direction: column; gap: var(--s-2);
  padding: var(--s-4); border-radius: var(--radius);
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
}
.perks .icon { width: 28px; height: 28px; color: var(--lime); }
.perks strong { display: block; }
.perks span { color: var(--on-dark-muted); font-size: .95rem; }
.careers__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }

.earn-card {
  background: #fff; color: var(--ink); border-radius: var(--radius-lg);
  padding: var(--s-6); box-shadow: var(--shadow-lg); position: relative; overflow: hidden;
}
.earn-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: var(--lime);
}
.earn-card__kicker { font-family: var(--font-cond); text-transform: uppercase; letter-spacing: .12em; font-weight: 600; color: var(--ink-muted); font-size: .9rem; }
.earn-card__num {
  font-family: var(--font-cond); font-weight: 700; font-size: clamp(2.6rem, 2rem + 2.4vw, 3.6rem);
  line-height: 1; color: var(--navy-900); margin: var(--s-2) 0 var(--s-3);
}
.earn-card__num span { color: var(--lime-ink); }
.earn-card__sub { color: var(--ink-muted); font-size: .98rem; }
.factors { margin: var(--s-5) 0 0; display: grid; gap: var(--s-4); }
.factors div { padding-left: var(--s-4); border-left: 3px solid var(--lime); }
.factors dt { font-weight: 700; }
.factors dd { margin: 2px 0 0; color: var(--ink-muted); font-size: .95rem; }

/* =========================================================
   REVIEWS
   ========================================================= */
.rating { color: var(--ink-muted); font-weight: 600; display: inline-flex; align-items: center; gap: var(--s-2); }
.stars { color: #e0a800; letter-spacing: 2px; font-size: 1.1rem; }
.reviews { display: grid; gap: var(--s-5); }
@media (min-width: 900px) { .reviews { grid-template-columns: repeat(3, 1fr); } }
.review {
  margin: 0; background: #fff; border-radius: var(--radius-lg); padding: var(--s-6);
  border: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--s-4);
}
.review blockquote { margin: 0; flex: 1; }
.review blockquote p { font-size: 1.08rem; }
.review figcaption { display: flex; flex-direction: column; border-top: 1px solid var(--line); padding-top: var(--s-4); }
.review figcaption span { color: var(--ink-muted); font-size: .9rem; }

/* =========================================================
   QUOTE + CONTACT
   ========================================================= */
.quote { display: grid; gap: var(--s-7); align-items: start; }
@media (min-width: 1024px) { .quote { grid-template-columns: 1.35fr .9fr; gap: var(--s-8); } }

.form fieldset { border: 0; padding: 0; margin: 0 0 var(--s-5); min-width: 0; }
.form legend {
  font-family: var(--font-cond); font-weight: 600; text-transform: uppercase; letter-spacing: .12em;
  font-size: .9rem; color: var(--ink-muted); margin-bottom: var(--s-4); padding: 0;
}
.form__row { display: grid; gap: 0 var(--s-4); }
@media (min-width: 640px) {
  .form__row { grid-template-columns: 1fr 1fr; }
  .form__row--3 { grid-template-columns: 1.3fr 1fr 1fr; }
}
.field { margin-bottom: var(--s-4); display: flex; flex-direction: column; }
.field label { font-weight: 600; font-size: .95rem; margin-bottom: 6px; }
.req { color: var(--danger); }
.field input, .field select, .field textarea {
  font: inherit; font-size: 1rem; color: var(--ink);
  min-height: 48px; padding: 10px 14px;
  background: #fff; border: 1.5px solid #c9d2cc; border-radius: var(--radius-sm);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
  width: 100%;
}
.field textarea { resize: vertical; min-height: 120px; }
.field select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a5a6a' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 18px;
  padding-right: 40px;
}
.field input::placeholder, .field textarea::placeholder { color: #6b7a89; }
.quick-quote .field input:focus, .quick-quote .field select:focus { border-color: var(--lime); box-shadow: 0 0 0 3px rgba(166,226,46,.35); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--navy-600); box-shadow: 0 0 0 3px rgba(36,72,107,.2);
}
.field.has-error input, .field.has-error textarea { border-color: var(--danger); }
.field.has-error input:focus { box-shadow: 0 0 0 3px rgba(198,40,40,.18); }
.field__error { color: var(--danger); font-size: .88rem; font-weight: 600; margin: 6px 0 0; min-height: 0; }
.field__error:empty { display: none; }

.form__error-summary {
  border: 2px solid var(--danger); background: #fdecec; border-radius: var(--radius-sm);
  padding: var(--s-4); margin-bottom: var(--s-5);
}
.form__error-summary ul { list-style: disc; padding-left: var(--s-5); }
.form__error-summary a { color: var(--danger); font-weight: 600; }
.hp { position: absolute; left: -9999px; }

.form__submit { position: relative; }
.spinner {
  display: none; width: 20px; height: 20px; border-radius: 50%;
  border: 2.5px solid rgba(8,21,34,.25); border-top-color: var(--navy-900);
  animation: spin .8s linear infinite;
}
.form__submit.is-loading .spinner { display: inline-block; }
.form__submit:disabled { opacity: .7; cursor: progress; }
@keyframes spin { to { transform: rotate(360deg); } }
.form__status { margin-top: var(--s-4); font-weight: 600; }
.form__status.is-success { color: var(--success); background: #e9f5ea; padding: var(--s-4); border-radius: var(--radius-sm); }
.form__status.is-error { color: var(--danger); background: #fdecec; padding: var(--s-4); border-radius: var(--radius-sm); }

.contact-card {
  background: var(--navy-900); color: var(--on-dark); border-radius: var(--radius-lg);
  padding: var(--s-6); position: sticky; top: 100px;
}
.contact-card h3 { font-size: 1.5rem; font-weight: 600; margin-bottom: var(--s-5); }
.contact-list { display: grid; gap: var(--s-4); }
.contact-list li { display: flex; gap: var(--s-4); align-items: flex-start; }
.contact-list__icon {
  width: 44px; height: 44px; flex: none; border-radius: 12px; display: grid; place-items: center;
  background: rgba(166,226,46,.14); color: var(--lime);
}
.contact-list__label { display: block; font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; color: var(--on-dark-muted); font-family: var(--font-cond); font-weight: 600; }
.contact-list a { color: #fff; text-decoration: none; font-weight: 600; overflow-wrap: anywhere; }
.contact-list a:hover { color: var(--lime); }
.contact-card__ids {
  display: flex; gap: var(--s-5); margin: var(--s-5) 0; padding-block: var(--s-4);
  border-block: 1px solid rgba(255,255,255,.1); font-size: .95rem; color: var(--on-dark-muted);
}
.contact-card__ids strong { color: #fff; }
.map { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; background: var(--navy-800); }
.map iframe { width: 100%; height: 100%; border: 0; filter: grayscale(.2) contrast(1.05); }

/* =========================================================
   FOOTER
   ========================================================= */
.footer { background: var(--navy-950); color: var(--on-dark-muted); padding-top: var(--s-8); }
.footer__grid { display: grid; gap: var(--s-6); padding-bottom: var(--s-7); }
@media (min-width: 768px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.3fr; } }
.footer__brand img { width: 150px; margin-bottom: var(--s-4); }
.footer__brand p { max-width: 34ch; }
.footer h3 {
  color: #fff; font-family: var(--font-cond); text-transform: uppercase; letter-spacing: .14em;
  font-size: .95rem; margin-bottom: var(--s-4);
}
.footer__col ul { display: grid; gap: var(--s-1); }
.footer__col a { text-decoration: none; display: inline-flex; min-height: 32px; align-items: center; overflow-wrap: anywhere; }
.footer a:hover { color: var(--lime); }
.socials { display: flex; gap: var(--s-2); margin-top: var(--s-4); }
.socials a {
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.18); color: #fff;
  transition: background-color var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.socials a:hover { background: var(--lime); border-color: var(--lime); color: var(--navy-900); }
.socials svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.footer__bottom {
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); justify-content: space-between;
  padding-block: var(--s-5); border-top: 1px solid rgba(255,255,255,.08); font-size: .9rem;
}
.footer__bottom p { margin: 0; }
.footer__bottom p:last-child { display: flex; gap: var(--s-5); flex-wrap: wrap; }
.footer__bottom a { text-decoration: none; }

/* =========================================================
   HEADER ON PHONES/TABLETS: floating pill that hides on scroll-down
   ========================================================= */
.nav__logo-mark { display: none; }
@media (max-width: 1023px) {
  .topbar { display: none; }
  .site-header {
    padding: 10px 10px 0;
    transition: transform var(--dur) var(--ease-out);
  }
  /* No full-width bar, ever: the pill carries the surface. */
  .site-header.is-scrolled, .site-header.is-solid { background: transparent; box-shadow: none; backdrop-filter: none; }
  .site-header.is-hidden:not(:focus-within) { transform: translateY(calc(-100% - 12px)); }

  .nav__inner {
    position: relative; min-height: 52px;
    padding: 0 4px 0 18px;
    border-radius: 999px;
  }
  /* The glass lives on a pseudo-element: blur/filters on the pill itself
     would trap the fixed menu drawer inside it. */
  .nav__inner::before {
    content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
    background: rgba(8, 21, 34, .72);
    -webkit-backdrop-filter: saturate(150%) blur(14px);
            backdrop-filter: saturate(150%) blur(14px);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 8px 24px -12px rgba(0,0,0,.45);
  }
  .nav { position: relative; z-index: 0; }
  .nav__logo-full { display: none; }
  .nav__logo .nav__logo-mark { display: block; height: 32px; width: auto; }
  .nav__toggle { width: 44px; height: 44px; border-radius: 999px; }

  /* Content below the pill instead of under a 112px bar */
  :root { --header-h: 72px; }
  html { scroll-padding-top: 80px; }
}

/* =========================================================
   HEADER ON DESKTOP: a floating island
   Same glass pill as on phones, set off the top edge. A lime glow
   glides between menu links on hover (js/main.js), a small dot marks
   the section you're in, and the island tightens once you scroll.
   ========================================================= */
.topbar { display: none; }      /* DOT/MC live in the footer; phone sits in the island */
.nav__phone { display: none; }
@media (min-width: 1024px) {
  :root { --header-h: 96px; }
  html { scroll-padding-top: 104px; }
  .site-header { padding: 16px 24px 0; }
  .site-header.is-scrolled, .site-header.is-solid { background: transparent; box-shadow: none; backdrop-filter: none; }

  .nav__inner {
    position: relative; max-width: 1180px; min-height: 64px;
    padding: 0 8px 0 26px; gap: var(--s-4);
    border-radius: 999px;
    transition: min-height 320ms var(--ease-out);
    animation: islandIn 700ms var(--ease-out) both;
  }
  .nav__inner::before {
    content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
    background: rgba(8, 21, 34, .55);
    -webkit-backdrop-filter: saturate(150%) blur(14px);
            backdrop-filter: saturate(150%) blur(14px);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 10px 30px -16px rgba(0,0,0,.55);
    transition: background-color 320ms var(--ease-out);
  }
  .nav { position: relative; z-index: 0; }
  .site-header.is-scrolled .nav__inner { min-height: 56px; }
  .site-header.is-scrolled .nav__inner::before, .site-header.is-solid .nav__inner::before { background: rgba(8, 21, 34, .82); }

  .nav__logo-full { display: none; }
  .nav__logo .nav__logo-mark { display: block; height: 34px; width: auto; }

  /* Menu: the glow replaces the old underline */
  .nav__links { position: relative; margin-inline: auto; }
  .nav__links a:not(.btn)::after { display: none; }
  .nav__links a:not(.btn) { position: relative; z-index: 1; padding: 0 16px; color: rgba(255,255,255,.78); }
  .nav__links a:not(.btn):hover, .nav__links a.is-active { color: #fff; }
  .nav__links a.is-active::before {
    content: ""; position: absolute; left: 50%; bottom: 6px; width: 4px; height: 4px; margin-left: -2px;
    border-radius: 50%; background: var(--lime); box-shadow: 0 0 8px rgba(166,226,46,.8);
  }
  .nav__glow {
    position: absolute; top: 50%; left: 0; height: 36px; width: 0; margin-top: -18px;
    border-radius: 999px; pointer-events: none; opacity: 0;
    background: rgba(166,226,46,.14);
    box-shadow: inset 0 0 0 1px rgba(166,226,46,.35), 0 0 22px rgba(166,226,46,.22);
    transition: transform 320ms var(--ease-out), width 320ms var(--ease-out), opacity 200ms ease;
  }
  .nav__glow.is-on { opacity: 1; }

  .nav__phone {
    display: grid; place-items: center; width: 44px; height: 44px;
    border-radius: 50%; color: #fff; text-decoration: none;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
    transition: background-color 200ms ease, color 200ms ease, box-shadow 200ms ease;
  }
  .nav__phone:hover { background: var(--lime); color: var(--navy-900); box-shadow: inset 0 0 0 1px var(--lime); }
  .nav__cta { margin-left: 0; }
}
@media (max-width: 1023px) { .nav__glow { display: none; } }
@keyframes islandIn { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }

/* =========================================================
   SCREEN SIZE TUNING (desktop)
   ========================================================= */
/* Wide screens: show the whole 4:3 video frame instead of cropping it to
   fill the width (which zooms the truck in). The frame sits right at full
   height and its left edge melts into the navy behind the headline. */
@media (min-width: 1024px) and (min-aspect-ratio: 4/3) {
  .hero__video {
    position: absolute; top: 0; right: 0; height: 100%; width: auto;
    aspect-ratio: 4 / 3; max-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 38%);
            mask-image: linear-gradient(90deg, transparent 0%, #000 38%);
  }
  .hero__media {
    background:
      radial-gradient(70% 90% at 70% 40%, rgba(36,72,107,.55), transparent 70%),
      var(--navy-900);
  }
}

/* Short laptop screens (e.g. 1366×768): tighten the hero so the quote
   card never slides up under the header. */
@media (min-width: 1024px) and (max-height: 860px) {
  .hero { padding-top: calc(var(--header-h) + 8px); }
  .hero__grid { padding-bottom: var(--s-5); gap: var(--s-6); }
  .hero__title { font-size: clamp(2.6rem, 1.2rem + 3.4vw, 4rem); margin-bottom: var(--s-4); }
  .hero__lead { margin-bottom: var(--s-5); }
  .eyebrow--light { margin-bottom: var(--s-2); }
  .quick-quote { padding: var(--s-5); }
  .quick-quote__head p { margin-bottom: var(--s-4); }
  .quick-quote .field { margin-bottom: var(--s-3); }
  .quick-quote .field input, .quick-quote .field select { min-height: 44px; padding-block: 8px; }
  .quick-quote__alt { margin-top: var(--s-3); }
  .hero__trust { padding-block: var(--s-4); }
  .hero__trust-label { margin-bottom: var(--s-3); }
}

/* Big monitors: give content a little more room so it doesn't look lost. */
@media (min-width: 1800px) {
  .container { max-width: 1380px; }
  .nav__inner { max-width: 1320px; }
}

/* =========================================================
   TABLET (768–1023px): use the width instead of one long column
   ========================================================= */
@media (min-width: 640px) and (max-width: 1023px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .cards > :last-child { grid-column: 1 / -1; }
  .reviews { grid-template-columns: repeat(2, 1fr); }
  .reviews > :last-child { grid-column: 1 / -1; }
  .about__media { max-width: 560px; margin-inline: auto; width: 100%; }
  .partners__feature { max-width: 620px; margin-inline: auto; }
  .hero__lead { max-width: 60ch; }
}

/* =========================================================
   PHONE + TABLET OPTIMISATIONS
   ========================================================= */
.mobile-cta { display: none; }
@media (max-width: 1023px) {
  /* One clear hero: headline, two buttons, the truck behind. The full
     quote form is one tap away (hero button + action bar). */
  .quick-quote { display: none; }
  .hero__grid { padding-bottom: var(--s-6); }

  /* Sticky action bar */
  .mobile-cta {
    display: flex; gap: var(--s-2);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-header);
    padding: var(--s-2) var(--s-3) calc(var(--s-2) + env(safe-area-inset-bottom));
    background: rgba(8, 21, 34, .94);
    backdrop-filter: saturate(140%) blur(12px);
    box-shadow: 0 -1px 0 rgba(255,255,255,.08), 0 -10px 30px -12px rgba(0,0,0,.5);
    transform: translateY(110%);
    transition: transform var(--dur) var(--ease-out);
  }
  .mobile-cta.is-visible { transform: none; }
  .mobile-cta .btn { flex: 1; min-height: 48px; }
  .btn--call { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.35); }
  .btn--call:active { background: rgba(255,255,255,.08); }
  .footer { padding-bottom: 72px; }   /* room for the bar at the very end */

  /* Comfortable tap targets (44px) */
  .footer__col a, .footer__bottom a { min-height: 44px; display: inline-flex; align-items: center; }
  .footer__col ul { gap: 0; }
  .contact-list a { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (max-width: 767px) { .hero__actions .btn { flex: 1 1 auto; } }
.contact-list__label { font-size: .85rem; }
@media (max-width: 1023px) { .contact-card { position: static; } }

/* =========================================================
   LEGAL PAGES (terms.html, privacy.html)
   ========================================================= */
.site-header.is-solid { background: var(--navy-900); }

.legal-hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 140% at 85% 0%, var(--navy-700) 0%, var(--navy-900) 55%, var(--navy-950) 100%);
  color: var(--on-dark);
  padding: calc(var(--header-h) + var(--s-8)) 0 var(--s-8);
}
.legal-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, var(--lime), rgba(166,226,46,0));
}
.legal-hero__trail {
  position: absolute; right: -10%; top: 0; width: 70%; height: 100%; z-index: -1;
  fill: none; stroke: var(--lime); stroke-linecap: round; opacity: .35;
}
.breadcrumb { display: flex; gap: var(--s-2); font-size: .9rem; color: var(--on-dark-muted); margin-bottom: var(--s-5); }
.breadcrumb a { color: var(--on-dark-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--lime); }
.breadcrumb [aria-current] { color: #fff; }
.legal-hero h1 {
  font-size: clamp(2.4rem, 1.6rem + 3.2vw, 4rem); font-weight: 300; letter-spacing: -.02em;
  margin-bottom: var(--s-4);
}
.legal-hero h1 strong { font-weight: 600; color: var(--lime); }
.legal-hero__lead { color: #d6dee6; font-size: 1.125rem; max-width: 62ch; }
.legal-hero__meta {
  display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5);
}
.legal-hero__meta span {
  display: inline-flex; align-items: center; gap: 6px; font-size: .88rem; font-weight: 600;
  padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
}

.legal { display: grid; gap: var(--s-7); padding-block: var(--s-8) var(--s-9); }
@media (min-width: 1024px) { .legal { grid-template-columns: 260px minmax(0, 1fr); gap: var(--s-8); } }

.legal-toc { align-self: start; }
@media (min-width: 1024px) { .legal-toc { position: sticky; top: 100px; } }
.legal-toc h2 {
  font-family: var(--font-cond); text-transform: uppercase; letter-spacing: .14em;
  font-size: .9rem; color: var(--ink-muted); margin-bottom: var(--s-3);
}
.legal-toc ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line); }
.legal-toc a {
  display: block; padding: 7px 0 7px var(--s-4); margin-left: -2px; border-left: 2px solid transparent;
  text-decoration: none; color: var(--ink-muted); font-size: .95rem; line-height: 1.35;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.legal-toc a:hover { color: var(--ink); }
.legal-toc a.is-active { color: var(--ink); font-weight: 600; border-left-color: var(--lime-press); }
@media (max-width: 1023px) {
  .legal-toc { background: var(--bg-tint); border-radius: var(--radius); padding: var(--s-5); }
  .legal-toc ol { columns: 2; column-gap: var(--s-5); border-left: 0; }
  .legal-toc a { padding-left: 0; border-left: 0; margin: 0; break-inside: avoid; }
}
@media (max-width: 560px) { .legal-toc ol { columns: 1; } }

.legal-body { max-width: 760px; }
.legal-intro { font-size: 1.15rem; color: var(--ink); margin-bottom: var(--s-7); }
.legal-section {
  padding-block: var(--s-6); border-top: 1px solid var(--line);
  scroll-margin-top: 100px;
}
.legal-section:first-of-type { border-top: 0; padding-top: 0; }
.legal-section h2 {
  display: flex; align-items: center; gap: var(--s-3);
  font-size: clamp(1.35rem, 1.15rem + .7vw, 1.7rem); font-weight: 600; margin-bottom: var(--s-4);
}
.legal-num {
  flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  background: var(--navy-900); color: var(--lime); font-family: var(--font-cond); font-weight: 700; font-size: 1.1rem;
}
.legal-section h3 { font-size: 1.08rem; font-weight: 700; margin: var(--s-5) 0 var(--s-2); }
.legal-section p, .legal-section li { color: #34434f; }
.legal-section ul { display: grid; gap: var(--s-2); margin: var(--s-3) 0 var(--s-4); }
.legal-section ul li { position: relative; padding-left: var(--s-6); }
.legal-section ul li::before {
  content: ""; position: absolute; left: 6px; top: .62em; width: 8px; height: 8px; border-radius: 2px;
  background: var(--lime-press); transform: rotate(45deg);
}
.legal-section a { color: var(--lime-ink); font-weight: 600; text-underline-offset: 3px; }
.legal-clause { display: flex; gap: var(--s-3); }
.legal-clause > b { flex: none; min-width: 2.6em; color: var(--ink); font-variant-numeric: tabular-nums; }
.legal-note {
  background: var(--lime-soft); border-left: 4px solid var(--lime-press); border-radius: var(--radius-sm);
  padding: var(--s-4) var(--s-5); margin: var(--s-4) 0; color: var(--ink);
}

.legal-contact {
  margin-top: var(--s-7); background: var(--navy-900); color: var(--on-dark);
  border-radius: var(--radius-lg); padding: var(--s-6);
  display: grid; gap: var(--s-5); align-items: center;
}
@media (min-width: 768px) { .legal-contact { grid-template-columns: 1fr auto; } }
.legal-contact h2 { font-size: 1.5rem; font-weight: 600; margin-bottom: var(--s-2); }
.legal-contact p { color: var(--on-dark-muted); }
.legal-contact ul { display: grid; gap: var(--s-2); margin-top: var(--s-4); }
.legal-contact li { display: flex; gap: var(--s-3); align-items: center; }
.legal-contact li .icon { color: var(--lime); }
.legal-contact a:not(.btn) { color: #fff; text-decoration: none; font-weight: 600; overflow-wrap: anywhere; }
.legal-contact a:not(.btn):hover { color: var(--lime); }

.footer__bottom a[aria-current="page"] { color: var(--lime); }

/* =========================================================
   STATS: odometer digits, icons and a moving road line
   ========================================================= */
.stats { position: relative; overflow: hidden; }
.stats::after {
  content: ""; position: absolute; left: 0; bottom: 18px; height: 3px;
  width: calc(100% + 52px);
  background: repeating-linear-gradient(90deg, rgba(8,21,34,.22) 0 28px, transparent 28px 52px);
  animation: roadLine 1.8s linear infinite;
  pointer-events: none;
}
.stats.is-paused::after { animation-play-state: paused; }
@keyframes roadLine { to { transform: translateX(-52px); } }
.stat__icon {
  display: block; width: 28px; height: 28px; margin: 0 auto 10px;
  fill: none; stroke: rgba(8,21,34,.7); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  transition: transform 260ms var(--ease-out);
}
.odo { display: inline-flex; font-variant-numeric: tabular-nums; }
.odo__digit { display: inline-block; height: 1em; overflow: hidden; line-height: 1; }
.odo__reel { display: block; line-height: 1; will-change: transform; }
.odo__reel > span { display: block; height: 1em; line-height: 1; }
.odo__sep { display: inline-block; height: 1em; line-height: 1; }
@media (hover: hover) and (pointer: fine) {
  .stat:hover .stat__icon { transform: translateY(-3px); }
}

/* =========================================================
   MICRO-INTERACTIONS
   Small hover responses, only on things you can click or fill in,
   and only for real pointers (no sticky hovers on touch screens).
   ========================================================= */
.card__icon,
.contact-list__icon,
.socials a,
.footer__col a,
.legal-toc a,
.legal-contact li .icon {
  transition-property: background-color, color, border-color, transform;
  transition-duration: 240ms;
  transition-timing-function: var(--ease-out);
}
.map iframe { transition: filter 500ms var(--ease-out); }
.field input, .field select, .field textarea {
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

@media (hover: hover) and (pointer: fine) {
  /* Service cards already lift; the icon tile answers in brand lime. */
  .card:hover .card__icon { background: var(--lime); color: var(--navy-900); transform: rotate(-6deg) scale(1.05); }

  /* "Apply now" points up-right, so its arrow travels that way. */
  .careers__actions .btn--primary:hover .icon { transform: translate(2px, -2px); }

  /* Form fields: a quiet nudge before focus. */
  .field input:hover:not(:focus),
  .field select:hover:not(:focus),
  .field textarea:hover:not(:focus) { border-color: #93a39a; }

  /* Contact rows: the icon tile lights up with its link. */
  .contact-list li:has(a:hover) .contact-list__icon { background: var(--lime); color: var(--navy-900); transform: translateY(-2px); }

  /* Map wakes up to full colour. */
  .map:hover iframe { filter: none; }

  /* Footer: links slide a touch; social icons lift. */
  .footer__col a:hover { transform: translateX(3px); }
  .socials a:hover { transform: translateY(-2px); }

  /* Legal pages */
  .legal-toc a:hover { transform: translateX(3px); }
  .legal-contact li:has(a:hover) .icon { transform: scale(1.12); }
}

/* =========================================================
   Scroll reveal
   ========================================================= */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.reveal.is-visible { opacity: 1; transform: none; }

/* =========================================================
   Reduced motion
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .trail { display: none; }
  .marquee__track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; gap: var(--s-6); }
  .marquee__track li[aria-hidden="true"] { display: none; }
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .reveal { opacity: 1; transform: none; }
}

/* =========================================================
   INNER PAGES (services, careers, pay, partners, contact, 404)
   Built from the home page sections; these are the few extras.
   ========================================================= */
.section__more { margin-top: var(--s-6); text-align: center; }
.earn-card__more { margin-top: var(--s-5); }

.steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--s-5);
}
@media (min-width: 768px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.steps li {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: var(--s-6);
}
.section--tint .steps li { background: #fff; }
.steps .legal-num { margin-bottom: var(--s-4); }
.steps h3 { font-size: 1.2rem; font-weight: 600; margin-bottom: var(--s-2); }
.steps p { color: #34434f; }
.steps a { color: var(--lime-ink); font-weight: 600; text-underline-offset: 3px; }

.page-note {
  max-width: 760px; margin: 0 auto var(--s-8); text-align: center;
  font-size: .95rem; color: var(--ink-muted);
}
.page-cta { padding-block: var(--s-8) var(--s-9); }
.page-cta .legal-contact { margin-top: 0; }

.lost-links {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--s-4);
}
@media (min-width: 640px) { .lost-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lost-links a {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--s-5) var(--s-6); border: 1px solid var(--line); border-radius: var(--radius-lg);
  text-decoration: none; font-weight: 600; font-size: 1.1rem;
}
@media (hover: hover) and (pointer: fine) {
  .steps li { transition: transform 240ms var(--ease-out), box-shadow 240ms var(--ease-out); }
  .steps li:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -18px rgba(8,21,34,.35); }
  .lost-links a { transition: border-color 200ms ease, background-color 200ms ease; }
  .lost-links a:hover { border-color: var(--lime-press); background: var(--lime-soft); }
}