/* ============================================================
   TOTAL TRUCKING — built on the ON.energy style system (Design.md)
   Univers Next Pro substituted with Inter 300/400 per Design.md.
   Weights 300 and 400 only. Shadowless. No gradients.
   ============================================================ */
:root{
  --caution-yellow:#fff313;
  --ghost-yellow:#e8dc11;
  --midnight-steel:#000000;
  --industrial-white:#eeeeee;
  --carbon:#333333;
  --gunmetal:#4b4b4b;
  --aluminum:#afafaf;

  /* CTA button — a distinct amber, one shade off the caution-yellow used
     for full-bleed sections, so a filled button never disappears into a
     yellow statement section behind it. */
  --btn-yellow:#ffc107;
  --btn-yellow-hover:#e6ac00;

  /* Header CTA only — the one color in the whole system that appears
     nowhere else. Not part of the ON.energy palette; used sparingly and
     only here so it keeps its job as a single unmistakable signal. */
  --header-cta:#e85d04;
  --header-cta-hover:#c94e02;

  --font:"Inter","Neue Haas Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;

  --text-micro:10px;
  --text-caption:12px;
  --text-body-sm:14px;
  --text-body:16px;
  --text-heading:24px;
  --text-heading-lg:36px;
  --text-display:64px;

  --r-nav:6px;
  --r-card:9px;
  --r-image:16px;
  --r-button:6px;
  --r-section:24px;

  --s-4:4px; --s-16:16px; --s-20:20px; --s-24:24px;
  --s-36:36px; --s-60:60px; --s-120:120px; --s-200:200px;

  --gutter:40px;
  --section-gap:clamp(60px,9vw,120px);
  --prose:500px;
  --grid-max:1240px;

  /* Motion tokens — shared by every transition/animation on the site.
     Sourced, not approximated: strong UI ease-out/ease-in-out curves. */
  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --ease-in-out:cubic-bezier(0.77,0,0.175,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--midnight-steel);
  color:var(--industrial-white);
  font-family:var(--font);
  font-weight:400;
  font-size:var(--text-body);
  line-height:1.38;
  letter-spacing:-0.02em;
}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--caution-yellow);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (prefers-reduced-motion:reduce){.btn:active,.btn-header:active,.btn-ghost:active,.pill:active{transform:none!important}}

/* ---------- type roles ---------- */
.display{
  font-size:clamp(38px,7vw,var(--text-display));
  font-weight:300;line-height:1.00;letter-spacing:-0.04em;
  margin:0;text-wrap:balance;
}
.h-lg{
  font-size:clamp(28px,4.4vw,var(--text-heading-lg));
  font-weight:300;line-height:1.13;letter-spacing:-0.04em;
  margin:0;text-wrap:balance;
}
.h-md{
  font-size:var(--text-heading);
  font-weight:300;line-height:1.17;letter-spacing:-0.04em;
  margin:0;text-wrap:balance;
}
.body{font-size:var(--text-body);font-weight:400;line-height:1.38;letter-spacing:-0.02em;margin:0}
.body-sm{font-size:var(--text-body-sm);font-weight:400;line-height:1.38;letter-spacing:normal;margin:0}
.caption{font-size:var(--text-caption);font-weight:400;line-height:1.20;letter-spacing:normal;margin:0}
.micro{font-size:var(--text-micro);font-weight:400;line-height:1.20;letter-spacing:normal;margin:0}
.prose{max-width:var(--prose)}
.stack{display:flex;flex-direction:column;gap:var(--s-16)}
.stack-lg{display:flex;flex-direction:column;gap:var(--s-24)}
.stack-xl{display:flex;flex-direction:column;gap:var(--s-36)}

/* ---------- sections: the three-mode rhythm ---------- */
.sec{padding:var(--section-gap) var(--gutter)}
.sec-dark{background:var(--midnight-steel);color:var(--industrial-white)}
.sec-light{background:var(--industrial-white);color:var(--midnight-steel)}
.sec-yellow{background:var(--caution-yellow);color:var(--midnight-steel)}
.sec-light .body,.sec-yellow .body{color:var(--midnight-steel)}
.sec-dark .body{color:var(--aluminum)}
.inner{max-width:var(--grid-max);margin:0 auto;width:100%}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:60;
  display:flex;align-items:center;gap:var(--s-16);
  padding:var(--s-16) var(--s-24);
  background:var(--midnight-steel);
  border-bottom:1px solid var(--gunmetal);
}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex:0 0 auto}
.logo-mark{
  width:30px;height:30px;border-radius:3px;overflow:hidden;display:block;flex:0 0 auto;
}
.logo-mark img{width:100%;height:100%;object-fit:cover;display:block}
/* Footer brand badge. Deliberately NOT matched to Design.md's shadowless,
   no-gradient rule -- this is the owner's supplied logo file (illustrated
   truck, gradients, chrome, its own "TOTAL TRUCKING" wordmark baked in), a
   bigger swing than any other deviation logged so far. Kept confined to a
   single footer badge rather than the nav's small icon slot, both because
   it doesn't survive being shrunk to 30px and because the nav already
   prints "Total Trucking" as text next to the icon, so a wordmark inside
   the graphic would duplicate it. See Deviations for the full note. */
