/* ============================================================
   CALL FLAMINGO — Septic & Well
   Design system inherited from the sister brands, Flamingo Rooter
   and Flamingo Drain: Excon display over Switzer text, the shared
   seven-shade pink palette, pill buttons, rounded cards, eyebrow
   rules, photographic heroes under a NEUTRAL scrim.

   One family addition: the royal blue that appears in this client's
   own logo and truck wrap is kept as the WATER accent, because this
   site has to separate the well side from the septic side on every
   page. Pink stays dominant and blue is used only where the water
   half of the business is the subject.
   ============================================================ */

/* ---------- fonts ---------- */
@font-face{font-family:'Excon';src:url('../fonts/Excon-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Excon';src:url('../fonts/Excon-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Excon';src:url('../fonts/Excon-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Excon';src:url('../fonts/Excon-Black.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Switzer';src:url('../fonts/Switzer-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Switzer';src:url('../fonts/Switzer-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Switzer';src:url('../fonts/Switzer-Semibold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Switzer';src:url('../fonts/Switzer-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

/* ---------- tokens ---------- */
:root{
  /* the family palette, identical to Rooter and Drain */
  --berry:#6B1332;
  --raspberry:#8F1D44;
  --hot:#E0316A;
  --coral:#F2678C;
  --bubblegum:#F9A8C2;
  --blush:#F8CFDD;
  --blush-light:#FCE4EC;
  --ink:#2B0813;
  --slate:#8A5266;
  --slate-light:#B58399;
  --bone:#FCE4EC;
  --bone-2:#F8CFDD;
  --paper:#FFFFFF;

  --navy-900:#6B1332;
  --navy-800:#8F1D44;
  --navy-700:#A32C53;
  --flamingo:#E0316A;
  --flamingo-600:#6B1332;
  --flamingo-300:#F2678C;
  --flamingo-100:#F9A8C2;

  /* the water accent, from this client's own logo */
  --water:#2F7FD8;
  --water-deep:#14396E;
  --water-100:#E7F1FC;
  --water-300:#9CC9F2;

  /* accent text flips on dark surfaces */
  --accent:#8F1D44;
  --accent-dark:#F9A8C2;

  /* photographs sit under a NEUTRAL scrim, never a pink one */
  --scrim:13,13,15;

  --line:rgba(107,19,50,.14);
  --line-strong:rgba(107,19,50,.26);
  --line-dark:rgba(255,255,255,.16);

  --ff-display:'Excon',ui-sans-serif,system-ui,sans-serif;
  --ff-text:'Switzer',ui-sans-serif,system-ui,-apple-system,sans-serif;

  --r-sm:8px; --r:14px; --r-lg:22px; --r-xl:32px;
  --shadow-sm:0 2px 8px rgba(107,19,50,.06);
  --shadow:0 12px 34px -12px rgba(107,19,50,.22);
  --shadow-lg:0 34px 70px -28px rgba(107,19,50,.45);

  --wrap:1200px;
  --gut:clamp(20px,5vw,40px);
  --sec:clamp(64px,9vw,116px);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:104px}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--ff-text);font-size:17px;line-height:1.68;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg,video{max-width:100%;display:block}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,h5{margin:0;font-family:var(--ff-display);font-weight:700;line-height:1.02;letter-spacing:-.018em}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
:focus-visible{outline:3px solid var(--flamingo);outline-offset:3px;border-radius:4px}
::selection{background:var(--flamingo);color:#fff}
.sr-only{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:-9999px;top:0;background:var(--berry);color:#fff;padding:14px 20px;z-index:200;border-radius:0 0 var(--r) 0}
.skip:focus{left:0;top:0}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.wrap-wide{max-width:1360px}
.wrap--mid{max-width:1040px}
.wrap--narrow{max-width:860px}
.section,.band{padding-block:var(--sec)}
.band--tight,.section-sm{padding-block:clamp(48px,6vw,76px)}
.center{text-align:center}

/* ---------- type ---------- */
.h-xxl,.h1{font-size:clamp(2.7rem,6.6vw,5.1rem);line-height:.95;letter-spacing:-.03em;text-transform:uppercase;font-weight:800}
.h-xl{font-size:clamp(2.1rem,4.4vw,3.4rem);line-height:1;letter-spacing:-.028em;text-transform:uppercase;font-weight:800}
.h2,.h-lg{font-size:clamp(1.62rem,2.9vw,2.45rem);line-height:1.06;letter-spacing:-.022em;text-transform:uppercase;font-weight:800}
.h3,.h-md{font-size:clamp(1.2rem,1.8vw,1.44rem);line-height:1.18;letter-spacing:-.016em;font-weight:700}
.h-sm{font-size:1.04rem;line-height:1.3;letter-spacing:-.01em;font-weight:700}
.lede{font-size:clamp(1.05rem,1.5vw,1.24rem);line-height:1.6;color:var(--slate);max-width:64ch}
.lede--light,.lede-light{color:rgba(255,255,255,.78)}
.h2--light{color:#fff}
.small{font-size:.9rem;color:var(--slate)}
.muted{color:var(--slate)}
.hint{font-size:.82rem;color:var(--slate)}
.h1 em,.h-xxl em,.h2 em{font-style:normal;color:var(--coral);display:block}

.kicker,.eyebrow,.rule-label{
  font-family:var(--ff-display);font-size:.76rem;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--accent);display:flex;align-items:center;gap:10px;margin:0 0 16px;
}
.kicker,.eyebrow,.rule-label{flex-wrap:wrap;line-height:1.5}
.kicker::before,.eyebrow::before,.rule-label::before{
  content:"";width:26px;height:2px;background:var(--hot);flex:none;border-radius:2px}
.kicker--water{color:var(--water-deep)}
.kicker--water::before{background:var(--water)}

.sec-head{max-width:780px;margin-bottom:clamp(32px,4.5vw,54px)}
.sec-head h2 + p,.prose h2 + p{margin-top:18px}
/* a bare section heading (no sec-head wrapper) still needs air under it */
.band > .wrap > .h2,.band > .wrap > .eyebrow + .h2{margin-bottom:clamp(24px,3vw,36px)}
.prose > .h2{margin-bottom:18px}

/* dark surfaces flip the small accent colour */
.band--dark,.band--ink,.hero,.phero,.cta,.band--cta,.triage,.gbox,.foot,.drawer,
.card-navy,.mega__foot,.aud-in,.lane--waste .lane__head,.lane--water .lane__head{--accent:var(--accent-dark)}
.band--dark .kicker::before,.band--ink .kicker::before,.hero .kicker::before,.phero .kicker::before,
.cta .kicker::before,.band--cta .kicker::before,.triage .kicker::before,.gbox .kicker::before,
.hero .eyebrow::before,.phero .eyebrow::before{background:var(--accent-dark)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--ff-display);font-weight:700;font-size:.95rem;letter-spacing:.045em;text-transform:uppercase;
  padding:17px 30px;border-radius:999px;border:2px solid transparent;
  transition:transform .18s cubic-bezier(.2,.7,.3,1),background .18s,color .18s,border-color .18s,box-shadow .18s;
  white-space:nowrap;cursor:pointer;text-align:center;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--primary,.btn-pink{background:var(--flamingo);color:#fff;box-shadow:0 12px 26px -10px rgba(224,49,106,.75)}
.btn--primary:hover,.btn-pink:hover{background:var(--flamingo-600);color:#fff;box-shadow:0 18px 34px -12px rgba(224,49,106,.85)}
.btn--berry,.btn-navy{background:var(--navy-800);color:#fff}
.btn--berry:hover,.btn-navy:hover{background:var(--navy-700);color:#fff}
.btn--ghost,.btn-ghost{border-color:var(--line-strong);color:var(--navy-800);background:transparent}
.btn--ghost:hover,.btn-ghost:hover{border-color:var(--navy-800);background:var(--navy-800);color:#fff}
.btn--outline,.btn-ghost-light{border-color:rgba(255,255,255,.36);color:#fff;background:transparent}
.btn--outline:hover,.btn-ghost-light:hover{background:#fff;color:var(--navy-900);border-color:#fff}
.btn--light,.btn-white{background:#fff;color:var(--navy-900)}
.btn--light:hover,.btn-white:hover{background:var(--bone);color:var(--navy-900)}
.btn--water{background:var(--water-deep);color:#fff;box-shadow:0 12px 26px -12px rgba(20,57,110,.7)}
.btn--water:hover{background:var(--water);color:#fff}
.btn-sm{padding:12px 22px;font-size:.82rem}
.btn-lg{padding:20px 38px;font-size:1.02rem}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin:26px 0 0}
.btn-row.center{justify-content:center}

.link-arrow,.index__meta{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--ff-display);font-weight:700;
  font-size:.82rem;letter-spacing:.09em;text-transform:uppercase;color:var(--accent);margin:0;
}

/* ---------- brand mark ----------
   The family mark shared with Flamingo Rooter and Flamingo Drain: the flamingo
   plumber holding a pipe wrench, and a stacked wordmark slanted with a skew
   (Excon has no true italic). FLAMINGO is the hot-pink word on all three sites;
   the company word, CALL here, is the raspberry one. Real text, so it stays
   crisp at any size and recolours on the berry footer. */
.mark{display:flex;align-items:center;gap:10px;flex:none}
.mark-bird{width:auto;height:56px;flex:none}
.mark-txt{display:flex;flex-direction:column;line-height:1}
.mark-txt b{font-family:var(--ff-display);font-weight:800;font-size:1.36rem;line-height:.86;
  letter-spacing:-.02em;text-transform:uppercase;transform:skewX(-9deg);transform-origin:left bottom}
.mark-1{color:var(--raspberry)}
.mark-2{color:var(--hot)}
.mark-sub{font-family:var(--ff-display);font-size:.58rem;font-weight:700;letter-spacing:.235em;
  text-transform:uppercase;color:var(--raspberry);margin-top:6px;white-space:nowrap}
.mark--lg{gap:14px}
.mark--lg .mark-bird{height:92px}
.mark--lg .mark-txt b{font-size:2.05rem}
.mark--lg .mark-sub{font-size:.74rem;margin-top:8px}
/* on the berry footer the two-tone flips: CALL to white, FLAMINGO to bubblegum */
.foot .mark-1{color:#fff}
.foot .mark-2,.foot .mark-sub{color:var(--bubblegum)}
/* the mascot's maroon outline sinks into berry, so it gets a hairline light edge */
.foot .mark-bird{filter:drop-shadow(0 0 1px rgba(255,255,255,.6)) drop-shadow(0 0 3px rgba(255,255,255,.22))}

/* ---------- top strip ---------- */
.utility,.strip{background:var(--berry);color:rgba(255,255,255,.86);font-size:.83rem}
.utility__in{display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding-block:10px;font-family:var(--ff-text)}
.utility p{margin:0;display:flex;align-items:center;gap:9px}
.utility a{color:#fff;font-weight:600}
.utility a:hover{color:var(--bubblegum)}
.u-long{display:none}
.u-short{display:inline}
@media(min-width:820px){.u-long{display:inline}.u-short{display:none}}
.utility__right{display:flex;gap:22px;align-items:center}
.dot{width:8px;height:8px;border-radius:50%;background:var(--coral);flex:none;
  box-shadow:0 0 0 0 rgba(242,103,140,.7);animation:pulse 2.4s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(242,103,140,0)}100%{box-shadow:0 0 0 0 rgba(242,103,140,0)}}
@media(prefers-reduced-motion:reduce){.dot{animation:none}}

/* ---------- header ---------- */
.masthead{position:sticky;top:0;z-index:80;background:var(--paper);box-shadow:0 1px 0 var(--line),var(--shadow-sm)}
.masthead__in{display:flex;align-items:center;gap:clamp(12px,2vw,30px);min-height:84px}
.brand{display:flex;align-items:center;flex:none}
.nav{display:none;align-items:center;gap:2px;margin-left:auto}
.nav__btn,.nav__link{
  font-family:var(--ff-display);font-weight:700;font-size:.87rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink);padding:12px 13px;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  border-radius:999px;transition:color .18s,background .18s}
.nav__btn:hover,.nav__link:hover,.nav__btn[aria-expanded=true]{color:var(--accent);background:var(--bone)}
.nav__link[aria-current=page]{color:var(--accent)}
.nav__btn::after{content:"";width:8px;height:8px;border-right:2.2px solid currentColor;border-bottom:2.2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:transform .22s}
.nav__item.is-open .nav__btn::after{transform:rotate(-135deg) translateY(-1px)}
.nav__item{position:static}
.masthead__act{display:flex;align-items:center;gap:10px;margin-left:auto}
.masthead__tel{display:none;align-items:center}
.burger{width:48px;height:44px;border-radius:999px;background:var(--bone);display:grid;place-content:center;gap:5px;padding:0}
.burger i,.burger span{display:block;width:20px;height:2.4px;background:var(--berry);border-radius:2px;
  transition:transform .18s,opacity .18s}
.burger[aria-expanded=true]{background:var(--flamingo)}
.burger[aria-expanded=true] span{background:#fff}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(7.4px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-7.4px) rotate(-45deg)}

/* ---------- mega panels ---------- */
.mega{position:absolute;left:50%;top:100%;transform:translateX(-50%) translateY(6px);
  width:min(1300px,calc(100vw - 32px));background:var(--paper);border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;overflow:hidden;
  transition:opacity .18s,transform .18s,visibility .18s;z-index:90}
.nav__item.is-open .mega{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.mega__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2px 26px;padding:26px 30px}
.mega__grid--3{grid-template-columns:repeat(3,1fr)}
.mega__grid--areas{grid-template-columns:repeat(4,1fr);gap:22px 26px}
.mega__item{display:block;padding:12px 14px;border-radius:var(--r);transition:background .16s,transform .16s}
.mega__item:hover{background:var(--bone);transform:translateX(3px)}
.mega__name{display:block;font-family:var(--ff-display);font-weight:700;font-size:.98rem;letter-spacing:-.01em}
.mega__blurb{display:block;font-size:.83rem;color:var(--slate);line-height:1.42;margin-top:3px}
.mega__col a{display:block;padding:6px 10px;font-size:.92rem;border-radius:var(--r-sm);color:var(--ink);transition:.16s}
.mega__col a:hover{background:var(--bone);color:var(--accent)}
.mega__county{display:block;font-family:var(--ff-display);font-size:.72rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent);margin:0 0 9px;padding:0 10px}
.mega__foot{background:var(--berry);color:rgba(255,255,255,.75);font-size:.87rem}
.mega__foot .wrap{display:flex;gap:22px;align-items:center;justify-content:space-between;padding-block:13px;flex-wrap:wrap}
.mega__foot a{color:#fff;font-weight:600}
.mega__foot a:hover{color:var(--bubblegum)}
.mega__tel{font-family:var(--ff-display);font-weight:800;letter-spacing:-.01em}

/* ---------- mobile drawer ---------- */
.drawer{position:fixed;inset:0;background:var(--berry);color:#fff;z-index:120;overflow-y:auto;
  padding:128px var(--gut) 110px}
.drawer[hidden]{display:none}
body.drawer-open{overflow:hidden}
/* the open drawer must never cover the header: the strip and the masthead,
   with the burger that closes the drawer, stay above it */
body.drawer-open .masthead{z-index:130}
body.drawer-open .utility{position:relative;z-index:130}
.drawer__in{max-width:640px;margin-inline:auto}
.drawer__call{display:flex;align-items:center;justify-content:center;background:var(--flamingo);color:#fff;
  font-family:var(--ff-display);font-weight:700;font-size:1.02rem;letter-spacing:.05em;text-transform:uppercase;
  padding:17px;border-radius:999px;margin:14px 0 22px}
.drawer__group{border-top:1px solid rgba(255,255,255,.16)}
.drawer__group summary{font-family:var(--ff-display);font-weight:700;font-size:1rem;letter-spacing:.04em;
  text-transform:uppercase;padding:17px 0;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center}
.drawer__group summary::-webkit-details-marker{display:none}
.drawer__group summary::after{content:"+";color:var(--bubblegum);font-size:1.3rem;line-height:1}
.drawer__group[open] summary::after{content:"\2212"}
.drawer__links{display:grid;gap:1px;padding-bottom:16px}
.drawer__links a{display:block;padding:11px 12px;border-radius:var(--r-sm);color:rgba(255,255,255,.82);
  font-size:.94rem;min-height:44px;border-left:2px solid rgba(255,255,255,.14)}
.drawer__links a:hover{background:rgba(255,255,255,.08);color:#fff;border-left-color:var(--hot)}
.drawer__links a.drawer__all{color:var(--bubblegum);font-weight:600}
.drawer__county{font-family:var(--ff-display);font-size:.72rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--bubblegum);margin:16px 0 4px}
.drawer__links--flat{border-top:1px solid rgba(255,255,255,.16);padding-top:12px}
.drawer__meta{font-size:.86rem;color:rgba(255,255,255,.6);margin-top:24px}

/* ---------- hero ---------- */
.hero{position:relative;background:rgb(var(--scrim));color:#fff;overflow:hidden;isolation:isolate}
.hero__bg{position:absolute;inset:0;z-index:-2}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center 46%}
/* The photograph is NOT shaded. A gradient sits behind the copy column only and
   is fully transparent from 62% across, so the truck is seen clean. */
.hero__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(var(--scrim),.90) 0%,rgba(var(--scrim),.80) 30%,
    rgba(var(--scrim),.52) 48%,rgba(var(--scrim),.16) 64%,rgba(var(--scrim),0) 76%)}
@media(max-width:899px){
  /* narrow screens put the copy over more of the frame, so the fade is longer */
  .hero__bg img{object-position:72% 50%}
  .hero__bg::after{background:linear-gradient(178deg,rgba(var(--scrim),.86) 0%,
    rgba(var(--scrim),.78) 42%,rgba(var(--scrim),.62) 72%,rgba(var(--scrim),.42) 100%)}
}
.hero__in{padding-block:clamp(70px,10vw,128px);position:relative}
.hero__copy{max-width:640px}
.hero h1{margin-bottom:20px}
.hero .lede{max-width:600px;margin-bottom:32px}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:40px}

.proof{display:grid;grid-template-columns:1fr;gap:2px;background:rgba(255,255,255,.12);
  border-radius:var(--r);overflow:hidden;max-width:800px}
@media(min-width:680px){.proof{grid-template-columns:repeat(3,1fr)}}
.proof-i{background:rgba(var(--scrim),.78);backdrop-filter:blur(8px);padding:20px 22px}
.proof-i b{display:block;font-family:var(--ff-display);font-size:1.45rem;font-weight:800;letter-spacing:-.02em;color:#fff;line-height:1}
.proof-i b.sm{font-size:1.1rem}
.proof-i span{display:block;margin-top:7px;font-size:.85rem;color:rgba(255,255,255,.68);line-height:1.4}

/* ---------- inner page hero ---------- */
.phero{position:relative;background:rgb(var(--scrim));color:#fff;overflow:hidden;isolation:isolate}
/* full-strength photograph, never dimmed; the gradient covers the copy only */
.phero .phero__bg{position:absolute;inset:0;z-index:-2}
.phero .phero__bg img{width:100%;height:100%;object-fit:cover;object-position:center 46%}
.phero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(var(--scrim),.93) 0%,rgba(var(--scrim),.82) 34%,
    rgba(var(--scrim),.46) 56%,rgba(var(--scrim),.12) 72%,rgba(var(--scrim),0) 84%)}
.phero--water::after{background:linear-gradient(100deg,rgba(8,22,44,.94) 0%,rgba(8,22,44,.84) 34%,
  rgba(8,22,44,.48) 56%,rgba(8,22,44,.12) 72%,rgba(8,22,44,0) 84%)}
.phero--waste::after{background:linear-gradient(100deg,rgba(38,7,17,.94) 0%,rgba(38,7,17,.84) 34%,
  rgba(38,7,17,.48) 56%,rgba(38,7,17,.12) 72%,rgba(38,7,17,0) 84%)}
@media(max-width:959px){
  .phero .phero__bg img{object-position:74% 50%}
  .phero::after,.phero--water::after,.phero--waste::after{
    background:linear-gradient(178deg,rgba(var(--scrim),.88) 0%,rgba(var(--scrim),.8) 46%,
      rgba(var(--scrim),.6) 100%)}
}
.phero__in{padding-block:clamp(52px,7vw,92px);position:relative;display:grid;gap:clamp(28px,4vw,52px)}
@media(min-width:960px){.phero__in{grid-template-columns:1.35fr .85fr;align-items:center}}
.phero__copy{max-width:660px}
/* inner pages step the display size down: the home hero owns the biggest type */
.phero h1{font-size:clamp(2rem,4.2vw,3.3rem);margin-bottom:18px}
.phero .lede{max-width:60ch}
.phero .lede{margin-bottom:28px}
.phero__meta{font-size:.85rem;color:rgba(255,255,255,.6);margin:22px 0 0}
.crumbs{display:flex;flex-wrap:wrap;gap:9px;align-items:center;font-size:.82rem;
  color:rgba(255,255,255,.58);margin:0 0 18px}
.crumbs a{color:rgba(255,255,255,.72)}
.crumbs a:hover{color:#fff}

/* the at-a-glance card in an inner hero */
.hero__spec{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-lg);overflow:hidden;backdrop-filter:blur(8px)}
.hero__spec h2{font-family:var(--ff-display);font-size:.76rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:#fff;margin:0;padding:16px 22px;background:rgba(255,255,255,.08)}
.hero__spec dl{margin:0;padding:6px 22px 20px}
.hero__spec dt{font-family:var(--ff-display);font-size:.7rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent-dark);margin-top:16px}
.hero__spec dd{margin:4px 0 0;font-size:.95rem;color:rgba(255,255,255,.85);line-height:1.45}
.hero__spec a{color:#fff;border-bottom:1px solid rgba(255,255,255,.35)}

/* ---------- bands ---------- */
.band--sand,.section-bone{background:var(--bone)}
.band--blush{background:var(--bone)}
.band--blush-deep{background:var(--bone-2)}
.band--dark,.band--ink,.section-navy{background:var(--berry);color:#fff}
.band--dark h2,.band--dark h3,.band--ink h2,.band--ink h3,.section-navy h2,.section-navy h3{color:#fff}
.band--dark p,.band--ink p,.section-navy p,.band--dark .lede{color:rgba(255,255,255,.76)}
.band--water{background:var(--water-deep);color:#fff}
.band--water h2,.band--water h3{color:#fff}
.band--water p,.band--water .lede{color:rgba(255,255,255,.78)}
.band--rule{border-top:1px solid var(--line)}

/* ---------- CTA band ---------- */
.band--cta{position:relative;background:rgb(var(--scrim));color:#fff;overflow:hidden;isolation:isolate}
.band--cta .cta__bg{position:absolute;inset:0;z-index:-2}
.band--cta .cta__bg img{width:100%;height:100%;object-fit:cover;object-position:center 52%}
.band--cta::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(260deg,rgba(var(--scrim),.93) 0%,rgba(var(--scrim),.84) 30%,
    rgba(var(--scrim),.5) 50%,rgba(var(--scrim),.14) 66%,rgba(var(--scrim),0) 80%)}
.cta{display:grid;gap:26px;align-items:center;max-width:600px;margin-left:auto;
  position:relative;z-index:1}
.cta h2{margin-bottom:14px}
.cta .lede{margin-bottom:6px}
.cta__actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
@media(max-width:899px){
  .band--cta .cta__bg img{object-position:72% 50%}
  .band--cta::after{background:linear-gradient(178deg,rgba(var(--scrim),.86) 0%,
    rgba(var(--scrim),.8) 50%,rgba(var(--scrim),.66) 100%)}
}
.cta__hours{width:100%;margin:0;font-family:var(--ff-display);font-size:.76rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.6)}

/* ---------- cards & grids ---------- */
.grid{display:grid;gap:20px}
.g2{grid-template-columns:1fr}
.g3{grid-template-columns:1fr}
.g4{grid-template-columns:repeat(2,1fr)}
@media(min-width:660px){.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}}

.card,.panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:30px;
  transition:transform .22s,box-shadow .22s,border-color .22s}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--flamingo-300)}
.card h3,.panel h3{margin-bottom:12px;font-size:1.16rem}
.card p,.panel p{color:var(--slate);font-size:.97rem}
.panel--blue{background:var(--water-deep);border-color:transparent;color:#fff}
.panel--blue h3{color:#fff}
.panel--blue p,.panel--blue li{color:rgba(255,255,255,.82)}
.panel--berry{background:var(--berry);border-color:transparent;color:#fff}
.panel--berry h3{color:#fff}
.panel--berry p,.panel--berry li{color:rgba(255,255,255,.82)}
.panel--berry a,.panel--blue a{color:var(--bubblegum)}
.panel--warn{background:var(--bone);border-color:transparent}
.band--sand .panel:not([class*="panel--"]),
.band--blush .panel:not([class*="panel--"]){background:var(--paper)}

/* ---------- symptom / service tiles ---------- */
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:760px){.tiles{grid-template-columns:repeat(4,1fr)}}
.tile{display:flex;flex-direction:column;gap:12px;padding:22px 18px;border-radius:var(--r);
  background:var(--paper);border:1px solid var(--line);transition:.2s;height:100%}
.tile:hover{border-color:var(--flamingo);background:var(--bone);transform:translateY(-3px)}
.tile svg{width:30px;height:30px;color:var(--flamingo-600)}
.tile b{font-family:var(--ff-display);font-size:.97rem;font-weight:700;line-height:1.16}
.tile span{font-size:.84rem;color:var(--slate);line-height:1.42}
.tile--water:hover{border-color:var(--water);background:var(--water-100)}
.tile--water svg{color:var(--water-deep)}

/* ---------- numbered steps ---------- */
.steps{counter-reset:s;display:grid;gap:22px;padding:0;margin:0}
@media(min-width:880px){.steps{grid-template-columns:repeat(3,1fr);gap:26px}}
.step{position:relative;padding-top:30px;border-top:2px solid var(--line);list-style:none}
.step::before{counter-increment:s;content:"0" counter(s);position:absolute;top:-2px;left:0;
  font-family:var(--ff-display);font-size:.9rem;font-weight:800;letter-spacing:.1em;color:var(--accent);
  background:var(--paper);padding-right:12px;transform:translateY(-56%)}
.step h3{margin-bottom:10px;font-size:1.12rem}
.step p{color:var(--slate);font-size:.96rem;margin:0}
.step__n{display:none}
.band--sand .step::before,.band--blush .step::before{background:var(--bone)}
.band--dark .step,.band--ink .step{border-color:rgba(255,255,255,.2)}
.band--dark .step::before,.band--ink .step::before{background:var(--berry)}
.band--dark .step p,.band--ink .step p{color:rgba(255,255,255,.74)}

/* ---------- ticks ---------- */
.ticks{display:grid;gap:14px;padding:0;margin:0 0 4px}
.ticks li{display:flex;gap:13px;align-items:flex-start;font-size:1rem;line-height:1.5;list-style:none}
.ticks li::before{content:"";width:21px;height:21px;flex:none;margin-top:2px;border-radius:50%;
  background:var(--flamingo-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B1332' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E") center/13px no-repeat}
.ticks--water li::before{background-color:var(--water-300);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314396E' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E")}
.ticks--two{grid-template-columns:1fr}
@media(min-width:640px){.ticks--two{grid-template-columns:repeat(2,1fr);gap:14px 28px}}
.panel--blue .ticks li,.panel--berry .ticks li,.band--dark .ticks li{color:rgba(255,255,255,.86)}

/* ---------- split feature ---------- */
.split{display:grid;gap:clamp(28px,4.5vw,60px);align-items:center}
@media(min-width:900px){.split{grid-template-columns:1.15fr .85fr}.split--even{grid-template-columns:1fr 1fr}}
.split--lot{align-items:center}
@media(min-width:900px){.split--lot{grid-template-columns:.9fr 1.1fr}}
.split-img,.reveal--frame{border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow)}
.split-img img{width:100%;object-fit:cover}
.prose h2{margin-top:0}
.prose h3{margin-top:1.5em;font-size:1.18rem}
.prose>p:last-child{margin-bottom:0}
.prose a{color:var(--accent);border-bottom:1px solid var(--line-strong)}
.prose a:hover{border-color:var(--accent)}

/* ---------- two lanes (well / septic) ---------- */
.lanes{display:grid;gap:22px;grid-template-columns:1fr}
@media(min-width:900px){.lanes{grid-template-columns:1fr 1fr}}
.lane{border-radius:var(--r-xl);overflow:hidden;background:var(--paper);box-shadow:var(--shadow);
  display:grid;grid-template-rows:auto 1fr auto;border:1px solid var(--line)}
.lane__head{padding:28px 30px 22px;color:#fff}
.lane--water .lane__head{background:linear-gradient(135deg,var(--water-deep) 0%,#0C2A52 100%)}
.lane--waste .lane__head{background:linear-gradient(135deg,var(--raspberry) 0%,var(--berry) 100%)}
.lane__head .kicker{color:rgba(255,255,255,.72);margin-bottom:12px}
.lane__head .kicker::before{background:rgba(255,255,255,.6)}
.lane__head h2{color:#fff;margin:0;font-size:clamp(1.5rem,2.4vw,2rem)}
.lane__body{padding:24px 30px}
.lane__body p{color:var(--slate)}
.lane__list{display:grid;gap:0;margin:4px 0 0}
.lane__list a{display:flex;justify-content:space-between;gap:14px;align-items:center;padding:12px 0;
  border-bottom:1px solid var(--line);font-weight:600;min-height:46px;transition:.16s}
.lane__list a:hover{color:var(--accent);padding-left:6px}
.lane__list small{font-family:var(--ff-display);font-size:.7rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--slate);text-align:right;flex:none;max-width:46%}
.lane__foot{padding:20px 30px 28px}

/* ---------- stat band ---------- */
.statbar,.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);
  border-radius:var(--r-lg);overflow:hidden}
@media(min-width:880px){.statbar,.stats{grid-template-columns:repeat(4,1fr)}}
.stat{background:var(--paper);padding:30px 24px;text-align:center}
.stat b{display:block;font-family:var(--ff-display);font-size:clamp(1.8rem,3.2vw,2.6rem);font-weight:800;
  letter-spacing:-.03em;color:var(--navy-900);line-height:1}
.stat span{display:block;margin-top:9px;font-size:.86rem;color:var(--slate);line-height:1.4}
.band--dark .statbar,.band--ink .statbar{background:rgba(255,255,255,.15)}
.band--dark .stat,.band--ink .stat{background:var(--berry)}
.band--dark .stat b,.band--ink .stat b{color:var(--accent-dark)}
.band--dark .stat span,.band--ink .stat span{color:rgba(255,255,255,.68)}

/* ---------- toggle compare ---------- */
.toggle{display:inline-flex;padding:5px;background:var(--bone-2);border-radius:999px;gap:4px;margin-bottom:30px}
.band--dark .toggle,.band--ink .toggle{background:rgba(255,255,255,.1)}
.toggle button{padding:11px 22px;border-radius:999px;font-family:var(--ff-display);font-weight:700;
  font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;transition:.2s;color:var(--slate)}
.band--dark .toggle button,.band--ink .toggle button{color:rgba(255,255,255,.62)}
.toggle button.on{background:var(--flamingo);color:#fff;box-shadow:0 6px 16px -8px rgba(224,49,106,.9)}
.toggle button.on.on--water{background:var(--water)}
.mpanel{display:none}
.mpanel.on{display:block;animation:fade .3s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- guarantee panel ---------- */
.gbox{background:linear-gradient(135deg,var(--raspberry) 0%,var(--berry) 100%);color:#fff;
  border-radius:var(--r-xl);padding:clamp(30px,4.6vw,58px);position:relative;overflow:hidden}
.gbox::after{content:"";position:absolute;width:420px;height:420px;right:-140px;top:-160px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.18),transparent 68%)}
.gbox-in{position:relative;z-index:1;display:grid;gap:32px;align-items:center}
@media(min-width:880px){.gbox-in{grid-template-columns:1.1fr .9fr}}
.gbox h2{color:#fff}
.gbox p{color:rgba(255,255,255,.9)}
.gseal{display:grid;gap:12px}
.gseal div{display:flex;gap:12px;align-items:flex-start;background:rgba(255,255,255,.14);
  padding:15px 18px;border-radius:var(--r);font-size:.95rem;line-height:1.42}
.gseal div::before{content:"";width:21px;height:21px;flex:none;margin-top:1px;border-radius:50%;
  background:rgba(255,255,255,.9) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B1332' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E") center/13px no-repeat}
.gbox-bird{position:absolute;right:18px;bottom:-16px;height:240px;width:auto;z-index:0;opacity:.28;pointer-events:none}
@media(max-width:1100px){.gbox-bird{display:none}}

/* ---------- audience photo cards ---------- */
.aud{position:relative;border-radius:var(--r-lg);overflow:hidden;background:rgb(var(--scrim));
  min-height:300px;display:flex;align-items:flex-end;isolation:isolate}
.aud img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.aud::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(var(--scrim),.88) 0%,rgba(var(--scrim),.62) 26%,
    rgba(var(--scrim),.16) 56%,rgba(var(--scrim),0) 78%)}
.aud:hover img{transform:scale(1.05)}
.aud--water::after{background:linear-gradient(to top,rgba(8,22,44,.9) 0%,rgba(8,22,44,.64) 26%,
  rgba(8,22,44,.18) 56%,rgba(8,22,44,0) 78%)}
.aud--flat{background:linear-gradient(150deg,var(--raspberry),var(--berry))}
.aud--flat.aud--water{background:linear-gradient(150deg,var(--water-deep),#0A1A30)}
.aud-in{padding:26px;color:#fff;position:relative;z-index:1}
.aud-in h3{margin-bottom:8px;font-size:1.2rem;color:#fff}
.aud-in p{font-size:.93rem;color:rgba(255,255,255,.78);margin-bottom:14px}

/* ---------- service / index list ---------- */
.index,.svc{display:grid;gap:0;border-top:1px solid var(--line)}
.index__row,.svc-i{border-bottom:1px solid var(--line);padding:24px 0;display:grid;gap:8px;
  align-items:start;transition:.2s}
@media(min-width:820px){.index__row,.svc-i{grid-template-columns:1.05fr 1.6fr auto;gap:32px;align-items:center;padding:26px 0}}
.index__row:hover,.svc-i:hover{background:linear-gradient(90deg,rgba(224,49,106,.05),transparent 70%);padding-left:10px}
.index__row h3{font-size:1.18rem;margin:0}
.index__row p{color:var(--slate);font-size:.96rem;margin:0}
.index__row--water:hover{background:linear-gradient(90deg,rgba(47,127,216,.07),transparent 70%)}
.index__row--water .index__meta{color:var(--water-deep)}
.index--symptoms .index__row{padding-left:0}

/* ---------- towns / areas ---------- */
.areas,.towngroup__links{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(min-width:720px){.areas,.towngroup__links{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){.areas{grid-template-columns:repeat(4,1fr)}}
.area,.towngroup__links a{display:flex;align-items:center;gap:9px;padding:13px 15px;border:1px solid var(--line);
  border-radius:var(--r-sm);font-size:.92rem;font-weight:500;transition:.18s;min-height:46px}
.area::before,.towngroup__links a::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--flamingo);flex:none}
.area:hover,.towngroup__links a:hover{border-color:var(--hot);color:var(--accent)}
.band--dark .towngroup__links a,.band--dark .area{border-color:rgba(255,255,255,.18);color:rgba(255,255,255,.84)}
.band--dark .towngroup__links a:hover{border-color:var(--hot);color:#fff}
.townwrap{display:grid;gap:30px}
.townwrap--home{gap:26px;margin-top:clamp(34px,4.5vw,52px)}
@media(min-width:900px){.townwrap--home{grid-template-columns:repeat(2,1fr);gap:26px 40px}}
.towngroup h3{font-family:var(--ff-display);font-size:.76rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent);margin:0 0 12px}
.towngroup h3 a{color:inherit}
.lookup{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.lookup select{flex:1 1 260px;min-width:0;padding:15px 18px;border-radius:999px;font-size:1rem;
  border:1.5px solid var(--line-strong);background:var(--paper);color:var(--ink)}
.lookup select:focus{outline:none;border-color:var(--flamingo);box-shadow:0 0 0 4px rgba(224,49,106,.16)}
.band--dark .lookup select{border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.08);color:#fff}
.band--dark .lookup select option{color:var(--ink)}
.band--dark .lookup select:focus{border-color:var(--coral);box-shadow:0 0 0 4px rgba(242,103,140,.22)}

/* ---------- duo cards (town pages) ---------- */
.duo{display:grid;gap:20px;grid-template-columns:1fr}
@media(min-width:700px){.duo{grid-template-columns:1fr 1fr}}
.duo__card{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);background:var(--paper)}
.duo__card h3{margin:0;padding:16px 22px;color:#fff;font-family:var(--ff-display);font-size:.78rem;
  font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.duo__card--water h3{background:var(--water-deep)}
.duo__card--waste h3{background:var(--raspberry)}
.duo__card p{padding:18px 22px 0;color:var(--slate);font-size:.95rem}
.duo__links{display:grid;padding:12px 22px 20px}
.duo__links a{display:block;padding:10px 0;border-bottom:1px solid var(--line);font-size:.94rem;min-height:44px;transition:.16s}
.duo__links a:last-child{border-bottom:0}
.duo__links a:hover{color:var(--accent);padding-left:5px}

/* ---------- tables ---------- */
.tablewrap{overflow-x:auto;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--paper)}
.table{width:100%;border-collapse:collapse;font-size:.95rem;min-width:660px}
.table th{background:var(--berry);color:#fff;text-align:left;padding:15px 18px;font-family:var(--ff-display);
  font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.table td{padding:16px 18px;border-bottom:1px solid var(--line);vertical-align:top}
.table tr:last-child td{border-bottom:0}
.table tbody tr:hover{background:var(--bone)}
.table td:first-child{font-weight:600;white-space:nowrap}
.table a{color:var(--accent);font-weight:600}

/* ---------- tools ---------- */
.triage{background:var(--berry);color:#fff;border-radius:var(--r-xl);overflow:hidden;position:relative;
  box-shadow:var(--shadow-lg)}
.triage::before{content:"";position:absolute;width:420px;height:420px;left:-130px;bottom:-190px;border-radius:50%;
  background:radial-gradient(circle,rgba(242,103,140,.3),transparent 68%);pointer-events:none}
.triage--water{background:var(--water-deep)}
.triage--water::before{background:radial-gradient(circle,rgba(47,127,216,.4),transparent 68%)}
.tool{position:relative;z-index:1;border-radius:var(--r-xl);overflow:hidden}
.tool__head{padding:clamp(26px,3.4vw,38px) clamp(26px,4vw,44px) 0}
.tool__head h3{margin:0 0 8px;color:#fff;font-size:clamp(1.3rem,2.2vw,1.7rem);text-transform:uppercase;font-weight:800}
.tool__head p{margin:0;font-size:.95rem;color:rgba(255,255,255,.7)}
.tool__body{padding:24px clamp(26px,4vw,44px);display:grid;gap:18px}
@media(min-width:760px){.tool__body{grid-template-columns:repeat(3,1fr)}.tool__body--one{grid-template-columns:1fr}}
.field{display:grid;gap:8px}
.field label{font-family:var(--ff-display);font-size:.72rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent-dark)}
.field select,.field input,.form textarea{width:100%;max-width:100%;min-width:0;padding:14px 16px;
  border:1.5px solid rgba(255,255,255,.22);border-radius:var(--r-sm);background:rgba(255,255,255,.07);
  color:#fff;font-size:1rem;transition:border-color .18s,box-shadow .18s}
.field select option{color:var(--ink)}
.field select:focus,.field input:focus{outline:none;border-color:var(--coral);box-shadow:0 0 0 4px rgba(242,103,140,.2)}
.tool__out{margin:0 clamp(26px,4vw,44px) clamp(26px,3.4vw,38px);padding:24px;border-radius:var(--r-lg);
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14)}
.tool__out b{display:block;font-family:var(--ff-display);font-size:1.3rem;font-weight:800;text-transform:uppercase;
  letter-spacing:-.018em;line-height:1.08;margin-bottom:10px;color:#fff}
.tool__out p{margin:0;font-size:.95rem;color:rgba(255,255,255,.78)}
.tool__out p + p{margin-top:12px}
.tool__out a{color:var(--accent-dark);font-family:var(--ff-display);font-weight:700;font-size:.84rem;
  letter-spacing:.09em;text-transform:uppercase}
.triage--water .tool__out a,.triage--water .field label{color:var(--water-300)}

/* light forms (contact page) */
.form{display:grid;gap:18px}
.form .row2{display:grid;gap:18px}
@media(min-width:620px){.form .row2{grid-template-columns:1fr 1fr}}
.form-light .field label{color:var(--slate)}
.form-light .field input,.form-light .field select,.form-light textarea{
  background:var(--paper);color:var(--ink);border-color:var(--line-strong)}
.form-light .field input:focus,.form-light .field select:focus,.form-light textarea:focus{
  border-color:var(--flamingo);box-shadow:0 0 0 4px rgba(224,49,106,.14)}
.form textarea{min-height:130px;resize:vertical}
.form__note{font-size:.85rem;color:var(--slate);line-height:1.5}

/* ---------- quotes ---------- */
.quotes{display:grid;gap:20px;grid-template-columns:1fr}
@media(min-width:700px){.quotes{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.quotes{grid-template-columns:repeat(3,1fr)}}
.quote{margin:0;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;
  display:flex;flex-direction:column;gap:14px}
.band--sand .quote{background:var(--paper)}
.quote blockquote{margin:0;font-size:1rem;line-height:1.6;color:var(--ink)}
.quote blockquote::before{content:"";display:block;width:30px;height:3px;border-radius:2px;
  background:var(--hot);margin-bottom:16px}
.quote figcaption{font-family:var(--ff-display);font-size:.78rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);margin-top:auto}
.quote__note{display:block;letter-spacing:.04em;text-transform:none;font-size:.8rem;color:var(--slate);margin-top:5px}

/* ---------- FAQ ---------- */
.faqs{border-top:1px solid var(--line)}
.faq{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:24px 48px 24px 0;position:relative;
  font-family:var(--ff-display);font-size:clamp(1.02rem,1.5vw,1.18rem);font-weight:700;
  letter-spacing:-.012em;line-height:1.32}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:8px;top:50%;width:13px;height:13px;margin-top:-9px;
  border-right:2.5px solid var(--flamingo);border-bottom:2.5px solid var(--flamingo);
  transform:rotate(45deg);transition:transform .25s}
.faq[open] summary::after{transform:rotate(-135deg) translateY(-4px)}
.faq summary:hover{color:var(--accent)}
.faq__a{padding:0 48px 26px 0;color:var(--slate);max-width:78ch}
.faq__a p{margin:0}
.faqgroup{margin-bottom:44px}
.faqgroup:last-child{margin-bottom:0}
.band--dark .faqs,.band--dark .faq{border-color:rgba(255,255,255,.16)}
.band--dark .faq__a{color:rgba(255,255,255,.75)}

/* ---------- cutaway drawing ---------- */
.cutaway{border-radius:var(--r-xl);overflow:hidden;background:var(--paper);border:1px solid var(--line);
  padding:22px;box-shadow:var(--shadow)}
.cutaway svg{width:100%;height:auto}
.cutaway__key{display:grid;gap:9px;margin:18px 0 0;padding:0;list-style:none;
  grid-template-columns:repeat(2,1fr);font-size:.85rem;color:var(--slate)}
.cutaway__key li{display:flex;gap:9px;align-items:baseline}
.cutaway__key i{width:12px;height:12px;border-radius:3px;flex:none;display:block}
.cutaway__note{margin:14px 0 0;font-family:var(--ff-display);font-size:.7rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--slate)}

/* ---------- footer ---------- */
.foot{background:var(--berry);color:rgba(255,255,255,.68);padding-block:clamp(52px,7vw,82px) 0}
.foot a{color:inherit}
.foot a:hover{color:var(--bubblegum)}
.foot__top{display:grid;gap:38px;padding-bottom:46px}
@media(min-width:900px){.foot__top{grid-template-columns:1.45fr 1fr 1fr 1.1fr}}
.foot__brand .mark{margin-bottom:22px}
.foot__blurb{color:rgba(255,255,255,.66);max-width:44ch;font-size:.94rem}
.foot__h{font-family:var(--ff-display);font-size:.76rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:#fff;margin:0 0 18px}
.foot__links{display:grid;gap:11px}
.foot__links a{font-size:.93rem;display:block;min-height:26px}
.foot__nap{display:grid;gap:6px;font-size:.9rem;color:rgba(255,255,255,.7);margin-top:18px}
.foot__tel{font-family:var(--ff-display);font-size:1.65rem;font-weight:800;color:#fff;letter-spacing:-.02em;
  display:block;margin-bottom:4px}
/* `.foot a{color:inherit}` outranks `.foot__tel`, so the number must be restated */
.foot .foot__tel{color:#fff}
.foot .foot__tel:hover{color:var(--bubblegum)}
.foot__areas{border-top:1px solid rgba(255,255,255,.12);padding-block:28px;display:grid;gap:14px}
.foot__county{font-family:var(--ff-display);font-size:.7rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;margin:0}
.foot__county a{color:var(--bubblegum)}
.foot__towns{font-size:.88rem;color:rgba(255,255,255,.62);margin:6px 0 0;line-height:1.9}
.foot__towns a{color:rgba(255,255,255,.72)}
.foot__legal{border-top:1px solid rgba(255,255,255,.12);padding-block:24px 96px;display:flex;flex-wrap:wrap;
  gap:14px;justify-content:space-between;font-size:.83rem}
.foot__legal p{margin:0}
.foot__legal a{color:rgba(255,255,255,.8);border-bottom:1px solid rgba(255,255,255,.25)}

/* ---------- sticky mobile call bar ---------- */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:110;display:grid;grid-template-columns:1.35fr 1fr;
  gap:10px;padding:10px var(--gut);background:rgba(255,255,255,.94);backdrop-filter:blur(10px);
  box-shadow:0 -6px 22px -12px rgba(107,19,50,.5)}
.callbar a{padding:14px 10px;border-radius:999px;text-align:center;font-family:var(--ff-display);
  font-weight:700;font-size:.85rem;letter-spacing:.05em;text-transform:uppercase}
.callbar__call{background:var(--flamingo);color:#fff}
.callbar__call:hover{color:#fff}
.callbar__quote{border:2px solid var(--line-strong);color:var(--navy-800)}
@media(max-width:1079px){body{padding-bottom:78px}}

/* ---------- reveal ---------- */
.js .reveal{opacity:0;transform:translateY(18px)}
.js .reveal.is-in{opacity:1;transform:none;
  transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
@media(prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}

/* ---------- breakpoints ---------- */
@media(min-width:1080px){
  .nav{display:flex}
  .burger{display:none}
  .masthead__tel{display:inline-flex}
  .callbar{display:none}
  .drawer{display:none!important}
}
@media(max-width:1079px){
  .masthead__in{min-height:72px}
  .utility__right .u-long{display:none}
  /* the sticky bottom bar carries the call on small screens, as on the
     sister sites, so the header keeps only the mark and the burger */
  .masthead__act .btn{display:none}
}
@media(min-width:1080px) and (max-width:1340px){
  .nav__btn,.nav__link{font-size:.8rem;padding:11px 9px}
  .brand .mark-bird{height:50px}
  .brand .mark-txt b{font-size:1.22rem}
  .brand .mark-sub{font-size:.54rem;letter-spacing:.2em}
}
/* from 1080 to 1199px the nav, the quote button and the call pill do not fit on
   one row (measured: the actions ran 24px off-screen at 1080). The quote button
   steps out; the call pill stays, and every hero and CTA band carries the quote link */
@media(min-width:1080px) and (max-width:1199px){
  .masthead__act .btn--ghost{display:none}
}
/* long button labels must wrap on narrow screens rather than push the page wide */
@media(max-width:560px){
  .btn{white-space:normal;max-width:100%}
  .btn-row .btn{width:100%}
  .callbar a{white-space:nowrap}
}
@media(max-width:420px){
  .brand .mark-bird{height:46px}
  .brand .mark-txt b{font-size:1.14rem}
  .brand .mark-sub{font-size:.5rem;letter-spacing:.2em}
}