/* ============================================================
   SINVESTA GROUP — Solar Investment Australia Pty Ltd
   Design system · Blue + Gold (from brand mark)
   Data-readout aesthetic: monospace figures echo inverter LCDs
   ============================================================ */

/* ---------- 0. FONTS ----------
   Headings : DM Sans SemiBold (600)  — Google, OFL
   Body     : Switzer Medium   (500)  — Fontshare / ITF Free Font Licence
   Figures  : IBM Plex Mono           — Google, OFL

   All self-hosted from assets/fonts/, so the site has no third-party font
   dependency and keeps working offline. DM Sans ships as a single variable
   font covering the whole weight axis. See assets/fonts/README.md.
------------------------------------------------------------------ */
@font-face {
  font-family: "DM Sans";
  src: url("../fonts/DMSans-Variable.woff2") format("woff2-variations"),
       url("../fonts/DMSans-Variable.woff2") format("woff2");
  font-weight: 100 1000;          /* variable axis */
  font-style: normal;
  font-display: swap;
}
/* True italic for the brand wordmark — the SINVESTA logo is set in bold italic. */
@font-face {
  font-family: "DM Sans";
  src: url("../fonts/DMSans-Italic-Variable.woff2") format("woff2-variations"),
       url("../fonts/DMSans-Italic-Variable.woff2") format("woff2");
  font-weight: 100 1000;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("../fonts/Switzer-Italic.woff2") format("woff2"),
       url("../fonts/Switzer-Italic.woff")  format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("../fonts/Switzer-MediumItalic.woff2") format("woff2"),
       url("../fonts/Switzer-MediumItalic.woff")  format("woff");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("../fonts/Switzer-Regular.woff2") format("woff2"),
       url("../fonts/Switzer-Regular.woff")  format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("../fonts/Switzer-Medium.woff2") format("woff2"),
       url("../fonts/Switzer-Medium.woff")  format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("../fonts/Switzer-Semibold.woff2") format("woff2"),
       url("../fonts/Switzer-Semibold.woff")  format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("../fonts/Switzer-Bold.woff2") format("woff2"),
       url("../fonts/Switzer-Bold.woff")  format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- 1. TOKENS ---------- */
:root {
  /* Brand — light theme (default) */
  --bg:            #F6F8FB;
  --bg-alt:        #ECF1F8;
  --surface:       #FFFFFF;
  --surface-2:     #F1F5FA;
  --surface-glass: rgba(255, 255, 255, 0.72);

  --text:          #0A1626;
  --text-muted:    #4E5F78;
  --text-faint:    #5C6A80;          /* clears 4.5:1 on every light surface */

  --primary:       #0B5FA5;
  --primary-hover: #094E88;
  --primary-soft:  rgba(11, 95, 165, 0.09);
  --on-primary:    #FFFFFF;

  --accent:        #8F5B05;          /* readable gold on light — 5.38:1 on --bg */
  --accent-bright: #E8A317;          /* decorative gold */
  --accent-soft:   rgba(232, 163, 23, 0.13);

  --success:       #0F7A43;
  --danger:        #B4232B;

  --border:        #DCE3ED;
  --border-strong: #C3CEDE;

  --shadow-sm: 0 1px 2px rgba(10, 22, 38, .06), 0 1px 3px rgba(10, 22, 38, .04);
  --shadow-md: 0 4px 12px rgba(10, 22, 38, .07), 0 2px 4px rgba(10, 22, 38, .04);
  --shadow-lg: 0 18px 40px rgba(10, 22, 38, .12), 0 4px 12px rgba(10, 22, 38, .06);
  --shadow-glow: 0 0 0 1px rgba(11, 95, 165, .10), 0 20px 50px rgba(11, 95, 165, .14);

  /* Type */
  /* Headings: DM Sans SemiBold (600). Body: Switzer Medium (500). */
  --font-display: "DM Sans", "Switzer", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Switzer", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "Cascadia Code", Consolas, monospace;

  --step--1: clamp(0.76rem, 0.735rem + 0.12vw, 0.82rem);   /* small text, ~1px under the original */
  --step-0:  clamp(1.00rem, 0.96rem + 0.18vw, 1.0625rem);
  --step-1:  clamp(1.20rem, 1.12rem + 0.38vw, 1.40rem);
  --step-2:  clamp(1.45rem, 1.30rem + 0.72vw, 1.85rem);
  --step-3:  clamp(1.80rem, 1.52rem + 1.35vw, 2.60rem);
  --step-4:  clamp(2.20rem, 1.70rem + 2.45vw, 3.60rem);
  --step-5:  clamp(2.70rem, 1.85rem + 4.10vw, 5.00rem);

  /* Space — 4/8 rhythm */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;
  --sp-9: 6rem;    --sp-10: 8rem;

  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 22px;
  --radius-xl: 30px;

  --container: 1220px;
  --nav-h: 72px;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur: 240ms;

  --z-nav: 100;
  --z-drawer: 200;
  --z-modal: 300;

  color-scheme: light;
}

[data-theme="dark"] {
  --bg:            #070C14;
  --bg-alt:        #0A1220;
  --surface:       #0D1724;
  --surface-2:     #142235;
  --surface-glass: rgba(13, 23, 36, 0.74);

  --text:          #E9EFF8;
  --text-muted:    #9AACC5;
  --text-faint:    #8492A9;          /* lifted so captions clear AA on --surface-2 too */

  --primary:       #4FA6F2;
  --primary-hover: #6FB8F7;
  --primary-soft:  rgba(79, 166, 242, 0.14);
  --on-primary:    #04121F;

  --accent:        #F5B435;
  --accent-bright: #FFC64D;
  --accent-soft:   rgba(245, 180, 53, 0.15);

  --success:       #3DBE79;
  --danger:        #F0616A;

  --border:        #1D2C43;
  --border-strong: #2B3F5C;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 6px 18px rgba(0,0,0,.45);
  --shadow-lg: 0 24px 54px rgba(0,0,0,.6);
  --shadow-glow: 0 0 0 1px rgba(79,166,242,.16), 0 22px 60px rgba(0,0,0,.6);

  color-scheme: dark;
}

/* ---------- 2. RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
  overflow-x: hidden;
}
body {
  font-family: var(--font-body);
  /* Switzer Medium body copy, one notch under --step-0 (was 16–17px, now 15–16px) */
  font-size: clamp(0.94rem, 0.9rem + 0.16vw, 1rem);
  font-weight: 500;              /* Switzer Medium */
  line-height: 1.58;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;              /* DM Sans SemiBold */
  line-height: 1.1;
  letter-spacing: -0.022em;
  text-wrap: balance;
}
p { text-wrap: pretty; }

:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--accent-soft); color: var(--text); }

/* ---------- 3. LAYOUT ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}
.section { padding-block: clamp(3.5rem, 8vw, var(--sp-9)); }
.section--tight { padding-block: clamp(2.5rem, 5vw, var(--sp-7)); }
.section--alt { background: var(--bg-alt); }

.grid { display: grid; gap: var(--sp-5); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

.stack > * + * { margin-top: var(--sp-4); }
.flow > * + * { margin-top: var(--sp-5); }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--primary); color: var(--on-primary);
  padding: var(--sp-3) var(--sp-5); z-index: 999; border-radius: 0 0 var(--radius-sm) 0;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

/* ---------- 4. TYPE UTILITIES ---------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
  display: flex; align-items: center; gap: var(--sp-3);
}
.eyebrow::before {
  content: ""; width: 28px; height: 2px;
  background: linear-gradient(90deg, var(--accent-bright), transparent);
  flex: none;
}
.eyebrow--center { justify-content: center; }
.eyebrow--center::after {
  content: ""; width: 28px; height: 2px;
  background: linear-gradient(270deg, var(--accent-bright), transparent);
}

.h-xl { font-size: var(--step-5); }
.h-lg { font-size: var(--step-4); }
.h-md { font-size: var(--step-3); }
.h-sm { font-size: var(--step-2); }
.lead {
  font-size: var(--step-1);
  color: var(--text-muted);
  line-height: 1.6;
  max-width: 62ch;
}
.muted { color: var(--text-muted); }
.faint { color: var(--text-faint); font-size: var(--step--1); }
.center { text-align: center; }
.measure { max-width: 68ch; }
.measure-narrow { max-width: 54ch; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.gold { color: var(--accent); }

.section-head {
  max-width: 720px; margin-bottom: var(--sp-7);
  display: flex; flex-direction: column; gap: var(--sp-4);
}
.section-head--center { margin-inline: auto; text-align: center; align-items: center; }

/* ---------- 5. BUTTONS ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-3);
  min-height: 48px;
  padding: var(--sp-3) var(--sp-5);
  border-radius: 999px;
  font-weight: 600;
  font-size: var(--step-0);
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: transform 160ms var(--ease), background-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
  white-space: nowrap;
  touch-action: manipulation;
  border: 1.5px solid transparent;
}
.btn:active { transform: translateY(1px) scale(.985); }
.btn svg { flex: none; }

.btn--primary { background: var(--primary); color: var(--on-primary); box-shadow: var(--shadow-md); }
.btn--primary:hover { background: var(--primary-hover); box-shadow: var(--shadow-lg); }

.btn--gold {
  background: linear-gradient(135deg, var(--accent-bright), #D89406);
  color: #1B1201;
  box-shadow: 0 8px 22px rgba(232, 163, 23, .3);
}
.btn--gold:hover { filter: brightness(1.06); box-shadow: 0 12px 30px rgba(232,163,23,.4); }

.btn--outline { border-color: var(--border-strong); color: var(--text); background: var(--surface); }
.btn--outline:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }

.btn--ghost { color: var(--text); }
.btn--ghost:hover { background: var(--surface-2); }

.btn--lg { min-height: 56px; padding: var(--sp-4) var(--sp-6); font-size: var(--step-1); }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-4); }

/* ---------- 6. HEADER / NAV ---------- */
.header {
  position: fixed; inset: 0 0 auto 0;
  height: var(--nav-h);
  z-index: var(--z-nav);
  display: flex; align-items: center;
  background: transparent;
  transition: background-color 300ms var(--ease), box-shadow 300ms var(--ease),
              border-color 300ms var(--ease), backdrop-filter 300ms var(--ease);
  border-bottom: 1px solid transparent;
}
.header.is-stuck {
  background: var(--surface-glass);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom-color: var(--border);
  box-shadow: var(--shadow-sm);
}
/* On pages with a light top (not hero), always show solid */
.header--solid {
  background: var(--surface-glass);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom-color: var(--border);
}

.nav { display: flex; align-items: center; gap: var(--sp-5); width: 100%; }

.brand { display: flex; align-items: center; gap: var(--sp-3); flex: none; }
.brand img { height: 34px; width: auto; flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
/* Set to match the SINVESTA logo: bold italic wordmark over a gold rule,
   with the company line in italic title case beneath it. */
.brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-style: italic;
  font-size: 1.08rem;
  letter-spacing: -0.015em; color: var(--text);
  border-bottom: 2.5px solid var(--accent-bright);
  padding-bottom: 2px;
}
.brand-sub {
  font-style: italic;
  font-size: .62rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-faint); font-weight: 400; margin-top: 3px;
  white-space: nowrap;
}
/* Hero-overlay header: force light text before scroll */
.header:not(.is-stuck):not(.header--solid) .brand-name { color: #fff; }
.header:not(.is-stuck):not(.header--solid) .brand-sub { color: rgba(255,255,255,.72); }
.header:not(.is-stuck):not(.header--solid) .nav-link { color: rgba(255,255,255,.9); }
.header:not(.is-stuck):not(.header--solid) .nav-link:hover { color: #fff; }
.header:not(.is-stuck):not(.header--solid) .icon-btn { color: #fff; border-color: rgba(255,255,255,.28); }
.header:not(.is-stuck):not(.header--solid) .icon-btn:hover { background: rgba(255,255,255,.14); }

.nav-links { display: flex; align-items: center; gap: var(--sp-2); margin-left: auto; }
.nav-link {
  position: relative;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  font-size: .95rem; font-weight: 500;
  color: var(--text-muted);
  transition: color 180ms var(--ease);
  min-height: 40px; display: inline-flex; align-items: center;
}
.nav-link:hover { color: var(--text); }
.nav-link[aria-current="page"] { color: var(--primary); font-weight: 600; }
.nav-link[aria-current="page"]::after {
  content: ""; position: absolute; left: var(--sp-3); right: var(--sp-3); bottom: 2px;
  height: 2px; background: var(--accent-bright); border-radius: 2px;
}
.header:not(.is-stuck):not(.header--solid) .nav-link[aria-current="page"] { color: #fff; }

.nav-actions { display: flex; align-items: center; gap: var(--sp-3); flex: none; }

.icon-btn {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  color: var(--text);
  background: transparent;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.icon-btn:hover { background: var(--surface-2); border-color: var(--border-strong); }

/* theme toggle icon swap */
.icon-sun { display: none; }
[data-theme="dark"] .icon-sun { display: block; }
[data-theme="dark"] .icon-moon { display: none; }

.nav-toggle { display: none; }

/* Mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: var(--z-drawer);
  visibility: hidden; pointer-events: none;
  /* the closed panel sits at translateX(100%); clip it so it can't widen the page */
  overflow: hidden;
}
.drawer.is-open { visibility: visible; pointer-events: auto; }
.drawer-scrim {
  position: absolute; inset: 0;
  background: rgba(3, 8, 15, .55);
  opacity: 0; transition: opacity 260ms var(--ease);
  backdrop-filter: blur(3px);
}
.drawer.is-open .drawer-scrim { opacity: 1; }
.drawer-panel {
  position: absolute; inset: 0 0 0 auto;
  width: min(360px, 86vw);
  background: var(--surface);
  border-left: 1px solid var(--border);
  padding: var(--sp-5) var(--sp-5) var(--sp-7);
  display: flex; flex-direction: column; gap: var(--sp-4);
  transform: translateX(100%);
  transition: transform 320ms var(--ease-out);
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
}
.drawer.is-open .drawer-panel { transform: translateX(0); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-2); }
.drawer-title {
  font-family: var(--font-display); font-weight: 600; font-size: 1.05rem;
  letter-spacing: -0.02em; color: var(--text);
}
.drawer-link {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-4) var(--sp-2);
  border-bottom: 1px solid var(--border);
  font-size: var(--step-1); font-weight: 500; font-family: var(--font-display);
  min-height: 56px;
  transition: color 180ms var(--ease), padding-left 180ms var(--ease);
}
.drawer-link:hover { color: var(--primary); padding-left: var(--sp-4); }
.drawer-link[aria-current="page"] { color: var(--primary); }
.drawer-contact { margin-top: auto; display: flex; flex-direction: column; gap: var(--sp-3); }

@media (max-width: 1120px) {
  .nav-links { display: none; }
  .nav-toggle { display: grid; }
}
/* Below this the brand + 3 actions no longer fit on one line. The drawer and the
   floating call button both carry the CTA, so the header button can go. */
@media (max-width: 620px) {
  .nav-actions > .btn { display: none; }
}
/* NETCC seal next to the logo; its white disc reads on both the hero and solid header */
.nav-badge { width: 40px; height: 40px; flex: none; }
@media (max-width: 620px) { .nav-badge { width: 34px; height: 34px; } }
/* Just above the drawer breakpoint the full link row plus the seal is too wide,
   so tighten the spacing rather than drop a link */
@media (min-width: 1121px) and (max-width: 1180px) {
  .nav { gap: var(--sp-3); }
  .nav-links { gap: var(--sp-1); }
  .nav-link { padding-inline: var(--sp-2); }
}
@media (max-width: 440px) { .nav { gap: var(--sp-3); } .nav-badge { width: 30px; height: 30px; } }
@media (max-width: 340px) { .nav { gap: var(--sp-1); } }
/* Small phones can't fit it; the hero repeats the seal a screen below */
@media (max-width: 370px) { .nav-badge { display: none; } }
@media (max-width: 400px) {
  .brand-sub { display: none; }
  .brand-name { font-size: 1rem; }
  .nav-actions { gap: var(--sp-2); }
}

/* ---------- 7. HERO ---------- */
.hero {
  position: relative;
  min-height: min(92svh, 760px);
  display: flex; align-items: center;
  padding-top: calc(var(--nav-h) + var(--sp-6));
  padding-bottom: var(--sp-7);
  isolation: isolate;
  overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; z-index: -2; }
/* 50% keeps both the array and the jacarandas in frame as the hero crops. */
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 50%; }
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(4,10,20,.94) 0%, rgba(4,10,20,.80) 42%, rgba(4,10,20,.42) 72%, rgba(4,10,20,.30) 100%),
    linear-gradient(to top, rgba(4,10,20,.92), transparent 45%);
}
.hero-grid {
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center; width: 100%;
}
@media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; } }

.hero-copy { color: #fff; display: flex; flex-direction: column; gap: var(--sp-5); }
.hero-copy .eyebrow { color: var(--accent-bright); }
.hero h1 {
  /* Smaller than the global display step — the hero has to fit a phone screen
     alongside the lead, buttons and trust row without pushing them off. */
  font-size: clamp(1.7rem, 1.05rem + 2.5vw, 3.3rem);
  color: #fff;
  letter-spacing: -0.03em;
  line-height: 1.08;
}
/* The hard breaks compose a tidy 3-line headline on desktop, but on a narrow
   screen they stack with the natural wrap and blow the headline out to 5 lines. */
@media (max-width: 760px) {
  .hero h1 br { display: none; }
}
.hero h1 em {
  font-style: normal;
  background: linear-gradient(105deg, var(--accent-bright) 10%, #FFD980 55%, var(--accent-bright) 90%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.hero-lead {
  font-size: clamp(.95rem, .89rem + .28vw, 1.1rem);
  color: rgba(255,255,255,.86); max-width: 52ch;
}

.hero-trust {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-5);
  padding-top: var(--sp-3);
  border-top: 1px solid rgba(255,255,255,.16);
  margin-top: var(--sp-2);
}
.hero-trust li {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--step--1); color: rgba(255,255,255,.82);
  font-family: var(--font-mono); letter-spacing: .01em;
}
.hero-trust svg { color: var(--accent-bright); flex: none; }
/* Accreditation logos: one row of equal-height white chips. Each logo is drawn
   for a white background, and matching chip heights keeps a tall stacked mark
   (Smart Energy Council) level with a wide one (SAA). */
