/* VONEX TRANSPORT — "Clear Lane". See DESIGN.md. */

:root{
  --ink:#1b1e21; --ink-soft:#5c6469; --paper:#fafaf8; --panel:#f1f2f0;
  --line:rgba(20,24,28,.12); --blue:#2c6cc4; --blue-bright:#3f82db; --blue-deep:#1f4a7a;
  --white:#fff;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Public Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0; font-family:'Outfit',system-ui,sans-serif; font-weight:600; letter-spacing:-.015em;}
p{margin:0;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
svg{display:block;}
.mono{font-family:'Overpass Mono',ui-monospace,monospace;}
.wrap{max-width:1200px; margin:0 auto; padding:0 40px;}
.wrap--narrow{max-width:820px; margin:0 auto; padding:0 40px;}
.tight{padding:64px 0 110px;}
.sr-only{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;}
.btn-dark{background:var(--ink); color:#fff;}
.btn-dark:hover{background:#000;}
.skip-link{position:absolute; left:-999px; top:0; background:var(--ink); color:#fff; padding:12px 20px; border-radius:0 0 8px 0; z-index:200;}
.skip-link:focus{left:0;}

/* ---------- NAV (solid at all times — Clear Lane has no full-bleed dark
   hero photo behind it to crossfade from, so one persistent light bar
   replaces the old transparent-over-photo/is-scrolled state pair). ---------- */
.nav{position:fixed; top:0; left:0; right:0; z-index:60; padding:12px 0; background:rgba(250,250,248,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); transition:padding .25s;}
/* Three-zone layout: left links | centered logo | right links + Log In */
.nav-inner{max-width:1200px; margin:0 auto; padding:0 40px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; column-gap:24px;}
.nav-logo{grid-column:2; justify-self:center; display:flex; align-items:center; height:30px;}
.nav-logo img{height:30px;}
/* Homepage only: the wordmark also appears in the hero animation, so the
   nav mark shrinks to just the icon (see DESIGN.md, "The Hero" homepage
   exception — reinstated 2026-09-14 at the founder's explicit direction
   after a critique had flagged and reverted it for nav-brand consistency). */
.nav-logo--mark{height:60px;}
.nav-logo--mark img{height:60px; width:auto;}
.nav-links-left{grid-column:1; justify-self:start; display:flex; gap:32px; font-size:15.5px; color:var(--ink-soft);}
.nav-links-right{grid-column:3; justify-self:end; display:flex; align-items:center; gap:28px;}
.nav-plain-right{display:flex; gap:32px; font-size:15.5px; color:var(--ink-soft);}
.nav-links-left a:hover, .nav-plain-right a:hover{color:var(--ink);}
.nav-links-left a[aria-current="page"], .nav-plain-right a[aria-current="page"]{font-weight:600; color:var(--ink);}

/* Shippers / Carriers dropdown */
.nav-drop{position:relative;}
.nav-drop-trigger{display:inline-flex; align-items:center; gap:6px;}
.nav-drop-trigger .caret{width:8px; height:8px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg) translateY(-2px); opacity:.65; transition:transform .15s;}
.nav-drop-menu{position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(4px); margin-top:14px; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:0 16px 40px rgba(20,23,27,.14); padding:8px; min-width:200px; opacity:0; visibility:hidden; transition:opacity .15s,transform .15s,visibility .15s;}
.nav-drop:hover .nav-drop-menu, .nav-drop:focus-within .nav-drop-menu{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);}
.nav-drop:hover .caret, .nav-drop:focus-within .caret{transform:rotate(225deg) translateY(-1px);}
.nav-drop-menu a{display:block; padding:10px 14px; border-radius:5px; font-size:14.5px; color:var(--ink-soft); white-space:nowrap;}
.nav-drop-menu a:hover{background:var(--panel); color:var(--ink);}
.nav-toggle{display:none; grid-column:3; justify-self:end; background:none; border:none; cursor:pointer; padding:8px; flex-direction:column; gap:5px;}
.nav-toggle span{display:block; width:22px; height:2px; background:var(--ink); transition:transform .25s cubic-bezier(.16,1,.3,1), opacity .15s;}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.nav-mobile{display:none; flex-direction:column; background:var(--paper); border-bottom:1px solid var(--line); padding:8px 24px 20px; position:fixed; top:93px; left:0; right:0; bottom:0; z-index:59; overflow-y:auto;}
.nav-mobile a{padding:12px 0; font-size:17px; border-bottom:1px solid var(--line); color:var(--ink);}
.nav-mobile .nav-mobile-sub{display:flex; flex-direction:column; padding-left:18px;}
.nav-mobile .nav-mobile-sub a{display:block; font-size:15px; color:var(--ink-soft); border-bottom:1px solid var(--line);}
.nav-mobile.is-open{display:flex;}
@media(max-width:860px){
  .nav-inner{display:flex; justify-content:space-between; padding:16px 24px;}
  .nav-links-left, .nav-plain-right{display:none;}
  .nav-logo{grid-column:auto; justify-self:auto;}
  .nav-links-right{grid-column:auto; justify-self:auto;}
  .nav-toggle{display:flex; grid-column:auto; justify-self:auto;}
  .nav-logo--mark, .nav-logo--mark img{height:36px;}
}

/* ---------- BUTTONS ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:16px 32px; border-radius:999px; font-weight:600; font-size:16px; border:1.5px solid transparent; cursor:pointer; transition:background .15s,border-color .15s,color .15s;}
.btn:focus-visible{outline:2px solid var(--blue); outline-offset:2px;}
.nav-links-left a:focus-visible, .nav-plain-right a:focus-visible, .nav-drop-menu a:focus-visible, .nav-mobile a:focus-visible{outline:2px solid var(--blue); outline-offset:2px;}
.btn-primary{background:var(--blue); color:#fff;}
.btn-primary:hover{background:var(--blue-deep);}
.btn-ghost{border-color:var(--ink); color:var(--ink); background:transparent;}
.btn-ghost:hover{background:var(--ink); color:#fff;}

/* ---------- HERO: Clear Lane asymmetric split (copy left, real photo
   right in a contained rounded panel) — replaces the old full-bleed
   photo-with-scrim treatment. Nav is fixed and always solid now, so the
   hero just needs enough top padding to clear it, not a transparent
   overlay trick. ---------- */
.hero{padding:96px 0 48px;}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;}
.hero-status{display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; color:var(--blue); margin-bottom:18px;}
.hero h1{font-size:clamp(36px,4.6vw,60px); line-height:1.05; color:var(--ink); max-width:14ch; letter-spacing:-.02em;}
.hero-sub{margin-top:20px; font-size:18px; line-height:1.55; color:var(--ink-soft); max-width:46ch;}
.hero-sub a{color:var(--ink); font-weight:600; border-bottom:1px solid var(--line);}
.hero-rotator{display:inline-block; font-weight:600; color:var(--ink); transition:opacity .15s ease;}
.hero-rotator.is-fading{opacity:0;}
@media(prefers-reduced-motion:reduce){ .hero-rotator{transition:none;} }
.hero-actions{display:flex; gap:14px; margin-top:30px; flex-wrap:wrap;}
.hero-note{margin-top:24px; font-size:14.5px; color:var(--ink-soft); max-width:46ch;}
.hero-note a{color:var(--ink); font-weight:600; border-bottom:1px solid var(--line);}
.hero-visual{border-radius:20px; overflow:hidden; aspect-ratio:4/3.3;}
.hero-visual img{width:100%; height:100%; object-fit:cover;}
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-visual{order:-1; aspect-ratio:16/10;}
}
@media(max-width:700px){ .hero{padding:108px 0 40px;} .hero h1{max-width:none;} }
/* Short-viewport rule: on a common ~768px-tall laptop, the hero-visual's
   own tall aspect ratio (sized for particle scatter room) was still
   eating the vertical budget the nav/hero padding trim reclaimed, so the
   services strip below stayed clipped by a couple pixels. Only targets
   desktop/tablet widths — phones already get their own hero treatment
   above regardless of height. */
@media(max-height:820px) and (min-width:701px){
  .hero{padding-bottom:24px;}
  .hero-visual{aspect-ratio:4/2.8;}
}

/* Homepage hero visual, logo variant: the wordmark assembled from a live
   particle field instead of a photo (2026-09 addendum — see DESIGN.md,
   "The Hero"). Sized like the photo panel it replaces; the extra vertical
   room around the 4.6:1 wordmark is deliberate — the particles need space
   to scatter into on brush/click. */
.hero-visual--logo{position:relative; isolation:isolate; background:transparent;}
.hero-visual--logo:before{content:'';position:absolute;inset:8% -10%;z-index:0;background:radial-gradient(ellipse at center,rgba(44,108,196,.12),transparent 65%);pointer-events:none;}
.hero-visual--logo canvas{position:relative; z-index:1; display:block; width:100%; height:100%; touch-action:pan-y; cursor:pointer;}
.hero-visual--logo .hero-logo-fallback{position:absolute; z-index:1; left:6%; top:50%; width:88%; height:auto; transform:translateY(-50%);}
.hero-visual--logo.is-ready .hero-logo-fallback{visibility:hidden;}

/* ---------- SECTION HEADS ---------- */
.section{padding:100px 0;}
.section, .tight, .close{scroll-margin-top:100px;}
.section-head{max-width:640px; margin-bottom:56px;}
.section-head h2{font-size:clamp(26px,3vw,34px); line-height:1.2;}
.section-head p{margin-top:14px; font-size:16.5px; color:var(--ink-soft); line-height:1.55;}

/* ---------- THE ROUTE (process) ---------- */
.route-line{position:absolute; left:63px; top:6px; bottom:6px; width:2px; background:var(--line);}
.route-steps{position:relative; display:flex; flex-direction:column;}
.route-step{display:grid; grid-template-columns:48px 1fr; column-gap:24px; padding:26px 0; border-bottom:1px solid var(--line);
  opacity:0; transform:translateY(24px); transition:opacity .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1);}
