/* ==========================================================================
   Brightline Solar - design system
   Direction: energy telemetry. Cool graphite ground, one solar-flare accent,
   technical numerals. Dark is the default theme; light is a token swap.
   No build step: plain CSS custom properties, one stylesheet.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Fonts

   Self-hosted latin subsets, so first paint never waits on a third-party
   origin. Space Grotesk and IBM Plex Sans are variable: one file each covers
   every weight the site uses.

   The "Fallback" faces are Arial reshaped with size-adjust and ascent and
   descent overrides measured from the real fonts' metrics. Text set in the
   fallback occupies the same box as the real font, so the swap on load moves
   nothing and costs no layout shift.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/space-grotesk-var.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-var.woff2") format("woff2");
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk Fallback";
  src: local("Arial"), local("ArialMT"), local("Helvetica");
  size-adjust: 108.05%;
  ascent-override: 91.07%;
  descent-override: 27.02%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "IBM Plex Sans Fallback";
  src: local("Arial"), local("ArialMT"), local("Helvetica");
  size-adjust: 100.99%;
  ascent-override: 101.5%;
  descent-override: 27.23%;
  line-gap-override: 0%;
}

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  color-scheme: dark;

  /* Ground and surfaces */
  --bg:            #0a0e13;
  --bg-alt:        #0d1219;
  --surface:       #131b24;
  --surface-hi:    #19222e;
  --line:          #232d3a;
  --line-strong:   #33414f;
  --control-border: #5d6e80;  /* form-field edges: 3:1 against every ground (WCAG 1.4.11) */

  /* Text */
  --fg:            #eaf0f6;
  --fg-muted:      #9dabba;
  --fg-faint:      #7a8998;

  /* Accent: one hue, three roles */
  --accent:        #ff7a1a;   /* fills, marks, active states */
  --accent-text:   #ff9440;   /* accent used as text on dark ground */
  --accent-hi:     #ffb03a;   /* light core inside gradients and glows only */
  --focus:         #ff7a1a;   /* keyboard focus ring: 3:1 or better against the ground */
  --on-accent:     #14100b;

  /* Feedback */
  --danger:        #ff6b6b;
  --on-danger:     #14100b;

  /* Materials */
  --glow: radial-gradient(60% 60% at 50% 40%,
            rgb(255 176 58 / 0.30) 0%,
            rgb(255 122 26 / 0.14) 38%,
            rgb(255 122 26 / 0) 72%);
  --scrim: linear-gradient(180deg,
            rgb(10 14 19 / 0.35) 0%,
            rgb(10 14 19 / 0.72) 48%,
            rgb(10 14 19 / 0.96) 100%);
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.40);
  --shadow-md: 0 12px 32px -12px rgb(0 0 0 / 0.65);
  --shadow-lg: 0 32px 64px -24px rgb(0 0 0 / 0.75);

  /* Shape: one radius system, tight and technical */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;

  /* Type */
  --font-display: "Space Grotesk", "Space Grotesk Fallback", Arial, sans-serif;
  --font-body: "IBM Plex Sans", "IBM Plex Sans Fallback", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-display: clamp(2.1875rem, 1.35rem + 2.9vw, 3.25rem);
  --fs-h1:      clamp(2.125rem, 1.3rem + 2.9vw, 3.5rem);
  --fs-h2:      clamp(1.75rem, 1.2rem + 1.9vw, 2.625rem);
  --fs-h3:      clamp(1.1875rem, 1.05rem + 0.5vw, 1.5rem);
  --fs-lead:    clamp(1.0625rem, 1.01rem + 0.28vw, 1.1875rem);
  --fs-body:    1rem;
  --fs-sm:      0.9375rem;
  --fs-xs:      0.8125rem;
  --fs-stat:    clamp(2.25rem, 1.5rem + 2.4vw, 3.25rem);

  /* Space */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 2.5rem;
  --s-8: 3rem;
  --s-9: 4rem;
  --s-10: 5rem;
  --section-y: clamp(4rem, 2.5rem + 5.2vw, 7rem);
  --gutter: clamp(1.125rem, 0.5rem + 2.4vw, 2.5rem);
  --container: 1280px;
  --measure: 62ch;

  /* Motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 140ms;
  --t-base: 240ms;
  --t-slow: 520ms;

  --header-h: 68px;
  --z-header: 100;
  --z-overlay: 200;
  --z-grain: 300;
}

:root[data-theme="light"] {
  color-scheme: light;

  --bg:            #f2f5f8;
  --bg-alt:        #e8edf2;
  --surface:       #ffffff;
  --surface-hi:    #f7f9fb;
  --line:          #d9e1e9;
  --line-strong:   #b9c6d3;
  --control-border: #75859a;

  --fg:            #0b1118;
  --fg-muted:      #4f5f6e;
  --fg-faint:      #5d6b78;

  --accent:        #ff7a1a;
  --accent-text:   #b34400;   /* darkened so accent text clears AA on light ground */
  --accent-hi:     #ff9c2e;
  --focus:         #b34400;   /* the orange fill is only 2.4:1 on this ground; this is 5:1 */
  --on-accent:     #14100b;

  --danger:        #b32020;
  --on-danger:     #ffffff;

  --glow: radial-gradient(60% 60% at 50% 40%,
            rgb(255 156 46 / 0.24) 0%,
            rgb(255 122 26 / 0.10) 40%,
            rgb(255 122 26 / 0) 72%);
  --scrim: linear-gradient(180deg,
            rgb(10 14 19 / 0.20) 0%,
            rgb(10 14 19 / 0.55) 55%,
            rgb(10 14 19 / 0.88) 100%);
  --shadow-sm: 0 1px 2px rgb(15 30 45 / 0.08);
  --shadow-md: 0 12px 28px -14px rgb(15 30 45 / 0.28);
  --shadow-lg: 0 30px 60px -28px rgb(15 30 45 / 0.34);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.022em;
  margin: 0 0 var(--s-4);
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.22; letter-spacing: -0.012em; }

p { margin: 0 0 var(--s-4); max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

a { color: var(--accent-text); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent); }

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

ul, ol { margin: 0 0 var(--s-4); padding-left: 1.15rem; }
li { margin-bottom: var(--s-2); }

strong { font-weight: 600; color: var(--fg); }

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

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