.hero-trust .hero-accred { flex-basis: 100%; flex-wrap: wrap; gap: var(--sp-3); }
.hero-accred img {
  height: 50px; width: auto; flex: none; box-sizing: border-box;
  padding: 6px 12px; background: #fff; border-radius: 8px;
}
@media (max-width: 620px) { .hero-accred img { height: 42px; padding: 5px 9px; } }
/* Partner logos are drawn for white backgrounds, so they sit on white chips like the brand strip */
.hero-trust-finance { flex-wrap: wrap; }
.finance-partners { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.finance-partners img {
  height: 28px; width: auto; flex: none; box-sizing: border-box;
  padding: 6px 9px; background: #fff; border-radius: 6px;
}

/* Hero readout card — the "inverter display" */
.readout {
  background: rgba(9, 17, 28, .60);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 3vw, 1.9rem);
  box-shadow: 0 30px 70px rgba(0,0,0,.5);
  color: #fff;
  display: flex; flex-direction: column; gap: var(--sp-5);
}
.readout-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.readout-title {
  font-family: var(--font-mono); font-size: var(--step--1);
  text-transform: uppercase; letter-spacing: .13em; color: rgba(255,255,255,.62);
}
.readout-live {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em;
  color: var(--accent-bright); text-transform: uppercase;
}
.pulse-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent-bright);
  box-shadow: 0 0 0 0 rgba(245,180,53,.7);
  animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(245,180,53,.65); }
  70%  { box-shadow: 0 0 0 9px rgba(245,180,53,0); }
  100% { box-shadow: 0 0 0 0 rgba(245,180,53,0); }
}

.readout-figure { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; }
.readout-value {
  font-family: var(--font-mono); font-weight: 600;
  font-size: clamp(2rem, 4.2vw, 2.85rem);
  line-height: 1; letter-spacing: -0.045em;
  color: var(--accent-bright);
  font-variant-numeric: tabular-nums;
}
.readout-unit { font-family: var(--font-mono); font-size: 1rem; color: rgba(255,255,255,.68); }
.readout-caption { font-size: var(--step--1); color: rgba(255,255,255,.62); }

.curve-wrap { position: relative; }
.curve { width: 100%; height: auto; display: block; overflow: visible; }
.curve-axis {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: .68rem;
  color: rgba(255,255,255,.42); letter-spacing: .06em; margin-top: var(--sp-2);
}
.curve-line {
  fill: none; stroke: var(--accent-bright); stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: var(--len, 800); stroke-dashoffset: var(--len, 800);
  animation: draw 2.1s var(--ease-out) .35s forwards;
  filter: drop-shadow(0 0 6px rgba(245,180,53,.45));
}
@keyframes draw { to { stroke-dashoffset: 0; } }
.curve-fill { opacity: 0; animation: fadeIn 1.3s var(--ease) 1.5s forwards; }
.curve-guide { stroke: rgba(255,255,255,.26); stroke-width: 1; stroke-dasharray: 3 3; }
/* Zero-length line + round cap = a dot that stays round when the SVG stretches */
.curve-peak { stroke: var(--accent-bright); stroke-width: 9; stroke-linecap: round; }
@keyframes fadeIn { to { opacity: 1; } }

.readout-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
  padding-top: var(--sp-4);
  border-top: 1px solid rgba(255,255,255,.14);
}
.readout-stat-v {
  font-family: var(--font-mono); font-size: 1.06rem; font-weight: 600;
  color: #fff; font-variant-numeric: tabular-nums;
}
.readout-stat-l {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .1em;
  color: rgba(255,255,255,.55); margin-top: 2px;
}

.hero-scroll {
  position: absolute; left: 50%; bottom: var(--sp-5); transform: translateX(-50%);
  color: rgba(255,255,255,.55); display: grid; place-items: center; gap: var(--sp-2);
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .18em; text-transform: uppercase;
  animation: bob 2.6s var(--ease) infinite;
}
@keyframes bob { 0%,100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 7px); } }
@media (max-width: 980px) { .hero-scroll { display: none; } }

/* ---------- 8. CARDS ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform 320ms var(--ease-out), box-shadow 320ms var(--ease), border-color 320ms var(--ease);
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--border-strong); }
.card-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-2); }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-out); }
.card:hover .card-media img { transform: scale(1.055); }
.card-body { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; }
.card-title { font-size: var(--step-2); }
.card-foot { margin-top: auto; padding-top: var(--sp-4); }

.badge {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 5px var(--sp-3);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: .7rem; letter-spacing: .09em; text-transform: uppercase; font-weight: 500;
  background: var(--primary-soft); color: var(--primary);
  border: 1px solid transparent;
}
.badge--gold { background: var(--accent-soft); color: var(--accent); }
.badge--float { position: absolute; top: var(--sp-4); left: var(--sp-4); background: rgba(6,12,22,.82); color: #fff; backdrop-filter: blur(8px); }

/* ---------- 9. PACKAGE CARDS ---------- */
.pkg {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-4);
  transition: transform 320ms var(--ease-out), box-shadow 320ms var(--ease), border-color 320ms var(--ease);
}
.pkg:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.pkg--featured {
  border-color: var(--accent-bright);
  box-shadow: var(--shadow-glow);
}
.pkg--featured::before {
  content: "Most popular";
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, var(--accent-bright), #D89406);
  color: #1B1201;
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .11em; text-transform: uppercase;
  font-weight: 600; padding: 5px var(--sp-4); border-radius: 999px; white-space: nowrap;
  box-shadow: 0 6px 16px rgba(232,163,23,.35);
}
/* Price block — struck-through RRP beside the incentive price, as on the
   client's own pricing cards. */
.pkg-price {
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
}
.pkg-price-was {
  font-family: var(--font-mono); font-size: 1rem;
  color: var(--text-faint); text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}
.pkg-price-now {
  font-family: var(--font-mono); font-weight: 600;
  font-size: clamp(1.7rem, 3.4vw, 2.15rem); line-height: 1;
  letter-spacing: -0.04em; color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.pkg-price-tag {
  font-size: .74rem; font-weight: 600; letter-spacing: .04em;
  color: var(--success);
  border: 1px solid currentColor; border-radius: 999px;
  padding: 3px var(--sp-3); white-space: nowrap;
}
.pkg-price-note {
  flex-basis: 100%; font-size: .8rem; color: var(--text-muted); margin-top: -2px;
}
td .pkg-price-now { font-size: 1.05rem; }

.pkg-size {
  font-family: var(--font-mono); font-weight: 600;
  font-size: clamp(2.1rem, 4.5vw, 2.9rem); line-height: 1;
  letter-spacing: -0.04em; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.pkg-size span { font-size: .42em; color: var(--text-muted); letter-spacing: 0; }
/* Battery half of a solar + battery bundle: same readout style, one step down */
.pkg-battery {
  font-family: var(--font-mono); font-weight: 600;
  font-size: clamp(1.15rem, 2.2vw, 1.4rem); line-height: 1.2;
  letter-spacing: -0.03em; color: var(--accent);
  font-variant-numeric: tabular-nums; margin-top: var(--sp-1);
}
.pkg-battery span { font-size: .7em; color: var(--text-muted); letter-spacing: 0; margin-left: .2em; }
/* Stands in for the price while bundles are quoted individually */
.pkg-price-quote {
  font-family: var(--font-mono); font-weight: 600; font-size: 1.15rem;
  color: var(--primary);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px;
}
.pkg-price-quote:hover { text-decoration-thickness: 2.5px; }
.pkg-for { font-size: var(--step--1); color: var(--accent); font-weight: 600; letter-spacing: .02em; }
.pkg-desc { color: var(--text-muted); font-size: .95rem; }
.spec {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding-block: var(--sp-4);
  border-block: 1px solid var(--border);
}
.spec-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); font-size: .92rem; }
.spec-k { color: var(--text-muted); }
.spec-v { font-family: var(--font-mono); font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }

.ticks { display: flex; flex-direction: column; gap: var(--sp-2); }
.tick { display: flex; gap: var(--sp-3); align-items: flex-start; font-size: .92rem; color: var(--text-muted); }
.tick svg { color: var(--success); flex: none; margin-top: 4px; }

/* ---------- 10. STATS ---------- */
/* Two-up on small screens; on wide screens one equal track per cell.
   grid-auto-flow:column creates exactly as many tracks as there are children —
   auto-fit would add an empty track that still eats a gap and draws a stray
   divider against the rounded edge. */
.stat-band {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px; background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
}
@media (min-width: 860px) {
  .stat-band {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
  }
}
.stat {
  background: var(--surface); padding: var(--sp-6) var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-2);
  transition: background-color var(--dur) var(--ease);
}
.stat:hover { background: var(--surface-2); }
.stat-v {
  font-family: var(--font-mono); font-weight: 600;
  font-size: clamp(2rem, 4.5vw, 2.9rem); line-height: 1;
  letter-spacing: -0.045em;
  color: var(--accent);          /* rgb(143,91,5) in light; lifted gold in dark */
  font-variant-numeric: tabular-nums;
}
.stat-l { font-size: var(--step--1); color: var(--text-muted); letter-spacing: .01em; }

/* ---------- 11. CALCULATOR ---------- */
.calc {
  display: grid; gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
}
@media (max-width: 900px) { .calc { grid-template-columns: 1fr; } }

.calc-panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: clamp(1.25rem, 3vw, 2rem);
  display: flex; flex-direction: column; gap: var(--sp-5);
}
.field { display: flex; flex-direction: column; gap: var(--sp-3); }
.field-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); }
.field label { font-weight: 600; font-size: .95rem; }
.field-val {
  font-family: var(--font-mono); font-weight: 600; color: var(--primary);
  font-size: var(--step-1); font-variant-numeric: tabular-nums;
}
.field-hint { font-size: var(--step--1); color: var(--text-faint); }

input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 44px; background: transparent; cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 7px; border-radius: 999px;
  background: linear-gradient(90deg, var(--primary) var(--pct, 40%), var(--surface-2) var(--pct, 40%));
  border: 1px solid var(--border);
}
input[type="range"]::-moz-range-track {
  height: 7px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border);
}
input[type="range"]::-moz-range-progress { height: 7px; border-radius: 999px; background: var(--primary); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 26px; height: 26px; border-radius: 50%; margin-top: -10.5px;
  background: var(--surface); border: 3px solid var(--primary);
  box-shadow: var(--shadow-md);
  transition: transform 160ms var(--ease);
}
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.12); }
input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--surface); border: 3px solid var(--primary); box-shadow: var(--shadow-md);
}

.seg { display: flex; gap: var(--sp-2); background: var(--surface-2); padding: 5px; border-radius: 999px; border: 1px solid var(--border); }
.seg button {
  flex: 1; min-height: 42px; border-radius: 999px; font-size: .9rem; font-weight: 600;
  color: var(--text-muted); transition: all 200ms var(--ease);
}
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--primary); box-shadow: var(--shadow-sm); }

.result {
  background: linear-gradient(160deg, #0B2038 0%, #07131F 100%);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 3.5vw, 2.2rem);
  color: #fff; display: flex; flex-direction: column; gap: var(--sp-5);
  position: relative; overflow: hidden;
}
.result::before {
  content: ""; position: absolute; top: -60%; right: -25%;
  width: 380px; height: 380px; border-radius: 50%;
  background: radial-gradient(circle, rgba(245,180,53,.20), transparent 68%);
  pointer-events: none;
}
.result-main { position: relative; }
.result-label {
  font-family: var(--font-mono); font-size: var(--step--1);
  text-transform: uppercase; letter-spacing: .13em; color: rgba(255,255,255,.6);
}
.result-value {
  font-family: var(--font-mono); font-weight: 600;
  font-size: clamp(2.6rem, 7vw, 4rem); line-height: 1.05;
  letter-spacing: -0.05em; color: var(--accent-bright);
  font-variant-numeric: tabular-nums; margin-top: var(--sp-2);
}
.result-rows { display: flex; flex-direction: column; gap: var(--sp-3); position: relative; }
.result-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4);
  padding-bottom: var(--sp-3); border-bottom: 1px solid rgba(255,255,255,.12);
  font-size: .95rem;
}
.result-row:last-child { border-bottom: 0; padding-bottom: 0; }
.result-row dt { color: rgba(255,255,255,.68); }
.result-row dd {
  font-family: var(--font-mono); font-weight: 600; color: #fff;
  font-variant-numeric: tabular-nums; margin: 0;
}
.result-note {
  font-size: .78rem; color: rgba(255,255,255,.5); line-height: 1.55;
  border-top: 1px solid rgba(255,255,255,.12); padding-top: var(--sp-4); position: relative;
}

/* ---------- 12. PROCESS ---------- */
.steps {
  counter-reset: s; display: grid; gap: var(--sp-6) var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
/* Reserve the number's own height plus a clear gap, so it never crowds the heading.
   line-height:1 is what keeps the counter box predictable. */
.step { position: relative; padding-top: 3.6rem; }
.step::before {
  counter-increment: s; content: counter(s, decimal-leading-zero);
  position: absolute; top: 0; left: 0;
  font-family: var(--font-mono);
  font-size: 2.1rem;
  font-weight: 600;
  line-height: 1;
  color: var(--accent);
  letter-spacing: -0.04em;
}
.step::after {
  content: ""; position: absolute; top: 1.05rem; left: 3.9rem; right: 0; height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent-bright), var(--border-strong) 45%, transparent);
  opacity: .55;
}
.step h3 { font-size: var(--step-1); margin-bottom: var(--sp-3); }
.step p { color: var(--text-muted); font-size: .95rem; }

/* ---------- 13. FEATURE / SPLIT ---------- */
.split {
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  align-items: center;
}
.split-media { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); position: relative; }
.split-media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.split--reverse .split-media { order: 2; }
@media (max-width: 800px) { .split--reverse .split-media { order: 0; } }

.phone-frame {
  max-width: 300px; margin-inline: auto;
  border-radius: 34px; overflow: hidden;
  border: 9px solid #10161F;
  box-shadow: var(--shadow-lg), 0 0 0 1px var(--border);
  background: #10161F;
}
.phone-frame img { width: 100%; display: block; }

.feature-list { display: grid; gap: var(--sp-5); }
.feature { display: flex; gap: var(--sp-4); align-items: flex-start; }
.feature-icon {
  width: 46px; height: 46px; border-radius: var(--radius-sm); flex: none;
  display: grid; place-items: center;
  background: var(--primary-soft); color: var(--primary);
  border: 1px solid var(--border);
}
.feature h3 { font-size: var(--step-1); margin-bottom: var(--sp-1); }
.feature p { color: var(--text-muted); font-size: .94rem; }

/* ---------- 14. GALLERY ---------- */
/* Justified rows: every tile is the same height and grows to share the row width,
   so each row runs edge to edge with no ragged bottom and no leftover gap —
   whatever the number of photos. Masonry columns cannot do this. */
.gallery { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.gallery figure {
  /* 320px basis lands on 3 tiles per row at desktop, which balances the
     homepage's six photos as 3 + 3 rather than a top-heavy 4 + 2. */
  flex: 1 1 320px;
  min-width: 200px;
  height: clamp(180px, 19vw, 250px);
  margin: 0;
  border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--border); position: relative;
  background: var(--surface);
}
.gallery img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  transition: transform 600ms var(--ease-out);
}
.gallery figure:hover img { transform: scale(1.05); }
.gallery figcaption {
  position: absolute; inset: auto 0 0 0;
  padding: var(--sp-5) var(--sp-4) var(--sp-3);
  background: linear-gradient(to top, rgba(4,10,20,.9), transparent);
  color: #fff; font-size: .85rem; font-family: var(--font-mono); letter-spacing: .02em;
  opacity: 0; transform: translateY(8px);
  transition: opacity 300ms var(--ease), transform 300ms var(--ease);
}
.gallery figure:hover figcaption, .gallery figure:focus-within figcaption { opacity: 1; transform: translateY(0); }

/* ---------- 15. BRAND STRIP ---------- */
/* Continuously scrolling logo wall. The track holds the list twice and slides
   exactly -50%, so the loop is seamless. Edge mask fades logos in and out. */
.marquee {
  position: relative;
  overflow: hidden;
  padding-block: var(--sp-2);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: marquee 38s linear infinite;
}
/* The spacing lives on each tile, not as a flex gap. That makes one set's width
   include its own trailing space, so translateX(-50%) lands exactly on the
   duplicate and the loop has no jump. */
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Logos sit on a light plate so each brand keeps its official colours and stays
   legible in dark mode — no recolouring of anyone's trademark. */
.brand-logo {
  flex: none;
  display: grid; place-items: center;
  min-width: 168px; height: 84px;
  margin-inline-end: clamp(1rem, 3vw, 2rem);
  padding: var(--sp-4) var(--sp-5);
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform 260ms var(--ease-out), box-shadow 260ms var(--ease);
}
.brand-logo:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.brand-logo img {
  max-height: 38px; width: auto; max-width: 148px;
  object-fit: contain;
}
[data-theme="dark"] .brand-logo { background: #F2F5FA; border-color: transparent; }

/* Text fallback for a brand whose logo file we don't have yet */
.brand-logo--text {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.24rem; letter-spacing: -0.01em;
  color: #33415A;
}

/* Partner strip reuses the marquee and tiles above. Its duration is set from JS
   so the speed stays constant however many times the set is repeated. */
.partner-strip { border-bottom: 1px solid var(--border); }
.partner-strip .brand-logo img { max-height: 40px; max-width: 150px; }
/* Stacked logos (e.g. Smart Energy Council) need more height to stay readable */
.partner-strip .brand-logo--tall img { max-height: 50px; }

@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .marquee-track { animation: none; }
}

