@import url("fonts.css");

/* ============================================================
   ASE NORTH — "YARD" design language, v2. Ground-up reskin.

   Reference direction: terminal-industries.com. The system:
   huge REGULAR-weight headlines set in the text face (no display
   font at all), 12px mono labels with numbered eyebrows, a
   near-monochrome palette of ink and paper with white-alpha
   hairlines, alternating light and dark sections, a floating
   glass pill nav, cinematic full-bleed footage, and air.
   Brand yellow survives only as a micro-accent.
   ============================================================ */

:root{
  /* ink and paper, not colors */
  --ink:        #0E1717;   /* near-black with the faintest teal, per reference */
  --ink-60:     rgba(14,23,23,.62);
  --ink-38:     rgba(14,23,23,.38);
  --ink-line:   rgba(14,23,23,.14);
  --paper:      #EFEDE8;   /* warm light ground */
  --paper-2:    #E7E4DE;
  --black:      #0A0B0B;
  --white:      #F7F6F3;
  --white-60:   rgba(247,246,243,.64);
  --white-38:   rgba(247,246,243,.38);
  --hairline:   rgba(247,246,243,.14);

  /* the only color on the site */
  --accent:     #FFCE00;

  --text: "Switzer", "SuisseIntl", system-ui, sans-serif;
  --mono: "Geist Mono", "SF Mono", Menlo, monospace;

  /* Terminal-scale type: enormous, regular weight, tight */
  --h-hero: clamp(2.6rem, 1.6rem + 5vw, 5.6rem);
  --h-1:    clamp(2.2rem, 1.5rem + 3.4vw, 4.6rem);
  --h-2:    clamp(1.7rem, 1.2rem + 2.2vw, 3rem);
  --h-3:    clamp(1.23rem, 1.09rem + .7vw, 1.57rem);
  --t-body: clamp(1.09rem, 1.05rem + .2vw, 1.18rem);
  --t-mono: .88rem;

  --gut: clamp(1.4rem, 4.5vw, 5rem);
  --max: 1440px;
  --rail: 74rem;
  --r-card: 16px;
  --r-pill: 999px;
  --ease: cubic-bezier(.23,.6,.2,1);
  --nav-h: 64px;          /* pill height incl. its 1px borders */
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--text);
  font-size:var(--t-body);
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

/* Headlines are the text face at regular weight. Size and space do the
   work that bold used to do. */
h1,h2,h3,h4{
  font-family:var(--text);
  font-weight:400;
  line-height:1.02;
  letter-spacing:-.022em;
  margin:0;
}
h3,h4{ line-height:1.15; letter-spacing:-.012em; }
p{ margin:0 0 1rem; }

.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gut); }
.rail{ max-width:var(--rail); }

/* ---------- atoms ---------- */
.eyebrow{
  font-family:var(--mono);
  font-size:var(--t-mono);
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-60);
  margin:0 0 1.6rem;
  display:flex; align-items:center; gap:.7rem;
}
.eyebrow::before{ content:"+"; color:var(--accent); font-weight:600; }
.on-dark .eyebrow, .sec--dark .eyebrow{ color:var(--white-60); }

.lede{
  font-size:clamp(1.185rem, 1rem + .6vw, 1.473rem);
  line-height:1.4;
  letter-spacing:-.01em;
  color:var(--ink-60);
  max-width:36ch;
  font-weight:400;
}
.sec--dark .lede{ color:var(--white-60); }
.data{ font-family:var(--mono); font-weight:500; font-variant-numeric:tabular-nums; letter-spacing:.02em; }

/* verify placeholder, quiet but visible */
.vfy{
  display:inline-block; max-width:100%;
  font-family:var(--mono); font-size:0.84rem; letter-spacing:.02em; line-height:1.4;
  color:#8A6F00; background:rgba(255,206,0,.14);
  border:1px dashed rgba(138,111,0,.5); border-radius:4px;
  padding:.1rem .45rem; white-space:normal; overflow-wrap:anywhere;
}
.sec--dark .vfy, .on-dark .vfy{ color:var(--accent); border-color:rgba(255,206,0,.45); }