.skip-link {
  position: absolute;
  left: var(--s-4);
  top: -100px;
  z-index: calc(var(--z-header) + 10);
  background: var(--accent);
  color: var(--on-accent);
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-md);
  font-weight: 600;
  text-decoration: none;
  transition: top var(--t-base) var(--ease);
}
.skip-link:focus { top: calc(var(--header-h) + var(--s-2)); color: var(--on-accent); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow { max-width: 920px; }

.section { padding-block: var(--section-y); position: relative; }
.section--alt { background: var(--bg-alt); }
.section--tight { padding-block: clamp(3rem, 2rem + 3.4vw, 4.75rem); }

.section-head { margin-bottom: clamp(2rem, 1.2rem + 2.6vw, 3.5rem); }
.section-head h2 { margin-bottom: var(--s-4); }
.section-head p { color: var(--fg-muted); font-size: var(--fs-lead); }

.lead { font-size: var(--fs-lead); color: var(--fg-muted); line-height: 1.55; }

.rule {
  height: 1px;
  background: var(--line);
  border: 0;
  margin: 0;
}

.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 48px;
  padding: 0 var(--s-6);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease),
              box-shadow var(--t-base) var(--ease);
}

.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 6px 22px -10px rgb(255 122 26 / 0.85);
}
.btn--primary:hover { background: var(--accent-hi); color: var(--on-accent); box-shadow: 0 10px 30px -10px rgb(255 122 26 / 0.95); }

.btn--ghost {
  background: transparent;
  color: var(--fg);
  border-color: var(--line-strong);
}
.btn--ghost:hover { border-color: var(--fg-muted); background: rgb(255 255 255 / 0.04); color: var(--fg); }
:root[data-theme="light"] .btn--ghost:hover { background: rgb(11 17 24 / 0.04); }

.btn--sm { min-height: 42px; padding: 0 var(--s-5); font-size: var(--fs-sm); }
.btn--block { width: 100%; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
}

/* Text link with a moving underline. Used for in-page navigation cues. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--accent-text);
  text-decoration: none;
}
.link-arrow svg { transition: transform var(--t-base) var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }
/* --------------------------------------------------------------------------
   5. Header
   -------------------------------------------------------------------------- */

.header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgb(10 14 19 / 0.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: height var(--t-base) var(--ease),
              background-color var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease);
}
:root[data-theme="light"] .header { background: rgb(242 245 248 / 0.78); }

.header.is-stuck {
  height: 58px;
  background: rgb(10 14 19 / 0.94);
  border-bottom-color: var(--line);
}
:root[data-theme="light"] .header.is-stuck { background: rgb(242 245 248 / 0.96); }

@supports not (backdrop-filter: blur(4px)) {
  .header { background: var(--bg); }
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  width: 100%;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  text-decoration: none;
  color: var(--fg);
  flex-shrink: 0;
}
.brand__mark { width: 30px; height: 30px; flex-shrink: 0; }
.brand__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.025em;
}
.brand:hover { color: var(--fg); }

.nav { display: flex; align-items: center; gap: var(--s-1); }

.nav__link {
  position: relative;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--fg-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease);
}
.nav__link:hover { color: var(--fg); }
.nav__link[aria-current="page"] { color: var(--fg); }
.nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: var(--s-3);
  right: var(--s-3);
  bottom: 2px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}

.header__actions { display: flex; align-items: center; gap: var(--s-2); }

/* At 320px the logo, call, theme and menu buttons need about 20px more than the
   screen has, which pushed the menu button past the edge (WCAG 1.4.10 reflow). */
@media (max-width: 359px) {
  .header__inner { gap: var(--s-2); }
  .brand { gap: var(--s-2); }
  .brand__name { font-size: 1rem; }
  .header__actions { gap: var(--s-1); }
}

/* Tap to call, phones only. Wider screens get the number in the top bar. */
.header__call {
  display: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  background: var(--accent);
  color: var(--on-accent);
}
.header__call:hover { background: var(--accent-hi); color: var(--on-accent); }

@media (max-width: 899px) {
  .header__call { display: inline-grid; }
}

.theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: transparent;
  color: var(--fg-muted);
  cursor: pointer;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.theme-toggle:hover { color: var(--fg); border-color: var(--line-strong); }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="light"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: none; }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--fg);
  cursor: pointer;
}

/* Six destinations plus the call to action need about 1,240px on one line.
   Below that the nav folds into the menu rather than wrapping. */
@media (max-width: 1239px) {
  .nav-toggle { display: inline-flex; }
  .header__nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: block;
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
    padding: var(--s-4) var(--gutter) var(--s-6);
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t-base) var(--ease),
                transform var(--t-base) var(--ease),
                visibility var(--t-base);
  }
  .header__nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
  .nav { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__link {
    padding: var(--s-4) var(--s-2);
    font-size: 1.0625rem;
    border-bottom: 1px solid var(--line);
  }
  .nav__link[aria-current="page"]::after { left: var(--s-2); right: auto; width: 18px; bottom: 10px; }
  .menu-extras { display: grid; gap: var(--s-3); margin-top: var(--s-5); }
}

@media (max-width: 1239px) and (min-width: 900px) {
  /* The top bar already carries the rating and the phone at these widths. */
  .menu-extras__rating,
  .menu-extras .btn--ghost { display: none; }
}

@media (max-width: 599px) {
  .header__cta-desktop { display: none; }
}

@media (min-width: 1240px) {
  .menu-extras { display: none; }
  .nav__link--home { display: none; }
}

.menu-extras__rating {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) 0;
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  text-decoration: none;
}
.menu-extras__rating b { color: var(--fg); }

/* --- Top bar ---------------------------------------------------------------
   Rating and a tap-to-call number above the header, because local buyers
   phone. Scrolls away; the sticky header below it stays. */

.topbar {
  background: var(--bg-alt);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-xs);
  color: var(--fg-muted);
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  min-height: 36px;
}
.topbar__rating {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--fg-muted);
  text-decoration: none;
}
.topbar__rating b { color: var(--fg); font-weight: 600; }
.topbar__rating:hover { color: var(--fg); }
.topbar__stars { display: inline-flex; gap: 1px; color: var(--accent); }
.topbar__right { display: flex; align-items: center; gap: var(--s-5); }
.topbar__phone {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--fg);
  font-weight: 600;
  font-size: var(--fs-sm);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.topbar__phone svg { color: var(--accent-text); }
.topbar__phone:hover { color: var(--accent-text); }

@media (max-width: 1099px) { .topbar__hours { display: none; } }
@media (max-width: 899px)  { .topbar { display: none; } }