/* ---------- 16. TESTIMONIALS ---------- */
.quote {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--sp-6) var(--sp-5) var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-4); position: relative;
}
.quote::before {
  content: "\201C"; position: absolute; top: -.05em; left: var(--sp-5);
  font-family: var(--font-display); font-size: 5rem; line-height: 1;
  color: var(--accent-soft); pointer-events: none;
}
.quote p { position: relative; font-size: 1.02rem; line-height: 1.7; }
.quote-by { display: flex; align-items: center; gap: var(--sp-3); margin-top: auto; padding-top: var(--sp-3); border-top: 1px solid var(--border); }
.avatar {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--primary-soft); color: var(--primary);
  font-family: var(--font-display); font-weight: 700; font-size: .95rem;
}
.stars { display: flex; gap: 2px; color: var(--accent-bright); }

/* ---------- 17. FAQ ---------- */
.faq { display: flex; flex-direction: column; gap: var(--sp-3); max-width: 860px; margin-inline: auto; }
.faq details {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.faq details[open] { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.faq summary {
  padding: var(--sp-4) var(--sp-5);
  font-weight: 600; font-family: var(--font-display); font-size: 1.05rem;
  cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  min-height: 60px;
  transition: color 180ms var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--primary); }
.faq summary::after {
  content: ""; width: 11px; height: 11px; flex: none;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 280ms var(--ease); color: var(--text-muted);
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq-body { padding: 0 var(--sp-5) var(--sp-5); color: var(--text-muted); }

/* ---------- 18. FORMS ---------- */
.form { display: grid; gap: var(--sp-5); }
.form-row { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.input-group { display: flex; flex-direction: column; gap: var(--sp-2); }
.input-group label { font-weight: 600; font-size: .92rem; }
.input-group .req { color: var(--danger); }
input[type="text"], input[type="email"], input[type="tel"], select, textarea {
  width: 100%; min-height: 50px;
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  transition: border-color 180ms var(--ease), box-shadow 180ms var(--ease), background-color var(--dur) var(--ease);
  font-size: 16px; /* prevents iOS zoom */
}
textarea { min-height: 128px; resize: vertical; line-height: 1.6; }
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%237C8CA5' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
  padding-right: 44px;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-soft);
}
input::placeholder, textarea::placeholder { color: var(--text-faint); }
.hint { font-size: .82rem; color: var(--text-faint); }
.error-msg { font-size: .84rem; color: var(--danger); display: none; align-items: center; gap: 6px; }
.input-group.has-error input,
.input-group.has-error select,
.input-group.has-error textarea { border-color: var(--danger); }
.input-group.has-error .error-msg { display: flex; }

.form-note {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-4); border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--border);
  font-size: .86rem; color: var(--text-muted);
}
.form-status {
  display: none; padding: var(--sp-4) var(--sp-5); border-radius: var(--radius-sm);
  background: var(--accent-soft); border: 1px solid var(--accent-bright);
  font-size: .95rem;
}
.form-status.is-visible { display: block; }
/* The enquiry couldn't be sent: same box, in red, with the phone and email to use instead */
.form-status.is-error { background: color-mix(in srgb, var(--danger) 9%, transparent); border-color: var(--danger); }
/* "Send it with Gmail" in the message after sending a quote request */
.form-status a, .promo-status a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- 19. CONTACT ---------- */
.contact-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--sp-5);
  display: flex; gap: var(--sp-4); align-items: flex-start;
  transition: transform 280ms var(--ease-out), box-shadow 280ms var(--ease), border-color 280ms var(--ease);
}
a.contact-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--primary); }
.contact-card .feature-icon { background: var(--accent-soft); color: var(--accent); }
.contact-k { font-size: var(--step--1); color: var(--text-faint); text-transform: uppercase; letter-spacing: .08em; font-family: var(--font-mono); }
.contact-v { font-weight: 600; font-size: 1.06rem; margin-top: 2px; word-break: break-word; }

.map-embed {
  border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--border); box-shadow: var(--shadow-md);
  aspect-ratio: 16/10; background: var(--surface-2);
}
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; filter: saturate(.9); }
[data-theme="dark"] .map-embed iframe { filter: invert(.9) hue-rotate(180deg) saturate(.75) brightness(.95); }

/* ---------- 20. CTA BAND ---------- */
.cta-band {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: var(--radius-xl);
  padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 5vw, 4rem);
  color: #fff; text-align: center;
}
.cta-band-bg { position: absolute; inset: 0; z-index: -2; }
.cta-band-bg img { width: 100%; height: 100%; object-fit: cover; }
.cta-band-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(6,20,38,.93), rgba(6,20,38,.78));
}
.cta-band h2 { color: #fff; font-size: var(--step-4); }
.cta-band p { color: rgba(255,255,255,.82); margin-inline: auto; }
.cta-band .btn-row { justify-content: center; }

/* ---------- 21. FOOTER ---------- */
.footer {
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  padding-block: var(--sp-8) var(--sp-5);
  margin-top: var(--sp-8);
}
.footer-grid {
  display: grid; gap: var(--sp-6);
  /* min(100%, …) lets each column collapse to full width on a narrow phone
     instead of forcing a fixed minimum and overflowing the viewport. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  padding-bottom: var(--sp-7);
}
@media (min-width: 920px) {
  .footer-grid { grid-template-columns: 1.7fr repeat(3, 1fr); }
}
.footer h4 {
  font-size: .82rem; text-transform: uppercase; letter-spacing: .11em;
  color: var(--text-faint); margin-bottom: var(--sp-4); font-family: var(--font-mono); font-weight: 500;
}
.footer-links { display: flex; flex-direction: column; gap: var(--sp-3); }
.footer-links a { color: var(--text-muted); font-size: .93rem; transition: color 180ms var(--ease); width: fit-content; }
.footer-links a:hover { color: var(--primary); }
.footer-brand { display: flex; flex-direction: column; gap: var(--sp-4); max-width: 40ch; }
.footer-bottom {
  border-top: 1px solid var(--border); padding-top: var(--sp-5);
  display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: space-between; align-items: center;
  font-size: .85rem; color: var(--text-faint);
}

/* ---------- 22. FLOATING CALL (mobile) ---------- */
.fab {
  position: fixed; right: 16px; bottom: 16px; z-index: 90;
  display: none; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5); min-height: 52px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent-bright), #D89406);
  color: #1B1201; font-weight: 700; font-size: .95rem;
  box-shadow: 0 10px 28px rgba(0,0,0,.3);
}
@media (max-width: 760px) { .fab { display: inline-flex; } body { padding-bottom: 76px; } }

/* ---------- 22b. CONTACT WIDGET (Quote + WhatsApp) ---------- */
.contact-widget {
  position: fixed; right: 16px; bottom: 16px; z-index: 320;
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
}
.contact-widget.is-hidden { display: none; }

.contact-widget__dismiss {
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--surface); color: var(--text-faint);
  border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  transition: color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.contact-widget__dismiss:hover { color: var(--text); transform: scale(1.1); }

.contact-widget__pill {
  display: flex; align-items: center; gap: var(--sp-3);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px; padding: 8px 10px 8px 18px;
  min-width: 200px; box-shadow: var(--shadow-lg);
  transition: transform var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.contact-widget__pill:hover { transform: translateY(-3px); border-color: var(--border-strong); box-shadow: var(--shadow-glow); }

.contact-widget__text { display: flex; flex-direction: column; line-height: 1.25; }
.contact-widget__text strong { font-family: var(--font-display); font-size: .92rem; font-weight: 600; color: var(--text); }
.contact-widget__text small { font-family: var(--font-mono); font-size: .72rem; color: var(--text-faint); }

.contact-widget__icon {
  position: relative; flex: none;
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
}
.contact-widget__icon--quote { background: var(--accent-soft); color: var(--accent); }
.contact-widget__icon--whatsapp { background: #25D366; color: #fff; }
.contact-widget__icon svg { position: relative; z-index: 1; }

.contact-widget__pulse {
  position: absolute; inset: 0; border-radius: 50%;
  background: #25D366;
  animation: widget-pulse 2.2s var(--ease-out) infinite;
}
@keyframes widget-pulse {
  0%   { transform: scale(1);    opacity: .55; }
  100% { transform: scale(1.9);  opacity: 0; }
}

@media (max-width: 760px) {
  .contact-widget { right: 12px; bottom: calc(76px + 10px); gap: 8px; }
  .contact-widget__pill { min-width: 0; padding: 7px 8px 7px 14px; }
  .contact-widget__icon { width: 34px; height: 34px; }
}
@media (max-width: 380px) {
  .contact-widget__text small { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .contact-widget__pulse { animation: none; display: none; }
}

/* ---------- 23. REVEAL ANIMATION ---------- */
/* Only hide reveal content once JS has confirmed it is running (the inline head
   script sets html.js). Without this guard, a script error or a visitor with JS
   disabled would leave every revealed section permanently invisible. */
.js .reveal { opacity: 0; transform: translateY(22px); }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
  transition-delay: var(--d, 0ms);
}

/* --- Directional variants for split sections ---------------------------
   The media slides in from its own side while the copy rises, so the two
   halves read as one movement rather than two unrelated fades.
   Transform + opacity only, so nothing reflows while animating. */
/* Scoped under .js to match the specificity of `.js .reveal` above — otherwise
   the base translateY wins and every panel slides up instead of sideways.
   It also means no stray offset survives when JS is unavailable. */
.js .reveal--left  { transform: translate3d(-38px, 0, 0); }
.js .reveal--right { transform: translate3d(38px, 0, 0); }
.js .reveal--left.is-in, .js .reveal--right.is-in { transform: none; }

/* Slow counter-zoom on the photo — it settles as the panel arrives. */
.split-media.reveal { overflow: hidden; }
.js .split-media.reveal img { transform: scale(1.07); transition: transform 1400ms var(--ease-out); }
.split-media.reveal.is-in img { transform: scale(1); }

/* --- Staggered lists ---------------------------------------------------
   Children animate off the parent's .is-in, so one observer drives the row. */
.js .feature-list.reveal .feature,
.js .ticks.reveal .tick { opacity: 0; transform: translateY(16px); }
.feature-list.reveal.is-in .feature,
.ticks.reveal.is-in .tick {
  opacity: 1; transform: none;
  transition: opacity 540ms var(--ease-out), transform 540ms var(--ease-out);
}
.feature-list.reveal.is-in .feature:nth-child(1),
.ticks.reveal.is-in .tick:nth-child(1) { transition-delay:  70ms; }
.feature-list.reveal.is-in .feature:nth-child(2),
.ticks.reveal.is-in .tick:nth-child(2) { transition-delay: 150ms; }
.feature-list.reveal.is-in .feature:nth-child(3),
.ticks.reveal.is-in .tick:nth-child(3) { transition-delay: 230ms; }
.feature-list.reveal.is-in .feature:nth-child(4),
.ticks.reveal.is-in .tick:nth-child(4) { transition-delay: 310ms; }

/* The icon tile gets a small pop as its row lands. */
.feature-list.reveal.is-in .feature-icon {
  animation: iconPop 460ms var(--ease-out) both;
}
.feature-list.reveal.is-in .feature:nth-child(1) .feature-icon { animation-delay:  70ms; }
.feature-list.reveal.is-in .feature:nth-child(2) .feature-icon { animation-delay: 150ms; }
.feature-list.reveal.is-in .feature:nth-child(3) .feature-icon { animation-delay: 230ms; }
.feature-list.reveal.is-in .feature:nth-child(4) .feature-icon { animation-delay: 310ms; }
@keyframes iconPop {
  0%   { transform: scale(.82); }
  60%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* ---------- 24. PAGE HEADER ---------- */
.page-head {
  padding-top: calc(var(--nav-h) + clamp(2.5rem, 6vw, 4.5rem));
  padding-bottom: clamp(2rem, 5vw, 3.5rem);
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
}
.crumbs { display: flex; gap: var(--sp-2); align-items: center; font-size: .84rem; color: var(--text-faint); margin-bottom: var(--sp-4); font-family: var(--font-mono); }
.crumbs a:hover { color: var(--primary); }

/* Photo banner variant — a real install behind the page title.
   The overlay is what keeps the text readable over any photograph. */
.page-head--photo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-bottom: 0;
  background: #06101F;
  padding-top: calc(var(--nav-h) + clamp(3rem, 8vw, 6rem));
  padding-bottom: clamp(2.75rem, 7vw, 5rem);
}
.page-head-bg { position: absolute; inset: 0; z-index: -2; }
.page-head-bg img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 55%;
}
.page-head-bg::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(4,10,20,.93) 0%, rgba(4,10,20,.80) 48%, rgba(4,10,20,.58) 100%),
    linear-gradient(to bottom, rgba(4,10,20,.55), transparent 35%);
}
.page-head--photo h1 { color: #fff; }
.page-head--photo .lead { color: rgba(255,255,255,.85); }
.page-head--photo .eyebrow { color: var(--accent-bright); }
.page-head--photo .crumbs { color: rgba(255,255,255,.66); }
.page-head--photo .crumbs a { color: rgba(255,255,255,.82); }
.page-head--photo .crumbs a:hover { color: #fff; }

/* ---------- 25. COMPARISON TABLE ----------
   One typeface, one font-size and one line-height for every body cell, so
   figures and words sit on the same rhythm. Hierarchy comes from weight and
   colour instead of size. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

table.compare {
  width: 100%;
  min-width: 800px;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--font-body);
  font-size: .95rem;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;   /* digits line up down each column */
}

/* Every cell inherits the same type — no per-cell overrides. */
table.compare th,
table.compare td {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  font-weight: 400;
  text-align: left;
  vertical-align: middle;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}

/* Header: the one deliberate exception — smaller and tracked out, but with
   proper contrast rather than the washed-out grey it had before. */
table.compare thead th {
  font-size: .76rem;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text);
  background: var(--primary-soft);
  padding-block: 1rem;
  white-space: nowrap;
  border-bottom: 1px solid var(--border-strong);
}

table.compare tbody tr:last-child th,
table.compare tbody tr:last-child td { border-bottom: 0; }

/* Row hover: tint plus a gold edge marker. */
table.compare tbody tr {
  transition: background-color 180ms var(--ease);
}
table.compare tbody tr:hover > td,
table.compare tbody tr:hover > th { background: var(--surface-2); }
table.compare tbody tr:hover > th[scope="row"] {
  box-shadow: inset 3px 0 0 var(--accent-bright), 1px 0 0 var(--border);
}

/* The system column stays put while the rest scrolls sideways on narrow screens. */
table.compare thead th:first-child,
table.compare tbody th[scope="row"] {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--surface);
  box-shadow: 1px 0 0 var(--border);
}
table.compare thead th:first-child { background: var(--primary-soft); }

/* System value as a pill — the thing you scan the table by. */
.sys-pill {
  display: inline-flex;
  align-items: baseline;
  gap: .22em;
  padding: .42em .78em;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: background-color 180ms var(--ease), border-color 180ms var(--ease),
              transform 180ms var(--ease);
}
.sys-pill span { font-weight: 500; opacity: .75; }
a.sys-pill:hover,
a.sys-pill:focus-visible {
  background: var(--surface);
  border-color: var(--primary);
  transform: translateY(-1px);
}

