/* =========================================================================
   site.css — component styles for TOMS RIVER SPECIALTY DEMOLITION.
   Industrial / job-site system. Reads tokens.css for every value.
   ========================================================================= */

*,*::before,*::after{box-sizing:border-box}

body{margin:0;background:var(--cream);color:var(--ink-2);font-family:var(--sans);
  font-size:var(--t-base);line-height:var(--lh-body);-webkit-font-smoothing:antialiased}

p{margin:0 0 var(--s4)}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--acc-600)}
h1,h2,h3,h4{font-family:var(--slab);color:var(--ink);font-weight:600;letter-spacing:.01em}
:focus-visible{outline:var(--focus);outline-offset:3px;border-radius:0}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--s6)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* skip link */
.skip{position:absolute;left:-999px;top:0;z-index:99;background:var(--acc-500);
  color:var(--acc-ink);padding:var(--s3) var(--s4);font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.skip:focus{left:0}

/* ---------- the hazard-stripe motif ---------- */
.hazard{height:16px;background:var(--stripe);background-size:56.57px 56.57px}
.hazard--y{height:14px;background:var(--stripe-y);background-size:49.5px 49.5px}
.hazard--thin{height:8px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--slab);font-weight:600;
  font-size:1.02rem;letter-spacing:.05em;text-transform:uppercase;
  padding:.85rem 1.6rem;border-radius:var(--r);border:2px solid var(--acc-500);
  background:var(--acc-500);color:var(--acc-ink);text-decoration:none;cursor:pointer;
  transition:background .12s ease,border-color .12s ease,transform .08s ease}
.btn:hover{background:var(--acc-600);border-color:var(--acc-600);color:var(--white)}
.btn:active{transform:translate(2px,2px)}
.btn--sm{padding:.55rem 1.05rem;font-size:.86rem}
.btn--line{background:transparent;color:var(--white);border-color:var(--on-deep-line)}
.btn--line:hover{background:rgba(255,255,255,.08);border-color:var(--white);color:var(--white)}
.btn--ink{background:transparent;color:var(--ink);border-color:var(--line-heavy)}
.btn--ink:hover{background:var(--ink);border-color:var(--ink);color:var(--cream)}

/* ---------- the dark field: utility + header + hero ---------- */
.field{background:var(--deep-900);position:relative;overflow:hidden;
  border-bottom:none}
.field::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:radial-gradient(120% 90% at 78% -10%,rgba(242,101,30,.16),transparent 60%)}
.field>*{position:relative;z-index:1}

.util{border-bottom:1px solid var(--on-deep-line);background:var(--deep-950)}
.util__in{max-width:var(--wrap);margin-inline:auto;padding:.5rem var(--s6);
  display:flex;gap:var(--s5);flex-wrap:wrap;font-size:var(--t-xs);color:var(--on-deep-2);
  letter-spacing:.03em;text-transform:uppercase}
.util strong{color:var(--hazard);font-weight:600}

.hdr{max-width:var(--wrap);margin-inline:auto;padding:var(--s4) var(--s6);
  display:flex;align-items:center;gap:var(--s6);flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:.75rem;text-decoration:none}
.brand__mk{width:44px;height:44px;border-radius:var(--r);background:var(--acc-500);
  display:grid;place-items:center;flex:none;box-shadow:var(--sh-sm)}
.brand__t{font-family:var(--slab);font-weight:700;font-size:1.32rem;color:var(--white);
  line-height:1;letter-spacing:.03em;text-transform:uppercase}
.brand__t small{display:block;font-family:var(--sans);font-weight:600;font-size:.6rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--acc-500);margin-top:5px}
.nav{margin-left:auto;display:flex;align-items:center;gap:var(--s5);flex-wrap:wrap}
.nav a{color:var(--on-deep);text-decoration:none;font-family:var(--slab);font-weight:500;
  font-size:.98rem;letter-spacing:.04em;text-transform:uppercase}
.nav a:hover,.nav a[aria-current]{color:var(--acc-500)}
.nav a.btn{color:var(--acc-ink)}
.nav a.btn:hover{color:var(--white)}

/* ---------- hero ---------- */
.hero{max-width:var(--wrap);margin-inline:auto;padding:var(--s7) var(--s6) var(--s8);
  display:grid;grid-template-columns:1.35fr 1fr;gap:var(--s7);align-items:center}