/* plate + stripe retired; kept as neutral quiet cards for old markup */
.plate{
  background:var(--paper-2); border:1px solid var(--ink-line);
  border-radius:var(--r-card); padding:1.7rem 1.9rem; color:var(--ink);
}
.sec--dark .plate{ background:#151717; border-color:var(--hairline); color:var(--white); }
.stripe{ display:none; }

/* ---------- buttons: pills, mono labels ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--mono); font-size:var(--t-mono); font-weight:500;
  letter-spacing:.08em; text-transform:uppercase;
  white-space:nowrap;                      /* or labels wrap in the nav pill */
  padding:.92rem 1.6rem; border-radius:var(--r-pill); border:1px solid transparent;
  text-decoration:none; cursor:pointer; background:none; color:inherit;
  transition:background-color .2s var(--ease), color .2s var(--ease),
             border-color .2s var(--ease), transform .2s var(--ease);
}
.btn:hover{ transform:translateY(-1px); }
.btn:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.btn--ship{ background:var(--ink); color:var(--white); }
.btn--ship:hover{ background:#233030; }
.sec--dark .btn--ship, .on-dark .btn--ship{ background:var(--white); color:var(--ink); }
.sec--dark .btn--ship:hover, .on-dark .btn--ship:hover{ background:#fff; }
.btn--carrier, .btn--ghost{ border-color:var(--ink-line); color:var(--ink); }
.btn--carrier:hover, .btn--ghost:hover{ border-color:var(--ink); }
.sec--dark .btn--ghost, .on-dark .btn--ghost,
.sec--dark .btn--carrier, .on-dark .btn--carrier{ border-color:var(--hairline); color:var(--white); }
.sec--dark .btn--ghost:hover, .on-dark .btn--ghost:hover{ border-color:var(--white); }

/* role chip: quiet mono tag */
.role{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--mono); font-size:0.824rem; font-weight:500; letter-spacing:.06em;
  text-transform:uppercase; padding:.42rem .8rem; border-radius:var(--r-pill);
  border:1px solid var(--ink-line); color:var(--ink-60); background:transparent;
}
.on-dark .role, .sec--dark .role{ border-color:var(--hairline); color:var(--white-60); }
.role::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--accent); }
.role--brokered::before{ background:currentColor; }

/* ---------- review bar ---------- */
.review-bar{
  background:var(--ink); color:rgba(247,246,243,.75);
  font-family:var(--mono); font-size:0.84rem; letter-spacing:.02em;
  padding:.55rem var(--gut); line-height:1.5;
}
.review-bar b{ color:var(--accent); font-weight:500; }
.review-bar .vfy{ color:var(--accent); }

/* ---------- floating pill nav ---------- */
.nav{
  position:sticky; top:12px; z-index:60;
  margin:12px var(--gut) 0;
  border-radius:var(--r-pill);
  background:#30302F;                 /* opaque: identical on every page and
                                         at every scroll position */
  border:1px solid rgba(247,246,243,.10);
  box-shadow:0 12px 40px rgba(10,11,11,.28);
}
.nav__in{
  display:flex; align-items:center; gap:1.2rem;
  height:62px; padding-inline:1.1rem 0.6rem;
}
.logo{ display:flex; align-items:center; text-decoration:none; margin-right:auto; }
/* reversed artwork: the pill is dark, so the white-truck lockup is the correct one */
.logo__img{ height:30px; width:auto; display:block; }
@media (max-width:560px){ .logo__img{ height:26px; } }

.nav__links{ display:flex; gap:.2rem; align-items:center; list-style:none; margin:0; padding:0; }
.nav__item{ position:relative; display:flex; align-items:center; }
.nav__item > a{
  font-family:var(--text); font-size:1.026rem; font-weight:400; letter-spacing:0;
  text-decoration:none; color:var(--white); padding:.55rem .75rem; border-radius:var(--r-pill);
  transition:background .18s var(--ease);
}
.nav__item > a:hover, .nav__item > a[aria-current="page"]{ background:rgba(247,246,243,.12); }
.nav__cta{ display:flex; gap:.45rem; align-items:center; }
.nav__cta .btn{ padding:.7rem 1.25rem; }
/* the pill is dark, so the filled CTA inverts and the ghosts go to hairline */
.nav__cta .btn--ship{ background:var(--white); color:var(--ink); }
.nav__cta .btn--ship:hover{ background:#fff; }
.nav__cta .btn--carrier,
.nav__cta .btn--shipper{ border-color:rgba(247,246,243,.26); color:var(--white); }
.nav__cta .btn--carrier:hover,
.nav__cta .btn--shipper:hover{ border-color:var(--white); background:rgba(247,246,243,.10); }

.sub-toggle{
  background:none; border:0; padding:.4rem .15rem; cursor:pointer; color:var(--white-60);
  display:grid; place-items:center; line-height:0;
}
.sub-toggle svg{ width:10px; height:10px; transition:transform .25s var(--ease); }
.sub-toggle[aria-expanded="true"] svg{ transform:rotate(180deg); }
.sub-toggle:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }

.subnav{
  position:absolute; top:calc(100% + 14px); left:-.4rem; z-index:70;
  min-width:270px; margin:0; padding:.45rem; list-style:none;
  background:rgba(20,22,22,.97);
  backdrop-filter:blur(20px);
  border:1px solid rgba(247,246,243,.12); border-radius:18px;
  box-shadow:0 24px 60px rgba(10,11,11,.5);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
.subnav::before{ content:""; position:absolute; top:-14px; left:0; right:0; height:14px; }
.nav__item:hover > .subnav, .nav__item:focus-within > .subnav, .subnav.open{
  opacity:1; visibility:visible; transform:none;
}
.subnav a{
  display:block; padding:.65rem .8rem; border-radius:12px; text-decoration:none;
  color:var(--white); font-size:1.034rem; line-height:1.3;
  transition:background .15s var(--ease);
}
.subnav a small{
  display:block; font-family:var(--mono); font-size:0.792rem; letter-spacing:.05em;
  color:var(--white-60); margin-top:.18rem; text-transform:uppercase;
}
.subnav a:hover, .subnav a:focus-visible{ background:rgba(247,246,243,.11); outline:none; }
.subnav a[aria-current="page"]{ background:rgba(247,246,243,.11); }

.nav__toggle{
  display:none; background:none; border:1px solid rgba(247,246,243,.24); border-radius:var(--r-pill);
  width:42px; height:42px; cursor:pointer; color:var(--white);
  place-items:center; line-height:0;
}
.nav__toggle svg{ width:18px; height:18px; }
.nav__toggle:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* Three items will not fit the pill at every width. The carrier ghost drops
   first, then the shipper ghost; both are mirrored inside the collapsed menu
   so neither audience path is ever unreachable. */
.nav__mirror{ display:none; }
@media (max-width:1400px){ .nav__cta .btn--carrier{ display:none; } }
/* The mirror is a menu row, not a horizontal nav item: if it appears while the
   nav is still a row it wraps to two lines and breaks the pill. So it may only
   surface once the menu has actually collapsed, and the button must survive
   until exactly that point so the shipper path is never missing. */
@media (max-width:1260px){
  .nav__cta .btn--shipper{ display:none; }
  .nav__mirror{ display:flex; }
}
.nav__mirror > a{ white-space:nowrap; }
@media (max-width:1260px){
  .nav__toggle{ display:grid; }
  .nav__links{
    /* Anchored to the pill itself. This was previously position:fixed at a
       hard-coded top, which only landed correctly because .nav's backdrop-filter
       happened to make it the containing block. Absolute against the sticky
       .nav is explicit and survives the filter being removed. */
    position:absolute; left:0; right:0; top:calc(100% + 10px); z-index:65;
    flex-direction:column; align-items:stretch; gap:0;
    background:rgba(20,22,22,.98); backdrop-filter:blur(20px);
    border:1px solid rgba(247,246,243,.12); border-radius:22px;
    box-shadow:0 30px 70px rgba(10,11,11,.55);
    padding:.8rem 1rem 1.2rem; max-height:calc(100svh - 140px); overflow-y:auto;
    display:none;
  }
  .nav__links.open{ display:flex; }
  .nav__item{ flex-wrap:wrap; border-bottom:1px solid rgba(247,246,243,.12); padding:.25rem 0; }
  .nav__item:last-child{ border-bottom:0; }
  .nav__item > a{ flex:1; padding:.85rem .4rem; font-size:1.09rem; }
  .sub-toggle{ padding:.85rem .5rem; }
  .subnav{
    position:static; opacity:1; visibility:visible; transform:none;
    width:100%; box-shadow:none; border:0; background:none; padding:0 0 .5rem .4rem;
    display:none;
  }
  .subnav.open{ display:block; }
  .nav__item:hover > .subnav{ opacity:1; visibility:visible; }
  .nav__item:hover > .subnav:not(.open){ display:none; }
}

/* ---------- cinematic hero ---------- */
.vhero{
  position:relative; overflow:hidden;
  min-height:min(92vh, 860px);
  display:flex; align-items:flex-end;
  margin:-86px 0 0;                     /* footage runs behind the floating nav */
  border-radius:0;
  color:var(--white);
}
.vhero__media{ position:absolute; inset:0; z-index:0; background:#101112; }
.vhero__media video, .vhero__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.vhero::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(10,11,11,.66), rgba(10,11,11,.28) 46%, transparent 70%),
    linear-gradient(180deg, rgba(10,11,11,.22), transparent 30%,
                             transparent 52%, rgba(10,11,11,.88) 100%);
}
.vhero__in{ position:relative; z-index:2; width:100%; padding-block:0 clamp(2.6rem,6vw,4.5rem); }
.vhero .eyebrow{ color:var(--white-60); }
.vhero h1{
  font-size:var(--h-hero); font-weight:400; letter-spacing:-.028em; line-height:.98;
  max-width:17ch; margin:0 0 1.6rem; color:var(--white);
}
.vhero .lede{ color:var(--white-60); margin-bottom:2rem; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:.7rem; align-items:center; }
.hero__phone{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.06em;
  color:var(--white-60); text-decoration:none; padding:.9rem .5rem;
}
.hero__phone b{ color:var(--white); font-weight:500; }

/* ---------- sections ---------- */
.sec{ padding:clamp(4.5rem,10vw,8.5rem) 0; background:var(--paper); color:var(--ink); }
.sec--alt{ background:var(--paper-2); border:0; }
.sec--dark{ background:var(--black); color:var(--white); }
.sec__head{ max-width:64ch; margin-bottom:clamp(2.6rem,5vw,4rem); }
.sec__head h2{
  font-size:var(--h-1); font-weight:400; letter-spacing:-.024em; line-height:1;
  margin:0 0 1.4rem; max-width:20ch;
}
.sec__head p:not(.eyebrow){
  color:var(--ink-60); font-size:clamp(1.138rem, 1rem + .4vw, 1.377rem);
  line-height:1.45; margin:0; max-width:52ch;
}
.sec--dark .sec__head p{ color:var(--white-60); }

