/* =========================================================================
   site.css — component styles. 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)}
:focus-visible{outline:var(--focus);outline-offset:3px;border-radius:var(--r-sm)}

.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;border-radius:0 0 var(--r) 0}
.skip:focus{left:0}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;font-size:1rem;
  padding:.85rem 1.5rem;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 .15s ease,border-color .15s ease}
.btn:hover{background:var(--acc-600);border-color:var(--acc-600);color:var(--acc-ink)}
.btn--sm{padding:.6rem 1.1rem;font-size:var(--t-sm)}
.btn--line{background:transparent;color:var(--white);border-color:rgba(184,210,220,.4)}
.btn--line:hover{background:rgba(184,210,220,.12);border-color:var(--on-deep);color:var(--white)}
.btn--ink{background:transparent;color:var(--ink);border-color:var(--line)}
.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}
/* The glow behind the hero. Was rgba(45,120,145,.32) — a marine TEAL, from the
   structural template, sitting on top of a pine-green field and turning it
   grey-blue where the two met. This is the pine field's own lighter green. */
.field::after{content:"";position:absolute;top:-300px;left:58%;transform:translateX(-50%);
  width:1100px;height:660px;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(80,150,95,.30),transparent 72%)}
.field>*{position:relative;z-index:1}

.util{border-bottom:1px solid var(--on-deep-line)}
.util__in{max-width:var(--wrap);margin-inline:auto;padding:.55rem var(--s6);
  display:flex;gap:var(--s5);flex-wrap:wrap;font-size:var(--t-xs);color:var(--on-deep-2)}
.util strong{color:var(--on-deep);font-weight:600}

.hdr{max-width:var(--wrap);margin-inline:auto;padding:var(--s5) var(--s6);
  display:flex;align-items:center;gap:var(--s6);flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none}
/* The tile used to draw its own amber rounded square and the mark drew an
   amber disc inside it, so the logo rendered as a square badge with an
   invisible circle in the middle and a small leaf floating in it. The mark
   IS the badge — an amber disc with a green leaf, as it was on the
   hand-written site — so the tile just gives it a size and gets out of the
   way. */
.brand__mk{width:38px;height:38px;display:grid;place-items:center;flex:none}
.brand__mk svg{width:100%;height:100%;display:block}
.brand__t{font-family:var(--slab);font-weight:700;font-size:1.1rem;color:var(--white);
  line-height:1.15;letter-spacing:-.015em}
.brand__t small{display:block;font-family:var(--sans);font-weight:500;font-size:.68rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--on-deep-2);margin-top:2px}
.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-weight:500;font-size:.95rem}
.nav a:hover,.nav a[aria-current]{color:var(--white)}

/* ---------- hero 60/40 ---------- */
.hero{max-width:var(--wrap);margin-inline:auto;padding:var(--s5) var(--s6) var(--s8);
  display:grid;grid-template-columns:1.38fr 1fr;gap:var(--s7);align-items:start}
.eyebrow{font-weight:600;font-size:var(--t-xs);letter-spacing:var(--track-label);
  text-transform:uppercase;color:var(--acc-500);margin:0 0 var(--s5)}
.hero h1{font-family:var(--slab);color:var(--white);font-weight:700;
  font-size:clamp(2.1rem,3.9vw,3.35rem);line-height:var(--lh-tight);
  letter-spacing:var(--track-tight);margin:0 0 var(--s5);text-wrap:balance}
.hero h1 span{color:var(--acc-500)}
.hero__lede{color:var(--on-deep);font-size:1.1rem;line-height:1.62;max-width:36rem}
.hero__cta{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s6)}

/* ---------- crawl space diagram ---------- */
.dia__hd{font-family:var(--slab);font-size:1.08rem;font-weight:600;color:var(--white);
  margin:0 0 var(--s4);letter-spacing:-.01em}
.dia svg{width:100%;height:auto}
.dia svg text{font-family:var(--sans)}
.dia__key{list-style:none;margin:var(--s4) 0 0;padding:var(--s4) 0 0;display:grid;gap:.5rem;
  border-top:1px solid var(--on-deep-line)}
