/* Chupp Logistics — one stylesheet for every page */
:root{
  --navy:#02468D; --deep:#02386F; --ink:#0B1220; --paper:#FFFFFF;
  --red:#F41E1D; --mute:#5E6875; --line:#DCE3EB;
  --on-navy:#FFFFFF; --on-navy-mute:#A9C4E4;
  --w:min(1680px,100%); --pad:clamp(20px,4.2vw,64px);
  --edge:max(var(--pad), calc((100vw - 1680px)/2 + var(--pad)));
  --rail:50%;
  --d1:clamp(2.7rem,.6rem + 6.1vw,6.6rem);
  --d2:clamp(2.1rem,1rem + 3.2vw,4.2rem);
  --body:1.0625rem; --util:.72rem;
  --s2:16px; --s3:24px; --s4:32px; --s6:48px; --s8:64px; --s10:80px;
  --s12:96px; --s16:128px;
  --band:clamp(84px,9vw,132px);   /* one section rhythm for the whole site */
  --after-head:clamp(48px,5vw,80px);
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font:400 var(--body)/1.6 "Overpass",system-ui,sans-serif;overflow-x:hidden;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-weight:900;line-height:.95;letter-spacing:-.035em}
h1{font-size:var(--d1)} h2{font-size:var(--d2)}
a{color:inherit} img,video,svg{display:block;max-width:100%}
.wrap{width:var(--w);margin-inline:auto;padding-inline:var(--pad)}
.skip{position:absolute;left:-9999px;top:0;background:var(--red);color:#fff;padding:12px 20px;z-index:99}.skip:focus{left:12px}
.reveal{opacity:0;transform:translateY(16px);transition:opacity .5s ease-out,transform .5s ease-out}
.reveal.in{opacity:1;transform:none}

/* the number is the button: no slogan, no ask */
.tel{display:inline-flex;align-items:center;justify-content:center;background:var(--red);color:#fff;
  text-decoration:none;font-weight:900;letter-spacing:-.01em;font-size:1.0625rem;
  padding:0 30px;height:54px;border-radius:999px;border:0;cursor:pointer;font-family:inherit;
  transition:background .2s,transform .2s;white-space:nowrap}
.tel:hover{background:#D31718;transform:translateY(-2px)}
.tel:focus-visible{outline:3px solid #fff;outline-offset:3px}
.tel.ghost{background:transparent;color:var(--navy);border:2px solid var(--navy)}
.tel.ghost:hover{background:var(--navy);color:#fff}

/* ── nav ─────────────────────────────────────────────────── */
.bar{position:fixed;inset:0 0 auto 0;height:84px;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);display:flex;align-items:center;z-index:60;transition:transform .4s,opacity .4s,background .3s}
.bar .wrap{display:flex;align-items:center;gap:clamp(16px,3vw,44px);width:100%;padding-inline:var(--edge)}
.bar .logo{display:block;flex:none}
.bar .logo img{height:54px;width:auto}
.bar nav{display:flex;gap:clamp(16px,2.4vw,36px);margin-left:auto}
.bar nav a{text-decoration:none;font-weight:700;font-size:.98rem;color:var(--navy);padding:6px 0;border-bottom:2px solid transparent}
.bar nav a:hover,.bar nav a[aria-current="page"]{border-bottom-color:var(--red)}
.bar .tel{height:46px;padding:0 22px;font-size:1rem}
/* over the film only */
.bar.hidden{transform:translateY(-100%);opacity:0}
@media (max-width:900px){.bar nav{display:none}.bar{height:72px}.bar .logo img{height:44px}.bar .tel{margin-left:auto}.page{padding-top:72px}}
.page{padding-top:84px}

/* ── sections ────────────────────────────────────────────── */
.sec{padding:var(--band) 0}
.sec.tight{padding:var(--band) 0}
.sec + .sec{padding-top:0}   /* adjacent white sections share one band */
.lede{max-width:54ch;margin-top:var(--s3);color:var(--mute);font-size:1.125rem}

.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,4vw,64px);
  margin-top:var(--s8);border-top:2px solid var(--ink);padding-top:var(--s4)}
.stat b{display:block;font-size:clamp(3.2rem,1.2rem + 6.8vw,7.6rem);font-weight:900;line-height:.85;
  letter-spacing:-.05em;color:var(--navy);font-variant-numeric:lining-nums tabular-nums}
.stat span{display:block;margin-top:14px;font-size:.95rem;color:var(--mute);max-width:24ch}
@media (max-width:760px){.stats{grid-template-columns:1fr;gap:var(--s6)}.stat b{font-size:3.6rem}}

/* stacked to the right of the spine, so the line lights 01, 02, 03 as it passes */
.howgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,124px);align-items:start}
/* starts level with 01, then sticks at mid-screen. Native sticky, so it never lags. */
.howgrid > .shead{margin:0;position:sticky;top:var(--headTop,26vh);max-width:none}
.steps{display:grid;gap:var(--s8)}
.step{display:block;border-top:2px solid var(--line);padding-top:var(--s4)}
.step .n{font-size:clamp(2.8rem,1rem + 4.6vw,5rem);font-weight:900;line-height:.8;color:var(--navy);
  letter-spacing:-.05em;opacity:.2;transition:opacity .5s}