.eyebrow{font-family:var(--slab);font-weight:600;font-size:var(--t-sm);letter-spacing:var(--track-label);
  text-transform:uppercase;color:var(--acc-500);margin:0 0 var(--s4);
  display:inline-flex;align-items:center;gap:.6rem}
.eyebrow::before{content:"";width:34px;height:3px;background:var(--acc-500)}
.hero h1{font-family:var(--slab);color:var(--white);font-weight:700;text-transform:uppercase;
  font-size:clamp(2.6rem,5.6vw,4.6rem);line-height:var(--lh-tight);
  letter-spacing:.01em;margin:0 0 var(--s5);text-wrap:balance}
.hero h1 span{color:var(--acc-500)}
.hero__lede{color:var(--on-deep);font-size:1.14rem;line-height:1.6;max-width:40rem}
.hero__cta{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s6)}

/* hero placard — the job-site spec card that replaces the old diagram */
.placard{background:var(--cream);border:3px solid var(--line-heavy);border-radius:var(--r);
  box-shadow:var(--sh);overflow:hidden}
.placard__hd{background:var(--deep-900);color:var(--white);padding:var(--s4) var(--s5);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}
.placard__hd b{font-family:var(--slab);font-weight:600;font-size:1.05rem;letter-spacing:.08em;
  text-transform:uppercase}
.placard__tag{font-family:var(--slab);font-size:.7rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--acc-ink);background:var(--hazard);padding:.25rem .55rem;border-radius:var(--r)}
.placard__body{padding:var(--s2) var(--s5) var(--s5)}
.placard__row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);
  padding:var(--s4) 0;border-bottom:2px solid var(--line)}
.placard__row:last-child{border-bottom:none}
.placard__row .n{font-family:var(--slab);font-weight:700;font-size:1.6rem;color:var(--acc-600);
  line-height:1;width:2.2rem;flex:none}
.placard__row .t{flex:1}
.placard__row .t b{display:block;font-family:var(--slab);font-weight:600;font-size:1.05rem;
  text-transform:uppercase;letter-spacing:.02em;color:var(--ink)}
.placard__row .t small{color:var(--ink-3);font-size:.82rem}
.placard__foot{background:var(--cream-2);border-top:2px solid var(--line-heavy);
  padding:var(--s3) var(--s5);font-size:.8rem;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em;font-weight:600}

/* legacy diagram container (unused, kept harmless) */
.dia svg{width:100%;height:auto}

/* ---------- trust strip ---------- */
.trust{background:var(--deep-950);border-top:none}
.trust__in{max-width:var(--wrap);margin-inline:auto;padding:var(--s4) var(--s6);
  display:flex;gap:var(--s6);flex-wrap:wrap;font-family:var(--slab);font-size:.92rem;font-weight:500;
  letter-spacing:.05em;text-transform:uppercase;color:var(--on-deep)}
.trust__in span{display:inline-flex;align-items:center;gap:.55rem}
.trust__in span::before{content:"";width:9px;height:9px;background:var(--acc-500);flex:none}

/* ---------- stats band ---------- */
.statband{background:var(--deep-900);color:var(--white)}
.statband__in{max-width:var(--wrap);margin-inline:auto;padding:var(--s8) var(--s6);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:var(--s6)}
.statband .stat{border-left:4px solid var(--acc-500);padding-left:var(--s4)}
.statband .stat b{display:block;font-family:var(--slab);font-weight:700;font-size:3rem;
  line-height:1;color:var(--white)}
.statband .stat span{display:block;margin-top:var(--s2);font-size:.82rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--on-deep-2)}

/* ---------- section heads (rail) ---------- */
.rail{max-width:var(--wrap);margin-inline:auto;padding:var(--s8) var(--s6);
  display:grid;grid-template-columns:320px 1fr;gap:var(--s8);align-items:start}
.rail__hd h1,.rail__hd h2{font-family:var(--slab);font-size:var(--t-xl);font-weight:700;color:var(--ink);
  margin:0 0 var(--s3);letter-spacing:.01em;line-height:1.05;text-transform:uppercase}
.rail__hd p{font-size:.98rem;color:var(--ink-3);margin:0}
.rail__lbl{font-family:var(--slab);font-weight:600;font-size:.8rem;letter-spacing:var(--track-label);
  text-transform:uppercase;color:var(--acc-600);margin:0 0 var(--s3);
  display:inline-flex;align-items:center;gap:.5rem}