/* ---------- credential bar: quiet data strip ---------- */
.creds{ background:var(--paper); border:0; margin:0; }
.creds__in{
  display:flex; flex-wrap:wrap; align-items:stretch; gap:0;
  border-block:1px solid var(--ink-line);
}
.cred{ flex:1 1 180px; padding:1.6rem 1.6rem 1.6rem 0; margin:0; }
.cred:not(:first-child){ padding-left:1.6rem; border-left:1px solid var(--ink-line); }
.cred dt{
  font-family:var(--mono); font-size:0.808rem; font-weight:500; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-38); margin-bottom:.5rem;
}
.cred dd{
  margin:0; font-family:var(--mono); font-size:1.138rem; font-weight:500;
  letter-spacing:.01em; color:var(--ink);
}
.cred dd.live::before{
  content:""; display:inline-block; width:7px; height:7px; border-radius:50%;
  background:var(--accent); margin-right:.5rem;
}
.cred a{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; font-size:0.97rem; }
.cred a:hover{ color:var(--ink-60); }

/* ---------- ticker ---------- */
.ticker{ overflow:hidden; background:var(--paper); border:0; user-select:none; }
.ticker__track{ display:flex; width:max-content; animation:tick 48s linear infinite; }
.ticker span{
  display:inline-flex; align-items:center; gap:2.4rem; padding:1rem 1.2rem;
  font-family:var(--mono); font-size:0.84rem; font-weight:500; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-38); white-space:nowrap;
}
.ticker b{ color:var(--ink); font-weight:500; }
.ticker i{ font-style:normal; color:var(--accent); }
@keyframes tick{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.ticker:hover .ticker__track{ animation-play-state:paused; }
@media (prefers-reduced-motion: reduce){ .ticker__track{ animation:none; } }

/* ---------- service cards: hairline grid ---------- */
.cards{
  display:grid; gap:1px; grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
  background:var(--ink-line); border-block:1px solid var(--ink-line);
  border-radius:0; overflow:hidden;
}
.card{
  background:var(--paper); padding:2.2rem 1.9rem 2rem;
  display:flex; flex-direction:column; gap:.9rem; text-decoration:none;
  transition:background .25s var(--ease);
}
.card:hover{ background:var(--paper-2); }
.card__n{
  font-family:var(--mono); font-size:0.824rem; font-weight:500;
  letter-spacing:.1em; color:var(--ink-38);
}
.card h3{ font-size:var(--h-3); font-weight:400; }
.card p{ color:var(--ink-60); font-size:1.05rem; line-height:1.5; margin:0; flex:1; }

/* ---------- dual authority panels ---------- */
.dual{ display:grid; gap:1.2rem; grid-template-columns:1fr 1fr; }
@media (max-width:820px){ .dual{ grid-template-columns:1fr; } }
.dual__panel{
  border:1px solid var(--ink-line); border-radius:var(--r-card);
  padding:2.3rem 2.1rem; background:transparent; position:relative; overflow:hidden;
}
.sec--dark .dual__panel{ border-color:var(--hairline); }
.dual__panel::before{ display:none; }
.dual__panel h3{ font-size:var(--h-2); font-weight:400; margin:1.2rem 0 1rem; letter-spacing:-.018em; }
.dual__panel p{ color:var(--ink-60); font-size:1.074rem; }
.sec--dark .dual__panel p{ color:var(--white-60); }
.dual__panel ul{ list-style:none; padding:0; margin:1.4rem 0 0; display:grid; gap:.65rem; }
.dual__panel li{
  font-family:var(--mono); font-size:0.894rem; letter-spacing:.02em; line-height:1.5;
  color:var(--ink-60); padding-left:1.3rem; position:relative;
}
.sec--dark .dual__panel li{ color:var(--white-60); }
.dual__panel li::before{
  content:"+"; position:absolute; left:0; top:0; color:var(--accent); font-weight:600;
}

/* ---------- journey ---------- */
.journey{ display:grid; gap:0; }
.leg{
  display:grid; grid-template-columns:110px 1fr; gap:2.2rem;
  padding:2.1rem 0; border-top:1px solid var(--ink-line); align-items:start;
}
.sec--dark .leg{ border-color:var(--hairline); }
.leg:last-child{ border-bottom:1px solid var(--ink-line); }
.sec--dark .leg:last-child{ border-color:var(--hairline); }
.leg__mile{
  font-family:var(--mono); font-size:0.824rem; font-weight:500; letter-spacing:.08em;
  color:var(--ink-38); text-transform:uppercase; padding-top:.4rem;
}
.sec--dark .leg__mile{ color:var(--white-38); }
.leg__mile b{
  display:block; font-size:1.656rem; color:var(--ink); font-weight:400;
  letter-spacing:-.02em; line-height:1; margin-bottom:.4rem; font-family:var(--text);
}
.sec--dark .leg__mile b{ color:var(--white); }
.leg h3{ font-size:var(--h-3); font-weight:400; margin:0 0 .5rem; }
.leg p{ color:var(--ink-60); margin:0; max-width:60ch; font-size:1.066rem; }
.sec--dark .leg p{ color:var(--white-60); }
@media (max-width:640px){ .leg{ grid-template-columns:1fr; gap:.8rem; } }

/* ---------- proof grid ---------- */
.proof{
  display:grid; gap:1px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  background:var(--ink-line); border-block:1px solid var(--ink-line); overflow:hidden;
}
.sec--dark .proof{ background:var(--hairline); border-color:var(--hairline); }
.proof__item{ background:var(--paper); padding:1.9rem 1.7rem; }
.sec--dark .proof__item{ background:var(--black); }
.proof__item h4{ font-size:1.109rem; font-weight:500; margin:0 0 .55rem; letter-spacing:0; }
.proof__item p{ font-size:1.01rem; color:var(--ink-60); margin:0; }
.sec--dark .proof__item p{ color:var(--white-60); }

/* ---------- corridor map (dark section) ---------- */
.map{
  position:relative; width:100%;
  border:1px solid var(--hairline); border-radius:var(--r-card);
  background:#0E0F10; overflow:hidden;
}
.map canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.map__label{
  position:absolute; top:16px; left:18px;
  font-family:var(--mono); font-size:0.792rem; font-weight:500; letter-spacing:.12em;
  text-transform:uppercase; color:var(--white-38);
}
.map__legend{
  position:absolute; left:16px; bottom:14px; right:16px;
  display:flex; flex-wrap:wrap; gap:.5rem 1.2rem; align-items:center;
  font-family:var(--mono); font-size:0.776rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--white-38);
}
.map__legend i{ display:inline-flex; align-items:center; gap:.4rem; font-style:normal; }
.map__legend i::before{ content:""; width:16px; height:2px; border-radius:2px; background:rgba(247,246,243,.6); }
.map__legend i.a::before{ background:var(--accent); }
.map__fallback{
  position:absolute; inset:0; display:grid; place-content:center; gap:.5rem;
  padding:2rem; text-align:center; font-family:var(--mono); font-size:0.912rem;
  letter-spacing:.04em; color:var(--white-60);
}
.js-map-live .map__fallback{ display:none; }

