/* ═══════════════════════════════════════════════════════════════
   SBZ SOLAR — Design System
   Light theme. Emerald primary, deep-forest ink anchors.

   Colour policy
     Green  is the brand and every action: CTAs, links, eyebrows,
            icons, active states.
     Solar  amber is reserved for the sun mark and solar-production
            data. It is never used for UI chrome — two competing
            accents make a page read as unedited.
     Ink    deep forest, used for the hero photo panel, the CTA strip
            and the footer only, so a light page still has anchors.

   Contents
     01  Reset            13  Process timeline
     02  Tokens           14  Forms
     03  Base & a11y      15  FAQ
     04  Layout           16  Financing
     05  Typography       17  Projects
     06  Buttons          18  Electrical
     07  Navigation       19  Home blocks
     08  Hero             20  CTA bands
     09  Trust bar        21  Page hero
     10  Service cards    22  Footer
     11  Card grids       23  Motion
     12  Split sections   24  Responsive
   ═══════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────
   01  RESET
   ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

img, svg, video { max-width: 100%; display: block; }
img { height: auto; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; cursor: pointer; border: none; background: none; }
input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
table { border-collapse: collapse; width: 100%; }

/* ───────────────────────────────────────────────────────────────
   02  TOKENS
   ─────────────────────────────────────────────────────────────── */
:root {
  /* ── Surfaces ── */
  --bg:        #FFFFFF;
  --bg-alt:    #F4F8F5;   /* faint green-tinted off-white          */
  --surface:   #FFFFFF;
  --surface-2: #F7FAF8;
  --ink:       #0C1A13;   /* deep forest — hero panel, CTA, footer */
  --ink-2:     #12281D;

  /* ── Lines ── */
  --line:        #E2EAE5;
  --line-strong: #CBD8D0;
  --line-ink:    rgba(255, 255, 255, 0.12);

  /* ── Text on light — verified against --bg and --bg-alt ── */
  --text:   #101614;   /* 18.3:1 — headings        */
  --text-2: #3D4A44;   /*  9.3:1 — body copy       */
  --text-3: #5B6B63;   /*  5.6:1 — secondary, meta */
  --text-4: #64736B;   /*  5.0:1 — captions, legal */

  /* ── Text on ink ── */
  --on-ink:   #F2F7F4; /* 16.5:1 */
  --on-ink-2: #C2D0C8; /* 11.2:1 */
  --on-ink-3: #93A79B; /*  7.0:1 */

  /* ── Brand: green energy ── */
  --green:        #147A45;  /* 5.4:1 on white — primary action */
  --green-hover:  #0E5C33;  /* 8.1:1                           */
  --green-on-ink: #4FCB80;  /* 8.7:1 on --ink                  */
  --green-weak:   rgba(20, 122, 69, 0.08);
  --green-line:   rgba(20, 122, 69, 0.24);
  --green-glow:   rgba(20, 122, 69, 0.30);

  /* ── Solar accent — sun mark and production data only ── */
  --solar:      #E8890B;  /* 6.8:1 on --ink */
  --solar-ink:  #A8530A;  /* 5.4:1 on white */
  --solar-weak: rgba(232, 137, 11, 0.12);

  /* ── Status ── */
  --ok:   #147A45;
  --warn: #A8530A;
  --err:  #B42318;

  /* ── Type ── */
  --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.125rem;
  --fs-lg:   1.3125rem;
  --fs-xl:   1.625rem;
  --fs-2xl:  clamp(1.75rem, 1.4rem + 1.6vw, 2.125rem);
  --fs-3xl:  clamp(2rem,   1.5rem + 2.4vw, 2.75rem);
  --fs-4xl:  clamp(2.375rem, 1.6rem + 3.6vw, 3.75rem);

  --lh-tight: 1.08;
  --lh-body:  1.7;

  /* ── Spacing — 4pt scale ── */
  --sp-1:  0.25rem;  --sp-2:  0.5rem;   --sp-3:  0.75rem;
  --sp-4:  1rem;     --sp-5:  1.25rem;  --sp-6:  1.5rem;
  --sp-8:  2rem;     --sp-10: 2.5rem;   --sp-12: 3rem;
  --sp-16: 4rem;     --sp-20: 5rem;     --sp-24: 6rem;

  --section-y: clamp(4rem, 7vw, 7rem);
  --gutter:    clamp(1.25rem, 4vw, 3rem);
  --container: 75rem;

  /* ── Radii ── */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-full: 999px;

  /* ── Elevation — soft, green-tinted. A light theme carries
        structure on borders and uses shadow only to lift. ── */
  --sh-1: 0 1px 2px rgba(12, 26, 19, 0.05);
  --sh-2: 0 2px 4px rgba(12, 26, 19, 0.04), 0 8px 24px -8px rgba(12, 26, 19, 0.10);
  --sh-3: 0 4px 8px rgba(12, 26, 19, 0.05), 0 20px 48px -12px rgba(12, 26, 19, 0.16);

  /* ── Motion ── */
  --dur:      180ms;
  --dur-slow: 280ms;
  --ease:     cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Layout constants (read by main.js) ── */
  --nav-h: 68px;

  /* ── Z-index scale ── */
  --z-base: 1; --z-sticky: 100; --z-nav: 200; --z-overlay: 300; --z-modal: 400;
}

/* ───────────────────────────────────────────────────────────────
   03  BASE & ACCESSIBILITY
   ─────────────────────────────────────────────────────────────── */
body {
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  background: var(--bg);
  color: var(--text-2);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  color: var(--text);
  line-height: var(--lh-tight);
  letter-spacing: -0.03em;
  font-weight: 800;
  text-wrap: balance;
}
p { text-wrap: pretty; }

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

/* On ink panels the dark green ring would be invisible */
.cta-strip :focus-visible,
.footer :focus-visible { outline-color: var(--green-on-ink); }

