/* ============================================================================
   West Coast Heating Air Solar & Plumbing — v2
   MJ Unlimited rebuild. House system (see /kardia, /path-2-purpose):
   1180px container · fixed type scale · light-first · tokens up top.

   Brand carried over from their Webflow build:
     orange #fc3900 · orange-2 #f68a32 · navy #111333 · cream #f3e2da
     sky #84d1dd · Aptly (condensed display) · topography pattern · bear mark
   What changed: scale, density, hierarchy, fold priority — and light mode.
   Homepage is white-first; navy is punctuation (footer only), never the canvas.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* Display face — self-hosted from the mirror, not the Webflow CDN */
/* Barlow Condensed from Google Fonts - matches West Coast merchandise font */

:root{
  /* ---- Brand ---- */
  --orange:      #fc3900;
  --orange-2:    #fc3900; /* was light orange #f68a32; 3-color rule 2026-09-29 */
  --orange-dark: #d73000;
  --navy:        #111333;
  --grey:        #f7f8fa;
  --navy-2:      #1c1f4a;
  --cream:       #ffffff; /* was tan #f3e2da, removed 2026-09-29 per client: white only */
  --cream-2:     #ffffff; /* was tan #faf1ec */
  --sky:         #84d1dd;

  /* ---- Neutrals (never pure black) ---- */
  --ink:       #14161f;
  --ink-soft:  #14161f; /* was #545a6b; one body text color sitewide (2026-09-29) */
  --ink-faint: #8a8fa0;
  --line:      rgba(17,19,51,.12); /* was warm tan-grey #e4e0dc */
  --line-2:    rgba(17,19,51,.24); /* was warm tan-grey #cfc9c3 */
  --white:     #ffffff;

  /* ---- Semantic ---- */
  --bg:        var(--white);
  --bg-alt:    var(--cream-2);
  --bg-deep:   var(--navy);

  /* ---- Type ---- */
  --font-display:'Barlow Condensed','Barlow Condensed',Impact,sans-serif;
  --font-sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  /* Fixed ceilings. This is the whole fix — nothing scales past these. */
  --h1: clamp(34px, 4.4vw, 58px);
  --h2: clamp(27px, 3.2vw, 40px);
  --h3: clamp(21px, 2vw, 24px);
  --h4: 18px;
  --body: 17px;
  --small: 15.5px;
  --eyebrow: 14.5px;

  /* ---- Layout ---- */
  /* True 80%-of-viewport container, floored so it never gets cramped and
     capped so line length stays readable on ultrawides.
       1440px screen -> 1152px (80%) | 1920 -> 1536 (80%) | 2560 -> 1560 (61%) */
  --maxw: clamp(1100px, 78vw, 1360px);
  --gutter: 24px;
  --section-y: clamp(36px, 4.2vw, 56px);

  /* ---- Shape ---- */
  --r-sm: 8px;
  --r:    12px;
  --r-lg: 18px;
  --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(17,19,51,.05), 0 4px 14px rgba(17,19,51,.05);
  --shadow-md: 0 14px 40px rgba(17,19,51,.11);
}

/* ── RESET ─────────────────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:clip; }
html,body{ margin:0; padding:0; }
body{
  font-family:var(--font-sans);
  font-size:var(--body); line-height:1.6;
  color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }

h1,h2,h3{
  font-family:var(--font-display);
  text-transform:uppercase;
  letter-spacing:-.02em;
  line-height:1.02;
  margin:0;
  font-weight:600;
}
h1{ font-size:var(--h1); }
h2{ font-size:var(--h2); }
h3{ font-size:var(--h3); line-height:1.15; }
h4{ font-family:var(--font-sans); font-size:var(--h4); font-weight:500; margin:0; letter-spacing:0; }
p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }

.container{ width:min(100% - (var(--gutter) * 2), var(--maxw)); margin-inline:auto; }
.section{ padding-block:var(--section-y); overflow:hidden; }
.section--alt{ background:var(--bg-alt); }

/* full reviews-page grid: shows every review at once instead of a slider */
.reviews--all{ grid-template-columns:repeat(3,1fr); gap:20px 16px; margin-top:8px; }
@media(max-width:900px){ .reviews--all{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:620px){ .reviews--all{ grid-template-columns:1fr; } }

.eyebrow{
  font-family:var(--font-sans);
  font-size:var(--eyebrow); font-weight:600;
  letter-spacing:.13em; text-transform:uppercase;
  color:var(--orange); margin:0 0 10px;
}
.lede{ font-size:18px; color:var(--ink-soft); max-width:62ch; }
/* Headings are margin:0 (components own spacing) — but a lede directly
   after a heading needs breathing room. Fixes .split and .sec-head. */
h1 + .lede, h2 + .lede, h3 + .lede{ margin-top:14px; }
.sec-head{ margin-bottom:24px; }
.sec-head--center{ text-align:center; }
.sec-head--center .lede{ margin-inline:auto; }

/* ── BUTTONS ───────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:12px 26px;
  border:2px solid transparent; border-radius:5px;
  font-size:17.5px; font-weight:600; letter-spacing:.01em;
  transition:background-color .2s ease-out, color .2s ease-out, border-color .2s ease-out, transform .15s ease;
}
.btn:active{ transform:translateY(1px); }
.btn--primary{ background:var(--orange); color:var(--white); border-color:var(--orange); box-shadow:0 4px 12px 3px rgba(252,57,0,.24); }
.btn--primary:hover{ background:var(--orange-dark); border-color:var(--orange-dark); }
.btn--phone{ background:var(--navy); color:var(--white); border-color:var(--navy); }
.btn .ph-ico{ flex:none; }
.btn--phone:hover{ background:#23264d; border-color:#23264d; }
.btn--ghost{ border-color:var(--line-2); color:var(--ink); background:rgba(17,19,51,.06); }
.btn--ghost:hover{ background:var(--cream-2); border-color:var(--ink-faint); }
.btn--ghost-light{ border-color:rgba(255,255,255,.28); color:var(--white); background:transparent; }
.btn--ghost-light:hover{ background:rgba(255,255,255,.09); }
.btn--sm{ padding:9px 20px; font-size:16px; }
.btn--block{ width:100%; }
.btn .arr{ font-size:16.5px; line-height:1; }





/* ── SHIMMER (house standard — see /labbit-compare-v2, /path-2-purpose) ── */
@keyframes wc-shimmer{
  0%,65%{ left:-100%; }
  100%  { left:160%; }
}
.shimmer{ position:relative; overflow:hidden; }
.shimmer::after{
  content:'';
  position:absolute; top:0; left:-100%;
  width:60%; height:100%;
  background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.42) 50%, transparent 100%);
  animation:wc-shimmer 3.8s ease-in-out infinite;
  pointer-events:none;
}

/* One chip shimmers at a time, cycling through the row — Labbit pattern.
   8 chips × 1s each = 8s total cycle. Each chip's sweep occupies 12% of
   the cycle (~1s), then it sits idle until its next turn. */
@keyframes wc-chip-shimmer{
  0%   { left:-100%; }
  12%  { left:180%; }
  100% { left:180%; }
}
.shimmer-chip{ position:relative; overflow:hidden; }
.shimmer-chip::after{
  content:'';
  position:absolute; top:0; left:-100%;
  width:50%; height:100%;
  background:linear-gradient(120deg, transparent 0%, rgba(252,57,0,.14) 50%, transparent 100%);
  animation:wc-chip-shimmer 8s linear calc(var(--si) * 1s) infinite;
  pointer-events:none;
}



/* ── MEGA MENU ─────────────────────────────────────────────────────────── */
.nav-drop__menu.mega{
  display:none; position:absolute; top:calc(100% + 10px); left:0; transform:none;
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-md); z-index:100;
  padding:22px 28px;
  grid-template-columns:repeat(4, 1fr); gap:6px 32px;
}
.nav-drop__menu.mega--areas{
  min-width:0;
  grid-template-columns:1fr 1fr 1fr;
}
.nav-drop:hover .nav-drop__menu.mega{ display:grid; }
@media (max-width:900px){ .nav-drop:hover .nav-drop__menu.mega{ display:none; } .nav-drop:hover .nav-drop__menu.mega.mob-open{ display:grid; } .nav-drop:hover .nav-drop__menu:not(.mega){ display:none; } .nav-drop:hover .nav-drop__menu:not(.mega).mob-open{ display:block; } }
.nav-drop__menu.mega::before{
  content:''; position:absolute; top:-14px; left:0; right:0; height:14px;
}
.mega__col{ display:flex; flex-direction:column; gap:2px; }
.mega__col h4{
  font-size:14.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--orange); margin:0 0 8px; padding:0 18px;
}
.mega__col a{
  display:block; padding:7px 18px; font-size:15.5px; font-weight:500;
  color:var(--ink); border-radius:var(--r-sm); white-space:nowrap;
}
.mega__col a:hover{ background:var(--cream-2); color:var(--orange); }

/* ── NAV DROPDOWN ──────────────────────────────────────────────────────── */
.nav-drop{ position:relative; }
.nav-drop__trigger{ cursor:pointer; }
.nav-drop__caret{ font-size:12.5px; opacity:.5; }
.nav-drop__menu{
  display:none; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  /* small dropdowns stay on their trigger */
  background:var(--white); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow-md); padding:6px 0; min-width:200px; z-index:90;
  padding-top:12px;
}
/* invisible bridge so cursor doesn't lose hover crossing the gap */
.nav-drop__menu::before{
  content:''; position:absolute; top:-14px; left:0; right:0; height:14px;
}
.nav-drop:hover .nav-drop__menu:not(.mega),
.nav-drop__menu:not(.mega):hover{ display:block; }
.nav-drop__menu a{
  display:block; padding:10px 18px; font-size:15.5px; font-weight:500;
  color:var(--ink); white-space:nowrap;
}
.nav-drop__menu a:hover{ background:var(--cream-2); color:var(--orange); }

/* ── HERO TRUST BADGES ─────────────────────────────────────────────────── */
.hero__badges{
  display:flex; flex-wrap:wrap; gap:14px; margin-top:18px;
  padding-top:18px; border-top:1px solid rgba(17,19,51,.10);
}
.trust-badge{
  display:flex; align-items:center; gap:6px;
  background:rgba(17,19,51,.06); border-radius:var(--r-sm);
  padding:8px 7px;
  transition:background .15s ease;
}
.trust-badge:hover{ background:rgba(17,19,51,.10); }
.trust-badge svg{ flex:none; width:20px; height:20px; }
.trust-badge__info{ display:flex; flex-direction:column; line-height:1.2; }
.trust-badge__info strong{ font-size:12px; color:var(--navy); }
.trust-badge__info span{ font-size:11px; color:var(--ink-soft); }
.trust-badge__info .stars{ color:var(--orange-2); font-size:9.5px; letter-spacing:.7px; }

/* Desktop/widescreen: keep all five trust badges on a single row.
   Five badges at the default sizing overflow the hero copy column and
   wrap Instagram onto its own line, so compact them from 1024px up. */
@media(min-width:1024px){
  .hero__badges{ gap:6px; }
  .trust-badge{ padding:4px 6px; gap:5px; flex:1 1 0; min-width:0; justify-content:center; }
  .trust-badge svg{ width:14px; height:14px; }
  .trust-badge__info strong{ font-size:11.5px; white-space:nowrap; }
  .trust-badge__info span{ font-size:10.5px; white-space:nowrap; }
  .trust-badge__info .stars{ font-size:9px; letter-spacing:.4px; }
}
/* >=1366: hero copy column is at its widest, so scale the badges up to
   better fill the divider line above them. */
@media(min-width:1366px){
  .hero__badges{ gap:8px; }
  .trust-badge{ padding:4px 7px; gap:5px; }
  .trust-badge svg{ width:14px; height:14px; }
  .trust-badge__info strong{ font-size:11.5px; }
  .trust-badge__info span{ font-size:10.5px; }
  .trust-badge__info .stars{ font-size:9.5px; }
}
/* 1024-1099: hero copy column is narrowest here, so tighten a little further
   to keep all five badges on one line. */
@media(min-width:1024px) and (max-width:1099px){
  .hero__badges{ gap:4px; }
  .trust-badge{ padding:5px 6px; gap:5px; }
  .trust-badge svg{ width:18px; height:18px; }
}

/* ── REVEAL ANIMATION ──────────────────────────────────────────────────────
   Fast and short on purpose: 380ms, 14px of travel. Anything longer on a
   service page reads as lag, not polish.
   Gated on .js so the page is fully visible if JS never runs. */