/* ---------- footer: black statement ---------- */
.foot{
  background:var(--black); color:var(--white);
  padding:clamp(4rem,9vw,7rem) 0 2.2rem; border:0;
}
.foot__statement{
  font-size:var(--h-1); font-weight:400; letter-spacing:-.026em; line-height:1;
  max-width:18ch; margin:0 0 3.5rem;
}
/* the display statement's link must ride the display size, not the footer's
   utility link size: `.foot a` (0-1-1) out-specifies `.foot__statement` (0-1-0),
   so the size and colour are reclaimed here at 0-2-1 — 0-1-1 ties and loses
   on source order, since `.foot a` is declared later in this file. */
.foot .foot__statement a{
  font-size:inherit; line-height:inherit; font-weight:inherit; color:inherit;
  text-decoration:none; border-bottom:.055em solid var(--accent); padding-bottom:.06em;
}
.foot .foot__statement a:hover{ color:var(--accent); }
.foot__grid{ display:grid; gap:2.5rem; grid-template-columns:1.5fr 1fr 1.15fr 1.25fr 1fr; }
/* second row: company + legal, laid out as wide rails rather than columns */
.foot__grid--sub{ margin-top:2.5rem; grid-template-columns:1fr 2fr; }
.foot__grid--sub ul{ display:flex; flex-wrap:wrap; gap:.7rem 1.7rem; }
@media (max-width:900px){ .foot__grid--sub{ grid-template-columns:1fr; gap:1.8rem; } }
@media (max-width:1100px){ .foot__grid{ grid-template-columns:1.4fr 1fr 1fr; } }
@media (max-width:900px){ .foot__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .foot__grid{ grid-template-columns:1fr; } }
.foot h4{
  font-family:var(--mono); font-size:0.808rem; font-weight:500; letter-spacing:.1em;
  text-transform:uppercase; color:var(--white-38); margin:0 0 1.1rem;
}
.foot ul{ list-style:none; padding:0; margin:0; display:grid; gap:.55rem; }
.foot a{ color:var(--white-60); text-decoration:none; font-size:1.042rem; transition:color .15s var(--ease); }
.foot a:hover{ color:var(--white); }
.foot .logo__stack{ height:80px; width:auto; }
.foot__legal{
  margin-top:3.5rem; padding-top:1.4rem; border-top:1px solid var(--hairline);
  display:flex; flex-wrap:wrap; gap:1rem 2rem; justify-content:space-between;
  font-family:var(--mono); font-size:0.824rem; letter-spacing:.03em; color:var(--white-38);
}
.foot__legal a{ font-size:0.824rem; }

/* ---------- reveals ---------- */
.rv{ opacity:1; transform:none; }
.js .rv{ opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.js .rv.in, .rv.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .js .rv{ opacity:1 !important; transform:none !important; transition:none; }
}

/* ============================================================
   MOTION LAYER — scroll cinema. Everything here activates only
   with JS present and motion allowed; the document underneath
   is complete without it.
   ============================================================ */

/* pinned, scroll-scrubbed hero */
html.js .vhero-pin[data-scrub-on]{ height:280vh; }
html.js .vhero-pin[data-scrub-on] .vhero{
  position:sticky; top:0; height:100vh; min-height:0;
}
@media (prefers-reduced-motion: reduce){
  html.js .vhero-pin[data-scrub-on]{ height:auto; }
  html.js .vhero-pin[data-scrub-on] .vhero{ position:relative; height:auto; min-height:min(92vh,860px); }
}