.dia__key li{display:flex;gap:.6rem;align-items:flex-start;font-size:.87rem;
  color:var(--on-deep);line-height:1.45}
.dia__key b{width:19px;height:19px;border-radius:50%;background:var(--acc-500);
  color:var(--acc-ink);font-size:.7rem;font-weight:700;display:grid;place-items:center;
  flex:none;margin-top:2px}

.vap,.stk,.pud,.wt{transform-box:fill-box;transform-origin:center}
@keyframes wtRise{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.wt{animation:wtRise 9s ease-in-out infinite}
@keyframes vapor{0%{opacity:0;transform:translateY(7px) scaleX(.86)}
                 24%{opacity:.85}100%{opacity:0;transform:translateY(-42px) scaleX(1.2)}}
.vap{animation:vapor 5s ease-out infinite}
.vap-2{animation-delay:1.65s}
.vap-3{animation-delay:3.3s}
@keyframes stack{0%{opacity:0;transform:translateY(14px)}22%{opacity:1}
                 68%{opacity:1}100%{opacity:0;transform:translateY(-40px)}}
.stk{animation:stack 3.8s ease-in-out infinite}
.stk-2{animation-delay:1.9s}
@keyframes pool{0%,100%{transform:scaleX(.86);opacity:.5}50%{transform:scaleX(1.05);opacity:.8}}
.pud{animation:pool 9s ease-in-out infinite}

/* ---------- trust strip ---------- */
.trust{background:var(--cream-2);border-bottom:1px solid var(--line)}
.trust__in{max-width:var(--wrap);margin-inline:auto;padding:var(--s4) var(--s6);
  display:flex;gap:var(--s7);flex-wrap:wrap;font-size:var(--t-sm);font-weight:500;color:var(--ink)}

/* ---------- left-rail section ---------- */
.rail{max-width:var(--wrap);margin-inline:auto;padding:var(--s8) var(--s6);
  display:grid;grid-template-columns:300px 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:-.02em;line-height:1.2}
.rail__hd p{font-size:.98rem;color:var(--ink-3);margin:0}
.rail__lbl{font-weight:600;font-size:.76rem;letter-spacing:var(--track-label);
  text-transform:uppercase;color:var(--acc-600);margin:0 0 var(--s3)}

/* ---------- service rows ---------- */
.rows{border-top:1px solid var(--line)}
.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.14rem;font-weight:600;margin:0 0 .3rem;
  letter-spacing:-.01em}
.row h3 a{color:var(--ink);text-decoration:none}
.row h3 a:hover{color:var(--acc-600);text-decoration:underline;text-underline-offset:3px}
.row p{margin:0;font-size:.96rem;max-width:46ch}
.row__pr{text-align:right;white-space:nowrap}
.row__pr b{display:block;font-family:var(--slab);font-size:1.02rem;color:var(--ink);font-weight:600}
.row__pr small{font-size:var(--t-xs);color:var(--ink-3)}

/* ---------- 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:-.02em}
.costs__note{font-size:.95rem;color:var(--on-deep-2);max-width:52ch;margin:0 0 var(--s7)}
.bars{display:grid;gap:var(--s4)}
.bar{display:grid;grid-template-columns:210px 1fr 160px;gap:var(--s5);align-items:center}
.bar__n{font-size:.95rem;color:var(--white);font-weight:500}
.bar__track{position:relative;height:12px;border-radius:99px;background:rgba(184,210,220,.14)}
.bar__fill{position:absolute;top:0;bottom:0;border-radius:99px;
  background:linear-gradient(90deg,var(--acc-600),var(--acc-500))}
.bar__v{font-family:var(--slab);font-size:.95rem;color:var(--white);text-align:right;white-space:nowrap}
.costs__scale{display:grid;grid-template-columns:210px 1fr 160px;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.08rem;font-weight:600;color:var(--ink);
  margin:0 0 var(--s2);letter-spacing:-.01em}
.area__col>p{font-size:var(--t-sm);color:var(--ink-3);margin:0 0 var(--s4);
  padding-bottom:var(--s3);border-bottom:2px 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);text-decoration:underline;text-underline-offset:3px}

/* ---------- how it works ---------- */
.how{background:var(--cream-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.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:-.02em;max-width:22ch}
.how__g{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--s6)}
.step__n{font-family:var(--slab);font-size:2.1rem;font-weight:700;color:var(--acc-500);
  line-height:1;margin-bottom:var(--s3)}