.foot-badge{width:96px;height:96px;border-radius:var(--r-card);overflow:hidden;display:block;margin-bottom:var(--s-16)}
.foot-badge img{width:100%;height:100%;object-fit:cover;display:block}
.logo-word{font-size:var(--text-body-sm);font-weight:400;letter-spacing:normal;color:var(--industrial-white)}
.nav-pills{display:flex;gap:var(--s-4);margin-left:auto;flex-wrap:wrap}
.pill{
  background:var(--carbon);color:var(--industrial-white);
  border:0;border-radius:var(--r-nav);
  padding:5px 14px;font:400 var(--text-body-sm)/1.2 var(--font);
  letter-spacing:normal;cursor:pointer;text-decoration:none;
  transition:background-color 140ms ease,color 140ms ease,transform 100ms var(--ease-out);
}
.pill:not([aria-current="page"]):hover{background:var(--aluminum);color:var(--midnight-steel)}
.pill:active{transform:scale(0.97)}
.pill[aria-current="page"]{background:var(--industrial-white);color:var(--midnight-steel)}

/* ---------- nav: hamburger (mobile) ----------
   Below 900px the 11-item pill row has no room to stay a row (see the
   9/15 build note) -- it either wraps into a wall of small buttons or
   the primary CTA gets pushed out of thumb reach. Collapse it into a
   dropdown behind a toggle instead; unchanged above 900px. */
.nav-toggle{
  display:none;flex:0 0 auto;margin-left:auto;
  width:38px;height:34px;padding:0;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--gunmetal);border-radius:var(--r-nav);
  cursor:pointer;
}
.nav-toggle:hover{background:var(--carbon)}
.nav-toggle-bars{position:relative;display:block;width:18px;height:2px;background:var(--industrial-white);
  transition:background-color 140ms ease}
