/* Quicksand is hosted on this site (no third-party font request), so it always loads. */
@font-face{font-family:'Quicksand';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/quicksand-400.ttf') format('truetype');}
@font-face{font-family:'Quicksand';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/quicksand-500.ttf') format('truetype');}
@font-face{font-family:'Quicksand';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/quicksand-600.ttf') format('truetype');}
@font-face{font-family:'Quicksand';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/quicksand-700.ttf') format('truetype');}

/* ==========================================================================
   FROSTAC, design system
   Tokens are canonical, from AGENTS.md §1. Type scale is §2.
   Geometry: soft, rounded, elevated. Cards and media sit above the page on a
   real shadow with a generous radius; full-bleed bands (hero, CTA, footer)
   stay flat-edged the way the reference sites keep theirs. Nothing is
   diagonally cut — depth is carried by radius, shadow and the brand gradient.
   Mobile-first: base rules are the small-screen case, media queries add up.
   ========================================================================== */

:root{
  /* Core palette, sampled pixel by pixel from the logo artwork.
     --cyan and --blue are the two ends of the top wing's gradient; --blue is
     also the tagline colour. --navy is the lower wing and the wordmark. */
  --navy:      #001338;
  --navy-2:    #00204A;   /* gradient partner, the wing's lighter upper end */
  --blue:      #0067FD;   /* fills, bars, icons */
  --blue-600:  #0050D2;   /* small text on light grounds, and button hover */
  --cyan:      #00BCEE;   /* gradient partner only, never a solid large fill */

  /* Neutrals, tinted toward the navy rather than a neutral grey */
  --white:     #FFFFFF;
  --mist:      #F2F6FC;
  --line:      #DCE5F1;
  --slate:     #566880;
  --ink:       #001338;

  /* Signature gradient (the logo's top wing) */
  --grad-flow: linear-gradient(135deg, #00BCEE 0%, #0067FD 100%);

  /* Type: Quicksand everywhere, one rounded, friendly voice site-wide. */
  --font-brand:'Quicksand', system-ui, sans-serif;
  --font-display:'Quicksand', system-ui, sans-serif;
  --font-body:'Quicksand', system-ui, sans-serif;

  /* Scale & rhythm */
  --maxw: 1240px;
  /* One radius family, used everywhere so every card, button and photo
     belongs to the same system. */
  --radius-sm: 12px;    /* chips, small buttons */
  --radius: 18px;       /* buttons, form fields */
  --radius-lg: 22px;    /* cards, tiles */
  --radius-xl: 28px;    /* hero/section media, callouts */
  /* What the current band is painted in, kept for components that read it. */
  --surface: var(--white);
  --card: var(--mist);
  --space: clamp(84px, 9.5vw, 160px);
  --gutter: clamp(22px, 4vw, 44px);

  /* Derived from the palette above. Alpha only, no new hues. */
  --ink-06: rgba(0,19,56,.06);
  --blue-tint: rgba(0,103,253,.07);
  --on-navy: rgba(255,255,255,.74);
  --on-navy-dim: rgba(255,255,255,.58);   /* raised for AA on 11px uppercase */
  --navy-line: rgba(255,255,255,.16);

  --shadow: 0 18px 44px rgba(0,19,56,.12);
  --shadow-lg: 0 34px 90px rgba(0,19,56,.24);
  --ease: cubic-bezier(.16,1,.3,1);

  color-scheme: light;
}
/* The brand is a single light palette (§1), so the page commits to one world. */
:root[data-theme="dark"], :root[data-theme="light"]{ color-scheme: light; }

/* ---- Base ---------------------------------------------------------------- */
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--white); color:var(--ink);
  font-family:var(--font-body); font-size:16px; font-weight:400; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:var(--blue-600); text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
p{ margin:0; }
button{ font:inherit; color:inherit; }

/* Headings: Quicksand, rounded and friendly, no italic (the face has none). */
h1,h2,h3,h4{
  font-family:var(--font-brand); color:var(--ink);
  margin:0; line-height:1.1; letter-spacing:-.01em; text-wrap:balance;
}
h1{ font-size:clamp(42px,6.4vw,82px); font-weight:700; letter-spacing:-.028em; line-height:1.04; }
h2{ font-size:clamp(30px,4.4vw,56px); font-weight:700; letter-spacing:-.022em; line-height:1.06; }
h3{ font-size:21px; font-weight:600; letter-spacing:-.008em; }
h4{ font-size:16px; font-weight:600; letter-spacing:0; }
@media (min-width:641px){ body{ font-size:17px; } h3{ font-size:23px; } h4{ font-size:17px; } }

:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }
.statement :focus-visible, .assess :focus-visible,
.site-footer :focus-visible, .hero :focus-visible{ outline-color:var(--cyan); }
::selection{ background:rgba(0,103,253,.16); }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--blue); color:var(--white); padding:12px 18px;
  font-family:var(--font-display); font-weight:600;
}
.skip-link:focus{ left:0; }

/* ---- Layout -------------------------------------------------------------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.band{ padding-block:var(--space); }
.band--mist{ background:var(--mist); --surface:var(--mist); --card:var(--white); }
.band--tight{ padding-block:calc(var(--space) * .6); }
.band--flush{ padding-block:0; }

/* Section opener: label, heading, and a supporting line, ruled off at the top. */
.opener{
  display:flex; flex-direction:column; align-items:center; gap:18px; text-align:center;
  max-width:800px; margin-inline:auto; margin-bottom:clamp(40px,6vw,72px);
}
.opener__lede{ font-size:18px; line-height:1.55; color:var(--slate); max-width:60ch; }
@media (min-width:861px){ .opener__lede{ font-size:21px; } }
/* Left-aligned variant, where a heading sits beside its own content. */
.opener--left{ align-items:flex-start; text-align:left; margin-inline:0; }

.label{
  display:inline-block; font-family:var(--font-display); font-weight:700;
  font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--blue-600);
}
.label--rev{ color:var(--cyan); }
/* Every section eyebrow site-wide picks up the brand gradient as text, with a
   solid-colour fallback first for browsers that can't clip text to a fill. */
@supports (background-clip:text) or (-webkit-background-clip:text){
  .label{ background:var(--grad-flow); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .label--rev{ background:linear-gradient(120deg, var(--cyan) 0%, var(--white) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
}
.lede{ font-size:18px; line-height:1.55; color:var(--slate); max-width:56ch; }
@media (min-width:861px){ .lede{ font-size:21px; } }
.muted{ color:var(--slate); }
.small{ font-size:14px; }
.num{ font-variant-numeric:tabular-nums; }
.note-under{ margin-top:20px; }
.opener--spaced{ margin-top:clamp(48px,6vw,80px); }

/* ---- Buttons: rounded, elevated, one shared shape ------------------------ */
.btn{
  position:relative; border:0; border-radius:var(--radius);
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--font-display); font-weight:600; font-size:15px; line-height:1;
  padding:17px 27px; cursor:pointer; text-align:center;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), background .22s var(--ease), color .22s var(--ease);
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn svg{ width:16px; height:16px; flex:none; }
.btn--solid{ background:var(--grad-flow); color:var(--white); box-shadow:0 12px 28px rgba(0,103,253,.3); }
.btn--solid:hover{ box-shadow:0 18px 38px rgba(0,103,253,.4); }
.btn--line{ background:var(--white); color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--line); }
.btn--line:hover{ box-shadow:inset 0 0 0 1.5px var(--blue); color:var(--blue-600); }
.btn--rev{ background:rgba(255,255,255,.1); color:var(--white); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5); }
.btn--rev:hover{ background:var(--white); color:var(--navy); box-shadow:inset 0 0 0 1.5px var(--white); }
.btn--block{ width:100%; }
@media (min-width:641px){ .btn{ font-size:16px; } }

/* ---- Masthead: a slim frosted bar with full-width submenus ---------------
   The bar stays quiet and out of the way; the submenu is where the depth is.
   Panels are full width, laid out in columns, and open beneath the bar with a
   dimmed, blurred page behind them. */

.masthead{
  position:sticky; top:0; z-index:80;
  background:color-mix(in srgb, var(--white) 82%, transparent);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  box-shadow:0 0 0 rgba(0,19,56,0);
  transition:box-shadow .25s var(--ease);
}
/* A gradient hairline instead of a flat grey border — the same device used
   to bookend the footer below, so header and footer read as one pair. */
.masthead::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--grad-flow);
}
/* Lifts off the page once there is something to lift off, so it reads as
   grounded on every page rather than permanently floating. */
.masthead--scrolled{ box-shadow:0 10px 30px rgba(0,19,56,.1); }
.masthead__inner{ display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:84px; padding-block:10px; }
.masthead .logo img{ height:64px; width:auto; display:block; }

.mainnav{ display:none; }
.mainnav__list{ display:flex; align-items:center; gap:2px; }
.mainnav__link{
  border:0; background:none; cursor:pointer; color:var(--ink); border-radius:var(--radius);
  font-family:var(--font-display); font-weight:700; font-size:18px; letter-spacing:-.005em;
  padding:13px 20px; position:relative; display:inline-flex; align-items:center; gap:7px;
  transition:color .22s var(--ease), background .22s var(--ease), transform .22s var(--ease);
}
.mainnav__link svg{ width:14px; height:14px; opacity:.5; transition:transform .25s var(--ease), opacity .22s var(--ease); }
.mainnav__link[aria-expanded="true"] svg{ transform:rotate(180deg); opacity:1; }
.mainnav__link::after{
  content:""; position:absolute; left:18px; right:18px; bottom:6px; height:2.5px; border-radius:2px;
  background:var(--grad-flow); transform:scaleX(0); transform-origin:left;
  transition:transform .35s var(--ease);
}
.mainnav__link:hover, .mainnav__link[aria-expanded="true"]{
  color:var(--blue-600); background:var(--mist); transform:translateY(-1px);
}
.mainnav__link:hover svg, .mainnav__link[aria-expanded="true"] svg{ opacity:1; }
.mainnav__link[aria-expanded="true"]::after{ transform:scaleX(1); }

.masthead__actions{ display:flex; align-items:center; gap:12px; flex:none; }
.btn--sm{ border-radius:var(--radius-sm); padding:13px 24px; font-size:14.5px; }
@media (min-width:1025px){ .btn--sm{ padding:15px 28px; font-size:15.5px; } }

.burger{
  display:flex; width:40px; height:40px; margin-right:calc(var(--gutter) * -.3);
  border:0; background:none; cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:6px;
}
.burger span{ width:19px; height:1.5px; background:var(--ink); transition:transform .3s var(--ease), opacity .2s; }
.burger.open span:nth-child(1){ transform:translateY(3.75px) rotate(45deg); }
.burger.open span:nth-child(2){ transform:translateY(-3.75px) rotate(-45deg); }

/* Submenu ---------------------------------------------------------------- */
/* A floating, rounded card rather than a flush bar: it drops and scales in
   with a soft shadow, reading as a deliberate piece of UI instead of a flap
   of the header. */
.submenu{ position:absolute; left:0; right:0; top:100%; z-index:79; pointer-events:none; }
.submenu[hidden]{ display:none; }
.submenu.is-open{ pointer-events:auto; }
.submenu__inner{
  display:grid; gap:36px; padding:clamp(30px,4vw,48px);
  margin-top:10px; background:var(--white); border-radius:var(--radius-xl);
  box-shadow:var(--shadow-lg); border:1px solid var(--line);
  transform-origin:top center; opacity:0; transform:translateY(-16px) scale(.97);
  transition:opacity .3s var(--ease), transform .4s var(--ease);
}
.submenu.is-open .submenu__inner{ opacity:1; transform:translateY(0) scale(1); }
.submenu__lead{
  display:flex; flex-direction:column; gap:8px; padding:26px 26px 24px;
  background:var(--mist); color:var(--ink); border-radius:var(--radius-lg);
  transition:background .25s var(--ease), box-shadow .25s var(--ease);
}
.submenu__lead:hover{ background:var(--line); box-shadow:var(--shadow); }
.submenu__lead-eyebrow{
  font-family:var(--font-display); font-size:11px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--blue-600);
}
.submenu__lead-title{
  font-family:var(--font-brand); font-weight:700;
  font-size:26px; line-height:1.1; letter-spacing:-.015em;
}
.submenu__lead-note{ font-size:15px; color:var(--slate); }
.submenu__lead-go{
  margin-top:6px; font-family:var(--font-display); font-weight:600; font-size:14px; color:var(--blue-600);
}
.submenu__cols{ display:grid; gap:28px 36px; grid-template-columns:repeat(2,minmax(0,1fr)); }
.submenu__title{
  font-family:var(--font-display); font-size:11px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--slate); margin-bottom:14px;
}
.submenu__col li{ margin-bottom:11px; }
.submenu__col a{
  display:inline-block; font-family:var(--font-display); font-weight:500; font-size:16px; color:var(--ink);
  transition:color .18s var(--ease), transform .18s var(--ease);
}
.submenu__col a:hover, .submenu__col a[aria-current="page"]{ color:var(--blue-600); transform:translateX(4px); }

.masthead__scrim{
  position:fixed; inset:0; z-index:78; background:rgba(0,19,56,.28);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility .3s;
}
.masthead__scrim.open{ opacity:1; visibility:visible; }

@media (min-width:1025px){
  .masthead__inner{ min-height:108px; }
  .masthead .logo img{ height:88px; }
  .burger{ display:none; }
  .mainnav{ display:block; margin-inline:auto; }
  .submenu__inner{ grid-template-columns:minmax(0,.9fr) minmax(0,2fr); gap:56px; }
  .submenu__cols{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}

/* Mobile drawer ---------------------------------------------------------- */
.drawer{
  position:fixed; inset:0 0 0 auto; width:min(92vw,420px); z-index:95;
  background:var(--white); border-left:1px solid var(--line);
  transform:translateX(100%); transition:transform .34s var(--ease);
  display:flex; flex-direction:column; padding:16px var(--gutter) 40px; overflow-y:auto;
}
.drawer.open{ transform:translateX(0); }
.acc{ border-bottom:1px solid var(--line); }
.acc__top{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
  border:0; background:none; cursor:pointer; text-align:left;
  font-family:var(--font-brand); font-weight:600; font-size:19px;
  color:var(--ink); padding:18px 0;
}
.acc__mark{ position:relative; width:14px; height:14px; flex:none; }
.acc__mark::before, .acc__mark::after{ content:""; position:absolute; background:var(--blue); transition:transform .3s var(--ease); }
.acc__mark::before{ left:0; right:0; top:50%; height:1.5px; margin-top:-.75px; }
.acc__mark::after{ top:0; bottom:0; left:50%; width:1.5px; margin-left:-.75px; }
.acc__top[aria-expanded="true"] .acc__mark::after{ transform:rotate(90deg); }
.acc__body{ padding-bottom:14px; }
.acc__body[hidden]{ display:none; }
.acc__title{
  font-family:var(--font-display); font-size:10px; font-weight:600; letter-spacing:.22em;
  text-transform:uppercase; color:var(--slate); margin:10px 0 6px;
}
.acc__body a{
  display:block; font-family:var(--font-display); font-weight:500; font-size:16px;
  color:var(--ink); padding:9px 0;
}
.drawer__foot{ display:flex; flex-direction:column; gap:10px; margin-top:26px; }
.drawer__scrim{
  position:fixed; inset:0; z-index:90; background:rgba(0,19,56,.6);
  opacity:0; visibility:hidden; transition:opacity .25s;
}
.drawer__scrim.open{ opacity:1; visibility:visible; }

/* ---- Hero: static split layout — headline, copy and CTAs beside one photo,
   no slider. Matches the pattern shared by every reference site (Ozcoast,
   Quick Freight Line, Ares Energy, SunRight Solar): a light hero band, not a
   full-bleed dark banner, with the photo contained to its own panel. */
.hero{ position:relative; overflow:hidden; padding-block:clamp(48px,7vw,104px); }
.hero__grid{ position:relative; z-index:1; display:grid; gap:clamp(30px,5vw,56px); align-items:center; }
.hero__content{ display:flex; flex-direction:column; align-items:flex-start; gap:18px; }
.hero__content h1{ max-width:16ch; }
.hero__lede{ font-size:19px; line-height:1.55; color:var(--slate); max-width:52ch; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:6px; }
.hero__actions .btn{ flex:1 1 auto; }
.hero__media{ position:relative; overflow:hidden; aspect-ratio:4/3; background:var(--mist); border-radius:var(--radius-xl); box-shadow:var(--shadow-lg); }
@media (min-width:641px){ .hero__lede{ font-size:21px; } .hero__actions .btn{ flex:0 0 auto; } }
@media (min-width:861px){
  .hero__grid{ grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); }
}

/* Ambient brand-gradient glow: Frostac's signature ambient device, reused on
   every navy band site-wide (hero, closing CTA, 404) so the whole site reads
   as one system rather than a one-off homepage flourish. Drop
   <span class="glow-orbs" aria-hidden="true"></span> into any
   position:relative; overflow:hidden surface. */
.glow-orbs{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.glow-orbs::before, .glow-orbs::after{
  content:""; position:absolute; border-radius:50%; background:var(--grad-flow);
  filter:blur(64px); opacity:.7;
}
.glow-orbs::before{ width:clamp(260px,32vw,520px); height:clamp(260px,32vw,520px); top:-20%; right:-10%; }
.glow-orbs::after{ width:clamp(210px,26vw,420px); height:clamp(210px,26vw,420px); bottom:-26%; left:4%; opacity:.48; }
@media (min-width:1025px){
  .glow-orbs::before{ animation:fs-float 10s var(--ease) infinite; }
  .glow-orbs::after{ animation:fs-float 13s var(--ease) infinite reverse; }
}
@keyframes fs-float{ 0%,100%{ transform:translate3d(0,0,0); } 50%{ transform:translate3d(0,-22px,0); } }
@media (prefers-reduced-motion:reduce){ .glow-orbs::before, .glow-orbs::after{ animation:none; } }

/* ---- Service ribbon: a quiet, continuous motion band naming the real
   service range (Residential + Commercial only — see index.php), sitting
   between the banner and the brand statement. A static "What We Install"
   chip anchors the left edge so the scroll reads as a labelled list, not
   just motion; the track itself stays aria-hidden since every item already
   exists as a real nav link. -------------------------------------------- */
.ribbon{ position:relative; z-index:2; overflow:hidden; background:linear-gradient(120deg, var(--navy) 0%, var(--navy-2) 100%); }
.ribbon__inner{ display:flex; align-items:stretch; }
.ribbon__label{
  flex:0 0 auto; min-width:0; display:none; align-items:center; gap:8px;
  padding:14px 22px 14px 0; margin-right:22px; border-right:1px solid rgba(255,255,255,.18);
  font-family:var(--font-display); font-weight:700; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--cyan); white-space:nowrap;
}
.ribbon__label svg{ width:14px; height:14px; flex:none; }
@media (min-width:541px){ .ribbon__label{ display:flex; } }
.ribbon__track{
  flex:1 1 auto; min-width:0; overflow:hidden; display:flex; gap:10px; padding-block:14px;
}
.ribbon__track__scroll{
  display:flex; gap:10px; width:max-content; flex:none;
  animation:fs-ribbon 36s linear infinite;
}
.ribbon:hover .ribbon__track__scroll, .ribbon:focus-within .ribbon__track__scroll{ animation-play-state:paused; }
.ribbon__item{
  flex:none; display:inline-flex; align-items:center; gap:8px; padding:9px 18px 9px 14px;
  background:rgba(255,255,255,.08); color:var(--white);
  border:1px solid rgba(255,255,255,.16); white-space:nowrap; border-radius:999px;
  font-family:var(--font-display); font-weight:600; font-size:12.5px; letter-spacing:.015em;
  transition:background .2s var(--ease), border-color .2s var(--ease);
}
.ribbon__item svg{ width:13px; height:13px; color:var(--cyan); flex:none; }
.ribbon__item--dup{ } /* exact duplicate of the first pass, offsets the -50% loop */
@keyframes fs-ribbon{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (min-width:641px){ .ribbon__item{ padding:10px 22px 10px 16px; font-size:13.5px; } }

/* A hard edge where the scroller is clipped looks unfinished; fade the
   right edge into the band's own colour (the clip happens on .ribbon,
   which is full-bleed, not on the max-width .wrap inside it, so this
   anchors to .ribbon itself). The left edge doesn't need it: the static
   label sits there and the track starts clean right after it. */
.ribbon::after{
  content:""; position:absolute; top:0; right:0; bottom:0; width:64px; z-index:1; pointer-events:none;
  background:linear-gradient(90deg, transparent 0%, var(--navy-2) 100%);
}
@media (prefers-reduced-motion:reduce){
  .ribbon__track{ overflow-x:auto; }
  .ribbon__track__scroll{ animation:none; width:auto; }
  .ribbon__item--dup{ display:none; }
}

/* ---- Key figures: a quiet ruled row under the banner -------------------- */
.metrics{
  display:grid; gap:1px; background:var(--line);
  border-block:1px solid var(--line);
}
.metric{
  background:var(--white); padding:30px 24px; text-align:center;
  display:flex; flex-direction:column; gap:8px;
}
.metric__v{
  font-family:var(--font-brand); font-weight:700;
  font-size:30px; line-height:1; letter-spacing:-.025em; color:var(--ink);
  font-variant-numeric:tabular-nums;
}
@supports (background-clip:text) or (-webkit-background-clip:text){
  .metric__v, .install__fig b{
    background:var(--grad-flow); -webkit-background-clip:text; background-clip:text; color:transparent;
  }
}
.metric__k{ font-size:14px; line-height:1.45; color:var(--slate); }
@media (min-width:641px){ .metrics{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1025px){
  .metrics{ grid-template-columns:repeat(4,1fr); }
  .metric{ padding:38px 26px; }
  .metric__v{ font-size:38px; }
}

/* ---- Editorial split ----------------------------------------------------- */
.split{ display:grid; gap:clamp(28px,5vw,64px); align-items:center; }
.split__copy{ display:flex; flex-direction:column; align-items:flex-start; gap:20px; }
.split__media{ position:relative; overflow:hidden; aspect-ratio:3/2; background:var(--mist); }
@media (min-width:861px){
  .split{ grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); }
  .split--flip .split__media{ order:-1; }
}

/* Hairline spec rows, used instead of a bullet list. */
.specs{ width:100%; border-top:1px solid var(--line); }
.specs li{ display:grid; gap:4px; padding-block:18px; border-bottom:1px solid var(--line); }
.specs b{ font-family:var(--font-display); font-weight:600; font-size:16px; color:var(--ink); }
.specs span{ font-size:15px; color:var(--slate); }
@media (min-width:641px){
  .specs li{ grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr); gap:8px 32px; align-items:baseline; }
}

/* ---- Card grid: rounded, elevated tiles ----------------------------------
   Every tile across the site (product cards, process steps, install tiles)
   shares one card shape: soft frost-tinted fill, a real shadow at rest, and a
   lift on hover, so the grids read as a deliberately designed surface rather
   than flat colour blocks or sharp-cut panels. */
.cards{ display:grid; gap:18px; }
.cell, .step, .install{
  background:linear-gradient(165deg, var(--card) 0%, color-mix(in srgb, var(--cyan) 7%, var(--card) 93%) 100%);
  border:1px solid rgba(0,103,253,.1); border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow); transition:transform .32s var(--ease), box-shadow .32s var(--ease);
}
.cell{
  position:relative; padding:26px 24px;
  display:flex; flex-direction:column; gap:12px;
}
.cell::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:linear-gradient(180deg, var(--cyan) 0%, var(--blue) 100%);
  transform:scaleY(0); transform-origin:top; transition:transform .4s var(--ease);
}
a.cell:hover, .step:hover, .install:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
a.cell:hover::before{ transform:scaleY(1); }
.cell__ico{
  width:52px; height:52px; display:grid; place-items:center; flex:none; color:var(--blue);
  background:linear-gradient(150deg, color-mix(in srgb, var(--cyan) 16%, transparent) 0%, color-mix(in srgb, var(--blue) 12%, transparent) 100%);
  border-radius:var(--radius-sm); transition:transform .32s var(--ease), background .32s var(--ease);
}
.cell__ico svg{ width:24px; height:24px; }
a.cell:hover .cell__ico{ transform:scale(1.08) rotate(-4deg); background:var(--grad-flow); color:var(--white); }
.cell__tag{
  font-family:var(--font-display); font-size:11px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--slate);
}
.cell p{ font-size:15px; color:var(--slate); }
.cell__more{
  position:relative; align-self:flex-start; margin-top:auto; padding-top:8px;
  font-family:var(--font-display); font-weight:600; font-size:14px;
  color:var(--blue-600); letter-spacing:.02em;
}
.cell__more::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:left; transition:transform .38s var(--ease);
}
a.cell:hover .cell__more::after{ transform:scaleX(1); }
@media (min-width:641px){ .cards{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; } }
@media (min-width:1025px){
  .cards{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
  .cell{ padding:44px 40px; gap:14px; }
  .cell--wide{ grid-column:span 2; }
}

/* ---- Reasons: index numerals against hairline rows ---------------------- */
.why{ display:grid; gap:clamp(28px,5vw,72px); align-items:start; }
.why__head{ display:flex; flex-direction:column; align-items:flex-start; gap:18px; }
.why__list{ border-top:1px solid var(--line); }
.why__item{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px 20px; padding-block:24px; border-bottom:1px solid var(--line); }
.why__n{
  font-family:var(--font-brand); font-weight:700; font-size:15px;
  color:var(--blue-600); font-variant-numeric:tabular-nums; padding-top:5px;
}
.why__item h3{ margin-bottom:7px; }
.why__item p{ color:var(--slate); font-size:15px; }
@media (min-width:861px){
  .why{ grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr); }
  .why__head{ position:sticky; top:110px; }
  .why__item{ padding-block:28px; gap:6px 28px; }
  .why__item p{ font-size:16px; }
}

/* ---- Process rail -------------------------------------------------------- */
.steps{ display:grid; gap:14px; }
.step{
  padding:30px 26px; display:flex; flex-direction:column;
  align-items:center; text-align:center; gap:12px;
}
.step__ico{
  width:52px; height:52px; display:grid; place-items:center; color:var(--blue);
  background:linear-gradient(150deg, color-mix(in srgb, var(--cyan) 16%, transparent) 0%, color-mix(in srgb, var(--blue) 12%, transparent) 100%);
  border-radius:var(--radius-sm); transition:transform .32s var(--ease), background .32s var(--ease);
}
.step__ico svg{ width:24px; height:24px; }
.step:hover .step__ico{ transform:scale(1.08) rotate(-4deg); background:var(--grad-flow); color:var(--white); }
.step__n{
  font-family:var(--font-display); font-weight:600; font-size:11px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--slate);
}
.step p{ font-size:15px; color:var(--slate); }
@media (min-width:641px){ .steps{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; } }
@media (min-width:1025px){ .steps{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; } .step{ padding:32px 28px; } }

/* ---- Recent work: flush tiles with caption bars ------------------------- */
.installs{ display:grid; gap:14px; }
.install{ margin:0; display:flex; flex-direction:column; }
.install__shot{ aspect-ratio:3/2; background:var(--mist); }
.install__body{ padding:20px 22px 24px; display:flex; flex-direction:column; gap:10px; flex:1; }
.install__where{ font-family:var(--font-display); font-weight:600; font-size:16px; color:var(--ink); }
.install__spec{ font-size:14px; color:var(--slate); }
.install__fig{
  margin-top:auto; padding-top:14px; border-top:1px solid var(--line);
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
}
.install__fig b{
  font-family:var(--font-brand); font-weight:700; font-size:24px;
  letter-spacing:-.02em; color:var(--ink); font-variant-numeric:tabular-nums;
}
.install__fig span{ font-size:13px; color:var(--slate); }
@media (min-width:641px){ .installs{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; } }
@media (min-width:1025px){ .installs{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; } }

/* ---- Assessment band ----------------------------------------------------- */
.assess{
  position:relative; overflow:hidden; color:var(--white);
  background:linear-gradient(150deg, var(--navy) 0%, var(--navy-2) 100%);
}
.assess__grid{ display:grid; gap:clamp(30px,5vw,64px); padding-block:clamp(40px,6vw,80px); position:relative; z-index:1; }
.assess__copy{ display:flex; flex-direction:column; align-items:flex-start; gap:18px; }
.assess h2{ color:var(--white); }
.assess__lede{ color:var(--on-navy); font-size:17px; max-width:46ch; }
.assess__ticks{ border-top:1px solid var(--navy-line); width:100%; }
.assess__ticks li{
  display:flex; gap:12px; padding-block:13px; border-bottom:1px solid var(--navy-line);
  font-size:15px; color:var(--on-navy);
}
.assess__ticks svg{ width:15px; height:15px; color:var(--cyan); flex:none; margin-top:4px; }
.assess__ticks a{ color:var(--white); text-decoration:underline; text-underline-offset:3px; }
@media (min-width:861px){
  .assess__grid{ grid-template-columns:minmax(0,1fr) minmax(0,.82fr); }
  .assess__lede{ font-size:18px; }
}

/* Step one of the quote flow, handed off to /get-a-quote/ (§9). */
.picker{ display:flex; flex-direction:column; gap:12px; }
.picker__q{ font-family:var(--font-display); font-weight:600; font-size:15px; color:var(--white); }
.picker__grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.picker__opt{
  border-radius:var(--radius); border:1px solid rgba(255,255,255,.16);
  display:flex; align-items:center; justify-content:center; text-align:center; min-height:64px;
  padding:14px 10px; background:rgba(255,255,255,.08); color:var(--white);
  font-family:var(--font-display); font-weight:500; font-size:14px; line-height:1.3;
  transition:background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.picker__opt:hover{ background:var(--white); color:var(--navy); transform:translateY(-3px); box-shadow:0 14px 30px rgba(0,19,56,.35); }
.picker__note{ font-size:13px; color:var(--on-navy-dim); line-height:1.5; }
@media (min-width:641px){ .picker__opt{ font-size:15px; } }

/* ---- Forms (used by the quote flow and campaign LP) --------------------- */
.field{ display:flex; flex-direction:column; gap:7px; }
.field label{ font-family:var(--font-display); font-weight:500; font-size:14px; color:var(--white); }
.field input, .field select{
  font-family:var(--font-body); font-size:16px; color:var(--white); width:100%;
  background:rgba(255,255,255,.06); border:1px solid var(--navy-line); padding:14px 15px;
  transition:border-color .2s, background .2s;
}
.field input::placeholder{ color:rgba(255,255,255,.4); }
.field input:focus, .field select:focus{ outline:none; border-color:var(--cyan); background:rgba(255,255,255,.1); }
.field select option{ color:var(--ink); background:var(--white); }

/* ---- Closing CTA band ----------------------------------------------------
   Appears via footer.php, so this one band carries the signature glow onto
   every page site-wide, not only the homepage hero. */
.cta-band{ position:relative; overflow:hidden; background:var(--blue); color:var(--white); --surface:var(--blue); }
.cta-band__inner{ position:relative; z-index:1; display:grid; gap:22px; padding-block:clamp(36px,5vw,56px); align-items:center; }
.cta-band h2{ color:var(--white); }
.cta-band p{ color:rgba(255,255,255,.82); font-size:16px; max-width:48ch; }
.cta-band__actions{ display:flex; flex-wrap:wrap; gap:10px; }
.cta-band .btn--line{ background:rgba(255,255,255,.12); color:var(--white); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6); }
.cta-band .btn--line:hover{ background:var(--white); color:var(--blue); }
.cta-band .btn--solid{ background:var(--white); color:var(--blue); box-shadow:0 12px 28px rgba(0,19,56,.2); }
.cta-band .btn--solid:hover{ background:var(--navy); color:var(--white); }
@media (min-width:861px){
  .cta-band__inner{ grid-template-columns:minmax(0,1fr) auto; gap:40px; }
}

/* ---- Photos (AGENTS.md §5.1, real photography only) --------------------- */
.media-fill{ width:100%; height:100%; object-fit:cover; display:block; }
picture{ display:contents; }
.is-placeholder{ outline:1px dashed rgba(0,103,253,.3); outline-offset:-1px; }

/* Placeholder photo slot: the grey stand-in plus a readable overlay stating
   exactly what to shoot/generate, the filename to save it as, and the pixel
   size, so the brief is legible on the rendered page, not just in dev tools. */
.photo-ph{ position:relative; display:block; width:100%; height:100%; overflow:hidden; background:var(--mist); }
.photo-ph__note{
  position:absolute; inset:0; z-index:1; display:flex; flex-direction:column; gap:7px;
  padding:16px; background:linear-gradient(180deg, rgba(0,19,56,.74) 0%, rgba(0,19,56,.86) 100%);
  color:var(--white); font-family:var(--font-display); pointer-events:none;
}
.photo-ph__ico{ width:22px; height:22px; color:var(--cyan); flex:none; opacity:.9; }
.photo-ph__row{ display:block; font-size:12px; line-height:1.45; color:rgba(255,255,255,.88); word-break:break-word; }
.photo-ph__row b{
  display:block; font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--cyan); margin-bottom:1px;
}
@media (min-width:641px){
  .photo-ph__note{ padding:22px; gap:9px; }
  .photo-ph__ico{ width:26px; height:26px; }
  .photo-ph__row{ font-size:13.5px; }
}

/* ---- Footer: centred masthead over ruled columns ------------------------
   The crest is a classic masthead device, the mark centred between two rules.
   Columns are divided by vertical hairlines on wide screens and stack below. */
.site-footer{
  position:relative; overflow:hidden; color:var(--on-navy);
  background:linear-gradient(175deg, var(--navy) 0%, var(--navy-2) 100%);
}
.site-footer a{ color:var(--on-navy); transition:color .18s; }
.site-footer a:hover{ color:var(--white); }
.site-footer .wrap{ position:relative; z-index:1; }

.footer__crest{
  display:flex; align-items:center; gap:clamp(18px,4vw,40px);
  padding-block:clamp(44px,6vw,68px);
}
.footer__crest::before, .footer__crest::after{ content:""; flex:1; height:1px; background:var(--navy-line); }
.footer__crest .logo img{ height:72px; width:auto; display:block; }
@media (min-width:641px){ .footer__crest .logo img{ height:88px; } }

.site-footer h4{
  color:var(--white); font-family:var(--font-display); font-style:normal;
  font-size:10px; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  margin-bottom:18px;
}
.footer__top{ display:grid; gap:34px; padding-bottom:clamp(38px,5vw,60px); }
.footer__brand p{ font-size:15px; max-width:38ch; }
.footer__social{ display:flex; gap:10px; margin-top:22px; }
.footer__social a{
  width:42px; height:42px; display:grid; place-items:center; border-radius:999px;
  background:rgba(255,255,255,.08); color:var(--white); border:1px solid var(--navy-line);
  transition:background .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.footer__social a:hover{ background:var(--grad-flow); transform:translateY(-3px); box-shadow:0 10px 24px rgba(0,103,253,.35); border-color:transparent; }
.footer__social svg{ width:16px; height:16px; }
.footer__col li{ margin-bottom:11px; font-size:15px; }
.footer__contact li{ display:flex; gap:11px; margin-bottom:15px; font-size:15px; }
.footer__contact svg{ width:16px; height:16px; color:var(--cyan); flex:none; margin-top:5px; }

.footer__bar{
  display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center;
  padding-block:22px; border-top:1px solid var(--navy-line);
  font-family:var(--font-display); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--on-navy-dim);
}
.footer__bar a{ color:var(--on-navy-dim); }
.footer__legal{ display:flex; gap:22px; }

@media (min-width:641px){
  .footer__top{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px; }
}
@media (min-width:1025px){
  .footer__top{ grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:0; }
  .footer__top > *{ padding-inline:40px; border-left:1px solid var(--navy-line); }
  .footer__top > *:first-child{ padding-left:0; border-left:0; }
  .footer__top > *:last-child{ padding-right:0; }
  .footer__bar{ flex-direction:row; justify-content:space-between; text-align:left; }
}

/* ---- Sticky primary CTA, small screens only (§9) ------------------------ */
.stickybar{
  position:fixed; left:0; right:0; bottom:0; z-index:75; display:flex; gap:1px;
  background:var(--line); border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
}
.stickybar a{
  flex:1; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-display); font-weight:600; font-size:15px; padding:16px 12px;
}
.stickybar svg{ width:16px; height:16px; }
.stickybar__call{ background:var(--white); color:var(--ink); }
.stickybar__quote{ background:var(--blue); color:var(--white); }
body{ padding-bottom:60px; }
@media (min-width:1025px){ .stickybar{ display:none; } body{ padding-bottom:0; } }

/* ---- 404: lean, no competing photo, same navy/glow/cut as every other
   signature band on the site -------------------------------------------- */
.notfound{ position:relative; overflow:hidden; color:var(--white); background:linear-gradient(150deg, var(--navy) 0%, var(--navy-2) 100%); }
.notfound__inner{
  position:relative; z-index:1; max-width:620px; margin-inline:auto; text-align:center;
  padding-block:clamp(72px,12vw,140px); display:flex; flex-direction:column; align-items:center; gap:18px;
}
.notfound h1{ color:var(--white); }
.notfound__lede{ font-size:18px; line-height:1.55; color:var(--on-navy); max-width:48ch; }
.notfound__actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:8px; }
@media (min-width:861px){ .notfound__lede{ font-size:20px; } }

/* ---- Statement band: one large line, nothing else -----------------------
   A change of pace between the dense sections. The glow is the only ornament. */
.statement{
  position:relative; overflow:hidden; color:var(--white);
  background:linear-gradient(150deg, var(--navy) 0%, var(--navy-2) 100%);
}
.statement__inner{ position:relative; z-index:1; padding-block:clamp(48px,7vw,96px); }
.statement__inner{ text-align:center; }
.statement blockquote{
  margin-inline:auto; font-family:var(--font-brand); font-weight:700;
  font-size:clamp(28px,4.4vw,60px); line-height:1.1; letter-spacing:-.022em;
  color:var(--white); max-width:18ch;
}
.statement__by{
  display:inline-block; margin-top:26px; padding-top:20px; border-top:1px solid var(--navy-line);
  font-family:var(--font-display); font-size:11px; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--on-navy-dim);
}

/* ---- Ledger: scheme, who it is for, how we handle it -------------------- */
.ledger{ border-top:2px solid var(--ink); }
.ledger__row{
  display:grid; gap:6px; padding-block:20px; border-bottom:1px solid var(--line);
}
.ledger__name{ font-family:var(--font-display); font-weight:600; font-size:17px; color:var(--ink); }
.ledger__who{
  font-family:var(--font-display); font-size:11px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--blue-600);
}
.ledger__how{ font-size:15px; color:var(--slate); }
@media (min-width:861px){
  .ledger__row{
    grid-template-columns:minmax(0,1fr) minmax(0,.7fr) minmax(0,1.3fr);
    gap:24px; align-items:baseline; padding-block:24px;
  }
  .ledger__who{ order:0; }
}

/* A dated callout card. */
.callout{ margin-top:36px; background:var(--mist); padding:clamp(24px,3vw,38px); }
.callout__date{
  display:inline-block; margin-bottom:14px; padding:6px 12px; background:var(--ink); color:var(--white);
  font-family:var(--font-display); font-size:11px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; border-radius:var(--radius-sm);
}
.callout h3{ margin-bottom:12px; }
.callout p{ font-size:15px; color:var(--slate); }
.callout p + p{ margin-top:12px; }
.callout__fine{ font-size:13px; }
.callout .btn{ margin-top:20px; }

/* ---- Brand logo row ------------------------------------------------------ */
.logos{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.logos > *{
  background:var(--white); min-height:96px; display:grid; place-items:center; padding:18px;
  border-radius:var(--radius-lg); box-shadow:var(--shadow); border:1px solid var(--line);
}
.logos img{ max-height:38px; width:auto; }
/* Slot shown until the real supplier logos are supplied. */
.logo-slot{
  font-family:var(--font-display); font-size:11px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--slate); text-align:center;
  border:1px dashed var(--line); border-radius:var(--radius-sm); padding:14px 10px; width:100%;
}
@media (min-width:641px){ .logos{ grid-template-columns:repeat(4,minmax(0,1fr)); } }

/* ---- Reviews ------------------------------------------------------------- */
.review{ background:var(--white); padding:28px 26px; display:flex; flex-direction:column; gap:14px; }
.review__stars{ display:flex; gap:3px; color:var(--blue); }
.review__stars svg{ width:15px; height:15px; }
.review p{ font-size:16px; color:var(--ink); }
.review__who{
  margin-top:auto; padding-top:16px; border-top:1px solid var(--line);
  font-size:13px; color:var(--slate);
}
.review__who b{ display:block; font-family:var(--font-display); font-size:15px; color:var(--ink); font-weight:600; }
/* Anything not yet backed by a real collected review is marked, never dressed up. */
.sample-note{
  display:inline-block; margin-bottom:22px; padding:8px 14px; border:1px dashed var(--line);
  border-radius:var(--radius-sm);
  font-family:var(--font-display); font-size:12px; letter-spacing:.08em; color:var(--slate);
}

/* ---- FAQ: hairline rows, a drawn plus, no chevrons ---------------------- */
.faq{ border-top:2px solid var(--ink); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  list-style:none; cursor:pointer; display:flex; align-items:flex-start; justify-content:space-between;
  gap:24px; padding-block:22px;
  font-family:var(--font-brand); font-weight:600; font-size:19px;
  color:var(--ink); letter-spacing:-.006em;
}
.faq summary::-webkit-details-marker{ display:none; }
/* The marker is two rules; the vertical one rotates away when open. */
.faq__mark{ position:relative; width:16px; height:16px; flex:none; margin-top:7px; }
.faq__mark::before, .faq__mark::after{
  content:""; position:absolute; background:var(--blue); transition:transform .35s var(--ease);
}
.faq__mark::before{ left:0; right:0; top:50%; height:2px; margin-top:-1px; }
.faq__mark::after{ top:0; bottom:0; left:50%; width:2px; margin-left:-1px; }
.faq details[open] .faq__mark::after{ transform:rotate(90deg); }
.faq__a{ padding:0 0 24px; font-size:16px; color:var(--slate); max-width:74ch; }
@media (min-width:641px){ .faq summary{ font-size:21px; } .faq__a{ padding-right:40px; } }

/* ---- Service areas ------------------------------------------------------- */
.areas{ display:flex; flex-wrap:wrap; gap:10px; }
.areas li{
  background:var(--mist); padding:11px 20px; text-align:center; border-radius:999px;
  font-family:var(--font-display); font-weight:500; font-size:14px; color:var(--ink); white-space:nowrap;
  transition:background .2s var(--ease), color .2s var(--ease);
}
.areas li:hover{ background:var(--grad-flow); color:var(--white); }

/* ---- Media and panel radius -----------------------------------------------
   Full-bleed bands (hero, statement, assess, cta-band, notfound) stay
   flat-edged, matching every reference site. Radius lives on the elements
   actually contained within the page: photos and the callout card. */
.split__media{ border-radius:var(--radius-xl); box-shadow:var(--shadow); }
.callout{ border-radius:var(--radius-lg); box-shadow:var(--shadow); }

/* ---- Motion --------------------------------------------------------------
   One idea, applied consistently: things arrive by wiping along an edge. Rules
   draw left to right, headings uncover left to right, photographs uncover from
   the bottom, grid cells draw in one after another. Nothing floats up, nothing
   lifts on hover, nothing bounces. The restraint is the point.
   The end-state insets are slightly negative so italic overhang is never clipped. */

.reveal .label,
.reveal h2,
.reveal h3{
  clip-path:inset(-.22em -.5em -.22em 100%);
  transition:clip-path .95s var(--ease);
}
.reveal.shown .label{ clip-path:inset(-.22em -.5em -.22em 0); transition-delay:.05s; }
.reveal.shown h2{ clip-path:inset(-.22em -.5em -.22em 0); transition-delay:.14s; }
.reveal.shown h3{ clip-path:inset(-.22em -.5em -.22em 0); }

.reveal p,
.reveal .btn,
.reveal .specs,
.reveal .why__n{ opacity:0; transition:opacity .85s var(--ease) .26s; }
.reveal.shown p,
.reveal.shown .btn,
.reveal.shown .specs,
.reveal.shown .why__n{ opacity:1; }

/* Where a grid cell already wipes in, the photo inside must not wipe again. */
.installs.reveal .media-fill,
.cards.reveal .media-fill{ clip-path:none; transition:none; }

/* Photographs uncover from the bottom edge. */
.reveal .media-fill{ clip-path:inset(100% 0 0 0); transition:clip-path 1.05s var(--ease) .08s; }
.reveal.shown .media-fill{ clip-path:inset(0 0 0 0); }

/* Grid children draw in from the left, one after another. */
.cards.reveal > *,
.steps.reveal > *,
.installs.reveal > *,
.logos.reveal > *,
.areas.reveal > *{ clip-path:inset(0 100% 0 0); transition:clip-path .8s var(--ease); }
.cards.reveal.shown > *,
.steps.reveal.shown > *,
.installs.reveal.shown > *,
.logos.reveal.shown > *,
.areas.reveal.shown > *{ clip-path:inset(0 0 0 0); }
.cards.reveal.shown > *:nth-child(1),
.steps.reveal.shown > *:nth-child(1),
.installs.reveal.shown > *:nth-child(1){ transition-delay:.04s; }
.cards.reveal.shown > *:nth-child(2),
.steps.reveal.shown > *:nth-child(2),
.installs.reveal.shown > *:nth-child(2){ transition-delay:.13s; }
.cards.reveal.shown > *:nth-child(3),
.steps.reveal.shown > *:nth-child(3),
.installs.reveal.shown > *:nth-child(3){ transition-delay:.22s; }
.cards.reveal.shown > *:nth-child(4),
.steps.reveal.shown > *:nth-child(4){ transition-delay:.31s; }
.cards.reveal.shown > *:nth-child(5){ transition-delay:.40s; }

/* Hairline rows in the reason list draw their own rule. */
.ledger, .faq{ position:relative; border-top-color:transparent; }
.ledger::before, .faq::before{
  content:""; position:absolute; top:-2px; left:0; right:0; height:2px; background:var(--ink);
  transform:scaleX(0); transform-origin:left; transition:transform 1s var(--ease);
}
.reveal.shown .ledger::before, .reveal.shown .faq::before,
.ledger.shown::before, .faq.shown::before,
:root:not(.js) .ledger::before, :root:not(.js) .faq::before{ transform:scaleX(1); }

.why__item{ position:relative; }
.why__item::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:var(--blue);
  transform:scaleX(0); transform-origin:left; transition:transform .8s var(--ease);
}
.why.reveal.shown .why__item:nth-child(1)::after{ transition-delay:.1s; }
.why.reveal.shown .why__item:nth-child(2)::after{ transition-delay:.2s; }
.why.reveal.shown .why__item:nth-child(3)::after{ transition-delay:.3s; }
.why.reveal.shown .why__item:nth-child(4)::after{ transition-delay:.4s; }

/* Failsafe. The reveal states are only safe to apply once the script has run,
   so without it every element is shown. */
:root:not(.js) .reveal *{ clip-path:none; opacity:1; }
.faq summary, .faq__a{ clip-path:none; }
:root:not(.js) .opener::before,
:root:not(.js) .why__item::after{ transform:scaleX(1); }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  .reveal .label, .reveal h2, .reveal h3,
  .cards.reveal > *, .steps.reveal > *, .installs.reveal > *,
  .reveal .media-fill{ clip-path:none; }
  .reveal p, .reveal .btn, .reveal .specs, .reveal .why__n{ opacity:1; }
  .opener::before, .why__item::after{ transform:scaleX(1); }
}

/* ==========================================================================
   Interior pages, built from includes/page-data.php (real drafted copy).
   Shares every token/component above; these are the few additions that
   generic long-form content needs (breadcrumbs, flowing prose, tables).
   ========================================================================== */

/* ---- Breadcrumbs ---------------------------------------------------------- */
.crumbs{ border-bottom:1px solid var(--line); background:var(--mist); }
.crumbs__list{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding-block:12px;
  font-family:var(--font-display); font-size:12.5px; color:var(--slate);
}
.crumbs__list a{ color:var(--slate); }
.crumbs__list a:hover{ color:var(--blue-600); }
.crumbs__list li{ display:flex; align-items:center; gap:8px; }
.crumbs__list li:not(:last-child)::after{ content:"/"; color:var(--line); }
.crumbs__list li[aria-current]{ color:var(--ink); font-weight:600; }

/* ---- Text-only page hero (no photo slot: most interior pages have none) -- */
.page-hero{ position:relative; overflow:hidden; background:var(--mist); }
.page-hero__inner{ position:relative; z-index:1; padding-block:clamp(48px,7vw,88px); max-width:860px; }
.page-hero__lede{ font-size:18px; line-height:1.6; color:var(--slate); max-width:68ch; margin-top:16px; }
.page-hero__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
@media (min-width:861px){ .page-hero__lede{ font-size:20px; } }

/* ---- Prose body: paragraphs, sub-headings and lists rendered from the
   flat `nodes` list in page-data.php --------------------------------------- */
.prose{ max-width:72ch; }
.prose h3{ margin:34px 0 12px; }
.prose h3:first-child{ margin-top:0; }
.prose p{ margin-bottom:18px; font-size:16px; line-height:1.75; color:var(--ink); }
.prose p:last-child{ margin-bottom:0; }
.content-list{ margin:4px 0 22px; display:grid; gap:11px; }
.content-list li{ display:flex; gap:11px; align-items:flex-start; font-size:16px; line-height:1.6; color:var(--ink); }
.content-list svg{ width:17px; height:17px; color:var(--blue); flex:none; margin-top:4px; }

/* ---- Data tables (rebate ledgers, package comparisons, etc.) ------------- */
.table-wrap{ overflow-x:auto; margin:28px 0; border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow); }
.table-wrap table{ width:100%; border-collapse:collapse; min-width:520px; font-size:15px; }
.table-wrap th, .table-wrap td{ padding:14px 18px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top; }
.table-wrap thead th{ background:var(--navy); color:var(--white); font-family:var(--font-display); font-weight:600; font-size:13px; letter-spacing:.02em; }
.table-wrap tbody tr:nth-child(even){ background:var(--mist); }
.table-wrap tr:last-child td{ border-bottom:0; }

/* ---- Visible "content still needed" notice, reusing the placeholder
   voice already used for photos (AGENTS.md §5.1 convention). ---------------- */
.needs-note{
  margin-top:40px; padding:22px 24px; background:var(--mist); border:1px dashed var(--line);
  border-radius:var(--radius-lg);
}
.needs-note__title{
  display:block; margin-bottom:10px; font-family:var(--font-display); font-weight:700;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--blue-600);
}
.needs-note ul{ display:grid; gap:8px; }
.needs-note li{ font-size:14px; line-height:1.55; color:var(--slate); }

/* ---- Quote modal: opened from every "Get a Free Quote" link site-wide.
   Sized and spaced deliberately tight so the whole form fits one viewport
   on a typical phone without scrolling; max-height/overflow is a safety
   net for short viewports, not the primary plan. ---------------------------- */
.qmodal-scrim{ position:fixed; inset:0; z-index:200; background:rgba(0,19,56,.6); opacity:0; visibility:hidden; transition:opacity .25s var(--ease), visibility .25s; }
.qmodal-scrim.open{ opacity:1; visibility:visible; }
.qmodal{
  position:fixed; z-index:201; inset:0; display:flex; align-items:center; justify-content:center;
  padding:16px; opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .28s var(--ease), visibility .28s;
}
.qmodal.open{ opacity:1; visibility:visible; pointer-events:auto; }
.qmodal__panel{
  position:relative; width:100%; max-width:540px; max-height:94vh; overflow-y:auto; overflow-x:hidden;
  background:var(--white); border-radius:var(--radius-xl); box-shadow:0 40px 90px rgba(0,19,56,.45), 0 0 0 1px rgba(0,103,253,.08);
  padding:0; transform:translateY(16px) scale(.97); transition:transform .32s var(--ease);
}
.qmodal.open .qmodal__panel{ transform:translateY(0) scale(1); }
.qmodal__close{
  position:absolute; top:14px; right:14px; z-index:2; width:34px; height:34px; display:grid; place-items:center;
  border:0; border-radius:999px; background:rgba(255,255,255,.14); color:var(--white); cursor:pointer;
  transition:background .2s var(--ease), transform .2s var(--ease);
}
.qmodal__close:hover{ background:rgba(255,255,255,.26); transform:rotate(90deg); }
.qmodal__close svg{ width:16px; height:16px; }

/* Gradient header band: the same navy/glow language used for every other
   signature moment on the site, so the popup reads as part of the brand
   instead of a plain system dialog dropped on top of it. */
.qmodal__head{
  position:relative; overflow:hidden; isolation:isolate;
  background:linear-gradient(150deg, var(--navy) 0%, var(--navy-2) 100%);
  padding:26px 26px 22px; padding-right:56px;
}
.qmodal__head::before, .qmodal__head::after{
  content:""; position:absolute; z-index:-1; border-radius:50%; background:var(--grad-flow); filter:blur(36px);
}
.qmodal__head::before{ width:180px; height:180px; top:-80px; right:-40px; opacity:.55; }
.qmodal__head::after{ width:140px; height:140px; bottom:-90px; left:-30px; opacity:.4; }
.qmodal__head .label{
  display:inline-flex; align-items:center; gap:7px; margin-bottom:8px;
  background:linear-gradient(120deg, var(--cyan) 0%, var(--white) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.qmodal__head h2{ color:var(--white); font-size:clamp(23px,4vw,29px); }
.qmodal__head p{ color:rgba(255,255,255,.76); font-size:13.5px; margin-top:6px; line-height:1.45; }

.qmodal__body{ padding:20px 22px 20px; }
@media (min-width:541px){ .qmodal__head{ padding:32px 32px 26px; padding-right:60px; } .qmodal__body{ padding:26px 32px 28px; } }

.mfield{ display:flex; flex-direction:column; gap:4px; margin-bottom:12px; }
.mfield label{ font-family:var(--font-display); font-weight:600; font-size:12.5px; color:var(--ink); }
.mfield__optional{ font-weight:500; color:var(--slate); text-transform:none; letter-spacing:0; }
.mfield input, .mfield select, .mfield textarea{
  font-family:var(--font-body); font-size:14.5px; color:var(--ink); width:100%;
  background:var(--mist); border:1.5px solid transparent; border-radius:var(--radius-sm); padding:11px 13px;
  transition:border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
}
.mfield input:focus, .mfield select:focus, .mfield textarea:focus{
  outline:none; background:var(--white); border-color:var(--blue);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--blue) 14%, transparent);
}
.mfield textarea{ resize:vertical; min-height:52px; }
.mfield-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (max-width:400px){ .mfield-row{ grid-template-columns:1fr; } }
.qmodal__consent{ font-size:11.5px; color:var(--slate); line-height:1.4; margin:2px 0 12px; }
.qmodal__hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }
.qmodal__alt{ margin-top:12px; text-align:center; font-size:13px; color:var(--slate); }
.qmodal__alt a{ color:var(--blue-600); font-weight:600; }
.qmodal__status{ display:none; padding:11px 14px; border-radius:var(--radius-sm); font-size:13px; margin-bottom:12px; }
.qmodal__status--error{ display:block; background:#FDEEEE; color:#B3261E; }
.qmodal__success{ display:none; text-align:center; padding:8px 0 2px; }
.qmodal__success.show{ display:block; }
.qmodal__success svg{ width:44px; height:44px; color:#0067FD; margin:0 auto 12px; }
.qmodal__success p{ color:var(--slate); margin-top:8px; font-size:14px; }
.qmodal .btn--block{ padding:14px 20px; }

/* ==========================================================================
   Bento: "Everything for a Modern Electric Home". Deliberate hierarchy —
   one flagship photo tile, one tall tile, three compact tiles — instead of
   five identical cards. Desktop: 3 columns; the feature tile takes 2x2,
   the commercial tile 1x2, and the rest auto-place into the row beneath.
   ========================================================================== */
.bento{ display:grid; gap:16px; grid-template-columns:1fr; }
@media (min-width:641px){
  .bento{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
  .bento__tile--feature{ grid-column:1 / -1; }
}
@media (min-width:1025px){
  .bento{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
  .bento__tile--feature{ grid-column:span 2; grid-row:span 2; }
  .bento__tile--tall{ grid-row:span 2; }
}

.bento__tile{
  position:relative; overflow:hidden; isolation:isolate;
  display:flex; flex-direction:column; gap:12px; padding:28px 26px 26px;
  background:var(--white); color:var(--ink);
  border:1px solid var(--line); border-radius:var(--radius-xl);
  box-shadow:0 1px 2px rgba(0,19,56,.04), 0 10px 30px rgba(0,19,56,.06);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
/* Gradient keyline along the top, drawn in on hover. */
.bento__tile::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px; z-index:2;
  background:var(--grad-flow); transform:scaleX(0); transform-origin:left;
  transition:transform .5s var(--ease);
}
.bento__tile:hover{ transform:translateY(-6px); border-color:color-mix(in srgb, var(--blue) 30%, var(--line)); box-shadow:0 30px 60px rgba(0,19,56,.14); }
.bento__tile:hover::before{ transform:scaleX(1); }

.bento__top{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.bento__ico{
  width:54px; height:54px; display:grid; place-items:center; flex:none; color:var(--blue);
  background:linear-gradient(150deg, color-mix(in srgb, var(--cyan) 18%, transparent), color-mix(in srgb, var(--blue) 12%, transparent));
  border-radius:16px; transition:transform .35s var(--ease), background .35s var(--ease), color .35s var(--ease);
}
.bento__ico svg{ width:26px; height:26px; }
.bento__tile:hover .bento__ico{ background:var(--grad-flow); color:var(--white); transform:rotate(-6deg) scale(1.06); }

/* Big outlined index numeral: an editorial device, quiet until hovered. */
.bento__num{
  font-family:var(--font-display); font-weight:700; font-size:40px; line-height:1; letter-spacing:-.04em;
  color:transparent; -webkit-text-stroke:1.2px var(--line); transition:-webkit-text-stroke-color .35s var(--ease);
}
.bento__tile:hover .bento__num{ -webkit-text-stroke-color:color-mix(in srgb, var(--blue) 45%, transparent); }

.bento__tag{
  margin-top:6px; font-family:var(--font-display); font-weight:700; font-size:11px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--blue-600);
}
.bento__tile h3{ font-size:22px; line-height:1.15; }
.bento__tile p{ font-size:15px; line-height:1.6; color:var(--slate); }
.bento__more{
  margin-top:auto; padding-top:10px; display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-display); font-weight:700; font-size:14.5px; color:var(--blue-600);
}
.bento__more svg{ width:16px; height:16px; transition:transform .3s var(--ease); }
.bento__tile:hover .bento__more svg{ transform:translateX(5px); }

/* Tall tile: a soft frost wash so it reads as its own surface. */
.bento__tile--tall{
  background:linear-gradient(180deg, var(--white) 0%, color-mix(in srgb, var(--cyan) 9%, var(--white)) 100%);
}
@media (min-width:1025px){ .bento__tile--tall h3{ font-size:26px; } .bento__tile--tall{ padding:34px 30px 30px; } }

/* Feature tile: navy, photo-led, the one signature moment of the section. */
.bento__tile--feature{
  padding:0; gap:0; border:0; color:var(--white);
  background:linear-gradient(155deg, var(--navy) 0%, var(--navy-2) 100%);
  box-shadow:0 30px 70px rgba(0,19,56,.28);
}
.bento__tile--feature::after{
  content:""; position:absolute; z-index:-1; width:360px; height:360px; right:-120px; bottom:-140px;
  border-radius:50%; background:var(--grad-flow); filter:blur(70px); opacity:.45; pointer-events:none;
}
.bento__tile--feature:hover{ box-shadow:0 40px 90px rgba(0,19,56,.38); }
.bento__media{ position:relative; aspect-ratio:16/10; overflow:hidden; }
.bento__media .media-fill, .bento__media .photo-ph{ transition:transform .8s var(--ease); }
.bento__tile--feature:hover .bento__media .media-fill{ transform:scale(1.04); }
.bento__body{ position:relative; display:flex; flex-direction:column; gap:12px; padding:26px 26px 28px; flex:1; }
.bento__tile--feature .bento__num{ position:absolute; top:22px; right:26px; -webkit-text-stroke-color:rgba(255,255,255,.22); }
.bento__tile--feature:hover .bento__num{ -webkit-text-stroke-color:rgba(255,255,255,.5); }
.bento__tile--feature .bento__tag{ color:var(--cyan); margin-top:0; }
.bento__tile--feature h3{ color:var(--white); font-size:clamp(26px,3vw,34px); max-width:16ch; }
.bento__tile--feature p{ color:var(--on-navy); font-size:16px; max-width:46ch; }
.bento__tile--feature .bento__more{ color:var(--white); }
@media (min-width:1025px){
  .bento__tile--feature{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .bento__media{ aspect-ratio:auto; height:100%; min-height:100%; }
  .bento__body{ padding:38px 36px; justify-content:center; }
}

/* ==========================================================================
   "Solar & Battery, Done Properly": copy + 2x2 promise cards on the left,
   a layered photo (gradient backplate + floating glass badges) on the right.
   ========================================================================== */
.proper{ position:relative; overflow:hidden; }
.proper__grid{ display:grid; gap:clamp(40px,6vw,80px); align-items:center; }
.proper__copy{ display:flex; flex-direction:column; align-items:flex-start; gap:18px; }

.promise{ width:100%; display:grid; gap:12px; margin-top:8px; }
.promise__item{
  display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-rows:auto auto; column-gap:14px; row-gap:4px;
  padding:18px 18px 18px 16px; background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:0 1px 2px rgba(0,19,56,.04), 0 8px 22px rgba(0,19,56,.05);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.promise__item:hover{ transform:translateY(-3px); border-color:color-mix(in srgb, var(--blue) 28%, var(--line)); box-shadow:0 18px 38px rgba(0,19,56,.1); }
.promise__ico{
  grid-row:1 / span 2; width:44px; height:44px; display:grid; place-items:center; color:var(--blue);
  background:linear-gradient(150deg, color-mix(in srgb, var(--cyan) 18%, transparent), color-mix(in srgb, var(--blue) 12%, transparent));
  border-radius:13px; transition:background .3s var(--ease), color .3s var(--ease);
}
.promise__ico svg{ width:22px; height:22px; }
.promise__item:hover .promise__ico{ background:var(--grad-flow); color:var(--white); }
.promise__item b{ font-family:var(--font-display); font-weight:700; font-size:16px; color:var(--ink); align-self:end; }
.promise__item span:last-child{ font-size:14px; line-height:1.55; color:var(--slate); }
@media (min-width:641px){ .promise{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; } }

.proper__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:10px; }

.proper__visual{ position:relative; padding:0 14px 30px 0; }
.proper__backplate{
  position:absolute; z-index:0; right:0; bottom:0; width:82%; height:86%;
  border-radius:var(--radius-xl); background:var(--grad-flow); opacity:.9;
  transform:rotate(3deg); transform-origin:bottom right;
}
.proper__photo{
  position:relative; z-index:1; aspect-ratio:4/5; overflow:hidden;
  border-radius:var(--radius-xl); box-shadow:0 30px 70px rgba(0,19,56,.22); background:var(--mist);
}
.proper__badge{
  position:absolute; z-index:2; display:flex; align-items:center; gap:12px; padding:12px 16px 12px 12px;
  background:color-mix(in srgb, var(--white) 88%, transparent);
  -webkit-backdrop-filter:blur(14px) saturate(160%); backdrop-filter:blur(14px) saturate(160%);
  border:1px solid rgba(255,255,255,.7); border-radius:var(--radius-lg);
  box-shadow:0 18px 40px rgba(0,19,56,.18);
  font-size:12.5px; color:var(--slate); line-height:1.35;
}
.proper__badge b{ display:block; font-family:var(--font-display); font-size:15px; color:var(--ink); }
.proper__badge-ico{
  width:38px; height:38px; flex:none; display:grid; place-items:center; color:var(--white);
  background:var(--grad-flow); border-radius:11px;
}
.proper__badge-ico svg{ width:19px; height:19px; }
.proper__badge--top{ top:22px; left:-10px; animation:fs-bob 6s var(--ease) infinite; }
.proper__badge--bottom{ bottom:6px; right:30px; animation:fs-bob 7s var(--ease) infinite reverse; }
@keyframes fs-bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }
@media (min-width:861px){
  .proper__grid{ grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); }
  .proper__badge--top{ left:-34px; }
}
@media (max-width:640px){
  .proper__badge--top{ left:8px; top:12px; }
  .proper__badge--bottom{ right:20px; }
}
@media (prefers-reduced-motion:reduce){ .proper__badge--top, .proper__badge--bottom{ animation:none; } }

/* ---- Rebates: four numbered cards + a navy NSW feature panel ------------- */
.rebate{ display:grid; gap:22px; }
.rebate__cards{ display:grid; gap:16px; }
@media (min-width:641px){ .rebate__cards{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1025px){ .rebate__cards{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.rebate__card{
  position:relative; overflow:hidden; display:flex; flex-direction:column; gap:10px; padding:26px 22px 24px;
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-xl);
  box-shadow:0 1px 2px rgba(0,19,56,.04), 0 10px 28px rgba(0,19,56,.06);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.rebate__card::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:4px; background:var(--grad-flow); transform:scaleX(.18); transform-origin:left; transition:transform .5s var(--ease); }
.rebate__card:hover{ transform:translateY(-6px); box-shadow:0 28px 56px rgba(0,19,56,.14); }
.rebate__card:hover::after{ transform:scaleX(1); }
.rebate__n{ font-family:var(--font-display); font-weight:700; font-size:54px; line-height:1; letter-spacing:-.05em; color:transparent; -webkit-text-stroke:1.3px color-mix(in srgb, var(--blue) 35%, var(--line)); }
.rebate__who{ font-family:var(--font-display); font-weight:700; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--blue-600); }
.rebate__card h3{ font-size:19px; line-height:1.2; }
.rebate__card p{ font-size:14.5px; line-height:1.6; color:var(--slate); }

.nsw{
  position:relative; overflow:hidden; isolation:isolate; color:var(--white);
  background:linear-gradient(150deg, var(--navy) 0%, var(--navy-2) 100%);
  border-radius:var(--radius-xl); padding:clamp(26px,4vw,48px); box-shadow:0 30px 70px rgba(0,19,56,.26);
}
.nsw__inner{ position:relative; z-index:1; display:grid; gap:28px; align-items:center; }
@media (min-width:861px){ .nsw__inner{ grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); gap:56px; } }
.nsw__copy{ display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
.nsw__date{ display:inline-block; padding:7px 14px; border-radius:999px; background:var(--grad-flow); font-family:var(--font-display); font-weight:700; font-size:11px; letter-spacing:.16em; text-transform:uppercase; }
.nsw h3{ color:var(--white); font-size:clamp(24px,3vw,34px); }
.nsw__copy p{ color:var(--on-navy); font-size:15.5px; line-height:1.65; max-width:56ch; }
.nsw__paths{ display:grid; gap:12px; }
.nsw__path{ padding:20px 22px; border-radius:var(--radius-lg); background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.nsw__path b{ display:block; font-family:var(--font-display); font-size:32px; line-height:1; letter-spacing:-.03em; background:linear-gradient(120deg,var(--cyan),var(--white)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.nsw__path span{ display:block; margin-top:6px; font-size:14px; color:var(--on-navy); }
.nsw__fine{ position:relative; z-index:1; margin-top:26px; padding-top:18px; border-top:1px solid var(--navy-line); font-size:12.5px; line-height:1.55; color:var(--on-navy-dim); }

/* ---- How It Works: connected timeline ----------------------------------- */
.timeline{ position:relative; display:grid; gap:18px; counter-reset:none; }
@media (min-width:1025px){
  .timeline{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; padding-top:34px; }
  .timeline::before{ content:""; position:absolute; top:34px; left:6%; right:6%; height:3px; border-radius:3px; background:linear-gradient(90deg,var(--cyan),var(--blue)); opacity:.35; }
}
.timeline__step{ position:relative; display:flex; flex-direction:column; align-items:center; }
.timeline__badge{
  position:relative; z-index:1; width:68px; height:68px; display:grid; place-items:center; color:var(--white);
  background:var(--grad-flow); border-radius:50%; border:6px solid var(--mist);
  box-shadow:0 14px 30px rgba(0,103,253,.35); margin-bottom:-34px; transition:transform .4s var(--ease);
}
.timeline__badge svg{ width:26px; height:26px; }
.timeline__step:hover .timeline__badge{ transform:scale(1.1) rotate(-6deg); }
.timeline__card{
  width:100%; padding:46px 22px 26px; text-align:center; background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius-xl); box-shadow:0 10px 30px rgba(0,19,56,.07); transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.timeline__step:hover .timeline__card{ transform:translateY(-6px); box-shadow:0 28px 56px rgba(0,19,56,.14); }
.timeline__n{ display:block; font-family:var(--font-display); font-weight:700; font-size:12px; letter-spacing:.2em; color:var(--blue-600); margin-bottom:6px; }
.timeline__card h3{ font-size:20px; margin-bottom:8px; }
.timeline__card p{ font-size:14.5px; line-height:1.6; color:var(--slate); }

/* ---- Install quality ----------------------------------------------------- */
.standard{ display:grid; gap:18px; }
@media (min-width:861px){ .standard{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.standard__card{
  position:relative; overflow:hidden; padding:34px 28px; background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius-xl); box-shadow:0 10px 30px rgba(0,19,56,.06); transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.standard__card::before{ content:""; position:absolute; width:180px; height:180px; right:-60px; top:-60px; border-radius:50%; background:var(--grad-flow); opacity:.08; transition:opacity .4s, transform .5s var(--ease); }
.standard__card:hover{ transform:translateY(-6px); box-shadow:0 28px 56px rgba(0,19,56,.14); }
.standard__card:hover::before{ opacity:.18; transform:scale(1.3); }
.standard__ico{ width:58px; height:58px; display:grid; place-items:center; margin-bottom:18px; color:var(--white); background:var(--grad-flow); border-radius:18px; box-shadow:0 12px 26px rgba(0,103,253,.3); }
.standard__ico svg{ width:28px; height:28px; }
.standard__card h3{ font-size:21px; margin-bottom:10px; }
.standard__card p{ font-size:15px; line-height:1.65; color:var(--slate); }

/* ---- Commitments ---------------------------------------------------------- */
.promises{ display:grid; gap:16px; }
@media (min-width:641px){ .promises{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1025px){ .promises{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.promises__card{
  position:relative; margin:0; padding:34px 24px 26px; display:flex; flex-direction:column; gap:12px;
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-xl); box-shadow:0 10px 30px rgba(0,19,56,.06);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.promises__card:hover{ transform:translateY(-6px); box-shadow:0 28px 56px rgba(0,19,56,.14); }
.promises__mark{ font-family:var(--font-display); font-weight:700; font-size:84px; line-height:.6; height:34px; background:var(--grad-flow); -webkit-background-clip:text; background-clip:text; color:transparent; }
.promises__card blockquote{ margin:0; font-family:var(--font-display); font-weight:700; font-size:19px; line-height:1.3; color:var(--ink); }
.promises__card figcaption{ margin-top:auto; padding-top:14px; border-top:1px solid var(--line); font-size:14px; line-height:1.6; color:var(--slate); }

/* ---- Brands We Install: category cards with locally hosted logos ---------- */
.brandgrid{ display:grid; gap:16px; }
@media (min-width:641px){ .brandgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:900px){ .brandgrid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:1180px){ .brandgrid{ grid-template-columns:repeat(5,minmax(0,1fr)); } }
.brandgrid__card{
  min-width:0; display:flex; flex-direction:column; gap:10px; padding:28px 24px 24px; background:var(--white);
  border:1px solid var(--line); border-radius:var(--radius-xl); box-shadow:0 10px 30px rgba(0,19,56,.06);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}
.brandgrid__card:hover{ transform:translateY(-6px); border-color:color-mix(in srgb,var(--blue) 30%,var(--line)); box-shadow:0 28px 56px rgba(0,19,56,.14); }
.brandgrid__ico{ width:50px; height:50px; display:grid; place-items:center; color:var(--blue); border-radius:15px; background:linear-gradient(150deg,color-mix(in srgb,var(--cyan) 18%,transparent),color-mix(in srgb,var(--blue) 12%,transparent)); }
.brandgrid__ico svg{ width:24px; height:24px; }
.brandgrid__card h3{ font-size:20px; }
.brandgrid__card p{ font-size:14.5px; line-height:1.6; color:var(--slate); }
.brandgrid__logos{ min-width:0; width:100%; margin-top:auto; padding-top:16px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.brandgrid__logo{
  min-width:0; height:58px; overflow:hidden; display:grid; place-items:center; padding:9px 7px;
  background:var(--mist); border:1px solid var(--line); border-radius:var(--radius-sm);
}
.brandgrid__logo img{ display:block; min-width:0; max-width:100%; width:100%; height:40px; object-fit:contain; }
.brandgrid__logo--named{ grid-template-columns:30px minmax(0,1fr); gap:7px; text-align:left; }
.brandgrid__logo--named img{ width:30px; height:30px; }
.brandgrid__logo-name{ font-family:var(--font-display); font-size:9px; font-weight:700; line-height:1.15; color:var(--ink); }
@media (min-width:1180px){ .brandgrid__logos{ grid-template-columns:1fr; } }

/* ---- Upgrades & servicing: sticky CTA panel + horizontal service rows ---- */
.upg{ display:grid; gap:22px; align-items:start; }
@media (min-width:1025px){ .upg{ grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:28px; } .upg__panel{ position:sticky; top:120px; } }
.upg__panel{ position:relative; overflow:hidden; isolation:isolate; color:var(--white); border-radius:var(--radius-xl); background:linear-gradient(155deg,var(--navy),var(--navy-2)); box-shadow:0 30px 70px rgba(0,19,56,.26); }
.upg__panel-inner{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:flex-start; gap:16px; padding:clamp(28px,4vw,44px); }
.upg__kicker{ font-family:var(--font-display); font-weight:700; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--cyan); }
.upg__panel h3{ color:var(--white); font-size:clamp(24px,2.6vw,32px); line-height:1.15; }
.upg__panel p{ color:var(--on-navy); font-size:15.5px; line-height:1.65; }
.upg__call{ color:var(--on-navy); font-size:14.5px; font-weight:600; text-decoration:underline; text-underline-offset:4px; }
.upg__call:hover{ color:var(--white); }
.upg__list{ display:grid; gap:14px; }
.upg__row{
  display:flex; align-items:center; gap:18px; padding:20px 22px; background:var(--white); color:var(--ink);
  border:1px solid var(--line); border-radius:var(--radius-xl); box-shadow:0 8px 24px rgba(0,19,56,.05);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.upg__row:hover{ transform:translateX(6px); border-color:color-mix(in srgb,var(--blue) 30%,var(--line)); box-shadow:0 22px 46px rgba(0,19,56,.12); }
.upg__ico{ flex:none; width:56px; height:56px; display:grid; place-items:center; color:var(--blue); border-radius:17px; background:linear-gradient(150deg,color-mix(in srgb,var(--cyan) 18%,transparent),color-mix(in srgb,var(--blue) 12%,transparent)); transition:background .3s, color .3s, transform .3s var(--ease); }
.upg__ico svg{ width:26px; height:26px; }
.upg__row:hover .upg__ico{ background:var(--grad-flow); color:var(--white); transform:rotate(-6deg); }
.upg__text{ flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.upg__n{ font-family:var(--font-display); font-weight:700; font-size:11px; letter-spacing:.18em; color:var(--blue-600); }
.upg__text b{ font-family:var(--font-display); font-size:18px; line-height:1.2; }
.upg__text span:last-child{ font-size:14.5px; line-height:1.55; color:var(--slate); }
.upg__go{ flex:none; width:40px; height:40px; display:grid; place-items:center; border-radius:50%; background:var(--mist); color:var(--blue-600); transition:background .3s, color .3s, transform .3s var(--ease); }
.upg__go svg{ width:17px; height:17px; }
.upg__row:hover .upg__go{ background:var(--grad-flow); color:var(--white); transform:translateX(3px); }
@media (max-width:540px){ .upg__go{ display:none; } .upg__row{ padding:16px; gap:14px; } }

/* ---- Common Questions: numbered accordion cards + help card -------------- */
.qa{ display:grid; gap:22px; align-items:start; }
@media (min-width:1025px){ .qa{ grid-template-columns:minmax(0,1.6fr) minmax(0,.7fr); gap:28px; } .qa__help{ position:sticky; top:120px; } }
.qa__list{ display:grid; gap:12px; }
.qa__item{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius-xl); box-shadow:0 8px 24px rgba(0,19,56,.05); transition:box-shadow .3s var(--ease), border-color .3s; }
.qa__item:hover{ box-shadow:0 18px 40px rgba(0,19,56,.1); }
.qa__item[open]{ border-color:color-mix(in srgb,var(--blue) 35%,var(--line)); box-shadow:0 22px 48px rgba(0,103,253,.12); }
.qa__item summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:16px; padding:20px 22px; }
.qa__item summary::-webkit-details-marker{ display:none; }
.qa__n{ flex:none; font-family:var(--font-display); font-weight:700; font-size:13px; letter-spacing:.1em; color:var(--blue-600); }
.qa__q{ flex:1; font-family:var(--font-display); font-weight:700; font-size:clamp(16px,1.6vw,19px); line-height:1.3; color:var(--ink); }
.qa__toggle{ flex:none; width:38px; height:38px; display:grid; place-items:center; border-radius:50%; background:var(--mist); color:var(--blue-600); transition:background .3s, color .3s, transform .35s var(--ease); }
.qa__toggle svg{ width:17px; height:17px; }
.qa__item[open] .qa__toggle{ background:var(--grad-flow); color:var(--white); transform:rotate(45deg); }
.qa__a{ padding:0 22px 24px 22px; margin-left:calc(13px + 2ch + 16px); font-size:15.5px; line-height:1.7; color:var(--slate); max-width:68ch; }
@media (max-width:540px){ .qa__a{ margin-left:0; } .qa__n{ display:none; } }
.qa__help{ display:flex; flex-direction:column; gap:12px; padding:30px 26px; background:linear-gradient(180deg,var(--white),color-mix(in srgb,var(--cyan) 10%,var(--white))); border:1px solid var(--line); border-radius:var(--radius-xl); box-shadow:0 14px 36px rgba(0,19,56,.08); }
.qa__help-ico{ width:54px; height:54px; display:grid; place-items:center; color:var(--white); background:var(--grad-flow); border-radius:17px; box-shadow:0 12px 26px rgba(0,103,253,.3); }
.qa__help-ico svg{ width:26px; height:26px; }
.qa__help h3{ font-size:22px; margin-top:6px; }
.qa__help p{ font-size:14.5px; line-height:1.6; color:var(--slate); margin-bottom:6px; }

/* ---- Where We Install: navy coverage band with pin chips ------------------ */
.cover{ position:relative; overflow:hidden; isolation:isolate; margin-top:clamp(40px,6vw,72px); color:var(--white); border-radius:var(--radius-xl); background:linear-gradient(150deg,var(--navy),var(--navy-2)); box-shadow:0 30px 70px rgba(0,19,56,.26); }
.cover__inner{ position:relative; z-index:1; display:grid; gap:28px; padding:clamp(28px,5vw,56px); align-items:center; }
@media (min-width:861px){ .cover__inner{ grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:56px; } }
.cover__kicker{ font-family:var(--font-display); font-weight:700; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--cyan); }
.cover h2{ color:var(--white); font-size:clamp(28px,3.4vw,42px); margin:10px 0 12px; }
.cover__copy p{ color:var(--on-navy); font-size:15.5px; line-height:1.65; max-width:46ch; }
.cover__chips{ display:flex; flex-wrap:wrap; gap:10px; }
.cover__chips li{ display:inline-flex; align-items:center; gap:8px; padding:10px 16px 10px 12px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); font-family:var(--font-display); font-weight:600; font-size:14px; transition:background .25s, transform .25s var(--ease); }
.cover__chips li svg{ width:15px; height:15px; color:var(--cyan); }
.cover__chips li:hover{ background:rgba(255,255,255,.18); transform:translateY(-2px); }

/* ---- Where We Install: editorial split, hand-drawn map + state index ------ */
.reach{ margin-top:clamp(48px,7vw,88px); padding-top:clamp(40px,6vw,72px); border-top:1px solid var(--line); display:grid; gap:40px; align-items:center; }
@media (min-width:861px){ .reach{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:72px; } }
.reach__copy{ display:flex; flex-direction:column; align-items:flex-start; gap:18px; }
.reach__lede{ font-size:18px; line-height:1.6; color:var(--slate); max-width:46ch; }
.reach__states{ width:100%; margin:6px 0 10px; border-top:2px solid var(--ink); }
.reach__states div{ display:grid; gap:2px 24px; padding:14px 0; border-bottom:1px solid var(--line); }
@media (min-width:541px){ .reach__states div{ grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); align-items:baseline; } }
.reach__states dt{ font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--ink); }
.reach__states dd{ margin:0; font-size:15px; color:var(--slate); }
.reach__map{ margin:0; }
.reach__map svg{ width:100%; height:auto; display:block; }
.reach__land{ fill:var(--mist); stroke:color-mix(in srgb,var(--navy) 55%,var(--line)); stroke-width:1.4; stroke-linejoin:round; }
.reach__pin circle{ fill:var(--blue); stroke:var(--white); stroke-width:2.5; }
.reach__pin text{ font-family:var(--font-display); font-weight:700; font-size:11.5px; fill:var(--ink); paint-order:stroke; stroke:var(--white); stroke-width:3px; stroke-linejoin:round; }

/* Flatter, quieter finish across the home page: no blurred colour blobs. */
.glow-orbs, .bento__tile--feature::after{ display:none; }
.proper__badge--top, .proper__badge--bottom{ animation:none; }

/* ---- Service ribbon, restyled: an editorial type marquee. Big, confident
   service names separated by a small blue dot, full-bleed, faded at both
   edges. No pills, no check icons. ------------------------------------------ */
.ribbon{ background:var(--white); border-block:1px solid var(--line); overflow:hidden; }
.ribbon::before, .ribbon::after{ content:""; position:absolute; top:0; bottom:0; width:clamp(48px,10vw,160px); z-index:1; pointer-events:none; }
.ribbon::before{ left:0; background:linear-gradient(90deg,var(--white),transparent); }
.ribbon::after{ right:0; background:linear-gradient(270deg,var(--white),transparent); }
.ribbon__track{ display:block; flex:none; overflow:hidden; padding-block:clamp(18px,2.4vw,28px); }
.ribbon__track__scroll{ display:flex; align-items:center; width:max-content; gap:0; animation:fs-ribbon 60s linear infinite; }
.ribbon__item{
  flex:none; display:inline-flex; align-items:center; padding:0; border:0; border-radius:0; background:none; color:var(--ink);
  font-family:var(--font-display); font-weight:700; font-size:clamp(20px,2.4vw,30px); letter-spacing:-.02em; white-space:nowrap;
}
.ribbon__item::after{ content:""; width:7px; height:7px; margin-inline:clamp(22px,3vw,42px); border-radius:50%; background:var(--blue); flex:none; }
.ribbon__item:nth-child(even){ color:transparent; -webkit-text-stroke:1.2px var(--navy); }
.ribbon__item svg, .ribbon__label{ display:none; }

/* ---- Ribbon v3: navy band, solid white type. The key-figures card below
   overlaps its lower edge so the two read as one composed unit. ------------ */
.ribbon{ background:var(--navy); border-block:0; padding-bottom:clamp(36px,5vw,64px); }
.ribbon::before{ background:linear-gradient(90deg,var(--navy),transparent); }
.ribbon::after{ background:linear-gradient(270deg,var(--navy),transparent); }
.ribbon__item{ color:var(--white); font-size:clamp(22px,2.8vw,36px); }
.ribbon__item:nth-child(even){ color:transparent; -webkit-text-stroke:1.3px rgba(255,255,255,.6); }
.ribbon__item::after{ background:var(--cyan); }

.metrics{
  position:relative; z-index:3; margin-top:calc(-1 * clamp(36px,5vw,64px)); overflow:hidden;
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-xl); gap:0;
  box-shadow:0 30px 70px rgba(0,19,56,.16);
}
.metric{ position:relative; padding:30px 24px 28px; text-align:left; align-items:flex-start; background:transparent; }
.metric + .metric{ border-top:1px solid var(--line); }
@media (min-width:641px){ .metrics{ grid-template-columns:repeat(2,1fr); } .metric:nth-child(2){ border-top:0; } .metric:nth-child(even){ border-left:1px solid var(--line); } }
@media (min-width:1025px){ .metrics{ grid-template-columns:repeat(4,1fr); } .metric{ border-top:0 !important; padding:38px 32px 34px; } .metric + .metric{ border-left:1px solid var(--line); } }
.metric::before{ content:""; position:absolute; left:24px; top:0; width:36px; height:4px; border-radius:0 0 4px 4px; background:var(--grad-flow); }
@media (min-width:1025px){ .metric::before{ left:32px; } }
.metric__v{ font-size:clamp(30px,3.2vw,44px); margin-top:8px; }
.metric__k{ max-width:24ch; }

/* ---- Proof row + call to action: the four facts, then the ask ------------- */
.metrics{ border-radius:var(--radius-xl) var(--radius-xl) 0 0; box-shadow:none; }
.metrics__cta{
  position:relative; z-index:3; display:grid; gap:20px; align-items:center; padding:clamp(24px,3.4vw,36px) clamp(24px,3.4vw,40px);
  color:var(--white); background:linear-gradient(120deg,var(--blue-600),var(--blue) 55%,var(--cyan));
  border-radius:0 0 var(--radius-xl) var(--radius-xl); box-shadow:0 30px 70px rgba(0,19,56,.2);
}
@media (min-width:861px){ .metrics__cta{ grid-template-columns:minmax(0,1fr) auto; gap:40px; } }
.metrics__cta p{ font-size:16px; line-height:1.55; color:rgba(255,255,255,.88); max-width:62ch; }
.metrics__cta p b{ display:block; margin-bottom:2px; font-family:var(--font-display); font-size:clamp(20px,2.2vw,26px); color:var(--white); }
.metrics__actions{ display:flex; flex-wrap:wrap; gap:12px; }
.metrics__cta .btn--solid{ background:var(--white); color:var(--blue-600); box-shadow:0 12px 28px rgba(0,19,56,.25); }
.metrics__cta .btn--solid:hover{ background:var(--navy); color:var(--white); }
.metrics__cta .btn{ flex:1 1 auto; }
@media (min-width:641px){ .metrics__cta .btn{ flex:0 0 auto; } }

/* ---- Mega menu v2: navy feature card, ruled link columns, closing CTA ---- */
.submenu__inner{ gap:0 clamp(32px,4vw,56px); padding:clamp(26px,3vw,38px); }
.submenu__lead{
  position:relative; overflow:hidden; justify-content:flex-end; min-height:230px; padding:28px;
  color:var(--white); background:linear-gradient(155deg,var(--navy) 0%,var(--navy-2) 100%);
  box-shadow:0 20px 44px rgba(0,19,56,.22);
}
.submenu__lead::after{ content:""; position:absolute; left:28px; top:28px; width:40px; height:4px; border-radius:4px; background:var(--grad-flow); }
.submenu__lead:hover{ background:linear-gradient(155deg,var(--navy) 0%,var(--navy-2) 100%); box-shadow:0 28px 56px rgba(0,19,56,.3); transform:translateY(-3px); }
.submenu__lead{ transition:transform .3s var(--ease), box-shadow .3s var(--ease); }
.submenu__lead-eyebrow{ color:var(--cyan); }
.submenu__lead-title{ color:var(--white); font-size:28px; }
.submenu__lead-note{ color:var(--on-navy); font-size:15px; }
.submenu__lead-go{
  align-self:flex-start; margin-top:12px; padding:10px 18px; border-radius:999px; font-size:14px; color:var(--navy);
  background:var(--white); transition:background .25s, color .25s;
}
.submenu__lead:hover .submenu__lead-go{ background:var(--cyan); }
.submenu__title{ padding-bottom:12px; margin-bottom:6px; border-bottom:2px solid var(--ink); color:var(--ink); font-size:11px; }
.submenu__col li{ margin:0; border-bottom:1px solid var(--line); }
.submenu__col a{
  display:flex; align-items:center; justify-content:space-between; width:100%; padding:13px 0; font-size:16.5px; font-weight:600; transform:none !important;
}
.submenu__col a::after{ content:"\2192"; opacity:0; transform:translateX(-8px); color:var(--blue); transition:opacity .25s, transform .3s var(--ease); }
.submenu__col a:hover{ color:var(--blue-600); }
.submenu__col a:hover::after{ opacity:1; transform:translateX(0); }
.submenu__strip{
  grid-column:1 / -1; margin-top:26px; padding:18px 22px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px;
  background:var(--mist); border-radius:var(--radius-lg); font-size:15px; color:var(--slate);
}
.submenu__strip b{ color:var(--ink); }
.submenu__strip p{ margin:0; }
.submenu__strip-actions{ display:flex; align-items:center; gap:18px; }
.submenu__call{ font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--blue-600); }
.submenu__call:hover{ text-decoration:underline; text-underline-offset:4px; }

/* ---- Mega menu v3: roomy lead card, link rows with a one-line description -- */
.submenu__inner{ grid-template-columns:minmax(0,.78fr) minmax(0,2.2fr); }
.submenu__lead{ padding:44px 30px 30px; min-height:260px; gap:10px; }
.submenu__lead::after{ left:30px; top:26px; width:44px; height:3px; }
.submenu__lead-eyebrow{ letter-spacing:.2em; }
.submenu__lead-title{ font-size:30px; line-height:1.1; }
.submenu__title{ display:flex; align-items:center; gap:10px; border-bottom:0; padding-bottom:6px; margin-bottom:8px; font-size:11px; letter-spacing:.2em; color:var(--blue-600); }
.submenu__title::after{ content:""; flex:1; height:1px; background:var(--line); }
.submenu__col ul{ display:grid; gap:2px; }
.submenu__col li{ border:0; }
.submenu__col a{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 12px; align-items:center; padding:11px 14px; margin-inline:-14px;
  border-radius:var(--radius); transition:background .22s var(--ease);
}
.submenu__col a:hover{ background:var(--mist); }
.submenu__item-t{ grid-column:1; font-size:16px; font-weight:700; color:var(--ink); }
.submenu__item-d{ grid-column:1; font-size:13px; font-weight:500; line-height:1.4; color:var(--slate); }
.submenu__col a::after{ grid-column:2; grid-row:1 / span 2; width:30px; height:30px; display:grid; place-items:center; border-radius:50%; background:var(--grad-flow); color:var(--white); font-size:14px; line-height:30px; text-align:center; }
.submenu__col a:hover .submenu__item-t{ color:var(--blue-600); }
@media (min-width:1025px){ .submenu__cols{ gap:20px 28px; } }

/* CTA bar under the proof row removed: the card closes on its own again. */
.metrics{ border-radius:var(--radius-xl); box-shadow:0 30px 70px rgba(0,19,56,.16); }

/* ---- Mega menu v4: compact. Titles only, slim lead card, one-line footer. -- */
.submenu__inner{ padding:22px 26px; grid-template-columns:minmax(0,.7fr) minmax(0,2.3fr); gap:0 36px; }
.submenu__lead{ min-height:0; padding:34px 22px 22px; gap:6px; align-self:start; }
.submenu__lead::after{ left:22px; top:20px; }
.submenu__lead-title{ font-size:22px; }
.submenu__lead-note{ font-size:13.5px; line-height:1.45; }
.submenu__lead-go{ margin-top:8px; padding:8px 16px; font-size:13px; }
.submenu__title{ margin-bottom:4px; }
.submenu__item-d{ display:none; }
.submenu__col a{ padding:9px 12px; margin-inline:-12px; line-height:1.3; }
.submenu__item-t{ font-size:15.5px; line-height:1.3; }
.submenu__col a::after{ width:24px; height:24px; line-height:24px; font-size:12px; grid-row:1; }
.submenu__strip{ margin-top:16px; padding:12px 16px; font-size:14px; }
.submenu__strip-actions .btn--sm{ padding:10px 18px; font-size:14px; }

/* ---- Done Properly v2: editorial. Tall photo, ruled numbered list, no
   icon badges. ---------------------------------------------------------- */
.proper2__grid{ display:grid; gap:clamp(36px,6vw,88px); align-items:center; }
@media (min-width:861px){ .proper2__grid{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); } }
.proper2__photo{ aspect-ratio:4/5; overflow:hidden; border-radius:var(--radius-xl); background:var(--mist); box-shadow:0 30px 70px rgba(0,19,56,.18); }
.proper2__caption{ margin-top:14px; display:flex; flex-wrap:wrap; gap:4px 12px; font-size:13.5px; color:var(--slate); }
.proper2__caption b{ font-family:var(--font-display); color:var(--ink); }
.proper2__copy{ display:flex; flex-direction:column; align-items:flex-start; gap:18px; }
.proper2__list{ width:100%; margin-top:6px; border-top:2px solid var(--ink); }
.proper2__list li{ display:grid; grid-template-columns:44px minmax(0,1fr); gap:0 16px; padding:20px 0; border-bottom:1px solid var(--line); }
.proper2__n{ font-family:var(--font-display); font-weight:700; font-size:14px; letter-spacing:.08em; color:var(--blue-600); padding-top:3px; }
.proper2__list h3{ font-size:19px; margin-bottom:6px; }
.proper2__list p{ font-size:15px; line-height:1.6; color:var(--slate); }
.proper2__actions{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 26px; margin-top:8px; }
.proper2__link{ font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--ink); border-bottom:2px solid var(--blue); padding-bottom:2px; }
.proper2__link:hover{ color:var(--blue-600); }

/* ---- Hamburger: 48px tap target, three bars that fold into a clean X ----- */
.burger{
  position:relative; flex:none; width:48px; height:48px; margin:0; margin-right:-6px; gap:0; border-radius:14px;
  background:var(--mist); -webkit-tap-highlight-color:transparent; touch-action:manipulation;
  transition:background .2s var(--ease);
}
.burger:hover, .burger:focus-visible{ background:var(--line); }
.burger span{
  position:absolute; left:14px; right:14px; width:auto; height:2.5px; margin:0; border-radius:2px; background:var(--ink);
  transition:transform .3s var(--ease), opacity .2s var(--ease), top .3s var(--ease);
}
.burger span:nth-child(1){ top:16px; }
.burger span:nth-child(2){ top:23px; }
.burger span:nth-child(3){ top:30px; }
.burger.open{ background:var(--ink); }
.burger.open span{ background:var(--white); }
.burger.open span:nth-child(1){ top:23px; transform:rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; transform:scaleX(0); }
.burger.open span:nth-child(3){ top:23px; transform:rotate(-45deg); }
/* Small phones: keep logo, quote button and burger on one line. */
@media (max-width:480px){
  .masthead__inner{ gap:10px; }
  .masthead .logo img{ height:42px; }
  .masthead__actions{ gap:8px; }
  .btn--sm{ padding:11px 14px; font-size:13px; }
}
@media (max-width:360px){ .masthead__actions .btn--sm{ display:none; } }

/* ---- Proof row on phones/tablets: a 2 x 2 grid, never a long single stack - */
@media (max-width:1024px){
  .metrics{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .metric{ padding:26px 18px 22px; border:0 !important; }
  .metric:nth-child(even){ border-left:1px solid var(--line) !important; }
  .metric:nth-child(n+3){ border-top:1px solid var(--line) !important; }
  .metric::before{ left:18px; }
  .metric__v{ font-size:clamp(24px,6.4vw,34px); }
  .metric__k{ font-size:13px; line-height:1.45; max-width:none; }
}

/* ---- Phone/tablet tuning: shorter portrait photo, compact footer --------- */
@media (max-width:860px){ .proper2__photo{ aspect-ratio:4/3; } }

@media (max-width:1024px){
  .footer__crest{ padding-block:34px 28px; gap:18px; }
  .footer__crest .logo img{ height:60px; }
  .footer__top{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px 22px; padding-bottom:34px; }
  .footer__brand, .footer__top > .footer__col:last-child{ grid-column:1 / -1; }
  .footer__brand p{ max-width:56ch; }
  .footer__col li{ margin-bottom:9px; font-size:15px; }
  .footer__contact{ display:grid; gap:4px 28px; }
  .footer__bar{ padding-block:20px 26px; gap:10px; }
}
@media (min-width:641px) and (max-width:1024px){
  .footer__contact{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:420px){
  .footer__top{ grid-template-columns:1fr; }
  .footer__crest .logo img{ height:52px; }
  .footer__bar p{ line-height:1.5; }
  .footer__legal{ gap:16px; flex-wrap:wrap; justify-content:center; }
}

/* ---- Mobile action dock: two floating rounded buttons, not a flat bar ---- */
.stickybar{
  left:10px; right:10px; bottom:calc(10px + env(safe-area-inset-bottom)); gap:10px; padding:0; background:transparent; border-top:0;
  filter:drop-shadow(0 14px 26px rgba(0,19,56,.28));
}
.stickybar a{ min-height:54px; padding:0 14px; border-radius:18px; font-size:15.5px; font-weight:700; letter-spacing:.005em; transition:transform .2s var(--ease); }
.stickybar a:active{ transform:scale(.97); }
.stickybar__call{ flex:0 0 40%; background:var(--white); color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--line); }
.stickybar__call svg{ width:18px; height:18px; padding:7px; box-sizing:content-box; border-radius:50%; background:color-mix(in srgb,var(--blue) 12%,transparent); color:var(--blue-600); }
.stickybar__quote{ flex:1; background:var(--grad-flow); color:var(--white); }
.stickybar__quote::after{ content:"\2192"; margin-left:8px; font-size:17px; }
body{ padding-bottom:86px; }
@media (min-width:1025px){ body{ padding-bottom:0; } }

/* ---- The Full Range v2: editorial index, type-led, ruled rows ------------ */
.range__head{ display:grid; gap:18px 64px; align-items:end; margin-bottom:clamp(36px,5vw,64px); }
@media (min-width:861px){ .range__head{ grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); } }
.range__head .label{ display:block; margin-bottom:12px; }
.range__head h2{ font-size:clamp(34px,5vw,64px); line-height:1.02; max-width:14ch; }
.range__head .opener__lede{ max-width:46ch; }
.range__body{ display:grid; gap:34px; align-items:start; }
@media (min-width:1025px){ .range__body{ grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr); gap:clamp(40px,5vw,72px); } .range__lead{ position:sticky; top:120px; } }
.range__lead{ display:block; color:var(--ink); }
.range__photo{ aspect-ratio:4/5; overflow:hidden; border-radius:var(--radius-lg); background:var(--mist); }
@media (max-width:1024px){ .range__photo{ aspect-ratio:16/10; } }
.range__photo .media-fill{ transition:transform .9s var(--ease); }
.range__lead:hover .range__photo .media-fill{ transform:scale(1.04); }
.range__lead-tag{ display:block; margin-top:14px; font-family:var(--font-display); font-weight:700; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--slate); }
.range__list{ border-top:2px solid var(--ink); }
.range__row{
  display:grid; grid-template-columns:44px minmax(0,1fr) auto; gap:4px 18px; align-items:start; padding:clamp(20px,2.4vw,30px) 0;
  border-bottom:1px solid var(--line); color:var(--ink); transition:padding .35s var(--ease), background .35s var(--ease);
}
.range__row:hover{ background:var(--white); padding-inline:clamp(12px,1.6vw,22px); }
.range__n{ font-family:var(--font-display); font-weight:700; font-size:14px; letter-spacing:.08em; color:var(--blue-600); padding-top:.7em; }
.range__main{ display:flex; flex-direction:column; gap:8px; min-width:0; }
.range__name{ font-family:var(--font-display); font-weight:700; font-size:clamp(26px,3.4vw,44px); line-height:1.05; letter-spacing:-.025em; transition:color .3s; }
.range__row:hover .range__name{ color:var(--blue-600); }
.range__blurb{ font-size:15px; line-height:1.6; color:var(--slate); max-width:56ch; }
.range__aud{ grid-column:3; grid-row:1; align-self:start; padding-top:.9em; font-family:var(--font-display); font-weight:700; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--slate); }
.range__go{ position:absolute; opacity:0; }
@media (max-width:640px){
  .range__row{ grid-template-columns:30px minmax(0,1fr); }
  .range__aud{ grid-column:2; grid-row:auto; padding-top:0; }
}

/* ---- Rebate cards: no underline bar; a bubble swells from the corner ------ */
.rebate__card::after{ display:none; }
.rebate__card{ isolation:isolate; }
.rebate__card > *{ position:relative; z-index:1; }
.rebate__card::before{
  content:""; position:absolute; z-index:0; right:-46px; top:-46px; width:92px; height:92px; border-radius:50%;
  background:linear-gradient(150deg,color-mix(in srgb,var(--cyan) 38%,transparent),color-mix(in srgb,var(--blue) 30%,transparent));
  transform:scale(.55); opacity:.75; transition:transform .65s var(--ease), opacity .45s var(--ease);
}
.rebate__card:hover::before{ transform:scale(9); opacity:.16; }
.rebate__card:hover{ transform:none; box-shadow:0 22px 48px rgba(0,19,56,.12); }
.rebate__card:hover .rebate__n{ -webkit-text-stroke-color:var(--blue); }

/* ---- Proof strip v3: continues the navy ribbon band, no floating card ----- */
.ribbon{ padding-bottom:0; }
.proof{ background:var(--navy); color:var(--white); padding-bottom:clamp(44px,6vw,80px); }
.proof .metrics{
  margin:0; background:transparent; border:0; border-top:1px solid rgba(255,255,255,.16); border-radius:0; box-shadow:none; overflow:visible;
  padding-top:clamp(8px,2vw,20px);
}
.proof .metric{ padding:clamp(24px,3vw,40px) clamp(18px,2.4vw,36px) 6px 0; background:transparent; border:0 !important; text-align:left; align-items:flex-start; }
.proof .metric::before{ display:none; }
@media (min-width:1025px){ .proof .metric + .metric{ border-left:1px solid rgba(255,255,255,.14) !important; padding-left:clamp(22px,2.6vw,40px); } }
@media (max-width:1024px){
  .proof .metric:nth-child(even){ border-left:1px solid rgba(255,255,255,.14) !important; padding-left:18px; }
  .proof .metric:nth-child(n+3){ border-top:1px solid rgba(255,255,255,.14) !important; }
}
.metric__i{ font-family:var(--font-display); font-weight:700; font-size:12px; letter-spacing:.2em; color:var(--cyan); margin-bottom:6px; }
.proof .metric__v{
  font-size:clamp(30px,4vw,56px); line-height:1; letter-spacing:-.03em; color:var(--white); background:none; -webkit-text-fill-color:currentColor; margin:0 0 10px;
}
.proof .metric__k{ color:var(--on-navy); font-size:clamp(13px,1.1vw,15.5px); line-height:1.55; max-width:30ch; }
.proof .metric__v{ font-size:clamp(26px,3.3vw,46px); white-space:nowrap; }

/* Proof strip alignment: dividers meet the top rule and every column
   stretches to the same height, so no loose or uneven lines. */
.proof .metrics{ padding-top:0; align-items:stretch; }
.proof .metric{ padding-top:clamp(26px,3vw,40px); padding-bottom:clamp(22px,2.6vw,34px); }
.ribbon__track{ padding-block:clamp(22px,2.6vw,34px); }

/* ---- Footer v2 ------------------------------------------------------------ */
.site-footer{ background:var(--navy); }
.ft__top{ display:grid; gap:36px; padding-block:clamp(48px,6vw,84px) clamp(36px,5vw,60px); border-bottom:1px solid rgba(255,255,255,.14); }
@media (min-width:861px){ .ft__top{ grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:72px; align-items:end; } }
.ft__brand img{ height:64px; width:auto; margin-bottom:20px; }
@media (min-width:861px){ .ft__brand img{ height:76px; } }
.ft__brand p{ max-width:46ch; font-size:16px; line-height:1.65; color:var(--on-navy); }
.ft__call{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
@media (min-width:861px){ .ft__call{ padding-left:56px; border-left:1px solid rgba(255,255,255,.14); } }
.ft__call-k{ font-family:var(--font-display); font-weight:700; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--cyan); }
.ft__call-n{ font-family:var(--font-display); font-weight:700; font-size:clamp(30px,4vw,48px); line-height:1.05; letter-spacing:-.025em; color:var(--white); }
.ft__call-n:hover{ color:var(--cyan); }
.ft__call-s{ font-size:14px; color:var(--on-navy-dim); margin-bottom:10px; }
.ft__cols{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:34px 24px; padding-block:clamp(36px,5vw,56px); }
@media (min-width:861px){ .ft__cols{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:1100px){ .ft__cols{ grid-template-columns:repeat(6,minmax(0,1fr)); gap:34px 28px; } .ft__col--contact{ grid-column:span 1; } }
.ft__col h4{ margin-bottom:14px; font-size:11px; letter-spacing:.2em; color:var(--cyan); }
.ft__col ul{ display:grid; gap:10px; }
.ft__col a, .ft__col address{ font-size:15px; line-height:1.5; color:var(--on-navy); font-style:normal; transition:color .2s, padding .25s var(--ease); }
.ft__col li a:hover{ color:var(--white); padding-left:5px; }
.ft__col--contact{ display:flex; flex-direction:column; gap:10px; grid-column:1 / -1; }
@media (min-width:861px) and (max-width:1099px){ .ft__col--contact{ grid-column:span 1; } }
.ft__col--contact a:hover{ color:var(--white); }
.ft__social{ margin-top:4px; font-family:var(--font-display); font-weight:700; color:var(--white) !important; border-bottom:1px solid var(--cyan); align-self:flex-start; }
.footer__bar{ border-top:1px solid rgba(255,255,255,.14); }
.site-footer .ft__call-n{ color:var(--white); }
.site-footer .ft__call-n:hover{ color:var(--cyan); }
.site-footer .btn--solid{ color:var(--white); }

/* Footer columns: four even columns (Residential, Commercial, Company, Visit). */
@media (min-width:861px){ .ft__cols{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:34px 40px; } .ft__col--contact{ grid-column:auto; } }
@media (min-width:1100px){ .ft__cols{ grid-template-columns:1.2fr 1.1fr .8fr 1.1fr; } }
.ft__col address{ margin:0; }
.ft__col--contact{ gap:12px; }
.ft__brand img{ margin-left:-14px; }

/* Timeline alignment: the rule runs through the centre of the badges, and
   all four cards stretch to the same height. */
.timeline__step{ align-items:stretch; }
.timeline__badge{ align-self:center; }
.timeline__card{ flex:1; }
@media (min-width:1025px){
  .timeline{ padding-top:0; }
  .timeline::before{ top:34px; left:calc(12.5% ); right:calc(12.5%); height:2px; opacity:.5; }
}
@media (min-width:1025px){
  .timeline::before{ z-index:2; left:12.5%; right:12.5%; height:2px; opacity:.65; }
  .timeline__badge{ z-index:3; }
}

/* Timeline: the connecting rule is gone. Four equal cards with badges read
   cleaner on their own. */
.timeline::before{ display:none !important; }

/* ==========================================================================
   Interior pages v2: calmer hero headline, then sections laid out as a
   heading column beside the copy, with a photo slot on every second
   text-heavy section.
   ========================================================================== */
.hero--page .hero__content h1{ font-size:clamp(34px,4.4vw,60px); max-width:20ch; line-height:1.06; }
.hero--page .hero__media{ box-shadow:0 30px 70px rgba(0,19,56,.18); }

.sec{ padding-block:clamp(56px,7vw,104px); }
.sec__grid{ display:grid; gap:clamp(22px,3vw,40px) clamp(36px,6vw,88px); align-items:start; }
.sec__head{ display:flex; flex-direction:column; gap:12px; }
.sec__n{ font-family:var(--font-display); font-weight:700; font-size:13px; letter-spacing:.2em; color:var(--blue-600); }
.sec__head h2{ font-size:clamp(26px,3.1vw,42px); line-height:1.1; max-width:16ch; }
.sec__body .prose{ max-width:none; }
.sec__body .prose p{ font-size:17px; line-height:1.75; color:#1f3358; max-width:64ch; }
.sec__body .prose h3{ margin:30px 0 10px; font-size:21px; }
.sec__photo{ aspect-ratio:5/4; overflow:hidden; border-radius:var(--radius-xl); background:var(--mist); box-shadow:0 26px 60px rgba(0,19,56,.16); }
@media (min-width:861px){
  .sec__grid{ grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr); }
  .sec__head{ position:sticky; top:120px; }
  .sec__grid--photo{ grid-template-columns:minmax(0,.7fr) minmax(0,1.1fr) minmax(0,.9fr); }
  .sec__grid--photo .sec__photo{ position:sticky; top:120px; }
  .sec__grid--flip{ grid-template-columns:minmax(0,.9fr) minmax(0,.7fr) minmax(0,1.1fr); }
  .sec__grid--flip .sec__photo{ order:-1; }
  .sec__grid--flip .sec__head{ order:0; }
}
@media (max-width:1100px) and (min-width:861px){
  .sec__grid--photo, .sec__grid--flip{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .sec__grid--photo .sec__head, .sec__grid--flip .sec__head{ grid-column:1 / -1; position:static; }
  .sec__grid--flip .sec__photo{ order:0; }
}
.sec .specs li{ padding-block:16px; }

/* ---- Inner-page components: numbered cards and tick cards ----------------- */
.sec__body .fgrid{ margin-top:22px; }
.fgrid{ display:grid; gap:16px; }
@media (min-width:641px){ .fgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1280px){ .sec__body .fgrid:not(.fgrid--list){ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.fcard{
  position:relative; overflow:hidden; isolation:isolate; display:flex; flex-direction:column; gap:8px; padding:26px 24px 24px;
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-xl);
  box-shadow:0 1px 2px rgba(0,19,56,.04), 0 10px 28px rgba(0,19,56,.06); transition:box-shadow .35s var(--ease);
}
.band--mist .fcard{ background:var(--white); }
.fcard::before{
  content:""; position:absolute; z-index:0; right:-46px; top:-46px; width:92px; height:92px; border-radius:50%;
  background:linear-gradient(150deg,color-mix(in srgb,var(--cyan) 38%,transparent),color-mix(in srgb,var(--blue) 30%,transparent));
  transform:scale(.55); opacity:.75; transition:transform .65s var(--ease), opacity .45s var(--ease);
}
.fcard:hover::before{ transform:scale(9); opacity:.14; }
.fcard:hover{ box-shadow:0 22px 48px rgba(0,19,56,.12); }
.fcard > *{ position:relative; z-index:1; }
.fcard__n{ font-family:var(--font-display); font-weight:700; font-size:40px; line-height:1; letter-spacing:-.04em; color:transparent; -webkit-text-stroke:1.2px color-mix(in srgb,var(--blue) 35%,var(--line)); }
.fcard h3{ font-size:19px; line-height:1.2; margin:4px 0 2px; }
.fcard p{ font-size:15px; line-height:1.65; color:var(--slate); margin:0 0 8px; max-width:none; }
.fcard p:last-child{ margin-bottom:0; }
.fcard .checks, .fcard .specs{ margin:6px 0 0; }

.checks{ display:grid; gap:10px; margin:6px 0 22px; padding:0; list-style:none; }
@media (min-width:641px){ .checks{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.checks li{ display:flex; gap:12px; align-items:flex-start; padding:14px 16px; background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); font-size:15px; line-height:1.55; color:#1f3358; }
.band--mist .checks li{ background:var(--white); }
.checks svg{ flex:none; width:18px; height:18px; margin-top:2px; padding:3px; box-sizing:content-box; border-radius:50%; color:var(--white); background:var(--grad-flow); }
.fcard .checks{ grid-template-columns:1fr; }
.fcard .checks li{ padding:10px 0; border:0; border-bottom:1px solid var(--line); border-radius:0; background:transparent; }
.fcard .checks li:last-child{ border-bottom:0; }

/* Section headings on inner pages never wait on a reveal animation. */
.sec__head, .sec__head > *{ clip-path:none !important; opacity:1 !important; transition:none !important; }
.reveal .sec__head h2{ clip-path:none !important; }

/* ---- Coverage v2: the supplied map, cropped to the artwork, blended onto
   the page so it has no box of its own. ----------------------------------- */
@media (min-width:861px){ .reach{ grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(32px,4vw,64px); } }
.reach__map{ margin:0; }
.reach__frame{ position:relative; overflow:hidden; aspect-ratio:1536 / 830; border-radius:var(--radius-xl); background:#fbfdff; }
.reach__frame img{ display:block; width:100%; height:auto; margin-top:-7.9%; mix-blend-mode:multiply; transition:transform 1.2s var(--ease); }
.reach__map:hover .reach__frame img{ transform:scale(1.025); }
.reach__map figcaption{ margin-top:14px; font-size:13.5px; line-height:1.5; color:var(--slate); text-align:center; }
@media (max-width:860px){ .reach__frame{ aspect-ratio:1536 / 800; } .reach__frame img{ margin-top:-7%; } }
.reach__frame{ aspect-ratio:1536 / 800; background:var(--white); box-shadow:0 26px 60px rgba(0,19,56,.12); }
.reach__frame img{ width:112%; max-width:none; margin-left:-5%; margin-top:-8.6%; }
@media (max-width:860px){ .reach__frame img{ margin-top:-8%; } }
.reach{ align-items:start; }

/* ---- Coverage v3: no card. The artwork multiplies straight onto the page
   colour, shows in full, and tilts gently toward the pointer. ------------- */
.reach__frame{ aspect-ratio:1536 / 860; overflow:hidden; background:transparent; box-shadow:none; border-radius:0; perspective:1200px; }
.reach__frame img{
  width:100%; max-width:none; margin:-7.4% 0 0 0; mix-blend-mode:multiply; will-change:transform;
  transform:rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg)) translate3d(var(--tx,0px),var(--ty,0px),0) scale(1.02);
  transition:transform .35s var(--ease); transform-style:preserve-3d;
}
.reach__map:hover .reach__frame img{ transform:rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg)) translate3d(var(--tx,0px),var(--ty,0px),0) scale(1.05); }
.reach__map figcaption{ text-align:left; }
@media (max-width:860px){ .reach__frame img{ margin-top:-7%; } }
.reach__frame{ perspective:none; overflow:clip; isolation:auto; }
.reach__frame img{
  transform:perspective(1200px) rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg)) translate3d(var(--tx,0px),var(--ty,0px),0) scale(1.02);
  transform-style:flat;
}
.reach__map:hover .reach__frame img{ transform:perspective(1200px) rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg)) translate3d(var(--tx,0px),var(--ty,0px),0) scale(1.05); }
.reach__frame{ display:flow-root; }
.reach__frame{
  aspect-ratio:1536 / 842;
  -webkit-mask-image:radial-gradient(ellipse 78% 76% at 50% 50%, #000 72%, transparent 100%);
  mask-image:radial-gradient(ellipse 78% 76% at 50% 50%, #000 72%, transparent 100%);
}

/* ==========================================================================
   PREMIUM LAYER. Loaded last so it refines every section consistently:
   restrained type, more air, softer layered shadows, hairline details,
   one smooth entrance animation. Nothing here changes content.
   ========================================================================== */
:root{
  --space:clamp(96px,10.5vw,176px);
  --shadow-soft:0 1px 1px rgba(0,19,56,.03), 0 2px 4px rgba(0,19,56,.03), 0 8px 16px rgba(0,19,56,.04), 0 24px 48px rgba(0,19,56,.06);
  --shadow-lift:0 2px 2px rgba(0,19,56,.03), 0 8px 16px rgba(0,19,56,.05), 0 24px 40px rgba(0,19,56,.08), 0 48px 80px rgba(0,19,56,.10);
}
::selection{ background:var(--navy); color:var(--white); }
body{ font-size:17px; line-height:1.65; text-rendering:optimizeLegibility; }

/* Type: tighter, quieter, more editorial */
h1{ letter-spacing:-.04em; line-height:1.02; }
h2{ letter-spacing:-.035em; line-height:1.05; }
h3{ letter-spacing:-.015em; }
.label{ display:inline-flex; align-items:center; gap:12px; font-size:11.5px; letter-spacing:.24em; }
.label::before{ content:""; width:28px; height:1px; background:currentColor; opacity:.6; }
.opener .label::before{ display:none; }
.lede, .opener__lede, .hero__lede{ font-weight:500; color:#4a5d78; }

/* Layered shadows on every card family */
.fcard, .rebate__card, .timeline__card, .qa__item, .brandgrid__card, .promises__card, .standard__card, .upg__row,
.checks li, .promise__item, .bento__tile, .qa__help, .table-wrap, .range__row:hover{
  box-shadow:var(--shadow-soft);
}
.fcard:hover, .rebate__card:hover, .timeline__step:hover .timeline__card, .qa__item:hover, .brandgrid__card:hover,
.promises__card:hover, .standard__card:hover, .upg__row:hover, .bento__tile:hover{ box-shadow:var(--shadow-lift); }
.hero__media, .proper2__photo, .sec__photo, .range__photo{ box-shadow:var(--shadow-lift); }
.fcard, .rebate__card, .timeline__card, .qa__item, .brandgrid__card, .promises__card, .standard__card, .upg__row{ border-color:rgba(0,19,56,.07); }

/* Buttons: deeper, calmer, with a crisp inner highlight instead of a big glow */
.btn{ border-radius:14px; letter-spacing:.005em; }
.btn--solid{
  background:linear-gradient(180deg,#1a78ff 0%,var(--blue) 55%,#0058e0 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 1px 2px rgba(0,40,120,.3), 0 10px 22px rgba(0,80,210,.22);
}
.btn--solid:hover{ box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 2px 4px rgba(0,40,120,.3), 0 16px 32px rgba(0,80,210,.3); }
.btn--line{ box-shadow:inset 0 0 0 1px rgba(0,19,56,.16); background:transparent; }
.band--mist .btn--line{ background:var(--white); }
.btn--line:hover{ box-shadow:inset 0 0 0 1px var(--ink); color:var(--ink); background:var(--white); }

/* Header: slimmer feel, hairline instead of a loud coloured rule */
.masthead::after{ height:1px; background:linear-gradient(90deg,transparent,rgba(0,103,253,.55) 20%,rgba(0,188,238,.55) 80%,transparent); }
.masthead--scrolled{ box-shadow:0 10px 40px rgba(0,19,56,.08); }

/* Section rhythm: hairlines between white bands, calmer mist tone */
.band--mist{ background:#f4f7fc; }
.band + .band:not(.band--mist){ border-top:1px solid rgba(0,19,56,.06); }

/* Smooth entrance: fade and rise, with a soft stagger inside grids.
   Replaces the older edge-wipe so headings and photos never half-appear. */
.js .reveal{ opacity:0; transform:translate3d(0,28px,0); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.js .reveal.shown{ opacity:1; transform:none; }
.reveal .label, .reveal h2, .reveal h3, .reveal p, .reveal .btn, .reveal .specs, .reveal .why__n,
.reveal .media-fill, .cards.reveal > *, .steps.reveal > *, .installs.reveal > *, .logos.reveal > *, .areas.reveal > *{
  clip-path:none !important; opacity:1 !important; transition-property:opacity,transform,box-shadow,background,border-color;
}
.js .reveal.shown > *:nth-child(2){ transition-delay:.08s; }
.js .reveal.shown > *:nth-child(3){ transition-delay:.16s; }
@media (prefers-reduced-motion:reduce){ .js .reveal{ opacity:1; transform:none; } }

/* Photos: slow, quiet zoom on hover */
.hero__media .media-fill, .proper2__photo .media-fill, .sec__photo .media-fill{ transition:transform 1.2s var(--ease); }
.hero__media:hover .media-fill, .proper2__photo:hover .media-fill, .sec__photo:hover .media-fill{ transform:scale(1.035); }

/* Reading progress bar */
.progress{ position:fixed; top:0; left:0; height:3px; width:100%; z-index:300; transform:scaleX(0); transform-origin:left; background:var(--grad-flow); pointer-events:none; }
.label::before{ display:none !important; }
.label::after{ content:""; width:28px; height:1px; background:currentColor; opacity:.55; }
.opener .label::after{ display:none; }

/* Hero alignment: copy and photo share one top and one bottom edge, on every
   page. The photo stretches to the full height of the copy column. */
@media (min-width:861px){
  .hero__grid{ align-items:stretch; }
  .hero__content{ justify-content:center; padding-block:clamp(8px,1.5vw,24px); }
  .hero__media{ aspect-ratio:auto; height:100%; min-height:clamp(380px,36vw,560px); }
  .hero__media .photo-ph, .hero__media picture, .hero__media .media-fill{ height:100%; }
  .hero__media .media-fill{ object-fit:cover; }
}

/* Exact edge alignment, and one headline scale for every hero. */
.hero__content h1{ font-size:clamp(34px,4.4vw,60px); max-width:20ch; line-height:1.05; }
@media (min-width:861px){
  .hero__content{ padding-block:0; justify-content:space-between; gap:0; }
  .hero__content > .label{ margin-top:0; }
  .hero__content > .hero__lede{ margin-top:clamp(14px,1.6vw,22px); }
  .hero__content > .hero__actions{ margin-top:auto; padding-top:clamp(22px,2.4vw,34px); }
  .hero__content > h1{ margin-top:clamp(14px,1.6vw,22px); }
  .hero__media{ min-height:clamp(400px,38vw,540px); }
}

/* One-screen hero: label to buttons always visible without scrolling. */
.hero{ padding-block:clamp(24px,4.2vh,64px); }
.hero__content h1{ font-size:clamp(32px,min(4.2vw,6.4vh),56px); }
@media (min-width:861px){
  .hero__lede{ font-size:clamp(16px,min(1.5vw,2.4vh),20px); }
  .hero__media{ min-height:300px; max-height:calc(100vh - 300px); }
  .hero__content > .hero__actions{ padding-top:clamp(16px,2vh,28px); }
}
@media (min-width:861px) and (max-height:760px){
  .hero__content h1{ font-size:clamp(30px,5.2vh,44px); }
  .hero__lede{ line-height:1.5; }
  .crumbs__list{ padding-block:8px; }
}

/* Coverage map v4: a genuinely transparent image, so no blending, masks or
   crops are needed. It simply sits on the page. */
.reach__frame{ aspect-ratio:auto; overflow:visible; display:block; background:none; box-shadow:none; border-radius:0; -webkit-mask-image:none; mask-image:none; }
.reach__frame picture{ display:block; }
.reach__frame img{ margin:0; width:100%; height:auto; mix-blend-mode:normal; filter:drop-shadow(0 22px 28px rgba(0,19,56,.16)); transform:perspective(1200px) rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg)) translate3d(var(--tx,0px),var(--ty,0px),0); }
.reach__map:hover .reach__frame img{ transform:perspective(1200px) rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg)) translate3d(var(--tx,0px),var(--ty,0px),0) scale(1.03); }
.reach__frame img{ filter:drop-shadow(0 12px 14px rgba(0,19,56,.13)); }

/* Hero v3: the hero fills the first screen on its own (nothing from the next
   section peeks in), with a larger headline and tight copy-to-button spacing. */
@media (min-width:861px){
  .hero{ display:flex; align-items:center; min-height:calc(100vh - 132px); min-height:calc(100svh - 132px); padding-block:clamp(20px,3.6vh,52px); }
  .crumbs + .hero{ min-height:calc(100vh - 180px); min-height:calc(100svh - 180px); }
  .hero__grid{ width:100%; align-items:stretch; }
  .hero__content h1{ font-size:clamp(38px,min(5.4vw,8.4vh),80px); line-height:1.03; max-width:16ch; }
  .hero__content{ justify-content:space-between; }
  .hero__content > .hero__lede{ margin-top:clamp(12px,1.6vh,22px); font-size:clamp(16px,min(1.5vw,2.5vh),21px); }
  .hero__content > .hero__actions{ margin-top:clamp(18px,3vh,32px); padding-top:0; }
  .hero__media{ min-height:clamp(380px,56vh,640px); max-height:none; }
}
@media (min-width:861px) and (max-height:760px){
  .hero__content h1{ font-size:clamp(32px,7.6vh,52px); }
}
@media (min-width:861px){
  .hero{ min-height:calc(100svh - 108px); }
  .crumbs + .hero{ min-height:calc(100svh - 154px); }
  .hero__content h1{ max-width:21ch; }
}
@media (min-width:861px){ .hero__content h1{ font-size:clamp(36px,min(3.9vw,7vh),66px); max-width:22ch; } }

/* ==========================================================================
   Hero colour: a deep navy-to-ocean-blue gradient with a faint engineering
   grid, shared by every page's hero. Light text, glass outline button.
   ========================================================================== */
.hero{
  position:relative; isolation:isolate; color:var(--white);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(0,103,253,.55) 0%, rgba(0,103,253,0) 55%),
    radial-gradient(90% 80% at 0% 100%, rgba(0,188,238,.20) 0%, rgba(0,188,238,0) 60%),
    linear-gradient(135deg,#001338 0%,#00204a 52%,#06356f 100%);
}
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:linear-gradient(115deg, #000 0%, rgba(0,0,0,.55) 45%, transparent 85%);
  mask-image:linear-gradient(115deg, #000 0%, rgba(0,0,0,.55) 45%, transparent 85%);
}
.hero .label{ color:var(--cyan); -webkit-text-fill-color:currentColor; background:none; }
.hero h1{ color:var(--white); }
.hero__lede{ color:rgba(255,255,255,.82); }
.hero .btn--line{ color:var(--white); background:rgba(255,255,255,.08); box-shadow:inset 0 0 0 1px rgba(255,255,255,.38); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.hero .btn--line:hover{ background:var(--white); color:var(--navy); box-shadow:inset 0 0 0 1px var(--white); }
.hero .btn--solid{ box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 1px 2px rgba(0,0,0,.3), 0 14px 30px rgba(0,120,255,.38); }
.hero__media{ box-shadow:0 40px 90px rgba(0,8,28,.55), 0 0 0 1px rgba(255,255,255,.14); }
/* breadcrumb sits above the dark hero: keep it light but tidy */
.crumbs{ background:var(--white); }

/* ==========================================================================
   Hero colour v2: bright. Sky-blue to aqua to white, soft pastel glows,
   a barely-there grid. Dark text. Overrides the earlier navy hero.
   ========================================================================== */
.hero{
  color:var(--ink);
  background:
    radial-gradient(70% 90% at 100% 0%, rgba(86,160,255,.45) 0%, rgba(86,160,255,0) 62%),
    radial-gradient(60% 80% at 0% 100%, rgba(105,225,244,.45) 0%, rgba(105,225,244,0) 62%),
    radial-gradient(40% 50% at 55% 110%, rgba(0,188,238,.2) 0%, rgba(190,170,255,0) 70%),
    linear-gradient(135deg,#f3f9ff 0%,#e2f1ff 38%,#d3f0fb 72%,#f4fbff 100%);
}
.hero::before{
  background-image:
    linear-gradient(rgba(0,103,253,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,103,253,.07) 1px, transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:linear-gradient(115deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.4) 50%, transparent 90%);
  mask-image:linear-gradient(115deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.4) 50%, transparent 90%);
}
.hero .label{ color:var(--blue-600); }
.hero h1{ color:var(--ink); }
.hero__lede{ color:#3d5273; }
.hero .btn--line{ color:var(--ink); background:rgba(255,255,255,.75); box-shadow:inset 0 0 0 1px rgba(0,19,56,.14); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.hero .btn--line:hover{ background:var(--white); color:var(--blue-600); box-shadow:inset 0 0 0 1px var(--blue); }
.hero .btn--solid{ box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 1px 2px rgba(0,40,120,.25), 0 14px 28px rgba(0,103,253,.28); }
.hero__media{ box-shadow:0 30px 70px rgba(0,60,160,.22), 0 0 0 6px rgba(255,255,255,.7); }
.crumbs{ background:#f4f9ff; }
.hero .photo-ph{ background:linear-gradient(150deg,#ffffff,#e6f3ff); }
.hero .photo-ph__note{ background:linear-gradient(150deg,rgba(255,255,255,.88),rgba(214,236,255,.9)); color:var(--ink); }
.hero .photo-ph__row{ color:#2a4268; }
.hero .photo-ph__row b, .hero .photo-ph__ico{ color:var(--blue-600); }
.hero .photo-ph .is-placeholder{ opacity:.25; }

/* Coverage map v5: magnifier lens replaces the tilt. The lens is drawn by
   js/main.js; with JS off or on touch screens the map simply sits at full size. */
.reach__frame{ position:relative; }
.reach__frame img,
.reach__map:hover .reach__frame img{ transform:none; transition:none; }
.reach__lens{
  position:absolute; left:0; top:0; z-index:3; width:clamp(150px,15vw,210px); aspect-ratio:1; border-radius:50%;
  background-color:#fff; background-repeat:no-repeat; pointer-events:none;
  box-shadow:0 0 0 5px #fff, 0 0 0 6px rgba(0,103,253,.35), 0 18px 40px rgba(0,19,56,.3), inset 0 0 22px rgba(0,60,160,.12);
  opacity:0; scale:.6; transition:opacity .2s ease, scale .25s cubic-bezier(.2,.8,.2,1);
  will-change:transform;
}
.reach__lens::after{ content:""; position:absolute; inset:0; border-radius:50%; background:radial-gradient(circle at 30% 24%, rgba(255,255,255,.55) 0, rgba(255,255,255,0) 38%); }
.reach__lens.is-on{ opacity:1; scale:1; }
@media (hover:hover) and (pointer:fine){ .reach__frame{ cursor:none; } }

/* ==========================================================================
   Hero colour v4: logo palette only (navy #001338, blue #0067FD, cyan #00BCEE)
   on a clean white ground. A dot-matrix cluster fades out of the top-right
   corner (blue to navy) and the bottom-left corner (cyan to blue), with a
   faint brand-gradient glow behind each and a thin logo-gradient rule along
   the bottom edge. Replaces the sunrise palette above.
   ========================================================================== */
.hero{
  background:
    linear-gradient(90deg,#001338 0%,#0067FD 55%,#00BCEE 100%) left bottom/100% 4px no-repeat,
    radial-gradient(46% 70% at 100% 0%, rgba(0,103,253,.13) 0%, rgba(0,103,253,0) 70%),
    radial-gradient(42% 62% at 0% 100%, rgba(0,188,238,.15) 0%, rgba(0,188,238,0) 70%),
    linear-gradient(135deg,#ffffff 0%,#f8fbff 55%,#f1f7ff 100%);
}
.hero::before,
.hero::after{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cg fill='%23000'%3E%3Ccircle cx='10' cy='10' r='1.7'/%3E%3Ccircle cx='10' cy='30' r='1.7'/%3E%3Ccircle cx='10' cy='50' r='1.7'/%3E%3Ccircle cx='30' cy='10' r='1.7'/%3E%3Ccircle cx='30' cy='50' r='1.7'/%3E%3Ccircle cx='50' cy='10' r='1.7'/%3E%3Ccircle cx='50' cy='30' r='1.7'/%3E%3Ccircle cx='50' cy='50' r='1.7'/%3E%3Ccircle cx='30' cy='30' r='3.8'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(closest-side, #000 0%, rgba(0,0,0,.55) 55%, transparent 100%);
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cg fill='%23000'%3E%3Ccircle cx='10' cy='10' r='1.7'/%3E%3Ccircle cx='10' cy='30' r='1.7'/%3E%3Ccircle cx='10' cy='50' r='1.7'/%3E%3Ccircle cx='30' cy='10' r='1.7'/%3E%3Ccircle cx='30' cy='50' r='1.7'/%3E%3Ccircle cx='50' cy='10' r='1.7'/%3E%3Ccircle cx='50' cy='30' r='1.7'/%3E%3Ccircle cx='50' cy='50' r='1.7'/%3E%3Ccircle cx='30' cy='30' r='3.8'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(closest-side, #000 0%, rgba(0,0,0,.55) 55%, transparent 100%);
  -webkit-mask-size:60px 60px, 100% 100%; mask-size:60px 60px, 100% 100%;
  -webkit-mask-repeat:repeat, no-repeat; mask-repeat:repeat, no-repeat;
  -webkit-mask-composite:source-in; mask-composite:intersect;
}
.hero::before{
  inset:auto; top:-8%; right:-6%; bottom:auto; left:auto; width:46%; height:78%;
  background:linear-gradient(225deg,#0067FD 0%,#0050D2 45%,#001338 100%);
  -webkit-mask-position:0 0, 100% 0; mask-position:0 0, 100% 0;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cg fill='%23000'%3E%3Ccircle cx='10' cy='10' r='1.7'/%3E%3Ccircle cx='10' cy='30' r='1.7'/%3E%3Ccircle cx='10' cy='50' r='1.7'/%3E%3Ccircle cx='30' cy='10' r='1.7'/%3E%3Ccircle cx='30' cy='50' r='1.7'/%3E%3Ccircle cx='50' cy='10' r='1.7'/%3E%3Ccircle cx='50' cy='30' r='1.7'/%3E%3Ccircle cx='50' cy='50' r='1.7'/%3E%3Ccircle cx='30' cy='30' r='3.8'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(70% 70% at 100% 0%, #000 0%, rgba(0,0,0,.5) 55%, transparent 100%);
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cg fill='%23000'%3E%3Ccircle cx='10' cy='10' r='1.7'/%3E%3Ccircle cx='10' cy='30' r='1.7'/%3E%3Ccircle cx='10' cy='50' r='1.7'/%3E%3Ccircle cx='30' cy='10' r='1.7'/%3E%3Ccircle cx='30' cy='50' r='1.7'/%3E%3Ccircle cx='50' cy='10' r='1.7'/%3E%3Ccircle cx='50' cy='30' r='1.7'/%3E%3Ccircle cx='50' cy='50' r='1.7'/%3E%3Ccircle cx='30' cy='30' r='3.8'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(70% 70% at 100% 0%, #000 0%, rgba(0,0,0,.5) 55%, transparent 100%);
  background-size:auto; background-repeat:no-repeat; opacity:.85;
}
.hero::after{
  bottom:-6%; left:-6%; width:44%; height:70%;
  background:linear-gradient(45deg,#00BCEE 0%,#0067FD 70%,#0050D2 100%);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cg fill='%23000'%3E%3Ccircle cx='10' cy='10' r='1.7'/%3E%3Ccircle cx='10' cy='30' r='1.7'/%3E%3Ccircle cx='10' cy='50' r='1.7'/%3E%3Ccircle cx='30' cy='10' r='1.7'/%3E%3Ccircle cx='30' cy='50' r='1.7'/%3E%3Ccircle cx='50' cy='10' r='1.7'/%3E%3Ccircle cx='50' cy='30' r='1.7'/%3E%3Ccircle cx='50' cy='50' r='1.7'/%3E%3Ccircle cx='30' cy='30' r='3.8'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(70% 70% at 0% 100%, #000 0%, rgba(0,0,0,.45) 55%, transparent 100%);
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cg fill='%23000'%3E%3Ccircle cx='10' cy='10' r='1.7'/%3E%3Ccircle cx='10' cy='30' r='1.7'/%3E%3Ccircle cx='10' cy='50' r='1.7'/%3E%3Ccircle cx='30' cy='10' r='1.7'/%3E%3Ccircle cx='30' cy='50' r='1.7'/%3E%3Ccircle cx='50' cy='10' r='1.7'/%3E%3Ccircle cx='50' cy='30' r='1.7'/%3E%3Ccircle cx='50' cy='50' r='1.7'/%3E%3Ccircle cx='30' cy='30' r='3.8'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(70% 70% at 0% 100%, #000 0%, rgba(0,0,0,.45) 55%, transparent 100%);
  opacity:.7;
}
@media (max-width:860px){
  .hero::before{ width:80%; height:42%; top:-4%; right:-14%; }
  .hero::after{ width:80%; height:34%; bottom:-3%; left:-14%; opacity:.5; }
}
.hero .label{ color:var(--blue-600); }
.hero__lede{ color:#3d5273; }
.hero .btn--line{ background:rgba(255,255,255,.9); box-shadow:inset 0 0 0 1px rgba(0,19,56,.16); }
.hero .btn--line:hover{ box-shadow:inset 0 0 0 1px var(--blue); }
.hero__media{ box-shadow:0 30px 70px rgba(0,60,160,.22), 0 0 0 6px #fff; }
.crumbs{ background:#fff; border-bottom-color:rgba(0,103,253,.12); }
.crumbs__list a{ color:inherit; }
.hero .photo-ph{ background:linear-gradient(150deg,#ffffff,#e9f3ff); }
.hero .photo-ph__note{ background:linear-gradient(150deg,rgba(255,255,255,.92),rgba(222,238,255,.94)); }
.hero .photo-ph__row{ color:#2a4268; }
.hero .photo-ph__row b, .hero .photo-ph__ico{ color:var(--blue-600); }

/* Hero background v5: calmer. Smaller, lighter dots in a tighter corner
   cluster, fainter glow, slimmer bottom rule. Nothing competes with the copy. */
.hero{
  background:
    linear-gradient(90deg,#001338 0%,#0067FD 55%,#00BCEE 100%) left bottom/100% 3px no-repeat,
    radial-gradient(40% 60% at 100% 0%, rgba(0,103,253,.07) 0%, rgba(0,103,253,0) 70%),
    radial-gradient(38% 55% at 0% 100%, rgba(0,188,238,.08) 0%, rgba(0,188,238,0) 70%),
    linear-gradient(135deg,#ffffff 0%,#fafcff 60%,#f5f9ff 100%);
}
.hero::before,
.hero::after{
  -webkit-mask-size:44px 44px, 100% 100%; mask-size:44px 44px, 100% 100%;
}
.hero::before{
  width:34%; height:56%; opacity:.38;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cg fill='%23000'%3E%3Ccircle cx='11' cy='11' r='1.3'/%3E%3Ccircle cx='33' cy='11' r='1.3'/%3E%3Ccircle cx='11' cy='33' r='1.3'/%3E%3Ccircle cx='33' cy='33' r='1.3'/%3E%3Ccircle cx='22' cy='22' r='2.2'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(70% 70% at 100% 0%, #000 0%, rgba(0,0,0,.4) 50%, transparent 100%);
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cg fill='%23000'%3E%3Ccircle cx='11' cy='11' r='1.3'/%3E%3Ccircle cx='33' cy='11' r='1.3'/%3E%3Ccircle cx='11' cy='33' r='1.3'/%3E%3Ccircle cx='33' cy='33' r='1.3'/%3E%3Ccircle cx='22' cy='22' r='2.2'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(70% 70% at 100% 0%, #000 0%, rgba(0,0,0,.4) 50%, transparent 100%);
}
.hero::after{
  width:32%; height:50%; opacity:.34;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cg fill='%23000'%3E%3Ccircle cx='11' cy='11' r='1.3'/%3E%3Ccircle cx='33' cy='11' r='1.3'/%3E%3Ccircle cx='11' cy='33' r='1.3'/%3E%3Ccircle cx='33' cy='33' r='1.3'/%3E%3Ccircle cx='22' cy='22' r='2.2'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(70% 70% at 0% 100%, #000 0%, rgba(0,0,0,.4) 50%, transparent 100%);
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cg fill='%23000'%3E%3Ccircle cx='11' cy='11' r='1.3'/%3E%3Ccircle cx='33' cy='11' r='1.3'/%3E%3Ccircle cx='11' cy='33' r='1.3'/%3E%3Ccircle cx='33' cy='33' r='1.3'/%3E%3Ccircle cx='22' cy='22' r='2.2'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(70% 70% at 0% 100%, #000 0%, rgba(0,0,0,.4) 50%, transparent 100%);
}
@media (max-width:860px){
  .hero::before{ width:62%; height:30%; right:-8%; opacity:.34; }
  .hero::after{ width:62%; height:24%; left:-8%; opacity:.28; }
}
/* Hero background v5b: dial the dots back up to a gentle, visible level. */
.hero::before{ width:38%; height:62%; opacity:.62; }
.hero::after{ width:36%; height:56%; opacity:.55; }
@media (max-width:860px){ .hero::before{ opacity:.55; } .hero::after{ opacity:.45; } }

/* ==========================================================================
   Ribbon + proof v4: one bright band under the hero. Service names drift past
   as floating pills (alternating white and brand-tint), then four lifted
   cards carry the reasons to get in touch. Replaces the navy band.
   ========================================================================== */
.ribbon{ background:#f4f8ff; border:0; padding:clamp(26px,3.4vw,44px) 0 0; }
.ribbon::before{ background:linear-gradient(90deg,#f4f8ff,rgba(244,248,255,0)); }
.ribbon::after{ background:linear-gradient(270deg,#f4f8ff,rgba(244,248,255,0)); }
.ribbon__track{ padding-block:6px; }
.ribbon__track__scroll{ animation-duration:70s; }
.ribbon__item,
.ribbon__item:nth-child(even){
  gap:10px; margin-right:clamp(10px,1.2vw,16px); padding:clamp(10px,1.2vw,14px) clamp(18px,2vw,28px);
  border-radius:999px; background:#fff; color:var(--ink); -webkit-text-stroke:0; -webkit-text-fill-color:currentColor;
  font-size:clamp(14px,1.35vw,18px); font-weight:700; letter-spacing:-.005em;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 0 0 1px rgba(0,103,253,.1), 0 8px 20px rgba(0,60,160,.07);
}
.ribbon__item::after{ display:none; }
.ribbon__item::before{ content:""; width:8px; height:8px; border-radius:50%; flex:none; background:linear-gradient(135deg,var(--cyan),var(--blue)); }
.ribbon__item:nth-child(3n+2),
.ribbon__item:nth-child(3n+2):nth-child(even){ background:linear-gradient(135deg,#e6f1ff,#e3f8ff); color:var(--blue-600); }
.ribbon__item:nth-child(4n){ background:var(--navy); color:#fff; box-shadow:0 10px 22px rgba(0,19,56,.2); }

.proof{ background:#f4f8ff; color:var(--ink); padding-block:clamp(18px,2.4vw,28px) clamp(48px,6vw,88px); }
.proof .metrics{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(10px,1.6vw,22px);
  margin:0; padding:0; border:0; border-radius:0; background:none; box-shadow:none; overflow:visible; align-items:stretch;
}
@media (min-width:1025px){ .proof .metrics{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.proof .metric,
.proof .metric + .metric,
.proof .metric:nth-child(even),
.proof .metric:nth-child(n+3){
  position:relative; display:flex; flex-direction:column; align-items:flex-start; text-align:left;
  padding:clamp(18px,2.2vw,30px) clamp(16px,2vw,28px) clamp(20px,2.4vw,32px);
  background:#fff; border:1px solid rgba(0,103,253,.1) !important; border-radius:var(--radius-lg);
  box-shadow:0 14px 34px rgba(0,50,140,.08); overflow:hidden;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.proof .metric::before{
  display:block; content:""; position:absolute; left:0; right:0; top:0; width:auto; height:4px; border-radius:0;
  background:linear-gradient(90deg,var(--navy),var(--blue) 55%,var(--cyan));
}
.proof .metric::after{
  content:""; position:absolute; right:-40px; bottom:-40px; width:130px; height:130px; border-radius:50%;
  background:radial-gradient(circle, rgba(0,188,238,.14), rgba(0,188,238,0) 70%); pointer-events:none;
}
.proof .metric:hover{ transform:translateY(-5px); box-shadow:0 26px 52px rgba(0,50,140,.15); }
.proof .metric__i{
  display:inline-flex; align-items:center; justify-content:center; min-width:34px; height:34px; padding-inline:10px; margin:6px 0 clamp(12px,1.6vw,20px);
  border-radius:999px; background:#e9f2ff; color:var(--blue-600); font-size:12px; letter-spacing:.12em;
}
.proof .metric__v{
  margin:0 0 10px; font-size:clamp(26px,3.4vw,46px); line-height:1.02; letter-spacing:-.03em; white-space:nowrap;
  background:linear-gradient(100deg,var(--navy) 10%,var(--blue) 90%); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
}
.proof .metric__k{ color:var(--slate); font-size:clamp(13px,1.1vw,15.5px); line-height:1.55; max-width:30ch; }
@media (max-width:540px){
  .proof .metric__v{ font-size:clamp(22px,7vw,30px); }
  .proof .metric__i{ min-width:30px; height:30px; margin-bottom:10px; }
}
/* Ribbon + proof v4b: room for the pill shadows, calmer headline gradient. */
.ribbon__track{ padding-block:8px clamp(26px,3vw,38px); }
.proof{ padding-top:0; }
.proof .metric__v{ background:linear-gradient(100deg,var(--navy) 55%,var(--blue-600) 100%); -webkit-background-clip:text; background-clip:text; }
/* Proof headline: solid navy reads cleaner than a gradient split across a word. */
.proof .metric__v{ background:none; color:var(--navy); -webkit-text-fill-color:var(--navy); }
.proof .metric:nth-child(1) .metric__v{ font-size:clamp(24px,2.9vw,40px); }

/* ==========================================================================
   Ribbon + proof v5: editorial. The services scroll as a quiet typographic
   ticker between two hairlines. Below it, an intro column sits beside four
   commitments set as ruled list items: no cards, shadows or glow, just type,
   space and one blue accent that runs out along each rule on hover.
   ========================================================================== */
.ribbon{ background:#fff; border-block:1px solid var(--line); padding:0; }
.ribbon::before{ background:linear-gradient(90deg,#fff,rgba(255,255,255,0)); }
.ribbon::after{ background:linear-gradient(270deg,#fff,rgba(255,255,255,0)); }
.ribbon__track{ padding-block:clamp(16px,1.8vw,22px); }
.ribbon__track__scroll{ animation-duration:80s; }
.ribbon .ribbon__item:nth-child(n):nth-child(n){
  gap:0; margin:0; padding:0; border-radius:0; background:none; box-shadow:none;
  color:#34476a; -webkit-text-stroke:0; -webkit-text-fill-color:currentColor;
  font-size:clamp(12px,1vw,13.5px); font-weight:700; letter-spacing:.16em; text-transform:uppercase;
}
.ribbon .ribbon__item::before{ display:none; }
.ribbon .ribbon__item::after{ display:block; content:""; width:clamp(20px,2.4vw,34px); height:1px; margin-inline:clamp(20px,2.6vw,38px); border-radius:0; background:var(--blue); opacity:.55; }

.proof{ background:#fff; color:var(--ink); padding:clamp(56px,7vw,112px) 0; }
.proof__grid{ display:grid; gap:clamp(32px,5vw,64px); align-items:start; }
@media (min-width:1025px){ .proof__grid{ grid-template-columns:minmax(0,.78fr) minmax(0,1.6fr); gap:clamp(56px,7vw,112px); } }
.proof__intro{ display:flex; flex-direction:column; align-items:flex-start; }
.proof__title{
  margin:18px 0 0; max-width:17ch; font-family:var(--font-display); font-weight:700; color:var(--ink);
  font-size:clamp(26px,2.7vw,40px); line-height:1.1; letter-spacing:-.025em;
}
.proof__link{
  display:inline-flex; align-items:center; gap:10px; margin-top:clamp(22px,2.4vw,32px); padding-bottom:4px;
  font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--blue-600);
  border-bottom:1.5px solid currentColor; transition:gap .3s var(--ease), color .2s ease;
}
.proof__link:hover{ gap:16px; color:var(--navy); }
.proof__list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(30px,4vw,56px) clamp(24px,4vw,64px); }
.proof__item{ position:relative; padding-top:22px; border-top:1px solid rgba(0,19,56,.16); }
.proof__item::before{ content:""; position:absolute; left:0; top:-1px; width:44px; height:2px; background:var(--blue); transition:width .6s var(--ease); }
.proof__item:hover::before{ width:100%; }
.proof__n{ display:block; margin-bottom:16px; font-family:var(--font-display); font-weight:700; font-size:12px; letter-spacing:.22em; color:var(--blue-600); }
.proof__h{ margin:0 0 10px; font-family:var(--font-display); font-weight:700; font-size:clamp(22px,2.4vw,34px); line-height:1.08; letter-spacing:-.025em; color:var(--ink); }
.proof__p{ margin:0; max-width:34ch; font-size:clamp(14px,1.15vw,16px); line-height:1.65; color:var(--slate); }
@media (max-width:540px){
  .proof__list{ gap:26px 18px; }
  .proof__item{ padding-top:16px; }
  .proof__n{ margin-bottom:10px; }
  .proof__h{ font-size:20px; }
  .proof__p{ font-size:13.5px; line-height:1.55; }
}

/* ==========================================================================
   No decorative lines. Labels become soft tinted chips instead of carrying a
   dash; the ticker, commitments, header and submenus drop their accent rules.
   Structural dividers (tables, FAQ rows, footer, coverage list) stay.
   ========================================================================== */
.label, .opener .label{
  display:inline-flex; align-items:center; padding:7px 14px; border-radius:999px;
  background:rgba(0,103,253,.08); color:var(--blue-600); font-size:11px; letter-spacing:.16em; gap:0;
}
.label::before, .label::after, .opener .label::before, .opener .label::after{ content:none !important; display:none !important; }
.label--rev{ background:rgba(255,255,255,.12); color:var(--cyan); }
.range__head .label{ display:inline-flex; }

/* hero: drop the bottom strip */
.hero{
  background:
    radial-gradient(40% 60% at 100% 0%, rgba(0,103,253,.07) 0%, rgba(0,103,253,0) 70%),
    radial-gradient(38% 55% at 0% 100%, rgba(0,188,238,.08) 0%, rgba(0,188,238,0) 70%),
    linear-gradient(135deg,#ffffff 0%,#fafcff 60%,#f5f9ff 100%);
}

/* header: soft shadow instead of a gradient hairline */
.masthead::after{ display:none; }
.masthead{ box-shadow:0 8px 28px rgba(0,19,56,.05); }
.masthead--scrolled{ box-shadow:0 10px 40px rgba(0,19,56,.09); }
.progress{ display:none; }

/* submenus */
.submenu__title::after, .submenu__lead::after{ display:none; }

/* draw-in rules and connectors */
.ledger::before, .faq::before, .why__item::after, .timeline::before, .footer__crest::before, .footer__crest::after{ display:none; }

/* ticker: spacing only */
.ribbon .ribbon__item::after{ display:none; }
.ribbon .ribbon__item:nth-child(n):nth-child(n){ margin-right:clamp(40px,5vw,84px); }

/* commitments: large pale numerals, no rules */
.proof__item{ padding-top:0; border-top:0; }
.proof__item::before{ display:none; }
.proof__n{
  margin-bottom:clamp(8px,1vw,14px); font-size:clamp(44px,5vw,72px); line-height:1; letter-spacing:-.04em; color:#cfe0ff;
  transition:color .4s var(--ease);
}
.proof__item:hover .proof__n{ color:var(--blue); }
.proof__link{ border-bottom:0; padding-bottom:0; }
@media (max-width:540px){ .proof__n{ font-size:40px; margin-bottom:8px; } }

/* ==========================================================================
   Brands v2: one tinted panel per equipment type. Title and description on the
   left, three generous white logo tiles on the right. Logos rest in calm
   greyscale and bloom to full colour as the tile lifts. No icons, no rules.
   ========================================================================== */
.bfams{ display:grid; gap:clamp(12px,1.6vw,20px); }
.bfam{
  display:grid; gap:clamp(18px,2.4vw,40px); align-items:center;
  padding:clamp(18px,2.4vw,30px); border-radius:clamp(22px,2.4vw,32px);
  background:linear-gradient(120deg,#f3f8ff 0%,#eaf3ff 100%);
  transition:background .4s var(--ease);
}
.bfam:hover{ background:linear-gradient(120deg,#eef5ff 0%,#e2f0ff 100%); }
@media (min-width:861px){ .bfam{ grid-template-columns:minmax(0,.9fr) minmax(0,2.1fr); padding-left:clamp(28px,3.2vw,48px); } }
.bfam__text h3{ margin:0 0 8px; font-size:clamp(21px,2.1vw,28px); line-height:1.1; letter-spacing:-.02em; color:var(--ink); }
.bfam__text p{ margin:0; max-width:34ch; font-size:clamp(14px,1.1vw,15.5px); line-height:1.6; color:var(--slate); }
.bfam__logos{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(8px,1.2vw,16px); }
.bfam__tile{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; overflow:hidden;
  min-height:clamp(84px,9vw,124px); padding:clamp(12px,1.6vw,22px); border-radius:clamp(14px,1.6vw,22px);
  background:#fff; box-shadow:0 6px 18px rgba(0,50,140,.06);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.bfam__tile::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .45s var(--ease);
  background:radial-gradient(90% 80% at 50% 0%, rgba(0,188,238,.16), rgba(0,103,253,0) 70%);
}
.bfam__tile img{ position:relative; display:block; width:100%; max-width:min(100%,170px); height:clamp(28px,3.4vw,46px); object-fit:contain; transition:filter .45s var(--ease), opacity .45s var(--ease), transform .45s var(--ease); }
.bfam__name{ position:relative; font-family:var(--font-display); font-weight:700; font-size:clamp(9px,.8vw,11px); letter-spacing:.06em; text-transform:uppercase; text-align:center; color:var(--ink); }
.bfam__tile--named img{ height:clamp(24px,2.8vw,36px); }
@media (hover:hover){
  .bfam__tile img{ filter:grayscale(1) contrast(.95); opacity:.62; }
  .bfam__tile:hover{ transform:translateY(-6px); box-shadow:0 22px 44px rgba(0,60,160,.16); }
  .bfam__tile:hover::before{ opacity:1; }
  .bfam__tile:hover img{ filter:none; opacity:1; transform:scale(1.06); }
}
@media (max-width:540px){
  .bfam{ padding:18px 14px 14px; }
  .bfam__logos{ gap:8px; }
  .bfam__tile{ min-height:78px; padding:10px 8px; border-radius:14px; }
  .bfam__tile img{ height:26px; }
}

/* Coverage map stays pinned under the header while the state list scrolls, and
   is released when the section ends. Side-by-side layout and tall-enough
   screens only; otherwise it scrolls normally. */
@media (min-width:861px) and (min-height:640px){
  .reach{ align-items:stretch; }
  .reach__map{ position:sticky; top:calc(108px + clamp(12px,3vh,32px)); align-self:start; }
}

/* ==========================================================================
   Inner pages brought in line with the home page.
   ========================================================================== */
/* Hero label is a chip like every other label (an older hero rule stripped it). */
.hero .label, .hero__content > .label{
  background:rgba(0,103,253,.08); color:var(--blue-600); -webkit-text-fill-color:currentColor;
}

/* Section numbers share the chip language; heading + body in two columns, the
   photo sits inside the body column instead of squeezing in as a third. */
.sec__n{ align-self:flex-start; padding:6px 12px; border-radius:999px; background:rgba(0,103,253,.08); font-size:11px; letter-spacing:.16em; }
.sec__body > .sec__photo{ aspect-ratio:16/9; }
.sec__body > .sec__photo:first-child{ margin:0 0 clamp(24px,3vw,36px); }
.sec__body > .sec__photo:last-child{ margin:clamp(26px,3vw,40px) 0 0; }
.sec__body .prose .fgrid ~ p, .sec__body .prose .fgrid--list ~ p{ margin-top:26px; }

/* Placeholders read as light, bright frames everywhere (hero and sections). */
.photo-ph{ background:linear-gradient(150deg,#ffffff,#e6f3ff); }
.photo-ph__note{ background:linear-gradient(150deg,rgba(255,255,255,.92),rgba(214,236,255,.94)); color:var(--ink); }
.photo-ph__row{ color:#2a4268; }
.photo-ph__row b, .photo-ph__ico{ color:var(--blue-600); }
.photo-ph .is-placeholder{ display:none; }

/* Tables: light header, in step with the brighter pages. */
.table-wrap{ border-color:rgba(0,103,253,.12); }
.table-wrap thead th{ background:#e8f1ff; color:var(--ink); font-size:12.5px; letter-spacing:.04em; }
.table-wrap tbody tr:nth-child(even){ background:#f7faff; }

/* "Compare the options" hub cards: numbered, bubble swells on hover. */
.pcards{ display:grid; gap:clamp(14px,1.8vw,22px); }
@media (min-width:700px){ .pcards{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1024px){ .pcards{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.pcard{
  position:relative; display:flex; flex-direction:column; gap:10px; overflow:hidden; color:inherit;
  padding:clamp(22px,2.4vw,32px); border-radius:var(--radius-xl); background:#fff; box-shadow:0 10px 30px rgba(0,50,140,.07);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.pcard::before{
  content:""; position:absolute; right:-70px; top:-70px; width:130px; height:130px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(0,188,238,.2), rgba(0,103,253,.07) 70%); opacity:0; transform:scale(.4);
  transition:transform .7s var(--ease), opacity .5s var(--ease);
}
.pcard > *{ position:relative; }
.pcard:hover{ transform:translateY(-6px); box-shadow:0 26px 54px rgba(0,60,160,.16); }
.pcard:hover::before{ opacity:1; transform:scale(2.6); }
.pcard__n{ font-family:var(--font-display); font-weight:700; font-size:clamp(40px,4vw,56px); line-height:1; letter-spacing:-.04em; color:#cfe0ff; transition:color .4s var(--ease); }
.pcard:hover .pcard__n{ color:var(--blue); }
.pcard h3{ margin:6px 0 0; font-size:clamp(20px,1.9vw,26px); line-height:1.15; color:var(--ink); }
.pcard p{ margin:0; font-size:15px; line-height:1.6; color:var(--slate); }
.pcard__more{ margin-top:auto; padding-top:14px; display:inline-flex; gap:8px; font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--blue-600); }
.pcard__more span{ transition:transform .3s var(--ease); }
.pcard:hover .pcard__more span{ transform:translateX(5px); }

/* Hero key-figure chips (the "spec strip" on battery and package pages). */
.hero__specs{ display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none; }
.hero__specs li{
  padding:7px 14px; border-radius:999px; background:#fff; color:var(--ink);
  font-family:var(--font-display); font-weight:700; font-size:clamp(12px,1vw,13.5px); line-height:1.2;
  box-shadow:0 0 0 1px rgba(0,103,253,.14), 0 4px 12px rgba(0,60,160,.06);
}
.hero__lede + .hero__specs{ margin-top:14px; }

/* Hub cards v2: each card is one article with a stretched title link, quick
   links to its own sub-pages as chips, and a related-pages row beneath. */
.pcard > h3{ position:static; }
.pcard__link{ color:inherit; text-decoration:none; }
.pcard__link::after{ content:""; position:absolute; inset:0; z-index:1; border-radius:inherit; }
.pcard__chips{ position:relative; z-index:2; display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 0; padding:0; list-style:none; }
.pcard__chips a{
  display:inline-block; padding:7px 13px; border-radius:999px; background:#eaf2ff; color:var(--blue-600);
  font-family:var(--font-display); font-weight:700; font-size:13px; line-height:1.2;
  transition:background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.pcard__chips a:hover{ background:var(--blue); color:#fff; transform:translateY(-2px); }
@media (min-width:800px){ .pcards--feature{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.pcards--feature .pcard{
  padding:clamp(26px,3.2vw,44px); gap:12px;
  background:linear-gradient(145deg,#ffffff 0%,#f1f7ff 100%);
}
.pcards--feature .pcard__n{ font-size:clamp(54px,6vw,84px); }
.pcards--feature .pcard h3{ font-size:clamp(24px,2.5vw,34px); }
.pcards--feature .pcard p{ font-size:clamp(15px,1.2vw,17px); max-width:46ch; }

.related{ margin-top:clamp(40px,5vw,72px); }
.related__k{ margin:0 0 16px; font-family:var(--font-display); font-weight:700; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--slate); }
.related__row{ display:grid; gap:clamp(10px,1.4vw,16px); grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr)); }
.rcard{
  position:relative; display:flex; flex-direction:column; gap:6px; padding:20px 22px 56px; border-radius:22px;
  background:rgba(255,255,255,.7); box-shadow:0 0 0 1px rgba(0,103,253,.1); color:inherit;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), background .4s var(--ease);
}
.rcard__t{ font-family:var(--font-display); font-weight:700; font-size:17px; line-height:1.2; color:var(--ink); }
.rcard__d{ font-size:14px; line-height:1.5; color:var(--slate); }
.rcard__a{
  position:absolute; right:18px; bottom:16px; width:34px; height:34px; display:grid; place-items:center; border-radius:50%;
  background:#eaf2ff; color:var(--blue-600); font-size:16px; transition:background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.rcard:hover{ background:#fff; transform:translateY(-5px); box-shadow:0 0 0 1px rgba(0,103,253,.16), 0 20px 40px rgba(0,60,160,.12); }
.rcard:hover .rcard__a{ background:var(--blue); color:#fff; transform:translateX(3px); }

/* ==========================================================================
   Breadcrumbs v2: a soft rounded track that sits on the hero's own ground
   (no bar, no border line). Quiet parent links with a hover tint, chevron
   separators, a small home glyph, and the current page set apart in a tint.
   On phones it collapses to "parent > current".
   ========================================================================== */
.crumbs{ background:linear-gradient(180deg,#fff 0%,#fcfdff 100%); border:0; }
.crumbs__list{
  display:inline-flex; align-items:center; flex-wrap:nowrap; max-width:100%; margin:0; padding:5px; gap:2px; list-style:none;
  border-radius:999px; background:#fff; box-shadow:0 0 0 1px rgba(0,103,253,.1), 0 8px 22px rgba(0,60,160,.06);
  font-size:13px; font-weight:600; overflow:hidden;
}
.crumbs .wrap{ padding-block:10px; }
.crumbs__list li{ display:flex; align-items:center; gap:2px; min-width:0; }
.crumbs__list li:not(:last-child)::after{
  content:""; flex:none; width:6px; height:6px; margin:0 6px 0 2px; border:solid currentColor; border-width:1.5px 1.5px 0 0;
  transform:rotate(45deg); color:#9db4d6; opacity:1;
}
.crumbs__list a, .crumbs__list li[aria-current] .crumbs__label, .crumbs__list li:not(:has(a)) .crumbs__label{
  display:inline-flex; align-items:center; gap:7px; min-width:0; padding:7px 13px; border-radius:999px; line-height:1;
}
.crumbs__list a{ color:#5a6f8e; transition:background .25s var(--ease), color .25s var(--ease); }
.crumbs__list a:hover{ background:#eaf2ff; color:var(--blue-600); }
.crumbs__ico{ flex:none; width:14px; height:14px; margin-top:-1px; }
.crumbs__label{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.crumbs__list li[aria-current]{ min-width:0; }
.crumbs__list li[aria-current] .crumbs__label{ background:linear-gradient(135deg,#e9f2ff,#e2f6ff); color:var(--ink); font-weight:700; max-width:44ch; }
@media (max-width:640px){
  .crumbs__list li:not(:nth-last-child(-n+2)){ display:none; }
  .crumbs__list a, .crumbs__list li[aria-current] .crumbs__label{ padding:7px 11px; }
  .crumbs__list li:not(:last-child) a .crumbs__label{ max-width:42vw; }
  .crumbs__list li[aria-current] .crumbs__label{ max-width:34vw; }
}
@media (min-width:861px){
  .crumbs + .hero{ min-height:calc(100vh - 166px); min-height:calc(100svh - 166px); }
}

/* Breadcrumbs v2b: the hero background runs underneath the trail, so there is
   no strip, seam or border between them; the trail shrinks instead of overflowing. */
:root{ --crumb-h:58px; }
.crumbs{ position:relative; z-index:3; background:transparent; margin-bottom:calc(var(--crumb-h) * -1); }
.crumbs + .hero{ padding-top:calc(var(--crumb-h) + clamp(24px,4.2vh,64px)); }
@media (min-width:861px){
  .crumbs + .hero{ min-height:calc(100vh - 108px); min-height:calc(100svh - 108px); padding-top:calc(var(--crumb-h) + clamp(20px,3.6vh,52px)); }
}
.crumbs__list li{ flex:0 1 auto; }
.crumbs__list a{ max-width:100%; }
@media (max-width:640px){
  .crumbs__list li:not(:last-child) a .crumbs__label, .crumbs__list li[aria-current] .crumbs__label{ max-width:none; }
}

/* Brands on inner pages: a single category gets larger tiles so it still feels full. */
.bfams--one .bfam__tile{ min-height:clamp(96px,11vw,150px); }
.bfams--one .bfam__tile img{ height:clamp(34px,4.2vw,56px); }
.bfams--one .bfam__text h3{ font-size:clamp(24px,2.6vw,34px); }
@media (min-width:861px){ .bfams--one .bfam{ grid-template-columns:minmax(0,.8fr) minmax(0,2.2fr); } }

/* "Our promise" intro stays pinned under the header while the four commitments
   scroll past, and is released when the section ends. Side-by-side layout only. */
@media (min-width:1025px) and (min-height:560px){
  .proof__intro{ position:sticky; top:calc(108px + clamp(16px,4vh,40px)); align-self:start; }
}

/* Desktop: the four commitments become one spacious column of rows (numeral
   left, title and text right), which gives the pinned intro room to travel. */
@media (min-width:1025px){
  .proof__list{ grid-template-columns:1fr; gap:clamp(34px,4vw,56px); }
  .proof__item{ display:grid; grid-template-columns:clamp(84px,8vw,124px) minmax(0,1fr); column-gap:clamp(18px,2.4vw,36px); align-items:start; }
  .proof__n{ grid-row:1 / span 2; margin:0; font-size:clamp(56px,6vw,88px); }
  .proof__h{ align-self:end; margin:0 0 8px; font-size:clamp(26px,2.6vw,38px); }
  .proof__p{ max-width:46ch; font-size:clamp(15px,1.2vw,17px); }
}

/* "Done Properly": the photo stays pinned under the header while the copy
   scrolls, and is released when the section ends. Side-by-side layout only;
   the photo is capped to the window height so it never outgrows the screen. */
@media (min-width:861px){
  .proper2__grid{ align-items:start; }
  .proper2__media{ position:sticky; top:calc(108px + clamp(14px,3vh,32px)); align-self:start; }
  .proper2__photo{ max-height:max(380px, calc(100svh - 108px - 120px)); }
}

/* ==========================================================================
   Install quality + commitments, merged: a bright brand-blue band with one
   white "job sign-off" sheet. The intro stays pinned while the sheet scrolls.
   (overflow:clip, not hidden, so the sticky intro still works.)
   ========================================================================== */
.signoff{
  position:relative; overflow:clip; color:#fff; padding-block:clamp(64px,8vw,120px);
  background:linear-gradient(135deg,#0050D2 0%,#0067FD 52%,#0096E6 100%);
}
.signoff::before{
  content:""; position:absolute; left:-8%; bottom:-22%; width:48%; height:76%; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.3) 1.5px, transparent 1.9px); background-size:22px 22px;
  -webkit-mask-image:radial-gradient(closest-side,#000 0%,transparent 100%); mask-image:radial-gradient(closest-side,#000 0%,transparent 100%);
}
.signoff__grid{ position:relative; display:grid; gap:clamp(32px,5vw,56px); align-items:start; }
@media (min-width:1025px){
  .signoff__grid{ grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(48px,7vw,104px); }
  .signoff__intro{ position:sticky; top:calc(108px + clamp(16px,4vh,40px)); }
}
.signoff__intro{ display:flex; flex-direction:column; align-items:flex-start; gap:18px; }
.signoff .label{ background:rgba(255,255,255,.18); color:#fff; }
.signoff__intro h2{ margin:0; color:#fff; font-size:clamp(30px,3.6vw,50px); line-height:1.06; letter-spacing:-.025em; max-width:15ch; }
.signoff__lede{ margin:0; max-width:44ch; font-size:clamp(16px,1.3vw,19px); line-height:1.6; color:rgba(255,255,255,.9); }
.signoff__cta{ margin-top:6px; background:#fff; color:var(--blue-600); box-shadow:0 14px 30px rgba(0,19,56,.25); }
.signoff__cta:hover{ background:var(--navy); color:#fff; }
.signoff__sheet{
  position:relative; color:var(--ink); background:#fff; border-radius:clamp(24px,2.6vw,34px);
  padding:clamp(24px,3.2vw,44px); box-shadow:0 40px 90px rgba(0,19,56,.32);
}
.signoff__head{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:clamp(22px,2.6vw,34px); }
.signoff__tag{ padding:7px 14px; border-radius:999px; background:rgba(0,103,253,.08); color:var(--blue-600); font-family:var(--font-display); font-weight:700; font-size:12px; letter-spacing:.16em; text-transform:uppercase; }
.signoff__lic{ font-size:13px; font-weight:600; color:var(--slate); }
.signoff__list{ list-style:none; margin:0; padding:0; display:grid; gap:clamp(22px,2.6vw,32px); }
.signoff__list li{ display:grid; grid-template-columns:36px minmax(0,1fr); gap:clamp(14px,1.6vw,20px); align-items:start; }
.signoff__tick{ width:36px; height:36px; display:grid; place-items:center; border-radius:50%; color:#fff; background:linear-gradient(135deg,var(--blue),var(--cyan)); box-shadow:0 8px 18px rgba(0,103,253,.3); }
.signoff__tick svg{ width:18px; height:18px; }
.signoff__list h3{ margin:2px 0 6px; font-size:clamp(19px,1.8vw,24px); line-height:1.15; color:var(--ink); }
.signoff__list p{ margin:0; font-size:clamp(14px,1.1vw,15.5px); line-height:1.65; color:var(--slate); }
.signoff__foot{ margin:clamp(24px,3vw,36px) 0 0; padding:16px 20px; border-radius:18px; background:#f1f7ff; font-size:14.5px; color:var(--slate); }
.signoff__foot a{ font-weight:700; color:var(--blue-600); }

/* Existing systems: heading and intro pinned on the left, the four upgrade
   rows and the "already have solar?" panel scroll on the right. */
.upg2__grid{ display:grid; gap:clamp(28px,4vw,48px); align-items:start; }
@media (min-width:1025px){
  .upg2__grid{ grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr); gap:clamp(40px,6vw,88px); }
  .upg2__intro{ position:sticky; top:calc(108px + clamp(16px,4vh,40px)); }
}
.upg2__intro{ display:flex; flex-direction:column; align-items:flex-start; gap:16px; }
.upg2__intro h2{ margin:0; font-size:clamp(30px,3.4vw,46px); line-height:1.08; letter-spacing:-.025em; max-width:14ch; }
.upg2__main{ display:grid; gap:clamp(14px,1.6vw,20px); }
.upg2__main .upg__panel{ margin-top:clamp(10px,2vw,26px); position:relative; top:auto; }

/* ---- /solar-battery/ audit fixes (apply to every interior page) ---------- */
/* Feature cards: no idle corner sliver, pale numerals like the hub cards. */
.fcard::before{ opacity:0; transform:scale(.4); }
.fcard:hover::before{ opacity:1; transform:scale(3.2); }
.fcard{ border:0; box-shadow:0 10px 30px rgba(0,50,140,.07); }
.fcard:hover{ box-shadow:0 24px 50px rgba(0,60,160,.14); }
.fcard__n{ color:#cfe0ff; -webkit-text-stroke:0; font-size:clamp(38px,3.4vw,50px); transition:color .4s var(--ease); }
.fcard:hover .fcard__n{ color:var(--blue); }

/* Ticks: bold lead, softer cards. */
.checks li{ border:0; box-shadow:0 8px 22px rgba(0,50,140,.07); }
.checks li b{ color:var(--ink); font-family:var(--font-display); }
.checks li > span{ line-height:1.55; }

/* Numbered steps (process headings). */
.checks--steps{ counter-reset:none; }
.checks--steps li{ align-items:flex-start; }
.checks__n{
  flex:none; width:30px; height:30px; display:grid; place-items:center; border-radius:50%;
  background:linear-gradient(135deg,var(--blue),var(--cyan)); color:#fff; font-family:var(--font-display); font-weight:700; font-size:13px;
  box-shadow:0 6px 14px rgba(0,103,253,.28);
}

/* Closing call-to-action section. */
.sec__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(18px,2.4vw,28px); }
.sec--cta{ padding-block:clamp(44px,5.4vw,80px); }

/* "Important Information" reads as a fine-print note, not a headline section. */
.sec--note{ padding-block:clamp(28px,3.4vw,48px); background:#fff; }
.sec--note .sec__head h2{ font-size:clamp(18px,1.6vw,22px); max-width:none; }
.sec--note .sec__body .prose p{ font-size:14px; line-height:1.7; color:var(--slate); max-width:78ch; }

/* Mobile overflow fix: grid children may shrink below their content, so a wide
   table scrolls inside its own wrapper instead of stretching the whole section. */
.sec__grid{ grid-template-columns:minmax(0,1fr); }
.sec__grid > *, .sec__body, .sec__body > *, .prose{ min-width:0; }
.table-wrap{ max-width:100%; -webkit-overflow-scrolling:touch; }
@media (min-width:861px){ .sec__grid{ grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr); } }
html, body{ overflow-x:clip; }
/* Home crumb never truncates; only the long current-page label does. */
.crumbs__list li:first-child{ flex:none; }
.crumbs__list li:first-child a .crumbs__label{ overflow:visible; max-width:none; }
@media (max-width:640px){
  .table-wrap table{ min-width:0; font-size:13px; }
  .table-wrap th, .table-wrap td{ padding:11px 10px; }
  .table-wrap thead th{ font-size:11.5px; letter-spacing:.02em; }
}

/* Hub band is mist; the FAQ right after it goes white so they do not merge. */
.hub{ padding-bottom:clamp(48px,6vw,88px); }
.hub + .band--mist{ background:#fff; }
.cta-band h2{ margin-bottom:12px; }
.cta-band__inner p{ margin-top:0; }

/* Breadcrumbs v3: a taller zone so the trail sits vertically centred and
   left-aligned with clear white space above and below it. */
:root{ --crumb-h:88px; }
.crumbs .wrap{ display:flex; align-items:center; min-height:var(--crumb-h); padding-block:0; }
.crumbs__list{ margin:0; }
.crumbs + .hero{ padding-top:calc(var(--crumb-h) + clamp(4px,1.6vh,20px)); }
@media (min-width:861px){
  .crumbs + .hero{ padding-top:calc(var(--crumb-h) + clamp(4px,1.6vh,16px)); }
}
@media (max-width:640px){
  :root{ --crumb-h:72px; }
}

/* Long trails: the parent shrinks first, the current page truncates with an ellipsis. */
.crumbs__list li[aria-current] .crumbs__label{ display:block; line-height:1; }
@media (max-width:640px){
  .crumbs__list li:not(:last-child):not(:first-child){ flex:0 20 auto; }
  .crumbs__list li[aria-current]{ flex:0 1 auto; }
}

/* ==========================================================================
   Header v3. Same height and logo; the three links sit in a soft rounded
   track with a white pill that glides under the pointer (see js/main.js),
   the section you are in carries a small blue dot, and the quote button is a
   gradient with a sliding arrow. A frosted-glass bar replaces the flat white.
   ========================================================================== */
.masthead{
  background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:saturate(180%) blur(22px); backdrop-filter:saturate(180%) blur(22px);
  box-shadow:0 1px 0 rgba(0,19,56,.03), 0 12px 32px rgba(0,50,140,.05);
  transition:box-shadow .3s var(--ease), background .3s var(--ease);
}
.masthead--scrolled{ background:rgba(255,255,255,.94); box-shadow:0 14px 40px rgba(0,50,140,.12); }

.mainnav__list{
  position:relative; gap:2px; padding:5px; border-radius:999px;
  background:linear-gradient(180deg,rgba(0,103,253,.05),rgba(0,188,238,.06));
  box-shadow:inset 0 0 0 1px rgba(0,103,253,.07);
}
.mainnav__pill{
  position:absolute; left:0; top:5px; bottom:5px; width:0; border-radius:999px; pointer-events:none; list-style:none;
  background:#fff; box-shadow:0 6px 18px rgba(0,60,160,.14), 0 0 0 1px rgba(0,103,253,.08);
  opacity:0; transition:transform .45s var(--ease), width .45s var(--ease), opacity .25s ease;
}
.mainnav__pill.on{ opacity:1; }
.mainnav__item{ position:relative; z-index:1; }
.mainnav__link{
  padding:12px 22px; border-radius:999px; font-size:16.5px; font-weight:700; letter-spacing:0; color:#17294d;
  transition:color .25s var(--ease);
}
.mainnav__link::after{ display:none; }
.mainnav__link:hover, .mainnav__link[aria-expanded="true"]{ background:transparent; transform:none; color:var(--blue-600); }
.mainnav__link.is-current{ color:var(--blue-600); }
.mainnav__link.is-current::before{
  content:""; width:6px; height:6px; border-radius:50%; margin-right:2px; flex:none;
  background:linear-gradient(135deg,var(--blue),var(--cyan)); box-shadow:0 0 0 3px rgba(0,103,253,.14);
}
.mainnav__link svg{ width:13px; height:13px; }

.mast-cta{
  display:inline-flex; align-items:center; gap:10px; border-radius:999px; padding-right:12px;
  background:linear-gradient(135deg,#1a7bff 0%,#0067FD 45%,#0050D2 100%); color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 10px 24px rgba(0,103,253,.34);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.mast-cta:hover{ transform:translateY(-2px); box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 16px 32px rgba(0,103,253,.42); }
.mast-cta__arr{ width:28px; height:28px; display:grid; place-items:center; border-radius:50%; background:rgba(255,255,255,.2); transition:transform .3s var(--ease), background .3s var(--ease); }
.mast-cta__arr svg{ width:15px; height:15px; }
.mast-cta:hover .mast-cta__arr{ transform:translateX(3px); background:rgba(255,255,255,.32); }
@media (max-width:1024px){ .mast-cta{ padding:10px 10px 10px 18px; font-size:14px; gap:8px; } .mast-cta__arr{ width:24px; height:24px; } }
@media (max-width:420px){ .mast-cta__arr{ display:none; } .mast-cta{ padding:11px 16px; } }

/* Mobile menu button: a rounded chip that matches the nav track. */
.burger{ border-radius:14px; background:linear-gradient(180deg,rgba(0,103,253,.07),rgba(0,188,238,.08)); box-shadow:inset 0 0 0 1px rgba(0,103,253,.08); }
.burger span{ height:2px; border-radius:2px; }
@media (min-width:641px){ .crumbs__list li[aria-current] .crumbs__label{ max-width:80ch; } }

/* ==========================================================================
   Reading rhythm: lead paragraph, fine-print notes, package cards, legal index.
   ========================================================================== */
.sec__body .prose p{ margin:0 0 1.05em; }
.sec__body .prose p:last-child{ margin-bottom:0; }
.sec__body .prose p.lead{ font-size:clamp(18px,1.5vw,21px); line-height:1.65; font-weight:500; color:var(--ink); max-width:60ch; }
.sec__body .prose p.note{
  max-width:64ch; margin-top:clamp(14px,1.6vw,22px); padding:14px 18px; border-radius:16px;
  background:#eaf3ff; color:#33507d; font-size:14px; line-height:1.6;
}
.sec__body .prose p.note::before{ content:"Good to know"; display:block; margin-bottom:4px; font-family:var(--font-display); font-weight:700; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--blue-600); }
.band--mist .sec__body .prose p.note{ background:#fff; box-shadow:0 0 0 1px rgba(0,103,253,.1); }

/* Package summaries */
.pkgs{ display:grid; gap:clamp(12px,1.6vw,18px); margin:clamp(14px,1.6vw,22px) 0; }
@media (min-width:700px){ .pkgs{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:861px) and (max-width:1180px){ .pkgs{ grid-template-columns:1fr; } }
.pkg{ display:flex; flex-direction:column; gap:8px; padding:clamp(18px,2vw,24px); border-radius:22px; background:#fff; box-shadow:0 10px 28px rgba(0,50,140,.08); transition:transform .4s var(--ease), box-shadow .4s var(--ease); }
.band--mist .pkg{ background:#fff; }
.pkg:hover{ transform:translateY(-5px); box-shadow:0 22px 44px rgba(0,60,160,.14); }
.sec__body .prose .pkg h3{ margin:0; font-size:clamp(18px,1.6vw,21px); line-height:1.2; color:var(--blue-600); }
.sec__body .prose .pkg p{ margin:0; font-size:14.5px; line-height:1.55; color:var(--slate); }
.sec__body .prose .pkg p.pkg__lead{ color:var(--ink); font-weight:600; font-size:15.5px; }
.sec__body .prose .pkg p.pkg__price{ margin-top:auto; padding:12px 14px; border-radius:14px; background:linear-gradient(135deg,#e9f2ff,#e2f6ff); }
.pkg__price small{ display:block; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--slate); font-weight:600; }
.pkg__price b{ display:block; margin-top:2px; font-family:var(--font-display); font-size:clamp(16px,1.4vw,19px); color:var(--ink); }

/* Legal pages: jump index, tighter sections, no duplicate number chip. */
.toc-band{ background:#fff; }
.toc__k{ margin:0 0 14px; font-family:var(--font-display); font-weight:700; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--slate); }
.toc{ list-style:none; margin:0; padding:0; display:grid; gap:8px; counter-reset:toc; }
@media (min-width:600px){ .toc{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1000px){ .toc{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.toc li{ counter-increment:toc; }
.toc a{
  display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:14px; background:#f3f8ff; color:var(--ink);
  font-size:14.5px; font-weight:600; line-height:1.3; transition:background .25s var(--ease), transform .25s var(--ease), color .25s var(--ease);
}
.toc a::before{
  content:counter(toc); flex:none; width:28px; height:28px; display:grid; place-items:center; border-radius:50%;
  background:#fff; color:var(--blue-600); font-family:var(--font-display); font-weight:700; font-size:12px; box-shadow:0 0 0 1px rgba(0,103,253,.12);
}
.toc a:hover{ background:#e4efff; color:var(--blue-600); transform:translateX(3px); }
.sec--legal{ padding-block:clamp(34px,4.4vw,64px); scroll-margin-top:110px; }
.sec--legal .sec__n{ display:none; }
.sec--legal .sec__head h2{ font-size:clamp(20px,2vw,28px); max-width:none; }
.sec--legal .sec__body .prose p{ font-size:15.5px; line-height:1.7; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

/* Package cards as horizontal rows: copy left, price right. */
.pkgs{ grid-template-columns:1fr !important; }
.pkg{ display:grid; gap:6px clamp(18px,3vw,36px); align-items:center; }
@media (min-width:640px){
  .pkg{ grid-template-columns:minmax(0,1fr) minmax(190px,.46fr); }
  .pkg > h3, .pkg > .pkg__lead, .pkg > .pkg__more{ grid-column:1; }
  .pkg > .pkg__price{ grid-column:2; grid-row:1 / span 3; margin:0; align-self:stretch; display:flex; flex-direction:column; justify-content:center; }
}
.sec__body .prose p.note{ max-width:none; }
.sec--note .sec__body .prose p.note{ padding:0; background:none; box-shadow:none; color:var(--slate); }
.sec--note .sec__body .prose p.note::before{ display:none; }

/* Rebate cards: no idle corner sliver; the bubble appears on hover only. */
.rebate__card::before{ opacity:0; transform:scale(.4); }
.rebate__card:hover::before{ opacity:.16; transform:scale(9); }


/* ==========================================================================
   Logo palette, one system.
   Navy #001338 / blue #0067FD / cyan #00BCEE (+ their tints) are the only
   hues on the site. Primary buttons share one gradient; bands on blue share
   one gradient; secondary buttons are navy outline; third-party logos are
   shown monochrome so manufacturer reds and greens never leak in.
   ========================================================================== */
:root{
  --grad-cta: linear-gradient(135deg,#0096E6 0%,#0067FD 52%,#0050D2 100%);
  --grad-band: linear-gradient(135deg,#0050D2 0%,#0067FD 52%,#0096E6 100%);
  --grad-navy: linear-gradient(155deg,#001338 0%,#00204A 100%);
}

/* Primary CTA: header, hero, sections, forms, sticky bar. */
.btn--solid, .mast-cta, .stickybar__quote, .qmodal__submit{
  background:var(--grad-cta); color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 10px 24px rgba(0,103,253,.32);
}
.btn--solid:hover, .mast-cta:hover, .stickybar__quote:hover, .qmodal__submit:hover{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 16px 34px rgba(0,103,253,.42);
}
/* Secondary CTA: navy outline, blue on hover. */
.btn--line{ color:var(--navy); background:#fff; box-shadow:inset 0 0 0 1.5px rgba(0,19,56,.18); }
.btn--line:hover{ color:var(--blue-600); background:#fff; box-shadow:inset 0 0 0 1.5px var(--blue); }
.band--mist .btn--line{ background:#fff; }
/* On blue or navy bands the primary flips to white with blue text. */
.cta-band .btn--solid, .signoff__cta, .metrics__cta .btn--solid{
  background:#fff; color:var(--blue-600); box-shadow:0 14px 30px rgba(0,19,56,.28);
}
.cta-band .btn--solid:hover, .signoff__cta:hover, .metrics__cta .btn--solid:hover{ background:var(--navy); color:#fff; }
.cta-band .btn--line{ background:rgba(255,255,255,.12); color:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6); }
.cta-band .btn--line:hover{ background:#fff; color:var(--blue-600); }

/* Bands: blue sections use the brand-blue gradient, dark ones the navy one. */
.cta-band, .signoff{ background:var(--grad-band); }
.assess, .site-footer, .upg__panel{ background:var(--grad-navy); }

/* Third-party logos stay monochrome; hover darkens and lifts, never recolours. */
.bfam__tile img{ filter:grayscale(1) contrast(1.05); opacity:.72; }
@media (hover:hover){
  .bfam__tile img{ filter:grayscale(1) contrast(1.05); opacity:.72; }
  .bfam__tile:hover img{ filter:grayscale(1) contrast(1.15); opacity:1; transform:scale(1.06); }
}

/* Popup: Cancel / Close controls, and a clear "tap outside to close" feel. */
.qmodal__cancel{ margin-top:10px; }
.qmodal__done{ margin-top:18px; }
.qmodal__close{ background:rgba(255,255,255,.2); }
.qmodal__close:hover{ background:rgba(255,255,255,.34); }
.qmodal{ cursor:pointer; }
.qmodal__panel{ cursor:auto; }

/* ==========================================================================
   Popup fits one screen. The panel is capped to the visible height and its
   spacing steps down as the screen gets shorter, so the whole form (heading
   through Cancel) is visible without scrolling. The scrollbar is hidden as a
   last-resort safety net only.
   ========================================================================== */
.qmodal{ padding:10px; }
.qmodal__panel{ max-height:calc(100vh - 20px); max-height:calc(100dvh - 20px); scrollbar-width:none; -ms-overflow-style:none; }
.qmodal__panel::-webkit-scrollbar{ display:none; }
.qmodal__head{ padding:22px 26px 18px; padding-right:56px; }
.qmodal__head h2{ font-size:clamp(21px,3.4vw,26px); }
.qmodal__head p{ font-size:13px; margin-top:4px; }
.qmodal__body{ padding:16px 22px 16px; }
@media (min-width:541px){ .qmodal__head{ padding:24px 32px 20px; padding-right:60px; } .qmodal__body{ padding:18px 32px 18px; } }
.mfield{ margin-bottom:9px; gap:3px; }
.mfield input, .mfield select, .mfield textarea{ padding:9px 12px; font-size:14px; }
.mfield textarea{ min-height:0; height:46px; resize:none; }
.qmodal__consent{ margin:0 0 9px; font-size:11px; line-height:1.35; }
.qmodal .btn--block{ padding:12px 18px; }
.qmodal__cancel{ margin-top:7px; }
.qmodal__alt{ margin-top:8px; font-size:12.5px; }
@media (max-width:340px){ .mfield-row{ grid-template-columns:1fr; } }
@media (min-width:341px) and (max-width:400px){ .mfield-row{ grid-template-columns:1fr 1fr; } }

@media (max-height:760px){
  .qmodal__head{ padding-top:16px; padding-bottom:12px; }
  .qmodal__head .label{ margin-bottom:4px; }
  .qmodal__head p{ display:none; }
  .qmodal__body{ padding-top:12px; padding-bottom:12px; }
  .mfield{ margin-bottom:7px; }
  .mfield input, .mfield select{ padding:7px 11px; }
  .mfield textarea{ height:38px; padding:7px 11px; }
}
@media (max-height:620px){
  .qmodal__head{ padding-top:12px; padding-bottom:9px; }
  .qmodal__head .label{ display:none; }
  .qmodal__consent{ display:none; }
  .qmodal__alt{ display:none; }
  .qmodal .btn--block{ padding:10px 16px; }
}

/* ==========================================================================
   Header v4: every state. Dropdown rows with icon chips, hover arrow and a
   staggered entrance; navy lead card; compact bar once you scroll; keyboard
   focus rings; a proper mobile drawer (logo, close, icons, staggered links).
   Titles only in the dropdowns on purpose (kept simple, as requested).
   ========================================================================== */
/* -- Dropdown panel -- */
.submenu__inner{
  grid-template-columns:minmax(0,.72fr) minmax(0,2.28fr); padding:22px 24px; border:0;
  box-shadow:0 30px 80px rgba(0,30,90,.2), 0 0 0 1px rgba(0,103,253,.08);
}
.submenu__cols{ grid-template-columns:repeat(var(--cols,3),minmax(0,1fr)); gap:6px 22px; align-content:start; }
.submenu__col{ min-width:0; }
.submenu__title{ margin:2px 0 8px 2px; font-size:10.5px; letter-spacing:.2em; color:var(--blue-600); }
.submenu__title::after{ display:none; }
.submenu__col ul{ gap:2px; }
.submenu__col li{ margin:0; }
.submenu__col a.mi{
  display:grid; grid-template-columns:38px minmax(0,1fr) 22px; align-items:center; gap:12px; margin:0; padding:7px 10px 7px 7px;
  border-radius:16px; transform:none; transition:background .25s var(--ease);
}
.submenu__col a.mi::after{ display:none; }
.submenu__col a.mi:hover, .submenu__col a.mi:focus-visible{ background:#eef5ff; transform:none; }
.mi__ico{
  width:38px; height:38px; display:grid; place-items:center; border-radius:12px; color:var(--blue-600);
  background:linear-gradient(135deg,#e8f1ff,#e1f6ff); transition:background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.mi__ico svg{ width:19px; height:19px; }
.mi__t{ display:block; font-family:var(--font-display); font-weight:700; font-size:15px; line-height:1.25; color:var(--ink); transition:color .2s var(--ease); }
.mi__d{ display:none; }
.mi__go{ width:22px; height:22px; display:grid; place-items:center; color:var(--blue); opacity:0; transform:translateX(-6px); transition:opacity .25s var(--ease), transform .25s var(--ease); }
.mi__go svg{ width:16px; height:16px; }
.submenu__col a.mi:hover .mi__ico, .submenu__col a.mi:focus-visible .mi__ico{ background:var(--grad-cta); color:#fff; transform:scale(1.06) rotate(-4deg); }
.submenu__col a.mi:hover .mi__t, .submenu__col a.mi:focus-visible .mi__t{ color:var(--blue-600); }
.submenu__col a.mi:hover .mi__go, .submenu__col a.mi:focus-visible .mi__go{ opacity:1; transform:none; }
.submenu__col a.mi[aria-current="page"] .mi__ico{ background:var(--grad-cta); color:#fff; }
.submenu__col a.mi[aria-current="page"] .mi__t{ color:var(--blue-600); }

/* staggered entrance */
.submenu .submenu__lead, .submenu .mi, .submenu .submenu__strip{ opacity:0; transform:translateY(8px); transition:opacity .35s var(--ease), transform .35s var(--ease), background .25s var(--ease); }
.submenu.is-open .submenu__lead, .submenu.is-open .mi, .submenu.is-open .submenu__strip{ opacity:1; transform:none; }
.submenu.is-open .submenu__lead{ transition-delay:.04s; }
.submenu.is-open .submenu__col li:nth-child(1) .mi{ transition-delay:.08s; }
.submenu.is-open .submenu__col li:nth-child(2) .mi{ transition-delay:.12s; }
.submenu.is-open .submenu__col li:nth-child(3) .mi{ transition-delay:.16s; }
.submenu.is-open .submenu__col li:nth-child(4) .mi{ transition-delay:.2s; }
.submenu.is-open .submenu__strip{ transition-delay:.22s; }

/* lead card: navy gradient with a soft glow and a sliding arrow */
.submenu__lead{
  position:relative; overflow:hidden; isolation:isolate; color:#fff; background:var(--grad-navy);
  box-shadow:0 18px 38px rgba(0,19,56,.3);
}
.submenu__lead::before{ content:""; position:absolute; z-index:-1; right:-50px; top:-50px; width:170px; height:170px; border-radius:50%; background:radial-gradient(circle,rgba(0,188,238,.5),rgba(0,103,253,0) 70%); }
.submenu__lead::after{ display:none; }
.submenu__lead:hover{ background:var(--grad-navy); box-shadow:0 22px 44px rgba(0,19,56,.38); }
.submenu__lead-eyebrow{ color:var(--cyan); }
.submenu__lead-title{ color:#fff; }
.submenu__lead-note{ color:rgba(255,255,255,.78); }
.submenu__lead-go{ background:#fff; color:var(--blue-600); border-radius:999px; align-self:flex-start; transition:gap .25s var(--ease); display:inline-flex; gap:6px; }
.submenu__lead:hover .submenu__lead-go{ gap:12px; }
.submenu__strip{ background:linear-gradient(135deg,#eef5ff,#e8f8ff); }

/* -- Compact bar after scrolling (smooth, no layout jump at the top) -- */
@media (min-width:1025px){
  .masthead__inner{ transition:min-height .35s var(--ease); }
  .masthead .logo img{ transition:height .35s var(--ease); }
  .masthead--compact .masthead__inner{ min-height:84px; }
  .masthead--compact .logo img{ height:62px; }
}

/* -- Keyboard focus -- */
.mainnav__link:focus-visible, .mast-cta:focus-visible, .burger:focus-visible, .drawer a:focus-visible, .drawer button:focus-visible, .logo:focus-visible{
  outline:2px solid var(--blue); outline-offset:3px; border-radius:999px;
}
.mi:focus-visible{ outline:2px solid var(--blue); outline-offset:-2px; }
.mainnav__link:focus-visible{ background:transparent; }

/* -- Mobile drawer -- */
.drawer{ padding:0; background:#fff; border:0; box-shadow:-30px 0 80px rgba(0,19,56,.25); }
.drawer__head{ position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px var(--gutter); background:rgba(255,255,255,.94); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
.drawer__logo img{ height:46px; width:auto; display:block; }
.drawer__close{ width:42px; height:42px; display:grid; place-items:center; border:0; border-radius:14px; cursor:pointer; color:var(--ink); background:linear-gradient(180deg,rgba(0,103,253,.07),rgba(0,188,238,.08)); box-shadow:inset 0 0 0 1px rgba(0,103,253,.08); transition:transform .3s var(--ease), background .3s var(--ease); }
.drawer__close:hover{ transform:rotate(90deg); background:#e4efff; }
.drawer__close svg{ width:18px; height:18px; }
.acc{ border:0; margin:0 calc(var(--gutter) * .6) 8px; border-radius:20px; background:#f5f9ff; overflow:hidden; }
.acc__top{ padding:16px 18px; font-size:18px; font-weight:700; }
.acc__top[aria-expanded="true"]{ color:var(--blue-600); }
.acc__mark{ width:28px; height:28px; border-radius:50%; background:#fff; box-shadow:0 0 0 1px rgba(0,103,253,.12); }
.acc__mark::before{ left:8px; right:8px; }
.acc__mark::after{ top:8px; bottom:8px; }
.acc__body{ padding:0 10px 12px; }
.acc__title{ margin:12px 10px 4px; font-size:10px; color:var(--blue-600); }
.acc__body a{ display:flex; align-items:center; gap:12px; padding:9px 10px; border-radius:14px; font-weight:600; font-size:15.5px; transition:background .2s var(--ease), color .2s var(--ease); }
.acc__body a:hover, .acc__body a[aria-current="page"]{ background:#fff; color:var(--blue-600); }
.dr__ico{ flex:none; width:34px; height:34px; display:grid; place-items:center; border-radius:11px; color:var(--blue-600); background:linear-gradient(135deg,#e8f1ff,#e1f6ff); }
.dr__ico svg{ width:17px; height:17px; }
.drawer__foot{ position:sticky; bottom:0; margin-top:auto; padding:14px var(--gutter) calc(18px + env(safe-area-inset-bottom,0px)); background:linear-gradient(180deg,rgba(255,255,255,0),#fff 28%); }
.drawer.open .acc{ animation:fs-drawer-in .5s var(--ease) both; }
.drawer.open .acc:nth-of-type(2){ animation-delay:.06s; }
.drawer.open .acc:nth-of-type(3){ animation-delay:.12s; }
@keyframes fs-drawer-in{ from{ opacity:0; transform:translateX(18px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .drawer.open .acc{ animation:none; } .submenu .mi, .submenu .submenu__lead, .submenu .submenu__strip{ transition:none; opacity:1; transform:none; } }
.drawer__head{ padding-inline:calc(var(--gutter) * .6 + 6px); }
.drawer__logo img{ height:52px; }

/* ==========================================================================
   Hamburger and drawer, finished. Three lines that morph into a clean X, a
   labelled menu button, and a "start here" lead card at the top of each group.
   ========================================================================== */
.burger{ position:relative; width:46px; height:46px; margin-right:0; border-radius:15px; gap:0; }
.burger span{ position:absolute; left:50%; width:20px; height:2px; margin-left:-10px; border-radius:2px; background:var(--ink); transition:transform .35s var(--ease), opacity .2s ease, width .3s var(--ease), background .25s ease; }
.burger span:nth-child(1){ top:15px; }
.burger span:nth-child(2){ top:22px; width:14px; margin-left:-10px; }
.burger span:nth-child(3){ top:29px; }
.burger:hover span:nth-child(2){ width:20px; }
.burger.open span:nth-child(1){ top:22px; transform:rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; width:0; }
.burger.open span:nth-child(3){ top:22px; transform:rotate(-45deg); }
.burger:active{ transform:scale(.94); }

.dr__lead{
  display:flex !important; align-items:center; justify-content:space-between; gap:12px; margin:2px 0 6px; padding:14px 16px !important;
  border-radius:16px !important; background:var(--grad-navy) !important; color:#fff !important; box-shadow:0 12px 26px rgba(0,19,56,.22);
}
.dr__lead span{ display:flex; flex-direction:column; gap:2px; font-family:var(--font-display); font-weight:700; font-size:16px; line-height:1.2; }
.dr__lead small{ font-size:10px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--cyan); }
.dr__lead svg{ flex:none; width:20px; height:20px; padding:7px; box-sizing:content-box; border-radius:50%; background:rgba(255,255,255,.14); transition:transform .3s var(--ease), background .3s var(--ease); }
.dr__lead:hover svg{ transform:translateX(3px); background:rgba(255,255,255,.26); }
.acc__body a.dr__lead:hover{ color:#fff !important; background:var(--grad-navy) !important; }
.burger:hover, .burger:focus-visible{ background:linear-gradient(180deg,rgba(0,103,253,.13),rgba(0,188,238,.15)); }
.burger.open{ background:var(--grad-cta); box-shadow:0 8px 18px rgba(0,103,253,.3); }
.burger.open span{ background:#fff; }
/* No "current section" dot or tint on the top links; the pill shows hover/open only. */
.mainnav__link.is-current::before{ display:none; }
.mainnav__link.is-current{ color:#17294d; }


/* ==========================================================================
   GLASS (iOS "liquid glass"). Frosted, translucent surfaces with a bright
   edge highlight and soft depth, floating over a fixed, colourful backdrop in
   the logo blues. Section grounds are transparent so the backdrop (and the
   content scrolling past) shows through the glass.
   ========================================================================== */
:root{
  --glass-fill: linear-gradient(145deg, rgba(255,255,255,.80) 0%, rgba(255,255,255,.46) 100%);
  --glass-fill-strong: linear-gradient(145deg, rgba(255,255,255,.90) 0%, rgba(255,255,255,.62) 100%);
  --glass-edge: inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(255,255,255,.55), 0 0 0 1px rgba(0,103,253,.08);
  --glass-depth: 0 18px 44px rgba(0,50,140,.10), 0 2px 6px rgba(0,50,140,.05);
  --glass-blur: blur(22px) saturate(180%);
}

/* the backdrop the glass floats over */
html{ background:#fff; }
body{ background:transparent; position:relative; }
body::before{
  content:""; position:fixed; inset:-10vmax; z-index:-1; pointer-events:none;
  background:
    radial-gradient(38vmax 38vmax at 88% 6%,  rgba(0,103,253,.20), rgba(0,103,253,0) 70%),
    radial-gradient(34vmax 34vmax at 6% 40%,  rgba(0,188,238,.20), rgba(0,188,238,0) 70%),
    radial-gradient(40vmax 40vmax at 78% 78%, rgba(0,150,230,.16), rgba(0,150,230,0) 70%),
    radial-gradient(30vmax 30vmax at 20% 96%, rgba(0,80,210,.14),  rgba(0,80,210,0) 70%),
    #f6faff;
}

/* section grounds: transparent so the backdrop shows through */
.band, .sec, .proof, .toc-band, .sec--note{ background:transparent; }
.band--mist, .hub + .band--mist{ background:linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.12)); }
.ribbon{ background:transparent; border-block:0; }
.ribbon::before{ background:linear-gradient(90deg,#f6faff,rgba(246,250,255,0)); }
.ribbon::after{ background:linear-gradient(270deg,#f6faff,rgba(246,250,255,0)); }

/* the glass surfaces */
.fcard,
.band .fcard,
.band--mist .fcard,
.pcard,
.band .pcard,
.band--mist .pcard,
.pkg,
.band .pkg,
.band--mist .pkg,
.rcard,
.band .rcard,
.band--mist .rcard,
.bfam,
.band .bfam,
.band--mist .bfam,
.rebate__card,
.band .rebate__card,
.band--mist .rebate__card,
.timeline__card,
.band .timeline__card,
.band--mist .timeline__card,
.qa__item,
.band .qa__item,
.band--mist .qa__item,
.qa__help,
.band .qa__help,
.band--mist .qa__help,
.upg__row,
.band .upg__row,
.band--mist .upg__row,
.checks li,
.band .checks li,
.band--mist .checks li,
.range__row,
.band .range__row,
.band--mist .range__row,
.hero__specs li,
.band .hero__specs li,
.band--mist .hero__specs li,
.ribbon .ribbon__item,
.band .ribbon .ribbon__item,
.band--mist .ribbon .ribbon__item,
.toc a,
.band .toc a,
.band--mist .toc a,
.signoff__sheet,
.band .signoff__sheet,
.band--mist .signoff__sheet,
.proof__item,
.band .proof__item,
.band--mist .proof__item,
.reach__states,
.band .reach__states,
.band--mist .reach__states,
.assess__box,
.band .assess__box,
.band--mist .assess__box,
.picker__opt,
.band .picker__opt,
.band--mist .picker__opt {
  background:var(--glass-fill); border:0;
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-edge), var(--glass-depth);
}
.bfam__tile,
.band .bfam__tile,
.band--mist .bfam__tile,
.mi__ico,
.band .mi__ico,
.band--mist .mi__ico { background:rgba(255,255,255,.78); -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 6px 16px rgba(0,50,140,.07); }
.qa__item[open], .band .qa__item[open], .band--mist .qa__item[open]{ background:var(--glass-fill-strong); }
.bfam:hover, .band .bfam:hover, .band--mist .bfam:hover{ background:var(--glass-fill-strong); }
.pcard, .band .pcard, .band--mist .pcard, .pcards--feature .pcard{ background:var(--glass-fill); }
.ribbon .ribbon__item:nth-child(n):nth-child(n){ box-shadow:var(--glass-edge), 0 8px 20px rgba(0,50,140,.07); background:var(--glass-fill); color:var(--ink); }
.ribbon .ribbon__item:nth-child(4n):nth-child(n){ background:var(--glass-fill); color:var(--ink); }
.table-wrap{ background:rgba(255,255,255,.55); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); box-shadow:var(--glass-edge), var(--glass-depth); border:0; }
.table-wrap tbody tr:nth-child(even){ background:rgba(0,103,253,.04); }
.table-wrap thead th{ background:rgba(0,103,253,.10); }

/* header: a thin sheet of glass with a specular top edge */
.masthead, .masthead--scrolled{
  background:linear-gradient(180deg, rgba(255,255,255,.74) 0%, rgba(255,255,255,.50) 100%);
  -webkit-backdrop-filter:blur(30px) saturate(190%); backdrop-filter:blur(30px) saturate(190%);
  border-bottom:1px solid rgba(255,255,255,.7);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 1px 0 rgba(0,103,253,.06), 0 14px 40px rgba(0,50,140,.10);
}
.masthead--scrolled{ background:linear-gradient(180deg, rgba(255,255,255,.84) 0%, rgba(255,255,255,.62) 100%); }
.mainnav__list{
  background:linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.30));
  -webkit-backdrop-filter:blur(16px) saturate(170%); backdrop-filter:blur(16px) saturate(170%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(255,255,255,.5), 0 0 0 1px rgba(0,103,253,.08), 0 8px 22px rgba(0,50,140,.07);
}
.mainnav__pill{ background:linear-gradient(180deg,#fff,rgba(255,255,255,.78)); box-shadow:inset 0 1px 0 #fff, 0 8px 20px rgba(0,60,160,.16), 0 0 0 1px rgba(0,103,253,.08); }
.burger, .drawer__close{ background:linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.32)); -webkit-backdrop-filter:blur(14px) saturate(170%); backdrop-filter:blur(14px) saturate(170%); box-shadow:var(--glass-edge), 0 6px 16px rgba(0,50,140,.08); }
.burger.open{ background:var(--grad-cta); }

/* menus */
.submenu__inner{
  background:linear-gradient(150deg, rgba(255,255,255,.86), rgba(255,255,255,.62));
  -webkit-backdrop-filter:blur(34px) saturate(190%); backdrop-filter:blur(34px) saturate(190%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 0 0 1px rgba(255,255,255,.55), 0 0 0 1px rgba(0,103,253,.08), 0 40px 90px rgba(0,30,90,.22);
}
.submenu__strip{ background:linear-gradient(135deg, rgba(0,103,253,.09), rgba(0,188,238,.12)); box-shadow:inset 0 1px 0 rgba(255,255,255,.8); }
.drawer{ background:linear-gradient(170deg, rgba(255,255,255,.88), rgba(244,249,255,.74)); -webkit-backdrop-filter:blur(34px) saturate(190%); backdrop-filter:blur(34px) saturate(190%); }
.drawer__head{ background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; }
.acc{ background:var(--glass-fill); box-shadow:var(--glass-edge), 0 8px 22px rgba(0,50,140,.06); }
.drawer__foot{ background:linear-gradient(180deg, rgba(255,255,255,0), rgba(246,250,255,.9) 34%); }

/* breadcrumbs, hero details */
.crumbs__list{ background:var(--glass-fill); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); box-shadow:var(--glass-edge), 0 8px 22px rgba(0,50,140,.07); }
.crumbs{ background:transparent; }
.hero__media{ box-shadow:0 0 0 7px rgba(255,255,255,.55), 0 0 0 8px rgba(0,103,253,.08), 0 34px 80px rgba(0,60,160,.22); }
.hero .btn--line, .btn--line{ background:var(--glass-fill); -webkit-backdrop-filter:blur(14px) saturate(170%); backdrop-filter:blur(14px) saturate(170%); box-shadow:inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(0,19,56,.14); }
.hero .btn--line:hover, .btn--line:hover{ background:#fff; box-shadow:inset 0 0 0 1.5px var(--blue); }
.label, .opener .label{ background:linear-gradient(145deg, rgba(255,255,255,.8), rgba(255,255,255,.4)); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:var(--glass-edge); }
.label--rev, .signoff .label{ background:rgba(255,255,255,.18); box-shadow:inset 0 1px 0 rgba(255,255,255,.5), inset 0 0 0 1px rgba(255,255,255,.25); }
.sec__n{ background:linear-gradient(145deg, rgba(255,255,255,.8), rgba(255,255,255,.4)); box-shadow:var(--glass-edge); }

/* dark and blue bands get "smoked" glass panels over their gradients */
.upg__panel{ background:linear-gradient(155deg, rgba(0,19,56,.86), rgba(0,32,74,.72)); -webkit-backdrop-filter:blur(20px) saturate(160%); backdrop-filter:blur(20px) saturate(160%); box-shadow:inset 0 1px 0 rgba(255,255,255,.22), inset 0 0 0 1px rgba(255,255,255,.10), 0 30px 70px rgba(0,19,56,.35); }
.signoff__sheet, .band .signoff__sheet{ background:linear-gradient(145deg, rgba(255,255,255,.92), rgba(255,255,255,.76)); box-shadow:inset 0 1px 0 #fff, inset 0 0 0 1px rgba(255,255,255,.6), 0 40px 90px rgba(0,19,56,.32); }
.cta-band .btn--line{ background:rgba(255,255,255,.16); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); box-shadow:inset 0 1px 0 rgba(255,255,255,.5), inset 0 0 0 1px rgba(255,255,255,.4); }

/* mobile dock and popup */
.stickybar__call{ background:var(--glass-fill); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); box-shadow:var(--glass-edge), 0 10px 26px rgba(0,50,140,.14); }
.qmodal__panel{ background:linear-gradient(150deg, rgba(255,255,255,.94), rgba(255,255,255,.82)); -webkit-backdrop-filter:blur(30px) saturate(180%); backdrop-filter:blur(30px) saturate(180%); box-shadow:inset 0 1px 0 #fff, 0 0 0 1px rgba(255,255,255,.5), 0 40px 100px rgba(0,19,56,.45); }
.qmodal-scrim{ -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.mfield input, .mfield select, .mfield textarea{ background:rgba(255,255,255,.7); box-shadow:inset 0 1px 2px rgba(0,50,140,.08), inset 0 0 0 1px rgba(0,103,253,.10); }
.mfield input:focus, .mfield select:focus, .mfield textarea:focus{ background:#fff; }

/* hover: glass brightens and lifts */
.fcard:hover, .pcard:hover, .pkg:hover, .rcard:hover, .rebate__card:hover, .upg__row:hover, .range__row:hover{ background:var(--glass-fill-strong); }

/* fallback where backdrop-filter is unsupported: solid, readable cards */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :root{ --glass-fill:#fff; --glass-fill-strong:#fff; }
  .masthead, .masthead--scrolled, .submenu__inner, .drawer, .qmodal__panel{ background:#fff; }
}
@media (prefers-reduced-transparency:reduce){
  :root{ --glass-fill:#fff; --glass-fill-strong:#fff; }
  .masthead, .masthead--scrolled, .submenu__inner, .drawer, .qmodal__panel{ background:#fff; }
}

/* ==========================================================================
   GLASS CTAs. Every button on the site is a piece of frosted glass:
   - primary: tinted brand-blue glass with a bright top sheen and inner glow
   - secondary: clear glass with a navy hairline
   - on blue / navy bands: white glass
   Hover brightens and lifts; press squashes slightly with a springy return.
   The sheen is a background layer (not a pseudo-element) so it never covers text.
   ========================================================================== */
:root{
  --sheen: linear-gradient(180deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,.10) 46%, rgba(255,255,255,0) 52%);
  --cta-glass: linear-gradient(135deg, rgba(0,160,235,.94) 0%, rgba(0,103,253,.92) 52%, rgba(0,80,210,.95) 100%);
  --spring: cubic-bezier(.34,1.56,.64,1);
}
.btn, .mast-cta, .stickybar__call, .stickybar__quote, .qmodal__submit{
  transition:transform .4s var(--spring), box-shadow .3s var(--ease), background .3s var(--ease), color .25s var(--ease);
}
.btn:active, .mast-cta:active, .stickybar__call:active, .stickybar__quote:active{ transform:scale(.965); transition-duration:.12s; }

/* primary */
.btn--solid, .mast-cta, .stickybar__quote, .qmodal__submit, .btn.btn--solid{
  background:var(--sheen), var(--cta-glass);
  -webkit-backdrop-filter:blur(14px) saturate(180%); backdrop-filter:blur(14px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.65),
    inset 0 0 0 1px rgba(255,255,255,.26),
    inset 0 -12px 20px rgba(0,40,150,.22),
    0 12px 28px rgba(0,103,253,.36),
    0 2px 4px rgba(0,60,180,.25);
  text-shadow:0 1px 1px rgba(0,40,140,.28);
}
.btn--solid:hover, .mast-cta:hover, .stickybar__quote:hover, .qmodal__submit:hover{
  background:var(--sheen), linear-gradient(135deg, rgba(40,185,245,.96) 0%, rgba(26,123,255,.94) 52%, rgba(0,95,235,.96) 100%);
  transform:translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    inset 0 0 0 1px rgba(255,255,255,.34),
    inset 0 -12px 20px rgba(0,40,150,.2),
    0 20px 40px rgba(0,103,253,.46),
    0 3px 6px rgba(0,60,180,.25);
}
.btn--solid:active, .mast-cta:active, .stickybar__quote:active, .qmodal__submit:active{ transform:translateY(0) scale(.965); }

/* secondary: clear glass */
.btn--line, .hero .btn--line, .band--mist .btn--line, .stickybar__call{
  background:var(--sheen), linear-gradient(145deg, rgba(255,255,255,.78), rgba(255,255,255,.4));
  -webkit-backdrop-filter:blur(16px) saturate(180%); backdrop-filter:blur(16px) saturate(180%);
  color:var(--navy);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.98), inset 0 0 0 1px rgba(255,255,255,.6), 0 0 0 1px rgba(0,19,56,.13), 0 10px 24px rgba(0,50,140,.10);
}
.btn--line:hover, .hero .btn--line:hover, .band--mist .btn--line:hover{
  background:var(--sheen), linear-gradient(145deg, rgba(255,255,255,.96), rgba(255,255,255,.68));
  color:var(--blue-600); transform:translateY(-3px);
  box-shadow:inset 0 1px 0 #fff, inset 0 0 0 1px rgba(255,255,255,.8), 0 0 0 1.5px rgba(0,103,253,.55), 0 16px 34px rgba(0,80,210,.18);
}

/* white glass on blue / navy bands */
.cta-band .btn--solid, .signoff__cta, .metrics__cta .btn--solid, .assess .btn--solid.is-light{
  background:var(--sheen), linear-gradient(145deg, rgba(255,255,255,.95), rgba(255,255,255,.72));
  color:var(--blue-600); text-shadow:none;
  box-shadow:inset 0 1px 0 #fff, inset 0 0 0 1px rgba(255,255,255,.7), inset 0 -10px 18px rgba(0,80,210,.10), 0 16px 34px rgba(0,19,56,.30);
}
.cta-band .btn--solid:hover, .signoff__cta:hover, .metrics__cta .btn--solid:hover{
  background:var(--sheen), linear-gradient(145deg, #fff, rgba(255,255,255,.88)); color:var(--navy);
}
.cta-band .btn--line, .btn--rev, .signoff .btn--line{
  background:var(--sheen), linear-gradient(145deg, rgba(255,255,255,.26), rgba(255,255,255,.10)); color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), inset 0 0 0 1px rgba(255,255,255,.4), 0 12px 28px rgba(0,19,56,.22);
}
.cta-band .btn--line:hover, .btn--rev:hover{ background:var(--sheen), linear-gradient(145deg, rgba(255,255,255,.95), rgba(255,255,255,.75)); color:var(--blue-600); }

/* glass pills for the text-link CTAs */
.proof__link, .proper2__link, .pcard__more, .submenu__lead-go, .upg__call, .reach__copy .btn, .rcard__a{
  -webkit-backdrop-filter:blur(14px) saturate(180%); backdrop-filter:blur(14px) saturate(180%);
}
.proof__link, .proper2__link{
  display:inline-flex; align-items:center; gap:10px; padding:11px 20px; border:0; border-radius:999px; color:var(--blue-600);
  background:var(--sheen), linear-gradient(145deg, rgba(255,255,255,.82), rgba(255,255,255,.44));
  box-shadow:inset 0 1px 0 #fff, inset 0 0 0 1px rgba(255,255,255,.6), 0 0 0 1px rgba(0,103,253,.18), 0 10px 22px rgba(0,50,140,.10);
  transition:gap .3s var(--ease), transform .4s var(--spring), box-shadow .3s var(--ease), color .25s;
}
.proof__link:hover, .proper2__link:hover{ gap:16px; color:var(--navy); transform:translateY(-2px); box-shadow:inset 0 1px 0 #fff, 0 0 0 1.5px rgba(0,103,253,.5), 0 16px 30px rgba(0,80,210,.18); }
.proof__link, .proper2__link{ border-bottom:0; padding-bottom:11px; }
.pcard__more{
  align-self:flex-start; margin-top:auto; padding:10px 18px; border-radius:999px; color:var(--blue-600);
  background:var(--sheen), linear-gradient(145deg, rgba(255,255,255,.84), rgba(255,255,255,.46));
  box-shadow:inset 0 1px 0 #fff, 0 0 0 1px rgba(0,103,253,.16), 0 8px 18px rgba(0,50,140,.08);
}
.pcard:hover .pcard__more{ background:var(--sheen), var(--cta-glass); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 12px 24px rgba(0,103,253,.32); }
.submenu__lead-go{ background:var(--sheen), linear-gradient(145deg, rgba(255,255,255,.96), rgba(255,255,255,.78)); box-shadow:inset 0 1px 0 #fff, 0 8px 18px rgba(0,19,56,.3); }
.upg__call{ display:inline-flex; padding:10px 18px; border-radius:999px; text-decoration:none; color:#fff; background:var(--sheen), linear-gradient(145deg, rgba(255,255,255,.22), rgba(255,255,255,.08)); box-shadow:inset 0 1px 0 rgba(255,255,255,.5), inset 0 0 0 1px rgba(255,255,255,.3); }
.upg__call:hover{ background:var(--sheen), linear-gradient(145deg, rgba(255,255,255,.9), rgba(255,255,255,.7)); color:var(--blue-600); }

/* quote-picker tiles on the dark assessment band */
.picker__opt{
  background:var(--sheen), linear-gradient(145deg, rgba(255,255,255,.20), rgba(255,255,255,.07)); color:#fff;
  -webkit-backdrop-filter:blur(14px) saturate(170%); backdrop-filter:blur(14px) saturate(170%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), inset 0 0 0 1px rgba(255,255,255,.22), 0 10px 22px rgba(0,19,56,.25);
  transition:transform .4s var(--spring), background .3s var(--ease), box-shadow .3s var(--ease), color .25s;
}
.picker__opt:hover{ background:var(--sheen), linear-gradient(145deg, rgba(255,255,255,.96), rgba(255,255,255,.8)); color:var(--navy); transform:translateY(-3px); box-shadow:inset 0 1px 0 #fff, 0 16px 30px rgba(0,19,56,.35); }

/* drawer lead + sticky dock on phones */
.dr__lead{ background:var(--sheen), linear-gradient(155deg, rgba(0,19,56,.92), rgba(0,40,92,.82)) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.3), inset 0 0 0 1px rgba(255,255,255,.12), 0 14px 28px rgba(0,19,56,.28) !important; }
.stickybar{ background:transparent; }
.stickybar__call{ color:var(--navy); }
.mast-cta__arr, .btn svg{ filter:drop-shadow(0 1px 1px rgba(0,40,140,.25)); }

@media (prefers-reduced-motion:reduce){ .btn, .mast-cta, .proof__link, .proper2__link, .picker__opt{ transition:box-shadow .2s, background .2s; } .btn:active, .mast-cta:active{ transform:none; } }

/* Menus and panels: frosted but nearly opaque, so nothing behind them reads through. */
.submenu__inner{
  background:linear-gradient(150deg, rgba(255,255,255,.985), rgba(246,250,255,.97));
  -webkit-backdrop-filter:blur(40px) saturate(190%); backdrop-filter:blur(40px) saturate(190%);
}
.submenu__strip{ background:linear-gradient(135deg, #eaf3ff, #e4f6ff); }
.drawer{ background:linear-gradient(170deg, rgba(255,255,255,.985), rgba(244,249,255,.97)); }
.drawer__head{ background:rgba(255,255,255,.97); }
.qmodal__panel{ background:linear-gradient(150deg, rgba(255,255,255,.985), rgba(248,251,255,.97)); }
.masthead, .masthead--scrolled{ background:linear-gradient(180deg, rgba(255,255,255,.80) 0%, rgba(255,255,255,.66) 100%); }
.masthead--scrolled{ background:linear-gradient(180deg, rgba(255,255,255,.90) 0%, rgba(255,255,255,.78) 100%); }
/* Fully opaque panels (glass edge and depth kept), so no page text can show through. */
.submenu__inner{ background:linear-gradient(150deg,#ffffff,#f5f9ff); }
.drawer{ background:linear-gradient(170deg,#ffffff,#f4f9ff); }
.drawer__head{ background:#fff; }
.qmodal__panel{ background:linear-gradient(150deg,#ffffff,#f7faff); }

/* Typographic rows are NOT glass cards: "Our promise" rows, the service ticker,
   the numbered range rows and the coverage list stay plain text on the page. */
.proof__item, .band .proof__item, .band--mist .proof__item,
.range__row, .band .range__row, .band--mist .range__row,
.reach__states, .band .reach__states, .band--mist .reach__states,
.ribbon .ribbon__item:nth-child(n):nth-child(n), .ribbon .ribbon__item:nth-child(4n):nth-child(n){
  background:none; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none;
}
.ribbon .ribbon__item:nth-child(n):nth-child(n){ color:#34476a; padding:0; border-radius:0; }
.proof__item{ padding-top:0; }

/* Buttons on blue/navy bands: white glass, beating the primary-glass rule's specificity. */
.signoff .btn.signoff__cta, .cta-band .btn.btn--solid, .metrics__cta .btn.btn--solid, .assess .btn.btn--solid.is-light{
  background:var(--sheen), linear-gradient(145deg, rgba(255,255,255,.96), rgba(255,255,255,.76));
  color:var(--blue-600); text-shadow:none;
  -webkit-backdrop-filter:blur(14px) saturate(170%); backdrop-filter:blur(14px) saturate(170%);
  box-shadow:inset 0 1px 0 #fff, inset 0 0 0 1px rgba(255,255,255,.7), inset 0 -10px 18px rgba(0,80,210,.10), 0 16px 34px rgba(0,19,56,.30);
}
.signoff .btn.signoff__cta:hover, .cta-band .btn.btn--solid:hover, .metrics__cta .btn.btn--solid:hover{
  background:var(--sheen), linear-gradient(145deg,#fff,rgba(255,255,255,.9)); color:var(--navy);
  box-shadow:inset 0 1px 0 #fff, 0 22px 44px rgba(0,19,56,.38);
}
.cta-band .btn.btn--line, .signoff .btn.btn--line{ color:#fff; }

/* Coverage list: a proper glass card with padding (rows were flush to the edge). */
.reach__states, .band .reach__states, .band--mist .reach__states{
  padding:6px clamp(18px,2vw,28px); border:0; border-radius:var(--radius-xl);
  background:var(--glass-fill); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-edge), var(--glass-depth);
}
.reach__states div{ padding:16px 0; border-bottom:1px solid rgba(0,103,253,.10); }
.reach__states div:last-child{ border-bottom:0; }

/* Backdrop: stay inside the viewport (the oversized layer painted a grey band at the right edge). */
body::before{ inset:0; }
/* The off-canvas drawer's shadow must not bleed onto the page while it is closed. */
.drawer{ box-shadow:none; visibility:hidden; transition:transform .34s var(--ease), visibility 0s linear .34s, box-shadow .3s; }
.drawer.open{ visibility:visible; box-shadow:-30px 0 80px rgba(0,19,56,.25); transition:transform .34s var(--ease), visibility 0s, box-shadow .3s; }

/* Brand logos: soft grey at rest, ORIGINAL colours on hover/focus (always colour on touch). */
.bfam__tile img{ filter:grayscale(1); opacity:.7; transition:filter .4s var(--ease), opacity .4s var(--ease), transform .4s var(--ease); }
@media (hover:hover){
  .bfam__tile:hover img, .bfam__tile:focus-within img{ filter:none !important; opacity:1 !important; transform:scale(1.07); }
}
@media (hover:none){ .bfam__tile img{ filter:none; opacity:1; } }

/* ==========================================================================
   iOS translucent CTAs. Tinted, see-through glass: the page colour shows
   through the button, a bright specular rim catches the light at the top edge,
   a soft inner glow sits at the bottom, and text stays crisp white (or navy on
   clear glass). Primary = blue-tinted glass, secondary = clear glass,
   on-blue-band = white-tinted glass.
   ========================================================================== */
:root{
  --spec: linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.12) 42%, rgba(255,255,255,0) 50%);
  --tint-blue: linear-gradient(135deg, rgba(0,170,240,.74) 0%, rgba(0,103,253,.72) 55%, rgba(0,70,210,.78) 100%);
  --tint-blue-hover: linear-gradient(135deg, rgba(40,190,248,.84) 0%, rgba(20,120,255,.82) 55%, rgba(0,85,230,.88) 100%);
}
.btn--solid, .btn.btn--solid, .mast-cta, .stickybar__quote, .qmodal__submit{
  background:var(--spec), var(--tint-blue);
  -webkit-backdrop-filter:blur(22px) saturate(200%); backdrop-filter:blur(22px) saturate(200%);
  color:#fff; text-shadow:0 1px 2px rgba(0,50,160,.35);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.85),
    inset 0 0 0 1px rgba(255,255,255,.38),
    inset 0 -14px 22px rgba(0,100,255,.25),
    0 14px 34px rgba(0,103,253,.30),
    0 1px 3px rgba(0,50,160,.22);
}
.btn--solid:hover, .btn.btn--solid:hover, .mast-cta:hover, .stickybar__quote:hover, .qmodal__submit:hover{
  background:var(--spec), var(--tint-blue-hover);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(255,255,255,.5), inset 0 -14px 22px rgba(0,110,255,.22), 0 22px 44px rgba(0,103,253,.40), 0 2px 5px rgba(0,50,160,.22);
}

/* clear glass */
.btn--line, .hero .btn--line, .band--mist .btn--line, .stickybar__call{
  background:var(--spec), linear-gradient(145deg, rgba(255,255,255,.52), rgba(255,255,255,.16));
  -webkit-backdrop-filter:blur(22px) saturate(200%); backdrop-filter:blur(22px) saturate(200%);
  color:var(--navy);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(255,255,255,.55), 0 0 0 1px rgba(0,60,160,.16), 0 12px 28px rgba(0,50,140,.12);
}
.btn--line:hover, .hero .btn--line:hover, .band--mist .btn--line:hover{
  background:var(--spec), linear-gradient(145deg, rgba(255,255,255,.8), rgba(255,255,255,.42));
  box-shadow:inset 0 1.5px 0 #fff, inset 0 0 0 1px rgba(255,255,255,.7), 0 0 0 1.5px rgba(0,103,253,.5), 0 18px 36px rgba(0,80,210,.18);
}

/* white-tinted glass on blue and navy bands */
.signoff .btn.signoff__cta, .cta-band .btn.btn--solid, .metrics__cta .btn.btn--solid, .assess .btn.btn--solid.is-light{
  background:var(--spec), linear-gradient(145deg, rgba(255,255,255,.88), rgba(255,255,255,.6));
  color:var(--blue-600); text-shadow:none;
  -webkit-backdrop-filter:blur(22px) saturate(200%); backdrop-filter:blur(22px) saturate(200%);
  box-shadow:inset 0 1.5px 0 #fff, inset 0 0 0 1px rgba(255,255,255,.7), inset 0 -10px 18px rgba(0,100,255,.12), 0 16px 36px rgba(0,19,56,.30);
}
.signoff .btn.signoff__cta:hover, .cta-band .btn.btn--solid:hover, .metrics__cta .btn.btn--solid:hover{
  background:var(--spec), linear-gradient(145deg, rgba(255,255,255,.98), rgba(255,255,255,.82)); color:var(--navy);
}
.cta-band .btn--line, .cta-band .btn.btn--line, .btn--rev, .signoff .btn--line{
  background:var(--spec), linear-gradient(145deg, rgba(255,255,255,.28), rgba(255,255,255,.08)); color:#fff;
  -webkit-backdrop-filter:blur(22px) saturate(200%); backdrop-filter:blur(22px) saturate(200%);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.7), inset 0 0 0 1px rgba(255,255,255,.42), 0 12px 28px rgba(0,19,56,.2);
}

/* Small glass details: arrow badge in the header CTA, round chips and indicators. */
.mast-cta__arr{ background:rgba(255,255,255,.28); box-shadow:inset 0 1px 0 rgba(255,255,255,.7), inset 0 0 0 1px rgba(255,255,255,.3); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.acc__mark, .qa__toggle, .rcard__a, .upg__go, .mi__go, .signoff__tick{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 6px 14px rgba(0,60,160,.14);
}
.qa__toggle, .acc__mark, .rcard__a, .upg__go{ background:linear-gradient(145deg, rgba(255,255,255,.85), rgba(255,255,255,.45)); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.signoff__tick{ background:var(--spec), var(--tint-blue); box-shadow:inset 0 1px 0 rgba(255,255,255,.8), inset 0 0 0 1px rgba(255,255,255,.3), 0 8px 18px rgba(0,103,253,.3); }
.checks__n{ background:var(--spec), var(--tint-blue); box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 6px 14px rgba(0,103,253,.28); }
.burger.open{ background:var(--spec), var(--tint-blue); }
.hero__specs li, .pcard__chips a{ background:linear-gradient(145deg, rgba(255,255,255,.8), rgba(255,255,255,.42)); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); box-shadow:inset 0 1px 0 #fff, 0 0 0 1px rgba(0,103,253,.14), 0 6px 14px rgba(0,50,140,.07); }
.pcard__chips a:hover{ background:var(--spec), var(--tint-blue); color:#fff; }
.proof__link, .proper2__link{ background:var(--spec), linear-gradient(145deg, rgba(255,255,255,.6), rgba(255,255,255,.22)); box-shadow:inset 0 1.5px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(255,255,255,.5), 0 0 0 1px rgba(0,103,253,.18), 0 10px 24px rgba(0,50,140,.10); }
.pcard:hover .pcard__more{ background:var(--spec), var(--tint-blue); }
.dr__lead{ background:var(--spec), linear-gradient(155deg, rgba(0,19,56,.78), rgba(0,50,110,.62)) !important; -webkit-backdrop-filter:blur(18px) saturate(180%); backdrop-filter:blur(18px) saturate(180%); }

/* Nav track: transparent glass with a specular rim; the pill is a brighter glass lens. */
.mainnav__list{
  background:var(--spec), linear-gradient(145deg, rgba(255,255,255,.34), rgba(255,255,255,.10));
  -webkit-backdrop-filter:blur(24px) saturate(210%); backdrop-filter:blur(24px) saturate(210%);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(255,255,255,.45), inset 0 -10px 18px rgba(0,103,253,.06), 0 0 0 1px rgba(0,60,160,.10), 0 12px 30px rgba(0,50,140,.12);
}
.mainnav__pill{
  background:var(--spec), linear-gradient(145deg, rgba(255,255,255,.82), rgba(255,255,255,.46));
  -webkit-backdrop-filter:blur(14px) saturate(200%); backdrop-filter:blur(14px) saturate(200%);
  box-shadow:inset 0 1.5px 0 #fff, inset 0 0 0 1px rgba(255,255,255,.7), 0 8px 20px rgba(0,60,160,.18), 0 0 0 1px rgba(0,103,253,.10);
}
.mainnav__link{ text-shadow:0 1px 0 rgba(255,255,255,.55); }
.masthead, .masthead--scrolled{
  background:linear-gradient(180deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.40) 100%);
  -webkit-backdrop-filter:blur(34px) saturate(200%); backdrop-filter:blur(34px) saturate(200%);
}
.masthead--scrolled{ background:linear-gradient(180deg, rgba(255,255,255,.74) 0%, rgba(255,255,255,.54) 100%); }

/* Sticky email button (desktop). Glass circle that expands to show the address on hover. */
.emailfab{ display:none; }
@media (min-width:1025px){
  .emailfab{
    position:fixed; right:clamp(18px,2vw,32px); bottom:clamp(18px,2.6vw,32px); z-index:90;
    display:flex; align-items:center; gap:0; height:58px; min-width:58px; padding:0 17px; border-radius:999px; overflow:hidden;
    color:#fff; text-decoration:none; white-space:nowrap;
    background:var(--spec), var(--tint-blue);
    -webkit-backdrop-filter:blur(22px) saturate(200%); backdrop-filter:blur(22px) saturate(200%);
    box-shadow:inset 0 1.5px 0 rgba(255,255,255,.85), inset 0 0 0 1px rgba(255,255,255,.38), inset 0 -12px 20px rgba(0,100,255,.25), 0 16px 38px rgba(0,103,253,.38), 0 2px 5px rgba(0,50,160,.22);
    transition:transform .45s var(--spring), box-shadow .3s var(--ease), gap .4s var(--ease), padding .4s var(--ease);
  }
  .emailfab svg{ flex:none; width:24px; height:24px; filter:drop-shadow(0 1px 1px rgba(0,50,160,.35)); }
  .emailfab__txt{ display:flex; flex-direction:column; max-width:0; opacity:0; font-family:var(--font-display); font-weight:700; font-size:14px; line-height:1.15; text-shadow:0 1px 2px rgba(0,50,160,.35); transition:max-width .5s var(--ease), opacity .3s var(--ease); }
  .emailfab__txt small{ font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; opacity:.85; }
  .emailfab:hover, .emailfab:focus-visible{ gap:12px; padding:0 24px 0 18px; transform:translateY(-4px); box-shadow:inset 0 1.5px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(255,255,255,.5), inset 0 -12px 20px rgba(0,110,255,.22), 0 24px 48px rgba(0,103,253,.46), 0 3px 6px rgba(0,50,160,.22); }
  .emailfab:hover .emailfab__txt, .emailfab:focus-visible .emailfab__txt{ max-width:260px; opacity:1; }
  .emailfab:active{ transform:scale(.96); }
  .emailfab:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
}
@media print{ .emailfab{ display:none; } }

/* ==========================================================================
   Mesh backgrounds. Soft, heavily blurred colour patches on a near-white
   ground (the same idea as a gradient-mesh hero), using only the logo colours:
   cyan #00BCEE, blue #0067FD, deep blue #0050D2 and navy #001338 at low
   opacity. Four variants alternate down every page so no two neighbouring
   sections look the same, and the glass cards sit over them.
   ========================================================================== */
:root{
  --mesh-a:
    radial-gradient(52% 62% at 6% 10%,  rgba(0,188,238,.40) 0%, rgba(0,188,238,0) 70%),
    radial-gradient(50% 70% at 4% 96%,  rgba(0,103,253,.34) 0%, rgba(0,103,253,0) 72%),
    radial-gradient(46% 58% at 96% 6%,  rgba(0,32,90,.20)   0%, rgba(0,32,90,0)   70%),
    radial-gradient(52% 62% at 98% 98%, rgba(0,103,253,.30) 0%, rgba(0,103,253,0) 72%),
    linear-gradient(180deg,#fdfeff,#f7fbff);
  --mesh-b:
    radial-gradient(50% 60% at 94% 8%,  rgba(0,188,238,.38) 0%, rgba(0,188,238,0) 70%),
    radial-gradient(54% 66% at 92% 94%, rgba(0,80,210,.30)  0%, rgba(0,80,210,0)  72%),
    radial-gradient(46% 62% at 4% 14%,  rgba(0,103,253,.28) 0%, rgba(0,103,253,0) 70%),
    radial-gradient(40% 56% at 8% 100%, rgba(0,32,90,.16)   0%, rgba(0,32,90,0)   70%),
    linear-gradient(180deg,#f9fcff,#fdfeff);
  --mesh-c:
    radial-gradient(60% 56% at 50% 0%,  rgba(0,103,253,.30) 0%, rgba(0,103,253,0) 72%),
    radial-gradient(44% 60% at 0% 60%,  rgba(0,188,238,.34) 0%, rgba(0,188,238,0) 70%),
    radial-gradient(44% 60% at 100% 62%,rgba(0,50,140,.20)  0%, rgba(0,50,140,0)  70%),
    radial-gradient(56% 50% at 50% 100%,rgba(0,188,238,.28) 0%, rgba(0,188,238,0) 72%),
    linear-gradient(180deg,#fcfeff,#f6faff);
  --mesh-d:
    radial-gradient(50% 64% at 0% 20%,  rgba(0,80,210,.30)  0%, rgba(0,80,210,0)  72%),
    radial-gradient(48% 60% at 100% 18%,rgba(0,188,238,.36) 0%, rgba(0,188,238,0) 70%),
    radial-gradient(52% 62% at 14% 100%,rgba(0,188,238,.30) 0%, rgba(0,188,238,0) 70%),
    radial-gradient(46% 58% at 100% 100%,rgba(0,32,90,.18)  0%, rgba(0,32,90,0)   70%),
    linear-gradient(180deg,#fdfeff,#f8fbff);
}
/* the page itself is just the light ground; the sections carry the colour */
body::before{ background:#fbfdff; }

/* hero (and every interior hero) */
.hero, .hero--page{ background:var(--mesh-a); }
.hero::before{ opacity:.55; }

/* every other light section, cycling the variants */
main > section:not(.hero):not(.signoff):not(.assess):not(.statement):not(.cta-band):nth-of-type(4n+2){ background:var(--mesh-b); }
main > section:not(.hero):not(.signoff):not(.assess):not(.statement):not(.cta-band):nth-of-type(4n+3){ background:var(--mesh-c); }
main > section:not(.hero):not(.signoff):not(.assess):not(.statement):not(.cta-band):nth-of-type(4n+4){ background:var(--mesh-d); }
main > section:not(.hero):not(.signoff):not(.assess):not(.statement):not(.cta-band):nth-of-type(4n+5){ background:var(--mesh-a); }
/* sections that end up first/last in a run keep a seamless edge */
main > section:not(.hero):not(.signoff):not(.assess):not(.statement):not(.cta-band){ background-repeat:no-repeat; background-size:100% 100%; }
.crumbs{ background:transparent; }
.ribbon{ background:transparent; }

/* ==========================================================================
   Six distinct section palettes (logo colours only), rotating down each page.
   Each has its own base tint, dominant hue and glow placement, so neighbouring
   sections read as different moods rather than one wash repeated.
   ========================================================================== */
:root{
  /* 1 Aqua: cyan-led, bright */
  --m1:
    radial-gradient(58% 70% at 8% 12%,  rgba(0,188,238,.58) 0%, rgba(0,188,238,0) 72%),
    radial-gradient(52% 64% at 96% 96%, rgba(0,188,238,.40) 0%, rgba(0,188,238,0) 72%),
    radial-gradient(40% 52% at 100% 4%, rgba(0,103,253,.28) 0%, rgba(0,103,253,0) 70%),
    linear-gradient(135deg,#e6fbff 0%,#f3fcff 100%);
  /* 2 Royal: brand-blue-led, saturated */
  --m2:
    radial-gradient(56% 70% at 92% 10%, rgba(0,103,253,.50) 0%, rgba(0,103,253,0) 72%),
    radial-gradient(56% 66% at 6% 100%, rgba(0,80,210,.40)  0%, rgba(0,80,210,0)  72%),
    radial-gradient(40% 54% at 0% 24%,  rgba(0,188,238,.32) 0%, rgba(0,188,238,0) 70%),
    linear-gradient(160deg,#e3edff 0%,#f0f5ff 100%);
  /* 3 Navy mist: cool slate with navy depth and one cyan accent */
  --m3:
    radial-gradient(50% 64% at 100% 0%, rgba(0,32,90,.34)   0%, rgba(0,32,90,0)   72%),
    radial-gradient(50% 64% at 0% 100%, rgba(0,32,90,.26)   0%, rgba(0,32,90,0)   72%),
    radial-gradient(38% 50% at 22% 8%,  rgba(0,188,238,.34) 0%, rgba(0,188,238,0) 70%),
    radial-gradient(40% 52% at 80% 92%, rgba(0,103,253,.26) 0%, rgba(0,103,253,0) 70%),
    linear-gradient(180deg,#e8edf6 0%,#f3f6fb 100%);
  /* 4 Airy: almost white, one wide cyan breath across the top */
  --m4:
    radial-gradient(70% 60% at 50% -6%, rgba(0,188,238,.46) 0%, rgba(0,188,238,0) 74%),
    radial-gradient(60% 48% at 50% 108%,rgba(0,103,253,.24) 0%, rgba(0,103,253,0) 74%),
    linear-gradient(180deg,#ffffff 0%,#f9fcff 100%);
  /* 5 Diagonal sky: a straight blue-to-aqua sweep with soft pools */
  --m5:
    radial-gradient(44% 56% at 82% 18%, rgba(0,103,253,.34) 0%, rgba(0,103,253,0) 70%),
    radial-gradient(44% 56% at 14% 86%, rgba(0,188,238,.36) 0%, rgba(0,188,238,0) 70%),
    linear-gradient(118deg,#d4f1ff 0%,#eef6ff 46%,#d9e5ff 100%);
  /* 6 Deep wash: strongest blue, a navy corner, cyan highlight */
  --m6:
    radial-gradient(54% 80% at 0% 50%,  rgba(0,103,253,.52) 0%, rgba(0,103,253,0) 74%),
    radial-gradient(46% 60% at 100% 100%,rgba(0,32,90,.30)  0%, rgba(0,32,90,0)   72%),
    radial-gradient(42% 56% at 100% 8%, rgba(0,188,238,.42) 0%, rgba(0,188,238,0) 70%),
    linear-gradient(180deg,#dde8ff 0%,#eaf1ff 100%);
}
.hero, .hero--page{ background:var(--m1); }
main > section:not(.hero):not(.signoff):not(.assess):not(.statement):not(.cta-band):nth-of-type(6n+2){ background:var(--m2); }
main > section:not(.hero):not(.signoff):not(.assess):not(.statement):not(.cta-band):nth-of-type(6n+3){ background:var(--m3); }
main > section:not(.hero):not(.signoff):not(.assess):not(.statement):not(.cta-band):nth-of-type(6n+4){ background:var(--m4); }
main > section:not(.hero):not(.signoff):not(.assess):not(.statement):not(.cta-band):nth-of-type(6n+5){ background:var(--m5); }
main > section:not(.hero):not(.signoff):not(.assess):not(.statement):not(.cta-band):nth-of-type(6n+6){ background:var(--m6); }
main > section:not(.hero):not(.signoff):not(.assess):not(.statement):not(.cta-band):nth-of-type(6n+7){ background:var(--m1); }
main > section:not(.hero):not(.signoff):not(.assess):not(.statement):not(.cta-band){ background-repeat:no-repeat; background-size:100% 100%; }

/* text on the stronger washes stays comfortably dark */
.lede, .opener__lede, .hero__lede{ color:#36496b; }

/* ==========================================================================
   Bright palettes. No navy and no deep blue in any background wash (they read
   as grey and dull); only cyan #00BCEE and brand blue #0067FD, lifted, on
   brighter bases. Six schemes, still clearly different from each other.
   ========================================================================== */
:root{
  /* 1 Aqua splash */
  --m1:
    radial-gradient(56% 68% at 8% 10%,  rgba(0,205,250,.52) 0%, rgba(0,205,250,0) 72%),
    radial-gradient(52% 64% at 96% 96%, rgba(60,150,255,.34) 0%, rgba(60,150,255,0) 72%),
    radial-gradient(40% 52% at 100% 4%, rgba(0,205,250,.26) 0%, rgba(0,205,250,0) 70%),
    linear-gradient(135deg,#e9fcff 0%,#f6fdff 100%);
  /* 2 Sky blue */
  --m2:
    radial-gradient(56% 70% at 92% 10%, rgba(40,140,255,.42) 0%, rgba(40,140,255,0) 72%),
    radial-gradient(54% 66% at 6% 100%, rgba(0,205,250,.34)  0%, rgba(0,205,250,0)  72%),
    radial-gradient(38% 52% at 0% 22%,  rgba(80,160,255,.28) 0%, rgba(80,160,255,0) 70%),
    linear-gradient(160deg,#e8f2ff 0%,#f5f9ff 100%);
  /* 3 Ice: white-blue with fresh cyan, no shadowing */
  --m3:
    radial-gradient(50% 64% at 100% 2%, rgba(0,205,250,.36) 0%, rgba(0,205,250,0) 72%),
    radial-gradient(50% 64% at 0% 98%,  rgba(70,160,255,.32) 0%, rgba(70,160,255,0) 72%),
    radial-gradient(38% 50% at 24% 8%,  rgba(0,205,250,.24) 0%, rgba(0,205,250,0) 70%),
    linear-gradient(180deg,#f2f8ff 0%,#fbfdff 100%);
  /* 4 Airy: white with one bright cyan breath */
  --m4:
    radial-gradient(70% 60% at 50% -6%, rgba(0,205,250,.42) 0%, rgba(0,205,250,0) 74%),
    radial-gradient(60% 48% at 50% 108%,rgba(60,150,255,.26) 0%, rgba(60,150,255,0) 74%),
    linear-gradient(180deg,#ffffff 0%,#fafdff 100%);
  /* 5 Diagonal sky */
  --m5:
    radial-gradient(44% 56% at 82% 18%, rgba(50,145,255,.34) 0%, rgba(50,145,255,0) 70%),
    radial-gradient(44% 56% at 14% 86%, rgba(0,205,250,.36) 0%, rgba(0,205,250,0) 70%),
    linear-gradient(118deg,#d9f4ff 0%,#f2f8ff 46%,#e1ecff 100%);
  /* 6 Bright blue wash */
  --m6:
    radial-gradient(54% 80% at 0% 50%,  rgba(30,135,255,.40) 0%, rgba(30,135,255,0) 74%),
    radial-gradient(46% 60% at 100% 100%,rgba(0,205,250,.34) 0%, rgba(0,205,250,0) 72%),
    radial-gradient(42% 56% at 100% 8%, rgba(110,175,255,.34) 0%, rgba(110,175,255,0) 70%),
    linear-gradient(180deg,#e6f0ff 0%,#f3f8ff 100%);
}
/* hero dots: brand blue only, light */
.hero::before{ background:linear-gradient(225deg,#2f8cff 0%,#00BCEE 100%); }
.hero::after{ background:linear-gradient(45deg,#00BCEE 0%,#3f95ff 100%); }

/* ==========================================================================
   Calm palettes. Same six schemes, about half the colour: soft pastel tints of
   cyan and brand blue on near-white bases, no strong patches anywhere.
   ========================================================================== */
:root{
  --m1:
    radial-gradient(58% 70% at 8% 10%,  rgba(120,220,245,.34) 0%, rgba(120,220,245,0) 72%),
    radial-gradient(54% 66% at 96% 96%, rgba(150,195,255,.26) 0%, rgba(150,195,255,0) 72%),
    linear-gradient(135deg,#f1fcff 0%,#f9feff 100%);
  --m2:
    radial-gradient(58% 70% at 92% 10%, rgba(140,185,255,.30) 0%, rgba(140,185,255,0) 72%),
    radial-gradient(56% 66% at 6% 100%, rgba(135,215,245,.24) 0%, rgba(135,215,245,0) 72%),
    linear-gradient(160deg,#eff5ff 0%,#f8fbff 100%);
  --m3:
    radial-gradient(52% 64% at 100% 2%, rgba(130,215,245,.26) 0%, rgba(130,215,245,0) 72%),
    radial-gradient(52% 64% at 0% 98%,  rgba(160,200,255,.24) 0%, rgba(160,200,255,0) 72%),
    linear-gradient(180deg,#f6faff 0%,#fcfdff 100%);
  --m4:
    radial-gradient(72% 60% at 50% -6%, rgba(130,220,245,.30) 0%, rgba(130,220,245,0) 74%),
    radial-gradient(62% 48% at 50% 108%,rgba(160,200,255,.20) 0%, rgba(160,200,255,0) 74%),
    linear-gradient(180deg,#ffffff 0%,#fbfdff 100%);
  --m5:
    radial-gradient(46% 58% at 82% 18%, rgba(150,195,255,.26) 0%, rgba(150,195,255,0) 70%),
    radial-gradient(46% 58% at 14% 86%, rgba(125,215,245,.28) 0%, rgba(125,215,245,0) 70%),
    linear-gradient(118deg,#e6f6ff 0%,#f6faff 46%,#ebf2ff 100%);
  --m6:
    radial-gradient(56% 80% at 0% 50%,  rgba(145,190,255,.30) 0%, rgba(145,190,255,0) 74%),
    radial-gradient(48% 60% at 100% 100%,rgba(130,215,245,.24) 0%, rgba(130,215,245,0) 72%),
    linear-gradient(180deg,#eef4ff 0%,#f8fbff 100%);
}
.hero::before{ background:linear-gradient(225deg,#7ab4ff 0%,#6fd3f0 100%); opacity:.5; }
.hero::after{ background:linear-gradient(45deg,#6fd3f0 0%,#8fbcff 100%); opacity:.45; }
body::before{ background:#fbfdff; }

/* the loud bands settle into a calm mid-blue */
.signoff, .cta-band{ background:linear-gradient(135deg,#3f86f0 0%,#4f9cf2 52%,#58b4ee 100%); }
.statement, .assess{ background:linear-gradient(150deg,#1d4d9c 0%,#2a68c4 100%); }
.upg__panel{ background:linear-gradient(155deg, rgba(29,77,156,.92), rgba(42,104,196,.84)); }
.signoff::before{ opacity:.7; }

/* ==========================================================================
   Palettes v4: rhythm. Tinted gradient sections alternate with bright clean
   ones. Tinted ones are directional (sky to aqua, sky to periwinkle, ...) and
   carry a white bloom so they feel lit from within; the clean ones are almost
   white with a single soft colour breath. Logo cyan and blue only.
   ========================================================================== */
:root{
  /* 1 Aqua to sky (hero, 1st) */
  --m1:
    radial-gradient(46% 56% at 72% 40%, rgba(255,255,255,.75) 0%, rgba(255,255,255,0) 70%),
    radial-gradient(40% 52% at 0% 0%,   rgba(0,200,245,.30) 0%, rgba(0,200,245,0) 70%),
    linear-gradient(125deg,#c4effb 0%,#d5e8ff 55%,#e4efff 100%);
  /* 2 Clean white with a cyan breath */
  --m2:
    radial-gradient(60% 46% at 12% 0%,  rgba(0,200,245,.22) 0%, rgba(0,200,245,0) 72%),
    linear-gradient(180deg,#ffffff 0%,#f4f9ff 100%);
  /* 3 Periwinkle sky */
  --m3:
    radial-gradient(48% 58% at 28% 55%, rgba(255,255,255,.7) 0%, rgba(255,255,255,0) 70%),
    radial-gradient(44% 56% at 100% 0%, rgba(30,130,255,.22) 0%, rgba(30,130,255,0) 70%),
    linear-gradient(200deg,#cfe0ff 0%,#dcecff 52%,#cdf0fb 100%);
  /* 4 Clean white with a blue breath */
  --m4:
    radial-gradient(60% 46% at 90% 100%, rgba(30,130,255,.18) 0%, rgba(30,130,255,0) 72%),
    linear-gradient(180deg,#f5faff 0%,#ffffff 100%);
  /* 5 Fresh aqua */
  --m5:
    radial-gradient(46% 56% at 30% 40%, rgba(255,255,255,.7) 0%, rgba(255,255,255,0) 70%),
    radial-gradient(40% 52% at 100% 100%,rgba(30,130,255,.20) 0%, rgba(30,130,255,0) 70%),
    linear-gradient(160deg,#c9f3f8 0%,#d8f4fc 48%,#d3e5ff 100%);
  /* 6 Clean white with a soft cyan/blue pair */
  --m6:
    radial-gradient(44% 48% at 0% 100%,  rgba(0,200,245,.20) 0%, rgba(0,200,245,0) 72%),
    radial-gradient(44% 48% at 100% 0%,  rgba(30,130,255,.16) 0%, rgba(30,130,255,0) 72%),
    linear-gradient(180deg,#ffffff 0%,#f6faff 100%);
}
.hero::before{ opacity:.55; }
.hero::after{ opacity:.5; }
/* glass cards read best on the clean sections too: a touch more white inside them */
:root{ --glass-fill: linear-gradient(145deg, rgba(255,255,255,.86) 0%, rgba(255,255,255,.58) 100%); }

/* ==========================================================================
   Palettes v5: confident colour. Saturated sky / aqua / cyan-to-blue
   gradients (still light enough for navy text) alternating with crisp white
   sections. A white bloom sits behind the content of each coloured section so
   copy stays crisp and the glass cards have something to refract.
   ========================================================================== */
:root{
  /* 1 Cyan to blue: hero */
  --m1:
    radial-gradient(42% 60% at 28% 55%, rgba(255,255,255,.62) 0%, rgba(255,255,255,0) 72%),
    radial-gradient(40% 56% at 100% 0%, rgba(0,103,253,.30) 0%, rgba(0,103,253,0) 70%),
    linear-gradient(118deg,#7fdcf6 0%,#9cc9ff 52%,#bcd6ff 100%);
  /* 2 Crisp white */
  --m2: linear-gradient(180deg,#ffffff 0%,#f7fafe 100%);
  /* 3 Sky blue */
  --m3:
    radial-gradient(46% 58% at 30% 50%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 72%),
    radial-gradient(40% 56% at 100% 100%,rgba(0,188,238,.30) 0%, rgba(0,188,238,0) 70%),
    linear-gradient(160deg,#9ccbff 0%,#bfdcff 55%,#cdeaff 100%);
  /* 4 Crisp white with a cool breath */
  --m4:
    radial-gradient(60% 46% at 50% 100%, rgba(0,188,238,.20) 0%, rgba(0,188,238,0) 72%),
    linear-gradient(180deg,#f6f9fd 0%,#ffffff 100%);
  /* 5 Aqua */
  --m5:
    radial-gradient(46% 58% at 70% 50%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 72%),
    radial-gradient(40% 56% at 0% 0%,   rgba(0,103,253,.26) 0%, rgba(0,103,253,0) 70%),
    linear-gradient(140deg,#8fe3f3 0%,#b4ecf8 55%,#c5e8ff 100%);
  /* 6 Crisp white with a pair of soft colour breaths */
  --m6:
    radial-gradient(44% 48% at 0% 100%,  rgba(0,188,238,.20) 0%, rgba(0,188,238,0) 72%),
    radial-gradient(44% 48% at 100% 0%,  rgba(0,103,253,.16) 0%, rgba(0,103,253,0) 72%),
    linear-gradient(180deg,#ffffff 0%,#f6faff 100%);
}
/* copy on the coloured sections: darker, so it stays crisp */
.lede, .opener__lede, .hero__lede, .muted, .small.muted, .note-under{ color:#2f4468; }
.hero .label, .opener .label{ background:rgba(255,255,255,.72); }
.hero::before{ opacity:.4; }
.hero::after{ opacity:.35; }
:root{ --slate:#41567a; }

/* ==========================================================================
   Palettes v6: the gradient-mesh structure of the reference, in logo hues.
   Each section mixes FOUR clearly different tones as large soft patches on a
   near-white ground, with a bright open middle:
     aqua  #5fe0f5  (logo cyan, lifted)
     azure #4aa3ff  (logo blue, lifted)
     royal #2a6cff  (logo blue)
     slate #7f95c8  (logo navy, softened: the muted corner that adds depth)
   Six arrangements rotate so neighbouring sections never match.
   ========================================================================== */
:root{
  /* 1 hero: aqua top-left, azure bottom-left, slate top-right, royal bottom-right */
  --m1:
    radial-gradient(46% 58% at 4% 6%,   rgba(95,224,245,.62) 0%, rgba(95,224,245,0) 70%),
    radial-gradient(44% 60% at 0% 100%, rgba(74,163,255,.55) 0%, rgba(74,163,255,0) 70%),
    radial-gradient(40% 52% at 100% 2%, rgba(127,149,200,.50) 0%, rgba(127,149,200,0) 70%),
    radial-gradient(46% 58% at 100% 100%,rgba(42,108,255,.42) 0%, rgba(42,108,255,0) 70%),
    #fdfeff;
  /* 2 clean, one royal and one aqua corner only */
  --m2:
    radial-gradient(40% 50% at 100% 0%, rgba(74,163,255,.30) 0%, rgba(74,163,255,0) 70%),
    radial-gradient(40% 50% at 0% 100%, rgba(95,224,245,.30) 0%, rgba(95,224,245,0) 70%),
    #ffffff;
  /* 3 azure left, aqua top-right, slate bottom-right */
  --m3:
    radial-gradient(48% 62% at 0% 40%,  rgba(74,163,255,.52) 0%, rgba(74,163,255,0) 70%),
    radial-gradient(44% 56% at 100% 0%, rgba(95,224,245,.50) 0%, rgba(95,224,245,0) 70%),
    radial-gradient(42% 54% at 100% 100%,rgba(127,149,200,.44) 0%, rgba(127,149,200,0) 70%),
    radial-gradient(34% 40% at 20% 100%,rgba(42,108,255,.30) 0%, rgba(42,108,255,0) 70%),
    #fcfdff;
  /* 4 clean with a single wide aqua band */
  --m4:
    radial-gradient(70% 46% at 50% 100%, rgba(95,224,245,.34) 0%, rgba(95,224,245,0) 72%),
    radial-gradient(34% 40% at 0% 0%,    rgba(127,149,200,.22) 0%, rgba(127,149,200,0) 70%),
    #ffffff;
  /* 5 royal top-left, aqua bottom-left, azure right, slate hint */
  --m5:
    radial-gradient(46% 58% at 0% 0%,   rgba(42,108,255,.40) 0%, rgba(42,108,255,0) 70%),
    radial-gradient(46% 60% at 6% 100%, rgba(95,224,245,.52) 0%, rgba(95,224,245,0) 70%),
    radial-gradient(44% 58% at 100% 50%,rgba(74,163,255,.48) 0%, rgba(74,163,255,0) 70%),
    radial-gradient(30% 36% at 88% 2%,  rgba(127,149,200,.36) 0%, rgba(127,149,200,0) 70%),
    #fcfeff;
  /* 6 clean with royal and slate breaths */
  --m6:
    radial-gradient(42% 50% at 0% 0%,   rgba(74,163,255,.28) 0%, rgba(74,163,255,0) 70%),
    radial-gradient(42% 50% at 100% 100%,rgba(127,149,200,.26) 0%, rgba(127,149,200,0) 70%),
    #ffffff;
}
.hero::before{ background:linear-gradient(225deg,#4aa3ff 0%,#5fe0f5 100%); opacity:.5; }
.hero::after{ background:linear-gradient(45deg,#5fe0f5 0%,#4aa3ff 100%); opacity:.45; }
.lede, .opener__lede, .hero__lede{ color:#2c4166; }

/* ==========================================================================
   Footer glass. Navy base with soft cyan and blue glows behind it (so the
   glass has colour to refract), frosted panels for the call box and the link
   columns, and a glass pill that lights up behind any link on hover or focus.
   ========================================================================== */
.site-footer{
  background:
    radial-gradient(46% 60% at 8% 0%,    rgba(0,188,238,.38) 0%, rgba(0,188,238,0) 70%),
    radial-gradient(44% 58% at 96% 100%, rgba(30,130,255,.42) 0%, rgba(30,130,255,0) 70%),
    radial-gradient(34% 44% at 100% 6%,  rgba(95,224,245,.20) 0%, rgba(95,224,245,0) 70%),
    linear-gradient(160deg,#001338 0%,#082c66 100%);
}
.site-footer .ft__top{ border-bottom:0; }
.ft__call{
  padding:clamp(20px,2.4vw,32px); border-radius:var(--radius-xl);
  background:linear-gradient(145deg, rgba(255,255,255,.18), rgba(255,255,255,.06));
  -webkit-backdrop-filter:blur(22px) saturate(180%); backdrop-filter:blur(22px) saturate(180%);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.45), inset 0 0 0 1px rgba(255,255,255,.18), 0 24px 50px rgba(0,10,40,.35);
}
.ft__cols{ gap:clamp(14px,1.6vw,22px); }
.ft__col{
  padding:clamp(16px,1.8vw,24px); border-radius:var(--radius-lg);
  background:linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
  -webkit-backdrop-filter:blur(18px) saturate(170%); backdrop-filter:blur(18px) saturate(170%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), inset 0 0 0 1px rgba(255,255,255,.12);
}
.ft__col h4{ margin-bottom:8px; }
.ft__col ul{ display:grid; gap:2px; }
.site-footer .ft__col a:not(.btn), .footer__legal a{
  position:relative; display:flex; align-items:center; gap:8px; margin:0 -10px; padding:7px 10px; border-radius:12px;
  transition:background .3s var(--ease), box-shadow .3s var(--ease), color .2s var(--ease), transform .3s var(--ease);
}
.site-footer .ft__col a:not(.btn):hover, .site-footer .ft__col a:not(.btn):focus-visible,
.footer__legal a:hover, .footer__legal a:focus-visible{
  color:#fff; transform:translateX(3px);
  background:linear-gradient(145deg, rgba(255,255,255,.30), rgba(255,255,255,.10));
  -webkit-backdrop-filter:blur(14px) saturate(190%); backdrop-filter:blur(14px) saturate(190%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65), inset 0 0 0 1px rgba(255,255,255,.28), 0 8px 18px rgba(0,10,40,.28);
}
.site-footer .ft__col a:not(.btn):focus-visible{ outline:2px solid rgba(255,255,255,.8); outline-offset:1px; }
.ft__call-n{ display:inline-block; border-radius:14px; padding:2px 8px; margin-left:-8px; transition:background .3s var(--ease), box-shadow .3s var(--ease); }
.ft__call-n:hover{ background:linear-gradient(145deg, rgba(255,255,255,.28), rgba(255,255,255,.08)); box-shadow:inset 0 1px 0 rgba(255,255,255,.6), inset 0 0 0 1px rgba(255,255,255,.25); }
.footer__bar{ border-top:1px solid rgba(255,255,255,.14); }
.footer__legal a{ display:inline-flex; margin:0 2px; }

/* the same glass hover on other lists of options */
.acc__body a:hover, .toc a:hover, .qa__item summary:hover, .upg__row:hover{
  -webkit-backdrop-filter:blur(14px) saturate(180%); backdrop-filter:blur(14px) saturate(180%);
}
.acc__body a:hover, .acc__body a[aria-current="page"]{
  background:linear-gradient(145deg, rgba(255,255,255,.95), rgba(255,255,255,.6));
  box-shadow:inset 0 1px 0 #fff, inset 0 0 0 1px rgba(255,255,255,.7), 0 8px 18px rgba(0,60,160,.12);
}
.toc a:hover{ background:linear-gradient(145deg, rgba(255,255,255,.95), rgba(255,255,255,.6)); box-shadow:inset 0 1px 0 #fff, 0 8px 18px rgba(0,60,160,.12); }
.submenu__col a.mi:hover, .submenu__col a.mi:focus-visible{
  background:linear-gradient(145deg, rgba(255,255,255,.95), rgba(225,240,255,.7));
  box-shadow:inset 0 1px 0 #fff, inset 0 0 0 1px rgba(255,255,255,.7), 0 8px 20px rgba(0,60,160,.12);
}
.site-footer .ft__social{ border-bottom:0; font-weight:700; }

/* Mobile / tablet drawer, fixed. The group cards were being squashed by the flex column
   (so "Commercial" and "Company" were clipped); they now keep their full height and the
   drawer scrolls. The "start here" card is a solid navy-to-blue gradient again. */
.drawer{ height:100vh; height:100dvh; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
.drawer > *{ flex:none; }
.drawer .acc{ flex:none; min-height:0; overflow:visible; border-radius:20px; }
.drawer .acc__top{ min-height:56px; }
.drawer .acc__body{ overflow:visible; }
.acc__body a.dr__lead, .acc__body a.dr__lead:hover{
  background:linear-gradient(135deg,#0a2a6b 0%,#0067FD 100%) !important;
  -webkit-backdrop-filter:none; backdrop-filter:none; color:#fff !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 12px 26px rgba(0,60,180,.30) !important;
}
.drawer__foot{ position:sticky; bottom:0; margin-top:auto; z-index:2; background:linear-gradient(180deg,rgba(255,255,255,0),#fff 22%); }
@media (min-width:600px){ .drawer{ width:min(70vw,440px); } }
.acc__top[aria-expanded="true"] .acc__mark::after{ transform:scaleY(0); }
/* Mobile dock: opaque enough to read over photos. */
.stickybar__call{ background:linear-gradient(145deg,rgba(255,255,255,.97),rgba(240,247,255,.94)); color:var(--navy); }
.stickybar__quote{ background:var(--spec), linear-gradient(135deg,#0a86ee 0%,#0067FD 55%,#0050D2 100%); }
.stickybar{ padding-bottom:calc(10px + env(safe-area-inset-bottom,0px)); }

/* Brand logos always show their ORIGINAL colours, on every page, at rest and on hover. */
.bfam__tile img, .bfam__tile:hover img, .bfam__tile:focus-within img{ filter:none !important; opacity:1 !important; }
@media (hover:hover){ .bfam__tile img{ filter:none !important; opacity:1 !important; } .bfam__tile:hover img{ transform:scale(1.07); } }

/* Tablet / phone: photo frames and their placeholders are shorter, so the page isn't mostly empty boxes. */
@media (max-width:860px){
  .hero__media{ aspect-ratio:16 / 10; min-height:0; max-height:none; }
  .sec__body > .sec__photo{ aspect-ratio:16 / 10; }
}
@media (max-width:540px){
  .hero__media{ aspect-ratio:4 / 3; }
  .sec__body > .sec__photo{ aspect-ratio:4 / 3; }
}


/* ==========================================================================
   Dropdown v5: no icons. Each option is a clean text row: bold title with a
   few plain words beneath it (what the page is), and a small arrow that slides
   in on hover. The hovered row becomes a frosted pill. Group headings are
   small caps with a quiet count.
   ========================================================================== */
.submenu__col a.mi{
  display:grid; grid-template-columns:minmax(0,1fr) 30px; align-items:center; gap:10px; margin:0;
  padding:11px 12px 11px 16px; border-radius:18px;
}
.mi__txt{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.mi__t{ font-family:var(--font-display); font-weight:700; font-size:16px; line-height:1.2; color:var(--ink); letter-spacing:-.005em; }
.mi__d{ display:block; font-size:12.5px; font-weight:500; line-height:1.3; color:#5b6f90; }
.mi__go{
  width:30px; height:30px; display:grid; place-items:center; border-radius:50%; color:var(--blue-600);
  background:linear-gradient(145deg, rgba(255,255,255,.95), rgba(255,255,255,.55)); box-shadow:inset 0 1px 0 #fff, 0 6px 14px rgba(0,60,160,.14);
  opacity:0; transform:translateX(-8px) scale(.85); transition:opacity .3s var(--ease), transform .35s var(--ease);
}
.mi__go svg{ width:15px; height:15px; }
.submenu__col a.mi:hover, .submenu__col a.mi:focus-visible{
  background:linear-gradient(145deg, rgba(235,244,255,.95), rgba(225,243,255,.7));
  box-shadow:inset 0 1px 0 #fff, inset 0 0 0 1px rgba(255,255,255,.7), 0 10px 22px rgba(0,60,160,.10);
}
.submenu__col a.mi:hover .mi__go, .submenu__col a.mi:focus-visible .mi__go{ opacity:1; transform:none; }
.submenu__col a.mi:hover .mi__t, .submenu__col a.mi:focus-visible .mi__t{ color:var(--blue-600); }
.submenu__col a.mi[aria-current="page"] .mi__t{ color:var(--blue-600); }
.submenu__col a.mi[aria-current="page"]{ background:linear-gradient(145deg, rgba(235,244,255,.9), rgba(225,243,255,.6)); }
.submenu__col a.mi[aria-current="page"] .mi__go{ opacity:1; transform:none; background:var(--blue); color:#fff; }
.submenu__title{ margin:2px 0 8px 16px; font-size:11px; letter-spacing:.22em; color:var(--blue-600); }
.submenu__col ul{ gap:4px; }
.submenu__cols{ gap:8px 18px; }
@media (min-width:1025px){ .submenu__inner{ grid-template-columns:minmax(0,.7fr) minmax(0,2.3fr); } }

/* drawer rows: title only, no icon */
.acc__body a{ padding:11px 12px; gap:0; justify-content:space-between; }
.acc__body a:not(.dr__lead)::after{ content:"\2192"; color:var(--blue); opacity:.35; font-size:15px; transition:opacity .2s, transform .2s var(--ease); }
.acc__body a:not(.dr__lead):hover::after{ opacity:1; transform:translateX(3px); }


/* Footer: Residential is a wide panel with one sub-column per group, so the size pages are listed. */
@media (min-width:861px){
  .ft__cols{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .ft__col--wide{ grid-column:1 / -1; }
  .ft__col--contact{ grid-column:span 2; }
}
.ft__sub{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 24px; }
@media (min-width:861px){ .ft__sub{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.ft__subt{ margin:0 0 6px; font-family:var(--font-display); font-weight:700; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--cyan); }
.ft__sub ul{ display:grid; gap:2px; }

/* Dropdown: four columns for Residential. */
.submenu__col a.mi{ padding:9px 10px 9px 14px; }
.submenu__cols[style*="--cols:4"] .mi__d{ font-size:12px; }
@media (min-width:1025px){
  .submenu__inner:has(.submenu__cols[style*="--cols:4"]){ grid-template-columns:minmax(0,.46fr) minmax(0,2.54fr); gap:0 22px; padding:20px 20px 18px; }
  .submenu__cols[style*="--cols:4"]{ gap:4px 8px; }
  .submenu__cols[style*="--cols:4"] .mi__t{ font-size:14.5px; white-space:nowrap; }
  .submenu__cols[style*="--cols:4"] .mi__d{ font-size:11.5px; }
  .submenu__cols[style*="--cols:4"] a.mi{ grid-template-columns:minmax(0,1fr) 24px; padding:8px 6px 8px 12px; gap:6px; }
  .submenu__cols[style*="--cols:4"] .mi__go{ width:24px; height:24px; }
  .submenu__cols[style*="--cols:4"] .submenu__title{ margin-left:12px; }
  .submenu__inner:has(.submenu__cols[style*="--cols:4"]) .submenu__lead{ padding:34px 18px 20px; }
  .submenu__inner:has(.submenu__cols[style*="--cols:4"]) .submenu__lead-title{ font-size:20px; }
}
/* Closed or open, the full-width submenu layer must not swallow clicks beside the panel. */
.submenu.is-open{ pointer-events:none; }
.submenu.is-open .submenu__inner{ pointer-events:auto; }

/* Footer: the Residential panel spans the full width at every size, with two sub-columns on phones. */
.ft__col--wide{ grid-column:1 / -1; }
@media (max-width:560px){ .ft__col--wide{ padding:16px 14px; } .ft__sub{ gap:16px 14px; } .ft__col--contact{ grid-column:1 / -1; } }

/* Dropdown sits snug under the header: a 4px gap instead of ~10px plus the entrance offset. */
.submenu{ top:calc(100% - 4px); }
.submenu__inner{ margin-top:0; transform:translateY(-8px) scale(.985); }
.submenu.is-open .submenu__inner{ transform:none; }

/* Photo frames match the pictures. Section photos are 5:4 and heroes 4:3, so nothing
   is cropped off the top or bottom (heads, rooftops, equipment); on desktop the
   hero keeps its tall split but anchors the crop to the upper part of the picture. */
.sec__body > .sec__photo, .sec__photo{ aspect-ratio:5 / 4; }
@media (max-width:860px){
  .hero__media{ aspect-ratio:4 / 3; }
  .sec__body > .sec__photo{ aspect-ratio:5 / 4; }
}
@media (min-width:861px){ .sec__body > .sec__photo{ max-width:620px; } }
.hero__media .media-fill, .sec__photo .media-fill, .proper2__photo .media-fill, .range__photo .media-fill{ object-position:50% 30%; }
.hero__media--packages .media-fill{ object-position:58% 30%; }
.hero__media--10kw-package .media-fill{ object-position:65% 30%; }
@media (max-width:860px){
  .hero__media--10kw-package .media-fill{ object-position:100% 30%; }
}
/* Home portrait photos on small screens: tall frames so the subject isn't cut. */
@media (max-width:860px){
  .proper2__photo{ aspect-ratio:6 / 7; max-height:none; }
  .range__photo{ aspect-ratio:5 / 6; }
}
@media (max-width:1024px){ .range__photo{ aspect-ratio:5 / 6; } }

/* Section rhythm: the opener sections were 190px+ of padding top and bottom at desktop widths; tightened. */
:root{ --space:clamp(64px,7.4vw,118px); }
.band{ padding-block:var(--space); }
.band--tight{ padding-block:clamp(48px,5.6vw,88px); }
.hub{ padding-bottom:clamp(48px,6vw,88px); }
.opener{ margin-bottom:clamp(30px,3.6vw,52px); }

/* Footer column titles are h3 now (heading order); same look as the old h4. */
.ft__col .ft__h{ margin:0 0 8px; font-family:var(--font-display); font-weight:700; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--cyan); }
.masthead .logo picture, .drawer__logo picture, .ft__brand picture{ display:block; }

/* ==========================================================================
   Accessibility and performance pass.
   - White text on blue now meets WCAG AA (4.5:1): the primary-button tint and the
     blue bands start from a deeper blue (the old light end was 2.3:1 to 3.2:1).
   - backdrop-filter is expensive when dozens of repeated cards use it, so only
     the chrome that floats over content keeps it (header, menus, modal, nav track,
     breadcrumb, dock); repeated cards, list items and chips use a plain
     translucent fill, which looks the same over these pale backgrounds.
   ========================================================================== */
:root{
  --tint-blue: linear-gradient(135deg, rgba(0,104,222,.94) 0%, rgba(0,84,214,.96) 55%, rgba(0,64,196,.98) 100%);
  --tint-blue-hover: linear-gradient(135deg, rgba(0,118,236,.96) 0%, rgba(0,96,226,.97) 55%, rgba(0,74,206,.98) 100%);
  --cta-glass: linear-gradient(135deg, rgba(0,108,224,.96) 0%, rgba(0,86,214,.97) 52%, rgba(0,66,198,.98) 100%);
  --grad-cta: linear-gradient(135deg,#0070DB 0%,#0058D8 52%,#0048C0 100%);
  --grad-band: linear-gradient(135deg,#1a4fc4 0%,#2260d4 55%,#2a70e0 100%);
}
.signoff, .cta-band{ background:var(--grad-band); }
.btn--solid, .btn.btn--solid, .mast-cta, .stickybar__quote, .qmodal__submit{ color:#fff; }

.fcard, .pcard, .pkg, .rcard, .bfam, .rebate__card, .timeline__card, .qa__item, .qa__help, .upg__row, .checks li, .range__row,
.hero__specs li, .ribbon .ribbon__item, .toc a, .proof__item, .table-wrap, .pcard__chips a, .label, .sec__n,
.band .fcard, .band--mist .fcard, .band .pcard, .band .pkg, .band .rcard, .band .bfam, .band .checks li, .band .qa__item,
.acc, .mi__go, .qa__toggle, .rcard__a, .upg__go{
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
.fcard, .pcard, .pkg, .rcard, .bfam, .qa__item, .qa__help, .checks li, .toc a, .table-wrap, .band .fcard, .band .pcard, .band .pkg, .band .rcard, .band .bfam, .band .checks li, .band .qa__item{
  background:linear-gradient(145deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.80) 100%);
}
/* phones: drop the heaviest effects entirely */
@media (max-width:860px){
  .crumbs__list, .mainnav__list, .burger, .drawer__close, .stickybar__call{ -webkit-backdrop-filter:none; backdrop-filter:none; }
  .crumbs__list, .stickybar__call{ background:rgba(255,255,255,.96); }
}


/* ==========================================================================
   Thank-you page
   ========================================================================== */
.ty{ position:relative; text-align:center; padding-block:clamp(56px,9vw,120px) clamp(48px,7vw,96px); }
.ty__inner{ display:flex; flex-direction:column; align-items:center; gap:18px; max-width:760px; }
.ty h1{ margin:0; font-size:clamp(34px,5.2vw,62px); line-height:1.06; letter-spacing:-.03em; max-width:18ch; }
.ty__lede{ margin:0; max-width:52ch; font-size:clamp(17px,1.5vw,20px); line-height:1.6; color:#2f4468; }
.ty__actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:6px; }
.ty__badge{
  width:96px; height:96px; display:grid; place-items:center; border-radius:50%; color:#fff;
  background:linear-gradient(135deg,#0070DB,#0048C0); box-shadow:inset 0 1.5px 0 rgba(255,255,255,.6), 0 22px 50px rgba(0,80,210,.35);
  animation:ty-pop .7s var(--spring, cubic-bezier(.34,1.56,.64,1)) both;
}
.ty__badge svg{ width:52px; height:52px; }
.ty__ring{ stroke-opacity:.35; }
.ty__tick{ stroke-dasharray:44; stroke-dashoffset:44; animation:ty-draw .6s .45s var(--ease) forwards; }
@keyframes ty-pop{ from{ transform:scale(.4); opacity:0; } to{ transform:none; opacity:1; } }
@keyframes ty-draw{ to{ stroke-dashoffset:0; } }
.ty__steps{ list-style:none; margin:0; padding:0; display:grid; gap:clamp(14px,1.8vw,22px); }
@media (min-width:800px){ .ty__steps{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.ty__step{ padding:clamp(22px,2.4vw,32px); border-radius:var(--radius-xl); background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(255,255,255,.8)); box-shadow:0 14px 36px rgba(0,50,140,.09); }
.ty__n{ display:block; font-family:var(--font-display); font-weight:700; font-size:clamp(40px,4vw,56px); line-height:1; letter-spacing:-.04em; color:#cfe0ff; margin-bottom:10px; }
.ty__step h3{ margin:0 0 8px; font-size:clamp(19px,1.7vw,23px); line-height:1.2; }
.ty__step p{ margin:0; font-size:15px; line-height:1.65; color:var(--slate); }
.ty__call{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px 32px;
  padding:clamp(24px,3vw,40px); border-radius:var(--radius-xl); color:#fff; background:var(--grad-navy);
  box-shadow:0 30px 70px rgba(0,19,56,.28);
}
.ty__call h2{ margin:0 0 6px; color:#fff; font-size:clamp(24px,2.6vw,34px); }
.ty__call p{ margin:0; color:rgba(255,255,255,.82); }
.ty__call-actions{ display:flex; flex-wrap:wrap; gap:12px; }
.ty__call .btn--line{ color:#fff; background:rgba(255,255,255,.14); box-shadow:inset 0 0 0 1px rgba(255,255,255,.4); }
.ty__urgent, .ty__more{ padding-block:clamp(28px,4vw,56px); }
.ty__more{ padding-bottom:clamp(56px,7vw,100px); }
@media (prefers-reduced-motion:reduce){ .ty__badge, .ty__tick{ animation:none; stroke-dashoffset:0; } }


/* ==========================================================================
   Thank-you page v2: split hero with a glass "your enquiry" card and a progress
   tracker, soft floating colour, and a one-time confetti burst.
   ========================================================================== */
.ty2{
  position:relative; overflow:hidden; isolation:isolate; padding-block:clamp(48px,7vw,100px) clamp(48px,6vw,88px);
  background:
    radial-gradient(46% 60% at 6% 0%, rgba(95,224,245,.55) 0%, rgba(95,224,245,0) 70%),
    radial-gradient(44% 60% at 100% 100%, rgba(74,163,255,.45) 0%, rgba(74,163,255,0) 70%),
    radial-gradient(38% 50% at 100% 0%, rgba(127,149,200,.30) 0%, rgba(127,149,200,0) 70%),
    #fbfdff;
}
.ty2__orb{ position:absolute; z-index:-1; border-radius:50%; filter:blur(50px); opacity:.55; animation:ty-float 9s ease-in-out infinite alternate; }
.ty2__orb--a{ width:280px; height:280px; left:-60px; bottom:-80px; background:#5fe0f5; }
.ty2__orb--b{ width:220px; height:220px; right:8%; top:-60px; background:#4aa3ff; animation-delay:-4s; }
@keyframes ty-float{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(20px,-26px,0); } }
.ty2__grid{ display:grid; gap:clamp(30px,5vw,64px); align-items:center; }
@media (min-width:900px){ .ty2__grid{ grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); } }
.ty2__copy{ display:flex; flex-direction:column; align-items:flex-start; gap:18px; }
.ty2__copy h1{ margin:0; font-size:clamp(36px,5.2vw,64px); line-height:1.04; letter-spacing:-.03em; max-width:15ch; }
.ty2__lede{ margin:0; max-width:50ch; font-size:clamp(17px,1.4vw,20px); line-height:1.6; color:#2f4468; }
.ty2__actions{ justify-content:flex-start; }
.ty2 .ty__badge{ width:84px; height:84px; }
.ty2 .ty__badge svg{ width:46px; height:46px; }

.ty2__card{
  position:relative; padding:clamp(22px,2.6vw,34px); border-radius:clamp(24px,2.6vw,34px);
  background:linear-gradient(150deg, rgba(255,255,255,.92), rgba(255,255,255,.72));
  -webkit-backdrop-filter:blur(26px) saturate(190%); backdrop-filter:blur(26px) saturate(190%);
  box-shadow:inset 0 1.5px 0 #fff, inset 0 0 0 1px rgba(255,255,255,.6), 0 0 0 1px rgba(0,103,253,.10), 0 40px 90px rgba(0,50,140,.20);
  animation:ty-rise .8s .15s var(--ease) both;
}
@keyframes ty-rise{ from{ transform:translateY(24px); opacity:0; } to{ transform:none; opacity:1; } }
.ty2__card-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.ty2__card-k{ font-family:var(--font-display); font-weight:700; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--blue-600); }
.ty2__pill{ padding:6px 12px; border-radius:999px; font-family:var(--font-display); font-weight:700; font-size:12px; color:#0a56c8; background:#e4efff; box-shadow:inset 0 0 0 1px rgba(0,103,253,.15); }
.ty2__facts{ margin:0 0 6px; padding:0; display:grid; }
.ty2__facts > div{ display:flex; justify-content:space-between; gap:16px; padding:11px 0; border-bottom:1px solid rgba(0,103,253,.10); }
.ty2__facts > div[hidden]{ display:none; }
.ty2__facts dt{ font-size:13px; color:var(--slate); }
.ty2__facts dd{ margin:0; font-family:var(--font-display); font-weight:700; font-size:15px; text-align:right; color:var(--ink); }
.ty2__track{ list-style:none; margin:16px 0 0; padding:0; display:grid; gap:0; position:relative; }
.ty2__track li{ position:relative; display:grid; grid-template-columns:28px minmax(0,1fr); gap:14px; padding:0 0 18px; }
.ty2__track li:last-child{ padding-bottom:0; }
.ty2__track li::before{ content:""; position:absolute; left:13px; top:26px; bottom:-2px; width:2px; background:linear-gradient(180deg,rgba(0,103,253,.35),rgba(0,103,253,.10)); }
.ty2__track li:last-child::before{ display:none; }
.ty2__dot{ position:relative; width:28px; height:28px; border-radius:50%; background:#fff; box-shadow:inset 0 0 0 2px rgba(0,103,253,.25); }
.ty2__track li.done .ty2__dot{ background:linear-gradient(135deg,#0070DB,#0048C0); box-shadow:0 6px 14px rgba(0,80,210,.35); }
.ty2__track li.done .ty2__dot::after{ content:""; position:absolute; left:9px; top:6px; width:6px; height:11px; border:solid #fff; border-width:0 2.5px 2.5px 0; transform:rotate(45deg); }
.ty2__track li.now .ty2__dot{ box-shadow:inset 0 0 0 2px #0067FD; }
.ty2__track li.now .ty2__dot::after{ content:""; position:absolute; inset:7px; border-radius:50%; background:#0067FD; animation:ty-pulse 1.6s ease-in-out infinite; }
@keyframes ty-pulse{ 0%,100%{ transform:scale(.7); opacity:.7; } 50%{ transform:scale(1.1); opacity:1; } }
.ty2__track b{ display:block; font-family:var(--font-display); font-size:16px; line-height:1.25; color:var(--ink); }
.ty2__track span:not(.ty2__dot){ display:block; margin-top:2px; font-size:13.5px; line-height:1.5; color:var(--slate); }

/* confetti: one burst on load, brand colours only */
.ty2__confetti{ position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.ty2__confetti i{
  position:absolute; top:-14px; left:calc(var(--i) * 4.5% + 2%); width:9px; height:16px; border-radius:3px; opacity:0;
  background:var(--c, #4aa3ff); animation:ty-fall calc(2.4s + (var(--i) * .11s)) calc(var(--i) * .06s) cubic-bezier(.3,.6,.4,1) 1 both;
}
.ty2__confetti i:nth-child(3n){ --c:#5fe0f5; width:8px; height:8px; border-radius:50%; }
.ty2__confetti i:nth-child(3n+1){ --c:#0067FD; }
.ty2__confetti i:nth-child(5n){ --c:#7f95c8; }
@keyframes ty-fall{ 0%{ opacity:0; transform:translate3d(0,0,0) rotate(0); } 12%{ opacity:.9; } 100%{ opacity:0; transform:translate3d(calc((var(--i) - 11) * 6px), 78vh, 0) rotate(520deg); } }
@media (prefers-reduced-motion:reduce){ .ty2__orb, .ty2__card, .ty2__confetti i, .ty2__track li.now .ty2__dot::after{ animation:none; } .ty2__confetti{ display:none; } .ty2__card{ opacity:1; } }

/* the lower sections, polished */
.ty__next{ background:transparent; }
.ty__step{ position:relative; overflow:hidden; transition:transform .4s var(--ease), box-shadow .4s var(--ease); }
.ty__step::after{ content:""; position:absolute; right:-40px; bottom:-40px; width:120px; height:120px; border-radius:50%; background:radial-gradient(circle, rgba(95,224,245,.32), rgba(95,224,245,0) 70%); pointer-events:none; }
.ty__step:hover{ transform:translateY(-6px); box-shadow:0 26px 54px rgba(0,60,160,.16); }


/* ==========================================================================
   Popup v3: bright mesh header with trust chips, soft inputs with a clear focus
   glow, custom dropdown arrow, quiet Cancel. Still sized to fit one screen.
   ========================================================================== */
.qmodal__panel{ border-radius:clamp(24px,2.6vw,32px); background:#fff; box-shadow:0 50px 110px rgba(0,19,56,.5), 0 0 0 1px rgba(255,255,255,.5); }
.qmodal__head{
  background:
    radial-gradient(60% 90% at 0% 0%, rgba(95,224,245,.75) 0%, rgba(95,224,245,0) 70%),
    radial-gradient(56% 90% at 100% 100%, rgba(74,163,255,.65) 0%, rgba(74,163,255,0) 70%),
    radial-gradient(40% 70% at 100% 0%, rgba(127,149,200,.35) 0%, rgba(127,149,200,0) 70%),
    #f4fbff;
  border-bottom:1px solid rgba(0,103,253,.10);
}
.qmodal__head::before, .qmodal__head::after{ display:none; }
.qmodal__head .label{ background:rgba(255,255,255,.85); -webkit-background-clip:border-box; background-clip:border-box; color:var(--blue-600); box-shadow:inset 0 1px 0 #fff, 0 0 0 1px rgba(0,103,253,.12); }
.qmodal__head h2{ color:var(--ink); letter-spacing:-.025em; }
.qmodal__head p{ color:#33486d; }
.qmodal__trust{ list-style:none; display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 0; padding:0; }
.qmodal__trust li{
  display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:999px; font-family:var(--font-display); font-weight:700; font-size:11.5px; color:#0a3f9e;
  background:rgba(255,255,255,.8); box-shadow:inset 0 1px 0 #fff, 0 0 0 1px rgba(0,103,253,.12);
}
.qmodal__trust li::before{ content:""; width:5px; height:9px; margin-top:-2px; border:solid #0067FD; border-width:0 2px 2px 0; transform:rotate(45deg) scale(.9); }
.qmodal__close{ background:rgba(255,255,255,.85); color:var(--ink); box-shadow:0 0 0 1px rgba(0,103,253,.14), 0 6px 14px rgba(0,50,140,.12); }
.qmodal__close:hover{ background:#fff; color:var(--blue-600); }

.mfield label{ font-size:12px; letter-spacing:.01em; color:#1b2f55; }
.mfield input, .mfield select, .mfield textarea{
  background:#f3f8ff; border:1.5px solid transparent; box-shadow:inset 0 1px 2px rgba(0,50,140,.06);
  border-radius:14px; transition:border-color .2s var(--ease), background .2s var(--ease), box-shadow .25s var(--ease);
}
.mfield input:hover, .mfield select:hover, .mfield textarea:hover{ background:#edf4ff; }
.mfield input:focus, .mfield select:focus, .mfield textarea:focus{
  background:#fff; border-color:#0067FD; box-shadow:0 0 0 4px rgba(0,103,253,.14), 0 8px 20px rgba(0,60,160,.10);
}
.mfield input::placeholder, .mfield textarea::placeholder{ color:#8497b6; }
.mfield select{ -webkit-appearance:none; appearance:none; cursor:pointer; padding-right:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230050D2' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center; background-size:16px; }
.mfield input:not(:placeholder-shown):valid:not([type=hidden]){ border-color:rgba(0,103,253,.22); }
.qmodal__form .btn--solid{ margin-top:2px; }
.qmodal__cancel{ background:none !important; box-shadow:none !important; -webkit-backdrop-filter:none; backdrop-filter:none; color:#5b6f90; padding-block:6px !important; font-weight:600; }
.qmodal__cancel:hover{ color:var(--blue-600); transform:none; }
.qmodal__alt{ margin-top:2px; }
.qmodal__consent{ color:#6b7d9c; }
.qmodal.open .qmodal__panel{ animation:qm-in .5s var(--ease) both; }
@keyframes qm-in{ from{ opacity:0; transform:translateY(22px) scale(.97); } to{ opacity:1; transform:none; } }
@media (max-height:780px){ .qmodal__trust{ display:none; } }
@media (prefers-reduced-motion:reduce){ .qmodal.open .qmodal__panel{ animation:none; } }


/* ==========================================================================
   ARCtick certification badge and feature block
   ========================================================================== */
.arc{ display:inline-block; line-height:0; padding:10px 12px; border-radius:16px; background:#fff; box-shadow:0 10px 26px rgba(0,30,90,.18), 0 0 0 1px rgba(0,103,253,.10); transition:transform .4s var(--ease), box-shadow .4s var(--ease); }
.arc:hover{ transform:translateY(-3px); box-shadow:0 18px 38px rgba(0,30,90,.26), 0 0 0 1px rgba(0,103,253,.2); }
.arc img{ display:block; max-width:100%; height:auto; }
.arc--ft{ margin-top:2px; }
.ft__cert{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 18px; margin-top:22px; }
.ft__cert-t{ font-size:13px; line-height:1.6; color:var(--on-navy); }
.signoff__cert{ display:flex; align-items:center; gap:16px; margin-top:clamp(20px,2.4vw,28px); padding:14px 16px; border-radius:18px; background:#f1f7ff; }
.signoff__cert .arc{ flex:none; padding:6px 8px; box-shadow:0 0 0 1px rgba(0,103,253,.12); }
.signoff__cert p{ margin:0; font-size:13.5px; line-height:1.5; color:var(--slate); }
.arcband{ padding-block:clamp(28px,4vw,56px); }
.arcband__card{
  display:grid; gap:clamp(20px,3vw,44px); align-items:center; padding:clamp(22px,3vw,40px); border-radius:clamp(24px,2.6vw,34px);
  background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(255,255,255,.82)); box-shadow:0 24px 60px rgba(0,50,140,.14), 0 0 0 1px rgba(0,103,253,.08);
}
@media (min-width:760px){ .arcband__card{ grid-template-columns:auto minmax(0,1fr); } }
.arcband__badge{ display:flex; justify-content:center; }
.arcband__badge .arc{ padding:16px 20px; box-shadow:0 18px 44px rgba(0,50,140,.16), 0 0 0 1px rgba(0,103,253,.10); }
.arcband__copy{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.arcband__copy h2{ margin:0; font-size:clamp(24px,2.8vw,36px); line-height:1.1; letter-spacing:-.02em; }
.arcband__copy p{ margin:0; max-width:60ch; font-size:clamp(15px,1.2vw,17px); line-height:1.65; color:var(--slate); }
.arcband__facts{ display:flex; flex-wrap:wrap; gap:10px; list-style:none; margin:4px 0 0; padding:0; }
.arcband__facts li{ padding:10px 16px; border-radius:14px; background:#eef5ff; box-shadow:inset 0 0 0 1px rgba(0,103,253,.10); }
.arcband__facts small{ display:block; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--slate); font-weight:600; }
.arcband__facts b{ font-family:var(--font-display); font-size:18px; color:var(--ink); }
/* The footer logo rules must not touch the ARCtick badge image. */
.ft__brand .arc img{ margin:0 !important; height:auto; }
.ft__brand .arc--ft img{ width:168px !important; height:86px !important; }

/* ==========================================================================
   Mega menu v6: each column is its own soft tile with a heading chip; rows have
   a left accent bar that grows on hover; the lead card is a brighter blue-to-navy
   gradient with a glow and a clear button.
   ========================================================================== */
.submenu__inner{ background:linear-gradient(160deg,#ffffff 0%,#f1f7ff 100%); }
.submenu__cols{ gap:12px !important; }
.submenu__col{
  padding:14px 10px 10px; border-radius:20px;
  background:linear-gradient(160deg,#f6faff,#edf4ff); box-shadow:inset 0 1px 0 #fff, 0 0 0 1px rgba(0,103,253,.07);
}
.submenu__title{
  display:inline-flex; align-items:center; margin:0 0 8px 6px; padding:5px 11px; border-radius:999px;
  background:#fff; color:var(--blue-600); font-size:10.5px; letter-spacing:.16em; box-shadow:0 0 0 1px rgba(0,103,253,.12), 0 4px 10px rgba(0,60,160,.06);
}
.submenu__col a.mi{ position:relative; border-radius:14px; }
.submenu__col a.mi::before{
  content:""; position:absolute; left:3px; top:50%; width:3px; height:0; border-radius:3px; transform:translateY(-50%);
  background:linear-gradient(180deg,#00BCEE,#0067FD); transition:height .3s var(--ease);
}
.submenu__col a.mi:hover::before, .submenu__col a.mi[aria-current="page"]::before, .submenu__col a.mi:focus-visible::before{ height:58%; }
.submenu__col a.mi:hover, .submenu__col a.mi:focus-visible{ background:#fff; box-shadow:0 8px 20px rgba(0,60,160,.10), 0 0 0 1px rgba(0,103,253,.08); transform:translateX(2px); }
.mi__d{ color:#5b6f90; }

.submenu__lead{
  background:
    radial-gradient(90% 70% at 100% 0%, rgba(0,188,238,.65) 0%, rgba(0,188,238,0) 65%),
    radial-gradient(80% 60% at 0% 100%, rgba(0,103,253,.55) 0%, rgba(0,103,253,0) 70%),
    linear-gradient(155deg,#00235c 0%,#0a3a8c 100%);
  box-shadow:0 22px 46px rgba(0,50,140,.34), inset 0 1px 0 rgba(255,255,255,.25);
}
.submenu__lead::before{ display:none; }
.submenu__lead-eyebrow{ color:#7fe6ff; }
.submenu__lead-go{ background:#fff; color:var(--blue-600); box-shadow:0 10px 22px rgba(0,19,56,.35); font-weight:700; }
.submenu__lead:hover .submenu__lead-go{ background:#eaf6ff; }
.submenu__strip{ background:linear-gradient(135deg,#e4f1ff,#dff6ff); box-shadow:inset 0 1px 0 #fff, 0 0 0 1px rgba(0,103,253,.08); }
@media (min-width:1025px){
  .submenu__inner:has(.submenu__cols[style*="--cols:4"]) .submenu__lead{ align-self:stretch; display:flex; flex-direction:column; justify-content:flex-end; padding-top:26px; }
}
@media (min-width:1025px){
  .submenu__cols[style*="--cols:4"] .submenu__col{ padding:12px 8px 8px; }
  .submenu__cols[style*="--cols:4"] a.mi{ display:block; padding:8px 30px 8px 14px; }
  .submenu__cols[style*="--cols:4"] .mi__t{ white-space:nowrap; font-size:14.5px; }
  .submenu__cols[style*="--cols:4"] .mi__d{ font-size:11.5px; }
  .submenu__cols[style*="--cols:4"] .mi__go{ position:absolute; right:8px; top:50%; margin-top:-12px; }
  .submenu__inner:has(.submenu__cols[style*="--cols:4"]){ grid-template-columns:minmax(0,.4fr) minmax(0,2.6fr); }
}


/* Section extras: three-card jump row and "read more" pills */
.jump{ display:grid; gap:clamp(10px,1.4vw,16px); margin-top:clamp(18px,2.4vw,28px); }
@media (min-width:700px){ .jump{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.jump__card{
  position:relative; display:flex; flex-direction:column; gap:6px; padding:clamp(18px,2vw,24px); border-radius:22px; color:inherit;
  background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(255,255,255,.82)); box-shadow:0 12px 30px rgba(0,50,140,.09), 0 0 0 1px rgba(0,103,253,.06);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.jump__card:hover{ transform:translateY(-5px); box-shadow:0 24px 48px rgba(0,60,160,.16), 0 0 0 1px rgba(0,103,253,.12); }
.jump__n{ font-family:var(--font-display); font-weight:700; font-size:34px; line-height:1; color:#cfe0ff; letter-spacing:-.04em; transition:color .4s var(--ease); }
.jump__card:hover .jump__n{ color:var(--blue); }
.jump__card b{ font-family:var(--font-display); font-size:20px; color:var(--ink); }
.jump__card > span:not(.jump__n){ font-size:14.5px; line-height:1.55; color:var(--slate); }
.jump__card em{ margin-top:auto; padding-top:8px; font-style:normal; font-family:var(--font-display); font-weight:700; font-size:14px; color:var(--blue-600); }
.jump__card em i{ display:inline-block; font-style:normal; transition:transform .3s var(--ease); }
.jump__card:hover em i{ transform:translateX(4px); }
.seclink{ margin:clamp(14px,1.8vw,22px) 0 0; }
.seclink a{
  display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:999px; font-family:var(--font-display); font-weight:700; font-size:14.5px; color:var(--blue-600);
  background:linear-gradient(145deg,rgba(255,255,255,.9),rgba(255,255,255,.6)); box-shadow:inset 0 1px 0 #fff, 0 0 0 1px rgba(0,103,253,.16), 0 8px 18px rgba(0,50,140,.08);
  transition:gap .3s var(--ease), transform .4s var(--ease), box-shadow .3s;
}
.seclink a:hover{ gap:14px; transform:translateY(-2px); box-shadow:inset 0 1px 0 #fff, 0 0 0 1.5px rgba(0,103,253,.45), 0 14px 28px rgba(0,80,210,.16); }
.sec{ scroll-margin-top:110px; }


/* ==========================================================================
   Package cards v2 (the "Choose Your Package by System Size" row): a full-width
   row of three tall cards, big kW figure, spec chips and a Learn more button.
   ========================================================================== */
@media (min-width:861px){
  .sec__grid:has(.pkgs){ grid-template-columns:minmax(0,1fr); }
  .sec__grid:has(.pkgs) .sec__head{ position:static; }
  .sec__grid:has(.pkgs) .sec__head h2{ max-width:none; }
}
.pkgs{ display:grid !important; grid-template-columns:1fr !important; gap:clamp(14px,1.8vw,24px); margin:clamp(14px,1.6vw,22px) 0; }
@media (min-width:760px){ .pkgs{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; align-items:stretch; } }
.pkg{
  position:relative; display:flex !important; flex-direction:column; gap:12px; overflow:hidden; isolation:isolate;
  padding:clamp(24px,2.6vw,34px) clamp(20px,2.2vw,30px) clamp(22px,2.4vw,30px); border-radius:clamp(24px,2.6vw,32px);
  background:linear-gradient(160deg,#ffffff 0%,#f2f8ff 100%); box-shadow:0 18px 44px rgba(0,50,140,.10), 0 0 0 1px rgba(0,103,253,.07);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.pkg::before{
  content:""; position:absolute; z-index:-1; right:-70px; top:-70px; width:220px; height:220px; border-radius:50%;
  background:radial-gradient(circle, rgba(95,224,245,.5), rgba(74,163,255,.18) 55%, rgba(74,163,255,0) 72%); transition:transform .6s var(--ease);
}
.pkg:hover{ transform:translateY(-8px); box-shadow:0 30px 64px rgba(0,60,160,.18), 0 0 0 1.5px rgba(0,103,253,.18); }
.pkg:hover::before{ transform:scale(1.25); }
.pkg--pop{ background:linear-gradient(160deg,#ffffff 0%,#e8f3ff 100%); box-shadow:0 22px 52px rgba(0,80,210,.16), 0 0 0 2px rgba(0,103,253,.28); }
.pkg__flag{
  align-self:flex-start; padding:6px 12px; border-radius:999px; font-family:var(--font-display); font-weight:700; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:#fff; background:linear-gradient(135deg,#0070DB,#0048C0); box-shadow:0 8px 18px rgba(0,80,210,.3);
}
.pkg__fig{ display:flex; align-items:baseline; gap:6px; margin-top:2px; }
.pkg__fig b{
  font-family:var(--font-display); font-weight:700; font-size:clamp(54px,5.6vw,78px); line-height:.95; letter-spacing:-.05em;
  background:linear-gradient(135deg,#0050D2 0%,#00A6E0 100%); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.pkg__fig small{ font-family:var(--font-display); font-weight:700; font-size:clamp(20px,2vw,26px); color:var(--blue-600); }
.sec__body .prose .pkg h3{ margin:0; font-size:clamp(18px,1.6vw,21px); line-height:1.2; color:var(--ink); }
.pkg__link{ color:inherit; }
.pkg__link::after{ content:""; position:absolute; inset:0; z-index:1; border-radius:inherit; }
.sec__body .prose .pkg p.pkg__lead{ margin:0; font-size:15.5px; line-height:1.6; font-weight:600; color:#1d3158; }
.pkg__chips{ list-style:none; margin:2px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.pkg__chips li{ padding:7px 12px; border-radius:999px; font-size:13px; font-weight:600; line-height:1.2; color:#2a4a82; background:#e6f0ff; box-shadow:inset 0 0 0 1px rgba(0,103,253,.12); }
.pkg__btn{
  position:relative; z-index:2; align-self:flex-start; margin-top:auto; display:inline-flex; align-items:center; gap:10px; padding:13px 22px; border-radius:999px;
  font-family:var(--font-display); font-weight:700; font-size:15px; color:#fff; text-decoration:none;
  background:var(--grad-cta); box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 12px 26px rgba(0,80,210,.3);
  transition:gap .3s var(--ease), transform .4s var(--spring, cubic-bezier(.34,1.56,.64,1)), box-shadow .3s var(--ease);
}
.pkg__btn:hover{ gap:16px; transform:translateY(-2px); box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 18px 34px rgba(0,80,210,.4); }
.pkg__lead + .pkg__chips{ margin-bottom:10px; }
@media (prefers-reduced-motion:reduce){ .pkg, .pkg::before, .pkg__btn{ transition:none; } }

.pkg{ align-items:flex-start !important; text-align:left; }
.pkg__fig{ justify-content:flex-start; }
@media (min-width:760px) and (max-width:899px){ .pkgs{ grid-template-columns:1fr !important; } .pkg{ flex-direction:column; } }

/* Package section: the photo becomes a full-width banner under the cards, with a caption chip. */
.sec__grid:has(.pkgs) .sec__body > .sec__photo{
  position:relative; max-width:none; width:100%; aspect-ratio:21 / 8; margin:clamp(22px,3vw,40px) 0 0; border-radius:clamp(24px,2.8vw,36px);
  box-shadow:0 30px 70px rgba(0,50,140,.20), 0 0 0 1px rgba(255,255,255,.6);
}
.sec__grid:has(.pkgs) .sec__photo .media-fill{ object-position:50% 62%; }
.sec__grid:has(.pkgs) .sec__photo::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,rgba(0,19,56,0) 55%,rgba(0,19,56,.45) 100%);
}
.sec__grid:has(.pkgs) .sec__photo::after{
  content:"Three homes, three system sizes"; position:absolute; z-index:2; left:clamp(16px,2vw,28px); bottom:clamp(14px,1.8vw,24px);
  padding:9px 16px; border-radius:999px; font-family:var(--font-display); font-weight:700; font-size:clamp(12px,1vw,14px); color:var(--ink);
  background:rgba(255,255,255,.92); box-shadow:0 10px 24px rgba(0,19,56,.25);
}
@media (max-width:760px){ .sec__grid:has(.pkgs) .sec__body > .sec__photo{ aspect-ratio:4 / 3; } }
.pkgs + p{ margin-top:clamp(14px,1.6vw,22px); font-size:15px; color:var(--slate); }


/* ==========================================================================
   Popup v4: two columns on desktop. A bright gradient side panel (label, heading,
   intro, benefit ticks, phone) beside the form; single column on phones.
   ========================================================================== */
.qmodal__call{ display:none; }
@media (min-width:861px){
  .qmodal__panel{ max-width:880px; display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); overflow:hidden; }
  .qmodal__head{
    display:flex; flex-direction:column; justify-content:center; gap:0; padding:clamp(28px,3vw,44px) clamp(24px,2.6vw,36px); border-bottom:0; border-right:1px solid rgba(0,103,253,.10);
    background:
      radial-gradient(80% 60% at 0% 0%, rgba(95,224,245,.85) 0%, rgba(95,224,245,0) 70%),
      radial-gradient(90% 70% at 100% 100%, rgba(42,108,255,.55) 0%, rgba(42,108,255,0) 70%),
      radial-gradient(60% 50% at 100% 0%, rgba(127,149,200,.35) 0%, rgba(127,149,200,0) 70%),
      #eaf6ff;
  }
  .qmodal__head h2{ font-size:clamp(26px,2.6vw,34px); line-height:1.08; margin:10px 0 10px; }
  .qmodal__head p{ display:block !important; font-size:14.5px; line-height:1.55; margin:0 0 16px; }
  .qmodal__trust{ flex-direction:column; align-items:flex-start; gap:10px; margin:0 0 auto; }
  .qmodal__trust li{ padding:0; background:none; box-shadow:none; font-size:14px; color:#0a2f78; gap:10px; }
  .qmodal__trust li::before{ width:22px; height:22px; margin:0; border:0; transform:none; border-radius:50%; flex:none;
    background:linear-gradient(135deg,#0070DB,#0048C0) ; box-shadow:0 6px 14px rgba(0,80,210,.3);
    -webkit-mask:none; mask:none; position:relative; }
  .qmodal__trust li{ position:relative; }
  .qmodal__trust li::after{ content:""; position:absolute; left:7px; top:50%; width:5px; height:9px; margin-top:-6px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); }
  .qmodal__call{
    display:flex; flex-direction:column; gap:2px; margin-top:22px; padding:14px 18px; border-radius:18px; text-decoration:none;
    background:rgba(255,255,255,.75); box-shadow:inset 0 1px 0 #fff, 0 0 0 1px rgba(0,103,253,.12), 0 10px 24px rgba(0,50,140,.10);
    transition:transform .35s var(--ease), box-shadow .35s var(--ease);
  }
  .qmodal__call:hover{ transform:translateY(-2px); box-shadow:inset 0 1px 0 #fff, 0 0 0 1.5px rgba(0,103,253,.35), 0 16px 32px rgba(0,60,160,.16); }
  .qmodal__call small{ font-size:12px; font-weight:600; color:var(--slate); }
  .qmodal__call b{ font-family:var(--font-display); font-size:20px; color:var(--blue-600); letter-spacing:-.01em; }
  .qmodal__body{ display:flex; flex-direction:column; justify-content:center; padding:clamp(24px,2.6vw,36px); }
  .qmodal__alt{ display:none; }
  .qmodal__close{ top:16px; right:16px; background:#fff; }
}
@media (min-width:861px) and (max-height:700px){
  .qmodal__head p{ display:none !important; }
  .qmodal__trust{ gap:6px; }
  .qmodal__call{ margin-top:14px; padding:10px 14px; }
}


/* ==========================================================================
   Popup v5 (desktop): the side panel is a photo of the topic under a navy-to-blue
   gradient, white text, glass benefit ticks and a glass phone card. Phones keep the
   compact light header. The submit button gets a note under it.
   ========================================================================== */
.qmodal__time{ margin:0 0 4px; text-align:center; font-size:12px; color:#6b7d9c; }
@media (min-width:861px){
  .qmodal__head{
    position:relative; isolation:isolate; color:#fff; border-right:0;
    background:
      linear-gradient(180deg, rgba(0,19,56,.30) 0%, rgba(0,19,56,.55) 42%, rgba(0,32,90,.92) 100%),
      linear-gradient(135deg, rgba(0,103,253,.35), rgba(0,188,238,.18)),
      var(--qm-img) center / cover no-repeat, #001338;
    transition:background .4s var(--ease);
  }
  .qmodal__head .label{ background:rgba(255,255,255,.18); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.5), inset 0 0 0 1px rgba(255,255,255,.28); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
  .qmodal__head h2{ color:#fff; text-shadow:0 2px 14px rgba(0,19,56,.45); }
  .qmodal__head p{ color:rgba(255,255,255,.9); text-shadow:0 1px 8px rgba(0,19,56,.4); }
  .qmodal__trust li{ color:#fff; text-shadow:0 1px 6px rgba(0,19,56,.4); }
  .qmodal__trust li::before{ background:linear-gradient(135deg,#00BCEE,#0067FD); box-shadow:0 6px 14px rgba(0,19,56,.4), inset 0 1px 0 rgba(255,255,255,.5); }
  .qmodal__call{ background:rgba(255,255,255,.16); box-shadow:inset 0 1px 0 rgba(255,255,255,.5), inset 0 0 0 1px rgba(255,255,255,.25), 0 14px 30px rgba(0,19,56,.3); -webkit-backdrop-filter:blur(14px) saturate(180%); backdrop-filter:blur(14px) saturate(180%); }
  .qmodal__call:hover{ background:rgba(255,255,255,.26); box-shadow:inset 0 1px 0 rgba(255,255,255,.6), inset 0 0 0 1px rgba(255,255,255,.4), 0 18px 36px rgba(0,19,56,.4); }
  .qmodal__call small{ color:rgba(255,255,255,.8); }
  .qmodal__call b{ color:#fff; }
  .qmodal.open .mfield, .qmodal.open .qmodal__form .btn{ animation:qm-field .5s var(--ease) both; }
  .qmodal.open .mfield-row:nth-of-type(1) .mfield{ animation-delay:.12s; }
  .qmodal.open .mfield-row:nth-of-type(2) .mfield{ animation-delay:.18s; }
  .qmodal.open .mfield:nth-last-of-type(2){ animation-delay:.24s; }
  .qmodal.open .mfield:last-of-type{ animation-delay:.3s; }
  .qmodal.open .qmodal__form .btn--solid{ animation-delay:.36s; }
}
@keyframes qm-field{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
@media (min-width:861px) and (max-height:700px){ .qmodal__time{ display:none; } }
@media (prefers-reduced-motion:reduce){ .qmodal.open .mfield, .qmodal.open .qmodal__form .btn{ animation:none; } }
.qmodal__time{ margin:10px 0 2px !important; }


/* ==========================================================================
   Popup variation B (preview with ?popup=b): dark glass, one centred column.
   Deep navy with glowing aqua and blue orbs, glass fields, a white call-to-action.
   ========================================================================== */
.qmodal--b .qmodal__panel{
  display:block; max-width:520px; overflow-x:hidden; color:#fff; border-radius:clamp(26px,3vw,36px);
  background:
    radial-gradient(70% 45% at 12% 0%, rgba(0,188,238,.45) 0%, rgba(0,188,238,0) 70%),
    radial-gradient(60% 50% at 100% 100%, rgba(0,103,253,.55) 0%, rgba(0,103,253,0) 70%),
    linear-gradient(165deg,#001a4d 0%,#001338 60%,#00122f 100%);
  box-shadow:0 60px 130px rgba(0,8,30,.7), inset 0 1px 0 rgba(255,255,255,.18), 0 0 0 1px rgba(255,255,255,.10);
}
.qmodal--b .qmodal__head{
  display:block; background:none !important; color:#fff; border:0; padding:clamp(26px,3vw,36px) clamp(22px,3vw,36px) 6px; text-align:left;
}
.qmodal--b .qmodal__head::before, .qmodal--b .qmodal__head::after{ display:none; }
.qmodal--b .qmodal__head .label{ background:rgba(255,255,255,.12); color:#7fe6ff; box-shadow:inset 0 1px 0 rgba(255,255,255,.3), inset 0 0 0 1px rgba(255,255,255,.18); }
.qmodal--b .qmodal__head h2{ color:#fff; font-size:clamp(26px,3vw,34px); margin:12px 0 8px; text-shadow:none; }
.qmodal--b .qmodal__head p{ display:block !important; color:rgba(255,255,255,.78); text-shadow:none; margin:0 0 12px; }
.qmodal--b .qmodal__trust{ flex-direction:row; flex-wrap:wrap; gap:8px; margin:0 0 4px; }
.qmodal--b .qmodal__trust li{ padding:6px 12px; border-radius:999px; background:rgba(255,255,255,.10); color:#fff; text-shadow:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.25), inset 0 0 0 1px rgba(255,255,255,.14); }
.qmodal--b .qmodal__trust li::before{ position:static; width:5px; height:9px; margin:-2px 0 0; border:solid #00BCEE; border-width:0 2px 2px 0; transform:rotate(45deg) scale(.9); background:none; box-shadow:none; border-radius:0; }
.qmodal--b .qmodal__trust li::after{ display:none; }
.qmodal--b .qmodal__call{ display:none; }
.qmodal--b .qmodal__body{ display:block; padding:12px clamp(22px,3vw,36px) clamp(22px,2.6vw,30px); }
.qmodal--b .qmodal__alt{ display:block; color:rgba(255,255,255,.7); }
.qmodal--b .qmodal__alt a{ color:#7fe6ff; }
.qmodal--b .mfield label{ color:rgba(255,255,255,.85); }
.qmodal--b .mfield__optional{ color:rgba(255,255,255,.55); }
.qmodal--b .mfield input, .qmodal--b .mfield select, .qmodal--b .mfield textarea{
  color:#fff; background:rgba(255,255,255,.08); border:1.5px solid rgba(255,255,255,.14); box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.qmodal--b .mfield input::placeholder, .qmodal--b .mfield textarea::placeholder{ color:rgba(255,255,255,.45); }
.qmodal--b .mfield input:hover, .qmodal--b .mfield select:hover, .qmodal--b .mfield textarea:hover{ background:rgba(255,255,255,.12); }
.qmodal--b .mfield input:focus, .qmodal--b .mfield select:focus, .qmodal--b .mfield textarea:focus{ background:rgba(255,255,255,.14); border-color:#00BCEE; box-shadow:0 0 0 4px rgba(0,188,238,.22); }
.qmodal--b .mfield select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237fe6ff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 13px center; background-size:16px; }
.qmodal--b .mfield select option{ color:#001338; }
.qmodal--b .qmodal__consent, .qmodal--b .qmodal__time{ color:rgba(255,255,255,.55); }
.qmodal--b .qmodal__form .btn--solid, .qmodal--b #qmodalSubmit{
  background:#fff !important; color:#0050D2 !important; text-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none;
  box-shadow:0 16px 36px rgba(0,188,238,.35), inset 0 -3px 0 rgba(0,103,253,.12) !important;
}
.qmodal--b #qmodalSubmit:hover{ background:#eaf9ff !important; transform:translateY(-2px); }
.qmodal--b .qmodal__cancel{ color:rgba(255,255,255,.7) !important; }
.qmodal--b .qmodal__cancel:hover{ color:#fff !important; }
.qmodal--b .qmodal__close{ background:rgba(255,255,255,.12); color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.2); }
.qmodal--b .qmodal__close:hover{ background:rgba(255,255,255,.22); color:#fff; }
.qmodal--b .qmodal__status--error{ background:rgba(255,80,80,.16); color:#ffb4b4; }
.qmodal--b .qmodal__success{ color:#fff; } .qmodal--b .qmodal__success p{ color:rgba(255,255,255,.8); }
.qmodal--b .qmodal__success svg{ color:#00BCEE; }
@media (max-height:760px){ .qmodal--b .qmodal__trust{ display:none; } }
@media (max-height:640px){ .qmodal--b .qmodal__head p{ display:none !important; } .qmodal--b .qmodal__consent, .qmodal--b .qmodal__time{ display:none; } }
/* Variation B: compact so it fits one screen */
.qmodal--b .qmodal__panel{ max-width:600px; }
.qmodal--b .qmodal__head{ padding:clamp(20px,2.4vw,28px) clamp(22px,3vw,34px) 2px; }
.qmodal--b .qmodal__head h2{ margin:10px 0 6px; font-size:clamp(24px,2.6vw,30px); }
.qmodal--b .qmodal__head p{ margin:0 0 10px; font-size:14px; }
.qmodal--b .qmodal__trust{ flex-wrap:nowrap; gap:6px; }
.qmodal--b .qmodal__trust li{ padding:5px 10px; font-size:11.5px; white-space:nowrap; }
.qmodal--b .qmodal__body{ padding-top:8px; padding-bottom:16px; }
.qmodal--b .mfield{ margin-bottom:8px; }
.qmodal--b .mfield input, .qmodal--b .mfield select{ padding:8px 12px; }
.qmodal--b .mfield textarea{ height:40px; padding:8px 12px; }
.qmodal--b .qmodal__time{ display:none; }
.qmodal--b .qmodal__consent{ margin:0 0 8px; }
.qmodal--b .qmodal__cancel{ padding-block:4px !important; margin-top:4px; }
.qmodal--b .qmodal__alt{ margin-top:0; }
@media (max-width:560px){ .qmodal--b .qmodal__trust{ flex-wrap:wrap; } }
@media (max-height:820px){ .qmodal--b .qmodal__trust{ display:none; } }

/* The phone card in the popup's side panel is removed; keep the trust list centred in the freed space. */
@media (min-width:861px){ .qmodal__trust{ margin-bottom:0; } }


/* ==========================================================================
   Custom dropdown (popup "What do you need"): looks like the other fields; the list is
   a rounded white card with a title and a short description per option, a hover pill and a
   tick on the chosen one. The real <select> stays hidden behind it.
   ========================================================================== */
.cselect-native{ position:absolute !important; width:1px !important; height:1px !important; opacity:0; pointer-events:none; overflow:hidden; }
.mfield{ position:relative; }
.cselect{
  display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; text-align:left; cursor:pointer;
  font-family:var(--font-body); font-size:14px; color:var(--ink); padding:9px 12px 9px 12px; border-radius:14px;
  background:#f3f8ff; border:1.5px solid transparent; box-shadow:inset 0 1px 2px rgba(0,50,140,.06);
  transition:border-color .2s var(--ease), background .2s var(--ease), box-shadow .25s var(--ease);
}
.cselect:hover{ background:#edf4ff; }
.cselect:focus-visible, .cselect.is-open{ outline:none; background:#fff; border-color:#0067FD; box-shadow:0 0 0 4px rgba(0,103,253,.14), 0 8px 20px rgba(0,60,160,.10); }
.cselect.is-empty .cselect__val{ color:#8497b6; }
.cselect svg{ flex:none; width:16px; height:16px; color:#0050D2; transition:transform .3s var(--ease); }
.cselect.is-open svg{ transform:rotate(180deg); }
.cselect-list{
  position:fixed; z-index:6; margin:0; padding:6px; list-style:none; overflow-y:auto; overscroll-behavior:contain; outline:none;
  background:#fff; border-radius:18px; box-shadow:0 30px 70px rgba(0,30,90,.30), 0 0 0 1px rgba(0,103,253,.10);
  transform-origin:top center; animation:cs-in .22s var(--ease) both;
}
.cselect-list.is-up{ transform-origin:bottom center; }
@keyframes cs-in{ from{ opacity:0; transform:translateY(-6px) scale(.98); } to{ opacity:1; transform:none; } }
.cselect-list li{
  position:relative; display:grid; grid-template-columns:minmax(0,1fr) 20px; column-gap:10px; align-items:center; padding:9px 12px; border-radius:12px; cursor:pointer;
  transition:background .15s ease;
}
.cselect-list li.is-placeholder{ display:none; }
.cselect-list__t{ grid-column:1; font-family:var(--font-display); font-weight:700; font-size:14.5px; line-height:1.2; color:var(--ink); }
.cselect-list__d{ grid-column:1; font-size:12px; line-height:1.3; color:#5b6f90; }
.cselect-list li svg{ grid-column:2; grid-row:1 / span 2; width:16px; height:16px; color:#0067FD; opacity:0; transform:scale(.6); transition:opacity .2s, transform .25s var(--ease); }
.cselect-list li.is-active{ background:#eef5ff; }
.cselect-list li.is-selected .cselect-list__t{ color:#0050D2; }
.cselect-list li.is-selected svg{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .cselect-list{ animation:none; } }

/* dark variation */
.qmodal--b .cselect{ color:#fff; background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.14); box-shadow:inset 0 1px 0 rgba(255,255,255,.12); }
.qmodal--b .cselect:hover{ background:rgba(255,255,255,.12); }
.qmodal--b .cselect:focus-visible, .qmodal--b .cselect.is-open{ background:rgba(255,255,255,.14); border-color:#00BCEE; box-shadow:0 0 0 4px rgba(0,188,238,.22); }
.qmodal--b .cselect svg{ color:#7fe6ff; }
.qmodal--b .cselect.is-empty .cselect__val{ color:rgba(255,255,255,.45); }
.qmodal--b .cselect-list{ background:linear-gradient(165deg,#0a2a6b,#001338); box-shadow:0 30px 70px rgba(0,8,30,.7), 0 0 0 1px rgba(255,255,255,.14); }
.qmodal--b .cselect-list__t{ color:#fff; } .qmodal--b .cselect-list__d{ color:rgba(255,255,255,.65); }
.qmodal--b .cselect-list li.is-active{ background:rgba(255,255,255,.12); }
.qmodal--b .cselect-list li.is-selected .cselect-list__t{ color:#7fe6ff; } .qmodal--b .cselect-list li svg{ color:#7fe6ff; }

/* Dropdown list: tighter rows so all eight options fit without scrolling; compact (title only) on very short screens. */
.cselect-list{ overflow-y:visible; padding:5px; }
.cselect-list li{ padding:7px 12px; }
.cselect-list__t{ font-size:14px; }
.cselect-list__d{ font-size:11.5px; }
.cselect-list.is-compact li{ padding:6px 12px; }
.cselect-list.is-compact .cselect-list__d{ display:none; }
.cselect-list.is-compact li svg{ grid-row:1; }

/* ==========================================================================
   Popup side panel, contrast pass. The photo is shown clearly in the top band and fades
   into solid deep navy; every line of text sits on the navy (white on #04204f is about 16:1),
   never over faces or the bright parts of the photo.
   ========================================================================== */
@media (min-width:861px){
  .qmodal:not(.qmodal--b) .qmodal__head{
    justify-content:flex-end; padding-top:clamp(120px,15vh,170px);
    background:
      linear-gradient(180deg, rgba(4,32,79,0) 0%, rgba(4,32,79,0) 24%, rgba(4,32,79,.78) 40%, #04204f 54%, #031a44 100%),
      var(--qm-img) center 22% / cover no-repeat, #031a44;
  }
  .qmodal:not(.qmodal--b) .qmodal__head .label{ background:rgba(255,255,255,.14); color:#7fe6ff; box-shadow:inset 0 0 0 1px rgba(127,230,255,.35); -webkit-backdrop-filter:none; backdrop-filter:none; }
  .qmodal:not(.qmodal--b) .qmodal__head h2{ text-shadow:none; }
  .qmodal:not(.qmodal--b) .qmodal__head p{ color:rgba(255,255,255,.88); text-shadow:none; }
  .qmodal:not(.qmodal--b) .qmodal__trust li{ text-shadow:none; }
  .qmodal:not(.qmodal--b) .qmodal__head::after{
    content:""; position:absolute; left:0; right:0; bottom:0; height:46%; z-index:-1; pointer-events:none;
    background:radial-gradient(90% 80% at 100% 100%, rgba(0,103,253,.45) 0%, rgba(0,103,253,0) 70%);
  }
}
@media (min-width:861px) and (max-height:760px){
  .qmodal:not(.qmodal--b) .qmodal__head{ padding-top:clamp(70px,10vh,110px); }
}
/* Final: the photo is a clean band across the top; all text sits below it on solid navy. */
@media (min-width:861px){
  .qmodal:not(.qmodal--b) .qmodal__head{
    padding-top:214px;
    background:
      linear-gradient(180deg, rgba(4,32,79,0) 0, rgba(4,32,79,0) 96px, #04204f 196px, #04204f 100%),
      var(--qm-img) center top / 100% auto no-repeat,
      linear-gradient(160deg,#04204f,#031a44);
  }
}
@media (min-width:861px) and (max-height:760px){
  .qmodal:not(.qmodal--b) .qmodal__head{
    padding-top:clamp(28px,4vh,40px);
    background:
      radial-gradient(90% 60% at 100% 100%, rgba(0,103,253,.5) 0%, rgba(0,103,253,0) 70%),
      radial-gradient(70% 50% at 0% 0%, rgba(0,188,238,.35) 0%, rgba(0,188,238,0) 70%),
      linear-gradient(160deg,#04204f,#031a44);
  }
}

/* ==========================================================================
   Dropdown cards, aligned: the lead card and every column tile share one row, one height
   (stretched to the tallest), one corner radius and the same top and bottom edges, in all
   three menus. Inside the lead card the label sits at the top and the button at the bottom.
   ========================================================================== */
@media (min-width:1025px){
  .submenu__inner{ align-items:stretch !important; }
  .submenu__cols{ align-items:stretch !important; align-content:stretch; }
  .submenu__col{ height:100%; border-radius:22px; }
  .submenu__lead, .submenu__inner:has(.submenu__cols[style*="--cols:4"]) .submenu__lead{
    align-self:stretch !important; height:auto; min-height:0; border-radius:22px;
    display:flex; flex-direction:column; justify-content:space-between; gap:12px; padding:26px 22px 22px;
  }
  .submenu__lead-title{ margin-top:6px; }
  .submenu__lead-note{ margin-bottom:auto; }
  .submenu__lead-go{ align-self:flex-start; margin-top:14px; }
}


/* Inline field validation */
.mfield__err{ display:block; min-height:0; margin-top:2px; font-size:12px; font-weight:600; line-height:1.3; color:#c42b1c; }
.mfield__err:empty{ display:none; }
.mfield.has-error input, .mfield.has-error textarea, .mfield.has-error .cselect{ border-color:#e5483a; background:#fff7f6; box-shadow:0 0 0 4px rgba(229,72,58,.12); }
.qmodal--b .mfield__err{ color:#ffb4ab; }
.qmodal--b .mfield.has-error input, .qmodal--b .mfield.has-error .cselect{ border-color:#ff8a7d; background:rgba(255,120,100,.12); box-shadow:0 0 0 4px rgba(255,120,100,.18); }
.mfield input::placeholder{ font-weight:500; }


/* Consent tick box (privacy + terms) */
.mconsent{ margin:2px 0 4px; }
.mconsent__label{ position:relative; display:flex; align-items:flex-start; gap:11px; cursor:pointer; font-size:13px; line-height:1.45; font-weight:500; color:#3b4c6e; }
.mconsent__label input{ position:absolute; opacity:0; width:22px; height:22px; margin:0; cursor:pointer; }
.mconsent__box{ flex:0 0 22px; width:22px; height:22px; margin-top:1px; border-radius:7px; background:#eef4ff; box-shadow:inset 0 0 0 1.5px #9db7e6; transition:background .2s, box-shadow .2s; display:grid; place-items:center; }
.mconsent__box::after{ content:""; width:11px; height:6px; margin-top:-2px; border-left:2.5px solid #fff; border-bottom:2.5px solid #fff; transform:rotate(-45deg) scale(0); transition:transform .2s var(--ease); }
.mconsent__label input:checked + .mconsent__box{ background:linear-gradient(135deg,#0070DB,#0048C0); box-shadow:none; }
.mconsent__label input:checked + .mconsent__box::after{ transform:rotate(-45deg) scale(1); }
.mconsent__label input:focus-visible + .mconsent__box{ box-shadow:0 0 0 3px #fff, 0 0 0 5px #0067FD; }
.mconsent__text a{ color:#0050D2; font-weight:700; text-decoration:underline; text-underline-offset:2px; }
.mconsent.has-error .mconsent__box{ box-shadow:inset 0 0 0 2px #e5483a; background:#fff7f6; }
.mconsent.has-error input{ background:none; box-shadow:none; }
.qmodal--b .mconsent__label{ color:rgba(255,255,255,.82); }
.qmodal--b .mconsent__box{ background:rgba(255,255,255,.1); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4); }
.qmodal--b .mconsent__text a{ color:#9fe8ff; }
@media (max-height:640px){ .mconsent__label{ font-size:12px; line-height:1.35; } }

/* Popup form column: less empty space above and below the form */
@media (min-width:861px){
  .qmodal__body{ padding-top:clamp(18px,2.2vh,26px); padding-bottom:clamp(14px,1.8vh,22px); }
  .qmodal__form .btn--solid{ margin-top:6px; }
  .qmodal__time{ margin:8px 0 2px; }
}

/* ==========================================================================
   Header steadiness: the bar keeps one fixed size at every scroll position. It used to
   shrink once the page scrolled past ~90px, which shortened the page, nudged the scroll
   position back above the threshold (scroll anchoring) and re-grew the bar, so the header
   flickered up and down. The call-to-action no longer lifts under the pointer either,
   which made it flicker at its lower edge.
   ========================================================================== */
@media (min-width:1025px){
  .masthead__inner, .masthead--compact .masthead__inner{ min-height:92px; transition:none; }
  .masthead .logo img, .masthead--compact .logo img{ height:72px; transition:none; }
}
.masthead, .masthead__inner, .masthead .logo{ overflow-anchor:none; }
.mast-cta:hover{ transform:none; }
.mast-cta:active{ transform:none; }

/* ==========================================================================
   Dropdown cards, one system for all three menus (Residential, Commercial, Company):
   the same lead card width, panel padding, gaps, tile padding, radius, link rows and type
   sizes. Tiles in a menu share one height; the lead card stretches to match. Links no
   longer slide sideways on hover (that made them flicker at their left edge).
   ========================================================================== */
@media (min-width:1025px){
  .submenu__inner, .submenu__inner:has(.submenu__cols[style*="--cols:4"]){
    grid-template-columns:244px minmax(0,1fr); gap:16px; padding:18px; align-items:stretch;
  }
  .submenu__cols, .submenu__cols[style*="--cols:4"]{ gap:14px !important; align-items:stretch; }
  .submenu__col, .submenu__cols[style*="--cols:4"] .submenu__col{ padding:16px 10px 12px; border-radius:22px; height:100%; }
  .submenu__title, .submenu__cols[style*="--cols:4"] .submenu__title{ margin:0 0 10px 8px; }
  .submenu__col ul{ display:flex; flex-direction:column; gap:3px; }
  .submenu__col a.mi, .submenu__cols[style*="--cols:4"] a.mi{ display:block; padding:9px 12px 9px 14px; border-radius:14px; transform:none !important; }
  .submenu__col a.mi:hover, .submenu__col a.mi:focus-visible{ transform:none !important; }
  .submenu__col .mi__t, .submenu__cols[style*="--cols:4"] .mi__t{ font-size:14.5px; line-height:1.25; white-space:nowrap; }
  .submenu__col .mi__d, .submenu__cols[style*="--cols:4"] .mi__d{ display:block; margin-top:2px; font-size:12px; line-height:1.3; }
  .submenu__col .mi__go{ display:none; }
  .submenu__lead, .submenu__inner:has(.submenu__cols[style*="--cols:4"]) .submenu__lead{
    padding:26px 22px 22px; border-radius:22px; justify-content:flex-start; gap:8px;
  }
  .submenu__lead-eyebrow{ margin-bottom:4px; }
  .submenu__lead-title, .submenu__inner:has(.submenu__cols[style*="--cols:4"]) .submenu__lead-title{ margin-top:0; font-size:23px; line-height:1.12; }
  .submenu__lead-note{ margin:0 0 auto; font-size:14px; line-height:1.5; }
  .submenu__lead-go{ margin-top:18px; align-self:flex-start; }
  .submenu__strip{ border-radius:22px; }
}
@media (min-width:1025px){
  .submenu__inner:has(.submenu__cols[style*="--cols:4"]){ grid-template-columns:232px minmax(0,1fr); }
  .submenu__cols[style*="--cols:4"]{ gap:12px !important; }
  .submenu__cols[style*="--cols:4"] .submenu__col{ padding:16px 8px 12px; }
  .submenu__cols[style*="--cols:4"] a.mi{ padding:9px 8px 9px 12px; }
  .submenu__cols[style*="--cols:4"] .mi__d{ font-size:11.5px; white-space:nowrap; }
  .submenu__cols[style*="--cols:4"] .submenu__title{ margin-left:6px; }
}

/* ==========================================================================
   Popup, desktop: the form column is built to the same height as the left panel. Larger type
   and roomier fields, spread top to bottom, so the right side lines up with the left
   instead of floating in empty space. Sizes follow the window height, so short screens
   still fit on one screen.
   ========================================================================== */
.qmodal__actions{ display:block; }
@media (min-width:861px){
  .qmodal__body{ display:flex; flex-direction:column; justify-content:stretch; padding:clamp(52px,7.5vh,70px) clamp(28px,3vw,40px) clamp(20px,3vh,30px); }
  .qmodal__form{ flex:1; display:flex; flex-direction:column; justify-content:space-between; gap:clamp(8px,1.5vh,16px); }
  .qmodal__form .mfield, .qmodal__form .mfield-row{ margin-bottom:0; }
  .qmodal__form .mfield{ gap:clamp(4px,.8vh,8px); }
  .qmodal__form .mfield label{ font-size:clamp(13px,2vh,15px); font-weight:700; }
  .qmodal__form .mfield input, .qmodal__form .mfield textarea, .qmodal .cselect{ font-size:clamp(14px,2.1vh,16.5px); padding-block:clamp(9px,1.7vh,15px); }
  .qmodal__form .mfield textarea{ height:clamp(52px,8vh,76px); }
  .qmodal__form .mfield-row{ gap:clamp(10px,1.4vw,16px); }
  .qmodal__form .mfield__err{ font-size:12.5px; }
  .mconsent__label{ font-size:clamp(12.5px,1.9vh,14px); }
  .qmodal__actions{ display:flex; flex-direction:column; gap:clamp(8px,1.4vh,14px); }
  .qmodal__actions .btn--solid{ font-size:clamp(15px,2.3vh,18px); padding-block:clamp(13px,2.1vh,18px); margin-top:0; }
  .qmodal__time{ margin:0; font-size:clamp(12px,1.8vh,13.5px); text-align:center; }
  .qmodal__cancel{ font-size:clamp(14px,2vh,16px); padding-block:4px !important; }
  .qmodal .mconsent{ margin:0; }
}

/* Dropdown at narrow desktop widths: slightly smaller type and lead card so Residential's four columns never overflow. */
@media (min-width:1025px) and (max-width:1199px){
  .submenu__inner, .submenu__inner:has(.submenu__cols[style*="--cols:4"]){ grid-template-columns:200px minmax(0,1fr); gap:12px; padding:14px; }
  .submenu__cols, .submenu__cols[style*="--cols:4"]{ gap:10px !important; }
  .submenu__col .mi__t, .submenu__cols[style*="--cols:4"] .mi__t{ font-size:13.5px; }
  .submenu__col .mi__d, .submenu__cols[style*="--cols:4"] .mi__d{ font-size:11px; }
  .submenu__cols[style*="--cols:4"] .submenu__col{ padding:14px 6px 10px; }
  .submenu__cols[style*="--cols:4"] a.mi{ padding:8px 4px 8px 10px; }
  .submenu__lead, .submenu__inner:has(.submenu__cols[style*="--cols:4"]) .submenu__lead{ padding:22px 18px 18px; }
  .submenu__lead-title, .submenu__inner:has(.submenu__cols[style*="--cols:4"]) .submenu__lead-title{ font-size:20px; }
}

/* Popup, left panel (variation A) matches the taller form: the photo band scales with the window,
   the label, heading and intro sit right under it, and the three ticks anchor the bottom edge, so both
   sides read as one balanced piece at every height. */
@media (min-width:861px){
  .qmodal:not(.qmodal--b) .qmodal__head{
    --qm-band:clamp(130px,27vh,214px);
    justify-content:flex-start; padding-top:calc(var(--qm-band) + 18px); padding-bottom:clamp(22px,3.4vh,34px);
    background:
      linear-gradient(180deg, rgba(4,32,79,0) 0, rgba(4,32,79,0) calc(var(--qm-band) - 100px), #04204f calc(var(--qm-band) - 6px), #04204f 100%),
      var(--qm-img) center top / 100% auto no-repeat,
      linear-gradient(160deg,#04204f,#031a44);
  }
  .qmodal:not(.qmodal--b) .qmodal__trust{ display:flex; margin:auto 0 0; padding-top:clamp(10px,2vh,20px); gap:clamp(8px,1.5vh,13px); }
  .qmodal:not(.qmodal--b) .qmodal__trust li{ font-size:clamp(14px,2vh,16px); font-weight:700; color:#fff; text-shadow:none; }
  .qmodal:not(.qmodal--b) .qmodal__head h2{ font-size:clamp(26px,4.2vh,36px); }
  .qmodal:not(.qmodal--b) .qmodal__head p{ font-size:clamp(14px,2vh,15.5px); line-height:1.55; }
}
@media (min-width:861px) and (max-height:700px){
  .qmodal:not(.qmodal--b) .qmodal__head p{ display:none !important; }
  .qmodal:not(.qmodal--b) .qmodal__head h2{ margin-bottom:12px; }
}

/* ==========================================================================
   Menu hover, without lines: no accent bar, no hairline rings. A hovered or current
   link is simply lifted onto a soft white surface; the nav pill and the tiles lose their
   outlines and rely on tint and a diffuse shadow instead.
   ========================================================================== */
.submenu__col a.mi::before, .submenu__col a.mi:hover::before, .submenu__col a.mi[aria-current="page"]::before, .submenu__col a.mi:focus-visible::before{ content:none; display:none; }
.submenu__col a.mi{ transition:background .25s var(--ease), box-shadow .25s var(--ease); }
.submenu__col a.mi:hover, .submenu__col a.mi:focus-visible{ background:#fff; box-shadow:0 10px 26px rgba(0,60,160,.09); }
.submenu__col a.mi[aria-current="page"]{ background:rgba(255,255,255,.75); box-shadow:none; }
.submenu__col a.mi:focus-visible{ outline:none; box-shadow:0 10px 26px rgba(0,60,160,.09), 0 0 0 3px rgba(0,103,253,.25); }
.submenu__col{ box-shadow:inset 0 1px 0 #fff; }
.submenu__title{ box-shadow:0 4px 12px rgba(0,60,160,.07); }
.submenu__strip{ box-shadow:inset 0 1px 0 #fff; }
.mainnav__pill, .mainnav__pill.on{ box-shadow:0 8px 22px rgba(0,60,160,.13); }
.mainnav__link::after{ display:none !important; }


/* Contact block on the legal pages: label on the left, details on the right, no rules or boxes. */
.contact-list{ display:grid; gap:clamp(14px,1.6vw,20px); margin:0; }
.contact-list > div{ display:grid; grid-template-columns:minmax(64px,92px) minmax(0,1fr); gap:6px 18px; align-items:baseline; }
.contact-list dt{ font-family:var(--font-display); font-weight:700; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--blue-600); }
.contact-list dd{ margin:0; font-size:clamp(16px,1.4vw,18px); line-height:1.6; font-weight:500; color:var(--ink); }
.contact-list a{ color:var(--ink); font-weight:700; text-decoration:none; background:linear-gradient(currentColor,currentColor) 0 100% / 0 1.5px no-repeat; transition:background-size .3s var(--ease), color .2s; }
.contact-list a:hover{ color:var(--blue-600); background-size:100% 1.5px; }
.contact-list__sub{ display:block; font-size:14px; font-weight:500; color:var(--slate); }
.contact-list__sub a{ font-weight:600; }
@media (max-width:480px){ .contact-list > div{ grid-template-columns:1fr; gap:2px; } }