.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: var(--sp-4);
  z-index: var(--z-modal);
  transform: translateY(-200%);
  background: var(--green);
  color: #FFFFFF;
  font-size: var(--fs-sm);
  font-weight: 700;
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-sm);
  transition: transform var(--dur) var(--ease);
}
.skip-link:focus { transform: translateY(0); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

[id] { scroll-margin-top: calc(var(--nav-h) + var(--sp-6)); }

.link-accent {
  color: var(--green);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.link-accent:hover { color: var(--green-hover); }

/* ───────────────────────────────────────────────────────────────
   04  LAYOUT
   ─────────────────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: 52rem; }

.section       { padding-block: var(--section-y); background: var(--bg); }
.section--alt  { background: var(--bg-alt); }
.section--card { background: var(--surface-2); }
.section--flush-top { padding-top: 0; }

.section-head {
  max-width: 44rem;
  margin: 0 auto var(--sp-12);
  text-align: center;
}
.section-head--left  { margin-inline: 0; text-align: left; }
.section-head--tight { margin-bottom: var(--sp-6); }
.section-head--gap   { margin-top: var(--sp-16); }
.section-head .section-eyebrow { justify-content: center; }
.section-head--left .section-eyebrow { justify-content: flex-start; }

/* ───────────────────────────────────────────────────────────────
   05  TYPOGRAPHY
   ─────────────────────────────────────────────────────────────── */
.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: var(--sp-4);
}
.section-eyebrow::before {
  content: '';
  width: 20px; height: 2px;
  border-radius: 2px;
  background: var(--green);
  flex-shrink: 0;
}

.section-title { font-size: var(--fs-3xl); }
.section-title em,
.page-hero-h1 em,
.split-body h2 em,
.cta-band h2 em { color: var(--green); font-style: italic; }

.section-lead {
  font-size: var(--fs-md);
  color: var(--text-3);
  line-height: var(--lh-body);
  margin-top: var(--sp-5);
}
.section-note {
  font-size: var(--fs-sm);
  color: var(--text-4);
  text-align: center;
  max-width: 42rem;
  margin: var(--sp-10) auto 0;
  line-height: 1.65;
}

.section-note--left { text-align: left; margin-inline: 0; }

.prose { max-width: 44rem; }
.prose p  { font-size: var(--fs-md); color: var(--text-2); line-height: 1.8; margin-bottom: var(--sp-5); }
.prose h2 { font-size: var(--fs-xl); margin: var(--sp-10) 0 var(--sp-4); }
.prose h3 { font-size: var(--fs-xl); margin: var(--sp-10) 0 var(--sp-4); }
.prose a  { color: var(--green); text-decoration: underline; text-underline-offset: 2px; }

/* ───────────────────────────────────────────────────────────────
   06  BUTTONS
   ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: var(--sp-3) var(--sp-6);
  border-radius: var(--r-sm);
  border: 1.5px solid transparent;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  text-align: center;
  touch-action: manipulation;
  transition: background var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn--block { width: 100%; }

.btn-primary,
.btn-amber,
.btn-gold {
  background: var(--green);
  color: #FFFFFF;
  font-weight: 800;
  box-shadow: var(--sh-1);
}
.btn-primary:hover,
.btn-amber:hover,
.btn-gold:hover {
  background: var(--green-hover);
  box-shadow: 0 6px 20px -8px var(--green-glow);
  transform: translateY(-1px);
}

.btn-secondary {
  background: var(--surface);
  border-color: var(--line-strong);
  color: var(--text);
  font-weight: 600;
}
.btn-secondary:hover {
  border-color: var(--green);
  color: var(--green);
  transform: translateY(-1px);
}

.btn-nav {
  background: var(--green);
  color: #FFFFFF;
  min-height: 40px;
  padding: var(--sp-2) var(--sp-5);
  font-size: var(--fs-sm);
  font-weight: 700;
}
.btn-nav:hover { background: var(--green-hover); box-shadow: 0 4px 14px -6px var(--green-glow); }

@media (prefers-reduced-motion: reduce) {
  .btn:hover, .btn:active { transform: none; }
}

/* ───────────────────────────────────────────────────────────────
   07  NAVIGATION
   ─────────────────────────────────────────────────────────────── */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-nav);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.nav.is-scrolled {
  background: rgba(255, 255, 255, 0.97);
  box-shadow: var(--sh-2);
}

.nav-inner {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  padding-inline: var(--gutter);
}

.nav-logo { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; min-height: 44px; }
.nav-logo-icon { width: 28px; height: 28px; flex-shrink: 0; }
.nav-logo-sbz,
.nav-logo-solar { font-size: 1.0625rem; font-weight: 800; letter-spacing: -0.02em; }
.nav-logo-sbz   { color: var(--text); }
.nav-logo-solar { color: var(--green); font-style: italic; }

.nav-links { display: flex; align-items: center; gap: var(--sp-1); }
.nav-item { position: relative; }

.nav-link {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  height: 40px;
  padding-inline: var(--sp-3);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-3);
  white-space: nowrap;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.nav-link:hover { color: var(--text); background: var(--bg-alt); }

.nav-link.is-active { color: var(--green); }
.nav-link.is-active::before {
  content: '';
  position: absolute;
  left: var(--sp-3);
  right: var(--sp-3);
  bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--green);
}

.nav-disclosure { font-family: inherit; background: none; border: none; }
.nav-caret {
  width: 0; height: 0;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  border-top: 4px solid currentColor;
  transition: transform var(--dur) var(--ease);
}
.nav-item.is-open .nav-caret,
.nav-item:hover .nav-caret { transform: rotate(180deg); }

.nav-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 15rem;
  padding: var(--sp-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity var(--dur) var(--ease),
              visibility var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
/* Invisible bridge so the pointer can cross the 6px gap */
.nav-dropdown::before {
  content: '';
  position: absolute;
  inset: -10px 0 auto 0;
  height: 10px;
}
.nav-item:hover   > .nav-dropdown,
.nav-item.is-open > .nav-dropdown,
.nav-dropdown:focus-within {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.nav-dropdown--wide {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  min-width: 30rem;
}
.nav-dropdown-link {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 44px;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-2);
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.nav-dropdown-link:hover { color: var(--green); background: var(--bg-alt); }
.nav-dropdown-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green);
  flex-shrink: 0;
}
.nav-dropdown-link-sub { display: flex; flex-direction: column; line-height: 1.35; }
.nav-dropdown-link-sub small { font-size: var(--fs-xs); font-weight: 500; color: var(--text-4); }
.nav-dropdown-all {
  grid-column: 1 / -1;
  margin-top: var(--sp-1);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
  color: var(--green);
}
.nav-dropdown-all:hover { color: var(--green-hover); }

.nav-right { display: flex; align-items: center; gap: var(--sp-4); flex-shrink: 0; }
.nav-phone {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 40px;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-2);
  white-space: nowrap;
  transition: color var(--dur) var(--ease);
}
.nav-phone:hover { color: var(--green); }
.nav-phone svg { color: var(--green); }

.nav-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-strong);
  transition: background var(--dur) var(--ease);
}
.nav-toggle:hover { background: var(--bg-alt); }
.nav-toggle span {
  width: 18px; height: 2px;
  border-radius: 2px;
  background: var(--text);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Mobile drawer ──
   A panel that hangs off the nav rather than a full-screen takeover.
   Rows are 48px, Services is collapsed behind a native <details>, so
   the whole thing opens at roughly 400px instead of 850px. */
.nav-mobile {
  display: none;
  position: fixed;
  top: var(--nav-h);
  left: 0; right: 0;
  z-index: calc(var(--z-nav) - 1);
  max-height: calc(100svh - var(--nav-h));
  padding: var(--sp-3) var(--gutter) var(--sp-5);
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  box-shadow: 0 18px 40px -18px rgba(12, 26, 19, 0.35);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.nav-mobile.is-open { display: block; }

.nav-mobile-nav { display: flex; flex-direction: column; }

.nav-m-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: 48px;
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--text);
  border-bottom: 1px solid var(--line);
  transition: color var(--dur) var(--ease);
}
.nav-m-row:last-child { border-bottom: none; }
.nav-m-row:hover,
.nav-m-row.is-active { color: var(--green); }

/* Services disclosure */
.nav-m-group { border-bottom: 1px solid var(--line); }
.nav-m-summary { cursor: pointer; list-style: none; border-bottom: none; }
.nav-m-summary::-webkit-details-marker { display: none; }
.nav-m-caret {
  width: 9px; height: 9px;
  border-right: 2px solid var(--text-3);
  border-bottom: 2px solid var(--text-3);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--dur) var(--ease);
}
.nav-m-group[open] .nav-m-caret { transform: rotate(-135deg) translate(-3px, -3px); }
.nav-m-group[open] .nav-m-summary { color: var(--green); }