/* --------------------------------------------------------------------------
   6. Hero

   One scene carries the whole hero: a panel on a pole in the right third of a
   16:9 frame, the left two thirds kept quiet for the headline.

   A still poster paints first and is the page's largest contentful paint. The
   clip loads after the page has, fades in over the poster once it can show a
   frame, and from then on either follows the cursor (desktop) or sways on a
   loop (phones).

   Phones present the scene as its own card under the copy, uncropped. Desktop
   lifts the same element out of flow into a full-bleed backdrop.
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  padding-block: clamp(2rem, 1.2rem + 3.4vw, 4rem);
  overflow: hidden;
  isolation: isolate;
  /* Hardcoded rather than tokenised: the hero is dark footage under a dark
     scrim in both themes, and its copy is white. A light ground here would
     leave white text on near-white during the moment before the clip paints. */
  background: #0a0e13;
}

.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-7);
  align-items: center;
  width: 100%;
}

.hero__copy { max-width: 44rem; }

.hero h1 {
  font-size: var(--fs-display);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.02;
  margin-bottom: var(--s-5);
  color: #f6fafd;
}

.hero__accent { color: var(--accent-hi); }

.hero__sub {
  font-size: var(--fs-lead);
  color: #c3cfda;
  max-width: 36rem;
  margin-bottom: var(--s-6);
  line-height: 1.5;
}

/* The hero sits on dark footage in either theme, so its contents keep their
   on-dark values while the rest of the page follows the token swap. */
:root[data-theme="light"] .hero h1 { color: #f6fafd; }
:root[data-theme="light"] .hero__sub { color: #ccd7e1; }

.hero .btn--ghost {
  color: #eaf0f6;
  border-color: rgb(255 255 255 / 0.30);
  background: rgb(10 14 19 / 0.32);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hero .btn--ghost:hover {
  color: #ffffff;
  border-color: rgb(255 255 255 / 0.62);
  background: rgb(10 14 19 / 0.52);
}

/* --- The clip --------------------------------------------------------------
   On phones this is a card in the flow: the whole 16:9 frame is visible and
   nothing is cropped away. */

.hero__media {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: #0d1219;
}

/* The poster stays underneath for good: during loading, under reduced motion,
   on Save-Data, and if the clip can never be decoded. */
.hero__poster,
.hero__poster img,
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero__video {
  opacity: 0;
  transition: opacity 600ms var(--ease);
}
.hero__media.is-live .hero__video { opacity: 1; }
.hero__media.is-static .hero__video { display: none; }

.hero__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 90% at 62% 45%,
                rgb(10 14 19 / 0) 38%,
                rgb(10 14 19 / 0.55) 100%);
}

/* A single honest number: the panel's actual yaw, whether the clip is looping
   or the cursor is driving it. */
.tracker__readout {
  position: absolute;
  left: var(--s-4);
  bottom: var(--s-4);
  padding: var(--s-2) var(--s-4);
  background: rgb(10 14 19 / 0.74);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgb(255 255 255 / 0.12);
  border-radius: var(--r-md);
  white-space: nowrap;
  text-align: left;
}

.tracker__value {
  display: block;
  font-family: var(--font-mono);
  font-size: 1.0625rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--accent-hi);
  line-height: 1.2;
}
.tracker__label {
  display: block;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #93a1b0;
}

/* Pause / play for the moving panel (WCAG 2.2.2). Always on the dark footage, so
   it keeps its own on-dark values in both themes, and its focus ring sits on a
   dark halo so it reads over any frame of the clip. */
.hero {
  --focus: var(--accent);
}
.hero__toggle {
  position: absolute;
  right: var(--s-4);
  bottom: var(--s-4);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: 0 var(--s-4) 0 var(--s-3);
  background: rgb(10 14 19 / 0.78);
  color: #eaf0f6;
  border: 1px solid rgb(255 255 255 / 0.42);
  border-radius: var(--r-md);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.hero__toggle[hidden] { display: none; }
.hero__toggle:hover { background: rgb(10 14 19 / 0.92); border-color: rgb(255 255 255 / 0.75); }
.hero__toggle:focus-visible { outline-offset: 3px; box-shadow: 0 0 0 7px rgb(10 14 19 / 0.9); }
.hero__toggle-icon { flex: none; }
.hero__toggle[data-state="playing"] .hero__toggle-icon--play,
.hero__toggle[data-state="paused"] .hero__toggle-icon--pause { display: none; }

@media (min-width: 900px) {
  .hero {
    min-height: min(760px, calc(100dvh - var(--header-h)));
    display: flex;
    align-items: center;
    padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  }

  /* The copy stays in the left column; the clip leaves the flow entirely and
     becomes the backdrop, so the right column is simply empty space it shows
     through. */
  .hero__grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: clamp(2rem, 1rem + 3.4vw, 4rem);
  }

  .hero__media {
    position: absolute;
    inset: 0;
    z-index: -2;
    aspect-ratio: auto;
    border: 0;
    border-radius: 0;
  }

  .hero__scrim {
    background:
      linear-gradient(90deg,
        rgb(10 14 19 / 0.92) 0%,
        rgb(10 14 19 / 0.78) 34%,
        rgb(10 14 19 / 0.28) 62%,
        rgb(10 14 19 / 0.10) 100%),
      linear-gradient(180deg,
        rgb(10 14 19 / 0.55) 0%,
        rgb(10 14 19 / 0.10) 34%,
        rgb(10 14 19 / 0.62) 100%);
  }

  /* On the grass below the panel, clear of the pole. */
  .tracker__readout {
    left: 54%;
    bottom: clamp(2rem, 0.5rem + 4vw, 4.5rem);
  }

  /* Top right, lined up with the page's right edge, so it is on the first
     screen whatever the window height (the hero can run past the fold). The
     backdrop sits under the copy grid, so the grid lets clicks through and only
     the copy and the button take them. */
  .hero__toggle {
    right: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
    top: var(--s-5);
    bottom: auto;
  }
  .hero__grid, .hero__media { pointer-events: none; }
  .hero__copy, .hero__toggle { pointer-events: auto; }
}

@media (prefers-reduced-motion: reduce) {
  /* The clip is paused by script; this keeps the poster steady if it is not. */
  .hero__video { animation: none; }
}

/* --------------------------------------------------------------------------
   7. Trust strip
   -------------------------------------------------------------------------- */

.trust {
  border-block: 1px solid var(--line);
  background: var(--bg-alt);
}

.trust__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.trust__item {
  padding: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem) var(--s-5);
  border-left: 1px solid var(--line);
}
.trust__item:first-child { border-left: 0; padding-left: 0; }

.trust__value {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-stat);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--fg);
  margin-bottom: var(--s-3);
}
.trust__value .unit { color: var(--accent-text); }

.trust__label {
  display: block;
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  line-height: 1.4;
  max-width: 18ch;
}