.js .reveal{
  opacity:0; transform:translateY(32px);
  transition:opacity .6s cubic-bezier(.16,1,.3,1),
             transform .7s cubic-bezier(.16,1,.3,1);
  will-change:opacity, transform;
}
.js .reveal.is-in{ opacity:1; transform:none; }
.js .reveal--left{ transform:translateX(-40px); opacity:0; }
.js .reveal--right{ transform:translateX(40px); opacity:0; }
.js .reveal--scale{ transform:translateY(28px) scale(.94); opacity:0; }
.js .reveal--left.is-in,
.js .reveal--right.is-in,
.js .reveal--scale.is-in{ transform:none; }

/* Hero animates on load, not on scroll — it's already in view. */
.js .reveal-load{
  opacity:0; transform:translateY(24px);
  animation:wc-rise .65s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes wc-rise{ to{ opacity:1; transform:none; } }

@media (prefers-reduced-motion:reduce){
  .js .reveal,
  .js .reveal--left,
  .js .reveal--right,
  .js .reveal--scale{ opacity:1 !important; transform:none !important; transition:none !important; }
  .js .reveal-load{ opacity:1; transform:none; animation:none; }
}

/* ── SMALL UTILITIES ───────────────────────────────────────────────────── */
.btn-row{ display:flex; flex-wrap:wrap; gap:10px; }
.btn-row--center{ justify-content:center; }
.btn-row--mt{ margin-top:24px; }
.btn-row--mt-sm{ margin-top:12px; }
.section--flush-top{ padding-top:0; }
.section--tight{ padding-block:30px; }
.eyebrow--light{ color:rgba(255,255,255,.78); }
.text-center{ text-align:center; }

/* ── UTILITY BAR ───────────────────────────────────────────────────────── */
.utility{ background:var(--navy); color:var(--white); font-size:var(--small); position:sticky; top:0; z-index:81; }
.utility .container{ display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:38px; }
.utility__social{ display:flex; gap:14px; align-items:center; }
.utility__social img{ width:16px; height:16px; opacity:.9; }
.utility__social a:hover img{ opacity:1; }
.utility__note{ font-weight:500; letter-spacing:.01em; }

/* ── HEADER ────────────────────────────────────────────────────────────── */
.header{ position:sticky; top:38px; z-index:80; background:var(--white); border-bottom:1px solid rgba(17,19,51,.08); }
.header .container{ display:flex; align-items:center; gap:22px; min-height:66px; position:relative; }
.brand img{ height:77px; width:auto; }
.nav{ display:flex; align-items:center; gap:22px; margin:0 auto; }
.nav a{ font-size:16.5px; font-weight:500; color:var(--navy); white-space:nowrap; }
.nav a:hover{ color:var(--orange); }
.nav-static{ font-size:16.5px; font-weight:500; color:var(--navy); white-space:nowrap; cursor:default; }
.header__cta{ display:flex; align-items:center; gap:10px; margin-left:auto; }
.nav-toggle{ display:none; margin-left:auto; background:none; border:0; padding:8px 0; }
.nav-toggle span{ display:block; width:22px; height:2px; background:var(--navy); margin:4px 0; border-radius:2px; }

/* ── HEADER CTA PAIR ──────────────────────────────────────────────────────
   Both buttons stay on one line at every desktop width — that is the rule
   the rest of this block exists to serve. The pair sits on a two-track grid
   so the boxes are always identical in width and height, and nowrap forbids
   the two- and three-line collapse flex used to fall back on when space ran
   short.
   Something has to absorb that, and below ~1680px it can't be the buttons:
   the container is too narrow to hold eight nav items at full size plus the
   ~340px the pair needs. So the nav gives up the difference — its gap and
   type shrink continuously with the viewport rather than at a hard
   breakpoint, so there is no width where the header suddenly re-flows.
   Above ~1680px everything fits at full size and none of this applies. */
@media (min-width:901px){
  .header .container{
    display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  }
  .header .brand{ justify-self:start; }
  .header .nav{ justify-self:center; }
  .header .header__cta{ justify-self:end; }
  .header .header__cta{
    display:grid; grid-auto-flow:column; grid-auto-columns:1fr;
    align-items:stretch; gap:10px;
  }
  .header .header__cta .btn{
    padding-inline:20px; white-space:nowrap; text-align:center;
  }
}
@media (min-width:901px) and (max-width:1680px){
  .header .container{ gap:14px; }
  .nav{ gap:clamp(7px, 0.66vw, 15px); margin:0; }
  .nav > a,
  .nav .nav-drop__trigger{ font-size:clamp(14px, 1.02vw, 16px); }
}




/* ── NAV DROPDOWN ──────────────────────────────────────────────────────── */
.nav-drop{ position:relative; }
.nav-drop__trigger{ cursor:pointer; }
.nav-drop__caret{ font-size:12.5px; opacity:.5; }
.nav-drop__menu{
  display:none; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  /* small dropdowns stay on their trigger */
  background:var(--white); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow-md); padding:6px 0; min-width:200px; z-index:90;
  padding-top:12px;
}
/* invisible bridge so cursor doesn't lose hover crossing the gap */
.nav-drop__menu::before{
  content:''; position:absolute; top:-14px; left:0; right:0; height:14px;
}
.nav-drop:hover .nav-drop__menu:not(.mega),
.nav-drop__menu:not(.mega):hover{ display:block; }
.nav-drop__menu a{
  display:block; padding:10px 18px; font-size:15.5px; font-weight:500;
  color:var(--ink); white-space:nowrap;
}
.nav-drop__menu a:hover{ background:var(--cream-2); color:var(--orange); }

/* ── HERO ──────────────────────────────────────────────────────────────── */
.hero{
  position:relative; overflow:hidden;
  padding-block:0 0;
  background:
    radial-gradient(820px 480px at 78% 24%, rgba(246,138,50,.22) 0%, rgba(246,138,50,0) 62%),
    radial-gradient(640px 460px at 10% 86%, rgba(132,209,221,.20) 0%, rgba(132,209,221,0) 65%),
    linear-gradient(168deg, var(--cream) 0%, #ffffff 46%, #ffffff 78%, var(--white) 100%);
}

/* Full-width van background. Asset is a simple crop of the left 60% of the
   original banner — one van, verified by luminance map. */
.hero__bg{
  position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;
}
.hero__bg img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 30%;
  opacity:.30;
}
/* old white wash removed — replaced by .hero__wash */


/* warm orange wash: readable text on the left, fades out before the truck shows */
.hero__wash{
  position:absolute; inset:0; z-index:0;
  background:linear-gradient(90deg,
    rgba(243,226,218,.92) 0%,
    rgba(243,226,218,.85) 20%,
    rgba(243,226,218,.60) 40%,
    rgba(243,226,218,.30) 55%,
    rgba(243,226,218,0) 70%
  );
  pointer-events:none;
}
.hero .container{ position:relative; z-index:1; }
.hero__grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:center; }
.hero__copy{ padding-block:clamp(20px,2.4vw,32px); }
.hero .eyebrow{ font-size:15.5px; letter-spacing:.15em; margin-bottom:14px; }
.hero h1{
  color:var(--navy); margin-bottom:18px;
  font-size:clamp(27px, 3.8vw, 54px);
  line-height:1.22; letter-spacing:-.025em;
}
.hero h1 em{ font-style:normal; color:var(--orange); }
.hero__mark{
  background:var(--orange); color:var(--white);
  padding:2px .18em; border-radius:4px;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}
.hero__sub{ font-size:19px; color:var(--ink); max-width:52ch; margin-bottom:26px; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:22px; }
.hero__proof{ display:flex; flex-wrap:wrap; gap:9px 24px; font-size:var(--small); color:var(--ink); }
.hero__proof li{ display:flex; align-items:center; gap:7px; }
.hero__proof .dot{ width:5px; height:5px; border-radius:50%; background:var(--orange); flex:none; }

/* Bear pushed to the far right edge of the viewport, not the container.
   The media column bleeds out of the container into the right margin. */
.hero__media{
  position:relative; display:flex; justify-content:flex-end; align-items:flex-end;
  /* bleed right: eat the container's right gutter + the remaining viewport margin */
  margin-right:calc(-1 * ((100vw - var(--maxw)) / 2 + var(--gutter)));
  padding-right:0;
}
.hero__bear{
  position:relative; z-index:1;
  width:auto; height:min(82vh, 600px); max-width:none;
  margin-bottom:-140px;
  -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 12%, #000 100%), linear-gradient(90deg, #000 0%, #000 78%, rgba(0,0,0,0) 96%);
          mask-image:linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 12%, #000 100%), linear-gradient(90deg, #000 0%, #000 78%, rgba(0,0,0,0) 96%);
  -webkit-mask-composite:destination-in;
          mask-composite:intersect;
  filter:drop-shadow(0 18px 34px rgba(17,19,51,.16));
}

/* Hero art shown as-is, no edge fade. */
.hero__bear--plain{
  -webkit-mask-image:none; mask-image:none;
  filter:drop-shadow(0 18px 34px rgba(17,19,51,.14));
}