/* Two compact columns so ten services cost five rows, not ten */
.nav-m-sub {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--sp-4);
  padding: var(--sp-1) 0 var(--sp-3);
}
.nav-m-sublink {
  display: flex;
  align-items: center;
  min-height: 40px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-3);
  transition: color var(--dur) var(--ease);
}
.nav-m-sublink:hover { color: var(--green); }
.nav-m-sublink--all { grid-column: 1 / -1; font-weight: 700; color: var(--green); }

.nav-mobile-actions {
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

@media (max-width: 380px) {
  .nav-m-sub { grid-template-columns: 1fr; }
}

/* ───────────────────────────────────────────────────────────────
   08  HOME HERO — full-bleed banner, tinted under the copy
   ─────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(84svh, 46rem);
  padding-block: calc(var(--nav-h) + var(--sp-16)) var(--sp-16);
  background: var(--ink);
  overflow: hidden;
  isolation: isolate;
}

.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 62%;
  /* slow drift — enabled by JS, so a still image is the default */
  transform: scale(1.04);
}
.hero.is-drifting .hero-bg img {
  animation: hero-drift 26s var(--ease) infinite alternate;
}
@keyframes hero-drift {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to   { transform: scale(1.12) translate3d(-1.2%, -1.4%, 0); }
}

/* The tint. Deep forest from the left so the copy always has a bed,
   thinning to the right so the array stays visible. */
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(100deg,
      rgba(8, 20, 14, 0.93) 0%,
      rgba(9, 22, 16, 0.82) 34%,
      rgba(10, 24, 17, 0.48) 62%,
      rgba(12, 26, 19, 0.14) 100%),
    linear-gradient(to top,
      rgba(8, 20, 14, 0.80) 0%,
      rgba(8, 20, 14, 0.10) 38%,
      transparent 70%);
}
/* A thin brand edge so the banner reads as designed, not as a stock photo */
.hero::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 4px;
  z-index: 2;
  background: linear-gradient(to right, var(--green) 0%, var(--green-on-ink) 38%, transparent 78%);
}

/* The banner copy sits closer to the edge than the rest of the page:
   a wider container pulls it left without breaking out of the grid,
   so it still lines up sensibly on ultra-wide screens. */
.hero > .container {
  max-width: none;
  /* At 1200 and below this equals the page gutter, so the headline
     lines up under the logo. Above that it grows gently and caps at
     6rem instead of drifting to the middle on a wide screen. */
  padding-inline: clamp(1.25rem, 4vw, 6rem);
}
.hero-inner { position: relative; z-index: 3; max-width: 46rem; }

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green-on-ink);
}
.hero-eyebrow::before {
  content: '';
  width: 26px; height: 2px;
  border-radius: 2px;
  background: var(--green-on-ink);
}

.hero-h1 {
  font-size: var(--fs-4xl);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1.02;
  color: var(--on-ink);
  margin-bottom: var(--sp-5);
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}
.hero-h1 em { display: block; color: var(--green-on-ink); font-style: italic; }

.hero-sub {
  max-width: 34rem;
  margin-bottom: var(--sp-8);
  font-size: var(--fs-md);
  color: var(--on-ink-2);
}
/* Below desktop the copy wraps naturally; the forced break would only
   create a stranded short line. */
.hero-br { display: none; }
@media (min-width: 1024px) {
  /* the second sentence measures 38.3rem on one line */
  .hero-sub { max-width: 42rem; }
  .hero-br  { display: inline; }
}

/* Icon chips instead of a bullet list — scannable, not prose */
.hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-8);
}
/* Desktop keeps all three on one line; the banner copy column is widened
   to suit rather than the labels being shortened. */
@media (min-width: 1024px) {
  .hero-inner { max-width: 54rem; }
  .hero-chips { flex-wrap: nowrap; }
}
.hero-chip-item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4) var(--sp-2) var(--sp-3);
  border-radius: var(--r-full);
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--on-ink);
}
.hero-chip-item svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--green-on-ink); }
.hero-chip-item { white-space: nowrap; }

.hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* Ghost button — only legible on the ink banner */
.btn-ghost {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.45);
  color: var(--on-ink);
  font-weight: 600;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: var(--green-on-ink);
  color: var(--green-on-ink);
  transform: translateY(-1px);
}
.btn-lg { min-height: 52px; padding-inline: var(--sp-8); font-size: var(--fs-base); }

.hero :focus-visible { outline-color: var(--green-on-ink); }

@media (prefers-reduced-motion: reduce) {
  .hero.is-drifting .hero-bg img { animation: none; }
}

/* ───────────────────────────────────────────────────────────────
   09  TRUST BAR
   ─────────────────────────────────────────────────────────────── */
.trust-bar { background: var(--bg-alt); border-bottom: 1px solid var(--line); }
.trust-bar-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: var(--container);
  margin-inline: auto;
}
.trust-cell {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-8) var(--sp-6);
  border-right: 1px solid var(--line);
}
.trust-cell:last-child { border-right: none; }
.trust-cell-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  flex-shrink: 0;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--green-line);
  color: var(--green);
  box-shadow: var(--sh-1);
}
.trust-cell-icon svg { width: 20px; height: 20px; }
.trust-cell-title { font-size: var(--fs-base); font-weight: 800; color: var(--text); line-height: 1.25; }
.trust-cell-label { display: block; font-size: var(--fs-sm); color: var(--text-3); margin-top: 2px; line-height: 1.4; }

/* ───────────────────────────────────────────────────────────────
   10  SERVICE CARDS
   ─────────────────────────────────────────────────────────────── */
.services { background: var(--bg); padding-block: var(--section-y); }
.services-header {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: var(--sp-12);
  align-items: end;
  margin-bottom: var(--sp-12);
}
.services-h2 { font-size: var(--fs-3xl); font-weight: 900; }
.services-h2 em { display: block; color: var(--green); font-style: italic; }
.services-header-right { font-size: var(--fs-md); color: var(--text-3); max-width: 32rem; }

.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
/* The home page lists four service lines and wants them on one row — three
   columns would leave a single orphan card. Falls back to the shared two-
   and one-column steps below. */
.services-grid--four { grid-template-columns: repeat(4, 1fr); }

.svc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--sp-8);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  color: var(--text);
  box-shadow: var(--sh-1);
  transition: border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.svc-card:hover {
  border-color: var(--green-line);
  box-shadow: var(--sh-2);
  transform: translateY(-3px);
}

.svc-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--sp-5);
}
.svc-icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  flex-shrink: 0;
  border-radius: var(--r-md);
  background: var(--green-weak);
  color: var(--green);
  transition: background var(--dur) var(--ease);
}
.svc-icon-box svg { width: 22px; height: 22px; }
.svc-card:hover .svc-icon-box { background: rgba(20, 122, 69, 0.14); }

.svc-arrow { color: var(--text-4); transition: color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.svc-arrow svg { width: 16px; height: 16px; }
.svc-card:hover .svc-arrow { color: var(--green); transform: translate(2px, -2px); }

.svc-title { font-size: var(--fs-lg); font-weight: 800; color: var(--text); }
.svc-body  { font-size: var(--fs-base); color: var(--text-3); margin-top: var(--sp-2); }
.svc-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  margin-top: auto;
  padding-top: var(--sp-5);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green);
}
.svc-card:hover .svc-link { color: var(--green-hover); }

