/* ===========================================================================
   Michigan Water Pros — base.css
   Structure and typography follow the Liberty State Cleaning system.
   The brand kit is MWP's own: navy, teal, maroon, sky, mist.

   One stylesheet for the whole site. Pages carry no <style> block of their
   own; anything page-specific belongs here behind a page class.
   =========================================================================== */

:root{
  /* Brand kit. Navy #1C3651, Teal #2C819B, Maroon #8C2F2F, Sky #DFF7FC,
     Mist #F2F8FA, Ink #16222E, Line #DCE7EC.
     One deviation: --maroon-btn is the brand maroon, which already clears
     the 4.5 floor against white (8.9:1), so no shift is needed. */
  --navy:#1C3651;
  --navy-2:#24456A;
  --navy-3:#2C5480;
  --ink:#16222E;
  --teal:#2C819B;
  --teal-deep:#1F6076;
  --sky:#DFF7FC;
  --mist:#F2F8FA;
  --paper:#FFFFFF;
  --maroon:#8C2F2F;
  --maroon-lift:#A63A3A;
  --maroon-deep:#5E1F1F;
  --on-maroon:#FFFFFF;
  --line:#DCE7EC;
  --line-2:#EAF1F4;
  --muted:#5B6E7B;
  --star:#FBBC04;

  /* No serif may enter these stacks: a Georgia fallback is what reads as 90s. */
  --display:"Poppins",system-ui,"Segoe UI Variable Display","Segoe UI",
    -apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  --body:"Inter",system-ui,"Segoe UI Variable Text","Segoe UI",
    -apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;

  /* One radius scale, generous. Surfaces round by size; anything that reads
     as a control or a chip goes fully round. 50% stays for real circles. */
  --r-sm:12px; --r-md:18px; --r-lg:26px; --r-pill:999px;
  --wrap:1320px;
  --gut:clamp(20px,3.4vw,30px);
  --sec-pad:clamp(52px,5.6vw,86px);
  --shadow:0 1px 2px rgba(28,54,81,.05),0 18px 44px -18px rgba(28,54,81,.26);
  --shadow-lg:0 1px 2px rgba(28,54,81,.05),0 26px 56px -20px rgba(28,54,81,.34);
  --shadow-onink:0 1px 2px rgba(0,0,0,.2),0 30px 60px -28px rgba(0,0,0,.55);

  --ease-out-soft:cubic-bezier(.16,1,.3,1);
  --dur-enter:1.05s;
  --dur-hover:.42s;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--body);
  font-size:16.2px;
  line-height:1.58;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto}
a{color:var(--maroon)}
h1,h2,h3,h4{font-family:var(--display);color:var(--navy);margin:0;line-height:1.12;
  letter-spacing:-.015em;font-weight:700}
p{margin:0 0 1em}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:var(--r-lg)}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}

/* ---------------------------------------------------------------------------
   Type scale. Big, tight display over a quiet body — the single largest
   reason the old build read as generic.
   --------------------------------------------------------------------------- */
.d1,h1{font-size:clamp(2.3rem,5.4vw,4rem);font-weight:800;letter-spacing:-.03em}
h2{font-size:clamp(1.85rem,3.4vw,2.9rem);letter-spacing:-.025em}
h3{font-size:1.22rem;letter-spacing:-.01em}
h4{font-size:1.02rem}

.eyebrow{display:flex;align-items:center;gap:12px;font-family:var(--display);
  font-size:11.5px;font-weight:700;letter-spacing:.19em;text-transform:uppercase;
  color:var(--teal);margin:0 0 15px}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--teal);flex:none}
.sec-head.center .eyebrow{justify-content:center}
.eyebrow-rev{color:#8FD8EC}
.eyebrow-rev::before{background:#8FD8EC}

.lede{font-size:clamp(1.04rem,1.5vw,1.19rem);line-height:1.6;color:var(--muted);
  margin:0}
.lede-rev{color:#C6DCE8}

/* ---------------------------------------------------------------------------
   Buttons. Small, heavy, tracked out, set in caps — tailored rather than
   the soft rounded pill that reads as a template.
   --------------------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--display);font-size:13px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;text-decoration:none;padding:16px 30px;
  border-radius:var(--r-pill);border:1.5px solid transparent;cursor:pointer;
  white-space:nowrap;
  transition:transform var(--dur-hover) var(--ease-out-soft),
             background-color .3s ease,border-color .3s ease,
             box-shadow var(--dur-hover) ease}
.btn-lg{padding:18px 38px;font-size:13.5px;letter-spacing:.1em}
.btn-block{width:100%}

.btn-sun{background:var(--maroon);color:var(--on-maroon);border-color:var(--maroon)}
.btn-sun:hover{background:var(--maroon-lift);transform:translateY(-2px);
  box-shadow:0 12px 30px -10px rgba(140,47,47,.6)}
.btn-ink{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn-ink:hover{background:var(--navy-2);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--navy);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--navy);transform:translateY(-2px)}
.btn-onink{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.btn-onink:hover{background:rgba(255,255,255,.1);border-color:#fff;transform:translateY(-2px)}

/* ---------------------------------------------------------------------------
   Utility strip and header
   --------------------------------------------------------------------------- */
.util{background:var(--navy);color:#B9CDDA;font-size:12.5px;letter-spacing:.02em}
.util .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px;
  min-height:38px;padding-top:8px;padding-bottom:8px}
.util .dot{color:var(--teal);padding:0 4px}
@media(max-width:760px){.util .wrap{gap:6px 14px;justify-content:center;
  text-align:center;font-size:12px}}

.stickhead{position:sticky;top:0;z-index:60}
.hdr{background:rgba(255,255,255,.94);
  backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line);
  transition:box-shadow .35s ease,background-color .35s ease}
.hdr.settled{box-shadow:0 6px 26px rgba(28,54,81,.12)}
.hdr .wrap{display:flex;align-items:center;gap:26px;min-height:78px}

/* The logo is a full lockup, so it carries the wordmark on its own. */
.mark{display:flex;align-items:center;text-decoration:none;flex-shrink:0}
.mark img{height:40px;width:auto;display:block}
@media(max-width:560px){.mark img{height:32px}}

.nav{display:flex;gap:30px;margin-left:auto}
.nav a{position:relative;font-family:var(--display);font-size:13px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--navy);text-decoration:none}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;
  background:var(--teal);transform:scaleX(0);transform-origin:left;
  transition:transform .38s var(--ease-out-soft)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}

.hdr-cta{display:flex;align-items:center;gap:16px;margin-left:auto}
.nav+.hdr-cta{margin-left:0}
.hdr-phone{font-family:var(--display);font-weight:700;font-size:15px;color:var(--navy);
  text-decoration:none;letter-spacing:-.01em}
.hdr-phone:hover{color:var(--maroon)}
.hdr-cta .btn{padding:14px 26px;font-size:12.5px}

.menu-btn{display:none;flex-direction:column;gap:5px;background:none;border:0;
  padding:10px;cursor:pointer;margin-left:auto}
.menu-btn span{display:block;width:22px;height:2px;background:var(--navy);border-radius:var(--r-pill)}
.mnav{display:none;flex-direction:column;border-top:1px solid var(--line);
  padding:10px var(--gut) 20px}
.mnav a{font-family:var(--display);font-weight:600;font-size:15px;color:var(--navy);
  text-decoration:none;padding:13px 0;border-bottom:1px solid var(--line-2)}
.mnav a.call{color:var(--maroon)}

@media(max-width:940px){
  .nav{display:none}
  .hdr-phone{display:none}
  .menu-btn{display:flex}
  .hdr-cta{margin-left:0;gap:10px}
  .mnav:not([hidden]){display:flex}
}
@media(max-width:560px){
  .hdr-cta .btn{display:none}
}

/* ---------------------------------------------------------------------------
   Hero. Full-bleed photograph, copy on the left, the price plate floating
   on the right — Liberty's estimate-card structure carrying MWP's offer.
   --------------------------------------------------------------------------- */
.hro{position:relative;background:var(--navy);overflow:hidden;isolation:isolate}
.hro .heroimg{position:absolute;inset:0;margin:0;z-index:-2;overflow:hidden}
.hro .heroimg img{position:absolute;left:0;top:-12%;width:100%;height:150%;
  object-fit:cover;display:block;will-change:transform;transform-origin:50% 0;
  filter:saturate(.82) contrast(1.1) brightness(.78)}
.hro::after{content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(128% 104% at 64% 40%,transparent 22%,rgba(6,15,28,.62) 100%),
    linear-gradient(to bottom,transparent 58%,rgba(16,34,54,.72) 100%),
    linear-gradient(100deg,rgba(12,27,45,.96) 0%,rgba(12,27,45,.90) 33%,
      rgba(13,30,50,.70) 57%,rgba(15,36,58,.40) 100%)}
.hro-in{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,4vw,58px);
  align-items:center;padding-top:clamp(38px,3.6vw,58px);
  padding-bottom:clamp(38px,3.6vw,58px)}