.rail__lbl::before{content:"";width:22px;height:3px;background:var(--acc-500)}

/* ---------- service rows ---------- */
.rows{border-top:3px solid var(--line-heavy)}
.row{display:grid;grid-template-columns:1fr auto;gap:var(--s5);align-items:start;
  padding:var(--s5) 0;border-bottom:1px solid var(--line)}
.row h3{font-family:var(--slab);font-size:1.24rem;font-weight:600;margin:0 0 .3rem;
  letter-spacing:.01em;text-transform:uppercase}
.row h3 a{color:var(--ink);text-decoration:none}
.row h3 a:hover{color:var(--acc-600)}
.row p{margin:0;font-size:.96rem;max-width:52ch}
.row__pr{text-align:right;white-space:nowrap}
.row__pr b{display:block;font-family:var(--slab);font-size:1.2rem;color:var(--acc-600);font-weight:700}
.row__pr small{font-size:var(--t-xs);color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em}

/* ---------- blocky service grid (home) ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--s5)}
.svc-block{background:var(--white);border:3px solid var(--line-heavy);border-radius:var(--r);
  display:flex;flex-direction:column;box-shadow:var(--sh-sm)}
.svc-block__hd{background:var(--deep-900);color:var(--white);padding:var(--s4) var(--s5);
  display:flex;align-items:center;gap:var(--s3)}
.svc-block__hd .g{font-family:var(--slab);font-weight:700;font-size:1.8rem;line-height:1;color:var(--acc-500);
  flex:none}
.svc-block__hd h3{font-family:var(--slab);font-weight:600;font-size:1.1rem;color:var(--white);margin:0;
  text-transform:uppercase;letter-spacing:.03em;line-height:1.05}
.svc-block__hz{height:7px;background:var(--stripe);background-size:39.6px 39.6px}
.svc-block ul{list-style:none;margin:0;padding:var(--s3) var(--s5) var(--s5);display:grid;gap:0;flex:1}
.svc-block li{border-bottom:1px solid var(--line)}
.svc-block li:last-child{border-bottom:none}
.svc-block li a{display:flex;justify-content:space-between;gap:var(--s3);align-items:baseline;
  padding:.7rem 0;text-decoration:none;color:var(--ink)}
.svc-block li a:hover{color:var(--acc-600)}
.svc-block li .nm{font-weight:600}
.svc-block li .pr{font-family:var(--slab);font-weight:600;color:var(--acc-600);white-space:nowrap;font-size:.92rem}
.svc-block__foot{padding:var(--s3) var(--s5) var(--s5)}
.svc-block__foot a{font-family:var(--slab);font-weight:600;text-transform:uppercase;letter-spacing:.05em;
  font-size:.85rem;color:var(--acc-600);text-decoration:none}
.svc-block__foot a:hover{color:var(--ink)}

/* ---------- cost ranges (bar chart) ---------- */
.costs{background:var(--deep-800);color:var(--on-deep)}
.costs__in{max-width:var(--wrap);margin-inline:auto;padding:var(--s8) var(--s6)}
.costs h2{font-family:var(--slab);font-size:var(--t-xl);font-weight:700;color:var(--white);
  margin:0 0 var(--s3);letter-spacing:.01em;text-transform:uppercase}
.costs__note{font-size:.95rem;color:var(--on-deep-2);max-width:56ch;margin:0 0 var(--s7)}
.bars{display:grid;gap:var(--s4)}
.bar{display:grid;grid-template-columns:230px 1fr 180px;gap:var(--s5);align-items:center}
.bar__n{font-size:.95rem;color:var(--white);font-weight:500;text-transform:uppercase;letter-spacing:.02em;font-family:var(--slab)}
.bar__track{position:relative;height:14px;background:rgba(255,255,255,.08);border:1px solid var(--on-deep-line)}
.bar__fill{position:absolute;top:0;bottom:0;background:var(--acc-500)}
.bar__v{font-family:var(--slab);font-size:1rem;font-weight:600;color:var(--acc-500);text-align:right;white-space:nowrap}
.costs__scale{display:grid;grid-template-columns:230px 1fr 180px;gap:var(--s5);
  margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--on-deep-line)}
.costs__ticks{display:flex;justify-content:space-between;font-size:var(--t-xs);color:var(--on-deep-2)}

