/* Toledo Sealcoating - shared stylesheet for the homepage and every generated page.
   Design: "Heavy Industrial". Concrete and steel job-site look. Condensed uppercase
   Oswald, hard black rules, offset drop shadows like stencilled placards, and true
   safety yellow used as a deliberate accent rather than smeared everywhere.

   Edit styling HERE, not in build_pages.py. */

:root{
  --ink:#16181A;          /* machine black */
  --ink2:#22262A;
  --ink3:#2C3238;
  --concrete:#E9E7E1;     /* poured concrete */
  --concrete-d:#D6D3CB;
  --paper:#F5F4F0;
  --yellow:#FFD100;       /* true safety yellow */
  --yellow-d:#C99F00;     /* darkened, for text on light backgrounds */
  --rule:#C6C2B8;
  --text:#2A2E33;
  --muted:#5D6167;

  /* legacy aliases: referenced from inline styles in generated markup. Keep these. */
  --hv:#16181A;
  --amber:#FFD100;
  --amber-d:#C99F00;
  --line:#C6C2B8;
  --white:#FFFFFF;

  --wrap:1200px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--text);
  font-family:'Barlow',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:17.5px;line-height:1.58;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:'Oswald',sans-serif;margin:0;color:var(--ink);line-height:1;
  letter-spacing:.005em;font-weight:700;text-transform:uppercase}
