*,*::before,*::after{box-sizing:border-box}

:root{
  --asphalt:#16130F;
  --headlamp:#F3ECDD;
  --amber:#D99A2B;
  --cabmud:#241E16;
  --tailgate:#0E0B08;
  --steel:#8D867A;
  --waybill:#F7F1E4;
  --route:#C56A2E;
  --tread:#2E2820;
  --deeper:#0A0806;
  --ink:#2A2118;
  --dieselink:#57493A;
}

html{scroll-behavior:smooth}

body{
  margin:0;
  font-size:16px;
  font-family:'Segoe UI',Arial,Helvetica,sans-serif;
  background-color:var(--asphalt);
  color:var(--headlamp);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;display:block}
a{color:var(--amber);text-decoration:none}
a:hover{color:var(--headlamp)}

.container{max-width:1180px;margin:0 auto;padding:0 24px}

/* navigation */
.markernav{
  position:sticky;
  top:0;
  z-index:60;
  background-color:var(--cabmud);
}
.hazard-strip{
  height:16px;
  background:repeating-linear-gradient(-45deg,var(--route) 0 14px,var(--tread) 14px 28px);
  position:relative;
}
.hazard-strip .lamps{margin:0;padding:4px 24px;display:flex;gap:6px}
.hazard-strip .lamps i{width:8px;height:8px;border-radius:50%;background:var(--amber);display:inline-block;animation:blink 1.6s infinite}
.hazard-strip .lamps i:nth-child(2){animation-delay:.3s}
.hazard-strip .lamps i:nth-child(3){animation-delay:.6s}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.4}}
.navrow{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:10px}
.truck-glyph{
  width:26px;height:18px;position:relative;
}
.truck-glyph .cab{
  position:absolute;left:0;bottom:1px;width:12px;height:7px;
  background:transparent;border:2px solid var(--amber);border-radius:3px 0 0 0;
}
.truck-glyph .beam{
  position:absolute;left:6px;top:0;width:18px;height:5px;
  background:linear-gradient(90deg,var(--amber),transparent);
  border-radius:4px;
}
.brand .name{
  color:var(--headlamp);
  font-weight:bold;
  letter-spacing:.28em;
  font-size:21px;
  text-transform:uppercase;
  font-family:'Trebuchet MS',sans-serif;
}
.brand .name span{color:var(--amber)}
.links{display:flex;align-items:center;gap:0}
.navlink{
  color:var(--steel);
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:12px;
  font-weight:600;
  padding:10px 14px;
  position:relative;
  display:block;
  font-family:'Trebuchet MS',sans-serif;
}
.navlink:hover{color:var(--amber)}
.navlink:hover::after{
  content:'';position:absolute;left:14px;right:14px;bottom:2px;height:2px;background:var(--amber);
}
.navlink::before{
  content:'';display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--amber);margin-right:8px;vertical-align:middle;
}
.linkdot{width:0}
.navtoggle{display:none}

@media(max-width:820px){
  .links{display:none;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:var(--cabmud);border-top:1px solid var(--tread)}
  .links.open{display:flex}
  .navlink{width:100%;padding:14px 24px;border-bottom:1px solid var(--tread)}
  .navtoggle{
    display:block;background:none;border:1px solid var(--tread);color:var(--headlamp);
    font-size:16px;padding:8px 14px;cursor:pointer;border-radius:4px;
  }
  .markernav{position:relative}
  .navrow{height:60px}
}