@media (max-width: 899px) {
  .trust__grid { grid-template-columns: repeat(2, 1fr); }
  .trust__item { padding: var(--s-5) var(--s-4); border-top: 1px solid var(--line); }
  .trust__item:nth-child(-n+2) { border-top: 0; }
  .trust__item:nth-child(odd) { border-left: 0; padding-left: 0; }
}

/* --------------------------------------------------------------------------
   8. Calculator
   -------------------------------------------------------------------------- */

.calc {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(1.75rem, 1rem + 3vw, 3.5rem);
  align-items: start;
}

@media (max-width: 899px) {
  .calc { grid-template-columns: 1fr; }
}

.calc__panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  box-shadow: var(--shadow-md);
}

.calc__label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--fg);
  margin-bottom: var(--s-2);
}

.calc__help {
  font-size: var(--fs-xs);
  color: var(--fg-faint);
  margin-bottom: var(--s-5);
}

.calc__bill {
  font-family: var(--font-mono);
  font-size: clamp(2.5rem, 1.8rem + 2.4vw, 3.5rem);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--fg);
  margin-bottom: var(--s-5);
}
.calc__bill small { font-size: 0.4em; color: var(--fg-faint); font-weight: 400; letter-spacing: 0; }

/* Range input, styled in both engines. */
.calc__range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 44px;
  background: transparent;
  cursor: pointer;
  margin: 0 0 var(--s-2);
}
.calc__range::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent) var(--fill, 40%), var(--line-strong) var(--fill, 40%), var(--line-strong) 100%);
}
.calc__range::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: var(--line-strong);
}
.calc__range::-moz-range-progress {
  height: 6px;
  border-radius: 999px;
  background: var(--accent);
}
.calc__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px; height: 26px;
  margin-top: -10px;
  border-radius: 50%;
  background: var(--fg);
  border: 4px solid var(--accent);
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-fast) var(--ease);
}
.calc__range::-moz-range-thumb {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--fg);
  border: 4px solid var(--accent);
}
.calc__range:active::-webkit-slider-thumb { transform: scale(1.12); }
/* The halo on the thumb alone was a 35% orange smear; keep it, and add a real ring. */
.calc__range:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-md); }
.calc__range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgb(255 122 26 / 0.35); }
.calc__range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px rgb(255 122 26 / 0.35); }

.calc__scale {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--fg-faint);
}

.calc__out {
  display: grid;
  gap: var(--s-4);
}

/* The lead number: what the system is worth over its warranty, in bills not
   paid. The smaller figures and the payback line underneath keep it honest. */
.calc__hero {
  padding: var(--s-5) var(--s-5) var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.calc__hero-value {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(2.5rem, 1.6rem + 3.2vw, 3.75rem);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.045em;
  line-height: 1;
  color: var(--accent-text);
  margin-bottom: var(--s-3);
}
.calc__hero-label { display: block; font-size: var(--fs-sm); color: var(--fg-muted); }

.calc__note b { font-weight: 600; color: var(--fg); }

.calc__figures {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.calc__fig {
  background: var(--surface);
  padding: var(--s-5);
}
.calc__fig-value {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: var(--fg);
  margin-bottom: var(--s-2);
}
.calc__fig-label {
  display: block;
  font-size: var(--fs-xs);
  color: var(--fg-muted);
  line-height: 1.35;
}

@media (max-width: 599px) {
  .calc__figures { grid-template-columns: 1fr; }
}

/* Two bars that carry the actual comparison, not a decorative progress track. */
.calc__compare {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  background: var(--surface);
}
.calc__bar-row { margin-bottom: var(--s-4); }
.calc__bar-row:last-child { margin-bottom: 0; }
.calc__bar-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-4);
  margin-bottom: var(--s-2);
  font-size: var(--fs-sm);
  color: var(--fg-muted);
}
.calc__bar-head b { font-family: var(--font-mono); font-weight: 500; color: var(--fg); font-variant-numeric: tabular-nums; }
.calc__bar {
  height: 10px;
  border-radius: 999px;
  transform-origin: left center;
  transform: scaleX(var(--w, 1));
  transition: transform var(--t-slow) var(--ease);
}
.calc__bar--now { background: var(--line-strong); }
.calc__bar--after { background: linear-gradient(90deg, var(--accent), var(--accent-hi)); }

.calc__note {
  font-size: var(--fs-xs);
  color: var(--fg-faint);
  line-height: 1.5;
  max-width: none;
}

/* --------------------------------------------------------------------------
   9. Step ladder (home, three steps)
   -------------------------------------------------------------------------- */

.ladder { display: grid; gap: 0; position: relative; }

.ladder__item {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: var(--s-5);
  padding-block: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
  border-top: 1px solid var(--line);
  align-items: start;
}
.ladder__item:last-child { border-bottom: 1px solid var(--line); }

/* Offset each rung so the block reads as a climb, not a table. */
.ladder__item:nth-child(2) { padding-left: clamp(0rem, -2rem + 6vw, 3.5rem); }
.ladder__item:nth-child(3) { padding-left: clamp(0rem, -4rem + 12vw, 7rem); }

.ladder__n {
  font-family: var(--font-mono);
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  font-weight: 500;
  color: var(--accent-text);
  line-height: 1;
  letter-spacing: -0.04em;
}

.ladder__body h3 { margin-bottom: var(--s-2); }
.ladder__body p { color: var(--fg-muted); margin: 0; }

@media (max-width: 699px) {
  .ladder__item { grid-template-columns: 3rem minmax(0, 1fr); gap: var(--s-4); }
  .ladder__item:nth-child(2),
  .ladder__item:nth-child(3) { padding-left: 0; }
}

/* --------------------------------------------------------------------------
   10. Case tiles (home)

   All three stories on the home page: one lead tile with the photograph
   carrying the numbers, and two compact tiles beside it.
   -------------------------------------------------------------------------- */

.cases {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: var(--s-5);
}

.case-tile {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.case-tile picture { display: block; min-height: 100%; background: var(--bg-alt); }
.case-tile img { width: 100%; height: 100%; object-fit: cover; }

.case-tile__body {
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.case-tile__figure {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.25rem);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--accent-text);
}
.case-tile__figure small { font-size: 0.45em; letter-spacing: 0; padding-left: 0.25em; color: var(--fg-muted); }
.case-tile__figure .arrow { color: var(--fg-faint); font-size: 0.5em; vertical-align: middle; padding: 0 0.22em; }
.case-tile__meta { font-size: var(--fs-xs); color: var(--fg-muted); margin: var(--s-2) 0 var(--s-4); }
.case-tile__quote {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.45;
  color: var(--fg);
  margin-bottom: var(--s-2);
}
.case-tile__who { font-size: var(--fs-xs); color: var(--fg-faint); margin: 0; }