/* ---------- service area, grouped by profile ---------- */
.area__g{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--s6)}
.area__col h3{font-family:var(--slab);font-size:1.16rem;font-weight:600;color:var(--ink);
  margin:0 0 var(--s2);letter-spacing:.01em;text-transform:uppercase}
.area__col>p{font-size:var(--t-sm);color:var(--ink-3);margin:0 0 var(--s4);
  padding-bottom:var(--s3);border-bottom:3px solid var(--acc-500)}
.area__col ul{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}
.area__col a{color:var(--ink-2);text-decoration:none;font-size:.95rem}
.area__col a:hover{color:var(--acc-600)}

/* ---------- how it works ---------- */
.how{background:var(--cream-2);border-top:3px solid var(--line-heavy);border-bottom:3px solid var(--line-heavy)}
.how__in{max-width:var(--wrap);margin-inline:auto;padding:var(--s8) var(--s6)}
.how h2{font-family:var(--slab);font-size:var(--t-xl);font-weight:700;color:var(--ink);
  margin:0 0 var(--s7);letter-spacing:.01em;max-width:26ch;text-transform:uppercase;line-height:1.05}
.how__g{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--s6)}
.step{position:relative;padding-top:var(--s5)}
.step::before{content:"";position:absolute;top:0;left:0;width:56px;height:5px;background:var(--acc-500)}
.step__n{font-family:var(--slab);font-size:3.2rem;font-weight:700;color:var(--ink);
  line-height:.9;margin-bottom:var(--s3);-webkit-text-stroke:0}
.step h3{font-family:var(--slab);font-size:1.16rem;font-weight:600;color:var(--ink);margin:0 0 .35rem;
  text-transform:uppercase;letter-spacing:.02em}
.step p{font-size:.95rem;margin:0}

/* ---------- referral strip ---------- */
.strip{background:var(--deep-950)}
.strip__in{max-width:var(--wrap);margin-inline:auto;padding:var(--s7) var(--s6);
  display:grid;grid-template-columns:1fr auto;gap:var(--s6);align-items:center}
.strip h2{font-family:var(--slab);font-size:1.7rem;font-weight:700;color:var(--white);
  margin:0 0 var(--s2);letter-spacing:.01em;text-transform:uppercase}
.strip p{margin:0;color:var(--on-deep-2);font-size:.98rem;max-width:58ch}

/* ---------- faq ---------- */
.faq{display:grid;gap:0;border-top:3px solid var(--line-heavy)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:var(--s5) var(--s6) var(--s5) 0;
  font-family:var(--slab);font-size:1.12rem;font-weight:600;color:var(--ink);
  position:relative;text-transform:uppercase;letter-spacing:.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);
  font-size:1.6rem;font-weight:400;color:var(--acc-500);line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq summary:hover{color:var(--acc-600)}
.faq__a{padding:0 var(--s6) var(--s5) 0}
.faq__a p{margin:0;font-size:.98rem;max-width:var(--measure)}

/* ---------- disclosure ---------- */
.disclose{background:var(--cream-2);border-left:5px solid var(--acc-500);border-top:1px solid var(--line);
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:var(--s5);font-size:.95rem;max-width:var(--measure)}
.disclose p:last-child{margin-bottom:0}

/* ---------- footer ---------- */
.ftr{background:var(--deep-950);color:var(--on-deep-2);padding:0 0 var(--s6);border-top:none}
.ftr::before{content:"";display:block;height:14px;background:var(--stripe);background-size:49.5px 49.5px}
.ftr .wrap{padding-top:var(--s8)}
.ftr__g{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:var(--s6);
  padding-bottom:var(--s7);border-bottom:1px solid var(--on-deep-line)}
.ftr h4{font-family:var(--slab);font-size:1rem;color:var(--acc-500);margin:0 0 var(--s3);font-weight:600;
  text-transform:uppercase;letter-spacing:.06em}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.ftr a{color:var(--on-deep-2);text-decoration:none;font-size:var(--t-sm)}
.ftr a:hover{color:var(--white)}
.ftr__legal{padding-top:var(--s5);font-size:.85rem;max-width:78ch;margin:0}

/* =========================================================================
   THE MOBILE HEADER — hamburger button and drop-down panel.

   Hidden entirely above the breakpoint: these rules cost a desktop visitor
   nothing but the bytes.
   ========================================================================= */