.scrollhint{
  display:flex; align-items:center; gap:.9rem; margin-top:2.6rem;
  font-family:var(--mono); font-size:0.792rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--white-38);
}
.scrollhint__bar{
  position:relative; width:120px; height:1px; background:rgba(247,246,243,.22); overflow:hidden;
}
.scrollhint__bar i{
  position:absolute; inset:0; background:var(--accent);
  transform:scaleX(0); transform-origin:left center;
}
.scrollhint__pct{ min-width:3ch; text-align:right; color:var(--white-60); }
html:not(.js) .scrollhint{ display:none; }

/* word-by-word headline rise */
/* The mask must be taller than the em box or it shaves descenders and the
   bottoms of round glyphs wherever line-height is 1. The padding grows the
   clip area; the equal negative margin keeps the layout box unchanged. */
.ws .w{
  display:inline-block; overflow:hidden; vertical-align:top;
  padding-bottom:.2em; margin-bottom:-.2em;
}
.ws .w > span{ display:inline-block; will-change:transform; }
html.js .ws:not(.ws-in) .w > span{ transform:translateY(112%); }
.ws-in .w > span{
  transform:translateY(0);
  transition:transform .85s var(--ease);
  transition-delay:calc(var(--wi) * 45ms);
}
@media (prefers-reduced-motion: reduce){
  html.js .ws:not(.ws-in) .w > span{ transform:none; }
  .ws-in .w > span{ transition:none; }
}

/* odometer digits */
[data-odo] .odo{
  display:inline-block; overflow:hidden; height:1.25em; vertical-align:bottom;
}
[data-odo] .odo > span{
  display:block; line-height:1.25em;
  transform:translateY(calc(var(--d) * -1.25em));
  transition:transform 1.4s cubic-bezier(.2,.7,.2,1);
  transition-delay:calc(var(--di) * 70ms);
}
html.js [data-odo]:not(.odo-in) .odo > span{ transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
  [data-odo] .odo > span{ transition:none; transform:translateY(calc(var(--d) * -1.25em)); }
}

/* parallax media */
[data-plx] img, [data-plx] video{ will-change:transform; }
@media (prefers-reduced-motion: reduce){
  [data-plx] img, [data-plx] video{ transform:none !important; }
}
[data-plx].phero__bg{ inset:-9% 0; }
section[data-plx] video{ transform:scale(1.12); }

/* nav scroll state */
.nav{ transition:box-shadow .25s var(--ease), background-color .25s var(--ease); }
.nav--scrolled{
  background:#30302F;                 /* same graphite: only the shadow changes */
  box-shadow:0 18px 50px rgba(10,11,11,.34);
}
.nav--scrolled .nav__in{ height:56px; }
.nav__in{ transition:height .25s var(--ease); }

/* ---------- minimal cinematic hero + paper statement ---------- */
.vhero--min{ align-items:flex-end; }
.vhero--min::after{
  background:linear-gradient(180deg, transparent 68%, rgba(10,11,11,.5) 100%);
}
.vhero__bar{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:1.5rem; flex-wrap:wrap;
}
.vhero__tag{
  font-family:var(--mono); font-size:0.808rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--white-60);
}
.vhero--min .vhero__in{ padding-block:0 1.8rem; }
.vhero--min .scrollhint{ margin-top:0; }

.statement{ padding:clamp(5rem,11vw,9rem) 0; }
.statement h2{
  font-size:var(--h-1); font-weight:400; letter-spacing:-.026em; line-height:1;
  max-width:19ch; margin:0 0 1.8rem;
}
.statement__lede{
  color:var(--ink-60); max-width:54ch;
  font-size:clamp(1.138rem, 1rem + .5vw, 1.425rem); line-height:1.45;
  margin:0 0 2.2rem;
}
.statement .hero__phone{ color:var(--ink-60); }
.statement .hero__phone b{ color:var(--ink); }

/* ============================================================
   THE JOURNEY — pinned, scroll-scrubbed, multi-chapter entry.
   Structure mirrors the reference: a tall scroll section whose
   inner stage is sticky for its whole length, one continuous
   scrubbed sequence beneath, and chapters that hand off as the
   scroll advances. Without JS the stage is a normal hero and
   all three chapters simply stack and read.
   ============================================================ */
/* The floating pill sits in normal flow, so the page background showed as a
   band behind and around it. The homepage hero is pulled up by exactly the
   header's flow height so the hero runs under the pill to the utility bar. */
.hero-journey{
  position:relative; background:var(--black);
  margin-top:calc(-1 * (12px + var(--nav-h)));
}
html.js .hero-journey[data-on]{ height:360vh; }

.journey__stage{
  position:relative; height:auto; min-height:100vh;
  overflow:hidden; display:flex; align-items:center;
  color:var(--white);
}
html.js .hero-journey[data-on] .journey__stage{
  position:sticky; top:0; height:100vh; min-height:0;
}
.journey__media{ position:absolute; inset:0; z-index:0; background:#0A0B0B; }
.journey__media video, .journey__media img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.journey__scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(10,11,11,.86), rgba(10,11,11,.42) 52%, rgba(10,11,11,.12) 78%),
    linear-gradient(180deg, rgba(10,11,11,.5), transparent 26%, transparent 58%, rgba(10,11,11,.8));
}
.journey__inner{ position:relative; z-index:2; width:100%; }

