@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/barlow-400.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/barlow-500.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/barlow-600.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/barlow-700.woff2') format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/barlow-condensed-500.woff2') format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/barlow-condensed-600.woff2') format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/barlow-condensed-700.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 700;font-display:swap;src:url('/fonts/jetbrains-mono.woff2') format('woff2')}

/* Blue Water Truck Tires — HOUSTON FAMILY (houstondieselshops.com launch
   system, ported 2026-09-29). Dark-only asphalt canvas — the buyer works at
   night. Amber #ffb020 accents, hazard motif, Barlow Condensed display,
   JetBrains Mono readouts, bordered mono pills, card-lift hover with the
   left amber bar. Operator numbers ARE the call action (no site line yet);
   per-op Umami call-click events on every tappable number. */
:root{
  --bg:#0c0e12; --panel:#161a21; --panel-2:#1e242d; --line:#2a313c;
  --ink:#e8eaed; --muted:#9aa3af;
  --amber:#ffb020; --amber-dim:#b37917;
  --go:#2fbf71; --alert:#f0544f;
  --r:6px;
  --f-display:"Barlow Condensed","Arial Narrow",sans-serif;
  --f-body:"Barlow",system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--f-body);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,p,dl,dd{margin:0}
a{color:var(--amber)}
.wrap{max-width:1200px;margin:0 auto;padding:0 20px}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px;border-radius:2px}

