/* ============================================================
   Meridian Air Conditioning — stylesheet (v13, flattened)

   Brand: navy #002148 · blue #007DD6→#0065B1 · steel #808285
   Type:  Sora (display) · Manrope (body)
   Signature: the airflow wave from the logo mark

   v12 grew through seven additive patch layers (v3.1, v4, v4.1,
   v6, v7, v11, v12). Each re-declared selectors instead of
   editing them, so the hero was defined ten times over and 135
   declarations could never apply at all.

   Same design, flattened. Verified by comparing every computed
   property of every element across 126 page/viewport/theme
   combinations against v12 — rendering is identical.

   HOW TO KEEP IT FLAT
     · edit a selector's existing block; never append a new one
     · a modifier (.h2--intro) must stay AFTER its base (.h2):
       equal specificity means source order is what decides
     · a new breakpoint rule goes in the existing block for that
       width, not a fresh @media at the end
   ============================================================ */

/* ============================================================
   Meridian Air Conditioning — shared stylesheet (v4)
   Brand system derived from logo:
     navy #002148 · blue #007DD6→#0065B1 · steel #808285
   Type: Sora (display) · Manrope (body)
   Signature: the airflow wave from the logo mark
   ============================================================ */
/* ---------- Tokens ---------- */
:root{
  --ink:#0F2138;
  --muted:#51677E;
  --navy:#002148;
  --navy-deep:#001430;
  --navy-soft:#123563;
  --on-navy:#D8E8F6;
  --on-navy-soft:#8FB6DC;
  --sky:#9ED6F7;
  --blue:#007DD6;
  --blue-bright:#1E9BE8;
  --blue-dark:#0065B1;
  --blue-tint:#E3F1FB;
  --blue-wash:#EAF5FC;
  --steel:#808285;
  --green:#1FA463;
  --green-dark:#188A53;
  --green-wash:#F0FAF5;
  /* --green reads at 3.21:1 on white, which is fine for a border or an icon but fails AA for label text. --green-ink is the same hue carried to 5.37:1 so the WhatsApp buttons can keep their look and still pass. */
  --green-ink:#157A49;
  --amber:#F0A93A;
  --bg:#F3F8FC;
  --surface:#FFFFFF;
  --surface-alt:#F8FBFE;
  --line:#DCE7F1;
  --line-on-navy:rgba(216,232,246,.18);
  --brand-faint:#9FB1C4;
  --grad-blue:linear-gradient(135deg,#1E9BE8,#0065B1);
  --grad-navy:linear-gradient(160deg,#00305F 0%,#002148 55%,#001430 100%);
  --radius-sm:10px;
  --radius:14px;
  --radius-lg:20px;
  --shadow-card:0 12px 32px rgba(0,33,72,.10);
  --shadow-card-sm:0 2px 10px rgba(0,33,72,.05);
  --shadow-btn:0 8px 20px rgba(0,101,177,.28);
  --container:1120px;
  --gutter:20px;
  /* Fixed chrome heights — keep in sync with .site-header__inner and .topbar. Used to size the hero against the viewport (see .hero--bg). */
  --header-h:72px;
  --font:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-display:'Sora',var(--font);
  /* Signature airflow strokes (echo of the logo's wave) */
  --wave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 220' fill='none'%3E%3Cpath d='M-20 80 C 140 20, 300 130, 470 78 S 780 20, 940 76' stroke='%239ED6F7' stroke-width='3' stroke-linecap='round' opacity='.5'/%3E%3Cpath d='M-20 122 C 150 66, 310 172, 480 120 S 790 64, 940 118' stroke='%231E9BE8' stroke-width='3' stroke-linecap='round' opacity='.4'/%3E%3Cpath d='M-20 164 C 160 112, 320 214, 490 162 S 800 108, 940 160' stroke='%239ED6F7' stroke-width='3' stroke-linecap='round' opacity='.25'/%3E%3C/svg%3E");
  color-scheme:light;
  /* Branded image-placeholder palette */
  --slot-base:#EAF3FB;
  --slot-a:rgba(30,155,232,.16);
  --slot-b:rgba(0,101,177,.13);
  --slot-border:rgba(0,101,177,.18);
  --slot-text:#5B7A97;
  --slot-dot:rgba(0,101,177,.10);
  --slot-chip:#FFFFFF;
  --slot-sheen:rgba(255,255,255,.55);
  /* Button light-sweep strength */
  --sheen:rgba(255,255,255,.38);
  --shadow-pop:0 20px 48px rgba(0,33,72,.16);
  --topbar-h:0px;
}
/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{
  margin:0;
  background:var(--bg);
  font-family:var(--font);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
a{color:var(--blue-dark)}
a:hover{color:var(--blue)}
img{max-width:100%;display:block}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:4px}
::selection{background:var(--blue);color:#fff}
.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:100;
  background:var(--navy);
  color:#fff;
  font-weight:700;
  padding:12px 18px;
  border-radius:0 0 var(--radius-sm) 0;
  text-decoration:none;
}
.skip-link:focus-visible{left:0;color:#fff}
/* ---------- Layout helpers ---------- */
.container{
  max-width:var(--container);
  margin:0 auto;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
}
.container--narrow, .container--form, .container--stat{
  margin-left:auto;
  margin-right:auto;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
}
.container--narrow{max-width:820px}
.container--form{max-width:680px}
.container--stat{max-width:860px}
.section{padding-top:72px;padding-bottom:72px}
/* Doubled-class specificity (0,2,0) is deliberate. The mobile override
   `.section{padding-top:56px;padding-bottom:56px}` in the max-width:900px
   block lives ~2650 lines below this one and is also (0,1,0), so at equal
   specificity the later rule won and these modifiers silently stopped
   working on every screen under 900px. Matching on .section.section--x
   keeps them winning regardless of source order. */
.section.section--tight-top{padding-top:12px}
.section.section--flush-top{padding-top:0}
.band{
  background:var(--surface);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.band--navy{
  background:var(--grad-navy);
  color:var(--on-navy);
  border:none;
  position:relative;
  overflow:hidden;
}
.band--navy::before{
  content:"";
  position:absolute;
  inset:auto -6% -34% -6%;
  height:280px;
  background:var(--wave) center/cover no-repeat;
  opacity:.5;
  pointer-events:none;
}
.band--navy > *{position:relative}
.center{text-align:center}
/* Section/spacing modifiers */
.section.section--cards{padding-bottom:8px}
.grid--mb{margin-bottom:22px}
.grid--mb-sm{margin-bottom:18px}
.grid--mb-md{margin-bottom:24px}
.body-lg{
  margin:0;
  color:var(--muted);
  font-size:16px;
  line-height:1.75;
  font-weight:500;
}
.media-frame{min-height:300px;position:relative}
/* ---------- Type ---------- */
.eyebrow{
  margin:0 0 16px;
  font-size:12.5px;
  font-weight:700;
  font-family:var(--font-display);
  letter-spacing:2.2px;
  text-transform:uppercase;
  color:var(--sky);
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:"";
  width:26px;
  height:2px;
  border-radius:2px;
  background:var(--grad-blue);
}
.h1{
  margin:0 0 18px;
  font-family:var(--font-display);
  font-size:clamp(32px,4.8vw,52px);
  line-height:1.08;
  font-weight:700;
  color:#fff;
  letter-spacing:-1.2px;
  text-wrap:pretty;
}
.h2{
  margin:0 0 28px;
  font-family:var(--font-display);
  font-size:clamp(25px,3.4vw,34px);
  font-weight:700;
  letter-spacing:-.8px;
  text-wrap:pretty;
}
.h2--tight{margin-bottom:8px}
.h2--small{font-size:clamp(21px,3vw,27px);letter-spacing:-.5px;margin-bottom:24px}
.lede{
  margin:0 0 28px;
  font-size:17px;
  line-height:1.7;
  font-weight:500;
  max-width:56ch;
  color:var(--on-navy);
}
.sub{
  margin:0 0 28px;
  color:var(--muted);
  font-size:15.5px;
  line-height:1.65;
  font-weight:500;
  max-width:70ch;
}
.note{
  margin:0;
  color:var(--muted);
  font-size:13.5px;
  font-weight:500;
  line-height:1.6;
}
/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  font-family:var(--font);
  font-weight:800;
  text-decoration:none;
  border-radius:999px;
  border:none;
  cursor:pointer;
  min-height:48px;
  padding:12px 24px;
  font-size:15px;
  transition:background .15s ease,color .15s ease,transform .15s ease,box-shadow .2s ease;
}
.btn:active{transform:translateY(1px)}
.btn--blue{background:var(--grad-blue);color:#fff;box-shadow:var(--shadow-btn)}
.btn--blue:hover{
  color:#fff;
  transform:translateY(-1px);
  box-shadow:0 12px 26px rgba(0,101,177,.36);
}
.btn--green{
  background:linear-gradient(135deg,#25B871,#188A53);
  color:#fff;
  box-shadow:0 8px 20px rgba(24,138,83,.28);
}
.btn--green:hover{color:#fff;transform:translateY(-1px)}
.btn--outline{
  background:transparent;
  border:1.5px solid var(--blue);
  color:var(--blue-dark);
  font-weight:700;
  box-shadow:none;
}
.btn--outline:hover{background:var(--blue-wash);color:var(--blue-dark)}
.btn--wa{
  background:rgba(31,164,99,.12);
  border:1.5px solid var(--green);
  color:#fff;
  font-weight:700;
}
.btn--wa:hover{background:rgba(31,164,99,.22);color:#fff}
.btn--wa-light{
  background:var(--surface);
  border:1.5px solid var(--green);
  color:var(--green-ink);
  font-weight:700;
}
.btn--wa-light:hover{background:var(--green-wash);color:var(--green-ink)}
.btn--lg{min-height:56px;padding:18px 32px;font-size:18px}
.btn--md{min-height:54px;padding:16px 30px;font-size:17px}
.btn--pair{min-height:52px;padding:14px 26px;font-size:16px}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:24px}
.btn-row--center{justify-content:center}
/* ---------- Pills / chips ---------- */
.pill-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.pill-row--center{justify-content:center;margin-bottom:0}
.pill{
  border:1px solid rgba(158,214,247,.35);
  background:rgba(158,214,247,.08);
  color:var(--on-navy);
  font-size:12.5px;
  font-weight:700;
  padding:8px 14px;
  border-radius:999px;
  backdrop-filter:blur(4px);
}
.chip-row{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--muted);
  font-size:13.5px;
  font-weight:600;
  padding:8px 15px;
  border-radius:999px;
  transition:border-color .15s ease,color .15s ease;
}
.chip:hover{border-color:var(--blue);color:var(--blue-dark)}
/* ---------- Header ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:60;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .2s ease;
}
.site-header.is-scrolled{box-shadow:0 6px 24px rgba(0,33,72,.09)}
.site-header__inner{
  height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.brand{
  display:inline-flex;
  align-items:center;
  gap:11px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:19px;
  color:var(--navy);
  text-decoration:none;
  letter-spacing:-.4px;
  flex:none;
}
.brand:hover{color:var(--navy)}
.brand__logo{height:44px;width:auto;flex:none}
.brand__name{line-height:1.05}
.brand__name span{color:var(--blue)}
.nav-desktop{display:flex;align-items:center;gap:4px}
.nav-link{
  color:var(--muted);
  text-decoration:none;
  font-weight:600;
  font-size:15px;
  padding:9px 13px;
  border-radius:999px;
  transition:color .15s ease,background .15s ease;
}
.nav-link:hover{color:var(--navy);background:var(--blue-wash)}
.nav-link[aria-current="page"]{color:var(--navy);font-weight:700;background:var(--blue-tint)}
.header-actions{display:flex;align-items:center;gap:18px}
.phone-link{
  color:var(--navy);
  text-decoration:none;
  font-weight:800;
  font-size:15px;
  font-variant-numeric:tabular-nums;
  /* Rendered 23px tall. Block padding buys the last pixel and the matching negative margin hands it straight back, so the header rhythm is unchanged. Same technique the v11 pass used on the footer links. */
  padding-block:4px;
  margin-block:-4px;
}
.phone-link:hover{color:var(--blue-dark)}
.header-mobile{display:flex;align-items:center;gap:10px}
.menu-btn{
  width:48px;
  height:48px;
  border:1px solid var(--line);
  background:var(--surface);
  border-radius:var(--radius-sm);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  cursor:pointer;
  padding:0;
}
.menu-btn__bar{
  display:block;
  width:18px;
  height:2px;
  background:var(--navy);
  border-radius:1px;
  transition:transform .2s ease,opacity .2s ease;
}
.menu-btn[aria-expanded="true"] .menu-btn__bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-btn[aria-expanded="true"] .menu-btn__bar:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] .menu-btn__bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-menu{
  display:none;
  flex-direction:column;
  background:var(--surface);
  border-top:1px solid var(--line);
  padding:8px 20px 16px;
}
.mobile-menu.open{display:flex;animation:menuIn .18s ease}
.mobile-menu__link{
  color:var(--ink);
  text-decoration:none;
  font-weight:600;
  font-size:16px;
  padding:13px 4px;
  border-bottom:1px solid var(--line);
}
.mobile-menu__link:last-child{border-bottom:none}
.mobile-menu__link:hover{color:var(--blue-dark)}
.mobile-menu__link[aria-current="page"]{font-weight:700;color:var(--blue-dark)}
/* ---------- Hero ---------- */
.hero{
  background:var(--grad-navy);
  color:var(--on-navy);
  position:relative;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute;
  top:-180px;
  right:-160px;
  width:560px;
  height:560px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(30,155,232,.28),rgba(30,155,232,0) 65%);
  pointer-events:none;
}
.hero::after{
  content:"";
  position:absolute;
  left:-4%;
  right:-4%;
  bottom:-40px;
  height:240px;
  background:var(--wave) center/cover no-repeat;
  opacity:.6;
  animation:drift 26s linear infinite alternate;
  pointer-events:none;
}
.hero__grid, .hero__single{position:relative;z-index:1}
.hero__grid{
  padding-top:64px;
  padding-bottom:84px;
  display:grid;
  gap:48px;
  align-items:center;
}
.hero__single{
  max-width:820px;
  margin:0 auto;
  padding:60px var(--gutter) 76px;
  text-align:center;
  padding-top:clamp(56px,7.5vh,92px);
  padding-bottom:clamp(64px,8.5vh,104px);
}
.hero__single .eyebrow::before{display:none}
.hero__single .h1{margin-left:auto;margin-right:auto;max-width:22ch}
.hero__single .lede{margin-left:auto;margin-right:auto;max-width:58ch}
/* ---------- Hero with photographic background (homepage) ---------- */
.hero--bg{
  align-items:center;
  flex-direction:column;
  justify-content:flex-start;
  min-height:calc(100dvh - var(--header-h));
}
/* Let the photo carry the hero — drop the decorative glow and animated wave */
.hero--bg::before, .hero--bg::after{display:none}
/* Single, width-constrained text column so copy stays readable over the image */
.hero--bg .hero__grid{width:100%;margin-top:auto;margin-bottom:auto}
.hero--bg .hero__grid > div{max-width:600px}
/* ---------- Image placeholder slots ---------- */
.img-slot{
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:16px;
  border-radius:var(--radius);
  border:1px solid var(--slot-border);
  background:radial-gradient(circle at 1px 1px, var(--slot-dot) 1px, transparent 1.5px) 0 0/22px 22px, radial-gradient(120% 100% at 12% -8%, var(--slot-a), transparent 55%), radial-gradient(120% 120% at 106% 112%, var(--slot-b), transparent 55%), var(--slot-base);
  color:var(--slot-text);
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.2px;
  line-height:1.5;
  flex-direction:column;
  gap:14px;
  overflow:hidden;
  isolation:isolate;
}
.img-slot--lg{border-radius:var(--radius-lg)}
/* ---------- Cards ---------- */
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:28px;
  box-shadow:var(--shadow-card-sm);
  transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease;
}
.card--pad-lg{padding:32px;position:relative}

@media (hover:hover){
  .card:hover{
    box-shadow:var(--shadow-card);
    transform:translateY(-3px);
    border-color:#C8DCEE;
  }
}
.card__title{
  margin:0 0 10px;
  font-family:var(--font-display);
  font-size:23px;
  font-weight:700;
  letter-spacing:-.5px;
}
.card__body{
  margin:0 0 22px;
  color:var(--muted);
  font-size:15.5px;
  line-height:1.65;
  font-weight:500;
}
/* Service cards */
.service-card{display:flex;flex-direction:column;gap:13px;position:relative}
/* The icon artwork carries its own tinted circle, so the wrapper is only a
   sizing box — it sets the badge size and casts the shadow. Fluid between
   52px on phones and 64px on wide desktop. */
.service-card__icon{
  --icon-size:clamp(52px,1.5vw + 46px,64px);
  width:var(--icon-size);
  height:var(--icon-size);
  flex:0 0 auto;
  align-self:flex-start;
  border-radius:50%;
  box-shadow:0 6px 14px rgba(0,101,177,.22);
}
.service-card__icon img{display:block;width:100%;height:100%;border-radius:inherit}
.service-card h3{
  margin:0;
  font-family:var(--font-display);
  font-size:17.5px;
  font-weight:600;
  letter-spacing:-.3px;
}
.service-card p{
  margin:0;
  color:var(--muted);
  font-size:14.5px;
  line-height:1.6;
  font-weight:500;
}
.service-card__link{
  font-weight:700;
  font-size:14.5px;
  text-decoration:none;
  margin-top:auto;
  color:var(--blue-dark);
  padding-block:2px;
}
.service-card__link::after{content:" \2192";transition:margin-left .15s ease}
.service-card__link:hover::after{margin-left:4px}
/* ---------- Grids ---------- */
.grid{display:grid;gap:20px}
.grid--steps-4{gap:24px}
.grid--split{gap:44px;align-items:center}
/* Four contact methods sit 2x2. Explicit columns, not auto-fit: at the
   container max width auto-fit would resolve to 3 and orphan the fourth
   card on its own row. Collapses to one column in the 560px block. */
.grid--contact{grid-template-columns:repeat(2,1fr)}
/* ---------- Steps ---------- */
.step{display:flex;flex-direction:column;gap:14px}
.step__num{
  width:44px;
  height:44px;
  border-radius:50%;
  background:var(--grad-blue);
  box-shadow:0 6px 14px rgba(0,101,177,.25);
  color:#fff;
  font-family:var(--font-display);
  font-weight:700;
  font-size:17px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.step p{
  margin:0;
  font-size:16px;
  line-height:1.6;
  font-weight:600;
  color:var(--ink);
}
.step--detail p{font-size:15.5px;line-height:1.65;font-weight:500}
.step--detail strong{font-weight:800}
/* ---------- Stat band ---------- */
.stat{padding:76px var(--gutter);text-align:center}
.stat__figure{
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(56px,9vw,96px);
  font-weight:700;
  letter-spacing:-3px;
  line-height:1;
  background:linear-gradient(100deg,#FFFFFF 20%,#9ED6F7 80%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.stat__label{
  margin:16px auto 18px;
  font-size:19px;
  font-weight:700;
  color:#fff;
  max-width:44ch;
  line-height:1.5;
}
.stat__body{
  margin:0 auto 24px;
  font-size:15.5px;
  line-height:1.7;
  font-weight:500;
  max-width:60ch;
}
.stat a{
  color:var(--sky);
  font-weight:700;
  font-size:15px;
  align-items:center;
  min-height:24px;
  padding-block:4px;
}
/* ---------- Brand strip ---------- */
.brands{padding:52px var(--gutter);text-align:center}
.brands__row{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:20px 20px;
  align-items:center;
  justify-items:center;
  max-width:1060px;
  margin:26px auto 22px;
  padding:0;
}
.brands__item{
  display:flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  width:100%;
  min-width:0;
  height:52px;
  padding:0 6px;
  border-radius:10px;
}
.brands__logo{
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  object-fit:contain;
  opacity:.88;
  transition:opacity .2s ease, transform .2s ease;
}
/* Optical sizing. These logos range from 2.3:1 (LG) to 6.6:1 (Samsung),
   so a single shared height would make the wide wordmarks dominate.
   Each gets its own cap height so the row reads evenly weighted. */
.brands__logo--samsung{max-height:23px}
.brands__logo--hisense{max-height:24px}
.brands__logo--daikin{max-height:28px}
.brands__logo--gree{max-height:29px}
.brands__logo--midea{max-height:33px}
.brands__logo--lg{max-height:35px}
.brands p{margin:0;color:var(--muted);font-size:14.5px;font-weight:500}
/* Tablet: 3 across */

@media (max-width:900px){
  .brands__row{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px 22px;
    max-width:560px;
  }


  .brands__item{height:50px}

}
/* Mobile: 2 across, scaled down so nothing crowds the gutters */

@media (max-width:560px){
  .brands__row{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px 14px;
    max-width:340px;
    margin:20px auto 18px;
  }
}
/* ---------- Gallery ---------- */
.gallery-item{margin:0;display:flex;flex-direction:column;gap:10px}
.gallery-item__frame{
  aspect-ratio:4/3;
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  transition:transform .2s ease,box-shadow .2s ease;
}
.gallery-item figcaption{font-size:13.5px;color:var(--muted);font-weight:600}
/* ---------- Reviews ---------- */
.review__stars{margin:0 0 10px;color:var(--amber);font-size:16px;letter-spacing:2px}
.review__text{
  margin:0 0 14px;
  color:var(--ink);
  font-size:15px;
  line-height:1.65;
  font-weight:500;
}
.review__author{margin:0;font-size:13.5px;color:var(--muted);font-weight:700}
.review__author span{font-weight:500}
/* ---------- Sizing table ---------- */
.size-table{
  width:100%;
  border:1px solid var(--line);
  border-radius:var(--radius);
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  background:var(--surface);
  box-shadow:var(--shadow-card-sm);
}
.size-table__head th{
  background:var(--navy);
  color:#fff;
  font-family:var(--font-display);
  font-weight:600;
  font-size:12.5px;
  letter-spacing:1.4px;
  text-transform:uppercase;
  text-align:left;
  padding:14px 18px;
}
.size-table__head th:first-child{width:130px;border-right:1px solid var(--line-on-navy)}
.size-table tbody td{border-top:1px solid var(--line);padding:15px 18px;font-size:15px}
.size-table tbody tr:nth-child(even){background:var(--surface-alt)}
.size-table__size{
  font-weight:800;
  border-right:1px solid var(--line);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.size-table__room{color:var(--muted);font-weight:500}
/* ---------- Size finder (interactive) ---------- */
.sizer{
  margin-top:34px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:28px;
  box-shadow:var(--shadow-card-sm);
}
.sizer__title{
  margin:0 0 6px;
  font-family:var(--font-display);
  font-size:19px;
  font-weight:700;
  letter-spacing:-.4px;
}
.sizer__hint{
  margin:0 0 22px;
  color:var(--muted);
  font-size:14.5px;
  font-weight:500;
  line-height:1.6;
}
.sizer__row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  margin-bottom:10px;
}
.sizer__label{font-weight:700;font-size:15px}
.sizer__value{
  font-family:var(--font-display);
  font-weight:700;
  font-size:22px;
  color:var(--blue-dark);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.3px;
}
.sizer__slider{
  -webkit-appearance:none;
  appearance:none;
  display:block;
  /* range inputs are inline-block: their baseline moves the whole line box when the height changes */
  width:100%;
  /* The painted track is 8px, but an 8px-tall <input> is also an 8px-tall drag target — well under WCAG 2.2 SC 2.5.8 and fiddly with a thumb. The track moves to ::-webkit-slider-runnable-track / ::-moz-range-track so the input box can carry the full 26px target while the rendering stays pixel-identical. */
  height:26px;
  background:transparent;
  outline-offset:6px;
  /* 22px, less the 9px of baseline descender space display:block reclaims */
  margin:0 0 13px;
  cursor:pointer;
}
.sizer__slider::-webkit-slider-runnable-track{
  height:8px;
  border-radius:999px;
  background:linear-gradient(to right,var(--blue) var(--fill,40%),var(--line) var(--fill,40%));
}
.sizer__slider::-moz-range-track{
  height:8px;
  border-radius:999px;
  background:linear-gradient(to right,var(--blue) var(--fill,40%),var(--line) var(--fill,40%));
}
.sizer__slider::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:26px;
  height:26px;
  margin-top:-9px;
  /* centres the 26px thumb on the 8px track */
  border-radius:50%;
  background:var(--surface);
  border:3px solid var(--blue);
  box-shadow:0 2px 8px rgba(0,33,72,.2);
  cursor:grab;
}
.sizer__slider::-moz-range-thumb{
  width:20px;
  height:20px;
  border-radius:50%;
  background:var(--surface);
  border:3px solid var(--blue);
  box-shadow:0 2px 8px rgba(0,33,72,.2);
  cursor:grab;
}
.sizer__checks{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px}
.sizer__check{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1.5px solid var(--line);
  border-radius:999px;
  padding:10px 16px;
  font-weight:600;
  font-size:14px;
  color:var(--muted);
  cursor:pointer;
  user-select:none;
  transition:border-color .15s ease,color .15s ease,background .15s ease;
}
.sizer__check input{
  accent-color:var(--blue);
  width:16px;
  height:16px;
  margin:0;
  cursor:pointer;
}
.sizer__check:has(input:checked){
  border-color:var(--blue);
  color:var(--blue-dark);
  background:var(--blue-wash);
}
.sizer__result{
  border-top:1px solid var(--line);
  padding-top:20px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.sizer__verdict{
  margin:0;
  font-size:15px;
  font-weight:600;
  color:var(--muted);
  line-height:1.6;
}
.sizer__verdict strong{
  display:block;
  font-family:var(--font-display);
  font-size:21px;
  font-weight:700;
  color:var(--ink);
  letter-spacing:-.4px;
  margin-bottom:2px;
}
.sizer__price{color:var(--blue-dark);font-weight:800}
/* Pricing card highlight from sizer */
.price-card.is-recommended{
  border-color:var(--blue);
  box-shadow:0 0 0 2px var(--blue),var(--shadow-card);
}
.price-card{position:relative}
.price-card__flag{
  position:absolute;
  top:-11px;
  left:20px;
  background:var(--grad-blue);
  color:#fff;
  font-size:11.5px;
  font-weight:800;
  letter-spacing:.6px;
  text-transform:uppercase;
  padding:4px 11px;
  border-radius:999px;
  opacity:0;
  transition:opacity .2s ease;
}
.price-card.is-recommended .price-card__flag{opacity:1}
.price-card__name{
  margin:0 0 6px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:16.5px;
  letter-spacing:-.3px;
}
.price-card__from{margin:0;color:var(--muted);font-weight:500;font-size:14px}
.price-card__amount{
  margin:2px 0 0;
  font-family:var(--font-display);
  font-weight:700;
  font-size:28px;
  letter-spacing:-.8px;
  color:var(--blue-dark);
}
.price-card__unit{margin:2px 0 0;color:var(--muted);font-weight:600;font-size:14px}
/* ---------- FAQ ---------- */
.faq-list{display:flex;flex-direction:column;gap:12px}
.faq-item{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-card-sm);
  transition:border-color .18s ease;
}
.faq-item.open{border-color:var(--blue)}
.faq-btn{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  background:none;
  border:none;
  padding:18px 20px;
  cursor:pointer;
  font-family:var(--font);
  font-weight:700;
  font-size:16px;
  color:var(--ink);
  text-align:left;
  min-height:56px;
}
.faq-mark{
  color:var(--blue);
  font-size:20px;
  font-weight:400;
  flex:none;
  transition:transform .25s ease;
}
.faq-item.open .faq-mark{transform:rotate(45deg)}
.faq-answer-wrap{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .28s ease;
}
.faq-item.open .faq-answer-wrap{grid-template-rows:1fr}
.faq-answer-inner{overflow:hidden}
.faq-answer{
  margin:0;
  padding:0 20px 20px;
  color:var(--muted);
  font-size:15px;
  line-height:1.7;
  font-weight:500;
}
/* ---------- Contact / quote form ---------- */
.cta{
  background:var(--grad-navy);
  color:var(--on-navy);
  position:relative;
  overflow:hidden;
}
.cta::before{
  content:"";
  position:absolute;
  left:-4%;
  right:-4%;
  top:-60px;
  height:220px;
  background:var(--wave) center/cover no-repeat;
  opacity:.35;
  pointer-events:none;
}
.cta__inner{position:relative;padding:72px var(--gutter) 80px;text-align:center}
.cta__title{
  margin:0 0 14px;
  font-family:var(--font-display);
  font-size:clamp(27px,4vw,38px);
  font-weight:700;
  color:#fff;
  letter-spacing:-.9px;
  text-wrap:pretty;
}
.cta__body{
  margin:0 auto 28px;
  font-size:16px;
  line-height:1.7;
  font-weight:500;
  max-width:56ch;
}
.quote-form{
  display:flex;
  flex-direction:column;
  gap:12px;
  text-align:left;
  background:rgba(255,255,255,.06);
  border:1px solid var(--line-on-navy);
  border-radius:var(--radius-lg);
  padding:26px;
  backdrop-filter:blur(6px);
}
.quote-form .field{display:flex;flex-direction:column;gap:6px}
.quote-form label{
  font-size:13.5px;
  font-weight:700;
  color:var(--on-navy);
  letter-spacing:.2px;
}
.quote-form input{
  min-height:50px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:0 16px;
  font-family:var(--font);
  font-size:16px;
  font-weight:500;
  color:var(--ink);
  background:var(--surface);
  width:100%;
}
.quote-form input:focus-visible{outline-offset:1px}
.quote-form input[aria-invalid="true"]{border-color:#E05C4B;box-shadow:0 0 0 1px #E05C4B}
.field-error{display:none;font-size:13px;font-weight:600;color:#FFB4A8}
.field-error.show{display:block}
.quote-form__actions{display:flex;flex-wrap:wrap;gap:10px}
.quote-form__actions .btn{flex:1 1 210px}
.quote-form__note{
  margin:6px 0 0;
  font-size:12.5px;
  color:var(--on-navy-soft);
  font-weight:500;
  text-align:center;
}
/* ---------- Check list ---------- */
.check-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:13px;
}
.check-list li{
  position:relative;
  padding-left:32px;
  color:var(--ink);
  font-weight:600;
  font-size:15.5px;
  line-height:1.6;
}
.check-list li::before{
  content:"\2713";
  position:absolute;
  left:0;
  top:1px;
  width:21px;
  height:21px;
  border-radius:50%;
  background:var(--green-wash);
  border:1px solid var(--green);
  color:var(--green);
  font-weight:800;
  font-size:12px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.check-list li span{color:var(--muted);font-weight:500}
/* ---------- Contact page ---------- */
.contact-card{display:flex;flex-direction:column;gap:10px;position:relative}
.contact-card__label{
  margin:0;
  font-size:12.5px;
  font-weight:700;
  font-family:var(--font-display);
  letter-spacing:1.4px;
  text-transform:uppercase;
  color:var(--muted);
}
.contact-card__value{
  font-family:var(--font-display);
  font-size:21px;
  font-weight:700;
  letter-spacing:-.4px;
  color:var(--ink);
  text-decoration:none;
  align-items:center;
  gap:9px;
}
.contact-card__value:hover{color:var(--blue-dark)}
.contact-card__value--email{font-size:15.5px;letter-spacing:0;min-width:0}
.contact-card__value--email span{min-width:0;overflow-wrap:anywhere}
.contact-card p{
  margin:0;
  color:var(--muted);
  font-size:14.5px;
  font-weight:500;
  line-height:1.6;
}
/* ---------- Footer ---------- */
.site-footer{
  background:var(--grad-navy);
  color:var(--on-navy);
  border-top:none;
  position:relative;
  overflow:hidden;
}
.site-footer::before{
  content:"";
  position:absolute;
  right:-90px;
  bottom:-70px;
  width:420px;
  height:314px;
  background:url("assets/logo-icon-white.png") center/contain no-repeat;
  opacity:.05;
  pointer-events:none;
}
.site-footer__inner{position:relative;padding:56px var(--gutter) 28px}
.site-footer__grid{display:grid;gap:36px;margin-bottom:40px}
.site-footer__col{display:flex;flex-direction:column;gap:9px}
/* The footer column is a column flexbox, so its default align-items:stretch
   was forcing the logo's width to the full column width while height stayed
   locked at 56px. align-self:flex-start opts the image out of that stretch. */
.site-footer__logo{
  height:56px;
  width:auto;
  max-width:100%;
  align-self:flex-start;
  object-fit:contain;
  margin-bottom:2px;
}
.site-footer__brand{
  margin:0;
  font-family:var(--font-display);
  font-weight:700;
  font-size:18px;
  letter-spacing:-.3px;
  color:#fff;
}
.site-footer__tagline{
  margin:0;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:1.6px;
  text-transform:uppercase;
  color:var(--on-navy-soft);
}
.site-footer__about{margin:0;font-size:14px;line-height:1.65;font-weight:500}
.site-footer__heading{
  margin:0 0 4px;
  font-family:var(--font-display);
  font-weight:600;
  font-size:13px;
  color:#fff;
  text-transform:uppercase;
  letter-spacing:1.4px;
}
.site-footer__contact{
  color:var(--sky);
  font-weight:700;
  font-size:14.5px;
  text-decoration:none;
  align-items:center;
  gap:7px;
  width:fit-content;
}
.site-footer__contact:hover{color:#fff}
.site-footer__hours{margin:0;font-size:13.5px;font-weight:500;line-height:1.6}
.site-footer__link{
  color:var(--on-navy);
  font-size:14px;
  font-weight:500;
  text-decoration:none;
}
.site-footer__link:hover{color:#fff;padding-left:3px}
.site-footer__areas{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px}
.site-footer__legal{
  border-top:1px solid var(--line-on-navy);
  padding-top:20px;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}
.site-footer__legal p{margin:0;font-size:13px;font-weight:600}
.site-footer__credit{color:var(--sky);font-size:13px;font-weight:700;text-decoration:none}
.site-footer__credit:hover{color:#fff}
.site-footer__demo{margin:0;font-size:12.5px;color:#7FA9CE;font-weight:500}
/* ---------- Mobile call dock ---------- */
.mobile-dock{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  z-index:70;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
  box-shadow:0 -8px 24px rgba(0,33,72,.08);
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  display:flex;
  gap:10px;
}
.mobile-dock__call{
  flex:1.4;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--grad-blue);
  box-shadow:var(--shadow-btn);
  color:#fff;
  font-weight:800;
  font-size:16px;
  min-height:52px;
  border-radius:999px;
  text-decoration:none;
}
.mobile-dock__call:hover{color:#fff}
.mobile-dock__wa{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  border:1.5px solid var(--green);
  color:var(--green-ink);
  font-weight:700;
  font-size:15px;
  min-height:52px;
  border-radius:999px;
  text-decoration:none;
  background:var(--surface);
}
.mobile-dock__wa:hover{background:var(--green-wash);color:var(--green-ink)}
/* ---------- Scroll reveal ---------- */
.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .55s ease,transform .55s ease;
}
.reveal.in{opacity:1;transform:none}
/* ---------- Responsive visibility ---------- */

@media (max-width:900px){
  [data-desktop-only]{display:none !important}


  body{padding-bottom:84px}

}

@media (min-width:901px){
  [data-mobile-only]{display:none !important}
}

@media (max-width:560px){
  .size-table__row{grid-template-columns:110px 1fr}
}
/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}
/* ============================================================
   v3.1 — conversion components
   ============================================================ */
/* Ghost button (secondary on navy) */
.btn--ghost{
  background:rgba(255,255,255,.07);
  border:1.5px solid rgba(158,214,247,.45);
  color:#fff;
  font-weight:700;
  backdrop-filter:blur(4px);
}
.btn--ghost:hover{background:rgba(158,214,247,.16);border-color:var(--sky);color:#fff}
/* Whole service card clickable */
.service-card__link::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:var(--radius);
  z-index:4;
}
/* ---------- Before / after ---------- */
.ba{display:grid;gap:20px}
.ba__panel{margin:0;display:flex;flex-direction:column;gap:10px}
.ba__frame{
  aspect-ratio:4/3;
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
}
.ba__tag{
  position:absolute;
  top:14px;
  left:14px;
  z-index:1;
  font-family:var(--font-display);
  font-size:12px;
  font-weight:700;
  letter-spacing:1.6px;
  text-transform:uppercase;
  padding:7px 14px;
  border-radius:999px;
  background:rgba(15,33,56,.78);
  color:#fff;
  backdrop-filter:blur(4px);
}
.ba__tag--after{background:var(--grad-blue)}
.ba__panel figcaption{font-size:13.5px;color:var(--muted);font-weight:600}
/* ============================================================
   v4 — craft layer (BriteSite)
   Additive enhancements over the v3.1 system. Nothing here
   removes existing behaviour; it deepens the airflow signature,
   adds a disciplined dark theme, refines motion and placeholders,
   and introduces reading-progress + back-to-top chrome.
   ============================================================ */
/* ---------- Extra light-mode tokens (placeholders + sheen) ---------- */
/* ============================================================
   DARK THEME — token overrides cascade through the whole system
   ============================================================ */
html[data-theme="dark"]{
  color-scheme:dark;
  --ink:#E9F2FB;
  --muted:#9CB4CD;
  --bg:#0A1522;
  --surface:#0F1E30;
  --surface-alt:#152A40;
  --line:#25405A;
  --line-on-navy:rgba(158,214,247,.16);
  --brand-faint:#5E7C99;
  --blue-tint:#153049;
  --blue-wash:#122539;
  --green-wash:rgba(31,164,99,.14);
  /* --blue-dark and --green-ink were the only two brand tokens the dark theme never remapped. --blue-dark is a foreground colour in 19 of its 21 uses (prices, links, the sizer readout) and was landing at 2.79:1 on --surface, which put every price on installation.html a hair above invisible. The two background uses are decorative bright->dark gradients, which stay coherent when the dark end lightens. */
  --blue-dark:#4FB0EF;
  --green-ink:#3BC183;
  --shadow-card:0 18px 44px rgba(0,0,0,.55);
  --shadow-card-sm:0 2px 12px rgba(0,0,0,.40);
  --shadow-pop:0 24px 54px rgba(0,0,0,.6);
  /* Placeholders */
  --slot-base:#10233A;
  --slot-a:rgba(30,155,232,.20);
  --slot-b:rgba(0,101,177,.16);
  --slot-border:rgba(158,214,247,.14);
  --slot-text:#8AA6C2;
  --slot-dot:rgba(158,214,247,.10);
  --slot-chip:#16293F;
  --slot-sheen:rgba(158,214,247,.10);
  --sheen:rgba(255,255,255,.28);
}
/* Surfaces that hard-code light values need explicit dark treatment */
html[data-theme="dark"] .site-header{background:rgba(9,17,28,.82);border-bottom-color:var(--line)}
html[data-theme="dark"] .site-header.is-scrolled{box-shadow:0 8px 28px rgba(0,0,0,.5)}
html[data-theme="dark"] .mobile-dock{
  background:rgba(9,17,28,.9);
  border-top-color:var(--line);
  box-shadow:0 -8px 24px rgba(0,0,0,.5);
}
/* Components that reference --navy for foreground text must flip on dark */
html[data-theme="dark"] .brand{color:var(--ink)}
html[data-theme="dark"] .brand:hover{color:var(--ink)}
html[data-theme="dark"] .brand__name span{color:var(--blue-bright)}
html[data-theme="dark"] .phone-link{color:var(--ink)}
html[data-theme="dark"] .phone-link:hover{color:var(--blue-bright)}
html[data-theme="dark"] .menu-btn__bar{background:var(--ink)}
html[data-theme="dark"] .nav-link:hover{color:var(--ink)}
html[data-theme="dark"] .nav-link[aria-current="page"]{color:var(--ink)}
html[data-theme="dark"] .mobile-menu__link[aria-current="page"]{color:var(--blue-bright)}
/* Dark theme: several of these marks are dark-on-dark (Samsung #0032a0,
   Gree #034da2, LG #930036) and disappear on the navy surface. A light
   tile keeps every logo legible without distorting brand colour. */
html[data-theme="dark"] .brands__item{background:#EEF4FA}
html[data-theme="dark"] .brands__logo{opacity:1}
html[data-theme="dark"] .chip:hover{color:var(--blue-bright);border-color:var(--blue-bright)}
html[data-theme="dark"] .btn--outline{color:var(--blue-bright)}
html[data-theme="dark"] .service-card__link,
html[data-theme="dark"] .site-footer__credit,
html[data-theme="dark"] .site-footer__contact{color:var(--sky)}
/* Give the always-navy panels a faint edge so they separate from the dark page */
html[data-theme="dark"] .band--navy,
html[data-theme="dark"] .cta,
html[data-theme="dark"] .site-footer{box-shadow:inset 0 1px 0 rgba(158,214,247,.08)}
/* Soften the sizer slider track base in dark */
html[data-theme="dark"] .sizer__slider::-webkit-slider-runnable-track,
html[data-theme="dark"] .sizer__slider::-moz-range-track{background:linear-gradient(to right,var(--blue) var(--fill,40%),#22384f var(--fill,40%))}
/* Theme-toggle icon colour + focus already handled by :focus-visible */
/* ============================================================
   THEME TOGGLE BUTTON
   ============================================================ */
.theme-toggle{
  width:44px;
  height:44px;
  flex:none;
  border:1px solid var(--line);
  background:var(--surface);
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  color:var(--ink);
  padding:0;
  transition:background .18s ease,border-color .18s ease,transform .18s ease,color .18s ease;
}
.theme-toggle:hover{
  border-color:var(--blue);
  color:var(--blue-dark);
  transform:translateY(-1px);
}
html[data-theme="dark"] .theme-toggle:hover{color:var(--blue-bright)}
.theme-toggle svg{width:19px;height:19px;display:block}
.theme-toggle__sun{display:none}
.theme-toggle__moon{display:block}
html[data-theme="dark"] .theme-toggle__moon{display:none}
html[data-theme="dark"] .theme-toggle__sun{display:block}
.header-mobile .theme-toggle{width:48px;height:48px;border-radius:var(--radius-sm)}
/* ============================================================
   READING-PROGRESS BAR
   ============================================================ */
.scroll-progress{
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:3px;
  z-index:120;
  background:linear-gradient(90deg,var(--blue-bright) 0%,var(--blue-dark) 58%,var(--green) 100%);
  transform:scaleX(var(--p,0));
  transform-origin:0 50%;
  will-change:transform;
  pointer-events:none;
}
/* ============================================================
   BACK-TO-TOP
   ============================================================ */
.to-top{
  position:fixed;
  right:22px;
  bottom:26px;
  z-index:65;
  width:48px;
  height:48px;
  border:none;
  border-radius:999px;
  background:var(--grad-blue);
  box-shadow:var(--shadow-btn);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  opacity:0;
  transform:translateY(14px) scale(.9);
  pointer-events:none;
  transition:opacity .25s ease,transform .25s ease,box-shadow .2s ease;
}
.to-top svg{width:20px;height:20px}
.to-top.show{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,101,177,.4)}
/* ============================================================
   INTERIOR HERO — add quiet depth (homepage keeps its photo)
   ============================================================ */
.hero:not(.hero--bg){background:radial-gradient(circle at 1px 1px, rgba(158,214,247,.05) 1px, transparent 1.6px) 0 0/26px 26px, radial-gradient(130% 90% at 82% -12%, rgba(30,155,232,.30), transparent 58%), radial-gradient(120% 80% at 0% 110%, rgba(0,101,177,.24), transparent 60%), var(--grad-navy)}
.hero__single .eyebrow{color:var(--sky);margin-bottom:10px}
/* Homepage hero: crisper bottom scrim for text/scroll separation */
.hero--bg::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:120px;
  background:linear-gradient(to top,rgba(0,20,48,.55),transparent);
  pointer-events:none;
}
/* ============================================================
   BRANDED IMAGE PLACEHOLDERS  (the biggest visual lift — used
   on every page). Solid, textured, iconed, softly animated.
   ============================================================ */
.img-slot::before{
  content:"";
  width:54px;
  height:54px;
  flex:none;
  border-radius:15px;
  background:var(--slot-chip) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24' fill='none' stroke='%23007DD6' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2.5'/%3E%3Ccircle cx='8.5' cy='9.5' r='1.6'/%3E%3Cpath d='M21 16l-4.5-4.5L7 20'/%3E%3C/svg%3E") center/26px no-repeat;
  box-shadow:0 8px 18px rgba(0,33,72,.14), inset 0 0 0 1px var(--slot-border);
}
.img-slot::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(105deg,transparent 34%,var(--slot-sheen) 50%,transparent 66%);
  transform:translateX(-130%);
  animation:slotSweep 6s ease-in-out infinite;
}
/* keep the icon + label above the base gradients */
.img-slot{position:absolute}
/* ============================================================
   BUTTON LIGHT-SWEEP (echoes airflow)
   ============================================================ */
.btn--blue,.btn--green,.mobile-dock__call{position:relative;overflow:hidden;isolation:isolate}
.btn--blue::after,.btn--green::after,.mobile-dock__call::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(120deg,transparent 34%,var(--sheen) 50%,transparent 66%);
  transform:translateX(-135%);
  transition:transform .6s cubic-bezier(.4,0,.2,1);
}
.btn--blue:hover::after,
.btn--green:hover::after,
.mobile-dock__call:active::after{transform:translateX(135%)}
/* ============================================================
   CARD ACCENTS — a thin airflow-gradient edge on feature cards
   ============================================================ */
.service-card,.contact-card,.card--pad-lg{overflow:hidden}
.service-card::before, .contact-card::before, .card--pad-lg::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:3px;
  background:var(--grad-blue);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .28s ease;
  z-index:3;
}
/* service-card whole-card link still needs to sit above the accent bar */
/* Slightly stronger, snappier lift on feature cards */
/* ============================================================
   GALLERY / BEFORE-AFTER — gentle zoom on the framed media
   ============================================================ */
/* ---------- Real photos in gallery / before-after frames ----------
   Fills the same 4/3 frames the .img-slot placeholders occupy, so the
   locked layout stays identical. The frame already handles the rounded
   corners and clipping via overflow:hidden; this just makes the photo
   cover the frame and echo the placeholder's gentle hover zoom. */
.frame-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
/* ---------- Real photo in a split-section media frame ----------
   The .img-slot--lg placeholder carried its own radius and filled a flat
   300px box. A photo needs the frame itself to clip, and needs the native
   4/3 so nothing is cropped on wide columns. The 300px floor is kept, so
   on a single-column layout the footprint is identical to the placeholder.
   Add this modifier alongside .media-frame when swapping in a real photo. */
.media-frame--photo{
  aspect-ratio:4/3;
  border-radius:var(--radius-lg);
  overflow:hidden;
  min-height:0;
  min-width:0;
}
.media-frame--photo .frame-img{border-radius:inherit}
/* ============================================================
   H2 accent tick — reinforces the airflow signature quietly.
   Applied only to left-aligned section headings via .h2--tick
   (added by JS to non-centred h2s so no HTML churn is required).
   ============================================================ */
.h2--tick{position:relative;padding-top:20px}
.h2--tick::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:44px;
  height:4px;
  border-radius:4px;
  background:var(--grad-blue);
}
/* ============================================================
   FOOTER + link niceties
   ============================================================ */
.site-footer__link{transition:color .15s ease,padding-left .15s ease}
/* ============================================================
   PILL shimmer removed on reduced-motion via global rule.
   Trustbar tick + stars keep colour in dark.
   ============================================================ */
/* ============================================================
   PRINT
   ============================================================ */

@media print{
  .site-header,
  .topbar,
  .mobile-dock,
  .to-top,
  .scroll-progress,
  .theme-toggle,
  .cta,
  .btn,
  .skip-link{display:none !important}
  body{background:#fff;color:#000;padding:0}
  .hero:not(.hero--bg){background:#fff;color:#000}
  .hero .h1,.hero .lede,.hero .eyebrow{color:#000}
  .band,.band--navy,.site-footer{background:#fff;color:#000;border-color:#ccc}
  .card,.faq-item,.sizer,.size-table{box-shadow:none;border-color:#ccc}
  .faq-answer-wrap{grid-template-rows:1fr !important}
  a{color:#000}
  .img-slot::after{display:none}
}
/* ============================================================
   v4.1 — hero + header refinements (BriteSite)
   Addresses: desktop header spread, mobile header declutter,
   in-hero announcement pill + trust markers, gated mobile CTA,
   and phone/WhatsApp icons on action buttons.
   ============================================================ */
/* The announcement no longer lives in a full-width band, so the
   hero fills the viewport minus the header alone. */
/* ---------- Desktop header: spread wider, group the toggle ---------- */

@media (min-width:901px){
  .header-actions{gap:16px}
}
/* ---------- Button icons ---------- */
.btn__ico{flex:none;display:inline-flex}
/* ---------- In-hero announcement pill (replaces the topbar) ---------- */
.hero-note{
  display:inline-flex;
  align-items:center;
  margin:0 0 22px;
  border-radius:999px;
  line-height:1.3;
  gap:11px;
  background:rgba(206,232,251,.10);
  border:1px solid rgba(158,214,247,.24);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 1px 0 rgba(255,255,255,.10) inset, 0 10px 26px -16px rgba(0,18,42,.9);
  color:#E9F4FD;
  letter-spacing:.15px;
}
.hero-note__dot{
  flex:none;
  border-radius:50%;
  width:8px;
  height:8px;
  background:#4FDD9B;
  animation:dotPulse 2.6s cubic-bezier(.4,0,.2,1) infinite;
}
.hero-note__short{display:none}
/* ---------- Mobile: hero spacing, pill text swap, trust trimming ---------- */

@media (max-width:600px){
  .hero-note{margin-bottom:16px;font-size:12px;padding:7px 14px 7px 12px}


  .hero--bg .hero__grid{padding-top:clamp(26px,6vw,44px);padding-bottom:clamp(30px,6vw,52px)}


  .hero .h1{margin-bottom:14px}


  .hero .lede{margin-bottom:20px}


  .hero .btn-row{margin-bottom:0}

}
/* ---------- Mobile CTA dock: reveal only after the hero ---------- */
.mobile-dock{
  transform:translateY(125%);
  opacity:0;
  pointer-events:none;
  transition:transform .34s cubic-bezier(.4,0,.2,1),opacity .3s ease;
}
.mobile-dock.is-visible{transform:none;opacity:1;pointer-events:auto}
/* ---------- v4.1b — icons on contact-info links ---------- */
.site-footer__contact{display:inline-flex}
.contact-card__value{display:inline-flex}
.contact-ico{flex:none}
.sizer-cta__label{display:inline}
/* ============================================================
   ENERGY-SAVINGS COMPARISON  (installation page)
   Sits in the media column beside "The right unit pays for
   itself". That column can be as narrow as ~300px on a 700px
   viewport, so the base layout is built for 300px and widens
   via a container query. Browsers without container query
   support simply keep the 2-up size picker, which is fine.
   ============================================================ */
/* Section layout: intro top-left, calculator right, method notes below the
   intro. The calculator spans both rows, so the notes expand into the space
   beside it instead of stretching the card. */
.savings-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:26px;
  align-items:start;
  max-width:680px;
  margin-inline:auto;
}
.saver{
  /* local tokens so the dark theme only overrides one block */
  --saver-old:#93A7BB;
  --saver-old-2:#70889F;
  --saver-track:#EAF1F8;
  --saver-good:var(--green-dark);
  --saver-good-line:rgba(31,164,99,.22);
  container-type:inline-size;
  container-name:saver;
  position:relative;
  overflow:hidden;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:26px;
  box-shadow:var(--shadow-card-sm);
}
.saver::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:3px;
  background:var(--grad-blue);
}
.saver__title{
  margin:0 0 6px;
  font-family:var(--font-display);
  font-size:19px;
  font-weight:700;
  letter-spacing:-.4px;
}
.saver__hint{
  margin:0 0 20px;
  color:var(--muted);
  font-size:14px;
  font-weight:500;
  line-height:1.6;
}
/* ---------- Controls ---------- */
.saver__field{margin:0 0 18px;padding:0;border:0;min-width:0}
.saver__label{
  display:block;
  margin:0 0 10px;
  padding:0;
  font-weight:700;
  font-size:14px;
  color:var(--ink);
}
.saver__label--row{margin:0}
.saver__opts{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}

@container saver (min-width:400px){
  .saver__opts{grid-template-columns:repeat(4,1fr)}
}
.saver__opt{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1px;
  padding:10px 6px;
  border:1.5px solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--surface);
  cursor:pointer;
  user-select:none;
  transition:border-color .15s ease,background .15s ease;
}
.saver__opt input{
  position:absolute;
  width:1px;
  height:1px;
  margin:0;
  opacity:0;
  pointer-events:none;
}
.saver__opt-n{
  font-family:var(--font-display);
  font-size:15.5px;
  font-weight:700;
  letter-spacing:-.3px;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.saver__opt-u{
  font-size:10px;
  font-weight:700;
  letter-spacing:1.1px;
  text-transform:uppercase;
  color:var(--muted);
}
.saver__opt:has(input:checked){border-color:var(--blue);background:var(--blue-wash)}
.saver__opt:has(input:checked) .saver__opt-n,
.saver__opt:has(input:checked) .saver__opt-u{color:var(--blue-dark)}
.saver__opt:has(input:focus-visible){outline:3px solid var(--blue);outline-offset:2px}

@media (hover:hover){
  .brands__logo:hover{opacity:1;transform:translateY(-2px)}
  .gallery-item:hover .gallery-item__frame{transform:translateY(-3px);box-shadow:var(--shadow-card)}
  .service-card:hover::before,
  .contact-card:hover::before,
  .card--pad-lg:hover::before{transform:scaleX(1)}
  .service-card:hover,.contact-card:hover{box-shadow:var(--shadow-pop)}
  .gallery-item__frame .img-slot, .ba__frame .img-slot{transition:transform .4s cubic-bezier(.2,.6,.2,1)}
  .gallery-item:hover .img-slot, .ba__panel:hover .img-slot{transform:scale(1.04)}
  .gallery-item__frame .frame-img, .ba__frame .frame-img{transition:transform .4s cubic-bezier(.2,.6,.2,1)}
  .gallery-item:hover .frame-img, .ba__panel:hover .frame-img{transform:scale(1.04)}
  .saver__opt:hover{border-color:var(--blue-bright)}
}
.saver__row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.saver__value{
  font-family:var(--font-display);
  font-size:19px;
  font-weight:700;
  color:var(--blue-dark);
  letter-spacing:-.3px;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.saver__value small{font-size:12px;font-weight:600;color:var(--muted);letter-spacing:0}
.saver__slider{
  -webkit-appearance:none;
  appearance:none;
  display:block;
  /* range inputs are inline-block: their baseline moves the whole line box when the height changes */
  width:100%;
  /* The painted track is 8px, but an 8px-tall <input> is also an 8px-tall drag target — well under WCAG 2.2 SC 2.5.8 and fiddly with a thumb. The track moves to ::-webkit-slider-runnable-track / ::-moz-range-track so the input box can carry the full 26px target while the rendering stays pixel-identical. */
  height:26px;
  background:transparent;
  outline-offset:6px;
  margin:0;
  cursor:pointer;
}
.saver__slider::-webkit-slider-runnable-track{
  height:8px;
  border-radius:999px;
  background:linear-gradient(to right,var(--blue) var(--fill,40%),var(--line) var(--fill,40%));
}
.saver__slider::-moz-range-track{
  height:8px;
  border-radius:999px;
  background:linear-gradient(to right,var(--blue) var(--fill,40%),var(--line) var(--fill,40%));
}
.saver__slider::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:26px;
  height:26px;
  margin-top:-9px;
  /* centres the 26px thumb on the 8px track */
  border-radius:50%;
  background:var(--surface);
  border:3px solid var(--blue);
  box-shadow:0 2px 8px rgba(0,33,72,.2);
  cursor:grab;
}
.saver__slider::-moz-range-thumb{
  width:20px;
  height:20px;
  border-radius:50%;
  background:var(--surface);
  border:3px solid var(--blue);
  box-shadow:0 2px 8px rgba(0,33,72,.2);
  cursor:grab;
}
/* ---------- Comparison bars ---------- */
.saver__chart{
  margin-top:20px;
  /* 22px, less the 2px display:block reclaims above */
  padding-top:20px;
  border-top:1px solid var(--line);
}
.saver__axis{
  margin:0 0 14px;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:1.1px;
  text-transform:uppercase;
  color:var(--muted);
}
.saver__bar + .saver__bar{margin-top:15px}
.saver__bar-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}
.saver__bar-name{
  display:inline-flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
  font-size:13px;
  font-weight:700;
  color:var(--muted);
}
.saver__badge{
  padding:2px 8px;
  border-radius:999px;
  background:var(--green-wash);
  border:1px solid var(--saver-good-line);
  color:var(--saver-good);
  font-size:11px;
  font-weight:800;
  letter-spacing:.2px;
  font-variant-numeric:tabular-nums;
}
.saver__cost{
  font-family:var(--font-display);
  font-size:16.5px;
  font-weight:700;
  letter-spacing:-.3px;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.saver__cost--new{color:var(--blue-dark)}
.saver__track{
  height:14px;
  border-radius:999px;
  background:var(--saver-track);
  overflow:hidden;
}
.saver__fill{
  height:100%;
  width:0;
  border-radius:999px;
  transition:width .55s cubic-bezier(.2,.6,.2,1);
}
.saver__fill--old{background:linear-gradient(90deg,var(--saver-old),var(--saver-old-2))}
.saver__fill--new{background:linear-gradient(90deg,var(--blue-bright),var(--blue-dark))}
/* ---------- Savings callout ---------- */
.saver__result{
  margin-top:22px;
  padding:16px 18px;
  border:1px solid var(--saver-good-line);
  border-radius:var(--radius);
  background:var(--green-wash);
}
.saver__save{
  margin:0;
  font-size:13.5px;
  font-weight:600;
  color:var(--muted);
  line-height:1.6;
}
.saver__save strong{
  display:block;
  margin-bottom:3px;
  font-family:var(--font-display);
  font-size:22px;
  font-weight:700;
  letter-spacing:-.5px;
  color:var(--saver-good);
}
/* ---------- Method notes (its own cell beside the calculator) ---------- */
.saver__foot{margin:14px 0 0;font-size:12px;font-weight:600;color:var(--muted)}
.saver-notes{border-top:1px solid var(--line);padding-top:16px}
.saver-notes__summary{
  display:flex;
  align-items:center;
  gap:8px;
  list-style:none;
  cursor:pointer;
  font-size:13.5px;
  font-weight:700;
  color:var(--blue-dark);
}
.saver-notes__summary::-webkit-details-marker{display:none}
.saver-notes__summary::after{
  content:"";
  width:7px;
  height:7px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
  transition:transform .2s ease;
}
.saver-notes[open] .saver-notes__summary::after{transform:translateY(1px) rotate(-135deg)}
.saver-notes__rate{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
  margin-top:16px;
}
.saver-notes__rate label{font-size:13px;font-weight:700}
.saver-notes__input{
  display:inline-flex;
  align-items:center;
  gap:3px;
  padding:6px 10px;
  border:1.5px solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--surface);
  font-size:13px;
  font-weight:700;
  color:var(--muted);
}
.saver-notes__input input{
  width:56px;
  padding:0;
  border:0;
  background:transparent;
  font-family:var(--font-display);
  font-size:14.5px;
  font-weight:700;
  color:var(--ink);
  -moz-appearance:textfield;
  appearance:textfield;
}
.saver-notes__input input::-webkit-outer-spin-button,
.saver-notes__input input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.saver-notes__input:focus-within{border-color:var(--blue)}
.saver-notes__list{
  margin:14px 0 0;
  padding-left:18px;
  color:var(--muted);
  font-size:12.5px;
  font-weight:500;
  line-height:1.7;
}
.saver-notes__list li + li{margin-top:6px}
/* ---------- Narrow screens ---------- */
/* ---------- Dark theme ---------- */
html[data-theme="dark"] .saver{
  --saver-old:#4C6A88;
  --saver-old-2:#3A5570;
  --saver-track:#152A40;
  --saver-good:#4FD495;
  --saver-good-line:rgba(79,212,149,.24);
}
html[data-theme="dark"] .saver__slider{background:linear-gradient(to right,var(--blue) var(--fill,40%),#22384f var(--fill,40%))}
html[data-theme="dark"] .saver__value,
html[data-theme="dark"] .saver__cost--new,
html[data-theme="dark"] .saver-notes__summary,
html[data-theme="dark"] .saver__opt:has(input:checked) .saver__opt-n,
html[data-theme="dark"] .saver__opt:has(input:checked) .saver__opt-u{color:var(--blue-bright)}
/* ---------- Motion ---------- */
/* ============================================================
   HEADER FIT (901px → full desktop)

   The desktop bar is brand + five nav links + toggle + phone +
   CTA, none of which wrap, so it needs ~1143px to lay out at
   full size. Below that the only flex item able to give was
   .brand, so the logo box was squeezed while the wordmark kept
   its width and slid under the nav links; past ~1030px the whole
   actions group ran off the right edge of the viewport.

   Fix: pin the brand so it can never be squeezed, then drop the
   two redundant pieces on the way down, cheapest first.
   ============================================================ */
/* 1. Under ~1150px the written phone number goes. The Call now
      button beside it is the same tel: link, so nothing is lost.
      The divider rule lives on .phone-link and leaves with it. */

@media (max-width:1149px){
  .header-actions .phone-link{display:none}
}
/* 2. Under ~1040px the wordmark goes and the logo mark carries
      the brand. The <a> keeps its aria-label, so the link's
      accessible name is unchanged. */

@media (max-width:1039px){
  .brand__name{display:none}
  .site-header__inner{gap:12px}
  .header-actions{gap:12px}
  .nav-link{padding-left:11px;padding-right:11px}
}
/* ============================================================
   v6 — home hero rebuild
   Goals: one clear reading column, the photo actually visible,
   proof pinned to the base of the hero, and a mobile hero that
   fits one screen. Scoped to .hero--bg so interior page heroes
   are untouched.
   ============================================================ */
/* ---- Structure: content block floats in the open space,
        proof bar sits on the floor of the hero ---- */
.hero--bg{display:flex}
.hero--bg .hero__grid{display:block}
.hero--bg .hero__grid > .hero__content{max-width:none}
/* ---- Scrim colour behind the photo. The readable gradients themselves live on
        .hero__scrim / .hero__vignette so they can sit above the <picture>. ---- */
/* ---- Align the hero copy to the header's left edge ---- */
/* ---- Headline: fewer, more even lines ---- */
/* Break control: the line break only exists on wide screens, where the
   copy would otherwise rag badly. Below that it wraps naturally, with
   "cheaper to run" glued together so it never orphans. */
.h1__br{display:none}

@media (min-width:701px){
  .h1__br{display:inline}
}
.h1--hero{
  font-size:clamp(38px,min(5.6vw,7.4vh),60px);
  line-height:1.09;
  letter-spacing:-1.9px;
  font-weight:700;
  margin-bottom:26px;
  text-wrap:normal;
  text-shadow:0 2px 30px rgba(0,10,26,.5);
}
.lede--hero{
  max-width:45ch;
  font-size:17px;
  font-weight:500;
  line-height:1.68;
  letter-spacing:.1px;
  margin-bottom:38px;
  color:#CBE1F4;
}
.hero-microcopy{
  margin:22px 0 0;
  font-size:13px;
  font-weight:600;
  letter-spacing:.15px;
  color:#B4D2EA;
}
.hero--bg .hero-note{font-size:13px;margin-bottom:28px}
.hero--bg .btn-row{gap:16px;margin-bottom:0}
/* ---- Proof bar on the floor of the hero ---- */
.hero-proof{
  position:relative;
  z-index:2;
  border-top:1px solid rgba(158,214,247,.13);
  background:linear-gradient(to top,rgba(0,10,26,.60),rgba(0,10,26,.05));
  backdrop-filter:blur(10px) saturate(130%);
  -webkit-backdrop-filter:blur(10px) saturate(130%);
}
.hero-proof__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  min-height:84px;
  gap:16px 34px;
  padding-top:17px;
  padding-bottom:17px;
}
.hero-proof__rating{
  display:inline-flex;
  color:#fff;
  font-weight:800;
  font-size:14px;
  white-space:nowrap;
  flex-direction:column;
  align-items:flex-start;
  gap:5px;
  padding:11px 20px;
  border-radius:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.20);
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset, 0 12px 28px -16px rgba(0,14,34,.95);
  backdrop-filter:blur(12px) saturate(140%);
  -webkit-backdrop-filter:blur(12px) saturate(140%);
}
.hero-proof__rating strong{font-size:15px;font-weight:800}
.hero-proof__list{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  margin:0;
  padding:0;
  list-style:none;
  gap:12px 34px;
}
.hero-proof__item{
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
  gap:10px;
  font-size:13.5px;
  font-weight:600;
  letter-spacing:.1px;
  color:#D5E7F6;
}
.hero-proof__item::before{
  content:"";
  width:18px;
  height:18px;
  flex:none;
  border-radius:50%;
  background:rgba(158,214,247,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%239ED6F7' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat;
  border:1px solid rgba(158,214,247,.4);
  display:none;
}
/* ---- Tablet / mobile ---- */

@media (max-width:900px){
  .hero-proof__inner{min-height:0;gap:14px 24px}
}

@media (max-width:700px){
  .h1--hero{
    text-wrap:normal;
    font-size:clamp(33px,8.6vw,40px);
    letter-spacing:-1.3px;
    line-height:1.08;
    margin-bottom:18px;
  }


  .lede--hero{font-size:16px;line-height:1.62;margin-bottom:30px;max-width:34ch}


  .hero--bg .hero-note{margin-bottom:22px;font-size:12.5px;padding:8px 15px 8px 12px}


  .hero-microcopy{margin-top:18px;font-size:13px;text-align:left}


  .hero-proof__inner{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px 14px;
    padding-top:14px;
    padding-bottom:14px;
  }

}
/* ---- Short phones: keep the whole hero, proof bar included, on one screen ---- */
/* ============================================================
   v7 — home hero refinement (BriteSite)

   Not a redesign. The palette, logo, navigation, airflow idea,
   living-room photo, CTA structure and proof bar all stay put.
   What changes is the craft around them: the hero background is
   split into real layers (photo / airflow / scrim / vignette)
   so the reading column can be darkened without dimming the
   room, the type scale is opened up, and the vertical rhythm is
   loosened everywhere. Scoped to .hero--bg unless noted.
   ============================================================ */
/* ---- Layer stack ---------------------------------------------------- */
.hero--bg{background-image:none;background-color:#000B1C}
.hero--bg::after{display:none}
/* superseded by .hero__scrim */
.hero__canvas{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  isolation:isolate;
  /* keeps screen-blending off the copy */
  pointer-events:none;
}
.hero__picture{display:contents}
/* ---- The room ------------------------------------------------------- */
/* Bled 2% past every edge so the drift never exposes a seam. */
.hero__photo{
  position:absolute;
  top:-2%;
  left:-2%;
  width:104%;
  height:104%;
  max-width:none;
  /* opts out of the global img{max-width:100%} */
  object-fit:cover;
  object-position:50% 40%;
  animation:heroDrift 24s ease-in-out infinite;
}
/* ---- Airflow: layered, lit, and slowly moving ------------------------ */
/* Sits under the scrim on purpose, so it dissipates as it travels left
   and never competes with the headline it is pointing at. */
.hero__airflow{position:absolute;inset:0;opacity:.95}
.hero__vent{
  position:absolute;
  left:61%;
  top:26%;
  width:min(30vw,400px);
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle, rgba(206,238,255,.40) 0%, rgba(146,208,250,.21) 32%, rgba(84,168,232,.07) 60%, transparent 76%);
  filter:blur(12px);
  mix-blend-mode:screen;
  animation:ventBreathe 8s ease-in-out infinite;
}
.hero__sheet{
  position:absolute;
  right:37%;
  top:19%;
  transform-origin:100% 22%;
  border-radius:50%;
  mix-blend-mode:screen;
  background:linear-gradient(to left, rgba(184,226,255,var(--a,.30)) 0%, rgba(132,200,247,calc(var(--a,.30) * .58)) 26%, rgba(88,168,231,calc(var(--a,.30) * .26)) 52%, rgba(62,142,212,0) 82%);
  animation:sheetDrift var(--d,17s) ease-in-out infinite;
  animation-delay:var(--t,0s);
  will-change:transform,opacity;
}
.hero__sheet--1{
  --rot:29deg;
  --a:.40;
  --d:15s;
  --t:0s;
  width:min(56vw,720px);
  height:min(18vw,215px);
  filter:blur(20px);
}
.hero__sheet--2{
  --rot:36deg;
  --a:.24;
  --d:19s;
  --t:-4s;
  width:min(62vw,800px);
  height:min(27vw,320px);
  filter:blur(38px);
}
.hero__sheet--3{
  --rot:43deg;
  --a:.15;
  --d:23s;
  --t:-8.5s;
  width:min(50vw,660px);
  height:min(33vw,390px);
  filter:blur(52px);
}
.hero__motes{position:absolute;inset:0}
.hero__motes i{
  position:absolute;
  left:var(--x);
  top:var(--y);
  width:var(--s);
  height:var(--s);
  border-radius:50%;
  background:radial-gradient(circle, rgba(232,246,255,.95) 0%, rgba(158,214,247,.38) 44%, transparent 72%);
  opacity:0;
  mix-blend-mode:screen;
  animation:moteDrift var(--d) linear var(--t) infinite;
}
/* Travels on the same 35° line as the vent flow. */
/* ---- Scrim: soft, eased, and only over the reading column ------------ */
.hero__scrim{
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(0,12,30,.90) 0%, rgba(0,12,30,.54) 9%, rgba(0,12,30,.17) 21%, rgba(0,12,30,0) 36%), linear-gradient(96deg, rgba(0,13,32,.95) 0%, rgba(0,14,35,.90) 17%, rgba(0,16,41,.79) 31%, rgba(0,19,47,.58) 44%, rgba(0,23,55,.34) 56%, rgba(0,27,63,.15) 67%, rgba(0,31,71,.04) 79%, rgba(0,34,78,0) 100%);
}
.hero__vignette{
  position:absolute;
  inset:0;
  background:radial-gradient(125% 105% at 64% 40%, transparent 40%, rgba(0,9,24,.26) 76%, rgba(0,7,20,.50) 100%);
}
/* ---- Type: one clear focus, everything else steps back --------------- */
/* Three short declaratives, one per line, at every width. Sized against
   height as well as width so it can be large on a monitor without pushing
   the proof bar off a 768px-tall laptop. */
.h1__line{display:block}
.h1__accent{color:var(--sky)}
/* Desktop framing: the extra width bleeds off the right edge, which walks
   the whole room — AC unit included — a little further from the copy. */

@media (min-width:901px){
  .site-header__inner{max-width:1400px;padding-left:28px;padding-right:28px}
  .header-actions .phone-link{margin-left:4px;padding-left:18px;border-left:1px solid var(--line)}
  .savings-grid{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-rows:auto 1fr;
    gap:30px 44px;
    max-width:none;
    margin-inline:0;
  }
  .savings-grid__intro{grid-column:1;grid-row:1}
  .savings-grid__tool{grid-column:2;grid-row:1 / span 2;align-self:start}
  .savings-grid__notes{grid-column:1;grid-row:2;align-self:start}
  .hero--bg .container{max-width:1400px;padding-left:28px;padding-right:28px}
  .hero--bg .hero__grid > .hero__content{max-width:720px}
  .hero__photo{width:112%;left:0;object-position:50% 34%}
}
/* On tall screens, weight the block just above centre — dead centre leaves
   the copy stranded halfway between the header and the proof bar. */

@media (min-height:900px){
  .hero--bg .hero__grid{padding-bottom:clamp(84px,11vh,168px)}
}
/* Height-aware, not width-aware: a 1440x800 laptop has plenty of width and
   very little height, and it is height that decides whether the proof bar
   stays on the first screen. */
.hero--bg .hero__grid{
  padding-top:clamp(38px,5.2vh,84px);
  padding-bottom:clamp(38px,5.2vh,84px);
}
/* ---- Announcement pill: softer glass, livelier dot (all pages) -------- */
.hero-note{padding:9px 18px 9px 14px;font-size:13px;font-weight:700}
/* ---- Primary CTA: same blue, more presence --------------------------- */
.hero__cta-wrap{position:relative;display:inline-flex}
.hero__cta-wrap::before{
  /* soft radial glow, the airflow's landing point */
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:210%;
  height:320%;
  transform:translate(-50%,-50%);
  z-index:-1;
  border-radius:50%;
  background:radial-gradient(closest-side, rgba(37,160,235,.34) 0%, rgba(30,140,220,.13) 52%, transparent 78%);
  filter:blur(8px);
  pointer-events:none;
}
.hero__cta{
  background:linear-gradient(135deg,#2FA9F0 0%,#0F88DD 46%,#005FAB 100%);
  padding-right:26px;
  letter-spacing:.1px;
  box-shadow:0 1px 0 rgba(255,255,255,.30) inset, 0 10px 24px -8px rgba(0,88,158,.62), 0 24px 50px -18px rgba(0,52,110,.7);
  transition:transform .38s cubic-bezier(.22,.9,.28,1), box-shadow .38s cubic-bezier(.22,.9,.28,1);
}
.hero__cta:hover{
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 1px 0 rgba(255,255,255,.34) inset, 0 14px 30px -8px rgba(0,92,164,.7), 0 30px 60px -18px rgba(0,56,116,.75);
}
.hero__cta:active{transform:translateY(0)}
.btn__arrow{
  flex:none;
  margin-left:2px;
  transition:transform .38s cubic-bezier(.22,.9,.28,1);
}
.hero__cta:hover .btn__arrow{transform:translateX(4px)}
/* ---- Secondary call: deliberately quieter ---------------------------- */
.hero__call{
  background:rgba(255,255,255,.05);
  border:1.5px solid rgba(158,214,247,.26);
  color:#D3E7F8;
  font-weight:700;
  transition:background .28s ease,border-color .28s ease,color .28s ease;
}
.hero__call:hover{
  background:rgba(158,214,247,.13);
  border-color:rgba(158,214,247,.48);
  color:#fff;
}
/* ---- Proof bar ------------------------------------------------------- */
.hero-proof__stars{display:inline-flex;gap:3px;color:var(--amber)}
.hero-proof__stars svg{
  width:14px;
  height:14px;
  filter:drop-shadow(0 1px 3px rgba(240,169,58,.5));
}
.hero-proof__rating-line{
  font-size:13px;
  font-weight:600;
  letter-spacing:.1px;
  color:#C9E0F4;
  white-space:nowrap;
}
.hero-proof__rating-line strong{font-size:17px;font-weight:800;color:#fff;letter-spacing:-.3px}
/* real icons below, not tick discs */
.hero-proof__ico{width:19px;height:19px;flex:none;color:var(--sky);opacity:.9}
/* ---- Tablet ---------------------------------------------------------- */

@media (max-width:900px){
  .hero--bg .hero__grid{padding-top:clamp(44px,6vw,68px);padding-bottom:clamp(44px,6vw,68px)}


  .hero__scrim{background:linear-gradient(to bottom, rgba(0,14,34,.70) 0%, rgba(0,15,37,.63) 34%, rgba(0,14,34,.79) 72%, rgba(0,11,28,.92)100%), linear-gradient(100deg, rgba(0,13,32,.40) 0%, rgba(0,16,40,.14) 55%, rgba(0,20,48,0) 100%)}

}
/* ---- Mobile ---------------------------------------------------------- */

@media (max-width:700px){
  .hero--bg{justify-content:flex-start}
  .hero--bg .hero__grid{margin-top:auto;margin-bottom:auto}
  /* .hero__call used to be display:none here on the assumption that
     .mobile-dock covered the call. It doesn't: the dock is
     translateY(125%) until the hero scrolls out of view, and the mobile
     header carries only the theme toggle and the menu button — so the
     first screen on a phone had no tap-to-call at all. It now stacks
     under the quote button; width:100% below handles the layout. */
  .lede__tail{display:none}
  .hero--bg .btn-row .btn{width:100%;min-height:60px;font-size:17.5px}
  .hero__call{width:100%}
  .hero-proof__rating{
    grid-column:1 / -1;
    justify-self:start;
    font-size:13px;
    flex-direction:row;
    align-items:center;
    gap:9px;
    padding:9px 15px;
    border-radius:999px;
  }
  .hero-proof__list{display:contents}
  .hero-proof__item{white-space:normal;font-size:12.5px;gap:8px}
  .hero-proof__item::before{width:16px;height:16px;background-size:10px}
  .hero__photo{width:114%;left:-8%;object-position:68% 32%}
  .h1__line, .h1__accent{display:block}
  .hero__scrim{background:linear-gradient(to bottom, rgba(0,14,34,.72) 0%, rgba(0,15,37,.66) 34%, rgba(0,14,34,.80) 70%, rgba(0,11,28,.93)100%), linear-gradient(100deg, rgba(0,13,32,.34) 0%, rgba(0,16,40,.10) 55%, rgba(0,20,48,0) 100%)}
  .hero__vignette{background:radial-gradient(140% 80% at 60% 34%, transparent 46%, rgba(0,9,24,.30) 100%)}
  .hero__airflow{opacity:.5}
  .hero__vent{left:60%;top:17%;width:52vw}
  .hero__motes{display:none}
  .hero--bg .hero__grid{padding-top:34px;padding-bottom:34px}
  .hero--bg .btn-row{gap:12px}
  .hero__cta-wrap{width:100%}
  .hero-proof__rating-line{font-size:12.5px}
  .hero-proof__rating-line strong{font-size:15px}
  .hero-proof__ico{width:17px;height:17px}
}
/* ---- Short phones: keep the proof bar on the first screen ------------- */

/* Ceiling raised 720 -> 820. Restoring .hero__call adds a 60px button plus
   a 12px gap to the stack, so viewports between 721 and 820 tall (360x740,
   360x800) started pushing the proof bar under the fold too. The values
   below are tightened to absorb those 72px. */

@media (max-width:700px) and (max-height:820px){
  .hero--bg .hero-note{margin-bottom:11px}
  .h1--hero{font-size:clamp(29px,7.8vw,34px);margin-bottom:11px}
  .lede--hero{font-size:14.5px;line-height:1.5;margin-bottom:17px}
  .hero-microcopy{margin-top:10px}
  .hero-proof__inner{gap:9px 14px;padding-top:9px;padding-bottom:9px}
  .hero--bg .hero__grid{padding-top:16px;padding-bottom:16px}
  .hero--bg .btn-row{gap:10px}
  .hero--bg .btn-row .btn{min-height:52px;font-size:16.5px}
}
/* ---- Very short phones (360x640, or a tall phone with big browser UI) --
   Spacing only, no further type reduction: the h1 is already at its
   clamp floor here and shrinking it further starts to hurt. ------------- */

@media (max-width:700px) and (max-height:660px){
  .hero--bg .hero-note{margin-bottom:9px}
  .h1--hero{margin-bottom:9px}
  .lede--hero{margin-bottom:13px}
  .hero--bg .hero__grid{padding-top:12px;padding-bottom:12px}
  .hero--bg .btn-row{gap:8px}
  .hero-proof__inner{padding-top:8px;padding-bottom:8px}
}
/* ---- Light data / light motion --------------------------------------- */

@media (prefers-reduced-data:reduce){
  .hero__picture,.hero__airflow{display:none}
  .hero--bg{background-image:var(--grad-navy)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
  .hero::after{animation:none}
  .saver__fill{transition:none}
  .hero__photo,.hero__vent,.hero__sheet,.hero-note__dot{animation:none}
  .hero__motes{display:none}
  .hero__cta:hover{transform:none}
  .hero__cta:hover .btn__arrow{transform:none}
}
/* ============================================================
   v11 — responsive correctness + accessibility pass (BriteSite)

   Additive, like every layer above it. The palette, type scale,
   spacing rhythm and all desktop layouts are untouched. Three
   things are addressed:
     1. servicing.html scrolled sideways at five viewport widths
     2. inline text links sat under the 24px tap-target minimum
     3. six stacked service cards ran the mobile page longer
        than the content warranted
   ============================================================ */
/* ---- 1. An aspect-ratio box must not force its grid track open -------
   .media-frame sets min-height:300px so a placeholder slot keeps a
   sensible footprint. As soon as .media-frame--photo adds
   aspect-ratio:4/3 that height floor resolves *backwards* into a 400px
   minimum width, and since a grid item's default min-width is auto,
   400px became the automatic minimum size of the entire column. Every
   layout offering that column less than 400px — a 390px phone, and the
   two-column band from 700px to 820px — pushed the photo past the
   viewport edge and scrolled the whole document sideways. The aspect
   ratio already governs the height, so the floor has no work left. */
/* Belt and braces for the rest of the system: no grid item here wants
   its intrinsic minimum to be able to widen the track it sits in. */
.grid > *, .ba > *{min-width:0}
/* ---- 2. Tap targets: 24px minimum (WCAG 2.2 SC 2.5.8, level AA) -----
   These are inline text links in tight flex and grid columns, so
   growing the box outright would open the spacing everywhere. Vertical
   padding supplies the hit area and an equal negative margin hands it
   back to the layout, leaving the rendered rhythm identical. Both
   values are block-axis only — nothing is added inline, so none of
   this can contribute to horizontal overflow. */
.site-footer__link, .site-footer__contact, .site-footer__credit{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding-block:3px;
  margin-block:-3px;
}
/* The stat band has room to spare, so this one just grows. */
.stat a{display:inline-flex}
/* ---- 3. Mobile service cards: badge beside the title ----------------
   Stacked badge-over-title spends roughly 65px of vertical space per
   card, six times over on the homepage. Moving the badge left of the
   heading keeps every element at its existing size, reads faster in a
   thumb scan, and shortens the section by about 400px. Grid rather
   than flex so the badge can span the title and body rows without
   touching the markup on any of the eight pages. */

@media (max-width:560px){
  .grid--contact{grid-template-columns:1fr}
  .brands{padding:40px var(--gutter)}
  .brands__item{height:46px;padding:0 6px}
  .brands__logo--samsung{max-height:19px}
  .brands__logo--hisense{max-height:20px}
  .brands__logo--daikin{max-height:23px}
  .brands__logo--gree{max-height:24px}
  .brands__logo--midea{max-height:31px}
  .brands__logo--lg{max-height:32px}
  .sizer__result{flex-direction:column;align-items:flex-start}
  .sizer__result .btn{width:100%}
  .btn-row .btn{flex:1 1 auto}
  .service-card{
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    column-gap:14px;
    row-gap:10px;
    align-items:start;
  }
  .service-card__icon{grid-column:1;grid-row:1 / span 2;--icon-size:48px;align-self:start}
  .service-card h3{
    grid-column:2;
    min-height:48px;
    /* matches the badge, so a one-line title centres against it */
    display:flex;
    align-items:center;
  }
  .service-card p, .service-card__link{grid-column:2}
  .service-card__link{margin-top:2px}
}
/* ---- 4. Auto-fit tracks must never exceed the space available --------
   Every one of these grids declared a fixed floor — minmax(300px,1fr)
   and friends. On a 320px phone the container's content box is 280px,
   so a 300px floor produced a 300px track inside a 280px box: the card
   spilled 20px into the right-hand gutter and sat flush against the
   screen edge. min(Xpx,100%) caps the floor at the container width, so
   the intended breakpoint behaviour is unchanged at every width where
   the floor actually fits, and narrow phones simply get a single track
   that respects the gutter. */
.grid--2{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))}
.grid--steps{grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
.grid--steps-4{grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}
.grid--gallery{grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
.grid--gallery-sm{grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}
.grid--split{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.ba{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.hero__grid{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.site-footer__grid{grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}
/* ---- 5. The rating pill must not be clipped on small phones ----------
   .hero-proof__rating-line is white-space:nowrap, and at 320-360px the
   five stars plus "4.9 from 87 Google reviews" measure wider than the
   280px container. Because .hero sets overflow:hidden the pill was
   being cut off rather than scrolling the page — quietly losing the
   review count on the narrowest phones, which is the one number in the
   hero doing the most persuading. Letting the line wrap keeps every
   word on screen; the stars are pinned so they can't squash. */

@media (max-width:380px){
  .hero-proof__rating{max-width:100%;align-items:flex-start;padding:8px 13px}
  .hero-proof__stars{flex:none;margin-top:2px}
  .hero-proof__rating-line{white-space:normal;line-height:1.35}
}
/* ---- 6. "Learn more" hit area ----------------------------------------
   The whole service card is already clickable (.service-card__link
   carries an inset ::before overlay), so this is belt and braces for
   the visible link itself. Only margin-bottom is touched — margin-top
   stays auto so the link keeps sitting on the card's baseline. */
.service-card__link{margin-bottom:-2px}
/* ============================================================
   v12 — layout, spacing and interior-hero pass (BriteSite)

   The homepage hero (.hero--bg and everything scoped to it) is
   deliberately untouched. Everything below is either a revival
   of a spacing modifier that was silently dead, or rhythm work
   on the seven interior page heroes.
   ============================================================ */
/* ---- 1. Revive eight modifiers that were being cancelled out ---------
   The "Section/spacing modifiers" block sits at the top of the file, at
   lines 151-165 — above the .h1, .h2, .sub, .note, .btn and .btn-row
   definitions it was meant to modify. Every one of those selectors is a
   single class, so with equal specificity the *later* base rule won and
   the modifier did nothing at all. Measured, before this block:

     .h1--sub                wanted 46px  ->  rendered 52px
     .h2--para               wanted 16px  ->  rendered 28px
     .h2--intro              wanted 14px  ->  rendered 28px
     .sub--compact           wanted 18px  ->  rendered  0px
     .btn-row--cta           wanted 36px  ->  rendered 24px
     .btn--submit            wanted 52px  ->  rendered 48px
     .note--strong          wanted 14.5px ->  rendered 13.5px
     .site-footer__col--main wanted 10px  ->  rendered  9px

   Same declarations, just late enough in the cascade to apply. The
   originals are left in place so the file still reads top to bottom. */
/* Interior page headline: a deliberate step down from the homepage's
   60px, and it lets the 22ch measure actually bite — at 52px the cap
   worked out wider than the column, so headlines ran the full 780px
   edge to edge with a poor rag. */
.h1--sub{font-size:clamp(30px,5vw,46px)}
/* Headings that introduce a paragraph or a chip row bind to it. */
.h2--para{margin-bottom:16px}
.h2--intro{margin-bottom:14px}
.sub--compact{margin:18px 0 22px;font-size:14.5px}
.note--strong{font-size:14.5px;font-weight:600}
/* Buttons need clear air before the form that follows them, and the
   submit button should match the 52px of every other paired action. */
.btn-row--cta{margin-bottom:36px}
.btn--submit{min-height:52px}
.site-footer__col--main{gap:10px}
/* ---- 2. Interior hero rhythm ----------------------------------------
   Scoped to .hero__single, which the homepage does not use.

   The old stack ran note -> 26px -> eyebrow -> 16px -> h1, so the two
   small labels sat almost equidistant and the eyebrow read as loose
   punctuation rather than as a label belonging to the headline. The
   eyebrow now hugs the h1 and the announcement pill separates as its
   own layer above them. The headline also gets real air beneath it,
   and the trust pills separate from the buttons. */
.hero__single .hero-note{margin-bottom:30px}
.hero__single .h1{margin-bottom:22px}
.hero__single .lede{margin-bottom:32px}
.hero__single .btn-row{margin-bottom:30px}
/* Padding scales with viewport height, the same way the homepage hero
   sizes itself, so a tall monitor gets presence and a short laptop or
   phone does not have to scroll past dead space. */
/* ---- 3. Two blocks that never got the mobile padding reduction -------
   @media (max-width:900px) takes .section down from 72px to 56px, but
   .cta__inner (72/80) and .stat (76/76) set their padding directly and
   were never included. On a phone every band was breathing at 56px
   while those two stayed at 72-80, so both read as unexplained dead
   space in the middle of an otherwise even rhythm. */

@media (max-width:900px){
  :root{
    /* Header shrinks to 64px and the topbar wraps to two lines on narrow screens. */
    --header-h:64px;
    --topbar-h:0px;
  }
  .section{padding-top:56px;padding-bottom:56px}
  .hero__grid{padding-top:48px;padding-bottom:64px}
  .brand__logo{height:38px}
  .site-header__inner{height:64px}
  .trustbar__inner{gap:10px 22px}
  html{scroll-padding-top:74px}
  .to-top{
    right:16px;
    bottom:calc(86px + env(safe-area-inset-bottom));
    width:44px;
    height:44px;
  }
  .hero-proof__list{gap:10px 24px}
  .cta__inner{padding-top:56px;padding-bottom:64px}
  .stat{padding-top:56px;padding-bottom:56px}
}
/* ---- 4. Interior hero: pair the two CTAs properly on a phone --------
   Below 600px the Call and WhatsApp buttons wrap onto separate lines,
   and because one is .btn--lg (63px) and the other .btn--pair (54px)
   they stacked at mismatched heights and mismatched widths. The
   homepage hero already normalises its pair this way; this gives the
   interior heroes the same treatment without touching that rule. */

@media (max-width:600px){
  .hero-note__long{display:none}
  .hero-note__short{display:inline}
  .hero-trust{gap:8px 10px;margin-top:18px}
  .hero-trust__item--wide{display:none}
  .hero-trust__reviews{font-size:13px;padding:7px 13px}
  .saver{padding:22px 18px}
  .saver__result{padding:14px 16px}
  .hero__single .hero-note{margin-bottom:22px}
  .hero__single .eyebrow{margin-bottom:8px}
  .hero__single .h1{margin-bottom:16px}
  .hero__single .lede{margin-bottom:26px}
  .hero__single .btn-row{margin-bottom:24px;gap:12px}
  .hero__single .btn-row .btn{width:100%;min-height:56px;padding:14px 22px;font-size:16.5px}
}

/* ---------- Keyframes ---------- */
@keyframes menuIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.55)} 50%{box-shadow:0 0 0 7px rgba(255,255,255,0)}}
@keyframes drift{from{transform:translateX(-24px)} to{transform:translateX(24px)}}
@keyframes slotSweep{0%,18%{transform:translateX(-130%)} 60%,100%{transform:translateX(130%)}}
@keyframes heroDrift{0%,100%{transform:translate3d(0,0,0) scale(1)} 50% {transform:translate3d(-.45%,-.6%,0) scale(1.014)}}
@keyframes ventBreathe{0%,100%{opacity:.72;transform:translate(-50%,-50%) scale(1)} 50% {opacity:1; transform:translate(-50%,-50%) scale(1.09)}}
@keyframes sheetDrift{0%,100%{transform:rotate(var(--rot)) translate3d(0,0,0) scaleY(1); opacity:.62} 50% {transform:rotate(var(--rot)) translate3d(-3%,1.2%,0) scaleY(1.07);opacity:1}}
@keyframes moteDrift{0% {transform:translate3d(0,0,0) scale(.65);opacity:0} 14% {opacity:.8} 68% {opacity:.42} 100%{transform:translate3d(-340px,238px,0) scale(1.2);opacity:0}}
@keyframes dotPulse{0% {box-shadow:0 0 0 0 rgba(79,221,155,.55);opacity:1} 70% {box-shadow:0 0 0 7px rgba(79,221,155,0); opacity:.8} 100%{box-shadow:0 0 0 0 rgba(79,221,155,0); opacity:1}}