/* ============================================================
   MAIN — Plano layout. REPLACES engine/base/assets/css/main.css
   for this site only.

   Modelled on a competitor the client picked out: beige and white
   bands, one green accent used only as big flat rectangles, plain
   heavy sans, large body copy, and the phone number treated as the
   logo. Almost Word-document plainness.

   THE POINT IS THAT IT SHOULD NOT LOOK DESIGNED. Every instinct to
   add a card, a shadow, a radius or a second colour is the wrong
   one here. What this page optimises for is: an older caller, on a
   phone, standing at a gate that will not open, who needs to find
   the number in under two seconds.

   So:
     · body copy is 20px, not 16
     · the CALL button repeats five times down the page
     · buttons are full-width rectangles, not inline pills
     · there are no icons, no cards and no reveal animations that
       could delay text appearing

   NO TEMPLATE FORK. The engine's home.html already emits
   .hero__media (image) followed by .hero__in (headline, sub, two
   buttons), which is exactly this layout — the other sites overlay
   the text on the photo purely because their CSS says to. Restyling
   is enough, so this site inherits every future engine fix.

   Tokens only — no raw colours (hard rule #2). Class names site.js
   binds to are fixed and must not be renamed: #hdr/.stuck,
   [data-menu]/.menu/.open, #nav, #mnav, #burger, #close,
   .macc>button, .rv/.in, #quoteForm/#qSent/#qError/.on, .hp, .sticky
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:20px;line-height:1.55;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;display:block}
p{margin:0 0 16px}p:last-child{margin-bottom:0}
h1,h2,h3,h4{font-family:var(--sans);font-weight:800;line-height:1.12;letter-spacing:-.015em;margin:0}
a{color:inherit}
ul,ol,dl,dd{margin:0;padding:0}
li{list-style:none}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:22px}
.wrap--narrow{max-width:820px}
.sec{padding-block:clamp(36px,4.4vw,54px)}
.sec--alt{background:var(--cream)}
.secx,.head{max-width:60ch;margin-bottom:22px}
.eyebrow{font-size:15px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin:0 0 8px}
.h2{font-size:clamp(28px,4vw,42px)}
.lede{font-size:clamp(19px,2.1vw,22px);color:var(--muted);margin-top:10px}
.small{font-size:16px;color:var(--muted);line-height:1.5}
.center{text-align:left;margin-inline:0}   /* the engine centres some heads; this design never does */
.center .lede{margin-inline:0}

/* ══ BUTTONS — the whole design, really ══
   Full-width flat rectangles. Big enough to hit with a thumb without
   looking, which is the actual use case. */
.btn{display:block;width:100%;background:var(--accent);color:#fff;border:0;border-radius:0;
  text-align:center;text-decoration:none;cursor:pointer;
  font-family:var(--sans);font-size:clamp(23px,3.2vw,32px);font-weight:700;letter-spacing:.02em;
  padding:22px 18px;margin:16px 0;line-height:1.15;
  transition:background .14s}
.btn:hover{background:var(--accent-dk)}
.btn svg{display:none}                      /* no icons anywhere */
.btn--accent,.btn--brand,.btn--zest{background:var(--accent);color:#fff}
.btn--accent:hover,.btn--brand:hover,.btn--zest:hover{background:var(--accent-dk)}
.btn--out{background:var(--bg);color:var(--accent);border:4px solid var(--accent)}
.btn--out:hover{background:var(--accent);color:#fff}
/* .btn--outw is the engine's outline-ON-DARK variant: white text, white border.
   The templates use it for the secondary phone CTA in the home hero, in every
   service and city hero, on both hub heads and in the CTA band — 37 places.
   But in THIS design only .band is dark (--ink). .hero is white, .svc-hero and
   .hub are --cream, .sec inherits white, so it rendered white on white:
   measured 1.00:1 contrast on the home hero, where the phone number is the
   whole point of the button.

   Default it to the accent outline so the phone always reads as a live CTA
   (#3E7D5E on white = 4.9:1, on --cream = 3.7:1; the button is 32px bold, so
   both clear AA), and restore the white version only where the ground is dark. */
.btn--outw{background:transparent;color:var(--accent);border:4px solid var(--accent)}
.btn--outw:hover{background:var(--accent);color:#fff}
.band .btn--outw{background:transparent;color:#fff;border:4px solid #fff}
.band .btn--outw:hover{background:#fff;color:var(--ink)}
.btn--wide{width:100%}
:focus-visible{outline:3px solid var(--ink);outline-offset:2px}

/* ══ HEADER — the phone IS the identity ══ */
.hdr{position:static;background:var(--cream);border-bottom:3px solid var(--line)}
.hdr.stuck{position:static}                 /* no sticky shrink: it moves the number */
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:12px}
/* These rules targeted .phlogo / .phlogo__m / .phlogo__t — classes NO template
   ever renders. partials/header.html emits .logo, and partials/logo.html emits
   .logo__m plus an unclassed <span><b>name</b><span>region</span></span>.
   So none of this applied: the mark fell back to the SVG's intrinsic size
   (419px on screen) and the wordmark ran inline with its own tagline.
   Chandler solved the same problem by overriding partials/header.html; this
   site has no overrides/src, so the fix belongs on the real class names. */
.logo{display:flex;align-items:center;gap:11px;text-decoration:none;
  color:var(--ink);flex:none;max-width:100%}
.logo__m{width:36px;height:36px;display:grid;place-items:center;flex:none}
.logo__m svg{width:36px;height:36px;color:var(--accent)}
.logo b{display:block;font-size:clamp(20px,2.5vw,26px);font-weight:800;
  letter-spacing:-.02em;line-height:1.06}
.logo>span>span{display:block;font-size:13px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted);margin-top:3px}

/* Header phone. Also absent, so it rendered as an underlined link with a
   stray icon. Flat green block, no icon — consistent with `.btn svg{display:none}`. */
.phone{display:inline-flex;align-items:center;background:var(--accent);color:#fff;
  font-family:var(--sans);font-size:19px;font-weight:800;letter-spacing:-.01em;
  text-decoration:none;padding:12px 18px;border-radius:0;white-space:nowrap}
.phone:hover{background:var(--accent-dk)}
.phone svg{display:none}

.nav{display:flex;align-items:center;gap:2px}
.nav>*{position:relative}
.nav a,.nav button.navlink{font-family:var(--sans);font-size:17px;font-weight:700;
  color:var(--ink);text-decoration:none;background:none;border:0;cursor:pointer;
  padding:8px 11px;border-radius:0;display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.nav a:hover,.nav button.navlink:hover{color:var(--accent);text-decoration:underline}
.caret{width:9px;height:9px;opacity:.6}
[aria-expanded="true"] .caret{transform:rotate(180deg)}

/* The dropdowns stay. They are what supply the >=6 city and >=3 sibling links
   audit.py requires on every service and city page. Styled plainly, not removed. */
.menu{position:absolute;top:100%;left:50%;transform:translateX(-50%);min-width:260px;
  background:var(--bg);border:3px solid var(--ink);border-radius:0;padding:5px;
  opacity:0;visibility:hidden;transition:opacity .14s,visibility .14s;z-index:90}
.menu.open{opacity:1;visibility:visible}
.menu::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
.menu--wide{min-width:420px;display:grid;grid-template-columns:1fr 1fr;gap:0}
.menu a{display:block;color:var(--ink)!important;font-size:16px;font-weight:700;
  padding:9px 10px;white-space:normal;line-height:1.25}
.menu a:hover{background:var(--brand-lt)!important;text-decoration:none}
.menu a em{display:block;font-style:normal;font-size:14px;color:var(--muted);font-weight:400}
.menu .all{grid-column:1/-1;border-top:2px solid var(--ink);margin-top:3px;padding-top:8px;
  color:var(--accent)!important}

.hdr__cta{display:flex;align-items:center;gap:10px;flex:none}
.hdr__btn{width:auto;margin:0;padding:14px 26px;font-size:20px}
@media(max-width:1000px){.nav{display:none}.hdr__btn{display:none}.burger{display:grid!important}}
@media(max-width:640px){.hdr__in{flex-wrap:wrap}}
.burger{display:none;background:none;border:3px solid var(--ink);border-radius:0;
  width:48px;height:48px;cursor:pointer;padding:0;place-items:center}
.burger i{display:block;width:20px;height:3px;background:var(--ink);position:relative}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;width:20px;height:3px;background:inherit}
.burger i::before{top:-7px}.burger i::after{top:7px}

.mnav{position:fixed;inset:0;z-index:95;background:var(--paper);transform:translateY(-100%);
  transition:transform .25s;overflow-y:auto;display:none}
.mnav.on{transform:translateY(0)}
@media(max-width:1000px){.mnav{display:block}}
.mnav__top{display:flex;align-items:center;justify-content:space-between;padding:14px 22px;
  border-bottom:3px solid var(--line);background:var(--cream)}
.close{background:none;border:3px solid var(--ink);border-radius:0;width:48px;height:48px;
  font-size:26px;line-height:1;cursor:pointer;color:var(--ink)}
.mnav__body{padding:12px 22px 40px}
.macc{border-bottom:2px solid var(--line)}
.macc>button{width:100%;display:flex;align-items:center;justify-content:space-between;
  background:none;border:0;padding:18px 0;font-family:var(--sans);font-size:22px;font-weight:800;
  color:var(--ink);cursor:pointer;text-align:left}
.macc__p{display:none;padding-bottom:10px}
.macc__p.on{display:block}
.macc__p a{display:block;padding:10px 0 10px 14px;border-left:3px solid var(--line);
  font-size:18px;color:var(--muted);text-decoration:none}
.mlink{display:block;padding:18px 0;border-bottom:2px solid var(--line);
  font-size:22px;font-weight:800;text-decoration:none;color:var(--ink)}
.mnav__cta{display:grid;gap:10px;margin-top:22px}

/* ══ HERO — photo band, then text BELOW it. No overlay. ══ */
.hero{position:static;background:var(--bg);color:var(--ink);padding:0;overflow:visible}
.hero__media{position:static;inset:auto}
.hero__img{width:100%;height:var(--hero-band-h);object-fit:cover;object-position:var(--hero-focus)}
.hero__in{padding-block:26px 8px}
.hero h1{font-size:clamp(32px,5.2vw,54px);line-height:1.08;margin:0 0 12px}
.hero p{font-size:clamp(19px,2.1vw,23px);color:var(--muted);max-width:52ch;margin:0 0 8px}
.hero__tag{font-weight:800;color:var(--ink)!important}
.hero__btns{display:block;margin-top:16px}
/* the engine's decorative pill: hidden. It is chrome, and this page has none. */
.pill,.pulse{display:none}

/* ══ STATS — the loud green strip ══ */
/* Was a baseline-aligned flex row with the value and its label side by side,
   all four pairs wrapping into one another — "Same Day On most calls placed
   before 2pm Free On-site quotes..." read as a single run-on sentence with no
   visible grouping. A grid with the label stacked under its value restores the
   pairing, and hairline gaps let the green band show through as dividers. */
.stats{background:var(--accent);color:#fff}
.stats__g{display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;background:rgba(255,255,255,.28)}
.stat{background:var(--accent);padding:18px 14px;text-align:center}
.stat b{display:block;font-size:clamp(19px,2.3vw,25px);font-weight:800;
  color:#fff;line-height:1.1}
.stat span{display:block;font-size:15px;line-height:1.35;
  color:var(--on-brand-dim);margin-top:5px}
@media(max-width:760px){.stats__g{grid-template-columns:repeat(2,1fr)}}

/* ══ PROBLEMS — plain rows, no cards, no icons ══ */
.grid{display:grid;gap:0}
.g2,.g3,.g4{grid-template-columns:1fr}
.pain{background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:16px 0}
.pain:first-child{border-top:3px solid var(--line)}
.pain__i{display:none}
.pain h3{font-size:clamp(21px,2.4vw,25px);margin-bottom:4px}
.pain p{font-size:19px;color:var(--muted);margin:0}

/* ══ SERVICES — plain rows, same treatment ══ */
.svc{background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;
  padding:16px 0;display:block;text-decoration:none;color:inherit}
.svc:first-child{border-top:3px solid var(--line)}
.svc:hover{background:var(--cream)}
.svc__i{display:none}
.svc h3,.svc__h{font-size:clamp(21px,2.4vw,25px);margin-bottom:4px}
.svc p{font-size:19px;color:var(--muted);margin:0 0 6px}
.more{font-weight:800;color:var(--accent);font-size:18px}

/* ══ WHY ══ */
.why__g{display:grid;gap:30px}
@media(min-width:900px){.why__g{grid-template-columns:1fr 1fr;gap:44px;align-items:start}}
.why__list{display:block;margin-top:18px}
.why__it{padding:14px 0;border-bottom:1px solid var(--line);display:block}
.why__it dt,.why__it h3{font-size:clamp(20px,2.2vw,23px);font-weight:800;margin:0 0 4px}
.why__it dd,.why__it p{font-size:19px;color:var(--muted);margin:0}
.tick{display:none}
.frame,.img-card{border:0;border-radius:0;overflow:hidden}
.frame img,.img-card img{width:100%;height:auto}
.img-card{margin:26px 0}

/* ══ PROCESS — numbered plain rows ══ */
.steps{display:block;counter-reset:st;border-top:3px solid var(--line)}
.st{border:0;border-bottom:1px solid var(--line);padding:14px 0;display:grid;
  grid-template-columns:52px 1fr;align-items:start;gap:10px}
.st__n{counter-increment:st;display:block;width:auto;height:auto;background:none;
  border-radius:0;font-size:26px;font-weight:800;color:var(--accent);line-height:1.1;margin:0}
.st__n::before{content:counter(st)}
.st h3{grid-column:2;font-size:21px;margin:0 0 3px}
.st p{grid-column:2;font-size:19px;color:var(--muted);margin:0}

/* ══ AREAS — a plain readable list, not chips ══ */
.tiles{display:block;columns:2;column-gap:30px;background:none;border:0;border-radius:0;overflow:visible}
@media(min-width:860px){.tiles{columns:3}}
.tiles li{break-inside:avoid;margin:0 0 4px}
.tiles a{display:block;background:none;padding:7px 0;text-decoration:none;color:inherit;
  font-size:20px;font-weight:800}
.tiles a::before{content:"• ";color:var(--accent)}
.tiles a:hover{color:var(--accent)}
.tiles b{display:inline;font-weight:800}
.tiles span{display:none}                   /* county line — the design shows city only */
.tiles__note{margin-top:16px}

/* ══ FAQ ══ */
.faq{border-top:3px solid var(--line)}
details{border-bottom:1px solid var(--line)}
summary{cursor:pointer;list-style:none;padding:16px 42px 16px 0;position:relative;
  font-size:clamp(20px,2.2vw,24px);font-weight:800;line-height:1.25}
summary::-webkit-details-marker{display:none}
summary::after,summary::before{content:"";position:absolute;background:var(--accent)}
summary::after{right:6px;top:calc(50% - 1.5px);width:16px;height:3px}
summary::before{right:12.5px;top:calc(50% - 8px);width:3px;height:16px}
details[open] summary::before{opacity:0}
.ans{padding:0 42px 16px 0;font-size:19px;color:var(--muted);line-height:1.55}

/* ══ QUOTE FORM (inner pages + home foot) ══ */
.quote{background:var(--cream);color:var(--ink);padding-block:clamp(36px,4.4vw,54px)}
.quote__g{display:grid;gap:30px}
@media(min-width:900px){.quote__g{grid-template-columns:1fr 1fr;gap:44px;align-items:start}}
.quote .eyebrow,.quote .h2{color:var(--ink)}
.quote__lede{color:var(--muted);font-size:20px}
.qlist{margin:16px 0 0;border-top:1px solid var(--line)}
.qlist li{padding:11px 0;border-bottom:1px solid var(--line);font-size:19px;color:var(--muted)}
.qlist li::before{content:"• ";color:var(--accent);font-weight:800}
.quote__tel{margin-top:18px}
.quote__tel a{font-size:clamp(23px,2.6vw,30px);font-weight:800;color:var(--ink);text-decoration:none}

.qf,.fcard{background:var(--bg);color:var(--ink);border:3px solid var(--ink);border-radius:0;
  padding:clamp(18px,2.2vw,26px)}
.qf__h,.fcard h3{font-size:clamp(23px,2.6vw,28px);margin-bottom:6px}
.qf__urgent{font-size:17px;color:var(--muted);margin-bottom:14px}
.qf__urgent a{color:var(--accent);font-weight:800}
.field{margin-bottom:12px}
label{display:block;font-size:17px;font-weight:700;margin-bottom:4px;color:var(--ink)}
input,select,textarea{width:100%;font-family:var(--sans);font-size:19px;color:var(--ink);
  background:var(--bg);border:2px solid var(--ink);border-radius:0;padding:12px 12px}
input:focus,select:focus,textarea:focus{outline:3px solid var(--accent);outline-offset:-1px}
textarea{min-height:96px;resize:vertical}
.consent{display:flex;gap:10px;align-items:flex-start;margin:10px 0 14px}
.consent input{width:22px;height:22px;flex:none;margin-top:3px;accent-color:var(--accent)}
.consent label{font-weight:400;font-size:16px;color:var(--muted)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.sent{display:none;text-align:center;padding:22px 6px}
.sent.on{display:block}
.sent h3{font-size:24px;margin-bottom:6px}
.f2{display:grid;gap:12px}
@media(min-width:560px){.f2{grid-template-columns:1fr 1fr}}

/* ══ CTA BAND — dark, last thing on the page ══ */
.band{position:relative;background:var(--ink);color:#fff;overflow:hidden;
  padding-block:clamp(38px,4.6vw,58px);text-align:center}
.band__media{display:none}
.band__in{position:relative;z-index:2;max-width:720px;margin-inline:auto}
.band h2{font-size:clamp(28px,4.4vw,46px);margin-bottom:8px}
.band p{color:var(--on-brand-dim);font-size:20px}
.band__btns{display:block;margin-top:18px}

/* ══ INNER PAGE HEADS ══ */
.hub{background:var(--cream);color:var(--ink);padding-block:clamp(28px,3.4vw,44px)}
.hub .lede{color:var(--muted)}
.hub__btns{display:block;margin-top:14px}
.crumbs{font-size:16px;color:var(--muted);margin-bottom:10px}
.crumbs a{color:var(--muted);text-decoration:underline}
.crumbs span{opacity:.6;margin-inline:5px}
/* The service/city hero is a photo band with a scrim; keep it readable but plain. */
.svc-hero{padding:0!important;background-color:var(--cream)!important;background-image:none!important;
  color:var(--ink)!important;min-height:0!important}
.svc-hero .wrap{padding-block:26px}
.svc-hero h1{color:var(--ink)!important;font-size:clamp(30px,4.6vw,46px)}
.svc-hero__lead{color:var(--muted)!important;font-size:20px!important}
.svc-hero .crumbs{color:var(--muted)}
.svc-hero .eyebrow{color:var(--muted)}

/* ══ SERVICE / CITY PAGE FURNITURE ══ */
.svc-grid{display:grid!important;grid-template-columns:1fr!important;gap:30px!important}
@media(min-width:960px){.svc-grid{grid-template-columns:1fr 320px!important;gap:44px!important}}
.svc-box{background:var(--bg);border:3px solid var(--ink);border-radius:0;padding:18px}
.svc-box h3{font-size:19px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);margin-bottom:10px}
.facts .k{color:var(--muted)}
.how-long{border-left:6px solid var(--accent);background:var(--cream);padding:14px 18px;
  border-radius:0;margin:22px 0;font-size:19px}
.acard{background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:14px 0;
  text-decoration:none;color:inherit;display:block}
.acard:hover{background:var(--cream)}
.acard b{display:block;font-size:21px;font-weight:800}
.acard span{display:block;font-size:17px;color:var(--muted)}
.acard svg{display:none}
.content h2,.svc-main h2{margin:30px 0 10px;font-size:clamp(24px,3vw,32px)}
.content h2:first-child,.svc-main h2:first-child{margin-top:0}
.svc-main p,.content p{font-size:20px}
.why-both{background:var(--bg);border:3px solid var(--ink);border-radius:0;padding:18px;margin:22px 0}
.why-both h3{margin:0 0 10px;font-size:21px}
.why-both ul{margin:12px 0 0;padding-left:20px}
.why-both ul li{margin:7px 0;color:var(--muted);list-style:disc}
.warn-box{background:var(--cream);border-left:6px solid var(--accent);padding:16px 18px;
  border-radius:0;margin:24px 0;font-size:19px}
.warn-box strong{display:block;margin-bottom:6px;font-size:21px}
.mini li{color:var(--muted);font-size:17px;padding:5px 0}
.ptab{background:var(--bg);border:3px solid var(--ink);border-radius:0;overflow:hidden}
.prow{display:flex;justify-content:space-between;gap:14px;align-items:center;padding:13px 16px;
  border-bottom:1px solid var(--line)}
.prow:last-child{border-bottom:0}
.prow .amt{font-weight:800;color:var(--accent);white-space:nowrap}
.tcard{background:var(--bg);border:0;border-bottom:1px solid var(--line);border-radius:0;padding:16px 0}
.stars{color:var(--accent)}

/* ══ STICKY MOBILE BAR ══ */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:75;display:none;gap:0;
  padding:0 0 env(safe-area-inset-bottom);background:var(--accent);border-top:3px solid var(--ink)}
.sticky .btn{flex:1;margin:0;padding:18px 8px;font-size:21px;border:0}
.sticky .btn--out{background:var(--bg);color:var(--accent);border:0;border-left:3px solid var(--ink)}
@media(max-width:820px){.sticky{display:flex}body{padding-bottom:74px}}

/* ══ REVEAL — off. ══
   The engine hides .rv content until it scrolls into view. On a page whose
   whole job is showing words immediately, that is exactly wrong, so .rv is
   visible from the start. The class stays in the markup for site.js. */
.rv{opacity:1;transform:none}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}}