/* chapters: stacked in the same cell, only one lit at a time */
html.js .hero-journey[data-on] .journey__inner{ display:grid; }
html.js .hero-journey[data-on] .chapter{ grid-area:1/1; }
.chapter{ max-width:52rem; }
html.js .hero-journey[data-on] .chapter{
  opacity:0; transform:translateY(26px); pointer-events:none;
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
html.js .hero-journey[data-on] .chapter.is-on{
  opacity:1; transform:none; pointer-events:auto;
}
.chapter + .chapter{ margin-top:4rem; }
html.js .hero-journey[data-on] .chapter + .chapter{ margin-top:0; }

.chapter__tag{
  display:flex; align-items:center; gap:.75rem;
  font-family:var(--mono); font-size:0.84rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--white-60);
  margin:0 0 1.5rem;
}
.chapter__tag b{
  color:var(--accent); font-weight:500;
  padding-right:.75rem; border-right:1px solid rgba(247,246,243,.25);
}
.chapter h1, .chapter h2{
  font-size:var(--h-hero); font-weight:400; letter-spacing:-.028em;
  line-height:1; margin:0 0 1.5rem; max-width:17ch; color:var(--white);
}
.chapter h2{ font-size:var(--h-1); }
.chapter__line{
  font-size:clamp(1.138rem, 1rem + .45vw, 1.377rem); line-height:1.45;
  color:var(--white-60); max-width:40ch; margin:0;
}
.chapter__actions{
  display:flex; flex-wrap:wrap; gap:.7rem; align-items:center; margin-top:2.2rem;
}
.chapter__actions .btn--ship{ background:var(--white); color:var(--ink); }
.chapter__actions .hero__phone{ color:var(--white-60); }
.chapter__actions .hero__phone b{ color:var(--white); }

/* instrument HUD */
.journey__hud{
  position:absolute; z-index:3; left:var(--gut); right:var(--gut); bottom:2rem;
  display:flex; align-items:center; gap:1.1rem;
  font-family:var(--mono); font-size:0.808rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--white-38);
}
html:not(.js) .journey__hud{ display:none; }
.journey__rail{ display:flex; gap:.5rem; align-items:center; margin-left:auto; }
.journey__rail i{
  width:26px; height:2px; background:rgba(247,246,243,.22); display:block;
  transition:background .4s var(--ease);
}
.journey__rail i.on{ background:var(--accent); }
.journey__pct{ color:var(--white-60); min-width:3ch; text-align:right; }

@media (max-width:720px){
  html.js .hero-journey[data-on]{ height:320vh; }
  .journey__scrim{
    background:linear-gradient(180deg, rgba(10,11,11,.72), rgba(10,11,11,.35) 40%, rgba(10,11,11,.88));
  }
  .journey__hud{ bottom:1.2rem; font-size:0.76rem; letter-spacing:.12em; }
}
@media (prefers-reduced-motion: reduce){
  html.js .hero-journey[data-on]{ height:auto; }
  html.js .hero-journey[data-on] .journey__stage{ position:relative; height:auto; min-height:100vh; }
  html.js .hero-journey[data-on] .journey__inner{ display:block; }
  html.js .hero-journey[data-on] .chapter{ opacity:1; transform:none; pointer-events:auto; }
  html.js .hero-journey[data-on] .chapter + .chapter{ margin-top:4rem; }
}

/* ============================================================
   JOURNEY — smoothness + mobile tuning
   ============================================================ */

/* svh keeps the stage from resizing as mobile browser chrome hides,
   which otherwise makes the pinned hero visibly jump mid-scroll. */
html.js .hero-journey[data-on] .journey__stage{ height:100svh; }
@supports not (height: 100svh){
  html.js .hero-journey[data-on] .journey__stage{ height:100vh; }
}

/* GPU-promote the moving layers so the sticky stage does not repaint */
.journey__media video, .journey__media img{
  will-change:transform; transform:translateZ(0); backface-visibility:hidden;
}
.journey__stage{ contain:paint; }

/* Chapters cross-fade a touch slower and travel less: reads calmer
   while the footage is also moving. */
html.js .hero-journey[data-on] .chapter{
  transition:opacity .85s var(--ease), transform .85s var(--ease);
  transform:translateY(18px);
}

/* If the clip could not be made seekable we let it play instead of
   scrubbing. Nothing else changes, so the section never sits frozen. */
.hero-journey[data-playmode] .journey__hint::after{ content:""; }

@media (max-width:820px){
  /* shorter pin: three full screens of scroll is punishing on a phone */
  html.js .hero-journey[data-on]{ height:260svh; }
  @supports not (height: 100svh){ html.js .hero-journey[data-on]{ height:260vh; } }

  .journey__stage{ align-items:flex-end; }
  .journey__inner{ padding-bottom:5.5rem; }

  .chapter h1, .chapter h2{
    font-size:clamp(2rem, 8.5vw, 2.9rem); line-height:1.04; max-width:14ch;
    margin-bottom:1.1rem;
  }
  .chapter__tag{ margin-bottom:1rem; font-size:0.792rem; letter-spacing:.14em; }
  .chapter__line{ font-size:1.09rem; line-height:1.45; max-width:34ch; }
  .chapter__actions{ margin-top:1.6rem; gap:.5rem; }
  .chapter__actions .btn{ padding:.85rem 1.35rem; }
  .chapter__actions .hero__phone{ padding:.5rem 0; }

  /* keep the readout clear of the CTA row */
  .journey__hud{ bottom:1rem; gap:.7rem; }
  .journey__rail i{ width:18px; }
}