/* The lead tile: photograph full bleed, numbers over its darkened foot. */
.case-tile--lead {
  grid-row: span 2;
  grid-template-columns: 1fr;
  min-height: 460px;
}
.case-tile--lead picture { position: absolute; inset: 0; }
.case-tile--lead .case-tile__body {
  position: relative;
  justify-content: flex-end;
  padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  background: linear-gradient(180deg, rgb(10 14 19 / 0) 30%, rgb(10 14 19 / 0.78) 62%, rgb(10 14 19 / 0.94) 100%);
}
.case-tile--lead .case-tile__figure { font-size: clamp(2.5rem, 1.6rem + 3vw, 3.5rem); color: var(--accent-hi); }
.case-tile--lead .case-tile__meta { color: #c3cfda; }
.case-tile--lead .case-tile__quote { font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem); color: #f2f6fa; max-width: 34ch; }
.case-tile--lead .case-tile__who { color: #93a1b0; }

@media (max-width: 899px) {
  .cases { grid-template-columns: 1fr; }
  .case-tile--lead { grid-row: auto; min-height: 420px; }
}
@media (max-width: 479px) {
  .case-tile:not(.case-tile--lead) { grid-template-columns: 1fr; }
  .case-tile:not(.case-tile--lead) picture { aspect-ratio: 16 / 9; }
}

/* --------------------------------------------------------------------------
   11. Services
   -------------------------------------------------------------------------- */

.service {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 1rem + 3vw, 4rem);
  align-items: center;
  padding-block: clamp(2.5rem, 1.5rem + 3.6vw, 4.5rem);
  border-top: 1px solid var(--line);
}
.service:first-of-type { border-top: 0; padding-top: 0; }

.service--flip .service__media { order: -1; }

.service__media {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
  aspect-ratio: 4 / 3;
}
.service__media img { width: 100%; height: 100%; object-fit: cover; }

.service__body h2 { font-size: var(--fs-h2); }
.service__body > p { color: var(--fg-muted); font-size: var(--fs-lead); }

.checklist { list-style: none; padding: 0; margin: var(--s-5) 0 var(--s-6); }
.checklist li {
  position: relative;
  padding-left: 1.9rem;
  margin-bottom: var(--s-3);
  color: var(--fg-muted);
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 10px; height: 10px;
  border-radius: 2px;
  background: var(--accent);
}

@media (max-width: 899px) {
  .service { grid-template-columns: 1fr; }
  .service--flip .service__media { order: 0; }
}

/* --------------------------------------------------------------------------
   12. Process timeline
   -------------------------------------------------------------------------- */

.timeline { position: relative; }

.timeline__track {
  position: absolute;
  left: 27px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--line);
}
.timeline__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: linear-gradient(180deg, var(--accent-hi), var(--accent));
  transform-origin: top center;
  transform: scaleY(var(--p, 0));
  will-change: transform;
}

.step {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: clamp(1rem, 0.5rem + 2vw, 2.5rem);
  padding-bottom: clamp(2.5rem, 1.5rem + 3.6vw, 4.5rem);
}
.step:last-child { padding-bottom: 0; }

.step__dot {
  position: relative;
  z-index: 1;
  width: 56px; height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--line);
  font-family: var(--font-mono);
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--fg-faint);
  transition: border-color var(--t-base) var(--ease),
              color var(--t-base) var(--ease),
              background-color var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease);
}
.section--alt .step__dot { background: var(--bg-alt); }

.step.is-active .step__dot {
  border-color: var(--accent);
  color: var(--on-accent);
  background: var(--accent);
  box-shadow: 0 0 0 6px rgb(255 122 26 / 0.16);
}

.step__body { padding-top: var(--s-2); }
.step__body h3 { margin-bottom: var(--s-3); }
.step__body p { color: var(--fg-muted); margin-bottom: 0; }

.step__meta {
  display: inline-block;
  margin-top: var(--s-4);
  padding: var(--s-1) var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--fg-muted);
}

@media (max-width: 599px) {
  .timeline__track { left: 21px; }
  .step { grid-template-columns: 44px minmax(0, 1fr); }
  .step__dot { width: 44px; height: 44px; font-size: 0.9375rem; }
}

/* --------------------------------------------------------------------------
   13. Financing
   -------------------------------------------------------------------------- */

.options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.option {
  background: var(--surface);
  padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  display: flex;
  flex-direction: column;
}
.option h3 { margin-bottom: var(--s-3); }
/* Financing puts these straight under the h1, so they are h2s that keep the h3 look. */
.option h2 { font-size: var(--fs-h3); line-height: 1.22; letter-spacing: -0.012em; margin-bottom: var(--s-3); }
.option p { color: var(--fg-muted); font-size: var(--fs-sm); flex: 1; }

.option__tag {
  display: inline-flex;
  align-self: flex-start;
  margin-bottom: var(--s-4);
  padding: var(--s-1) var(--s-3);
  border-radius: var(--r-sm);
  background: rgb(255 122 26 / 0.14);
  color: var(--accent-text);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
}
:root[data-theme="light"] .option__tag { background: rgb(255 122 26 / 0.16); }

.option__facts { list-style: none; padding: 0; margin: var(--s-5) 0 0; }
.option__facts li {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-3) 0;
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  margin: 0;
}
.option__facts b { font-family: var(--font-mono); font-weight: 500; color: var(--fg); text-align: right; }

.notice {
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: clamp(1.25rem, 1rem + 1.2vw, 1.75rem);
}
.notice h3 { font-size: 1.0625rem; margin-bottom: var(--s-3); }
.notice p { font-size: var(--fs-sm); color: var(--fg-muted); max-width: none; }

/* --------------------------------------------------------------------------
   14. Accordion (FAQ)
   -------------------------------------------------------------------------- */

.faq { border-top: 1px solid var(--line); }

.faq__item { border-bottom: 1px solid var(--line); }

.faq__q {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-5);
  padding: var(--s-5) 0;
  background: none;
  border: 0;
  text-align: left;
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.3;
  color: var(--fg);
  cursor: pointer;
}
.faq__q:hover { color: var(--accent-text); }

.faq__sign {
  flex-shrink: 0;
  position: relative;
  width: 20px; height: 20px;
  margin-top: 2px;
}
.faq__sign::before,
.faq__sign::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  background: var(--accent);
  border-radius: 1px;
  translate: -50% -50%;
  transition: transform var(--t-base) var(--ease), opacity var(--t-base) var(--ease);
}
.faq__sign::before { width: 16px; height: 2px; }
.faq__sign::after  { width: 2px; height: 16px; }
.faq__q[aria-expanded="true"] .faq__sign::after { transform: rotate(90deg); opacity: 0; }