.hdr__act{display:none}
/* justify-content:center is load-bearing, not tidiness. Below 420px the label
   is hidden and the padding drops to 0, so the button is held open by
   min-width:44px alone — a 42px content box with an 18px stack of bars in it.
   A flex container defaults to flex-start, which pinned those bars to the left
   edge with 24px of dead space to their right. On its own that reads as
   slightly wrong; sitting beside the CallRail phone button, whose icon IS
   centred (.hdr__tel uses place-items:center), it reads as broken. */
.burger{display:none;appearance:none;background:transparent;border:1px solid var(--on-deep-line);
  border-radius:var(--r-sm);color:var(--on-deep);font:inherit;font-size:var(--t-sm);
  font-weight:600;cursor:pointer;align-items:center;justify-content:center;gap:.5rem;
  min-height:44px;min-width:44px;padding:0 .8rem}
.burger__bars{display:grid;gap:4px;width:18px}
.burger__bars i{display:block;height:2px;background:currentColor;border-radius:2px;
  transition:transform .18s ease,opacity .18s ease}
/* The three lines fold into an X. Purely a state cue — aria-expanded is what
   actually communicates the state to assistive tech. */
.burger[aria-expanded="true"] .burger__bars i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] .burger__bars i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] .burger__bars i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.hdr__tel{display:inline-grid;place-items:center;min-width:44px;min-height:44px;
  border:1px solid var(--on-deep-line);border-radius:var(--r-sm);color:var(--on-deep);
  text-decoration:none}
.hdr__tel:hover{color:var(--white);border-color:var(--on-deep)}

/* ---------- tablet: columns collapse, nav still inline ---------- */
@media(max-width:960px){
  .hero{grid-template-columns:1fr;gap:var(--s6)}
  .rail{grid-template-columns:1fr;gap:var(--s6)}
  .row{grid-template-columns:1fr}
  .row__pr{text-align:left}
  .bar,.costs__scale{grid-template-columns:1fr}
  .bar__v{text-align:left}
  .strip__in{grid-template-columns:1fr}
  .ftr__g,.foot__g{grid-template-columns:1fr 1fr}
}

/* ---------- handset: the hamburger takes over ---------- */
@media(max-width:900px){
  /* .navhost is the flex container holding the brand, the burger and the nav.
     It is a second class on the template's .hdr, and on the differently-named
     header wrappers two sites in the estate use (.mast__in, .masthead__in), so
     one rule set drives all of them without any site re-declaring it. */
  .navhost{flex-wrap:wrap;gap:var(--s4);padding:var(--s4) var(--s5);align-items:center}
  /* The brand takes the leftover width and yields it: without min-width:0 a
     long site name refuses to shrink, the two 44px buttons no longer fit
     beside it, and the whole action group wraps onto a line of its own. */
  .navhost .brand{flex:1 1 0;min-width:0}
  .brand__t{min-width:0}
  .hdr__act{display:flex;align-items:center;gap:.5rem;margin-left:auto;flex:none}
  .burger{display:inline-flex}

  /* The panel is hidden ONLY when the head script has run. No JS means no
     data-jsnav, which means the nav renders as it always did — every link
     present and clickable. */
  html[data-jsnav] .nav{display:none}
  html[data-jsnav] .nav.is-open{display:flex}

  .nav{order:3;flex-basis:100%;width:100%;margin-left:0;margin-top:var(--s3);
    flex-direction:column;align-items:stretch;gap:0;
    border-top:1px solid var(--on-deep-line);
    max-height:min(70vh,560px);overflow-y:auto;-webkit-overflow-scrolling:touch}
  /* 52px rows: comfortably past the 44px Apple and 48px Android minimums,
     which the bare text links of the desktop nav were nowhere near. */
  .nav a{display:flex;align-items:center;min-height:52px;padding:0 .25rem;
    font-size:1.02rem;border-bottom:1px solid var(--on-deep-line)}
  .nav .btn{justify-content:center;min-height:50px;margin-top:var(--s4);
    border-bottom:0;font-size:1rem}
  .nav .btn+.btn{margin-top:var(--s3)}
  .nav .btn--call{display:none}   /* the sticky bar already carries this */

  /* The utility strip was three wrapped lines of boilerplate above the logo
     — roughly 340px of a 844px screen spent before the brand appeared. */
  .util__in{padding:.45rem var(--s5);gap:var(--s4);font-size:var(--t-xs)}
  /* The number is already on screen twice on a handset — the header icon and
     the sticky bar — so the third copy only costs a line of vertical space. */
  .util__pitch,.util__tail,.util__call{display:none}

  .brand__mk{width:32px;height:32px}
  .brand__t{font-size:1rem}
}