.hro h1{color:#fff;font-size:clamp(2.1rem,3.9vw,3.35rem);margin:0 0 16px;max-width:19ch}
.hro .hl{color:#8FD8EC}
.hro .lede{max-width:52ch;margin-bottom:24px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:20px}
.hero-note{font-size:13.5px;color:#9FBCCC;margin:0}

.hro-trust{display:flex;flex-wrap:wrap;gap:7px 26px;margin-top:18px;
  padding-top:17px;border-top:1px solid rgba(255,255,255,.16)}
.hro-trust span{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;
  color:#C6DCE8}
.hro-trust b{color:#fff;font-weight:600}

@media(max-width:900px){
  .hro-in{grid-template-columns:1fr;gap:38px}
  .hro h1{max-width:none}
}

/* The offer plate */
.est{background:var(--paper);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);
  border:1px solid var(--line);overflow:hidden}
.est-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
  padding:20px 26px 17px;border-bottom:1px solid var(--line-2);background:var(--mist)}
.est-label{font-family:var(--display);font-size:11px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.est-price{font-family:var(--display);font-size:2.25rem;font-weight:800;
  color:var(--navy);line-height:1;letter-spacing:-.035em}
.est-price small{font-size:.95rem;font-weight:600;color:var(--muted);
  letter-spacing:0;margin-left:6px}
.est-badge{flex-shrink:0;font-family:var(--display);font-size:10px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--maroon);
  background:rgba(140,47,47,.11);border:1px solid rgba(140,47,47,.22);
  border-radius:var(--r-pill);padding:6px 14px}
.est-body{padding:16px 26px 20px}
.est-row{display:flex;gap:11px;align-items:flex-start;font-size:14.4px;
  padding:7px 0;border-bottom:1px solid var(--line-2)}
.est-row:last-of-type{border-bottom:0}
.est-row svg{flex-shrink:0;margin-top:4px}
.est-note{font-size:13.2px;color:var(--muted);background:var(--mist);
  border-radius:var(--r-sm);padding:12px 15px;margin:13px 0 15px}
.est-note .x{text-decoration:line-through;color:var(--maroon)}

/* A second, compact offer under the main plate. */
.estslot{display:flex;flex-direction:column;gap:12px}
.est-mini{background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-md);box-shadow:var(--shadow);padding:17px 24px 15px}
.est-mini .mini-top{display:flex;justify-content:space-between;align-items:baseline;
  gap:14px;padding-bottom:13px;margin-bottom:12px;border-bottom:1px solid var(--line-2)}
.est-mini .est-label{margin-bottom:6px}
.est-mini .est-price{font-size:1.72rem}
.est-mini .est-price small{font-size:.82rem}
.est-mini .est-row{padding:5px 0;border-bottom:0;font-size:14.2px}
.est-mini .est-row svg{margin-top:3px}

/* ---------------------------------------------------------------------------
   Sections
   --------------------------------------------------------------------------- */
.sec{padding:var(--sec-pad) 0}
.sec-mist{background:var(--mist)}
.sec-sky{background:var(--sky)}
.sec-ink{background:var(--navy);color:#C6DCE8}
.sec-ink h2,.sec-ink h3,.sec-ink h4{color:#fff}
.sec-ink .lede{color:#A9C4D4}
.sec-ink .eyebrow{color:#8FD8EC}

.sec-head{max-width:640px;margin-bottom:clamp(26px,2.8vw,38px)}
.sec-head.split{display:grid;grid-template-columns:1.12fr 1fr;
  column-gap:clamp(24px,4vw,68px);row-gap:0;max-width:none;
  grid-template-areas:"eb   ."
                      "ttl  lede"}
.sec-head.split .eyebrow{grid-area:eb}
.sec-head.split h2{grid-area:ttl;margin-bottom:0;align-self:end}
.sec-head.split .lede{grid-area:lede;align-self:end;padding-bottom:6px}
@media(max-width:820px){
  .sec-head.split{grid-template-columns:1fr;
    grid-template-areas:"eb" "ttl" "lede"}
  .sec-head.split .lede{padding-top:14px;padding-bottom:0}
}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head h2{margin-bottom:13px}

/* Claims strip: four short proofs on a hairline rule, no boxes. */
.claims{background:var(--navy-2);
  background-image:linear-gradient(100deg,var(--navy) 0%,var(--navy-2) 62%,#2A5183 100%)}
.claims .wrap{display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(18px,2.4vw,34px);padding-top:26px;padding-bottom:26px}
.claim{position:relative;padding-left:34px;font-size:13.8px;color:#AFC8D8;
  line-height:1.5}
.claim::before{content:"";position:absolute;left:0;top:9px;width:22px;height:2px;
  background:#8FD8EC}
.claim b{color:#fff;font-weight:600}
@media(max-width:860px){.claims .wrap{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.claims .wrap{grid-template-columns:1fr}}

/* ---------------------------------------------------------------------------
   Cards. The product cutouts sit on a tinted plate rather than in a photo
   frame — they are transparent PNGs of equipment, not lifestyle photography,
   and pretending otherwise is what would look cheap.
   --------------------------------------------------------------------------- */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.2vw,28px)}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.4vw,30px)}
@media(max-width:900px){.grid3{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.grid3,.grid2{grid-template-columns:1fr}}

.card{display:flex;flex-direction:column;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;
  transition:transform var(--dur-hover) var(--ease-out-soft),
             box-shadow var(--dur-hover) var(--ease-out-soft),
             border-color var(--dur-hover) ease}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);
  border-color:var(--line-2)}

.card .ph{position:relative;aspect-ratio:4/2.6;overflow:hidden;
  background:linear-gradient(168deg,var(--mist) 0%,var(--sky) 100%);
  border-bottom:1px solid var(--line-2);display:flex;align-items:flex-end;
  justify-content:center;padding:16px 14px 0}
.card .ph img{width:auto;max-width:94%;height:100%;object-fit:contain;
  object-position:bottom;
  filter:drop-shadow(0 18px 26px rgba(28,54,81,.26));
  transition:transform 1.1s var(--ease-out-soft)}
.card:hover .ph img{transform:translateY(-6px) scale(1.04)}
.card .ph .num{position:absolute;top:16px;left:18px;font-family:var(--display);
  font-size:11px;font-weight:700;letter-spacing:.16em;color:var(--teal-deep)}

.card .bd{padding:22px 24px 10px;flex:1}
.card .bd h3{margin-bottom:9px}
.card .bd p{color:var(--muted);font-size:14.8px;margin:0}
.card .from{display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:14px 24px 18px;border-top:1px solid var(--line-2);margin-top:14px}
.card .from a{font-family:var(--display);font-size:12.5px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--navy);
  text-decoration:none}
.card .from a:hover{text-decoration:underline}
.card .from em{font-style:normal;font-size:12.8px;color:var(--muted)}

/* ---------------------------------------------------------------------------
   Spec list. Numbered editorial rows on hairlines, no card chrome.
   --------------------------------------------------------------------------- */
.specs{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(30px,4vw,64px)}
@media(max-width:760px){.specs{grid-template-columns:1fr}}
.spec{display:grid;grid-template-columns:auto 1fr;gap:18px;padding:20px 0;
  border-top:1px solid var(--line)}
.spec .n{font-family:var(--display);font-size:12px;font-weight:700;
  letter-spacing:.14em;color:var(--teal);padding-top:4px}
.spec h3{margin-bottom:7px}
.spec p{color:var(--muted);font-size:14.6px;margin:0}

/* Comparison table */
.compare{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  background:var(--paper)}
.crow{display:grid;grid-template-columns:1.25fr 1fr 1fr;border-top:1px solid var(--line-2)}
.crow:first-child{border-top:0}
.crow>div{padding:14px clamp(14px,1.6vw,22px);font-size:14.6px}
.crow .feat{color:var(--navy);font-weight:600;background:var(--mist)}
.crow .us{color:var(--ink)}
.crow .them{color:var(--muted)}
.crow.head>div{font-family:var(--display);font-size:12px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;padding-top:15px;padding-bottom:15px}
.crow.head .us{background:var(--navy);color:#fff}
.crow.head .them{background:var(--mist);color:var(--muted)}
@media(max-width:640px){
  .crow{grid-template-columns:1fr}
  .crow>div{border-top:1px solid var(--line-2)}
  .crow .feat{border-top:0}
}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
@media(max-width:760px){.steps{grid-template-columns:1fr}}
.step{background:var(--paper);padding:clamp(24px,2.4vw,32px);
  transition:transform var(--dur-hover) var(--ease-out-soft),
             box-shadow var(--dur-hover) var(--ease-out-soft)}
.step:hover{transform:translateY(-4px);box-shadow:var(--shadow);z-index:1;position:relative}
.step .n{font-family:var(--display);font-size:2.6rem;font-weight:800;
  color:#9CCEDE;line-height:1;margin-bottom:14px;letter-spacing:-.04em}
.step h3{margin-bottom:9px}
.step p{color:var(--muted);font-size:14.8px;margin:0}

/* Cities */
.cities{display:flex;flex-wrap:wrap;gap:9px}
.city{display:inline-flex;align-items:center;font-family:var(--display);font-size:13px;
  font-weight:600;letter-spacing:.02em;color:var(--navy);text-decoration:none;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-pill);
  padding:11px 20px;
  transition:transform var(--dur-hover) var(--ease-out-soft),
             box-shadow var(--dur-hover) var(--ease-out-soft),
             border-color var(--dur-hover) ease,background-color .3s ease}
.city:hover{transform:translateY(-4px);box-shadow:var(--shadow);
  border-color:var(--teal);background:var(--paper)}
.city-all{background:var(--navy);color:#fff;border-color:var(--navy)}
.city-all:hover{background:var(--navy-2);border-color:var(--navy-2)}

/* Proof tiles */
.tile{background:var(--paper);border-top:3px solid var(--navy);padding:22px 0 0;
  transition:border-color var(--dur-hover) ease}
.tile:hover{border-top-color:var(--teal)}
.tile .ic{display:none}
.tile h3{margin-bottom:8px;font-size:1.16rem}
.tile p{color:var(--muted);font-size:14.8px;margin:0}
.tile .n{font-family:var(--display);font-size:11.5px;font-weight:700;
  letter-spacing:.16em;color:var(--teal);margin-bottom:9px}

/* ===========================================================================
   Background art. A third layer behind every band so the joins are not just
   flat colour meeting flat colour.

   One motif per section at most, rotated so none repeats back to back, all
   aria-hidden. Kept faint on purpose, 4 to 12 percent: this is furniture
   behind the room, not the furniture you look at.
   =========================================================================== */
.bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.has-bg{position:relative;isolation:isolate}
.has-bg>.wrap{position:relative;z-index:1}

/* 1. Ripple. Concentric rings bleeding off an edge — the water analogue of
      a drafting arc. */
.bg-ripple::before{content:"";position:absolute;right:-12%;top:-42%;
  width:min(60vw,760px);aspect-ratio:1;border-radius:50%;
  border:1.5px solid rgba(28,54,81,.10)}
.bg-ripple::after{content:"";position:absolute;right:-2%;top:-18%;
  width:min(38vw,470px);aspect-ratio:1;border-radius:50%;
  border:1.5px solid rgba(44,129,155,.22)}
.bg-ripple-l::before{right:auto;left:-12%;top:auto;bottom:-42%}
.bg-ripple-l::after{right:auto;left:-2%;top:auto;bottom:-18%;
  border-color:rgba(44,129,155,.18)}

/* 2. Droplets. Scattered rings at varied radius. Drawn as outlines, not
      filled blobs, so they speak the same language as the ripple arcs. */
.bg-drops::before{content:"";position:absolute;inset:0;
  background-image:
    radial-gradient(circle at 13% 74%, transparent 0 54px, rgba(44,129,155,.17) 54px 55.5px, transparent 56px),
    radial-gradient(circle at 86% 21%, transparent 0 82px, rgba(28,54,81,.11) 82px 83.5px, transparent 84px),
    radial-gradient(circle at 74% 63%, transparent 0 33px, rgba(44,129,155,.14) 33px 34.5px, transparent 35px),
    radial-gradient(circle at 33% 15%, transparent 0 23px, rgba(28,54,81,.10) 23px 24.5px, transparent 25px),
    radial-gradient(circle at 95% 82%, transparent 0 44px, rgba(44,129,155,.12) 44px 45.5px, transparent 46px)}

/* 3. The house-and-droplet mark from the logo, huge and nearly invisible. */
.bg-mark::before{content:"";position:absolute;right:3%;bottom:-16%;
  width:min(42vw,520px);height:min(42vw,520px);opacity:.055;
  background-repeat:no-repeat;background-size:contain;background-position:bottom right;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cpath d='M60 6 L110 34 V86 L60 114 L10 86 V34 Z' fill='none' stroke='%231C3651' stroke-width='4' stroke-linejoin='round'/%3E%3Cpath d='M60 30 C60 30 40 56 40 70 a20 20 0 0 0 40 0 C80 56 60 30 60 30 Z' fill='none' stroke='%231C3651' stroke-width='4' stroke-linejoin='round'/%3E%3C/svg%3E")}

/* 5. A corner bracket, drawn not filled. */
.bg-bracket::before{content:"";position:absolute;left:2.5%;top:12%;
  width:min(22vw,250px);height:min(22vw,250px);
  border-left:2px solid rgba(44,129,155,.26);border-top:2px solid rgba(44,129,155,.26);
  border-top-left-radius:4px}
.bg-bracket::after{content:"";position:absolute;right:2.5%;bottom:12%;
  width:min(18vw,200px);height:min(18vw,200px);
  border-right:2px solid rgba(28,54,81,.16);border-bottom:2px solid rgba(28,54,81,.16);
  border-bottom-right-radius:4px}

/* 6. A single soft colour bloom, off centre. */
.bg-bloom::before{content:"";position:absolute;inset:0;
  background:
    radial-gradient(30rem 26rem at 16% 12%, rgba(44,129,155,.16), transparent 62%),
    radial-gradient(34rem 28rem at 88% 90%, rgba(28,54,81,.10), transparent 64%)}
.bg-bloom-dark::before{content:"";position:absolute;inset:0;
  background:
    radial-gradient(36rem 26rem at 88% -10%, rgba(140,47,47,.30), transparent 60%),
    radial-gradient(34rem 26rem at 6% 108%, rgba(44,129,155,.26), transparent 62%)}

/* 7. Waterline. A slow sine drawn once, bleeding off both edges. */
.bg-wave::before{content:"";position:absolute;left:0;right:0;bottom:8%;height:min(26vw,260px);
  background-repeat:repeat-x;background-size:auto 100%;background-position:0 bottom;
  opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 200' preserveAspectRatio='none'%3E%3Cpath d='M0 120 C 100 70 200 70 300 120 S 500 170 600 120 S 780 70 800 96' fill='none' stroke='%232C819B' stroke-opacity='.30' stroke-width='2'/%3E%3Cpath d='M0 152 C 110 104 210 104 310 152 S 510 200 610 152 S 790 104 800 128' fill='none' stroke='%231C3651' stroke-opacity='.16' stroke-width='2'/%3E%3C/svg%3E")}

/* Gradient washes, so a flat band is never truly flat. */
.sec-mist{background-image:
  radial-gradient(38rem 22rem at 96% -12%, rgba(44,129,155,.11), transparent 62%),
  radial-gradient(34rem 24rem at -8% 112%, rgba(28,54,81,.07), transparent 64%)}
.sec-sky{background-image:
  radial-gradient(40rem 24rem at 8% -16%, rgba(255,255,255,.85), transparent 66%),
  radial-gradient(34rem 22rem at 96% 110%, rgba(44,129,155,.16), transparent 62%)}
.sec-ink{background-image:
  radial-gradient(40rem 24rem at 92% -14%, rgba(140,47,47,.34), transparent 60%),
  radial-gradient(36rem 26rem at -6% 112%, rgba(44,129,155,.22), transparent 64%)}


@media(max-width:760px){
  .bg-ripple,.bg-mark,.bg-bracket{display:none}
}
@media (prefers-reduced-motion:reduce){
  .bg:not(.bg-shot){display:none}
  .bg-shot img,.hro .heroimg img{animation:none!important;transform:none!important;
    top:0;height:100%}
}

/* ---------------------------------------------------------------------------
   Feature panel. A full-width dark split that stops the page reading as a
   document: argument on the left, the number on the right.
   --------------------------------------------------------------------------- */
.feature{position:relative;display:grid;grid-template-columns:1.35fr 1fr;
  border-radius:var(--r-lg);overflow:hidden;background:var(--navy);
  background-image:linear-gradient(104deg,var(--navy) 0%,var(--navy-2) 58%,#2A5183 100%)}
.feature::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(28rem 20rem at 96% -8%, rgba(140,47,47,.40), transparent 62%),
    radial-gradient(26rem 20rem at 2% 104%, rgba(44,129,155,.28), transparent 64%)}
.feature>*{position:relative;z-index:1}
@media(max-width:820px){.feature{grid-template-columns:1fr}}
.feature-bd{padding:clamp(30px,3.4vw,52px)}
.feature-bd h2{color:#fff;font-size:clamp(1.6rem,2.6vw,2.2rem);margin-bottom:14px}
.feature-bd>p{color:#AFC8D8;font-size:15.4px;margin-bottom:22px;max-width:52ch}
.fpoint{position:relative;padding-left:32px;margin-bottom:13px;font-size:14.6px;
  color:#AFC8D8;line-height:1.5}
.fpoint::before{content:"";position:absolute;left:0;top:9px;width:20px;height:2px;
  background:#8FD8EC}
.fpoint b{color:#fff;font-weight:600}
.feature-num{padding:clamp(30px,3.4vw,52px);background:rgba(0,0,0,.19);
  display:flex;flex-direction:column;justify-content:center}
.feature-num .lbl{font-family:var(--display);font-size:11px;font-weight:700;
  letter-spacing:.17em;text-transform:uppercase;color:#8FD8EC;margin-bottom:12px}
.feature-num .big{font-family:var(--display);font-size:clamp(2.5rem,4.4vw,3.4rem);
  font-weight:800;color:#fff;line-height:.94;letter-spacing:-.04em;margin-bottom:9px}
.feature-num p{color:#AFC8D8;font-size:13.8px;margin:0}
.fprice+.fprice{border-top:1px solid rgba(255,255,255,.15);
  padding-top:clamp(16px,1.8vw,22px);margin-top:clamp(16px,1.8vw,22px)}
.feature-num .btn{margin-top:clamp(20px,2.4vw,28px)}

/* Section divider. Same vocabulary as the 3px accent rule that tops every
   dark band, just heavier and in brand navy, so a join between two light
   sections still reads as a deliberate edge. */
.divider{height:clamp(5px,.55vw,8px);border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--navy) 0%,var(--navy-2) 50%,var(--navy) 100%)}

/* FAQ */
.faq{max-width:880px;margin:0;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{position:relative;list-style:none;cursor:pointer;padding:24px 46px 24px 0;
  font-family:var(--display);font-weight:600;font-size:1.06rem;color:var(--navy)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:8px;top:29px;width:9px;height:9px;
  border-right:2px solid var(--teal);border-bottom:2px solid var(--teal);
  transform:rotate(45deg);transition:transform .18s ease}
.faq details[open] summary::after{transform:rotate(225deg);top:33px}
.faq details p{color:var(--muted);font-size:15.4px;margin:0 0 24px;max-width:70ch}

/* Final CTA */
.finalcta{text-align:center;max-width:720px;margin:0 auto}
.finalcta h2{color:#fff;margin-bottom:16px}
.finalcta p{color:#A9C4D4;margin-bottom:30px}
.finalcta .hero-actions{justify-content:center}

/* Local block + map */
.localwrap{max-width:900px;margin:0 auto;border-radius:var(--r-md);overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--shadow)}
.localwrap iframe{border:0;display:block;width:100%;height:360px}

/* Prose pages */
.prose{max-width:760px}
.prose h2{font-size:clamp(1.5rem,2.6vw,2rem);margin:44px 0 14px}
.prose h2:first-child{margin-top:0}
.prose h3{margin:30px 0 10px}
.prose p,.prose li{color:var(--ink);font-size:16.6px}
.prose ul{padding-left:20px}
.prose li{margin-bottom:8px}
.callout{background:var(--mist);border-left:3px solid var(--teal);
  border-radius:0 var(--r-sm) var(--r-sm) 0;padding:20px 24px;margin:26px 0;
  font-size:15.6px;color:var(--ink)}

/* Inner page hero */
.phero{background:var(--navy);padding:clamp(48px,6vw,86px) 0 clamp(44px,5.4vw,72px)}
.phero h1{color:#fff;font-size:clamp(2rem,4.2vw,3.1rem);margin-bottom:16px}
.phero .lede{color:#A9C4D4;max-width:62ch}
.crumbs{font-size:12.5px;color:#8FA9BC;margin-bottom:18px;letter-spacing:.03em}
.crumbs a{color:#B9CDDA;text-decoration:none}
.crumbs a:hover{color:#fff}

/* ---------------------------------------------------------------------------
   Footer. A contact card floats across the top edge with the mark breaking
   out of it, then four columns under teal rules.
   --------------------------------------------------------------------------- */
.ft{background:var(--navy);color:#9FBCCC;position:relative;padding-bottom:0;
  display:flow-root}
.pre-ft{padding-bottom:clamp(150px,13vw,210px)}

.ft-top{position:relative;margin-top:clamp(-76px,-5vw,-52px);
  margin-bottom:clamp(44px,4.6vw,66px)}
/* The emblem stands on its own, no disc behind it. It clears the card so the
   navy mark sits on the light ground above rather than on the blue. */
.ft-badge{position:absolute;left:50%;top:0;transform:translate(-50%,-84%);
  width:clamp(84px,7.6vw,112px);display:flex;justify-content:center;z-index:2}
.ft-badge img{width:100%;height:auto;display:block;
  filter:drop-shadow(0 10px 18px rgba(28,54,81,.22))}

.ft-contact{position:relative;display:grid;grid-template-columns:.95fr 1.3fr .9fr;
  border-radius:var(--r-lg);padding:clamp(38px,3.6vw,50px) clamp(20px,2.4vw,34px)
  clamp(30px,3vw,38px);
  background:linear-gradient(100deg,#2C5480 0%,#2A6383 58%,#27718F 100%);
  box-shadow:0 26px 56px -26px rgba(10,25,45,.6)}
.ft-contact::before{content:"";position:absolute;left:50%;top:18px;
  transform:translateX(-50%);width:min(280px,52%);height:3px;
  background:var(--maroon);border-radius:var(--r-pill)}
.fc{display:flex;align-items:center;gap:16px;padding:0 clamp(12px,1.8vw,26px);
  border-left:1px solid rgba(255,255,255,.20)}
.fc:first-child{border-left:0}
.fc-ic{flex:none;width:34px;height:34px;color:#CDE6F1}
.fc-ic svg{width:100%;height:100%;display:block}
.fc-l{display:block;font-size:13px;color:#A8C4D6;margin-bottom:4px}
.ft .fc-v,.fc-v{display:block;font-family:var(--display);font-weight:700;
  font-size:17px;color:#FFFFFF;text-decoration:none;letter-spacing:-.015em;
  overflow-wrap:anywhere;line-height:1.28}
.ft a.fc-v:hover{color:#fff;text-decoration:underline}
.fc-v.sm{font-size:15px}
a.fc-v:hover{text-decoration:underline}
@media(max-width:860px){
  .ft-contact{grid-template-columns:1fr;gap:20px}
  .fc{border-left:0;border-top:1px solid rgba(255,255,255,.18);padding:18px 0 0}
  .fc:first-child{border-top:0;padding-top:0}
}

.fgrid{display:grid;grid-template-columns:1.55fr 1fr 1fr 1fr;
  gap:clamp(26px,3vw,48px);padding-bottom:clamp(38px,4vw,56px)}
@media(max-width:900px){.fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.fgrid{grid-template-columns:1fr}}
.ft h3{font-size:1.16rem;letter-spacing:-.015em;color:#fff;margin:0 0 14px}
.ft h3::after{content:"";display:block;width:52px;height:3px;background:var(--maroon);
  border-radius:var(--r-pill);margin-top:14px}
.fstate{font-size:1.34rem!important;line-height:1.25;max-width:15ch}
.fstate::after{display:none!important}
.ft a{display:block;color:#9FBCCC;text-decoration:none;font-size:14.8px;
  padding:6px 0;transition:color .2s ease,transform .2s ease}
.ft a:hover{color:#fff}
.fabout{font-size:14.4px;line-height:1.62;margin:14px 0 12px}
.faddr{font-size:14.2px;margin-bottom:16px;color:#8FA9BC}
.fmore{display:inline-flex!important;align-items:center;gap:10px;
  font-family:var(--display);font-weight:700;font-size:13.5px;color:#fff!important;
  letter-spacing:.02em}
.fmore:hover .arw{transform:translateX(4px)}
.fmore .arw{transition:transform .3s var(--ease-out-soft)}

.fbar{background:#16293F}
.fbar .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 26px;
  padding-top:18px;padding-bottom:18px;font-size:12.8px;color:#8FA9BC}

/* Mobile call bar */
.mcall{display:none}
@media(max-width:768px){
  .mcall{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:60;
    box-shadow:0 -6px 20px -8px rgba(28,54,81,.35)}
  .mcall a{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
    padding:15px 8px;font-family:var(--display);font-weight:600;font-size:14.6px;
    text-decoration:none}
  .mcall .mc-call{background:var(--navy);color:#fff}
  .mcall .mc-cta{background:var(--maroon);color:#fff}
  body{padding-bottom:54px}
}

/* ===========================================================================
   Motion set. Ported from the Liberty State Cleaning system.

   Driven by a data-anim attribute rather than a pile of classes. Section
   heads alternate left/right down the page; cards pop upward on a stagger.
   Nothing here may leave content invisible: the opacity:0 is scoped to .js,
   and the script carries a show-all backstop.
   =========================================================================== */
.js [data-anim]{opacity:0}
.js [data-anim].in{
  animation-duration:var(--dur-enter);
  animation-timing-function:var(--ease-out-soft);
  animation-fill-mode:both}

.js [data-anim="left"].in {animation-name:mwpSlideL}
.js [data-anim="right"].in{animation-name:mwpSlideR}
.js [data-anim="up"].in   {animation-name:mwpUp}
.js [data-anim="pop"].in  {animation-name:mwpPop}
.js [data-anim="wipe"].in {animation-name:mwpWipe;animation-duration:1.25s}

/* Cleared once played, so a filled transform cannot sit on top of hover. */
.js [data-anim].done{animation:none;opacity:1;transform:none;clip-path:none}

@keyframes mwpSlideL{from{opacity:0;transform:translate3d(-70px,0,0)}
                     to{opacity:1;transform:none}}
@keyframes mwpSlideR{from{opacity:0;transform:translate3d(70px,0,0)}
                     to{opacity:1;transform:none}}
@keyframes mwpUp    {from{opacity:0;transform:translate3d(0,46px,0)}
                     to{opacity:1;transform:none}}
@keyframes mwpPop   {from{opacity:0;transform:translate3d(0,34px,0) scale(.94)}
                     to{opacity:1;transform:none}}
@keyframes mwpWipe  {from{opacity:0;clip-path:inset(0 100% 0 0)}
                     to{opacity:1;clip-path:inset(0 0 0 0)}}

@media (prefers-reduced-motion:reduce){
  .js [data-anim]{opacity:1!important;animation:none!important;
    transform:none!important;clip-path:none!important}
  .card,.tile,.step,.city,.btn,.card .ph img,.nav a::after,.hdr{
    transition:none!important}
  .card:hover,.tile:hover,.step:hover,.city:hover,.btn:hover{transform:none}
  .card:hover .ph img{transform:none}
}

/* ===========================================================================
   Design system v2. Refined from the client reference comps.

   The through-line in all four: a two-tone headline (navy or white on the
   first line, teal on the second), a maroon rule before a teal eyebrow, an
   accent hairline across the top of every dark band, oversized faint
   numerals and rings as furniture, and pale buttons on dark ground so the
   maroon CTA stays reserved for light surfaces.
   =========================================================================== */

/* Two-tone display. .t2 is the second line. */
.t2{display:block;color:var(--teal)}
.sec-deep .t2,.sec-navy .t2{color:#8FD8EC}

/* Eyebrow: maroon rule, teal word. */
.eyebrow::before{background:var(--maroon)}
.eyebrow-rev::before{background:var(--maroon-lift)}
.eyebrow-rev{color:#8FD8EC}

/* Pale button, for dark grounds. */
.btn-pale{background:var(--sky);color:var(--navy);border-color:var(--sky)}
.btn-pale:hover{background:#fff;border-color:#fff;transform:translateY(-2px)}
.btn .arw{transition:transform .3s var(--ease-out-soft)}
.btn:hover .arw{transform:translateX(4px)}
.or-call{font-family:var(--display);font-weight:700;font-size:13.5px;color:#C6DCE8;
  letter-spacing:.01em}
.or-call a{color:#fff;text-decoration:none}
.or-call a:hover{text-decoration:underline}

/* Dark bands, with an accent hairline across the top. */
.sec-deep{background:var(--ink);color:#A9C4D4;position:relative}
.sec-navy{background:#1E3A5C;color:#A9C4D4;position:relative}
.sec-deep h2,.sec-deep h3,.sec-deep h4,
.sec-navy h2,.sec-navy h3,.sec-navy h4{color:#fff}
.sec-deep .lede,.sec-navy .lede{color:#A9C4D4}
.rule-top::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;z-index:2}
.rule-maroon::before{background:var(--maroon)}
.rule-teal::before{background:var(--teal)}

/* Oversized furniture. */
.bg-rings::before,.bg-rings::after{content:"";position:absolute;border-radius:50%;
  border:1.5px solid currentColor;opacity:.08}
.bg-rings::before{width:min(46vw,620px);aspect-ratio:1;right:-6%;top:-24%}
.bg-rings::after{width:min(30vw,410px);aspect-ratio:1;right:4%;top:-6%}
.bg-rings-c::before{left:50%;right:auto;top:-56%;transform:translateX(-50%);
  width:min(52vw,720px)}
.bg-rings-c::after{left:50%;right:auto;top:-28%;transform:translateX(-50%);
  width:min(34vw,470px)}
.bg-numeral::before{content:attr(data-num);position:absolute;right:-1.2%;bottom:-32%;
  font-family:var(--display);font-weight:800;font-size:min(30vw,340px);line-height:1;
  color:#fff;opacity:.05;pointer-events:none;letter-spacing:-.05em}
.bg-hatch::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:repeating-linear-gradient(58deg,
    rgba(255,255,255,.035) 0 1px, transparent 1px 74px)}

/* A photograph used as ground, not as content: held right back so the cards
   and type still carry the section.

   It is deliberately taller than its frame so it can drift on scroll without
   ever exposing an edge. The drift runs off a scroll-driven animation where
   the browser supports one, which stays on the compositor and never touches
   a scroll handler; site.js drives the same movement everywhere else. */
.bg-shot img{position:absolute;left:0;top:-40%;width:100%;height:180%;
  object-fit:cover;object-position:center;display:block;
  filter:saturate(.92);opacity:.30;
  will-change:transform;transform:translate3d(0,var(--par,0%),0)}
.bg-shot::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(242,248,250,.84) 0%,
    rgba(242,248,250,.66) 30%,rgba(242,248,250,.24) 62%,
    rgba(242,248,250,.56) 100%)}

/* Hero: pinned on arrival, then sinks at under half scroll speed and grows
   as it scrolls away, so the top and bottom of the scroll look clearly
   different. The origin sits on the top edge so the frame stays covered. */
@keyframes heroDrift{
  from{transform:translate3d(0,0,0) scale(1)}
  to  {transform:translate3d(0,30%,0) scale(1.12)}
}
/* Section artwork: a long drift with a scale and a slight turn across the
   whole time its band is on screen. The artwork sits on a canvas the colour
   of the band, so travel past the frame never shows an edge. */
@keyframes splashDrift{
  from{transform:translate3d(0,-22%,0) scale(1.18) rotate(-4deg)}
  to  {transform:translate3d(0,22%,0) scale(.94) rotate(4deg)}
}
/* The timeline is named on the section, not taken from view() on the image:
   .bg is overflow:hidden, which makes it a scroll container, so an anonymous
   view() would resolve against a box that never scrolls. Where scroll-driven
   animations exist this stays on the compositor; site.js drives the same
   travel everywhere else. */
.par-host{view-timeline-name:--parband;view-timeline-axis:block}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:--parband){
    /* Driven by the page scroll, not a view timeline on the hero: the hero is
       on screen at load, so a view range either starts part-spent or waits for
       the hero to reach the top. This moves from the first pixel of scroll and
       completes after one viewport. */
    .hro .heroimg img{animation:heroDrift linear both;
      animation-timeline:scroll(root block);animation-range:0px 100vh}
    .bg-shot img{animation:splashDrift linear both;
      animation-timeline:--parband;animation-range:cover 0% cover 100%}
  }
}

/* Vertical section tag. */
.vtag{position:absolute;left:0;top:6px;writing-mode:vertical-rl;transform:rotate(180deg);
  font-family:var(--display);font-size:10px;font-weight:700;letter-spacing:.34em;
  text-transform:uppercase;color:var(--muted);opacity:.62}
@media(max-width:1080px){.vtag{display:none}}

/* --- Problems: staggered cards with a tinted corner wedge ------------------ */
.prob-head{display:grid;grid-template-columns:1.05fr 1fr;column-gap:clamp(24px,4vw,68px);
  grid-template-areas:"eb ." "ttl lede";margin-bottom:clamp(30px,3.4vw,46px)}
.prob-head .eyebrow{grid-area:eb}
.prob-head h2{grid-area:ttl;font-size:clamp(2.1rem,4.4vw,3.5rem);margin:0}
.prob-head .lede{grid-area:lede;align-self:end;padding-bottom:8px;font-size:1.02rem}
@media(max-width:820px){
  .prob-head{grid-template-columns:1fr;grid-template-areas:"eb" "ttl" "lede"}
  .prob-head .lede{padding-top:14px;padding-bottom:0}
}
.probs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px);
  align-items:start}
@media(max-width:820px){.probs{grid-template-columns:1fr}}
.prob{position:relative;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-md);padding:24px 26px 30px;overflow:hidden;
  box-shadow:var(--shadow);
  transition:transform var(--dur-hover) var(--ease-out-soft),
             box-shadow var(--dur-hover) var(--ease-out-soft)}
.probs .prob:nth-child(2){margin-top:clamp(14px,2.4vw,34px)}
.prob:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.prob::after{content:"";position:absolute;right:0;bottom:0;width:62%;height:58%;
  background:linear-gradient(135deg,transparent 49.6%,var(--sky) 50%);pointer-events:none}
.prob-top{display:flex;justify-content:space-between;align-items:flex-start;
  margin-bottom:26px}
.prob-top svg{display:block}
.prob-n{font-family:var(--display);font-style:italic;font-size:12px;font-weight:600;
  color:var(--muted);opacity:.75}
.prob h3{position:relative;z-index:1;font-size:1.6rem;letter-spacing:-.02em;
  margin-bottom:16px}
.prob-lbl{position:relative;z-index:1;display:block;font-family:var(--display);
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--teal);margin-bottom:6px}
.prob p{position:relative;z-index:1;color:var(--muted);font-size:14.6px;margin:0}

/* --- Pricing: copy left, table card with an offset block behind ------------ */
.price-grid{display:grid;grid-template-columns:.92fr 1.28fr;
  gap:clamp(30px,4.5vw,72px);align-items:center}
@media(max-width:900px){.price-grid{grid-template-columns:1fr}}
.price-grid h2{font-size:clamp(2.1rem,4.2vw,3.3rem);margin-bottom:18px}
.price-grid .lede{margin-bottom:28px;font-size:1.01rem;max-width:46ch}
.ctable-wrap{position:relative}
.ctable-wrap::before{content:"";position:absolute;left:18px;top:18px;right:-18px;
  bottom:-18px;background:#24456A;border-radius:var(--r-lg)}
@media(max-width:560px){.ctable-wrap::before{display:none}}
.ctable{position:relative;background:var(--paper);border:1px solid var(--line);
  border-top:3px solid var(--maroon);border-radius:var(--r-lg);overflow:hidden;
  padding:26px clamp(20px,2.4vw,34px) 12px;
  box-shadow:var(--shadow-onink)}
.ctable table{width:100%;border-collapse:collapse}
.ctable th{text-align:left;font-family:var(--display);font-size:10.5px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--teal);
  padding:0 14px 15px 0;white-space:nowrap}
.ctable td{padding:15px 14px 15px 0;border-top:1px solid var(--line-2);
  font-size:14.6px;vertical-align:middle}
.ctable tbody tr:first-child td{border-top:1px solid var(--line)}
.ctable .f{color:var(--navy);font-weight:600;font-size:13.6px;width:31%}
.ctable .u{font-family:var(--display);font-weight:700;color:var(--maroon);
  font-size:1.06rem;letter-spacing:-.01em;width:34%}
.ctable .t{color:var(--muted);font-size:13.8px}

/* --- Steps: horizontal timeline with ring nodes ---------------------------- */
.tl{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,44px);
  margin-top:clamp(26px,3vw,42px)}
@media(max-width:820px){.tl{grid-template-columns:1fr;gap:30px}}
.tl-item{position:relative}
.tl-n{display:block;font-family:var(--display);font-style:italic;font-size:12.5px;
  font-weight:600;color:#8FD8EC;margin-bottom:12px}
.tl-node{position:relative;height:22px;margin-bottom:18px}
.tl-node::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:13px;height:13px;border-radius:50%;border:2px solid #8FD8EC;z-index:1}
.tl-node::after{content:"";position:absolute;left:4.5px;top:50%;
  transform:translateY(-50%);width:5px;height:5px;border-radius:50%;
  background:#8FD8EC;z-index:2}
.tl-line{position:absolute;left:22px;right:calc(-1 * clamp(20px,3vw,44px));top:50%;
  height:1px;background:rgba(143,216,236,.34)}
.tl-item:last-child .tl-line{display:none}
@media(max-width:820px){.tl-line{display:none}}
.tl-item h3{font-size:1.28rem;margin-bottom:9px}
.tl-item p{color:#A9C4D4;font-size:14.4px;margin:0}

/* --- FAQ: headline left, numbered accordion right -------------------------- */
.faq-grid{display:grid;grid-template-columns:.82fr 1.18fr;
  gap:clamp(28px,4.5vw,78px);align-items:start}
@media(max-width:860px){.faq-grid{grid-template-columns:1fr}}
.faq-grid h2{font-size:clamp(2.1rem,4.2vw,3.3rem);margin-bottom:18px}
.faq-grid .lede{font-size:1rem;margin-bottom:20px}
.faq-phone{display:inline-block;font-family:var(--display);font-weight:700;
  font-size:1.02rem;color:var(--navy);text-decoration:none;
  border-bottom:2px solid var(--teal);padding-bottom:5px}
.faq-phone:hover{color:var(--teal)}
.qa{border-top:1px solid var(--line)}
.qa details{border-bottom:1px solid var(--line)}
.qa summary{display:grid;grid-template-columns:auto 1fr auto;gap:18px;
  align-items:baseline;list-style:none;cursor:pointer;padding:20px 0;
  font-family:var(--display);font-weight:600;font-size:1.06rem;color:var(--navy)}
.qa summary::-webkit-details-marker{display:none}
.qa summary .n{font-style:italic;font-size:12px;font-weight:600;color:var(--teal)}
.qa summary .pm{position:relative;width:15px;height:15px;flex:none;align-self:center}
.qa summary .pm::before,.qa summary .pm::after{content:"";position:absolute;
  background:var(--navy);transition:opacity .2s ease,transform .25s var(--ease-out-soft)}
.qa summary .pm::before{left:0;right:0;top:6.5px;height:2px}
.qa summary .pm::after{top:0;bottom:0;left:6.5px;width:2px}
.qa details[open] summary .pm::after{opacity:0;transform:rotate(90deg)}
.qa details p{color:var(--muted);font-size:15px;margin:0 0 22px;padding-left:30px;
  max-width:64ch}

/* --- Closing CTA ----------------------------------------------------------- */
.close-cta{text-align:center;max-width:760px;margin:0 auto;position:relative;z-index:1}
.close-cta .eyebrow{justify-content:center}
.close-cta h2{font-size:clamp(2.2rem,5vw,3.7rem);margin-bottom:18px}
.close-cta .lede{margin:0 auto 30px;max-width:56ch}
.close-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:18px}

/* The comparison table cannot hold three columns on a phone, so below 720px
   it restacks: the feature becomes a heading and each value carries its own
   label. Nothing scrolls sideways. */
@media(max-width:720px){
  .ctable-wrap::before{display:none}
  .ctable{padding:22px 20px 8px}
  .ctable table,.ctable tbody,.ctable tr,.ctable td{display:block;width:auto}
  .ctable thead{display:none}
  .ctable tbody tr{padding:16px 0 4px;border-top:1px solid var(--line)}
  .ctable tbody tr:first-child{border-top:0;padding-top:0}
  .ctable td{border-top:0;padding:0 0 12px}
  .ctable .f{width:auto;font-family:var(--display);font-size:11px;font-weight:700;
    letter-spacing:.13em;text-transform:uppercase;color:var(--muted);padding-bottom:10px}
  .ctable .u,.ctable .t{width:auto;display:flex;justify-content:space-between;
    align-items:baseline;gap:14px}
  .ctable .u::before,.ctable .t::before{content:attr(data-l);font-family:var(--display);
    font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
    flex:none}
  .ctable .u::before{color:var(--teal)}
  .ctable .t::before{color:var(--muted);opacity:.8}
  .ctable .u{font-size:1.12rem}
}

/* ===========================================================================
   Promotion. The end date is fixed in the markup and the bar removes itself
   when it passes; nothing here resets per visitor.
   =========================================================================== */
.promo{background:var(--maroon);color:#fff}
.promo[hidden]{display:none}
.promo .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;
  padding-top:11px;padding-bottom:11px;font-size:14px}
.promo-tag{font-family:var(--display);font-weight:800;font-size:12px;
  letter-spacing:.12em;text-transform:uppercase;background:rgba(255,255,255,.16);
  border-radius:var(--r-pill);padding:5px 12px;flex:none}
.promo-txt{font-weight:500;color:#FBE9E9}
.promo-clock{margin-left:auto;font-family:var(--display);font-weight:600;
  font-size:13px;letter-spacing:.02em;color:#FBE9E9;
  font-variant-numeric:tabular-nums}
.promo-clock b{color:#fff;font-weight:800;font-size:15px;
  font-variant-numeric:tabular-nums}
.promo-cta{font-family:var(--display);font-weight:700;font-size:12.5px;
  letter-spacing:.09em;text-transform:uppercase;color:#fff;text-decoration:none;
  border-bottom:2px solid rgba(255,255,255,.55);padding-bottom:2px;flex:none}
.promo-cta:hover{border-bottom-color:#fff}
@media(max-width:860px){
  .promo .wrap{justify-content:center;text-align:center;gap:8px 14px}
  .promo-clock{margin-left:0}
  .promo-txt{width:100%;order:3}
}
@media(max-width:700px){
  .promo-txt{display:none}
  .promo .wrap,.promo .pwrap{flex-wrap:nowrap;justify-content:center;gap:12px;
    padding-top:9px;padding-bottom:9px}
  .promo-tag{font-size:10.5px;padding:4px 10px;letter-spacing:.1em}
  .promo-clock{margin-left:0;font-size:12px}
  .promo-clock b{font-size:13.5px}
  .promo-cta{font-size:11.5px;letter-spacing:.07em}
}


/* The struck regular price sits above the promotional one. */
.was{display:block;font-size:.42em;font-weight:600;letter-spacing:0;
  color:var(--muted);text-decoration:line-through;margin-bottom:2px}
.feature-num .was{color:#8FA9BC;font-size:.36em}
[data-regular][hidden]{display:none}

/* The splash sits behind the section head, so the copy over it is darkened a
   step to hold its contrast. */
.par-host .sec-head .lede{color:#43596B}

/* The promotional badge carries the maroon accent so the price cut is the
   thing that reads first. */
.badge-promo{background:var(--maroon);border-color:var(--maroon);color:#fff}

@media(max-width:520px){
  .ends-lbl{display:none}
  .promo .wrap,.promo .pwrap{gap:9px;padding-left:14px;padding-right:14px}
  .promo-tag{font-size:9.5px;padding:3px 8px}
  .promo-clock{font-size:11.5px}
  .promo-clock b{font-size:13px}
  .promo-cta{font-size:10.5px;letter-spacing:.05em}
}

/* ---------------------------------------------------------------------------
   Proof, as a ledger. Full-measure rows rather than a third three-up grid,
   so this section has a silhouette of its own and does not need a rule above
   it to be told apart from its neighbours.
   --------------------------------------------------------------------------- */
.ledger-head{max-width:none;margin-bottom:clamp(30px,3.2vw,44px)}
.ledger-head h2{font-size:clamp(1.9rem,3.6vw,2.9rem);max-width:22ch}
.ledger{border-top:1px solid var(--line)}
.lrow{display:grid;grid-template-columns:auto minmax(210px,24ch) 1fr;
  gap:clamp(18px,3vw,52px);align-items:baseline;
  padding:clamp(22px,2.4vw,30px) 0;border-bottom:1px solid var(--line);
  transition:background-color .3s ease}
.lrow:hover{background:linear-gradient(90deg,rgba(223,247,252,.55),transparent 70%)}
.lr-n{font-family:var(--display);font-style:italic;font-size:12.5px;font-weight:600;
  color:var(--teal);padding-top:4px}
.lrow h3{font-size:1.24rem;margin:0}
.lrow p{color:var(--muted);font-size:15px;margin:0;max-width:62ch}
@media(max-width:820px){
  .lrow{grid-template-columns:auto 1fr;gap:14px 18px}
  .lrow p{grid-column:2}
}

/* 404 and thank-you: one centred column over the ripple ground. */
.nf .wrap,.ty .wrap{position:relative;z-index:1}
.nf-in{max-width:680px}
.nf h1,.ty h1{font-size:clamp(2.3rem,5vw,3.8rem);margin:0 0 18px}
.nf .lede,.ty .lede{margin-bottom:28px;max-width:56ch}
.nf-links{list-style:none;padding:0;margin:34px 0 0;display:flex;flex-wrap:wrap;gap:10px}
.nf-links a{display:inline-block;font-family:var(--display);font-weight:600;font-size:13.5px;
  color:var(--navy);text-decoration:none;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-pill);padding:10px 18px;transition:border-color .2s ease,transform .3s var(--ease-out-soft)}
.nf-links a:hover{border-color:var(--teal);transform:translateY(-2px)}
.ty-next{margin-top:clamp(34px,4vw,52px)}
.ty-actions{margin-top:clamp(28px,3vw,40px)}

/* Lower-half rhythm: cities and FAQ share plain white and the proof ledger
   drops to navy between them, so the run alternates light, dark, light
   instead of stepping through three near-identical pale tints. */
.cities-sec .city{background:var(--mist);border-color:var(--line-2)}
.cities-sec .city:hover{background:#fff}
.sec-navy .ledger{border-top-color:rgba(255,255,255,.14)}
.sec-navy .lrow{border-bottom-color:rgba(255,255,255,.14)}
.sec-navy .lrow p{color:#A9C4D4}
.sec-navy .lr-n{color:#8FD8EC}
.sec-navy .lrow:hover{background:linear-gradient(90deg,rgba(143,216,236,.10),transparent 70%)}

/* Sale pricing in the comparison table, the price column and the cards. */
.ctable .uv{display:block}
.ctable .uv .was{display:block;font-size:12px;font-weight:600;color:#8A97A3;
  text-decoration:line-through;margin-bottom:1px}
@media(max-width:720px){.ctable .uv{text-align:right}}
.price-promo{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;
  margin:0 0 22px;color:#C6DCE8;font-size:15px}
.price-promo b{color:#fff}
.card .from .card-sale b{color:var(--maroon);font-weight:700}
.card .from .card-sale s{color:var(--muted);margin-left:5px}

/* .cities-sec .city is (0,2,0) and was beating .city-all at (0,1,0), leaving
   white text on a mist fill. Restate the navy pill at matching specificity. */
.cities-sec .city-all{background:var(--navy);border-color:var(--navy);color:#fff}
.cities-sec .city-all:hover{background:var(--navy-2);border-color:var(--navy-2)}

/* Systems cards: a border strong enough to hold the card off the mist band
   and the splash behind it. The --line token is too close to the ground. */
.card{border-color:rgba(28,54,81,.18)}
.card:hover{border-color:rgba(28,54,81,.30)}

/* ---------------------------------------------------------------------------
   Google reviews. Live from the Places API, so the section stays hidden until
   real data has rendered. Author photo, name and profile link on every card
   and the Google Maps text credit are required by Google's display policy.
   --------------------------------------------------------------------------- */
.grev[hidden]{display:none}
.grev-head{margin-bottom:clamp(26px,3vw,40px)}
.grev-head h2{font-size:clamp(1.9rem,3.6vw,2.9rem)}
.grev-body{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(20px,3vw,44px);align-items:center}
@media(max-width:860px){.grev-body{grid-template-columns:1fr}}
.grev-sum{text-align:center}
.grev-word{font-family:var(--display);font-weight:800;font-size:1.45rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--navy);min-height:1.2em}
.grev-stars{--p:100%;display:inline-block;letter-spacing:2px;line-height:1;color:transparent;
  background:linear-gradient(90deg,var(--star) var(--p),#D6DEE3 var(--p));
  -webkit-background-clip:text;background-clip:text}
.grev-stars-lg{font-size:1.9rem;margin:8px 0 6px}
.grev-score,.grev-count{font-size:14px;color:var(--muted)}
.grev-score b,.grev-count b{color:var(--ink)}
.grev-attr{display:inline-block;margin-top:12px;font-family:Roboto,Arial,sans-serif;font-weight:400;
  font-size:14px;color:#5E5E5E;text-decoration:none}
.grev-attr[href]:hover{text-decoration:underline}
.grev-rail{position:relative;min-width:0}
.grev-track{list-style:none;margin:0;padding:4px 2px 12px;display:flex;gap:18px;overflow-x:auto;
  scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.grev-track::-webkit-scrollbar{display:none}
.grev-track:focus-visible{outline:3px solid var(--teal);outline-offset:4px;border-radius:var(--r-md)}
.grev-card{flex:0 0 calc((100% - 18px)/2);scroll-snap-align:start;background:var(--paper);
  border:1px solid rgba(28,54,81,.18);border-radius:var(--r-md);padding:20px 22px 18px;
  display:flex;flex-direction:column;gap:10px}
@media(max-width:640px){.grev-card{flex-basis:88%}}
.grev-who{display:flex;align-items:center;gap:12px}
.grev-av{width:40px;height:40px;border-radius:50%;flex:none;object-fit:cover;background:var(--sky);
  display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:700;color:var(--navy)}
.grev-name{font-family:var(--display);font-weight:600;font-size:15px;color:var(--navy);text-decoration:none}
a.grev-name:hover{text-decoration:underline}
.grev-when{font-size:12.5px;color:var(--muted)}
.grev-card .grev-stars{font-size:1rem;letter-spacing:1px}
.grev-text{margin:0;font-size:14.6px;line-height:1.55;color:var(--ink);display:-webkit-box;
  -webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.grev-card.open .grev-text{display:block;-webkit-line-clamp:unset}
.grev-more{align-self:flex-start;background:none;border:0;padding:0;font-size:13px;color:var(--muted);
  text-decoration:underline;cursor:pointer}
.grev-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.grev-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:42px;height:42px;
  border-radius:50%;border:1px solid rgba(28,54,81,.18);background:#fff;color:var(--navy);
  font-size:24px;line-height:1;cursor:pointer;box-shadow:var(--shadow);transition:opacity .2s ease}
.grev-nav.prev{left:-21px}
.grev-nav.next{right:-21px}
.grev-nav[disabled]{opacity:0;pointer-events:none}
@media(max-width:860px){.grev-nav{display:none}}
.grev-nav:focus-visible,.grev-more:focus-visible,.grev-name:focus-visible,.grev-attr:focus-visible{
  outline:3px solid var(--teal);outline-offset:3px}
.grev-cta{margin-top:clamp(28px,3vw,40px);text-align:center}

/* ---------------------------------------------------------------------------
   Services dropdown. Replaces the services landing page as the way into the
   individual service pages. Opens on click (and hover where there is a real
   pointer); hidden panels use visibility so they leave the tab order.
   --------------------------------------------------------------------------- */
.navdd{position:relative;display:flex;align-items:center}
.navdd-btn{display:inline-flex;align-items:center;gap:7px;background:none;border:0;padding:0;cursor:pointer;
  font-family:var(--display);font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--navy)}
.navdd-btn:hover,.navdd.open .navdd-btn{color:var(--teal)}
.navdd-btn:focus-visible{outline:3px solid var(--teal);outline-offset:4px;border-radius:4px}
.navdd-chev{transition:transform .25s var(--ease-out-soft)}
.navdd.open .navdd-chev{transform:rotate(180deg)}
.navdd-menu{position:absolute;top:calc(100% + 20px);left:-16px;z-index:70;min-width:260px;margin:0;padding:6px;
  list-style:none;background:#fff;border:1px solid rgba(28,54,81,.16);border-radius:var(--r-md);
  box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s ease,transform .25s var(--ease-out-soft),visibility 0s linear .25s}
.navdd-menu::before{content:"";position:absolute;left:0;right:0;top:-22px;height:22px}
.navdd.open .navdd-menu{opacity:1;visibility:visible;transform:none;
  transition:opacity .18s ease,transform .25s var(--ease-out-soft)}
@media (hover:hover){
  .navdd:hover .navdd-menu{opacity:1;visibility:visible;transform:none;
    transition:opacity .18s ease,transform .25s var(--ease-out-soft)}
  .navdd:hover .navdd-chev{transform:rotate(180deg)}
}
.nav .navdd-menu a{display:block;padding:11px 14px;border-radius:10px;font-size:14.5px;font-weight:600;
  letter-spacing:0;text-transform:none;color:var(--navy);text-decoration:none;white-space:nowrap;
  transition:background-color .15s ease,color .15s ease}
.nav .navdd-menu a::after{content:none}
.nav .navdd-menu a:hover,.nav .navdd-menu a:focus-visible{background:var(--mist);color:var(--teal);outline:none}
.nav .navdd-menu li+li{border-top:1px solid var(--line-2)}

/* Mobile menu: the services are listed under a label instead of a dropdown. */
.mnav-group{display:flex;flex-direction:column;border-bottom:1px solid var(--line-2);padding-bottom:6px}
.mnav-label{font-family:var(--display);font-weight:600;font-size:15px;color:var(--navy);padding:13px 0 4px}
.mnav .mnav-sub{padding:9px 0 9px 16px;border-bottom:0;font-size:14.5px;font-weight:500;color:var(--teal-deep)}

/* Reviews from embedded data: Local Guide label, excerpt link, and summary
   parts that are hidden when the data does not carry them. The hidden rule
   needs !important because .grev-stars sets its own display. */
.grev-meta{display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-width:0}
.grev-guide{font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--teal-deep)}
.grev-sum [hidden]{display:none!important}
a.grev-more{display:inline-block;margin-top:auto}
a.grev-more:hover{color:var(--navy)}

/* ===========================================================================
   Inner pages. Every content page is rebuilt on the home system: a photo
   hero, content split into alternating bands at each heading, photos set
   beside the copy, and the same closing call to action and local map band.
   =========================================================================== */
.phero{position:relative;overflow:hidden;isolation:isolate}
.phero p.lede{color:#C6DCE8;max-width:62ch;margin:0 0 10px}
.phero.has-img{padding:clamp(70px,8.4vw,128px) 0 clamp(60px,7.2vw,108px)}
.phero-img{position:absolute;inset:0;margin:0;z-index:-2}
.phero-img img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.85) contrast(1.06) brightness(.8)}
.phero.has-img::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(12,27,45,.95) 0%,rgba(12,27,45,.86) 44%,rgba(15,36,58,.5) 100%)}
.phero h1{max-width:22ch}

.ig-intro{max-width:860px;margin:0 0 clamp(34px,4vw,56px)}
.ig-intro p{font-size:clamp(1.1rem,1.7vw,1.3rem);line-height:1.6;color:var(--ink);margin:0 0 .9em}
.ig{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center}
.ig.media{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr)}
.ig.media.flip .ig-media{order:-1}
@media(max-width:900px){.ig.media{grid-template-columns:1fr}.ig.media.flip .ig-media{order:0}}
.ig-body{max-width:760px}
.ig.wide .ig-body{max-width:none}
.ig-body h2{font-size:clamp(1.7rem,3vw,2.45rem);margin:0 0 16px}
.ig-body h3{margin:24px 0 10px}
.ig-body p,.ig-body li{font-size:16.4px;color:var(--ink)}
.ig-body p{margin:0 0 1em}
.ig-body ul{list-style:none;padding:0;margin:0 0 1.2em}
.ig-body ul li{position:relative;padding:11px 0 11px 30px;border-top:1px solid var(--line-2)}
.ig-body ul li:first-child{border-top:0}
.ig-body ul li::before{content:"";position:absolute;left:4px;top:21px;width:14px;height:2px;background:var(--teal)}
.ig-body .callout{margin:22px 0 0}
.sec-mist .callout{background:#fff}
.ig-body .faq{max-width:none;margin-top:8px}

.ig-media{margin:0;position:relative}
.ig-media img{width:100%;height:auto;display:block;border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);border:1px solid rgba(28,54,81,.12)}
.ig-media.plate{display:flex;align-items:flex-end;justify-content:center;aspect-ratio:1/1;
  padding:30px 30px 0;border-radius:var(--r-lg);border:1px solid rgba(28,54,81,.14);
  background:linear-gradient(168deg,var(--mist) 0%,var(--sky) 100%);overflow:hidden}
.sec-mist .ig-media.plate{background:linear-gradient(168deg,#fff 0%,var(--sky) 100%)}
.ig-media.plate img{width:auto;max-width:92%;height:100%;object-fit:contain;border:0;
  border-radius:0;box-shadow:none;filter:drop-shadow(0 18px 26px rgba(28,54,81,.26))}

.tbl-scroll{overflow-x:auto;margin:6px 0 22px}
.ig-body table{width:100%;min-width:560px;border-collapse:separate;border-spacing:0;background:#fff;
  border:1px solid rgba(28,54,81,.16);border-radius:var(--r-md);overflow:hidden;font-size:15px}
.ig-body th{background:var(--navy);color:#fff;text-align:left;font-family:var(--display);font-size:11.5px;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:14px 16px}
.ig-body td{padding:14px 16px;border-top:1px solid var(--line-2);vertical-align:top;color:var(--ink)}
.ig-body td:nth-child(2){font-weight:700;color:var(--maroon)}
.ig-body td:first-child{color:var(--navy);font-weight:600}

.faucet-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:18px 0 6px}
@media(max-width:640px){.faucet-grid{grid-template-columns:repeat(2,1fr)}}
.faucet-grid>div{background:#fff;border:1px solid rgba(28,54,81,.16);border-radius:var(--r-md);
  padding:16px 10px 10px;text-align:center}
.faucet-grid img{width:100%;height:150px;object-fit:contain;display:block;margin:0 auto}
.faucet-grid p{margin:10px 0 0;font-family:var(--display);font-weight:600;font-size:13.5px;color:var(--navy)}

.formwrap{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(28px,4vw,60px);align-items:start}
@media(max-width:900px){.formwrap{grid-template-columns:1fr}}
.benefit{display:grid;grid-template-columns:auto 1fr;gap:14px;padding:16px 0;border-top:1px solid var(--line-2)}
.benefit:first-child{border-top:0;padding-top:0}
.benefit .ic{width:40px;height:40px;border-radius:12px;background:var(--navy);display:flex;align-items:center;justify-content:center}
.benefit h3{margin:0 0 4px;font-size:1.06rem}
.benefit p{margin:0;color:var(--muted);font-size:15px}
.formwrap .callout{margin-top:20px}
.formcard{position:relative;background:#fff;border:1px solid rgba(28,54,81,.16);border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);padding:12px}
.fload{position:absolute;inset:12px;z-index:2;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:14px;text-align:center;padding:24px;background:#F2F8FA;border-radius:8px}
.fload[hidden]{display:none}
.fload.gone{opacity:0;pointer-events:none}
.fload-msg{font-family:var(--display);font-weight:600;font-size:15px;color:var(--navy);max-width:30ch}
.fload.err .fload-msg{color:var(--maroon)}
.fload-msg a{color:var(--maroon);font-weight:700}

.legal-sec .prose{max-width:820px}
.legal-sec .prose ul{padding-left:20px}

/* cap tall photos */
.ig-media:not(.plate) img{max-height:520px;object-fit:cover}

/* Reviews: keep the carousel inside the page width. The cards were widening
   the document to about 3000px. */
.grev{overflow:hidden}
.grev-body>*{min-width:0}
.grev-rail{overflow:hidden;padding:4px 24px}
@media(max-width:860px){.grev-body{grid-template-columns:minmax(0,1fr)}.grev-rail{padding:4px 0}}
.grev-nav.prev{left:0}
.grev-nav.next{right:0}
.grev-badge{display:block;width:170px;height:auto;margin:14px auto 0}

/* Premium-parts watermark: the company mark instead of a drawn hexagon. */
.bg-mark::before{background-image:url("../assets/logo-mark.webp");opacity:.06;filter:grayscale(1)}

/* Inner-page heroes drift like the home hero: page-scroll driven from the
   first pixel, over a taller frame so no edge shows. */
.phero-img{overflow:hidden}
.phero-img img{position:absolute;left:0;top:-12%;height:150%;transform-origin:50% 0;will-change:transform}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:scroll()){
    .phero-img img{animation:heroDrift linear both;animation-timeline:scroll(root block);animation-range:0px 100vh}
  }
}
@media (prefers-reduced-motion:reduce){.phero-img img{top:0;height:100%;transform:none!important}}

/* Short text-only sections that sit together share one band as cards,
   instead of each taking a full band of its own. */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px}
.fact{background:#fff;border:1px solid rgba(28,54,81,.16);border-radius:var(--r-md);
  padding:28px 28px 22px;box-shadow:var(--shadow)}
.sec:not(.sec-mist) .fact{background:var(--mist)}
.fact h2{font-size:clamp(1.25rem,1.8vw,1.45rem);margin:8px 0 10px}
.fact p{font-size:15.4px;color:var(--ink);margin:0 0 .8em}
.fact .callout{margin-top:12px}

/* Wider layout: the column is 1320px, so let headlines use it. Reading
   copy keeps its own caps (ig-body 760px, lede ch limits). */
.phero h1{max-width:28ch}
.hro h1{max-width:22ch}

.localwrap{height:360px;position:relative;background:#E6EEF2}
.localwrap iframe{height:100%}

/* ---------------------------------------------------------------------------
   Gallery. Real installs in a column grid, with a native dialog lightbox.
   --------------------------------------------------------------------------- */
.gal-filters{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 clamp(24px,3vw,36px)}
.gal-filters button{font-family:var(--display);font-weight:600;font-size:13.5px;color:var(--navy);
  background:#fff;border:1px solid rgba(28,54,81,.18);border-radius:var(--r-pill);padding:10px 18px;cursor:pointer}
.gal-filters button[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.gal-filters button:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
.gal-grid{columns:3 300px;column-gap:18px}
.gal-item{break-inside:avoid;margin:0 0 18px;position:relative}
.gal-item[hidden]{display:none}
.gal-btn{display:block;width:100%;padding:0;cursor:zoom-in;border-radius:var(--r-md);overflow:hidden;
  box-shadow:var(--shadow);border:1px solid rgba(28,54,81,.12)}
.gal-btn img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;
  transition:transform .8s var(--ease-out-soft)}
.gal-btn:hover img{transform:scale(1.04)}
.gal-btn:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
.gal-item figcaption{position:absolute;left:10px;bottom:10px;right:10px;pointer-events:none;
  font-family:var(--display);font-weight:600;font-size:13px;color:#fff;
  background:rgba(22,34,46,.72);border-radius:10px;padding:8px 12px}
.gal-dialog{border:0;padding:0;background:transparent;max-width:min(92vw,760px);max-height:92vh;overflow:visible}
.gal-dialog::backdrop{background:rgba(10,20,32,.86)}
.gal-dialog img{display:block;max-width:100%;max-height:82vh;width:auto;height:auto;border-radius:var(--r-md)}
.gal-dialog p{margin:12px 0 0;text-align:center;color:#fff;font-family:var(--display);font-weight:600}
.gal-close{position:absolute;top:-14px;right:-14px;width:42px;height:42px;border-radius:50%;border:0;background:#fff;
  color:var(--navy);font-size:24px;line-height:1;cursor:pointer;box-shadow:var(--shadow)}
.gal-close:focus-visible{outline:3px solid var(--teal);outline-offset:3px}

/* ---------------------------------------------------------------------------
   Free water report. Form beside the promise, then what the report includes,
   proof, and what happens next.
   --------------------------------------------------------------------------- */
.rpt-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:clamp(28px,4vw,64px);align-items:start}
@media(max-width:960px){.rpt-hero{grid-template-columns:1fr}}
.rpt-copy h2{font-size:clamp(1.8rem,3.2vw,2.6rem);margin:0 0 14px}
.rpt-copy .lede{margin:0 0 22px}
.rpt-points{list-style:none;padding:0;margin:0 0 24px;display:grid;gap:12px}
.rpt-points li{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start;font-size:15.6px;color:var(--ink)}
.rpt-points li::before{content:"";width:28px;height:28px;border-radius:50%;
  background:var(--sky) url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M20 6L9 17l-5-5%22 fill=%22none%22 stroke=%22%232C819B%22 stroke-width=%223%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E") center/15px no-repeat}
.rpt-points b{color:var(--navy)}
.rpt-proof{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:16px 18px;background:var(--mist);
  border:1px solid var(--line-2);border-radius:var(--r-md);margin:0 0 8px}
.rpt-proof .stars{color:var(--star);letter-spacing:2px;font-size:18px}
.rpt-proof p{margin:0;font-size:14.4px;color:var(--ink)}
.rpt-proof a{color:var(--navy);font-weight:600}
.formcard iframe{display:block;width:100%;min-height:640px;border:0;border-radius:8px}
.rpt-sample{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,4vw,60px);align-items:center}
@media(max-width:960px){.rpt-sample{grid-template-columns:1fr}}
.rpt-doc{background:#fff;border:1px solid rgba(28,54,81,.16);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);
  padding:26px 26px 22px;position:relative;overflow:hidden}
.rpt-doc-h{display:flex;align-items:center;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--line-2);margin-bottom:6px}
.rpt-doc-h img{width:40px;height:40px}
.rpt-doc-h b{display:block;font-family:var(--display);color:var(--navy);font-size:15px}
.rpt-doc-h span{font-size:12.5px;color:var(--muted)}
.rpt-tag{margin-left:auto;font-family:var(--display);font-size:10px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:#fff;background:var(--navy);border-radius:var(--r-pill);padding:5px 10px}
.rpt-row{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line-2)}
.rpt-row:last-of-type{border-bottom:0}
.rpt-row b{font-family:var(--display);font-size:14.4px;color:var(--navy)}
.rpt-row small{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.rpt-row em{font-style:normal;font-family:var(--display);font-size:12px;font-weight:700;color:var(--teal-deep);
  background:var(--sky);border-radius:var(--r-pill);padding:5px 11px;white-space:nowrap}
.rpt-doc-foot{margin-top:14px;font-size:12.5px;color:var(--muted)}
.rpt-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;counter-reset:rs}
@media(max-width:860px){.rpt-steps{grid-template-columns:1fr}}
.rpt-step{background:#fff;border:1px solid rgba(28,54,81,.16);border-radius:var(--r-md);padding:24px 22px;position:relative}
.rpt-step::before{counter-increment:rs;content:counter(rs,decimal-leading-zero);display:block;font-family:var(--display);
  font-weight:800;font-size:2.2rem;line-height:1;color:var(--teal);margin-bottom:12px}
.rpt-step h3{font-size:1.15rem;margin:0 0 8px}
.rpt-step p{margin:0;font-size:15px;color:var(--muted)}
.rpt-quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media(max-width:860px){.rpt-quotes{grid-template-columns:1fr}}
.rpt-quote{margin:0;background:#fff;border:1px solid rgba(28,54,81,.16);border-radius:var(--r-md);padding:22px}
.rpt-quote .stars{color:var(--star);letter-spacing:2px}
.rpt-quote p{margin:10px 0 14px;font-size:15px;color:var(--ink)}
.rpt-quote cite{font-style:normal;font-family:var(--display);font-weight:600;font-size:14px;color:var(--navy)}
.rpt-quote cite span{display:block;font-family:var(--body);font-weight:400;font-size:12.5px;color:var(--muted)}

/* ===========================================================================
   Visual upgrades v3: curved joins, glass plate, count-up pricing, card
   sheen and tilt, moving gradient headlines, grain on dark bands, photo
   reveal, icon treatment, button shine. All motion stops under reduced motion.
   =========================================================================== */

/* 1. Wave edges. Two dark bands only, each a true wave top and bottom,
   out of phase with each other so neither reads as a repeat. */
.wave-top{position:relative;z-index:2;margin:-64px 0;
  padding-top:calc(var(--sec-pad) + 64px);padding-bottom:calc(var(--sec-pad) + 64px)}
.wave-top.rule-top::before{display:none}
.wave-top{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60 V32 C180 6 360 6 540 30 S900 56 1080 30 S1320 6 1440 20 V60Z'/%3E%3C/svg%3E") top/100% 65px no-repeat,linear-gradient(#000,#000) 0 64px/100% calc(100% - 128px) no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 0 V28 C200 54 400 54 600 30 S980 6 1180 28 S1380 44 1440 38 V0Z'/%3E%3C/svg%3E") bottom/100% 65px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60 V32 C180 6 360 6 540 30 S900 56 1080 30 S1320 6 1440 20 V60Z'/%3E%3C/svg%3E") top/100% 65px no-repeat,linear-gradient(#000,#000) 0 64px/100% calc(100% - 128px) no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 0 V28 C200 54 400 54 600 30 S980 6 1180 28 S1380 44 1440 38 V0Z'/%3E%3C/svg%3E") bottom/100% 65px no-repeat}
.wave-top.wave-sweep{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60 V22 C160 46 340 52 520 30 S880 4 1060 26 S1320 50 1440 34 V60Z'/%3E%3C/svg%3E") top/100% 65px no-repeat,linear-gradient(#000,#000) 0 64px/100% calc(100% - 128px) no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 0 V36 C220 12 420 8 620 30 S1000 54 1200 32 S1400 14 1440 20 V0Z'/%3E%3C/svg%3E") bottom/100% 65px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60 V22 C160 46 340 52 520 30 S880 4 1060 26 S1320 50 1440 34 V60Z'/%3E%3C/svg%3E") top/100% 65px no-repeat,linear-gradient(#000,#000) 0 64px/100% calc(100% - 128px) no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 0 V36 C220 12 420 8 620 30 S1000 54 1200 32 S1400 14 1440 20 V0Z'/%3E%3C/svg%3E") bottom/100% 65px no-repeat}

/* 2. Glass offer plate over the hero photo. */
.hro .est,.hro .est-mini{background:rgba(255,255,255,.84);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 30px 70px -28px rgba(0,0,0,.6),0 0 0 1px rgba(143,216,236,.12),
    0 0 60px -10px rgba(44,129,155,.35),inset 0 1px 0 rgba(255,255,255,.9)}
.hro .est-head{background:rgba(242,248,250,.55);border-bottom-color:rgba(28,54,81,.08)}
.hro .est-row{border-bottom-color:rgba(28,54,81,.08)}
.hro .est-note{background:rgba(242,248,250,.7)}

/* 3. The regular price is struck by a drawn line once the count lands. */
.js .est-price .was,.js .big .was{display:table;position:relative;text-decoration:none}
.js .est-price .was::after,.js .big .was::after{content:"";position:absolute;left:-2px;right:-2px;
  top:52%;height:2px;background:var(--maroon);border-radius:2px;transform:scaleX(0);
  transform-origin:left;transition:transform .7s var(--ease-out-soft)}
.js .big .was::after{background:#E08A8A}
.js .was.struck::after{transform:scaleX(1)}
.est-price,.big{font-variant-numeric:tabular-nums}

/* 4. Cards: a sheen crosses on hover, the edge turns teal, and the card leans
   toward the pointer. */
.card,.grev-card,.prob,.fact,.rpt-quote,.rpt-step{position:relative;overflow:hidden;
  transition:transform .55s var(--ease-out-soft),box-shadow .55s var(--ease-out-soft),border-color .3s ease}
.card::before,.grev-card::after,.prob::before,.fact::before,.rpt-quote::before{content:"";position:absolute;
  inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(112deg,transparent 36%,rgba(255,255,255,.5) 50%,transparent 64%);
  transform:translateX(-130%);transition:transform 1s var(--ease-out-soft)}
@media (hover:hover){
  .card:hover::before,.grev-card:hover::after,.prob:hover::before,.fact:hover::before,.rpt-quote:hover::before{
    transform:translateX(130%)}
  html :is(.card,.grev-card,.prob,.fact,.rpt-quote,.rpt-step):hover,
  .js [data-anim].done:is(.card,.prob,.fact,.rpt-quote,.rpt-step):hover{
    border-color:var(--teal);box-shadow:var(--shadow-lg),0 0 0 1px rgba(44,129,155,.25);
    transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-6px)}
}

/* 5. The second headline line carries a slow teal gradient. */
.t2{background:linear-gradient(100deg,var(--teal) 0%,#4FB3CF 30%,var(--teal-deep) 60%,var(--teal) 100%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:t2Flow 9s ease-in-out infinite alternate}
.sec-deep .t2,.sec-navy .t2,.hro .t2,.phero .t2{
  background-image:linear-gradient(100deg,#8FD8EC 0%,#DFF7FC 32%,#5FC3DE 62%,#8FD8EC 100%)}
@keyframes t2Flow{from{background-position:0% 50%}to{background-position:100% 50%}}

/* 6. Grain and a slow drifting glow on the dark bands. */
.sec-deep,.sec-navy{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .11 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(34rem 26rem at 30% 30%,rgba(44,129,155,.30),transparent 66%),
    radial-gradient(30rem 24rem at 70% 70%,rgba(140,47,47,.26),transparent 66%);
  background-size:180px 180px,220% 220%,220% 220%;
  background-position:0 0,0% 0%,100% 100%;
  animation:glowDrift 28s ease-in-out infinite alternate}
@keyframes glowDrift{
  from{background-position:0 0,0% 0%,100% 100%}
  to{background-position:0 0,90% 70%,10% 20%}}

/* 7. Photos uncover on a rounded mask and settle from a slight zoom. */
.js .rv{clip-path:inset(12% 12% 12% 12% round var(--r-lg));scale:1.14;opacity:0;
  transition:clip-path 1.25s var(--ease-out-soft),scale 1.7s var(--ease-out-soft),opacity .7s ease}
.js .rv.rv-in{clip-path:inset(0 0 0 0 round var(--r-lg));scale:1;opacity:1}

/* 8. Icons: teal line work in a sky disc, drawn on as the card arrives. */
.prob-top svg{width:22px;height:22px;padding:13px;box-sizing:content-box;border-radius:50%;
  background:var(--sky);box-shadow:inset 0 0 0 1px rgba(44,129,155,.18)}
.prob-top svg :is(path,circle){stroke:var(--teal-deep);stroke-width:1.8}
.benefit .ic{border-radius:50%;background:var(--sky);box-shadow:inset 0 0 0 1px rgba(44,129,155,.18)}
.benefit .ic svg :is(path,circle,rect,polyline){stroke:var(--teal-deep)}
.js [data-anim] .prob-top svg :is(path,circle){stroke-dasharray:90;stroke-dashoffset:90}
.js [data-anim].in .prob-top svg :is(path,circle){animation:iconDraw 1.5s .35s var(--ease-out-soft) forwards}
.js .hro-trust svg path,.js .est-row svg path{stroke-dasharray:30;stroke-dashoffset:30;
  animation:iconDraw .8s var(--ease-out-soft) forwards}
.js .hro-trust span:nth-child(1) path{animation-delay:.7s}
.js .hro-trust span:nth-child(2) path{animation-delay:.85s}
.js .hro-trust span:nth-child(3) path{animation-delay:1s}
.js .hro-trust span:nth-child(4) path{animation-delay:1.15s}
.js .est-row:nth-child(1) path{animation-delay:.9s}
.js .est-row:nth-child(2) path{animation-delay:1.05s}
.js .est-row:nth-child(3) path{animation-delay:1.2s}
.js .est-row:nth-child(4) path{animation-delay:1.35s}
@keyframes iconDraw{to{stroke-dashoffset:0}}

/* 9. The maroon button catches a light sweep every few seconds; the hero
   CTA leans toward the cursor. */
.btn-sun{position:relative;overflow:hidden;isolation:isolate}
.btn-sun::after{content:"";position:absolute;top:-10%;bottom:-10%;left:-70%;width:45%;z-index:-1;
  pointer-events:none;transform:skewX(-22deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent);
  animation:btnShine 5.5s ease-in-out infinite}
@keyframes btnShine{0%,68%{left:-70%}100%{left:135%}}
.mag{transition:translate .45s var(--ease-out-soft),transform var(--dur-hover) var(--ease-out-soft),
  background-color .3s ease,border-color .3s ease,box-shadow var(--dur-hover) ease}

@media (prefers-reduced-motion:reduce){
  .t2,.sec-deep,.sec-navy,.btn-sun::after{animation:none!important}
  .btn-sun::after{display:none}
  .js .rv{clip-path:none!important;scale:1!important;opacity:1!important}
  .js svg :is(path,circle){animation:none!important;stroke-dashoffset:0!important}
  .js .was::after{transition:none}
  :is(.card,.grev-card,.prob,.fact,.rpt-quote,.rpt-step):hover{transform:none!important}
}

/* Mobile action dock. A floating rounded bar that stops short of the right
   edge, leaving a lane for the chat launcher so nothing sits over the CTA. */
@media(max-width:768px){
  .mcall{left:10px;right:84px;bottom:12px;gap:6px;padding:5px;border-radius:var(--r-pill);
    background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    border:1px solid rgba(28,54,81,.12);box-shadow:0 14px 34px -12px rgba(16,34,54,.45)}
  .mcall a{border-radius:var(--r-pill);padding:13px 6px;font-size:14px;white-space:nowrap}
  .mcall .mc-call{background:var(--mist);color:var(--navy)}
  .mcall .mc-cta{background:var(--maroon);color:#fff;flex:1.25}
  body{padding-bottom:82px}
}
@media(max-width:380px){.mcall a{font-size:13px}}

/* Mobile action bar retired: the chat launcher owns the corner, and the
   header and page CTAs already carry call and report. */
.mcall{display:none!important}
@media(max-width:768px){body{padding-bottom:0}}

/* ===========================================================================
   Visual upgrades v4: headline reveal, ripples behind the offer, scroll
   progress, sliding numerals, self-drawing timeline, page transitions,
   review marquee, gallery captions and lightbox, brand selection and
   scrollbar. All motion stops under reduced motion.
   =========================================================================== */

/* Headline rises out of a mask on arrival. */
@keyframes h1Rise{
  from{clip-path:inset(0 0 100% 0);transform:translate3d(0,44px,0);opacity:0}
  to{clip-path:inset(-10% -10% -30% -10%);transform:none;opacity:1}}
.js .hro h1{animation:h1Rise 1.15s var(--ease-out-soft) .08s both}
.js .phero h1[data-anim].in{animation-name:h1Rise;animation-duration:1.15s}

/* Scroll progress under the header. */
.sprog{position:absolute;left:0;right:0;bottom:-1px;height:3px;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,var(--teal),#8FD8EC);transform-origin:left;transform:scaleX(0)}
@keyframes sprog{to{transform:scaleX(1)}}

/* The oversized section numeral slides across as its band scrolls by, and the
   timeline draws itself node by node. */
@keyframes numSlide{from{transform:translateX(14%)}to{transform:translateX(-20%)}}
.js .tl-line{transform:scaleX(0);transform-origin:left;transition:transform 1.3s var(--ease-out-soft) .55s}
.js .tl-item.in .tl-line{transform:scaleX(1)}
.js .tl-item.in .tl-node::before{animation:nodePulse 1.6s ease-out .3s 2}
@keyframes nodePulse{from{box-shadow:0 0 0 0 rgba(143,216,236,.55)}to{box-shadow:0 0 0 14px rgba(143,216,236,0)}}

@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:scroll()){
    .sprog{animation:sprog linear both;animation-timeline:scroll(root block)}
    .bg-numeral{view-timeline-name:--numband;view-timeline-axis:block}
    .bg-numeral::before{animation:numSlide linear both;animation-timeline:--numband;
      animation-range:cover 0% cover 100%}
  }
}

/* Page transitions between pages of the site. */
@view-transition{navigation:auto}
.stickhead{view-transition-name:mwp-head}
::view-transition-old(root){animation:vtOut .22s ease both}
::view-transition-new(root){animation:vtIn .5s var(--ease-out-soft) both}
@keyframes vtOut{to{opacity:0;transform:translateY(-10px)}}
@keyframes vtIn{from{opacity:0;transform:translateY(16px)}}

/* Review marquee under the hero: short lines from the real Google reviews. */
.rmq{position:relative;background:var(--ink);overflow:hidden;padding:15px 0;
}
.rmq::before,.rmq::after{content:"";position:absolute;top:0;bottom:0;width:9%;z-index:1;pointer-events:none}
.rmq::before{left:0;background:linear-gradient(90deg,var(--ink),transparent)}
.rmq::after{right:0;background:linear-gradient(270deg,var(--ink),transparent)}
.rmq[hidden]{display:none}
.rmq-track{display:flex;gap:52px;width:max-content;animation:rmq 70s linear infinite}
.rmq:hover .rmq-track{animation-play-state:paused}
.rmq-item{display:flex;align-items:center;gap:12px;white-space:nowrap;font-size:14.5px;color:#C6DCE8}
.rmq-item .s{color:var(--star);letter-spacing:1.5px;font-size:13px}
.rmq-item b{font-family:var(--display);font-weight:600;color:#fff}
@keyframes rmq{to{transform:translateX(-50%)}}

/* Gallery: captions surface on hover, the lightbox zooms in. */
@media (hover:hover){
  .gal-item figcaption{opacity:0;transform:translateY(10px);
    transition:opacity .35s ease,transform .45s var(--ease-out-soft)}
  .gal-item:hover figcaption,.gal-item:focus-within figcaption{opacity:1;transform:none}
}
.gal-dialog[open] img{animation:galZoom .5s var(--ease-out-soft)}
.gal-dialog[open]::backdrop{animation:galFade .35s ease}
@keyframes galZoom{from{opacity:0;transform:scale(.86)}}
@keyframes galFade{from{opacity:0}}

/* Brand details: selection, scrollbar, form controls. */
::selection{background:#8FD8EC;color:var(--ink)}
html{scrollbar-color:var(--teal) var(--mist);accent-color:var(--teal)}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--mist)}
::-webkit-scrollbar-thumb{background:var(--teal);border-radius:999px;border:3px solid var(--mist)}
::-webkit-scrollbar-thumb:hover{background:var(--teal-deep)}

@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  .js .hro h1,.js .phero h1[data-anim].in{animation:none!important}
  .js .tl-line{transform:none;transition:none}
  .js .tl-item.in .tl-node::before{animation:none}
  .rmq-track{animation:none}
  .rmq{overflow-x:auto}
  .gal-dialog[open] img,.gal-dialog[open]::backdrop{animation:none}
}

/* Mobile spacing. Grid columns may shrink below their content, long buttons
   wrap instead of widening the page, and the hero and plates tighten up. */
@media(max-width:900px){
  .hro-in{grid-template-columns:minmax(0,1fr)}
  .hro-in>*{min-width:0}
}
@media(max-width:560px){
  html,body{overflow-x:clip}
  .btn{white-space:normal;text-align:center;line-height:1.3}
  .btn-lg{padding:16px 24px;letter-spacing:.07em}
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .btn{width:100%}
  .hro-in{padding-top:30px;padding-bottom:36px;gap:28px}
  .hro-trust{gap:8px 18px}
  .est-head{padding:16px 18px 14px;flex-wrap:wrap}
  .est-body{padding:12px 18px 18px}
  .est-mini{padding:15px 18px 13px}
  .est-mini .mini-top{flex-wrap:wrap}
  .est-price{font-size:2rem}
  .est-row{font-size:14px}
  .wrap{padding-left:18px;padding-right:18px}
}

/* Wave edges on phones: a shallower band so the curve reads as a wave, not
   a deep scoop, at narrow widths. */
@media(max-width:700px){
  .wave-top{margin:-26px 0;padding-top:calc(var(--sec-pad) + 26px);padding-bottom:calc(var(--sec-pad) + 26px);
    -webkit-mask-size:100% 27px,100% calc(100% - 52px),100% 27px;mask-size:100% 27px,100% calc(100% - 52px),100% 27px;
    -webkit-mask-position:top,0 26px,bottom;mask-position:top,0 26px,bottom}
}

/* Mobile audit: legibility floor of 12px, and tap targets of at least 44px
   for the links people actually thumb (promo, crumbs, footer, contact). */
@media(max-width:560px){
  .eyebrow{font-size:12px;letter-spacing:.16em}
  .promo-tag{font-size:11px}
  .promo-clock{font-size:12px}
  .promo-cta{font-size:12px;padding:12px 0 10px;margin:-8px 0}
  .ig-body th,.ctable th{font-size:12px}
  .crumbs a{display:inline-block;padding:14px 4px;margin:-14px -4px}
  .ft a{padding:11px 0;min-height:44px}
  .fc-v{padding:6px 0}
  .mark{min-height:44px}
}

/* Mobile audit, round two. */
.divider{display:none}
h1,h2,h3,.close-cta h2{text-wrap:balance}
@media(max-width:560px){
  .util .wrap{flex-wrap:nowrap;justify-content:space-between;font-size:11.5px;min-height:32px;padding-top:6px;padding-bottom:6px}
  .util .wrap>*:last-child{display:none}
  .bg-numeral::before{display:none}
  .tl-n{margin-bottom:4px}
  .tl-node{margin-bottom:10px}
  .fgrid{grid-template-columns:1fr 1fr;gap:26px 18px}
  .fgrid>*:first-child{grid-column:1/-1}
  .ft a{font-size:14.2px}
  .ft h3{font-size:1.02rem}
  .fc-v.sm{font-size:13.5px;overflow-wrap:normal;word-break:break-all}
  .or-call a{display:inline-block;padding:12px 2px;margin:-12px 0}
  .grev-sum{margin-bottom:6px}
  .grev-badge{margin-top:8px}
  .sec-head{margin-bottom:22px}
}

/* Content tables restack on phones: each row becomes a card and every value
   carries its column label, so nothing scrolls sideways. */
@media(max-width:640px){
  .tbl-scroll{overflow:visible}
  .ig-body table{min-width:0;border:0;background:transparent;border-radius:0;overflow:visible}
  .ig-body table thead{display:none}
  .ig-body table,.ig-body tbody,.ig-body tr,.ig-body td{display:block;width:auto}
  .ig-body tr{background:#fff;border:1px solid rgba(28,54,81,.16);border-radius:var(--r-md);
    padding:14px 16px 6px;margin:0 0 12px}
  .ig-body td{border-top:0;padding:0 0 10px}
  .ig-body td:first-child{font-family:var(--display);font-size:15px;padding-bottom:8px}
  .ig-body td[data-l]:not(:first-child)::before{content:attr(data-l);display:block;font-family:var(--display);
    font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
}
@media(max-width:560px){.fc-v.sm{word-break:normal;overflow-wrap:normal;font-size:14px}}


/* ---------------------------------------------------------------------------
   Paid-traffic landing page. One goal: the form. No navigation out, the form
   sits in the hero, and a call bar follows on phones.
   --------------------------------------------------------------------------- */
.lp-head .wrap{gap:16px}
.lp-head .hdr-cta{margin-left:auto}
.lp-hero .hro-in{grid-template-columns:1.02fr .98fr;align-items:start;
  grid-template-areas:"copy form" "proof form";grid-template-rows:auto 1fr;
  row-gap:clamp(18px,2vw,26px);
  padding-top:clamp(28px,3vw,48px);padding-bottom:clamp(36px,4vw,62px)}
.lp-hero .hro-copy{grid-area:copy}
.lp-hero .lp-formwrap{grid-area:form}
.lp-hero .lp-proof{grid-area:proof;align-self:start}
.lp-hero h1{font-size:clamp(1.95rem,3.5vw,3rem);max-width:18ch}
.lp-hero .lede{margin-bottom:20px}
.lp-points{list-style:none;padding:0;margin:0 0 20px;display:grid;gap:11px}
.lp-points li{display:grid;grid-template-columns:20px 1fr;gap:11px;align-items:start;
  font-size:15px;color:#C6DCE8}
.lp-points b{color:#fff;font-weight:600}
.lp-points svg{margin-top:3px}
.lp-formwrap{background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(18px) saturate(1.3);
  backdrop-filter:blur(18px) saturate(1.3);border:1px solid rgba(255,255,255,.55);
  border-radius:var(--r-lg);padding:20px 20px 8px;
  box-shadow:0 30px 70px -28px rgba(0,0,0,.6),0 0 60px -10px rgba(44,129,155,.35)}
.lp-formtop{text-align:center;margin-bottom:12px}
.lp-formtop h2{font-size:1.5rem;margin:10px 0 6px}
.lp-formtop p{font-size:14px;color:var(--muted);margin:0}
.lp-formwrap .formcard{border:0;box-shadow:none;padding:0;background:transparent}
.lp-formwrap .fload{inset:0}
@media(max-width:900px){
  /* headline first, then the form, then the proof points */
  .lp-hero .hro-in{grid-template-columns:minmax(0,1fr);
    grid-template-areas:"copy" "form" "proof"}
  .lp-hero h1{max-width:none}
  .lp-hero .lede{margin-bottom:4px}
}
.lp-prices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
@media(max-width:760px){.lp-prices{grid-template-columns:1fr}}
.lp-price{background:#fff;border:1px solid rgba(28,54,81,.16);border-top:3px solid var(--maroon);
  border-radius:var(--r-lg);padding:24px 26px 18px;box-shadow:var(--shadow)}
.lp-price .est-price{margin:6px 0 14px;font-size:2rem}
.lp-price .est-price small{display:block;font-size:.42em;font-weight:600;color:var(--muted);
  letter-spacing:0;margin-top:4px}
.lp-note{max-width:70ch;margin:22px auto 0;text-align:center;font-size:14.6px;color:var(--muted)}
.lp-cta-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px;
  margin-top:clamp(22px,2.6vw,32px)}
.lp-or{font-family:var(--display);font-weight:700;font-size:13.5px;color:var(--navy)}
.lp-or a{color:var(--maroon);text-decoration:none}
.lp-or a:hover{text-decoration:underline}
.lp-foot{background:var(--ink);color:#9FBCCC;padding:26px 0 30px;text-align:center}
.lp-foot p{margin:0 0 8px;font-size:14px}
.lp-foot a{color:#C6DCE8}
.lp-foot-legal{font-size:12.5px;color:#7F98AA}
.lpcall{display:none}
@media(max-width:768px){
  .lpcall{display:flex;position:fixed;left:10px;right:10px;bottom:12px;z-index:60;gap:6px;padding:5px;
    border-radius:var(--r-pill);background:rgba(255,255,255,.94);
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    border:1px solid rgba(28,54,81,.12);box-shadow:0 14px 34px -12px rgba(16,34,54,.45)}
  .lpcall a{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:13px 6px;
    border-radius:var(--r-pill);font-family:var(--display);font-weight:600;font-size:14px;
    text-decoration:none;white-space:nowrap}
  .lpcall .mc-call{background:var(--mist);color:var(--navy)}
  .lpcall .mc-cta{background:var(--maroon);color:#fff;flex:1.15}
  body.lp{padding-bottom:78px}
}

/* ---------------------------------------------------------------------------
   Cookie notice. Lived as an inline <style> on every page; moved here so a
   new page cannot ship without it.
   --------------------------------------------------------------------------- */
.mwpck{position:fixed;left:20px;bottom:20px;z-index:900;max-width:420px;background:#fff;
  border:1px solid #DCE7EC;border-radius:18px;padding:18px 20px 16px;
  box-shadow:0 26px 56px -22px rgba(16,34,54,.45);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.mwpck[hidden]{display:none}
.mwpck p{margin:0 0 14px;font-size:14px;line-height:1.55;color:#16222E}
.mwpck p a{color:#8C2F2F;font-weight:600}
.mwpck-b{display:flex;gap:10px;justify-content:flex-end}
.mwpck-b button{font-family:Poppins,system-ui,sans-serif;font-weight:700;font-size:12.5px;
  letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:11px 20px;
  cursor:pointer;border:1.5px solid #DCE7EC;background:#fff;color:#1C3651}
.mwpck-b button[data-ck="granted"]{background:#1C3651;border-color:#1C3651;color:#fff}
.mwpck-b button:focus-visible{outline:3px solid #2C819B;outline-offset:3px}
@media(max-width:768px){.mwpck{left:10px;right:10px;bottom:80px;max-width:none;padding:14px 16px 12px}.mwpck p{font-size:13px;margin-bottom:10px}.mwpck-b button{padding:9px 16px}}