/* Chupp Logistics — the Chupp family skin (2026-10-07).
   Same system as chuppindustrial.com (08 - Templates/Design Kit/Chupp Industrial Design
   System): Montserrat 800 uppercase headings + Roboto body, the 96x4 red rule under every
   heading, floating pill nav, 6px buttons, full-bleed hero media with copy bottom-left over
   a two-gradient scrim, two-line hero headline (white, then red).
   Only the colours are Chupp Logistics: navy #02468D takes charcoal's job, #F41E1D is the red.
   Loaded AFTER site.css on every page; delete the <link> to fall back to the old look. */

:root{
  --navy:#02468D; --navy-deep:#023466; --red:#F41E1D; --red-hover:#C91514;
  --ink:#1F2733; --mute:#5E6875; --line:#E6E6E6; --panel:#F2F4F7;
  --hfont:"Montserrat",system-ui,sans-serif;
}
body{font-family:"Roboto",system-ui,sans-serif;color:#333}
h1,h2,h3,.bar nav a,.tel,.rigcap b,.dots button,.ready .lbl,footer .lbl{font-family:var(--hfont)}
h1,h2{font-weight:800;text-transform:uppercase;letter-spacing:-.025em;line-height:1.05}
h2{font-size:clamp(1.9rem,1rem + 2.6vw,3.2rem)}
h3{font-weight:800;letter-spacing:-.01em;line-height:1.15}
/* the house mark: 96 x 4 red rule, square ends, 12px under the heading */
.shead h2::after,.page h1::after,.callout h2::after{content:"";display:block;width:96px;height:4px;
  background:var(--red);margin-top:12px}
/* Braden 2026-09-08: no small labels above the big headline */
.eyebrow{display:none!important}

/* buttons: 6px, uppercase, the number is the button */
.tel{border-radius:6px;font-weight:700;text-transform:uppercase;letter-spacing:.025em;font-size:.95rem;
  box-shadow:0 10px 15px -3px rgba(0,0,0,.2),0 4px 6px -4px rgba(0,0,0,.2)}
.tel:hover{background:var(--red-hover)}
.tel.glass{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.45);color:#fff;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:none}
.tel.glass:hover{background:rgba(255,255,255,.25)}

/* floating pill nav */
.bar{inset:14px 0 auto 0;height:auto;background:transparent;border:0;backdrop-filter:none;pointer-events:none}
.bar .wrap{pointer-events:auto;max-width:1280px;margin-inline:auto;width:calc(100% - 28px);padding:8px 8px 8px 22px;
  background:#fff;border:1px solid var(--line);border-radius:999px;box-shadow:0 8px 32px rgba(20,23,28,.16)}
.bar .logo img{height:44px}
.bar nav{gap:6px}
.bar nav a{font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--ink);
  padding:10px 14px;border-radius:999px;border:0}
.bar nav a:hover{color:var(--red)}
.bar nav a[aria-current="page"]{background:var(--navy);color:#fff}
.bar .tel{height:44px;border-radius:999px;box-shadow:none;font-size:.85rem}
@media (max-width:900px){.bar .wrap{padding-left:16px}.bar .logo img{height:38px}}
.page{padding-top:110px}

/* ── home hero: full-bleed media, copy bottom-left ── */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;background:var(--navy-deep);color:#fff}
.hero-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 50%}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(2,22,48,.78) 0%,rgba(2,22,48,.45) 30%,rgba(2,22,48,0) 62%),
             linear-gradient(to right,rgba(2,22,48,.40) 0%,rgba(2,22,48,0) 48%)}
.hero-copy{position:relative;z-index:2;width:100%;max-width:1280px;margin-inline:auto;
  padding:0 var(--pad) clamp(56px,11vh,120px)}