.svc-jumpnav { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; margin-top: var(--sp-8); }
.svc-jump {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding-inline: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-full);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-2);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.svc-jump:hover { border-color: var(--green); color: var(--green); background: var(--green-weak); }

/* ───────────────────────────────────────────────────────────────
   11  CARD GRIDS
   ─────────────────────────────────────────────────────────────── */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
.feature-grid--2 { grid-template-columns: repeat(2, 1fr); }
.feature-grid--4 { grid-template-columns: repeat(4, 1fr); }

.feature-card {
  padding: var(--sp-8);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.feature-card:hover { border-color: var(--green-line); box-shadow: var(--sh-2); transform: translateY(-3px); }
.feature-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  margin-bottom: var(--sp-5);
  border-radius: var(--r-md);
  background: var(--green-weak);
  color: var(--green);
}
.feature-card-icon svg { width: 22px; height: 22px; }
.feature-card h3 { font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
.feature-card p  { font-size: var(--fs-base); color: var(--text-3); line-height: 1.65; }

.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }
.trust-item {
  padding: var(--sp-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}
.trust-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  margin-bottom: var(--sp-4);
  border-radius: var(--r-md);
  background: var(--green-weak);
  color: var(--green);
}
.trust-item-icon svg { width: 20px; height: 20px; }
.trust-item h3 { font-size: var(--fs-base); margin-bottom: var(--sp-1); }
.trust-item p  { font-size: var(--fs-sm); color: var(--text-3); line-height: 1.6; }

.value-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); }
.value-card {
  display: flex;
  gap: var(--sp-4);
  padding: var(--sp-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}
.value-card-num { font-size: var(--fs-sm); font-weight: 900; color: var(--green); flex-shrink: 0; }
.value-card h3 { font-size: var(--fs-base); margin-bottom: var(--sp-1); }
.value-card p  { font-size: var(--fs-sm); color: var(--text-3); line-height: 1.6; }

/* ───────────────────────────────────────────────────────────────
   12  SPLIT SECTIONS
   ─────────────────────────────────────────────────────────────── */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.split + .split { margin-top: var(--sp-20); }
.split--reverse .split-media { order: 2; }

.split-body h2 { font-size: var(--fs-2xl); margin-bottom: var(--sp-4); }
.split-body p  { font-size: var(--fs-base); color: var(--text-3); margin-bottom: var(--sp-4); }

/* ── The single media frame ──
   Every image container on the site inherits exactly this: same radius,
   same hairline, same shadow, same clipping. Variants may change the
   aspect ratio or add padding for diagrams — never the frame itself. */
/* Photographs: a rounded crop and nothing else — no surface behind
   them, no shadow, no hairline. The picture is the element. */
.split-media-img,
.project-card,
.battery-img-wrap,
.media {
  border-radius: var(--r-lg);
  overflow: hidden;
}

/* The spec table is a real surface and keeps one. Artwork does not:
   diagrams and charts now carry their own transparency and sit
   directly on the section, with no panel and no padding behind them. */
/* The spec table is a real surface and keeps one. Figures do not:
   the artwork carries its own transparency and sits on the section. */
.spec-table-wrap {
  background: var(--surface);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.split-media-img {
  position: relative;
  aspect-ratio: 4 / 3;
}
.split-media-img img { width: 100%; height: 100%; object-fit: cover; }

/* No edge feather and no hairline: a photograph is defined by its own
   rounded crop and a soft shadow, nothing drawn around it. */
.split-media-img.is-chart   { aspect-ratio: 16 / 11; }
.split-media-img.is-chart img   { object-fit: contain; }
/* Portrait artwork: drop the fixed ratio and let it size naturally,
   centred on its panel, so a tall graphic is not letterboxed. */
.split-media-img.is-portrait {
  aspect-ratio: auto;
  display: grid;
  place-items: center;
}
.split-media-img.is-portrait img {
  width: 100%;
  height: auto;
  max-height: 36rem;
  object-fit: contain;
}

.split-media-img.is-diagram { aspect-ratio: 4 / 3; }
.split-media-img.is-diagram img { object-fit: contain; }

.checklist { display: flex; flex-direction: column; margin-top: var(--sp-6); }
.checklist li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding-block: var(--sp-3);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-base);
  color: var(--text-2);
  line-height: 1.55;
}
.checklist li:first-child { border-top: 1px solid var(--line); }
.checklist li svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--green); margin-top: 4px; }

/* ───────────────────────────────────────────────────────────────
   13  PROCESS TIMELINE
   ─────────────────────────────────────────────────────────────── */
.process { background: var(--bg-alt); padding-block: var(--section-y); }
.process-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-5);
}
.process-track--4 { grid-template-columns: repeat(4, 1fr); }
.process-track::before {
  content: '';
  position: absolute;
  top: 27px;
  left: 10%; right: 10%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(to right, var(--green-line), var(--line));
}
.process-step { position: relative; text-align: center; padding-inline: var(--sp-2); }
.process-node {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px; height: 54px;
  margin: 0 auto var(--sp-5);
  border-radius: 50%;
  background: var(--surface);
  border: 1.5px solid var(--green-line);
  font-size: var(--fs-base);
  font-weight: 900;
  color: var(--green);
  font-variant-numeric: tabular-nums;
  box-shadow: var(--sh-1);
  transition: box-shadow var(--dur-slow) var(--ease), border-color var(--dur-slow) var(--ease);
}
.process-step.is-visible .process-node {
  border-color: var(--green);
  box-shadow: 0 0 0 6px var(--green-weak);
}
.process-step h3 { font-size: var(--fs-base); margin-bottom: var(--sp-2); }
.process-step p  { font-size: var(--fs-sm); color: var(--text-3); line-height: 1.6; }

/* ───────────────────────────────────────────────────────────────
   14  FORMS
   ─────────────────────────────────────────────────────────────── */
.contact { background: var(--bg); padding-block: var(--section-y); }
.contact--alt { background: var(--bg-alt); }
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.contact-h2 { font-size: var(--fs-2xl); margin-bottom: var(--sp-4); }
.contact-body { font-size: var(--fs-base); color: var(--text-3); margin-bottom: var(--sp-6); }

.contact-trust-list { display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-8); }
.contact-trust-item { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-base); color: var(--text-2); }
.contact-trust-item svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--green); }

.contact-info-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.contact-info-list--spaced { margin-top: var(--sp-8); }
.contact-info-item { display: flex; align-items: center; gap: var(--sp-3); min-height: 44px; font-size: var(--fs-base); color: var(--text-3); }
.contact-info-item svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--green); }
.contact-info-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  transition: color var(--dur) var(--ease);
}
.contact-info-link:hover { color: var(--green); }

.contact-card {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
}

.contact-form { display: block; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.form-group { margin-bottom: var(--sp-4); }
.form-label { display: block; margin-bottom: var(--sp-2); font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.form-required { color: var(--green); margin-left: 2px; }

.form-input {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-sm);
  font-size: var(--fs-base); /* 16px — stops iOS zoom-on-focus */
  color: var(--text);
  appearance: none;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.form-input:hover { border-color: var(--text-4); }
.form-input:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-weak);
}
/* Pointer focus gets the border treatment only; keyboard focus keeps
   the global outline on top of it. */
.form-input:focus:not(:focus-visible) { outline: none; }
.form-input::placeholder { color: var(--text-4); }