.hero__bear--scene{
  -webkit-mask-image:
    linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 18%, #000 88%, rgba(0,0,0,0) 100%),
    linear-gradient(90deg, rgba(0,0,0,0) 0%, #000 14%, #000 82%, rgba(0,0,0,0) 100%);
          mask-image:
    linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 18%, #000 88%, rgba(0,0,0,0) 100%),
    linear-gradient(90deg, rgba(0,0,0,0) 0%, #000 14%, #000 82%, rgba(0,0,0,0) 100%);
  -webkit-mask-composite:destination-in;
          mask-composite:intersect;
  filter:none;
}

/* ── TRUST STRIP ───────────────────────────────────────────────────────── */
.trust{ background:var(--navy); border:none; color:var(--white); }
.trust .container{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px 30px; padding-block:16px; }
.trust__item{ display:flex; align-items:center; gap:9px; font-size:var(--small); font-weight:500; color:var(--white); }
.trust__item img{ width:19px; height:19px; }

/* ── SERVICES ──────────────────────────────────────────────────────────── */
.svc-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.svc{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; display:flex; flex-direction:column;
  text-decoration:none; color:var(--ink);
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.svc:hover{ border-color:var(--orange); box-shadow:var(--shadow-md); transform:translateY(-3px); }

/* image fills the top of the card */
.svc__img{
  width:100%; aspect-ratio:5/4; height:auto;
  background-size:cover; background-position:center 20%;
  transition:transform .4s ease;
}
.svc:hover .svc__img{ transform:scale(1.05); }

/* orange title bar overlaps the image bottom */
.svc__bar{
  background:var(--orange); color:var(--white);
  padding:12px 18px; display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.svc__bar h3{
  font-size:20px; color:var(--white); margin:0;
  text-transform:uppercase; letter-spacing:-.01em;
}
.svc__bar .arr{ font-size:19px; opacity:.7; transition:opacity .15s ease, transform .15s ease; }
.svc:hover .svc__bar .arr{ opacity:1; transform:translateX(3px); }

/* description text below */
.svc p{
  padding:16px 18px; font-size:17px; color:var(--ink-soft);
  line-height:1.55; flex:1; margin:0;
}

.svc-more{
  margin-top:16px; padding:18px 20px;
  background:var(--white); border:1px solid var(--line); border-radius:var(--r);
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px;
}
.svc-more__toggle{ display:none; }
.svc-more strong{ font-size:var(--small); color:var(--navy); margin-right:4px; }
.svc-more a{
  font-size:var(--small); font-weight:500; color:var(--orange);
  background:rgba(252,57,0,.08); border:1px solid rgba(252,57,0,.20); border-radius:var(--r-pill); padding:6px 13px;
  transition:all .15s ease;
}
.svc-more a:hover{ border-color:var(--orange); color:var(--orange); }

.svc-issues{ margin-top:12px; margin-bottom:0; }
.view-all-services{ margin-top:28px; }
.svc-issues a{
  background:var(--cream-2); border-color:var(--line);
  color:var(--ink);
}
.svc-issues a:hover{ border-color:var(--orange); color:var(--orange); background:var(--white); }

/* ── SPLIT (about / why) ───────────────────────────────────────────────── */
.split{ display:grid; grid-template-columns:1fr 1.12fr; gap:48px; align-items:center; }
.split img{ border-radius:var(--r-lg); width:100%; }

/* Media bleeds into the right margin so the subject reads at full weight
   instead of sitting politely inside a half-column. */
.split__media{ position:relative; }
.split__media img{
  width:calc(100% + ((100vw - var(--maxw)) / 2) + var(--gutter));
  max-width:none;
  border-radius:var(--r-lg) 0 0 var(--r-lg);
}
.split__points{ display:grid; gap:12px; margin-top:20px; }
/* Contained variant: whole image, no crop, no right-edge bleed (financing page) */
.split__media--box img{
  width:80%; max-width:none;
  margin-inline:auto;
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-md);
  display:block;
}
.split__points li{ display:flex; gap:11px; align-items:flex-start; font-size:var(--small); }
.split__points img{ width:17px; height:17px; margin-top:3px; flex:none; border-radius:0; }

/* ── MEMBERSHIP ────────────────────────────────────────────────────────── */
.tiers{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; align-items:stretch; }
.tier{
  background:linear-gradient(168deg, var(--white) 0%, #ffffff 50%, var(--cream-2) 100%); color:var(--ink);
  border:1px solid var(--line); border-radius:var(--r);
  padding:22px 19px; display:flex; flex-direction:column; gap:13px; position:relative;
}
.tier--featured{ border-color:var(--orange); border-width:2px; box-shadow:var(--shadow-md); }
.tier__flag{
  position:absolute; top:-10px; left:19px;
  background:var(--orange); color:var(--white);
  font-size:12.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  padding:4px 10px; border-radius:var(--r-pill);
}
.tier h3{ font-size:25px; color:var(--navy); line-height:1.25; min-height:0; display:block; margin:0; }
.tier h3 em{ font-style:normal; text-transform:lowercase; color:var(--navy); font-weight:500; }
.tier__price{ display:flex; align-items:baseline; gap:5px; }
.tier__price b{ font-family:var(--font-display); font-size:23px; line-height:1; color:var(--navy); }
.tier__price span{ font-size:var(--small); color:var(--navy); }
.tier__alt{ font-size:15.5px; color:var(--navy); margin:0; }
.tier ul{ display:grid; gap:8px; flex:1; }
.tier li{ display:flex; gap:9px; font-size:14.5px; color:var(--navy); line-height:1.45; }
.tier li img{ width:15px; height:15px; margin-top:2px; flex:none; }

/* ── OFFER BAND ────────────────────────────────────────────────────────── */
#financing{ padding:30px 0 !important; background:var(--white); position:relative; overflow:hidden; }
.band{
  background:transparent;
  border-radius:0; color:var(--white);
  position:relative; overflow:hidden;
  padding:30px 34px;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px;
}
.band h2{ color:var(--white); margin-bottom:6px; }
.band p{ font-size:var(--small); color:rgba(255,255,255,.9); max-width:52ch; }

.band__actions{ display:flex; flex-wrap:wrap; gap:10px; position:relative; z-index:1; }

/* ── FINANCING PAGE ────────────────────────────────────────────────────── */
.i-hero__grid{
  display:grid; grid-template-columns:1.4fr .9fr; gap:44px; align-items:center;
}
.fin-offer{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r);
  border-top:4px solid var(--orange);
  box-shadow:var(--shadow-md);
  padding:22px 40px 20px;
  text-align:center;
  max-width:440px; justify-self:end; width:100%;
  transform:rotate(-1deg);
}
.fin-offer__head{
  display:flex; align-items:center; justify-content:center; gap:12px;
  padding-bottom:12px; margin-bottom:12px;
  border-bottom:1px dashed var(--line-2);
}
.fin-offer__head img{ height:42px; width:auto; }
.fin-offer__head span{
  font-size:14px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-faint);
}
.fin-offer__big{
  font-family:var(--font-display); font-weight:800;
  font-size:84px; line-height:.9; color:var(--navy);
}
.fin-offer__big sup{ font-size:38px; color:var(--orange); }
.fin-offer__term{
  font-family:var(--font-display); font-weight:600; text-transform:uppercase;
  font-size:24px; letter-spacing:.03em; color:var(--orange); margin-top:2px;
}
.fin-offer__fine{ font-size:14px; color:var(--ink-soft); line-height:1.45; margin-top:8px; }
@media(max-width:900px){
  .i-hero__grid{ grid-template-columns:1fr; gap:28px; }
  .fin-offer{ justify-self:start; transform:none; }
}
.fin-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.fin-step{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r);
  padding:26px 22px; position:relative;
}
.fin-step__num{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%;
  background:var(--orange); color:var(--white);
  font-family:var(--font-display); font-size:20px; font-weight:700;
  margin-bottom:14px;
}
.fin-step h3{ font-size:20px; color:var(--navy); margin-bottom:8px; }
.fin-step p{ font-size:var(--small); color:var(--ink-soft); line-height:1.55; }
.fin-partner{
  margin-top:28px;
  background:var(--white); border:1px solid var(--line); border-radius:var(--r);
  padding:22px 26px;
  display:flex; align-items:center; gap:22px; flex-wrap:wrap;
}
.fin-partner img{ height:64px; width:auto; flex:none; }
.fin-partner > div{ flex:1; min-width:260px; }
.fin-partner strong{ display:block; font-size:16.5px; color:var(--navy); margin-bottom:4px; }
.fin-partner p{ font-size:15px; color:var(--ink-soft); line-height:1.55; }
.fin-partner .btn{ flex:none; }
@media(max-width:900px){
  .fin-steps{ grid-template-columns:1fr; }
  .fin-partner{ flex-direction:column; align-items:flex-start; }
}

/* ── REFER A FRIEND ─────────────────────────────────────────────────────── */
.ref-hero__media img{
  width:100%; max-width:400px; display:block; margin-inline:auto;
  border-radius:var(--r-lg); box-shadow:var(--shadow-md);
}
.ref-hero-qr{
  display:flex; align-items:center; gap:14px; margin-top:24px;
}
.ref-hero-qr img{
  width:96px; height:96px; display:block;
  background:var(--white); border:1px solid var(--line); border-radius:10px;
  box-shadow:var(--shadow-sm, 0 2px 8px rgba(0,0,0,.08));
}
.ref-hero-qr span{ font-size:14.5px; color:var(--ink-soft); max-width:22ch; }
/* A QR code can't be scanned by the device showing it — hide the QR on phones
   and let the Start Referring button carry the action. */
@media(max-width:700px){ .ref-hero-qr{ display:none; } }
.ref-tiers{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.ref-tier{
  border-radius:var(--r);
  padding:26px 24px;
  color:var(--white);
}
.ref-tier:nth-child(odd){
  background:var(--orange);
  border-top:4px solid var(--navy);
}
.ref-tier:nth-child(even){
  background:#ffffff;
  border-top:4px solid var(--navy);
}
.ref-tier__amount{
  font-family:var(--font-display); font-weight:800;
  font-size:56px; line-height:.95;
  margin-bottom:8px;
}
.ref-tier:nth-child(odd) .ref-tier__amount{ color:var(--navy); }
.ref-tier:nth-child(even) .ref-tier__amount{ color:var(--orange); }
.ref-tier:nth-child(even) h3{ color:var(--navy); }
.ref-tier:nth-child(even) li{ color:var(--navy); }
.ref-tier:nth-child(even) li svg path{ stroke:var(--navy); }
.ref-tier h3{ font-size:20px; color:var(--white); margin-bottom:14px; }
.ref-tier ul{ display:grid; gap:10px; }
.ref-tier li{ display:flex; gap:10px; align-items:flex-start; font-size:var(--small); color:rgba(255,255,255,.92); }
.ref-tier li svg{ flex:none; margin-top:3px; }
.ref-tier li svg path{ stroke:var(--white); }
.ref-note{ margin-top:18px; font-size:14.5px; color:var(--ink-faint); text-align:center; }
.ref-qr img{ width:120px; height:120px; display:block; border-radius:10px; border:1px solid var(--line); }
.ref-terms{ display:grid; gap:10px; max-width:78ch; }
.ref-terms li{
  position:relative; padding-left:22px;
  font-size:var(--small); color:var(--ink-soft); line-height:1.55;
}
.ref-terms li::before{
  content:""; position:absolute; left:0; top:9px;
  width:8px; height:8px; border-radius:50%; background:var(--orange);
}
@media(max-width:900px){
  .ref-tiers{ grid-template-columns:1fr; }
}
.band > div:first-of-type{ position:relative; z-index:1; }
.band__bear{
  position:absolute; bottom:0; right:2%;
  height:96%; width:auto; max-width:none;
  opacity:1;
  pointer-events:none;
  object-fit:contain; object-position:bottom right;
}
.band .btn--ghost-light{ border-color:rgba(255,255,255,.5); }
.btn--white{ background:var(--white); color:var(--orange); border-color:var(--white); }
.btn--white:hover{ background:var(--cream-2); }

/* ── REVIEWS ───────────────────────────────────────────────────────────── */
.reviews{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
/* review carousel — same mechanics + buttons as the promotions (.coupon-slider) */
.review-slider{ position:relative; padding:0 50px; margin-top:8px; }
.review-slider__track{ overflow:hidden; }
.review-slider__inner{ display:flex; gap:16px; transition:transform .5s cubic-bezier(.16,1,.3,1); }
.review-slider__inner .review{ flex:0 0 calc(33.333% - 11px); min-width:0; }
@media(max-width:900px){ .review-slider__inner .review{ flex:0 0 calc(50% - 8px); } .review-slider{ padding:0 40px; } }
@media(max-width:620px){ .review-slider__inner .review{ flex:0 0 100%; } .review-slider{ padding:0 36px; } }
.review{
  background:linear-gradient(168deg, var(--white) 0%, #ffffff 50%, var(--cream-2) 100%);
  border:1px solid var(--line); border-radius:var(--r);
  padding:22px 20px; display:flex; flex-direction:column; gap:12px;
}
.review__stars{ color:var(--orange-2); font-size:16.5px; letter-spacing:2px; }
.review p{ font-size:var(--small); color:var(--ink-soft); line-height:1.6; flex:1; }
.review__who{ font-size:14.5px; font-weight:500; color:var(--navy); }

/* ── BRANDS ────────────────────────────────────────────────────────────── */
.brands{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:28px 54px; }
/* Manufacturer logos are shown unaltered: full opacity, no filters, and a
   uniform height with width:auto so every logo keeps its native aspect ratio. */
.brands a{ display:inline-flex; align-items:center; }
.brands img{ height:46px; width:auto; object-fit:contain; }
/* Quilt is a pure wordmark -- its letterforms fill the full box, so at an
   identical height it reads larger than the badge-style marks. Scaled down
   for optical balance; aspect ratio is unchanged. */
.brands img.brand--wordmark{ height:34px; }
/* Rheem is a circular roundel -- its artwork is inscribed in a circle, so it
   reads smaller than wide marks at equal height. Scaled up for optical
   balance; aspect ratio is unchanged. */
.brands img.brand--roundel{ height:56px; }
.brands a:hover img{ transform:translateY(-2px); }
.brands img{ transition:transform .2s ease; }

/* ── AREAS ─────────────────────────────────────────────────────────────── */
.areas{ display:flex; flex-wrap:wrap; gap:12px; }
.areas a{
  font-size:17px; color:var(--ink-soft); background:var(--white);
  border:1px solid var(--line); border-radius:var(--r-pill);
  padding:13px 22px; font-weight:500; transition:all .15s ease;
}
.areas a:hover{ border-color:var(--orange); color:var(--orange); }
#areas-main h2{ margin-bottom:24px; }
.areas-main__content{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr); gap:40px; align-items:start; }
.areas-main__map{ margin:0; align-self:center; }
.areas-main__map img{ display:block; width:100%; border-radius:var(--r-lg); box-shadow:var(--shadow-md); }
@media (max-width:900px){
  .areas-main__content{ grid-template-columns:1fr; gap:24px; }
}


/* ── REPAIR VS REPLACE CALCULATOR ─────────────────────────────────────── */
.calc-section{
  background:var(--bg-alt);
  overflow:hidden;
}
.calc-grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:30px; align-items:center; }
.calc-eyebrow{
  font-family:var(--font-sans); font-size:13.5px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--orange); margin:0 0 10px;
}
.calc-title{
  font-family:var(--font-display); font-size:clamp(23px,2.4vw,32px);
  text-transform:uppercase; line-height:.98; letter-spacing:-.02em;
  margin:0 0 12px; color:var(--navy);
}
.calc-sub{ font-size:15px; color:var(--ink); max-width:44ch; margin:0 0 18px; line-height:1.55; }

/* tabs */
.calc-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px; }
.calc-tab{
  background:var(--white); border:1px solid var(--line);
  color:var(--ink); border-radius:var(--r-pill);
  padding:7px 15px; font-size:14.5px; font-weight:500; cursor:pointer;
  transition:all .18s ease;
}
.calc-tab:hover{ border-color:var(--orange); color:var(--orange); }
.calc-tab.is-active{
  background:var(--orange); color:var(--white); border-color:var(--orange);
}