.disp{font-size:clamp(2.1rem,5vw,3.5rem)}
h1.disp{font-size:clamp(3rem,7.6vw,6.2rem);line-height:.92}
p{margin:0 0 1rem}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.ico{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
mark,.hl{background:var(--yellow);color:var(--ink);padding:0 .12em;
  box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* hazard stripe, a structural rule used sparingly */
.hazard{height:9px;background:repeating-linear-gradient(45deg,
  var(--yellow) 0 16px, var(--ink) 16px 32px)}

/* ---------------------------------------------------------------- topbar + header */
.topbar{background:var(--ink2);color:#A8AEB5;font-size:.78rem;
  font-family:'Oswald',sans-serif;letter-spacing:.1em;text-transform:uppercase;font-weight:500}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;
  min-height:38px;padding-top:8px;padding-bottom:8px}
.topbar a{color:var(--yellow);text-decoration:none}
@media(max-width:760px){.topbar .l{display:none}.topbar .wrap{justify-content:center}}

header{position:sticky;top:0;z-index:60;background:var(--ink);border-bottom:3px solid var(--yellow)}
.nav{display:flex;align-items:center;gap:30px;min-height:76px}
.brand{display:flex;align-items:center;text-decoration:none;margin-right:auto}
.brand img{height:38px;width:auto}
.brand.txt{font-family:'Oswald',sans-serif;font-weight:700;font-size:1.22rem;letter-spacing:.03em;
  color:#fff;text-transform:uppercase;line-height:1.05;display:block}
.brand.txt em{font-style:normal;color:var(--yellow)}
.brand.txt span{display:block;font-family:'Barlow',sans-serif;font-size:.62rem;letter-spacing:.24em;
  color:#8A9099;font-weight:600;margin-top:4px;text-transform:none}
.links{display:flex;gap:26px}
.links a{text-decoration:none;font-family:'Oswald',sans-serif;font-size:.82rem;font-weight:500;
  color:#B6BCC3;letter-spacing:.12em;text-transform:uppercase;transition:color .18s}
.links a:hover{color:var(--yellow)}
.burger{display:none;background:none;border:2px solid #3A4148;padding:9px;color:#fff;cursor:pointer}
#mnav{display:none;flex-direction:column;background:var(--ink2)}
#mnav.open{display:flex}
#mnav a{padding:16px 24px;text-decoration:none;font-family:'Oswald',sans-serif;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;font-size:.86rem;color:#D4D8DD;
  border-bottom:1px solid #333A41}
@media(max-width:960px){.links{display:none}.burger{display:block}}

/* ---------------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:16px 30px;
  font-family:'Oswald',sans-serif;font-weight:600;font-size:.94rem;letter-spacing:.1em;
  text-transform:uppercase;text-decoration:none;border:0;cursor:pointer;transition:all .18s ease}
.btn-amber{background:var(--yellow);color:var(--ink);box-shadow:4px 4px 0 var(--ink)}
.btn-amber:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.btn-dark{background:var(--ink);color:#fff;box-shadow:4px 4px 0 var(--yellow)}
.btn-dark:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--yellow)}
.btn-ghost{background:transparent;color:var(--ink);border:2px solid var(--ink)}
.btn-ghost:hover{background:var(--ink);color:#fff}
.btn-lg{padding:18px 34px;font-size:1rem}
header .btn{padding:12px 22px;font-size:.82rem}
@media(max-width:960px){header .btn{display:none}}
/* on dark bands an outline button needs light strokes */
.band .btn-ghost,.contact .btn-ghost{color:#fff;border-color:#fff}
.band .btn-ghost:hover,.contact .btn-ghost:hover{background:#fff;color:var(--ink)}

/* ---------------------------------------------------------------- eyebrow / plate */
.eyebrow{display:inline-block;font-family:'Oswald',sans-serif;font-size:.72rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;background:var(--ink);color:var(--yellow);
  padding:7px 14px;margin-bottom:20px}
.eyebrow .ico{display:none}
.band .eyebrow,.contact .eyebrow{background:var(--yellow);color:var(--ink)}

/* ---------------------------------------------------------------- hero */
.hero{background:var(--concrete);border-bottom:1px solid var(--rule);position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:linear-gradient(var(--rule) 1px,transparent 1px),
                   linear-gradient(90deg,var(--rule) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(closest-side at 78% 40%,#000,transparent 78%);
  mask-image:radial-gradient(closest-side at 78% 40%,#000,transparent 78%)}
.hero .wrap{position:relative;padding:78px 24px;display:grid;grid-template-columns:1.12fr .88fr;
  gap:52px;align-items:center}
@media(max-width:1000px){.hero .wrap{grid-template-columns:1fr;gap:40px;padding:54px 24px}}
.hero h1{margin-bottom:0}
/* The highlighted word. h1.disp runs at line-height .92, which is what gives the
   headline its tight stacked look, and a full-height background on the <em> at that
   spacing paints UP into the line above: on the homepage "gets in." was sitting on
   top of "before" and covering the bottom of its letters. Reported 23 Aug 2026.
   The fix is to paint the highlight only around the glyphs rather than the whole
   font box, and to give the headline just enough line-height for the box to clear
   the line above without losing the stacked look. */
.hero h1 em{font-style:normal;color:var(--ink);padding:0 .12em;
  background:linear-gradient(var(--yellow),var(--yellow)) no-repeat center / 100% 78%;
  box-decoration-break:clone;-webkit-box-decoration-break:clone}
.hero h1.disp{line-height:1.02}
.lead{font-size:1.18rem;color:#3E434A;max-width:46ch;margin-top:26px;line-height:1.55}
.hero .cta{display:flex;gap:16px;flex-wrap:wrap;margin-top:34px}
.trust{display:flex;flex-wrap:wrap;gap:9px 28px;margin-top:32px;padding-top:24px;
  border-top:2px solid var(--ink);font-family:'Oswald',sans-serif;font-size:.8rem;
  letter-spacing:.09em;text-transform:uppercase;color:#40454B;font-weight:500}
.trust span{display:flex;align-items:center;gap:9px}
.trust .ico{width:16px;height:16px;stroke-width:3;color:var(--ink)}

/* photo slot. Honest placeholder until real job photos exist. */
.shot{border:3px solid var(--ink);aspect-ratio:4/5;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:34px;gap:14px;
  background:var(--paper);box-shadow:8px 8px 0 var(--ink);position:relative;overflow:hidden}
.shot img{width:100%;height:100%;object-fit:cover}
.shot .n{font-family:'Oswald',sans-serif;font-size:3rem;font-weight:700;color:var(--concrete-d)}
.shot p{font-size:.86rem;color:var(--muted);margin:0;max-width:26ch;line-height:1.5}
@media(max-width:1000px){.shot{aspect-ratio:16/10}}

/* ---------------------------------------------------------------- stat band */
.stats{background:var(--ink)}
.stats .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
@media(max-width:760px){.stats .wrap{grid-template-columns:1fr}}
.stat{padding:42px 30px 42px 0}
.stat + .stat{border-left:1px solid #333A41;padding-left:32px}
@media(max-width:760px){.stat + .stat{border-left:none;border-top:1px solid #333A41;padding:28px 0}
  .stat{padding:28px 0}}
.stat b{display:block;font-family:'Oswald',sans-serif;font-size:clamp(2.5rem,5.6vw,3.8rem);
  font-weight:700;line-height:.95;color:var(--yellow)}
.stat span{display:block;margin-top:12px;font-size:.95rem;color:#A8AEB5;max-width:30ch}

/* ---------------------------------------------------------------- sections */
section{padding:88px 0}
@media(max-width:760px){section{padding:60px 0}}
.sec-head{margin-bottom:52px;max-width:58ch}
.sec-head p{margin-top:20px;font-size:1.05rem;color:var(--muted);max-width:52ch}

.band{background:var(--ink);color:#B6BCC3}
.band h2,.band h3{color:#fff}
.band p,.band .lead,.band .sec-head p{color:#A8AEB5}

/* ---------------------------------------------------------------- cards / placards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
.card{background:#fff;border:2px solid var(--ink);padding:28px 26px;text-decoration:none;
  display:block;transition:all .18s ease;box-shadow:5px 5px 0 var(--rule)}
a.card:hover{box-shadow:5px 5px 0 var(--yellow);transform:translate(-2px,-2px)}
.card .ic{width:42px;height:42px;background:var(--yellow);color:var(--ink);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;border:2px solid var(--ink)}
.card .ic .ico{width:21px;height:21px;stroke-width:2.2}
.card h3{font-size:1.3rem;margin-bottom:11px}
.card p{color:var(--muted);font-size:.95rem;margin:0;line-height:1.5}
.card .more{margin-top:16px;display:inline-flex;align-items:center;gap:7px;
  font-family:'Oswald',sans-serif;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);font-weight:600}
a.card:hover .more{color:var(--yellow-d)}
.band .card{background:var(--ink2);border-color:#3A4148;box-shadow:5px 5px 0 #0E1013}
.band a.card:hover{box-shadow:5px 5px 0 var(--yellow)}
.band .card p{color:#A8AEB5}

/* ---------------------------------------------------------------- two-column honesty */
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
.panel{border:2px solid var(--ink);padding:34px 30px;background:#fff}
.panel.yes{background:var(--yellow);box-shadow:6px 6px 0 var(--ink)}
.panel h3{font-size:1.16rem;margin-bottom:20px;display:flex;align-items:center;gap:11px}
.panel ul{list-style:none;margin:0;padding:0}
.panel li{padding:12px 0;border-bottom:1px solid var(--rule);font-size:.97rem;line-height:1.5;
  color:#3B4046;padding-left:0}
.panel li::before{display:none}
.panel.yes li{border-bottom-color:rgba(22,24,26,.2);color:#22262A}
.panel li:last-child{border-bottom:none}
.band .panel{background:var(--ink2);border-color:#3A4148}
.band .panel li{color:#A8AEB5;border-bottom-color:#333A41}
.band .panel.yes{background:var(--yellow);border-color:var(--ink);box-shadow:6px 6px 0 #0E1013}
.band .panel.yes li,.band .panel.yes h3{color:#22262A}

/* ---------------------------------------------------------------- process */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:s}
@media(max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.steps{grid-template-columns:1fr}}
.step{border-top:5px solid var(--ink);padding-top:22px;position:relative}
.step::before{counter-increment:s;content:'STEP 0' counter(s);display:block;
  font-family:'Oswald',sans-serif;font-size:.74rem;letter-spacing:.18em;
  color:var(--yellow-d);margin-bottom:12px;font-weight:600}
.step h3{font-size:1.1rem;margin-bottom:10px}
.step p{font-size:.92rem;color:var(--muted);margin:0;line-height:1.52}
.band .step{border-top-color:var(--yellow)}
.band .step p{color:#A8AEB5}
.band .step::before{color:var(--yellow)}

/* ---------------------------------------------------------------- prose (service + town) */
.prose{display:grid;grid-template-columns:1fr 340px;gap:52px;align-items:start}
@media(max-width:960px){.prose{grid-template-columns:1fr;gap:36px}}
.prose h2{font-size:1.7rem;margin:44px 0 16px}
.prose h2:first-child{margin-top:0}
.prose p{color:#3B4046;line-height:1.68}
.prose ul{padding-left:0;list-style:none;margin:0 0 1.2rem}
.prose ul li{position:relative;padding-left:26px;margin-bottom:10px;color:#3B4046}
.prose ul li::before{content:'';position:absolute;left:0;top:.66em;width:12px;height:4px;
  background:var(--yellow);border:1px solid var(--ink)}
.prose a.inline{color:var(--ink);font-weight:600;
  background:linear-gradient(var(--yellow),var(--yellow));
  background-size:100% .3em;background-position:0 88%;background-repeat:no-repeat;
  text-decoration:none;transition:background-size .18s}
.prose a.inline:hover{background-size:100% 100%}
.aside{position:sticky;top:100px;background:#fff;border:2px solid var(--ink);padding:28px;
  box-shadow:6px 6px 0 var(--rule)}
.aside h3{font-size:1.1rem;margin-bottom:12px}
.aside p{font-size:.93rem;color:var(--muted)}
.aside .btn{width:100%;margin-top:6px}
.aside .ph{display:flex;align-items:center;gap:10px;margin-top:18px;text-decoration:none;
  color:var(--ink);font-family:'Oswald',sans-serif;font-size:1.16rem;font-weight:600;letter-spacing:.02em}
@media(max-width:960px){.aside{position:static}}

/* ---------------------------------------------------------------- season notice */
.season{background:var(--ink)}
.season .wrap{display:flex;align-items:center;gap:22px;padding:26px 24px;flex-wrap:wrap}
.season .ic{width:46px;height:46px;background:var(--yellow);color:var(--ink);
  display:flex;align-items:center;justify-content:center;flex:none}
.season b{color:#fff;font-family:'Oswald',sans-serif;font-size:1.1rem;display:block;
  margin-bottom:4px;text-transform:uppercase;letter-spacing:.02em}
.season span{color:#A8AEB5;font-size:.95rem}
.season .btn{margin-left:auto}
@media(max-width:760px){.season .btn{margin-left:0;width:100%}}

/* ---------------------------------------------------------------- pricing */
.ptable{background:#fff;border:2px solid var(--ink);box-shadow:6px 6px 0 var(--rule)}
.prow{display:grid;grid-template-columns:1fr auto;gap:18px;padding:20px 24px;
  border-bottom:1px solid var(--rule);align-items:baseline}
.prow:last-child{border-bottom:none}
.prow strong{font-family:'Oswald',sans-serif;font-size:1.04rem;text-transform:uppercase;font-weight:600}
.prow small{display:block;color:var(--muted);font-weight:400;font-size:.9rem;margin-top:4px;
  font-family:'Barlow',sans-serif;text-transform:none;letter-spacing:0}
.prow .amt{font-family:'Oswald',sans-serif;font-weight:700;font-size:1.2rem;color:var(--ink);white-space:nowrap}

/* ---------------------------------------------------------------- areas */
.areas{display:flex;flex-wrap:wrap;gap:10px}
.areas a,.areas span{padding:12px 20px;background:#fff;border:2px solid var(--ink);
  font-family:'Oswald',sans-serif;font-weight:500;font-size:.84rem;letter-spacing:.1em;
  text-transform:uppercase;text-decoration:none;color:var(--ink);transition:all .16s}
.areas a:hover{background:var(--yellow)}
.areas span{border-color:var(--rule);color:var(--muted)}
.aside .areas a{padding:9px 13px;font-size:.74rem}

/* ---------------------------------------------------------------- faq */
.faq{max-width:880px}
.faq details{border:2px solid var(--ink);margin-bottom:12px;background:#fff}
.faq summary{cursor:pointer;list-style:none;padding:22px 52px 22px 24px;position:relative;
  font-family:'Oswald',sans-serif;font-weight:600;font-size:1.05rem;color:var(--ink);text-transform:uppercase}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'';position:absolute;right:22px;top:50%;width:13px;height:13px;
  border-right:3px solid var(--ink);border-bottom:3px solid var(--ink);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s}
.faq details[open] summary{background:var(--yellow)}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq details p{color:var(--muted);padding:6px 24px 22px;margin:0}

/* ---------------------------------------------------------------- contact */
.contact{background:var(--ink)}
.contact h2,.contact h3{color:#fff}
.contact .lead,.contact p{color:#A8AEB5}
.contact .grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
@media(max-width:960px){.contact .grid{grid-template-columns:1fr;gap:38px}}
.cinfo{margin-top:32px}
.cinfo a,.cinfo div{display:flex;gap:16px;align-items:center;padding:18px 0;
  border-bottom:1px solid #333A41;text-decoration:none;color:#fff}
.cinfo .ic{width:42px;height:42px;background:var(--yellow);color:var(--ink);
  display:flex;align-items:center;justify-content:center;flex:none}
.cinfo small{display:block;font-family:'Oswald',sans-serif;font-size:.68rem;letter-spacing:.2em;
  color:var(--yellow);text-transform:uppercase;font-weight:500;margin-bottom:5px}
.cinfo strong{font-family:'Oswald',sans-serif;font-size:1.18rem;font-weight:600;
  letter-spacing:.02em;color:#fff}

form.q{background:var(--paper);border:3px solid var(--yellow);padding:34px}
form.q h3{font-size:1.44rem;margin-bottom:8px;color:var(--ink)}
.fsub{color:var(--muted);font-size:.92rem;margin-bottom:24px}
form.q label{display:block;font-family:'Oswald',sans-serif;font-size:.7rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:18px 0 7px}
form.q input,form.q select,form.q textarea{width:100%;padding:14px 15px;background:#fff;
  border:2px solid var(--rule);color:var(--ink);font-size:1rem;font-family:inherit;
  transition:border-color .18s}
form.q input:focus,form.q select:focus,form.q textarea:focus{outline:none;border-color:var(--ink)}
form.q textarea{resize:vertical}
form.q .btn{width:100%;margin-top:24px}
.fine{font-size:.83rem;color:var(--muted);margin-top:15px;line-height:1.5}

/* ---------------------------------------------------------------- footer */
footer{background:var(--ink);color:#8A9099;padding:56px 0 0;font-size:.93rem}
footer .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:38px;padding-bottom:44px}
@media(max-width:860px){footer .cols{grid-template-columns:1fr 1fr;gap:30px}}
@media(max-width:520px){footer .cols{grid-template-columns:1fr}}
footer .fl{height:36px;width:auto;margin-bottom:16px}
footer p{color:#8A9099;line-height:1.55}
footer h4{color:var(--yellow);font-size:.7rem;letter-spacing:.2em;margin-bottom:15px;font-weight:600}
footer .col a{display:block;color:#B6BCC3;text-decoration:none;padding:5px 0;transition:color .16s;
  font-family:'Oswald',sans-serif;font-size:.86rem;letter-spacing:.06em;text-transform:uppercase;font-weight:400}
footer .col a:hover{color:var(--yellow)}
footer .phone{display:inline-flex;align-items:center;gap:10px;color:#fff;text-decoration:none;
  font-family:'Oswald',sans-serif;font-size:1.24rem;font-weight:600;margin-top:8px;letter-spacing:.02em}
footer .phone .ico{color:var(--yellow)}
.copy{border-top:1px solid #333A41;padding:22px 0;text-align:center;color:#6E757C;font-size:.84rem}
.copy a{color:#8A9099;text-decoration:none}
.copy a:hover{color:var(--yellow)}

/* ---------------------------------------------------------------- sticky mobile call bar */
.callbar{display:none}
@media(max-width:760px){
  .callbar{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:80;align-items:center;
    justify-content:center;gap:10px;background:var(--yellow);color:var(--ink);
    font-family:'Oswald',sans-serif;font-weight:600;font-size:1rem;letter-spacing:.1em;
    text-transform:uppercase;text-decoration:none;padding:15px;border-top:3px solid var(--ink)}
  body{padding-bottom:60px}
}

/* ---------------------------------------------------------------- reveal on scroll */
.js .reveal{opacity:0;transform:translateY(16px)}
.js .reveal.in{opacity:1;transform:none;transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.3,1)}
@media(prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;transition:none}
  *{scroll-behavior:auto !important}
}

/* SMS consent checkbox on the quote form. Sits inside the dark form card, so the
   text is light on dark rather than the muted grey used on the page body. */
.smsok{display:flex;gap:9px;align-items:flex-start;margin:2px 0 14px;cursor:pointer;
  font-size:.82rem;line-height:1.45;color:#AEB6C0}
.smsok input{width:17px;height:17px;flex:none;margin-top:1px;cursor:pointer;accent-color:var(--yellow)}
.smsok a{color:inherit;text-decoration:underline}


/* ---- PRICING GRID, the thing that broke mobile -------------------------
   The homepage pricing section carried an INLINE style of
   grid-template-columns:1fr 1fr, which no media query can override. On a
   375px phone that forced two 242px columns side by side, the page scrolled
   to 476px wide, and a white bar appeared on the right when you dragged it.
   Reported by Dalton 23 Aug 2026. The rule now lives here where it can
   collapse below 760px like every other two-column block on the site. */
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start}
@media(max-width:760px){
  .pgrid{grid-template-columns:1fr;gap:30px}
  /* The price rows were grid 1fr auto with a nowrap amount, which is fine at
     desktop widths and squeezes the label to nothing at 375px. Stack them. */
  .prow{grid-template-columns:1fr;gap:6px;padding:16px 18px}
  .prow .amt{white-space:normal}
}
/* Belt and braces: nothing on this site should ever scroll sideways on a phone.
   A single overflowing element is enough to break the whole page, and this
   stops any future one from doing so silently. */
html,body{max-width:100%;overflow-x:hidden}

/* ---- PHONE-SIZED HEADLINES ----------------------------------------------
   h1.disp floors at 3rem, which is right for a two-word homepage headline and
   wrong for the inner pages, whose headlines are sentences: "Patching and
   pothole repair, done before anything gets coated" ran to SIX lines on a
   375px phone and filled the first screen before a word of body copy.
   Scanned on 23 Aug 2026: every service and town page was 4 to 6 lines.

   A lower floor on phones keeps them to 3 or so and brings the copy back up
   where a visitor can see it. The homepage is excluded because its headline
   is short and the big size is the point there. The eyebrow badge gets a
   smaller tracking and size on phones for the same reason: it was wrapping
   "ASPHALT REPAIR · TOLEDO & NORTHWEST OHIO" onto two lines. */
@media(max-width:560px){
  body:not(.home) h1.disp{font-size:clamp(2.05rem,9vw,2.6rem);line-height:1.02}
  .eyebrow{font-size:.64rem;letter-spacing:.14em;padding:6px 11px}
}