.step.lit .n{opacity:1}
.step h3{font-size:clamp(1.4rem,1rem + 1.5vw,2.2rem);margin-bottom:10px}
.step p{color:var(--mute);max-width:34ch}
.step .n{margin-bottom:var(--s3)}
@media (max-width:900px){.howgrid{grid-template-columns:1fr;gap:var(--s6)}
  .howgrid > .shead{position:static}}

/* ── the lanes map ───────────────────────────────────────── */
/* the map is already full of red lanes — the spine passes behind this band,
   the same way it passes behind the rig, and reappears at the phone number */
#area{position:relative;z-index:4;background:var(--paper)}
.map{margin-top:0}
.map svg{width:100%;height:auto}
#usmap .lane{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);transition:stroke-dashoffset 1.1s cubic-bezier(.22,1,.36,1)}
#usmap.drawn .lane{stroke-dashoffset:0}
#usmap .stop{opacity:0;transition:opacity .45s ease-out}
#usmap.drawn .stop{opacity:1}
.maplabel{display:block;margin-top:20px;color:var(--mute);font-size:var(--util);letter-spacing:.2em;text-transform:uppercase;font-weight:700}
.maplabel i{display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:7px}
.maplabel .key-yard{border:3px solid var(--navy);background:#fff}
.maplabel .key-gate{background:var(--red);border:2px solid #fff;box-shadow:0 0 0 1px var(--red)}

/* ── trailers ────────────────────────────────────────────── */
.deckrow{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,64px)}
.deck img{width:100%;height:clamp(110px,13vw,190px);object-fit:contain;object-position:left bottom;
  transform:translateY(10px);opacity:0;transition:transform .7s cubic-bezier(.16,1,.3,1),opacity .7s}
.deck.in img{transform:none;opacity:1}
.deck:nth-child(2).in img{transition-delay:.09s}
.deck:nth-child(3).in img{transition-delay:.18s}
.deck h3{font-size:1.3rem;margin:20px 0 8px}
.deck p{color:var(--mute);max-width:32ch}
.on-navy{padding-top:var(--s8)}
.on-navy .deck p{color:var(--on-navy-mute)}
@media (max-width:760px){.deckrow{grid-template-columns:1fr;gap:var(--s6)}}

/* ── the rig carousel: generated line art, one slide at a time ── */
.rig{background:var(--navy);color:var(--on-navy);padding:var(--band) 0;position:relative;z-index:4}
.rig h2{max-width:12ch}
.rig-head{display:block}
.rig-nav .sub{color:#D8E6F8;max-width:44ch}
.rig .arrows{display:flex;gap:12px;margin-top:var(--s4)}
.rig .arrows button{width:52px;height:52px;border-radius:999px;border:2px solid rgba(255,255,255,.32);
  background:transparent;color:#fff;font-size:1.15rem;cursor:pointer;transition:background .2s,border-color .2s}
.rig .arrows button:hover{background:#fff;color:var(--navy);border-color:#fff}
.carousel{margin-top:var(--after-head)}
/* the rig runs edge to edge — a trailer boxed inside a column reads like a diagram */
.slides{position:relative;width:100vw;margin-left:calc(50% - 50vw);
  aspect-ratio:1600/303;overflow:hidden}
/* the rig drives out to the right; the next one drives in from the left */
.slide{position:absolute;inset:0;transform:translateX(-118%);pointer-events:none;
  transition:transform .85s cubic-bezier(.45,.02,.2,1)}
.slide.is-on{transform:translateX(0);pointer-events:auto}
.slide.is-out{transform:translateX(118%)}
.slide.no-anim{transition:none}
/* one road that stays put while the rigs come and go */
.road{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.45);overflow:hidden}
.road i{position:absolute;inset:0;opacity:0;transition:opacity .25s;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.95) 0 44px,rgba(255,255,255,0) 44px 96px)}
.rolling .road i{opacity:1;animation:rollroad .42s linear infinite}
@keyframes rollroad{to{transform:translateX(-96px)}}
/* while it drives, the rig rides its suspension — sells the motion the wheels can't */
.rolling .slide img{animation:ride .17s linear infinite}
@keyframes ride{0%,100%{transform:translateY(0)}50%{transform:translateY(1.4px)}}
@media (prefers-reduced-motion:reduce){
  .slide{transition:none}.rolling .road i{animation:none}.rolling .slide img{animation:none}}
@media (prefers-reduced-motion:reduce){
  .slide{transition:none}.rolling .road i{animation:none;opacity:0}
}
.slide img{width:100%;height:100%;object-fit:contain;object-position:center bottom}

.rigcap{margin-top:var(--s4);max-width:52ch;min-height:4.2em}
.rigcap b{display:block;font-size:clamp(1.25rem,1rem + 1vw,1.8rem);font-weight:900;letter-spacing:-.02em}
.rigcap span{display:block;margin-top:8px;color:var(--on-navy-mute)}
.dots{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--s6)}
.dots button{display:inline-flex;align-items:center;gap:10px;font:inherit;font-weight:700;
  color:var(--on-navy-mute);background:transparent;border:2px solid rgba(255,255,255,.24);
  border-radius:999px;padding:11px 22px;cursor:pointer;transition:color .25s,border-color .25s,background .25s}
