/* Self-hosted fonts - spec §1.3.

 Both mockups pull Oswald / Barlow / IBM Plex Mono from fonts.googleapis.com.
 §1.3 recommends self-hosting woff2: it removes a render-blocking third-party
 round trip from every page, and removes a dependency on Google from a site
 whose entire value is organic search. Licences permit it - Oswald and Barlow
 are OFL, IBM Plex Mono is OFL.

 LATIN SUBSET ONLY. The Google CSS serves 45 faces across latin, latin-ext,
 cyrillic, greek and vietnamese; 11 of them are latin. Shipping the other 34
 would quadruple the bytes for glyphs this site never renders - the copy is
 English and the data is US place names.

 font-display: swap on every face, so text paints in a fallback immediately
 rather than blocking on the download. */

@font-face{font-family:'Barlow';font-style:italic;font-weight:400;font-display:swap;src:url('/assets/fonts/barlow-400-italic.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/barlow-400.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/barlow-500.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/barlow-600.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/barlow-700.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/ibm-plex-mono-400.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/ibm-plex-mono-500.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/ibm-plex-mono-600.woff2') format('woff2')}
@font-face{font-family:'Oswald';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/oswald-500.woff2') format('woff2')}
@font-face{font-family:'Oswald';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/oswald-600.woff2') format('woff2')}
@font-face{font-family:'Oswald';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/oswald-700.woff2') format('woff2')}

/*
 * site.css - the single stylesheet for every generated page (spec 1.3).
 *
 * EXTRACTED VERBATIM from docs/but-homepage-redesign.html, 2026-08-13. Not
 * retyped and not reformatted: the two approved mockups were compared rule by
 * rule first, and the homepage sheet turned out to be a strict SUPERSET of the
 * city sheet -
 *
 *   city selectors            97
 *   homepage selectors       121
 *   city-only selectors        0
 *   shared rule keys         108  (including @media-scoped rules)
 *   shared bodies differing    0  (all 108 byte-identical)
 *
 * so this file reproduces BOTH mockups exactly. 1.3 estimated ~90% shared; it
 * is in fact 100% of the city sheet, with the homepage adding .badges,
 * .type-grid, .gallery6, .fleet-banner, .testi and .states on top. That is why
 * this is a copy rather than a merge - there was nothing to reconcile, and a
 * hand-merged sheet would have been the risky version.
 *
 * Regenerate and verify with worker/test/module1-byte-identical/css-check.js,
 * which re-derives both mockups rule sets and asserts every rule survives here
 * byte-for-byte.
 *
 * KNOWN DEAD RULES: .testi, .testi-img, .testi-body, .testi-body p and
 * .testi-body .who style the testimonial block, which was DROPPED from the city
 * page (2026-08-12, 1.4 option (a) - no per-city testimonial data exists and
 * inventing one is fabrication). They are retained for now because the homepage
 * template is not built and that decision has not been made for it. Remove them
 * with the homepage if it drops the block too.
 */
:root{
  --asphalt:#16181B;
  --asphalt-2:#212429;
  --paper:#FAF8F4;
  --red:#C8102E;
  --red-dark:#A50D26;
  --manila:#F0E2C0;
  --manila-line:#D9C48F;
  --slate:#5C6166;
  --line:#E4E0D6;
  --plate:#2A2D33;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{font-family:'Barlow',sans-serif;background:var(--paper);color:var(--asphalt);font-size:17px;line-height:1.55}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.oswald{font-family:'Oswald',sans-serif;text-transform:uppercase}
.mono{font-family:'IBM Plex Mono',monospace}

/* ---------- header ---------- */
header{background:var(--asphalt);color:#fff;position:sticky;top:0;z-index:50;border-bottom:3px solid var(--red)}
.hd{display:flex;align-items:center;justify-content:space-between;padding:14px 0;gap:16px}
.logo{font-family:'Oswald',sans-serif;font-weight:700;font-size:1.35rem;letter-spacing:.02em;text-transform:uppercase;line-height:1}
.logo em{color:var(--red);font-style:normal}
.hd-right{display:flex;align-items:center;gap:18px}
.hd-phone{font-family:'Oswald',sans-serif;font-weight:600;font-size:1.05rem;letter-spacing:.03em;text-decoration:none;display:flex;align-items:center;gap:8px}
.hd-phone svg{width:18px;height:18px;fill:var(--red)}
.hd-cta{background:var(--red);color:#fff;text-decoration:none;font-family:'Oswald',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.05em;font-size:.9rem;padding:10px 18px;border-radius:4px}
.hd-cta:hover{background:var(--red-dark)}
@media(max-width:700px){.hd-cta{display:none}.hd-phone span{display:none}}

/* ---------- hero ---------- */
.hero{background:var(--asphalt);color:#fff;padding:52px 0 60px;position:relative;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.15fr .95fr;gap:48px;align-items:start}
@media(max-width:940px){.hero .wrap{grid-template-columns:1fr;gap:36px}}
.eyebrow{font-family:'IBM Plex Mono',monospace;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:#B9BDC4;margin-bottom:14px}
.eyebrow b{color:#fff;font-weight:600}
h1{font-family:'Oswald',sans-serif;font-weight:700;text-transform:uppercase;font-size:clamp(2.3rem,5vw,3.6rem);line-height:1.04;letter-spacing:.005em}
h1 .city{color:var(--red)}
.attitude{font-family:'Oswald',sans-serif;font-weight:500;text-transform:uppercase;letter-spacing:.08em;color:var(--manila);font-size:1.05rem;margin:16px 0 22px}
.hero p.lede{color:#CFD2D7;max-width:52ch;margin-bottom:26px}
.hero-points{list-style:none;display:grid;gap:12px;margin-bottom:30px}
.hero-points li{display:flex;gap:12px;align-items:flex-start;color:#E8EAEC;font-weight:500}
.tick{flex:none;width:22px;height:22px;border-radius:50%;background:var(--red);display:grid;place-items:center;margin-top:1px}
.tick svg{width:12px;height:12px;fill:#fff}
.hero-call{display:inline-flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-family:'Oswald',sans-serif;font-weight:600;font-size:1.25rem;letter-spacing:.03em;border-bottom:2px solid var(--red);padding-bottom:2px}

/* photo slot: hero background truck */
.hero-photo{position:absolute;right:-40px;bottom:-30px;width:420px;height:260px;opacity:.14;pointer-events:none}
@media(max-width:940px){.hero-photo{display:none}}

/* ---------- the quote card (manila clipboard) ---------- */
.quote-card{background:var(--manila);color:var(--asphalt);border-radius:10px;padding:26px 26px 22px;box-shadow:0 18px 40px rgba(0,0,0,.35);border:1px solid var(--manila-line);position:relative}
.quote-card::before{content:"";position:absolute;top:-11px;left:50%;transform:translateX(-50%);width:88px;height:20px;background:var(--plate);border-radius:5px;box-shadow:inset 0 -2px 0 rgba(255,255,255,.12)}
.qc-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.qc-title{font-family:'Oswald',sans-serif;font-weight:700;text-transform:uppercase;font-size:1.3rem;letter-spacing:.02em}
.qc-tag{font-family:'IBM Plex Mono',monospace;font-size:.7rem;letter-spacing:.1em;color:var(--slate)}
.qc-sub{font-size:.92rem;color:#5b543f;margin-bottom:16px}
.qform{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.qform .full{grid-column:1/-1}
.qf label{display:block;font-family:'Oswald',sans-serif;font-size:.72rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:#6b6248;margin-bottom:5px}
.qf input,.qf select,.qf textarea{width:100%;font-family:'Barlow',sans-serif;font-size:16px;padding:11px 12px;height:auto;min-height:46px;border:1px solid #C9B583;border-radius:5px;background:#FFFDF7;color:var(--asphalt)}
.qf input:focus,.qf select:focus,.qf textarea:focus{outline:2px solid var(--red);outline-offset:1px;border-color:var(--red)}
.q-submit{grid-column:1/-1;background:var(--red);color:#fff;border:none;border-radius:6px;font-family:'Oswald',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:1.1rem;padding:15px;cursor:pointer;margin-top:4px}
.q-submit:hover{background:var(--red-dark)}
.q-fine{grid-column:1/-1;text-align:center;font-size:.78rem;color:#77704f;margin-top:2px}
.q-error{grid-column:1/-1;margin:2px 0 0;color:#C8102E;font-family:'Barlow',sans-serif;font-size:.86rem;text-align:center}
@media(max-width:460px){.qform{grid-template-columns:1fr}}

/* ---------- hazard divider (the one loud stripe) ---------- */
.hazard{height:14px;background:repeating-linear-gradient(-45deg,var(--red) 0 18px,var(--asphalt) 18px 36px)}

/* ---------- bought gallery ---------- */
section{padding:64px 0}
.sec-eyebrow{font-family:'IBM Plex Mono',monospace;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--red);margin-bottom:10px}
h2{font-family:'Oswald',sans-serif;font-weight:700;text-transform:uppercase;font-size:clamp(1.7rem,3.4vw,2.4rem);line-height:1.1;margin-bottom:14px}
.sec-lede{color:var(--slate);max-width:62ch;margin-bottom:34px}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:820px){.gallery{grid-template-columns:1fr;max-width:480px}}
.shot{background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden;box-shadow:0 6px 18px rgba(22,24,27,.06)}
.shot-img{aspect-ratio:4/3;background:
  repeating-linear-gradient(-45deg,#ECE8DD 0 14px,#F5F2EA 14px 28px);
  display:grid;place-items:center;color:#9a937f;font-family:'IBM Plex Mono',monospace;font-size:.75rem;letter-spacing:.08em;text-align:center;padding:12px}
.plate{margin:14px;margin-top:12px;background:var(--plate);color:#F2EFE6;border-radius:5px;padding:8px 12px;font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.1em;display:flex;justify-content:space-between;gap:8px;box-shadow:inset 0 0 0 2px #3a3e46, inset 0 0 0 3px #1c1e22}
.plate b{color:#fff;font-weight:600}

/* ---------- freight facts (the data card no competitor has) ---------- */
.facts{background:var(--asphalt);color:#fff}
.facts-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center}
@media(max-width:880px){.facts-grid{grid-template-columns:1fr}}
.facts h2{color:#fff}
.facts .sec-lede{color:#B9BDC4}
.fact-card{background:var(--asphalt-2);border:1px solid #33373E;border-radius:10px;padding:26px}
.fact-card .mono-h{font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#8f959e;border-bottom:1px dashed #3b3f46;padding-bottom:10px;margin-bottom:16px;display:flex;justify-content:space-between}
.fact-row{display:flex;justify-content:space-between;align-items:baseline;padding:11px 0;border-bottom:1px solid #2b2e34}
.fact-row:last-child{border-bottom:none}
.fact-label{color:#C6CAD1;font-size:.95rem}
.fact-val{font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:1.25rem;color:var(--manila)}
.finding{margin-top:18px;background:rgba(200,16,46,.12);border-left:3px solid var(--red);padding:14px 16px;border-radius:0 6px 6px 0;color:#E8EAEC;font-size:.95rem}
.finding b{color:#fff}
/* .finding CARRIES NO SURFACE OF ITS OWN. In the approved mockups it lives
   INSIDE .fact-card, which is background:var(--asphalt-2) - so its #E8EAEC is
   correct THERE and both mockup rules above are right and unchanged.
   build.js renders the findings block STANDALONE, in a bare <section> on
   --paper (#FAF8F4). Its translucent red composites over near-white to a pale
   pink, and #E8EAEC on that measures 1.01:1 - invisible, not merely faint.
   .finding b at #fff measures 1.19:1.
   Fixed by giving the standalone case the dark surface it assumes, rather
   than by darkening .finding - darkening it would break it inside .fact-card,
   where it is currently correct, and would force an edit to two approved
   design mockups to fix a bug that is not in them. #E8EAEC on --asphalt-2
   measures 12.91:1. */
.finding-solo{background:var(--asphalt-2);border:1px solid #33373E;border-left:3px solid var(--red)}

/* ---------- bundle statements ----------
   HIERARCHY FIX. The first version set .stmt-text to #E8EAEC - a near-white
   copied from .finding - on a --paper (#FAF8F4) page, so the facts rendered
   effectively invisible; and .stmt-meta used var(--muted), which IS NOT
   DEFINED in this palette, so it fell back to inherited --asphalt and the
   provenance tags came out DARKER than the facts they were annotating. The
   content was the faintest thing on the page and the footnotes were the
   boldest.
   The fact is the content: full --asphalt, 1.05rem, generous line height. The
   provenance is a footnote: --slate, small, mono, uppercase. */
.stmts{list-style:none;margin:16px 0 0;padding:0;max-width:62ch}
.stmt{padding:14px 0;border-bottom:1px solid var(--line)}
.stmt:last-child{border-bottom:0}
.stmt-text{display:block;color:var(--asphalt);font-size:1.05rem;line-height:1.6}
.stmt-meta{display:block;margin-top:6px;font-family:'IBM Plex Mono',monospace;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--slate)}
/* The block-level confidence word, shown once when every line agrees. */
.stmts-conf{display:inline-block;margin-bottom:2px;font-family:'IBM Plex Mono',monospace;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--slate);border:1px solid var(--line);border-radius:3px;padding:2px 7px}

/* ---------- process ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;counter-reset:step}
@media(max-width:820px){.steps{grid-template-columns:1fr;max-width:520px}}
.step{background:#fff;border:1px solid var(--line);border-radius:8px;padding:26px 22px 22px;position:relative}
.step::before{counter-increment:step;content:counter(step,decimal-leading-zero);position:absolute;top:-14px;left:18px;background:var(--red);color:#fff;font-family:'Oswald',sans-serif;font-weight:700;font-size:.95rem;padding:4px 10px;border-radius:4px;letter-spacing:.06em}
.step h3{font-family:'Oswald',sans-serif;text-transform:uppercase;font-size:1.1rem;letter-spacing:.03em;margin:8px 0 8px}
.step p{color:var(--slate);font-size:.95rem}

/* ---------- buy-list ---------- */
.buy-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:900px){.buy-grid{grid-template-columns:repeat(2,1fr)}}
.buy{background:#fff;border:1px solid var(--line);border-radius:6px;padding:14px 16px;font-weight:600;font-size:.95rem;display:flex;gap:10px;align-items:center}
.buy .dot{width:8px;height:8px;border-radius:50%;background:var(--red);flex:none}

/* ---------- testimonial ---------- */
.quotebox{background:var(--manila);border-radius:10px;padding:34px;border:1px solid var(--manila-line);max-width:820px}
.quotebox p{font-size:1.15rem;font-weight:500;font-style:italic;margin-bottom:14px}
.quotebox .who{font-family:'IBM Plex Mono',monospace;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:#77704f}

/* ---------- big cta ---------- */
.big-cta{background:var(--red);color:#fff;text-align:center}
.big-cta h2{color:#fff}
.big-cta p{color:#FBD9DF;max-width:56ch;margin:0 auto 26px}
.cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.btn-light{background:#fff;color:var(--red);text-decoration:none;font-family:'Oswald',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:14px 26px;border-radius:6px}
.btn-ghost{border:2px solid #fff;color:#fff;text-decoration:none;font-family:'Oswald',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.05em;padding:12px 24px;border-radius:6px}

/* ---------- footer ---------- */
footer{background:var(--asphalt);color:#9aa0a8;padding:44px 0 90px;font-size:.9rem}
.ft{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
footer .logo{color:#fff;margin-bottom:8px}
footer a{color:#c8ccd2;text-decoration:none}

/* ---------- sticky mobile bar ---------- */
.mbar{position:fixed;bottom:0;left:0;right:0;display:none;z-index:60;box-shadow:0 -8px 24px rgba(0,0,0,.25)}
.mbar a{flex:1;text-align:center;padding:15px 8px;font-family:'Oswald',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.05em;text-decoration:none;font-size:1rem}
.mbar .call{background:var(--asphalt);color:#fff}
.mbar .quote{background:var(--red);color:#fff}
@media(max-width:700px){.mbar{display:flex}}

.note{background:#FFF6D9;border:1px dashed #D9B84A;color:#6b5a12;font-size:.8rem;padding:8px 12px;border-radius:6px;font-family:'IBM Plex Mono',monospace;letter-spacing:.02em}

/* ---------- homepage additions ---------- */
.badges{background:var(--paper);border-bottom:1px solid var(--line)}
.badge-row{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:18px 0}
@media(max-width:820px){.badge-row{grid-template-columns:repeat(2,1fr);row-gap:14px}}
.badge{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;border-right:1px solid var(--line);padding:4px 10px}
.badge:last-child{border-right:none}
@media(max-width:820px){.badge:nth-child(2){border-right:none}}
.badge b{font-family:'Oswald',sans-serif;text-transform:uppercase;font-size:1.15rem;letter-spacing:.03em}
.badge span{font-size:.82rem;color:var(--slate)}
.gallery6{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:820px){.gallery6{grid-template-columns:1fr 1fr;gap:14px}}
@media(max-width:520px){.gallery6{grid-template-columns:1fr}}
.type-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:960px){.type-grid{grid-template-columns:repeat(2,1fr)}}
.type{background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.type-img{aspect-ratio:16/9;background:repeating-linear-gradient(-45deg,#ECE8DD 0 14px,#F5F2EA 14px 28px);display:grid;place-items:center;color:#9a937f;font-family:'IBM Plex Mono',monospace;font-size:.68rem;letter-spacing:.06em;text-align:center;padding:8px}
.type-cap{display:flex;align-items:center;gap:9px;padding:11px 14px;font-weight:600;font-size:.95rem}
.type-cap .dot{width:8px;height:8px;border-radius:50%;background:var(--red);flex:none}
.fleet-banner{background:var(--manila);border:1px solid var(--manila-line);border-radius:12px;padding:34px;display:grid;grid-template-columns:1.4fr .6fr;gap:26px;align-items:center}
@media(max-width:820px){.fleet-banner{grid-template-columns:1fr}}
.fleet-banner h3{font-family:'Oswald',sans-serif;text-transform:uppercase;font-size:1.6rem;line-height:1.1;margin-bottom:8px}
.fleet-banner p{color:#5b543f;margin-bottom:0}
.btn-dark{background:var(--asphalt);color:#fff;text-decoration:none;font-family:'Oswald',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:14px 24px;border-radius:6px;text-align:center}
.states{columns:4;column-gap:28px;font-size:.95rem;line-height:2}

@media(max-width:900px){.states{columns:3}}
@media(max-width:600px){.states{columns:2}}
.states a{text-decoration:none;color:var(--asphalt);border-bottom:1px solid var(--line)}
.states a:hover{color:var(--red);border-color:var(--red)}
.testi{display:grid;grid-template-columns:.8fr 1.2fr;gap:0;max-width:920px;background:var(--manila);border:1px solid var(--manila-line);border-radius:10px;overflow:hidden}
@media(max-width:760px){.testi{grid-template-columns:1fr}}
.testi-img{background:repeating-linear-gradient(-45deg,#E2D5AE 0 14px,#EADFBE 14px 28px);display:grid;place-items:center;color:#8a7c4e;font-family:'IBM Plex Mono',monospace;font-size:.72rem;text-align:center;padding:12px;min-height:220px}
.testi-body{padding:30px}
.testi-body p{font-size:1.12rem;font-weight:500;font-style:italic;margin-bottom:14px}
.testi-body .who{font-family:'IBM Plex Mono',monospace;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:#77704f}

/* The state list ran together on the deployed page: .states sets columns:4,
   but the 51 anchors are inline, so they flow as one paragraph across the
   columns and read as prose.
   A CHILD selector, deliberately. .states a comes from the approved mockup and
   css-check asserts every mockup rule survives byte-for-byte, while also
   refusing a second .states a block as a conflicting duplicate. Both checks
   are right: the mockup is the design of record and duplicate rules are how
   stylesheets rot. .states>a is neither - it is a new, more specific rule that
   leaves the mockup's untouched. */
.states>a{display:block;break-inside:avoid}

/* ===== Navigation (measured against live 2026-08-18) =====
   The header carried 2 links against WordPress's 20 and the footer 1 against
   18, on all 166 pages. These rules style the structure that restores them.
   Class names follow the mockup's vocabulary (.hd, .ft, .wrap). */
.wrap.hd{position:relative}
.mnav-cb,.tools-cb{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.mnav-t{display:inline-flex;align-items:center;justify-content:center;margin-left:auto;
  width:44px;height:44px;flex:0 0 44px;cursor:pointer;border:1px solid var(--line);
  border-radius:7px;background:var(--paper);transition:border-color .14s,background .14s}
.mnav-t:hover{border-color:var(--red)}
.mnav-cb:focus-visible~.mnav-t,
.mnav-t:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.mnav-t span,.mnav-t span::before,.mnav-t span::after{display:block;width:19px;height:2px;
  background:var(--asphalt);border-radius:2px;transition:transform .18s,opacity .18s}
.mnav-t span{position:relative}
.mnav-t span::before,.mnav-t span::after{content:"";position:absolute;left:0}
.mnav-t span::before{top:-6px}
.mnav-t span::after{top:6px}
.mnav-cb:checked~.mnav-t span{background:transparent}
.mnav-cb:checked~.mnav-t span::before{transform:translateY(6px) rotate(45deg)}
.mnav-cb:checked~.mnav-t span::after{transform:translateY(-6px) rotate(-45deg)}
.hd-nav{display:none;position:absolute;top:calc(100% - 4px);right:0;z-index:70;width:330px;
  flex-direction:column;padding:8px;background:#fff;border:1px solid var(--line);
  border-radius:8px;box-shadow:0 18px 44px rgba(0,0,0,.16);
  font-family:'Barlow',sans-serif;font-size:.95rem}
.mnav-cb:checked~.hd-nav{display:flex}
.hd-nav>a,.tools-t{display:block;padding:11px 12px;border-radius:5px;color:var(--asphalt);
  text-decoration:none;border-bottom:1px solid var(--line)}
.hd-nav>a:hover,.tools-t:hover{background:#F6F3EA;color:var(--red)}
.tools{display:block}
.tools-t{cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  border-bottom:0;font-weight:600}
.tools-t::after{content:"";border-left:5px solid transparent;border-right:5px solid transparent;
  border-top:6px solid currentColor;transition:transform .16s}
.tools-cb:checked~.tools-t::after{transform:rotate(180deg)}
.tools-cb:focus-visible~.tools-t,
.tools-t:focus-visible{outline:2px solid var(--red);outline-offset:-2px}
.tools-menu{display:none;flex-direction:column;padding:2px 0 6px 12px;
  border-left:2px solid var(--manila-line);margin:0 0 4px 12px}
.tools-cb:checked~.tools-menu{display:flex}
.tools-menu a{display:block;padding:9px 10px;border-radius:5px;color:var(--slate);
  text-decoration:none;font-size:.9rem}
.tools-menu a:hover{background:#F6F3EA;color:var(--red)}
.ft-col{display:flex;flex-direction:column;gap:6px;min-width:150px}
.ft-h{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.05em;color:#fff;margin-bottom:4px}
.ft-col a{color:inherit;text-decoration:none}
.ft-col a:hover{color:var(--red)}

/* Captured WordPress pages wrap their body in .but-page. 50 of the 165
   captures use it and site.css had no rule, so those pages had no container
   width at all - text ran the full viewport. The captures' own inline CSS
   styles everything INSIDE the wrapper; only the wrapper itself was orphaned. */
.but-page{max-width:1100px;margin:0 auto}

/* Core block-editor classes on a handful of captured pages. Semantic only -
   the theme styled them and that stylesheet is not coming with us. */
.wp-block-heading{font-family:'Oswald',sans-serif}
.wp-block-paragraph{margin:0 0 1em}

@media(max-width:700px){
  .hd .hd-nav{width:auto;left:0;right:0}
  .states{columns:1}
  /* THE PHONE NUMBER AND THE BUTTON STAY (RONNIE, 2026-09-04).
     The mockup rule above this section reads
       @media(max-width:700px){.hd-cta{display:none}.hd-phone span{display:none}}
     and layout.js puts the number in that span - so on a phone the header
     carried a logo, a hamburger and nothing else. MEASURED on /where-we-buy/
     and /thank-you/ at 390px: phone not rendered, CTA not rendered.
     The mockup rule is the design of record and is not edited; these are
     more specific rules that leave it in place, the same move .states>a makes
     further up. */
  header .hd-cta{display:inline-block}
  header .hd-phone span{display:inline}
}
/* ONE ROW, at every phone width (RONNIE, 2026-09-04, on an iPhone at 390px).
   The block this replaces gave .hd-right `width:100%`, which pushed the phone
   and SELL MY TRUCK onto a second line under the logo.

   A CONTINUOUS RAMP, not steps. 350px of content at 390px does not hold the
   wordmark, a 40px target, the number and the button at their desktop sizes, so
   everything scales - but as clamp() between the value at 320px and the value
   at 560px rather than as four breakpoints. Two reasons, and the second is the
   one that decided it: it reads smoothly instead of jumping, and each selector
   is then written ONCE, so css-check's duplicate-rule arm (which keys on the
   selector and not the @media context) has nothing to collide with. The
   breakpoint version tripped it on five selectors.

   The logo takes two lines rather than shrink away - all three words stay,
   which is the point. Selectors are `header .hd .x` (0,2,1) so they beat the
   rules they replace without reusing their keys. The horizontal padding is set
   here because the mockup's `.hd{padding:14px 0}` zeroes what `.wrap` gives it,
   which left the logo flush against the screen edge at 390px. Measured at 560, 480, 430, 414, 393, 390, 375, 360, 344 and
   320px: one row, nothing overlapping, no horizontal scroll, right edge on the
   sheet's own padding. */
@media(max-width:560px){
  header .hd{gap:clamp(5px,1px + 1.25vw,8px);
    padding-left:clamp(12px,-9.33px + 6.67vw,20px);
    padding-right:clamp(12px,-9.33px + 6.67vw,20px)}
  header .hd .logo{order:1;flex:0 0 auto;max-width:5.4em;letter-spacing:0;line-height:1.06;
    font-size:clamp(13.6px,9.07px + 1.42vw,17px)}
  header .hd .mnav-t{order:2;margin-left:auto;
    width:clamp(36px,30.67px + 1.67vw,40px);height:clamp(36px,30.67px + 1.67vw,40px);
    flex:0 0 clamp(36px,30.67px + 1.67vw,40px)}
  header .hd .hd-right{order:3;width:auto;margin:0;flex:0 0 auto;justify-content:flex-end;
    gap:clamp(5px,1px + 1.25vw,8px)}
  header .hd .hd-phone{font-size:clamp(12.24px,7.71px + 1.42vw,15.64px)}
  header .hd .hd-cta{display:inline-block;letter-spacing:.02em;
    font-size:clamp(9.86px,5.78px + 1.28vw,12.92px);
    padding:clamp(7px,3px + 1.25vw,10px) clamp(8px,1.33px + 2.08vw,13px)}
  header .hd .hd-nav{top:calc(100% - 10px)}
}