.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-slow) var(--ease);
}
.faq__a > div { overflow: hidden; }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a p {
  color: var(--fg-muted);
  font-size: var(--fs-sm);
  padding-bottom: var(--s-5);
  max-width: 68ch;
}

/* --------------------------------------------------------------------------
   15. Quote form
   -------------------------------------------------------------------------- */

.quote-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: start;
}
@media (max-width: 899px) { .quote-layout { grid-template-columns: 1fr; } }

.form {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 1rem + 2.2vw, 2.5rem);
  box-shadow: var(--shadow-md);
}

.field { margin-bottom: var(--s-5); }

.field > label,
.fieldset__legend {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--fg);
  margin-bottom: var(--s-2);
}

.field__hint {
  display: block;
  font-size: var(--fs-xs);
  color: var(--fg-faint);
  margin-bottom: var(--s-2);
}

.input,
.select {
  width: 100%;
  min-height: 50px;
  padding: var(--s-3) var(--s-4);
  background: var(--bg-alt);
  border: 1px solid var(--control-border);
  border-radius: var(--r-md);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.4;
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
/* background-color, not the shorthand: the shorthand also reset the select's
   no-repeat, so in the light theme its chevron tiled across the whole field and
   ran through the text. */
:root[data-theme="light"] .input,
:root[data-theme="light"] .select { background-color: #fff; }

.input::placeholder { color: var(--fg-faint); opacity: 1; }
.input:hover, .select:hover { border-color: var(--fg-faint); }
.input:focus-visible, .select:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--accent); }

.select {
  appearance: none;
  -webkit-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' fill='none'%3E%3Cpath d='M1 1.5L7 7.5L13 1.5' stroke='%239dabba' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--s-4) center;
  padding-right: var(--s-8);
}

.field.has-error .input,
.field.has-error .select { border-color: var(--danger); }

.field__error {
  display: none;
  margin-top: var(--s-2);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--danger);
}
.field.has-error .field__error { display: block; }

.fieldset { border: 0; padding: 0; margin: 0 0 var(--s-5); }

.choice-row { display: flex; flex-wrap: wrap; gap: var(--s-2); }

.choice { position: relative; flex: 1 1 8rem; }
.choice input {
  position: absolute;
  opacity: 0;
  width: 100%; height: 100%;
  margin: 0;
  cursor: pointer;
}
.choice span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--control-border);
  border-radius: var(--r-md);
  background: var(--bg-alt);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--fg-muted);
  text-align: center;
  transition: border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              background-color var(--t-fast) var(--ease);
}
:root[data-theme="light"] .choice span { background: #fff; }
.choice input:hover + span { border-color: var(--fg-faint); color: var(--fg); }
.choice input:checked + span {
  border-color: var(--accent);
  background: rgb(255 122 26 / 0.12);
  color: var(--fg);
  /* A thicker edge, so "selected" is not carried by colour alone. */
  box-shadow: inset 0 0 0 1px var(--accent);
}
.choice input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }

.form__legal { font-size: var(--fs-xs); color: var(--fg-faint); margin: var(--s-4) 0 0; max-width: none; }

.form__summary {
  display: none;
  margin-bottom: var(--s-5);
  padding: var(--s-4);
  border: 1px solid var(--danger);
  border-radius: var(--r-md);
  background: rgb(255 107 107 / 0.10);
}
.form__summary.is-shown { display: block; }
.form__summary h2 { font-size: 1.0625rem; margin-bottom: var(--s-2); color: var(--danger); }
.form__summary ul { margin: 0; padding-left: 1.1rem; }
.form__summary li { font-size: var(--fs-sm); margin-bottom: var(--s-1); }
.form__summary a { color: var(--danger); }

.btn--loading { pointer-events: none; opacity: 0.75; }
.btn__spinner { display: none; width: 16px; height: 16px; }
.btn--loading .btn__spinner { display: block; animation: spin 720ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Confirmation screen */
.confirm { display: none; text-align: center; padding: clamp(2rem, 1.5rem + 3vw, 3.5rem) var(--s-5); }
.confirm.is-shown { display: block; }
.confirm__mark {
  width: 64px; height: 64px;
  margin: 0 auto var(--s-5);
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgb(255 122 26 / 0.14);
  color: var(--accent-text);
}
.confirm h2 { margin-bottom: var(--s-3); }
.confirm p { color: var(--fg-muted); margin-inline: auto; }

/* Aside next to the form */
.aside-card {
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.25rem, 1rem + 1.4vw, 1.75rem);
  margin-bottom: var(--s-4);
}
.aside-card h2 { font-size: 1.0625rem; line-height: 1.22; letter-spacing: -0.012em; margin-bottom: var(--s-4); }
.aside-card p { font-size: var(--fs-sm); color: var(--fg-muted); }

.contact-list { list-style: none; padding: 0; margin: 0; }
.contact-list li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: var(--s-3);
  align-items: start;
  padding: var(--s-3) 0;
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  margin: 0;
}
.contact-list li:first-child { border-top: 0; padding-top: 0; }
.contact-list svg { color: var(--accent-text); margin-top: 3px; }
.contact-list a { color: var(--fg); text-decoration: none; font-weight: 500; }
.contact-list a:hover { color: var(--accent-text); text-decoration: underline; }

/* --------------------------------------------------------------------------
   16. Page header band and CTA band
   -------------------------------------------------------------------------- */

.page-head {
  position: relative;
  padding-block: clamp(3rem, 2rem + 4vw, 5.5rem) clamp(2rem, 1.5rem + 2.4vw, 3.5rem);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.page-head::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: min(620px, 80vw);
  aspect-ratio: 1;
  right: -8%;
  top: -55%;
  background: var(--glow);
  pointer-events: none;
}
.page-head .container { position: relative; z-index: 1; }
.page-head h1 { max-width: 20ch; margin-bottom: var(--s-4); }
.page-head p { font-size: var(--fs-lead); color: var(--fg-muted); max-width: 54ch; }

.crumbs {
  font-size: var(--fs-xs);
  color: var(--fg-faint);
  margin-bottom: var(--s-5);
}
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2); padding: 0; margin: 0; }
.crumbs li { margin: 0; display: flex; align-items: center; gap: var(--s-2); }
.crumbs li + li::before { content: "/"; color: var(--line-strong); }
.crumbs a { color: var(--fg-faint); text-decoration: none; }
.crumbs a:hover { color: var(--accent-text); }