/* primitives (Houston vocabulary) */
.eyebrow{font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber)}
.hazard{background-image:repeating-linear-gradient(-45deg,var(--amber) 0 14px,var(--bg) 14px 28px)}
.readout{font-family:var(--f-mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.mono{font-family:var(--f-mono)}
.card-lift{transition:transform 160ms ease,border-color 160ms ease,box-shadow 160ms ease}
.card-lift:hover{transform:translateY(-2px);border-color:var(--amber);box-shadow:-4px 0 0 0 var(--amber)}

/* masthead (Houston header: sticky, panel blur, condensed brand, mono nav) */
.masthead{position:sticky;top:0;z-index:50;border-bottom:1px solid var(--line);backdrop-filter:blur(8px);background:color-mix(in srgb,var(--panel) 88%,transparent)}
.masthead-in{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:0 20px;max-width:1200px;margin:0 auto;min-height:64px}
.brand{font:600 20px/1.1 var(--f-display);letter-spacing:.02em;text-transform:uppercase;color:var(--ink);text-decoration:none}
.brand b{color:var(--amber);font-weight:600}
.brand small{display:block;font:500 10px/1.3 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
nav.main{display:flex;gap:20px;flex-wrap:wrap;font-family:var(--f-mono);font-size:12.5px;text-transform:uppercase;letter-spacing:.1em;margin-left:auto}
nav.main a{color:var(--muted);text-decoration:none;padding:4px 0}
nav.main a:hover{color:var(--amber)}
nav.main a[aria-current="page"]{color:var(--amber)}
.urgentbtn{border:1px solid var(--amber);color:var(--amber);text-decoration:none;padding:8px 14px;border-radius:var(--r);font:500 12px var(--f-mono);text-transform:uppercase;letter-spacing:.1em;white-space:nowrap;transition:background 140ms ease}
.urgentbtn:hover{background:color-mix(in srgb,var(--amber) 12%,transparent)}
.urgentbtn--solid{background:var(--amber);color:#0c0e12;font-weight:700;border-color:var(--amber)}
.urgentbtn--solid:hover{background:#ffc14d}

/* home hero (Houston: eyebrow + condensed h1 w/ amber span + stat line) */
.hearth{border-bottom:1px solid var(--line)}
.hearth .wrap{padding:56px 20px 44px}
.hearth .kicker{font:500 12px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--amber)}
.hearth h1{font:600 44px/1.05 var(--f-display);text-transform:uppercase;letter-spacing:.01em;margin:14px 0 14px;max-width:840px}
.hearth h1 .am{color:var(--amber)}
.hearth .lede{font-size:18px;color:var(--muted);max-width:680px}
.hearth .callrow{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:26px 0 8px}
.hearth .callsub{font:400 12px var(--f-mono);text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.hearth .statline{margin-top:24px;font:400 11.5px var(--f-mono);text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.hearth .statline b{color:var(--ink);font-weight:500}

/* corridor strip (the I-94 readout — freight geography, mono mile-board) */
.corridor{margin-top:30px}
.cstops{list-style:none;margin:0;padding:14px 0 0;display:flex;flex-wrap:wrap;gap:0 26px;border-top:3px solid var(--amber);position:relative}
.cstops li{position:relative;padding:10px 0 0;min-width:110px;flex:1 1 110px}
.cstops li::before{content:"";position:absolute;top:-8px;left:0;width:9px;height:9px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 3px var(--bg)}
.cstops .stop{display:block;font:600 13.5px/1.25 var(--f-mono);text-transform:uppercase;letter-spacing:.04em;color:var(--ink)}
.cstops .sub{display:block;font:400 11px/1.4 var(--f-mono);color:var(--muted);margin-top:3px}
.corridor .legend{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:14px}
.corridor .lg{font:400 11px/1.4 var(--f-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}

/* sections */
main{padding:40px 0 10px}
h2.sec{font:700 30px/1.1 var(--f-display);text-transform:uppercase;letter-spacing:.01em;margin:34px 0 6px}
p.sechelp{color:var(--muted);margin:0 0 18px;max-width:700px}
.areas{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.area{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px;text-decoration:none;color:var(--ink);display:block;transition:border-color 140ms ease,transform 140ms ease,box-shadow 140ms ease}
.area:hover{border-color:var(--amber);transform:translateY(-2px);box-shadow:-4px 0 0 0 var(--amber)}
.area .county-name{font:600 19px var(--f-display);text-transform:uppercase;color:var(--ink)}
.area .meta{font-size:13.5px;color:var(--muted);margin:6px 0 10px}
.area .go{font:500 12px var(--f-mono);text-transform:uppercase;letter-spacing:.1em;color:var(--amber)}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:18px 0}
.step{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px;font-size:14.5px;color:var(--muted)}
.step b{display:block;font:600 14px var(--f-mono);margin-bottom:6px;color:var(--amber);text-transform:uppercase;letter-spacing:.06em}
.trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:36px 0}
.trust div{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--amber);border-radius:var(--r);padding:14px 16px;font-size:14.5px;color:var(--muted)}
.trust strong{display:block;margin-bottom:4px;color:var(--ink);font-weight:600}
.wedgebox{background:var(--panel);border:2px dashed var(--amber);border-radius:var(--r);padding:18px 20px;margin:26px 0;font-size:15px;position:relative;overflow:hidden}
.wedgebox .hz{position:absolute;left:0;top:0;height:8px;width:100%;opacity:.8}
.wedgebox ul{margin:36px 0 0;padding:0;list-style:none}
.wedgebox li{position:relative;padding-left:20px;margin:7px 0}
.wedgebox li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:2px;background:var(--amber)}

/* group pages */
.pageband{border-bottom:1px solid var(--line);background:var(--panel)}
.pageband .wrap{padding:34px 20px 30px}
.pageband h1{font:700 36px/1.08 var(--f-display);text-transform:uppercase;letter-spacing:.01em}
.pageband .cities{color:var(--muted);font-size:15px;margin-top:8px;max-width:700px}
.ctastrip{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;margin:24px 0;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.ctastrip .msg{flex:1;min-width:220px;font-size:15px;color:var(--muted)}
.ctastrip .msg b{font-family:var(--f-display);text-transform:uppercase;letter-spacing:.02em;font-size:17px;color:var(--ink)}

/* cards (Houston ShopCard: panel + presence pill + condensed name + chips + amber call) */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px;display:flex;flex-direction:column;gap:9px}
.card .top{display:flex;justify-content:space-between;gap:10px;align-items:baseline;flex-wrap:wrap}
.card h4{margin:0;font:600 21px/1.15 var(--f-display);text-transform:uppercase;letter-spacing:.01em}
.card h4 a{color:var(--ink);text-decoration:none}
.card h4 a:hover{color:var(--amber)}
.county{font:500 10.5px var(--f-mono);text-transform:uppercase;letter-spacing:.1em;color:var(--muted);background:var(--panel-2);border-radius:4px;padding:3px 8px;white-space:nowrap}
/* presence + status pills — Houston bordered-mono vocabulary */
.kind{display:inline-flex;align-items:center;gap:6px;font:500 10.5px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:3px 8px;align-self:flex-start;white-space:nowrap}
.kind--crew,.kind--travel,.kind--canada{color:var(--amber);border-color:color-mix(in srgb,var(--amber) 40%,transparent)}
.srcline{display:inline-flex;align-items:center;gap:6px;font:400 10.5px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;border-radius:4px;padding:3px 8px;border:1px solid}
.srcline--site{color:var(--go);border-color:color-mix(in srgb,var(--go) 40%,transparent)}
.srcline--map{color:var(--muted);border-color:var(--line)}
.card .base{color:var(--muted);font-size:13px;margin:0}
.card .blurb{font-size:14px;margin:0;color:var(--ink)}
.phonelink{display:inline-flex;align-items:center;gap:8px;background:var(--amber);color:#0c0e12;text-decoration:none;font:700 14px var(--f-mono);text-transform:uppercase;letter-spacing:.06em;padding:10px 16px;border-radius:var(--r);align-self:flex-start;transition:transform 140ms ease}
.phonelink:hover{transform:scale(1.02);background:#ffc14d}
.phonelink--big{font-size:16px;padding:13px 22px}
.src{display:block;font:400 11px var(--f-mono);color:var(--muted);letter-spacing:.02em}
.phone-text.pending{color:var(--muted);font-weight:500;font-size:14px;font-family:var(--f-mono)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font:400 10.5px var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:var(--panel-2);border-radius:4px;padding:3px 8px}
.chip--on{color:var(--amber);background:transparent;border:1px solid color-mix(in srgb,var(--amber) 40%,transparent)}
.card .links{margin-top:auto;display:flex;gap:14px;font:500 12px var(--f-mono);text-transform:uppercase;letter-spacing:.08em;padding-top:6px}
.card .links a{color:var(--amber);text-decoration:none}
.card .links a:hover{text-decoration:underline}
.js .cards,.js ul.shuffle{visibility:hidden}
.js .cards.shown,.js ul.shuffle.shown{visibility:visible}

/* prose pages (Houston prose-hds: condensed h2, amber dash bullets, mono th) */
article.prose{max-width:720px}
article.prose h1{font:700 36px/1.1 var(--f-display);text-transform:uppercase;letter-spacing:.01em}
article.prose h2{font:700 27px/1.15 var(--f-display);text-transform:uppercase;letter-spacing:.01em;margin-top:34px}
article.prose ul,article.prose ol{padding-left:0;margin:0 0 16px;list-style:none}
article.prose ul li{position:relative;padding-left:20px;margin:8px 0}
article.prose ul li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:2px;background:var(--amber)}
article.prose ol{list-style:decimal;padding-left:24px}
article.prose ol li{margin:8px 0}
article.prose ol li::marker{font-family:var(--f-mono);color:var(--amber)}
article.prose a{text-decoration:underline;text-underline-offset:3px}
.opfacts{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:4px 22px;margin:22px 0;max-width:720px}
.opfacts dl{display:grid;grid-template-columns:180px 1fr;gap:8px 14px;margin:14px 0}
.opfacts dt{font:500 11px var(--f-mono);text-transform:uppercase;letter-spacing:.1em;color:var(--muted);padding-top:3px}
.opfacts dd{margin:0;font-size:15px}
.updated{color:var(--muted);font-size:12.5px;font-family:var(--f-mono)}
.checklist{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--amber);border-radius:var(--r);padding:16px 20px;margin:20px 0}
.checklist ul{margin:10px 0 0;padding-left:0;list-style:none}
.checklist ul li{position:relative;padding-left:20px;margin:8px 0}
.checklist ul li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:2px;background:var(--amber)}
.danger{background:var(--panel);border:1px solid color-mix(in srgb,var(--alert) 45%,transparent);border-left:4px solid var(--alert);border-radius:var(--r);padding:14px 18px;margin:20px 0;font-size:15px;position:relative;overflow:hidden}
.danger .hz{position:absolute;left:0;top:0;height:6px;width:100%;background-image:repeating-linear-gradient(-45deg,var(--alert) 0 14px,var(--bg) 14px 28px);opacity:.85}
.danger p{margin-top:2px}
ul.calllist{list-style:none;margin:14px 0;padding:0}
ul.calllist li{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;margin:10px 0;display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}
ul.calllist li:hover{border-color:var(--amber);box-shadow:-4px 0 0 0 var(--amber)}
ul.calllist .who b{display:block;font:600 19px var(--f-display);text-transform:uppercase;letter-spacing:.01em}
ul.calllist .who span{font:400 11.5px var(--f-mono);color:var(--muted)}

footer.site{margin-top:56px;border-top:1px solid var(--line);background:var(--panel)}
footer.site .wrap{padding:28px 20px;font-size:13.5px;color:var(--muted);max-width:760px}
footer.site p{margin:10px 0}

.staging-badge{position:fixed;left:0;bottom:0;background:var(--amber);color:#0c0e12;font:600 11px/1 var(--f-mono);letter-spacing:.08em;padding:8px 12px;border-radius:0 var(--r) 0 0;z-index:99;text-transform:uppercase}

.mobilebar{display:none}
@media(max-width:720px){
 nav.main{order:3;width:100%;margin-left:0;font-size:11.5px;gap:12px;padding-bottom:12px}
 .hearth h1{font-size:34px}
 .cstops{gap:0 14px}
 .cstops li{min-width:90px;flex:1 1 90px}
 .mobilebar{display:block;position:fixed;bottom:0;left:0;right:0;background:var(--amber);color:#0c0e12;text-align:center;padding:14px;font:700 15px var(--f-mono);text-transform:uppercase;letter-spacing:.08px;text-decoration:none;z-index:9}
 body{padding-bottom:54px}
 .staging-badge{bottom:54px}
}