/* stats grid */
.calc-stats{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:20px; }
.calc-stat{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r);
  padding:12px 14px; display:flex; flex-direction:column; gap:3px;
}
.calc-stat__val{
  font-family:var(--font-display); font-size:20px; font-weight:600;
  color:var(--navy); letter-spacing:-.01em;
}
.calc-stat__label{ font-size:13.5px; color:var(--ink); font-weight:500; }

.calc-cta{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; }
.calc-cta__note{ font-size:14px; color:var(--ink); max-width:24ch; }

/* chart panel */
.calc-right{ position:relative; }
.calc-chart-wrap{
  background:var(--white); border-radius:var(--r-lg);
  padding:16px 18px 14px;
  border:1px solid var(--line);
}
.calc-chart-header{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px; flex-wrap:wrap; gap:6px; }
.calc-chart-label{ font-size:14.5px; font-weight:600; color:var(--navy); }
.calc-chart-system{ font-size:13px; color:var(--ink); }

.calc-slider-row{
  display:flex; align-items:center; gap:12px; margin-bottom:12px;
  font-size:14.5px; font-weight:500; color:var(--ink);
}
.calc-range{
  flex:1; -webkit-appearance:none; appearance:none;
  height:6px; border-radius:3px;
  background:linear-gradient(90deg, var(--orange) 0%, var(--line) 100%);
  outline:none; cursor:pointer;
}
.calc-range::-webkit-slider-thumb{
  -webkit-appearance:none; width:18px; height:18px;
  border-radius:50%; background:var(--white);
  border:3px solid var(--orange); cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.18);
}
.calc-range::-moz-range-thumb{
  width:18px; height:18px; border-radius:50%;
  background:var(--white); border:3px solid var(--orange);
  cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.18);
}
.calc-age-val{
  font-family:var(--font-display); font-size:19px; color:var(--navy);
  min-width:56px; text-align:right;
}

.calc-svg{ width:100%; height:auto; max-height:240px; display:block; margin-inline:auto; }
.calc-axis{ fill:var(--ink); font-size:12.5px; font-family:var(--font-sans); text-anchor:end; }
.calc-axis-x{ fill:var(--ink); font-size:12.5px; font-family:var(--font-sans); text-anchor:middle; }
.calc-zone{
  fill:rgba(17,19,51,.35); font-family:var(--font-display);
  font-size:22px; font-weight:600; text-anchor:middle;
  text-transform:uppercase; letter-spacing:.04em;
}
.calc-verdict-text{
  fill:var(--navy); font-family:var(--font-sans);
  font-size:15.5px; font-weight:600; text-anchor:middle;
}

.calc-insight{
  margin-top:12px; padding:11px 14px;
  background:var(--bg-alt); border-radius:var(--r);
  font-size:14px; color:var(--ink); line-height:1.5;
}
.calc-insight strong{ color:var(--navy); }