.cta-band {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--line);
  background: var(--bg-alt);
  padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem);
  isolation: isolate;
}
.cta-band__bg { position: absolute; inset: 0; z-index: -2; }
.cta-band__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.30; }
.cta-band__bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--bg-alt) 8%, rgb(13 18 25 / 0.55) 70%, rgb(13 18 25 / 0.30) 100%);
}
:root[data-theme="light"] .cta-band__bg img { opacity: 0.22; }
:root[data-theme="light"] .cta-band__bg::after {
  background: linear-gradient(90deg, var(--bg-alt) 8%, rgb(232 237 242 / 0.72) 70%, rgb(232 237 242 / 0.45) 100%);
}

.cta-band h2 { max-width: 18ch; font-size: var(--fs-h1); margin-bottom: var(--s-5); }
.cta-band p { color: var(--fg-muted); font-size: var(--fs-lead); margin-bottom: var(--s-6); max-width: 46ch; }

/* --------------------------------------------------------------------------
   17. Footer
   -------------------------------------------------------------------------- */

.footer {
  border-top: 1px solid var(--line);
  background: var(--bg);
  padding-block: clamp(2.5rem, 2rem + 2.6vw, 4rem) var(--s-6);
  font-size: var(--fs-sm);
}

.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: clamp(1.75rem, 1rem + 2.6vw, 3rem);
  padding-bottom: var(--s-7);
}
@media (max-width: 899px) { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 519px) { .footer__grid { grid-template-columns: 1fr; } }

.footer h2 {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-bottom: var(--s-4);
}

.footer__brand p { color: var(--fg-muted); max-width: 32ch; margin-top: var(--s-4); }

.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin-bottom: var(--s-3); color: var(--fg-muted); line-height: 1.5; }
.footer a { color: var(--fg-muted); text-decoration: none; }
.footer a:hover { color: var(--accent-text); text-decoration: underline; }



.footer__legal {
  border-top: 1px solid var(--line);
  padding-top: var(--s-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4) var(--s-6);
  justify-content: space-between;
  font-size: var(--fs-xs);
  color: var(--fg-faint);
}
.footer__legal p { max-width: 74ch; margin: 0; }

.footer__disclaimer {
  margin-top: var(--s-5);
  padding: var(--s-4);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  font-size: var(--fs-xs);
  color: var(--fg-faint);
  line-height: 1.55;
}
.footer__disclaimer strong { color: var(--fg-muted); }

/* --------------------------------------------------------------------------
   18. Motion utilities
   -------------------------------------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 620ms var(--ease), transform 620ms var(--ease);
  transition-delay: var(--d, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }

.no-js [data-reveal] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .calc__bar { transition: none; }
}

/* --------------------------------------------------------------------------
   19. Credential row (under the stat strip)
   -------------------------------------------------------------------------- */

.creds {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4) var(--s-6);
  padding: var(--s-5) 0 0;
  margin: 0;
}
.creds li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: var(--s-3);
  align-items: start;
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  line-height: 1.4;
}
.creds svg { color: var(--accent-text); margin-top: 2px; }

@media (max-width: 899px) {
  .creds { grid-template-columns: 1fr; gap: var(--s-3); }
}

/* --------------------------------------------------------------------------
   20. Maintenance block (services, third service)
   -------------------------------------------------------------------------- */

.maint {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 1rem + 3.4vw, 4rem);
  align-items: start;
}

.maint__head h2 { margin-bottom: var(--s-4); }
.maint__head .lead { margin-bottom: var(--s-6); }

.maint__list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  padding: 0;
  margin: 0;
}
.maint__list li {
  margin: 0;
  padding: clamp(1.25rem, 1rem + 1.2vw, 1.75rem);
  background: var(--surface);
}
.maint__list h3 { font-size: 1.0625rem; margin-bottom: var(--s-2); }
.maint__list p { font-size: var(--fs-sm); color: var(--fg-muted); margin: 0; }

@media (max-width: 899px) {
  .maint { grid-template-columns: 1fr; }
}
@media (max-width: 599px) {
  .maint__list { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   21. Financing picker
   -------------------------------------------------------------------------- */

.picker { margin: 0; border-top: 1px solid var(--line); }

.picker__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-4) var(--s-6);
  align-items: baseline;
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--line);
}
.picker dt {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.35;
  color: var(--fg);
}
.picker dd {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  line-height: 1.55;
}

@media (max-width: 699px) {
  .picker__row { grid-template-columns: 1fr; gap: var(--s-2); }
}

/* --------------------------------------------------------------------------
   22. Case studies (results)
   -------------------------------------------------------------------------- */

.case {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.case--lead {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  margin-bottom: var(--s-5);
}
.case--lead .case__media { min-height: 380px; }

.case__media { background: var(--bg-alt); }
.case__media img { width: 100%; height: 100%; object-fit: cover; }

.case__body {
  padding: clamp(1.5rem, 1rem + 2.2vw, 2.5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.case__figure {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(2.25rem, 1.5rem + 2.8vw, 3.5rem);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.045em;
  line-height: 1;
  color: var(--accent-text);
}
.case__figure .arrow { color: var(--fg-faint); font-size: 0.5em; vertical-align: middle; padding: 0 0.22em; }
.case__figure small { font-size: 0.34em; letter-spacing: 0; padding-left: 0.3em; color: var(--fg-muted); }

.case__sub {
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  margin: var(--s-3) 0 var(--s-5);
}

.case blockquote {
  margin: 0;
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}
.case blockquote p {
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 1rem + 0.45vw, 1.25rem);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.012em;
  color: var(--fg);
  margin-bottom: var(--s-4);
}
.case blockquote footer {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--fg);
}
.case blockquote footer span {
  display: block;
  font-weight: 400;
  color: var(--fg-faint);
  font-size: var(--fs-xs);
  margin-top: 2px;
}

.case-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-5);
}
.case--sm .case__media { aspect-ratio: 16 / 10; }

