/* Palette note (owner, Nov 12): the dark scheme has been lightened
   three times. The first two notches still read too dark to the
   owner, so this third pass goes MORE aggressive — another FULL
   step up on page/section backgrounds, card/panel surfaces and
   the accent blues, obvious at a glance. Still the same dark theme
   with the same section-to-section variation (the ambient gradient
   keeps its lighter top / deeper middle / mid bottom) and the
   glow, slightly stronger; not a light theme and there is no
   day/night switch. Secondary text (--ink-2/--ink-3) and the
   border lines were lightened in step so text and edges stay
   readable on the brighter surfaces. */
:root{
  --bg:#2b4b84;
  --bg-2:#345a95;
  --panel:#3b64a5;
  --panel-2:#4978ba;
  --line:rgba(185,220,255,.46);
  --line-soft:rgba(185,220,255,.30);
  --ink:#f5f9ff;
  --ink-2:#e4efff;
  --ink-3:#cfe1fb;
  --blue:#7ab2ff;
  --sky:#92e2ff;
  --cyan:#abf6ff;
  --yellow:#ffd23e;
  --yellow-2:#ffb52e;
  --grad-blue:linear-gradient(120deg,#7ab2ff 0%,#92e2ff 55%,#abf6ff 100%);
  --grad-yellow:linear-gradient(120deg,#ffe066 0%,#ffd23e 45%,#ffb52e 100%);
  --glow-blue:0 0 48px rgba(110,180,255,.52);
  --glow-yellow:0 8px 32px rgba(255,190,40,.28);
  --radius:20px;
  --font-d:"Sora",system-ui,sans-serif;
  --font-b:"Manrope",system-ui,sans-serif;
  --font-hand:"Kalam","Segoe Print","Comic Sans MS",cursive;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font-b);font-size:16.5px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{width:calc(100% - 44px);max-width:1960px;margin-inline:auto}
@media (max-width:760px){.wrap{width:calc(100% - 32px)}}
@media (min-width:1680px){.wrap{width:calc(100% - 72px)}}
h1,h2,h3{font-family:var(--font-d);line-height:1.14;margin:0;letter-spacing:-.01em}
p{margin:0}
::selection{background:rgba(255,210,62,.85);color:#131a08}

/* ---------- keyword accents: TWO separate styles, never mixed ----------
   Used sparingly — at most two accents per page, in the hero only.
   1) Underline (.hand-u / .hand-u-blue): a fine-pen hand-drawn line under
      the words — FLAT and straight like a hand-ruled pen stroke, running
      level under the word with only the slightest natural wobble in the
      stroke. No arc, no dip, no curve.
   2) Highlight (.hand-mark / .hand-mark-blue): a square block behind the
      words, like a highlighter stroke — still square and clean overall,
      but the edges carry a slight hand-drawn irregularity, not a perfect
      machine-straight line — in bright yellow / selection blue.
      Highlighted words switch to dark ink so they stay readable. */
.hand-u,.hand-u-blue,.hand-mark,.hand-mark-blue,.hand-mark-red{position:relative;display:inline-block;white-space:nowrap;z-index:0}

/* --- style 1: fine-pen flat hand-drawn underline (no curve) --- */
.hand-u,.hand-u-blue{padding:0 .05em}
.hand-u::after,.hand-u-blue::after{
  content:"";position:absolute;pointer-events:none;
  left:-.07em;right:-.07em;bottom:-.15em;height:.2em;
  background-repeat:no-repeat;background-position:center;background-size:100% 100%;
}
.hand-u::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 14' preserveAspectRatio='none'%3E%3Cpath d='M4 7.2 C 50 6.6, 95 7.4, 145 6.9 C 195 6.5, 250 7.3, 296 6.9' fill='none' stroke='%23ffd23e' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
}
.hand-u-blue::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 14' preserveAspectRatio='none'%3E%3Cpath d='M4 7.2 C 50 6.6, 95 7.4, 145 6.9 C 195 6.5, 250 7.3, 296 6.9' fill='none' stroke='%2357caff' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* --- style 1c: cross-out — ONE marker swipe across the whole phrase —
   the markup keeps "not the easy way." in a SINGLE nowrap span, so the
   phrase can never split across lines, and its ::after paints ONE
   continuous stroke from the first letter to the last: a filled band
   whose top and bottom edges wobble by a hair and whose thickness
   varies slightly along its length, like a real marker pulled straight
   across in one pass — overall dead straight and crisp, never a
   perfect machine rule and never a wave. On very narrow phones the
   phrase shrinks a touch (media rule below) so the single line
   always fits. --- */
.hand-strike{
  position:relative;display:inline-block;white-space:nowrap;z-index:0;
  padding:0 .03em;
}
.hand-strike::after{
  content:"";position:absolute;pointer-events:none;
  left:-.09em;right:-.09em;top:50%;height:.3em;
  transform:translateY(-50%);
  background-repeat:no-repeat;background-position:center;background-size:100% 100%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 18' preserveAspectRatio='none'%3E%3Cpath d='M2 7.4 C 55 6.3, 105 7.9, 160 6.9 C 215 5.9, 262 7.6, 298 6.8 L 298 11.4 C 245 12.5, 195 10.9, 140 12.3 C 88 13.4, 38 11.7, 2 12.1 Z' fill='%23ffd23e'/%3E%3C/svg%3E");
}
/* narrow phones: shrink the struck phrase slightly so its single
   unbroken line (and the one stroke across it) always fits */
@media (max-width:420px){.hero h1 .hand-strike{font-size:.9em}}

/* same flat fine-pen line in a deeper gold where it sits on a light band */
.band-light .hand-u::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 14' preserveAspectRatio='none'%3E%3Cpath d='M4 7.2 C 50 6.6, 95 7.4, 145 6.9 C 195 6.5, 250 7.3, 296 6.9' fill='none' stroke='%23d9930d' stroke-width='4.4' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* --- style 2: square computer-selection highlight --- */
.hand-mark,.hand-mark-blue,.hand-mark-red{padding:0 .1em}
.hand-mark{color:#1a1402}
.hand-mark-blue{color:#fff}
.hand-mark-red{color:#fff}
.hand-mark::before,.hand-mark-blue::before,.hand-mark-red::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  left:-.06em;right:-.06em;top:54%;height:1.18em;transform:translateY(-50%);
  background-repeat:no-repeat;background-position:center;background-size:100% 100%;
}
.hand-mark::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40' preserveAspectRatio='none'%3E%3Cpath d='M1.6 4.2 C 30 2.2, 68 5, 98.4 3 L 97.4 35.6 C 64 38.4, 30 34.8, 2.2 37.4 Z' fill='%23ffe81f'/%3E%3C/svg%3E")}
.hand-mark-blue::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40' preserveAspectRatio='none'%3E%3Cpath d='M1.6 4.2 C 30 2.2, 68 5, 98.4 3 L 97.4 35.6 C 64 38.4, 30 34.8, 2.2 37.4 Z' fill='%233d86ff'/%3E%3C/svg%3E")}
.hand-mark-red::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40' preserveAspectRatio='none'%3E%3Cpath d='M1.6 4.2 C 30 2.2, 68 5, 98.4 3 L 97.4 35.6 C 64 38.4, 30 34.8, 2.2 37.4 Z' fill='%23ff2e35'/%3E%3C/svg%3E")}
/* hero phone line: blue 24/7 + logo-red emergency highlights — desktop only */
.hero-phone-note .hand-mark-blue,.hero-phone-note .hand-mark-red{color:#fff}
@media (max-width:1019px){
  .hero-phone-note .hand-mark-blue,.hero-phone-note .hand-mark-red{color:inherit;white-space:normal}
  .hero-phone-note .hand-mark-blue::before,.hero-phone-note .hand-mark-red::before{display:none}
}

/* ---------- ambient glow background ---------- */
.ambient{position:fixed;inset:0;z-index:-2;background:
  radial-gradient(1000px 560px at 85% -5%, rgba(110,180,255,.48), transparent 62%),
  radial-gradient(820px 520px at -10% 22%, rgba(125,222,255,.34), transparent 62%),
  radial-gradient(760px 540px at 50% 115%, rgba(255,190,40,.10), transparent 62%),
  radial-gradient(900px 600px at 50% 45%, rgba(105,165,245,.28), transparent 70%),
  linear-gradient(180deg,#3e67a7 0%,#2b4b84 42%,#345a95 100%);
}
.ambient::after{content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(150,190,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(150,190,255,.06) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 90% 55% at 50% 0%,#000 30%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 90% 55% at 50% 0%,#000 30%,transparent 75%);
}

/* ---------- header ---------- */
header{
  position:relative;z-index:60;
  background:rgba(44,76,130,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  box-shadow:0 10px 34px rgba(2,8,20,.28);
}
.header-in{display:flex;align-items:center;gap:18px;padding:12px 0}
.brand{display:flex;align-items:center;text-decoration:none;min-width:0;flex:none}
.brand img{height:42px;width:auto;filter:drop-shadow(0 2px 10px rgba(61,134,255,.35))}
nav.main{display:none;gap:26px;margin-left:auto}
nav.main a{color:var(--ink-2);text-decoration:none;font-weight:600;font-size:15px}
nav.main a:hover{color:#fff}
.header-cta{display:flex;align-items:center;gap:10px;margin-left:auto}
.phone-link{display:none;align-items:center;gap:9px;text-decoration:none;font-family:var(--font-d);font-weight:700;font-size:18px}
.phone-link .p-ico{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:rgba(255,210,62,.12);border:1px solid rgba(255,210,62,.35);color:var(--yellow)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--font-d);font-weight:700;text-decoration:none;border:0;cursor:pointer;
  border-radius:14px;padding:13px 22px;font-size:15.5px;line-height:1;
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn:active{transform:scale(.98)}
.btn-yellow{background:var(--grad-yellow);color:#1c1503;box-shadow:var(--glow-yellow)}
.btn-yellow:hover{filter:brightness(1.06)}
.btn-blue{background:var(--grad-blue);color:#fff;box-shadow:var(--glow-blue)}
.btn-blue:hover{filter:brightness(1.08)}
.btn-ghost{background:rgba(120,170,255,.08);color:var(--ink);border:1px solid var(--line)}
.btn-sm{padding:11px 18px;font-size:14.5px;border-radius:12px}

/* ---------- hero ---------- */
.hero{position:relative;padding:34px 0 24px}
.hero-grid{display:grid;gap:40px}
.hero-copy{display:flex;flex-direction:column;align-items:flex-start}
.hero-copy .rating-strip{order:5;width:100%}
.hero-copy .hero-phone-note{order:6}
.hero-copy .trust-row{order:7}
.hero-photo{
  position:absolute;inset:0;z-index:-1;overflow:hidden;
  mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 98%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 98%);
}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center 46%;opacity:.38;filter:saturate(1.05)}
.hero-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(25,50,94,.85) 20%,rgba(25,50,94,.45) 60%,rgba(25,50,94,.16)),linear-gradient(0deg,var(--bg),transparent 45%)}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#8fd8ff;
  border:1px solid var(--line);background:rgba(87,202,255,.13);padding:7px 14px;border-radius:999px;
}
.hero-eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--yellow);box-shadow:0 0 10px var(--yellow)}
.hero h1{font-size:clamp(36px,4.6vw,68px);font-weight:800;margin:18px 0 14px;max-width:14em}
.hero h1 .hl-blue{background:var(--grad-blue);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 18px rgba(87,202,255,.35))}
.hero h1 .hl-yellow{color:var(--yellow);text-shadow:0 0 26px rgba(255,200,50,.35)}
.hero h1 .hand-script{font-family:var(--font-hand);font-weight:700;font-size:1.04em;letter-spacing:.005em}
.hero-sub{color:var(--ink-2);font-size:16.5px;max-width:38em}
@media (min-width:760px){.hero-sub{font-size:18px}}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin:20px 0 6px}
@media (min-width:760px){.hero-ctas{margin:28px 0 8px}}
.hero-ctas .btn{padding:16px 26px;font-size:16.5px;border-radius:16px}
.hero-phone-note{color:var(--ink-3);font-size:14px;margin-top:10px}
.hero-phone-note strong{color:var(--ink-2)}
.trust-row{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:26px;color:var(--ink-2);font-size:14.5px;font-weight:600}
.trust-row span{display:inline-flex;align-items:center;gap:8px}
.trust-row svg{color:var(--yellow);flex:none}

/* rating strip */
.rating-strip{
  margin-top:20px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;
  background:linear-gradient(120deg,rgba(56,92,152,.94),rgba(42,70,120,.88));
  border:1px solid var(--line);border-radius:var(--radius);padding:16px 20px;
  box-shadow:0 18px 50px rgba(0,0,0,.32), inset 0 1px 0 rgba(180,215,255,.2);
}
.gword{font-family:var(--font-d);font-weight:700;font-size:21px;letter-spacing:-.02em}
.gword .g1{color:#57caff}.gword .g2{color:#ff6b5e}.gword .g3{color:#ffd23e}.gword .g4{color:#57caff}.gword .g5{color:#4ade80}.gword .g6{color:#ff6b5e}
.stars{display:inline-flex;gap:2px;color:var(--yellow);filter:drop-shadow(0 0 6px rgba(255,200,50,.45))}
.stars svg{width:19px;height:19px}
.rating-strip .r-text{font-weight:700}
.rating-strip .r-text small{display:block;font-weight:600;color:var(--ink-3);font-size:13px}
.rating-strip a{margin-left:auto;font-weight:700;color:var(--sky);text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.rating-strip a:hover{text-decoration:underline}

/* quote form card */
.quote-card{
  background:linear-gradient(165deg,rgba(88,128,192,.97),rgba(60,92,148,.97) 58%,rgba(68,102,160,.97));
  border:1px solid rgba(140,195,255,.45);border-radius:24px;padding:26px;
  box-shadow:0 30px 70px rgba(0,0,0,.38),0 0 64px rgba(86,164,255,.22), inset 0 1px 0 rgba(190,220,255,.22);
}
.quote-card h2{font-size:23px;margin-bottom:4px}
.quote-card .qc-sub{color:#c9dbf5;font-size:14.5px;margin-bottom:18px}
.field{margin-bottom:12px}
.field label{display:block;font-size:13px;font-weight:700;color:#dce9ff;margin-bottom:6px;letter-spacing:.02em}
.field input,.field select,.field textarea{
  width:100%;background:rgba(235,244,255,.10);border:1px solid rgba(160,200,255,.38);border-radius:12px;
  color:var(--ink);font-family:var(--font-b);font-size:16px;padding:12px 14px;outline:none;
  box-shadow:inset 0 1px 0 rgba(200,225,255,.08);
}
.field input::placeholder,.field textarea::placeholder{color:#a9c2e4}
.field select option{color:#10203a;background:#eaf2ff}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--sky);box-shadow:0 0 0 3px rgba(87,202,255,.18)}
.field textarea{resize:vertical;min-height:64px}
/* optional file upload (quote forms) — the native input stays fully
   visible and tappable; only its file-selector button is styled */
.up-field{position:relative}
.up-box{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;border:1.5px dashed rgba(160,200,255,.45);border-radius:12px;padding:12px 14px;background:rgba(235,244,255,.05)}
.field input.up-input{position:static;flex:0 1 auto;width:auto;max-width:100%;min-height:44px;padding:6px 8px;border:0;background:transparent;box-shadow:none;color:#a9bedd;font-size:13.5px;opacity:1;cursor:pointer}
.field input.up-input::file-selector-button{font-family:var(--font-b);font-weight:700;font-size:14px;color:#dce9ff;background:rgba(87,202,255,.16);border:1px solid rgba(140,195,255,.5);border-radius:10px;padding:10px 15px;margin-right:10px;cursor:pointer}
.field input.up-input:focus-visible{outline:2px solid var(--sky);outline-offset:2px;border-radius:10px}
.up-hint{color:#8ea6c9;font-size:13px;line-height:1.45;flex:1 1 160px}
.up-list{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:7px}
.up-list:empty{display:none}
.up-item{display:flex;align-items:center;gap:10px;background:rgba(235,244,255,.08);border:1px solid rgba(160,200,255,.3);border-radius:10px;padding:7px 7px 7px 12px;font-size:13.5px}
.up-item .up-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;color:#eaf2ff}
.up-item .up-size{color:#8ea6c9;flex:none;font-size:12.5px}
.up-item .up-x{flex:none;width:28px;height:28px;border-radius:8px;border:1px solid rgba(160,200,255,.35);background:rgba(120,170,255,.1);color:#fff;cursor:pointer;font-size:16px;line-height:1;display:grid;place-items:center;padding:0}
.up-item .up-x:hover{background:rgba(120,170,255,.22)}
.up-msg{color:#ffb4ab;font-size:13px;margin-top:8px}
.up-msg:empty{display:none}
.up-spec{color:#8ea6c9;font-size:12.5px;margin-top:8px}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.quote-card .btn{width:100%;padding:15px;font-size:16px}
.qc-alt{text-align:center;color:var(--ink-3);font-size:14px;margin-top:13px}
.qc-alt a{color:var(--yellow);font-weight:800;text-decoration:none;font-family:var(--font-d)}
.form-done{display:none;text-align:center;padding:14px 4px}
.form-done h3{font-size:20px;margin:10px 0 6px}
.form-done p{color:var(--ink-2);font-size:15px;margin-bottom:16px}
.form-done .btn{margin-bottom:10px}
.done-check{display:grid;place-items:center;width:58px;height:58px;margin:0 auto;border-radius:50%;background:rgba(74,222,128,.14);border:1px solid rgba(74,222,128,.55);color:#4ade80}
.done-note{color:var(--ink-3);font-size:13.5px;margin-top:-8px}

/* ---------- sections ---------- */
section{padding:64px 0 8px}
.sec-head{max-width:780px;margin-bottom:34px}
.sec-head .kicker{font-weight:800;font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--sky);margin-bottom:10px}
.sec-head h2{font-size:clamp(27px,4vw,38px);font-weight:800}
.sec-head p{color:var(--ink-2);margin-top:10px}

/* reviews */
.reviews-shell{position:relative}
.rev-viewport{overflow-x:auto;overflow-y:hidden;border-radius:4px;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.rev-viewport::-webkit-scrollbar{display:none}
.rev-track{display:flex;gap:18px;width:max-content;max-width:none;padding-bottom:4px}
.rev-card{scroll-snap-align:start}
.rev-card{
  flex:0 0 min(86vw,380px);
  background:linear-gradient(165deg,var(--panel-2),var(--panel));
  border:1px solid var(--line-soft);border-radius:var(--radius);padding:24px;
  display:flex;flex-direction:column;gap:12px;
  box-shadow:0 16px 40px rgba(0,0,0,.35);
}
.rev-card .stars svg{width:16px;height:16px}
.rev-text{color:#dbe7fa;font-size:15.5px;line-height:1.65;flex:1}
.rev-text.clamp{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.rev-more{align-self:flex-start;background:none;border:0;color:var(--sky);font-family:var(--font-b);font-weight:700;font-size:14px;cursor:pointer;padding:0}
.rev-person{display:flex;align-items:center;gap:12px;border-top:1px solid var(--line-soft);padding-top:14px}
.avatar{
  width:42px;height:42px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-family:var(--font-d);font-weight:800;font-size:17px;color:#06101f;
}
.rev-person .who{font-weight:800;font-size:15px;line-height:1.25}
.rev-person .meta{color:var(--ink-3);font-size:13px;display:flex;align-items:center;gap:6px}
.rev-nav{display:flex;align-items:center;gap:12px;margin-top:22px}
.rev-btn{
  width:46px;height:46px;border-radius:50%;border:1px solid var(--line);cursor:pointer;
  background:rgba(120,170,255,.07);color:var(--ink);display:grid;place-items:center;
}
.rev-btn:hover{background:rgba(120,170,255,.16)}
.rev-btn:disabled{opacity:.35;cursor:default}
.rev-dots{display:flex;gap:7px;margin-left:6px}
.rev-dots button{width:8px;height:8px;border-radius:99px;border:0;padding:0;background:rgba(140,180,255,.3);cursor:pointer;transition:all .25s}
.rev-dots button.on{width:26px;background:var(--yellow)}
.rev-source{margin-left:auto;color:var(--ink-3);font-size:13.5px;font-weight:600}

/* offers */
.offers{display:grid;gap:16px}
.offer{
  border-radius:var(--radius);padding:24px;position:relative;overflow:hidden;
  background:linear-gradient(150deg,var(--panel-2),var(--panel));border:1px solid var(--line-soft);
}
.offer::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--grad-yellow);opacity:.9}
.offer .big{font-family:var(--font-d);font-size:33px;font-weight:800;color:var(--yellow);text-shadow:0 0 22px rgba(255,200,50,.3);line-height:1.1}
.offer h3{font-size:18px;margin:8px 0 6px}
.offer p{color:var(--ink-2);font-size:14.5px}
.offer a{display:inline-flex;gap:6px;align-items:center;margin-top:14px;font-weight:800;color:var(--sky);text-decoration:none;font-size:15px}
/* services */
.svc-grid{display:grid;gap:16px}
.svc{
  border-radius:var(--radius);overflow:hidden;text-decoration:none;color:inherit;
  background:var(--panel);border:1px solid var(--line-soft);display:flex;flex-direction:column;
  transition:border-color .2s, transform .2s;
}
.svc:hover{border-color:rgba(110,175,255,.45);transform:translateY(-3px)}
.svc-media{height:172px;position:relative;overflow:hidden;background:#31588f}
.svc-media img{width:100%;height:100%;object-fit:cover;position:relative}
.svc-media::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,21,38,.55),transparent 55%)}
.svc-media.iconic{display:grid;place-items:center;background:radial-gradient(420px 220px at 50% 0%,rgba(96,170,255,.46),transparent 70%),linear-gradient(150deg,#3c6cae,#2c4e85)}
.svc-media.iconic svg{width:74px;height:74px;color:var(--sky);filter:drop-shadow(0 0 18px rgba(87,202,255,.5))}
.svc-body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.svc-body h3{font-size:20px}
.svc-body p{color:var(--ink-2);font-size:15px;flex:1}
.svc-link{font-weight:800;color:var(--yellow);font-size:15px;display:inline-flex;gap:7px;align-items:center}

/* brand media — HALO Ultra Plus (same media size as every other service card) */
.svc-media.brand-media{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  padding:20px 26px;
  background:radial-gradient(420px 200px at 50% 0%,rgba(96,170,255,.48),transparent 72%),linear-gradient(150deg,#3c6cae,#28497e);
}
.svc-media.brand-media::after{display:none}
.svc-media.brand-media img{position:static;width:auto;height:auto;object-fit:contain}
.svc-media.brand-media .bm-halo{width:104px;opacity:.95}
.svc-media.brand-media .bm-ultra{width:min(88%,340px);filter:drop-shadow(0 6px 22px rgba(87,202,255,.35))}
.feat-tag{
  display:inline-block;align-self:flex-start;padding:3px 10px;border-radius:99px;
  border:1px solid rgba(255,210,62,.55);color:var(--yellow);
  font-family:var(--font-b);font-weight:800;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
}

/* why / trust */
.why-grid{display:grid;gap:16px}
.why-card{background:linear-gradient(160deg,var(--panel-2),var(--panel));border:1px solid var(--line-soft);border-radius:var(--radius);padding:24px}
.why-card .w-ico{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:rgba(87,202,255,.1);border:1px solid var(--line);color:var(--sky);margin-bottom:14px}
.why-card h3{font-size:18px;margin-bottom:6px}
.why-card p{color:var(--ink-2);font-size:15px}
.plan-band{
  margin-top:16px;border-radius:var(--radius);padding:26px;
  background:linear-gradient(120deg,rgba(61,134,255,.16),rgba(87,202,255,.06) 55%,rgba(255,190,40,.08));
  border:1px solid rgba(110,175,255,.3);
  display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between;
}
.plan-band h3{font-size:21px}
.plan-band p{color:var(--ink-2);font-size:15px;max-width:36em;margin-top:4px}
.plan-price{font-family:var(--font-d);font-weight:800;font-size:30px;color:var(--yellow);white-space:nowrap}
.plan-price small{font-size:14px;color:var(--ink-2);font-family:var(--font-b);font-weight:600}

/* protection plan feature */
.plan-feature{margin-top:28px;border-radius:24px;padding:28px;background:radial-gradient(700px 320px at 15% -10%,rgba(96,180,255,.3),transparent 60%),linear-gradient(160deg,#2f568e,#244672);border:1px solid rgba(140,195,255,.45);box-shadow:0 24px 60px rgba(0,0,0,.3),0 0 50px rgba(86,164,255,.16)}
.plan-feature-head{max-width:760px}
.plan-feature-head .pf-kicker{font-weight:800;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--yellow);margin-bottom:8px}
.plan-feature-head h3{font-size:clamp(24px,3vw,32px);line-height:1.15}
.plan-feature-head p{color:var(--ink-2);margin-top:10px;font-size:15.5px}
.plan-top{display:grid;gap:22px}
.plan-side-photo{margin:0}
.plan-side-photo img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:14px;border:1px solid var(--line-soft);display:block}
.plan-side-photo figcaption{color:var(--ink-3);font-size:13.5px;line-height:1.45;margin-top:9px}
.plan-pricing .pay-note{margin-top:0}
@media (min-width:900px){.plan-top{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:26px;align-items:start}}
.plan-tiers{display:grid;gap:14px;margin-top:22px}
.plan-tier{background:rgba(70,110,175,.55);border:1px solid var(--line);border-radius:18px;padding:20px;position:relative}
.plan-tier.pop{border-color:rgba(255,210,62,.6);background:linear-gradient(160deg,rgba(255,210,62,.13),rgba(34,62,108,.60))}
.plan-tier .tier-badge{position:absolute;top:14px;right:14px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#1c1503;background:var(--grad-yellow);padding:5px 9px;border-radius:999px}
.plan-tier .tier-sys{font-weight:700;color:var(--ink-2);font-size:14px}
.plan-tier .tier-price{font-family:var(--font-d);font-weight:800;font-size:34px;color:#fff;line-height:1.1;margin:6px 0 2px}
.plan-tier .tier-price span{font-size:15px;color:var(--ink-2);font-family:var(--font-b);font-weight:600}
.plan-tier p{color:var(--ink-3);font-size:14px}
.plan-benefits{display:grid;gap:10px 22px;margin-top:22px;padding:18px 0 2px;border-top:1px solid var(--line-soft)}
.plan-benefits li{list-style:none;display:flex;gap:10px;align-items:flex-start;color:var(--ink-2);font-size:15px;font-weight:600}
.plan-benefits li svg{color:var(--yellow);flex:none;margin-top:3px}
.plan-benefits li strong{color:#fff}
ul.plan-benefits{margin:22px 0 0;padding:18px 0 2px}
.compare-grid{display:grid;gap:16px;margin-top:22px}
.compare-panel{background:linear-gradient(165deg,var(--panel-2),var(--panel));border:1px solid var(--line-soft);border-radius:18px;overflow:hidden}
.compare-panel h4{font-family:var(--font-d);font-size:17px;margin:0;padding:18px 20px 6px}
.compare-panel .cp-sub{color:var(--ink-3);font-size:13.5px;padding:0 20px 14px}
.compare-head,.compare-row{display:grid;grid-template-columns:1fr 1fr;gap:0}
.compare-head{border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);font-family:var(--font-d);font-weight:700;font-size:13.5px}
.compare-head span{padding:11px 16px}
.compare-head span:last-child{color:var(--yellow);background:rgba(255,210,62,.06);border-left:1px solid var(--line-soft)}
.compare-head span:first-child{color:var(--ink-3)}
.compare-row{border-bottom:1px solid var(--line-soft)}
.compare-row:last-child{border-bottom:0}
.compare-row .cr-label{grid-column:1/-1;padding:12px 16px 0;font-size:12.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--sky)}
.compare-row .cr-a,.compare-row .cr-b{padding:6px 16px 13px;font-size:14.5px;line-height:1.5}
.compare-row .cr-a{color:var(--ink-3)}
.compare-row .cr-b{color:#e8f0ff;font-weight:600;background:rgba(255,210,62,.04);border-left:1px solid var(--line-soft)}
@media (min-width:760px){
  .plan-tiers{grid-template-columns:repeat(3,1fr)}
  .plan-benefits{grid-template-columns:1fr 1fr}
  .compare-grid{grid-template-columns:1fr 1fr}
  .plan-feature{padding:36px}
}
.plan-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:24px}
.plan-cta .note{color:var(--ink-3);font-size:14px;font-weight:600}

/* area */
.area-chips{display:flex;flex-wrap:wrap;gap:9px}
.area-chips span{border:1px solid var(--line);background:rgba(150,195,255,.13);border-radius:999px;padding:8px 15px;font-weight:600;font-size:14.5px;color:#d7e6ff}
.area-note{color:var(--ink-3);font-size:14px;margin-top:16px}

/* final cta */
.final{
  margin:70px 0 0;border-radius:28px;padding:44px 28px;text-align:center;position:relative;overflow:hidden;
  background:radial-gradient(600px 300px at 50% -10%,rgba(96,180,255,.42),transparent 65%),linear-gradient(160deg,#3c6cae,#2c4e85);
  border:1px solid rgba(110,175,255,.3);
}
.final h2{font-size:clamp(26px,4.5vw,38px);max-width:20em;margin:0 auto 12px}
.final p{color:var(--ink-2);max-width:32em;margin:0 auto 26px}
.final .row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.final .btn{padding:16px 28px;font-size:16.5px;border-radius:16px}
.final .big-phone{font-family:var(--font-d);font-weight:800;font-size:clamp(26px,5vw,34px);color:var(--yellow);text-decoration:none;text-shadow:0 0 24px rgba(255,200,50,.3);display:inline-block;margin-bottom:18px;letter-spacing:.01em}

/* footer */
footer{margin-top:64px;border-top:1px solid var(--line-soft);padding:36px 0 110px;color:var(--ink-3);font-size:14.5px}
.foot-grid{display:grid;gap:26px}
footer .f-brand img{height:36px;width:auto;margin-bottom:10px}
footer h4{font-family:var(--font-d);color:var(--ink);font-size:15px;margin:0 0 10px}
footer a{color:var(--ink-2);text-decoration:none}
footer a:hover{color:#fff}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.foot-legal{margin-top:28px;padding-top:18px;border-top:1px solid var(--line-soft);display:flex;flex-wrap:wrap;gap:8px 26px}

/* sticky mobile bar */
.mobile-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:8px;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:rgba(44,76,130,.95);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
}
.mobile-bar a{display:flex;align-items:center;justify-content:center;gap:7px;padding:13px 6px;border-radius:13px;font-family:var(--font-d);font-weight:700;font-size:14.5px;text-decoration:none}
/* form fields keep clear of the fixed mobile bar whenever the browser
   scrolls them into view (tap-to-focus, anchor jumps, validation focus) */
@media (max-width:759px){
  html{scroll-padding-bottom:calc(96px + env(safe-area-inset-bottom))}
  input,select,textarea{scroll-margin-bottom:calc(96px + env(safe-area-inset-bottom))}
}
.mb-call{background:var(--grad-yellow);color:#1c1503}
.mb-book{background:var(--grad-blue);color:#000}
.mb-quote{background:rgba(150,195,255,.16);color:var(--ink);border:1px solid var(--line)}

/* back to top (floating, all pages) */
.to-top{
  position:fixed;right:16px;bottom:calc(84px + env(safe-area-inset-bottom));z-index:80;
  width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.4);
  background:var(--blue);
  color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 10px 26px rgba(2,10,26,.45),0 0 18px rgba(61,134,255,.5);
  /* always present and tappable — it floats on the page at all times */
  opacity:1;visibility:visible;
}
.to-top:hover{background:#1f63d8}
.to-top:focus-visible{outline:2px solid #8cc3ff;outline-offset:2px}
@media (min-width:760px){.to-top{bottom:24px;right:24px}}
@media (prefers-reduced-motion:reduce){.to-top{transition:none}}

/* trust badges */
.badges{margin-top:28px}
.badges-label{text-align:center;font-weight:800;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-bottom:14px}
.badges-row{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.badge-tile{background:linear-gradient(165deg,#ffffff,#e9f0fb);border:1px solid rgba(170,205,255,.55);border-radius:16px;padding:18px 14px 14px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:5px;min-height:138px;box-shadow:0 12px 30px rgba(2,10,26,.25)}
.badge-tile .b-logozone{height:72px;display:flex;align-items:center;justify-content:center;margin-bottom:5px}
.badge-tile .b-logo{max-height:100%;max-width:94%;width:auto;height:auto;object-fit:contain}
.badge-tile .b-cap{font-family:var(--font-d);font-weight:700;font-size:13.5px;color:#22385c;line-height:1.3}
.badge-tile .b-sub{font-size:12px;font-weight:600;color:#5a6f8c;line-height:1.35}
@media (min-width:760px){.badges-row{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1020px){.badges-row{grid-template-columns:repeat(6,1fr)}}

@media (min-width:760px){
  .offers{grid-template-columns:repeat(3,1fr)}
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .why-grid{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1.4fr 1fr 1fr}
  footer{padding-bottom:40px}
  .mobile-bar{display:none}
}
@media (min-width:1020px){
  .header-in{padding:16px 0;gap:14px}
  .brand img{height:48px}
  nav.main{
    display:flex;align-items:center;gap:4px;margin-left:22px;
    background:linear-gradient(120deg,rgba(72,120,204,.62),rgba(46,84,152,.62));
    border:1px solid rgba(140,195,255,.4);border-radius:999px;padding:5px;
    box-shadow:0 0 0 1px rgba(15,31,61,.25),0 10px 28px rgba(2,8,20,.3),0 0 26px rgba(86,164,255,.16);
  }
  nav.main a{
    font-family:var(--font-d);font-weight:700;font-size:15.5px;color:#dceaff;white-space:nowrap;
    padding:10px 14px;border-radius:999px;line-height:1;
  }
  nav.main a:hover{color:#0e1c33;background:var(--grad-yellow);box-shadow:0 4px 16px rgba(255,190,40,.35)}
  nav.main a[href="#plans"]{color:var(--yellow)}
  nav.main a[href="#plans"]:hover{color:#0e1c33}
  .header-cta{margin-left:0}
  .phone-link{display:inline-flex;margin-left:auto;font-size:17px}
  .header-cta .btn{padding:13px 20px;font-size:15px}
}
@media (min-width:1280px){
  nav.main{gap:6px;margin-left:30px;padding:6px}
  nav.main a{font-size:17px;padding:12px 20px}
  .brand img{height:52px}
  .phone-link{font-size:19px}
  .header-cta .btn{padding:14px 24px;font-size:16px}
}
@media (min-width:1020px){
  .hero{padding:84px 0 52px}
  .hero-grid{grid-template-columns:1.35fr .9fr;align-items:start;gap:64px}
  .svc-grid{grid-template-columns:repeat(3,1fr)}
  .svc-grid .svc:nth-child(4){grid-column:span 1}
  .why-grid{grid-template-columns:repeat(4,1fr)}
  section{padding:84px 0 12px}
  .sec-head h2{font-size:clamp(32px,3.2vw,44px)}
  .quote-card{padding:32px}
  .svc-media{height:200px}
  .offer{padding:28px}
  .why-card{padding:28px}
  .final{padding:56px 40px}
}
@media (min-width:1440px){
  .hero-grid{gap:80px}
  .svc-media{height:216px}
  .offers{gap:20px}
  .svc-grid{gap:20px}
  .why-grid{gap:20px}
  .rev-card{flex-basis:400px}
}
@media (max-width:759px){
  .hero{padding:22px 0 18px}
  .hero h1{margin:12px 0 10px}
  .hero-ctas{margin:14px 0 4px}
  .hero-ctas .btn{padding:14px 20px}
  .trust-row{margin-top:16px;gap:6px 16px}
  .rating-strip{margin-top:14px;padding:14px 16px}
  .rating-strip a{margin-left:0}
  main{padding-bottom:8px}
}
/* ---------- google badge ---------- */
.g-logo{width:34px;height:34px;flex:none}
.google-badge{
  display:flex;flex-wrap:wrap;align-items:center;gap:16px 26px;margin-bottom:30px;
  background:linear-gradient(140deg,#f8fbff,#e8f0fd);color:#16283f;border-radius:22px;padding:22px 26px;
  box-shadow:0 22px 55px rgba(0,0,0,.32),0 0 44px rgba(120,180,255,.16);
}
.g-logo-lg{width:52px;height:52px;flex:none}
.gb-main{display:flex;flex-direction:column}
.gb-title{font-family:var(--font-d);font-weight:800;font-size:24px;line-height:1.1;color:#1c2f47}
.gb-sub{font-size:13.5px;font-weight:600;color:#5a6f8c}
.gb-scorebox{display:flex;align-items:center;gap:12px;margin-left:auto}
.gb-score{font-family:var(--font-d);font-weight:800;font-size:52px;line-height:1;color:#12263f}
.gb-scorebox .stars svg{width:24px;height:24px}
.gb-countbox{display:flex;flex-direction:column;align-items:flex-start;border-left:1px solid #cfddf0;padding-left:26px}
.gb-count{font-family:var(--font-d);font-weight:800;font-size:52px;line-height:1;color:#12263f}
.gb-countlabel{font-size:13.5px;font-weight:700;color:#5a6f8c}
.gb-breakdown{flex-basis:100%;font-size:13.5px;font-weight:600;color:#5a6f8c;border-top:1px solid #dbe6f5;padding-top:12px}
@media (max-width:760px){
  .gb-scorebox{margin-left:0}
  .gb-countbox{border-left:0;padding-left:0}
  .gb-score,.gb-count{font-size:42px}
}
.emerg-line{color:var(--ink-2);font-size:14.5px;margin:14px auto 0}
.emerg-line strong{color:var(--yellow)}

/* ---------- water heaters sub-page ---------- */
.wh-view[hidden]{display:none}
.wh-banner{
  margin-top:22px;border-radius:16px;padding:14px 20px;display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:center;text-align:center;
  background:var(--grad-yellow);color:#1c1503;font-weight:700;box-shadow:var(--glow-yellow);
}
.wh-banner .ticket{font-family:var(--font-d);font-weight:800;font-size:19px;border:2px dashed rgba(28,21,3,.55);padding:3px 12px;border-radius:10px}

/* ---------- careers + about pages ---------- */
.job-meta{font-weight:700;color:var(--sky);font-size:14.5px;margin:-2px 0 8px}
.job-meta .pay{color:var(--yellow)}
.about-story{max-width:840px;color:var(--ink-2);display:grid;gap:16px;font-size:16.5px}
.about-story strong{color:#fff}

/* ---------- blog ---------- */
.blog-grid{display:grid;gap:16px}
.blog-card{background:linear-gradient(165deg,var(--panel-2),var(--panel));border:1px solid var(--line-soft);border-radius:var(--radius);padding:24px;display:flex;flex-direction:column;gap:9px}
.blog-card h3{font-size:19px;line-height:1.32}
.blog-card p{color:var(--ink-2);font-size:15px}
.blog-card .blog-excerpt{flex:1}
.blog-cat{font-weight:800;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--lime)}
.blog-read{align-self:flex-start;background:none;border:0;padding:0;cursor:pointer;font-family:var(--font-b);font-weight:800;color:var(--yellow);font-size:15px;display:inline-flex;gap:7px;align-items:center}
.blog-read:hover{text-decoration:underline}
@media (min-width:760px){.blog-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1200px){.blog-grid{grid-template-columns:repeat(3,1fr)}}
.blog-reader{max-width:820px}
.blog-reader .blog-cat{margin-bottom:8px}
.blog-reader h2{font-size:clamp(26px,3.6vw,36px);margin-bottom:18px}
.blog-body{color:var(--ink-2);display:grid;gap:14px;font-size:16.5px;line-height:1.65}
.blog-body h3{color:#fff;font-size:20px;margin-top:10px}
.blog-body ul{margin:0;padding-left:22px;display:grid;gap:7px}
.blog-body strong{color:#fff}
.blog-body a{color:var(--sky);font-weight:700;text-decoration:none}
.blog-body a:hover{text-decoration:underline}
button.back-home{font-family:var(--font-b);cursor:pointer}
.day-one{margin-top:34px;background:linear-gradient(150deg,var(--panel-2),var(--panel));border:1px solid var(--line-soft);border-radius:var(--radius);padding:24px;box-shadow:0 14px 34px rgba(2,10,26,.25)}
.day-one figure{margin:0;line-height:0}
.day-one figure img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:12px;border:1px solid var(--line-soft);display:block}
.day-one .photo-then img{object-position:50% 60%}
.day-one figure figcaption{color:var(--ink-3);font-size:13.5px;line-height:1.45;margin-top:10px}
.day-one figure figcaption strong{color:#fff;font-family:var(--font-d);letter-spacing:.02em}
.day-one-photos{display:grid;gap:18px;margin-top:22px}
.day-one .day-one-bridge{margin-top:20px;margin-bottom:0}
@media (min-width:640px){.day-one-photos{grid-template-columns:1fr 1fr}}
.day-one h2{font-size:clamp(22px,3vw,28px);margin-bottom:12px}
.day-one p{color:var(--ink-2);font-size:16px;line-height:1.65;margin-bottom:12px}
.day-one p:last-child{margin-bottom:0}
.day-one p strong{color:#fff}
@media (min-width:820px){.day-one{padding:30px}}

/* ---------- section & card photos ---------- */
.block-photo{margin:24px 0 0}
.block-photo img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:14px;border:1px solid var(--line-soft);display:block}
.block-photo figcaption{color:var(--ink-3);font-size:13.5px;line-height:1.45;margin-top:9px}
@media (max-width:639px){.block-photo img{aspect-ratio:4/3}}
.card-img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:10px;border:1px solid var(--line-soft);margin-bottom:14px}
.fin-art{height:144px;border-radius:10px;border:1px solid var(--line-soft);margin-bottom:14px;display:grid;place-items:center;color:var(--sky);background:radial-gradient(130px 84px at 50% 36%,rgba(56,189,248,.26),rgba(56,189,248,0) 72%),linear-gradient(160deg,#325f9e,#234879)}
.blog-hero-img{margin:16px 0 2px}
.blog-hero-img img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:14px;border:1px solid var(--line-soft);display:block}
.plate-photo{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:12px;border:1px solid var(--line-soft);display:block;margin-bottom:16px}

/* ---------- service-page photos: one consistent size on every service page ---------- */
.svc-hero{position:relative;margin:0;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line-soft);background:#31588f}
.svc-hero img{width:100%;height:auto;aspect-ratio:16/7;object-fit:cover;display:block}
@media (max-width:639px){.svc-hero img{aspect-ratio:4/3}}
.block-photo img{max-height:440px}
.plate-photo{max-height:440px}
#page-water-filtration .wf-photo--prod img{max-height:430px}
#page-water-filtration .wf-feature .wf-prod{display:block;padding:14px}

/* ---------- homepage rotating offer highlight (wh-banner style, large & bold) ---------- */
.offer-rot{max-width:880px;margin:0 auto;background:var(--grad-yellow);color:#1c1503;border-radius:16px;box-shadow:var(--glow-yellow);padding:15px 26px 13px}
.offer-rot .or-stage{display:grid}
.or-slide{grid-area:1/1;display:none;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:center;text-align:center;text-decoration:none;color:inherit;font-weight:700;font-size:16.5px;line-height:1.4}
.or-slide.is-on{display:flex;animation:or-fade .45s ease}
@keyframes or-fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.or-slide.is-on{animation:none}}
.or-slide .ticket{font-family:var(--font-d);font-weight:800;font-size:18px;border:2px dashed rgba(28,21,3,.55);padding:3px 13px;border-radius:10px;white-space:nowrap}
.or-dots{display:flex;gap:7px;justify-content:center;margin-top:9px}
.or-dots button{width:8px;height:8px;border-radius:99px;border:0;padding:0;background:rgba(28,21,3,.28);cursor:pointer;transition:all .25s}
.or-dots button.on{width:22px;background:rgba(28,21,3,.75)}
@media (max-width:759px){
  .offer-rot{padding:11px 16px 10px;border-radius:14px}
  .or-dots{margin-top:6px}
  .or-slide{font-size:14.5px;gap:6px 11px}
  .or-slide .ticket{font-size:15.5px;padding:2px 10px}
}
/* brand logo badge overlaid on a service-card photo */
.svc-logo-badge{position:absolute;left:12px;bottom:12px;z-index:2;display:inline-flex;align-items:center;background:rgba(22,44,80,.78);border:1px solid rgba(140,195,255,.4);border-radius:10px;padding:7px 12px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.svc-logo-badge img{position:static;width:auto;height:24px;object-fit:contain}
.crumb{display:flex;flex-wrap:wrap;gap:8px;align-items:center;color:var(--ink-3);font-size:14px;font-weight:600;margin:26px 0 4px}
.crumb a{color:var(--sky);text-decoration:none}
.crumb a:hover{text-decoration:underline}
.wh-hero{position:relative;padding:14px 0 8px}
.wh-grid{display:grid;gap:40px}
/* see the mobile note: grid items shrink to their track, never hold it
   open at min-content width (the quote-form column carries the selects) */
.wh-grid>*,.hero-grid>*,.f-row>*{min-width:0}
.wh-hero h1{font-size:clamp(34px,4.4vw,60px);font-weight:800;margin:14px 0 14px;max-width:13em}
.wh-hero h1 .hl-yellow{color:var(--yellow);text-shadow:0 0 26px rgba(255,200,50,.35)}
.wh-promo{
  border:1px solid rgba(255,210,62,.5);background:rgba(255,190,40,.09);border-radius:16px;padding:16px 18px;color:var(--ink-2);font-size:15.5px;max-width:36em;
}
.wh-promo strong{color:var(--yellow)}
.wh-copy{color:var(--ink-2);margin-top:16px;max-width:36em}
.wh-deal{
  margin-top:22px;background:linear-gradient(165deg,var(--panel-2),var(--panel));border:1px solid var(--line);border-radius:20px;padding:22px;max-width:520px;
  box-shadow:0 18px 46px rgba(0,0,0,.3);
}
.wh-deal .d-label{font-weight:700;color:var(--sky);font-size:14.5px}
.wh-deal .d-big{font-family:var(--font-d);font-weight:800;font-size:36px;color:var(--yellow);line-height:1.15;margin:4px 0 6px;text-shadow:0 0 22px rgba(255,200,50,.3)}
.wh-deal p{color:var(--ink-2);font-size:15px}
.wh-checks{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:9px;color:var(--ink-2);font-weight:600;font-size:15px}
.wh-checks li{display:flex;gap:10px;align-items:flex-start}
.wh-checks svg{color:var(--yellow);flex:none;margin-top:4px}
.wh-trust{
  margin-top:34px;display:grid;gap:14px;
  background:linear-gradient(120deg,rgba(61,134,255,.18),rgba(87,202,255,.07));border:1px solid rgba(110,175,255,.32);border-radius:20px;padding:22px;
}
.wh-trust .t-item{display:flex;gap:12px;align-items:flex-start}
.wh-trust .t-ico{color:var(--yellow);flex:none;margin-top:2px}
.wh-trust h3{font-size:16px;margin-bottom:2px}
.wh-trust p{color:var(--ink-2);font-size:14px}
.wh-cards{display:grid;gap:16px}
.wh-card{background:linear-gradient(165deg,var(--panel-2),var(--panel));border:1px solid var(--line-soft);border-radius:var(--radius);padding:24px}
.wh-card .w-ico{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:rgba(255,190,40,.12);border:1px solid rgba(255,210,62,.4);color:var(--yellow);margin-bottom:14px}
.wh-card h3{font-size:18px;margin-bottom:7px}
.wh-card p{color:var(--ink-2);font-size:15px}
.plate-wrap{display:grid;gap:26px;align-items:start}
.plate{background:rgba(235,244,255,.06);border:1px solid var(--line);border-radius:18px;padding:8px 22px}
.plate h3{font-size:16px;color:var(--sky);padding:14px 0 4px}
.plate-row{display:flex;justify-content:space-between;gap:18px;padding:13px 0;border-top:1px solid var(--line-soft);font-size:15px}
.plate-row span:first-child{font-weight:800;color:var(--yellow-2)}
.plate-row span:last-child{color:var(--ink-2);font-weight:600;text-align:right}
.plate-note{color:var(--ink-3);font-size:13.5px;margin-top:12px}
.plate-note strong{color:var(--ink-2)}
.type-grid{display:grid;gap:16px}
.type-card{background:linear-gradient(165deg,var(--panel-2),var(--panel));border:1px solid var(--line-soft);border-radius:var(--radius);padding:24px;display:flex;flex-direction:column;gap:8px}
.type-card h3{font-size:19px;color:#fff}
.type-card .t-price{font-family:var(--font-d);font-weight:800;font-size:24px;color:var(--yellow);line-height:1.2}
.type-card p{color:var(--ink-2);font-size:15px;flex:1}
.type-card .btn{align-self:flex-start;margin-top:6px}
.rebate-grid{display:grid;gap:16px}
.rebate{background:linear-gradient(150deg,var(--panel-2),var(--panel));border:1px solid var(--line-soft);border-radius:var(--radius);padding:24px;position:relative;overflow:hidden}
.rebate::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--grad-blue)}
.rebate .big{font-family:var(--font-d);font-size:31px;font-weight:800;color:var(--sky);line-height:1.1}
.rebate h3{font-size:17px;margin:8px 0 6px}
.rebate p{color:var(--ink-2);font-size:14.5px}
.wh-final{margin-top:8px}
@media (min-width:760px){
  .wh-trust{grid-template-columns:repeat(2,1fr)}
  .wh-cards{grid-template-columns:repeat(3,1fr)}
  .type-grid{grid-template-columns:repeat(2,1fr)}
  .rebate-grid{grid-template-columns:repeat(3,1fr)}
  .plate-wrap{grid-template-columns:1fr 1fr}
}
@media (min-width:1020px){
  .wh-grid{grid-template-columns:1.25fr .9fr;align-items:start;gap:56px}
  .wh-trust{grid-template-columns:repeat(4,1fr)}
  nav.main a[href="#water-heaters"]{color:var(--sky)}
  nav.main a[href="#water-heaters"]:hover{color:#0e1c33}
}

/* ---------- mobile: compact protection plan (desktop unchanged) ---------- */
@media (max-width:759px){
  .why-grid{grid-template-columns:1fr 1fr;gap:10px}
  .why-card{padding:16px 14px;border-radius:16px}
  .why-card .w-ico{width:38px;height:38px;border-radius:11px;margin-bottom:9px}
  .why-card .w-ico svg{width:19px;height:19px}
  .why-card h3{font-size:15px;margin-bottom:4px}
  .why-card p{font-size:13px;line-height:1.5}
  .plan-feature{padding:20px 15px 18px;margin-top:16px;border-radius:18px}
  .plan-feature-head h3{font-size:21px}
  .plan-feature-head p{font-size:14px;margin-top:6px}
  .plan-tiers{gap:8px;margin-top:14px}
  .plan-tier{padding:12px 14px;border-radius:14px;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:10px}
  .plan-tier .tier-badge{top:-9px;right:12px;font-size:10px;padding:4px 8px}
  .plan-tier .tier-sys{font-size:13.5px}
  .plan-tier .tier-price{font-size:24px;margin:0 0 0 auto}
  .plan-tier .tier-price span{font-size:13px}
  .plan-tier p:last-child{flex-basis:100%;font-size:12.5px;margin-top:1px}
  ul.plan-benefits,.plan-benefits{gap:7px;margin-top:14px;padding-top:12px}
  .plan-benefits li{font-size:13.5px;gap:8px}
  .plan-benefits li svg{width:15px;height:15px}
  .compare-grid{gap:12px;margin-top:16px}
  .compare-panel{border-radius:14px}
  .compare-panel h4{font-size:15px;padding:13px 13px 8px}
  .compare-panel .cp-sub{display:none}
  .compare-head span{padding:8px 10px;font-size:12px}
  .compare-row .cr-label{padding:9px 10px 0;font-size:11px}
  .compare-row .cr-a,.compare-row .cr-b{padding:3px 10px 9px;font-size:12.5px;line-height:1.45}
  .plan-cta{margin-top:16px;gap:9px}
  .plan-cta .btn{flex:1 1 100%;padding:13px;font-size:15px}
  .plan-cta .note{font-size:12.5px}
}

/* ---------- site-wide platform pass: mobile ---------- */
@media (max-width:759px){
  section{padding:42px 0 4px}
  .sec-head{margin-bottom:22px}
  .sec-head p{font-size:15px}
  /* hero: full-width, easy-tap CTAs */
  .hero-ctas .btn{flex:1 1 100%;padding:16px 20px;font-size:16px}
  .trust-row{font-size:13.5px}
  /* forms: one column, tall tap targets, no iOS zoom (16px inputs kept) */
  .quote-card{padding:16px 14px;border-radius:18px}
  .f-row{grid-template-columns:1fr;gap:0}
  .field input,.field select,.field textarea{padding:11px 14px;font-size:16px;min-height:48px}
  .field textarea{min-height:76px}
  .quote-card .btn{padding:16px;min-height:54px}
  /* services: tighter cards, shorter media */
  .svc-grid{gap:12px}
  .svc-media{height:158px}
  .svc-body{padding:16px 16px 18px}
  .svc-body h3{font-size:18px}
  .svc-body p{font-size:14px}
  /* badges: compact tiles */
  .badges{margin-top:20px}
  .badges-row{gap:9px}
  .badge-tile{min-height:118px;padding:13px 8px 11px;border-radius:13px}
  .badge-tile .b-logozone{height:56px;margin-bottom:3px}
  .badge-tile .b-cap{font-size:12px}
  .badge-tile .b-sub{font-size:11px}
  /* offers: compact */
  .offers{gap:12px}
  .offer{padding:19px 18px}
  .offer .big{font-size:27px}
  .offer h3{font-size:16.5px}
  /* google badge + reviews */
  .google-badge{padding:18px 16px;gap:12px 16px;border-radius:18px;margin-bottom:22px}
  .g-logo-lg{width:42px;height:42px}
  .gb-title{font-size:20px}
  .rev-card{padding:19px}
  .rev-nav{margin-top:16px}
  /* service area + final CTA */
  .area-chips{gap:7px}
  .area-chips span{padding:6px 12px;font-size:13.5px}
  .final{margin-top:44px;padding:32px 18px;border-radius:20px}
  .final .btn{flex:1 1 100%;padding:15px}
  /* water-heater sub-page: one consistent scale — h1 a step above the
     section h2s, card titles/prices/buttons all on the site rhythm */
  .wh-banner{padding:11px 14px;font-size:13.5px;gap:6px 12px;margin-top:16px}
  .wh-banner .ticket{font-size:16px;padding:2px 10px}
  .wh-hero{padding-top:8px}
  .wh-hero h1{font-size:29px;line-height:1.22;margin:12px 0}
  .wh-grid{gap:28px}
  .wh-promo{padding:14px 16px;font-size:15px}
  .wh-copy{font-size:15.5px}
  .wh-deal{padding:18px;margin-top:18px}
  .wh-deal .d-big{font-size:29px}
  .wh-checks{font-size:14.5px;gap:8px;margin-top:16px}
  .wh-trust{padding:16px;gap:12px;margin-top:24px}
  .wh-card,.type-card,.rebate{padding:19px}
  .wh-card .w-ico{width:42px;height:42px;margin-bottom:11px}
  .type-card .btn,.wh-card .btn{min-height:44px}
  .rebate .big{font-size:26px}
  .plate{padding:6px 16px}
  .plate-row{font-size:13.5px;gap:12px}
  .plate-row span:last-child{max-width:64%}
  .fin-band .btn{min-height:48px}
}
/* ---------- site-wide platform pass: desktop refinements ---------- */
@media (min-width:1280px){
  section{padding:96px 0 16px}
  .sec-head{margin-bottom:40px}
  .rev-card{flex-basis:420px}
  .google-badge{padding:26px 32px}
}
@media (min-width:1020px){
  .quote-card{position:sticky;top:64px}
}

/* ---------- full-width rhythm, alternating bands, lime accent ---------- */
:root{--lime:#8aff3c;--lime-deep:#43a200}
main>section{padding:78px 0 70px}
footer{margin-top:0}
.sec-head .kicker{color:var(--lime)}
.plan-feature-head .pf-kicker{color:var(--lime)}
.band-light{background:linear-gradient(180deg,#f5f9ff 0%,#e8f0fc 100%);color:#16283f}
.band-light .sec-head h2{color:#10233c}
.band-light .sec-head p{color:#43597c}
.band-light .sec-head .kicker{color:var(--lime-deep)}
.band-light .svc{background:#fff;border-color:#d3e0f4;box-shadow:0 14px 34px rgba(23,52,102,.10)}
.band-light .svc:hover{border-color:rgba(61,134,255,.5)}
.band-light .svc-body h3{color:#10233c}
.band-light .svc-body p{color:#43597c}
.band-light .svc-link{color:var(--lime-deep)}
.band-light .feat-tag{border-color:rgba(67,162,0,.55);color:var(--lime-deep)}
.band-light .badge-tile{border-color:#c7d9f6;box-shadow:0 10px 26px rgba(23,52,102,.12)}
.band-light .badges-label{color:#5a6f8c}
.band-light .why-card{background:#fff;border-color:#d3e0f4;box-shadow:0 14px 34px rgba(23,52,102,.08)}
.band-light .why-card h3{color:#10233c}
.band-light .why-card p{color:#43597c}
.band-light .why-card .w-ico{background:rgba(67,162,0,.08);border-color:rgba(67,162,0,.32);color:var(--lime-deep)}
.band-light .area-chips span{background:#fff;border-color:#c7d9f6;color:#22385c}
.band-light .area-note{color:#5a6f8c}
.band-light .offer{background:#fff;border-color:#d3e0f4;box-shadow:0 14px 34px rgba(23,52,102,.08)}
.band-light .offer h3{color:#10233c}
.band-light .offer p{color:#43597c}
.band-light .offer .big{color:#cf8a00;text-shadow:none}
.band-light .offer a{color:var(--lime-deep)}
.band-light .rev-card{background:#fff;border-color:#d3e0f4;box-shadow:0 14px 34px rgba(23,52,102,.10)}
.band-light .rev-text{color:#2c3e5c}
.band-light .rev-person{border-top-color:#dbe6f5}
.band-light .rev-person .who{color:#10233c}
.band-light .rev-btn{background:#fff;border-color:#c7d9f6;color:#22385c}
.band-light .rev-btn:hover{background:#eef4ff}
.band-light .rev-dots button{background:rgba(35,70,130,.25)}
.band-light .rev-dots button.on{background:var(--lime-deep)}
.band-light .rev-source{color:#5a6f8c}
.band-light .google-badge{box-shadow:0 18px 44px rgba(23,52,102,.16)}
@media (max-width:759px){main>section{padding:48px 0 42px}}

/* ---------- partner badge marquee (desktop only) ---------- */
.marquee{display:none}
@media (min-width:1020px){
  .badges-row{display:none}
  .marquee{
    display:block;overflow:hidden;padding:8px 0 4px;
    mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  }
  .marquee-track{display:flex;width:max-content;animation:mq-scroll 38s linear infinite}
  .marquee:hover .marquee-track{animation-play-state:paused}
  .mq-group{display:flex;gap:14px;padding-right:14px}
  .mq-tile{
    flex:none;display:flex;align-items:center;justify-content:center;
    height:98px;min-width:216px;padding:14px 26px;border-radius:16px;
    background:linear-gradient(165deg,#ffffff,#e9f0fb);border:1px solid #c7d9f6;
    box-shadow:0 10px 26px rgba(23,52,102,.10);
  }
  .mq-tile img{max-height:58px;max-width:180px;width:auto;height:auto;object-fit:contain}
  .mq-tile img.mq-shield{max-height:72px}
  .mq-dark{background:linear-gradient(160deg,#3c6cae,#28497e);border-color:rgba(130,185,255,.45);flex-direction:column;gap:7px}
  .mq-dark .mq-halo{width:72px;max-height:none}
  .mq-dark .mq-ultra{width:158px;max-height:none}
}
/* transparent badges (ACCA, Angi): no white card behind them — the transparent logo sits directly on the section background */
.badge-tile.b-clear{background:transparent;border-color:transparent;box-shadow:none}
.band-light .badge-tile.b-clear{background:transparent;border-color:transparent;box-shadow:none}
.mq-tile.mq-clear{background:transparent;border-color:transparent;box-shadow:none}
.mq-tile.mq-clear img{max-height:66px}
@keyframes mq-scroll{to{transform:translateX(-50%)}}

/* ---------- water heater page: State band + optional add-ons ---------- */
.state-band{display:flex;flex-wrap:wrap;gap:22px;align-items:center;background:linear-gradient(150deg,var(--panel-2),var(--panel));border:1px solid var(--line-soft);border-radius:var(--radius);padding:24px;margin-bottom:16px}
.state-band>div{flex:1 1 320px}
.state-logo-chip{background:transparent;border-radius:0;padding:0;display:inline-flex;flex:none;box-shadow:none}
.state-logo-chip img{width:270px;max-width:100%;height:auto}
.state-band h3{font-size:19px;margin-bottom:6px}
.state-band p{color:var(--ink-2);font-size:15px}
.type-card .t-spec{font-family:var(--font-d);font-weight:700;color:var(--sky);font-size:15px}
.opt-tag{display:inline-block;padding:3px 10px;border-radius:99px;border:1px solid rgba(138,255,60,.5);color:var(--lime);font-weight:800;font-size:11px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:10px}
.wh-card .opt-price{color:var(--yellow);font-weight:800;font-size:14.5px;margin-top:10px}
@media (max-width:759px){.state-logo-chip img{width:190px}.state-band{padding:18px}}

/* ---------- Trane section ---------- */
@media (min-width:1020px){nav.main a[href="#trane"]{color:#ff9a8d}nav.main a[href="#trane"]:hover{color:#0e1c33}}
.trane-grid{display:grid;gap:38px}
.trane-copy .sec-head{margin-bottom:0}
.trane-word{color:#ff5a4d}
.trane-badge{display:flex;align-items:center;gap:16px;margin-top:26px;background:rgba(120,170,255,.06);border:1px solid var(--line-soft);border-radius:16px;padding:14px 18px}
.trane-badge img{width:74px;height:74px;object-fit:contain;flex:none}
.trane-badge p{color:var(--ink-2);font-size:15px}
.trane-badge strong{color:#fff}
.trane-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.trane-video{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;border:1px solid var(--line);box-shadow:0 22px 55px rgba(0,0,0,.35);background:#000}
.trane-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.trane-cap{color:var(--ink-3);font-size:13.5px;margin-top:10px}
/* Brawn and Brains film is square (1:1) — keep its native shape, sized up
   to fill the media column beside the copy, centered */
.trane-video--square{aspect-ratio:1/1;max-width:560px;margin-inline:auto}
.trane-video--square ~ .trane-cap{max-width:560px;margin-inline:auto;text-align:center}

@media (min-width:1020px){
  .trane-grid{grid-template-columns:1fr 1.08fr;gap:60px;align-items:start}
}
@media (max-width:759px){
  .trane-badge img{width:60px;height:60px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rev-track{transition:none}
  .marquee-track{animation:none}
  *{transition:none!important}
}

/* ---------- mobile-only section order (mirrors the desktop DOM order) ----------
   Mobile priority: hero (quote form pulled up front) → services →
   protection plan → Trane → system comparison → Google reviews →
   IAQ → water filtration → partners → promise → service area → FAQ.
   Repair-or-replace and the Current Offers band are hidden on the
   phone homepage (kept on desktop; offers also live on the Offers
   page view), to keep the phone homepage as simple as possible.
   The small Google rating strip inside the hero is hidden on mobile so the
   full Google Reviews section is the one and only Google block on phones —
   no duplication. */
.partners-mobile{display:none}
@media (max-width:759px){
  main{display:flex;flex-direction:column}
  /* Flex and grid items must size to the phone, not to their content.
     An item's automatic minimum size is its min-content width, and
     engines resolve that differently for nested grid/flex content —
     select fields, logo bands, card grids, nowrap accent spans. The
     Water Heaters view carries the most nested grid/flex content of
     any page here (hero grid, quote form, logo bands, card grids),
     and on the phone its column rendered wider than the screen, with
     text cut mid-word at the right edge, while Chromium measured no
     overflow at any width — the failure only ever showed in the
     phone's engine, which is why fixes verified in Chromium did not
     hold. min-width:0 is the spec-level correction for this failure
     class: items shrink to the track they were given instead of
     forcing the track wider. */
  main>*,.wh-grid>*,.hero-grid>*,.f-row>*,.type-grid>*,.rebate-grid>*,
  .wh-cards>*,.wh-trust>*,.plate-wrap>*,.town-grid>*,.area-top>*,
  .state-band>*,.rinnai-band>*,.fin-band>*,.pm-band>*{min-width:0}
  main>.hero{order:1}
  main>#services{order:2}
  main>#plans{order:3}
  main>#trane{order:4}
  main>#repair-or-replace{order:5}
  main>#compare{order:6}
  main>#reviews{order:7}
  main>#iaq{order:8}
  main>#water{order:9}
  main>#offers{order:10}
  main>#partners{order:11}
  main>#promise{order:12}
  main>#area{order:13}
  main>#faq{order:14}
  main>.wh-view{order:15}
  /* phone homepage stays lean: the Repair-or-Replace checker and the
     Current Offers band are dropped from the homepage on phones only —
     both stay on desktop, and the offers still live on the Offers
     page view, which phones keep */
  main>#repair-or-replace{display:none}
  main>#offers{display:none}
  /* tighter hero spacing so the quote form's first field clears the
     fixed bottom call bar on the first screen */
  .hero{padding-top:8px}
  .hero-eyebrow{padding:6px 13px}
  .hero .hero-copy h1{margin:6px 0;font-size:32px;line-height:1.06}
  .hero-ctas{margin:6px 0 0}
  .hero .hero-ctas .btn{padding:11px 18px}
  .quote-card .qc-sub{margin-bottom:8px}
  .quote-card h2{font-size:20px}
  .field label{margin-bottom:3px}
  /* hero: quote form moves up, right under the headline copy + call/book
     buttons; the trust row and phone note follow it */
  .hero-grid{display:flex;flex-direction:column;gap:0}
  .hero-copy{display:contents}
  .hero-eyebrow{order:1}
  .hero-copy h1{order:2}
  .hero-sub{order:3}
  .hero-ctas{order:4}
  .hero-grid .quote-card{order:5;margin-top:6px}
  .hero-phone-note{order:6}
  .trust-row{order:7}
  /* one Google block only on mobile: the full reviews section below */
  .hero .rating-strip{display:none}
  /* partner badges: out of Services on mobile; the dedicated partners
     band after Trane (below) carries them instead */
  #services .badges{display:none}
  #partners{display:block}
  #partners .badges{margin-top:0}
}

/* ---------- "Our Promise" band (desktop only, hidden below 1020px) ----------
   A light card straddling the dark plans band above and the light reviews
   band below; the technician photo rises above the card's top edge. */
.promise-sec{display:none}
@media (min-width:1020px){
  .promise-sec{
    display:block;padding:110px 0 0;
    background:linear-gradient(180deg,transparent 0,transparent 58%,#f5f9ff 58%,#f5f9ff 100%);
  }
  .promise-card{
    position:relative;display:grid;grid-template-columns:.92fr 1.08fr;gap:54px;align-items:stretch;
    background:linear-gradient(165deg,#ffffff,#eef3fa);color:#16283f;border-radius:28px;
    padding:56px 60px 56px 48px;box-shadow:0 34px 80px rgba(0,0,0,.38);
  }
  .promise-photo{position:relative;margin:-160px 0 -56px}
  .promise-photo img{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;
    border-radius:22px 22px 0 0;box-shadow:0 24px 55px rgba(10,25,50,.35);
  }
  .promise-copy{align-self:center}
  .promise-copy .pr-kicker{font-weight:800;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--lime-deep);margin-bottom:12px}
  .promise-copy h2{font-size:clamp(30px,2.9vw,42px);font-weight:800;color:#10233c;line-height:1.16}
  .promise-copy .pr-body{color:#43597c;font-size:16.5px;margin-top:16px;max-width:34em}
  .promise-points{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:11px}
  .promise-points li{display:flex;gap:11px;align-items:flex-start;font-weight:700;color:#22385c;font-size:15.5px}
  .promise-points li svg{color:var(--lime-deep);flex:none;margin-top:3px}
  .promise-sign{margin-top:24px;font-family:var(--font-d);font-weight:700;font-size:16px;color:#10233c}
  .promise-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
  .btn-dark{background:#12263f;color:#fff;box-shadow:0 12px 30px rgba(10,25,50,.3)}
  .btn-dark:hover{filter:brightness(1.15)}
  .btn-outline-dark{background:transparent;color:#12263f;border:1.5px solid #12263f}
  .btn-outline-dark:hover{background:rgba(18,38,63,.06)}
}

/* ---------- price match band (replacement pages/sections only) ---------- */
.pm-band{
  margin-top:26px;display:flex;gap:16px;align-items:flex-start;
  background:linear-gradient(150deg,var(--panel-2),var(--panel));
  border:1px solid rgba(255,210,62,.45);border-radius:20px;padding:22px 24px;
  box-shadow:0 16px 40px rgba(0,0,0,.28);
}
.pm-band .pm-ico{width:46px;height:46px;border-radius:50%;flex:none;display:grid;place-items:center;background:rgba(255,190,40,.12);border:1px solid rgba(255,210,62,.4);color:var(--yellow)}
.pm-band h3{font-size:18px;margin-bottom:5px}
.pm-band h3 .pm-tag{color:var(--yellow)}
.pm-band p{color:var(--ink-2);font-size:15px}
.pm-band p strong{color:#fff}
.pm-band .pm-cond{margin-top:9px;font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--ink-3);text-transform:uppercase}
.pm-band .pm-cond span{color:var(--sky)}
/* ---------- top brand strip: transparent logos on the site background ---------- */
.brand-strip{position:relative;overflow:hidden;border-bottom:1px solid var(--line-soft);padding:16px 0 14px;background:transparent}
.brand-strip-label{text-align:center;font-weight:800;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);margin-bottom:10px}
.brand-strip-viewport{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.brand-strip-track{display:flex;width:max-content;animation:mq-scroll 32s linear infinite}
.brand-strip:hover .brand-strip-track{animation-play-state:paused}
.bs-half{display:flex;align-items:center}
.bs-item{flex:none;display:flex;align-items:center;padding:0 34px}
.bs-item img{width:auto;object-fit:contain}
.bs-item .bs-trane{height:40px}
.bs-item .bs-state{height:46px}
.bs-item .bs-rinnai{height:40px}
.bs-item .bs-halo{height:38px}
.bs-item .bs-april{height:36px}
@media (max-width:759px){.brand-strip{padding:12px 0 10px}.bs-item{padding:0 22px}.bs-item .bs-trane{height:30px}.bs-item .bs-state{height:34px}.bs-item .bs-rinnai{height:30px}.bs-item .bs-halo{height:28px}.bs-item .bs-april{height:27px}}

/* ---------- scrolling logos: NO white boxes anywhere ---------- */
.mq-tile,.mq-tile.mq-dark,.mq-tile.mq-clear{background:transparent!important;border-color:transparent!important;box-shadow:none!important}
.badge-tile{background:transparent!important;border-color:transparent!important;box-shadow:none!important}

/* ---------- financing band (homepage, all screens) ---------- */
.fin-band{margin:26px 0 0;border-radius:22px;padding:26px 28px;display:flex;flex-wrap:wrap;gap:18px 26px;align-items:center;background:linear-gradient(135deg,#3b67a6 0%,#2b4c82 55%,#234270 100%);border:1px solid rgba(255,210,62,.55);box-shadow:0 18px 46px rgba(0,0,0,.32);color:#eef4ff;position:relative;z-index:1}
.fin-band .fin-big{font-family:var(--font-d);font-weight:800;font-size:clamp(28px,3.4vw,40px);color:var(--yellow);line-height:1.05;text-shadow:0 0 22px rgba(255,200,50,.28)}
.fin-band .fin-big small{display:block;font-size:15px;color:#fff;letter-spacing:.02em;margin-top:6px;text-shadow:none}
.fin-band>div{flex:1 1 340px}
.fin-band h2{font-size:20px;margin-bottom:5px;color:#fff}
.fin-band .fin-note{color:#a9bedd}
.fin-band .fin-wf-chip{box-shadow:0 10px 24px rgba(0,0,0,.3)}
.fin-band p{color:var(--ink-2);font-size:15px}
.fin-band p strong{color:#fff}
.fin-note{flex-basis:100%;font-size:13px;color:var(--ink-3);font-weight:600}
.fin-inline{margin-top:16px;border:1px solid rgba(255,210,62,.45);background:rgba(255,190,40,.08);border-radius:14px;padding:13px 16px;color:var(--ink-2);font-size:14.5px}
.fin-inline strong{color:var(--yellow)}
@media (max-width:759px){.fin-band{padding:20px 18px;margin-top:18px}.fin-band .btn{flex:1 1 100%}}
/* ---------- enhanced financing band (Water Heaters + Trane pages only) ---------- */
.fin-band--plus{padding:32px 34px;gap:22px 30px;margin-top:30px}
.fin-band--plus .fin-big{font-size:clamp(34px,4vw,48px)}
.fin-band--plus h2{font-size:clamp(21px,2.4vw,25px);margin-bottom:8px}
.fin-band--plus .fin-wf-chip{margin:16px 0 0}
.fin-band--plus .fin-wf-chip img{width:132px}
.fin-points{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.fin-points li{display:flex;gap:9px;align-items:flex-start;color:var(--ink-2);font-size:14.5px;line-height:1.5}
.fin-points li svg{flex:none;color:var(--yellow);margin-top:3px}
.fin-points li strong{color:#fff}
@media (max-width:759px){.fin-band--plus{padding:24px 20px}}
/* ---------- service area map ---------- */
.area-map{height:440px;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line-soft);background:#28497e;margin:0 0 26px}
@media (max-width:759px){.area-map{height:340px}}
.area-map .pin{width:26px;height:26px;border-radius:50%;background:#0b2a52;color:#fff;border:2px solid #7eb8ff;display:grid;place-items:center;font-family:var(--font-d);font-weight:700;font-size:12px;line-height:1;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.4)}
.area-map .pin--on{background:var(--yellow);color:#1c1503;border-color:#ffe89a}
.area-chips span{cursor:pointer}
.area-chips span.map-selected{background:var(--yellow);color:#1c1503;border-color:#ffe89a}

/* ---------- IAQ section ---------- */
.iaq-head{display:flex;flex-wrap:wrap;gap:18px 30px;align-items:flex-end;justify-content:space-between}
.iaq-head .sec-head{margin-bottom:0}
.iaq-brand{flex:none;padding-bottom:6px}
.iaq-brand img{height:44px;width:auto}
.iaq-brand p{color:var(--ink-3);font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-top:7px;text-align:left}
.iaq-grid{display:grid;gap:16px;margin-top:30px}
.iaq-card{background:linear-gradient(165deg,var(--panel-2),var(--panel));border:1px solid var(--line-soft);border-radius:var(--radius);padding:24px;display:flex;flex-direction:column;gap:8px}
.iaq-card .w-ico{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:rgba(87,202,255,.1);border:1px solid var(--line);color:var(--sky);margin-bottom:6px}
.iaq-card h3{font-size:18.5px}
.iaq-card p{color:var(--ink-2);font-size:15px;flex:1}
.iaq-tag{display:inline-block;align-self:flex-start;padding:3px 10px;border-radius:99px;border:1px solid rgba(126,184,255,.55);color:#7eb8ff;font-weight:800;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.iaq-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px;align-items:center}
.iaq-ctas .note{color:var(--ink-3);font-size:14px;font-weight:600}
@media (min-width:760px){.iaq-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1020px){.iaq-grid{grid-template-columns:repeat(4,1fr)}}

/* ---------- homepage Water Filtration section (HALO, teal) ---------- */
#water .sec-head .kicker{color:#2de2c5}
#water .sec-head .kicker::before{background:#2de2c5;box-shadow:0 0 8px rgba(45,226,197,.45)}
.wf-home-head{display:flex;flex-wrap:wrap;gap:18px 30px;align-items:flex-end;justify-content:space-between}
.wf-home-head .sec-head{margin-bottom:0}
.wf-home-head .wf-logo-chip{margin-bottom:4px}
#water .wf-feature{margin-top:30px}
#water .opt-tag{display:inline-block;border:1px solid rgba(45,226,197,.6);color:#2de2c5;border-radius:999px;padding:4px 11px;font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px}
#water .wh-cards{margin-top:26px}
#water .wh-card .w-ico{color:#2de2c5;border-color:rgba(45,226,197,.55);background:rgba(45,226,197,.12)}

/* ---------- homepage Financing section (full section, Wells Fargo) ---------- */
#financing .sec-head .kicker{color:var(--yellow)}
#financing .sec-head .kicker::before{background:var(--yellow);box-shadow:0 0 8px rgba(255,200,50,.4)}
.fin-panel{display:grid;gap:30px;border-radius:24px;padding:30px;background:linear-gradient(120deg,rgba(255,190,40,.15),rgba(61,134,255,.13) 60%,rgba(87,202,255,.07));border:1px solid rgba(255,210,62,.5);box-shadow:0 22px 55px rgba(0,0,0,.32)}
.fin-panel .fin-big{font-family:var(--font-d);font-weight:800;font-size:clamp(38px,4.6vw,56px);color:var(--yellow);line-height:1.02;text-shadow:0 0 26px rgba(255,200,50,.3)}
.fin-panel .fin-big small{display:block;font-size:clamp(15px,1.8vw,19px);color:#fff;letter-spacing:.03em;margin-top:8px;text-shadow:none}
.fin-panel .fin-lede{color:var(--ink-2);font-size:16px;margin-top:16px;max-width:34em}
.fin-panel .fin-lede strong{color:#fff}
.fin-wf-chip{display:inline-flex;align-items:center;background:linear-gradient(165deg,#ffffff,#eef2f9);border-radius:14px;padding:12px 18px;margin-bottom:20px}
.fin-wf-chip img{width:150px;max-width:100%;height:auto;display:block}
.fin-steps{list-style:none;margin:0;padding:0;display:grid;gap:16px;counter-reset:finstep}
.fin-steps li{display:flex;gap:14px;align-items:flex-start}
.fin-steps .s-num{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--grad-yellow);color:#1c1503;font-family:var(--font-d);font-weight:800;font-size:17px;box-shadow:var(--glow-yellow)}
.fin-steps h3{font-size:16.5px;margin-bottom:2px}
.fin-steps p{color:var(--ink-2);font-size:14.5px}
.fin-panel .fin-note{grid-column:1/-1;border-top:1px solid rgba(255,210,62,.3);padding-top:16px;margin-top:2px}
.fin-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px;align-items:center}
.fin-ctas .note{color:var(--ink-3);font-size:14px;font-weight:600}
@media (min-width:1020px){
  .fin-panel{grid-template-columns:1.02fr .98fr;gap:48px;padding:40px;align-items:start}
}
@media (max-width:759px){
  .fin-panel{padding:24px 20px}
  .fin-ctas .btn{flex:1 1 100%;text-align:center}
}
/* ---------- Financing page ---------- */
#page-financing .page-head .kicker{color:var(--yellow)}
#page-financing .page-head .kicker::before{background:var(--yellow);box-shadow:0 0 8px rgba(255,200,50,.4)}
#page-financing .fin-panel{background:linear-gradient(135deg,#527fbc 0%,#3c6cae 55%,#345a95 100%);color:#eef4ff}
#page-financing .fin-steps h3{color:#fff}
#page-financing .fin-panel .fin-note{color:#a9bedd}
#page-financing .fin-wf-chip{box-shadow:0 10px 24px rgba(0,0,0,.3)}
.fin-qual{display:grid;gap:16px;margin-top:26px}
@media (min-width:760px){.fin-qual{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1020px){nav.main a[href="#/financing"]{color:var(--yellow)}nav.main a[href="#/financing"]:hover{color:#0e1c33}}

/* ---------- FAQ ---------- */
.faq-list{display:grid;gap:12px;max-width:920px}
.faq-item{background:linear-gradient(165deg,var(--panel-2),var(--panel));border:1px solid var(--line-soft);border-radius:16px;overflow:hidden}
.faq-item summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:12px;padding:18px 20px;font-family:var(--font-d);font-weight:700;font-size:16.5px;color:#fff}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary .faq-plus{margin-left:auto;flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,210,62,.5);color:var(--yellow);font-weight:800;line-height:1}
.faq-item .faq-a{padding:0 20px 19px;color:var(--ink-2);font-size:15px;max-width:52em}
.faq-item .faq-a strong{color:#fff}

/* ---------- Rinnai band (water heater page) ---------- */
.rinnai-band{display:flex;flex-wrap:wrap;gap:22px;align-items:center;background:linear-gradient(150deg,var(--panel-2),var(--panel));border:1px solid var(--line-soft);border-radius:var(--radius);padding:24px;margin-bottom:16px}
.rinnai-band>div{flex:1 1 320px}
.rinnai-band .rinnai-logo-wrap{flex:none;display:flex;align-items:center}
.rinnai-band .rinnai-logo-wrap img{width:230px;max-width:100%;height:auto}
.rinnai-band h3{font-size:19px;margin-bottom:6px}
.rinnai-band p{color:var(--ink-2);font-size:15px}
@media (max-width:759px){.rinnai-band{padding:18px}.rinnai-band .rinnai-logo-wrap img{width:170px}}

/* ---------- Our Promise REWORK: cut-out person on the site's own dark background, no photo card ---------- */
@media (min-width:1020px){
  .promise-sec{display:block;padding:84px 0 70px;background:transparent}
  .promise-card{position:relative;display:grid;grid-template-columns:.92fr 1.08fr;gap:54px;align-items:end;background:transparent;color:var(--ink);border-radius:0;padding:0;box-shadow:none;overflow:visible}
  .promise-photo{position:relative;margin:0;align-self:end;line-height:0}
  .promise-photo img{position:static;width:100%;height:auto;max-height:640px;object-fit:contain;object-position:bottom center;border-radius:0;box-shadow:none;filter:drop-shadow(0 22px 34px rgba(0,0,0,.45))}
  .promise-copy{align-self:center}
  .promise-copy .pr-kicker{color:var(--lime)}
  .promise-copy h2{color:#fff}
  .promise-copy .pr-body{color:var(--ink-2)}
  .promise-points li{color:#e8f0ff}
  .promise-points li svg{color:var(--lime)}
  .promise-sign{color:#fff}
  .promise-sec .btn-dark{background:var(--grad-yellow);color:#1c1503;box-shadow:var(--glow-yellow)}
  .promise-sec .btn-outline-dark{background:rgba(120,170,255,.08);color:var(--ink);border:1px solid var(--line)}
}

/* ---------- Our Promise photo: technician + Trane unit + Pro Sky truck (all screens) ----------
   Bright outdoor photo shown directly on the section's dark background —
   no card, panel, border or shadow. Its edges feather into the page
   background via a mask fade so the photo melts into the section instead
   of ending in a hard rectangle. Also makes the section visible below
   1020px (stacked: photo first, copy below). */
.promise-sec{display:block;padding:60px 0 54px;background:transparent}
.promise-card{position:relative;display:grid;grid-template-columns:1fr;gap:30px;align-items:start;background:transparent;color:var(--ink);border-radius:0;padding:0;box-shadow:none;overflow:visible}
.promise-photo{position:relative;margin:0;align-self:auto;line-height:0}
.promise-photo img{position:static;width:100%;height:auto;max-height:none;object-fit:contain;object-position:center;border-radius:0;box-shadow:none;filter:none;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 6%,#000 94%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 3%,#000 96%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent 0,#000 6%,#000 94%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 3%,#000 96%,transparent 100%);
  mask-composite:intersect}
.promise-copy{align-self:center}
.promise-copy .pr-kicker{font-weight:800;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--lime);margin-bottom:12px}
.promise-copy h2{font-size:clamp(28px,2.9vw,42px);font-weight:800;color:#fff;line-height:1.16}
.promise-copy .pr-body{color:var(--ink-2);font-size:16.5px;margin-top:16px;max-width:34em}
.promise-points{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:11px}
.promise-points li{display:flex;gap:11px;align-items:flex-start;font-weight:700;color:#e8f0ff;font-size:15.5px}
.promise-points li svg{color:var(--lime);flex:none;margin-top:3px}
.promise-sign{margin-top:24px;font-family:var(--font-d);font-weight:700;font-size:16px;color:#fff}
.promise-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.promise-sec .btn-dark{background:var(--grad-yellow);color:#1c1503;box-shadow:var(--glow-yellow)}
.promise-sec .btn-outline-dark{background:rgba(120,170,255,.08);color:var(--ink);border:1px solid var(--line)}
@media (min-width:1020px){
  .promise-sec{padding:84px 0 70px}
  .promise-card{grid-template-columns:.98fr 1.02fr;gap:54px;align-items:center}
  .promise-photo img{max-height:620px}
}
@media (max-width:759px){
  .promise-sec{padding:48px 0 42px}
  .promise-card{gap:24px}
  .promise-copy h2{font-size:27px}
  .promise-ctas .btn{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){.brand-strip-track{animation:none}}

/* ---------- Repair or Replace checker ---------- */
.ror-grid{display:grid;gap:18px;margin-top:6px}
.ror-card{background:linear-gradient(165deg,var(--panel-2),var(--panel));border:1px solid var(--line-soft);border-radius:var(--radius);padding:24px}
.ror-card h3{font-size:19px;margin-bottom:6px}
.ror-card .ror-sub{color:var(--ink-2);font-size:14.5px;margin-bottom:16px}
.ror-step{display:inline-block;padding:3px 10px;border-radius:99px;border:1px solid rgba(255,210,62,.55);color:var(--yellow);font-weight:800;font-size:11px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:10px}
.ror-types{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:14px}
.ror-types button{appearance:none;cursor:pointer;text-align:left;background:rgba(235,244,255,.06);border:1px solid rgba(160,200,255,.3);border-radius:12px;color:var(--ink);font-family:var(--font-b);font-weight:700;font-size:14.5px;padding:11px 13px;line-height:1.35}
.ror-types button small{display:block;font-weight:600;color:var(--ink-3);font-size:12.5px;margin-top:2px}
.ror-types button.on{border-color:var(--yellow);background:rgba(255,190,40,.12);color:#fff}
.ror-types button.on small{color:var(--ink-2)}
.ror-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ror-fields .field{margin-bottom:0}
.ror-life{margin-top:14px;border:1px solid var(--line-soft);background:rgba(87,202,255,.07);border-radius:12px;padding:12px 14px;color:var(--ink-2);font-size:14px}
.ror-life strong{color:#fff}
.ror-signals{display:grid;gap:9px}
.ror-signal{display:flex;gap:11px;align-items:flex-start;text-align:left;width:100%;appearance:none;cursor:pointer;background:rgba(235,244,255,.05);border:1px solid rgba(160,200,255,.26);border-radius:12px;padding:12px 14px;color:var(--ink-2);font-family:var(--font-b);font-size:14.5px;line-height:1.45}
.ror-signal .ror-box{flex:none;width:21px;height:21px;border-radius:6px;border:1.5px solid rgba(160,200,255,.55);display:grid;place-items:center;color:transparent;margin-top:1px}
.ror-signal.on{border-color:rgba(255,210,62,.65);background:rgba(255,190,40,.09);color:#eef4ff}
.ror-signal.on .ror-box{background:var(--yellow);border-color:var(--yellow);color:#1c1503}
.ror-signal strong{color:#fff;display:block;font-size:15px}
.ror-result{border-radius:var(--radius);padding:26px;border:1px solid rgba(130,185,255,.45);background:radial-gradient(640px 300px at 12% -10%,rgba(96,180,255,.34),transparent 60%),linear-gradient(160deg,#3f6db0,#325f9e)}
.ror-eq{font-family:var(--font-d);font-weight:800;font-size:clamp(24px,3vw,34px);line-height:1.2;color:#fff}
.ror-eq .ror-prod{color:var(--yellow)}
.ror-bar{height:12px;border-radius:99px;background:rgba(235,244,255,.12);margin:16px 0 8px;overflow:hidden}
.ror-bar i{display:block;height:100%;width:0;border-radius:99px;background:var(--grad-yellow);transition:width .45s ease}
.ror-bar.over i{background:linear-gradient(90deg,#ff9a5e,#ff5a4d)}
.ror-scale{display:flex;justify-content:space-between;color:var(--ink-3);font-size:12.5px;font-weight:700}
.ror-verdict{margin-top:18px;border-top:1px solid var(--line-soft);padding-top:16px}
.ror-verdict .rv-tag{display:inline-block;padding:4px 12px;border-radius:99px;font-weight:800;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:9px}
.rv-repair{background:rgba(74,222,128,.16);color:#4ade80;border:1px solid rgba(74,222,128,.5)}
.rv-close{background:rgba(255,210,62,.14);color:var(--yellow);border:1px solid rgba(255,210,62,.55)}
.rv-replace{background:rgba(255,90,77,.14);color:#ff9a8d;border:1px solid rgba(255,90,77,.5)}
.ror-verdict h3{font-size:21px;margin-bottom:6px}
.ror-verdict p{color:var(--ink-2);font-size:15px}
.ror-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.ror-note{color:var(--ink-3);font-size:13px;margin-top:16px}
@media (min-width:1020px){.ror-grid{grid-template-columns:1fr 1fr 1.1fr;align-items:start}.ror-result{position:sticky;top:64px}}
@media (max-width:759px){.ror-fields{grid-template-columns:1fr}.ror-card{padding:19px}.ror-result{padding:20px}}

@media (max-width:759px){
  main>#services{order:2}
  main>#plans{order:3}
  main>#trane{order:4}
  main>#repair-or-replace{order:5}
  main>#compare{order:6}
  main>#reviews{order:7}
  main>#iaq{order:8}
  main>#water{order:9}
  main>#offers{order:10}
  main>#partners{order:11}
  main>#promise{order:12}
  main>#area{order:13}
  main>#faq{order:14}
  main>.wh-view{order:15}
}

/* ---------- logo red accents ----------
   The red from the Pro Sky logo (the "PRO" lettering), used as a light
   touch only: the hero headline's closing words, the eyebrow dot, the
   header phone icon, and a short red dash ahead of every section kicker.
   Lifted slightly (--red) so it reads on the dark navy; the deeper
   --red-deep is for light bands. */
:root{--red:#ff2e35;--red-deep:#d80d1a}
.hero h1 .hl-red{color:var(--red);text-shadow:0 0 26px rgba(255,46,53,.38)}
.hero-eyebrow .dot{background:var(--red);box-shadow:0 0 10px var(--red)}
.phone-link .p-ico{background:rgba(255,46,53,.12);border-color:rgba(255,46,53,.42);color:var(--red)}
.sec-head .kicker::before,.plan-feature-head .pf-kicker::before,.promise-copy .pr-kicker::before{
  content:"";display:inline-block;width:24px;height:3px;border-radius:2px;background:var(--red);
  vertical-align:middle;margin:-3px 10px 0 0;box-shadow:0 0 8px rgba(255,46,53,.4);
}
.band-light .sec-head .kicker::before{background:var(--red-deep);box-shadow:none}

/* ---------- mobile / tablet menu ----------
   Below 1020px the desktop pill nav is hidden, so the header gets a
   hamburger button and a drop-down panel of section links — visitors tap
   a section name instead of scrolling the whole page. Desktop unchanged. */
.menu-btn{display:none}
.mobile-menu{display:none}
@media (max-width:1019px){
  .menu-btn{
    display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:12px;cursor:pointer;
    background:rgba(120,170,255,.08);border:1px solid var(--line);color:var(--ink);
  }
  .menu-btn .ic-close{display:none}
  .menu-btn.open .ic-close{display:block}
  .menu-btn.open .ic-open{display:none}
  .mobile-menu.open{display:block;border-top:1px solid var(--line-soft);padding:14px 0 18px}
  .mm-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
  .mm-grid a{
    display:flex;align-items:center;gap:8px;padding:13px 14px;border-radius:12px;min-height:48px;
    background:rgba(120,170,255,.07);border:1px solid var(--line-soft);
    font-family:var(--font-d);font-weight:700;font-size:15px;color:var(--ink);text-decoration:none;line-height:1.2;
  }
  .mm-grid a:active{background:rgba(120,170,255,.16)}
  .mm-grid a svg{color:var(--sky);flex:none;margin-left:auto}
  .mm-grid a.mm-quote{
    grid-column:1/-1;justify-content:center;background:var(--grad-yellow);color:#1c1503;border:0;
    box-shadow:var(--glow-yellow);font-size:15.5px;
  }
  .mm-grid a.mm-quote svg{color:#1c1503;margin-left:0}
  /* Services group: the individual service pages (Water Heaters, Water
     Filtration, Indoor Air Quality, Duct Cleaning) tuck under one
     expandable row instead of four separate top-level tiles */
  .mm-group{grid-column:1/-1}
  .mm-group-btn{
    display:flex;align-items:center;gap:8px;width:100%;padding:13px 14px;border-radius:12px;min-height:48px;
    background:rgba(120,170,255,.07);border:1px solid var(--line-soft);cursor:pointer;
    font-family:var(--font-d);font-weight:700;font-size:15px;color:var(--ink);line-height:1.2;text-align:left;
  }
  .mm-group-btn:active{background:rgba(120,170,255,.16)}
  .mm-group-btn svg{color:var(--sky);flex:none;margin-left:auto;transition:transform .18s ease}
  .mm-group.open .mm-group-btn svg{transform:rotate(180deg)}
  .mm-sub{display:none;margin-top:9px;flex-direction:column;gap:9px}
  .mm-group.open .mm-sub{display:flex}
  .mm-sub a{margin-left:18px;background:rgba(120,170,255,.045)}
  /* anchored sections clear the slim sticky offer bar when jumped to from the menu */
  section[id],#quote{scroll-margin-top:60px}
}

/* ---------- sub-pages (menu tabs as independent page views) ----------
   Each menu tab opens its own page view inside <main> (same pattern as the
   Water Heaters page): homepage blocks hide, the page view shows, and every
   page carries a Back to Home link at the top and bottom. Routes use
   #/name hashes so homepage section anchors (#services, #offers…) keep
   working for in-page and footer links. */
.page-view[hidden]{display:none}
.page-head{padding:30px 0 4px}
.page-head .kicker{font-weight:800;font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--lime);margin:16px 0 10px}
.page-head .kicker::before{content:"";display:inline-block;width:24px;height:3px;border-radius:2px;background:var(--red);vertical-align:middle;margin:-3px 10px 0 0;box-shadow:0 0 8px rgba(255,46,53,.4)}
.page-head h1{font-size:clamp(32px,4.4vw,54px);font-weight:800;max-width:15em}
.page-head .page-lede{color:var(--ink-2);font-size:17px;max-width:42em;margin-top:12px}
.back-home{
  display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:12px;min-height:46px;
  background:rgba(120,170,255,.08);border:1px solid var(--line);
  font-family:var(--font-d);font-weight:700;font-size:15px;color:var(--ink);text-decoration:none;
}
.back-home svg{color:var(--yellow);flex:none}
.back-home:hover{background:rgba(120,170,255,.16)}
.page-view>section{padding:40px 0 4px}
.page-foot{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:46px 0 12px;padding-top:26px;border-top:1px solid var(--line-soft)}
.page-foot .spacer{flex:1}
/* Every width: each sub-page keeps its big bottom CTA card (.final), but
   the strip right below it (.page-foot) repeats the card's phone number
   and Get a Free Quote link, so that duplicate strip of buttons is
   removed at ALL widths (phones and desktop alike) — only the Back to
   Home link stays. The two real form sections (Water Heaters #wh-quote,
   Washington Gas #wg-signup) are untouched, as is the fixed mobile
   bottom bar. This also covers the town pages, whose .page-foot is
   generated by the town-page script with the same two buttons. */
.page-foot .btn{display:none}
.pg-rev{display:grid;gap:16px}
.pg-rev .rev-card{flex:none}
@media (min-width:760px){.pg-rev{grid-template-columns:1fr 1fr}}
.pg-score{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;background:linear-gradient(140deg,#f8fbff,#e8f0fd);color:#16283f;border-radius:18px;padding:20px 24px;margin-bottom:22px}
.pg-score .gb-score{font-size:44px}
.pg-score .stars svg{width:22px;height:22px}
.pg-score .pg-count{font-family:var(--font-d);font-weight:800;font-size:20px;color:#12263f}
.pg-score .pg-count small{display:block;font-family:var(--font-b);font-size:13px;font-weight:700;color:#5a6f8c}
/* ---------- Our Work gallery ---------- */
.work-filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px}
.work-filters button{appearance:none;border:1px solid var(--line);background:rgba(120,170,255,.07);color:var(--ink-2);font-family:var(--font-d);font-weight:700;font-size:14.5px;padding:10px 18px;border-radius:999px;cursor:pointer;min-height:44px}
.work-filters button:hover{color:#fff;border-color:rgba(120,170,255,.45)}
.work-filters button.on{background:var(--grad-yellow);color:#0e1c33;border-color:transparent;box-shadow:0 4px 16px rgba(255,190,40,.3)}
.work-grid{display:grid;gap:20px;align-items:start}
@media (min-width:760px){.work-grid{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.work-grid{grid-template-columns:1fr 1fr 1fr}}
.work-card{background:linear-gradient(150deg,var(--panel-2),var(--panel));border:1px solid var(--line-soft);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;box-shadow:0 14px 34px rgba(2,10,26,.25);transition:border-color .2s}
.work-card:hover{border-color:rgba(110,175,255,.45)}
.work-card[hidden]{display:none}
/* fixed 4:3 photo stage at every width — the figure is the ratio box and the
   (already 4:3, retouched) photo fills it, so a card photo is ~269px tall on
   a 390px phone and the same proportion on desktop, never natural-height */
.work-card figure{margin:0;line-height:0;position:relative;aspect-ratio:4/3;overflow:hidden;background:#1e3d66;flex:none}
.work-card figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.work-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:9px;flex:1}
.work-tag{align-self:flex-start;font-family:var(--font-d);font-weight:800;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--sky);background:rgba(87,202,255,.1);border:1px solid rgba(87,202,255,.35);padding:5px 11px;border-radius:999px}
.work-card h3{font-size:19px;line-height:1.3}
.work-card p{color:var(--ink-2);font-size:15px;line-height:1.55}
/* spec chips flow right under the description — never pinned to the card
   bottom, so short cards leave no dead dark-blue gap */
.work-specs{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px;padding-top:8px}
@media (min-width:1020px){
  .work-body{padding:22px 24px 24px}
  .work-card h3{font-size:20px}
  .work-card p{font-size:15.5px}
}
.work-specs span{font-family:var(--font-d);font-weight:700;font-size:12.5px;color:var(--ink);background:rgba(255,255,255,.06);border:1px solid var(--line-soft);padding:5px 10px;border-radius:8px}
@media (max-width:759px){
  main>.page-view{order:9}
  .page-head{padding-top:18px}
  .page-view>section{padding:30px 0 2px}
  /* the .page-foot duplicate buttons are hidden at every width — see
     the .page-foot rule with the base styles above */
}
@media (min-width:1020px){
  nav.main a[href="#/plans"]{color:var(--yellow)}
  nav.main a[href="#/plans"]:hover{color:#0e1c33}
  nav.main a[href="#/trane"]{color:#ff9a8d}
  nav.main a[href="#/trane"]:hover{color:#0e1c33}
  nav.main a[href="#/water-heaters"]{color:var(--sky)}
  nav.main a[href="#/water-heaters"]:hover{color:#0e1c33}
}

/* ---------- brand accents (restrained, one touch per brand) ---------- */
#trane .sec-head .kicker{color:#ff9a8d}
#trane .sec-head .kicker::before{background:#ff5a4d;box-shadow:0 0 8px rgba(255,90,77,.45)}
.trane-badge{border-color:rgba(255,90,77,.38)}
#iaq .sec-head .kicker{color:#7eb8ff}
#iaq .sec-head .kicker::before{background:#3d86ff;box-shadow:0 0 8px rgba(61,134,255,.45)}
.state-band{border-top:3px solid rgba(216,30,44,.8)}
.rinnai-band{border-top:3px solid rgba(255,106,90,.85)}
.halo-card .w-ico{color:#6feaff;border-color:rgba(99,230,255,.5);background:rgba(99,230,255,.1)}
.halo-card .opt-tag{border-color:rgba(99,230,255,.55);color:#6feaff}

/* ---------- IAQ featured brands (AprilAire + Air Scrubber) ----------
   Logos only: transparent cut-outs, no card, no frame, no caption —
   both wordmarks at one height so they sit as a matched pair. */
.iaq-brands{display:flex;gap:16px 36px;flex-wrap:wrap;align-items:center}
.iaq-brands .iaq-brand{background:none;border:0;border-radius:0;padding:0;box-shadow:none;display:flex;align-items:center}
.iaq-brands .iaq-brand img{height:46px;width:auto}
#page-iaq .iaq-brands{margin:22px 0 26px}
@media (max-width:759px){.iaq-brands{gap:12px 26px}.iaq-brands .iaq-brand img{height:38px}}

/* ---------- rotating offer bar (top of page, scrolls away with the page) ----------
   The bar is NOT sticky: it sits at the top in normal flow and scrolls
   off with the page. Once it has scrolled out of view, the small
   floating offer pill (.offer-pill, below) takes over so the current
   offer stays one tap away without pinning a full bar to the screen. */
.offer-band{position:relative;padding:14px 0 16px;background:linear-gradient(180deg,rgba(33,62,110,.95),rgba(33,62,110,.85))}
.offer-band .offer-rot{box-shadow:0 10px 26px rgba(2,8,20,.42),var(--glow-yellow)}
@media (max-width:759px){.offer-band{padding:10px 0 12px}}

/* ---------- floating offer pill (appears after the offer bar scrolls away) ----------
   DESKTOP / TABLET ONLY — hidden entirely on phones (see the max-width
   block below). A slim vertical tab fixed to the LEFT edge, vertically
   centered, so it stays clear of both bottom corners: bottom-right holds
   the Back to Top button. Collapsed, it hugs the edge as a narrow tab
   showing the currently rotating offer in short form; hovering expands
   it into a readable card just off the edge, and clicking the expanded
   pill follows the offer's link. */
.offer-pill{
  position:fixed;left:0;top:50%;z-index:75;
  display:none;transform:translateY(-50%);
}
.offer-pill.show{display:block;animation:offerPillIn .3s ease}
@keyframes offerPillIn{from{opacity:0;transform:translate(-10px,-50%)}to{opacity:1;transform:translate(0,-50%)}}
.offer-pill a{
  display:flex;align-items:center;gap:6px;text-decoration:none;color:#1c1503;
  background:var(--grad-yellow);border-radius:0 14px 14px 0;padding:13px 5px;
  box-shadow:6px 10px 24px rgba(2,8,20,.45),var(--glow-yellow);
  font-size:11.5px;font-weight:700;line-height:1.35;
  writing-mode:vertical-rl;transform:rotate(180deg);
  max-height:min(320px,62vh);overflow:hidden;
}
.offer-pill .op-tag{font-family:var(--font-d);font-weight:800;white-space:nowrap}
.offer-pill .op-short{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:0}
.offer-pill .op-full{display:none}
.offer-pill:hover a,.offer-pill:focus-within a,.offer-pill.open a{
  writing-mode:horizontal-tb;transform:none;max-height:none;overflow:visible;
  border-radius:16px;margin-left:10px;padding:11px 14px;align-items:flex-start;
  max-width:min(340px,calc(100vw - 48px));
}
.offer-pill:hover .op-short,.offer-pill:focus-within .op-short,.offer-pill.open .op-short{display:none}
.offer-pill:hover .op-full,.offer-pill:focus-within .op-full,.offer-pill.open .op-full{display:inline}
.offer-pill a:focus-visible{outline:2px solid #8cc3ff;outline-offset:2px}
@media (prefers-reduced-motion:reduce){.offer-pill.show{animation:none}}
/* phones: NO floating offer pill at all (owner request, Nov 9). On a phone
   screen the edge tab kept crowding/cropping page content — worst on the
   Water Heaters page — and the offers already live in the top offer bar
   plus the bottom Call / Book / Free Quote bar, so nothing is lost. The
   pill stays on desktop/tablet widths only. The .show rule above sets
   display:block, so hide it here with the same specificity, later in the
   cascade, and cover the expanded states too. */
@media (max-width:759px){
  .offer-pill,.offer-pill.show{display:none}
}
@media (prefers-reduced-motion:reduce){.offer-pill.show{animation:none}}
@media (max-width:759px){main>.page-view{order:12}}

/* ---------- water heater page: lady video band ---------- */
.wh-video-band{display:grid;gap:24px;margin-top:26px;background:linear-gradient(150deg,var(--panel-2),var(--panel));border:1px solid var(--line-soft);border-radius:var(--radius);padding:24px}
.wh-video-band h2{font-size:clamp(22px,3vw,30px);margin-bottom:10px}
.wh-video-band p{color:var(--ink-2)}
@media (min-width:760px){.wh-video-band{grid-template-columns:340px 1fr;align-items:center}}
.wh-video-band .wg-video-frame{margin-inline:auto}
@media (max-width:759px){.wh-video-band{padding:18px;gap:18px;margin-top:22px}.wh-video-band h2{font-size:24px}.wh-video-band .wg-video-frame{width:100%;max-width:340px;margin-inline:auto}}

/* ---------- WeatherGuard feature band ---------- */
.wg-kicker{font-weight:800;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:#ff9a8d;margin-bottom:8px}
.wg-band{display:grid;gap:24px;align-items:center;margin-top:30px;background:linear-gradient(150deg,var(--panel-2),var(--panel));border:1px solid rgba(255,90,77,.32);border-radius:var(--radius);padding:26px}
.wg-band .wg-img{display:grid;place-items:center}
.wg-band .wg-img img{max-height:300px;width:auto;max-width:100%}
.wg-band h3{font-size:clamp(21px,2.6vw,27px);margin-bottom:8px}
.wg-band p{color:var(--ink-2);font-size:15.5px}
@media (min-width:860px){.wg-band{grid-template-columns:320px 1fr}}

/* ---------- system comparison: temperature chart + color cards + takeaway ---------- */
.vs-head{margin-top:38px;max-width:780px}
#compare .vs-head{margin-top:0}
.vs-head h3{font-size:clamp(22px,3vw,30px)}
.vs-head p{color:var(--ink-2);margin-top:8px}
.vs-chart{background:linear-gradient(160deg,#335c96,#25487a);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px 16px;margin:22px 0 0}
.vs-chart-cap{font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);margin-bottom:12px}
.vs-chart svg{width:100%;height:auto;display:block}
.vs-chart text{font-family:var(--font-d);font-weight:700;fill:#9db8d9}
.vs-chart .set-label{fill:#e8f2ff}
.vs-legend{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:12px;color:var(--ink-2);font-size:13.5px;font-weight:700}
.vs-legend span{display:inline-flex;align-items:center;gap:8px}
.vs-legend i{width:11px;height:11px;border-radius:50%;background:var(--c);flex:none}
.vs-legend .lg-set i{width:20px;height:0;border-radius:0;background:none;border-top:2px dashed #e8f2ff}
.vs-grid{display:grid;gap:16px;margin-top:20px}
.vs-card{border-radius:var(--radius);padding:24px;position:relative;color:#20344f;display:flex;flex-direction:column}
.vs-card h3{font-size:19px;color:#12263f}
.vs-chead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.vs-chead svg{flex:none;margin-top:3px}
.vs-points{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:8px}
.vs-points li{background:rgba(255,255,255,.78);border-radius:10px;padding:8px 12px;font-size:14.5px;font-weight:600;color:#2c425f;line-height:1.35}
.vs-points li strong{font-family:var(--font-d)}
.vs-points li.feat{background:#fff;font-weight:700;color:#16283f}
.vs-multi li.feat{border:1.5px solid rgba(214,60,52,.6)}
.vs-variable li.feat{border:1.5px solid rgba(47,158,68,.65)}
.vs-best{margin-top:auto;border-radius:12px;padding:13px 15px;font-size:15px}
.vs-best p{margin:0}
.vs-best p+p{margin-top:7px}
.vs-best strong{font-family:var(--font-d)}
.vs-single{background:linear-gradient(165deg,#e9f7fe,#d3ecfb)}
.vs-single .vs-best{background:#1ea7dd;color:#052a40}
.vs-multi{background:linear-gradient(165deg,#fdeeee,#f8d9d9)}
.vs-multi .vs-best{background:#d63c34;color:#fff}
.vs-variable{background:linear-gradient(165deg,#e9f9ed,#cdefd7);border:1.5px solid rgba(87,217,119,.65);box-shadow:0 20px 50px rgba(0,0,0,.3),0 0 44px rgba(87,217,119,.14)}
.vs-variable .vs-best{background:#2f9e44;color:#fff}
.vs-badge{position:absolute;top:-13px;left:20px;background:linear-gradient(90deg,#37b24d,#2f9e44);color:#fff;font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:5px 12px;border-radius:999px;box-shadow:0 8px 22px rgba(47,158,68,.4)}
@media (min-width:1020px){.vs-grid{grid-template-columns:1fr 1fr 1.08fr}.vs-variable{transform:translateY(-8px)}}
.vs-takeaway{margin-top:22px;background:linear-gradient(150deg,var(--panel-2),var(--panel));border:1px solid var(--line);border-radius:var(--radius);padding:24px 26px}
.vs-takeaway h4{font-family:var(--font-d);font-size:19px;margin-bottom:12px}
.vs-eq{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-bottom:12px}
.vs-eq span{background:#325f9e;border:1px solid var(--line);color:#fff;font-family:var(--font-d);font-weight:700;font-size:14px;padding:7px 14px;border-radius:999px}
.vs-eq b{color:var(--yellow);font-size:16px}
.vs-takeaway p{color:var(--ink-2);font-size:15px;max-width:52em}
.vs-takeaway .vs-eq-note{margin-top:10px}
.vs-takeaway .vs-eq-note strong{color:#fff}
@media (max-width:759px){.vs-chart{padding:16px 14px 12px}.vs-takeaway{padding:20px 18px}}

/* ---------- featured furnaces (Trane page only) ---------- */
.furn-head{margin-top:38px;max-width:780px}
.furn-head h3{font-size:clamp(22px,3vw,30px)}
.furn-head p{color:var(--ink-2);margin-top:8px}
.furn-grid{display:grid;gap:16px;margin-top:24px}
@media (min-width:860px){.furn-grid{grid-template-columns:1fr 1fr}}
.furn-card{position:relative;background:linear-gradient(165deg,var(--panel-2),var(--panel));border:1px solid var(--line-soft);border-radius:var(--radius);padding:24px;display:flex;flex-direction:column}
.furn-card.furn-pop{border:1.5px solid rgba(87,217,119,.6);box-shadow:0 20px 50px rgba(0,0,0,.3),0 0 40px rgba(87,217,119,.12)}
.furn-badge{position:absolute;top:-13px;left:20px;background:linear-gradient(90deg,#37b24d,#2f9e44);color:#fff;font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:5px 12px;border-radius:999px;box-shadow:0 8px 22px rgba(47,158,68,.4)}
.furn-model{font-family:var(--font-d);font-weight:800;font-size:13px;letter-spacing:.14em;color:var(--sky);text-transform:uppercase}
.furn-card h3{font-size:21px;margin-top:4px}
.furn-afue{font-family:var(--font-d);color:var(--ink-2);font-size:15px;margin-top:6px}
.furn-afue strong{font-size:30px;color:#fff;font-weight:800}
.furn-pop .furn-afue strong{color:#57d977}
.furn-specs{list-style:none;margin:14px 0 16px;padding:0;display:grid;gap:8px}
.furn-specs li{background:rgba(120,170,255,.07);border:1px solid var(--line-soft);border-radius:10px;padding:8px 12px;color:var(--ink-2);font-size:14.5px;font-weight:600;line-height:1.35}
.furn-rebate{margin-top:auto;border-top:1px solid var(--line-soft);padding-top:14px;color:var(--ink-2);font-size:14.5px}
.furn-rebate strong{color:#fff}
.furn-rebate.good strong{color:#57d977}
.furn-note{margin-top:16px;color:var(--ink-3);font-size:13.5px;max-width:58em}
.furn-note strong{color:var(--ink-2)}

/* ---------- plan comparison: one panel, three columns ---------- */
.compare-grid.single{grid-template-columns:1fr}
.cmp3 .compare-head{grid-template-columns:1fr 1fr 1.05fr}
.cmp3 .compare-row{grid-template-columns:1fr 1fr 1.05fr}
.cmp3 .cr-m{padding:6px 16px 13px;font-size:14.5px;line-height:1.5;color:var(--ink-2);border-left:1px solid var(--line-soft)}
@media (max-width:759px){
  /* phone: the three plans stay side by side — three true columns with
     the column heads visible and compact type, never stacked */
  .cmp3 .compare-head{display:grid;grid-template-columns:.88fr 1fr 1.08fr}
  .cmp3 .compare-head span{padding:8px 7px;font-size:10.5px;line-height:1.3}
  .cmp3 .compare-head span+span{border-left:1px solid var(--line-soft)}
  .cmp3 .compare-row{grid-template-columns:.88fr 1fr 1.08fr}
  .cmp3 .cr-label{padding:10px 7px 0;font-size:11px}
  .cmp3 .cr-a,.cmp3 .cr-m,.cmp3 .cr-b{padding:5px 7px 10px;font-size:12px;line-height:1.5}
  .cmp3 .cr-m{border-left:1px solid var(--line-soft)}
  .cmp3 .cr-b{border-left:1px solid var(--line-soft)}
}

/* ---------- plan comparison: the Pro Sky column stands out ----------
   Wider column, bigger and brighter type, a strong yellow wash with a
   solid gold edge, and a ✓ marker on every Pro Sky cell — so the
   difference from the two muted columns reads at a glance. Applies to
   both three-column panels (homepage + Protection Plans page). */
.cmp3 .compare-head,.cmp3 .compare-row{grid-template-columns:.94fr 1fr 1.22fr}
.cmp3 .compare-head span:last-child{
  color:#ffd23e;font-size:15.5px;font-weight:800;
  background:linear-gradient(180deg,rgba(255,210,62,.26),rgba(255,181,46,.15));
  border-left:2px solid rgba(255,210,62,.8);
}
.cmp3 .compare-row .cr-b{
  color:#fff;font-weight:700;font-size:15.5px;
  background:linear-gradient(180deg,rgba(255,210,62,.14),rgba(255,181,46,.08));
  border-left:2px solid rgba(255,210,62,.6);
}
.cmp3 .compare-row .cr-b::before{content:"✓ ";color:#ffd23e;font-weight:800}
@media (max-width:759px){
  .cmp3 .compare-head{grid-template-columns:.8fr .95fr 1.18fr}
  .cmp3 .compare-row{grid-template-columns:.8fr .95fr 1.18fr}
  .cmp3 .compare-head span:last-child{font-size:11.5px}
  .cmp3 .compare-row .cr-b{font-size:12.5px}
}

/* ---------- partners on mobile: one scrolling marquee strip, not the static grid ---------- */
#partners .marquee{display:none}
@media (max-width:759px){
  #partners .badges-row{display:none}
  #partners .marquee{display:block;overflow:hidden;padding:6px 0 2px;mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
  #partners .marquee-track{display:flex;width:max-content;animation:mq-scroll 38s linear infinite}
  #partners .mq-group{display:flex;gap:10px;padding-right:10px}
  #partners .mq-tile{flex:none;display:flex;align-items:center;justify-content:center;height:62px;min-width:140px;padding:10px 16px;border-radius:14px;background:linear-gradient(165deg,#ffffff,#e9f0fb);border:1px solid #c7d9f6;box-shadow:0 8px 20px rgba(23,52,102,.10)}
  #partners .mq-tile img{max-height:36px;max-width:120px;width:auto;height:auto;object-fit:contain}
  #partners .mq-tile img.mq-shield{max-height:46px}
  #partners .mq-tile.mq-clear{background:transparent;border-color:transparent;box-shadow:none}
}

/* ---------- protection plan: monthly vs yearly (yearly featured) ---------- */
.pay-note{margin-top:18px;color:var(--ink-2);font-size:16.5px}
.pay-note .pay-yr{color:var(--yellow)}
.tier-mo{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:10px;padding:9px 13px;border:1px solid var(--line-soft);border-radius:12px;background:rgba(235,244,255,.04)}
.tm-label{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.tm-price{font-family:var(--font-d);font-weight:700;font-size:19px;color:var(--ink-2)}
.tm-price em{font-style:normal;font-size:12.5px;color:var(--ink-3);font-weight:600}
.tier-yr{position:relative;margin-top:12px;padding:13px;border-radius:12px;background:linear-gradient(120deg,rgba(255,210,62,.22),rgba(255,181,46,.1));border:1.5px solid rgba(255,210,62,.8)}
.ty-label{display:block;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--yellow)}
.ty-price{display:block;font-family:var(--font-d);font-weight:800;font-size:36px;color:#fff;line-height:1.08;margin-top:2px}
.ty-price em{font-style:normal;font-size:14px;color:var(--ink-2);font-family:var(--font-b);font-weight:600}
.ty-badge{position:absolute;top:-12px;right:10px;background:#4ade80;color:#06280f;font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:5px 10px;border-radius:999px;box-shadow:0 6px 18px rgba(74,222,128,.35)}
@media (max-width:759px){.plan-tier .tier-mo,.plan-tier .tier-yr{flex:1 1 100%}.ty-price{font-size:30px}}

/* ---------- protection plan: single-system price only ---------- */
.plan-tiers.single{grid-template-columns:1fr;max-width:560px}
.multi-note{margin-top:14px;color:var(--ink-3);font-size:14px;font-weight:600}

/* ---------- clickable partner logos ---------- */
a.mq-tile{text-decoration:none;cursor:pointer}
a.mq-tile:hover{border-color:rgba(61,134,255,.55)}
a.badge-tile{text-decoration:none;cursor:pointer}

/* ---------- Trane on mobile: same Brawn and Brains video as desktop ----------
   Mobile uses the exact same square (1:1) Trane film as desktop (native
   controls + playsinline, H.264 file, poster frame). The video is sized
   up on mobile too — up to 400px wide, which is the full column width on
   phones, centered — and the WeatherGuard photo inside the featured-system band is
   hidden on phones only; that band's text and CTAs stay. Desktop layout
   is unchanged. ---------- */
@media (max-width:759px){
  .trane-media{display:block;margin-top:4px}
  .trane-grid{gap:24px}
  .trane-media .trane-video--square{max-width:400px}
  .trane-media .trane-video--square ~ .trane-cap,
  .trane-media .trane-cap{max-width:400px;margin-inline:auto;text-align:center}
  .wg-band .wg-img{display:none}
  .wg-band{margin-top:24px;padding:22px 20px}
}

/* ---------- system-comparison chart: big, legible setpoint ----------
   The 720-wide SVG shrinks to ~46% on a phone, which made the in-chart
   "Setting Temperature · 72°F" label ~6px. The fix — axis numbers and
   line strokes scaled up inside the SVG, the tiny in-chart label
   replaced by a full-size HTML chip under the chart — is applied at
   every width so the desktop and mobile charts are the same design. */
.vs-setchip{display:none;align-items:center;gap:9px;margin:12px 0 0;background:rgba(232,242,255,.07);border:1px solid rgba(232,242,255,.35);border-radius:999px;padding:7px 8px 7px 14px;font-weight:700;font-size:15px;color:#e8f2ff;width:max-content;max-width:100%}
.vs-setchip i{width:26px;border-top:3px dashed #e8f2ff;flex:none}
.vs-setchip strong{font-family:var(--font-d);font-weight:800;font-size:16.5px;color:#0d2818;background:#57d977;padding:2px 10px;border-radius:999px}
/* the legibility treatment built for phones — big axis numbers, bold
   strokes, the HTML setpoint chip instead of the tiny in-chart label —
   is the design at every width, so desktop and mobile read the same */
.vs-chart text.ax{font-size:22px;transform:translateX(10px)}
.vs-chart .set-label,.vs-chart .set-pill{display:none}
.vs-chart .set-line{stroke-width:3.5}
.vs-chart polyline{stroke-width:4.5}
.vs-chart path{stroke-width:5}
.vs-setchip{display:inline-flex}
.vs-legend{font-size:14.5px;gap:9px 16px}
.vs-legend i{width:13px;height:13px}
.vs-legend .lg-set{display:none}
.vs-points li{font-size:15px}
@media (max-width:759px){
  .vs-chart{padding:16px 12px 14px}
}

/* ---------- system comparison: cards side by side on desktop ----------
   The chart and the Key Takeaway keep the centered 780px measure at
   every width, unchanged. The three stage cards are different: on
   phones (and below desktop) they stay in the optimized stacked
   single column, but on desktop they sit side by side in three
   columns so the three systems compare at a glance. Applies to the
   homepage Trane section and the Trane page, which share these
   classes. */
@media (min-width:760px){
  .vs-head{margin-left:auto;margin-right:auto}
  .vs-chart{max-width:780px;margin:22px auto 0}
  .vs-grid{max-width:780px;margin:20px auto 0}
  .vs-takeaway{max-width:780px;margin:22px auto 0}
}
@media (min-width:1020px){
  .vs-grid{max-width:none;margin:20px 0 0;grid-template-columns:1fr 1fr 1.08fr}
  .vs-variable{transform:translateY(-8px)}
}

/* ---------- brand colors: unmistakable, one identity per section ---------- */
/* Trane — red */
#trane{border-top:4px solid #e01e2b;background:linear-gradient(180deg,rgba(224,30,43,.14),rgba(224,30,43,0) 360px)}
#trane .sec-head .kicker{color:#ff7a6a}
#trane .sec-head .kicker::before{background:#e01e2b;box-shadow:0 0 10px rgba(224,30,43,.55)}
#page-trane .page-head .kicker{color:#ff7a6a}
#page-trane .page-head .kicker::before{background:#e01e2b}
.trane-badge{border:1.5px solid rgba(255,80,66,.65);background:rgba(224,30,43,.08)}
.wg-band{border:1.5px solid rgba(255,80,66,.62);box-shadow:0 22px 55px rgba(0,0,0,.35),0 0 46px rgba(224,30,43,.16)}
.wg-kicker{color:#ff7a6a}

/* ---------- Trane page: Fall 2026 rebate banner (top of page, wh-banner style) ---------- */
.trane-rebate{
  margin-top:16px;border-radius:14px;padding:11px 16px;color:#1c1503;
  background:var(--grad-yellow);box-shadow:var(--glow-yellow);
}
.trane-rebate .tr-top{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center}
.trane-rebate .ticket{font-family:var(--font-d);font-weight:800;font-size:16px;border:2px dashed rgba(28,21,3,.55);padding:2px 10px;border-radius:8px;white-space:nowrap}
.trane-rebate .tr-title{font-family:var(--font-d);font-weight:800;font-size:clamp(16px,2vw,19px);line-height:1.25}
.trane-rebate .tr-dates{font-weight:700;font-size:13.5px}
.trane-rebate .tr-dates strong{font-weight:800;text-decoration:underline;text-underline-offset:3px}
.trane-rebate .tr-line{font-size:12.5px;font-weight:600;line-height:1.45;margin-top:6px;opacity:.85}
.trane-rebate .tr-line strong{font-weight:800}
.trane-rebate .tr-line a{font-weight:800;color:inherit;text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
.trane-rebate .tr-fine{font-size:11px;font-weight:600;opacity:.65;margin-top:5px}
@media (max-width:759px){
  .trane-rebate{padding:10px 13px}
  .trane-rebate .ticket{font-size:15px}
}

/* ---------- homepage Trane section: compact rebate strip ----------
   Same yellow banner as the top of the Trane page (.trane-rebate), just
   smaller — one slim strip above the section heading, whole strip is a
   link to the Available Rebates page. */
a.trane-rebate--mini{display:block;text-decoration:none;margin:0 0 26px;padding:9px 14px;border-radius:12px}
.trane-rebate--mini .ticket{font-size:14.5px;padding:1px 9px}
.trane-rebate--mini .tr-title{font-size:clamp(14.5px,1.8vw,16.5px)}
.trane-rebate--mini .tr-dates{font-size:12.5px}
.trane-rebate--mini .tr-more{font-size:13px;font-weight:800;text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
a.trane-rebate--mini:hover{filter:brightness(1.05)}
@media (max-width:759px){
  a.trane-rebate--mini{margin-bottom:20px;padding:8px 12px}
  .trane-rebate--mini .ticket{font-size:13.5px}
}

/* ---------- Trane page: furnace feature photo (below the comparison) ----------
   The official Trane front-view photo (white background) sits in a clean
   white panel beside the Featured Furnaces intro, above the two model
   cards; on phones it stacks above the intro text. */
.furn-feature{display:grid;gap:26px;align-items:center;margin-top:38px}
.furn-feature .furn-head{margin-top:0;max-width:none}
.furn-photo{background:transparent;border-radius:0;padding:0;display:grid;place-items:center;box-shadow:none}
.furn-photo img{max-height:340px;width:auto;max-width:100%;filter:drop-shadow(0 18px 28px rgba(0,0,0,.45))}
@media (min-width:860px){.furn-feature{grid-template-columns:290px 1fr}}
/* IAQ — AprilAire blue */
#iaq{border-top:4px solid #0094d9;background:linear-gradient(180deg,rgba(0,148,217,.15),rgba(0,148,217,0) 360px)}
#iaq .sec-head .kicker{color:#4fc3ff}
#iaq .sec-head .kicker::before{background:#0094d9;box-shadow:0 0 10px rgba(0,148,217,.55)}
#page-iaq .page-head .kicker{color:#4fc3ff}
#page-iaq .page-head .kicker::before{background:#0094d9}
.iaq-card{border-color:rgba(0,148,217,.5)}
.iaq-card .w-ico{color:#4fc3ff;border-color:rgba(0,148,217,.6);background:rgba(0,148,217,.13)}
/* IAQ cards: the product's own photo in the top-right corner — one
   uniform white tile per card, photo contained (never distorted). */
.iaq-card{position:relative}
.iaq-prod{position:absolute;top:18px;right:18px;width:74px;height:74px;object-fit:contain;background:#fff;border-radius:12px;padding:6px;box-shadow:0 10px 22px rgba(2,10,26,.35)}
@media (max-width:759px){.iaq-prod{width:64px;height:64px;top:14px;right:14px}}
.iaq-prod--cut{background:none;box-shadow:none;padding:0;border-radius:0;width:112px;height:112px;filter:drop-shadow(0 12px 18px rgba(2,10,26,.45))}
.iaq-card h3{padding-right:108px}
@media (max-width:759px){.iaq-prod--cut{width:96px;height:96px}.iaq-card h3{padding-right:92px}}
.iaq-tag{border-color:rgba(79,195,255,.75);color:#4fc3ff}
/* State Water Heaters — red */
.state-band{border:1.5px solid rgba(238,42,53,.8);border-top:4px solid #ee2a35;background:linear-gradient(150deg,rgba(238,42,53,.14),rgba(238,42,53,.02) 60%),linear-gradient(150deg,var(--panel-2),var(--panel));box-shadow:0 18px 44px rgba(0,0,0,.3),0 0 38px rgba(238,42,53,.13)}
.state-models .type-card{border-top:3px solid rgba(238,42,53,.6)}
/* Rinnai — orange-red */
.rinnai-band{border:1.5px solid rgba(255,84,46,.8);border-top:4px solid #ff542e;background:linear-gradient(150deg,rgba(255,84,46,.14),rgba(255,84,46,.02) 60%),linear-gradient(150deg,var(--panel-2),var(--panel));box-shadow:0 18px 44px rgba(0,0,0,.3),0 0 38px rgba(255,84,46,.13)}
/* HALO — teal */
.halo-card{border:1.5px solid rgba(45,226,197,.62);background:linear-gradient(165deg,rgba(45,226,197,.11),rgba(45,226,197,.02) 55%),linear-gradient(165deg,var(--panel-2),var(--panel));box-shadow:0 16px 40px rgba(0,0,0,.3),0 0 36px rgba(45,226,197,.13)}
.halo-card .w-ico{color:#2de2c5;border-color:rgba(45,226,197,.6);background:rgba(45,226,197,.12)}
.halo-card .opt-tag{border-color:rgba(45,226,197,.6);color:#2de2c5}
.halo-card .opt-price{color:#2de2c5}
.svc-media.brand-media{box-shadow:inset 0 0 0 2px rgba(45,226,197,.5),inset 0 0 70px rgba(45,226,197,.15)}

/* ---------- Washington Gas tune-up page ---------- */
#page-washington-gas .page-head .kicker{color:#8fd8ff}
#page-washington-gas .page-head .kicker::before{background:var(--blue)}
@media (min-width:1020px){
  nav.main a[href="#/washington-gas"]{color:#8fd8ff}
  nav.main a[href="#/washington-gas"]:hover{color:#0e1c33}
  /* the renamed "Washington Gas Heating Rebate" tab is longer — let the
     desktop pill wrap instead of clipping at mid desktop widths */
  nav.main{flex-wrap:wrap;justify-content:center}
}
/* nine desktop nav items: tighten the pill at every desktop width so all
   nine links plus the CTA fit without clipping */
@media (min-width:1020px){
  .brand img{height:44px}
  nav.main a{font-size:14.5px;padding:9px 11px}
  .header-cta .btn{padding:12px 17px;font-size:14.5px}
}
@media (min-width:1020px) and (max-width:1279px){
  .header-in{flex-wrap:wrap}
  nav.main{order:3;flex-basis:100%;margin-left:0}
  .phone-link{display:none}
}
@media (min-width:1280px) and (max-width:1499px){.phone-link{display:none}}
@media (min-width:1500px){.phone-link{font-size:16px}}
/* Phones only: the header's Book Online button duplicates the fixed
   bottom bar's Book Online, so it is removed on phones. On desktop
   (≥760px) the header Book Online button shows exactly as before.
   With that button gone, the phone header is re-arranged so it still
   reads balanced: the .header-cta box is empty on phones anyway (the
   phone-number link only appears at ≥760px), so the box is dropped,
   the hamburger moves to the far right opposite the logo, and the
   row's spacing is tightened — logo left, menu button right, nothing
   stranded in between. Desktop and tablet headers are untouched. */
@media (max-width:759px){
  .header-cta{display:none}
  .header-in{gap:12px;padding:11px 0}
  .menu-btn{margin-left:auto}
}
.wg-hero{display:grid;gap:30px;margin-top:6px}
.wg-logo-chip{display:inline-flex;align-items:center;background:linear-gradient(165deg,#ffffff,#e9f0fb);border:1px solid rgba(170,205,255,.55);border-radius:14px;padding:12px 18px;margin-bottom:18px}
.wg-logo-chip img{width:190px;max-width:100%;height:auto}
.wg-math{display:grid;grid-template-columns:1fr auto 1fr auto 1.15fr;gap:10px;align-items:stretch;margin:22px 0 6px}
.wg-math .m-box{background:linear-gradient(165deg,var(--panel-2),var(--panel));border:1px solid var(--line);border-radius:16px;padding:16px 14px;text-align:center;display:flex;flex-direction:column;justify-content:center;gap:2px}
.wg-math .m-box span{font-size:12.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.wg-math .m-box strong{font-family:var(--font-d);font-weight:800;font-size:30px;line-height:1.1;color:#fff}
.wg-math .m-box.net{border-color:rgba(255,210,62,.65);background:linear-gradient(150deg,rgba(255,210,62,.16),rgba(255,181,46,.05)),linear-gradient(165deg,var(--panel-2),var(--panel));box-shadow:0 0 34px rgba(255,190,40,.14)}
.wg-math .m-box.net strong{color:var(--yellow);font-size:38px;text-shadow:0 0 22px rgba(255,200,50,.3)}
.wg-math .m-op{align-self:center;font-family:var(--font-d);font-weight:800;font-size:22px;color:var(--sky)}
.wg-per{color:var(--ink-3);font-size:13.5px;font-weight:600}
.wg-video-col{display:flex;flex-direction:column;align-items:center}
.wg-video-frame{position:relative;width:min(100%,340px);aspect-ratio:9/16;border-radius:20px;overflow:hidden;border:1px solid rgba(140,195,255,.45);box-shadow:0 26px 60px rgba(0,0,0,.42),0 0 54px rgba(86,164,255,.2);background:#000}
.wg-video-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.wg-video-cap{color:var(--ink-3);font-size:13.5px;margin-top:12px;text-align:center;max-width:340px}
.wg-steps{list-style:none;margin:0;padding:0;display:grid;gap:14px;counter-reset:wgstep}
.wg-steps li{display:flex;gap:16px;background:linear-gradient(150deg,var(--panel-2),var(--panel));border:1px solid var(--line-soft);border-radius:var(--radius);padding:20px 22px}
.wg-steps .s-num{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--grad-yellow);color:#1c1503;font-family:var(--font-d);font-weight:800;font-size:19px;box-shadow:var(--glow-yellow)}
.wg-steps h3{font-size:17.5px;margin-bottom:3px}
.wg-steps p{color:var(--ink-2);font-size:15px}
.wg-steps a{color:var(--sky);font-weight:700;text-decoration:none}
.wg-steps a:hover{text-decoration:underline}
.wg-elig{display:grid;gap:16px}
.wg-note{color:var(--ink-3);font-size:13.5px;margin-top:16px;max-width:62em}
.wg-note strong{color:var(--ink-2)}
/* WG sign-up: copy column + quote-card form, stacked on mobile */
.wg-signup-grid{display:grid;gap:26px}
#wg-signup{scroll-margin-top:24px}
@media (min-width:1020px){
  .wg-signup-grid{grid-template-columns:.92fr 1.08fr;gap:48px;align-items:start}
}

/* ---------- Water Filtration page (HALO) ---------- */
#page-water-filtration .page-head .kicker{color:#2de2c5}
#page-water-filtration .page-head .kicker::before{background:#2de2c5;box-shadow:0 0 8px rgba(45,226,197,.45)}
#page-water-filtration .wh-card .w-ico{color:#2de2c5;border-color:rgba(45,226,197,.55);background:rgba(45,226,197,.12)}
#page-water-filtration .opt-price{color:#2de2c5}
#page-water-filtration .opt-tag{border-color:rgba(45,226,197,.6);color:#2de2c5}
#page-water-filtration .wf-photo{margin:0}
#page-water-filtration .wf-photo img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:14px;border:1px solid rgba(45,226,197,.4);display:block}
#page-water-filtration .wf-photo figcaption{color:var(--ink-3);font-size:13px;line-height:1.45;margin-top:10px;text-align:center}
#page-water-filtration .wf-photo--prod img{aspect-ratio:auto;object-fit:contain;background:radial-gradient(closest-side,rgba(45,226,197,.15),rgba(45,226,197,0) 78%),linear-gradient(165deg,#1e3d66,#132c4e);padding:22px 18px}
@media (min-width:1020px){
  nav.main a[href="#/water-filtration"]{color:#2de2c5}
  nav.main a[href="#/water-filtration"]:hover{color:#0e1c33}
  /* ten desktop nav items now: tighten padding a touch so nothing clips */
  nav.main a{padding:9px 10px}
}
.wf-hero{display:grid;gap:30px;margin-top:6px}
.wf-logo-chip{display:inline-flex;align-items:center;background:linear-gradient(165deg,#ffffff,#e9f0fb);border:1px solid rgba(170,205,255,.55);border-radius:14px;padding:12px 18px;margin-bottom:18px}
.wf-logo-chip img{width:180px;max-width:100%;height:auto}
.wf-video-frame{position:relative;width:100%;aspect-ratio:16/9;border-radius:20px;overflow:hidden;border:1.5px solid rgba(45,226,197,.55);box-shadow:0 26px 60px rgba(0,0,0,.42),0 0 54px rgba(45,226,197,.16);background:#000}
.wf-video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.wf-video-cap{color:var(--ink-3);font-size:13.5px;margin-top:12px;text-align:center}
.wf-video-cap a{color:var(--sky);font-weight:700;text-decoration:none}
.wf-video-cap a:hover{text-decoration:underline}
.wf-feature{display:grid;gap:26px;background:linear-gradient(150deg,rgba(45,226,197,.10),rgba(45,226,197,.02) 55%),linear-gradient(165deg,var(--panel-2),var(--panel));border:1.5px solid rgba(45,226,197,.55);border-radius:24px;padding:26px;box-shadow:0 22px 55px rgba(0,0,0,.35),0 0 46px rgba(45,226,197,.13)}
.wf-feature .wf-prod{display:flex;align-items:center;justify-content:center;background:radial-gradient(closest-side,rgba(45,226,197,.16),rgba(45,226,197,0));border-radius:18px;padding:22px 14px}
.wf-feature .wf-prod img{width:min(100%,420px);height:auto}
#water .wf-feature .wf-prod{display:block;padding:14px}
#water .wf-photo{margin:0}
#water .wf-photo img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:12px;border:1px solid rgba(45,226,197,.4);display:block}
#water .wf-photo figcaption{color:var(--ink-3);font-size:13px;line-height:1.45;margin-top:10px;text-align:center}
.wf-feature h3{font-size:clamp(21px,2.6vw,27px);margin-bottom:10px}
.wf-feature p{color:var(--ink-2);font-size:15.5px;margin-bottom:12px}
.wf-feature a.inline-link{color:var(--sky);font-weight:700;text-decoration:none}
.wf-feature a.inline-link:hover{text-decoration:underline}
@media (min-width:1020px){
  .wf-hero{grid-template-columns:1.05fr .95fr;gap:48px;align-items:start}
  .wf-feature{grid-template-columns:.85fr 1.15fr;align-items:center;padding:38px}
}
@media (min-width:900px){
  .wg-hero{grid-template-columns:1.25fr .85fr;gap:48px;align-items:start}
  .wg-elig{grid-template-columns:1fr 1fr}
  .wg-steps{grid-template-columns:1fr 1fr}
  .wg-steps li:last-child{grid-column:1/-1}
}
@media (max-width:759px){
  .wg-math{grid-template-columns:1fr 1fr 1.2fr;gap:7px}
  .wg-math .m-op{display:none}
  .wg-math .m-box{padding:12px 8px}
  .wg-math .m-box strong{font-size:22px}
  .wg-math .m-box.net strong{font-size:27px}
  .wg-math .m-box span{font-size:10.5px}
  .wg-steps li{padding:16px}
  .wg-logo-chip img{width:160px}
}
/* phone first screen: the hero Call / Book buttons share one row, so the
   quote form's Name field starts clear of the fixed bottom bar */
@media (max-width:759px){
  .hero-ctas{flex-wrap:nowrap;gap:10px}
  .hero .hero-ctas .btn{flex:1 1 0;padding:13px 6px;font-size:14.5px;white-space:nowrap}
  .hero .hero-ctas .btn:first-child{flex:1.35 1 0}
  .offer-rot{padding-top:6px;padding-bottom:5px}
  /* tighter first-screen stack: with the longer hand-script headline the
     form starts lower, so reclaim ~30px of gaps to keep the whole Name
     field above the fixed bottom bar at rest */
  .hero{padding-top:4px}
  .hero .hero-copy h1{margin:4px 0 2px}
  .hero-ctas{margin-top:2px}
  .hero-grid .quote-card{margin-top:2px}
  .quote-card{padding-top:12px}
  .quote-card h2{margin-bottom:2px}
  .quote-card .qc-sub{margin-bottom:6px}
  .field{margin-bottom:10px}
}

/* ---------- no sideways sway on phones: clip horizontal overflow at the
   root as well as the body (body-only overflow-x:hidden does not stop
   iOS Safari from letting the whole page drift left/right) ---------- */
html{overflow-x:hidden}
@supports (overflow:clip){
  html,body{overflow-x:clip}
}

/* ---------- why cards with a real photo on top ---------- */
.why-card.has-photo{padding:0;overflow:hidden;display:flex;flex-direction:column}
.why-photo{line-height:0;margin:0}
.why-photo img{width:100%;height:180px;object-fit:cover}
.why-card .why-body{padding:20px 24px 24px}
@media (max-width:759px){
  .why-photo img{height:128px}
  .why-card .why-body{padding:14px 15px 16px}
}

/* ---------- service area: map + truck photo side by side (50/50), town list below ---------- */
.area-top{display:grid;gap:24px;margin:0 0 26px}
.area-top .area-map{margin:0}
@media (min-width:900px){
  .area-top{grid-template-columns:1fr 1fr;gap:28px;align-items:stretch}
  .area-top .area-map{height:auto;min-height:380px}
  .area-top .area-photo{display:flex;flex-direction:column}
  .area-top .area-photo img{flex:1 1 auto;min-height:0;aspect-ratio:auto}
}
.area-photo{margin:0;line-height:0}
.area-photo img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius);border:1px solid var(--line-soft)}
.area-photo figcaption{color:var(--ink-3);font-size:13.5px;line-height:1.45;margin-top:9px}
.area-chips a{border:1px solid var(--line);background:rgba(150,195,255,.13);border-radius:999px;padding:8px 15px;font-weight:600;font-size:14.5px;color:#d7e6ff;text-decoration:none;cursor:pointer}
.area-chips a:hover{border-color:var(--sky);color:#fff}
.area-chips a.map-selected{background:var(--yellow);color:#1c1503;border-color:#ffe89a}
.band-light .area-chips a{background:#fff;border-color:#c7d9f6;color:#22385c}
@media (max-width:759px){.area-chips a{padding:6px 12px;font-size:13.5px}}
/* map unavailable (no WebGL / tiles blocked): photo spans the full row
   as a wide banner instead of leaving an empty half beside it */
@media (min-width:900px){
  .area-top--nomap{grid-template-columns:1fr}
  .area-top--nomap .area-photo img{aspect-ratio:21/9}
}

/* ---------- town pages ---------- */
.town-facts{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 4px}
.town-fact{border:1px solid var(--line);background:rgba(150,195,255,.08);border-radius:14px;padding:10px 16px 11px;font-size:15px;font-weight:700;color:#eaf2ff}
.town-fact span{display:block;font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--sky);margin-bottom:2px}
.town-grid{display:grid;gap:26px;margin-top:26px}
@media (min-width:900px){.town-grid{grid-template-columns:1.02fr .98fr;gap:34px;align-items:start}}
.town-photo{margin:0;line-height:0}
.town-photo img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:var(--radius);border:1px solid var(--line-soft)}
.town-photo--wide img{aspect-ratio:16/9}
.town-photo figcaption{color:var(--ink-3);font-size:13.5px;line-height:1.45;margin-top:9px}
.town-copy p{color:var(--ink-2);margin-bottom:14px}
.town-copy p strong{color:#fff}
.town-svc{display:grid;gap:10px;margin-top:8px}
@media (min-width:640px){.town-svc{grid-template-columns:1fr 1fr}}
.town-svc a{display:flex;justify-content:space-between;align-items:center;gap:10px;border:1px solid var(--line-soft);background:linear-gradient(160deg,var(--panel-2),var(--panel));border-radius:14px;padding:14px 16px;text-decoration:none;font-weight:700;font-size:15px;color:#eaf2ff}
.town-svc a:hover{border-color:var(--sky)}
.town-svc a svg{color:var(--sky);flex:none}
.town-near{display:flex;flex-wrap:wrap;gap:9px;margin-top:12px}
.town-near a{border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-weight:600;font-size:14px;color:#d7e6ff;text-decoration:none;background:rgba(150,195,255,.1)}
.town-near a:hover{border-color:var(--sky);color:#fff}

/* ---------- About: meet Frank ---------- */
.frank-block{display:grid;gap:26px;margin-top:36px;border:1px solid var(--line-soft);border-radius:24px;padding:26px;background:linear-gradient(160deg,var(--panel-2),var(--panel))}
@media (min-width:860px){.frank-block{grid-template-columns:400px 1fr;gap:40px;align-items:start;padding:34px}}
.frank-photo{margin:0;line-height:0;align-self:start}
.frank-photo img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 40%;border-radius:18px;border:1px solid var(--line-soft)}
.frank-photo figcaption{color:var(--ink-3);font-size:13.5px;line-height:1.45;margin-top:9px}
@media (max-width:859px){.frank-photo img{aspect-ratio:4/5;object-position:50% 40%}}
.frank-copy p{color:var(--ink-2);margin-bottom:13px}
.frank-copy p strong{color:#fff}
.frank-quote{font-family:var(--font-hand);font-size:clamp(21px,2.6vw,27px);color:var(--yellow);line-height:1.3;margin:16px 0 4px}

/* ---------- local utility rebates ---------- */
.util-block{border:1px solid var(--line-soft);border-radius:24px;padding:26px;background:linear-gradient(160deg,var(--panel-2),var(--panel));margin-top:26px}
@media (min-width:860px){.util-block{padding:34px}}
.util-head{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;margin-bottom:6px}
.util-head h2{font-size:clamp(23px,3vw,30px)}
.util-tag{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#1c1503;background:var(--grad-yellow);padding:5px 11px;border-radius:999px}
.reb-badge{width:44px;height:44px;flex:none;border-radius:13px;display:grid;place-items:center;color:var(--yellow);background:rgba(255,210,62,.1);border:1px solid rgba(255,210,62,.45);box-shadow:0 0 18px rgba(255,190,40,.16)}
.reb-badge svg{width:24px;height:24px}
.reb-emoji{font-size:23px;line-height:1;flex:none}
.util-logo-card{background:#fff;border-radius:16px;padding:22px 20px;display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.util-logo-card img{display:block;width:auto;height:auto;max-width:min(320px,82%);max-height:150px;object-fit:contain}
.util-logo-card img.logo-stacked{max-height:190px}
.util-body{margin-top:14px}
.reb-rows{margin-top:6px}
.reb-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:11px 0;border-bottom:1px solid var(--line-soft)}
.reb-row:last-child{border-bottom:0}
.reb-row .reb-what{color:var(--ink-2);font-size:15px}
.reb-row .reb-what strong{color:#fff}
.reb-row .reb-amt{font-family:var(--font-d);font-weight:800;font-size:21px;color:var(--yellow);white-space:nowrap}
.util-note{color:var(--ink-3);font-size:14px;margin-top:14px}
.util-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:18px}
.util-cta .util-link{color:var(--sky);font-weight:700;text-decoration:none;font-size:15px}

/* ---------- Services dropdown (desktop pill nav) ----------
   Water Heaters, Water Filtration, Indoor Air Quality and Duct Cleaning
   live under the Services tab now, so the top bar carries fewer tabs.
   The panel opens on hover or keyboard focus; the caret button toggles
   it for touch laptops. The Services link itself still goes to the
   Services overview page, and every page keeps its existing route. */
@media (min-width:1020px){
  nav.main .nav-item{position:relative;display:flex;align-items:center}
  nav.main .nav-caret{
    display:grid;place-items:center;width:26px;height:26px;margin-left:-9px;padding:0;flex:none;
    background:transparent;border:0;border-radius:999px;color:#dceaff;cursor:pointer;
  }
  nav.main .nav-caret svg{transition:transform .18s ease}
  nav.main .nav-item:hover .nav-caret svg,nav.main .nav-item.open .nav-caret svg{transform:rotate(180deg)}
  nav.main .nav-sub{
    display:none;position:absolute;top:calc(100% + 8px);left:-6px;z-index:90;min-width:242px;
    flex-direction:column;gap:2px;padding:8px;border-radius:16px;
    background:linear-gradient(150deg,#4978ba,#325f9e);border:1px solid rgba(160,205,255,.5);
    box-shadow:0 22px 48px rgba(2,8,20,.5),0 0 26px rgba(86,164,255,.14);
  }
  nav.main .nav-sub::before{content:"";position:absolute;left:0;right:0;top:-9px;height:9px}
  nav.main .nav-item:hover .nav-sub,nav.main .nav-item:focus-within .nav-sub,nav.main .nav-item.open .nav-sub{display:flex}
  nav.main .nav-sub a{display:block;padding:10px 14px;border-radius:10px;font-size:15.5px;white-space:nowrap}
  nav.main .nav-sub a:hover{background:var(--grad-yellow);color:#0e1c33;box-shadow:0 4px 16px rgba(255,190,40,.35)}
  /* "Services We Offer" is a dropdown trigger, not a page link — a button
     styled to match the pill nav's links exactly */
  nav.main .nav-trigger{
    font-family:var(--font-d);font-weight:700;font-size:14.5px;color:#dceaff;white-space:nowrap;
    padding:9px 4px 9px 10px;border-radius:999px;line-height:1;background:transparent;border:0;cursor:pointer;
  }
  nav.main .nav-trigger:hover{color:#0e1c33;background:var(--grad-yellow);box-shadow:0 4px 16px rgba(255,190,40,.35)}
}

/* ---------- mobile homepage: lean hero — no hero CTA pair, and the hero
   quote form becomes a dedicated quote view behind the bottom bar's
   Free Quote button --
   Phones only (max-width: 759px). The hero Call / Book Online pair
   duplicates the fixed bottom bar (Call Now / Book Online / Free Quote),
   and the inline hero quote card made the first phone screen all buttons
   and form fields — so on phones both are hidden in place. The quote
   card itself is NOT removed: tapping any Free Quote / #quote link
   switches the phone to a quote-only view — the same card in normal
   page flow at the top, everything else tucked away, close button to
   go back — so the form stays fully reachable and submittable on
   mobile. At rest on desktop (>=760px) the hero buttons and the
   inline form show exactly as before, but a Free Quote click there
   now opens the SAME closable in-page quote view as an overlay (see
   the min-width block below) instead of jumping back to the
   homepage form.
   Reliability: an earlier build of this view failed on the owner's
   phone (tap produced nothing), so the reveal now has independent
   paths instead of one delegated listener — a click listener attached
   directly to the bottom bar's Free Quote button, the document-level
   delegation for every other #quote link, and a pure-CSS fallback:
   with no JavaScript at all, the tap still sets the #quote fragment,
   the card becomes the :target, and the :target rule below shows it
   in flow while the browser scrolls to it natively. */
.quote-close{display:none}
.quote-backdrop{display:none}
@media (max-width:759px){
  .hero .hero-ctas{display:none}
  .hero #quote{display:none}
  .hero #quote:target{display:block}
  body.quote-modal-open .offer-band,
  body.quote-modal-open .offer-pill,
  body.quote-modal-open .to-top,
  body.quote-modal-open footer{display:none}
  body.quote-modal-open main>*:not(.hero){display:none}
  body.quote-modal-open .hero{padding:14px 0 118px}
  body.quote-modal-open .hero .hero-photo,
  body.quote-modal-open .hero .hero-copy{display:none}
  body.quote-modal-open .hero #quote{display:block;position:relative;margin:0}
  body.quote-modal-open .quote-close{
    display:grid;place-items:center;position:absolute;top:10px;right:10px;z-index:3;
    width:40px;height:40px;border-radius:50%;cursor:pointer;
    background:rgba(120,170,255,.14);border:1px solid var(--line);color:#fff;
    font-size:20px;line-height:1;padding:0;font-family:var(--font-b);
  }
}
/* ---------- desktop / tablet quote view: the same closable quote
   view as phones, shown as a centered overlay on the CURRENT page --
   Clicking any Get a Free Quote / Free Quote button (on the homepage
   or on any sub-page) no longer jumps back to the homepage's inline
   form: the hero — which carries the quote card — becomes a fixed,
   dimmed overlay, its copy and photo hidden, and the card sits
   centered on top of the page the visitor is actually on. Closing it
   (× button, Escape, or a click on the dimmed area outside the card)
   removes the overlay and the page underneath is still at the exact
   spot the button was clicked — the script below saves and restores
   that position, and never switches a sub-page for the homepage.
   At rest (view closed) nothing here applies: the hero and its
   inline form render exactly as before. */
@media (min-width:760px){
  body.quote-modal-open{overflow:hidden}
  body.quote-modal-open .offer-pill,
  body.quote-modal-open .to-top{visibility:hidden}
  body.quote-modal-open .hero{
    position:fixed;inset:0;z-index:120;overflow-y:auto;
    display:flex;align-items:flex-start;justify-content:center;
    padding:40px 20px;margin:0;
    background:rgba(18,34,64,.72);
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  }
  body.quote-modal-open .hero .hero-photo,
  body.quote-modal-open .hero .hero-copy{display:none}
  body.quote-modal-open .hero-grid{display:block;width:100%;max-width:600px;margin:auto}
  body.quote-modal-open .hero #quote{display:block;position:relative;margin:0}
  body.quote-modal-open .quote-close{
    display:grid;place-items:center;position:absolute;top:10px;right:10px;z-index:3;
    width:40px;height:40px;border-radius:50%;cursor:pointer;
    background:rgba(120,170,255,.14);border:1px solid var(--line);color:#fff;
    font-size:20px;line-height:1;padding:0;font-family:var(--font-b);
  }
  body.quote-modal-open .quote-close:hover{background:rgba(120,170,255,.28)}
  body.quote-modal-open .quote-close:focus-visible{outline:2px solid var(--sky);outline-offset:2px}
}
/* ---------- desktop header rebalance (owner, Nov 10) ----------
   The pill nav used to pack 6 tabs on its first row and only 4 on the
   second, stretching the pill so wide that the phone number was hidden
   entirely (1020–1499px) and Book Online wrapped onto two lines. Now:
   - the pill is capped narrower, so it wraps 4 tabs / 6 tabs — the
     second row carries a few more, and the pill itself is shorter
     (narrower) and a touch less tall (slimmer link padding);
   - the freed width lets the phone number show in full on one line at
     every desktop width, next to a single-line Book Online button.
   Phones and tablets (<1020px) keep the hamburger header as before. */
@media (min-width:1020px){
  .header-in{padding:9px 0;gap:12px 16px}
  .brand img{height:42px}
  nav.main{
    max-width:792px;flex-wrap:wrap;justify-content:center;align-content:center;
    gap:2px 3px;padding:4px;border-radius:26px;margin-left:auto;margin-right:auto;
  }
  nav.main a{font-size:14.5px;padding:8px 11px}
  nav.main .nav-trigger{font-size:14.5px;padding:8px 4px 8px 11px}
  .header-cta{flex:none;flex-wrap:nowrap;margin-left:0}
  .phone-link{
    display:inline-flex !important;margin-left:0;flex:none;white-space:nowrap;
    font-size:16.5px;letter-spacing:.01em;
  }
  .phone-link .p-ico{width:34px;height:34px;flex:none}
  .header-cta .btn{flex:none;white-space:nowrap;padding:12px 18px;font-size:14.5px}
}
/* mid desktops: brand + phone/book share the first row, the balanced
   two-row pill sits centered on its own row below them */
@media (min-width:1020px) and (max-width:1349px){
  .header-in{flex-wrap:wrap}
  .header-cta{margin-left:auto}
  nav.main{order:3;flex-basis:100%}
}
/* wide desktops: one row — logo, balanced pill, phone, Book Online */
@media (min-width:1350px){
  .header-in{flex-wrap:nowrap}
  nav.main{order:0;flex:1 1 auto}
}
/* ---------- service pages: split head on desktop (owner, Nov 10) ----
   The big AI hero photos read fake at full width, so on desktop the
   six service pages with a .svc-head (Heating, AC, Maintenance, Dryer
   Vent, IAQ, Duct Cleaning) now run text-left / image-right: the head
   is a two-column grid and the photo sits in the right column at
   roughly 40% width, 4:3, capped in height — much smaller than the
   old full-width 16:7 banner. Below 1020px nothing changes in kind:
   the same text stacks over the same full-width photo, with the same
   gap the old section padding gave it. */
.svc-head-text{min-width:0}
@media (max-width:1019px){
  .svc-head .svc-hero{margin-top:36px}
  .svc-head .svc-head-photo{margin-top:60px}
}
@media (min-width:1020px){
  .page-head.svc-head{
    display:grid;grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr);
    gap:44px;align-items:center;padding:36px 0 12px;
  }
  .page-head.svc-head h1{font-size:clamp(32px,3.4vw,47px)}
  .svc-head .svc-hero{margin:0}
  .svc-head .svc-hero>img{aspect-ratio:4/3;max-height:330px}
  .svc-head figure.block-photo.svc-head-photo{margin:0}
  .svc-head figure.block-photo.svc-head-photo>img{aspect-ratio:4/3;max-height:290px}
  /* Water Heaters: its photo stood full-width under the quote form —
     pair it with the video band instead, copy left, photo right and
     small, on desktop only */
  #water-heaters .wrap:has(>figure.svc-hero){
    display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
    gap:30px;align-items:center;
  }
  #water-heaters .wrap:has(>figure.svc-hero)>figure.svc-hero{order:2;margin:0 !important}
  #water-heaters .wrap:has(>figure.svc-hero)>figure.svc-hero>img{aspect-ratio:4/3;max-height:320px}
  #water-heaters .wrap:has(>figure.svc-hero)>.wh-video-band{order:1;margin-top:0}
}
/* ---------- desktop header: roomier, taller, bolder nav (owner, Nov 10) ----------
   Follow-up to the rebalance above: the two-row pill still read as
   cramped, so on desktop only (>=1020px) the tabs get bigger, bolder
   type, wider padding and real gaps between them, the pill and the
   header get wider and taller, and the phone number keeps its own
   clear space beside Book Online. The tab order and the 4-over-6
   two-row split from the rebalance are unchanged, and phones and
   tablets (<1020px) keep the hamburger header exactly as before. */
@media (min-width:1020px){
  header .wrap{width:calc(100% - 36px)}
  .header-in{padding:20px 0;gap:16px 22px}
  .brand img{height:52px}
  nav.main{
    max-width:1060px;gap:10px;padding:10px;border-radius:30px;
  }
  nav.main a{font-size:17px;font-weight:700;color:#eef4ff;padding:13px 20px;letter-spacing:.01em}
  nav.main .nav-trigger{font-size:17px;padding:13px 6px 13px 20px}
  nav.main .nav-caret{width:30px;height:30px;margin-left:-12px}
  nav.main .nav-sub a{font-size:16.5px;padding:11px 15px}
  .phone-link{font-size:19px;gap:11px}
  .phone-link .p-ico{width:42px;height:42px;border-radius:13px}
  .header-cta{gap:16px}
  .header-cta .btn{padding:15px 24px;font-size:16px;border-radius:14px}
}
/* 1020-1699px: brand + phone + Book Online share the first row and the
   roomier two-row pill sits centered on its own full-width row below.
   Pushing the single-row switch point up (was 1350px) is what leaves
   the phone number its clear space instead of squeezing the wider
   pill in beside it at laptop widths. */
@media (min-width:1020px) and (max-width:1699px){
  .header-in{flex-wrap:wrap}
  .header-cta{margin-left:auto}
  nav.main{order:3;flex-basis:100%}
}
/* very wide desktops: one row - logo, roomy pill, phone, Book Online */
@media (min-width:1700px){
  .header-in{flex-wrap:nowrap}
  nav.main{order:0;flex:1 1 auto}
}
/* ---------- desktop nav: forced 4-over-6 row split (owner, Nov 10) ----------
   The roomier pill above is wide enough to fit five tabs, which pulled
   Protection Plans up onto the first row. A .nav-break flex item sits
   in the markup between Washington Gas and Protection Plans: at
   desktop widths (>=1020px) it takes a full-width, zero-height line of
   its own, so the pill always wraps there — row one is exactly
   Services We Offer / Trane / Offers & Rebates / Washington Gas and
   row two starts with Protection Plans, at every desktop width. Tab
   order, 17px type, tab padding and header height are unchanged: the
   break line adds two row gaps instead of one, so row-gap is halved
   (5px + 0-height line + 5px = the same 10px between the two tab rows
   and the same pill height as a natural wrap). Below 1020px nav.main
   is not displayed (hamburger header), so the break has no effect and
   the mobile layout is untouched. */
@media (min-width:1020px){
  nav.main{row-gap:5px}
  nav.main .nav-break{flex:0 0 100%;width:100%;height:0;margin:0;padding:0;border:0;font-size:0;line-height:0}
}
/* ---------- desktop sticky header (owner, Nov 10) ----------
   Desktop only (>=1020px, where the pill tab bar exists): the whole
   top bar — logo, tab pill, phone number and Book Online — stays
   pinned to the top of the viewport no matter how far the page is
   scrolled. Tab order, tab type size, padding and header height are
   exactly as before; the header simply stops scrolling away. The
   header already carries its translucent blur background, border and
   shadow, so it reads the same pinned as it did at rest. Phones and
   tablets (<1020px) are untouched: their header and mobile menu
   still scroll away as before.
   Because the pinned header now overlays the top of the viewport,
   the two desktop elements that were already sticky (the homepage
   quote card and the Repair or Replace result card, both top:64px)
   and in-page anchor jumps get matching offsets so nothing slides
   underneath it: the two-row header (1020-1699px) stands ~165px
   tall, the single-row header (>=1700px) ~109px (heights after the
   compact pass below). */
@media (min-width:1020px){
  header{position:sticky;top:0}
  section[id],#quote{scroll-margin-top:184px}
  .quote-card{top:180px}
  .ror-result{top:180px}
}
@media (min-width:1700px){
  section[id],#quote{scroll-margin-top:128px}
  .quote-card{top:124px}
  .ror-result{top:124px}
}
/* ---------- desktop header: compact pass (owner, Nov 12) ----------
   Desktop only (>=1020px): the roomier header above read too tall —
   the tab pill sat too low and the whole bar took too much of the
   page. This pass pulls the tabs up and slims the bar down: less
   padding above and below the header rows, a slightly smaller logo,
   tighter gaps between the tabs and slimmer tab padding, and a
   slightly smaller phone number. The phone link, the Book Online
   button and the pill all share one height and sit on one center
   line (align-items:center), so the row reads flush and even; the
   first-row group (logo / phone / Book Online) and the pill carry
   the same height in both layouts. Tab order and the forced
   4-over-6 two-row split (the .nav-break item) are unchanged, the
   header stays sticky, and phones/tablets (<1020px) keep their
   hamburger header exactly as before. New heights: tab 35.5px,
   pill ~89px, first row 46px — two-row header ~165px total,
   single-row ~109px; the sticky offsets above are set to match. */
@media (min-width:1020px){
  .header-in{padding:10px 0;gap:10px 16px}
  .brand img{height:46px}
  nav.main{gap:6px;row-gap:3px;padding:6px;border-radius:26px}
  nav.main a{font-size:15.5px;padding:10px 14px}
  nav.main .nav-trigger{font-size:15.5px;padding:10px 4px 10px 14px}
  nav.main .nav-caret{width:26px;height:26px;margin-left:-9px}
  nav.main .nav-sub a{font-size:15px;padding:10px 13px}
  .phone-link{font-size:16.5px;gap:9px}
  .phone-link .p-ico{width:36px;height:36px;border-radius:11px}
  .header-cta{gap:12px}
  .header-cta .btn{padding:12px 19px;font-size:15px}
}
/* ---------- desktop header: ONE row, all top-aligned (owner, Nov 12) ----------
   Desktop only (>=1020px). Replaces the two-row tab layout above in
   full: the logo, ALL ten tabs, the phone number and Book Online now
   share a SINGLE horizontal row, and every one of them is aligned by
   its TOP edge — .header-in, the pill and the CTA group all use
   align-items:flex-start under a slim 6px top padding, so the top of
   the tabs sits on exactly the same line as the top of the logo, the
   top of the phone number and the top of the Book Online button,
   with no gap above the tabs. The forced 4-over-6 row break
   (.nav-break) is switched off, the gaps between tabs shrink to 2px
   with smaller tab type and padding, the header's side distances
   shrink (wrap margin 36px -> 20px total), and the bar is as short
   as the row itself: ~64px at laptop widths, ~52px on very wide
   screens where every tab fits on one line. At narrower desktop
   widths the longest tab labels wrap inside their own tab (still
   one row, still top-aligned) rather than pushing anything onto a
   second row. The header stays sticky; the sticky offsets below the
   block match the new heights. Tab order, colors, the phone number,
   the Book Online link and the dropdowns are unchanged, and phones /
   tablets (<1020px) keep their hamburger header exactly as before. */
@media (min-width:1020px){
  header .wrap{width:calc(100% - 20px)}
  .header-in{flex-wrap:nowrap;align-items:flex-start;padding:6px 0;gap:8px 10px}
  .brand img{height:34px}
  nav.main{
    order:0;flex:1 1 auto;flex-basis:auto;min-width:0;max-width:none;
    flex-wrap:nowrap;justify-content:center;align-items:flex-start;align-content:flex-start;
    gap:2px;padding:4px;border-radius:22px;margin-left:0;margin-right:0;
  }
  nav.main .nav-break{display:none}
  nav.main .nav-item{min-width:0}
  nav.main a{
    font-size:12.5px;padding:7px 8px;line-height:1.15;
    white-space:normal;text-align:center;
  }
  nav.main .nav-trigger{
    font-size:12.5px;padding:7px 2px 7px 8px;line-height:1.15;
    white-space:normal;text-align:center;min-width:0;
  }
  nav.main .nav-caret{width:20px;height:20px;margin-left:-5px}
  nav.main .nav-sub a{font-size:14px;padding:9px 12px;white-space:nowrap;text-align:left}
  .header-cta{flex:none;flex-wrap:nowrap;align-items:flex-start;margin-left:0;gap:8px}
  .phone-link{font-size:14.5px;gap:7px;line-height:1}
  .phone-link .p-ico{width:30px;height:30px;border-radius:9px}
  .header-cta .btn{padding:10px 15px;font-size:14px}
  /* anchor jumps and the two sticky cards clear the slim one-row bar */
  section[id],#quote{scroll-margin-top:84px}
  .quote-card{top:80px}
  .ror-result{top:80px}
}
/* narrower desktops: squeeze a touch harder so the single row holds */
@media (min-width:1020px) and (max-width:1279px){
  .brand img{height:30px}
  nav.main a{font-size:12px;padding:7px 6px}
  nav.main .nav-trigger{font-size:12px;padding:7px 2px 7px 6px}
  .phone-link{font-size:13.5px}
  .phone-link .p-ico{width:28px;height:28px}
  .header-cta .btn{padding:9px 13px;font-size:13.5px}
}
/* wide desktops: one line per tab, slightly larger type again */
@media (min-width:1500px){
  .brand img{height:38px}
  nav.main{gap:3px;padding:4px}
  nav.main a{font-size:13.5px;padding:8px 10px}
  nav.main .nav-trigger{font-size:13.5px;padding:8px 3px 8px 10px}
  .phone-link{font-size:15.5px}
  .phone-link .p-ico{width:32px;height:32px}
  .header-cta .btn{padding:11px 17px;font-size:14.5px}
}
@media (min-width:1750px){
  nav.main a{font-size:14px;padding:9px 11px}
  nav.main .nav-trigger{font-size:14px;padding:9px 3px 9px 11px}
  section[id],#quote{scroll-margin-top:70px}
  .quote-card{top:66px}
  .ror-result{top:66px}
}
/* ---------- mobile sticky header (owner, Nov 12) ----------
   Phones and tablets (<1020px, where the hamburger header shows):
   the top bar — logo on the left, menu button on the right — now
   stays pinned to the top of the screen while the page scrolls,
   exactly like the desktop header already does. Colors, sizing,
   spacing and the menu button itself are unchanged, and desktop
   (>=1020px) is untouched. The menu panel lives inside the header,
   so when it is opened it stays attached under the pinned bar;
   its height is capped to the space left below the bar and it
   scrolls internally, so every menu link stays reachable on
   short screens. Anchor jumps get a matching offset so a jumped-to
   section never slides underneath the pinned bar (bar is ~65px
   tall on phones, ~67px on tablets). */
@media (max-width:1019px){
  header{position:sticky;top:0}
  section[id],#quote{scroll-margin-top:80px}
  .mobile-menu.open{
    max-height:calc(100vh - 66px);max-height:calc(100dvh - 66px);
    overflow-y:auto;-webkit-overflow-scrolling:touch;
  }
}
/* ---------- white header bar (owner, Nov 12) ----------
   Both phone/tablet and desktop: the top bar — logo, tab pill,
   phone number and Book Online — is now WHITE, like the light
   sections elsewhere on the site, and the header logo is the
   black-"SERVICES" version on white (assets/logo-header-white.jpg,
   cropped from pro-sky-logo-new-white-bg.jpg), so it blends into
   the bar with no visible box. Everything that sat in white or
   pale-blue type on the old dark bar switches to dark navy so it
   stays readable: the tab labels, the dropdown carets, the phone
   number and the mobile hamburger. The tab pill itself becomes a
   pale-blue tint on the white bar, the dropdown panels go white
   with dark links, and the mobile menu panel (inside the header)
   gets matching pale tiles with dark text. Book Online keeps its
   yellow gradient, which stands out even more on white. Layout,
   tab order, sizing and the sticky pinning on both breakpoints
   are untouched, and nothing below the header changes. */
header{
  background:#ffffff;
  border-bottom:1px solid #d9e4f2;
  box-shadow:0 8px 28px rgba(18,38,63,.13);
  color:#16283f;
}
.brand img{filter:none}
.phone-link{color:#16283f}
.phone-link .p-ico{background:rgba(216,13,26,.07);border-color:rgba(216,13,26,.35);color:var(--red-deep)}
@media (max-width:1019px){
  .menu-btn{background:#eef4fc;border:1px solid #cfddf0;color:#16283f}
  .menu-btn:active{background:#e0ebf9}
  .mobile-menu.open{border-top:1px solid #e2ebf7}
  .mm-grid a{background:#f2f7ff;border-color:#d7e3f2;color:#16283f}
  .mm-grid a:active{background:#e2ecf9}
  .mm-grid a svg{color:#0057b8}
  .mm-grid a.mm-quote{background:var(--grad-yellow);color:#1c1503;border:0}
  .mm-grid a.mm-quote svg{color:#1c1503}
  .mm-group-btn{background:#f2f7ff;border-color:#d7e3f2;color:#16283f}
  .mm-group-btn:active{background:#e2ecf9}
  .mm-group-btn svg{color:#0057b8}
  .mm-sub a{background:#eaf2fd}
}
@media (min-width:1020px){
  nav.main{
    background:linear-gradient(120deg,#f4f8ff,#e7effa);
    border:1px solid #cfddf0;
    box-shadow:0 6px 18px rgba(18,38,63,.08);
  }
  nav.main a{color:#16283f}
  /* every per-tab accent color used on the dark bar (yellow for
     Plans / Financing, salmon for Trane, sky for Washington Gas /
     Water Heaters, teal for Water Filtration — set under both the
     "#name" and "#/name" href spellings) is unreadable on white,
     so ALL tab links go dark navy here; the extra header element
     in the selector outranks each of those accent rules, while
     their :hover rules (dark on yellow) still win on hover */
  header nav.main a[href^="#"]{color:#16283f}
  nav.main .nav-trigger{color:#16283f}
  nav.main .nav-caret{color:#16283f}
  nav.main .nav-sub{
    background:#ffffff;border:1px solid #cfddf0;
    box-shadow:0 22px 48px rgba(18,38,63,.18);
  }
  nav.main .nav-sub a{color:#16283f}
}
/* ---------- desktop header: one-two steps bigger (owner, Nov 12) ----------
   Desktop only (>=1020px): the white bar gets a little more
   presence — taller bar (more padding above/below), a bigger
   logo, and bigger type on the tabs, the phone number and Book
   Online. Each value moves up one to two steps from the slim
   single-row pass: logo 34->46px (40px at 1020-1279, 52px from
   1500px), tab type 12.5->14.5px (13.5px at 1020-1279, 15.5px
   from 1500px, 16px from 1750px), phone 14.5->17px, button
   14->15.5px. Still one row, still top-aligned, still sticky,
   tab order unchanged; the sticky offsets grow to match the
   taller bar (~68-74px). The mobile/tablet header (<1020px)
   is exactly as before — its size was already right. */
@media (min-width:1020px){
  .header-in{padding:11px 0;gap:10px 14px}
  .brand img{height:46px}
  nav.main{gap:3px;padding:6px;border-radius:24px}
  nav.main a{font-size:14.5px;padding:9px 11px}
  nav.main .nav-trigger{font-size:14.5px;padding:9px 3px 9px 11px}
  nav.main .nav-caret{width:24px;height:24px;margin-left:-6px}
  nav.main .nav-sub a{font-size:15px;padding:10px 13px}
  .phone-link{font-size:17px;gap:8px}
  .phone-link .p-ico{width:36px;height:36px;border-radius:10px}
  .header-cta{gap:10px}
  .header-cta .btn{padding:13px 19px;font-size:15.5px}
  section[id],#quote{scroll-margin-top:94px}
  .quote-card{top:90px}
  .ror-result{top:90px}
}
@media (min-width:1020px) and (max-width:1279px){
  .brand img{height:40px}
  nav.main a{font-size:13.5px;padding:9px 9px}
  nav.main .nav-trigger{font-size:13.5px;padding:9px 3px 9px 9px}
  .phone-link{font-size:15.5px}
  .phone-link .p-ico{width:34px;height:34px}
  .header-cta .btn{padding:12px 17px;font-size:15px}
}
@media (min-width:1500px){
  .brand img{height:52px}
  nav.main{gap:4px;padding:6px}
  nav.main a{font-size:15.5px;padding:10px 13px}
  nav.main .nav-trigger{font-size:15.5px;padding:10px 3px 10px 13px}
  .phone-link{font-size:18px}
  .phone-link .p-ico{width:38px;height:38px}
  .header-cta .btn{padding:14px 21px;font-size:16px}
}
@media (min-width:1750px){
  nav.main a{font-size:16px;padding:11px 14px}
  nav.main .nav-trigger{font-size:16px;padding:11px 3px 11px 14px}
}
/* ---------- desktop header: Get a Free Quote button (owner, Nov 12) ----------
   Desktop only (>=1020px, where the pill tab bar shows): a second
   button sits in the header CTA group next to Book Online, in the
   site's blue button style so it stands apart from the yellow
   Book Online on the white bar. Its href="#quote" is picked up by
   the same delegated handler as every other Get a Free Quote link,
   so it opens the closable quote view (openQuote()). Below 1020px
   the button is not shown at all — the phone/tablet header and the
   fixed mobile bottom bar (which already carries Free Quote) are
   unchanged, and the header stays white and sticky as before. */
.header-quote{display:none}
@media (min-width:1020px){
  /* owner, Nov 12: the white label on the light blue gradient was
     hard to read — the header Get a Free Quote button gets BLACK
     text. This class sits only on that one header button, so no
     other blue button on the page changes. */
  .header-quote{display:inline-flex;color:#000}
  .header-quote:hover{color:#000}
}
/* ---------- desktop header: ALL tabs in ONE row (owner, Nov 12) ----------
   Desktop only (>=1020px). Replaces the previous 4-over-6 two-row
   tab split. Layout stays two stacked rows overall:
   - Row one: logo on the left; phone number, Book Online and
     Get a Free Quote on the right — exactly as before.
   - Row two: the tab pill takes the full header width on its own
     row and ALL TEN tabs sit on ONE single line inside it. The
     forced .nav-break is switched off, the pill no longer wraps,
     and the tab type, padding and gaps step down at the narrower
     desktop widths (12px / 7px 6px at 1020-1279px) and step back
     up as the viewport widens (13px at 1280px, 14.5px at 1500px,
     15.5px at 1750px), so every tab label shows in full, in order,
     with no overlap at every desktop width from 1020px up.
   The header stays white and sticky, the tab order and labels,
   the phone number and both button links are unchanged, and
   phones/tablets (<1020px) keep their hamburger header and the
   fixed mobile bottom bar exactly as before.
   Follow-up pass (owner, Nov 12): the single tab row is spread a
   touch more open — slightly wider gaps between the tabs and a
   little more side padding inside each tab at every desktop tier
   (the pill already distributes leftover width with
   space-between, so the row reads more relaxed, never crowded) —
   and the whole top bar is pressed shorter and tighter: less
   padding above/below and between the two rows, a slightly
   smaller logo, slimmer tab and button heights and a smaller
   phone icon. New bar height is ~90-102px, so the anchor-jump
   offset and the two sticky cards move up to match. */
@media (min-width:1020px){
  .header-in{flex-wrap:wrap;align-items:center;padding:6px 0;gap:6px 14px}
  .brand img{height:38px}
  nav.main{
    order:3;flex:1 1 100%;flex-basis:100%;max-width:none;min-width:0;
    flex-wrap:nowrap;justify-content:space-between;align-items:center;align-content:center;
    gap:4px;padding:4px;border-radius:999px;margin-left:0;margin-right:0;
  }
  nav.main .nav-break{display:none}
  nav.main .nav-item{min-width:0;flex:none}
  nav.main a{
    font-size:12px;padding:6px 7px;line-height:1;letter-spacing:-.01em;
    white-space:nowrap;text-align:center;flex:none;
  }
  nav.main .nav-trigger{
    font-size:12px;padding:6px 2px 6px 7px;line-height:1;letter-spacing:-.01em;
    white-space:nowrap;text-align:center;min-width:0;
  }
  nav.main .nav-caret{width:18px;height:18px;margin-left:-3px;flex:none}
  nav.main .nav-sub a{font-size:14px;padding:9px 12px;white-space:nowrap;text-align:left}
  .header-cta{flex:none;flex-wrap:nowrap;align-items:center;margin-left:auto;gap:9px}
  .phone-link{font-size:16px;gap:8px;white-space:nowrap;flex:none}
  .phone-link .p-ico{width:30px;height:30px;border-radius:9px;flex:none}
  .header-cta .btn{flex:none;white-space:nowrap;padding:9px 16px;font-size:14.5px}
  section[id],#quote{scroll-margin-top:120px}
  .quote-card{top:116px}
  .ror-result{top:116px}
}
@media (min-width:1280px){
  nav.main{gap:6px;padding:4px}
  nav.main a{font-size:13px;padding:7px 10px;letter-spacing:0}
  nav.main .nav-trigger{font-size:13px;padding:7px 3px 7px 10px;letter-spacing:0}
  nav.main .nav-caret{width:20px;height:20px;margin-left:-4px}
}
@media (min-width:1500px){
  .brand img{height:42px}
  nav.main{gap:8px;padding:5px}
  nav.main a{font-size:14.5px;padding:8px 13px}
  nav.main .nav-trigger{font-size:14.5px;padding:8px 3px 8px 13px}
  nav.main .nav-caret{width:22px;height:22px;margin-left:-5px}
  nav.main .nav-sub a{font-size:15px;padding:10px 13px}
}
@media (min-width:1750px){
  nav.main{gap:10px}
  nav.main a{font-size:15.5px;padding:9px 15px}
  nav.main .nav-trigger{font-size:15.5px;padding:9px 3px 9px 15px}
}

/* ---------- Call / Text contact sheet ----------
   Tapping any phone link opens this sheet with Call and Text options.
   Bottom sheet on mobile, centered card on desktop. */
.contact-sheet{position:fixed;inset:0;z-index:200;display:none}
.contact-sheet.open{display:block}
.cs-backdrop{position:absolute;inset:0;background:rgba(4,10,24,.72);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.cs-panel{
  position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:100%;max-width:480px;padding:22px 22px calc(20px + env(safe-area-inset-bottom,0px));
  background:var(--panel);border:1px solid var(--line);border-bottom:none;
  border-radius:22px 22px 0 0;box-shadow:0 -12px 44px rgba(0,0,0,.5);
  text-align:center;
}
.cs-title{font-family:var(--font-d);font-weight:700;font-size:19px;margin:0 0 2px}
.cs-num{color:var(--ink-2);font-size:15px;margin:0 0 16px}
.cs-btn{
  display:flex;align-items:center;justify-content:center;gap:9px;
  width:100%;padding:14px 16px;margin-bottom:10px;border-radius:13px;
  font-family:var(--font-d);font-weight:700;font-size:16.5px;text-decoration:none;
}
.cs-call{background:var(--grad-yellow);color:#1c1503;box-shadow:var(--glow-yellow)}
.cs-text{background:var(--grad-blue);color:#fff;box-shadow:var(--glow-blue)}
.cs-btn:active{filter:brightness(1.08)}
.cs-cancel{
  width:100%;padding:12px 16px;margin-top:2px;border-radius:13px;cursor:pointer;
  background:rgba(120,170,255,.08);color:var(--ink);border:1px solid var(--line);
  font-family:var(--font-d);font-weight:600;font-size:15px;
}
.cs-note{color:var(--ink-3);font-size:13px;margin:12px 0 0}
@media (min-width:760px){
  .cs-panel{
    top:50%;bottom:auto;transform:translate(-50%,-50%);
    max-width:380px;padding:26px 26px 22px;
    border:1px solid var(--line);border-radius:20px;
    box-shadow:0 24px 64px rgba(0,0,0,.55);
  }
}