/* =========================================================================
   site.css — component styles. Reads tokens.css for every value.

   Layout language: a ruled spec sheet. Sections are introduced by a numbered
   head sitting on a heavy rule; content sits in wide grids beneath it. There
   are no drop shadows and no rounded cards anywhere on the site.
   ========================================================================= */

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

body{margin:0;background:var(--paper);color:var(--ink-2);font-family:var(--body);
  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(--red-600)}
a:hover{color:var(--red-700)}
:focus-visible{outline:var(--focus);outline-offset:2px}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--s5)}
.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{position:absolute;left:-999px;top:0;z-index:99;background:var(--red-600);
  color:var(--red-ink);padding:var(--s3) var(--s4);font-weight:700}
.skip:focus{left:0}

/* ---------- mono label: the site's signature small-text treatment ------- */
.lbl{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:var(--track-label);
  text-transform:uppercase;color:var(--red-600);margin:0 0 var(--s3);font-weight:500}

/* ---------- buttons: square, ruled, no radius ---------- */
.btn{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--head);
  font-weight:500;font-size:1rem;letter-spacing:var(--track-nav);text-transform:uppercase;
  padding:.8rem 1.5rem;border:2px solid var(--red-600);background:var(--red-600);
  color:var(--red-ink);text-decoration:none;cursor:pointer;
  transition:background .12s linear,border-color .12s linear,color .12s linear}
.btn:hover{background:var(--red-700);border-color:var(--red-700);color:var(--red-ink)}
.btn--sm{padding:.5rem 1rem;font-size:var(--t-sm)}
.btn--line{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--line:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn--ondark{background:transparent;color:var(--white);border-color:var(--on-dark-line)}
.btn--ondark:hover{background:var(--white);border-color:var(--white);color:var(--ink)}

/* ---------- top strip: the only dark element above the fold ---------- */
.strip-top{background:var(--char-950);color:var(--on-dark-2)}
.strip-top__in{max-width:var(--wrap);margin-inline:auto;padding:.5rem var(--s5);
  display:flex;gap:var(--s5);flex-wrap:wrap;justify-content:space-between;
  font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.03em}
.strip-top strong{color:var(--on-dark);font-weight:500}

/* ---------- masthead ---------- */
.mast{border-bottom:2px solid var(--ink);background:var(--paper)}
.mast__in{max-width:var(--wrap);margin-inline:auto;padding:var(--s4) var(--s5);
  display:flex;align-items:center;gap:var(--s5);flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:.65rem;text-decoration:none}
.brand__mk{width:40px;height:40px;flex:none;border-radius:var(--r-mark);
  background:var(--red-600);display:grid;place-items:center}
.brand__t{font-family:var(--head);font-weight:600;font-size:1.35rem;color:var(--ink);
  line-height:1;letter-spacing:var(--track-head);text-transform:uppercase}
.brand__t small{display:block;font-family:var(--mono);font-weight:400;font-size:.62rem;
  letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-3);
  margin-top:4px}
.nav{margin-left:auto;display:flex;align-items:center;gap:var(--s5);flex-wrap:wrap}
.nav a{font-family:var(--head);font-weight:400;font-size:.94rem;letter-spacing:var(--track-nav);
  text-transform:uppercase;color:var(--ink);text-decoration:none;padding-bottom:2px;
  border-bottom:2px solid transparent}
.nav a:hover{border-bottom-color:var(--red-600);color:var(--red-600)}
.nav .btn{color:var(--red-ink)}
.nav .btn:hover{border-bottom-color:var(--red-700)}
/* The desktop call button. Outline treatment so "Get quotes" stays the one
   loud thing in the header; the handset block below hides this entirely,
   where the header icon and the sticky bar already carry the number. */
.nav .btn--call{background:transparent;color:var(--ink);border-color:var(--ink)}
.nav .btn--call:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}

