/* One spacing rhythm + scroll motion for every page (2026-10-07).
   Braden: "spacing is inconsistent" — measured 0–189 px section tops and 32–80 px
   heading-to-content gaps. Now: every section pads --band top AND bottom, every heading block
   is followed by --after-head, and neighbouring sections alternate background so no two
   white bands run together with a doubled or missing gap. Loaded last. */
:root{--band:clamp(72px,7.5vw,120px);--after-head:clamp(40px,4.2vw,64px)}

main>section:not(.hero):not(.ribbon),.route>section{padding:var(--band) 0!important;margin:0}
.sec+.sec{padding-top:var(--band)!important}
.shead+*,.rig-head+*,.yband,.carousel{margin-top:var(--after-head)!important}
.rig .shead,.shead h2{margin-top:0}
.yband{margin-bottom:0}
.maplabel{margin-top:24px}
.vslgrid{align-items:start}
.vsl .shead .lede,.shead .lede{margin-top:var(--s3)}
#origin .shead .lede,.yards .shead .lede,#area .shead .lede{margin-top:0}
@media (max-width:900px){#origin .shead .lede,.yards .shead .lede,#area .shead .lede{margin-top:var(--s3)}}

/* alternate the light bands: ribbon white · vsl grey · origin white · how grey · yards white */
#how{background:var(--panel)}
.yards,.yards .ymarquee{background:#fff}
#area{background:#fff}

/* ── scroll motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion:no-preference){
  /* the house red rule draws itself in when its heading arrives */
  .reveal h2::after,.shead.reveal h2::after{width:0;transition:width .7s cubic-bezier(.2,.7,.2,1) .25s}
  .reveal.in h2::after{width:96px}
  /* reveals rise a little further and ease out softer */
  .reveal{transform:translateY(28px);transition:opacity .7s ease-out,transform .7s cubic-bezier(.2,.7,.2,1)}
  .reveal.in{transform:none}
  /* steps and ribbon stats come in one after another (delays set in anim.js) */
  .step .n{display:inline-block;transform:translateX(-18px);opacity:.15;transition:transform .7s cubic-bezier(.2,.7,.2,1) .15s,opacity .7s .15s}
  .step.in .n{transform:none;opacity:1}
  /* the video frame settles into place */
  .vsl-frame.reveal{transform:translateY(40px) scale(.96)}
  .vsl-frame.reveal.in{transform:none}
  /* the hero rig drives off to the right as you scroll away (set by anim.js) */
  .hero.drawn .rigbox{translate:var(--drive,0) 0}
  .hero.drawn .hills{translate:calc(var(--drive,0) * -.25) 0}
}

.rig .shead{padding-top:0}
.hero.drawn .drive .hills{left:-40%;right:-40%}

/* hero must fit a 900px-tall laptop with the whole rig on screen */
.hero.drawn h1{font-size:clamp(2.7rem,.4rem + 6.4vw,7rem)}
.hero.drawn .hero-copy{padding-top:clamp(120px,15vh,170px)}
.hero.drawn .sub{margin-top:20px}
.hero.drawn .row{margin-top:26px}
.hero.drawn .drive{margin-top:24px}
.hero.drawn h1{font-size:clamp(2.5rem,min(.4rem + 6.4vw,10vh),7rem)}
@media (max-height:820px){.hero.drawn .hero-copy{padding-top:112px}.hero.drawn .sub{font-size:1.05rem}}
@media (max-width:900px) and (max-height:700px){.hero.drawn .hero-copy{padding-top:96px}.hero.drawn .row{margin-top:18px}.hero .row .tel{height:52px}}

/* wheels: one crisp vector rim, centred on each tire's measured centre (2026-10-07) */
.wheels i{background-size:100% 100%!important;background-repeat:no-repeat}
/* the drawings are 1600px line art traced from a 1344px render: never show them larger than that,
   or they go soft. Carousel and hero both cap at 1100px. */
.slides{width:min(1100px,92vw)!important;margin-left:auto!important;margin-right:auto!important}
.hero.drawn{--rigw:min(1100px,86vw)}
@media (max-width:900px){.hero.drawn{--rigw:150vw}}
/* the rig is drawn at 1100px but still drives in and out from the screen edge, not the box edge */
.slides{overflow:visible!important}
.rig{overflow:hidden}
.slide{transform:translateX(calc(-50vw - 60%))}
.slide.is-on{transform:translateX(0)}
.slide.is-out{transform:translateX(calc(50vw + 60%))}
.slides .road{left:calc(50% - 50vw);right:calc(50% - 50vw)}

/* ── hero: the VSL fills the right side instead of empty navy (2026-10-07) ── */
.hero-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:clamp(32px,5vw,80px);align-items:center;margin-top:22px}
.hero-split .sub{margin-top:0!important}
.vsl-card .vsl-frame{aspect-ratio:16/9;border-radius:14px;background:var(--navy-deep);border:1px solid rgba(255,255,255,.18);
  box-shadow:0 24px 50px -18px rgba(0,0,0,.55)}
