/* Silver Recruiting Services landing. The page talks to CDL-A drivers; carriers have their own section and form.
   Dark theme locked to the brand (logo lives on navy to electric blue).
   Layout rule: every section sits on the same 1180px container, heading centered on top, content full width under it.
   Glass (a web approximation of Apple's Liquid Glass, not an Apple-issued material) is used only where a surface
   floats over content: the nav, the driver application card in the hero, chips over photos and the carrier form.
   Everything else is flat with hairlines. Radius rule: panels 20px, inputs 14px, buttons and chips full pill. */

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --bg: #050b1f;
  --bg-2: #081430;
  --navy: #0b1b3f;
  --blue: #2f6bff;
  --blue-hi: #5b8cff;
  --silver: #d7dce2;
  --text: #eef1f5;
  --muted: #a3afc4;
  --faint: #8a97b0; /* 4.9:1 or better on every dark surface here */
  --line: rgb(255 255 255 / 0.12);
  --line-strong: rgb(255 255 255 / 0.22);
  --surface: rgb(255 255 255 / 0.035);
  --glass-bg: linear-gradient(135deg, rgb(255 255 255 / 0.12), rgb(255 255 255 / 0.03)), rgb(16 30 70 / 0.38);
  --glass-edge: rgb(255 255 255 / 0.18);
  --radius: 20px;
  --radius-in: 14px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --shadow: 0 24px 70px rgb(2 8 30 / 0.55);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; } /* anchors land below the fixed nav */
body {
  margin: 0;
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
  background:
    radial-gradient(1100px 700px at 90% 62%, rgb(47 107 255 / 0.10), transparent 65%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 55%, var(--bg) 100%);
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 700; line-height: 1.08; }
h2 { font-size: clamp(2rem, 3.3vw, 2.8rem); letter-spacing: -0.03em; max-width: 16ch; text-wrap: balance; }
h3 { font-size: 1.15rem; letter-spacing: -0.01em; line-height: 1.3; }
p { margin: 0; }
.container { width: min(1180px, 100% - 40px); margin-inline: auto; }
.section { padding-top: clamp(96px, 11vw, 150px); }
.sub { color: var(--muted); margin-top: 16px; max-width: 52ch; text-wrap: pretty; }
.kicker { color: var(--blue-hi); font-weight: 700; font-size: 0.95rem; margin-bottom: 10px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 100; background: var(--blue); padding: 10px 16px; border-radius: 999px; }
:focus-visible { outline: 2px solid var(--blue-hi); outline-offset: 3px; }
.text-link { color: var(--text); font-weight: 700; text-underline-offset: 4px; text-decoration-color: var(--blue-hi); }