.nav-toggle-bars::before,.nav-toggle-bars::after{
  content:"";position:absolute;left:0;width:18px;height:2px;background:var(--industrial-white);
  transition:transform 180ms var(--ease-out);
}
.nav-toggle-bars::before{top:-6px}
.nav-toggle-bars::after{top:6px}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars{background:transparent}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before{transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after{transform:translateY(-6px) rotate(-45deg)}
@media(max-width:899px){
  .nav-toggle{display:inline-flex}
  .nav-pills{
    position:absolute;top:100%;left:0;right:0;margin-left:0;
    flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:8px;
    background:var(--midnight-steel);border-bottom:1px solid var(--gunmetal);
    padding:var(--s-16) var(--s-24);max-height:calc(100vh - 64px);overflow-y:auto;
    opacity:0;visibility:hidden;transform:translateY(-6px);pointer-events:none;
    transition:opacity 160ms var(--ease-out),transform 160ms var(--ease-out),visibility 0s linear 160ms;
  }
  .nav-pills.open{
    opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;
    transition:opacity 160ms var(--ease-out),transform 160ms var(--ease-out),visibility 0s linear 0s;
  }
  .nav-pills .pill,.nav-pills .btn-header,.nav-pills .nav-tel{
    width:100%;text-align:center;box-sizing:border-box;
  }
  .nav-pills .nav-tel{display:inline-block}
}

/* ---------- page nav transition ---------- */
.page{opacity:1;transition:opacity 160ms var(--ease-out,ease-out)}
.page.page-leaving{opacity:0}
.page.page-entering{opacity:0}
.nav-tel{
  display:none;color:var(--aluminum);text-decoration:none;
  font-size:var(--text-body-sm);letter-spacing:normal;padding:5px 10px;
}
.btn{
  display:inline-block;background:var(--btn-yellow);color:var(--midnight-steel);
  border:0;border-radius:var(--r-button);padding:7px 16px;
  font:400 var(--text-body-sm)/1.2 var(--font);letter-spacing:normal;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background-color 140ms ease,transform 100ms var(--ease-out);
}
.btn:hover{background:var(--btn-yellow-hover)}
.btn:active{transform:scale(0.97)}
.btn-lg{padding:14px 24px;font-size:var(--text-body)}
.btn-ghost{
  background:transparent;color:var(--industrial-white);
  border:1px solid var(--gunmetal);
}
.btn-ghost:hover{background:var(--carbon)}
.btn-header{background:var(--header-cta);color:var(--industrial-white);
  transition:background-color 140ms ease,transform 100ms var(--ease-out)}
.btn-header:hover{background:var(--header-cta-hover)}
.btn-header:active{transform:scale(0.97)}
.sec-light .btn-ghost,.sec-yellow .btn-ghost{color:var(--midnight-steel);border-color:var(--midnight-steel)}
@media(min-width:900px){.nav-tel{display:inline-block}}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--midnight-steel);padding:0}
.hero-media{position:relative;min-height:clamp(460px,72vh,680px);display:flex;align-items:flex-end}
.hero-shot{position:absolute;inset:0;border-radius:0;overflow:hidden}
.hero-scrim{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.hero-body{position:relative;z-index:2;padding:var(--gutter);width:100%}
.hero-grid{display:grid;gap:var(--s-36);max-width:var(--grid-max);margin:0 auto;width:100%}
@media(min-width:1000px){.hero-grid{grid-template-columns:minmax(0,1fr) 340px;align-items:end}}
.hero-copy{display:flex;flex-direction:column;gap:var(--s-24);max-width:900px}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--s-16);align-items:center}
.hero-tel{color:var(--industrial-white);text-decoration:none;font-size:var(--text-body-sm);border-bottom:1px solid var(--gunmetal);padding-bottom:2px}

/* dispatch card — adapted from the Product Highlight Card */
.hl-card{
  background:var(--carbon);border:1px solid var(--gunmetal);border-radius:var(--r-card);
  padding:var(--s-24);display:flex;flex-direction:column;gap:var(--s-16);
}
.hl-label{color:var(--caution-yellow);font-size:var(--text-caption);font-weight:400;letter-spacing:normal}
.hl-rows{display:flex;flex-direction:column;gap:10px;margin:0}
.hl-row{display:flex;justify-content:space-between;gap:var(--s-16);align-items:baseline;
  border-top:1px solid var(--gunmetal);padding-top:10px}
.hl-row:first-child{border-top:0;padding-top:0}
.hl-row dt{font-size:var(--text-caption);color:var(--aluminum);letter-spacing:normal;margin:0}
.hl-row dd{font-size:var(--text-body-sm);color:var(--industrial-white);letter-spacing:normal;margin:0;text-align:right;font-variant-numeric:tabular-nums}

/* ---------- yellow statement ---------- */
.statement{position:relative;overflow:hidden}
.statement .inner{position:relative;z-index:2}
.ghost{
  position:absolute;right:var(--gutter);bottom:-.18em;z-index:1;
  font-size:clamp(120px,26vw,340px);font-weight:300;line-height:.8;
  letter-spacing:-0.04em;color:var(--ghost-yellow);pointer-events:none;user-select:none;
}
.statement-text{font-size:clamp(30px,5.2vw,var(--text-heading-lg));font-weight:300;
  line-height:1.13;letter-spacing:-0.04em;max-width:900px;margin:0}