.step h3{font-family:var(--slab);font-size:1.08rem;font-weight:600;color:var(--ink);margin:0 0 .35rem}
.step p{font-size:.95rem;margin:0}

/* ---------- referral strip (agents & inspectors) ---------- */
.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.5rem;font-weight:700;color:var(--white);
  margin:0 0 var(--s2);letter-spacing:-.02em}
.strip p{margin:0;color:var(--on-deep-2);font-size:.98rem;max-width:56ch}

/* ---------- faq ---------- */
.faq{display:grid;gap:0;border-top:1px solid var(--line)}
.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.05rem;font-weight:600;color:var(--ink);
  position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);
  font-size:1.5rem;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:4px solid var(--acc-500);
  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:var(--s8) 0 var(--s6)}
.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:.95rem;color:var(--white);margin:0 0 var(--s3);font-weight:600}
.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}
  .wt,.vap,.stk,.pud{animation:none!important}
  .vap,.stk{opacity:.9}
}

/* Service groups in the intake form. The options are generated per GROUPS,
   so this labels each run rather than presenting one undifferentiated list. */
.svcgrp{margin:var(--s4) 0 var(--s2);font-family:var(--slab);font-size:var(--t-sm);
  font-weight:700;letter-spacing:var(--track-label);text-transform:uppercase;
  color:var(--acc-600)}
.svcgrp:first-child{margin-top:0}

/* =========================================================================
   THE CALL LAYER
   Inert unless data/site.js sets SITE.phone — the markup these style is not
   emitted at all without a number (see callBtn/callBar in templates/layout.js).
   ========================================================================= */

/* Deliberately NOT the primary accent: on a page whose main action is already
   an accent-coloured "Get free quotes", a second one makes the pair compete
   and suppresses both. This reads as the equal-weight alternative it is. */