.form-textarea { min-height: 7rem; resize: vertical; line-height: 1.6; }
.form-select {
  cursor: pointer;
  padding-right: var(--sp-10);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235B6B63' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-4) center;
}

.form-input[aria-invalid="true"] { border-color: var(--err); }
.form-error {
  display: none;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--err);
}
.form-error.is-shown { display: flex; }
.form-error svg { width: 14px; height: 14px; flex-shrink: 0; }

.form-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  width: 100%;
  min-height: 52px;
  margin-top: var(--sp-2);
  background: var(--green);
  color: #FFFFFF;
  font-size: var(--fs-base);
  font-weight: 800;
  border-radius: var(--r-sm);
  box-shadow: var(--sh-1);
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.form-submit:hover { background: var(--green-hover); box-shadow: 0 6px 20px -8px var(--green-glow); }
.form-submit[disabled] { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
.form-submit .spinner {
  width: 16px; height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #FFFFFF;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.form-disclaimer { margin-top: var(--sp-4); font-size: var(--fs-sm); color: var(--text-4); text-align: center; line-height: 1.5; }

.form-note {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4);
  margin-bottom: var(--sp-6);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  line-height: 1.6;
}
.form-note svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; }
.form-note--ok  { background: var(--green-weak);       border: 1px solid var(--green-line);       color: var(--green-hover); }
.form-note--err { background: rgba(180, 35, 24, 0.06); border: 1px solid rgba(180, 35, 24, 0.28); color: var(--err); }

/* ───────────────────────────────────────────────────────────────
   15  FAQ ACCORDION
   ─────────────────────────────────────────────────────────────── */
.faq-block { padding-block: var(--sp-12); background: var(--bg); }
.faq-block--first { padding-top: var(--sp-6); }

.faq-list { max-width: 52rem; margin-inline: auto; }
.faq-list--flush { margin: 0; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  width: 100%;
  min-height: 56px;
  padding-block: var(--sp-5);
  font-family: inherit;
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text);
  text-align: left;
  transition: color var(--dur) var(--ease);
}
.faq-q:hover { color: var(--green); }
.faq-icon { position: relative; width: 22px; height: 22px; flex-shrink: 0; }
.faq-icon::before,
.faq-icon::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: var(--green);
  border-radius: 1px;
}
.faq-icon::before { width: 14px; height: 2px; }
.faq-icon::after  { width: 2px; height: 14px; transition: transform var(--dur) var(--ease); }
.faq-item.is-open .faq-icon::after { transform: translate(-50%, -50%) scaleY(0); }

.faq-a { max-height: 0; overflow: hidden; transition: max-height var(--dur-slow) var(--ease); }
.faq-a-inner { padding-bottom: var(--sp-5); max-width: 46rem; font-size: var(--fs-base); color: var(--text-3); line-height: var(--lh-body); }
.faq-a-inner a { color: var(--green); text-decoration: underline; text-underline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .faq-a { transition: none; } }

/* ───────────────────────────────────────────────────────────────
   16  FINANCING
   ─────────────────────────────────────────────────────────────── */
.finance-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); align-items: stretch; }
.finance-card {
  display: flex;
  flex-direction: column;
  padding: var(--sp-8);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-1);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.finance-card:hover { border-color: var(--green-line); box-shadow: var(--sh-2); transform: translateY(-3px); }
.finance-card--featured { border-color: var(--green); box-shadow: var(--sh-2); }
.finance-badge {
  align-self: flex-start;
  margin-bottom: var(--sp-5);
  padding: 5px var(--sp-3);
  border-radius: var(--r-full);
  background: var(--green);
  color: #FFFFFF;
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.finance-badge--outline { background: transparent; border: 1px solid var(--green-line); color: var(--green); }
.finance-card h3 { font-size: var(--fs-xl); margin-bottom: var(--sp-2); }
.finance-card-tag { font-size: var(--fs-sm); font-weight: 700; color: var(--green); margin-bottom: var(--sp-5); }
.finance-card p { font-size: var(--fs-base); color: var(--text-3); margin-bottom: var(--sp-5); }
.finance-card .checklist { margin-top: auto; }
.finance-card .checklist li { font-size: var(--fs-sm); }

/* ───────────────────────────────────────────────────────────────
   17  PROJECTS
   ─────────────────────────────────────────────────────────────── */
.project-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
.project-card {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--surface-2);
  transition: transform var(--dur) var(--ease);
}
.project-card:hover { transform: translateY(-3px); }
.project-card:hover .project-card-overlay { background: linear-gradient(to top,
    rgba(12, 26, 19, 0.96) 0%,
    rgba(12, 26, 19, 0.90) 38%,
    rgba(12, 26, 19, 0.68) 60%,
    rgba(12, 26, 19, 0.30) 80%,
    transparent 100%); }
.project-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease-out); }
.project-card:hover img { transform: scale(1.05); }
.project-card-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--sp-6);
  /* Measured: over a bright photo the caption needs ~0.85 behind it to
     clear 4.5:1. The old ramp gave 0.2 where the title sat, which put
     the headline at 2.9:1 and the category label at 1.0:1. */
  background: linear-gradient(to top,
    rgba(12, 26, 19, 0.94) 0%,
    rgba(12, 26, 19, 0.88) 34%,
    rgba(12, 26, 19, 0.62) 56%,
    rgba(12, 26, 19, 0.24) 78%,
    transparent 100%);
  /* the caption must not swallow the click meant for the image below it */
  pointer-events: none;
}
/* A solid chip rather than tinted text. A label sitting directly on a
   photograph is at the mercy of whatever is behind it — this one is
   white on brand green at a fixed 5.39:1 no matter the image. */
.project-card-cat {
  align-self: flex-start;
  margin-bottom: var(--sp-3);
  padding: 4px var(--sp-3);
  border-radius: var(--r-full);
  background: var(--green);
  color: #FFFFFF;
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.project-card-title {
  font-size: var(--fs-lg);
  color: #FFFFFF;
  /* insurance for the odd bright pixel the scrim does not fully cover */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.project-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  color: #E6EDE9;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.project-card-meta span::after { content: '·'; margin-left: var(--sp-2); opacity: 0.6; }
.project-card-meta span:last-child::after { content: ''; }

@media (prefers-reduced-motion: reduce) { .project-card:hover img { transform: none; } }

/* ───────────────────────────────────────────────────────────────
   18  ELECTRICAL
   ─────────────────────────────────────────────────────────────── */
.spec-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.spec-table { min-width: 44rem; font-size: var(--fs-base); }
.spec-table caption { padding: var(--sp-5) var(--sp-6) 0; font-size: var(--fs-sm); color: var(--text-4); text-align: left; }
.spec-table th,
.spec-table td { padding: var(--sp-4) var(--sp-6); text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.spec-table thead th {
  background: var(--bg-alt);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green);
  white-space: nowrap;
}
.spec-table tbody th { font-weight: 800; color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.spec-table td { color: var(--text-3); line-height: 1.55; }
.spec-table tbody tr:last-child th,
.spec-table tbody tr:last-child td { border-bottom: none; }
.spec-table tbody tr:hover { background: var(--bg-alt); }
.spec-verdict { font-weight: 700; }
.spec-verdict--no  { color: var(--err); }
.spec-verdict--ok  { color: var(--green); }
.spec-verdict--mid { color: var(--solar-ink); }

.figure-wide {
  max-width: 46rem;
  margin: 0 auto var(--sp-8);
}
.figure-wide img { width: 100%; height: auto; }
.figure-cap {
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--text-3);
  text-align: center;
  line-height: 1.55;
  text-wrap: pretty;
}
.split-media .figure-wide { margin: var(--sp-4) 0 0; }

.callout {
  display: flex;
  gap: var(--sp-4);
  padding: var(--sp-6);
  margin-top: var(--sp-8);
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--warn);
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
}
.callout-icon { flex-shrink: 0; color: var(--warn); }
.callout-icon svg { width: 22px; height: 22px; }
.callout h3 { font-size: var(--fs-base); margin-bottom: var(--sp-2); }
.callout p  { font-size: var(--fs-sm); color: var(--text-3); line-height: 1.65; margin: 0; }

.sign-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-1) var(--sp-8); }
.sign-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding-block: var(--sp-3);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-base);
  color: var(--text-2);
  line-height: 1.5;
}
.sign-list li svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--warn); margin-top: 3px; }