.vsl-card .vsl-frame img{left:8%;right:8%;width:84%;bottom:16%}
.vsl-card .vsl-frame::after{bottom:16%}
.vsl-card .vsl-play{width:76px;height:76px}
.vsl-card .vsl-play i{left:30px;top:22px;border-left-width:22px;border-top-width:16px;border-bottom-width:16px}
.vsl-cap{display:flex;justify-content:space-between;gap:12px;margin-top:14px;color:#fff;font-size:.9rem}
.vsl-cap b{font:700 .9rem/1.2 var(--hfont);text-transform:uppercase;letter-spacing:.04em}
.vsl-cap span{color:var(--on-navy-mute)}
@media (max-width:900px){
  .hero-split{grid-template-columns:1fr;gap:28px}
  .vsl-card .vsl-play{width:64px;height:64px}.vsl-card .vsl-play i{left:25px;top:18px;border-left-width:19px;border-top-width:14px;border-bottom-width:14px}
}
@media (min-width:901px){
  .hero-split{grid-template-columns:minmax(0,1fr) min(440px,44vh);margin-top:18px}
  .hero.drawn .drive{margin-top:8px}
}
.vsl-cap{display:block}.vsl-cap b{display:block}.vsl-cap span{display:block;margin-top:4px}

/* the load sheet on the home page's last section (same form as the contact page) */
.callout .sheet{color:var(--on-navy)}
.callout .sheet input,.callout .sheet textarea{border-bottom-color:rgba(255,255,255,.55);color:#fff}
.callout .sheet ::placeholder{color:#7FA5D2}
.callout .sheet input:focus-visible,.callout .sheet textarea:focus-visible{border-bottom:2px solid #fff}
.callout .sheet .fine{color:var(--on-navy-mute)}
@media (max-width:900px){.callout .sheet{margin-top:var(--s8)}}
/* VSL parked (2026-10-07): hero is copy + rig only, sized to its content so no empty band.
   When the VSL comes back, restore the card in .hero-split and drop these two lines. */
.hero-split{display:block!important}
.hero.drawn{min-height:0!important;justify-content:flex-start}
.hero.drawn .drive{margin-top:clamp(40px,6vh,72px)!important}
.hero-split .sub{max-width:60ch}
/* Braden: "more white under the carousel". The map band was the only big plain-white block between
   two navy ones, so it read as an empty gap. Light grey ties it to the other light bands. */
#area{background:var(--panel)!important}
#area .map svg{background:transparent}

/* link to the sister site (2026-10-07) */
.sister{margin-top:14px;font-size:.85rem;color:var(--on-navy-mute)}
.sister a{color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.sister a:hover{color:var(--red)}

/* honeypot: invisible to people, bots fill it */
.sheet .hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* Braden: the logo strip sits right on the blue carousel section, no white band under it */
.yards{padding-bottom:0!important}
.route>section.yards{padding-bottom:0!important}

/* header (Braden): logo left · links centred · the logistics number alone on the right */
@media (min-width:1001px){
  .bar .wrap{display:grid!important;grid-template-columns:1fr auto 1fr;align-items:center}
  .bar .logo{justify-self:start}
  .bar nav{margin:0!important;justify-self:center}
  .callnum{justify-self:end;margin:0!important;padding:0!important;border:0!important}
}

/* ── phones (2026-10-07 mobile pass) ───────────────────────────── */
/* the short sub-page footer: real spacing between its links */
footer > .wrap > nav{display:flex;flex-wrap:wrap;gap:6px 24px;margin-top:14px}
footer > .wrap > nav a{display:inline-flex;align-items:center;min-height:44px;color:#fff;text-decoration:none;font-weight:600}
footer > .wrap > nav a:hover{color:var(--red)}
footer > .wrap{padding-bottom:28px}
.masthead .big,.callout .big{font-family:var(--hfont);font-weight:800}
@media (max-width:700px){
  /* tap targets: every link/button at least 44px tall */
  .callnum{display:inline-flex;align-items:center;min-height:44px;padding:0 4px}
  .footgrid a,.fcol a{display:flex;align-items:center;min-height:44px}
  .sister a{display:inline-block;padding:10px 0}
  .dots button{min-height:48px}
  /* labels big enough to read */
  .sheet label span,.sheet .hd span{font-size:.8rem}
  .ribbon span{font-size:.78rem}
  .maplabel{font-size:.74rem;line-height:1.9}
  /* footer: brand column full width, links two-up */
  .footgrid{grid-template-columns:1fr 1fr;gap:28px 20px}
  .footgrid>.fcol:first-child{grid-column:1/-1}
  /* hero: rig closer to the copy, no empty band */
  .hero.drawn .drive{margin-top:28px!important}
  /* form fields: 16px so iOS doesn't zoom in when you tap one */
  .sheet input,.sheet textarea{font-size:16px}
  /* step titles breathe */
  .step h3{font-size:1.35rem}
}
@media (max-width:700px){footer .lbl{font-size:.76rem!important}span.maplabel{font-size:.76rem!important}.masthead .big{padding:6px 0}}
@media (max-width:700px){.callnum{flex-direction:row!important;justify-content:center}}