/* Tow Longview. Highway-signage / DOT guide-sign system. System font stack only, no webfont requests, keeps every page under budget. */

:root{
  --c-green:#0b5c39;
  --c-green-dark:#083f28;
  --c-asphalt:#1a1c1e;
  --c-amber:#ff9e1b;
  --c-amber-dark:#c96f00;
  --c-white:#f5f7f6;
  --c-blue:#1b4a8a;
  --c-blue-dark:#123a6e;
  --c-ink:#1a1c1e;
  --c-muted:#4b555f;
  --c-line:#d7ddd9;
  --wrap:1130px;
  --f-head:"Arial Narrow",Arial,"Helvetica Neue",Helvetica,sans-serif;
  --f-mono:ui-monospace,SFMono-Regular,"Consolas","Liberation Mono",Menlo,monospace;
  --f-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --radius-sign:14px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--c-white);color:var(--c-ink);font-family:var(--f-body);line-height:1.6;font-size:17px}
img{max-width:100%;height:auto;display:block}
a{color:var(--c-blue)}
h1,h2,h3,h4{font-family:var(--f-head);color:var(--c-asphalt);line-height:1.18;margin:1.5rem 0 .7rem;font-weight:800}
h1{font-size:2rem}
h2{font-size:1.55rem;margin-top:2.2rem}
h3{font-size:1.2rem}
p,li{color:#222}
strong{color:var(--c-asphalt)}
.u-mono{font-family:var(--f-mono)}

/* ===== layout utilities ===== */
.u-wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.u-stack>*+*{margin-top:1rem}
.u-stack-sm>*+*{margin-top:.5rem}
.u-stack-lg>*+*{margin-top:2rem}
.u-grid{display:grid;gap:18px}
.u-grid-2{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.u-grid-3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.u-grid-4{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.u-cols{display:grid;grid-template-columns:1.55fr 1fr;gap:32px;align-items:start}
@media(max-width:820px){.u-cols{grid-template-columns:1fr}}
.u-flex{display:flex}
.u-flex-between{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.u-flex-center{display:flex;justify-content:center;align-items:center}
.u-flex-wrap{flex-wrap:wrap}
.u-center{text-align:center}
.u-section{padding:36px 0}
.u-section-dark{background:var(--c-asphalt);color:#e7ecea;padding:40px 0}
.u-section-dark h2,.u-section-dark h3{color:#fff}
.u-section-dark p,.u-section-dark li{color:#c6cfcb}
.u-section-green{background:var(--c-green);color:#eaf4ee;padding:40px 0}
.u-section-green h2{color:#fff}
.u-hide-mobile{display:none}
@media(min-width:820px){.u-hide-mobile{display:initial}.u-hide-desktop{display:none}}

/* ===== skip link / focus ===== */
.u-skip{position:absolute;left:-9999px;top:0;background:var(--c-asphalt);color:#fff;padding:10px 16px;border-radius:0 0 8px 0;z-index:200}
.u-skip:focus{left:0}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--c-blue);outline-offset:2px}

/* ===== top utility bar ===== */
.u-topbar{background:var(--c-asphalt);color:#cfd6d3;font-size:.86rem;font-family:var(--f-mono)}
.u-topbar .u-wrap{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:7px 20px;flex-wrap:wrap}
.u-topbar strong{color:var(--c-amber)}

/* ===== nav ===== */
.u-nav{background:#fff;border-bottom:4px solid var(--c-green);position:sticky;top:0;z-index:40}
.u-nav-row{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;max-width:var(--wrap);margin:0 auto;gap:10px;flex-wrap:wrap}
.u-brand{font-family:var(--f-head);font-weight:800;font-size:1.3rem;color:var(--c-asphalt);text-decoration:none;letter-spacing:.2px}
.u-brand span{color:var(--c-green)}
.u-menu a{margin-left:20px;color:var(--c-asphalt);font-weight:600;font-size:.95rem;text-decoration:none}
.u-menu a.is-active{color:var(--c-green)}
.u-menu a:hover{color:var(--c-blue)}
.u-nav-toggle{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.u-hamburger{display:none;cursor:pointer;padding:9px;border:1px solid var(--c-line);border-radius:8px}
.u-hamburger span{display:block;width:22px;height:3px;background:var(--c-asphalt);margin:4px 0;border-radius:2px}

/* ===== buttons ===== */
.u-btn{display:inline-block;font-family:var(--f-head);font-weight:800;text-decoration:none;border:0;cursor:pointer;
  border-radius:9px;padding:14px 22px;font-size:1.02rem;text-align:center;letter-spacing:.2px}
.u-btn-call{background:var(--c-amber);color:var(--c-asphalt);box-shadow:0 3px 0 var(--c-amber-dark)}
.u-btn-call:hover{background:#ffb04a}
.u-btn-quote{background:transparent;color:#fff;border:2px solid #fff}
.u-btn-quote:hover{background:rgba(255,255,255,.12)}
.u-btn-quote.is-onlight{color:var(--c-green);border-color:var(--c-green)}
.u-btn-block{display:block;width:100%}
.u-btn-lg{padding:18px 26px;font-size:1.18rem}
.is-urgent{animation:towpulse 2.6s ease-in-out infinite}
@keyframes towpulse{0%,100%{box-shadow:0 3px 0 var(--c-amber-dark),0 0 0 0 rgba(255,158,27,.5)}50%{box-shadow:0 3px 0 var(--c-amber-dark),0 0 0 9px rgba(255,158,27,0)}}

/* ===== hero: interstate guide sign ===== */
.u-hero{background:linear-gradient(180deg,var(--c-green) 0%,var(--c-green-dark) 100%);padding:38px 0 46px}
.u-hero-sign{background:var(--c-green);border:3px solid #fff;border-radius:var(--radius-sign);padding:26px 24px 22px;
  position:relative;box-shadow:0 10px 26px rgba(0,0,0,.28)}
.u-hero-sign:before{content:"";position:absolute;inset:8px;border:1.5px solid rgba(255,255,255,.55);border-radius:8px;pointer-events:none}
.u-mile-tag{display:inline-block;font-family:var(--f-mono);font-weight:700;background:var(--c-white);color:var(--c-asphalt);
  padding:4px 10px;border-radius:5px;font-size:.82rem;letter-spacing:.4px}
.u-hero h1{color:#fff;margin-top:14px;font-size:1.85rem}
.u-hero p.u-lede{color:#e2f0e7;font-size:1.08rem;max-width:600px;margin-top:.6rem}
.u-hero-ctas{margin-top:20px;display:flex;gap:12px;flex-wrap:wrap}
.u-trustbar{background:#fff;border-bottom:1px solid var(--c-line)}
.u-trustbar .u-wrap{display:flex;flex-wrap:wrap;gap:10px 22px;padding:12px 20px;font-size:.88rem;color:var(--c-asphalt);font-weight:600}
.u-trustbar .u-chip{display:flex;align-items:center;gap:6px}
.u-trustbar .u-chip:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c-green);display:inline-block}

/* ===== page header band (non-home) ===== */
.u-pagehead{background:var(--c-green);color:#fff;padding:26px 0 28px}
.u-pagehead h1{color:#fff;margin-top:6px}
.u-pagehead p{color:#dcefe3;max-width:640px}
.u-bc{font-size:.85rem}
.u-bc a{color:#dcefe3}
.u-bc span{color:#bcd8c7}

/* ===== service sign cards (blue) ===== */
.u-cardgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin:20px 0}
.u-sign-blue{background:var(--c-blue);color:#fff;border:3px solid #fff;border-radius:12px;padding:20px;position:relative;
  box-shadow:0 6px 16px rgba(18,58,110,.28)}
.u-sign-blue:before{content:"";position:absolute;inset:6px;border:1px solid rgba(255,255,255,.5);border-radius:7px;pointer-events:none}
.u-sign-blue h3{color:#fff;margin-top:0;font-size:1.08rem}
.u-sign-blue p{color:#dbe6f5;font-size:.94rem;margin-bottom:0}
.u-sign-blue a.u-cardlink{color:#fff;text-decoration:none;display:block}
.u-sign-blue a.u-cardlink:hover h3{text-decoration:underline}

/* plain content cards */
.u-card{border:1px solid var(--c-line);border-radius:10px;padding:20px;background:#fff}
.u-card h3{margin-top:0}

/* ===== corridor map ===== */
.u-corridor{background:#fff;border:2px solid var(--c-asphalt);border-radius:12px;padding:22px;overflow-x:auto}
.u-corridor-line{position:relative;height:6px;background:var(--c-asphalt);border-radius:3px;margin:34px 10px 44px;min-width:560px}
.u-corridor-line:before,.u-corridor-line:after{content:"";position:absolute;top:-3px;bottom:-3px;width:3px;background:var(--c-amber)}
.u-corridor-pt{position:absolute;top:-9px;width:22px;height:22px;border-radius:50%;background:var(--c-white);border:4px solid var(--c-green)}
.u-corridor-label{position:absolute;top:-46px;transform:translateX(-50%);font-family:var(--f-head);font-weight:800;font-size:.86rem;
  color:var(--c-asphalt);white-space:nowrap;text-align:center}
.u-corridor-label small{display:block;font-family:var(--f-mono);font-weight:400;color:var(--c-muted);font-size:.72rem}
.u-corridor-sub{position:absolute;top:16px;transform:translateX(-50%);font-size:.78rem;color:var(--c-muted);white-space:nowrap}

/* ===== FAQ (native details) ===== */
.u-faq details{border:1px solid var(--c-line);border-radius:10px;padding:4px 18px;margin-bottom:10px;background:#fff}
.u-faq summary{font-family:var(--f-head);font-weight:700;padding:14px 0;cursor:pointer;color:var(--c-asphalt);list-style:none}
.u-faq summary::-webkit-details-marker{display:none}
.u-faq summary:before{content:"+";display:inline-block;width:20px;color:var(--c-green);font-weight:800}
.u-faq details[open] summary:before{content:"\2212"}
.u-faq p{padding-bottom:14px;margin:0}

/* ===== note / limitation callout ===== */
.u-note{border-left:5px solid var(--c-amber);background:#fff8ec;padding:14px 18px;border-radius:0 8px 8px 0;margin:20px 0}
.u-note b{color:var(--c-asphalt)}
.u-note-blue{border-left:5px solid var(--c-blue);background:#eef3fa}

/* ===== list checks ===== */
ul.u-check{list-style:none;padding-left:0}
ul.u-check li{padding-left:30px;position:relative;margin:.5rem 0}
ul.u-check li:before{content:"\2713";position:absolute;left:0;color:var(--c-green);font-weight:800}
ol.u-steps{padding-left:0;list-style:none;counter-reset:step}
ol.u-steps li{counter-increment:step;padding-left:44px;position:relative;margin:.9rem 0}
ol.u-steps li:before{content:counter(step);position:absolute;left:0;top:0;background:var(--c-green);color:#fff;
  width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--f-mono);font-weight:700}

/* ===== pricing table ===== */
.u-table{width:100%;border-collapse:collapse;font-size:.95rem}
.u-table th,.u-table td{border:1px solid var(--c-line);padding:12px 14px;text-align:left}
.u-table th{background:var(--c-asphalt);color:#fff;font-family:var(--f-head)}
.u-table tr:nth-child(even) td{background:#f2f5f3}
.u-tablewrap{overflow-x:auto}

/* ===== areas / tags ===== */
.u-tags{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.u-tags a,.u-tags span{background:#eef2f0;border:1px solid var(--c-line);padding:7px 14px;border-radius:20px;font-size:.88rem;text-decoration:none;color:var(--c-asphalt)}

/* ===== lead form ===== */
.u-form{border:3px solid var(--c-green);border-radius:14px;padding:24px;background:#fff;position:sticky;top:96px}
.u-form h3{margin-top:0}
.u-form label{display:block;font-weight:700;font-size:.88rem;margin:12px 0 4px;font-family:var(--f-head)}
.u-form input,.u-form select,.u-form textarea{width:100%;padding:12px;border:1px solid #c7cfcb;border-radius:7px;font-size:1rem;font-family:var(--f-body)}
.u-form .u-btn{width:100%;margin-top:16px}
.u-small{font-size:.84rem;color:var(--c-muted)}
@media(max-width:820px){.u-form{position:static}}

/* ===== footer ===== */
.u-footer{background:var(--c-asphalt);color:#b9c3bf;padding:34px 0 100px;font-size:.92rem;margin-top:10px}
.u-footer a{color:#fff}
.u-footer h4{color:#fff;font-size:1rem;margin:0 0 10px}
.u-footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:22px}
.u-footer .u-mono{color:var(--c-amber)}
@media(min-width:820px){.u-footer{padding-bottom:34px}}

/* ===== sticky mobile call bar ===== */
.u-sticky-call{display:none}
@media(max-width:819px){
  .u-sticky-call{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:80;background:var(--c-amber);
    justify-content:center;align-items:center;gap:8px;padding:14px 10px;font-family:var(--f-head);font-weight:800;
    color:var(--c-asphalt);font-size:1.05rem;box-shadow:0 -4px 14px rgba(0,0,0,.25);min-height:56px}
  .u-sticky-call:active{background:#ffb04a}
  body{padding-bottom:64px}
}

/* ===== mobile refinements ===== */
@media(max-width:819px){
  h1{font-size:1.55rem}
  h2{font-size:1.28rem}
  .u-nav-row{padding:10px 16px}
  .u-hamburger{display:block}
  .u-menu{display:none;width:100%;flex-direction:column;padding:8px 0 4px}
  .u-menu a{margin-left:0;display:block;padding:11px 4px;border-bottom:1px solid var(--c-line)}
  .u-nav-toggle:checked ~ .u-menu{display:flex}
  .u-hero{padding:26px 0 30px}
  .u-hero-sign{padding:20px 18px 18px}
  .u-hero h1{font-size:1.5rem}
  .u-btn-lg{width:100%}
  .u-hero-ctas{flex-direction:column}
  .u-hero-ctas .u-btn{width:100%}
  .u-topbar .u-wrap{justify-content:center;text-align:center}
  .u-topbar .u-hide-mobile{display:none}
}
@media(max-width:380px){h1{font-size:1.38rem}}