/* ---------- hero: headline left, drawing right, spec plate underneath --- */
.hero{max-width:var(--wrap);margin-inline:auto;padding:var(--s7) var(--s5) var(--s6);
  display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s7);align-items:center}
.hero h1{font-family:var(--head);font-weight:600;color:var(--ink);
  font-size:clamp(2.3rem,5vw,3.6rem);line-height:var(--lh-tight);
  letter-spacing:var(--track-head);text-transform:uppercase;margin:0 0 var(--s4)}
.hero h1 em{font-style:normal;color:var(--red-600)}
.hero__lede{font-size:var(--t-md);line-height:1.6;color:var(--ink-2);max-width:38rem;
  margin:0 0 var(--s5)}
.hero__cta{display:flex;gap:var(--s3);flex-wrap:wrap}
.hero__note{font-family:var(--mono);font-size:var(--t-xs);color:var(--ink-3);
  margin:var(--s4) 0 0;letter-spacing:.02em}

/* ---------- spec plate: four ruled cells of hard numbers ---------- */
.plate{border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);
  background:var(--paper-2)}
.plate__in{max-width:var(--wrap);margin-inline:auto;padding:0 var(--s5);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.plate__c{padding:var(--s5) var(--s5) var(--s5) 0;border-right:1px solid var(--line)}
.plate__c:last-child{border-right:none}
.plate__c:not(:first-child){padding-left:var(--s5)}
.plate__k{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:var(--track-label);
  text-transform:uppercase;color:var(--ink-3);margin:0 0 var(--s2)}
.plate__v{font-family:var(--head);font-size:1.6rem;font-weight:600;color:var(--ink);
  line-height:1.1;margin:0}
.plate__v small{font-family:var(--mono);font-size:.7rem;font-weight:400;color:var(--red-600);
  display:block;margin-top:5px;letter-spacing:.03em;text-transform:none}

/* ---------- the blueprint drawing ---------- */
.dwg{border:1px solid var(--line-2);background:var(--white);padding:var(--s4)}
.dwg__hd{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s4);
  border-bottom:1px solid var(--line);padding-bottom:var(--s3);margin-bottom:var(--s3)}
.dwg__t{font-family:var(--head);font-size:.95rem;font-weight:500;text-transform:uppercase;
  letter-spacing:var(--track-nav);color:var(--ink);margin:0}
.dwg__n{font-family:var(--mono);font-size:var(--t-xs);color:var(--ink-3);letter-spacing:.05em}
.dwg svg{width:100%;height:auto}
.dwg svg text{font-family:var(--mono)}
.dwg__key{list-style:none;margin:var(--s3) 0 0;padding:var(--s3) 0 0;
  border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:.4rem var(--s4)}
.dwg__key li{display:flex;gap:.5rem;font-family:var(--mono);font-size:.72rem;
  color:var(--ink-2);line-height:1.4}
.dwg__key b{color:var(--red-600);font-weight:500;flex:none}

/* ---------- section: numbered head on a heavy rule ---------- */
.sec{max-width:var(--wrap);margin-inline:auto;padding:var(--s8) var(--s5)}
.sec--tight{padding-top:var(--s7);padding-bottom:var(--s7)}
.sec__hd{display:grid;grid-template-columns:auto 1fr;gap:var(--s4);align-items:baseline;
  border-top:2px solid var(--ink);padding-top:var(--s3);margin-bottom:var(--s6)}
.sec__idx{font-family:var(--mono);font-size:var(--t-sm);color:var(--red-600);
  letter-spacing:.1em;padding-top:.35rem}
.sec__hd h2,.sec__hd h1{font-family:var(--head);font-weight:600;font-size:var(--t-2xl);
  color:var(--ink);margin:0;letter-spacing:var(--track-head);text-transform:uppercase;
  line-height:1.08}
.sec__hd p{grid-column:2;font-size:.98rem;color:var(--ink-3);margin:var(--s2) 0 0;
  max-width:60ch}