/* ---------- cards ---------- */
.grid{display:grid;gap:var(--s-16)}
.grid-2{grid-template-columns:1fr}
.grid-3{grid-template-columns:1fr}
@media(min-width:760px){.grid-2{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.grid-3{grid-template-columns:repeat(3,1fr)}}
.card{
  background:var(--carbon);border:1px solid var(--gunmetal);border-radius:var(--r-card);
  padding:var(--s-24);display:flex;flex-direction:column;gap:var(--s-16);
}
.sec-light .card{background:#fff;border-color:#d8d8d8;color:var(--midnight-steel)}
.sec-light .card .body{color:var(--midnight-steel)}
.card-num{font-size:var(--text-caption);color:var(--aluminum);letter-spacing:normal}
.sec-light .card-num{color:#6b6b6b}

/* list */
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:10px;grid-template-columns:1fr}
@media(min-width:700px){.ticks{grid-template-columns:repeat(2,1fr)}}
.ticks li{font-size:var(--text-body-sm);letter-spacing:normal;padding-left:18px;position:relative;line-height:1.38}
.ticks li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:1px;background:var(--gunmetal)}
.sec-light .ticks li::before{background:#999}

/* ---------- shot placeholders (double as the shot list) ---------- */
.shot{
  margin:0;background:var(--carbon);border:1px solid var(--gunmetal);
  border-radius:var(--r-image);padding:var(--s-24);
  display:flex;flex-direction:column;gap:var(--s-16);min-height:220px;justify-content:center;
}
.hero-fill{
  position:absolute;inset:0;
  background:repeating-linear-gradient(135deg,#0a0a0a,#0a0a0a 14px,#161616 14px,#161616 28px);
}
.hero-fill-tag{
  position:absolute;top:var(--gutter);left:var(--gutter);z-index:1;
  font-size:var(--text-micro);color:var(--midnight-steel);background:var(--caution-yellow);
  border-radius:3px;padding:3px 8px;letter-spacing:normal;max-width:calc(100% - 2 * var(--gutter));
}
/* On narrow phones the hero headline can grow tall enough (long copy at
   the display-text floor size) that its top edge reaches this corner tag.
   Hero-body has no opaque backing, so the two would render interleaved —
   the yellow tag bleeding through between lines of the eyebrow/headline.
   The tag is a build-review label only (removed once a real photo/video
   replaces the placeholder), so it's safe to drop below the width where
   that collision starts. */
@media(max-width:640px){.hero-fill-tag{display:none}}
.hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.content-photo{width:100%;height:auto;border-radius:var(--r-image);display:block}
.photo-note{font-size:var(--text-micro);color:var(--aluminum);letter-spacing:normal;margin:8px 0 0}
.sec-light .photo-note{color:#6b6b6b}

.check-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.check-list li{display:flex;align-items:flex-start;gap:10px;font-size:var(--text-body-sm);letter-spacing:normal;line-height:1.38;color:var(--industrial-white)}
.check-list svg{flex:0 0 auto;width:18px;height:18px;margin-top:1px;color:var(--caution-yellow)}

/* Hero entrance — once per visit (first paint of the homepage), so this is
   the "rare/first-time" tier: a small delight budget, spent as a stagger
   rather than a single big move.
   @starting-style alone doesn't reliably fire for elements already present
   at initial parse (no JS insertion, no display:none toggle) — most
   browsers do one style pass on first load and never run the two-pass
   computation @starting-style depends on. Class-toggle instead: render
   hidden by default, JS adds .hero-in one frame later (double rAF, so the
   hidden state actually paints first), CSS transitions the rest. <noscript>
   forces the visible state so a no-JS visitor never gets stuck at opacity:0. */
.check-list li,.hero .hl-card{
  opacity:0;transform:translateY(6px);
  transition:opacity 200ms var(--ease-out),transform 200ms var(--ease-out);
}
body.hero-in .check-list li,body.hero-in .hero .hl-card{opacity:1;transform:translateY(0)}
.check-list li:nth-child(1){transition-delay:0ms}
.check-list li:nth-child(2){transition-delay:50ms}
.check-list li:nth-child(3){transition-delay:100ms}
.hero .hl-card{transition-delay:150ms}
/* Video hero slots (Heavy Equipment, Flatbed, Oversize) sit a touch darker
   even as a placeholder, since the eventual clip is meant to read as
   near-black motion, not a lit photo. */
.hero-fill--video{background:repeating-linear-gradient(135deg,#060606,#060606 14px,#101010 14px,#101010 28px)}
/* Applied once the real <video> lands — desaturate, drop brightness/contrast
   so it stays atmosphere, not subject. */
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) brightness(.55) contrast(.95);}
/* Ties the grayscale footage into the palette's own graphite tone instead of
   sitting as flat black-and-white against it. */
.hero-video-tint{position:absolute;inset:0;background:var(--gunmetal);opacity:.3;mix-blend-mode:multiply}
/* Video heroes get a heavier scrim than photo heroes — motion pulls the eye
   more than a still, so the headline needs more cover to stay dominant. */
[data-hero-video] ~ .hero-scrim{background:rgba(0,0,0,.68)}
/* Scroll-driven parallax on the three video heroes (Heavy Equipment, Flatbed,
   Oversize). Applies to today's placeholder fill and to the real <video>/
   <img> that eventually replaces it — same selector, no changes needed when
   the clip lands. Starts slightly zoomed/offset, settles to rest as the hero
   scrolls into view; @supports keeps it a no-op (static image) on browsers
   without scroll-timeline support instead of breaking anything. */
@supports (animation-timeline: view()){
  [data-hero-video] .hero-fill,
  [data-hero-video] .hero-video,
  [data-hero-video] .hero-photo{
    animation: hero-parallax linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 100%;
  }
  @keyframes hero-parallax{
    from{ transform: scale(1.12) translateY(-3%); }
    to{ transform: scale(1) translateY(3%); }
  }
}
.shot-tag{font-size:var(--text-micro);color:var(--midnight-steel);background:var(--caution-yellow);
  border-radius:3px;padding:2px 6px;align-self:flex-start;letter-spacing:normal}
.shot-brief{font-size:var(--text-body-sm);color:var(--industrial-white);letter-spacing:normal;margin:0;max-width:460px;line-height:1.38}
.shot-meta{margin:0;display:flex;flex-direction:column;gap:6px}
.shot-meta div{display:flex;gap:8px;flex-wrap:wrap}
.shot-meta dt{font-size:var(--text-micro);color:var(--aluminum);letter-spacing:normal;margin:0;min-width:34px}
.shot-meta dd{font-size:var(--text-micro);color:var(--aluminum);letter-spacing:normal;margin:0;flex:1;min-width:200px}

/* ---------- placeholders needing owner input ---------- */
.placeholder{
  border:1px dashed var(--gunmetal);border-radius:var(--r-card);
  padding:var(--s-24);display:flex;flex-direction:column;gap:10px;
}
.sec-light .placeholder{border-color:#b5b5b5}
.placeholder-tag{font-size:var(--text-micro);letter-spacing:normal;color:var(--midnight-steel);
  background:var(--caution-yellow);border-radius:3px;padding:2px 6px;align-self:flex-start}
.placeholder p{font-size:var(--text-body-sm);letter-spacing:normal;margin:0;color:var(--aluminum)}
.sec-light .placeholder p{color:#5a5a5a}
.stars{font-size:15px;letter-spacing:2px;color:var(--btn-yellow)}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--gunmetal)}
.sec-light .faq{border-color:#cfcfcf}
.faq details{border-bottom:1px solid var(--gunmetal);padding:var(--s-20) 0}
.sec-light .faq details{border-color:#cfcfcf}
.faq summary{
  cursor:pointer;list-style:none;font-size:clamp(18px,2.4vw,var(--text-heading));
  font-weight:300;line-height:1.17;letter-spacing:-0.04em;
  display:flex;justify-content:space-between;gap:var(--s-16);align-items:baseline;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:300;font-size:var(--text-heading);line-height:1;flex:0 0 auto;
  display:inline-block;transition:transform 180ms var(--ease-out)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .answer{padding-top:var(--s-16);max-width:640px}
@supports (interpolate-size: allow-keywords){
  :root{interpolate-size:allow-keywords}
  .faq .answer{
    height:0;overflow:hidden;padding-top:0;
    transition:height 220ms var(--ease-out),padding-top 220ms var(--ease-out);
  }
  .faq details[open] .answer{height:auto;padding-top:var(--s-16)}
}
.faq .answer p{margin:0 0 10px}
.faq .answer p:last-child{margin-bottom:0}

/* ---------- steps ---------- */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-16);grid-template-columns:1fr}
@media(min-width:820px){.steps{grid-template-columns:repeat(4,1fr)}}
.step{border-top:1px solid var(--gunmetal);padding-top:var(--s-16);display:flex;flex-direction:column;gap:10px}
.sec-light .step{border-color:#cfcfcf}
.step-n{font-size:var(--text-caption);color:var(--aluminum);letter-spacing:normal}
.sec-light .step-n{color:#6b6b6b}

/* ---------- map ---------- */
.map-wrap{border:1px solid var(--gunmetal);border-radius:var(--r-image);padding:var(--s-24);background:#0b0b0b;overflow-x:auto}
.map-wrap svg{display:block;min-width:640px;width:100%;height:auto}
.route-line{fill:none;stroke:var(--aluminum);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.route-line.minor{stroke-width:2;stroke:var(--gunmetal)}
.map-shield{fill:#161616;stroke:var(--gunmetal);stroke-width:1}
.map-shield-text{font:700 10px var(--font);fill:var(--aluminum);text-anchor:middle;dominant-baseline:middle}
.town-dot{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.4);
  transition:opacity .35s ease-out,transform .35s cubic-bezier(.34,1.56,.64,1)}
.town-dot.shown{opacity:1;transform:scale(1)}
.town-dot .ring{fill:#0b0b0b;stroke:var(--aluminum);stroke-width:1.5}
.town-dot .core{fill:var(--industrial-white)}
.town-dot.hub .ring{stroke:var(--caution-yellow);stroke-width:2}
.map-label{font:400 12px var(--font);letter-spacing:normal;fill:var(--industrial-white);opacity:0;transition:opacity .3s ease-out .1s}
.map-label.hub-label{fill:var(--caution-yellow)}
.map-label.shown{opacity:1}
.town-link{cursor:pointer}
.town-link:hover .core,.town-link:focus-visible .core{fill:var(--caution-yellow)}
.town-link:hover .map-label,.town-link:focus-visible .map-label{text-decoration:underline}
.town-link:focus-visible{outline:2px solid var(--caution-yellow);outline-offset:4px}
.map-caption{font:400 10px var(--font);fill:var(--gunmetal)}

/* ---------- about / towing ---------- */
.ext-link{display:inline-flex;align-items:center;gap:6px}
.ext-link svg{width:12px;height:12px;flex:0 0 auto}
.ext-note{font-size:var(--text-micro);color:var(--aluminum);letter-spacing:normal;margin:0}

/* ---------- form mockup ---------- */
.form{display:flex;flex-direction:column;gap:var(--s-16);background:var(--carbon);
  border:1px solid var(--gunmetal);border-radius:var(--r-card);padding:var(--s-24)}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:var(--text-caption);color:var(--aluminum);letter-spacing:normal}
.field input,.field textarea,.field select{
  background:#1b1b1b;border:1px solid var(--gunmetal);border-radius:var(--r-button);
  color:var(--industrial-white);font:400 var(--text-body-sm)/1.38 var(--font);
  padding:10px 12px;letter-spacing:normal;width:100%;
}
.field textarea{min-height:96px;resize:vertical}
.form-note{font-size:var(--text-micro);color:var(--aluminum);letter-spacing:normal;margin:0}
.quote-grid{display:grid;gap:var(--s-36);grid-template-columns:1fr}
@media(min-width:940px){.quote-grid{grid-template-columns:minmax(0,1fr) minmax(0,420px)}}

/* ---------- footer ---------- */
.foot{background:var(--midnight-steel);border-top:1px solid var(--gunmetal);
  padding:var(--section-gap) var(--gutter) var(--s-36)}
.foot-grid{display:grid;gap:var(--s-36);grid-template-columns:1fr;max-width:var(--grid-max);margin:0 auto}
@media(min-width:820px){.foot-grid{grid-template-columns:1.1fr 1fr 1fr 1fr}}
.foot a{color:var(--aluminum);text-decoration:none;font-size:var(--text-body-sm);letter-spacing:normal}
.foot a:hover{color:var(--industrial-white)}
.foot-links{display:flex;flex-direction:column;gap:8px}
.nap{font-size:var(--text-body-sm);letter-spacing:normal;color:var(--industrial-white);line-height:1.38;margin:0;font-style:normal}
.foot-bottom{max-width:var(--grid-max);margin:var(--s-36) auto 0;padding-top:var(--s-20);
  border-top:1px solid var(--gunmetal);display:flex;justify-content:space-between;gap:var(--s-16);flex-wrap:wrap}

/* ---------- spec sheet ---------- */
.spec table{width:100%;border-collapse:collapse;font-size:var(--text-body-sm);letter-spacing:normal}
.spec th,.spec td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--gunmetal);vertical-align:top}
.spec th{color:var(--aluminum);font-weight:400;font-size:var(--text-caption)}
.spec .tbl{overflow-x:auto;border:1px solid var(--gunmetal);border-radius:var(--r-card)}
.swatches{display:grid;gap:var(--s-16);grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.sw{border:1px solid var(--gunmetal);border-radius:var(--r-card);overflow:hidden}
.sw-chip{height:64px}
.sw-meta{padding:12px;display:flex;flex-direction:column;gap:3px}

.eyebrow{font-size:var(--text-caption);color:var(--aluminum);letter-spacing:normal;margin:0}
.sec-light .eyebrow{color:#6b6b6b}
.sec-yellow .eyebrow{color:var(--midnight-steel)}
.hr{border:0;border-top:1px solid var(--gunmetal);margin:0}
.sec-light .hr{border-color:#cfcfcf}