.hero h1{font-size:clamp(2.1rem,.9rem + 4.4vw,4.4rem);text-shadow:0 2px 18px rgba(0,0,0,.45);max-width:24ch}
.hero h1 .l2{display:block;color:var(--red)}
.hero .sub{margin-top:20px;max-width:46ch;font-size:clamp(1rem,.9rem + .4vw,1.2rem);line-height:1.6;color:rgba(255,255,255,.92)}
.hero .row{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.hero .tel{height:52px;padding:0 28px}
.hero-copy>*{animation:up .6s ease-out both}
.hero-copy>*:nth-child(2){animation-delay:.08s}.hero-copy>*:nth-child(3){animation-delay:.16s}
@keyframes up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (max-width:900px){
  .hero-media{object-position:66% 50%}
  .hero::after{background:linear-gradient(to top,rgba(2,22,48,.86) 0%,rgba(2,22,48,.58) 40%,rgba(2,22,48,0) 66%)}
  .hero-copy{padding-bottom:40px}
  .hero .row .tel{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){.hero-copy>*{animation:none}}

/* trust ribbon right under the hero, like the parent site */
.ribbon{background:#fff;border-bottom:1px solid var(--line)}
.ribbon .wrap{max-width:1280px;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding-block:22px;text-align:center}
.ribbon b{display:block;font:800 clamp(1.3rem,1rem + 1vw,1.9rem)/1 var(--hfont);color:var(--navy);letter-spacing:-.02em}
.ribbon span{display:block;margin-top:6px;font:700 .72rem/1.3 var(--hfont);text-transform:uppercase;letter-spacing:.08em;color:var(--mute)}
@media (max-width:700px){.ribbon .wrap{grid-template-columns:repeat(2,1fr);row-gap:20px}}

/* one content width for the whole site, matching the parent (1280) */
:root{--w:min(1280px,100%);--edge:max(var(--pad), calc((100vw - 1280px)/2 + var(--pad)))}
.rig h2{max-width:18ch}
.callout h2{max-width:22ch}
.wordmark{font-family:var(--hfont);font-weight:800}

/* ── the drawn hero (2026-10-07): the red-pencil rig drives in place, the horizon rolls past.
   Pure CSS — no video file, so nothing to download and nothing to block on a phone.
   The art is open line work, so nothing may cross the rig: the horizon sits ABOVE its roofline. ── */
.hero.drawn{--rigw:min(1240px,88vw);background:var(--navy);flex-direction:column;align-items:stretch;
  justify-content:space-between;min-height:max(640px,100svh)}
.hero.drawn::after{display:none}
.hero.drawn .hero-copy{padding-top:clamp(112px,15vh,170px);padding-bottom:0}
.hero.drawn h1{text-shadow:none}
.drive{position:relative;height:calc(var(--rigw)*303/1600 + 70px);margin-top:32px;overflow:hidden}
.drive .hills{position:absolute;left:0;right:0;bottom:calc(var(--rigw)*303/1600 - 30px);height:120px;
  background:url(hero_hills.svg) repeat-x 0 100%/1200px 120px;animation:pan1 26s linear infinite}
@keyframes pan1{to{background-position:-1200px 100%}}
.rigbox{position:absolute;left:50%;bottom:0;width:var(--rigw);aspect-ratio:1600/303;transform:translateX(-50%)}
.rigbox img{width:100%;height:100%;object-fit:contain;object-position:center bottom;animation:ride .17s linear infinite}
.rigbox .wheels i{animation:spin var(--t) linear infinite}
.lane{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.45);overflow:hidden}
.lane i{position:absolute;top:0;bottom:0;left:0;width:calc(100% + 96px);
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.95) 0 44px,transparent 44px 96px);animation:rollroad .42s linear infinite}
@media (max-width:900px){
  /* a phone is too narrow for the whole rig: let the trailer run off the left edge, keep the cab and load */
  .hero.drawn{--rigw:150vw}
  .hero.drawn .hero-copy{padding-top:118px}
  .rigbox{left:auto;right:-5vw;transform:none}
}
@media (prefers-reduced-motion:reduce){.drive .hills,.rigbox img,.rigbox .wheels i,.lane i{animation:none!important}}