/* dark variant of the section band */
.band{background:var(--char-950);color:var(--on-dark)}
.band .sec__hd{border-top-color:var(--on-dark)}
.band .sec__hd h2{color:var(--white)}
.band .sec__hd p{color:var(--on-dark-2)}
.band .sec__idx{color:var(--red-500)}

/* ---------- service tiles: bordered, indexed, square ---------- */
/* Tiles share their rules rather than sitting apart: the grid draws the top
   and left, each tile draws its own right and bottom, so the whole block
   reads as one ruled sheet however many tiles land in the last row. */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.tile{border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:var(--s5);background:var(--paper);display:flex;flex-direction:column;
  transition:background .12s linear}
.tile:hover{background:var(--white)}
.tile__n{font-family:var(--mono);font-size:var(--t-xs);color:var(--ink-3);
  letter-spacing:.1em;margin:0 0 var(--s3)}
.tile h3{font-family:var(--head);font-size:1.2rem;font-weight:500;text-transform:uppercase;
  letter-spacing:var(--track-head);margin:0 0 var(--s3);line-height:1.15}
.tile h3 a{color:var(--ink);text-decoration:none}
.tile h3 a:hover{color:var(--red-600)}
.tile p{font-size:.94rem;margin:0 0 var(--s4);color:var(--ink-2)}
.tile__pr{margin-top:auto;padding-top:var(--s3);border-top:1px dashed var(--line-2);
  font-family:var(--mono);font-size:.88rem;color:var(--ink);font-weight:500}
.tile__pr span{display:block;font-size:.68rem;color:var(--ink-3);font-weight:400;
  margin-top:3px;letter-spacing:.02em}

/* ---------- the size table: the niche's signature element ---------- */
.sizes{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:.9rem}
.sizes caption{text-align:left;font-family:var(--mono);font-size:var(--t-xs);
  letter-spacing:var(--track-label);text-transform:uppercase;color:var(--on-dark-2);
  padding-bottom:var(--s3)}
.sizes th{text-align:left;font-weight:500;font-size:var(--t-xs);letter-spacing:.08em;
  text-transform:uppercase;color:var(--on-dark-2);padding:0 var(--s4) var(--s3) 0;
  border-bottom:1px solid var(--on-dark-line);white-space:nowrap}
.sizes td{padding:var(--s3) var(--s4) var(--s3) 0;border-bottom:1px solid var(--on-dark-line);
  color:var(--on-dark);vertical-align:baseline}
.sizes tr:hover td{background:rgba(214,206,193,.05)}
.sizes .dim{color:var(--white);font-weight:500;white-space:nowrap}
.sizes .cost{color:var(--white);white-space:nowrap}
.sizes .use{font-family:var(--body);font-size:.9rem;color:var(--on-dark-2)}
.sizes__note{font-size:var(--t-sm);color:var(--on-dark-2);margin:var(--s5) 0 0;max-width:70ch}

/* THE CATALOGUE TABLE — /services/.
   Same furniture as the size table, but every column here holds a sentence
   rather than a dimension, so nothing may be held on one line. `.dim` and
   `.cost` are `white-space:nowrap` because "24x24" and "$15,000–$45,000"
   should never break; run a service name through the same class and the
   table's minimum width becomes the longest name in the catalogue — 645px
   against a 360px screen, measured. The unit drops to its own line instead of
   widening the price column. */
.catalogue .job{color:var(--ink);font-weight:500}
.catalogue .job a{color:inherit;text-decoration:none}
.catalogue .job a:hover{color:var(--red-600)}
.catalogue .cost{white-space:normal}
.catalogue .cost small{display:block;font-size:var(--t-xs);color:var(--ink-3);
  letter-spacing:0}

/* light-background variant, used on the costs page */
.sizes--light th{color:var(--ink-3);border-bottom-color:var(--line-2)}
.sizes--light td{color:var(--ink-2);border-bottom-color:var(--line)}
.sizes--light .dim,.sizes--light .cost{color:var(--ink)}
.sizes--light tr:hover td{background:var(--paper-2)}
.sizes--light caption{color:var(--ink-3)}

/* ---------- directory grid for towns ---------- */
.dir{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--s6)}
.dir__col h3{font-family:var(--head);font-size:1.1rem;font-weight:500;text-transform:uppercase;
  letter-spacing:var(--track-head);color:var(--ink);margin:0 0 var(--s2);
  padding-bottom:var(--s2);border-bottom:2px solid var(--red-600)}
.dir__col>p{font-size:var(--t-sm);color:var(--ink-3);margin:0 0 var(--s4)}
.dir__col ul{list-style:none;margin:0;padding:0}
.dir__col li{border-bottom:1px solid var(--line)}
.dir__col a{display:block;padding:.45rem 0;color:var(--ink-2);text-decoration:none;
  font-size:.94rem}
.dir__col a:hover{color:var(--red-600);padding-left:.3rem}
.dir__col em{font-style:normal;color:var(--ink-3);font-size:.85rem}

/* ---------- process: numbered steps in a ruled row ---------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0;
  border-left:1px solid var(--line)}
.band .steps{border-left-color:var(--on-dark-line)}
.step{padding:0 var(--s5) 0 var(--s5);border-right:1px solid var(--line)}
.band .step{border-right-color:var(--on-dark-line)}
.step:last-child{border-right:none}
.step__n{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.1em;
  color:var(--red-600);margin:0 0 var(--s3)}
.band .step__n{color:var(--red-500)}
.step h3{font-family:var(--head);font-size:1.08rem;font-weight:500;text-transform:uppercase;
  letter-spacing:var(--track-head);color:var(--ink);margin:0 0 var(--s2)}
.band .step h3{color:var(--white)}
.step p{font-size:.93rem;margin:0}
.band .step p{color:var(--on-dark)}

/* ---------- trust bar ---------- */
.trust{border-bottom:1px solid var(--line);background:var(--paper-2)}
.trust__in{max-width:var(--wrap);margin-inline:auto;padding:var(--s4) var(--s5);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--s4)}
.trust__in span{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.04em;
  color:var(--ink-2);display:flex;gap:.5rem;align-items:baseline}
.trust__in span::before{content:"\2713";color:var(--red-600);font-weight:700}

/* ---------- article body (service + town + blog copy) ---------- */
.copy{max-width:var(--measure)}
.copy h3{font-family:var(--head);font-size:1.25rem;font-weight:500;text-transform:uppercase;
  letter-spacing:var(--track-head);color:var(--ink);margin:var(--s6) 0 var(--s3)}
.copy h2{font-family:var(--head);font-size:1.5rem;font-weight:600;text-transform:uppercase;
  letter-spacing:var(--track-head);color:var(--ink);margin:var(--s7) 0 var(--s3)}
.copy ul{margin:0 0 var(--s4);padding-left:1.1rem}
.copy li{margin-bottom:.4rem}
.copy strong{color:var(--ink)}
.copy .lead{font-size:var(--t-md);color:var(--ink);line-height:1.55}

/* the price line under a service description */
.pricebox{border-left:3px solid var(--red-600);background:var(--paper-2);
  padding:var(--s4) var(--s5);margin:var(--s5) 0}
.pricebox b{font-family:var(--mono);font-size:1.05rem;color:var(--ink);display:block;
  margin-bottom:.2rem}
.pricebox span{font-family:var(--mono);font-size:var(--t-xs);color:var(--ink-3);
  letter-spacing:.03em}
.pricebox p{margin:.6rem 0 0;font-size:.94rem}

/* ---------- Q&A ---------- */
.qa{border-top:2px solid var(--ink)}
.qa details{border-bottom:1px solid var(--line)}
.qa summary{cursor:pointer;list-style:none;padding:var(--s4) var(--s6) var(--s4) 0;
  font-family:var(--head);font-size:1.08rem;font-weight:500;text-transform:uppercase;
  letter-spacing:var(--track-head);color:var(--ink);position:relative}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);
  font-family:var(--mono);font-size:1.2rem;color:var(--red-600);line-height:1}
.qa details[open] summary::after{content:"\2013"}
.qa summary:hover{color:var(--red-600)}
.qa__a{padding:0 var(--s6) var(--s5) 0}
.qa__a p{margin:0;font-size:.98rem;max-width:var(--measure)}

/* ---------- call-to-action band ---------- */
.cta{border:2px solid var(--ink);background:var(--paper-2);padding:var(--s6);
  margin-top:var(--s7);display:grid;grid-template-columns:1fr auto;gap:var(--s5);
  align-items:center}
.cta h2{font-family:var(--head);font-size:1.5rem;font-weight:600;text-transform:uppercase;
  letter-spacing:var(--track-head);color:var(--ink);margin:0 0 var(--s2)}
.cta p{margin:0;font-size:.96rem;max-width:52ch}

/* ---------- referral / disclosure block ---------- */
.disclose{border:1px solid var(--line-2);background:var(--white);
  padding:var(--s4) var(--s5);font-size:.92rem;max-width:var(--measure)}
.disclose p:last-child{margin-bottom:0}
.disclose strong{color:var(--ink)}

/* ---------- breadcrumb ---------- */
.crumb{max-width:var(--wrap);margin-inline:auto;padding:var(--s5) var(--s5) 0;
  font-family:var(--mono);font-size:var(--t-xs);color:var(--ink-3);letter-spacing:.03em}
.crumb a{color:var(--ink-3);text-decoration:none}
.crumb a:hover{color:var(--red-600)}

/* ---------- footer ---------- */
.foot{background:var(--char-950);color:var(--on-dark-2);margin-top:var(--s8)}
.foot__in{max-width:var(--wrap);margin-inline:auto;padding:var(--s8) var(--s5) var(--s5)}
.foot__g{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:var(--s6);
  padding-bottom:var(--s6);border-bottom:1px solid var(--on-dark-line)}
.foot h4{font-family:var(--head);font-size:.95rem;font-weight:500;text-transform:uppercase;
  letter-spacing:var(--track-nav);color:var(--white);margin:0 0 var(--s4)}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.foot a{color:var(--on-dark-2);text-decoration:none;font-size:var(--t-sm)}
.foot a:hover{color:var(--white)}
.foot__blurb{font-size:var(--t-sm);margin:0;color:var(--on-dark-2);max-width:36ch}
.foot__legal{padding-top:var(--s5);font-size:.8rem;max-width:82ch;margin:0;
  font-family:var(--mono);line-height:1.6;letter-spacing:.01em}

/* ---------- forms (intake + crew signup share these) ---------- */
.fs{border:1px solid var(--line-2);background:var(--white);padding:var(--s5);
  margin:0 0 var(--s5)}
.fs legend{font-family:var(--head);font-weight:500;font-size:1.05rem;text-transform:uppercase;
  letter-spacing:var(--track-head);color:var(--ink);padding:0 .5rem}
.fs label{display:block;margin-bottom:var(--s4);font-weight:600;color:var(--ink);
  font-size:.92rem}
.fs label[hidden]{display:none}
.fs label.chk{font-weight:400;display:flex;gap:.6rem;align-items:flex-start;color:var(--ink-2)}
.fs input[type=checkbox]{margin-top:.3rem;flex:none;width:17px;height:17px;accent-color:var(--red-600)}
.fs input,.fs select,.fs textarea{display:block;width:100%;margin-top:.35rem;padding:.6rem;
  border:1px solid var(--line-2);font:inherit;font-size:.95rem;font-weight:400;
  background:var(--paper);color:var(--ink)}
.fs input:focus,.fs select:focus,.fs textarea:focus{border-color:var(--red-600);outline:none}
.opt{font-weight:400;color:var(--ink-3);font-size:.82rem;font-family:var(--mono)}
.note{font-size:.88rem;color:var(--ink-3);margin:.4rem 0 0}
.note.err{color:var(--red-700);font-weight:600}

/* =========================================================================
   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 SECTION HEADER WAS A DESKTOP GRID WEARING A MOBILE LAYOUT.
     `.sec__hd` is `grid-template-columns:auto 1fr` — an eyebrow beside a
     heading. Neither track can shrink below its own minimum, so on the
     longest headings the pair simply refused to fit: "Agricultural and
     equipment storage buildings in Greenfield Township" next to a township
     eyebrow measured 423px inside a 390px screen, and the whole page scrolled
     sideways. It affected the town x service pages hardest, which are both
     the deepest pages on the site and the ones with the longest titles.
     Stacking the eyebrow above the heading is what the layout was always
     going to do at this width; it just had to be told. */
  .sec__hd{grid-template-columns:1fr}
  .sec__hd p{grid-column:1}

  /* AND THE HEADING ITSELF. 2.25rem of condensed uppercase is right on a
     desktop and is six lines of shouting on a handset once the heading names
     both a building type and a township — "Agricultural and equipment storage
     buildings in Greenfield Township" filled the screen before a word of the
     page. The clamp keeps the desktop size and lands near 27px on a phone. */
  .sec__hd h1,.sec__hd h2{font-size:clamp(1.5rem,6.4vw,2.25rem)}

  /* Same failure one level down: a headline and its button side by side, with
     a button that cannot shrink because its label names a township. */
  .cta{grid-template-columns:1fr}
  .cta .btn{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(max-width:560px){
  .plate__in{grid-template-columns:1fr}
  .plate__c{border-right:none;border-bottom:1px solid var(--line);padding-left:0!important}
  .plate__c:last-child{border-bottom:none}
  .sizes{font-size:.8rem}
  .sizes th,.sizes td{padding-right:var(--s3)}
}

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


/* ---------- the sticky mobile call bar -----------------------------------
   Hidden entirely on desktop, where the header carries the number. Below the
   nav breakpoint it is the primary way to reach the line: full width, two
   targets well past the 44px/48px minimums, and clear of the home indicator
   via env(safe-area-inset-bottom).

   `body` gets matching bottom padding so the bar never covers the footer's
   last line — the disclosure, which is the one piece of text on the page
   that legally has to be readable.
   ------------------------------------------------------------------------ */
.callbar{display:none}

@media(max-width:900px){
  .callbar{display:grid;grid-template-columns:1.6fr 1fr;gap:1px;
    position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:rgba(28,24,21,.18);box-shadow:0 -6px 24px rgba(28,24,21,.24);
    padding-bottom:env(safe-area-inset-bottom,0px);
    border-top:1px solid rgba(255,255,255,.16)}
  .callbar a{text-decoration:none;display:flex;flex-direction:column;
    align-items:center;justify-content:center;padding:.7rem .5rem;min-height:56px}
  .callbar__call{background:var(--red-500,#B8382F);color:var(--red-ink,#FFF6F3)}
  .callbar__call:hover{background:var(--red-600,#9E2B25)}
  .callbar__lbl{font-weight:800;font-size:1.02rem;line-height:1.1}
  .callbar__sub{font-size:.72rem;line-height:1.25;opacity:.85;margin-top:.1rem;
    text-align:center;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden}
  .callbar__form{background:var(--char-800,#332C25);color:#fff;font-weight:700;
    font-size:.9rem;text-align:center;line-height:1.2}
  .callbar__form:hover{background:var(--char-950,#1C1815)}
  /* Clear the bar so it never covers the footer. */
  body{padding-bottom:calc(60px + env(safe-area-inset-bottom,0px))}
}