.dots button i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.4);transition:background .25s}
.dots button[aria-selected="true"]{color:#fff;border-color:var(--red);background:rgba(244,30,29,.14)}
.dots button[aria-selected="true"] i{background:var(--red)}
@media (max-width:900px){.rig-head{grid-template-columns:1fr}.rig .arrows{display:none}}





/* wheels that actually turn — each one is the real wheel lifted out of the drawing */
.wheels{position:absolute;inset:0;pointer-events:none}
.wheels i{position:absolute;left:var(--x);top:var(--y);width:var(--d);aspect-ratio:1;
  transform:translate(-50%,-50%);background-size:contain;background-repeat:no-repeat}
.rolling .slide.is-on .wheels i,
.rolling .slide.is-out .wheels i{animation:spin var(--t) linear infinite}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.wheels i{animation:none!important}}
/* END WHEELS */

/* ── the closing call block ──────────────────────────────── */
.callout{background:var(--navy);color:var(--on-navy);padding:var(--band) 0}
.callgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,124px);align-items:start}
.callout h2{max-width:16ch}
.ready{padding-top:6px}
.ready .lbl{display:block;font-size:var(--util);letter-spacing:.24em;text-transform:uppercase;
  font-weight:700;color:var(--on-navy-mute);padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.24)}