.ladder { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
.ladder-card {
  padding: var(--sp-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}
.ladder-card--current { border-color: var(--green); box-shadow: var(--sh-2); }
.ladder-rank {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-4);
}
.ladder-rank svg { width: 16px; height: 16px; }
.ladder-card--current .ladder-rank { color: var(--green); }
.ladder-card h3 { font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
.ladder-card p  { font-size: var(--fs-sm); color: var(--text-3); line-height: 1.65; }

/* ───────────────────────────────────────────────────────────────
   19  HOME — BATTERY & ENGINEERING BLOCKS
   ─────────────────────────────────────────────────────────────── */
.battery { background: var(--bg-alt); padding-block: var(--section-y); }
.battery-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.battery-eyebrow { color: var(--green); }
.battery-h2 { font-size: var(--fs-2xl); margin-bottom: var(--sp-4); }
.battery-body { font-size: var(--fs-base); color: var(--text-3); margin-bottom: var(--sp-3); }
.battery-list { display: flex; flex-direction: column; margin-top: var(--sp-6); }
.battery-list-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-block: var(--sp-3);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-base);
  color: var(--text-2);
}
.battery-list-item:first-child { border-top: 1px solid var(--line); }
.battery-list-item svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--green); }
.battery-cta { margin-top: var(--sp-8); }

.battery-img-wrap {
  position: relative;
  height: clamp(18rem, 42vw, 32rem);
}
.battery-img-wrap img { width: 100%; height: 100%; object-fit: cover; }

.engineering { background: var(--bg); padding-block: var(--section-y); }
/* Copy column carries the weight; the visual is a tall portrait, so it
   gets the narrower side and is centred against the text block. */
.engineering-grid {
  display: grid;
  grid-template-columns: 1.3fr 0.85fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

/* ── Engineering visual ── */

/* Soft brand glow so a tall graphic reads as placed, not dropped in */

.engineering-h2 { font-size: var(--fs-2xl); margin-bottom: var(--sp-4); }
.engineering-body { font-size: var(--fs-base); color: var(--text-3); margin-bottom: var(--sp-3); }

.engineering-note {
  margin-top: var(--sp-8);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm);
  color: var(--text-4);
}

/* ───────────────────────────────────────────────────────────────
   19b  MONITORING APP
   ─────────────────────────────────────────────────────────────── */
/* White: on both pages this follows a tinted section, and two tinted
   bands in a row read as one long block. */
.app-section { background: var(--bg); padding-block: var(--section-y); }
.app-grid {
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}

/* Phone frame — pure CSS, no chrome image to download */
.app-phone {
  position: relative;
  justify-self: center;
  width: min(19rem, 100%);
  padding: 10px;
  border-radius: 2.5rem;
  background: linear-gradient(160deg, #1B2A22 0%, #0C1A13 60%);
  box-shadow: var(--sh-3);
}
.app-phone::before {
  content: '';
  position: absolute;
  top: 20px; left: 50%;
  transform: translateX(-50%);
  width: 76px; height: 5px;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.22);
  z-index: 2;
}
.app-phone img {
  width: 100%;
  border-radius: 1.9rem;
  display: block;
}

/* ───────────────────────────────────────────────────────────────

.cta-inline { display: flex; justify-content: center; margin-top: var(--sp-10); }

.figure-wide--full { max-width: none; }

/* ───────────────────────────────────────────────────────────────
   20  CTA BANDS — the ink anchors
   ─────────────────────────────────────────────────────────────── */
.cta-strip { background: var(--ink); padding-block: var(--sp-16); }
.cta-strip-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-10); }
.cta-strip-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  flex-shrink: 0;
  border-radius: var(--r-md);
  background: rgba(79, 203, 128, 0.14);
  color: var(--green-on-ink);
}
.cta-strip-text { flex: 1; }
.cta-strip-text h2 { font-size: var(--fs-2xl); color: var(--on-ink); }
.cta-strip-text p { margin-top: var(--sp-2); font-size: var(--fs-base); color: var(--on-ink-2); }
.cta-strip .btn-primary {
  flex-shrink: 0;
  background: var(--green-on-ink);
  color: var(--ink);
}
.cta-strip .btn-primary:hover { background: #6FE09B; color: var(--ink); box-shadow: none; }

.cta-band {
  position: relative;
  padding-block: var(--section-y);
  background: var(--bg-alt);
  border-top: 1px solid var(--line);
  overflow: hidden;
}
.cta-band::before {
  content: '';
  position: absolute;
  bottom: -15rem; left: 50%;
  transform: translateX(-50%);
  width: 56rem; height: 31rem;
  background: radial-gradient(ellipse, rgba(20, 122, 69, 0.11) 0%, transparent 65%);
  pointer-events: none;
}
.cta-band-inner { position: relative; z-index: 1; max-width: 46rem; margin-inline: auto; text-align: center; }
.cta-band h2 { font-size: var(--fs-3xl); }
.cta-band p { max-width: 36rem; margin: var(--sp-5) auto var(--sp-8); font-size: var(--fs-md); color: var(--text-3); }
.cta-band-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; }

/* ───────────────────────────────────────────────────────────────
   21  PAGE HERO (inner pages)
   ─────────────────────────────────────────────────────────────── */
.page-hero {
  position: relative;
  padding-block: calc(var(--nav-h) + var(--sp-16)) var(--sp-16);
  background: var(--bg-alt);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  top: -12rem; right: -6rem;
  width: 44rem; height: 44rem;
  background: radial-gradient(circle, rgba(20, 122, 69, 0.12) 0%, transparent 62%);
  pointer-events: none;
}
/* Inner-page banner. The photograph is fully present on the right and
   washed out to near-solid under the copy on the left, so the heading
   keeps its dark-on-light contrast without a dark scrim on every page. */
.page-hero--image { border-bottom: 1px solid var(--line); }
.page-hero--image::before { display: none; }   /* the photo replaces the glow */
.page-hero-bg { position: absolute; inset: 0; z-index: 0; }
.page-hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.page-hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg,
      rgba(255, 255, 255, 0.55) 0%,
      rgba(250, 252, 251, 0.42) 42%,
      rgba(246, 250, 247, 0.14) 70%,
      rgba(244, 248, 245, 0.00) 100%),
    linear-gradient(to bottom, rgba(255,255,255,0.10) 0%, transparent 70%);
}
.page-hero--image .page-hero-inner { max-width: 44rem; }