@media(max-width:560px){
  /* Ragged half-width buttons stacked three deep read as an accident. Full
     width also gives each one a 44px+ target without touching the padding. */
  .hero__cta{gap:var(--s3)}
  .hero__cta .btn,.callfirst .btn{flex:1 1 100%;justify-content:center}

  /* ---------------------------------------------------------------------
     THE HANDSET APPEARANCE PASS

     Everything above this point made the sites WORK on a phone — nothing
     wider than the screen, a reachable menu, hittable targets. All of it
     passed on a site that still looked wrong, because "is it 390px wide and
     does the menu open" is not the same question as "does it look right".

     These four rules close that gap. Each one is a defect that survived the
     mechanical checks and was only visible in a screenshot.
     --------------------------------------------------------------------- */

  /* 1. THE HEADLINE FLOOR.
     Sites set their own clamp on the hero h1, and a clamp's FIRST value is a
     floor, not a suggestion — below that width it stops scaling. One site
     had a floor of 2.6rem in uppercase, which on a 390px screen is four
     lines of shouting that fill the viewport before the lede. Capping it
     here lets each site keep its own display size on a desktop and still
     land near 33px on a handset, which is what the good one already did. */
  .hero h1{font-size:clamp(1.85rem,8.4vw,2.35rem)}

  /* 2. THE ORPHANED RULE.
     A decorative dash drawn as a ::before on an inline-flex eyebrow sits on
     its own line the moment the label wraps to two — which at this width it
     always does. It reads as a rendering fault rather than a flourish, so
     the label goes back to being a plain block and the dash stands down. */
  .eyebrow{display:block}
  .eyebrow::before{display:none}

  /* 3. THE BRAND LOCKUP.
     Uppercase with positive tracking costs roughly a third more width than
     the same name in sentence case. That is what drives the longer brands
     onto a second line jammed against the burger. Sentence-case brands are
     unaffected by the tracking reset and simply get tighter leading. */
  .brand__t{font-size:.95rem;line-height:1.15;letter-spacing:0}
  .brand__mk{width:30px;height:30px}

  /* 4. HEADING-PLUS-BADGE ROWS.
     A title and its tag sitting on one row is a two-column layout wearing a
     flexbox, and it collides the moment neither can shrink further. */
  .placard__hd,.card__hd,.panel__hd{flex-wrap:wrap;gap:.4rem}
}

@media(max-width:420px){
  .brand__t small{display:none}   /* the tagline is the first thing to go */
  .burger__lbl{display:none}      /* icon-only below this width */
  .burger{padding:0}
}

/* ---------- handset: everything below the header ---------- */
@media(max-width:760px){
  .wrap,.util__in,.navhost,.hero,.rail,.costs__in,.how__in,.strip__in,.trust__in{
    padding-inline:var(--s5)}
  .hero{padding-block:var(--s5) var(--s7)}
  .rail,.costs__in,.how__in{padding-block:var(--s7)}
  .ftr__g,.foot__g{grid-template-columns:1fr;gap:var(--s5)}
  /* Footer links were 20px tall and stacked 0.4rem apart — a column of
     near-unhittable targets. */
  .ftr ul,.foot ul{gap:0}
  .ftr a,.foot a{display:inline-block;padding:.55rem 0;font-size:.95rem}
  .faq summary{padding-block:var(--s4)}
  .trust__in{gap:var(--s4) var(--s5)}
  /* iOS zooms the whole page when a focused input is under 16px. Every form
     on the site inherits from body, but a nested rule that shrinks type would
     silently reintroduce it, so pin the floor here. */
  input,select,textarea{font-size:max(16px,1rem)}

  /* A data table has an intrinsic minimum width that no amount of wrapping
     gets under. Left alone it widens the page, and mobile Chrome answers by
     zooming the WHOLE document out to fit — measured at 466px, 520px and
     709px of layout viewport on a 390px screen. Body copy renders at two
     thirds size and Search Console calls it "content wider than screen".

     display:block turns the table itself into the scroll container, so the
     table scrolls and the page does not. */
  table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* Long unbroken strings — a URL in a source line, an email address — are the
   usual cause of a phone-width page scrolling sideways. */
body{overflow-x:hidden;-webkit-text-size-adjust:100%}
a,td,dd,li,p{overflow-wrap:break-word}

/* Nothing behind the open menu should scroll away underneath it. */
body.nav-open{overflow:hidden}

@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}