@media (max-width:900px){
  /* hero stacks */
  .hero__grid{ grid-template-columns:1fr; gap:18px; }
  .hero__copy{ padding-bottom:0; }
  .hero__media{ margin-right:calc(-1 * var(--gutter)); justify-content:center; }
  .hero__media{ display:none; }
  .hero__bg img{ opacity:.15; object-position:center 40%; }
  .hero__wash{ background:linear-gradient(180deg, rgba(225,90,38,.28) 0%, rgba(225,90,38,.10) 50%, rgba(225,90,38,0) 100%); }

  /* nav */
  .nav{ display:none; }
  .nav a{ white-space:normal; }
  .nav-drop__trigger{ white-space:normal; }
  .header__cta .btn--ghost,.header__cta .btn--primary,.header__phone{ display:none; }
  .header__cta .btn--blue{ display:none; }
  .nav-toggle{ display:block; }
  .header__cta{ margin-left:0; }
  .nav{ max-height:calc(100vh - 120px); overflow-y:auto; -webkit-overflow-scrolling:touch; }
  .nav-drop{ width:100%; order:10; }
  .nav-drop--sm{ order:11; }
  .nav-drop__menu.mega{ position:static; transform:none; box-shadow:none; border:none; display:none; grid-template-columns:1fr; padding:0 0 0 12px; min-width:auto; gap:4px; }
  .nav-drop__menu.mega.mob-open{ display:grid; }
  .nav-drop__menu.mega--areas{ grid-template-columns:1fr; min-width:auto; }
  .nav-drop__menu.mega::before{ display:none; }
  .mega__col h4{ padding:0; margin-top:8px; }
  .mega__col a{ padding:5px 0; }
  .nav-drop__menu{ position:static; transform:none; box-shadow:none; border:none; display:block; padding:0 0 0 16px; min-width:auto; }
  .nav-drop__menu::before{ display:none; }
  .nav-drop__menu:not(.mega){ display:none; }
  .nav-drop__menu:not(.mega).mob-open{ display:block; }
  .nav-drop__caret{ display:inline; transition:transform .2s ease; }
  .nav-drop.mob-open .nav-drop__caret{ transform:rotate(180deg); }

  /* service cards */
  .svc-grid{ grid-template-columns:repeat(2,1fr); }
  .svc__img{ height:140px; }

  /* split */
  .split{ grid-template-columns:1fr; gap:26px; }
  .split__media img{ width:100%; border-radius:var(--r-lg); }

  /* areas */
  .areas-split{ grid-template-columns:1fr; gap:24px; }
  .areas-split__map{ order:1; }

  /* reviews */
  .reviews{ grid-template-columns:1fr; }

  /* financing bear */
  .band__bear{ opacity:1; height:100%; }

  /* missing mobile overrides */
  .tiers{ grid-template-columns:repeat(2,1fr); }
  .calc-grid{ grid-template-columns:1fr; gap:30px; }
  .footer__grid{ grid-template-columns:1fr 1fr; }
  .hero__bear{ max-width:none; }
  .brands img{ height:36px; }
  .nav-drop__menu.mega--areas{ min-width:auto; left:0; }
}
@media (max-width:620px){
  :root{ --gutter:18px; }
  .utility__note{ display:none; }
  .svc-grid,.tiers{ grid-template-columns:1fr; }
  .svc__img{ height:180px; }
  .footer__grid{ grid-template-columns:1fr; gap:26px; }
  #financing{ padding:30px 0 !important; background:var(--white); position:relative; overflow:hidden; }
.band{ padding:24px 20px; flex-direction:column; text-align:center; }
  .band__bear{ display:none; }
  .band__actions{ justify-content:center; }
  .hero__badges{ gap:10px; }
  .trust-badge{ padding:6px 10px; }
  .trust-badge__info strong{ font-size:13.5px; }
  /* calculator: compact mobile */
  .calc-picker__row{
    display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
    gap:8px; flex-wrap:nowrap; padding-bottom:6px;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .calc-picker__row::-webkit-scrollbar{ display:none; }
  .calc-pick{ flex:0 0 auto; scroll-snap-align:start; padding:10px 16px; font-size:14.5px; white-space:nowrap; }
  .calc-pick svg{ width:16px; height:16px; }
  .calc-title{ font-size:clamp(22px,5vw,30px); }
  .calc-sub{ font-size:14.5px; margin-bottom:16px; }
  .calc-stats{ grid-template-columns:1fr 1fr; gap:8px; margin-bottom:16px; }
  .calc-stat{ padding:10px 12px; }
  .calc-stat__val{ font-size:18px; }
  .calc-stat__label{ font-size:12.5px; }
  .calc-chart-wrap{ padding:14px 12px 12px; }
  .calc-chart-header{ font-size:13.5px; }
  .calc-slider-row{ font-size:14.5px; gap:8px; }
  .calc-age-val{ font-size:17px; min-width:46px; }
  .calc-insight{ font-size:13.5px; padding:10px 12px; }
  .calc-solar-inputs{ gap:10px; }
  .calc-input{ font-size:19px; width:60px; }
  .calc-input--sm{ width:40px; font-size:17px; }
  .calc-cta__note{ display:none; }
  .calc-tabs{ gap:5px; margin-bottom:16px; }
  .calc-tab{ padding:6px 11px; font-size:13.5px; }
  .cost-bar__label{ font-size:13.5px; }
  .cost-bar__track{ height:28px; }
  .cost-bar__mid{ font-size:12.5px; }
  body{ padding-bottom:62px; }
  .callbar{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:90;
    background:var(--navy); border-top:1px solid rgba(255,255,255,.12);
    padding:9px 12px; gap:9px;
  }
  .callbar .btn{ flex:1; padding:12px 8px; font-size:15.5px; }
  .callbar .btn--phone{ background:var(--white); color:var(--navy); border-color:var(--white); }

  .promo-grid{
    display:flex !important; overflow-x:auto; scroll-snap-type:x mandatory;
    gap:14px; padding-bottom:12px;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
    grid-template-columns:none;
  }
  .promo-grid::-webkit-scrollbar{ display:none; }
  .promo{ flex:0 0 82%; scroll-snap-align:start; }
  .hero{ padding-bottom:24px; }
  .hero__actions{ flex-wrap:nowrap; }
  .hero__actions .btn--ghost{ display:none; }
  .hero__actions .btn{ flex:1; padding:12px 10px; font-size:15.5px; }
  .hero__badges{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .trust__item:nth-child(n+3){ display:none; }
  .trust .container{ justify-content:center; gap:16px 28px; }
  .trust-badge{ flex:1; }
  .hero h1{ font-size:clamp(26px, 6.4vw, 38px); }
  .calc-tabs{ gap:6px; }
  .calc-tab{ padding:7px 12px; font-size:14.5px; }
  .areas{ gap:8px; }
  .areas a{ padding:8px 14px; font-size:15.5px; }
  .reviews{
    display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
    gap:14px; padding-bottom:12px; grid-template-columns:none;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .reviews::-webkit-scrollbar{ display:none; }
  .review{ flex:0 0 85%; scroll-snap-align:start; }
  .svc-issues a{ padding:7px 11px; font-size:13.5px; }

  .svc-more{ display:none; }
  .svc-more a{ padding:8px 13px; font-size:14.5px; }
  .nav-drop__menu.mega{ grid-template-columns:1fr 1fr; padding:12px; }
  .nav-drop__menu.mega--areas{ grid-template-columns:1fr; }
  .mega__col a{ padding:5px 10px; font-size:14.5px; }
}


/* ── TOOL PICKER ───────────────────────────────────────────────────────── */
.calc-picker{ margin-bottom:22px; }
.calc-picker__row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.calc-pick{
  display:flex; align-items:center; gap:9px;
  background:var(--white); border:1.5px solid var(--line);
  color:var(--ink); border-radius:var(--r);
  padding:10px 16px; font-size:15px; font-weight:500; cursor:pointer;
  transition:all .18s ease;
}
.calc-pick:hover{ border-color:var(--orange); color:var(--orange); }
.calc-pick.is-active{
  background:var(--orange); color:var(--white); border-color:var(--orange);
  box-shadow:0 4px 16px rgba(252,57,0,.25);
}
.calc-pick svg{ flex:none; }

/* panels */
.calc-panel{ display:none; }
.calc-panel.is-active{ display:block; }

/* ── SOLAR INPUTS ──────────────────────────────────────────────────────── */
.calc-solar-inputs{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:18px; }
.calc-input-group{ display:flex; flex-direction:column; gap:6px; }
.calc-input-group label{ font-size:13.5px; color:var(--ink); font-weight:500; }
.calc-input-wrap{
  display:flex; align-items:center; gap:0;
  background:var(--white); border:1px solid var(--line-2);
  border-radius:var(--r-sm); overflow:hidden;
}
.calc-input-prefix,.calc-input-suffix{
  font-size:15px; font-weight:500; color:var(--ink);
  padding:0 9px; flex:none;
}
.calc-input{
  background:transparent; border:none; color:var(--navy);
  font-family:var(--font-display); font-size:21px; font-weight:600;
  width:72px; padding:8px 4px; outline:none;
  -moz-appearance:textfield;
}
.calc-input::-webkit-inner-spin-button,.calc-input::-webkit-outer-spin-button{ -webkit-appearance:none; }
.calc-input--sm{ width:50px; font-size:20px; }

/* ── COST ESTIMATOR BARS ───────────────────────────────────────────────── */
.cost-bars{ display:grid; gap:12px; padding:4px 0; }
.cost-bar{ display:grid; gap:6px; }
.cost-bar__label{
  font-size:14.5px; font-weight:500; color:var(--navy);
  display:flex; justify-content:space-between; align-items:baseline;
}
.cost-bar__range{ font-weight:400; color:var(--ink); font-size:13.5px; }
.cost-bar__track{
  height:30px; border-radius:6px; position:relative;
  background:rgba(17,19,51,.07); overflow:hidden;
}
.cost-bar__fill{
  position:absolute; left:0; top:0; bottom:0;
  border-radius:6px;
  background:linear-gradient(90deg, var(--orange) 0%, rgba(252,57,0,.55) 100%);
  transition:width .5s cubic-bezier(.22,.61,.36,1);
}
.cost-bar__fill--high{
  background:linear-gradient(90deg, var(--orange) 0%, rgba(252,57,0,.55) 100%);
}
.cost-bar__mid{
  position:absolute; top:50%; transform:translateY(-50%);
  font-size:13px; font-weight:600; color:var(--navy); padding-left:10px; white-space:nowrap;
}


/* ── PROMOTIONS ────────────────────────────────────────────────────────── */
.promo-grid{ display:grid; grid-template-columns:repeat(5, 1fr); gap:16px; }
.promo{
  border-radius:var(--r-lg); overflow:hidden; display:block;
  transition:transform .25s ease, box-shadow .25s ease;
}
.promo:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.promo img{ width:100%; height:auto; display:block; }



/* ── HTML COUPONS + SLIDER ─────────────────────────────────────────────── */
.coupon-slider{position:relative;padding:0 50px;margin-top:28px}
.coupon-slider__track{overflow:hidden;border-radius:14px}
.coupon-slider__inner{display:flex;gap:20px;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.coupon-slider__arr, .review-slider__arr{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:40px;height:40px;border-radius:50%;border:none;
  background:var(--white);color:var(--navy);font-size:24px;font-weight:600;
  cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.12);
  display:flex;align-items:center;justify-content:center;
  transition:background .15s,transform .15s;
}
.coupon-slider__arr:hover, .review-slider__arr:hover{background:var(--navy);color:var(--white);transform:translateY(-50%) scale(1.08)}
.coupon-slider__arr--left, .review-slider__arr--left{left:0}
.coupon-slider__arr--right, .review-slider__arr--right{right:0}

/* Static coupon grid (promotions page) — same cards, no slider */
.coupon-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:28px; }
@media(max-width:900px){ .coupon-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:620px){ .coupon-grid{ grid-template-columns:1fr; } }

@media(max-width:900px){.coupon-slider{padding:0 40px}}
@media(max-width:620px){.coupon-slider{padding:0 36px}.coupon-slider__arr, .review-slider__arr{width:32px;height:32px;font-size:20px}}

/* ── AREAS SPLIT ────────────────────────────────────────────────────────── */
.areas-split{ display:grid; grid-template-columns:30% 70%; gap:32px; align-items:center; }
.areas-split__copy h2{ margin-bottom:24px; font-size:clamp(30px, 3.6vw, 48px); }
.areas-split__map > img{ width:100%; border-radius:var(--r-lg); box-shadow:var(--shadow-md); }
/* Service areas: chips across the top, diorama full width beneath them. */
.areas-split__copy .areas{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.areas-split__copy .areas a{ font-size:14.5px; padding:7px 13px; }
.areas-split__map .wc-diorama{ margin:0; }
.areas-split__map .wc-diorama-overview{ margin-top:26px; }
.areas-split__map .wc-diorama__plate{ box-shadow:none; }

@media (max-width:900px){
  .areas-split{ grid-template-columns:1fr; gap:24px; }
  .areas-split__map{ order:1; }
}

/* ── FOOTER ────────────────────────────────────────────────────────────────
   Light, not navy. Their footer logo is 17 navy paths to 1 cream — it's drawn
   for a light background and would disappear on a dark slab. */
.footer{ background:var(--white); color:var(--ink-soft); padding-block:34px 0; font-size:var(--small); border-top:1px solid var(--line-2); }
.footer__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:34px; }
.footer img.logo{ height:52px; margin-bottom:14px; }
.footer h4{ color:var(--navy); font-size:14.5px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:13px; }
.footer li{ margin-bottom:8px; }
.footer a:hover{ color:var(--orange); }
.footer__bottom{
  margin-top:38px; border-top:1px solid rgba(17,19,51,.12);
  padding-block:18px; display:flex; flex-wrap:wrap; gap:10px 20px; justify-content:space-between;
  font-size:14.5px; color:var(--ink-faint);
}
.footer__bottom-sep{ opacity:.8 }
.footer__legal{ display:flex; flex-wrap:wrap; gap:4px 18px; }
.footer__legal a{ color:var(--ink-faint) }
.footer__legal a:hover{ color:var(--orange) }


/* ── STICKY MOBILE CALL BAR ────────────────────────────────────────────── */
.callbar{ display:none; }

/* ── RESPONSIVE ────────────────────────────────────────────────────────── */
@media (max-width:1200px){
  .header__cta .btn{ padding:8px 14px; font-size:14.5px; }
  .nav a, .nav-drop__trigger{ font-size:15.5px; }
}
@media (max-width:1040px){
  .tiers{ grid-template-columns:repeat(2,1fr); }
  .footer__grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:900px){
  .nav{ display:none; }
  .nav a{ white-space:normal; }
  .nav-drop__trigger{ white-space:normal; }
  .header__cta .btn--ghost{ display:none; }
  .nav-toggle{ display:block; }
  .header__cta{ margin-left:0; }
  .split{ grid-template-columns:1fr; gap:26px; }
  .split__media img{ width:100%; border-radius:var(--r-lg); }
  .reviews{ grid-template-columns:1fr; }
}
@media (max-width:620px){
  :root{ --gutter:18px; }
  .utility__note{ display:none; }
  .svc-grid,.tiers{ grid-template-columns:1fr; }
  .footer__grid{ grid-template-columns:1fr; gap:26px; }
  #financing{ padding:30px 0 !important; background:var(--white); position:relative; overflow:hidden; }
.band{ padding:24px 20px; }
  body{ padding-bottom:62px; }
  .callbar{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:90;
    background:var(--navy); border-top:1px solid rgba(255,255,255,.12);
    padding:9px 12px; gap:9px;
  }
  .callbar .btn{ flex:1; padding:12px 8px; font-size:15.5px; }
  .callbar .btn--phone{ background:var(--white); color:var(--navy); border-color:var(--white); }
}

.areas-split__copy .eyebrow{ font-size:16.5px; margin-bottom:16px; }

/* ── REVIEW AVATARS ────────────────────────────────────────────────────── */
.review__who{ display:flex; align-items:center; gap:10px; }
.review__avatar{
  width:40px; height:40px; border-radius:50%;
  object-fit:cover; flex:none;
  border:2px solid var(--cream);
}
.review__avatar--txt{
  display:flex; align-items:center; justify-content:center;
  background:var(--navy); color:var(--white);
  font-size:15.5px; font-weight:700; font-family:var(--font-sans);
}

body.menu-open{ overflow:hidden; }

/* ── PROMO LIGHTBOX ────────────────────────────────────────────────────── */
.promo-hint{text-align:center;font-size:15.5px;color:var(--orange);font-weight:500;margin-top:-12px;margin-bottom:28px}
.promo-hint__arrow{font-size:17px;margin-right:4px}
.lightbox{display:none;position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.7);align-items:center;justify-content:center;cursor:pointer;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.lightbox.on{display:flex}
.lightbox img{max-width:800px;width:90%;height:auto;border-radius:var(--r-lg);box-shadow:var(--shadow-md);cursor:default}
.lightbox__close{position:absolute;top:20px;right:24px;font-size:32px;color:#fff;background:none;border:none;cursor:pointer;line-height:1}




/* Mobile QA: mid-width squeeze — narrower offer-card padding so the term
   line doesn't wrap awkwardly when the hero grid column tightens. */
@media(max-width:1100px){
  .fin-offer{ padding-inline:24px; }
}

/* ── FULL-WIDTH SERVICES MEGA MENU (Sep 18) ───────────────────────────── */
@media (min-width:901px){
  .header .container{ position:static !important; } /* app.js sets inline relative for the mobile nav */
  .header .nav{ align-self:stretch; }
  .nav-drop--full{ position:static; align-self:stretch; display:flex; align-items:center; }
  .nav-drop--full .nav-drop__menu.mega--full{
    position:absolute; top:100%; left:0; right:0; transform:none;
    display:none; padding:0; border:none; border-top:1px solid var(--line); border-radius:0;
    background:var(--white); box-shadow:0 18px 40px -12px rgba(17,19,51,.22);
    max-height:calc(100vh - 80px); overflow-y:auto; z-index:100;
  }
  .nav-drop--full:hover .nav-drop__menu.mega--full{ display:block; }
  .nav-drop--full .nav-drop__menu.mega--full::before{ display:none; }
  .nav-drop--full:hover .nav-drop__trigger{ color:var(--orange); }
}
.mega__inner{ width:min(100% - (var(--gutter) * 2), var(--maxw)); margin-inline:auto; padding-top:22px; }
.mega__grid{ display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:20px 32px; }
.nav .mega--full .mega__col{ gap:0; }
.nav .mega--full .mega__head{
  display:flex; align-items:center; gap:10px; padding:0 0 10px; margin-bottom:6px;
  font-family:var(--font-display); font-size:20px; font-weight:700; letter-spacing:.01em; color:var(--navy);
  border-bottom:2px solid var(--cream); white-space:normal; border-radius:0; background:none;
}
.nav .mega--full .mega__head:hover{ color:var(--orange); background:none; }
.mega__ico{
  flex:none; display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:9px; background:var(--orange); color:#fff;
}
.nav .mega--full .mega__col > a:not(.mega__head){
  display:block; padding:4px 0; font-size:14.5px; font-weight:500; color:var(--ink);
  white-space:normal; border-radius:0; background:none;
}
.nav .mega--full .mega__col > a:not(.mega__head):hover{ color:var(--orange); background:none; }
.mega__foot{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  margin-top:16px; padding:12px 0 14px; border-top:1px solid var(--line);
}
.nav .mega__all{ font-weight:700; color:var(--orange); font-size:15px; }
.mega__note{ font-size:14.5px; color:var(--ink); }
.nav .mega__note a{ font-size:14.5px; font-weight:700; color:var(--navy); }
@media (min-width:901px) and (max-width:1180px){
  .mega__grid{ gap:22px 20px; }
  .nav .mega--full .mega__head{ font-size:18px; }
  .mega__ico{ width:30px; height:30px; }
}
@media (max-width:900px){
  .mega__inner{ width:auto; padding:4px 0 8px; }
  .mega__grid{ grid-template-columns:1fr; gap:14px; }
  .mega__ico{ width:26px; height:26px; border-radius:7px; }
  .mega__ico svg{ width:15px; height:15px; }
  .nav .mega--full .mega__head{ font-size:15.5px; padding-bottom:6px; }
  .mega__foot{ margin-top:12px; padding:10px 0 4px; }
}
/* ── nav restructure (Mark 9/21): AC&Heating / Plumbing / Solar / About / Specials */
.mega--hvac .mega__grid{ grid-template-columns:repeat(6,minmax(0,1fr)); }
@media (max-width:900px){ .mega--hvac .mega__grid{ grid-template-columns:1fr; } }
.nav-drop__menu.mega--duo{
  grid-template-columns:repeat(2,max-content);
  width:max-content; max-width:min(92vw,860px);
  min-width:0; padding:32px 44px 30px; gap:10px 72px;
  left:50%; transform:translateX(-50%);
}
.nav .mega--duo .mega__col{ gap:4px; }
.nav .mega--duo .mega__head{
  display:flex; align-items:center; gap:10px; padding:0 0 10px; margin-bottom:6px;
  font-family:var(--font-display); font-size:20px; font-weight:700; letter-spacing:.01em; color:var(--navy);
  border-bottom:2px solid var(--cream); white-space:nowrap; border-radius:0; background:none;
}
.nav .mega--duo .mega__head:hover{ color:var(--orange); background:none; }
.nav .mega--duo .mega__col > a:not(.mega__head){
  display:block; padding:4px 0; font-size:14.5px; font-weight:500; color:var(--ink);
  white-space:nowrap; border-radius:0; background:none;
}
.nav .mega--duo .mega__col > a:not(.mega__head):hover{ color:var(--orange); background:none; }
@media (max-width:900px){
  .nav-drop__menu.mega--duo{ left:auto; transform:none; }
}
/* ══════════════════════════════════════════════════════════
   TYPE PASS (Mike A. 9/22): Hiller-matched sizes and weights,
   streamed h1-h6 + paragraph text sitewide. Measured from
   happyhiller.com desktop computed styles. Coupons excluded
   (approved design lives in coupons.css).
   ══════════════════════════════════════════════════════════ */
h1:not([class*="hcoupon"]){ font-size:56px !important; font-weight:600 !important; line-height:1.2 !important; }
h2:not([class*="hcoupon"]){ font-size:32px !important; font-weight:600 !important; line-height:1.4 !important; }
h3:not([class*="hcoupon"]){ font-size:19.2px !important; font-weight:600 !important; letter-spacing:.03em !important; line-height:1.4 !important; }
h4:not([class*="hcoupon"]){ font-size:19.2px !important; font-weight:600 !important; letter-spacing:.03em !important; line-height:1.4 !important; }
h5:not([class*="hcoupon"]){ font-size:17.6px !important; font-weight:600 !important; line-height:1.4 !important; }
h6:not([class*="hcoupon"]){ font-size:16px !important; font-weight:600 !important; line-height:1.4 !important; }
p:not([class*="hcoupon"]){ font-size:17.6px !important; font-weight:500 !important; line-height:1.75 !important; }
main li:not([class*="hcoupon"]){ font-size:17.6px !important; font-weight:500 !important; line-height:1.6 !important; }
main li span{ font-size:inherit !important; }
@media(max-width:700px){
  h1:not([class*="hcoupon"]){ font-size:38px !important; }
  h2:not([class*="hcoupon"]){ font-size:27px !important; }
}

/* ══ homepage club card (Hiller-style preview) ══ */
.club-hero{ background:var(--navy); color:var(--white); padding:96px 0 88px;
  clip-path:polygon(0 0, 68% 0, 100% 11%, 100% 100%, 0 100%); }
.club-hero__grid{ display:grid; grid-template-columns:1.05fr 1fr; gap:70px; align-items:center; }
.club-hero__cardwrap{ padding:30px 10px; display:flex; justify-content:center; }
.club-card{ position:relative; width:min(540px,100%); aspect-ratio:1.62/1;
  background:#fff; border-radius:26px; transform:rotate(-8deg);
  box-shadow:0 30px 60px rgba(0,0,0,.35), 0 8px 20px rgba(0,0,0,.25); overflow:hidden; }
.club-card__blob{ position:absolute; left:-24%; top:-28%; width:88%; aspect-ratio:1;
  border-radius:50%; background:var(--orange-2); }
.club-card__truck{ position:absolute; left:3%; top:52%; transform:translateY(-50%);
  width:54%; filter:drop-shadow(5px 7px 0 rgba(17,19,51,.15)); }
.club-card__text{ position:absolute; right:9%; top:50%; transform:translateY(-50%); text-align:center; }
.club-card__brand{ display:block; font-weight:700; font-size:clamp(16px,2vw,24px); color:#14161f; letter-spacing:.01em; }
.club-card__club{ display:block; font:800 clamp(38px,5vw,60px)/1 'Barlow Condensed',var(--font-sans);
  color:var(--orange); letter-spacing:.06em; }
.club-hero__eyebrow{ color:var(--orange-2); font-weight:700; font-size:19px; margin:0 0 18px; }
.club-hero__copy h2{ color:var(--white); margin:0 0 22px; }
.club-hero__copy p{ color:var(--cream); max-width:520px; }
.club-hero__more{ display:inline-block; margin-top:14px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--orange-2); text-decoration:none; }
.club-hero__more:hover{ color:var(--white); }
@media(max-width:900px){
  .club-hero{ clip-path:polygon(0 0, 58% 0, 100% 5%, 100% 100%, 0 100%); padding:70px 0 64px; }
  .club-hero__grid{ grid-template-columns:1fr; gap:40px; }
  .club-hero__cardwrap{ padding:20px 6px; }
}

/* ══ utility bar phone + single blue header CTA ══ */
.utility__left{ display:flex; align-items:center; gap:20px; }
.utility__phone{ display:inline-flex; align-items:center; gap:7px; color:var(--orange);
  font-weight:700; text-decoration:none; letter-spacing:.02em; }
.utility__phone:hover{ color:var(--white); }
.utility__phone svg{ flex:none; }
.btn--blue{ background:var(--orange); color:var(--white); border-color:var(--orange); box-shadow:0 4px 12px 3px rgba(252,57,0,.24); }
.btn--blue:hover{ background:var(--orange-dark); border-color:var(--orange-dark); color:var(--white); }
.utility__right{ display:flex; align-items:center; gap:22px; }
.club-hero__perks{ list-style:none; margin:0 0 26px; padding:0; display:grid; gap:13px; }
.club-hero__perks li{ display:flex; align-items:center; gap:12px;
  color:var(--cream); font-size:18px; font-weight:600; }
.club-hero__perks li svg{ flex:none; color:var(--orange-2); }
.club-hero__sub{ color:var(--cream); font-size:19px; margin:0 0 24px; max-width:520px; }

.club-hero__cardimg{ width:min(600px,100%); height:auto; display:block; filter:drop-shadow(0 28px 48px rgba(0,0,0,.45)); }

/* hero h1 30% smaller per Mike */
.hero h1{ font-size:39px !important; }
@media (max-width:700px){ .hero h1{ font-size:27px !important; } }

/* ══ Hiller-style hero ══ */
.hero2{
  background:linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
  text-align:center; padding:8px 0 0; overflow:hidden;
}
.hero2__callout{
  margin:0 0 6px; font-size:18px; font-weight:800; color:var(--orange);
  text-transform:uppercase; letter-spacing:.08em;
}
.hero2 h1{
  margin:0 auto; max-width:34ch;
  font-size:clamp(30px,4.2vw,52px) !important; line-height:1.1 !important;
  text-transform:none; color:var(--navy);
}
.hero2__callout, .hero2 h1{ position:relative; z-index:2; }
.hero2__truck{
  display:block; width:100vw; max-width:none; height:auto;
  margin:-30px calc(50% - 50vw) 0;
  position:relative; z-index:1;
}
@media (max-width:700px){
  .hero2{ padding-top:8px; }
  .hero2__callout{ font-size:16px; }
}

.hero2__mark{
  display:inline-block; margin-top:5px;
  background:none; color:var(--navy); padding:0;
}

/* ══ transparency pricing (Hiller-style) ══ */
.tpricing{ padding:72px 0; background:var(--white); }
.tpricing__grid{ display:grid; grid-template-columns:1.1fr .9fr .9fr; gap:34px; align-items:start; }
.tpricing__eyebrow{ color:var(--orange); font-weight:700; font-size:19px; margin:0 0 14px; }
.tpricing__copy h2{ margin:0 0 18px; }
.tpricing__copy p{ max-width:46ch; color:#14161f; }
.tpricing__more{ display:inline-block; margin-top:12px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--orange); text-decoration:none; }
.tpricing__more:hover{ color:var(--navy); }
.tpricing__card{ border-radius:16px; padding:26px 24px; }
.tpricing__card--std{ background:#fff; border:1px solid rgba(17,19,51,.12); box-shadow:0 10px 28px rgba(17,19,51,.08); color:var(--navy); }
.tpricing__card--wc{ background:var(--navy); color:var(--white); box-shadow:0 16px 36px rgba(17,19,51,.28); }
.tpricing__card h3{ margin:0 0 8px; text-transform:none; }
.tpricing__card--wc h3{ color:var(--white); }
.tpricing__note{ font-size:14.5px; margin:0 0 18px; opacity:.85; }
.tpricing__row{ display:flex; align-items:center; gap:9px; margin-bottom:16px; font-size:15px; font-weight:600; }
.tpricing__row svg{ flex:none; }
.tpricing__card--std .tpricing__row svg{ color:#9aa0ad; }
.tpricing__card--wc .tpricing__row svg{ color:var(--orange); }
.tpricing__row b{ margin-left:auto; text-align:right; font-weight:700; }
.tpricing__big{ font-family:var(--font-display); font-size:34px; line-height:1; }
.tpricing__big--orange{ color:var(--orange); }
.tpricing__totwrap{ margin-left:auto; text-align:right; display:flex; flex-direction:column; }
.tpricing__totwrap small{ font-size:13px; opacity:.9; }
.tpricing__totwrap small b{ color:var(--orange); }
.tpricing__dead{ width:100%; background:#e8e8ec; color:#8a8f9c; cursor:not-allowed; border-color:transparent; }
.tpricing__card--wc .btn--primary{ width:100%; }
@media (max-width:1050px){ .tpricing__grid{ grid-template-columns:1fr 1fr; } .tpricing__copy{ grid-column:1/-1; } }
@media (max-width:680px){ .tpricing__grid{ grid-template-columns:1fr; } }

#financing .btn--phone{ background:var(--navy); color:var(--white); border-color:var(--orange); }
#financing .btn--phone:hover{ background:var(--white); color:var(--navy); border-color:var(--white); }

/* ── FAQ chips (AEO) ── */
.faqchips{ background:var(--cream-2); padding:58px 0 64px; }
.faqchips .sec-head{ margin-bottom:26px; }
.faqchips__wrap{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; max-width:980px; margin:0 auto; }
.faqchips__wrap a{
  display:inline-block; text-decoration:none; color:var(--navy);
  font-size:14.5px; font-weight:600; line-height:1.2;
  background:var(--white); border:1px solid rgba(17,19,51,.16);
  border-radius:var(--r-pill); padding:9px 16px;
  transition:background .12s, border-color .12s;
}
.faqchips__wrap a:hover{ background:var(--orange); border-color:var(--orange); color:var(--white); }

/* ── footer subscribe (Constant Contact): compact cell inside the footer grid ── */
.footer__subscribe{ grid-column:3/-1; max-width:560px; margin-top:-211px; }
.footer__subscribe-copy h3{
  color:var(--navy); font-size:14.5px; letter-spacing:.1em; text-transform:uppercase; margin:0 0 6px;
}
.footer__subscribe-copy p{ margin:0 0 10px; font-size:13.5px; color:#14161f; }
/* restyle the injected CC widget: small, footer-toned, our fonts */
.footer .ctct-inline-form, .footer .ctct-inline-form *{ font-family:var(--font-sans) !important; }
.footer .ctct-inline-form form, .footer .ctct-inline-form div[class*=ctct-form-defaults]{
  background:transparent !important; padding:0 !important; margin:0 !important;
}
.footer .ctct-inline-form h2, .footer .ctct-inline-form .ctct-form-header,
.footer .ctct-inline-form p.ctct-form-text{ display:none !important; }
.footer .ctct-inline-form .ctct-form-field{ margin:0 0 8px !important; }
.footer .ctct-inline-form label{
  color:var(--navy) !important; font-size:12px !important; font-weight:600 !important; margin-bottom:3px !important;
}
.footer .ctct-inline-form input[type=email], .footer .ctct-inline-form input[type=text]{
  background:var(--white) !important; border:1px solid rgba(17,19,51,.22) !important;
  color:var(--navy) !important; border-radius:5px !important;
  padding:8px 11px !important; font-size:14px !important; height:auto !important;
}
.footer .ctct-inline-form button[type=submit], .footer .ctct-inline-form .ctct-form-button{
  margin-top:12px !important;
  background:var(--orange) !important; border:2px solid var(--orange) !important; color:var(--white) !important;
  border-radius:5px !important; font-weight:600 !important; font-size:14.5px !important;
  padding:8px 22px !important; width:auto !important; min-width:0 !important;
  cursor:pointer; transition:background .2s ease-out;
}
.footer .ctct-inline-form button[type=submit]:hover, .footer .ctct-inline-form .ctct-form-button:hover{
  background:var(--orange-dark) !important; border-color:var(--orange-dark) !important;
}
.footer .ctct-inline-form .ctct-form-footer, .footer .ctct-inline-form p{
  font-size:10.5px !important; line-height:1.45 !important; color:#8a8f9c !important; margin:8px 0 0 !important;
}
.footer .ctct-inline-form p a{ color:#8a8f9c !important; }
@media (max-width:900px){ .footer__subscribe{ grid-column:1/-1; max-width:none; margin-top:0; } }

@media (max-width:600px){
  .hero2 h1{ text-wrap:balance; }
}

/* ══ 3-COLOR SYSTEM: alternating bands are SOLID NAVY (2026-09-29)
   Client rule: orange / navy / white only, no tints. Former tan bands
   (.section--alt, .faqchips) now navy; text inverts, cards stay white. ══ */
.section--alt{ background:var(--navy) !important; color:var(--white); }
.section--alt h1, .section--alt h2, .section--alt h3,

.section--alt .lede,
.section--alt .split__points li, .section--alt .split__points span,
.section--alt > .container > p{ color:rgba(255,255,255,.92); }
.section--alt .eyebrow{ color:var(--orange); }
.faqchips .eyebrow{ color:var(--orange); }
/* white cards sitting on navy keep dark text */
.section--alt .review, .section--alt .tier, .section--alt .fin-step{ color:var(--ink); }
.section--alt .review h3, .section--alt .tier h3, .section--alt .fin-step h3{ color:var(--navy); }
/* slider/carousel arrows readable on navy */
.section--alt .review-slider__arr, .section--alt .club-carousel__arr{
  background:var(--white); color:var(--navy); border-color:var(--white);
}
.section--alt .review-slider__arr:hover, .section--alt .club-carousel__arr:hover{
  background:var(--orange); color:var(--white); border-color:var(--orange);
}
/* area chips on navy */
.section--alt .areas a{ color:var(--navy); }
.section--alt .areas a:hover{ background:var(--orange); border-color:var(--orange); color:var(--white); }
/* ghost buttons directly on navy (not inside white cards) go light */
.section--alt .btn-row .btn--ghost{ color:var(--white); border-color:rgba(255,255,255,.5); background:transparent; }
.section--alt .btn-row .btn--ghost:hover{ background:var(--white); color:var(--navy); border-color:var(--white); }

/* ════════════════════════════════════════════════════════════════════
   SECTION BAND SYSTEM (2026-09-29)
   Client rule: orange / navy / white only. Every homepage section gets
   exactly ONE band class; the band owns the background and flips the
   text. To recolor or reorder, change the class in the HTML only.
     band--white   band--navy   band--orange
   Cards inside a band (reviews, tiers, coupons, fin steps, chips) keep
   their own white surface and dark text.
   ════════════════════════════════════════════════════════════════════ */
section.band--white{ background:var(--white) !important; color:var(--ink); }
section.band--navy{ background:var(--navy) !important; color:var(--white); }
section.band--orange{ background:var(--orange) !important; color:var(--white); }

/* headline text sitting directly on the band */
.band--white :is(.sec-head, .split, .tpricing__copy) :is(h1,h2,h3){ color:var(--navy); }
.band--navy :is(.sec-head, .split, .band) :is(h1,h2,h3),
.band--orange :is(.sec-head, .split, .band) :is(h1,h2,h3){ color:var(--white); }

/* body copy directly on the band */
.band--navy :is(.sec-head, .split, .band) :is(p, .lede, li, span:not([class])),
.band--orange :is(.sec-head, .split, .band) :is(p, .lede, li, span:not([class])){ color:rgba(255,255,255,.92); }
.band--white :is(.sec-head, .split) .lede{ color:var(--ink-soft); }

/* eyebrows: orange on white/navy, white on orange */
.band--white .eyebrow, .band--navy .eyebrow{ color:var(--orange); }
.band--orange .eyebrow{ color:var(--white); }

/* cards keep dark text on any band */
:is(.band--navy,.band--orange) :is(.review, .tier, .fin-step) { color:var(--ink); }
:is(.band--navy,.band--orange) :is(.review, .tier, .fin-step) :is(h3){ color:var(--navy); }

/* slider arrows */
.band--navy :is(.coupon-slider__arr, .review-slider__arr, .club-carousel__arr){
  background:var(--white); color:var(--navy); border-color:var(--white);
}
.band--navy :is(.coupon-slider__arr, .review-slider__arr, .club-carousel__arr):hover{
  background:var(--orange); color:var(--white); border-color:var(--orange);
}

/* buttons on navy / orange */
.band--navy .btn-row .btn--ghost{ color:var(--white); border-color:rgba(255,255,255,.5); background:transparent; }
.band--navy .btn-row .btn--ghost:hover{ background:var(--white); color:var(--navy); border-color:var(--white); }
.band--orange .btn--primary{ background:var(--white); color:var(--orange); border-color:var(--white); box-shadow:none; }
.band--orange .btn--primary:hover{ background:var(--navy); color:var(--white); border-color:var(--navy); }
.band--orange .btn--phone{ background:var(--navy); color:var(--white); border-color:var(--navy); }
.band--orange .btn--phone:hover{ background:var(--white); color:var(--navy); border-color:var(--white); }

/* FAQ chips on navy: white chips, orange on hover */
.band--navy .faqchips__wrap a{ background:var(--orange); color:var(--white); border-color:var(--orange); }
.band--navy .faqchips__wrap a:hover{ background:var(--white); color:var(--navy); border-color:var(--white); }

/* ── FOOTER: navy (all pages) ── */
.footer{ background:var(--navy); color:rgba(255,255,255,.82); border-top:0; }
.footer h4, .footer__subscribe-copy h3{ color:var(--white); }
.footer a{ color:rgba(255,255,255,.82); }
.footer a:hover, .footer__legal a:hover{ color:var(--orange); }
.footer__legal a{ color:rgba(255,255,255,.6); }
.footer__subscribe-copy p{ color:rgba(255,255,255,.75); }
.footer__bottom{ border-top-color:rgba(255,255,255,.14) !important; color:rgba(255,255,255,.6); }
.footer .btn--phone{ background:var(--orange); color:var(--white); border-color:var(--orange); }
.footer .ctct-inline-form label{ color:var(--white) !important; }
.footer .ctct-inline-form .ctct-form-footer, .footer .ctct-inline-form p,
.footer .ctct-inline-form p a{ color:rgba(255,255,255,.6) !important; }
/* footer logo: white-text variant for the navy footer (swap without touching 654 HTML files) */
.footer img.logo{ content:url(/wc-assets/wc_logo_footer_on_navy.svg); }
/* CRO (Drew 9/26): top-bar phone hard to read on mobile; white on navy for max contrast */
@media (max-width:900px){ .utility__phone{ color:var(--orange) !important; font-size:16px; } }
/* trust bar under the hero truck: orange (restored 2026-09-29) */
.trust{ background:var(--navy) !important; color:var(--white); }
.trust__item{ color:var(--white); font-weight:600; }
/* service cards read as white cards when their section is navy */
.band--navy .svc{ background:var(--white); border-color:var(--white); }
/* homepage service-area pills: orange (2026-09-29) */
#areas .areas a{ background:var(--orange); border-color:var(--orange); color:var(--white); }
#areas .areas a:hover{ background:var(--navy); border-color:var(--navy); color:var(--white); }
/* True Transparency badge under "Estimate My Repair" (2026-09-29) */

/* About (Why West Coast) team cutout: as tall as the copy column, sitting on the navy band below (2026-09-29) */
#about{ padding-bottom:var(--section-y); }
#about .split{ align-items:stretch; }
#about .split__media{ display:flex; align-items:flex-end; justify-content:center; margin-bottom:calc(-1 * var(--section-y)); }
#about .split__media img{ width:100%; height:100%; max-width:none; object-fit:contain; object-position:center bottom; border-radius:0; display:block; }
@media (max-width:900px){ #about .split__media img{ height:auto; max-height:420px; } }
/* FAQ chips band is orange (brands moved up under coupons, 2026-09-29): white pills, navy on hover */
.band--orange .faqchips__wrap a{ background:var(--white); color:var(--navy); border-color:var(--white); }
.band--orange .faqchips__wrap a:hover{ background:var(--navy); color:var(--white); border-color:var(--navy); }


/* ── mobile polish 2026-09-30 ── */
.callbar{
  transform:translateY(140%);
  transition:transform .5s cubic-bezier(.22,.61,.36,1);
}
.callbar.cb-in{ transform:translateY(0); }
@media (prefers-reduced-motion:reduce){
  .callbar{ transition:none; }
}
@media (max-width:900px){
  /* trust bar: all 4 on one line */
  .trust__item:nth-child(n+3){ display:flex !important; }
  .trust .container{ display:flex; flex-wrap:nowrap; justify-content:space-between; gap:6px; padding-block:11px; padding-inline:10px; }
  .trust__item{ font-size:clamp(8px,2.34vw,11px); letter-spacing:0; gap:4px; white-space:nowrap; font-weight:600; }
  .trust__item img, .trust__item svg{ display:none; }
  /* truck full-bleed, 20% of the art cropped off the sides */
  .hero2__callout, .hero2 h1{ position:relative; z-index:2; }
.hero2__truck{
    width:120vw; max-width:none;
    margin:10px calc(50% - 60vw) 0;
    border-radius:0;
  }
  /* compact floating call bar */
  .callbar{ left:10px; right:10px; bottom:10px; border-radius:14px; padding:7px 8px; gap:8px;
    box-shadow:0 10px 30px rgba(17,19,51,.38); }
  .callbar .btn{ padding:9px 6px; font-size:14px; }
}

/* ── brands: mobile one-line slider, 3-up ── */
.brands-wrap{ position:relative; }
.brands-arr{ display:none; }
@media (max-width:700px){
  .brands-wrap{ padding:0 26px; }
  .brands-arr{
    display:flex; align-items:center; justify-content:center;
    position:absolute; top:50%; transform:translateY(-50%);
    width:24px; height:24px; border-radius:50%;
    background:var(--orange); color:var(--white); border:0;
    font-size:17px; line-height:1; padding:0 0 2px; cursor:pointer; z-index:2;
  }
  .brands-arr--l{ left:0; }
  .brands-arr--r{ right:0; }
  .brands-arr:active{ background:var(--orange-dark); }
  .brands{
    flex-wrap:nowrap; justify-content:flex-start; gap:0;
    overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .brands::-webkit-scrollbar{ display:none; }
  .brands a{
    flex:0 0 33.333%; justify-content:center; scroll-snap-align:start;
    padding:4px 8px;
  }
  .brands img{ height:26px !important; max-width:100%; }
  .brands img.brand--roundel{ height:34px !important; }
}

@media (max-width:700px){
  .btn-row, .band__actions, .svc-cta-band__actions, .comm-one__actions, .svc-ctabox__actions{ align-items:stretch; }
  .btn-row .btn, .band__actions .btn, .svc-cta-band__actions .btn,
  .comm-one__actions .btn, .svc-ctabox__actions .btn{
    width:100%; justify-content:center; text-align:center; box-sizing:border-box;
  }
}

@media (max-width:700px){
  .trust + .section{ padding-top:20px; }
  .trust + .section .sec-head{ margin-bottom:8px; }
  .trust + .section .coupon-slider{ margin-top:20px; }
}

@media (max-width:620px){
  .review-slider__inner{ align-items:flex-start; }
  .review{ padding:18px 16px; gap:10px; }
  .review p{ display:-webkit-box; -webkit-line-clamp:8; -webkit-box-orient:vertical; overflow:hidden; }
}

/* ── humane society partnership ── */
.hspartner{ background:var(--white); padding:64px 0; }
.hspartner__grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:center; }
.hspartner__copy h2{ margin:0 0 14px; }
.hspartner__copy p{ max-width:52ch; }
.hspartner__photo{ width:100%; height:auto; border-radius:var(--r); box-shadow:0 14px 34px rgba(17,19,51,.16); }
@media (max-width:820px){ .hspartner__grid{ grid-template-columns:1fr; } .hspartner{ padding:44px 0; } }

.tpricing__card--wc{ display:flex; flex-direction:column; }
.tpricing__badge{ display:block; width:190px; height:auto; margin:22px auto 4px; }

/* ── band--grey ── */
section.band--grey{ background:var(--grey) !important; }
.band--grey .faqchips__wrap a{ background:var(--white); }

.brands-sec{ padding-bottom:calc(var(--sp-tight, 36px) + 20px); }

/* ── hero 2026-10-07: bolder orange callout, bigger truck capped by viewport ── */
.hero2 .hero2__callout{ font-weight:800 !important; }

/* ── utility review links 2026-10-07: desktop shows reviews + phone; mobile swaps phone for reviews ── */
.utility__right{ display:flex; align-items:center; gap:18px; }
.utility__reviews{ display:inline-flex; align-items:center; gap:10px; font-size:13px; font-weight:600; }
.utility__stars{ color:var(--orange); letter-spacing:1px; font-size:13px; }
.utility__reviews a{ color:var(--white); text-decoration:none; opacity:.92; }
.utility__reviews a:hover{ color:var(--orange); opacity:1; }
.utility__reviews a + a::before{ content:""; display:inline-block; width:1px; height:11px; background:rgba(255,255,255,.35); margin-right:10px; vertical-align:-1px; }
@media (max-width:900px){
  .utility__phone{ display:none !important; }
  .utility__reviews{ gap:8px; font-size:12.5px; }
  .utility__reviews a + a::before{ margin-right:8px; }
}
@media (max-width:420px){
  .utility__social{ display:none; }
  .utility .container{ justify-content:center; }
}

/* ── HVAC mega menu 2026-10-07: equal-height column heads so link lists line up ── */
@media (min-width:901px){
  .nav .mega--hvac .mega__head{ min-height:76px; box-sizing:border-box; }
}
@media (min-width:901px) and (max-width:1180px){
  .nav .mega--hvac .mega__head{ min-height:70px; }
}

/* ── mobile sticky call bar 2026-10-07: orange so it stands off the navy site chrome ── */
@media (max-width:900px){
  .callbar{ background:var(--orange) !important; border-top:none; }
  .callbar .btn--phone{ background:var(--navy) !important; color:var(--white) !important; border-color:var(--navy) !important; }
  .callbar .btn--primary{ background:var(--white) !important; color:var(--navy) !important; border-color:var(--white) !important; }
}

/* ── homepage subscribe bar 2026-10-07: one line just under the trust strip ── */
.subbar{ background:var(--white); border-bottom:1px solid var(--line); }
.subbar__row{ display:flex; align-items:center; justify-content:center; gap:22px; padding-block:14px; flex-wrap:wrap; }
.subbar__copy{ margin:0 !important; display:flex; align-items:baseline; gap:12px; color:var(--navy); font-size:15px; }
.subbar__copy strong{ font-family:var(--font-display); font-size:22px; text-transform:uppercase; letter-spacing:.02em; color:var(--navy); }
.subbar .ctct-inline-form, .subbar .ctct-inline-form *{ font-family:var(--font-sans) !important; }
.subbar .ctct-inline-form div[class*=ctct-form-defaults]{ padding:0 !important; background:none !important; }
.subbar .ctct-inline-form form{ display:flex !important; align-items:center; gap:8px; margin:0 !important; }
.subbar .ctct-inline-form h2, .subbar .ctct-inline-form .ctct-form-header,
.subbar .ctct-inline-form p.ctct-form-text, .subbar .ctct-inline-form label,
.subbar .ctct-inline-form .ctct-form-footer, .subbar .ctct-inline-form p,
.subbar .ctct-inline-form #gdpr_text, .subbar .ctct-inline-form .ctct-form-recaptcha{ display:none !important; }
.subbar .ctct-inline-form .ctct-form-field{ margin:0 !important; }
.subbar .ctct-inline-form input[type=email]{
  width:280px !important; height:44px !important; padding:0 14px !important; margin:0 !important;
  border:2px solid var(--navy) !important; border-radius:8px !important; font-size:15px !important; color:var(--navy) !important;
}
.subbar .ctct-inline-form button[type=submit], .subbar .ctct-inline-form .ctct-form-button{
  height:44px !important; padding:0 22px !important; margin:0 !important; border:none !important; border-radius:8px !important;
  background:var(--orange) !important; color:var(--white) !important; font-weight:700 !important; font-size:15px !important; white-space:nowrap;
}
.subbar .ctct-inline-form button[type=submit]:hover{ background:var(--navy) !important; }
@media (max-width:900px){
  .subbar__row{ gap:10px; padding-block:12px; }
  .subbar__copy{ flex-direction:column; align-items:center; gap:2px; text-align:center; font-size:13.5px; }
  .subbar__copy strong{ font-size:19px; }
  .subbar .ctct-inline-form, .subbar .ctct-inline-form form{ width:100%; }
  .subbar .ctct-inline-form .ctct-form-field{ flex:1; }
  .subbar .ctct-inline-form input[type=email]{ width:100% !important; }
}
.subbar .ctct-form-container, .subbar .ctct-form-defaults, .subbar .ctct-form-custom{ padding:0 !important; margin:0 !important; min-height:0 !important; max-width:none !important; border:none !important; box-shadow:none !important; }
.subbar .ctct-inline-form form{ flex-wrap:nowrap !important; }
.subbar .ctct-inline-form button[type=submit]{ width:auto !important; flex:none !important; }
.subbar .ctct-inline-form .g-recaptcha{ position:absolute !important; width:0 !important; height:0 !important; overflow:hidden; }
@media (max-width:900px){ .subbar__copy span{ display:none; } }

/* ── plumbing menu 2026-10-07: Plumbing / Drains & Sewers / Water Heaters ── */
@media (min-width:901px){
  .nav-drop__menu.mega--trio{ grid-template-columns:repeat(3,max-content); max-width:min(94vw,960px); }
}

/* ── HVAC mega menu 2026-10-08: lock to one line per label on all desktop widths, scale type down instead of wrapping ── */
@media (min-width:901px){
  .mega--hvac .mega__grid{ grid-template-columns:repeat(6,max-content) !important; justify-content:space-between; column-gap:clamp(8px,1.3vw,32px) !important; }
  .nav .mega--hvac .mega__head{ white-space:nowrap; min-height:0 !important; font-size:clamp(13.5px,1.22vw,20px) !important; gap:clamp(5px,.55vw,10px); }
  .nav .mega--hvac .mega__col > a:not(.mega__head){ white-space:nowrap; font-size:clamp(11.5px,.93vw,14.5px) !important; }
  .mega--hvac .mega__ico{ width:clamp(22px,2.1vw,34px); height:clamp(22px,2.1vw,34px); border-radius:8px; }
  .mega--hvac .mega__ico svg{ width:clamp(14px,1.3vw,20px); height:clamp(14px,1.3vw,20px); }
}

/* ── subscribe bar mobile 2026-10-08: compact single strip ── */
@media (max-width:900px){
  .subbar__row{ flex-direction:row !important; flex-wrap:nowrap !important; gap:8px !important; padding-block:8px !important; }
  .subbar__copy{ flex:none !important; }
  .subbar__copy strong{ font-size:14px !important; line-height:1.1; white-space:nowrap; }
  .subbar .ctct-inline-form{ flex:1; min-width:0; width:auto !important; }
  .subbar .ctct-inline-form form{ gap:6px !important; }
  .subbar .ctct-inline-form input[type=email]{ height:34px !important; padding:0 10px !important; font-size:14px !important; border-width:1.5px !important; border-radius:6px !important; min-width:0; }
  .subbar .ctct-inline-form button[type=submit], .subbar .ctct-inline-form .ctct-form-button{ height:34px !important; padding:0 12px !important; font-size:13.5px !important; border-radius:6px !important; }
}
@media (max-width:360px){ .subbar__copy strong{ font-size:12.5px !important; } }

/* ── mobile 2026-10-08: tighter promotions band + one-line hero eyebrow ── */
@media (max-width:700px){
  #promos{ padding-top:18px !important; padding-bottom:20px !important; }
  #promos .sec-head{ margin-bottom:10px !important; }
  #promos .eyebrow{ font-size:14px !important; margin-bottom:0 !important; }
  .hero2 .hero2__callout{ font-size:clamp(10.5px,3.15vw,14px) !important; letter-spacing:.04em !important; white-space:nowrap; margin-bottom:4px !important; }
}

/* ── mobile inner hero H1 2026-10-08: 25% smaller (38px -> ~28px) ── */
@media (max-width:700px){
  .svc-hero h1, .i-hero h1{ font-size:clamp(22px,7.3vw,28.5px) !important; line-height:1.12 !important; }
}

/* manufacturer logos are no longer links (Mark 9/11): no pointer */
.brands a:not([href]), .svc-hero__brands a:not([href]){ cursor:default; }

/* ServiceTitan Text2Chat bubble: sit above the sticky mobile call bar (2026-10-23).
   The widget sets bottom:0 inline, so !important is needed. When the chat opens
   full screen it sets top:0 + height:100%, which overrides this bottom offset. */
@media (max-width:620px){
  body > div:has(> iframe[src^="https://text2chat-widget.servicetitan.com"]){ bottom:66px !important; }
}

/* ── mobile 2026-10-23: promotions slider is plain flow layout (no scale hack) ── */
@media (max-width:700px){
  #promos{ padding-bottom:28px !important; }
  .coupon-slider{ margin-top:16px; }
  .coupon-slider__inner{ align-items:flex-start; }
}

/* ── mobile 2026-10-23: standard mobile menu ──
   Full-width panel under the header, left-aligned rows with hairline dividers,
   caret on the right, submenus indented on a light grey background. Opened by
   toggling .nav--open (app.js); all layout lives here, no inline styles. */
@media (max-width:900px){
  .header .container{ position:relative; }
  .header .nav{ display:none; position:absolute; top:100%; left:0; right:0; z-index:60;
    flex-direction:column; align-items:stretch; gap:0; margin:0; padding:0;
    background:#fff; border-top:1px solid #e3e6ea; border-bottom:1px solid #e3e6ea;
    box-shadow:0 12px 24px rgba(17,19,51,.10); max-height:calc(100vh - 120px); overflow-y:auto; }
  .header .nav.nav--open{ display:flex; }
  .header .nav > a,
  .header .nav .nav-drop__trigger{ display:flex; align-items:center; justify-content:space-between;
    width:100%; padding:14px 20px; font-size:17px; font-weight:600; color:var(--navy);
    text-align:left; border-bottom:1px solid #eceef1; }
  .header .nav .nav-drop{ order:1; width:100%; }
  .header .nav > a{ order:2; } /* Specials last */
  .header .nav .nav-drop__caret{ display:inline-block; opacity:.6; font-size:14px; transition:transform .2s ease; }
  .header .nav .nav-drop.mob-open .nav-drop__caret{ transform:rotate(180deg); }
  .header .nav .nav-drop.mob-open .nav-drop__trigger{ color:var(--orange); }
  .header .nav .nav-drop__menu,
  .header .nav .nav-drop__menu.mega,
  .header .nav .nav-drop__menu.mega--duo,
  .header .nav .nav-drop__menu.mega--areas{ position:static; display:none; width:auto; max-width:none; min-width:0;
    transform:none; box-shadow:none; border:0; border-radius:0; border-bottom:1px solid #eceef1;
    grid-template-columns:1fr; gap:0; padding:6px 20px 12px 28px; background:#f6f7f9; text-align:left; }
  .header .nav .nav-drop__menu.mob-open{ display:block; }
  .header .nav .nav-drop__menu.mega.mob-open{ display:grid; }
  .header .nav .mega__grid{ display:block; }
  .header .nav .mega__col{ display:flex; flex-direction:column; align-items:stretch; gap:0; }
  .header .nav .mega__col + .mega__col{ margin-top:10px; }
  .header .nav .mega__head,
  .header .nav .mega--duo .mega__head{ display:flex; justify-content:flex-start; align-items:center; gap:8px;
    padding:10px 0 6px; margin:0; font-size:16px; border:0; white-space:normal; }
  .header .nav .mega__ico{ width:22px; height:22px; font-size:12px; }
  .header .nav .nav-drop__menu a:not(.mega__head),
  .header .nav .mega--duo .mega__col > a:not(.mega__head){ display:block; padding:8px 0; font-size:15.5px;
    font-weight:500; color:var(--ink); white-space:normal; background:none; border-radius:0; }
  .header .nav .mega__note, .header .nav .mega__foot{ padding:8px 0 0; }
}

/* mobile 2026-10-23: tallest coupon ($29 Heating Tune-Up) shows first, so the
   slider opens with no air underneath. Desktop order unchanged. */
@media (max-width:620px){
  #promos .hcoupon--tuneup{ order:-1; }
}

/* mobile 2026-10-23: phones keep :hover "stuck" on the last tapped item, and the
   desktop hover-to-open rules were holding the Brands/About submenus open.
   Under 900px only the tap state (.mob-open) decides. */
@media (max-width:900px){
  .header .nav .nav-drop:hover .nav-drop__menu:not(.mob-open),
  .header .nav .nav-drop .nav-drop__menu:hover:not(.mob-open){ display:none; }
}

/* mobile 2026-10-23: header "Book Now" (opens the ServiceTitan scheduler) next
   to the hamburger; logo 20% smaller. Desktop keeps Schedule Online, hides Book Now. */
.header__book{ display:none; }
@media (max-width:900px){
  .header .container{ gap:12px; }
  .brand img{ height:62px; }
  .header__cta{ display:flex; margin-left:auto; order:5; }
  .header__cta .header__book{ display:inline-flex; padding:9px 16px; font-size:15px; white-space:nowrap; }
  .nav-toggle{ margin-left:0; order:6; }
}
@media (max-width:380px){
  .brand img{ height:54px; }
  .header__cta .header__book{ padding:8px 12px; font-size:14px; }
}

/* mobile 2026-10-23: dash separators between the trust bar items */
@media (max-width:900px){
  .trust .container{ justify-content:center; gap:0; }
  .trust__item{ font-size:clamp(8px,2.05vw,11px); }
  .trust__item + .trust__item::before{ content:"-"; margin:0 4px; opacity:.7; }
}

/* mobile 2026-10-23: ~40px between Book Now and the hamburger */
@media (max-width:900px){
  .header__cta{ margin-right:28px; }
}

/* mobile 2026-10-23: header button reads "Schedule Service", 20% shorter;
   trust bar may wrap to two lines on small phones instead of overflowing */
@media (max-width:900px){
  .header__cta .header__book{ padding:6px 14px; font-size:14.5px; line-height:1.4; }
}
@media (max-width:380px){
  .header__cta .header__book{ padding:5px 10px; font-size:13.5px; }
  .trust .container{ flex-wrap:wrap; row-gap:2px; }
}