.btn--call{background:var(--deep-800,#134152);border-color:var(--deep-800,#134152);color:#fff}
.btn--call:hover{background:var(--deep-700,#1B586D);border-color:var(--deep-700,#1B586D);color:#fff}

.util__call a{color:var(--on-deep,#B8D2DC);text-decoration:none;white-space:nowrap}
.util__call a:hover{color:#fff;text-decoration:underline}
.util__call strong{color:#fff;font-weight:700}

/* The call option on the intake page, above the form. */
.callfirst{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);
  flex-wrap:wrap;background:var(--cream-2,#F1ECE3);border:1px solid var(--line,#E2DACC);
  border-left:4px solid var(--acc-500,#EC7A3C);border-radius:var(--r,10px);
  padding:var(--s4) var(--s5);margin-bottom:var(--s6)}
.callfirst__k{margin:0;font-size:var(--t-sm);font-weight:700;color:var(--ink-3,#7B8D96);
  text-transform:uppercase;letter-spacing:var(--track-label,.16em)}
.callfirst__n{margin:.15rem 0 0;font-family:var(--slab);font-size:var(--t-lg);font-weight:700}
.callfirst__n a{color:var(--ink,#152A33);text-decoration:none}
.callfirst__n a:hover{color:var(--acc-600,#D4652A);text-decoration:underline}
.callfirst__s{margin:.2rem 0 0;font-size:var(--t-sm);color:var(--ink-3,#7B8D96)}
.callfirst__or{margin:0;font-size:var(--t-sm);color:var(--ink-3,#7B8D96);font-style:italic}

/* ---- the sticky mobile call bar ----------------------------------------
   Phone only. Both actions are present on purpose: calling suits the
   emergency, the form suits the comparison shopper. */
.callbar{display:none}

@media(max-width:760px){
  .callbar{display:grid;grid-template-columns:1.6fr 1fr;gap:1px;
    position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:rgba(184,210,220,.18);box-shadow:0 -6px 24px rgba(10,40,51,.22);
    padding-bottom:env(safe-area-inset-bottom,0px)}
  .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(--acc-500,#EC7A3C);color:var(--acc-ink,#22150C)}
  .callbar__call:hover{background:var(--acc-600,#D4652A)}
  .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(--deep-950,#0A2833);color:#fff;font-weight:700;
    font-size:var(--t-sm);text-align:center;line-height:1.2}
  .callbar__form:hover{background:var(--deep-800,#134152)}
  body{padding-bottom:calc(60px + env(safe-area-inset-bottom,0px))}          /* clear the bar so it never covers the footer */
  .nav .btn--call{display:none}      /* redundant once the sticky bar is on screen */
}


/* ---------- falling leaves ----------------------------------------------
   Carried back from the hand-written site, where they drifted through the
   hero and were the one piece of motion on the page.

   Rebuilt without the JavaScript. The original generated nine leaves at
   runtime with Math.random(), which meant they could not appear until the
   script ran and the hero shifted when they did. These are emitted by gen.js
   from a seeded generator, so the markup is identical on every build, there
   is nothing to execute, and the leaves are there in the first paint.

   .field is overflow:hidden, so the travel clips at the bottom of the band
   rather than running down the page.
   ------------------------------------------------------------------------ */
.leaves{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.leaf{position:absolute;top:-6vh;opacity:.85;will-change:transform;
  animation:drift linear infinite}
@keyframes drift{
  0%  {transform:translate(0,-8vh) rotate(0deg)}
  100%{transform:translate(-90px,118vh) rotate(320deg)}
}

/* Motion is decoration here and nothing is lost by removing it. The original
   made the same call. */
@media(prefers-reduced-motion:reduce){
  .leaf{display:none}
}

/* The honesty line under the hero graphic. Smaller and quieter than the
   caption because it qualifies the chart rather than explaining it — but
   present, because the curve looks like measured data and is not. */
.sig__hint{display:block;margin-top:.45rem;font-size:.82rem;color:var(--on-deep-2);opacity:.85}

/* ---------- hero panel: what each township wants ------------------------
   Sits on the dark field beside the headline. Deliberately quiet — it is a
   reference card, not a second call to action, and it should read as
   knowledge rather than as marketing.
   ------------------------------------------------------------------------ */
.twpcard{border:1px solid var(--on-deep-line);border-radius:var(--r);
  background:rgba(255,255,255,.04);padding:var(--s5) var(--s5) var(--s4)}
.twpcard__k{font-size:var(--t-xs);font-weight:700;letter-spacing:var(--track-label);
  text-transform:uppercase;color:var(--acc-500);margin:0 0 .35rem}
.twpcard__h{font-family:var(--slab);font-size:1.22rem;font-weight:700;color:#fff;
  line-height:1.25;margin:0 0 var(--s4)}
.twpcard__l{list-style:none;margin:0;padding:0}
.twp{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s4);
  padding:.5rem 0;border-top:1px solid var(--on-deep-line)}
.twp:first-child{border-top:0;padding-top:0}
.twp__n{font-weight:600;color:#fff;font-size:.95rem;white-space:nowrap}
.twp__r{color:var(--acc-500);font-size:.88rem;text-align:right;line-height:1.35}
.twpcard__a{display:inline-block;margin-top:var(--s4);padding-top:var(--s4);
  border-top:1px solid var(--on-deep-line);width:100%;
  color:var(--on-deep);font-weight:600;font-size:.9rem;text-decoration:none}
.twpcard__a:hover{color:var(--acc-500)}
@media(max-width:560px){
  .twp{flex-direction:column;gap:.15rem}
  .twp__r{text-align:left}
}

/* The falling leaves sit behind the header, so with the mobile menu open they
   drift across the link rows and read as a rendering fault rather than the
   site's signature. */
body.nav-open .leaves{display:none}