/* hero */
.nighthaulhero{
  background-color:var(--asphalt);
  padding:72px 0 0;
  position:relative;
  overflow:hidden;
}
.hero-grid{display:flex;gap:48px;align-items:center}
.hero-left{flex:0 0 55%;max-width:55%}
.eyebrow{
  display:inline-block;background:var(--amber);color:var(--asphalt);
  text-transform:uppercase;letter-spacing:.14em;font-size:12px;font-weight:bold;
  padding:6px 14px;border-radius:2px;margin-bottom:22px;
}
.hero-left h1{
  color:var(--headlamp);
  font-size:46px;
  line-height:1.12;
  margin:0 0 20px;
  font-family:Georgia,'Times New Roman',serif;
  font-weight:700;
}
.hero-left h1 .amberword{color:var(--amber)}
.hero-left p{font-size:17px;color:var(--steel);margin:0 0 30px;max-width:52ch}
.cta-row{display:flex;flex-wrap:wrap;gap:14px}
.cta{
  display:inline-block;padding:13px 26px;border-radius:3px;font-weight:bold;
  letter-spacing:.04em;
}
.cta-primary{background:var(--amber);color:#16130F}
.cta-primary:hover{background:var(--route);color:var(--headlamp)}
.cta-sec{border:1px solid var(--headlamp);color:var(--headlamp)}
.cta-sec:hover{background:var(--headlamp);color:var(--asphalt)}

.hero-right{flex:0 0 45%;max-width:45%;position:relative;height:520px}
.sky-line{height:120px;position:absolute;top:-40px;left:0;right:0;text-align:center;z-index:2}
.moon{
  width:46px;height:46px;border-radius:50%;background:#F6EFDF;
  position:absolute;right:18%;top:20px;
}
.moon::before{
  content:'';position:absolute;left:8px;top:4px;width:46px;height:46px;border-radius:50%;
  background:var(--asphalt);
}
.star{position:absolute;width:3px;height:3px;background:var(--headlamp);border-radius:50%}
.star.s1{right:30%;top:50px}
.star.s2{right:52%;top:18px}
.route-map-card{
  position:absolute;top:60px;right:0;width:190px;height:150px;
  background:var(--waybill);border-radius:3px;z-index:5;padding:12px;
  box-shadow:0 14px 30px #0a0808;
}
.route-map-card .cardhead{font-size:9px;letter-spacing:.14em;color:#57493A;text-transform:uppercase;font-weight:bold}
.route-map-card .mapbox{position:relative;height:96px;margin-top:8px;border-left:1px solid #CFC4AB;border-bottom:1px solid #CFC4AB}
.map-dot{position:absolute;width:8px;height:8px;background:var(--route);border-radius:50%}
.map-dot.d1{left:6px;top:20px}
.map-dot.d2{left:52px;top:66px}
.map-dot.d3{left:96px;top:30px}
.map-dot.d4{left:140px;top:52px}
.map-flag{position:absolute;left:2px;top:14px;font-size:0;width:0;height:0;border-left:2px solid var(--amber);border-right:2px solid var(--amber);border-bottom:4px solid transparent;border-top:8px solid var(--amber)}
.map-line{
  position:absolute;left:10px;top:25px;right:4px;height:5px;
  background:#E2543A;
  border-radius:3px;
}
.roadscene{position:absolute;left:0;right:0;top:120px;height:400px}
.truck-outer{position:absolute;left:0;top:60px;width:390px;height:200px}
.trailer{
  position:absolute;top:14px;left:150px;width:230px;height:120px;
  background:var(--waybill);border:2px solid #CFC4AB;border-radius:3px;
}
.trailer::before{
  content:'';position:absolute;top:18px;left:0;right:0;height:6px;background:var(--route);
}
.ht-mark{
  position:absolute;top:32px;left:0;right:0;text-align:center;color:#2A2118;
  font-weight:bold;font-size:30px;letter-spacing:.3em;font-family:Georgia,serif;
}
.autotruck{
  position:absolute;top:76px;width:34px;height:70px;
  border:3px solid var(--amber);border-radius:6px 0 0 0;
}
.autotruck::before{
  content:'';position:absolute;top:-32px;left:0;width:3px;height:32px;background:var(--amber);
}
.autotruck .stack{position:absolute;top:-32px;left:10px;width:6px;height:18px;background:var(--amber)}
.autotruck .win{position:absolute;top:6px;left:0;width:100%;height:0;border-top:1px solid var(--tread)}
.wheelrow{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:space-between;padding:0 6px}
.wheels{display:flex;gap:4px}
.wtmp{width:16px;height:16px;border-radius:50%;border:3px solid #2A2118;background:#C9BFAA}
.road-band{
  position:absolute;left:-40px;right:-40px;bottom:0;height:120px;
  background:var(--tailgate);border-top:3px solid #241E16;
}
.road-band::after{
  content:'';position:absolute;top:52px;left:0;right:0;height:3px;
  background:repeating-linear-gradient(90deg,#57493A 0 60px,transparent 60px 120px);
}
.road-mark{position:absolute;bottom:95px;width:7px;height:7px;border-radius:50%;background:var(--amber)}
.hl1{left:30%}.hl2{right:18%}
.mile-post{position:absolute;bottom:114px;right:20%;height:70px;width:10px;background:#241E16}
.mile-post::after{
  content:'';position:absolute;top:8px;left:10px;width:26px;height:22px;
  background:var(--waybill);color:#2A2118;font-size:13px;font-weight:bold;
  display:flex;align-items:center;justify-content:center;
}
.mile-post.red::after{content:'88'}
.thermos{
  position:absolute;bottom:140px;left:88px;width:14px;height:34px;
  background:var(--steel);border-radius:2px 2px 5px 5px;
}
.thermos::before{content:'';position:absolute;top:-4px;left:-1px;width:6px;height:4px;background:var(--amber)}
.clip-rail{position:absolute;bottom:0;left:10%;width:320px;height:10px;background:var(--cabmud);border-radius:2px}
.clipboard{
  position:absolute;bottom:-10px;left:14%;width:120px;height:150px;
  background:var(--waybill);border-radius:3px;transform:rotate(-4deg);z-index:6;
  box-shadow:0 10px 20px #0a0808;
}
.clipboard::before{
  content:'';position:absolute;top:8px;left:50%;transform:translateX(-50%);
  width:22px;height:10px;background:#8D867A;border-radius:3px;
}
.clip-line{height:2px;background:#CFC4AB;margin:34px 12px 12px 12px}
.clip-line.short{margin-top:6px;background:#DBCFAE}
.clip-text{font-size:7px;color:#57493A;padding:0 12px;letter-spacing:.05em}
.white-beam1{
  position:absolute;bottom:30px;left:60px;width:130px;height:34px;
  background:#A97B2B;
  transform:skewX(-18deg);border-radius:3px 0 0 40px;
}
.white-beam2{
  position:absolute;bottom:30px;left:132px;width:110px;height:26px;
  background:#7A5A24;
  transform:skewX(-18deg);
}

@media(max-width:860px){
  .hero-grid{flex-direction:column;gap:30px}
  .hero-left{flex:1 1 auto;max-width:none}
  .hero-right{flex:1 1 auto;max-width:none;height:420px}
  .hero-left h1{font-size:34px}
}

/* waybill rows */
.waybill-stops{padding:78px 0 20px;background:var(--asphalt)}
.waybill-stops h2{
  color:var(--amber);font-family:Georgia,serif;font-size:32px;margin:0 0 8px;
}
.waybill-intro{color:var(--steel);max-width:60ch;margin:0 0 34px}
.waybill-rows{display:flex;flex-direction:column;gap:12px}
.waybill-row{
  display:flex;align-items:center;gap:22px;
  background:var(--waybill);border:1px solid var(--tread);
  padding:22px 24px;border-radius:3px;
}
.stop-flag{position:relative;flex:0 0 auto;text-align:center;width:54px}
.stop-flag .pole{width:3px;height:44px;background:#57493A;margin:0 auto}
.stop-flag .tri{
  width:0;height:0;border-left:12px solid transparent;border-right:12px solid transparent;
  border-top:22px solid var(--route);margin:0 auto;margin-bottom:-6px;
}
.stop-flag .code{font-size:9px;color:#57493A;font-weight:bold;margin-top:4px;letter-spacing:.06em}
.wb-mid{flex:1 1 auto}
.wb-mid h3{color:var(--ink);font-family:Georgia,serif;font-size:20px;margin:0 0 8px}
.wb-mid p{color:var(--dieselink);margin:0;line-height:1.6}
.odometer{flex:0 0 auto;text-align:center}
.odo-face{
  background:#241E16;border:2px solid #57493A;border-radius:5px;
  padding:10px 12px;color:var(--headlamp);font-family:'Courier New',monospace;
  letter-spacing:2px;border-collapse:collapse;
}
.odo-face .led{width:6px;height:6px;border-radius:50%;background:var(--amber);margin:0 auto 6px;animation:blink 1.2s infinite}
.odo-face .num{font-size:16px}
.odo-label{font-size:9px;color:#57493A;text-transform:uppercase;letter-spacing:.1em;margin-top:6px}

@media(max-width:760px){
  .waybill-row{flex-direction:column;align-items:flex-start;gap:16px}
  .stop-flag{flex-direction:row;align-items:center;gap:8px;width:auto;display:flex}
  .stop-flag .pole{width:40px;height:3px;margin:0}
  .stop-flag .tri{border-top:0;border-bottom:0;border-left:10px solid var(--route);border-top:10px solid transparent;border-bottom:10px solid transparent;margin:0}
  .stop-flag .code{margin:0}
  .odometer{align-self:flex-end}
}

/* metric band */
.mileage-metric{padding:8px 0;background:var(--tailgate)}
.metric-band{display:flex;text-align:center;border-top:1px solid var(--tread);border-bottom:1px solid var(--tread)}
.metric-cell{
  flex:1;padding:46px 10px;position:relative;
}
.metric-cell + .metric-cell::before{
  content:'';position:absolute;left:0;top:34%;bottom:34%;width:1px;background:#57493A;
}
.metric-num{
  color:var(--amber);font-size:44px;font-weight:bold;font-family:Georgia,serif;line-height:1;
}
.metric-label{
  color:var(--steel);text-transform:uppercase;letter-spacing:.1em;font-size:11px;
  margin-top:12px;font-family:'Trebuchet MS',sans-serif;
}
@media(max-width:620px){
  .metric-band{flex-wrap:wrap}
  .metric-cell{flex:1 1 50%}
}

/* statement */
.statement-band{background:var(--cabmud);padding:64px 0}
.statement-inner{max-width:820px;margin:0 auto;border-left:4px solid var(--route);padding-left:28px}
.statement-inner blockquote{
  margin:0;color:var(--headlamp);font-size:26px;line-height:1.5;
  font-family:Georgia,serif;
}
.statement-inner .by{
  margin-top:20px;color:var(--steel);text-transform:uppercase;letter-spacing:.14em;
  font-size:12px;font-weight:bold;
}
@media(max-width:600px){.statement-inner blockquote{font-size:20px}}

/* about band second section on homepage extra richness */
.feature-lane{padding:76px 0;background:var(--asphalt)}
.feature-lane h2{color:var(--amber);font-family:Georgia,serif;font-size:30px;margin:0 0 14px}
.lane-grid{display:flex;gap:40px;align-items:flex-start}
.lane-panel{color:var(--steel)}
.lane-panel strong{color:var(--headlamp)}
@media(max-width:820px){.lane-grid{flex-direction:column}}

/* route highlight section extra (text rows) */
.route-notes{padding:10px 0 0;background:var(--asphalt)}
.route-notes h2{color:var(--amber);font-family:Georgia,serif;font-size:30px;margin:0 0 14px}
.note-list{display:flex;flex-direction:column;gap:4px;border-left:1px solid var(--tread);padding-left:26px}
.note-item{display:flex;gap:18px;padding:22px 0;border-bottom:1px solid var(--tread)}
.note-mark{color:var(--route);font-weight:bold;font-family:'Courier New',monospace;flex:0 0 64px}
.note-item h3{color:var(--headlamp);margin:0 0 8px;font-size:19px;font-family:Georgia,serif}
.note-item p{color:var(--steel);margin:0;line-height:1.65;max-width:70ch}

/* contact band */
.cta-band{padding:84px 0}
.cta-band h2{color:var(--amber);font-family:Georgia,serif;font-size:34px;margin:0 0 14px}
.cta-band p{color:var(--steel);max-width:50ch;margin:0 0 30px}
.contact-meta{margin-top:40px;display:flex;flex-wrap:wrap;gap:34px;color:var(--steel)}
.contact-meta div strong{display:block;color:var(--headlamp);text-transform:uppercase;font-size:12px;letter-spacing:.1em;margin-bottom:6px}

/* footer */
.depotfooter{background:var(--deeper);padding-top:0;color:var(--steel)}
.mile-strip{height:16px;margin:0;padding:0;background:#C9BFAA}
.mile-strip::before{
  content:'';position:absolute;height:14px;top:1px;left:0;right:0;
  background:repeating-linear-gradient(90deg,#C9BFAA 0 44px,#6A6150 44px 48px,#C9BFAA 48px 92px,#6A6150 92px 96px,#2E2A23 96px 200px);
}
.footer-center{padding:54px 24px 20px;text-align:center;position:relative;z-index:1}
.footer-glyph{width:40px;height:26px;position:relative;margin:0 auto 14px}
.footer-glyph .fcab{position:absolute;left:2px;bottom:0;width:18px;height:10px;border:2px solid var(--amber);border-radius:3px 0 0 0}
.footer-glyph .fbeam{position:absolute;left:10px;top:1px;width:26px;height:7px;background:linear-gradient(90deg,var(--amber),transparent);border-radius:4px}
.foot-brand{color:var(--headlamp);font-weight:bold;letter-spacing:.34em;font-size:24px;text-transform:uppercase;font-family:'Trebuchet MS',sans-serif}
.foot-brand span{color:var(--amber)}
.footer-links{margin:22px 0 0;display:flex;justify-content:center;flex-wrap:wrap;gap:6px 22px}
.footer-links a{color:var(--steel);text-transform:uppercase;font-size:12px;letter-spacing:.1em;position:relative;padding-bottom:4px}
.footer-links a:hover{color:var(--amber)}
.footer-links a:hover::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--amber)}
.roll-divider{display:flex;align-items:center;justify-content:center;gap:18px;margin:28px 0 8px}
.chev{width:26px;height:10px;background:repeating-linear-gradient(-45deg,var(--route) 0 6px,var(--deeper) 6px 12px)}
.roll-door{display:flex;flex-direction:column;width:120px;background:#0E0B08;border:2px solid var(--tread);border-radius:4px 4px 0 0;padding:4px 0;position:relative}
.roll-door::before{
  content:'';position:absolute;top:-10px;left:50%;transform:translateX(-50%);
  width:26px;height:4px;background:var(--amber);border-radius:2px;box-shadow:0 0 8px var(--amber);
}
.roll-door i{height:6px;border-top:1px solid #57493A;margin:1px 12px}
.legal-line{border-top:1px solid var(--tread);padding:22px 24px 34px;margin-top:20px;text-align:center;font-size:13px;color:#8D867A;line-height:2}
.legal-line a{color:var(--steel)}
.legal-line a:hover{color:var(--amber)}

@media(max-width:620px){
  .footer-links{flex-direction:column;gap:10px}
}

/* scroll reveal, safe without JS */
.fade-up{opacity:1;transform:none}
.fade-up.visible{opacity:1;transform:none}