.ready ol{list-style:none;padding:0;margin:0;counter-reset:r}
.ready li{counter-increment:r;padding:var(--s3) 0;border-bottom:1px solid rgba(255,255,255,.14);
  display:grid;grid-template-columns:auto 1fr;gap:0 18px;align-items:baseline}
.ready li::before{content:counter(r,decimal-leading-zero);font-weight:900;font-size:1rem;
  color:var(--red);grid-row:span 2;font-variant-numeric:lining-nums tabular-nums}
.ready li b{font-size:clamp(1.05rem,.95rem + .4vw,1.3rem);font-weight:900;letter-spacing:-.02em}
.ready li span{color:var(--on-navy-mute);font-size:.95rem}
.ready .note{color:var(--on-navy-mute);font-size:.9rem;margin-top:var(--s3);max-width:38ch}
@media (max-width:900px){.callgrid{grid-template-columns:1fr}.ready{margin-top:var(--s8)}}
.callout .big{display:inline-block;margin:var(--s4) 0 0;white-space:nowrap;font-weight:900;
  font-size:clamp(2.6rem,1rem + 5.2vw,5.6rem);letter-spacing:-.045em;line-height:1;
  color:#fff;text-decoration:none;font-variant-numeric:lining-nums tabular-nums}
.callout .big:hover{color:#FFC9C9}
.callout p{color:#D8E6F8;max-width:44ch;margin-top:var(--s3)}
.callout .row{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s6)}
.callout .tel.ghost{color:#fff;border-color:rgba(255,255,255,.6)}
.callout .tel.ghost:hover{background:#fff;color:var(--navy)}

/* ── forms ───────────────────────────────────────────────── */
.sheet{display:grid;gap:2px;max-width:720px}
.sheet .hd{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding-bottom:14px;border-bottom:2px solid currentColor;margin-bottom:10px}
.sheet .hd b{font-weight:900;font-size:1.1rem}
.sheet .hd span{font-size:var(--util);letter-spacing:.18em;text-transform:uppercase;font-weight:700;opacity:.7}
.sheet label{display:block;padding:16px 0 2px}
.sheet label span{display:block;font-size:var(--util);letter-spacing:.18em;text-transform:uppercase;
  font-weight:700;opacity:.72;margin-bottom:5px}
.sheet input,.sheet textarea{font:inherit;width:100%;padding:10px 0;border:0;border-bottom:1px solid var(--line);
  background:transparent;color:inherit;min-height:44px;border-radius:0}
.sheet input:focus-visible,.sheet textarea:focus-visible{outline:none;border-bottom:2px solid var(--red)}
.sheet .two{display:grid;gap:0 28px;grid-template-columns:1fr 1fr}
.sheet .tel{margin-top:30px;justify-self:start}
.callout .row{margin-bottom:var(--s2)}
.fine{margin-top:14px;color:var(--mute);font-size:.9rem}
@media (max-width:760px){.sheet .two{grid-template-columns:1fr}}

/* ── the marquee: what rides with us, running continuously ── */
.marquee{background:var(--navy);color:var(--on-navy);padding:22px 0;overflow:hidden;
  border-top:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14)}
.marquee .track{display:flex;gap:0;width:max-content;animation:slide 42s linear infinite}
.marquee:hover .track{animation-play-state:paused}
.marquee span{display:inline-flex;align-items:center;gap:38px;padding-right:38px;
  font-weight:900;font-size:clamp(1rem,.85rem + .6vw,1.35rem);letter-spacing:-.02em;white-space:nowrap}
.marquee span::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--red);flex:none}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── the rig: the trailer changes to fit the machine ── */
.rig{background:var(--navy);color:var(--on-navy);padding:var(--band) 0;position:relative;z-index:4}
.rig h2{max-width:12ch}
.rig-head{display:block}
@media (max-width:900px){.rig-head{grid-template-columns:1fr}}
.rig .deck{fill:rgba(198,219,245,.14)}
.rig .clear{stroke:rgba(255,255,255,.5);stroke-width:2;stroke-dasharray:9 9}
.rig .clearlbl{fill:var(--on-navy-mute);font-size:15px;font-weight:700;letter-spacing:.18em}
.rig .load{fill:rgba(244,30,29,.12)}
.rig .sub{color:#D8E6F8;max-width:46ch;margin-top:var(--s3)}
.rig .stage{margin-top:var(--s6)}
.rig svg{width:100%;height:auto;overflow:visible}
.rig .ln{fill:none;stroke:#C6DBF5;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.rig .ground{stroke:rgba(255,255,255,.35);stroke-width:2.4}
.rig .load{fill:none;stroke:var(--red);stroke-width:4;stroke-linejoin:round}
.rig .wheel{fill:none;stroke:#C6DBF5;stroke-width:3.2}
.rig .picker{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--s4)}
.rig .picker button{font:inherit;font-weight:700;color:var(--on-navy-mute);background:transparent;
  border:2px solid rgba(255,255,255,.28);border-radius:999px;padding:11px 22px;cursor:pointer;
  transition:color .25s,border-color .25s,background .25s}
.rig .picker button[aria-selected="true"]{color:#fff;border-color:var(--red);background:rgba(244,30,29,.16)}
.rig .cap{margin-top:var(--s4);min-height:3.2em}
.rig .cap b{display:block;font-size:clamp(1.2rem,1rem + .9vw,1.7rem);font-weight:900;letter-spacing:-.02em}
.rig .cap span{display:block;margin-top:6px;color:var(--on-navy-mute);max-width:44ch}
@media (prefers-reduced-motion:reduce){.marquee .track{animation:none}}

/* ── the footer: link columns across the full width, then the name at full size ── */
footer{background:var(--deep);color:var(--on-navy);padding-top:var(--band);overflow:hidden}
.footgrid{display:grid;grid-template-columns:1.5fr .8fr 1fr 1.2fr;gap:clamp(28px,4vw,72px)}
.fcol{display:flex;flex-direction:column;align-items:flex-start}
.fcol .lbl{font-size:var(--util);letter-spacing:.24em;text-transform:uppercase;font-weight:700;
  color:var(--on-navy-mute);padding-bottom:14px;margin-bottom:18px;width:100%;
  border-bottom:1px solid rgba(255,255,255,.22)}
.fcol p{color:var(--on-navy-mute);max-width:34ch;font-size:.95rem}
.fcol a{color:#D8E6F8;text-decoration:none;padding:5px 0;transition:color .2s}
.fcol a:hover{color:#fff}
.fcol .fbig{font-weight:900;letter-spacing:-.04em;color:#fff;white-space:nowrap;line-height:1;
  font-size:clamp(1.5rem,1rem + 1.5vw,2.3rem);padding:0 0 10px;
  font-variant-numeric:lining-nums tabular-nums}
.fcol .fbig:hover{color:#FFC9C9}
.fcol .hrs{color:var(--on-navy-mute);font-size:.85rem;margin-top:10px}
.legal-note{flex-basis:100%;opacity:.72;line-height:1.5;max-width:96ch}
.legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;
  margin-top:var(--s8);padding-top:var(--s3);color:var(--on-navy-mute);font-size:.85rem;
  border-top:1px solid rgba(255,255,255,.18)}
.wordmark{margin-top:var(--s6);font-weight:900;white-space:nowrap;text-align:center;
  font-size:12.2vw;line-height:.74;letter-spacing:-.045em;color:rgba(255,255,255,.13);
  margin-bottom:-.17em;user-select:none}
@media (max-width:900px){
  .footgrid{grid-template-columns:1fr 1fr;gap:var(--s6)}
  .legal{margin-top:var(--s8)}
  /* one line does not fit a phone — let it break into two */
  .wordmark{font-size:15.4vw;white-space:normal;line-height:.86;margin-bottom:-.12em}
}

/* ── the auction yards we run out of ─────────────────────── */
.yards{background:var(--paper);padding:var(--band) 0 0;position:relative}
.yband{position:relative;margin-top:var(--after-head)}
/* the logos keep their own colour — greyed out they read as filler */
.ymarquee{position:relative;z-index:5;overflow:hidden;padding:34px 0 36px;background:var(--paper)}
.ytrack{display:flex;width:max-content;animation:yslide 46s linear infinite}
.ymarquee:hover .ytrack{animation-play-state:paused}
.ytrack span{display:inline-flex;align-items:center;gap:clamp(30px,3.2vw,58px);
  padding-right:clamp(30px,3.2vw,58px);white-space:nowrap}
.ytrack img{height:clamp(30px,2.8vw,46px);width:auto;display:block}
.ytrack span::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--red);flex:none}
@keyframes yslide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.yards{overflow:hidden}
/* a lane for the route to turn in — no rule above the numbers, the numbers
   carry their own hairlines and a second heavy line just crowded them */
.ystrip{position:relative}
.yroute{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:5}
.yroute path{fill:none;stroke:var(--red);stroke-width:3;stroke-linecap:round}
.ystats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,80px);
  margin:0;position:relative;z-index:4;background:var(--paper)}
.ystats > div{display:flex;flex-direction:column;padding-bottom:var(--s2)}
.ystats dt{font-size:clamp(3rem,1rem + 5.4vw,6.4rem);font-weight:900;line-height:.82;
  letter-spacing:-.055em;color:var(--navy);font-variant-numeric:lining-nums tabular-nums}
.ystats dt{padding-bottom:18px;border-bottom:1px solid var(--line)}
.ystats dd{margin:16px 0 0;color:var(--mute);font-size:.95rem;line-height:1.45}
@media (max-width:760px){.ystats{grid-template-columns:1fr;gap:var(--s4)}}
.ynote{margin:var(--s6) 0 var(--s6);color:var(--mute);font-size:.78rem;max-width:78ch;line-height:1.5}
.ystop{position:absolute;z-index:6;transform:translate(-50%,-100%) scale(.4);
  transform-origin:50% 100%;opacity:0;pointer-events:none;text-align:center;
  transition:transform .5s cubic-bezier(.34,1.56,.64,1),opacity .3s}
.ystop.set{transform:translate(-50%,-100%) scale(1);opacity:1}
@media (max-width:760px){.ystop span{display:none}}
.ystop svg{width:46px;height:auto;margin:0 auto;filter:drop-shadow(0 6px 12px rgba(3,25,60,.35))}
/* the label sits BESIDE the pin, so it never collides with the copy above */
.ystop span{position:absolute;left:100%;bottom:4px;margin-left:12px;white-space:nowrap;
  font-size:var(--util);letter-spacing:.2em;text-transform:uppercase;
  font-weight:900;color:var(--navy)}
@media (prefers-reduced-motion:reduce){.ytrack{animation:none}}

/* ── the section header, one pattern everywhere ─────────── */
.shead{max-width:min(62ch,58%)}
.shead .eyebrow{display:block;font-size:var(--util);letter-spacing:.24em;text-transform:uppercase;
  font-weight:900;color:var(--red);margin-bottom:14px}
.shead .eyebrow::after{content:"";display:block;width:44px;height:3px;background:var(--red);
  margin-top:14px}
.shead h2{margin:0}
.shead .lede{margin-top:var(--s4);max-width:56ch}
.shead.on-navy .lede{color:#D8E6F8}
.shead + *{margin-top:var(--after-head)}
@media (max-width:900px){.shead{max-width:none}}