.route-step:first-child{padding-top:0;}
.route-step:last-child{border-bottom:none;}
/* Break the 7-item Shippers service list into two visual chunks (4 + 3)
   via spacing alone, no added label, so no single group exceeds ~4 items. */
.route-steps .route-step:nth-child(5){margin-top:20px;}
.route-step.is-visible{opacity:1; transform:translateY(0);}
.route-marker{width:48px; height:48px; border-radius:50%; background:var(--paper); border:1.5px solid var(--blue); color:var(--blue);
  display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:600; flex-shrink:0; position:relative; z-index:1;}
.route-body h3{font-size:19px; margin-bottom:6px;}
.route-body p{color:var(--ink-soft); font-size:15.5px; max-width:56ch;}
@media(prefers-reduced-motion:reduce){ .route-step{opacity:1; transform:none; transition:none;} }

/* ---------- SERVICE TABS (bigger, more present photography) ---------- */
.services{background:var(--panel);}

/* ---------- SERVICES STRIP (homepage only, directly under the hero —
   made text-only 2026-09-14; briefly had a photo/two-photo panel per
   tab, and briefly lived at the bottom of the page before both were
   reverted same day). A compact tab strip; click a service to swap the
   shared panel's description. Only one open at a time; the first
   service is expanded by default. ---------- */
