/* 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;flex-wrap:wrap}
.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{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{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}
}
@media(max-width:560px){
  .hd .logo{order:1;font-size:1.12rem}
  .hd .mnav-t{order:2}
  .hd .hd-right{order:3;width:100%;margin:0 0 12px;justify-content:space-between}
}