@media (max-width:420px){
  html.js .hero-journey[data-on]{ height:240svh; }
  .chapter h1, .chapter h2{ font-size:clamp(1.828rem, 8vw, 2.4rem); }
  .chapter__line{ font-size:1.05rem; }
  .journey__hint{ display:none; }        /* room for the rail + percent */
}

@media (max-width:820px){
  /* centre the chapter block: bottom-aligning it pushed the lede past
     the fold once the headline wrapped to four lines */
  .journey__stage{ align-items:center; }
  .journey__inner{ padding-bottom:0; }
  .chapter{ padding-block:1rem 4.5rem; }

  /* nav CTA has to survive a 375px pill */
  .nav__in{ gap:.6rem; padding-inline:.85rem .5rem; }
  .nav__cta .btn{ padding:.72rem 1.05rem; font-size:0.824rem; letter-spacing:.06em; }
  .logo__img{ height:24px; }

  /* preview scaffolding should not dominate a phone screen */
  .review-bar{ font-size:0.776rem; line-height:1.45; padding:.5rem var(--gut); }
}

/* ---------- footer watermark: felt, not read ---------- */
.foot{ position:relative; overflow:hidden; }
.foot__mark{
  position:absolute; right:clamp(-90px,-4vw,-34px); bottom:-4%;
  width:clamp(260px,34vw,560px); height:auto;
  opacity:.05; pointer-events:none; user-select:none; z-index:0;
}
.foot > .wrap{ position:relative; z-index:1; }

/* ---------- utility strip ----------
   The client asked for eight sections and four CTAs in the header. That does
   not fit one pill at any width, so tracking, contact and the phone number sit
   in a slim strip above it, where they are in fact more prominent. */
.util{ background:var(--black); color:var(--white-60); }
.util__in{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  min-height:38px; padding-block:.3rem;
  font-family:var(--mono); font-size:0.812rem; letter-spacing:.05em; text-transform:uppercase;
}
.util a{ color:var(--white-60); text-decoration:none; transition:color .15s var(--ease); }
.util a:hover, .util a[aria-current="page"]{ color:var(--white); }
.util__phone{ display:inline-flex; align-items:center; gap:.5rem; white-space:nowrap; }
.util__phone b{ color:var(--accent); font-weight:500; }
.util__links{ display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; justify-content:flex-end; }
.util__links a{ white-space:nowrap; }
@media (max-width:720px){
  .util__in{ justify-content:center; gap:.9rem 1.1rem; flex-wrap:wrap; font-size:0.76rem; }
  .util__links{ gap:1.1rem; }
  .util__phone span{ display:none; }          /* keep the number, drop the label */
  .util__links a:nth-child(3){ display:none; } /* carrier login is not a phone-first action */
}

/* Nothing in the pill may be compressed: flex was squashing the logo artwork
   by up to 87% before the burger took over. These stay at natural width and
   the collapse breakpoint is set so the row never has to squeeze. */
.logo, .nav__cta, .nav__toggle{ flex:0 0 auto; }
.logo__img{ flex:0 0 auto; max-width:none; }
.nav__links{ flex:0 1 auto; }
/* buy back horizontal room so the pill survives 1280-class laptops */
@media (max-width:1460px){
  .nav__in{ gap:.9rem; }
  .nav__item > a{ padding-inline:.62rem; }
}

/* On a narrow phone the full lockup plus a CTA cannot fit, and neither may
   shrink without distorting. Below 480 the wordmark drops and the truck mark
   carries the brand on its own. */
.logo__mark-sm{ display:none; height:30px; width:auto; }
@media (max-width:480px){
  .logo__img{ display:none; }
  .logo__mark-sm{ display:block; height:28px; }
  .nav__cta .btn{ padding:.72rem 1rem; }
  .nav__in{ gap:.7rem; }
}

/* ---------- trio: equal-width card row ----------
   .leg is a 110px + 1fr milestone row, not a card grid; using it for 3-up
   cards collapsed the first column to 110px. This is the card grid. */
.trio{
  display:grid; gap:1.1rem; align-items:stretch;
  grid-template-columns:repeat(auto-fit,minmax(258px,1fr));
}
.trio > .plate{ display:flex; flex-direction:column; height:100%; }
.trio h3{ font-size:var(--h-3); font-weight:400; margin:0 0 .7rem; letter-spacing:-.012em; }
.trio p{ color:var(--ink-60); margin:0 0 .9rem; font-size:1.046rem; max-width:46ch; }
.trio p:last-child{ margin-bottom:0; margin-top:auto; padding-top:.3rem; }
.sec--dark .trio p, .on-dark .trio p{ color:var(--white-60); }