/* ── The legibility guarantee ──
   Tinting the whole frame could never be reliable: it is fixed to the
   banner geometry while the copy sits wherever it sits, so a dark
   patch of photograph could always drift under a line of text. This
   scrim is anchored to the copy block itself and feathers out to
   nothing, so the text always has a light bed and the photograph
   keeps its edges. */
.page-hero--image .page-hero-inner::before {
  content: '';
  position: absolute;
  /* A blurred solid, not a gradient. A radial centred on the copy can
     never be dense at the block's own top edge — that is where its
     radius runs out — which is why the breadcrumb sat at 1.0:1 while
     the headline was fine. A solid fill keeps the whole block evenly
     covered and the blur moves the entire falloff outside the text. */
  inset: -4.5rem -5rem -2.5rem;
  z-index: -1;
  pointer-events: none;
  border-radius: 40% / 34%;
  /* 0.68, not the 0.93 this started at. Banner copy is near-black ink, so
     the bed does not need to be opaque to clear AA — swept 0.93 → 0.56 and
     measured the darkest 5% behind every line on every banner: 0.93 gave
     6.64:1 but flattened the photograph to a white patch, 0.56 held 4.51:1
     with no headroom left. 0.68 measures 5.18:1 at its worst, which leaves
     room for the client to swap in a darker photograph later. */
  background: rgba(255, 255, 255, 0.68);
  filter: blur(42px);
}
/* Left-aligned copy needs no origin shift: .page-hero-inner is already
   a left-hand box, so a centred ellipse over it is biased left anyway.
   Moving the origin off-centre breaks farthest-side — the radius is
   then measured to the far side, so the near edge never reaches
   transparent and cuts off hard. Measured: a 48-level step. */
.page-hero--image:not(.page-hero--center) .page-hero-inner::before {
  inset: -4.5rem -7rem -2.5rem -5rem;
}
/* Over a photograph the mid-green eyebrow can drop below AA on the
   lightest patches, so image banners use the darker step. */
.page-hero--image .section-eyebrow { color: var(--green-hover); }
.page-hero--image .breadcrumb { color: var(--text-2); }
.page-hero--image .breadcrumb .current { color: var(--text-2); }
.page-hero--image .section-eyebrow::before { background: var(--green-hover); }
/* Over a photograph the mid-tone body colour drops below AA on the
   darkest patches — measured 3.41:1 on about.php. The banner
   sub-heading uses the full-strength ink instead. */
.page-hero--image .page-hero-sub { color: var(--text); }
/* Centred variants need an even wash — text sits over the whole width */
.page-hero--image.page-hero--center .page-hero-bg::after {
  background:
    radial-gradient(ellipse 60% 72% at 50% 46%,
      rgba(255, 255, 255, 0.46) 0%,
      rgba(252, 254, 253, 0.32) 52%,
      rgba(246, 250, 247, 0.06) 100%),
    linear-gradient(to bottom, rgba(255,255,255,0.06) 0%, rgba(244,248,245,0.10) 100%);
}
.page-hero--image.page-hero--center .page-hero-inner { max-width: 46rem; }

@media (max-width: 900px) {
  .page-hero--image .page-hero-bg::after {
    background: linear-gradient(to bottom,
      rgba(255, 255, 255, 0.86) 0%,
      rgba(246, 250, 247, 0.78) 50%,
      rgba(244, 248, 245, 0.84) 100%);
  }
}
.page-hero-inner { position: relative; z-index: 2; max-width: 46rem; }
.page-hero--center .page-hero-inner { margin-inline: auto; text-align: center; }
.page-hero--center .section-eyebrow,
.page-hero--center .breadcrumb { justify-content: center; }
.page-hero-h1 { font-size: var(--fs-4xl); font-weight: 900; letter-spacing: -0.045em; }
.page-hero-sub { max-width: 36rem; margin-top: var(--sp-5); font-size: var(--fs-md); color: var(--text-2); }
.page-hero--center .page-hero-sub { margin-inline: auto; }
.page-hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-8); }
.page-hero--center .page-hero-actions { justify-content: center; }

.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-4);
}
.breadcrumb a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  transition: color var(--dur) var(--ease);
}
.breadcrumb a:hover { color: var(--green); }
.breadcrumb .sep { opacity: 0.6; }
.breadcrumb .current { color: var(--text-3); }

/* ───────────────────────────────────────────────────────────────
   22  FOOTER
   ─────────────────────────────────────────────────────────────── */
.footer { background: var(--ink); padding-block: var(--sp-16) var(--sp-8); }
.footer-grid {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--sp-10);
}
.footer-brand { min-width: 0; }
.footer-col   { min-width: 0; }
.footer-logo { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 44px; margin-bottom: var(--sp-3); }
.footer-logo-sbz,
.footer-logo-solar { font-size: 1.0625rem; font-weight: 800; letter-spacing: -0.02em; }
.footer-logo-sbz   { color: var(--on-ink); }
.footer-logo-solar { color: var(--green-on-ink); font-style: italic; }
.footer-tagline { max-width: 22rem; margin-bottom: var(--sp-5); font-size: var(--fs-sm); color: var(--on-ink-3); line-height: 1.65; }

.footer-contact { display: flex; flex-direction: column; }
.footer-contact-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  font-size: var(--fs-sm);
  color: var(--on-ink-2);
  transition: color var(--dur) var(--ease);
}
.footer-contact-item:hover { color: var(--on-ink); }
.footer-contact-item svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--green-on-ink); }

.footer-col-title {
  margin-bottom: var(--sp-5);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green-on-ink);
}
.footer-links { display: flex; flex-direction: column; }
.footer-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--fs-sm);
  color: var(--on-ink-3);
  transition: color var(--dur) var(--ease);
}
.footer-link:hover { color: var(--on-ink); }

.footer-social { display: flex; gap: var(--sp-3); margin-top: var(--sp-5); }
.footer-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line-ink);
  color: var(--on-ink-3);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.footer-social-link:hover { border-color: var(--green-on-ink); color: var(--green-on-ink); }

.footer-bottom {
  max-width: var(--container);
  margin: var(--sp-12) auto 0;
  padding: var(--sp-6) var(--gutter) 0;
  border-top: 1px solid var(--line-ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.footer-copy { font-size: var(--fs-sm); color: var(--on-ink-3); }
.footer-legal { display: flex; gap: var(--sp-5); }
.footer-legal-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--fs-sm);
  color: var(--on-ink-3);
  transition: color var(--dur) var(--ease);
}
.footer-legal-link:hover { color: var(--on-ink); }

/* ── Image reveal: an unmask wipe rather than a fade, so photographs
      arrive like a print developing instead of a slideshow ── */
/* The clip goes on the inner image, never on the observed container.
   A clip-path on the target itself zeroes its intersection area, so
   IntersectionObserver would never fire for the element it is hiding. */
.img-reveal > img { clip-path: inset(0 0 100% 0); opacity: 0; }
.img-reveal.is-visible > img {
  clip-path: inset(0 0 0 0);
  opacity: 1;
  transition: clip-path 0.85s var(--ease-out), opacity 0.5s ease;
}