.services-strip{padding-top:32px; padding-bottom:60px;}
.strip-tabs{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:40px;}
.strip-tab{padding:11px 20px; border:1px solid var(--line); border-radius:999px; font-size:15px; font-weight:600; color:var(--ink-soft); background:var(--paper); cursor:pointer; transition:background .15s ease, color .15s ease, border-color .15s ease;}
.strip-tab:hover{border-color:var(--blue); color:var(--ink);}
.strip-tab.is-active{background:var(--ink); color:#fff; border-color:var(--ink);}
.strip-panel-desc{font-size:18px; line-height:1.6; color:var(--ink-soft); max-width:52ch; opacity:1; transition:opacity .15s ease;}
.strip-panel-desc.is-fading{opacity:0;}

/* ---------- PITCH BAND (homepage stats + CTA, its own section — see
   DESIGN.md homepage note). ---------- */
.pitch-band{padding-top:60px;}
.pitch-cta{display:flex; gap:14px; margin-top:40px; flex-wrap:wrap;}

/* ---------- CONTACT BAND (homepage only: real photography grounding the
   "one dedicated contact" claim — added 2026-09-14 after a critique found
   no human-presence element anywhere on the page). ---------- */
.contact-band{padding-top:0;}
.contact-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:center;}
.contact-photo{border-radius:16px; overflow:hidden; aspect-ratio:4/3.2;}
.contact-photo img{width:100%; height:100%; object-fit:cover;}
.contact-kicker{color:var(--blue); font-size:14px; font-weight:600; margin-bottom:14px;}
.contact-copy h2{font-size:clamp(24px,2.6vw,36px); line-height:1.08; letter-spacing:-.015em; margin-bottom:14px;}
.contact-copy p:not(.contact-kicker){font-size:17px; line-height:1.6; color:var(--ink-soft); max-width:46ch;}
@media(max-width:900px){
  .contact-grid{grid-template-columns:1fr;}
  .contact-photo{order:-1; aspect-ratio:16/10;}
}

/* ---------- STATED PLAINLY (transparency block: real numbers) ---------- */
.plain-item{padding:36px 32px; border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  opacity:0; transform:translateY(24px); transition:opacity .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1);}
.plain-item:nth-child(2n){border-right:none;}
.plain-item:nth-last-child(-n+2){border-bottom:none;}
.plain-item.is-visible{opacity:1; transform:translateY(0);}
.plain-item:nth-child(1){transition-delay:0s;}
.plain-item:nth-child(2){transition-delay:.07s;}
.plain-item:nth-child(3){transition-delay:.14s;}
.plain-item:nth-child(4){transition-delay:.21s;}
@media(prefers-reduced-motion:reduce){ .plain-item{opacity:1; transform:none; transition:none;} }
.plain-item .mono{display:block; font-size:21px; font-weight:600; color:var(--ink); margin-bottom:6px;}
.plain-item span{display:block; font-size:13.5px; color:var(--ink-soft);}
.plain-link{display:block; font-size:13.5px; color:var(--blue); border-bottom:1px solid rgba(44,108,196,.35); width:max-content;}
.plain-link:hover{color:var(--blue-bright); border-bottom-color:var(--blue-bright);}

/* ---------- CLOSE CTA ---------- */
.close{padding:100px 0; text-align:center;}
.close h2{font-size:clamp(28px,3.4vw,42px); line-height:1.15; max-width:16ch; margin:0 auto;}
.close p{margin-top:16px; font-size:16.5px; color:var(--ink-soft); max-width:44ch; margin-left:auto; margin-right:auto;}
.close-actions{display:flex; gap:14px; margin-top:28px; flex-wrap:wrap; justify-content:center;}