@media (max-width: 899px) {
  .case--lead { grid-template-columns: 1fr; }
  .case--lead .case__media { min-height: 0; aspect-ratio: 16 / 10; }
  .case-pair { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   23. Rating block
   -------------------------------------------------------------------------- */

.rating {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  gap: clamp(1.75rem, 1rem + 3vw, 3.5rem);
  align-items: center;
  padding: clamp(1.75rem, 1.2rem + 2.4vw, 3rem);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}

.rating__value {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(3.5rem, 2.4rem + 4vw, 5.5rem);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.05em;
  line-height: 1;
  color: var(--fg);
}
.rating__stars {
  display: block;
  font-size: 1.25rem;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin: var(--s-3) 0 var(--s-2);
}
.rating__meta { display: block; font-size: var(--fs-sm); color: var(--fg-muted); }

.rating__body .lead { margin-bottom: var(--s-6); }

@media (max-width: 799px) {
  .rating { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   24. Odds and ends
   -------------------------------------------------------------------------- */

.step__title { font-size: var(--fs-h3); line-height: 1.22; letter-spacing: -0.012em; margin-bottom: var(--s-3); }

.link-arrow { position: relative; }

/* --------------------------------------------------------------------------
   25. Media strip (process)
   -------------------------------------------------------------------------- */

.strip { padding-block: 0 clamp(1rem, 0.5rem + 1.6vw, 2rem); }

.strip__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: var(--s-5);
  padding-top: clamp(2rem, 1.2rem + 2.6vw, 3.5rem);
}

.strip__item { margin: 0; }
.strip__item picture {
  display: block;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-alt);
  aspect-ratio: 3 / 2;
}
.strip__item img { width: 100%; height: 100%; object-fit: cover; }
.strip__item figcaption {
  margin-top: var(--s-3);
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  line-height: 1.45;
}

@media (max-width: 799px) {
  .strip__grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   26. On-photo overrides

   The hero always sits on a darkened photograph, in either theme, so anything
   inside it has to keep its on-dark colours rather than follow the page.
   -------------------------------------------------------------------------- */

.hero .btn--ghost {
  color: #eaf0f6;
  border-color: rgb(255 255 255 / 0.30);
  background: rgb(10 14 19 / 0.32);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hero .btn--ghost:hover {
  color: #ffffff;
  border-color: rgb(255 255 255 / 0.62);
  background: rgb(10 14 19 / 0.52);
}

.shot__body h3 { color: #f2f6fa; }

/* The select chevron is baked into a data URI, so the light theme needs its
   own copy rather than a token. */
:root[data-theme="light"] .select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1.5L7 7.5L13 1.5' stroke='%235d6b78' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   27. Battery runtime estimator (battery backup page)

   Pick the appliances that matter in an outage; the runtime answers. The
   point it makes is the one customers most need: essentials last a day or
   more, air conditioning turns that into hours.
   -------------------------------------------------------------------------- */

.runtime {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: clamp(1.5rem, 1rem + 2.4vw, 3rem);
  align-items: start;
}
@media (max-width: 899px) { .runtime { grid-template-columns: 1fr; } }

.runtime__loads {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-2);
  border: 0;
  padding: 0;
  margin: 0;
}
@media (max-width: 479px) { .runtime__loads { grid-template-columns: 1fr; } }

.load { position: relative; display: block; cursor: pointer; }
.load input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.load span {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-3);
  min-height: 56px;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--control-border);
  border-radius: var(--r-md);
  background: var(--surface);
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.load b { font-weight: 500; font-size: var(--fs-sm); color: var(--fg-muted); }
.load i {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--fg-faint);
  white-space: nowrap;
}
.load input:hover + span { border-color: var(--fg-faint); }
.load input:checked + span { border-color: var(--accent); background: rgb(255 122 26 / 0.10); box-shadow: inset 0 0 0 1px var(--accent); }
.load input:checked + span b { color: var(--fg); }
.load input:checked + span i { color: var(--accent-text); }
.load input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
/* Checked "i" is 4.4:1 on the tinted card in the light theme; this is 5.5:1. */
:root[data-theme="light"] .load input:checked + span i { color: #9a3a00; }

.runtime__out {
  padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}
.runtime__value {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(3rem, 2rem + 3.6vw, 4.5rem);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.05em;
  line-height: 1;
  color: var(--accent-text);
}
.runtime__value small { font-size: 0.3em; letter-spacing: 0; padding-left: 0.35em; color: var(--fg-muted); }
.runtime__label { display: block; margin: var(--s-3) 0 var(--s-5); font-size: var(--fs-sm); color: var(--fg-muted); }

.runtime__facts { margin: 0 0 var(--s-5); border-top: 1px solid var(--line); }
.runtime__facts div {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm);
}
.runtime__facts dt { color: var(--fg-muted); }
.runtime__facts dd { margin: 0; font-family: var(--font-mono); color: var(--fg); font-variant-numeric: tabular-nums; }

.runtime__hint { font-size: var(--fs-sm); color: var(--fg); line-height: 1.5; margin-bottom: var(--s-4); }
.runtime__note { font-size: var(--fs-xs); color: var(--fg-faint); margin: 0; }

/* Pull quote, used once on the battery page. */
.pullquote { margin: 0; }
.pullquote blockquote { margin: 0; }
.pullquote p {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--fg);
  max-width: 30ch;
  margin-bottom: var(--s-5);
}
.pullquote figcaption { font-size: var(--fs-sm); color: var(--fg-muted); }
.pullquote figcaption b { color: var(--fg); font-weight: 600; }

/* --------------------------------------------------------------------------
   28. Service areas
   -------------------------------------------------------------------------- */

.areas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.area {
  display: flex;
  flex-direction: column;
  padding: clamp(1.25rem, 1rem + 1.4vw, 2rem);
  background: var(--surface);
}
.area__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}
.area__name { font-size: var(--fs-h3); margin: 0; }
.area__time {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--fg-faint);
  white-space: nowrap;
}
.area__count {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(2rem, 1.5rem + 1.8vw, 2.75rem);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--accent-text);
}
.area__count-label { display: block; font-size: var(--fs-xs); color: var(--fg-muted); margin: var(--s-2) 0 var(--s-4); }
.area p { font-size: var(--fs-sm); color: var(--fg-muted); margin: 0; }

/* Home base gets the double-width cell, which also makes eight cities fill a
   three-column grid exactly. */
.area--home {
  grid-column: span 2;
  background:
    radial-gradient(80% 120% at 100% 0%, rgb(255 122 26 / 0.12), rgb(255 122 26 / 0) 60%),
    var(--surface);
}
.area--home .area__count { font-size: clamp(2.75rem, 2rem + 2.6vw, 3.75rem); }

@media (max-width: 999px) {
  .areas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .area--home { grid-column: auto; }
}
@media (max-width: 559px) {
  .areas { grid-template-columns: 1fr; }
}

.split-text {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 1rem + 3vw, 4rem);
}
.split-text h3 { margin-bottom: var(--s-3); }
.split-text p { color: var(--fg-muted); }
@media (max-width: 799px) { .split-text { grid-template-columns: 1fr; } }

/* Four answers to "What do you need?" sit in a 2 x 2 grid. */
.choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-2);
}
.choice-grid .choice { flex: none; }
.field.has-error .choice span { border-color: var(--danger); }