/* ---------- glass (floating surfaces only) ---------- */
.glass {
  position: relative;
  isolation: isolate;
  background: var(--glass-bg);
  border: 1px solid var(--glass-edge);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  backdrop-filter: blur(22px) saturate(170%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.22), inset 0 -1px 0 rgb(255 255 255 / 0.05), var(--shadow);
}
.glass::before { /* specular highlight: light catching the top edge */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.10), transparent 38%);
  pointer-events: none;
}
@media (prefers-reduced-transparency: reduce) {
  .glass { background: #12234f; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  .glass { background: #0d1c44; border-color: rgb(255 255 255 / 0.5); }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 26px;
  border-radius: 999px;
  border: 1px solid transparent;
  font: inherit;
  font-weight: 700;
  font-size: 1rem;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: transform 160ms var(--ease), box-shadow 220ms var(--ease), background-color 220ms var(--ease);
}
.btn:active { transform: scale(0.97); transition-duration: 80ms; }
.btn-primary {
  color: #fff;
  background: linear-gradient(180deg, #4a80ff, #2259f0);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.3), 0 8px 24px rgb(47 107 255 / 0.28);
}
.btn-primary:hover { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.35), 0 12px 32px rgb(47 107 255 / 0.42); }
.btn-sm { min-height: 42px; padding: 0 18px; font-size: 0.92rem; }
.btn-ghost { background: rgb(255 255 255 / 0.06); border: 1px solid var(--line-strong); color: var(--text); }
.btn-ghost:hover { background: rgb(255 255 255 / 0.1); }
.btn-block { width: 100%; }
button[aria-busy="true"] { opacity: 0.7; pointer-events: none; }

.silver-text {
  /* gradient text is clipped to the text box; tight tracking pushes the last glyph past it, so give it room */
  padding-inline-end: 0.08em;
  background: linear-gradient(180deg, #ffffff 0%, #d7dce2 48%, #9aa2ad 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- nav ---------- */
.nav-wrap { position: fixed; inset: 14px 0 auto; z-index: 50; pointer-events: none; }
.nav {
  pointer-events: auto;
  width: min(1180px, 100% - 24px);
  margin-inline: auto;
  height: 64px;
  padding: 0 10px 0 22px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.nav-logo img { height: 32px; width: auto; }
.nav-links { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav-links a {
  display: block;
  padding: 9px 14px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 0.93rem;
  font-weight: 600;
  color: var(--muted);
  transition: color 200ms, background-color 200ms;
}
.nav-links a:hover { color: var(--text); background: rgb(255 255 255 / 0.07); }
.nav-links .nav-carriers { color: var(--text); box-shadow: inset 0 0 0 1px var(--line-strong); }
.nav-actions { display: flex; align-items: center; gap: 16px; }
.nav-phone { display: inline-flex; align-items: center; gap: 8px; color: var(--text); font-weight: 700; font-size: 0.95rem; text-decoration: none; white-space: nowrap; }
.nav-phone:hover { color: #fff; }

/* ---------- hero: switch and headline on the left, the quick form as a glass card on the right, trucks behind ---------- */
.hero {
  position: relative;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: 1fr auto;
  overflow: hidden;
  padding: 116px 0 32px;
}
.hero-media { position: absolute; inset: -6% 0 -6% 0; z-index: -2; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 66% 50%; }
/* wide screens: the trucks stand right of the words and come out from under the card, wheels at the stats line, so the
   headline sits on clean dark and the hero ends right after the stats (no tall empty band on big monitors) */
@media (min-width: 1024px) {
  .hero { min-height: min(100dvh, 920px); }
  .hero-media { inset: 0; }
  .hero-media img {
    position: absolute;
    right: 0;
    bottom: calc(54px - 6.4vw);
    width: min(100%, calc(50vw + 510px));
    height: auto;
    object-fit: initial;
    /* both open edges of the photo melt into the page: left (behind the words) and top (above the card) */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 34%), linear-gradient(180deg, transparent 0, #000 18%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent 0, #000 34%), linear-gradient(180deg, transparent 0, #000 18%);
    mask-composite: intersect;
  }
}
.hero-shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* dark behind the words (left half of the centered container), lighter where the glass card sits */
  background:
    linear-gradient(90deg, rgb(5 11 31 / 0.97) 0, rgb(5 11 31 / 0.9) calc(50% - 120px), rgb(5 11 31 / 0.35) calc(50% + 160px), rgb(5 11 31 / 0.2) 100%),
    linear-gradient(180deg, rgb(5 11 31 / 0.4) 0%, transparent 22%, transparent 60%, rgb(5 11 31 / 0.9) 88%, var(--bg) 100%);
}
/* top-aligned on purpose: the card changes height between steps, and only its bottom edge should move */
.hero-inner {
  align-self: start;
  padding-top: clamp(8px, 5vh, 56px);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: start;
  gap: clamp(32px, 5vw, 72px);
}
.hero-main { position: relative; display: grid; justify-items: start; gap: 26px; padding-top: clamp(16px, 4vh, 44px); }
.hero h1 { font-size: clamp(2.5rem, 4.3vw, 3.9rem); letter-spacing: -0.035em; line-height: 1.04; }
.hero h1 .line { display: block; }
.h1-kicker { display: block; margin-bottom: 14px; color: var(--blue-hi); font-size: 1rem; font-weight: 700; letter-spacing: 0; line-height: 1.3; }
.lead { font-size: clamp(1.05rem, 1.35vw, 1.2rem); color: #c3cde0; max-width: 38ch; }
.hero-promise { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-weight: 600; color: var(--text); }
.hero-promise li { position: relative; padding-left: 26px; }
.hero-promise li::before { /* thin check mark, same as the job cards */
  content: "";
  position: absolute;
  left: 2px;
  top: 0.5em;
  width: 10px;
  height: 5px;
  border-left: 2px solid var(--blue-hi);
  border-bottom: 2px solid var(--blue-hi);
  transform: rotate(-45deg);
}
.hero-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; color: var(--muted); }
.hero-links a { color: var(--text); font-weight: 700; text-underline-offset: 4px; text-decoration-color: var(--blue-hi); }

/* driver application card: step 1 contacts, step 2 questions one per screen, then the thank-you */
.quick-wrap { position: relative; width: min(440px, 100%); justify-self: end; }
.apply-card { padding: clamp(22px, 2.6vw, 32px); border-radius: 28px; }
.apply-card.glass { /* denser glass than the nav: it sits on bright white trucks and must stay readable */
  background: linear-gradient(135deg, rgb(255 255 255 / 0.10), rgb(255 255 255 / 0.02)), rgb(9 20 52 / 0.84);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  backdrop-filter: blur(28px) saturate(160%);
}
.quick { display: grid; gap: 12px; }
.quick-title { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; margin-bottom: 6px; }
.quick-field {
  display: grid;
  padding: 10px 18px;
  border-radius: var(--radius-in);
  background: rgb(5 11 31 / 0.5);
  border: 1px solid rgb(255 255 255 / 0.16);
  cursor: text;
  transition: border-color 200ms, box-shadow 200ms;
}
.quick-field:focus-within { border-color: var(--blue-hi); box-shadow: 0 0 0 4px rgb(47 107 255 / 0.25); }
.quick-field.is-invalid { border-color: #ff8a8a; }
.quick-label { font-size: 0.78rem; font-weight: 700; color: var(--silver); }
.quick .quick-field input { min-height: 0; height: 30px; padding: 0; border: 0; border-radius: 0; background: none; font-size: 1.05rem; }
.quick .quick-field input:focus { box-shadow: none; }
.quick .quick-field input::placeholder { color: var(--faint); }
.quick .btn { min-height: 56px; margin-top: 6px; font-size: 1.05rem; }
.quick-err { color: #ffadad; font-size: 0.9rem; }
.quick-err:empty { display: none; }
.quick-trust { color: var(--muted); font-size: 0.85rem; font-weight: 600; text-align: center; text-wrap: balance; }
.quick-trust a, .quick-consent a { color: inherit; text-underline-offset: 3px; }
.quick-consent { color: var(--muted); font-size: 0.72rem; line-height: 1.45; text-align: center; text-wrap: balance; }
/* hidden until the driver starts filling the form (main.js adds the classes), then it slides open under the button */
.quick.consent-later:not(.engaged) .consent-wrap { display: none; }
.quick.consent-later.engaged .consent-wrap { display: grid; animation: consent-open 0.35s ease both; }
.consent-wrap > .quick-consent { min-height: 0; overflow: hidden; }
@keyframes consent-open { from { grid-template-rows: 0fr; opacity: 0; } to { grid-template-rows: 1fr; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .quick.consent-later.engaged .consent-wrap { animation: none; } }
.quick-trust .pi { display: inline-block; width: 15px; height: 15px; margin-right: 6px; vertical-align: -2px; background: var(--muted); }

.wizard { display: grid; gap: 16px; }
.wiz-top { display: flex; align-items: center; }
/* Back in the bottom-left corner, Next in the bottom-right; on the last question only Back stays, under Send */
.wiz-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.wiz-back { min-height: 44px; padding: 0 22px; border-radius: 999px; border: 1px solid transparent; background: none; color: var(--silver); font: inherit; font-weight: 700; cursor: pointer; }
.wiz-back:hover { color: var(--text); background: rgb(255 255 255 / 0.06); }
.wiz-count { color: #c3cde0; font-size: 0.85rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.wiz-bar { height: 4px; border-radius: 4px; background: rgb(255 255 255 / 0.1); overflow: hidden; }
.wiz-bar span { display: block; height: 100%; width: 20%; border-radius: inherit; background: linear-gradient(90deg, #4a80ff, var(--blue-hi)); transition: width 450ms var(--ease); }
.wiz-step { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 16px; animation: wiz-in 420ms var(--ease) both; }
.wiz-step:focus { outline: none; }
.wiz-step > legend, .wiz-q { padding: 0; margin-bottom: 16px; font-size: 1.3rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; }
.wiz-q { display: block; margin-bottom: 0; }
.wiz-next { min-height: 44px; padding: 0 22px; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; color: var(--text); font: inherit; font-weight: 700; cursor: pointer; }
.wiz-next:hover { background: rgb(255 255 255 / 0.08); }
.chips.stack { flex-direction: column; }
.chips.stack .chip span { width: 100%; min-height: 54px; padding: 0 20px; border-radius: var(--radius-in); font-size: 1.02rem; }
.chips.stack .chip:hover span { border-color: rgb(255 255 255 / 0.35); }
@keyframes wiz-in { from { opacity: 0; transform: translateX(18px); } }
.apply-card .step2-note { padding: 10px 14px; font-size: 0.9rem; text-align: left; }
.apply-card .consent { font-size: 0.74rem; }
.apply-card .form-done { padding: 40px 6px; }

/* phone: country code picker + number. The native select sits invisibly over the "flag +1" label */
.phone-field { display: flex; align-items: stretch; gap: 8px; }
.phone-field .cc { /* .phone-field in front: beats the generic ".field label" padding reset */
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  padding: 0 30px 0 14px;
  border-radius: var(--radius-in);
  border: 1px solid rgb(255 255 255 / 0.2);
  background: rgb(5 11 31 / 0.55);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.cc::after { /* chevron */
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-right: 2px solid var(--silver);
  border-bottom: 2px solid var(--silver);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.cc select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; }
.cc:focus-within { border-color: var(--blue-hi); box-shadow: 0 0 0 4px rgb(47 107 255 / 0.25); }
.phone-field input { flex: 1; min-width: 0; }
/* inside the hero card the field box already has a border: the code sits inline, split by a hairline */
.quick .phone-field { gap: 12px; }
.quick .phone-field .cc { min-height: 30px; padding: 0 22px 0 0; border: 0; border-right: 1px solid var(--line); border-radius: 0; background: none; }
.quick .cc::after { right: 8px; }
.quick .cc:focus-within { box-shadow: none; }

.hero-foot { padding-top: 40px; }
.stats {
  list-style: none;
  margin: 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--line-strong);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
.stats li { display: grid; gap: 2px; align-content: start; }
.stats strong { font-size: clamp(1.35rem, 2.1vw, 1.8rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.stats li > span { color: var(--muted); font-size: 0.92rem; }

/* entrance: staggered rise, decelerating like a critically damped spring */
.rise { animation: rise 900ms var(--ease) both; animation-delay: calc(var(--i, 0) * 90ms + 120ms); }
@keyframes rise { from { opacity: 0; transform: translateY(22px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }

/* parallax: the trucks drift slower than the page (scroll-driven, no scroll listeners) */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero-media { animation: hero-parallax linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
  }
}
@keyframes hero-parallax { to { transform: translateY(12%) scale(1.05); } }

/* ---------- intro: brand S + letters, then the curtain lifts (CSS only, so it can never block the page) ---------- */
.intro {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 26px;
  background: radial-gradient(700px 500px at 50% 42%, #10285f 0%, var(--bg) 70%);
  clip-path: inset(0 0 0 0);
  animation: intro-out 450ms cubic-bezier(0.76, 0, 0.24, 1) 550ms both; /* gone after ~1 s: ad visitors are here for the form */
  pointer-events: none;
}
.intro img { width: 84px; height: auto; animation: intro-s 500ms var(--ease) both; }
.intro-word { display: flex; gap: 0.75em; padding-left: 0.75em; font-size: 0.82rem; font-weight: 600; color: var(--silver); }
.intro-word span { opacity: 0; animation: intro-letter 300ms ease-out both; animation-delay: calc(var(--k) * 40ms + 100ms); }
@keyframes intro-s { from { opacity: 0; transform: scale(0.86); filter: blur(10px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes intro-letter { to { opacity: 1; } }
@keyframes intro-out { to { clip-path: inset(0 0 100% 0); visibility: hidden; } }
.no-intro .intro { display: none; }
html:not(.no-intro) .rise { animation-delay: calc(var(--i, 0) * 90ms + 650ms); }

@media (prefers-reduced-motion: no-preference) {
  .hero-media img { animation: hero-zoom 1800ms var(--ease) both; }
  html:not(.no-intro) .hero-media img { animation-delay: 550ms; }
}
@keyframes hero-zoom { from { transform: scale(1.08); } }

/* ---------- section heads: centered, same container everywhere ---------- */
.section-head { position: relative; display: grid; justify-items: center; text-align: center; }
.section-head h2 { max-width: 18ch; }
.section-head .sub { margin-inline: auto; }

/* ---------- hand-drawn doodles: SVG strokes that draw themselves ---------- */
.scribble { font-family: "Caveat", "Bradley Hand", "Segoe Print", cursive; font-weight: 600; font-size: 1.6rem; line-height: 1; color: var(--silver); white-space: nowrap; }
.doodle svg, svg.doodle { overflow: visible; display: block; }
.doodle path { fill: none; stroke: var(--silver); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.doodle .dash { stroke-dasharray: 3 6; }
.doodle mask path { stroke: #fff; stroke-width: 8; }
.doodle .ink { stroke-dasharray: 1; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) {
  .js .reveal .ink, .js .reveal.doodle .ink { stroke-dashoffset: 1; transition: stroke-dashoffset 1100ms var(--ease); transition-delay: calc(var(--d, 0) * 70ms + 450ms); }
  .js .reveal .ink.head, .js .reveal.doodle .ink.head { transition-duration: 350ms; transition-delay: calc(var(--d, 0) * 70ms + 1350ms); }
  .js .reveal.in .ink { stroke-dashoffset: 0; }

  .doodle-hero .ink { animation: ink-draw 1100ms var(--ease) 1000ms both; }
  .doodle-hero .ink.head { animation-duration: 350ms; animation-delay: 1900ms; }
  .doodle-hero .scribble { animation: rise 700ms var(--ease) 900ms both; }
  html:not(.no-intro) .doodle-hero .ink { animation-delay: 1650ms; }
  html:not(.no-intro) .doodle-hero .ink.head { animation-delay: 2550ms; }
  html:not(.no-intro) .doodle-hero .scribble { animation-delay: 1550ms; }
}
@keyframes ink-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

.doodle-hero { position: absolute; right: -34px; bottom: 4px; display: flex; align-items: flex-end; gap: 2px; pointer-events: none; }
.doodle-hero .scribble { transform: rotate(-5deg); margin-bottom: 2px; }

/* ---------- steps (drivers and carriers): three in a row, hand-drawn arrows between them ---------- */
.steps {
  list-style: none;
  margin: 60px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 130px minmax(0, 1fr) 130px minmax(0, 1fr);
  align-items: start;
}
.steps-carrier { margin-top: 72px; }
.step { display: grid; justify-items: center; gap: 12px; text-align: center; }
.step-time { color: var(--blue-hi); font-weight: 700; font-size: 0.9rem; padding: 6px 14px; border: 1px solid rgb(91 140 255 / 0.4); border-radius: 999px; }
.step h3 { font-size: 1.5rem; letter-spacing: -0.02em; margin-top: 4px; }
.step p { color: var(--muted); max-width: 27ch; }
.step-arrow { display: grid; place-items: center; padding-top: 34px; }

/* ---------- why drivers apply through us: comparison table ---------- */
.compare { width: 100%; margin-top: 48px; border-collapse: separate; border-spacing: 0; }
.compare th, .compare td { padding: 20px 24px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--line); }
.compare thead th { font-weight: 700; color: var(--muted); }
.compare tbody th { width: 20%; color: var(--faint); font-weight: 600; font-size: 0.92rem; }
.compare .alone { width: 38%; color: var(--muted); }
.compare .us { width: 42%; background: rgb(47 107 255 / 0.12); color: var(--text); font-weight: 600; border-bottom-color: rgb(91 140 255 / 0.2); }
.compare thead .us { background: linear-gradient(180deg, #4a80ff, #2259f0); color: #fff; border-radius: 18px 18px 0 0; border-bottom-color: transparent; }
.compare tbody tr:last-child > * { border-bottom: 0; }
.compare tbody tr:last-child .us { border-radius: 0 0 18px 18px; }
.compare tbody td { position: relative; padding-left: 54px; }
.compare tbody .alone::before { content: ""; position: absolute; left: 26px; top: 50%; width: 12px; height: 2px; border-radius: 2px; background: var(--faint); }
.compare tbody .us::before { /* thin check mark */
  content: "";
  position: absolute;
  left: 27px;
  top: calc(50% - 5px);
  width: 10px;
  height: 5px;
  border-left: 2px solid var(--blue-hi);
  border-bottom: 2px solid var(--blue-hi);
  transform: rotate(-45deg);
}

/* ---------- reviews ---------- */
.reviews { margin-top: 44px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.review { margin: 0; padding: 28px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 22px; }
.review blockquote { margin: 0; font-size: 1.05rem; line-height: 1.6; color: #d6dcea; }
.review blockquote::before { content: "\201C"; display: block; height: 0.55em; font-size: 3rem; line-height: 1; font-weight: 700; color: var(--blue-hi); }
.review figcaption { margin-top: auto; display: flex; align-items: center; gap: 12px; }
.review-avatar { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: linear-gradient(180deg, #4a80ff, #2259f0); font-weight: 700; font-size: 0.9rem; }
.review-avatar img { width: 100%; height: 100%; object-fit: cover; }
.review figcaption strong { display: block; font-weight: 700; }
.review figcaption small { color: var(--muted); font-size: 0.85rem; }
.review.is-placeholder { border-style: dashed; opacity: 0.7; }


/* ---------- lower 48 dot map: words on the left, the map on the right ---------- */
.map-section { display: grid; grid-template-columns: minmax(0, 4.2fr) minmax(0, 7.8fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.map-copy { display: grid; justify-items: start; gap: 20px; }
.map-copy .sub { margin-top: 0; }
.map-stat { display: flex; align-items: center; gap: 16px; }
.map-stat strong { display: inline-block; padding: 0.06em 0.1em 0.04em 0; font-size: clamp(7rem, 14vw, 12rem); font-weight: 800; letter-spacing: -0.05em; line-height: 0.85; }
.map-stat span { color: var(--muted); font-size: 1.15rem; font-weight: 600; line-height: 1.35; }

.usmap { position: relative; margin: 0; }
.usmap-svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.usmap-dots circle { fill: rgb(215 220 226 / 0.26); stroke-width: 3.2; }
.usmap-dots circle.tw { fill: rgb(215 220 226 / 0.45); }
.usmap-dots circle.halo { fill: rgb(91 140 255 / 0.55); }
.route { fill: none; stroke: rgb(215 220 226 / 0.55); stroke-width: 2; stroke-dasharray: 5 7; stroke-linecap: round; }
.truck-glow { fill: rgb(91 140 255 / 0.35); }
.trailer { fill: #eef1f5; }
.cab { fill: var(--blue-hi); }
.stop-dot { fill: var(--bg); stroke: rgb(215 220 226 / 0.85); stroke-width: 2.5; transition: stroke 200ms; }
.hit { fill: transparent; }
.hub, .stop { cursor: pointer; outline: none; }
.hub-dot { fill: var(--blue-hi); stroke: #fff; stroke-width: 3; }
.hub-ring { fill: rgb(91 140 255 / 0.5); }
.stop.active .stop-dot, .stop:hover .stop-dot { stroke: var(--blue-hi); }
.hub:focus-visible .hub-dot, .stop:focus-visible .stop-dot { stroke: #ffd38a; }

@media (prefers-reduced-motion: no-preference) {
  /* dots fill in from east to west once the map is on screen, then a few keep twinkling */
  .js .usmap-dots circle { opacity: 0; transform: scale(0.2); transform-box: fill-box; transform-origin: center; }
  .js .usmap.on .usmap-dots circle { animation: dot-in 700ms var(--ease) both; animation-delay: calc(var(--d) * 1100ms); }
  .js .usmap.on .usmap-dots circle.tw { animation: dot-in 700ms var(--ease) both, twinkle 3.2s ease-in-out infinite; animation-delay: calc(var(--d) * 1100ms), calc(var(--t) + 1.4s); }
  .js .usmap.on .usmap-dots circle.halo { animation: dot-in 700ms var(--ease) both, halo 2.4s ease-in-out infinite; animation-delay: calc(var(--d) * 1100ms), 1.2s; }
  /* routes draw in after the dots, then the dashes keep flowing toward the destination */
  .js .route { opacity: 0; }
  .js .usmap.on .route { animation: route-in 600ms ease-out both, flow 1.6s linear infinite; animation-delay: calc(1200ms + var(--i) * 150ms), 0s; }
  /* trucks wait for the map to fill in; their own SVG animation fades them in and out along the route */
  .js .usmap .truck { visibility: hidden; }
  .js .usmap.on .truck { animation: show-late 0s linear 1.6s both; }
  .hub-ring { animation: hub-pulse 2.4s ease-out infinite; transform-box: fill-box; transform-origin: center; }
  /* after the fill-in: plain dots, only the twinkle and the halo keep animating */
  .js .usmap.done .usmap-dots circle { animation: none; opacity: 1; transform: none; }
  .js .usmap.done .usmap-dots circle.tw { animation: twinkle 3.2s ease-in-out var(--t) infinite; }
  .js .usmap.done .usmap-dots circle.halo { animation: halo 2.4s ease-in-out infinite; }
}
.usmap.paused * { animation-play-state: paused !important; }
@keyframes dot-in { to { opacity: 1; transform: none; } }
@keyframes twinkle { 50% { fill: rgb(91 140 255 / 0.95); } }
@keyframes halo { 50% { fill: rgb(91 140 255 / 0.9); } }
@keyframes route-in { to { opacity: 1; } }
@keyframes show-late { to { visibility: visible; } }
@keyframes flow { to { stroke-dashoffset: -24; } }
@keyframes hub-pulse { from { transform: scale(1); opacity: 0.7; } to { transform: scale(3.4); opacity: 0; } }

/* tooltip bubble, anchored above the mark it describes */
.map-tip {
  position: absolute;
  z-index: 2;
  display: grid;
  gap: 2px;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgb(9 20 52 / 0.82);
  border: 1px solid rgb(255 255 255 / 0.18);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 12px 30px rgb(2 8 30 / 0.5);
  white-space: nowrap;
  pointer-events: none;
  transform: translateY(calc(-100% - 16px));
  transition: left 450ms var(--ease), top 450ms var(--ease);
}
.map-tip strong { font-size: 0.95rem; }
.map-tip span { color: var(--muted); font-size: 0.82rem; font-weight: 600; }

/* ---------- job board ---------- */
.job-filters { margin-top: 40px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 200ms, border-color 200ms, color 200ms, transform 120ms;
}
.filter:active { transform: scale(0.97); }
.filter span { font-size: 0.8rem; color: var(--faint); font-variant-numeric: tabular-nums; }
.filter[aria-pressed="true"] { background: rgb(47 107 255 / 0.22); border-color: var(--blue-hi); color: #fff; }
.filter[aria-pressed="true"] span { color: #c9d6ff; }
.jobs-count { margin-top: 16px; text-align: center; color: var(--faint); font-size: 0.9rem; }
.jobs-count:empty { display: none; }
/* one card per offer; the cards always fill the container (2 offers = 2 wide cards, 6 offers = 2 rows of 3) */
.jobs { margin-top: 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 20px; }
.job {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  --pad-y: 28px;
  --pad-x: 28px;
  padding: var(--pad-y) var(--pad-x);
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  transition: border-color 300ms var(--ease), background-color 300ms var(--ease);
  animation: job-in 600ms var(--ease) both;
  animation-delay: calc(var(--n, 0) * 60ms);
}
@keyframes job-in { from { opacity: 0; transform: translateY(14px); } }
/* the carrier's truck on top of the card, its logo tile on the seam */
.job-media { position: relative; margin: calc(-1 * var(--pad-y)) calc(-1 * var(--pad-x)) 24px; }
.job-photo { aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius) var(--radius) 0 0; background: var(--navy); }
.job-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; transition: transform 1.2s var(--ease); }
.job:hover .job-photo img { transform: scale(1.04); }
.job-media .name-call { position: absolute; top: 14px; left: 14px; margin: 0; background: rgb(11 27 63 / 0.6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.job-badge { /* glass tile on the seam between photo and panel */
  position: absolute;
  left: var(--pad-x);
  bottom: -28px;
  width: 60px;
  height: 60px;
  border-radius: 17px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: rgb(9 20 52 / 0.7);
  border: 1px solid rgb(255 255 255 / 0.22);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.2), 0 10px 24px rgb(2 8 30 / 0.45);
}
.job-badge img { width: 46px; height: auto; }
.job-badge span { font-weight: 800; font-size: 1.1rem; letter-spacing: 0.02em; color: var(--silver); }
.job-media + .job-tags { margin-top: 12px; }
.job:hover { border-color: var(--line-strong); background: rgb(255 255 255 / 0.05); }
.job-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.job-title { display: grid; gap: 2px; margin-top: 4px; }
.tag { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); background: rgb(255 255 255 / 0.07); color: var(--silver); font-size: 0.75rem; font-weight: 700; }
.job-loc { color: var(--muted); font-size: 0.88rem; font-weight: 600; }
.job h3 { font-size: 1.3rem; letter-spacing: -0.02em; }
.job-rate { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin: 4px 0; line-height: 1; }
.job-rate small { color: var(--muted); font-size: 0.95rem; font-weight: 600; }
.job-rate strong { font-size: clamp(2.3rem, 3.2vw, 2.9rem); font-weight: 700; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.job-rate span { color: var(--muted); font-size: 0.95rem; font-weight: 600; }
.job-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; color: #d6dcea; font-size: 0.96rem; }
.job-facts li { position: relative; padding-left: 24px; }
.job-facts li::before { /* thin check mark */
  content: "";
  position: absolute;
  left: 2px;
  top: 0.55em;
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--blue-hi);
  border-bottom: 2px solid var(--blue-hi);
  transform: rotate(-45deg);
}
.job-req { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); color: var(--faint); font-size: 0.88rem; line-height: 1.5; }
.job .btn { margin-top: 6px; }
.job-more { align-self: center; padding: 10px 12px; color: var(--muted); font-size: 0.92rem; font-weight: 700; text-decoration: none; }
.job-more:hover { color: var(--text); }
.jobs-more { margin-top: 28px; text-align: center; color: var(--muted); }
.jobs-all { margin-top: 24px; text-align: center; }
.jobs-more a { color: var(--text); font-weight: 700; text-underline-offset: 4px; text-decoration-color: var(--blue-hi); }

.req { margin-top: clamp(80px, 9vw, 112px); display: grid; justify-items: center; text-align: center; }
.req h3 { font-size: clamp(1.6rem, 2.4vw, 2rem); letter-spacing: -0.03em; }
.req-list { list-style: none; margin: 30px 0 0; padding: 24px 0; width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.req-list li { display: grid; gap: 2px; padding: 4px 16px; }
.req-list li + li { border-left: 1px solid var(--line); }
.req-list strong { font-size: 1.2rem; font-weight: 700; }
.req-list span { color: var(--muted); }
.req .sub { margin-top: 22px; }

/* ---------- carriers: banner over the real yard photo ---------- */
.carriers {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid var(--line);
  padding: clamp(64px, 9vw, 120px) clamp(22px, 5vw, 64px);
  text-align: center;
}
.carriers-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.carriers::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgb(5 11 31 / 0.72), rgb(8 20 48 / 0.9)),
    linear-gradient(135deg, rgb(47 107 255 / 0.3), transparent 55%);
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .carriers-bg { animation: drift linear both; animation-timeline: view(); animation-range: cover; }
  }
}
@keyframes drift { from { transform: scale(1.08) translateY(-3%); } to { transform: scale(1.08) translateY(3%); } }
.carriers-copy { display: grid; justify-items: center; gap: 20px; max-width: 780px; margin-inline: auto; }
.carriers .kicker { margin-bottom: -6px; }
.carriers h2 { max-width: 18ch; }
.carriers-copy > p:not(.kicker) { color: #c3cde0; max-width: 50ch; }
.underlined { position: relative; white-space: nowrap; }
.doodle-line { position: absolute; left: -2%; width: 104%; bottom: -0.2em; height: 0.32em; pointer-events: none; }
.doodle-line path { stroke: var(--blue-hi); stroke-width: 3; }
.carriers-points { list-style: none; margin: 4px 0 8px; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.carriers-points li {
  display: flex;
  gap: 8px;
  align-items: baseline;
  padding: 11px 20px;
  border-radius: 999px;
  color: #c3cde0;
  background: rgb(255 255 255 / 0.08);
  border: 1px solid rgb(255 255 255 / 0.2);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18);
}
.carriers-points strong { color: #fff; font-weight: 700; }

/* ---------- forms: carrier form card, shared notes ---------- */
.form-block { margin-top: clamp(80px, 9vw, 112px); }
.form-title { font-size: clamp(1.6rem, 2.4vw, 2rem); letter-spacing: -0.03em; }
.form-card { margin-top: 44px; border-radius: 28px; padding: clamp(22px, 3.6vw, 48px); display: grid; gap: 28px; }
.step2-note {
  padding: 12px 18px;
  border-radius: var(--radius-in);
  background: rgb(47 107 255 / 0.14);
  border: 1px solid rgb(91 140 255 / 0.35);
  color: #dbe5ff;
  font-weight: 600;
  text-align: center;
}
/* the position picked on a job card: small label + Change on top, carrier, then rate and place */
.job-pick {
  display: grid;
  gap: 2px;
  padding: 12px 16px 14px;
  border-radius: var(--radius-in);
  background: rgb(47 107 255 / 0.12);
  border: 1px solid rgb(91 140 255 / 0.3);
}
.job-pick-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.job-pick-label { color: #9fb6ff; font-size: 0.78rem; font-weight: 700; }
.job-pick-change { min-height: 32px; padding: 0 2px; border: 0; background: none; color: var(--muted); font: inherit; font-size: 0.82rem; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.job-pick-change:hover { color: var(--text); }
.job-pick-name { font-size: 1.05rem; font-weight: 700; line-height: 1.3; }
.job-pick-meta { color: var(--muted); font-size: 0.88rem; font-weight: 600; }

.lead-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 32px; align-items: start; }
.form-foot, .form-status { grid-column: 1 / -1; }
.form-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: center; padding-top: 24px; border-top: 1px solid var(--line); }
.form-foot .btn { min-width: 240px; }
.form-note { color: var(--muted); }
.field { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.field label, .field legend { font-weight: 600; font-size: 0.95rem; color: var(--text); padding: 0; margin-bottom: 0; }
.field legend { margin-bottom: 8px; }
input[type="text"], input[type="tel"], input[type="email"], select {
  width: 100%;
  min-height: 52px;
  padding: 0 16px;
  border-radius: var(--radius-in);
  border: 1px solid rgb(255 255 255 / 0.2);
  background: rgb(5 11 31 / 0.55);
  color: var(--text);
  font: inherit;
  font-size: 1rem;
  transition: border-color 200ms, box-shadow 200ms;
}
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--silver) 50%), linear-gradient(135deg, var(--silver) 50%, transparent 50%); background-position: calc(100% - 22px) 23px, calc(100% - 16px) 23px; background-size: 6px 6px; background-repeat: no-repeat; }
input:focus, select:focus { outline: none; border-color: var(--blue-hi); box-shadow: 0 0 0 4px rgb(47 107 255 / 0.25); }
.field.is-invalid input, .field.is-invalid select { border-color: #ff8a8a; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chip span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid rgb(255 255 255 / 0.2);
  background: rgb(5 11 31 / 0.45);
  font-weight: 600;
  transition: background-color 200ms, border-color 200ms, transform 120ms;
}
.chip:active span { transform: scale(0.97); }
.chip input:checked + span { background: rgb(47 107 255 / 0.28); border-color: var(--blue-hi); color: #fff; }
.chip input:focus-visible + span { outline: 2px solid var(--blue-hi); outline-offset: 3px; }
/* when to call: three day chips share the row, then an exact hour in the driver's own time */
.call-when .chips { flex-wrap: nowrap; }
.call-when .chip { flex: 1; }
.call-when .chip span { width: 100%; justify-content: center; padding: 0 10px; }
.call-hour { display: grid; gap: 6px; margin-top: 10px; }
.call-zone { font-size: 0.82rem; color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.err { color: #ffadad; font-size: 0.86rem; }
.err:empty { display: none; }
.hint.warn { color: #ffd38a; font-size: 0.88rem; }
.consent { display: grid; grid-template-columns: 22px 1fr; gap: 12px; font-size: 0.8rem; line-height: 1.5; color: var(--muted); cursor: pointer; }
.consent input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--blue); }
.form-status { font-size: 0.9rem; color: var(--muted); text-align: center; }
.form-status:empty { display: none; }
.form-done { text-align: center; display: grid; gap: 10px; justify-items: center; padding: 30px 10px; animation: rise 600ms var(--ease) both; }
.form-done p { color: var(--muted); }
.done-mark { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(180deg, #4a80ff, #2259f0); position: relative; margin-bottom: 6px; }
.done-mark::after { content: ""; position: absolute; left: 19px; top: 18px; width: 18px; height: 10px; border-left: 3px solid #fff; border-bottom: 3px solid #fff; transform: rotate(-45deg); }

/* ---------- faq ---------- */
.faq { margin-top: 40px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 24px 44px 24px 0;
  font-weight: 700;
  font-size: 1.12rem;
  letter-spacing: -0.01em;
  position: relative;
  transition: color 200ms;
}
.faq summary:hover { color: #fff; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  translate: 0 -50%;
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--blue-hi);
  transition: rotate 300ms var(--ease);
}
.faq details[open] summary::after { rotate: 45deg; }
.faq details p { color: var(--muted); padding-bottom: 24px; max-width: 60ch; }

/* ---------- footer ---------- */
.footer { margin-top: clamp(96px, 11vw, 150px); border-top: 1px solid var(--line); padding: 40px 0 56px; }
.footer-top { display: grid; gap: 22px; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.footer-top img { height: 30px; width: auto; }
.contact { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.contact-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 18px 0 14px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 200ms, border-color 200ms;
}
.contact-link:hover { background: rgb(255 255 255 / 0.08); border-color: rgb(255 255 255 / 0.35); }
/* icons are masks tinted with one color: Phosphor for phone and email, Simple Icons (CC0) for the brands */
.pi { flex: none; width: 18px; height: 18px; background: var(--blue-hi); -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.pi-phone { --icon: url("https://cdn.jsdelivr.net/npm/@phosphor-icons/core@2.1.1/assets/regular/phone.svg"); }
.pi-lock { --icon: url("https://cdn.jsdelivr.net/npm/@phosphor-icons/core@2.1.1/assets/regular/lock-simple.svg"); }
.pi-envelope { --icon: url("https://cdn.jsdelivr.net/npm/@phosphor-icons/core@2.1.1/assets/regular/envelope-simple.svg"); }
.si-facebook { --icon: url("https://cdn.jsdelivr.net/npm/simple-icons@14.0.0/icons/facebook.svg"); }
.si-instagram { --icon: url("https://cdn.jsdelivr.net/npm/simple-icons@14.0.0/icons/instagram.svg"); }
.si-telegram { --icon: url("https://cdn.jsdelivr.net/npm/simple-icons@14.0.0/icons/telegram.svg"); }
.si-tiktok { --icon: url("https://cdn.jsdelivr.net/npm/simple-icons@14.0.0/icons/tiktok.svg"); }
.si-youtube { --icon: url("https://cdn.jsdelivr.net/npm/simple-icons@14.0.0/icons/youtube.svg"); }
.is-missing { opacity: 0.45; } /* only on localhost: a contact that is not filled in yet */
.footer-legal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; padding-top: 26px; }
.footer p { color: var(--faint); font-size: 0.85rem; }
.footer-links { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 22px; font-size: 0.88rem; color: var(--faint); }
.footer-links a { padding: 10px 0; color: var(--muted); }

/* ---------- sub pages: job pages, privacy, terms, 404 (built by 09_tools/build_srs_site.mjs) ---------- */
.page { padding-top: 132px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; color: var(--faint); font-size: 0.88rem; font-weight: 600; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--text); }
/* job page: photo banner, four key-fact tiles, details on the left and the apply card pinned on the right */
.job-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: 24px;
  min-height: 340px;
  display: flex;
  align-items: flex-end;
  padding: clamp(28px, 4vw, 48px);
  border-radius: 28px;
  border: 1px solid var(--line);
  background: var(--navy);
}
.job-hero-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 68%; }
.job-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgb(5 11 31 / 0.94) 0%, rgb(5 11 31 / 0.78) 45%, rgb(5 11 31 / 0.25) 100%),
    linear-gradient(0deg, rgb(5 11 31 / 0.6), transparent 60%);
}
.job-hero-copy { display: grid; justify-items: start; gap: 12px; max-width: 640px; }
.job-hero h1 { font-size: clamp(2rem, 3.8vw, 3.1rem); letter-spacing: -0.03em; max-width: 20ch; }
.job-where { color: #c3cde0; font-size: 1.1rem; font-weight: 600; }
.job-hero .job-rate { margin: 6px 0 0; }
.job-posted { color: var(--faint); font-size: 0.85rem; }
.job-highlights { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 14px; }
.job-highlights li { display: grid; gap: 4px; padding: 18px 20px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.job-highlights span { color: var(--muted); font-size: 0.85rem; font-weight: 600; }
.job-highlights strong { font-size: clamp(1.15rem, 1.6vw, 1.4rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; }
.job-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: clamp(28px, 4vw, 56px); align-items: start; margin-top: 48px; }
.job-main { display: grid; gap: 40px; }
.job-main section { display: grid; gap: 14px; align-content: start; justify-items: start; padding-top: 28px; border-top: 1px solid var(--line); }
.job-main section:first-child { padding-top: 0; border-top: 0; }
.job-main h2 { font-size: 1.4rem; letter-spacing: -0.02em; max-width: none; }
.job-main p { color: var(--muted); max-width: 60ch; }
.job-aside { position: sticky; top: 100px; }
/* /jobs/: every offer on the left (2 columns), the apply card pinned on the right */
.jobs-page-head { margin-top: 28px; text-align: center; }
.jobs-page-head h1 { font-size: clamp(2.1rem, 4vw, 3rem); letter-spacing: -0.03em; }
.jobs-page-head .sub { max-width: 620px; margin: 12px auto 0; }
.jobs-page .job-layout { margin-top: 40px; }
.jobs-page .job-filters { margin-top: 0; justify-content: flex-start; }
.jobs-page .jobs-count { text-align: left; }
.jobs-page .jobs { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.job-aside .apply-card { box-shadow: var(--shadow); }
.job-others { margin-top: 72px; padding-top: 40px; border-top: 1px solid var(--line); }
.job-others h2 { font-size: 1.5rem; letter-spacing: -0.02em; }
.job-others ul { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 14px; }
.job-others a { display: grid; gap: 4px; padding: 18px 22px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); text-decoration: none; transition: border-color 250ms, background-color 250ms; }
.job-others a:hover { border-color: var(--line-strong); background: rgb(255 255 255 / 0.05); }
.job-others span { color: var(--muted); font-size: 0.92rem; }
.how-list { margin: 0; padding-left: 20px; display: grid; gap: 10px; color: var(--muted); }
.how-list strong { color: var(--text); }
.legal { max-width: 760px; }
.legal h1 { font-size: clamp(2.1rem, 4vw, 3rem); letter-spacing: -0.03em; margin-top: 8px; }
.legal h2 { font-size: 1.3rem; letter-spacing: -0.02em; max-width: none; margin-top: 36px; }
.legal p, .legal li { color: var(--muted); }
.legal p, .legal ul { margin-top: 12px; }
.legal ul { padding-left: 20px; display: grid; gap: 8px; }
.legal a { color: var(--text); text-underline-offset: 4px; text-decoration-color: var(--blue-hi); }
.legal-date { color: var(--faint); font-size: 0.9rem; }
.notfound { text-align: left; }
.notfound .btn { margin-top: 12px; }

/* ---------- scroll reveal ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 800ms var(--ease), transform 900ms var(--ease); transition-delay: calc(var(--d, 0) * 70ms); }
  .js .reveal.in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .intro { display: none; }
  .rise, .form-done, .job, .wiz-step, .hub-ring, .route { animation: none; }
  * { transition-duration: 0.01ms !important; }
}

/* ---------- responsive ---------- */
@media (max-width: 1199px) {
  .doodle-hero { display: none; }
}
@media (max-width: 1023px) {
  .nav-links { display: none; }
  .hero-inner { grid-template-columns: minmax(0, 1fr); align-self: start; padding-top: 0; }
  .hero-main { padding-top: 0; }
  .quick-wrap { justify-self: stretch; width: 100%; max-width: 560px; }
  .hero-shade { background: linear-gradient(180deg, rgb(5 11 31 / 0.75) 0%, rgb(5 11 31 / 0.88) 50%, var(--bg) 100%); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
  .steps { grid-template-columns: minmax(0, 1fr); row-gap: 4px; justify-items: center; }
  .step-arrow { padding-top: 0; height: 110px; }
  .step-arrow svg { transform: rotate(90deg); }
  .reviews { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .map-section { grid-template-columns: minmax(0, 1fr); }
  .map-copy { justify-items: center; text-align: center; }
  .map-copy h2 { margin-inline: auto; }
}
@media (max-width: 860px) {
  .req-list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
  .req-list li:nth-child(3) { border-left: 0; }
  .lead-form { grid-template-columns: minmax(0, 1fr); }
  .form-foot { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .form-foot .btn { width: 100%; }
  .footer-legal { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .job-layout { grid-template-columns: minmax(0, 1fr); }
  .job-aside { position: static; order: -1; }
  .jobs-page .job-aside { order: 0; } /* on phones the list comes first; Apply now scrolls down to the card */
  .jobs-page .job-filters { flex-wrap: nowrap; overflow-x: auto; margin-inline: -16px; padding: 2px 16px; scrollbar-width: none; } /* one swipeable row instead of 4 */
  .jobs-page .job-filters::-webkit-scrollbar { display: none; }
  .jobs-page .filter { flex: none; }
  .job-highlights { grid-template-columns: repeat(min(var(--n, 4), 2), minmax(0, 1fr)); }
  .job-highlights li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .container { width: min(1180px, 100% - 32px); }
  .nav { height: 58px; padding: 0 8px 0 16px; }
  .page { padding-top: 104px; }
  .job-hero { min-height: 300px; padding: 24px 20px; border-radius: 24px; }
  .job-highlights li { padding: 14px 16px; }
  .h1-kicker { font-size: 0.9rem; margin-bottom: 10px; }
  .nav-logo img { height: 28px; }

  /* phone hero: words and the form first on a dark background, the trucks right under them */
  .hero { display: flex; flex-direction: column; min-height: 0; padding: 92px 0 24px; }
  .hero-inner { order: 1; gap: 22px; }
  /* the two links go under the form so the button stays in the first screen */
  .hero-main { display: contents; }
  .hero h1 { order: 1; }
  .lead { order: 2; }
  .quick-wrap { order: 3; }
  .hero-promise { order: 4; }
  .hero-links { order: 5; }
  .hero-media {
    position: relative;
    inset: auto;
    order: 2;
    height: 240px;
    margin-top: 4px;
    animation: none;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 24%, #000 72%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 24%, #000 72%, transparent 100%);
  }
  .hero-media img { object-position: 50% 45%; }
  .hero-shade { display: none; }
  .hero-foot { order: 3; padding-top: 4px; }
  .hero h1 { font-size: clamp(2.05rem, 9vw, 2.7rem); }
  .apply-card { padding: 20px; border-radius: 24px; }
  .quick-title { font-size: 1.2rem; }
  .nav-phone .contact-text { display: none; }
  .nav-phone { width: 42px; height: 42px; justify-content: center; border-radius: 50%; border: 1px solid var(--line-strong); }
  .nav-actions { gap: 8px; }
  .stats strong { font-size: 1.3rem; }
  .stats li > span { font-size: 0.85rem; }

  .compare thead { display: none; }
  .compare, .compare tbody, .compare tr { display: block; width: 100%; }
  .compare tr { display: grid; gap: 8px; padding: 18px 0; border-bottom: 1px solid var(--line); }
  .compare tbody tr:last-child { border-bottom: 0; }
  .compare tbody th, .compare tbody td { display: flex; flex-direction: column; width: auto; padding: 0; border: 0; }
  .compare tbody th { color: var(--text); font-size: 1.05rem; font-weight: 700; }
  .compare tbody td, .compare tbody .alone, .compare tbody .us { width: auto; padding: 10px 14px 10px 42px; border-radius: 14px; }
  .compare tbody td::after { content: attr(data-label); order: -1; font-size: 0.75rem; font-weight: 700; color: var(--faint); }
  .compare tbody .us::after { color: #9fb6ff; }
  .compare tbody .alone::before { left: 16px; }
  .compare tbody .us::before { left: 17px; }
  .compare tbody tr:last-child .us { border-radius: 14px; }

  .reviews { grid-template-columns: minmax(0, 1fr); }
  .hub-dot, .hub-ring { r: 13px; } /* the map is scaled down ~3x on a phone */
  .hit { r: 44px; } /* finger-sized hit areas */
  .hub-dot { stroke-width: 4; }
  .stop-dot { r: 9px; stroke-width: 4; }
  .truck-shape { transform: scale(1.9); }
  .route { stroke-width: 3.5; }
  .job { --pad-y: 24px; --pad-x: 20px; }
  .req-list { grid-template-columns: minmax(0, 1fr); padding: 8px 0; }
  .req-list li, .req-list li + li { border-left: 0; padding: 14px 0; }
  .req-list li + li { border-top: 1px solid var(--line); }
  .carriers-points { width: 100%; }
  .carriers-points li { width: 100%; flex-direction: column; align-items: center; gap: 0; border-radius: 18px; }
}

/* confidential carrier: the name is given on the recruiter's call */
.name-call { display: inline-flex; align-items: center; gap: 6px; width: fit-content; margin-top: 8px; padding: 4px 11px 4px 9px; border-radius: 999px; background: rgb(47 107 255 / 0.12); border: 1px solid rgb(91 140 255 / 0.3); color: #9fb6ff; font-size: 0.78rem; font-weight: 700; line-height: 1.3; }
.name-call .pi { width: 14px; height: 14px; background: currentColor; }
.job-hero .name-call { margin-top: 10px; font-size: 0.85rem; background: rgb(11 27 63 / 0.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

/* bot trap: a field people never see; Drive Link drops any application that fills it */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }