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

   The layout skeleton came from site #9 (Chandler), because the
   structure is what the reference sites in that niche corroborated
   and it holds for any local trade:

     · the phone number IS the brand mark, top-left, large
     · full-bleed photograph of the actual work
     · plain "service + city" H1, no slogan
     · short form, at the fold
     · ONE accent used hard, no gradients, no secondary palette
     · call CTA repeated in the body, not only the header

   The TREATMENT is this site's own, and it is workwear rather than
   poster. Site #9 shouts in condensed display type on saturated
   red; a radon buyer is a homeowner or their agent choosing a
   contractor mid-transaction, and the approved mockup
   (research/radon-denver/homepage-mockup.html) answers that with a
   job-sign language instead:

     · heaviest weight of the SYSTEM sans for every heading, label
       and button — weight and case, not a specific letterform
     · hard offset shadows and 3px borders. Never a blur.
     · ZERO border radius, anywhere
     · ink, cream and high-viz amber blocks, full-bleed
     · monospace confined to real numbers — pCi/L and the phone

   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
   ============================================================ */

/* No @font-face. Site #9 self-hosts Anton because a condensed poster
   face IS its design and the system fallbacks for it are missing on
   phones — where most local-services traffic is. This design is built
   on weight and case, so the system UI face at 900 carries it, costs
   zero bytes and one fewer request, and avoids two sites in one
   portfolio sharing a self-hosted webfont fingerprint. */

*,*::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:17px;line-height:1.55;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;display:block}
p{margin:0 0 1em}p:last-child{margin-bottom:0}
/* 900, not the 400 site #9 uses: Anton ships one weight and carries its own
   heft, a system sans does not and needs to be asked. Negative tracking too,
   because a system sans set solid at display size gaps where a condensed
   poster face does not. */
h1,h2,h3,h4{font-family:var(--display);font-weight:900;line-height:1.03;letter-spacing:-.03em;margin:0}
h1,.h2{text-transform:uppercase}
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:24px}
.wrap--narrow{max-width:840px}
.sec{padding-block:clamp(48px,6vw,84px)}
.sec--alt,.sec-alt{background:var(--cream)}
.secx,.head{max-width:66ch;margin-bottom:clamp(24px,3vw,40px)}
.eyebrow{font-family:var(--display);font-weight:900;font-size:clamp(15px,1.5vw,20px);letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);margin:0 0 6px;line-height:1.1}
/* On every red or photographic surface the eyebrow flips to yellow. Red on red
   is invisible and red on a dark photo fails contrast — both were live before
   this rule existed, and neither shows up in a build or an audit. */
.eyebrow--onbrand,.hub .eyebrow,#areas .eyebrow,.svc-hero .eyebrow,.quote .eyebrow{color:var(--zest)}
.h2{font-size:clamp(30px,4.4vw,58px);line-height:1}
.lede{font-size:clamp(15.5px,1.4vw,17px);color:var(--muted);max-width:62ch;margin-top:10px}
.small{font-size:14px;color:var(--muted);line-height:1.55}
.center{text-align:center;margin-inline:auto}
.center .lede{margin-inline:auto}
.head .h2{margin-bottom:8px}

/* ══ BUTTONS — poster type, square, thick border, no transition blur ══ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--display);font-weight:900;font-size:clamp(19px,2vw,25px);letter-spacing:.04em;text-transform:uppercase;
  padding:12px 26px;border-radius:0;border:3px solid transparent;cursor:pointer;text-decoration:none;min-height:54px;
  line-height:1;transition:background .14s,color .14s,border-color .14s}
.btn svg{width:20px;height:20px;flex:none}
.btn--accent{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn--accent:hover{background:var(--accent-dk);border-color:var(--accent-dk)}
.btn--brand{background:var(--brand);color:#fff;border-color:var(--brand)}
.btn--brand:hover{background:var(--brand-dk);border-color:var(--brand-dk)}
/* the yellow call button — the loudest element on the page, on purpose */
.btn--zest{background:var(--zest);color:var(--zest-ink);border-color:var(--ink)}
.btn--zest:hover{background:var(--zest-dk);border-color:var(--ink)}
.btn--out{background:transparent;border-color:var(--ink);color:var(--ink)}
.btn--out:hover{background:var(--ink);color:#fff}
.btn--outw{background:transparent;border-color:#fff;color:#fff}
.btn--outw:hover{background:#fff;color:var(--ink)}
.btn--wide{width:100%}
:focus-visible{outline:3px solid var(--zest);outline-offset:2px}

/* ══ HEADER — phone as the brand mark, opaque, above the hero ══
   Fixed rather than absolute-over-the-photo: the references all put the number
   on a solid bar, and it is the single element the whole design is built around,
   so it stays on screen. .stuck (added by site.js at scrollY>90) therefore only
   adds separation — the position never changes, so there is no layout jump. */
/* Ink bar, not a white one. A light header with a red wordmark is the single
   most generic thing a local-services page can lead with, and it was the
   element that made the first pass read corporate. The hazard band hanging
   below it is the design's one piece of decoration — it sits OUTSIDE the bar
   (top:100%) so it overlays the top of the hero photo rather than eating
   header height, and the hero's own top padding already clears the fixed bar. */
.hdr{position:fixed;top:0;left:0;right:0;z-index:80;background:var(--brand)}
.hdr::after{content:"";position:absolute;top:100%;left:0;right:0;height:9px;background:var(--hazard)}
.hdr.stuck{box-shadow:0 6px 0 -3px rgba(var(--ink-rgb),.35)}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-block:11px}

.phlogo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--on-brand);flex:none;max-width:min(56vw,460px)}
.phlogo__m{width:30px;height:30px;display:grid;place-items:center;flex:none;color:var(--zest)}
.phlogo__m svg{width:30px;height:30px}
@media(max-width:700px){.phlogo__m{display:none}}
.phlogo__t{min-width:0}
.phlogo__t b{display:block;font-family:var(--display);font-size:clamp(27px,3.6vw,46px);font-weight:900;
  letter-spacing:.005em;line-height:.92;white-space:nowrap}
.phlogo__t>span{display:block;font-family:var(--display);font-weight:900;font-size:clamp(11px,1.15vw,13.5px);
  letter-spacing:.14em;text-transform:uppercase;color:var(--zest);margin-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.nav{display:flex;align-items:center;gap:2px}
.nav>*{position:relative}
.nav a,.nav button.navlink{font-family:var(--display);font-weight:900;font-size:19px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--on-brand);text-decoration:none;background:none;border:0;cursor:pointer;padding:9px 12px;border-radius:0;
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;transition:color .14s}
.nav a:hover,.nav button.navlink:hover{color:var(--zest)}
.nav a.langsw{color:var(--zest)}
.caret{width:9px;height:9px;opacity:.75;transition:transform .2s}
[aria-expanded="true"] .caret{transform:rotate(180deg)}

.menu{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(-6px);min-width:270px;
  background:var(--bg);border:3px solid var(--ink);border-radius:0;padding:6px;
  opacity:0;visibility:hidden;transition:opacity .16s,transform .16s,visibility .16s;z-index:90}
.menu.open{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.menu::before{content:"";position:absolute;left:0;right:0;top:-13px;height:13px}
.menu--wide{min-width:440px;display:grid;grid-template-columns:1fr 1fr;gap:0}
.menu a{display:block;color:var(--ink)!important;font-family:var(--sans);font-size:14px;font-weight:700;
  padding:9px 11px;white-space:normal;line-height:1.3;text-transform:none;letter-spacing:0}
.menu a:hover{background:var(--brand-lt)!important;color:var(--accent)!important}
.menu a em{display:block;font-style:normal;font-size:12px;color:var(--muted);font-weight:400;margin-top:2px}
.menu .all{grid-column:1/-1;border-top:2px solid var(--ink);margin-top:4px;padding-top:9px;
  color:var(--accent)!important;font-family:var(--display);font-weight:900;font-size:17px;letter-spacing:.04em;text-transform:uppercase}

.hdr__cta{display:flex;align-items:center;gap:10px;flex:none}
.hdr__btn{min-height:46px;padding:9px 20px;font-size:19px;border-radius:var(--r);border-color:var(--zest);
  background:var(--zest);color:var(--zest-ink)}
.hdr__btn:hover{background:var(--zest-dk);color:var(--zest-ink);border-color:var(--zest-dk)}
@media(max-width:1150px){.nav{display:none}.hdr__btn{display:none}.burger{display:grid!important}}
.burger{display:none;background:none;border:3px solid var(--zest);border-radius:0;width:48px;height:48px;cursor:pointer;padding:0;place-items:center}
.burger i{display:block;width:20px;height:3px;background:var(--zest);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}

/* mobile panel */
.mnav{position:fixed;inset:0;z-index:95;background:var(--paper);transform:translateY(-100%);
  transition:transform .3s cubic-bezier(.4,0,.2,1);overflow-y:auto;display:none}
.mnav.on{transform:translateY(0)}
@media(max-width:1150px){.mnav{display:block}}
.mnav__top{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;border-bottom:4px solid var(--brand)}
.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:14px 24px 46px}
.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:17px 0;
  font-family:var(--display);font-weight:900;font-size:24px;letter-spacing:.02em;text-transform:uppercase;color:var(--ink);cursor:pointer;text-align:left}
.macc>button span{color:var(--accent)}
.macc__p{display:none;padding-bottom:12px}
.macc__p.on{display:block}
.macc__p a{display:block;padding:9px 0 9px 15px;border-left:3px solid var(--line);font-size:15.5px;color:var(--muted);text-decoration:none}
.macc__p a:hover{color:var(--accent);border-color:var(--accent)}
.mlink{display:block;padding:17px 0;border-bottom:2px solid var(--line);font-family:var(--display);font-weight:900;
  font-size:24px;letter-spacing:.02em;text-transform:uppercase;text-decoration:none;color:var(--ink)}
.mlink.langsw{color:var(--accent)}
.mnav__cta{display:grid;gap:11px;margin-top:26px}

/* ══ LEAD — full-bleed trowel photo, FORM LEFT, outlined headline right ══ */
.lead{position:relative;color:#fff;background:var(--brand-dk);padding-block:clamp(104px,11vw,138px) clamp(44px,5vw,72px);overflow:hidden}
.lead__media{position:absolute;inset:0;z-index:0}
.lead__img{width:100%;height:100%;object-fit:cover;object-position:var(--hero-focus,70% 42%)}
/* Directional scrim, not a flat wash: heaviest on the form side, almost clear on
   the right so the photograph is still legible behind the headline. */
.lead__media::after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(var(--scrim-rgb),.66) 0%,rgba(var(--scrim-rgb),.42) 55%,rgba(var(--scrim-rgb),.18) 100%)}
.lead__g{position:relative;z-index:2;display:grid;gap:clamp(30px,3.4vw,52px);align-items:start}
/* Desktop puts the form on the LEFT, as both Duda-lineage references do. On
   phones the natural DOM order stands — headline first, so the visitor knows
   what the page is before being asked for their number. */
@media(min-width:1000px){
  .lead__g{grid-template-columns:minmax(0,450px) 1fr}
  .lead__copy{order:2}
  .lead__form{order:1}
}
/* THE signature move: white fill, dark stroke, hard offset shadow. paint-order
   keeps the stroke behind the fill so the letterforms stay crisp. */
.lead h1{font-size:clamp(40px,6vw,84px);line-height:.94;margin-bottom:16px;color:#fff;
  -webkit-text-stroke:2px rgba(0,0,0,.55);paint-order:stroke fill;text-shadow:4px 4px 0 rgba(0,0,0,.4)}
.lead__sub{font-size:clamp(16px,1.6vw,19px);color:#fff;max-width:46ch;margin-bottom:12px;text-shadow:0 1px 4px rgba(0,0,0,.7)}
.lead__tag{font-family:var(--display);font-weight:900;font-size:clamp(20px,2.3vw,27px);letter-spacing:.03em;
  color:var(--zest);margin-bottom:22px;text-shadow:2px 2px 0 rgba(0,0,0,.45)}
.pill{display:inline-flex;align-items:center;gap:9px;background:var(--zest);color:var(--zest-ink);border:3px solid var(--ink);
  padding:7px 14px;font-family:var(--display);font-weight:900;font-size:16px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:18px}
.pulse{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 rgba(var(--zest-rgb),.6);animation:pl 2.2s infinite}
@keyframes pl{70%{box-shadow:0 0 0 10px rgba(var(--zest-rgb),0)}100%{box-shadow:0 0 0 0 rgba(var(--zest-rgb),0)}}
.lead__tel{display:inline-flex;align-items:center;gap:11px;background:var(--zest);color:var(--zest-ink);text-decoration:none;
  font-family:var(--display);font-weight:900;font-size:clamp(24px,2.9vw,38px);letter-spacing:.03em;
  border:4px solid var(--ink);padding:11px 26px;line-height:1.05}
.lead__tel:hover{background:var(--zest-dk)}
.lead__tel svg{width:26px;height:26px;flex:none}

/* the red nameplate above the hero form */
.plate{background:var(--bg);border:5px solid var(--brand);padding:16px 22px;text-align:center;margin-bottom:14px}
.plate b{display:block;font-family:var(--display);font-weight:900;font-size:clamp(26px,3.2vw,42px);
  line-height:.96;color:var(--ink);letter-spacing:.01em;text-transform:uppercase}

/* ══ THE FORM CARD ══ */
.qf{background:var(--bg);color:var(--ink);border-radius:0;padding:clamp(20px,2.2vw,28px);border:3px solid var(--ink)}
.qf__h{font-family:var(--display);font-weight:900;font-size:clamp(26px,2.8vw,34px);margin-bottom:4px;text-transform:uppercase;letter-spacing:.01em}
.qf__urgent{font-size:14px;color:var(--muted);margin-bottom:16px;line-height:1.5}
.qf__urgent a{color:var(--accent);font-weight:700}
/* label beside the input, as all three references do — it buys a shorter form */
.field{display:grid;grid-template-columns:82px 1fr;align-items:center;gap:10px;margin-bottom:12px}
.field:has(textarea){align-items:start}
.field:has(textarea) label{padding-top:10px}
@media(max-width:420px){.field{grid-template-columns:1fr;gap:4px}.field:has(textarea) label{padding-top:0}}
label{display:block;font-family:var(--sans);font-size:15px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--ink);margin:0}
input,select,textarea{width:100%;font-family:var(--sans);font-size:16px;color:var(--ink);background:var(--cream);
  border:1px solid var(--line);border-radius:0;padding:11px 13px;transition:border-color .14s,background .14s}
input:focus,select:focus,textarea:focus{background:var(--bg);border-color:var(--accent);outline:none}
textarea{min-height:92px;resize:vertical}
.consent{display:flex;gap:11px;align-items:flex-start;margin:10px 0 16px}
.consent input{width:20px;height:20px;flex:none;margin-top:3px;accent-color:var(--accent)}
.consent label{font-weight:400;font-size:13px;color:var(--muted);line-height:1.5}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.sent{display:none;text-align:center;padding:26px 6px}
.sent--err h3{color:var(--accent)}
.sent.on{display:block;animation:fd .35s ease both}
.sent h3{font-size:26px;margin-bottom:8px;text-transform:uppercase}
@keyframes fd{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ══ URGENCY STRIP — the yellow band under the hero ══
   Same `stats` data the other sites render as a four-column bar; here it is a
   single centred run of label/detail pairs, which is what carries urgency. */
.trustbar{background:var(--zest);color:var(--zest-ink);border-block:4px solid var(--ink);padding-block:14px}
.trustbar ul{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:8px 26px}
.trustbar li{display:flex;align-items:baseline;gap:8px;padding:0}
.trustbar b{font-family:var(--display);font-weight:900;font-size:clamp(17px,1.9vw,24px);letter-spacing:.03em;
  text-transform:uppercase;color:var(--zest-ink);white-space:nowrap}
.trustbar span{font-size:14.5px;font-weight:700;color:var(--zest-ink);line-height:1.3}

/* ══ GRIDS / CARDS ══ */
.grid{display:grid;gap:18px}
@media(min-width:680px){.g2,.g4{grid-template-columns:1fr 1fr}}
@media(min-width:960px){.g3{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1050px){.g4{grid-template-columns:repeat(4,1fr)}}

.pain{background:var(--bg);border:1px solid var(--line);border-top:6px solid var(--brand);border-radius:0;padding:22px 20px}
.sec--alt .pain{background:var(--bg)}
.pain__i{display:none}
.pain h3{font-size:clamp(21px,2.1vw,25px);margin-bottom:8px;line-height:1.05}
.pain p{font-size:15px;color:var(--muted);line-height:1.55;margin:0}

/* ══ SERVICES AS NUMBERED ROWS ══
   No new markup. The engine's service card is
     a.svc > span.svc__i(svg) + h3 + p + span.more
   and :has() lets the row treatment apply only to grids that actually hold
   service cards, so the area/`.acard` grids elsewhere keep their own layout.
   The 01-08 numbers are a CSS counter rendered into .svc__i, which is already
   there to hold the icon; the icon itself is hidden rather than removed,
   because it is generated from config and other sites still use it. */
.grid:has(>.svc){grid-template-columns:1fr!important;gap:0;counter-reset:svc;border-top:3px solid var(--ink)}
.svc{counter-increment:svc;background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:15px 2px;
  display:grid;grid-template-columns:64px minmax(0,1fr) auto;grid-template-areas:"n t a" "n d a";
  column-gap:8px;align-items:center;text-decoration:none;color:inherit;transition:background .14s}
.svc:hover{background:var(--cream);transform:none}
.svc__i{grid-area:n;width:auto;height:auto;background:none;border-radius:0;margin:0;display:block;
  font-family:var(--display);font-weight:900;font-size:clamp(28px,3vw,36px);color:var(--accent);line-height:1;letter-spacing:.02em}
.svc__i svg{display:none}
.svc__i::before{content:counter(svc,decimal-leading-zero)}
.svc h3,.svc__h{grid-area:t;font-size:clamp(20px,2.1vw,26px);margin:0;line-height:1.1}
.svc p{grid-area:d;font-size:15px;color:var(--muted);line-height:1.5;margin:2px 0 0}
.more{grid-area:a;align-self:center;margin:0;font-family:var(--display);font-weight:900;font-size:22px;
  letter-spacing:.03em;text-transform:uppercase;color:var(--accent);white-space:nowrap;padding-left:14px}
@media(max-width:560px){
  .svc{grid-template-columns:46px minmax(0,1fr);grid-template-areas:"n t" "n d"}
  .more{display:none}
}

/* ══ WHY ══ */
.why__g{display:grid;gap:clamp(28px,3.6vw,56px);align-items:center}
@media(min-width:940px){.why__g{grid-template-columns:1fr 1fr}}
.why__list{display:grid;gap:0;margin-top:22px;border-top:1px solid var(--line)}
.why__it{padding:14px 0;border-bottom:1px solid var(--line)}
.why__it dt{font-family:var(--display);font-weight:900;font-size:clamp(19px,2vw,24px);letter-spacing:.01em;margin-bottom:3px}
.why__it dd{font-size:15px;color:var(--muted);margin:0;line-height:1.5}
/* .tick is the engine home template's check bullet. This site's forked home.html
   uses dl/dt/dd and never renders one, but the service-page sidebar does — so it
   is styled, not hidden. Hiding it here would silently strip the promise list. */
.tick{width:24px;height:24px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;flex:none;margin-top:2px}
.tick svg{width:13px;height:13px}
.frame,.img-card{border-radius:0;overflow:hidden;border:5px solid var(--ink)}
.frame img,.img-card img{width:100%;height:auto;display:block}
.img-card{margin:32px 0}

/* ══ PROCESS — kept; the engine already counts these ══ */
.steps{display:grid;gap:0;counter-reset:st;border-top:3px solid var(--ink)}
@media(min-width:900px){.steps{grid-template-columns:repeat(4,1fr);gap:0 26px}}
.st{border-top:0;border-bottom:1px solid var(--line);padding:16px 0}
@media(min-width:900px){.st{border-bottom:0;border-top:6px solid var(--brand);padding-top:18px}}
.st__n{counter-increment:st;display:block;width:auto;height:auto;background:none;border-radius:0;
  font-family:var(--display);font-weight:900;font-size:32px;color:var(--accent);line-height:1;margin-bottom:8px}
.st__n::before{content:counter(st,decimal-leading-zero)}
.st h3{font-size:21px;margin-bottom:6px;line-height:1.08}
.st p{font-size:15px;color:var(--muted);margin:0;line-height:1.5}

/* ══ SERVICE AREAS — white chips on a full red block ══ */
#areas{background:var(--brand);color:#fff}
#areas .lede,#areas .small{color:var(--on-brand-dim)}
.tiles{display:flex;flex-wrap:wrap;gap:10px;background:none;border:0;border-radius:0;overflow:visible}
.tiles a{display:block;background:none;border:3px solid #fff;padding:7px 18px;text-decoration:none;color:#fff;
  font-family:var(--display);font-weight:900;font-size:clamp(18px,1.9vw,23px);letter-spacing:.02em;
  text-transform:uppercase;transition:background .14s,color .14s}
.tiles a:hover{background:#fff;color:var(--brand)}
.tiles b{display:block;font-weight:400}
.tiles span{display:none}          /* county line — the references show city only */
.tiles__note{margin-top:22px}

/* ══ FAQ ══ */
.faq{border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line)}
summary{cursor:pointer;list-style:none;padding:16px 46px 16px 0;position:relative;
  font-family:var(--display);font-weight:900;font-size:clamp(20px,2vw,25px);line-height:1.12;letter-spacing:.01em}
summary::-webkit-details-marker{display:none}
/* A hard square +/- rather than the engine's animated one. The reference sites
   draw no marker at all, but a FAQ with no affordance is a real usability
   regression, so this is kept and rebuilt in the same flat language. */
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 46px 18px 0;font-size:15.5px;color:var(--muted);line-height:1.6}

/* ══ QUOTE SECTION (inner pages) ══ */
.quote{background:var(--brand);color:#fff;padding-block:clamp(48px,5.6vw,80px)}
.quote__g{display:grid;gap:clamp(28px,3.4vw,52px);align-items:start}
@media(min-width:980px){.quote__g{grid-template-columns:.95fr 1.05fr}}
.quote .h2{margin-bottom:10px}
.quote__lede{color:var(--on-brand);font-size:16.5px;max-width:52ch}
.qlist{margin:22px 0 0;border-top:2px solid rgba(255,255,255,.35)}
.qlist li{padding:11px 0 11px 24px;border-bottom:2px solid rgba(255,255,255,.35);font-size:15px;color:var(--on-brand-dim);position:relative}
.qlist li::before{content:"";position:absolute;left:0;top:20px;width:14px;height:3px;background:var(--zest)}
.quote__tel{margin-top:22px}
.quote__tel a{font-family:var(--display);font-weight:900;font-size:clamp(22px,2.4vw,30px);letter-spacing:.03em;
  text-transform:uppercase;color:var(--zest);text-decoration:none}
.quote__tel a:hover{text-decoration:underline}

/* ══ CTA BAND — last thing on the page, centred, dark ══ */
.band{position:relative;color:#fff;overflow:hidden;padding-block:clamp(52px,6vw,86px);background:var(--ink);text-align:center}
.band__media{display:none}                       /* the engine's decorative SVG */
.band__in{position:relative;z-index:2;max-width:820px;margin-inline:auto}
.band h2{font-size:clamp(32px,5vw,62px);margin-bottom:10px;text-transform:uppercase;line-height:1}
.band p{color:var(--on-brand-dim);font-size:17px}
.band__btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px;justify-content:center}
.band .btn--zest{border-color:#fff;padding-inline:34px}

/* ══ INNER PAGE HEADS (engine templates: .svc-hero / .hub) ══ */
.hub{background:var(--brand);color:#fff;padding-block:clamp(112px,11vw,150px) clamp(34px,4.6vw,52px)}
.hub .lede{color:var(--on-brand-dim);max-width:62ch}
.hub__btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.crumbs{font-family:var(--display);font-weight:900;font-size:15px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--on-brand-fade);margin-bottom:12px}
.crumbs a{color:var(--on-brand-dim);text-decoration:none}
.crumbs a:hover{color:#fff}
.crumbs span{opacity:.7;margin-inline:6px}
/* the service/city photo hero — same outlined treatment as the home page, one
   step lighter so it stays a page head rather than competing with it */
.svc-hero h1{color:#fff;-webkit-text-stroke:1.5px rgba(0,0,0,.5);paint-order:stroke fill;text-shadow:3px 3px 0 rgba(0,0,0,.35)}
.svc-hero .crumbs{color:var(--on-brand-mute)}

/* ══ ENGINE SERVICE / CITY PAGE FURNITURE ══ */
.svc-box{background:var(--bg);border:3px solid var(--ink);border-radius:0;padding:20px}
.svc-box h3{font-family:var(--display);font-weight:900;font-size:19px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent);margin-bottom:12px}
.facts .k{color:var(--muted)}
.how-long{border-left:6px solid var(--accent);background:var(--cream);padding:15px 20px;border-radius:0;margin:26px 0}
.acard{background:var(--bg);border:1px solid var(--line);border-left:6px solid var(--brand);border-radius:0;padding:14px 18px;
  text-decoration:none;color:inherit;display:flex;align-items:center;justify-content:space-between;gap:12px;transition:background .14s}
.acard:hover{background:var(--cream)}
.acard b{display:block;font-family:var(--display);font-weight:900;font-size:21px;letter-spacing:.01em}
.acard span{display:block;font-size:13px;color:var(--muted)}
.acard svg{color:var(--accent);flex:none}
.content h2,.svc-main h2{margin:34px 0 12px;font-size:clamp(24px,2.7vw,34px)}
.content h2:first-child,.svc-main h2:first-child{margin-top:0}
.why-both{background:var(--bg);border:3px solid var(--ink);border-radius:0;padding:22px;margin:26px 0}
.why-both h3{margin:0 0 12px;color:var(--accent);font-size:22px;text-transform:uppercase}
.why-both ul{margin:14px 0 0;padding-left:20px}
.why-both ul li{margin:8px 0;color:var(--muted);list-style:disc}
.warn-box{background:var(--zest-lt);border-left:6px solid var(--zest);padding:18px 22px;border-radius:0;margin:28px 0}
.warn-box strong{font-family:var(--display);font-weight:900;color:var(--zest-ink);display:block;margin-bottom:8px;font-size:21px;text-transform:uppercase}
.mini li{color:var(--muted);font-size:14px;padding:5px 0}
.fcard{background:var(--bg);color:var(--ink);border-radius:0;padding:clamp(20px,2.2vw,26px);border:3px solid var(--ink)}
.fcard h3{font-size:24px;margin-bottom:6px;text-transform:uppercase}
.f2{display:grid;gap:14px}
@media(min-width:560px){.f2{grid-template-columns:1fr 1fr}}
.ptab{background:var(--bg);border:3px solid var(--ink);border-radius:0;overflow:hidden;max-width:840px;margin-inline:auto}
.prow{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:13px 20px;border-bottom:1px solid var(--line);background:var(--bg)}
.prow:last-child{border-bottom:0}
.prow .amt{font-family:var(--display);font-weight:900;font-size:22px;color:var(--accent);white-space:nowrap}
.tcard{background:var(--bg);border:1px solid var(--line);border-top:6px solid var(--brand);border-radius:0;padding:22px 20px}
.stars{color:var(--zest);letter-spacing:2px}

/* ══ STICKY MOBILE BAR ══ */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:75;display:none;gap:10px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:var(--paper);border-top:4px solid var(--ink)}
.sticky .btn{flex:1;min-height:54px;font-size:20px;padding-inline:8px}
@media(max-width:820px){.sticky{display:flex}body{padding-bottom:82px}}

/* ══ REVEAL ══ */
.rv{opacity:0;transform:translateY(16px)}
.rv.in{opacity:1;transform:none;transition:opacity .5s cubic-bezier(.2,.7,.2,1),transform .5s cubic-bezier(.2,.7,.2,1)}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}.rv{opacity:1;transform:none}}

/* ══ READING SCALE — the pCi/L band, and the only place colour means something ══
   --read-low / --read-watch / --read-act are DATA, not brand. They appear here
   and nowhere else on the site; the moment one of them is used as decoration
   somewhere, this section stops being readable at a glance. The gradient stops
   at 20% and 40% put the 2.0 and 4.0 marks on a 0-10 axis, which is why the
   white marker sits at exactly 40%. */
.rdg{border:3px solid var(--ink);background:var(--paper);padding:clamp(18px,2.4vw,28px);
  box-shadow:7px 7px 0 var(--ink)}
.rdg__head{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  font-family:var(--display);font-weight:900;font-size:clamp(15px,1.5vw,18px);
  letter-spacing:.04em;text-transform:uppercase;margin-bottom:13px}
.rdg__u{font-family:var(--mono);font-weight:700;font-size:14px;letter-spacing:.06em;color:var(--muted)}
.rdg__bar{position:relative;height:22px;border:2px solid var(--ink);
  background:linear-gradient(90deg,
    var(--read-low) 0 20%, var(--read-watch) 20% 40%, var(--read-act) 40% 100%)}
.rdg__mark{position:absolute;left:40%;top:-8px;bottom:-8px;width:4px;background:var(--ink)}
.rdg__ax{display:flex;justify-content:space-between;margin:9px 0 0;
  font-family:var(--mono);font-size:13px;font-variant-numeric:tabular-nums;color:var(--muted)}
.rdg__bands{display:grid;gap:0;margin:22px 0 0;border-top:2px solid var(--line)}
.rdg__b{display:grid;grid-template-columns:minmax(0,210px) 1fr;gap:14px;
  padding:15px 0 15px 15px;border-bottom:2px solid var(--line);border-left:8px solid var(--line)}
.rdg__b--low{border-left-color:var(--read-low)}
.rdg__b--watch{border-left-color:var(--read-watch)}
.rdg__b--act{border-left-color:var(--read-act)}
.rdg__b dt{min-width:0}
.rdg__b dt b{display:block;font-family:var(--mono);font-weight:700;font-size:17px;
  font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.rdg__b dt span{display:block;font-family:var(--display);font-weight:900;font-size:15px;
  letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.rdg__b dd{margin:0;font-size:15.5px;color:var(--muted);line-height:1.5}
.rdg__foot{margin-top:16px}
@media(max-width:620px){
  .rdg__b{grid-template-columns:1fr;gap:6px}
  .rdg__ax{font-size:11.5px}
}