/* ── 2026-10-07 pass 2: the hero hits harder, numbers up top, room for the VSL ── */
.hero.drawn .hero-copy{padding-top:clamp(132px,17vh,190px)}
.hero.drawn h1{font-size:clamp(2.7rem,.4rem + 7.6vw,8.2rem);line-height:.92;letter-spacing:-.035em;max-width:none}
.hero.drawn .sub{font-size:clamp(1.05rem,.9rem + .55vw,1.4rem);max-width:52ch;margin-top:26px;color:#DCE8F7}
.hero .row{align-items:center;gap:22px}
.hero .tel{height:58px;padding:0 32px;font-size:1.05rem}
.play{display:inline-flex;align-items:center;gap:14px;color:#fff;text-decoration:none;
  font:700 .95rem/1 var(--hfont);text-transform:uppercase;letter-spacing:.06em}
.play i{width:52px;height:52px;border-radius:50%;border:2px solid rgba(255,255,255,.55);position:relative;transition:background .2s,border-color .2s}
.play i::after{content:"";position:absolute;left:21px;top:16px;border-left:14px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent}
.play:hover i{background:var(--red);border-color:var(--red)}
@media (max-width:900px){.hero .row .tel{flex:1 1 100%}.play{margin-top:4px}}

/* ribbon = the proof, big and left-aligned between rules */
.ribbon .wrap{grid-template-columns:repeat(4,1fr);gap:0;padding-block:0;text-align:left}
.ribbon .wrap>div{padding:30px clamp(16px,2.4vw,36px);border-left:1px solid var(--line)}
.ribbon .wrap>div:first-child{border-left:0;padding-left:0}
.ribbon b{font-size:clamp(2rem,1rem + 2.6vw,3.6rem);letter-spacing:-.03em;font-variant-numeric:lining-nums tabular-nums}
.ribbon span{margin-top:10px;font-size:.74rem}
@media (max-width:700px){
  .ribbon .wrap{grid-template-columns:1fr 1fr}
  .ribbon .wrap>div{padding:22px 16px;border-left:0;border-top:1px solid var(--line)}
  .ribbon .wrap>div:nth-child(-n+2){border-top:0}
  .ribbon .wrap>div:nth-child(odd){padding-left:0}
}

/* the VSL slot */
.vsl{background:var(--panel)}
.vslgrid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(32px,5vw,80px);align-items:center}
.vsl-frame{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:var(--navy);
  box-shadow:0 30px 60px -20px rgba(2,30,70,.45)}
.vsl-frame img{position:absolute;left:6%;right:6%;bottom:14%;width:88%;height:auto;opacity:.9}
.vsl-frame::after{content:"";position:absolute;left:0;right:0;bottom:14%;height:2px;background:rgba(255,255,255,.35)}
.vsl-play{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);width:92px;height:92px;border-radius:50%;
  border:0;background:var(--red);cursor:pointer;box-shadow:0 12px 30px rgba(0,0,0,.3);transition:transform .2s}
.vsl-play:hover{transform:translate(-50%,-50%) scale(1.06)}
.vsl-play i{position:absolute;left:37px;top:28px;border-left:26px solid #fff;border-top:18px solid transparent;border-bottom:18px solid transparent}
@media (max-width:900px){.vslgrid{grid-template-columns:1fr}.vsl-play{width:72px;height:72px}.vsl-play i{left:29px;top:22px;border-left-width:20px;border-top-width:14px;border-bottom-width:14px}}
.lede{font-size:1.15rem;line-height:1.65}

/* ── polish: tighter rhythm, and a heading never sits alone in half a page ── */
:root{--band:clamp(72px,7vw,112px)}
#origin .shead,.yards .shead,#area .shead{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  column-gap:clamp(32px,6vw,96px);align-items:end;max-width:none}
#origin .shead h2,.yards .shead h2,#area .shead h2{grid-column:1}
#origin .shead .lede,.yards .shead .lede,#area .shead .lede{grid-column:2;margin-top:0;max-width:52ch}
@media (max-width:900px){
  #origin .shead,.yards .shead,#area .shead{display:block}
  #origin .shead .lede,.yards .shead .lede,#area .shead .lede{margin-top:var(--s3)}
}
@media (min-width:901px){.vslgrid{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}
.vsl h2{font-size:clamp(1.9rem,1rem + 2.2vw,3rem)}
.vsl .shead{max-width:none}