/* ---------- FOOTER (dark, bookends the hero/moment) ---------- */
footer{background:var(--ink); padding:64px 0;}
.footer-inner{display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:24px;}
.footer-inner img{height:24px; margin-bottom:14px;}
.footer-links{display:flex; gap:22px; flex-wrap:wrap; font-size:14.5px; color:rgba(255,255,255,.55);}
.footer-links a:hover{color:#fff;}
.footer-legal{font-size:13px; color:rgba(255,255,255,.4); margin-top:10px;}
.footer-legal .mono{color:rgba(255,255,255,.4);}
.footer-right{text-align:right; font-size:15px; color:rgba(255,255,255,.85);}
.footer-right a{font-weight:600; color:#fff;}
.footer-right a:nth-child(3){font-weight:400; color:rgba(255,255,255,.7);}
@media(max-width:600px){ .footer-inner{flex-direction:column;} .footer-right{text-align:left;} }

/* ---------- PAGE HEADER (inner pages: Our Story, Contact, applications, Privacy) ---------- */
.page-header{padding:150px 0 64px; border-bottom:1px solid var(--line);}
.page-header .kicker{color:var(--blue); font-size:14px; font-weight:600; margin-bottom:14px;}
.page-header h1{font-size:clamp(32px,4.4vw,52px); line-height:1.08; max-width:18ch;}
.page-header p{margin-top:18px; font-size:17.5px; color:var(--ink-soft); max-width:52ch; line-height:1.5;}
.page-header-actions{display:flex; gap:14px; margin-top:28px; flex-wrap:wrap;}
@media(max-width:700px){ .page-header{padding:120px 0 48px;} }

/* ---------- PAGE HERO (Shippers, Carriers: same split pattern as the
   homepage hero, at a slightly smaller scale — homepage hero classes
   reused, just wrapped in .page-hero for the size overrides below). ---------- */
.page-hero{padding:120px 0 72px;}
.page-hero h1{font-size:clamp(30px,3.8vw,48px); max-width:16ch;}
.page-hero .hero-visual{aspect-ratio:4/3.6;}
@media(max-width:700px){ .page-hero{padding:104px 0 56px;} }

/* ---------- TEAM (Our Story "Meet the team") ---------- */
.team-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:24px; max-width:560px; margin:0 auto 32px;}
.team-grid--solo{grid-template-columns:1fr; max-width:260px;}
.team-grid:last-child{margin-bottom:0;}
.team-card{border:1px solid var(--line); border-radius:16px; padding:32px 24px; text-align:center;}
.team-avatar{width:84px; height:84px; border-radius:50%; background:var(--panel); color:var(--ink-soft); display:flex; align-items:center; justify-content:center; margin:0 auto 18px;}
.team-avatar svg{width:38px; height:38px;}
.team-name{font-size:17px; font-weight:600;}
.team-title{margin-top:4px; font-size:13px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.05em; font-family:'Overpass Mono',monospace;}
@media(max-width:560px){ .team-grid{grid-template-columns:1fr; max-width:260px;} }

/* ---------- FLEET (Shippers trailer-type grid) ---------- */
.fleet-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.fleet-card{border:1px solid var(--line); border-radius:16px; padding:26px;}
.fleet-card .mono{color:var(--blue); font-size:12.5px; letter-spacing:.03em; display:block; margin-bottom:12px;}
.fleet-card h3{font-size:17px; margin-bottom:8px;}
.fleet-card p{color:var(--ink-soft); font-size:14.5px;}
@media(max-width:860px){ .fleet-grid{grid-template-columns:1fr 1fr;} }
@media(max-width:560px){
  .fleet-grid{grid-template-columns:1fr;}
  /* At 1 column this becomes a flat 6-item list stacked right under the
     7-item service list above it; break it into two chunks of 3 via
     spacing alone so no single group reads as more than ~4 items. */
  .fleet-grid .fleet-card:nth-child(4){margin-top:20px;}
}

/* ---------- FAQ (native details/summary, no JS required) ---------- */
.faq-list{max-width:760px;}
.faq-item{border-top:1px solid var(--line); padding:22px 0;}
.faq-item:last-child{border-bottom:1px solid var(--line);}
.faq-item summary{cursor:pointer; font-weight:600; font-size:16.5px; display:flex; justify-content:space-between; align-items:center; list-style:none; gap:16px;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-icon{width:20px; height:20px; color:var(--ink-soft); flex-shrink:0; transition:transform .2s;}
.faq-item[open] .faq-icon{transform:rotate(45deg);}
.faq-item p{color:var(--ink-soft); margin:14px 0 0; font-size:15.5px; max-width:64ch;}

/* ---------- SIMPLE FORMS (Contact page) ---------- */
.contact-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:36px; align-items:start;}
.form-card{background:var(--panel); border-radius:16px; padding:36px; border:1px solid var(--line);}
.form-card h2{font-size:22px; margin-bottom:8px;}
.form-note{color:var(--ink-soft); font-size:15px; margin:0 0 24px;}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.field-row--3{grid-template-columns:1fr 1fr 1fr;} /* the existing .field-row mobile rule below already collapses this to one column */
.field{margin-bottom:18px;}
.field label{display:block; font-size:13px; font-weight:600; margin-bottom:6px; color:var(--ink);}
.field:has(:required) label::after{content:" *"; color:var(--blue);}
.field--group[data-picker-required] legend::after{content:" *"; color:var(--blue);}
.form-required-hint{color:var(--ink-soft); font-size:13px; margin:0 0 20px;}
.field input, .field select, .field textarea{width:100%; padding:13px 16px; border:1px solid var(--line); border-radius:12px; font:inherit; font-size:15px; background:#fff; color:var(--ink);}
.field input:focus, .field select:focus, .field textarea:focus{outline:2px solid var(--blue); outline-offset:1px; border-color:var(--blue);}
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea{border-color:#c0392b;}
.field-error{color:#c0392b; font-size:13px; margin:6px 0 0;}
.hp-field{position:absolute; left:-9999px;}
.contact-info{display:flex; flex-direction:column; gap:20px;}
.contact-info-item{padding:22px; border:1px solid var(--line); border-radius:14px;}
.contact-info-item span{display:block; color:var(--ink-soft); font-size:13px; margin-bottom:4px;}
.contact-info-item a, .contact-info-item p{font-weight:600; font-size:16.5px;}
.btn-spinner{display:inline-block; width:14px; height:14px; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; margin-right:8px; vertical-align:-2px; animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.btn-block{display:block; width:100%; text-align:center;}
@media(max-width:860px){ .contact-grid{grid-template-columns:minmax(0,1fr);} }
@media(max-width:560px){ .field-row{grid-template-columns:minmax(0,1fr);} }

/* ---------- WIZARD (Carrier / Credit application forms) ---------- */
.wizard{max-width:760px; margin:0 auto; background:var(--panel); border-radius:16px; padding:40px; position:relative;}
.wizard[hidden]{display:none;}
.draft-restore-banner{display:flex; align-items:center; justify-content:space-between; gap:16px; background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:14px 18px; margin-bottom:28px; font-size:14px; color:var(--ink-soft);}
.draft-restore-discard{flex:none; background:none; border:none; padding:0; font:inherit; font-weight:600; color:var(--blue); cursor:pointer; text-decoration:underline; text-underline-offset:2px;}
.draft-restore-discard:hover{color:var(--blue-deep);}
.wizard-progress{margin-bottom:36px;}
.wizard-progress-track{height:2px; background:var(--line); border-radius:2px; margin-bottom:20px; position:relative;}
.wizard-progress-bar{position:absolute; left:0; top:0; height:2px; background:var(--blue); width:100%; transform-origin:left; transition:transform .3s; border-radius:2px;}
.wizard-steps{display:flex; justify-content:space-between; list-style:none; margin:0; padding:0;}
.wizard-steps li{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-soft); cursor:default;}
.wizard-steps li.is-active{color:var(--ink); font-weight:600;}
.wizard-steps li.is-done{cursor:pointer; color:var(--ink);}
.wizard-step-num{width:24px; height:24px; border-radius:50%; border:1.5px solid var(--line); display:flex; align-items:center; justify-content:center; font-family:'Overpass Mono',monospace; font-size:12px; flex-shrink:0; background:#fff;}
.wizard-steps li.is-active .wizard-step-num{border-color:var(--blue); color:var(--blue);}
.wizard-steps li.is-done .wizard-step-num{background:var(--blue); border-color:var(--blue); color:#fff;}
.wizard-step-label{display:none;}
.wizard-step-current-mobile{margin:10px 0 0; font-family:'Overpass Mono',monospace; font-size:13px; color:var(--ink-soft);}
@media(min-width:640px){ .wizard-step-label{display:inline;} .wizard-step-current-mobile{display:none;} }
.wizard-panel{display:none;}
.wizard-panel.is-active{display:block;}
.wizard-panel h2{font-size:22px; margin:0 0 24px;}
.wizard-subhead{font-size:13px; font-weight:600; margin:24px 0 4px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.04em;}
.wizard-review-note{color:var(--ink-soft); font-size:14px; margin:0 0 16px;}
/* A single-row, 3-up stat strip (e.g. Carriers' Payment Terms) — .plain-item's own
   nth-child border rules assume the 2-column grid it was designed for, so a row like
   this needs its own border logic rather than an inline column-count override. */
.stat-row{display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--line); border-radius:14px; overflow:hidden;}
.stat-row .plain-item{border-right:1px solid var(--line); border-bottom:none;}
.stat-row .plain-item:last-child{border-right:none;}
@media(max-width:700px){
  .stat-row{grid-template-columns:1fr;}
  .stat-row .plain-item{border-right:none; border-bottom:1px solid var(--line);}
  .stat-row .plain-item:last-child{border-bottom:none;}
}
.prose h2{font-size:22px; margin:40px 0 14px;}
.prose h2:first-child{margin-top:0;}
.prose p{font-size:16.5px; color:var(--ink-soft); line-height:1.65; margin:0 0 20px;}
.prose p:last-child{margin-bottom:0;}
.prose strong{color:var(--ink);}
.prose a{color:var(--ink); font-weight:600;}
.prose a.underline{border-bottom:1px solid var(--line);}
.prose-photo{margin:0 0 36px; border-radius:16px; overflow:hidden;}
.prose-photo img{display:block; width:100%; height:360px; object-fit:cover;}
@media(max-width:640px){ .prose-photo img{height:220px;} }
.wizard-nav{display:flex; justify-content:space-between; align-items:center; margin-top:32px; gap:12px;}
.wizard.shake{animation:shake .4s;}
@keyframes shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(3px)}30%,50%,70%{transform:translateX(-5px)}40%,60%{transform:translateX(5px)}}
.field--group{border:0; margin:0; padding:0;}
.field--group legend{font-size:13px; font-weight:600; margin-bottom:10px; padding:0;}
.picker-subgroup-label{font-family:'Overpass Mono',monospace; color:var(--blue); font-size:12.5px; letter-spacing:.03em; text-transform:uppercase; margin:0 0 8px;}
.picker-subgroup + .picker-subgroup-label{margin-top:18px;}
.picker-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px;}
.picker-card{position:relative; display:flex; align-items:center; justify-content:center; gap:6px; border:1px solid var(--line); border-radius:14px; padding:14px 10px; cursor:pointer; background:#fff; font-size:14px; text-align:center;}
.picker-card input{position:absolute; opacity:0;}
.picker-card:focus-within{outline:2px solid var(--blue); outline-offset:2px;}
.picker-check{display:none; color:var(--blue);}
.picker-card.is-checked{border-color:var(--blue); background:rgba(44,108,196,.06);}
.picker-card.is-checked .picker-check{display:inline;}
@media(max-width:600px){ .picker-grid{grid-template-columns:1fr 1fr;} }
.dropzone{border:1.5px dashed var(--line); border-radius:16px; padding:24px; text-align:center; cursor:pointer; background:#fff;}
.dropzone.is-dragover{border-color:var(--blue); background:rgba(44,108,196,.06);}
.dropzone.has-file .dropzone-inner{display:none;}
.dropzone-icon{display:block; font-size:18px; margin-bottom:8px; color:var(--ink-soft);}
.dropzone-hint{color:var(--ink-soft); font-size:12px;}
.dropzone-file{display:flex; justify-content:space-between; align-items:center;}
.dropzone-filename{font-size:14px;}
.dropzone-remove{background:none; border:none; font-size:20px; color:var(--ink-soft); cursor:pointer;}
.review-summary{display:grid; grid-template-columns:1fr; gap:0; margin-bottom:24px;}
.review-summary dt{font-family:'Overpass Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); margin-top:14px;}
.review-summary dd{margin:2px 0 0; font-size:15px; padding-bottom:10px; border-bottom:1px solid var(--line);}
.check-line{display:flex; gap:10px; align-items:flex-start; font-size:14px; color:var(--ink-soft); cursor:pointer;}
.trust-line{color:var(--blue); font-size:12.5px; font-weight:600; letter-spacing:.02em; margin:0 0 12px;}
.terms-copy{color:var(--ink-soft); font-size:13px; margin:0 0 20px;}
.sig-pad-wrap{border:1px solid var(--line); border-radius:14px; background:#fff; position:relative;}
.sig-pad{width:100%; height:140px; display:block; cursor:crosshair; touch-action:none;}
.sig-clear{position:absolute; top:8px; right:8px; background:var(--panel); border:none; border-radius:8px; padding:6px 12px; font-size:12px; cursor:pointer;}
.sig-type-label{display:block; font-size:13px; color:var(--ink-soft); margin:10px 0 6px;}
.wizard-success{max-width:520px; margin:0 auto; text-align:center; background:var(--panel); border-radius:16px; padding:50px 30px;}
.wizard-success--compact{padding:30px 10px;}
.wizard-success--compact h2{font-size:19px;}
.wizard-success-mark{width:52px; height:52px; border-radius:50%; background:var(--blue); color:#fff; display:flex; align-items:center; justify-content:center; font-size:22px; margin:0 auto 20px;}
.wizard-submit-error{color:#c0392b; font-size:14px; text-align:center; margin-top:14px;}
.quick-link{margin-top:8px;}
.quick-link a{font-weight:600;}

[hidden]{display:none !important;}

/* ==========================================================================
   APPLE-INSPIRED SYSTEM — rolling out site-wide, page by page.
   Bigger type, full-bleed alternating light/dark bands, borderless
   spacious layout, pill controls. Reuses the site's existing photography,
   palette, and Overpass/Overpass Mono type family rather than importing a
   new one — the shift is scale and restraint, not a new material.

   Global shell (nav, footer, .btn radius/size) lives in its normal place
   above and already applies everywhere — chrome doesn't need to wait for
   a page's content to be rebuilt. Page-body rules below stay scoped under
   .clear-lane (set on <body>) until each page is rolled out in turn;
   Shippers and Carriers carry it today. Rollout order: nav/footer/tokens
   (done) -> homepage -> Our Story -> Contact/Login -> Privacy (kept
   restrained; it's a Read page, not Persuade) -> DESIGN.md rewritten from
   the finished result.
   ========================================================================== */

.clear-lane{background:#fff;}

/* Section rhythm: much more air, much bigger heads. */
.clear-lane .section{padding:168px 0;}
.clear-lane .tight{padding:96px 0 168px;}
.clear-lane .section-head{max-width:820px; margin-bottom:80px;}
.clear-lane .section-head h2{font-size:clamp(34px,4.4vw,58px); line-height:1.04; letter-spacing:-.02em;}
.clear-lane .section-head p{font-size:19px; margin-top:18px; max-width:56ch;}
@media(max-width:700px){
  .clear-lane .section{padding:100px 0;}
  .clear-lane .tight{padding:72px 0 100px;}
  .clear-lane .section-head{margin-bottom:56px;}
}


/* Statement list: replaces a bordered card grid with a spacious, borderless
   editorial list — big index numeral, a big line, one line of support copy. */
.statement-list{display:flex; flex-direction:column;}
.statement-item{display:grid; grid-template-columns:110px 1fr; gap:32px; padding:56px 0; border-top:1px solid var(--line);
  opacity:0; transform:translateY(28px); transition:opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);}
.statement-list > .statement-item:last-child{border-bottom:1px solid var(--line);}
.statement-item.is-visible{opacity:1; transform:translateY(0);}
.statement-num{font-family:'Overpass Mono',monospace; font-size:16px; color:var(--blue); padding-top:10px;}
.statement-item h3{font-size:clamp(24px,2.6vw,36px); line-height:1.08; letter-spacing:-.015em; max-width:16ch;}
.statement-item p{margin-top:16px; color:var(--ink-soft); font-size:18px; line-height:1.5; max-width:52ch;}
@media(max-width:700px){
  .statement-item{grid-template-columns:1fr; gap:12px; padding:40px 0;}
  .statement-num{padding-top:0;}
}
@media(prefers-reduced-motion:reduce){ .statement-item{opacity:1; transform:none; transition:none;} }

/* Full-bleed dark band: one dramatic break in the page's rhythm, echoing
   the footer's dark register elsewhere on the site. */
.band-dark{background:var(--ink); color:#fff;}
.band-dark .section-head h2{color:#fff;}
.band-dark .section-head p{color:rgba(255,255,255,.66);}
.band-dark .statement-item{border-color:rgba(255,255,255,.14);}
.band-dark .statement-item p{color:rgba(255,255,255,.66);}
.band-dark .statement-num{color:var(--blue-bright);}
.band-dark .fleet-card{border-color:rgba(255,255,255,.16);}
.band-dark .fleet-card p{color:rgba(255,255,255,.66);}
.band-dark .fleet-card .mono{color:var(--blue-bright);}
.band-dark .plain-item{border-color:rgba(255,255,255,.16) !important;}
.band-dark .plain-item .mono{color:#fff;}
.band-dark .plain-item span{color:rgba(255,255,255,.66);}
.band-dark h2, .band-dark .close h2{color:#fff;}
.band-dark h3{color:#fff;}
.band-dark p, .band-dark .close p{color:rgba(255,255,255,.66);}
.band-dark .btn-ghost{border-color:rgba(255,255,255,.7); color:#fff;}
.band-dark .btn-ghost:hover{background:#fff; color:var(--ink);}

/* Fleet cards, borderless: quiet grid lines instead of boxed cells. */
.clear-lane .fleet-grid{gap:1px; background:var(--line); border:none;}
.clear-lane .fleet-card{border:none; background:var(--paper); padding:36px 30px;}
.clear-lane .fleet-card h3{font-size:19px;}
.clear-lane .fleet-card p{font-size:15.5px;}
.clear-lane.band-dark .fleet-grid, .band-dark .fleet-grid{background:rgba(255,255,255,.14);}
.band-dark .fleet-card{background:var(--ink);}

/* Payment terms (Carriers), borderless in the dark band. */
.band-dark .stat-row{border-color:rgba(255,255,255,.16); background:rgba(255,255,255,.14);}
.band-dark .stat-row .plain-item{background:var(--ink);}

/* Forms: no boxed panel, the form breathes directly on the page. */
.clear-lane .form-card{background:none; border:none; border-radius:0; padding:0; max-width:560px;}
.clear-lane .contact-grid{gap:72px;}
.clear-lane .field{margin-bottom:22px;}
.clear-lane .field-row{gap:20px;}
.clear-lane .field input, .clear-lane .field select, .clear-lane .field textarea{padding:16px 18px; border-radius:12px; font-size:16px;}
.clear-lane .field label{font-size:13.5px;}
.clear-lane .contact-info{gap:0;}
.clear-lane .contact-info-item{border:none; border-top:1px solid var(--line); background:none; border-radius:0; padding:20px 0;}
.clear-lane .contact-info-item:first-child{border-top:none; padding-top:0;}
.clear-lane .wizard{background:none; border:none; padding:0; max-width:640px; margin:0 auto;}
.clear-lane .wizard-progress{margin-bottom:52px;}
.clear-lane .wizard-panel h2{font-size:clamp(24px,2.8vw,32px); letter-spacing:-.01em;}

/* FAQ: bigger type, same structure. */
.clear-lane .faq-item summary{font-size:19px;}
.clear-lane .faq-item p{font-size:16.5px; max-width:56ch;}

/* Close band: a decisive, full-bleed final beat. */
.clear-lane .close{padding:180px 0;}
.clear-lane .close h2{font-size:clamp(32px,4.4vw,54px); max-width:18ch;}
.clear-lane .close p{font-size:18px; max-width:52ch;}
@media(max-width:700px){ .clear-lane .close{padding:100px 0;} }

/* Stated Plainly stats: modest bump to match the bigger scale elsewhere,
   short of the full statement-list treatment since this is a dense,
   data-forward strip, not a features narrative. */
.clear-lane .plain-item{padding:44px 36px;}
.clear-lane .plain-item .mono{font-size:24px;}
.clear-lane .plain-item span{font-size:14.5px;}

/* Page header (Our Story today; Contact/Login join when they're rolled
   out — Privacy stays on the smaller, restrained base version). */
.clear-lane .page-header{padding:190px 0 96px;}
.clear-lane .page-header .kicker{font-size:15px;}
.clear-lane .page-header h1{font-size:clamp(38px,5.6vw,74px); max-width:20ch; letter-spacing:-.02em;}
.clear-lane .page-header p{font-size:19px; max-width:56ch;}
@media(max-width:700px){ .clear-lane .page-header{padding:130px 0 64px;} }

/* Our Story's prose passage: a notch bigger and looser for a longer read
   at this scale, plus a taller lead photo. */
.clear-lane .prose p{font-size:18px; line-height:1.7; margin-bottom:24px;}
.clear-lane .prose-photo img{height:440px;}
@media(max-width:640px){ .clear-lane .prose-photo img{height:260px;} }

/* Team cards: stay as cards (portraits are a different content type than
   a features list) but a size bump to match. */
.clear-lane .team-card{padding:40px 28px;}
.clear-lane .team-avatar{width:100px; height:100px;}
.clear-lane .team-avatar svg{width:44px; height:44px;}
.clear-lane .team-name{font-size:19px;}
.clear-lane .team-title{font-size:13.5px;}

/* ---------- READ MODE (Privacy today; any future comprehension-first
   page) — a light touch, not the .clear-lane marketing scale. This
   page's job is to be read and trusted, not to persuade, so it keeps
   modest type and generous-but-not-dramatic spacing. ---------- */
.read-mode .page-header{padding:170px 0 72px;}
.read-mode .page-header h1{font-size:clamp(34px,4.8vw,58px);}
.read-mode .page-header p{font-size:18px;}
.read-mode .section{padding:96px 0;}
@media(max-width:700px){ .read-mode .page-header{padding:120px 0 48px;} }

/* ==========================================================================
   SCROLL MOTION — site-wide. Two signature scroll-driven pieces (hero
   parallax; the Route's scroll-linked progress fill, echoing the wizard
   progress bar's grammar but tied to scroll instead of clicks) plus the
   existing fade+rise recipe extended to every remaining static card/list
   so entrance motion is consistent everywhere, not just on the pages
   built most recently. All scroll-linked JS is skipped outright under
   prefers-reduced-motion (site.js); the CSS fallbacks below cover the
   no-JS/no-IntersectionObserver case.
   ========================================================================== */

/* Fleet cards, team cards, FAQ items, the Services panel, and the
   Stated Plainly map: same fade+rise recipe as the rest of the site,
   extended to what was still popping in statically. */
.fleet-card, .team-card, .faq-item{
  opacity:0; transform:translateY(26px);
  transition:opacity .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1);
}
.fleet-card.is-visible, .team-card.is-visible, .faq-item.is-visible{
  opacity:1; transform:translateY(0);
}
.fleet-card:nth-child(2), .team-card:nth-child(2){transition-delay:.06s;}
.fleet-card:nth-child(3){transition-delay:.12s;}
.fleet-card:nth-child(4){transition-delay:.18s;}
.fleet-card:nth-child(5), .fleet-card:nth-child(6){transition-delay:.22s;}
@media(prefers-reduced-motion:reduce){
  .fleet-card, .team-card, .faq-item{opacity:1; transform:none; transition:none;}
}