/* ---- permit fee block (town x service pages) --------------------------
   The municipal fee table is the one element on these pages a homeowner
   can check against their own township, so it is set to read as a record
   rather than as marketing: heavy rule, tabular figures, source line. */
.permit__t{width:100%;border-collapse:collapse;margin:var(--s5) 0 var(--s3);
  background:var(--cream);border:2px solid var(--line-heavy);border-radius:var(--r-sm)}
.permit__t caption{caption-side:top;text-align:left;font-family:var(--slab);
  font-size:var(--t-sm);color:var(--ink);padding:0 0 var(--s3);letter-spacing:.01em}
.permit__t th{text-align:left;font-weight:600;color:var(--ink-2);
  padding:var(--s3) var(--s4);border-bottom:1px solid var(--line);line-height:var(--lh-snug)}
.permit__t td{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;
  font-weight:700;color:var(--ink);padding:var(--s3) var(--s4);
  border-bottom:1px solid var(--line)}
.permit__t tr:last-child th,.permit__t tr:last-child td{border-bottom:0}
.permit__src{font-size:var(--t-sm);color:var(--ink-3);line-height:var(--lh-snug);
  margin-top:0}
.permit__cite{display:inline-block;font-size:var(--t-sm);color:var(--ink-3);
  white-space:nowrap}
@media (max-width:34rem){
  .permit__t th,.permit__t td{padding:var(--s3)}
  .permit__t th{font-size:var(--t-sm)}
}

/* ---- the sticky mobile call bar ----------------------------------------
   Phone only. Both actions ship on purpose: calling suits the person whose
   shed just came down in a storm, the form suits the one pricing a pool
   removal at 11pm. Shipping only the call would suppress form conversions
   the site already earns.

   The treatment is deliberately this site's own rather than the estate's
   shared one. The mechanism is common across the network — a fixed two-cell
   bar, call on the left, form on the right — but a dozen sites rendering
   byte-identical bars is the kind of shared skeleton SPEC §9.1 exists to
   prevent. So: a hard rule instead of a soft shadow, matching the placard
   borders used elsewhere here; left-aligned type instead of centred; and the
   slab face on the form cell, which no other site in the estate uses. */
.callbar{display:none}

@media(max-width:760px){
  .callbar{display:grid;grid-template-columns:1.75fr 1fr;gap:0;
    position:fixed;left:0;right:0;bottom:0;z-index:60;
    border-top:3px solid var(--line-heavy,#16181B);
    padding-bottom:env(safe-area-inset-bottom,0px)}
  .callbar a{text-decoration:none;display:flex;flex-direction:column;
    justify-content:center;padding:.5rem var(--s5,.9rem);min-height:62px}
  .callbar__call{background:var(--acc-500,#F2651E);color:var(--acc-ink,#160B03);
    align-items:flex-start;text-align:left}
  .callbar__call:active{background:var(--acc-600,#D8500F)}
  .callbar__lbl{font-family:var(--slab,inherit);font-weight:600;font-size:1.05rem;
    line-height:1.1;letter-spacing:.01em}
  /* Clamped to two lines. The promise string is site-configurable, and a long
     one would otherwise grow the bar past the padding reserved for it below,
     putting the bar on top of the footer it is supposed to clear. */
  .callbar__sub{font-size:.72rem;line-height:1.25;opacity:.82;margin-top:.12rem;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .callbar__form{background:var(--deep-950,#111214);color:var(--cream,#EAE6DF);
    align-items:center;text-align:center;justify-content:center;
    font-family:var(--slab,inherit);font-weight:600;font-size:.82rem;
    text-transform:uppercase;letter-spacing:.06em;line-height:1.15;
    border-left:3px solid var(--line-heavy,#16181B)}
  .callbar__form:active{background:var(--deep-800,#1F2226)}
  .callbar a:focus-visible{outline:3px solid var(--focus,#F2651E);outline-offset:-3px}
  /* Clears the bar so it never covers the footer, safe area included.
     62px min-height + the 3px top rule = 68px of real bar, and this must
     track that total, not just the min-height. Measured at 390px rather
     than eyeballed: the template carries a comment about this exact
     mismatch putting the bar on top of the footer. */
  body{padding-bottom:calc(68px + env(safe-area-inset-bottom,0px))}
}