/* ── Pointer tilt on framed media ── */
.tilt {
  --rx: 0deg;
  --ry: 0deg;
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 420ms var(--ease-out);
  will-change: transform;
}
.tilt.is-tilting { transition: transform 90ms linear; }

@media (prefers-reduced-motion: reduce) {
  .img-reveal > img { clip-path: none; opacity: 1; transition: none; }
  .tilt { transform: none !important; }
}

/* ───────────────────────────────────────────────────────────────
   22b  LIGHTBOX

   The dialog is a full-viewport flex container that centres its own
   content. It deliberately does NOT rely on the UA's
   `dialog { margin: auto }` — the global reset in section 01 zeroes
   every margin, which pinned the dialog to inset:0 and parked it in
   the top-left corner.
   ─────────────────────────────────────────────────────────────── */
.lightbox {
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  overflow: hidden;
}
.lightbox[open] {
  display: flex;
  align-items: center;
  justify-content: center;
  /* reserve the gutters the controls sit in */
  padding: clamp(4rem, 9vh, 5.5rem) clamp(3.5rem, 8vw, 6rem);
}
.lightbox::backdrop {
  background: rgba(8, 20, 14, 0.9);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.lightbox-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  max-width: 100%;
  max-height: 100%;
  margin: 0;
}
.lightbox-figure img {
  /* auto width + capped height keeps the true aspect ratio, so the
     picture is genuinely centred rather than letterboxed inside a
     full-width box */
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100dvh - 13rem);
  object-fit: contain;
  border-radius: var(--r-lg);
  background: var(--ink);
}
.lightbox-figure figcaption {
  max-width: 46rem;
  font-size: var(--fs-sm);
  color: var(--on-ink-2);
  text-align: center;
  text-wrap: pretty;
}

/* Controls are absolute inside the now full-viewport dialog */
.lightbox-close,
.lightbox-nav {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.lightbox-close:hover,
.lightbox-nav:hover { background: rgba(255, 255, 255, 0.2); border-color: var(--green-on-ink); }
.lightbox-close svg,
.lightbox-nav svg { width: 22px; height: 22px; }
.lightbox-close { top: var(--sp-5); right: var(--sp-5); }
.lightbox-prev  { left: var(--sp-4);  top: 50%; transform: translateY(-50%); }
.lightbox-next  { right: var(--sp-4); top: 50%; transform: translateY(-50%); }
.lightbox :focus-visible { outline-color: var(--green-on-ink); }

@media (max-width: 768px) {
  .lightbox[open] { padding: 4.5rem var(--sp-3) 5.5rem; }
  .lightbox-figure img { max-height: calc(100dvh - 15rem); }
  /* arrows move to the bottom so they never sit over the picture */
  .lightbox-prev  { left: 50%;  top: auto; bottom: var(--sp-4); transform: translateX(calc(-100% - 8px)); }
  .lightbox-next  { right: 50%; top: auto; bottom: var(--sp-4); transform: translateX(calc(100% + 8px)); }
  .lightbox-close { top: var(--sp-3); right: var(--sp-3); }
}

/* ───────────────────────────────────────────────────────────────
   23  MOTION
   ─────────────────────────────────────────────────────────────── */
.reveal, .reveal-left, .reveal-right {
  opacity: 0;
  transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out);
}
.reveal       { transform: translateY(20px); }
.reveal-left  { transform: translateX(-24px); }
.reveal-right { transform: translateX(24px); }
.reveal.is-visible,
.reveal-left.is-visible,
.reveal-right.is-visible { opacity: 1; transform: none; }

/* Below the point where splits stack, slide vertically instead. A
   horizontal offset on a narrow viewport pushes past the right edge
   and creates a phantom scrollbar before the element animates in. */
@media (max-width: 1024px) {
  .reveal-left, .reveal-right { transform: translateY(20px); }
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-right { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ───────────────────────────────────────────────────────────────
   24  RESPONSIVE
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .nav-links { display: none; }
  .nav-right .nav-phone,
  .nav-right .btn-nav { display: none; }
  .nav-toggle { display: flex; }
}

@media (max-width: 1024px) {
  .battery-grid,
  .engineering-grid { grid-template-columns: 1fr; }

  .app-grid         { grid-template-columns: 1fr; }
  .app-phone        { order: -1; }
  .services-header  { grid-template-columns: 1fr; gap: var(--sp-4); }
  .services-grid,
  .services-grid--four { grid-template-columns: repeat(2, 1fr); }
  .feature-grid,
  .feature-grid--4  { grid-template-columns: repeat(2, 1fr); }
  .trust-grid       { grid-template-columns: repeat(2, 1fr); }
  .ladder           { grid-template-columns: 1fr; }
  .split            { grid-template-columns: 1fr; }
  .split--reverse .split-media { order: 0; }
  .split + .split   { margin-top: var(--sp-12); }
  .contact-grid     { grid-template-columns: 1fr; }
  .finance-grid     { grid-template-columns: 1fr; max-width: 30rem; margin-inline: auto; }
  .project-grid     { grid-template-columns: repeat(2, 1fr); }
  .process-track    { grid-template-columns: repeat(2, 1fr); gap: var(--sp-8) var(--sp-5); }
  .process-track::before { display: none; }

  .trust-bar-grid   { grid-template-columns: repeat(2, 1fr); }
  .trust-cell:nth-child(even) { border-right: none; }
  .trust-cell:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .footer-grid      { grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
}

@media (max-width: 768px) {
  /* nudge the small uppercase labels up a step on phones */
  .section-eyebrow,
  .hero-eyebrow,
  .footer-col-title,
  .project-card-cat,
  .finance-badge   { font-size: 0.8125rem; }

  .hero            { padding-block: calc(var(--nav-h) + var(--sp-10)) var(--sp-12); }
  /* :not() because the grid carries both classes — a plain
     .services-grid rule here would out-order the two-column rule above
     and drop the four-up row into a single column on tablets. */
  .services-grid:not(.services-grid--four) { grid-template-columns: 1fr; }
  .feature-grid,
  .feature-grid--2,
  .feature-grid--4 { grid-template-columns: 1fr; }
  .trust-grid      { grid-template-columns: 1fr; }
  .project-grid    { grid-template-columns: 1fr; }
  .process-track   { grid-template-columns: 1fr; }
  .value-list      { grid-template-columns: 1fr; }
  .sign-list       { grid-template-columns: 1fr; }

  .hero            { min-height: 0; }
  .form-row        { grid-template-columns: 1fr; gap: 0; }
  .cta-strip-inner { flex-direction: column; text-align: center; }
  .cta-strip .btn-primary { width: 100%; }
  .footer-bottom   { flex-direction: column; text-align: center; }
}

@media (max-width: 560px) {
  /* The four-up row holds 2x2 all the way down to here. Below it two
     columns leave roughly 145px for copy, and body text has a 16px floor,
     so a line would be about ten characters. One column from here down. */
  .services-grid--four { grid-template-columns: 1fr; }
  .trust-bar-grid { grid-template-columns: 1fr; }
  .trust-cell { border-right: none; border-bottom: 1px solid var(--line); }
  .trust-cell:last-child { border-bottom: none; }
  .footer-grid { grid-template-columns: 1fr; }
}

@media print {
  .nav, .nav-mobile, .cta-strip, .cta-band, .skip-link { display: none; }
  body { background: #fff; color: #000; }
}