/* Price: weight and colour carry the emphasis, not a bigger size. */
table.compare .price { font-weight: 600; color: var(--accent); }
table.compare .price-note { display: block; color: var(--text-muted); }
table.compare .quote-link {
  color: var(--primary); font-weight: 500; white-space: nowrap;
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
table.compare .quote-link:hover { text-decoration-thickness: 2px; }
table.compare .suited { color: var(--text-muted); }

/* ---------- 26. REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  /* !important because `.js .reveal` (0,2,0) out-specifies a bare `.reveal`,
     and an accessibility override must not lose to it. */
  .reveal,
  .js .reveal,
  .js .reveal--left,
  .js .reveal--right,
  .feature-list .feature,
  .ticks .tick,
  .js .split-media.reveal img,
  .split-media.reveal img {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .feature-list.reveal.is-in .feature-icon { animation: none !important; }
  .curve-line { stroke-dashoffset: 0; }
  .curve-fill { opacity: 1; }
}

/* ---------- 27. PRINT ---------- */
@media print {
  .header, .fab, .contact-widget, .drawer, .hero-scroll, .cta-band { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ---------- 27. 3D PACKAGE HOVER ----------
   Cards lift, scale and tilt toward the pointer (main.js sets --rx/--ry and the
   glare position --mx/--my). Doubled class beats .reveal.is-in, which would
   otherwise reset transform after the card has faded in. Touch screens and
   reduced-motion visitors get no transform at all. */
.pkg-tilt { position: relative; }
.pkg-tilt.pkg-tilt {
  transition: opacity 700ms var(--ease-out), transform 450ms var(--ease-out),
              box-shadow 300ms var(--ease), border-color 300ms var(--ease);
}
.pkg-tilt.pkg-tilt.is-tilting { transition-duration: 700ms, 140ms, 300ms, 300ms; }
.pkg-tilt::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 0%),
              color-mix(in srgb, var(--accent-bright) 13%, transparent), transparent 45%);
  opacity: 0; transition: opacity 300ms var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .pkg-tilt.pkg-tilt:hover {
    transform: perspective(1000px) translateY(-8px) scale(1.02)
               rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    box-shadow: var(--shadow-lg), 0 34px 70px -24px rgba(0, 0, 0, .38);
    border-color: var(--border-strong);
    z-index: 2;
  }
  /* Full-width cards on the packages page: a big card scaled 2% jumps ~25px, so keep it subtle */
  .pkg-tilt--wide.pkg-tilt--wide:hover {
    transform: perspective(1800px) translateY(-6px) scale(1.008)
               rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  }
  .pkg--featured.pkg-tilt:hover,
  .pkg-tilt--wide[style*="accent-bright"]:hover { border-color: var(--accent-bright); }
  .pkg-tilt:hover::after { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .pkg-tilt.pkg-tilt:hover, .pkg-tilt--wide.pkg-tilt--wide:hover { transform: none; }
}
/* Residential cards: gold ring on hover (and keyboard focus). A 1px ring outside
   the 1px border reads as a 2px gold edge without shifting the layout. */
.pkg-tilt.pkg-res:hover,
.pkg-tilt.pkg-res:focus-within {
  border-color: var(--accent-bright);
  box-shadow: 0 0 0 1px var(--accent-bright),
              0 0 36px -8px color-mix(in srgb, var(--accent-bright) 55%, transparent),
              var(--shadow-lg), 0 34px 70px -24px rgba(0, 0, 0, .38);
}

/* ---------- 28. REBATES PAGE ---------- */
.rb-hero .btn-row { margin-top: var(--sp-5); }
.rb-ticker {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4);
  margin-top: clamp(2rem, 5vw, 3.25rem);
}
@media (max-width: 760px) { .rb-ticker { grid-template-columns: 1fr; } }
.rb-ticker li {
  display: flex; flex-direction: column; gap: 4px;
  padding: var(--sp-4) var(--sp-5);
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.rb-ticker-k { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.rb-ticker-v { font-family: var(--font-mono); font-weight: 600; font-size: clamp(1.4rem, 3vw, 1.8rem); letter-spacing: -0.03em; color: var(--accent-bright); font-variant-numeric: tabular-nums; }
.rb-ticker-l { font-size: .84rem; color: rgba(255,255,255,.75); }

/* Estimator inputs */
.rb-presets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2); }
@media (max-width: 520px) { .rb-presets { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rb-presets button {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: var(--sp-3); border-radius: var(--radius-sm);
  border: 1.5px solid var(--border); background: var(--surface);
  text-align: left; transition: border-color 180ms var(--ease), background-color 180ms var(--ease);
}
.rb-presets button:hover { border-color: var(--border-strong); }
.rb-presets strong { font-family: var(--font-mono); font-size: .95rem; color: var(--text); }
.rb-presets span { font-size: .78rem; color: var(--text-muted); }
.rb-presets button[aria-pressed="true"] { border-color: var(--primary); background: var(--primary-soft); }
.rb-presets button[aria-pressed="true"] strong { color: var(--primary); }

.rb-tiers { display: flex; gap: 3px; margin-bottom: var(--sp-4); }
.rb-tier { position: relative; height: 8px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); }
.rb-tier-fill { position: absolute; inset: 0 auto 0 0; width: var(--fill, 0%); border-radius: inherit; transition: width 250ms var(--ease-out); }
.rb-tier:nth-child(1) .rb-tier-fill { background: var(--success); }
.rb-tier:nth-child(2) .rb-tier-fill { background: color-mix(in srgb, var(--success) 62%, transparent); }
.rb-tier:nth-child(3) .rb-tier-fill { background: color-mix(in srgb, var(--success) 30%, transparent); }
.rb-tier em { position: absolute; top: 12px; left: 2px; font-style: normal; font-family: var(--font-mono); font-size: .68rem; color: var(--text-faint); }

.rb-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-4); }
@media (max-width: 560px) { .rb-row { grid-template-columns: 1fr; } }
.rb-select { min-height: 48px; font-size: 16px; }
.rb-check { display: flex; align-items: center; gap: var(--sp-3); font-size: .92rem; font-weight: 500; cursor: pointer; }
.rb-check input { width: 20px; height: 20px; accent-color: var(--primary); flex: none; }
.rb-money { position: relative; }
.rb-money span { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); font-family: var(--font-mono); color: var(--text-muted); }
.rb-money input { padding-left: 32px; font-family: var(--font-mono); font-weight: 600; font-size: 1.1rem; }
.rb-price-tag {
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-faint); border: 1px solid var(--border); border-radius: 999px; padding: 2px 10px;
}
.rb-price-tag.is-custom { color: var(--success); border-color: currentColor; }
.rb-link { color: var(--primary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* Estimator result */
.rb-result .result-value { transition: color 200ms var(--ease); }
.rb-share { color: rgba(255,255,255,.72); font-size: .92rem; margin-top: var(--sp-1); }
.rb-share span { font-family: var(--font-mono); font-weight: 600; color: #fff; }
.rb-bar { position: relative; display: flex; height: 16px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.08); }
.rb-seg { height: 100%; width: 0; transition: width 450ms var(--ease-out); }
.rb-seg--solar   { background: #3DBE79; }
.rb-seg--battery { background: #4FA6F2; }
.rb-seg--state   { background: #B08CF5; }
.rb-seg--net     { background: var(--accent-bright); }
.rb-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 9px; vertical-align: 1px; }
.rb-rows .result-row[hidden] { display: none; }
.rb-row-gross dd { color: rgba(255,255,255,.72); }
.rb-row-net dt { color: #fff; font-weight: 600; }
.rb-row-net dd { color: var(--accent-bright); font-size: 1.25rem; }
.rb-state-note { font-size: .8rem; line-height: 1.55; color: rgba(255,255,255,.6); position: relative; }
.rb-state-note:empty { display: none; }
.rb-working { position: relative; border-top: 1px solid rgba(255,255,255,.12); padding-top: var(--sp-4); }
.rb-working summary { cursor: pointer; font-family: var(--font-mono); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.rb-working p { font-family: var(--font-mono); font-size: .8rem; line-height: 1.6; color: rgba(255,255,255,.72); margin-top: var(--sp-3); }
.rb-working p:empty { display: none; }
.rb-working .rb-working-note { font-family: inherit; color: rgba(255,255,255,.5); font-size: .76rem; }

/* .field and .rb-check set display, which would otherwise beat the hidden attribute */
.rb [hidden] { display: none !important; }

/* Policy overview */
.rb-policy-key { border-color: var(--accent-bright); box-shadow: var(--shadow-glow); }
.rb-policy .pkg { gap: var(--sp-3); }
.rb-policy .badge { align-self: flex-start; }
.rb-formula {
  font-family: var(--font-mono); font-size: .8rem; color: var(--primary);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: var(--sp-2) var(--sp-3);
}
.rb-states { width: 100%; border-collapse: collapse; font-size: .84rem; }
.rb-states th, .rb-states td { padding: var(--sp-2) 0; border-bottom: 1px solid var(--border); vertical-align: top; text-align: left; }
.rb-states tr:last-child th, .rb-states tr:last-child td { border-bottom: 0; }
.rb-states th { font-family: var(--font-mono); font-weight: 600; color: var(--accent); white-space: nowrap; padding-right: var(--sp-3); }
.rb-states td { color: var(--text-muted); }

/* Timing chart */
.rb-timing { align-items: center; }
.rb-years { display: flex; flex-direction: column; gap: var(--sp-3); }
.rb-year { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr) 5.5rem; align-items: center; gap: var(--sp-3); }
.rb-year-k { font-family: var(--font-mono); font-weight: 600; color: var(--text-muted); }
.rb-year-bar { height: 30px; border-radius: 8px; background: var(--surface-2); overflow: hidden; }
.rb-year-bar i { display: block; height: 100%; width: var(--w, 0%); border-radius: inherit; background: color-mix(in srgb, var(--primary) 40%, transparent); transition: width 500ms var(--ease-out); }
.rb-year-v { font-family: var(--font-mono); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.rb-year.is-now .rb-year-bar i { background: linear-gradient(90deg, var(--accent-bright), #D89406); }
.rb-year.is-now .rb-year-k, .rb-year.is-now .rb-year-v { color: var(--accent); }
.rb-year.is-closed .rb-year-v { color: var(--text-faint); }

/* ---------- 29. SAVINGS ESTIMATOR (3 columns) ----------
   Inputs | savings | monthly chart. Two columns on tablets with the chart
   spanning the full width underneath, one column on phones. */
.se {
  display: grid; gap: clamp(1rem, 2.4vw, 1.5rem); align-items: stretch;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1fr) minmax(0, 1.25fr);
}
@media (max-width: 1100px) { .se { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .se-chart-card { grid-column: 1 / -1; } }
@media (max-width: 720px)  { .se { grid-template-columns: 1fr; } }
.se-col { min-width: 0; }
.seg--sm button { min-height: 36px; font-size: .84rem; }

.se-rec {
  border: 1.5px solid var(--accent-bright); border-radius: var(--radius);
  background: var(--accent-soft); padding: var(--sp-4) var(--sp-5);
  display: flex; flex-direction: column; gap: 2px;
}
.se-rec-k { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.se-rec-v { font-family: var(--font-mono); font-weight: 600; font-size: clamp(2rem, 4vw, 2.5rem); line-height: 1.1; letter-spacing: -0.04em; color: var(--text); }
.se-rec-bat { font-family: var(--font-mono); font-weight: 600; font-size: 1.25rem; color: var(--accent); letter-spacing: -0.02em; }
.se-rec small { font-size: .5em; color: var(--text-muted); margin-left: .25em; letter-spacing: 0; }
.se-rec-bat small { font-size: .62em; }
.se-rec-detail { font-size: .82rem; color: var(--text-muted); margin-top: var(--sp-2); }
.se-rec-note { font-size: .86rem; font-weight: 600; color: var(--text); margin-top: var(--sp-1); }
.se-rec [hidden] { display: none !important; }
.se-rec-std, .se-rec-custom { display: flex; flex-direction: column; gap: 2px; }
.se-rec-custom { gap: var(--sp-2); }
.se-rec-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.3rem, 2.6vw, 1.55rem); line-height: 1.2; color: var(--text); }
.se-rec-msg { font-size: .9rem; line-height: 1.5; color: var(--text-muted); margin-bottom: var(--sp-2); }
.se-rec.is-custom { border-color: var(--primary); background: var(--primary-soft); }
.se-rec.is-custom .se-rec-k { color: var(--primary); }
.se-rec.is-swapping > :not([hidden]) { animation: seSwap 320ms var(--ease-out); }
@keyframes seSwap { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .se-rec.is-swapping > * { animation: none; } }
.se-rec-link { font-size: .86rem; font-weight: 600; color: var(--primary); margin-top: var(--sp-2); }
.se-rec-link:hover { text-decoration: underline; text-underline-offset: 3px; }

.se-per { color: rgba(255,255,255,.72); font-size: .92rem; margin-top: var(--sp-1); }
.se-bills { display: flex; flex-direction: column; gap: var(--sp-2); position: relative; }
.se-bill-bar { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) 4.5rem; align-items: center; gap: var(--sp-3); font-size: .84rem; }
.se-bill-bar span { color: rgba(255,255,255,.66); }
.se-bill-bar i { display: block; height: 12px; width: var(--w, 100%); border-radius: 999px; background: rgba(255,255,255,.35); transition: width 450ms var(--ease-out); }
.se-bill-bar--after i { background: var(--accent-bright); }
.se-bill-bar b { font-family: var(--font-mono); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }

.se-chart-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: clamp(1.1rem, 2.6vw, 1.6rem); display: flex; flex-direction: column; gap: var(--sp-3);
}
.se-chart-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); }
.se-chart-title { font-weight: 600; font-size: 1.05rem; }
.se-chart-unit { font-family: var(--font-mono); font-size: .72rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: .08em; }
.se-legend { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); font-size: .8rem; color: var(--text-muted); }
.se-legend li { display: flex; align-items: center; gap: var(--sp-2); }
.se-key { display: inline-block; width: 14px; height: 4px; border-radius: 2px; flex: none; }
.se-key--gen    { height: 10px; width: 10px; background: #4ADE80; }
.se-key--before { background: #E5484D; }
.se-key--after  { background: #4FA6F2; }
.se-chart { position: relative; touch-action: pan-y; flex: 1; min-height: 240px; }
.se-chart svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
@media (max-width: 1100px) { .se-chart { min-height: 280px; } }
.se-grid { stroke: var(--border); stroke-width: 1; }
.se-tick { font-family: var(--font-mono); font-size: 11px; fill: var(--text-faint); }
.se-tick--unit { font-size: 10px; letter-spacing: .06em; }
/* Solar generation bars */
.se-bar { fill: url(#se-g-bar); opacity: .85; transition: opacity 150ms var(--ease); }
.se-bar.is-hover { opacity: 1; }
/* Lines float on a soft glow over gradient areas, as in the proposal's energy-flow charts */
.se-line { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.se-line--before { stroke: #E5484D; filter: drop-shadow(0 4px 6px rgba(229, 72, 77, .45)); }
.se-line--after  { stroke: #4FA6F2; filter: drop-shadow(0 4px 8px rgba(79, 166, 242, .55)); }
/* Both consumption lines flow along their curve (dash period 20 = 14 + 6) */
.se-line--before, .se-line--after { stroke-dasharray: 14 6; animation: flowLine 1.4s linear infinite; }
@keyframes flowLine { to { stroke-dashoffset: -20; } }
@media (prefers-reduced-motion: reduce) { .se-line--before, .se-line--after { animation: none; } }
.se-dot--before { fill: #E5484D; stroke: var(--surface); stroke-width: 2; }
.se-dot--after  { fill: #4FA6F2; stroke: var(--surface); stroke-width: 2; }
.se-hover { stroke: var(--text-faint); stroke-width: 1; stroke-dasharray: 3 3; }
.se-tip {
  position: absolute; top: 4px; pointer-events: none; z-index: 2;
  display: flex; flex-direction: column; gap: 2px; white-space: nowrap;
  width: max-content;   /* measure the real width so JS can keep it inside the chart */
  padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--border-strong); box-shadow: var(--shadow-md);
  font-size: .76rem; color: var(--text-muted);
}
.se-tip strong { color: var(--text); font-size: .82rem; }
.se-tip span { display: flex; align-items: center; gap: var(--sp-2); font-family: var(--font-mono); }
.se-chart-note { font-size: .8rem; color: var(--text-faint); margin-top: auto; }

/* ---------- 30. SHORT LEADS & TAGS ----------
   One-line intro plus key facts as tags, instead of a paragraph. */
.lead--compact { font-size: var(--step-0); line-height: 1.55; }
.tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.tags li {
  font-family: var(--font-mono); font-size: .74rem; letter-spacing: .02em;
  padding: 5px 12px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border); color: var(--text-muted);
}
.page-head--photo .tags li { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); color: rgba(255,255,255,.86); }

/* ---------- 31. BATTERY ENERGY VIEW ----------
   The 3D app render sits in a light card in both themes (the render itself is
   light). Sizes inside use container units so the overlay scales with the image. */
.ef { background: #EEF1F8; border-radius: 24px; box-shadow: var(--shadow-lg); padding: 0; }
.ef-frame { position: relative; container-type: inline-size; }
/* Undo .split-media's 4:3 crop and reveal zoom: the overlay paths are drawn in
   the image's own pixel space, so the image must render whole and unscaled */
.split-media.ef .ef-frame img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 598 / 664; object-fit: fill; transform: none !important;
}
.ef-flows { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ef-flows path { fill: none; }
.ef-line use { fill: none; stroke: #2DD4BF; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
               stroke-dasharray: 2 12; animation: ef-dash .8s linear infinite;
               filter: drop-shadow(0 0 3px rgba(45, 212, 191, .9)); }
@keyframes ef-dash { to { stroke-dashoffset: -14; } }
.ef-dots circle { fill: #E6FFFB; stroke: #14B8A6; stroke-width: 2; filter: drop-shadow(0 0 4px rgba(45, 212, 191, .9)); }
@media (prefers-reduced-motion: reduce) { .ef-line use { animation: none; } .ef-dots { display: none; } }

/* ---------- 32. HOME: 17px SWITZER MEDIUM ----------
   Every Switzer Medium (weight 500) text element in the homepage Track record,
   Packages, Battery storage, EV charging and Monitoring sections, set to one
   size. Mono figures, headings and the SVG diagram keep their own sizes.
   Remove "type-17" from those sections in index.html to revert. */
.type-17 :is(.lead, .pkg-desc, .spec-k, .pkg-price-note, .tick, .stat-l, .muted, .faint),
.type-17 .feature p {
  font-size: 17px;
  line-height: 1.5;
}

/* ---------- 33. PACKAGES PAGE: 17px LEADS ---------- */
.lead.lead--17 { font-size: 17px; line-height: 26px; }

/* ---------- 34. "EVERY PACKAGE" VIVID ICON BADGES ----------
   Glossy gradient tiles: a top highlight and a coloured drop shadow give the
   3D feel; each feature gets its own hue so the grid scans at a glance. */
.features-vivid .feature-icon {
  --c1: #60A5FA; --c2: #2563EB;
  position: relative; width: 56px; height: 56px; border-radius: 16px; border: 0; color: #fff;
  background: linear-gradient(145deg, var(--c1), var(--c2));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -3px 6px rgba(0,0,0,.18),
              0 10px 20px -8px color-mix(in srgb, var(--c2) 70%, transparent);
  transition: transform 300ms var(--ease-out), box-shadow 300ms var(--ease);
}
.features-vivid .feature-icon::after {
  content: ""; position: absolute; inset: 3px 3px 50% 3px; border-radius: 13px 13px 40% 40%;
  background: linear-gradient(to bottom, rgba(255,255,255,.35), transparent); pointer-events: none;
}
.features-vivid .feature-icon svg {
  width: 26px; height: 26px; stroke-width: 2.25; position: relative; z-index: 1;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.25));
}
.features-vivid .feature:nth-child(1) .feature-icon { --c1: #FCD34D; --c2: #F59E0B; }  /* warranty */
.features-vivid .feature:nth-child(2) .feature-icon { --c1: #67E8F9; --c2: #0891B2; }  /* monitoring */
.features-vivid .feature:nth-child(3) .feature-icon { --c1: #86EFAC; --c2: #16A34A; }  /* rebate */
.features-vivid .feature:nth-child(4) .feature-icon { --c1: #A5B4FC; --c2: #4F46E5; }  /* install */
.features-vivid .feature:nth-child(5) .feature-icon { --c1: #F9A8D4; --c2: #DB2777; }  /* battery */
.features-vivid .feature:nth-child(6) .feature-icon { --c1: #FDBA74; --c2: #EA580C; }  /* finance */
@media (hover: hover) {
  .features-vivid .feature:hover .feature-icon {
    transform: translateY(-3px) rotate(-4deg) scale(1.05);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -3px 6px rgba(0,0,0,.18),
                0 16px 26px -8px color-mix(in srgb, var(--c2) 80%, transparent);
  }
}
@media (prefers-reduced-motion: reduce) { .features-vivid .feature:hover .feature-icon { transform: none; } }

/* ---------- 35. TWO-TONE HEADINGS (inner pages) ----------
   <em class="hl"> marks the punchy words in a heading. On dark surfaces
   (photo banners, CTA bands, dark mode) it's a white→amber gradient; on light
   surfaces pale gold fails contrast (~2:1), so it uses the readable --accent. */
.hl { font-style: normal; color: var(--accent); }
.page-head--photo .hl, .cta-band .hl, [data-theme="dark"] .hl {
  background: linear-gradient(95deg, #FEF3C7 0%, #FCD34D 45%, #F59E0B 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}


/* ---------- 36. HOME: EV CHARGING BAY ----------
   Bright white card holding an isometric 3D charging bay (inline SVG built by
   tools/ev_bay.py): white equipment on a pale slate deck, sky-blue accents,
   soft shadows. Like the battery card, it stays light in both themes. Energy
   lines reuse the battery view's .ef-line / .ef-dots from section 31;
   everything animates transform or opacity only. main.js pauses it all while
   the card is off screen and adds a pointer tilt. */
.evx {
  --evx-sky: #0EA5E9; --evx-sky-600: #0284C7; --evx-green: #22C55E; --evx-green-600: #16A34A;
  --evx-ink: #0F172A; --evx-muted: #64748B;
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: 24px; border: 1px solid #E0F2FE;
  background:
    radial-gradient(70% 55% at 88% 6%, rgba(186, 230, 253, .55), transparent 70%),
    radial-gradient(60% 50% at 6% 96%, rgba(224, 242, 254, .8), transparent 70%),
    linear-gradient(165deg, #FFFFFF 0%, #F8FBFF 55%, #F0F9FF 100%);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 24px 48px -16px rgba(14, 165, 233, .22), 0 0 0 1px rgba(241, 245, 249, 1);
}
.evx-stage {
  position: relative; container-type: inline-size;
  transform: perspective(1100px) rotateX(var(--evx-rx, 0deg)) rotateY(var(--evx-ry, 0deg));
  transition: transform .5s var(--ease-out);
  will-change: transform;
}
.evx-scene { display: block; width: 100%; height: auto; overflow: visible; }

/* platform */
.evx-grid { stroke: rgba(14, 165, 233, .13); stroke-width: .8; fill: none; }
.evx-edge { stroke: #7DD3FC; stroke-width: 1.6; fill: none; filter: drop-shadow(0 0 3px rgba(56, 189, 248, .6)); }
.evx-ring { fill: none; stroke: rgba(14, 165, 233, .35); stroke-width: 1.4; stroke-dasharray: 6 8; }
.evx-ring--pulse {
  stroke: rgba(14, 165, 233, .6); stroke-dasharray: none;
  transform-box: fill-box; transform-origin: center;
  animation: evx-ring 3.2s var(--ease-out) infinite;
}
@keyframes evx-ring { 0% { transform: scale(.55); opacity: .9; } 100% { transform: scale(1.12); opacity: 0; } }
.evx-conduit { fill: none; stroke: #E2E8F0; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }

/* sources */
.evx-led { animation: evx-led 2.4s ease-in-out infinite; animation-delay: calc(var(--i) * .3s); }
@keyframes evx-led { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }
.evx-sheen { animation: evx-sheen 5s ease-in-out infinite; }
@keyframes evx-sheen { 0%, 100% { opacity: .25; transform: translateX(0); } 50% { opacity: .9; transform: translateX(52px); } }

/* charger */
.evx-strip { fill: none; stroke: #BAE6FD; stroke-width: 3; stroke-linecap: round; }
.evx-strip--run {
  stroke: var(--evx-sky); stroke-dasharray: 10 60; filter: drop-shadow(0 0 3px rgba(14, 165, 233, .7));
  animation: evx-run 1.4s linear infinite;
}
@keyframes evx-run { to { stroke-dashoffset: 70; } }
.evx-screen-k { font: 600 7px/1 var(--font-mono); letter-spacing: .08em; fill: #0369A1; }
.evx-screen-v { font: 600 14px/1 var(--font-mono); fill: var(--evx-sky-600); }

/* car: crisp sky-blue linework over a faint blue body */
.evx-body { fill: rgba(14, 165, 233, .07); }
.evx-wire { fill: none; stroke: var(--evx-sky-600); stroke-width: 1.4; stroke-linejoin: round; filter: drop-shadow(0 0 2px rgba(56, 189, 248, .45)); }
.evx-wire--dim { stroke: rgba(2, 132, 199, .3); filter: none; }
.evx-tyre { fill: #334155; }
.evx-head { stroke: #38BDF8; stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(56, 189, 248, .8)); }
.evx-tail { stroke: #FB7185; stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 3px rgba(244, 63, 94, .6)); }
.evx-scan { fill: url(#evx-scan-g); animation: evx-scan 3.6s ease-in-out infinite alternate; }
@keyframes evx-scan { to { transform: translate(var(--scan-x), var(--scan-y)); } }
.evx-cell { opacity: .2; transition: opacity .6s var(--ease-out); }
.evx-cell.is-lit { opacity: 1; }
.evx-cell.is-next { animation: evx-led 1.2s ease-in-out infinite; }

/* cable + energy: the shared .ef-line / .ef-dots, recoloured for a white card */
.evx-cable { fill: none; stroke: #475569; stroke-width: 5; stroke-linecap: round; }
.evx .ef-line use { stroke: var(--evx-sky); filter: drop-shadow(0 0 2px rgba(14, 165, 233, .55)); }
.evx .evx-line--hot use { stroke: var(--evx-green); filter: drop-shadow(0 0 2px rgba(34, 197, 94, .6)); }
.evx .ef-dots circle { fill: #FFFFFF; stroke: var(--evx-sky); filter: drop-shadow(0 0 3px rgba(14, 165, 233, .7)); }
.evx .ef-dots .evx-dot--hot { fill: #FFFFFF; stroke: var(--evx-green); filter: drop-shadow(0 0 3px rgba(34, 197, 94, .7)); }
.evx-port {
  fill: rgba(34, 197, 94, .18); stroke: var(--evx-green); stroke-width: 1.5;
  transform-box: fill-box; transform-origin: center;
  animation: evx-port 1.6s var(--ease-out) infinite;
}
@keyframes evx-port { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(2.3); opacity: 0; } }

/* white glass read-outs, placed in % of the scene; container units keep them
   in proportion with a floor for phones */
.evx-hud { position: absolute; inset: 0; pointer-events: none; font-size: max(10px, 1.75cqw); }
.evx-status {
  position: absolute; left: 3.5%; top: 4.5%;
  display: inline-flex; align-items: center; gap: .5em;
  padding: .38em .85em; border-radius: 99px;
  background: #F0F9FF; border: 1px solid #BAE6FD;
  color: #0369A1; font-weight: 600; letter-spacing: .02em;
}
.evx-status::before {
  content: ""; width: .6em; height: .6em; border-radius: 50%; background: var(--evx-green);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, .18); animation: evx-led 1.4s ease-in-out infinite;
}
.evx-chip {
  position: absolute; transform: translate(-50%, calc(-100% - 14px));
  display: flex; flex-direction: column; gap: .15em; white-space: nowrap;
  padding: .55em .85em .6em; border-radius: .8em;
  background: rgba(255, 255, 255, .82); border: 1px solid #E0F2FE;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 10px 24px -8px rgba(14, 165, 233, .25);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--evx-ink); line-height: 1.2;
}
/* stem down to the part it describes */
.evx-chip::after {
  content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 14px;
  background: linear-gradient(#7DD3FC, rgba(125, 211, 252, 0));
}
.evx-k { text-transform: uppercase; letter-spacing: .1em; font-size: .85em; color: var(--evx-muted); }
.evx-v { font-family: var(--font-display); font-size: 1.55em; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--evx-ink); }
.evx-v small { font-size: .62em; font-weight: 500; color: var(--evx-muted); }
.evx-v--teal { color: var(--evx-sky-600); }
.evx-v--green { color: var(--evx-green-600); }
.evx-bar { display: block; width: 7.5em; height: .42em; margin-top: .3em; border-radius: 99px; background: #F1F5F9; overflow: hidden; }
.evx-bar i {
  display: block; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, #22C55E, #4ADE80);
  transition: width .8s var(--ease-out);
}

/* narrow cards: keep the two read-outs that tell the story, drop the rest */
@container (max-width: 480px) { .evx-chip--minor { display: none; } }

/* off screen: freeze every loop (main.js also pauses the SVG timeline) */
.evx.is-paused *, .evx.is-paused *::before, .evx.is-paused *::after { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  .evx *, .evx *::before, .evx *::after { animation: none !important; }
  .evx .ef-dots { display: none; }
  .evx-stage { transform: none; transition: none; }
}

/* ---------- 37. PROCESS PULSE, COMPARE TABLE ACCENTS, PROJECT HOVERS ---------- */

/* How it works: a sky-blue pulse runs along each connector in turn, and the
   step number lights up as its pulse sets off. Two background layers on the
   existing ::after line: the moving glow on top, the original gradient below. */
.step::after {
  background:
    linear-gradient(90deg, transparent, rgba(56, 189, 248, .95), #E0F2FE, rgba(56, 189, 248, .95), transparent) no-repeat,
    linear-gradient(90deg, var(--accent-bright), var(--border-strong) 45%, transparent);
  background-size: 34% 100%, 100% 100%;
  background-position: -40% 0, 0 0;
  opacity: .8;
  animation: step-pulse 4.8s var(--ease) infinite;
}
.step::before {
  padding: .28em .4em; margin: -.28em -.4em;   /* room for the ring without moving the digits */
  border-radius: 14px;
  transition: color 300ms var(--ease), background-color 300ms var(--ease), box-shadow 300ms var(--ease);
  animation: step-glow 4.8s var(--ease) infinite;
}
.steps .step:nth-child(2)::after, .steps .step:nth-child(2)::before { animation-delay: 1.2s; }
.steps .step:nth-child(3)::after, .steps .step:nth-child(3)::before { animation-delay: 2.4s; }
.steps .step:nth-child(4)::after, .steps .step:nth-child(4)::before { animation-delay: 3.6s; }
@keyframes step-pulse {
  0%        { background-position: -40% 0, 0 0; }
  25%, 100% { background-position: 140% 0, 0 0; }
}
@keyframes step-glow {
  0%, 30%, 100% { text-shadow: none; }
  6%            { text-shadow: 0 0 14px rgba(56, 189, 248, .75), 0 0 2px rgba(56, 189, 248, .9); }
}
@media (hover: hover) {
  .step:hover::before {
    color: #0284C7; background: #F0F9FF;
    box-shadow: 0 0 0 1px #BAE6FD, 0 0 0 6px rgba(56, 189, 248, .14), 0 0 22px rgba(56, 189, 248, .45);
  }
  [data-theme="dark"] .step:hover::before { color: #7DD3FC; background: rgba(56, 189, 248, .12); }
  .step:hover::after { opacity: 1; }
}

/* Compare at a glance: zebra rows, bold key figures, pills for the winners */
table.compare tbody tr:nth-child(even) > td,
table.compare tbody tr:nth-child(even) > th { background: color-mix(in srgb, var(--surface-2) 55%, var(--surface)); }
table.compare tbody tr:hover > td,
table.compare tbody tr:hover > th { background: var(--primary-soft); }
table.compare td.metric { font-weight: 700; }
table.compare td.batt,
table.compare td.save { white-space: nowrap; }
table.compare .batt { color: #0369A1; font-weight: 600; }
[data-theme="dark"] table.compare .batt { color: #7DD3FC; }
table.compare td.save {
  font-weight: 700; color: #15803D;
}
[data-theme="dark"] table.compare td.save { color: #4ADE80; }
table.compare td.save::after {
  content: "✓"; display: inline-grid; place-items: center; margin-left: .5em;
  width: 1.35em; height: 1.35em; border-radius: 50%; font-size: .8em; vertical-align: .08em;
  background: rgba(34, 197, 94, .14); color: #15803D;
}
[data-theme="dark"] table.compare td.save::after { color: #4ADE80; }
table.compare td.na { color: var(--text-muted); font-style: italic; }
table.compare .suited { font-weight: 600; color: var(--text); }
table.compare .quote-link {
  display: inline-block; padding: .38em .85em; border-radius: 999px;
  background: var(--primary-soft); border: 1px solid transparent;
  text-decoration: none; font-weight: 600;
  transition: background-color 180ms var(--ease), border-color 180ms var(--ease);
}
table.compare .quote-link:hover { background: var(--surface); border-color: var(--primary); }

/* Projects page: cards, photos and phones lift and tilt in 3D on hover */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .proj-3d :is(.card, .gallery figure, .phone-frame) { transform-origin: 50% 100%; }
  .proj-3d .card:hover,
  .proj-3d .gallery figure:hover,
  .proj-3d .phone-frame:hover {
    transform: perspective(900px) translateY(-8px) rotateX(3deg) rotateZ(.6deg);
    box-shadow: 0 28px 50px -18px rgba(14, 165, 233, .35), var(--shadow-lg);
    border-color: #7DD3FC;
    transition: transform 320ms var(--ease-out), box-shadow 320ms var(--ease), border-color 320ms var(--ease);
    transition-delay: 0ms;
  }
  .proj-3d .gallery figure { transition: transform 320ms var(--ease-out), box-shadow 320ms var(--ease), border-color 320ms var(--ease); }
  .proj-3d .phone-frame:hover { border-color: #10161F; box-shadow: 0 28px 50px -18px rgba(14, 165, 233, .45), 0 0 0 1px #7DD3FC; }
}

/* Proof it works: every phone the same screen shape; a shorter screenshot sits
   at the top and its own background colour fills the rest of the screen */
.phone-frame--even { aspect-ratio: 300 / 632; width: 100%; background: var(--screen, #10161F); }
.phone-frame--even img { width: 100%; height: 100%; object-fit: contain; object-position: top center; }

@media (prefers-reduced-motion: reduce) {
  .step::after, .step::before { animation: none; }
}

/* ---------- 38. PACKAGE CARD PRODUCT BADGE (home, residential) ----------
   Compact glass panel between the spec list and the price: the transparent
   Sigenergy render on a soft sky glow, plus what's installed. The pips show
   battery modules out of four, so the three sizes read at a glance. */
.pkg-kit {
  position: relative; overflow: hidden; margin: 0;
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-3);
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, #38BDF8 24%, var(--border));
  background:
    radial-gradient(90% 120% at 12% 100%, rgba(56, 189, 248, .18), transparent 62%),
    linear-gradient(180deg, color-mix(in srgb, #F0F9FF 60%, var(--surface)), var(--surface));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), 0 8px 18px -12px rgba(14, 165, 233, .45);
}
[data-theme="dark"] .pkg-kit {
  background:
    radial-gradient(90% 120% at 12% 100%, rgba(56, 189, 248, .16), transparent 62%),
    linear-gradient(180deg, rgba(56, 189, 248, .07), rgba(56, 189, 248, .02));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}
/* soft floor shadow the product stands on */
.pkg-kit::before {
  content: ""; position: absolute; left: var(--sp-3); bottom: 8px; width: 92px; height: 14px;
  border-radius: 50%; background: radial-gradient(closest-side, rgba(15, 23, 42, .22), transparent);
  pointer-events: none;
}
.pkg-kit img {
  /* one fixed slot for every render, whatever its shape, so all badges match */
  position: relative; flex: none; width: 96px; height: 92px; object-fit: contain; object-position: center bottom;
  filter: drop-shadow(0 10px 12px rgba(14, 165, 233, .28)) drop-shadow(0 2px 3px rgba(15, 23, 42, .18));
  transition: transform 450ms var(--ease-out), filter 450ms var(--ease);
}
.pkg-kit-meta { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.pkg-kit-k {
  font-family: var(--font-mono); font-size: .68rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: #0284C7;
}
[data-theme="dark"] .pkg-kit-k { color: #7DD3FC; }
.pkg-kit-v { font-weight: 600; font-size: .95rem; color: var(--text); line-height: 1.3; }
.pkg-kit-mods { display: inline-flex; align-items: center; gap: .5rem; font-size: .8rem; color: var(--text-muted); white-space: nowrap; }
.pkg-kit-pips { display: inline-flex; gap: 3px; }
.pkg-kit-pips i { width: 7px; height: 12px; border-radius: 2px; background: var(--border-strong); }
.pkg-kit-pips i.on { background: linear-gradient(#34D399, #10B981); box-shadow: 0 0 6px rgba(16, 185, 129, .55); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .pkg:hover .pkg-kit img {
    transform: translateY(-4px) scale(1.06) rotate(-1.5deg);
    filter: drop-shadow(0 16px 16px rgba(14, 165, 233, .38)) drop-shadow(0 2px 3px rgba(15, 23, 42, .18));
  }
}

/* ---------- 39. PACKAGE CARD 3-TIER COLLAGE (packages page) ----------
   Left column of a wide package card: 1) main roof photo, 2) a tilted install
   photo overlapping it, 3) the transparent 3D product in front. Everything is
   absolutely placed inside a column that stretches to the spec side's height,
   so the card is exactly as tall as before. Reuse on any card by swapping the
   three srcs. */
.pkg-stack-split { align-items: stretch; }
.pkg-stack {
  position: relative; isolation: isolate; overflow: hidden; min-height: 460px;
  background:
    radial-gradient(70% 45% at 70% 88%, rgba(56, 189, 248, .22), transparent 70%),
    linear-gradient(170deg, #EEF6FD 0%, #E3EEF8 100%);
}
[data-theme="dark"] .pkg-stack {
  background:
    radial-gradient(70% 45% at 70% 88%, rgba(56, 189, 248, .18), transparent 70%),
    linear-gradient(170deg, #0F1B2B 0%, #0A1320 100%);
}
.pkg-stack figure { position: absolute; margin: 0; }
.pkg-stack-main, .pkg-stack-install {
  overflow: hidden; border-radius: 18px;
  box-shadow: 0 22px 44px -18px rgba(15, 23, 42, .45), 0 2px 6px rgba(15, 23, 42, .12);
}
.pkg-stack-main img, .pkg-stack-install img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* tier 1: the roof, across the top */
.pkg-stack-main { z-index: 1; top: 5%; left: 6%; right: 6%; height: 50%; }
/* tier 2: install photo, tilted, overlapping the roof's bottom-left corner */
.pkg-stack-install {
  z-index: 2; left: 6%; top: 44%; width: 38%; height: 46%;
  border: 5px solid #fff; transform: rotate(-4deg);
}
[data-theme="dark"] .pkg-stack-install { border-color: #1A2638; }
.pkg-stack-install img { object-position: 35% 40%; }
/* tier 3: the hardware, standing in front on a soft floor shadow */
.pkg-stack-product { z-index: 3; right: 4%; bottom: 4%; width: 54%; height: 50%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.pkg-stack-product::before {
  content: ""; position: absolute; bottom: 10%; left: 12%; right: 12%; height: 14%;
  border-radius: 50%; background: radial-gradient(closest-side, rgba(15, 23, 42, .32), transparent);
  z-index: -1;
}
.pkg-stack-product img {
  width: 100%; height: 100%; min-height: 0; object-fit: contain; object-position: center bottom;
  filter: drop-shadow(0 18px 22px rgba(14, 165, 233, .3)) drop-shadow(0 3px 4px rgba(15, 23, 42, .2));
}

/* captions: small glass tags on the photos, a chip under the product */
.pkg-stack-tag {
  position: absolute; left: 10px; bottom: 10px;
  padding: .3em .7em; border-radius: 99px;
  font-size: .72rem; font-weight: 600; letter-spacing: .02em; color: #fff;
  background: rgba(10, 18, 30, .55); border: 1px solid rgba(255, 255, 255, .25);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.pkg-stack-chip {
  position: absolute; left: 50%; bottom: -2%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; white-space: nowrap;
  padding: .4em .9em; border-radius: 12px; line-height: 1.25;
  background: rgba(255, 255, 255, .8); border: 1px solid #BAE6FD;
  box-shadow: 0 8px 20px -8px rgba(14, 165, 233, .45);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.pkg-stack-chip b { font-size: .85rem; color: #0F172A; }
.pkg-stack-chip span { font-size: .72rem; color: #0369A1; font-weight: 500; }
[data-theme="dark"] .pkg-stack-chip { background: rgba(15, 27, 43, .8); border-color: rgba(125, 211, 252, .35); }
[data-theme="dark"] .pkg-stack-chip b { color: #E9EFF8; }
[data-theme="dark"] .pkg-stack-chip span { color: #7DD3FC; }

/* hover: the layers fan out slightly, each by its own amount */
.pkg-stack figure { transition: transform 500ms var(--ease-out), box-shadow 500ms var(--ease); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .pkg-res:hover .pkg-stack-main    { transform: translateY(-4px) scale(1.02); }
  .pkg-res:hover .pkg-stack-install { transform: translate(-4px, -6px) rotate(-6deg) scale(1.03); }
  .pkg-res:hover .pkg-stack-product { transform: translateY(-8px) scale(1.04); }
}

/* stacked (phone/tablet) layout: the column no longer has a spec side to
   match, so give the collage its own shape */
@media (max-width: 800px) {
  .pkg-stack { min-height: 0; aspect-ratio: 1 / 1; }
}
/* the install photo covers the roof's bottom-left, so its tag sits top-left */
.pkg-stack-main .pkg-stack-tag { top: 10px; bottom: auto; }
/* reversed cards (collage on the right): same order rules as .split-media */
.split--reverse > .pkg-stack { order: 2; }
@media (max-width: 800px) { .split--reverse > .pkg-stack { order: 0; } }

/* ---------- 40. BATTERY STORAGE: CLARITY + HOVER (home) ----------
   The render sits in a light card with no overlay; a light contrast and colour
   lift gives it the crisp, bright look of the EV card. On hover the card lifts
   with a sky edge glow, and the render zooms *together with* its flow overlay
   (the whole .ef-frame scales) so the animated lines stay on the cables.
   #batteries lifts specificity above the .js .reveal--left.is-in reset. */
#batteries .ef {
  border: 1px solid #E2E8F0;
  transition: opacity 700ms var(--ease-out), transform 400ms var(--ease-out),
              box-shadow 400ms var(--ease), border-color 400ms var(--ease);
}
/* origin sits left of centre and a little high: the read-outs hug the right
   and bottom edges, so a small zoom from here keeps them inside the card */
#batteries .ef .ef-frame { transition: transform 600ms var(--ease-out); transform-origin: 40% 42%; }
#batteries .split-media.ef .ef-frame img { filter: contrast(1.06) brightness(1.04) saturate(1.12); }
/* soft light sweep, faded in on hover so badges and read-outs pop */
#batteries .ef-frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(80% 60% at 20% 0%, rgba(255, 255, 255, .55), transparent 60%),
    linear-gradient(180deg, rgba(224, 242, 254, .25), transparent 45%);
  mix-blend-mode: soft-light; opacity: 0; transition: opacity 500ms var(--ease);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  #batteries .ef.is-in:hover {
    transform: translateY(-6px);
    border-color: rgba(125, 211, 252, .6);
    box-shadow: 0 0 0 1px rgba(125, 211, 252, .35), 0 30px 60px -22px rgba(14, 165, 233, .38), var(--shadow-lg);
  }
  #batteries .ef:hover .ef-frame { transform: scale(1.02); }
  /* feature rows: icon lifts with a sky ring, text stays put */
  #batteries .feature .feature-icon { transition: transform 300ms var(--ease-out), box-shadow 300ms var(--ease), border-color 300ms var(--ease); }
  #batteries .feature:hover .feature-icon {
    transform: translateY(-3px);
    border-color: #7DD3FC;
    box-shadow: 0 0 0 4px rgba(56, 189, 248, .14), 0 10px 18px -8px rgba(14, 165, 233, .5);
  }
}
@media (hover: hover) { #batteries .ef:hover .ef-frame::after { opacity: 1; } }

/* ---------- 41. PRICE BUTTONS (home + packages, residential) ----------
   The price lives on the card's main button: label + arrow on the left,
   struck-through was-price and the special price on the right, with a
   "Save" tab sitting on the button's top edge. */
.pkg-pbtn {
  position: relative; justify-content: space-between; gap: var(--sp-4);
  min-height: 64px; padding-block: .7rem; margin-top: .7rem; text-align: left;
}
.pkg-pbtn-l { display: inline-flex; align-items: center; gap: .45rem; }
.pkg-pbtn-l svg { transition: transform .2s ease; }
.pkg-pbtn:hover .pkg-pbtn-l svg { transform: translateX(3px); }
.pkg-pbtn-p {
  display: grid; grid-template-columns: auto auto; column-gap: .5rem; align-items: baseline;
  justify-items: end; line-height: 1.05; font-variant-numeric: tabular-nums;
}
.pkg-pbtn-p s {
  font-family: var(--font-mono); font-size: .8rem; font-weight: 500; opacity: .6;
  text-decoration-thickness: 1.5px; text-decoration-color: rgba(244, 63, 94, .85);
}
.pkg-pbtn-p b { font-family: var(--font-mono); font-size: 1.35rem; font-weight: 700; letter-spacing: -0.03em; }
.pkg-pbtn-p small {
  grid-column: 1 / -1; margin-top: .2rem; font-size: .62rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; opacity: .7;
}
.pkg-pbtn-save {
  position: absolute; top: 0; right: 14px; transform: translateY(-55%);
  padding: .2em .65em; border-radius: 999px; white-space: nowrap;
  font-size: .64rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: #fff; background: linear-gradient(90deg, #10B981, #0EA5E9);
  box-shadow: 0 4px 12px rgba(16, 185, 129, .35);
  animation: pkg-save-pulse 2.6s ease-in-out infinite;
}
@keyframes pkg-save-pulse { 0%, 100% { box-shadow: 0 4px 12px rgba(16, 185, 129, .35); } 50% { box-shadow: 0 4px 12px rgba(16, 185, 129, .35), 0 0 0 5px rgba(16, 185, 129, .15); } }
@media (prefers-reduced-motion: reduce) { .pkg-pbtn-save { animation: none; } .pkg-pbtn-l svg { transition: none; } }
.card-foot.btn-row .pkg-pbtn { flex: 1 1 260px; }
/* price-only button (home): price leads, arrow chip on the right */
.pkg-pbtn--solo .pkg-pbtn-p { order: -1; justify-items: start; }
.pkg-pbtn--solo .pkg-pbtn-l { width: 36px; height: 36px; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, .22); }
/* text-only button (commercial cards): same blue/gold look, label centred */
.pkg-pbtn--plain { justify-content: center; white-space: normal; text-align: center; }
.pkg-pbtn--plain.pkg-pbtn:is(:hover, :focus-visible, :active) .pkg-pbtn-l { background: none; }
/* highlight: every price button is the same filled blue CTA with a light
   sweep; it turns gold on hover, keyboard focus and press */
.pkg-pbtn, .pkg-pbtn:hover {
  --pb-a: #0B5FA5; --pb-b: #0EA5E9; --pb-glow: rgba(14, 116, 200, .38);
  color: #fff; border-color: transparent;
  background:
    linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .32) 50%, transparent 65%) 0 0 / 250% 100% no-repeat,
    linear-gradient(135deg, var(--pb-a), var(--pb-b));
  box-shadow: 0 10px 26px var(--pb-glow), inset 0 1px 0 rgba(255, 255, 255, .25);
  animation: pkg-pbtn-sweep 4.5s ease-in-out infinite;
}
.pkg-pbtn { transition: transform .2s ease, box-shadow .2s ease; }
.pkg-pbtn:hover { transform: translateY(-2px); box-shadow: 0 16px 34px var(--pb-glow), inset 0 1px 0 rgba(255, 255, 255, .25); }
.pkg-pbtn:focus-visible { outline: 3px solid var(--pb-b); outline-offset: 3px; }
.pkg-pbtn-p b { text-shadow: 0 1px 8px rgba(0, 0, 0, .18); }
.pkg-pbtn-p s { opacity: .8; text-decoration-color: #FDA4AF; }
.pkg-pbtn:is(:hover, :focus-visible, :active) {
  --pb-a: #F5B82E; --pb-b: #E8A317; --pb-glow: rgba(232, 163, 23, .42); color: #1F1400;
}
.pkg-pbtn:is(:hover, :focus-visible, :active) .pkg-pbtn-p b { text-shadow: none; }
.pkg-pbtn:is(:hover, :focus-visible, :active) .pkg-pbtn-p s { text-decoration-color: #BE123C; }
.pkg-pbtn:is(:hover, :focus-visible, :active) .pkg-pbtn-l { background: rgba(31, 20, 0, .12); }
@keyframes pkg-pbtn-sweep { 0%, 55% { background-position: 150% 0, 0 0; } 100% { background-position: -150% 0, 0 0; } }
@media (prefers-reduced-motion: reduce) { .pkg-pbtn, .pkg-pbtn:hover { animation: none; transform: none; } }
/* compare table price cell */
table.compare .price-cell { white-space: nowrap; }
table.compare .price-cell .price { font-weight: 700; color: var(--primary); }
table.compare .price-was { color: var(--text-faint); text-decoration: line-through; font-size: .85em; margin-left: .3em; }
table.compare .price-note { display: block; font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }

/* ---------- 42. REBATES & FINANCE (rebates.html) ----------
   Policy overview grows to four cards in a 2 × 2 grid; the business layer
   gets a green edge. Then the commercial finance section. */
.rb-policy--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); }
.rb-policy-tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.rb-badge-biz { background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); }
.rb-new {
  font-family: var(--font-mono); font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-muted); border: 1px dashed var(--border-strong); border-radius: 999px; padding: .2em .7em;
}
.rb-policy-biz { border-color: color-mix(in srgb, var(--success) 55%, var(--border)); }
.rb-policy-biz .rb-states th { color: var(--success); }

/* incentive stack */
.fin-stack {
  display: grid; gap: var(--sp-4); margin-bottom: var(--sp-8);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.fin-stack-item {
  position: relative; display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-5); border-radius: var(--radius-lg); overflow: hidden;
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
}
.fin-stack-item::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px;
  background: linear-gradient(90deg, var(--primary), #0EA5E9);
}
.fin-stack-item:nth-child(2)::before { background: linear-gradient(90deg, var(--success), #0EA5E9); }
.fin-stack-item:nth-child(3)::before { background: linear-gradient(90deg, var(--accent-bright), #F5B82E); }
.fin-stack-k { font-family: var(--font-mono); font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.fin-stack-v { font-family: var(--font-mono); font-size: clamp(2rem, 4vw, 2.6rem); font-weight: 700; line-height: 1; letter-spacing: -0.04em; color: var(--primary); }
.fin-stack-item:nth-child(2) .fin-stack-v { color: var(--success); }
.fin-stack-item:nth-child(3) .fin-stack-v { color: var(--accent); }
.fin-stack-item p { font-size: .92rem; color: var(--text-muted); }

/* four ways to pay */
.fin-sub { margin-bottom: var(--sp-5); }
.fin-opt { position: relative; gap: var(--sp-3); }
.fin-opt-n { font-family: var(--font-mono); font-size: 1.6rem; font-weight: 600; line-height: 1; color: var(--accent); letter-spacing: -0.04em; }
.fin-opt-t { font-size: var(--step-1); }
.fin-opt--key { border-color: var(--accent-bright); box-shadow: var(--shadow-glow); }
.fin-best { margin-top: auto; padding-top: var(--sp-3); border-top: 1px solid var(--border); font-size: .9rem; color: var(--text-muted); }
.fin-best strong { display: block; font-family: var(--font-mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--primary); margin-bottom: .15rem; }

.fin-table { margin-top: var(--sp-6); }
.fin-table table.compare { min-width: 720px; }

/* worked examples + process */
.fin-case { margin-top: var(--sp-8); align-items: center; }
.fin-example { gap: var(--sp-3); }
.fin-example-t th { white-space: normal; color: var(--text); font-family: var(--font-body); font-weight: 600; width: 44%; }
.fin-example-t td { color: var(--text-muted); }
.fin-num { display: block; font-family: var(--font-mono); font-size: 1.3rem; font-weight: 700; color: var(--success); letter-spacing: -0.03em; }
.fin-foot { font-size: .78rem; }
.fin-steps { counter-reset: fs; list-style: none; padding: 0; display: grid; gap: var(--sp-4); }
.fin-steps li { counter-increment: fs; position: relative; padding-left: 3rem; color: var(--text-muted); }
.fin-steps li::before {
  content: counter(fs, decimal-leading-zero); position: absolute; left: 0; top: .05rem;
  font-family: var(--font-mono); font-weight: 600; font-size: 1.05rem; color: var(--accent);
}
.fin-steps strong { color: var(--text); }
.fin-disclaimer { margin-top: var(--sp-7); font-size: .8rem; max-width: 80ch; }
/* "Rebates & Finance" is the longest nav label; keep every label on one line */
.nav-link { white-space: nowrap; }
.fin-options { grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); }

/* ---------- 43. ABOUT: story leader line ---------- */
.story-lead { display: flex; align-items: center; gap: var(--sp-3); padding-top: var(--sp-4); border-top: 1px solid var(--border); }
.story-lead-mark {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; flex: none;
  font-family: var(--font-mono); font-weight: 700; font-size: .95rem; letter-spacing: .02em;
  color: #fff; background: linear-gradient(135deg, var(--primary), #0EA5E9); box-shadow: 0 6px 16px rgba(14, 116, 200, .3);
}
.story-lead-text { display: flex; flex-direction: column; line-height: 1.3; }
.story-lead-text strong { color: var(--text); }
.story-lead-text span { font-size: .88rem; color: var(--text-muted); }

/* ---------- 44. ABOUT: main product cards ---------- */
.prod-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); margin-top: var(--sp-6); }
.prod-card { display: flex; flex-direction: column; color: inherit; text-decoration: none; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.prod-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--primary); }
.prod-media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
.prod-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.prod-card:hover .prod-media img { transform: scale(1.04); }
.prod-tag {
  position: absolute; left: 12px; top: 12px; padding: .3em .75em; border-radius: 999px;
  font-family: var(--font-mono); font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: #fff; background: rgba(6, 12, 22, .72); backdrop-filter: blur(6px);
}
.prod-card .card-body { display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; }
.prod-title { font-size: var(--step-1); }
.prod-desc { font-size: .92rem; }
.prod-specs { list-style: none; padding: 0; margin-top: auto; padding-top: var(--sp-3); display: flex; flex-wrap: wrap; gap: .4rem; }
.prod-specs li {
  font-family: var(--font-mono); font-size: .72rem; padding: .25em .6em; border-radius: 6px;
  color: var(--primary); background: var(--primary-soft); border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent);
}
@media (prefers-reduced-motion: reduce) { .prod-card, .prod-card:hover, .prod-card:hover .prod-media img { transform: none; } }

/* ---------- 45. QUOTE POP-UP (built by main.js, section 14) ---------- */
.promo {
  padding: 0; border: 0; background: transparent; color: var(--text);
  width: min(980px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px);
  overflow: visible; margin: auto; inset: 0;
}
.promo-card:focus { outline: none; }
.promo::backdrop { background: rgba(4, 10, 20, .62); backdrop-filter: blur(4px); }
.promo[open] { animation: promo-in .32s var(--ease-out) both; }
.promo[open]::backdrop { animation: promo-fade .32s ease both; }
.promo.is-closing { animation: promo-out .18s ease both; }
@keyframes promo-in { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes promo-out { to { opacity: 0; transform: translateY(10px) scale(.98); } }
@keyframes promo-fade { from { opacity: 0; } }
.promo-lock, .promo-lock body { overflow: hidden; }

.promo-card {
  position: relative; display: grid; grid-template-columns: 44% 1fr;
  background: var(--surface); border-radius: var(--radius-xl); overflow: hidden;
  box-shadow: 0 40px 90px rgba(0, 0, 0, .45); max-height: calc(100dvh - 32px);
}
.promo-close {
  position: absolute; top: 14px; right: 14px; z-index: 3;
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  color: #1B1201; background: linear-gradient(135deg, var(--accent-bright), #D89406);
  box-shadow: 0 6px 16px rgba(232, 163, 23, .35); cursor: pointer; transition: transform .2s ease;
}
.promo-close:hover { transform: rotate(90deg); }
.promo-close:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }

.promo-media { position: relative; min-height: 100%; background: #0B0C1E; }
.promo-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 100%; }
/* dark wash behind the headline so it never sits on busy panels */
.promo-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 9, 34, .92) 0%, rgba(14, 11, 42, .72) 34%, rgba(14, 11, 42, 0) 58%);
}
.promo-media-copy {
  position: relative; z-index: 1; padding: clamp(24px, 4vw, 40px) clamp(22px, 3.4vw, 36px);
  color: #fff; text-align: center;
}
.promo-kicker {
  display: inline-flex; align-items: center; gap: .6em;
  font-family: var(--font-mono); font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: #E9D5FF;
}
.promo-kicker::before, .promo-kicker::after { content: ""; width: 22px; height: 1px; background: currentColor; opacity: .7; }
.promo-headline {
  margin-top: .6rem; font-family: var(--font-display); font-weight: 800; line-height: 1.02;
  font-size: clamp(1.8rem, 3.2vw, 2.4rem); letter-spacing: -0.03em; text-wrap: balance;
  text-shadow: 0 4px 24px rgba(0, 0, 0, .45);
}
.promo-headline span { display: block; background: linear-gradient(90deg, #FFD978, var(--accent-bright)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.promo-sub { margin: .8rem auto 0; max-width: 30ch; font-size: .9rem; color: rgba(255, 255, 255, .8); }

.promo-body { padding: clamp(28px, 4vw, 48px) clamp(22px, 4vw, 44px); overflow-y: auto; }
.promo-eyebrow {
  display: inline-flex; align-items: center; gap: .55em; padding-right: 40px;
  font-family: var(--font-mono); font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--accent);
}
.promo-eyebrow::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--accent-bright), transparent); }
.promo-title {
  margin-top: .45rem; padding-right: 40px;
  font-family: var(--font-display); font-weight: 800; line-height: 1.08; letter-spacing: -0.03em;
  font-size: clamp(2rem, 3.4vw, 2.7rem); color: var(--text); text-wrap: balance;
}
/* "free quote": brand blue on a bold gold marker stroke that draws in on open */
.promo-hl { position: relative; z-index: 0; white-space: nowrap; color: var(--primary); }
.promo-hl::after {
  content: ""; position: absolute; z-index: -1; left: -.12em; right: -.12em; bottom: .04em; height: .46em;
  border-radius: .18em; transform: skewX(-10deg); transform-origin: left center;
  background: linear-gradient(90deg, #FFD978, var(--accent-bright));
  box-shadow: 0 6px 16px rgba(232, 163, 23, .3);
}
.promo[open] .promo-hl::after { animation: promo-mark .7s .35s var(--ease-out) both; }
@keyframes promo-mark { from { transform: skewX(-10deg) scaleX(0); } to { transform: skewX(-10deg) scaleX(1); } }
[data-theme="dark"] .promo-hl::after { bottom: -.1em; height: .2em; }
@media (prefers-reduced-motion: reduce) { .promo[open] .promo-hl::after { animation: none; } }
.promo-lead { margin-top: .75rem; color: var(--text-muted); }
.promo-form { display: grid; gap: var(--sp-4); margin-top: var(--sp-5); }
.promo-row { display: grid; gap: var(--sp-4); grid-template-columns: 1fr 1fr; }
.promo-form input[type="text"], .promo-form input[type="email"], .promo-form input[type="tel"], .promo-form select { min-height: 46px; }
.promo-consent { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: .6rem; font-weight: 400; font-size: .86rem; color: var(--text-muted); cursor: pointer; }
.promo-consent input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--primary); flex: none; }
.promo-consent span:not(.error-msg) { flex: 1; }
.promo-consent .error-msg { flex-basis: 100%; }
.promo-note { text-align: center; font-size: .78rem; color: var(--text-faint); }
.promo-status:empty { display: none; }
.promo-status { font-size: .88rem; color: var(--success); text-align: center; }
.promo-status.is-error { color: var(--danger); }

@media (max-width: 760px) {
  .promo-card { grid-template-columns: 1fr; overflow-y: auto; }
  .promo-media { min-height: 0; }
  .promo-media img { object-position: 60% 58%; }
  .promo-media::after { background: linear-gradient(180deg, rgba(10, 9, 34, .9), rgba(14, 11, 42, .78)); }
  .promo-media-copy { padding: 26px 20px 30px; }
  .promo-headline { font-size: 1.7rem; }
  .promo-body { overflow: visible; padding: 24px 20px 26px; }
}
@media (max-width: 340px) { .promo-row { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .promo[open], .promo[open]::backdrop, .promo.is-closing { animation: none; } .promo-close:hover { transform: none; } }

/* ---------- 46. GOOGLE REVIEWS (home) ---------- */
.gr-layout { display: grid; grid-template-columns: 300px 1fr; gap: var(--sp-6); align-items: start; }
.gr-summary {
  position: sticky; top: calc(var(--nav-h) + 20px);
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-6) var(--sp-5); border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-md);
}
.gr-brand { display: flex; align-items: center; gap: .6rem; font-weight: 700; font-size: 1.05rem; }
.gr-brand .gr-g { width: 26px; height: 26px; }
.gr-score { display: flex; align-items: center; gap: .7rem; margin-top: var(--sp-2); }
.gr-score-v { font-family: var(--font-mono); font-size: 3rem; font-weight: 700; line-height: 1; letter-spacing: -0.04em; }
.gr-score .gr-stars svg { width: 22px; height: 22px; }
.gr-score-l { font-size: .9rem; color: var(--text-muted); }
.gr-biz { font-weight: 600; font-size: .92rem; padding-top: var(--sp-3); border-top: 1px solid var(--border); }
.gr-biz span { font-weight: 400; color: var(--text-muted); }
.gr-actions { display: grid; gap: var(--sp-2); margin-top: var(--sp-2); }

.gr-stars { display: inline-flex; gap: 2px; }
.gr-stars svg { width: 16px; height: 16px; fill: #FBBC04; }
.gr-g { width: 20px; height: 20px; flex: none; }

.gr-rail { min-width: 0; }
.gr-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * var(--sp-4)) / 3);
  gap: var(--sp-4); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 4px 4px var(--sp-4); margin: -4px; scrollbar-width: none; align-items: stretch;
  scroll-padding-inline: 4px;
}
.gr-track::-webkit-scrollbar { display: none; }
.gr-track:focus-visible { outline: 3px solid var(--primary); outline-offset: 4px; border-radius: var(--radius); }
.gr-card {
  scroll-snap-align: start; display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-5); border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.gr-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--border-strong); }
.gr-card-head { display: flex; align-items: center; gap: var(--sp-3); }
.gr-avatar {
  width: 42px; height: 42px; border-radius: 50%; flex: none; display: grid; place-items: center;
  font-weight: 600; font-size: 1.15rem; color: #fff; background: var(--av);
}
.gr-who { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3; }
.gr-who strong { font-size: .98rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gr-meta { font-size: .78rem; color: var(--text-faint); }
.gr-rate { display: flex; align-items: center; gap: .6rem; }
.gr-when { font-size: .8rem; color: var(--text-faint); }
.gr-text { font-size: .94rem; line-height: 1.6; color: var(--text-muted); }
.gr-card:not(.is-open) .gr-text { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.gr-more { align-self: flex-start; margin-top: auto; font-weight: 600; font-size: .88rem; color: var(--primary); cursor: pointer; background: none; padding: 0; }
.gr-more:hover { text-decoration: underline; }

.gr-nav { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-3); }
.gr-arrow {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); transition: all .2s ease;
}
.gr-arrow:hover:not(:disabled) { background: var(--primary); color: #fff; border-color: var(--primary); }
.gr-arrow:disabled { opacity: .35; cursor: default; }
.gr-src { margin-left: auto; font-size: .78rem; color: var(--text-faint); }

@media (max-width: 1100px) { .gr-track { grid-auto-columns: calc((100% - var(--sp-4)) / 2); } }
@media (max-width: 860px) {
  .gr-layout { grid-template-columns: 1fr; }
  .gr-summary { position: static; }
}
@media (max-width: 560px) { .gr-track { grid-auto-columns: 86%; } .gr-src { display: none; } }
@media (prefers-reduced-motion: reduce) { .gr-track { scroll-behavior: auto; } .gr-card, .gr-card:hover { transform: none; } }
.gr-count { margin-left: var(--sp-2); font-family: var(--font-mono); font-size: .85rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.gr-score-l strong { color: var(--text); }

/* ---------- 47. COMPACT FLOATING BUTTONS (overrides 22b) ----------
   The Quote + WhatsApp pills collapse to round icon buttons: a big green
   WhatsApp bubble in the corner and a smaller gold quote button above it.
   The label slides out beside the icon on hover / keyboard focus only. */
.contact-widget { right: 24px; bottom: 24px; gap: 14px; align-items: center; }
.contact-widget__dismiss { display: none; }
.contact-widget__pill {
  position: relative; min-width: 0; padding: 0; gap: 0;
  background: none; border: 0; box-shadow: none; border-radius: 50%;
}
.contact-widget__pill:hover { transform: none; box-shadow: none; }
.contact-widget__icon {
  width: 48px; height: 48px;
  box-shadow: 0 10px 24px rgba(10, 22, 38, .22);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.contact-widget__icon--quote { background: linear-gradient(135deg, var(--accent-bright), #D89406); color: #1B1201; }
.contact-widget__pill--whatsapp .contact-widget__icon { width: 60px; height: 60px; box-shadow: 0 12px 28px rgba(37, 211, 102, .42); }
.contact-widget__pill--whatsapp .contact-widget__icon svg { width: 30px; height: 30px; }
.contact-widget__pill:hover .contact-widget__icon,
.contact-widget__pill:focus-visible .contact-widget__icon { transform: scale(1.1); }
.contact-widget__pill:focus-visible { outline: none; }
.contact-widget__pill:focus-visible .contact-widget__icon { outline: 3px solid var(--primary); outline-offset: 3px; }

/* label chip, hidden until hover / focus */
.contact-widget__text {
  position: absolute; right: calc(100% + 12px); top: 50%;
  padding: 8px 14px; border-radius: 12px; white-space: nowrap;
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-lg);
  opacity: 0; transform: translate(8px, -50%); pointer-events: none;
  transition: opacity .2s ease, transform .25s var(--ease-out);
}
.contact-widget__pill:hover .contact-widget__text,
.contact-widget__pill:focus-visible .contact-widget__text { opacity: 1; transform: translate(0, -50%); }

@media (max-width: 760px) {
  .contact-widget { right: 16px; bottom: calc(76px + 12px); gap: 12px; }
  .contact-widget__pill { padding: 0; }
  .contact-widget__icon { width: 44px; height: 44px; }
  .contact-widget__pill--whatsapp .contact-widget__icon { width: 54px; height: 54px; }
}
@media (prefers-reduced-motion: reduce) { .contact-widget__icon, .contact-widget__text { transition: none; } .contact-widget__pill:hover .contact-widget__icon { transform: none; } }

/* ---------- 48. COMPACT QUOTE POP-UP (overrides 45) ---------- */
.promo { width: min(760px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); }
.promo-card { grid-template-columns: 40% 1fr; border-radius: 24px; max-height: calc(100dvh - 48px); }
.promo-close { top: 12px; right: 12px; width: 34px; height: 34px; }
.promo-media-copy { padding: 26px 20px; }
.promo-kicker { font-size: .64rem; }
.promo-headline { font-size: clamp(1.45rem, 2.4vw, 1.85rem); }
.promo-sub { font-size: .8rem; }
.promo-body { padding: 26px 30px 22px; }
.promo-eyebrow { font-size: .64rem; }
.promo-title { font-size: clamp(1.55rem, 2.5vw, 2rem); margin-top: .3rem; }
.promo-lead { margin-top: .5rem; font-size: .88rem; }
.promo-form { gap: 12px; margin-top: 16px; }
.promo-row { gap: 12px; }
.promo-form .input-group { gap: 5px; }
.promo-form .input-group label { font-size: .82rem; }
.promo-form input[type="text"], .promo-form input[type="email"], .promo-form input[type="tel"], .promo-form select {
  min-height: 40px; padding: 8px 12px; font-size: 15px;
}
.promo-form select { padding-right: 38px; background-position: right 12px center; }
.promo-consent { font-size: .8rem; }
.promo-submit.btn--lg { min-height: 48px; padding-block: 10px; font-size: 1rem; }
.promo-note { font-size: .72rem; }

@media (max-width: 760px) {
  .promo { width: min(420px, calc(100vw - 24px)); }
  .promo-card { grid-template-columns: 1fr; }
  .promo-media-copy { padding: 20px 18px 22px; }
  .promo-headline { font-size: 1.4rem; }
  .promo-body { padding: 20px 18px 20px; }
  .promo-form input[type="text"], .promo-form input[type="email"], .promo-form input[type="tel"], .promo-form select { font-size: 16px; } /* no iOS zoom */
  .promo-media-copy { padding: 16px 48px 16px 18px; text-align: left; }
  .promo-kicker::before { display: none; }
  .promo-headline { font-size: 1.2rem; margin-top: .3rem; }
  .promo-sub { display: none; }
  .promo-body { padding: 16px 18px 16px; }
  .promo-lead { display: none; }
  .promo-form { gap: 10px; margin-top: 12px; }
  .promo-form input[type="text"], .promo-form input[type="email"], .promo-form input[type="tel"], .promo-form select { min-height: 42px; }
  .promo-note { display: none; }
}

/* ---------- 49. HERO FINANCE ROW → Rebates & Finance ----------
   The label links to the partners section; each badge deep-links to its card. */
.finance-link {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  color: inherit; text-decoration: none; border-radius: 8px;
}
.finance-link-label { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: color .3s ease, text-decoration-color .3s ease; }
.finance-link:hover .finance-link-label, .finance-link:focus-visible .finance-link-label { color: #fff; text-decoration-color: #4FA6F2; }
.finance-link:focus-visible { outline: 2px solid #4FA6F2; outline-offset: 4px; }
.finance-badge { display: inline-flex; border-radius: 6px; transition: transform .3s var(--ease-out), box-shadow .3s ease; }
.finance-badge img { outline: 1.5px solid transparent; transition: outline-color .3s ease; }
.finance-badge:hover, .finance-badge:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(11, 95, 165, .45), 0 0 0 4px rgba(79, 166, 242, .22);
}
.finance-badge:hover img, .finance-badge:focus-visible img { outline-color: #4FA6F2; }
.finance-badge:focus-visible { outline: none; }
@media (prefers-reduced-motion: reduce) { .finance-badge:hover, .finance-badge:focus-visible { transform: none; } }

/* ---------- 50. COMMERCIAL CARDS: "Finance available" spec link ---------- */
.spec-fin {
  display: inline-flex; align-items: center; gap: .4em; white-space: nowrap;
  padding: .2em .6em; border-radius: 999px; text-decoration: none;
  color: var(--success); background: color-mix(in srgb, var(--success) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--success) 30%, transparent);
  transition: color .25s ease, background-color .25s ease, border-color .25s ease, transform .25s var(--ease-out);
}
.spec-fin:hover, .spec-fin:focus-visible {
  color: var(--accent); background: var(--accent-soft); border-color: var(--accent-bright); transform: translateY(-1px);
}
.spec-fin:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 2px; }

/* ---------- 51. FINANCE PARTNERS (rebates.html #finance-partners) ----------
   Always a dark navy band (dark tokens redefined locally, so it reads the same
   in light and dark mode). Cards: blue accents by default, gold when hovered,
   clicked, or opened from a #brighte / #plenti / #smartease link. */
.fp {
  --text: #E9EFF8; --text-muted: #9AACC5; --text-faint: #8492A9;
  --surface: #0D1724; --surface-2: #142235; --border: #1D2C43; --border-strong: #2B3F5C;
  --primary: #4FA6F2; --primary-soft: rgba(79, 166, 242, .14); --accent: #F5B435; --accent-bright: #FFC64D; --success: #3DBE79;
  color: var(--text);
  background:
    radial-gradient(60% 50% at 15% 0%, rgba(79, 166, 242, .14), transparent 70%),
    radial-gradient(50% 45% at 90% 100%, rgba(245, 180, 53, .08), transparent 70%),
    linear-gradient(180deg, #08101D, #070C14);
}
.fp .h-md { color: var(--text); }
.fp .lead { color: var(--text-muted); }
.fp-grid { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); margin-top: var(--sp-6); align-items: stretch; }
.fp-card {
  position: relative; display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-6) var(--sp-5); border-radius: var(--radius-lg); cursor: pointer;
  background: rgba(13, 23, 36, .6); backdrop-filter: blur(6px);
  border: 1px solid rgba(79, 166, 242, .22);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
  scroll-margin-top: 110px; outline: none;
  transition: border-color .35s ease, box-shadow .35s ease, transform .35s var(--ease-out);
}
.fp-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.fp-logo { display: inline-flex; align-items: center; height: 44px; padding: 8px 14px; border-radius: 10px; background: #fff; }
.fp-logo img { height: 100%; width: auto; }
.fp-tag {
  font-family: var(--font-mono); font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  padding: .3em .75em; border-radius: 999px; color: var(--primary); background: var(--primary-soft);
  border: 1px solid rgba(79, 166, 242, .3); transition: color .35s ease, background-color .35s ease, border-color .35s ease;
}
.fp-name { font-size: var(--step-2); margin-top: var(--sp-2); }
.fp-focus { color: var(--text-muted); font-size: .95rem; }
.fp-ticks { margin-top: var(--sp-1); }
.fp-cta { margin-top: auto; }
.fp-disclaimer { margin-top: var(--sp-6); font-size: .78rem; text-align: center; max-width: 80ch; margin-inline: auto; }

/* gold: hover, keyboard focus, clicked (.is-active) or hash target */
.fp-card:hover, .fp-card:focus-within, .fp-card.is-active, .fp-card:target {
  border-color: #FBBF24; transform: translateY(-4px);
  box-shadow: 0 0 0 2px rgba(251, 191, 36, .5), 0 22px 50px rgba(245, 158, 11, .2);
}
.fp-card:is(:hover, :focus-within, .is-active, :target) .fp-tag { color: #FBBF24; background: rgba(251, 191, 36, .14); border-color: rgba(251, 191, 36, .45); }
.fp-card:is(:hover, :focus-within, .is-active, :target) .fp-cta { border-color: #FBBF24; color: #FBBF24; background: rgba(251, 191, 36, .08); }
.fp-card.is-arrived { animation: fp-pulse 1.6s ease-out 2; }
@keyframes fp-pulse {
  0%   { box-shadow: 0 0 0 2px rgba(251, 191, 36, .5), 0 0 0 0 rgba(251, 191, 36, .45), 0 22px 50px rgba(245, 158, 11, .2); }
  100% { box-shadow: 0 0 0 2px rgba(251, 191, 36, .5), 0 0 0 22px rgba(251, 191, 36, 0), 0 22px 50px rgba(245, 158, 11, .2); }
}
@media (prefers-reduced-motion: reduce) { .fp-card, .fp-card:hover, .fp-card.is-active, .fp-card:target { transform: none; } .fp-card.is-arrived { animation: none; } }

/* ---------- 52. ABOUT: founder spotlight (single leader) ----------
   Dark navy band in both themes (dark tokens set locally), one centred card:
   photo left, role / bio / tags right; stacks on phones. */
.founder-band {
  --text: #E9EFF8; --text-muted: #9AACC5; --text-faint: #8492A9;
  --surface: #0D1724; --surface-2: #142235; --border: #1D2C43; --border-strong: #2B3F5C;
  --primary: #4FA6F2; --primary-hover: #6FB8F7; --primary-soft: rgba(79, 166, 242, .14); --on-primary: #04121F;
  --accent: #F5B435; --accent-bright: #FFC64D; --accent-soft: rgba(245, 180, 53, .15);
  color: var(--text);
  background:
    radial-gradient(55% 60% at 10% 10%, rgba(79, 166, 242, .14), transparent 70%),
    radial-gradient(45% 50% at 95% 95%, rgba(245, 180, 53, .08), transparent 70%),
    linear-gradient(180deg, #08101D, #070C14);
}
.founder-band .h-md { color: var(--text); }
.founder {
  max-width: 980px; margin: var(--sp-6) auto 0;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); overflow: hidden;
  border-radius: var(--radius-xl); background: rgba(13, 23, 36, .62); backdrop-filter: blur(8px);
  border: 1px solid rgba(79, 166, 242, .22); box-shadow: 0 30px 70px rgba(0, 0, 0, .45);
  transition: transform .4s var(--ease-out), border-color .4s ease, box-shadow .4s ease;
}
.founder:hover { transform: translateY(-4px); border-color: rgba(79, 166, 242, .45); box-shadow: 0 36px 80px rgba(0, 0, 0, .5), 0 0 0 1px rgba(79, 166, 242, .2); }
.founder-photo { position: relative; margin: 0; min-height: 100%; }
.founder-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 42% 40%; transition: transform .8s var(--ease-out); }
.founder:hover .founder-photo img { transform: scale(1.03); }
.founder-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 60%, rgba(13, 23, 36, .55)); }
.founder-since {
  position: absolute; left: 16px; bottom: 16px; z-index: 1; display: flex; flex-direction: column; line-height: 1;
  padding: 10px 14px; border-radius: 12px; background: rgba(6, 12, 22, .72); backdrop-filter: blur(6px);
  font-family: var(--font-mono); font-size: 1.4rem; font-weight: 700; color: #fff;
}
.founder-since span { font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-bright); margin-bottom: 4px; }
.founder-body { display: flex; flex-direction: column; gap: var(--sp-3); padding: clamp(24px, 4vw, 44px); }
.founder-role { font-family: var(--font-mono); font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-bright); }
.founder-name { font-size: clamp(1.8rem, 3vw, 2.4rem); letter-spacing: -0.03em; }
.founder-bio { color: var(--text-muted); }
.founder-tags { display: flex; flex-wrap: wrap; gap: .45rem; list-style: none; padding: 0; }
.founder-tags li {
  font-family: var(--font-mono); font-size: .72rem; padding: .3em .7em; border-radius: 999px;
  color: var(--primary); background: var(--primary-soft); border: 1px solid rgba(79, 166, 242, .3);
}
.founder-quote { margin: var(--sp-2) 0 0; padding: var(--sp-3) var(--sp-4); border-left: 3px solid var(--accent-bright); background: rgba(255, 255, 255, .03); border-radius: 0 10px 10px 0; }
.founder-quote p { font-style: italic; color: var(--text); font-size: .95rem; }
.founder-quote cite { display: block; margin-top: .3rem; font-style: normal; font-size: .78rem; color: var(--text-faint); }
.founder .btn-row { margin-top: var(--sp-2); }
@media (max-width: 760px) {
  .founder { grid-template-columns: 1fr; }
  .founder-photo { aspect-ratio: 4 / 3; min-height: 0; }
  .founder-photo::after { background: linear-gradient(180deg, transparent 60%, rgba(13, 23, 36, .55)); }
}
@media (prefers-reduced-motion: reduce) { .founder, .founder:hover, .founder:hover .founder-photo img { transform: none; } }

/* ---------- 53. PROJECTS: rain + electric flow on the app screens ----------
   Both layers are transform/opacity/dash animations only (no layout, no JS),
   so they stay smooth on phones. The SVG shares the image's pixel viewBox and
   the same contain/top fit, so the line stays on the roof at any width. */
.phone-fx { position: relative; }
.fx-rain, .fx-flow { position: absolute; inset: 0; pointer-events: none; }
.fx-rain {
  overflow: hidden; opacity: .6; z-index: 1;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 50%, transparent 66%);
          mask-image: linear-gradient(180deg, #000 0%, #000 50%, transparent 66%);
}
.fx-rain::before, .fx-rain::after {
  content: ""; position: absolute; left: -10%; right: -10%; top: -100%; height: 200%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='140'%3E%3Cg stroke='%23CFE3FF' stroke-linecap='round'%3E%3Cpath d='M12 8l-3 16' stroke-width='1.2' opacity='.8'/%3E%3Cpath d='M47 40l-3 18' stroke-width='1' opacity='.55'/%3E%3Cpath d='M78 18l-2 12' stroke-width='1.2' opacity='.7'/%3E%3Cpath d='M30 92l-3 16' stroke-width='1' opacity='.6'/%3E%3Cpath d='M66 104l-3 20' stroke-width='1.3' opacity='.8'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 90px 140px; animation: fx-rain .9s linear infinite;
}
.fx-rain::after { background-size: 130px 200px; opacity: .6; animation-duration: 1.4s; left: -20%; }
@keyframes fx-rain { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-8%, 50%, 0); } }

.fx-flow { z-index: 2; width: 100%; height: 100%; overflow: visible; }
.fx-flow path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.fx-flow-base { stroke: rgba(96, 165, 250, .35); stroke-width: 3; }
.fx-flow-run {
  stroke-width: 6; stroke-dasharray: 18 82; animation: fx-flow 2.4s linear infinite;
  filter: drop-shadow(0 0 4px #60A5FA) drop-shadow(0 0 10px rgba(59, 130, 246, .8));
}
.fx-flow path:nth-of-type(4) { animation-delay: -1.2s; }
@keyframes fx-flow { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
.phone-fx:hover .fx-flow-run { animation-duration: 1.4s; }
@media (prefers-reduced-motion: reduce) {
  .fx-rain::before, .fx-rain::after, .fx-flow-run { animation: none; }
  .fx-flow-run { stroke-dasharray: none; opacity: .7; }
}

/* ---------- 54. HOME: monitoring phone — rain, flow, 3D tilt, glow, shine ----------
   JS (main.js 13d) writes --rx / --ry from the pointer; everything else is CSS
   transforms and opacity, so it stays on the compositor. Touch screens get the
   plain lift only. */
.phone-tilt { perspective: 1000px; max-width: 300px; margin-inline: auto; position: relative; }
.phone-tilt::before {                       /* ambient backlight */
  content: ""; position: absolute; inset: 8% -6% 4%; z-index: 0; border-radius: 40px;
  background: radial-gradient(60% 55% at 50% 50%, rgba(11, 95, 165, .55), rgba(79, 166, 242, .18) 55%, transparent 75%);
  filter: blur(28px); opacity: 0; transform: scale(.9);
  transition: opacity .5s ease, transform .5s var(--ease-out);
}
.phone-tilt .phone-frame--home, .js .phone-tilt .phone-frame--home.reveal.is-in {
  position: relative; z-index: 1; transform-style: preserve-3d; will-change: transform;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0)) scale(var(--sc, 1));
  transition: transform .5s var(--ease-out), box-shadow .5s ease;
}
.phone-tilt.is-tilting .phone-frame--home { transition: transform .12s linear, box-shadow .5s ease; }
.phone-tilt:hover { --lift: -8px; --sc: 1.04; }
.phone-tilt:hover::before { opacity: 1; transform: scale(1.04); }
.phone-tilt:hover .phone-frame--home { box-shadow: 0 25px 60px -15px rgba(11, 95, 165, .55), 0 0 0 1px rgba(79, 166, 242, .35); }
/* glass shine sweeping across the screen on hover */
.phone-shine {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; border-radius: inherit;
}
.phone-shine::before {
  content: ""; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .22) 45%, rgba(255, 255, 255, .05) 60%, transparent);
  transform: translateX(0) skewX(-12deg); opacity: 0;
}
.phone-tilt:hover .phone-shine::before { animation: phone-shine 1.1s var(--ease-out) forwards; }
@keyframes phone-shine { 0% { opacity: 0; transform: translateX(0) skewX(-12deg); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateX(420%) skewX(-12deg); } }
@media (hover: none) { .phone-tilt:hover { --lift: 0; --sc: 1; } }
@media (prefers-reduced-motion: reduce) {
  .phone-frame--home { transform: none !important; transition: none; }
  .phone-tilt:hover .phone-shine::before { animation: none; }
}

/* ---------- 55. HOME PAGE ON PHONES AND TABLETS ----------
   Everything here sits inside a max-width query and is scoped to the home
   page (body.home), so laptops and desktops render exactly as before.
     ≤1023px  package cards become a swipe row (tablets: 2 + a peek)
     ≤760px   one docked contact bar replaces the three floating buttons
     ≤640px   phones: 1 card + a peek, full-width hero buttons, 2-column
              photo grid, compact timeline for "How it works"            */
.m-bar, .snap-dots { display: none; }

@media (max-width: 1023px) {
  /* -- Swipe rows: the six package cards were ~6 screens of scrolling on a
        phone, and a lonely third card on tablets. -- */
  .home .snap-row {
    display: flex; gap: var(--sp-4);
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    /* run edge to edge while the first card still lines up with the text */
    margin-inline: calc(-1 * clamp(1rem, 4vw, 2.5rem));
    margin-bottom: 0 !important;                       /* beats the inline spacing; the dots carry it */
    padding: 1.1rem clamp(1rem, 4vw, 2.5rem) 1.6rem;   /* room for the "Most popular" badge and shadows */
    scroll-padding-inline: clamp(1rem, 4vw, 2.5rem);
  }
  .home .snap-row::-webkit-scrollbar { display: none; }
  .home .snap-row > * {
    flex: 0 0 calc((100% - var(--sp-4)) / 2.15);       /* two cards and a peek of the third */
    scroll-snap-align: start;
  }
  /* Cards off to the side are already "in view": skip the scroll-in fade. */
  .home .snap-row > .reveal { opacity: 1; transform: none; }

  .home .snap-dots {
    display: flex; justify-content: center; gap: .15rem;
    margin: -.4rem 0 var(--sp-7);
  }
  .home .snap-dots:last-child { margin-bottom: 0; }
  .home .snap-dots button {
    width: 28px; height: 28px; padding: 0; display: grid; place-items: center;
    border-radius: 999px; cursor: pointer;
  }
  .home .snap-dots button::before {
    content: ""; width: 8px; height: 8px; border-radius: 999px;
    background: var(--border-strong); transition: width .25s var(--ease-out), background-color .25s;
  }
  .home .snap-dots button[aria-current="true"]::before { width: 22px; background: var(--primary); }
  .home .snap-dots button:focus-visible { outline-offset: 0; }

  /* -- Hero: the live-output card no longer stretches across the whole tablet. -- */
  .home .readout { max-width: 34rem; }
}

@media (max-width: 760px) {
  /* -- One docked bar: Call · WhatsApp · Free quote. Thumb-reachable, and it
        no longer covers the content the way three floating bubbles did. -- */
  .home .fab, .home .contact-widget { display: none !important; }
  body.home { padding-bottom: calc(4.4rem + env(safe-area-inset-bottom)); }
  .home .m-bar {
    display: grid; grid-template-columns: auto auto 1fr; gap: .5rem;   /* the gold quote button takes the rest */
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
    padding: .55rem max(.75rem, calc(50% - 17rem)) calc(.55rem + env(safe-area-inset-bottom));   /* centred on wide phones */
    background: color-mix(in srgb, var(--surface) 86%, transparent);
    -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
    border-top: 1px solid var(--border);
    box-shadow: 0 -10px 30px rgba(10, 22, 38, .10);
  }
  .home .m-bar__btn {
    display: flex; align-items: center; justify-content: center; gap: .45rem;
    min-height: 3rem; padding: 0 .95rem; border-radius: 999px;
    font-weight: 600; font-size: .92rem; letter-spacing: -0.01em; white-space: nowrap;
    color: var(--text); background: var(--surface-2); border: 1px solid var(--border);
    -webkit-tap-highlight-color: transparent;
    transition: transform .15s var(--ease), background-color .2s;
  }
  .home .m-bar__btn svg { flex: none; }   /* never squeeze the icons */
  .home .m-bar__btn:active { transform: scale(.97); }
  .home .m-bar__btn--wa svg { color: #25D366; }
  .home .m-bar__btn--quote {
    color: #1B1201; border-color: transparent;
    background: linear-gradient(135deg, var(--accent-bright), #D89406);
    box-shadow: 0 6px 16px rgba(232, 163, 23, .32);
  }
}

@media (max-width: 360px) {
  .home .m-bar { gap: .4rem; padding-inline: .5rem; }
  .home .m-bar__btn { padding: 0 .7rem; gap: .35rem; font-size: .84rem; }
}

@media (max-width: 640px) {
  .home .snap-row > * { flex-basis: 86%; }            /* one card and a peek of the next */

  /* -- Hero: full-width, thumb-sized buttons. -- */
  .home .hero .btn-row { flex-direction: column; align-items: stretch; gap: var(--sp-3); }
  .home .hero .btn-row .btn { width: 100%; }

  /* -- Recent work: a 2-column photo grid instead of six full-width rows. -- */
  .home .gallery { gap: .625rem; }
  .home .gallery figure { flex: 1 1 calc(50% - .3125rem); min-width: 0; height: auto; aspect-ratio: 4 / 5; }
  .home .gallery figcaption { padding: 1.4rem .6rem .5rem; font-size: .68rem; line-height: 1.3; }

  /* -- How it works: a compact vertical timeline. -- */
  .home .steps { gap: 0; }
  .home .step { padding: .3rem 0 var(--sp-6) 3.4rem; }
  .home .step:last-child { padding-bottom: 0; }
  .home .step::before {
    top: 0; left: 0; width: 2.3rem; height: 2.3rem; display: grid; place-items: center;
    font-size: .9rem; letter-spacing: 0; border-radius: 50%;
    background: var(--surface); border: 1.5px solid var(--accent-bright); box-shadow: 0 0 0 4px var(--accent-soft);
  }
  .home .step::after {
    top: 2.75rem; bottom: .4rem; left: calc(1.15rem - 1px); right: auto; width: 2px; height: auto;
    background: linear-gradient(var(--accent-bright), var(--border-strong) 55%, transparent);
  }
  .home .step:last-child::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .home .snap-dots button::before, .home .m-bar__btn { transition: none; }
}