/* ============================================================
   POWERGY / style.css  v3
   Black-first, premium. Inspired by Tesla / Apple discipline.
   Brand accent #E94F37, used sparingly: primary actions and small signals.
   ============================================================ */

/* Inter, served from the theme (audit 25, 19 Oct): no request to Google, so no visitor
   IP address goes to Google and nothing blocks the first paint. One variable file covers
   weights 400 to 600. Licence: assets/fonts/OFL.txt. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Light by default (Dan and Harry, 12 Nov): white and Apple's light grey, with
     black kept for photo heroes, photo bands, the footer and a few accent cards.
     Those dark places take the dark set of these tokens under .on-dark below. */
  --bg: #ffffff;
  --surface: #f5f5f7;
  --card: #f5f5f7;
  --border: rgba(0, 0, 0, 0.1);
  --text: #1d1d1f;
  --muted: #6e6e73;
  --accent: #e94f37;
  --accent-dark: #cf3f28;
  /* Audit 03 (19 Oct): white text needs 4.5:1, which the brand orange (3.7:1) does not
     reach, so buttons and badges with white text sit on these deeper shades. */
  --accent-btn: #c93c25;       /* 5.05:1 with white */
  --accent-btn-hover: #b8361f; /* 5.86:1 with white */
  --light-bg: #f5f5f7;
  --light-text: #1d1d1f;
  --light-muted: #52525a;
  --radius: 16px;
  --font: "Inter", -apple-system, "Helvetica Neue", sans-serif;

  /* Type scale. Headings use their own clamp() sizes below; everything else
     picks one of these steps rather than a one-off value. */
  --fs-xs: 0.78rem;      /* kickers, tags, meta */
  --fs-sm: 0.88rem;      /* captions, small print, form hints */
  --fs-nav: 0.92rem;     /* navigation and header actions */
  --fs-body-sm: 0.95rem; /* card and list text */
  --fs-body: 1rem;       /* body copy (17px) */
  --fs-md: 1.08rem;      /* card titles, emphasised body */
  --fs-lead: 1.18rem;    /* introductions */
  --fs-h4: 1.35rem;      /* small headings */
  --fs-h3: 1.6rem;       /* sub-section headings */

  --strip: 34px;         /* recognition strip above the header */
}

/* One accent site-wide. The Tesla and Sigenergy pages used to swap it for
   the manufacturer's colour; their logos carry the brand instead. */

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

.container { max-width: 1160px; margin: 0 auto; padding: 0 24px; }

h1, h2, h3 { font-weight: 600; line-height: 1.08; letter-spacing: -0.03em; }
strong, b { font-weight: 600; }
h1 { font-size: clamp(2.9rem, 6.4vw, 5.2rem); }
h2 { font-size: clamp(2rem, 4vw, 3.2rem); }
h3 { font-size: var(--fs-h4); letter-spacing: -0.02em; }

.accent { color: var(--accent); }
/* Two-tone headings: the highlighted line steps back in grey, not orange. */
h1 .accent, h2 .accent, h3 .accent { color: #b0b0b5; }
.light h1 .accent, .light h2 .accent, .light h3 .accent { color: #6e6e73; }
.ic { color: var(--muted); }
.light .ic { color: var(--light-muted); }
.ic.neutral { color: var(--muted); }

.kicker {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}

.lead {
  color: var(--muted);
  font-size: var(--fs-lead);
  line-height: 1.55;
  letter-spacing: -0.01em;
  max-width: 640px;
}

section { padding: 110px 0; }

/* ---------- Light sections ---------- */
.light { background: var(--light-bg); color: var(--light-text); }
.light .lead, .light .kicker { color: var(--light-muted); }
.light h1, .light h2, .light h3 { color: var(--light-text); }
.light .card-panel { background: #fff; border: none; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font);
  font-weight: 600;
  font-size: var(--fs-body-sm);
  letter-spacing: -0.01em;
  padding: 15px 32px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.22s ease;
}
.btn-primary { background: var(--accent-btn); color: #fff; }
.btn-primary:hover { background: var(--accent-btn-hover); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.38); }
.btn-ghost:hover { background: rgba(255,255,255,0.1); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.7); }
.btn-light { background: #fff; color: #111; }
.btn-light:hover { background: #e8e8ec; }
.light .btn-ghost { background: transparent; color: var(--light-text); box-shadow: inset 0 0 0 1.5px rgba(0,0,0,0.28); }
.light .btn-ghost:hover { background: rgba(0,0,0,0.05); box-shadow: inset 0 0 0 1.5px rgba(0,0,0,0.6); }

/* ---------- Recognition strip ---------- */
/* Sits above the header and scrolls away; the header sticks below it. */
.top-strip {
  background: #000;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: var(--fs-xs);
  color: #c7c7cc;
}
.top-strip-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--strip);
  list-style: none;
}
.top-strip li { display: flex; align-items: center; }
.top-strip li + li::before {
  content: "";
  width: 1px;
  height: 12px;
  margin: 0 22px;
  background: rgba(255, 255, 255, 0.18);
}
.top-strip a, .top-strip span { color: inherit; text-decoration: none; }
.top-strip li > a, .top-strip li > span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; transition: color 0.2s; }
.top-strip li > a:hover { color: #fff; }
.top-strip svg { flex-shrink: 0; }
.top-strip .top-strip-gold { color: #d4af37; font-weight: 600; }
.top-strip-short { display: none; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(10, 10, 12, 0.78);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 74px;
  gap: 24px;
}
.logo img { height: 24px; width: auto; }
.site-header .logo-mark img { height: 38px; }
.footer-brand .logo img { height: 28px; }

.nav { display: flex; align-items: center; gap: 26px; }
.nav a { font-size: var(--fs-nav); font-weight: 500; color: var(--muted); transition: color 0.2s; white-space: nowrap; }
.nav a:hover, .nav a.active { color: var(--text); }

/* Nav dropdown (full-width mega menu) */
.nav-drop { position: static; }
.nav-drop-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 26px 0;
  cursor: pointer;
}
.nav-drop-toggle svg { transition: transform 0.2s; opacity: 0.7; }
.nav-drop:hover .nav-drop-toggle svg, .nav-drop:focus-within .nav-drop-toggle svg { transform: rotate(180deg); }
.nav-drop:hover .nav-drop-toggle, .nav-drop:focus-within .nav-drop-toggle { color: var(--text); }
.nav-drop-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: rgba(12, 12, 15, 0.97);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  border-bottom: 1px solid var(--border);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 34px max(2px, calc((100% - 1112px) / 2 - 22px));
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.24s ease, transform 0.24s ease, visibility 0.24s;
  z-index: 110;
}
.nav-drop:hover .nav-drop-menu, .nav-drop:focus-within .nav-drop-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.nav-drop-menu a {
  display: block;
  padding: 20px 22px;
  border-radius: 14px;
  border: 1px solid transparent;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  transition: background 0.2s, border-color 0.2s;
}
.nav-drop-menu a:hover { background: rgba(255, 255, 255, 0.05); border-color: var(--border); }
.nav-drop-menu a.active { border-color: var(--border); background: rgba(255, 255, 255, 0.03); }
.nav-drop-menu a.active::after { content: ""; display: block; width: 26px; height: 2px; background: var(--accent); margin-top: 12px; border-radius: 1px; }
.nav-drop-menu a span { display: block; font-size: 0.85rem; color: var(--muted); font-weight: 400; margin-top: 5px; line-height: 1.45; }

/* "Solutions" opens its panel but goes nowhere, so it is a button. Kept at
   low specificity so the phone menu's .nav .nav-drop-toggle sizing wins. */
button.nav-drop-toggle {
  font-family: var(--font);
  font-size: var(--fs-nav);
  font-weight: 500;
  color: var(--muted);
  background: none;
  border: 0;
  transition: color 0.2s;
}
button.nav-drop-toggle.active { color: var(--text); }

/* Solutions mega panel: an Explore list on the left; hovering an entry shows
   its panel on the right (site.js moves .is-active, with a short delay so a
   diagonal path to the panel does not flick past the entries in between). */
.nav-drop-menu.nav-mega {
  --mega-pad: max(24px, calc((100% - 1112px) / 2));
  --mega-list: 320px;
  display: block;
  padding: 34px var(--mega-pad) 40px;
}
.nav-mega-list { width: var(--mega-list); min-height: 300px; }
.nav-mega-kicker {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.nav-mega .nav-mega-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 2px;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  font-size: 1.08rem;
  font-weight: 500;
  color: var(--muted);
  background: none;
}
.nav-mega .nav-mega-link:hover { background: none; border-color: var(--border); }
.nav-mega .nav-mega-link svg { transform: rotate(-90deg); opacity: 0; transition: opacity 0.2s, transform 0.2s; }
.nav-mega-item.is-active > .nav-mega-link { color: var(--text); }
.nav-mega-item.is-active > .nav-mega-link svg { opacity: 0.8; transform: rotate(-90deg) translateY(2px); }
.nav-mega .nav-mega-link.active::after { display: none; }

.nav-mega-panel {
  position: absolute;
  top: 34px;
  bottom: 40px;
  left: calc(var(--mega-pad) + var(--mega-list) + 64px);
  right: var(--mega-pad);
  opacity: 0;
  visibility: hidden;
  transform: translateX(6px);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
}
/* inherit, not visible: a visible child of the closed (hidden) menu would
   stay clickable on top of the page beneath the header. */
.nav-mega-item.is-active > .nav-mega-panel { opacity: 1; visibility: inherit; transform: none; }

/* Photo card: one line and a call to action over the photograph. */
.nav-mega .nav-mega-feature {
  position: relative;
  display: block;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 18px;
  overflow: hidden;
  background: #1b1b1f;
}
.nav-mega .nav-mega-feature:hover { background: #1b1b1f; }
.nav-mega-feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.nav-mega-feature:hover img { transform: scale(1.03); }
.nav-mega-feature::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(10,10,12,0.72) 0%, rgba(10,10,12,0.15) 55%, rgba(10,10,12,0.45) 100%);
}
.nav-mega .nav-mega-feature-text {
  position: absolute;
  z-index: 1;
  top: 28px;
  left: 30px;
  max-width: 420px;
  margin: 0;
  font-size: 1.65rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #fff;
  text-wrap: balance;
}
.nav-mega .nav-mega-cta {
  position: absolute;
  z-index: 1;
  left: 30px;
  bottom: 26px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 9px 16px;
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: 999px;
  font-size: var(--fs-nav);
  font-weight: 500;
  color: #fff;
}
.nav-mega-cta svg { transform: rotate(-90deg); }

/* List panel (Battery Storage): its systems, then a link to its own page. */
.nav-mega-links { display: flex; flex-direction: column; }
/* Two columns, so four systems fit the panel's height without spilling out. */
.nav-mega-sublist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; max-width: 720px; }
/* Audit 02 (19 Oct): on tablets the panel beside the Explore list is narrow, so its links
   stack in one column; the closed menu is clipped so it can never widen the page. */
@media (min-width: 761px) and (max-width: 1023px) {
  .nav-mega-sublist { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 761px) {
  .nav-drop-menu.nav-mega { overflow: hidden; }
  .nav-mega-panel { min-width: 0; }
}
.nav-mega .nav-mega-sublink {
  padding: 16px 2px;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  font-size: 1.05rem;
  font-weight: 600;
  background: none;
}
.nav-mega .nav-mega-sublink:hover { background: none; color: var(--text); }
.nav-mega .nav-mega-sublink.active::after { display: none; }
.nav-mega .nav-mega-overview {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  margin-top: 22px;
  padding: 0;
  border: 0;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--accent);
  background: none;
}
.nav-mega .nav-mega-overview:hover { background: none; }
.nav-mega-overview svg { transform: rotate(-90deg); }

@media (max-width: 760px) {
  .nav-drop { width: 100%; }
  .nav .nav-drop-toggle {
    width: 100%;
    text-align: left;
    font-family: var(--font);
    background: none;
    border: 0;
    padding: 18px 0;
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border);
  }
  .nav-drop-toggle svg,
  .nav-drop:hover .nav-drop-toggle svg,
  .nav-drop:focus-within .nav-drop-toggle svg {
    display: block;
    width: 18px;
    height: 18px;
    transform: rotate(-90deg);
    opacity: 0.55;
  }
  .nav .nav-drop-menu,
  .nav-drop:hover .nav-drop-menu,
  .nav-drop:focus-within .nav-drop-menu {
    position: absolute;
    inset: 0;
    background: #0c0c0f;
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    backdrop-filter: saturate(180%) blur(24px);
    border: none;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 22px 26px 40px;
    opacity: 1;
    visibility: inherit;
    transform: translateX(100%);
    transition: transform 0.38s cubic-bezier(0.32, 0.72, 0, 1);
    overflow-y: auto;
    z-index: 130;
  }
  .nav.sub-open .nav-drop-menu { transform: none; }
  .nav-drop-menu a {
    padding: 18px 0;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid var(--border);
    font-size: 1.35rem;
  }
  .nav-drop-menu a:hover { background: none; border-color: var(--border); }
  .nav-drop-menu a.active { background: none; border-color: var(--border); }
  .nav-drop-menu a.active::after { display: none; }
  .nav-drop-menu a span { display: block; font-size: 0.88rem; margin-top: 4px; }
  /* Phone: the Explore list as a plain list, battery systems indented under
     Battery Storage, and no photo cards. */
  .nav-drop-menu.nav-mega { display: flex; padding: 22px 26px 40px; }
  .nav-mega-list { width: auto; min-height: 0; }
  .nav-mega-kicker { display: none; }
  .nav-mega .nav-mega-link { font-size: 1.35rem; font-weight: 600; color: var(--text); padding: 18px 0; }
  .nav-mega .nav-mega-link svg { display: none; }
  .nav-mega-panel { position: static; opacity: 1; visibility: inherit; transform: none; transition: none; }
  .nav-mega-item > .nav-mega-panel:not(.nav-mega-links) { display: none; }
  .nav-mega-links { padding-left: 18px; }
  .nav-mega-sublist { grid-template-columns: 1fr; max-width: none; }
  .nav-mega .nav-mega-sublink { font-size: 1.08rem; padding: 14px 0; }
  .nav-mega .nav-mega-sublink span { font-size: 0.82rem; }
  .nav-mega .nav-mega-overview { display: none; }
  .nav-drop-menu .nav-back {
    display: flex;
    align-items: center;
    gap: 10px;
    background: none;
    border: none;
    color: var(--muted);
    font-family: var(--font);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 8px 0 20px;
    cursor: pointer;
    text-align: left;
  }
  .nav-back svg { width: 16px; height: 16px; }
}

.header-cta { display: flex; align-items: center; gap: 18px; flex-shrink: 0; }
/* Desktop: three columns, so the nav sits on the true centre of the page
   however wide the logo and the call to action are. The side columns never
   shrink below their contents, so nothing overlaps on a narrow window. */
@media (min-width: 761px) {
  .header-inner { display: grid; grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr); }
  .header-inner > :first-child { justify-self: start; }
  .header-inner > .nav { justify-self: center; }
  .header-inner > .header-cta { justify-self: end; }
}
.header-phone { font-weight: 600; font-size: var(--fs-nav); color: var(--text); white-space: nowrap; }
.btn-nav { padding: 10px 22px; font-size: 0.88rem; }

.menu-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
.nav-back, .nav-foot { display: none; }
body.nav-locked { overflow: hidden; }
.menu-toggle span { display: block; width: 22px; height: 2px; background: var(--text); margin: 5px 0; transition: 0.3s; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  padding: 140px 0 130px;
  isolation: isolate;
  overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; }
video.hero-bg { width: 100%; height: 100%; object-fit: cover; }
.hero-bg-home { background-image: url("../img/homepage-hero-v8.webp"); }
.hero-bg-tesla { background-image: url("../img/tesla-hero.webp"); }
.hero-bg-sigenergy { background-image: url("../img/sigenergy-hero.webp"); }
.hero-bg-ev, .page-hero .hero-bg.hero-bg-ev { background-image: url("../img/ev-hero.webp"); background-position: center 30% !important; }
.hero-bg-about { background-image: url("../img/about-hero.webp"); }
@media (max-width: 760px) {
  .hero-bg-home { background-image: url("../img/homepage-hero-v8-mobile.webp"); }
  .hero-bg-tesla { background-image: url("../img/tesla-hero-mobile.webp"); }
  .hero-bg-sigenergy { background-image: url("../img/sigenergy-hero-mobile.webp"); }
  .hero-bg-ev { background-image: url("../img/ev-hero-mobile.webp"); }
  .hero-bg-about { background-image: url("../img/about-hero-mobile.webp"); }
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(10,10,12,0.92) 0%, rgba(10,10,12,0.62) 46%, rgba(10,10,12,0.18) 100%),
    linear-gradient(0deg, rgba(10,10,12,1) 0%, rgba(10,10,12,0) 32%);
}
.hero-inner { position: relative; max-width: 860px; }
.hero h1 { margin-bottom: 28px; text-wrap: balance; }
.hero .lead { margin-bottom: 44px; font-size: var(--fs-h4); color: #d6d6db; max-width: 560px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- Homepage hero ----------
   The photograph runs full width at full strength, up under the translucent
   header. The content is one block, 1000px wide on desktop, narrowing with
   the screen, and starts just below the batteries over a fade into the page
   background.
   The picture is Dan's garden film (13 Nov): a 3:1 render of the batteries
   under a timber canopy, with a darkened strip added below the patio. Its
   numbers, as fractions of its height: top of the canopy 0.193, just below
   the batteries 0.70.
   --ih is its height on screen (39.8vw fills the width; larger crops the
   sides, object-fit: cover). --keep is how much of the picture may go above
   the header. Keep a strip of sky above the canopy, sized to the screen
   (--sky), when the frame has room for it. */
.hero.hero-home {
  --nav: 75px;
  --ih: 79.625vw;
  --ridge: 0.193;
  --kit: 0.70;
  --keep: 0.5;
  --sky: clamp(28px, 4vw, 64px);
  /* The headline sits on the wall above the AIKO panel, with the bottom of
     its second line tucked behind the panel's top edge (--panel, a fraction
     of the film's height; --sink, how far below that edge the text runs).
     The headline sits in front of the panel, so the descenders of its
     second line run over its top edge (Dan, 13 Nov, afternoon). The panel cut-out (.hero-panel)
     stays in place underneath: drop the headline's z-index to tuck the
     text behind the panel again. The
     buttons sit centred in the space below the batteries (--base, their
     bottom edge), --gap above and below (Dan, 13 Nov). */
  --base: 0.687;
  --panel: 0.3674;
  --title: 0.057; /* Two lines fit on the wall below the canopy (0.232), with the descenders of the second line ("your energy today", Dan 13 Nov) over the panel. */
  --sink: 0.12em; /* Baseline a hair above the panel: the descenders lie over its top edge. */
  --gap: clamp(28px, 5.5vh, 64px);
  /* How far the photograph sits from the top. Ideally a strip of sky shows
     above the ridge (the upper bound). On a wide, short window that would push
     the copy below the fold, so the photograph slides up until the hero fits
     the window exactly (the middle value, which needs the copy's height from
     site.js), but never further than --keep allows (the lower bound). The
     sky strip may not push the photograph below the top of the screen,
     which would leave a dark band under the header (--top-cap). Without the script,
     a typical copy height stands in. */
  --top-cap: 0px;
  --copy: var(--hero-copy, 260px);
  --shift: clamp(
    calc(var(--nav) + 8px - var(--ih) * var(--keep)),
    calc(100svh - var(--strip) - var(--copy) - var(--ih) * var(--base) - var(--gap)),
    min(var(--top-cap), calc(var(--nav) + var(--sky) - var(--ih) * var(--ridge)))
  );
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  min-height: calc(100svh - var(--strip));
  margin-top: calc(var(--nav) * -1);
  padding: calc(var(--shift) + var(--ih) * var(--base) + var(--gap)) 0 var(--gap);
  background: var(--bg);
}
.hero.hero-home .hero-bg,
.hero-home .hero-panel {
  inset: var(--shift) 0 auto;
  height: var(--ih);
  background-size: cover;
  background-position: center top;
}
.hero.hero-home::after {
  inset: auto 0 auto;
  top: calc(var(--shift) + var(--ih) * var(--kit));
  height: calc(var(--ih) * (1 - var(--kit)) + 2px);
  background: linear-gradient(180deg, rgba(10,10,12,0) 0%, rgba(10,10,12,0.72) 22%, var(--bg) 70%);
}
/* The panel cut-out: the same frame as the film, transparent except for the
   AIKO panel, so it lines up at every size. */
.hero-home .hero-panel {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}
/* Sized with the film so it always meets the panel the same way. */
.hero.hero-home h1 {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 2; /* In front of the panel cut-out (z-index 1). */
  top: calc(var(--shift) + var(--ih) * var(--panel));
  transform: translateY(calc(var(--sink) - 100%));
  margin: 0;
  padding: 0 16px;
  font-size: calc(var(--ih) * var(--title));
  line-height: 0.98;
  letter-spacing: -0.035em;
  text-align: center;
  text-shadow: 0 2px 28px rgba(10, 10, 12, 0.45);
}
/* .container and .hero-inner are the same element here. */
.hero-home .hero-inner {
  width: 100%;
  max-width: 1048px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.hero-home .hero-actions { flex-direction: column; flex-wrap: nowrap; align-items: center; gap: 14px; }
.hero-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: var(--fs-body-sm);
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.35);
  text-underline-offset: 6px;
  transition: text-decoration-color 0.2s ease;
}
.hero-link:hover { text-decoration-color: #fff; }
.hero-link svg { transform: rotate(-90deg); transition: transform 0.2s ease; }
.hero-link:hover svg { transform: rotate(-90deg) translateY(3px); }

/* On narrow or portrait screens the photograph is short, so a full-height
   hero would leave dead space above the copy. Let the copy follow it. */
@media (max-width: 900px), (max-aspect-ratio: 1/1) {
  .hero.hero-home { min-height: 0; }
}
.hero-home .hero-video {
  position: absolute;
  inset: var(--shift) 0 auto;
  z-index: -2;
  width: 100%;
  height: var(--ih);
  object-fit: cover;
  object-position: center top;
  opacity: 0;
  transition: opacity 0.9s ease;
  pointer-events: none;
}
.hero-home .hero-video.is-playing { opacity: 1; }
.hero-video-toggle {
  position: absolute;
  top: calc(var(--nav) + 16px);
  right: clamp(16px, 2.4vw, 32px);
  z-index: 2;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(10, 10, 12, 0.35);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  cursor: pointer;
  display: grid;
  place-items: center;
  opacity: 0.75;
  transition: opacity 0.2s ease;
}
.hero-video-toggle:hover, .hero-video-toggle:focus-visible { opacity: 1; }
/* Pause: two bars. Play: a triangle. Drawn in CSS, no icon file. */
.hero-video-toggle::before {
  content: "";
  width: 10px;
  height: 12px;
  border-left: 3px solid #fff;
  border-right: 3px solid #fff;
  box-sizing: border-box;
}
.hero-video-toggle.is-paused::before {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent #fff;
  margin-left: 3px;
}

@media (max-width: 760px) {
  /* The phone cut is the middle of the film around the canopy, so the
     batteries stay large. Numbers are fractions of that cut: canopy 0.202,
     below the batteries 0.725 (their bottom edge 0.708), top of the panel
     0.3837. */
  .hero.hero-home { --ih: 105.8vw; --ridge: 0.202; --kit: 0.725; --base: 0.708; --panel: 0.3837; --title: 0.060; }
  /* The headline fills the top of the phone cut, so the pause button moves
     down beside the batteries. */
  .hero-home .hero-video-toggle { top: calc(var(--shift) + var(--ih) * var(--base) - 50px); }
}
/* Laptops and desktops: the film fills the width, sized so the whole canopy
   and the batteries sit between the header and the headline on the first
   screen, with garden either side. The sky above the canopy may tuck behind
   the header (--keep 0.08). On very wide, short windows it grows to keep the
   width filled (39.8vw, the film's height over its width). */
@media (min-width: 901px) and (min-aspect-ratio: 1/1) {
  .hero.hero-home {
    --keep: 0.08;
    --ih: clamp(39.8vw, calc((100svh - var(--strip) - var(--copy) - var(--nav) - 8px - var(--gap)) / (var(--base) - var(--keep))), 79.625vw);
  }
}
/* The header goes translucent over the homepage photograph, then firms up
   once the page scrolls (site.js adds .is-scrolled) or the phone menu opens. */
.has-photo-hero:not(.nav-locked) .site-header:not(.is-scrolled) {
  background: rgba(10, 10, 12, 0.34);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  backdrop-filter: saturate(160%) blur(16px);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}
.has-photo-hero:not(.nav-locked) .site-header:not(.is-scrolled) .nav > a,
.has-photo-hero:not(.nav-locked) .site-header:not(.is-scrolled) .nav-drop-toggle,
.has-photo-hero:not(.nav-locked) .site-header:not(.is-scrolled) .header-phone { color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35); }
.site-header { transition: background-color 0.35s ease, border-color 0.35s ease; }
body.nav-locked .site-header { background: #0c0c0f; }
/* While a dropdown is open the header turns solid to match the panel below
   it, and goes back to its usual state as soon as the pointer or keyboard
   focus leaves. "body" lifts this above the translucent homepage rule. */
@media (min-width: 761px) {
  body .site-header.site-header:has(.nav-drop:hover),
  body .site-header.site-header:has(.nav-drop:focus-within) {
    background: rgba(12, 12, 15, 0.97);
    border-bottom-color: rgba(255, 255, 255, 0.07);
  }
}

/* ---------- Accreditation marquee (contained) ---------- */
.trust-marquee { background: #fff; padding: 30px 0; }
.marquee-clip {
  position: relative;
  overflow: hidden;
}
.marquee-clip::before, .marquee-clip::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 90px;
  z-index: 2;
  pointer-events: none;
}
.marquee-clip::before { left: 0; background: linear-gradient(90deg, #fff, transparent); }
.marquee-clip::after { right: 0; background: linear-gradient(270deg, #fff, transparent); }
.marquee-track {
  display: flex;
  align-items: center;
  gap: 96px;
  width: max-content;
  animation: marquee 34s linear infinite;
  padding-right: 96px;
}
.marquee-track img { height: 28px; width: auto; flex-shrink: 0; }
.marquee-track img.tall { height: 38px; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.trust-marquee:hover .marquee-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* ---------- Statement ---------- */
.statement { text-align: center; }
.statement h2 {
  font-size: clamp(1.9rem, 3.8vw, 3rem);
  max-width: 800px;
  margin: 0 auto 18px;
  text-wrap: balance;
}
.statement .lead { margin: 0 auto; }
.brand-names {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: clamp(28px, 6vw, 72px);
  flex-wrap: wrap;
  margin-top: 64px;
}
.brand-names a {
  font-size: clamp(1.3rem, 2.6vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #b7b7be;
  transition: color 0.25s;
}
.light .brand-names a { color: #86868b; }
.brand-names a:hover { color: var(--accent); }

.brand-logos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(36px, 7vw, 88px);
  flex-wrap: wrap;
  margin-top: 64px;
}
.brand-logos a { display: flex; align-items: center; opacity: 0.82; transition: opacity 0.25s, transform 0.25s; }
.brand-logos a:hover { opacity: 1; transform: translateY(-2px); }
.brand-logos img { height: 26px; width: auto; }
.brand-logos img.lg { height: 34px; }
@media (max-width: 760px) {
  .brand-logos { gap: 32px 40px; }
  .brand-logos img { height: 20px; }
  .brand-logos img.lg { height: 26px; }
}

/* ---------- Recognition band (homepage, under the hero) ---------- */
.recognition { padding: 96px 0 88px; }
.recognition .section-head { margin-bottom: 48px; }
.recognition .section-head h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); text-wrap: balance; }
.recog-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.recog-grid li { display: flex; }
.recog-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 28px 26px 30px;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  color: var(--light-text);
  transition: box-shadow 0.25s, transform 0.25s;
}
a.recog-card:hover { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); transform: translateY(-2px); }
.recog-mark { display: flex; align-items: center; height: 44px; margin-bottom: 26px; }
.recog-logo { height: 30px; width: auto; max-width: 100%; }
.recog-logo.wide { height: 26px; }
.recog-logo.tall { height: 44px; }
.recog-card h3 { font-size: var(--fs-md); font-weight: 600; line-height: 1.3; margin-bottom: 8px; padding-right: 20px; }
.recog-card p { color: var(--light-muted); font-size: var(--fs-body-sm); line-height: 1.5; }
.recog-more { position: absolute; top: 30px; right: 24px; color: #86868b; transition: color 0.2s, transform 0.2s; }
.recog-more svg { display: block; transform: rotate(-90deg); }
a.recog-card:hover .recog-more { color: var(--light-text); transform: translateX(3px); }

/* ---------- Government support (homepage, Dan 13 Nov) ----------
   Between the recognition band (#f5f5f7) and the starting point, on the
   deeper grey of the menu feature panel (#e8e8ed) so the two bands read
   apart, with white cards. 0% VAT with a days-left chip; the Warm Homes
   Loan card waits behind a switch. One card alone spans the width of two,
   figure on the left and copy on the right. */
.support.light { background: #e8e8ed; padding: 104px 0 96px; }
.support .section-head { margin-bottom: 48px; }
.support .section-head h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); text-wrap: balance; }
.support-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 980px; margin: 0 auto; }
.support-grid.is-single { grid-template-columns: minmax(0, 1fr); }
.support-card {
  display: flex;
  flex-direction: column;
  padding: 34px 34px 36px;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  color: var(--light-text);
}
.support-body { display: flex; flex-direction: column; flex: 1; }
.support-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 30px; margin-bottom: 18px; }
.support-eyebrow { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.support-days {
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(201, 60, 37, 0.1);
  color: #a8311c;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.support-figure { font-size: clamp(2.8rem, 5.4vw, 4.4rem); font-weight: 600; line-height: 1; letter-spacing: -0.04em; color: var(--light-text); margin-bottom: 14px; }
.support-card h3 { font-size: var(--fs-md); font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; margin-bottom: 12px; text-wrap: balance; color: var(--light-text); }
.support-text { color: var(--light-muted); font-size: var(--fs-body-sm); line-height: 1.55; }
.support-link { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 22px; font-size: var(--fs-body-sm); font-weight: 600; color: var(--light-text); }
.support-link svg { transition: transform 0.2s; }
.support-link:hover svg { transform: translate(2px, -2px); }
.support-link:not([target]):hover svg { transform: translateX(3px); }
.support-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.support-small { max-width: 640px; margin: 28px auto 0; text-align: center; font-size: var(--fs-sm); color: var(--light-muted); }
@media (min-width: 761px) {
  .is-single .support-card { flex-direction: row; align-items: center; gap: 56px; padding: 44px 52px; }
  .is-single .support-key { flex: 0 0 42%; }
  .is-single .support-top { justify-content: flex-start; gap: 14px; }
  .is-single .support-figure { font-size: clamp(3.4rem, 7vw, 5.6rem); margin-bottom: 0; }
  .is-single .support-body { flex: 1; }
  .is-single .support-link { padding-top: 18px; }
}
@media (max-width: 760px) {
  .support.light { padding: 72px 0 64px; }
  .support-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .support-card { padding: 26px 22px 28px; }
}
/* ---------- Homepage starting point: a statement strip of its own ----------
   One sentence, the default choice, an arrow that opens a full-screen chooser
   of four photo tiles, and the main button (Harry and Dan, 10 Oct). */
.routes {
  position: relative;
  padding: 104px 0;
  text-align: center;
  background:
    radial-gradient(ellipse 55% 140% at 50% 0%, rgba(233, 79, 55, 0.16), transparent 70%),
    var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.routes-kicker { display: block; margin-bottom: 22px; }
.route-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 20px;
  font-size: clamp(1.7rem, 3.2vw, 2.6rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.route-lead { color: var(--muted); }
.route-trigger { display: inline-flex; align-items: center; gap: 14px; color: var(--text); text-decoration: none; }
.route-word { border-bottom: 2px solid var(--accent); padding-bottom: 2px; }
.route-arrow {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
  animation: route-nudge 2.6s ease-in-out infinite;
}
.route-arrow svg { display: block; }
.route-trigger:hover .route-arrow, .route-trigger:focus-visible .route-arrow { background: var(--accent); border-color: var(--accent); transform: scale(1.06); animation: none; }
.route-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 6px; }
@keyframes route-nudge { 0%, 70%, 100% { transform: translateY(0); } 80% { transform: translateY(4px); } 90% { transform: translateY(-2px); } }
.route-line .btn { margin-left: 8px; font-size: var(--fs-body); letter-spacing: 0; }
.route-hint { margin-top: 22px; font-size: var(--fs-sm); color: var(--muted); }

.route-chooser {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 72px 0 40px;
  overflow-y: auto;
  background: rgba(8, 8, 10, 0.9);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}
.route-chooser.is-open, .route-chooser:target { opacity: 1; visibility: visible; }
.route-chooser h2 { text-align: center; margin-bottom: 40px; font-size: clamp(2rem, 4vw, 3rem); }
.route-close {
  position: absolute;
  top: 24px;
  right: 24px;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: none;
  color: var(--text);
  cursor: pointer;
  transition: background 0.2s;
}
.route-close svg { display: block; }
.route-close:hover { background: rgba(255, 255, 255, 0.1); }
.route-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
@media (min-width: 761px) and (max-width: 1140px) { .route-tiles .route-tile-body strong { font-size: 0.94rem; } }
/* Up to 1023px (iPad upright) the longest heading cannot fit one line: wrap to two, still level (Dan, 10 Oct). */
@media (min-width: 761px) and (max-width: 1023px) { .route-tiles .route-tile-body strong { white-space: normal; min-height: 2.5em; } }
.route-tile {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 18px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.08);
  background: #1d1d1d;
  color: var(--text);
  text-align: left;
  text-decoration: none;
  transform: translateY(24px);
  opacity: 0;
  transition: transform 0.5s cubic-bezier(.2, .8, .2, 1), opacity 0.5s, border-color 0.2s;
}
.route-chooser.is-open .route-tile, .route-chooser:target .route-tile { transform: none; opacity: 1; }
.route-tiles li:nth-child(2) .route-tile { transition-delay: 0.06s, 0.06s, 0s; }
.route-tiles li:nth-child(3) .route-tile { transition-delay: 0.12s, 0.12s, 0s; }
.route-tiles li:nth-child(4) .route-tile { transition-delay: 0.18s, 0.18s, 0s; }
.route-tile:hover, .route-tile:focus-visible { border-color: #fff; }
.route-chooser:focus { outline: none; }
.route-tile:focus-visible { outline: none; }
/* Photograph two thirds, words one third on #1d1d1d (Dan, 10 Oct). */
.route-tile-media { position: relative; aspect-ratio: 9 / 8; overflow: hidden; }
.route-tile-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s; }
.route-tile:hover .route-tile-media img { transform: scale(1.05); }
.route-tile-body { flex: 1 0 auto; aspect-ratio: 9 / 4; display: flex; flex-direction: column; justify-content: flex-start; gap: 6px; padding: 18px 18px 14px; background: #1d1d1d; }
/* Headings on one line and level across the four tiles, lines beneath level too (Dan, 10 Oct). */
.route-tile-body strong { font-size: 1.05rem; line-height: 1.25; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.route-tile-body small { font-size: var(--fs-sm); color: var(--muted); line-height: 1.4; }
html.route-lock { overflow: hidden; }

@media (max-width: 760px) {
  .routes { padding: 72px 0; }
  .route-line { flex-direction: column; gap: 14px; }
  .route-line .btn { margin-left: 0; align-self: stretch; }
  .route-chooser { justify-content: flex-start; padding-top: 88px; }
  .route-chooser h2 { margin-bottom: 24px; }
  .route-close { top: 16px; right: 16px; }
  .route-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .route-tile-body { padding: 12px 14px; }
  .route-tile-body strong { font-size: 1rem; white-space: normal; min-height: 2.5em; } /* Two lines on phones, still level. */
  .route-tile-body { justify-content: flex-start; }
  .route-tile-body small { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .route-arrow { animation: none; }
  .route-tile { transform: none; transition: border-color 0.2s; }
}

.recog-also {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px 44px;
  margin-top: 44px;
}
.recog-also span { font-size: var(--fs-sm); color: var(--light-muted); }
.recog-also a { display: flex; opacity: 0.7; transition: opacity 0.2s; }
.recog-also a:hover { opacity: 1; }
.recog-also img { height: 26px; width: auto; }
.recog-also img.round { height: 40px; }
@media (max-width: 1080px) {
  .recog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .recognition { padding: 64px 0 60px; }
  .recognition .section-head { margin-bottom: 32px; }
  .recog-grid { grid-template-columns: 1fr; gap: 12px; }
  .recog-card { padding: 22px 22px 24px; }
  .recog-mark { height: 38px; margin-bottom: 16px; }
  .recog-logo { height: 26px; }
  .recog-logo.wide { height: 24px; }
  .recog-logo.tall { height: 38px; }
  .recog-card h3 { font-size: var(--fs-body); }
  .recog-more { top: 26px; right: 20px; }
  .recog-also { gap: 14px 28px; margin-top: 32px; }
  .recog-also span { flex-basis: 100%; text-align: center; }
  .recog-also img { height: 22px; }
}

/* ---------- Section head ---------- */
.section-head { max-width: 700px; margin-bottom: 64px; }
.section-head .lead { margin-top: 18px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.center .lead { margin-left: auto; margin-right: auto; }

/* ---------- Split ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 76px; align-items: center; }
.split.reverse .split-media { order: 2; }
.split-media { border-radius: var(--radius); overflow: hidden; position: relative; }
.split-media img, .split-media video { width: 100%; height: 100%; min-height: 440px; max-height: 620px; object-fit: cover; object-position: center center; display: block; }
.split-media .media-tag {
  position: absolute;
  left: 20px; bottom: 20px;
  background: rgba(10,10,12,0.66);
  backdrop-filter: blur(10px);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 999px;
}
/* Sigenergy "How it fits": a square image with its own labels along the bottom, so it is shown whole and the IP66 tag moves to the top. */
.page-template-page-templatessigenergy-php #fit .split-media img { aspect-ratio: 1 / 1; height: auto; min-height: 0; max-height: none; }
.page-template-page-templatessigenergy-php #fit .split-media .media-tag { top: 20px; bottom: auto; }
.split-body h2 { margin-bottom: 20px; }
.split-body .lead { margin-bottom: 28px; }
.split-body ul.ticks { list-style: none; margin-bottom: 34px; }
.split-body ul.ticks li { display: flex; gap: 12px; align-items: flex-start; padding: 9px 0; font-size: var(--fs-body); }
.split-body ul.ticks svg { flex-shrink: 0; margin-top: 5px; }

/* ---------- Brand showcase cards ---------- */
.brand-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
/* Stacked tiles: picture on top, words beneath, so neither battery ever
   sits behind the text. */
.brand-card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--card);
  transition: transform 0.3s ease;
}
.brand-card:hover { transform: translateY(-4px); }
.brand-card > img, .brand-card > video { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.brand-card > video { object-position: 50% 80%; }
.brand-card-body { padding: 34px 40px 40px; width: 100%; flex-grow: 1; display: flex; flex-direction: column; align-items: flex-start; }
.brand-card-body .btn { margin-top: auto; }
.brand-card-body .brand-logo { height: 26px; margin-bottom: 18px; }
.brand-card-body .brand-logo img { height: 100%; width: auto; }
.brand-card-body h3 { font-size: var(--fs-h3); margin-bottom: 10px; color: #fff; }
.brand-card-body p { color: #c9c9cf; font-size: var(--fs-body); margin-bottom: 24px; max-width: 420px; }

@media (max-width: 760px) {
  .brand-grid { grid-template-columns: 1fr; }
  .brand-card-body { padding: 28px 26px 32px; }
}

.panel-banner {
  margin-top: 24px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--card);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 32px;
  padding: 0 48px 40px;
}
/* Stacked like the battery tiles: the photograph across the top, framed on
   the three homes at the front, words and button beneath. */
.panel-banner > img {
  display: block;
  flex: 0 0 calc(100% + 96px);
  width: calc(100% + 96px);
  max-width: none;
  margin: 0 -48px 8px;
  aspect-ratio: 3 / 1;
  object-fit: cover;
  object-position: 50% 70%;
}
.panel-banner h3 { font-size: var(--fs-h3); color: #fff; margin-bottom: 8px; }
.panel-banner p { color: #c9c9cf; max-width: 480px; }
@media (max-width: 760px) {
  .panel-banner { padding: 0 26px 32px; }
  .panel-banner > img { flex-basis: calc(100% + 52px); width: calc(100% + 52px); margin: 0 -26px 4px; aspect-ratio: 3 / 2; object-position: 50% 50%; }
}

/* Homes that already have solar: photograph beside the words, stacked on phones. */
.upgrade-band {
  margin-top: 24px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--card);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
}
.upgrade-band > img { display: block; width: 100%; height: 100%; min-height: 340px; max-height: 440px; object-fit: cover; object-position: 50% 62%; }
.upgrade-band-body { padding: 40px 56px; }
.upgrade-band h3 { font-size: var(--fs-h3); color: #fff; margin-bottom: 8px; }
.upgrade-band p { color: #c9c9cf; max-width: 480px; margin-bottom: 24px; }
@media (max-width: 760px) {
  .upgrade-band { grid-template-columns: 1fr; }
  .upgrade-band > img { min-height: 0; max-height: none; aspect-ratio: 3 / 2; }
  .upgrade-band-body { padding: 26px 26px 32px; }
}

/* ---------- Savings figures ---------- */
.savings-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 72px; align-items: center; }
.savings-copy h2 { margin-bottom: 20px; }
.savings-copy .lead { margin-bottom: 34px; }
.payback-figures {
  background: #fff;
  border-radius: var(--radius);
  padding: 12px 40px;
  box-shadow: 0 2px 14px rgba(0,0,0,0.06);
}
.payback-figure { padding: 26px 0; border-top: 1px solid rgba(0,0,0,0.08); }
.payback-figure:first-child { border-top: 0; }
.payback-figure dt { color: var(--light-muted); font-size: var(--fs-body-sm); margin-bottom: 4px; }
.payback-figure dd { font-size: 2.6rem; font-weight: 600; letter-spacing: -0.035em; line-height: 1.1; color: var(--light-text); }

/* ---------- Footnotes ---------- */
.fn-ref { font-size: 0.62em; line-height: 0; margin-left: 2px; vertical-align: super; }
.fn-ref a { color: inherit; text-decoration: none; }
.fn-ref a:hover { text-decoration: underline; }
.footnotes {
  list-style: decimal;
  padding: 0 0 36px 1.2em;
  margin: 0 0 48px;
  border-bottom: 1px solid var(--border);
  color: #85858c;
  font-size: var(--fs-xs);
  line-height: 1.7;
  max-width: 920px;
}
.footnotes li { scroll-margin-top: 120px; padding-left: 4px; }
.footnotes li + li { margin-top: 10px; }
.footnotes li:target { color: var(--text); }

/* ---------- Editorial "Why" list ---------- */
.edit-list { border-top: 1px solid var(--border); }
.edit-item {
  display: grid;
  grid-template-columns: 90px 1fr 1.4fr;
  gap: 40px;
  padding: 38px 0;
  border-bottom: 1px solid var(--border);
  align-items: baseline;
}
.edit-item .num { font-weight: 600; font-size: var(--fs-body); color: var(--accent); letter-spacing: 0.06em; }
.edit-item h3 { font-size: var(--fs-h4); }
.edit-item p { color: var(--muted); font-size: var(--fs-body); }
.light .edit-list { border-color: rgba(0,0,0,0.12); }
.light .edit-item { border-color: rgba(0,0,0,0.12); }
.light .edit-item p { color: var(--light-muted); }

/* ---------- Gallery ---------- */
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.gallery-grid figure { border-radius: var(--radius); overflow: hidden; position: relative; margin: 0; }
.gallery-grid img { width: 100%; height: 340px; object-fit: cover; transition: transform 0.5s ease; }
.gallery-grid figure:hover img { transform: scale(1.04); }
.gallery-grid figcaption {
  position: absolute;
  left: 18px; bottom: 16px;
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 600;
  background: rgba(10,10,12,0.6);
  backdrop-filter: blur(8px);
  padding: 7px 14px;
  border-radius: 999px;
}

/* ---------- Process (light, minimal) ---------- */
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 44px; }
.process-grid .step { border-top: 2px solid var(--light-text); padding-top: 22px; }
.light .process-grid .step { border-color: rgba(0,0,0,0.85); }
.step-num { font-weight: 600; font-size: var(--fs-sm); color: var(--accent); letter-spacing: 0.1em; margin-bottom: 12px; }
.process-grid h3 { font-size: var(--fs-lead); margin-bottom: 8px; }
.process-grid p { color: var(--muted); font-size: var(--fs-body-sm); }
.process-grid .step { border-top: 2px solid rgba(255,255,255,0.85); }
.light .process-grid p { color: var(--light-muted); }

/* ---------- Reviews: one excerpt at a time ---------- */
.review-carousel { position: relative; max-width: 940px; margin: 0 auto; }
.review-track {
  list-style: none;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  gap: 0;
}
.review-track::-webkit-scrollbar { display: none; }
.review-slide { flex: 0 0 100%; scroll-snap-align: center; padding: 0 4px; }
.review-slide figure {
  margin: 0;
  height: 100%;
  padding: 52px 64px 44px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* Trustpilot green; Google's star yellow for Google reviews. */
.review-stars { color: #00b67a; letter-spacing: 4px; font-size: var(--fs-body); margin-bottom: 20px; }
.review-stars.is-google { color: #fbbc04; }
.review-slide blockquote { margin: 0; }
.review-slide blockquote p { font-size: var(--fs-h4); font-weight: 500; line-height: 1.45; letter-spacing: -0.01em; color: var(--text); max-width: 720px; margin: 0 auto; }
.review-slide figcaption { margin-top: 22px; display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 18px; font-size: var(--fs-sm); color: var(--muted); }
.review-slide cite { font-style: normal; color: var(--text); font-weight: 600; }
.review-slide figcaption a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.review-slide figcaption a:hover { color: var(--text); }
.review-nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 46px;
  height: 46px;
  margin-top: -40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(10, 10, 12, 0.8);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.2s, opacity 0.2s;
}
.review-nav:hover { border-color: rgba(255, 255, 255, 0.3); }
.review-nav[disabled] { opacity: 0.3; cursor: default; }
.review-prev { left: -66px; }
.review-prev svg { transform: rotate(90deg); }
.review-next { right: -66px; }
.review-next svg { transform: rotate(-90deg); }
/* Where you are: a slim line that fills as the reviews move along. */
.review-progress { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 26px; }
.review-bar { position: relative; width: 220px; height: 2px; background: rgba(255, 255, 255, 0.15); border-radius: 2px; overflow: hidden; }
.review-bar span { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--accent); }
/* Announced to screen readers, not shown. */
.review-count { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.review-links { justify-content: center; margin-top: 36px; }
@media (max-width: 1120px) {
  .review-prev { left: 8px; }
  .review-next { right: 8px; }
  /* Arrows level with the dots, under the card. */
  .review-nav { top: auto; bottom: -11px; margin-top: 0; width: 40px; height: 40px; }
  .review-progress { margin-top: 34px; }
}
@media (max-width: 760px) {
  .review-slide figure { padding: 36px 24px 30px; }
  .review-slide blockquote p { font-size: var(--fs-md); }
}
@media (prefers-reduced-motion: reduce) {
  .review-track { scroll-behavior: auto; }
}

/* ---------- Where we install: the service-area map (WS9 item 61) ---------- */
.coverage {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.coverage-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.coverage .section-head { margin-bottom: 36px; }
.coverage-key { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.coverage-key li { display: flex; align-items: center; gap: 12px; font-size: var(--fs-body-sm); }
.coverage-swatch {
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: #26262b;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.coverage-swatch.is-in { background: var(--accent); box-shadow: none; }
.coverage-map {
  margin: 0;
  display: flex;
  justify-content: center;
  background: radial-gradient(closest-side at 62% 68%, rgba(233, 79, 55, 0.16), transparent);
}
.coverage-map img { width: auto; height: min(640px, 72vh); max-width: 100%; }

.contact-coverage { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.contact-coverage-map { width: auto; height: 92px; flex: none; }
.footer-coverage a { color: inherit; }
.footer-coverage a:hover { color: var(--text); }
@media (max-width: 900px) {
  .coverage-layout { grid-template-columns: 1fr; gap: 40px; }
  .coverage .section-head { margin-bottom: 28px; }
  .coverage-map img { height: auto; width: min(100%, 340px); }
}

/* ---------- FAQ ---------- */
.faq-list { max-width: 800px; margin: 0 auto; }
details.faq { border-bottom: 1px solid var(--border); }
details.faq summary {
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  font-size: var(--fs-md);
  letter-spacing: -0.01em;
  padding: 26px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after {
  content: "+";
  font-size: var(--fs-h4);
  font-weight: 400;
  color: var(--muted);
  flex-shrink: 0;
  transition: transform 0.2s;
}
details.faq[open] summary::after { transform: rotate(45deg); color: var(--accent); }
details.faq .faq-body { padding: 0 0 26px; color: var(--muted); font-size: var(--fs-body-sm); max-width: 700px; }
.light details.faq { border-color: rgba(0,0,0,0.12); }
.light details.faq .faq-body { color: var(--light-muted); }

/* ---------- CTA band ---------- */
.cta-band {
  position: relative;
  border-radius: 24px;
  padding: 96px 72px;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.cta-band .cta-bg { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; }
.cta-band video.cta-bg { width: 100%; height: 100%; object-fit: cover; }
.cta-band::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: rgba(10,10,12,0.78);
}
.cta-band h2 { color: #fff; max-width: 640px; margin: 0 auto 14px; text-wrap: balance; }
.cta-band p { color: rgba(255,255,255,0.8); max-width: 480px; margin: 0 auto 36px; }

/* Scenic band (WS9 item 70): the photo carries it, so a light veil and the words sit low, over the street. */
.cta-band.scenic {
  min-height: 640px;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  padding: 72px 72px 64px;
}
.cta-band.scenic .cta-bg { background-position: center 35%; }
.cta-band.scenic::after {
  background: linear-gradient(to bottom, rgba(10,10,12,0.05) 0%, rgba(10,10,12,0.1) 35%, rgba(10,10,12,0.72) 72%, rgba(10,10,12,0.88) 100%);
}
.cta-band.scenic h2 { text-shadow: 0 2px 18px rgba(0,0,0,0.35); }
.cta-band.scenic p { color: rgba(255,255,255,0.9); margin-bottom: 28px; }
@media (max-width: 760px) {
  /* Phones: the photo sits above the words and fades into the band, so the house stays in view. */
  .cta-band.scenic { min-height: 0; padding: 270px 24px 40px; }
  .cta-band.scenic .cta-bg { bottom: auto; height: 330px; background-position: 50% 30%; }
  .cta-band.scenic::after { background: linear-gradient(to bottom, rgba(18,18,21,0) 0, rgba(18,18,21,0.15) 190px, rgb(18,18,21) 330px); }
  .cta-band.scenic h2 { text-shadow: none; }
}

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 76px 0 44px;
  background: var(--bg);
  font-size: var(--fs-body-sm);
}
.footer-grid { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 40px; margin-bottom: 56px; }
.footer-grid h2 {
  line-height: 1.4;
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: 18px;
}
.footer-grid ul { list-style: none; }
.footer-grid ul li { margin-bottom: 10px; }
.footer-grid a { color: var(--text); transition: color 0.2s; }
.footer-grid a:hover { color: var(--text); }
.footer-brand p { color: var(--muted); margin: 18px 0 4px; }
.footer-brand .contact-line { color: var(--text); font-weight: 600; }
.footer-brand .footer-coverage { margin-top: 4px; }
.footer-accreds { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 18px; font-size: var(--fs-xs); }
.footer-grid .footer-accreds li { margin-bottom: 0; }
.footer-grid .footer-accreds a { color: var(--muted); }
.footer-grid .footer-accreds a:hover { color: var(--text); }
/* Brand details across the top, the four link columns in a row beneath. */
@media (max-width: 1120px) {
  .footer-grid { grid-template-columns: repeat(4, 1fr); }
  .footer-brand { grid-column: 1 / -1; max-width: 560px; }
}
#faqs { scroll-margin-top: 90px; }
#accreditations { scroll-margin-top: 90px; }
.footer-legal {
  border-top: 1px solid var(--border);
  padding-top: 32px;
  color: #85858c;
  font-size: var(--fs-xs);
  line-height: 1.7;
}

/* ---------- Page hero ---------- */
.page-hero {
  position: relative;
  padding: 150px 0 110px;
  isolation: isolate;
  overflow: hidden;
}
.page-hero .hero-bg { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; }
video.hero-bg { width: 100%; height: 100%; object-fit: cover; }
.page-hero.has-img::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(10,10,12,0.94) 0%, rgba(10,10,12,0.7) 50%, rgba(10,10,12,0.3) 100%),
    linear-gradient(0deg, rgba(10,10,12,1) 0%, rgba(10,10,12,0) 38%);
}
/* Film hero (Tesla page, Dan 13 Oct), on the homepage's pattern: the film runs
   full width at full strength, and the words sit low, over a fade from its lower
   edge into the page, never across the picture itself. --ih is the film's
   height: 16:9 to the screen width, capped so the words stay above the fold on
   short screens (the film then crops a little top and bottom). --kit is where
   the fade starts, as a fraction of that height. */
.page-hero.hero-film {
  /* --hero-h: a wide picture's own height, set by page-hero.php; 16:9 otherwise. */
  --ih: min(var(--hero-h, 56.25vw), 70svh);
  --kit: 0.72;
  padding: calc(var(--ih) * var(--kit)) 0 48px;
}
.page-hero.hero-film .hero-bg { inset: 0 0 auto; height: var(--ih); object-position: center 40%; }
.page-hero.hero-film.has-img::after {
  inset: auto 0 auto;
  top: calc(var(--ih) * var(--kit) - 8vw);
  height: calc(var(--ih) * (1 - var(--kit)) + 8vw + 2px);
  background: linear-gradient(180deg, rgba(10, 10, 12, 0) 0%, rgba(10, 10, 12, 0.72) 38%, var(--bg) 80%);
}
.page-hero.hero-film h1 { font-size: clamp(2.2rem, 3.8vw, 3.4rem); margin-bottom: 14px; }
.page-hero.hero-film .breadcrumbs { margin-bottom: 14px; }
@media (max-width: 760px) {
  .page-hero.hero-film { --ih: 92vw; --kit: 0.74; padding-bottom: 36px; }
}
.page-hero h1 { font-size: clamp(2.5rem, 5.4vw, 4.2rem); margin-bottom: 20px; max-width: 800px; }
.page-hero .lead { max-width: 620px; }
/* Straight into the content beneath, e.g. the contact page's form. */
.page-hero.tight { padding-bottom: 56px; }
/* Learning Centre (Dan, 14 Oct): the gap from the hero text down to the topic
   filters matches the gap from the header down to the breadcrumbs (150px). */
.learning-centre .page-hero { padding-bottom: 0; }
.learning-centre .page-hero + section { padding-top: 150px; }


/* ---------- Product pages ---------- */
.product-section { padding: 96px 0; border-bottom: 1px solid var(--border); }
/* Product pages: four benefits at a glance under the hero, and the two
   specification panels side by side. */
.product-benefits { padding: 64px 0; }
.component-grid.four { grid-template-columns: repeat(4, 1fr); }
.spec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
@media (max-width: 1020px) {
  .component-grid.four { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .component-grid.four, .spec-grid { grid-template-columns: 1fr; }
}
.product-section:last-of-type { border-bottom: none; }
.product-section.light { border-bottom: none; }

.spec-panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 38px 40px;
}
.light .spec-panel { background: #fff; border: none; box-shadow: 0 2px 14px rgba(0,0,0,0.06); }
.spec-panel h3 { margin-bottom: 8px; }
.spec-panel .spec-note { color: #86868b; font-size: var(--fs-xs); margin-top: 16px; }
.spec-list { list-style: none; margin-top: 18px; }
.spec-list li {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 13px 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-body-sm);
}
.light .spec-list li { border-color: rgba(0,0,0,0.1); }
.spec-list li:last-child { border-bottom: none; }
.spec-list li span:first-child { color: var(--muted); }
.light .spec-list li span:first-child { color: var(--light-muted); }
.spec-list li span:last-child { font-weight: 600; text-align: right; }

.component-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.component-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 36px 34px;
}
.light .component-card { background: #fff; border: none; box-shadow: 0 1px 4px rgba(0,0,0,0.05); }
.component-card h3 { font-size: var(--fs-lead); margin-bottom: 10px; }
.component-card p { color: var(--muted); font-size: var(--fs-body-sm); }
.light .component-card p, .light .component-card .tag { color: var(--light-muted); }
.component-card .tag {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}

/* Pros / cons */
.procon-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.procon {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 36px;
}
.procon h3 { margin-bottom: 18px; display: flex; align-items: center; gap: 10px; font-size: var(--fs-md); }
.procon ul { list-style: none; }
.procon li { display: flex; gap: 11px; align-items: flex-start; padding: 8px 0; color: var(--muted); font-size: var(--fs-body-sm); }
.procon li svg { flex-shrink: 0; margin-top: 5px; }
.procon.pros li { color: var(--text); }

/* Short guide (Compare page) */
.guide-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 40px; }
.guide-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 34px 36px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}
.guide-card h3 { font-size: var(--fs-md); margin-bottom: 12px; }
.guide-card ul.ticks { list-style: none; }
.guide-card ul.ticks li { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; color: var(--light-muted); font-size: var(--fs-body-sm); }
.guide-card ul.ticks svg { flex-shrink: 0; margin-top: 4px; color: var(--accent); }
.guide-same {
  margin-top: 22px;
  padding: 24px 36px;
  border-radius: var(--radius);
  border: 1px solid rgba(0, 0, 0, 0.12);
  display: flex;
  gap: 8px 24px;
  align-items: baseline;
}
.guide-same h3 { font-size: var(--fs-body); font-weight: 600; flex-shrink: 0; }
.guide-same-marks { align-self: center; }
.guide-same-marks img { display: block; width: 66px; height: auto; }
.guide-same p { color: var(--light-muted); font-size: var(--fs-body-sm); }
#guide .button-row { margin-top: 36px; }

/* Energy-flow scenes (homepage and Battery Storage) */
.flow-tabs { display: flex; gap: 10px; margin-top: 36px; flex-wrap: wrap; }
.flow-tab {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 150px;
  padding: 12px 20px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.flow-tab:hover { color: var(--text); }
.flow-tab[aria-selected="true"] { border-color: var(--accent); background: rgba(240, 84, 35, 0.08); color: var(--text); }
.flow-tab-name { font-weight: 600; font-size: var(--fs-body); }
.flow-tab-time { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.08em; }
.flow-tab[aria-selected="true"] .flow-tab-time { color: var(--accent); }
.light .flow-tab { border-color: rgba(0, 0, 0, 0.14); color: var(--light-muted); }
.light .flow-tab:hover, .light .flow-tab[aria-selected="true"] { color: var(--light-text); }
.light .flow-tab[aria-selected="true"] { border-color: var(--accent); }
.flow-panel { display: grid; grid-template-columns: 7fr 5fr; gap: 48px; align-items: center; margin-top: 28px; }
.flow-panel[hidden] { display: none; }
/* Scene buttons down the left of the picture, the full height of it (Harry, 10 Oct).
   site.js sets --flow-h to the picture's height. */
.flow-stage { display: grid; grid-template-columns: max-content 1fr; gap: 18px; align-items: center; margin-top: 36px; }
.flow-stage .flow-tabs { margin-top: 0; flex-direction: column; flex-wrap: nowrap; gap: 10px; height: var(--flow-h, auto); }
.flow-stage .flow-tab { flex: 1 1 0; min-width: 0; justify-content: center; padding: 24px; } /* Text centred top to bottom, the same space left and right (Dan, 10 Oct). */
.flow-stage > .flow-panel { grid-column: 2; grid-row: 1; margin-top: 0; }
.flow-media { margin: 0; border-radius: var(--radius); overflow: hidden; aspect-ratio: 3 / 2; background: var(--card); }
.flow-media img, .flow-media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.flow-media video { display: none; }
@media (prefers-reduced-motion: no-preference) {
  /* Until site.js gives the film its poster (near the screen), the still shows. */
  .flow-media video:not([data-poster]) { display: block; }
  .flow-media video:not([data-poster]) + picture { display: none; }
}
@media (max-width: 760px) {
  .flow-media.has-mobile video { display: none; }
  .flow-media.has-mobile video + picture { display: block; }
}
.flow-placeholder {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 32px;
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  color: var(--muted);
  font-size: var(--fs-sm);
}
.flow-placeholder strong { color: var(--text); font-size: var(--fs-body); }
.light .flow-media { background: #fff; }
.light .flow-placeholder { border-color: rgba(0, 0, 0, 0.18); color: var(--light-muted); }
.light .flow-placeholder strong { color: var(--light-text); }
.flow-copy h3 { font-size: var(--fs-h3); margin: 10px 0 14px; }
.flow-copy p { color: var(--muted); margin-bottom: 18px; }
.light .flow-copy p { color: var(--light-muted); }
.flow-copy ul.ticks { list-style: none; }
.flow-copy ul.ticks li { display: flex; gap: 12px; align-items: flex-start; padding: 7px 0; font-size: var(--fs-body-sm); }
.flow-copy ul.ticks svg { flex-shrink: 0; margin-top: 4px; color: var(--accent); }
@media (min-width: 761px) and (max-width: 1024px) {
  .flow-stage .flow-panel { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 760px) {
  .flow-stage { grid-template-columns: 1fr; gap: 20px; }
  .flow-stage .flow-tabs, .flow-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; height: auto; }
  .flow-stage > .flow-panel { grid-column: 1; grid-row: 2; }
  .flow-stage .flow-tab { padding: 10px 12px; }
  .flow-tab { min-width: 0; padding: 10px 12px; }
  .flow-tab-name { font-size: var(--fs-sm); }
  .flow-panel { grid-template-columns: 1fr; gap: 24px; }
  .flow-media.has-mobile { aspect-ratio: 4 / 5; }
}

/* Manufacturer status beside the panels we fit (Solar Panels page) */
.maker-proof {
  display: flex;
  align-items: center;
  gap: 20px 24px;
  margin-top: 22px;
  padding: 22px 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.maker-proof img { width: 64px; height: 64px; flex-shrink: 0; }
.maker-proof div { flex: 1; }
.maker-proof h3 { font-size: var(--fs-body); margin-bottom: 4px; }
.maker-proof p { color: var(--muted); font-size: var(--fs-sm); }
.maker-proof .inline-link { flex-shrink: 0; font-weight: 600; }
@media (max-width: 760px) {
  .maker-proof { flex-wrap: wrap; padding: 20px; }
  .maker-proof div { flex-basis: calc(100% - 88px); }
}
@media (max-width: 760px) {
  .guide-grid { grid-template-columns: 1fr; }
  .guide-card { padding: 26px 22px; }
  .guide-same { flex-direction: column; padding: 22px; }
  .guide-same-marks { align-self: flex-start; }
}

/* Compare table */
.compare-table { width: 100%; border-collapse: collapse; margin-top: 40px; font-size: var(--fs-body-sm); }
.compare-table th, .compare-table td {
  padding: 17px 20px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.compare-table th {
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.compare-table td:first-child { color: var(--muted); }
.light .compare-table th, .light .compare-table td { border-color: rgba(0,0,0,0.12); }
.light .compare-table td:first-child { color: var(--light-muted); }

/* ---------- Icon chips ---------- */
.light .card-icon { background: rgba(0, 0, 0, 0.05); color: var(--light-text); }
.card-icon {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.card-icon svg { width: 22px; height: 22px; }
.learn-card .tag svg { width: 13px; height: 13px; vertical-align: -2px; margin-right: 7px; }
.info-item h3 svg { width: 15px; height: 15px; vertical-align: -3px; margin-right: 8px; color: var(--muted); }

/* Card brand logos */
.pv-logo { height: 34px; display: flex; align-items: center; margin-bottom: 20px; }
.pv-logo img { height: 100%; width: auto; }
.procon-logo { height: 26px; display: flex; align-items: center; margin-bottom: 18px; }
.procon-logo img { height: 100%; width: auto; }

/* PV cards */
.pv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.pv-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 44px 40px;
}
.light .pv-card { background: #fff; border: none; box-shadow: 0 2px 14px rgba(0,0,0,0.06); }
.pv-card .pv-brand { font-weight: 600; font-size: 1.8rem; letter-spacing: -0.02em; margin-bottom: 4px; }
.pv-card .pv-series { color: var(--muted); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 18px; }
.pv-card p { color: var(--muted); font-size: var(--fs-body-sm); margin-bottom: 20px; }
.light .pv-card p { color: var(--light-muted); }
.pv-card ul { list-style: none; }
.pv-card ul li { display: flex; gap: 11px; padding: 7px 0; font-size: var(--fs-body-sm); align-items: flex-start; }
.pv-card ul li svg { flex-shrink: 0; margin-top: 5px; }

/* ---------- Mounting cards ---------- */
.mount-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.mount-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 38px 34px;
  box-shadow: 0 2px 14px rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
}
.mount-card .mount-logo { height: 44px; display: flex; align-items: center; margin-bottom: 22px; }
.mount-card .mount-logo img { height: 100%; width: auto; }
.mount-card .mount-logo .wordmark { font-weight: 600; font-size: var(--fs-h4); letter-spacing: -0.02em; color: var(--light-text); }
.mount-card .tag {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}
.mount-card h3 { font-size: var(--fs-lead); margin-bottom: 10px; }
.mount-card > p { color: var(--light-muted); font-size: var(--fs-body-sm); margin-bottom: 18px; }
.mount-card ul { list-style: none; margin-top: auto; }
.mount-card ul li { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; font-size: var(--fs-sm); color: var(--light-text); }
.mount-card ul li svg { flex-shrink: 0; margin-top: 4px; }
@media (max-width: 960px) { .mount-grid { grid-template-columns: 1fr; } }

/* ---------- Learning centre ---------- */
.learn-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.learn-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 34px 32px;
  display: flex;
  flex-direction: column;
  transition: border-color 0.25s, transform 0.25s;
}
.learn-card:hover { border-color: rgba(255,255,255,0.28); transform: translateY(-3px); }
.learn-card .tag {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}
.learn-card h3 { font-size: var(--fs-lead); margin-bottom: 10px; line-height: 1.25; }
.learn-card p { color: var(--muted); font-size: var(--fs-body-sm); flex-grow: 1; }
.learn-card .read-time { color: #85858c; font-size: var(--fs-xs); margin-top: 18px; font-weight: 500; }

/* ---------- Article ---------- */
.article-hero { padding: 130px 0 60px; border-bottom: 1px solid var(--border); }
.article-hero .kicker { margin-bottom: 18px; }
.article-hero h1 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); max-width: 820px; margin-bottom: 20px; }
.article-meta { color: #85858c; font-size: var(--fs-sm); font-weight: 500; }
.article-meta span { margin: 0 10px; color: var(--accent); }
.article { max-width: 760px; margin: 0 auto; padding: 72px 24px 90px; }
.article p { color: #c5c6cc; font-size: var(--fs-md); line-height: 1.75; margin-bottom: 26px; letter-spacing: -0.005em; }
.article h2 { font-size: var(--fs-h3); margin: 52px 0 18px; letter-spacing: -0.025em; }
.article h3 { font-size: var(--fs-lead); margin: 38px 0 14px; }
.article ul, .article ol { margin: 0 0 26px 22px; color: #c5c6cc; font-size: var(--fs-body); line-height: 1.7; }
.article li { margin-bottom: 10px; }
.article strong { color: var(--text); }
.article a { color: var(--accent); }
.article .pull {
  border-left: 3px solid var(--accent);
  padding: 6px 0 6px 24px;
  margin: 36px 0;
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--text);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.article .article-note { font-size: var(--fs-sm); color: #86868b; border-top: 1px solid var(--border); padding-top: 22px; margin-top: 48px; }
.related { border-top: 1px solid var(--border); padding: 64px 0 90px; }
.related h2 { font-size: var(--fs-h3); margin-bottom: 30px; }

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

/* Learning Centre stages and FAQs (WS9 item 86) */
.learn-stage + .learn-stage { margin-top: 72px; }
.learn-stage[hidden] { display: none; }
.learn-stage-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px 32px; flex-wrap: wrap; margin-bottom: 26px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.learn-stage-head h2 { font-size: var(--fs-h3); letter-spacing: -0.025em; }
.learn-stage-head p { color: var(--muted); font-size: var(--fs-body-sm); max-width: 520px; }
.learn-filter + .learn-stage { margin-top: 8px; }
.learn-faqs { border-top: 1px solid var(--border); }
.faq-stage { max-width: 800px; margin: 0 auto; }
.faq-stage + .faq-stage { margin-top: 48px; }
.faq-stage h3 { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; }

/* Guides linked from the pages they help with */
.guides-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 32px; flex-wrap: wrap; margin-bottom: 30px; }
.guides-head h2 { font-size: var(--fs-h3); letter-spacing: -0.025em; margin-top: 10px; }

/* ---------- Savings calculator ---------- */
.mode-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  max-width: 720px;
  margin: 0 auto 56px;
}
.mode-btn {
  background: #fff;
  border: 2px solid transparent;
  border-radius: 16px;
  padding: 24px 26px;
  text-align: left;
  cursor: pointer;
  font-family: var(--font);
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  transition: border-color 0.2s, transform 0.2s;
}
.mode-btn:hover { transform: translateY(-2px); }
.mode-btn.selected { border-color: var(--accent); }
.mode-btn .mode-title { font-weight: 600; font-size: var(--fs-md); color: var(--light-text); display: block; margin-bottom: 4px; }
.mode-btn .mode-sub { color: var(--light-muted); font-size: var(--fs-sm); }

.calc-panel {
  background: #fff;
  border-radius: var(--radius);
  padding: 44px;
  box-shadow: 0 2px 14px rgba(0,0,0,0.06);
  max-width: 720px;
  margin: 0 auto;
}
.calc-panel h2 { letter-spacing: -0.02em; color: var(--light-text); margin-bottom: 24px; font-size: var(--fs-h4); }
.calc-panel .field label { color: var(--light-muted); }
.calc-panel .field input, .calc-panel .field textarea {
  background: #f5f5f7;
  border: 1px solid rgba(0,0,0,0.12);
  color: var(--light-text);
}
.calc-panel .field input:focus, .calc-panel .field textarea:focus { border-color: var(--accent); }
.calc-panel .option-grid { margin-bottom: 24px; }
.calc-panel .option-btn {
  background: #f5f5f7;
  border: 1px solid rgba(0,0,0,0.12);
  color: var(--light-text);
}
.calc-panel .option-btn:hover { border-color: rgba(0,0,0,0.35); }
.calc-panel .option-btn.selected { border-color: var(--accent); background: rgba(233,79,55,0.07); }
.calc-panel .form-error { color: var(--accent); }

.bill-slider { margin: 6px 0 30px; }
.bill-slider .bill-value {
  font-weight: 600;
  font-size: 2rem;
  letter-spacing: -0.03em;
  color: var(--light-text);
  display: block;
  margin-bottom: 14px;
}
.bill-slider input[type="range"] {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--accent) var(--fill, 30%), #e3e3e8 var(--fill, 30%));
  outline: none;
}
.bill-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--accent);
  cursor: pointer;
  box-shadow: 0 1px 6px rgba(0,0,0,0.2);
}
.bill-slider input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--accent);
  cursor: pointer;
}
.bill-slider .bill-scale { display: flex; justify-content: space-between; color: #86868b; font-size: var(--fs-xs); margin-top: 8px; }

.calc-results { display: none; margin-top: 36px; padding-top: 34px; border-top: 1px solid rgba(0,0,0,0.1); }
.calc-results.show { display: block; animation: fadeIn 0.35s ease; }
.result-grid { display: grid; grid-template-columns: minmax(0, 340px); justify-content: center; gap: 20px; margin-bottom: 22px; }
.result-stat { text-align: center; background: #f5f5f7; border-radius: 14px; padding: 24px 14px; }
.result-stat .num { font-weight: 600; font-size: clamp(1.4rem, 2.6vw, 1.9rem); letter-spacing: -0.03em; color: var(--accent); display: block; }
.result-stat .lbl { color: var(--light-muted); font-size: var(--fs-sm); margin-top: 6px; display: block; }
.calc-system { text-align: center; color: var(--light-text); font-weight: 600; font-size: var(--fs-body-sm); margin-bottom: 6px; }
.calc-assumptions { color: var(--light-muted); font-size: var(--fs-sm); text-align: center; max-width: 600px; margin: 12px auto 0; line-height: 1.55; }
.calc-note { color: #86868b; font-size: var(--fs-xs); text-align: center; max-width: 560px; margin: 10px auto 0; }

.email-gate { margin-top: 30px; background: #f5f5f7; border-radius: 14px; padding: 28px; }
.email-gate h3 { line-height: 1.3; letter-spacing: 0; color: var(--light-text); font-size: var(--fs-body); font-weight: 600; margin-bottom: 6px; }
.email-gate p { color: var(--light-muted); font-size: var(--fs-sm); margin-bottom: 18px; }
.email-gate .field input { background: #fff; }

@media (max-width: 760px) {
  .mode-toggle { grid-template-columns: 1fr; }
  .calc-panel { padding: 28px 22px; }
  .result-grid { grid-template-columns: 1fr; }
}

/* ---------- Contact / quote form ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 64px; align-items: start; }
.contact-info .info-item { margin-bottom: 28px; }
.contact-info .info-item h3 {
  line-height: 1.4;
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: 6px;
}
.contact-info .info-item a, .contact-info .info-item p { font-size: var(--fs-md); font-weight: 600; color: var(--text); }
.contact-info .info-item a:hover { color: var(--text); }
/* Sales and customer support, side by side in the left column. */
.support-jump { grid-column: 1 / -1; margin: -16px 0 -24px; font-size: var(--fs-sm); }
.contact-desk {
  padding: 26px 26px 24px;
  margin-bottom: 18px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  scroll-margin-top: 100px;
}
.contact-desk h2 { line-height: 1.08; letter-spacing: -0.02em; font-size: var(--fs-h4); color: var(--text); margin-bottom: 6px; }
.contact-desk-text { color: var(--muted); font-size: var(--fs-sm); margin-bottom: 16px; }
.contact-desk-list { list-style: none; display: grid; gap: 10px; }
.contact-desk-list li { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: var(--fs-sm); }
.contact-desk-list svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--muted); }
.contact-desk-list a { color: var(--text); font-weight: 600; font-size: var(--fs-body); }
.contact-desk-phone { line-height: 1.5; }
.contact-desk-phone a { white-space: nowrap; margin-right: 2px; }
.contact-desk-option { color: var(--muted); font-size: var(--fs-sm); }
.contact-desk-note { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); color: var(--muted); font-size: var(--fs-xs); line-height: 1.55; }
/* Head office, coverage and business premises: each in its own smaller box. */
.contact-info .contact-box {
  padding: 20px 26px;
  margin-bottom: 18px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.contact-info .contact-box a, .contact-info .contact-box p { font-size: var(--fs-body); }

.quote-form {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 44px;
}
/* Heading at the top of the form box (Dan, 13 Nov). The step questions under it are h3s. */
.quote-form-title { font-size: var(--fs-h3); letter-spacing: -0.025em; margin-bottom: 24px; }
.form-progress { display: flex; gap: 8px; margin-bottom: 36px; }
.form-progress span { height: 3px; flex: 1; border-radius: 2px; background: rgba(255,255,255,0.14); transition: background 0.3s; }
.form-progress span.done { background: var(--accent); }

.form-step { display: none; }
.form-step.active { display: block; animation: fadeIn 0.3s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.form-step h3 { letter-spacing: -0.02em; margin-bottom: 24px; font-size: var(--fs-h4); }

.option-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 32px; }
.option-btn {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 19px;
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-body-sm);
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s;
}
.option-btn:hover { border-color: rgba(255,255,255,0.3); }
.option-btn.selected { border-color: var(--accent); background: rgba(233,79,55,0.1); }

.field { margin-bottom: 20px; }
.field label { display: block; font-size: var(--fs-sm); font-weight: 600; margin-bottom: 8px; color: var(--muted); }
.field input, .field textarea {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-body);
  transition: border-color 0.2s;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); }
.field select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background: rgba(255,255,255,0.04) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239b9ba1' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 44px 14px 16px;
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-body);
  cursor: pointer;
  transition: border-color 0.2s;
}
.field select:focus { outline: none; border-color: var(--accent); }
.field select option { color: #111; }
.field-optional { font-weight: 400; color: var(--muted); opacity: 0.8; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.form-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.form-nav .btn-back { background: none; border: none; color: var(--muted); cursor: pointer; font-size: var(--fs-body-sm); font-family: var(--font); padding: 10px 0; }
.form-nav .btn-back:hover { color: var(--text); }

.form-success { text-align: center; padding: 40px 0; }
.form-success svg { margin: 0 auto 24px; }
.form-success h3 { font-size: var(--fs-h4); letter-spacing: -0.02em; margin-bottom: 12px; }
.form-success p { color: var(--muted); }
.form-error { color: var(--accent); font-size: var(--fs-sm); margin-top: 10px; display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1020px) {
  .component-grid { grid-template-columns: 1fr 1fr; }
  .edit-item { grid-template-columns: 60px 1fr; }
  .edit-item p { grid-column: 2; }
}
@media (max-width: 1120px) {
  .header-phone { display: none; }
}
@media (max-width: 960px) {
  section, .product-section { padding: 76px 0; }
  .reviews-inner, .contact-grid, .split,
  .procon-grid, .pv-grid, .savings-grid { grid-template-columns: 1fr; }
  /* Phones and tablets: the form first, the contact details after it. */
  .contact-grid .quote-form { order: -1; }
  .support-jump { order: -2; margin: -24px 0 -36px; }
  .payback-figures { padding: 6px 26px; }
  .payback-figure { padding: 20px 0; }
  .payback-figure dd { font-size: 2.1rem; }
  .split.reverse .split-media { order: 0; }
  .split { gap: 40px; }
  .split-media img, .split-media video { min-height: 300px; }
  .brand-card-body { padding: 28px 28px 32px; }
  .gallery-grid { grid-template-columns: 1fr; }
  .gallery-grid img { height: 260px; }
  .process-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .cta-band { padding: 64px 32px; }
  .hero { min-height: 0; padding: 120px 0 96px; }
  .savings-grid { gap: 44px; }
}
@media (max-width: 760px) {
  :root { --strip: 32px; }
  .top-strip li + li::before { margin: 0 10px; }
  .top-strip-inner { padding: 0 12px; }
  .top-strip li > a, .top-strip li > span { gap: 5px; }
  .top-strip-short { display: inline; }
  .top-strip-long {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .header-phone { display: none; }
  .menu-toggle { display: block; }
  .menu-toggle span { transition: transform 0.3s ease, opacity 0.25s ease; }
  .menu-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-toggle.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
  .menu-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .nav {
    position: absolute;
    top: 74px; left: 0; right: 0;
    /* site.js sets --nav-room to the space below the header, which is less
       than the full window while the recognition strip is still on screen. */
    height: var(--nav-room, calc(100dvh - 74px));
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: #0c0c0f;
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    backdrop-filter: saturate(180%) blur(24px);
    padding: 22px 26px 40px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
    overflow: hidden;
    z-index: 120;
  }
  .nav.open { opacity: 1; visibility: visible; transform: none; }
  .nav > a, .nav > .nav-drop {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease, transform 0.4s ease;
  }
  .nav.open > a, .nav.open > .nav-drop { opacity: 1; transform: none; }
  .nav.open > *:nth-child(1) { transition-delay: 0.05s; }
  .nav.open > *:nth-child(2) { transition-delay: 0.1s; }
  .nav.open > *:nth-child(3) { transition-delay: 0.15s; }
  .nav.open > *:nth-child(4) { transition-delay: 0.2s; }
  .nav.open > *:nth-child(5) { transition-delay: 0.25s; }
  .nav.open > *:nth-child(6) { transition-delay: 0.3s; }
  .nav.open > *:nth-child(7) { transition-delay: 0.35s; }
  .nav > a {
    font-size: var(--fs-h4);
    font-weight: 600;
    color: var(--text);
    padding: 18px 0;
    border-bottom: 1px solid var(--border);
  }
  .nav a.active { color: var(--accent); }
  .nav-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: auto;
    padding-top: 24px;
  }
  .nav-phone { font-size: var(--fs-body); font-weight: 600; color: var(--muted); }
  .nav-social { display: flex; gap: 20px; }
  .nav-social a { display: flex; color: var(--muted); padding: 4px; margin: -4px; }
  .nav-social a:hover, .nav-phone:hover { color: var(--text); }
  .nav-social svg { width: 20px; height: 20px; }
  .marquee-track { gap: 56px; padding-right: 56px; }
  .marquee-track img { height: 22px; }
  .marquee-track img.tall { height: 30px; }
  .option-grid, .field-row, .component-grid { grid-template-columns: 1fr; }
  .quote-form { padding: 30px 22px; }
  .edit-item { grid-template-columns: 1fr; gap: 8px; padding: 28px 0; }
  .edit-item p { grid-column: auto; }
}
@media (max-width: 480px) {
  .process-grid { grid-template-columns: 1fr; }
}

/* ---------- Google Places autocomplete dropdown ---------- */
.pac-container {
  background: #17171b;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  margin-top: 6px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
  font-family: var(--font);
  z-index: 2000;
}
.pac-item {
  background: transparent;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: 10px 14px;
  color: #9b9ba1;
  font-size: var(--fs-sm);
  cursor: pointer;
}
.pac-item:first-child { border-top: none; }
.pac-item:hover, .pac-item-selected { background: rgba(255, 255, 255, 0.06); }
.pac-item-query { color: #f5f5f7; font-size: var(--fs-body-sm); }
.pac-matched { color: var(--accent); }
.pac-icon { display: none; }
.pac-logo::after { margin: 6px 12px; }

/* Modern Google autocomplete element on the quote form */
gmp-place-autocomplete.gmp-postcode {
  display: block;
  width: 100%;
  color-scheme: dark;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 12px;
}

/* Confirmed address line under the quote-form address field */
.addr-confirm {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: -6px 0 18px;
  font-size: var(--fs-sm);
  color: var(--muted);
}
.addr-confirm svg { color: var(--accent); flex-shrink: 0; }

/* Autocomplete element inside light panels (savings calculator) */
.light gmp-place-autocomplete.gmp-postcode {
  color-scheme: light;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.14);
}

/* ---------- Legal pages ---------- */
.legal-content { max-width: 800px; padding-bottom: 40px; }
.legal-content h2 { font-size: var(--fs-h4); margin: 44px 0 14px; }
.legal-content h3 { font-size: var(--fs-md); margin: 26px 0 10px; }
.legal-content p { color: var(--muted); font-size: var(--fs-body-sm); margin-bottom: 14px; line-height: 1.7; }
.legal-content ul { margin: 0 0 18px 20px; }
.legal-content li { color: var(--muted); font-size: var(--fs-body-sm); margin-bottom: 8px; line-height: 1.65; }
.legal-content a { color: var(--accent); }
.legal-content a:hover { text-decoration: underline; }
.legal-content strong { color: var(--text); font-weight: 600; }

/* Small legal links in the footer */
.footer-legal-links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-bottom: 14px; font-size: var(--fs-xs); }
.footer-legal-links a { color: var(--muted); transition: color 0.2s; }
.footer-legal-links a:hover { color: var(--text); }

/* ---------- Cookie consent ---------- */
.cookie-banner {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 300;
  width: min(420px, calc(100vw - 40px));
  background: #17171b;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  padding: 24px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.35s ease, transform 0.35s ease;
  pointer-events: none;
}
.cookie-banner.show { opacity: 1; transform: none; pointer-events: auto; }
.cookie-banner h2 { line-height: 1.3; font-size: var(--fs-md); font-weight: 600; margin-bottom: 8px; letter-spacing: -0.01em; }
.cookie-banner p { font-size: var(--fs-sm); color: var(--muted); line-height: 1.55; margin-bottom: 16px; }
.cookie-banner p a { color: var(--accent); }
.cookie-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cookie-actions .btn { padding: 10px 20px; font-size: var(--fs-sm); }
.cookie-manage-link {
  background: none; border: none; cursor: pointer;
  font-family: var(--font); font-size: var(--fs-xs); font-weight: 600;
  color: var(--muted); padding: 10px 4px; margin-left: auto;
}
.cookie-manage-link:hover { color: var(--text); }
.cookie-prefs { display: none; }
.cookie-banner.prefs-open .cookie-prefs { display: block; }
.cookie-banner.prefs-open .cookie-intro { display: none; }
.cookie-cat {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--border);
}
.cookie-cat:last-of-type { margin-bottom: 16px; }
.cookie-cat-info b { display: block; font-size: var(--fs-sm); font-weight: 600; }
.cookie-cat-info span { font-size: var(--fs-xs); color: var(--muted); line-height: 1.4; display: block; }
.cookie-switch { position: relative; width: 42px; height: 24px; flex-shrink: 0; }
.cookie-switch input { opacity: 0; width: 100%; height: 100%; position: absolute; cursor: pointer; z-index: 1; }
.cookie-switch .track {
  position: absolute; inset: 0; border-radius: 999px;
  background: rgba(255, 255, 255, 0.14); transition: background 0.2s;
}
.cookie-switch .track::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; transition: transform 0.2s;
}
.cookie-switch input:checked + .track { background: var(--accent); }
.cookie-switch input:checked + .track::after { transform: translateX(18px); }
.cookie-switch input:disabled + .track { opacity: 0.5; }
@media (max-width: 480px) {
  .cookie-banner { left: 12px; right: 12px; bottom: 12px; width: auto; padding: 20px; }
}

/* ---------- Product bar (Tesla and Sigenergy pages) ----------
   Hidden until the hero has scrolled away; then it takes the header's place,
   and the header comes back whenever the visitor scrolls up (site.js). */
.product-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 101;
  background: rgba(10, 10, 12, 0.92);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--border);
  transform: translateY(-100%);
  transition: transform 0.28s ease;
}
.product-bar[hidden] { display: block; visibility: hidden; }
.bar-on .product-bar { transform: none; visibility: visible; }
.bar-on .site-header { transform: translateY(-100%); }
.site-header { transition: transform 0.28s ease, background-color 0.35s ease, border-color 0.35s ease; }
.product-bar-inner { display: flex; align-items: center; gap: 28px; height: 74px; } /* Same height as the site header (Dan, 10 Oct). */
.product-bar-name { font-weight: 600; color: var(--text); white-space: nowrap; }
.product-bar-links { list-style: none; display: flex; gap: 24px; margin: 0 auto; font-size: var(--fs-sm); }
.product-bar-links a { color: var(--muted); transition: color 0.2s; }
.product-bar-links a:hover { color: var(--text); }
.product-bar .product-bar-cta { padding: 10px 22px; font-size: 0.88rem; margin-left: auto; }
.product-bar-links + .product-bar-cta { margin-left: 0; }
#what-it-does, #fit, #app, #expansion, #gateway, #specifications, #faqs { scroll-margin-top: 40px; }
#without-solar { scroll-margin-top: 110px; }
@media (max-width: 960px) {
  .product-bar-links { display: none; }
  .product-bar .product-bar-cta { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .product-bar, .site-header { transition: none; }
}

/* ---------- Proof under the enquiry forms ---------- */
.form-proof {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
  font-size: var(--fs-xs);
  color: var(--muted);
}
.form-proof li { display: inline-flex; align-items: center; gap: 8px; }
.form-proof a { display: inline-flex; align-items: center; gap: 8px; color: inherit; }
.form-proof a:hover strong { text-decoration: underline; }
.form-proof strong { color: var(--text); font-weight: 600; }
.form-proof svg { flex-shrink: 0; color: var(--text); }
.form-proof-stars { display: inline-flex; gap: 1px; }
.form-proof-gold { color: #d4af37; font-weight: 600; }
.form-proof-tp { flex-basis: 100%; }
/* On the light calculator panel. */
.calc-panel .form-proof { color: var(--light-muted); border-top-color: rgba(0, 0, 0, 0.1); }
.calc-panel .form-proof strong, .calc-panel .form-proof svg { color: var(--light-text); }
.calc-panel .form-proof-gold { color: #a8841c; }

/* ---------- Footer bottom row: legal links + social ---------- */
.footer-bottom-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 24px;
  margin-bottom: 14px;
}
.footer-bottom-row .footer-legal-links { margin-bottom: 0; }
.footer-social { display: flex; gap: 18px; }
.footer-social a { color: var(--muted); transition: color 0.2s; display: flex; }
.footer-social a:hover { color: var(--text); }
.footer-social svg { width: 19px; height: 19px; }

/* Live-updating Trustpilot score line (from reviews.json) */
.tp-score { display: none; margin-top: 14px; font-weight: 600; font-size: var(--fs-body); }
.tp-score .stars { color: #00b67a; letter-spacing: 2px; margin-right: 10px; }
.tp-score.show { display: block; }

/* ---------- Learning Centre category filter ---------- */
.learn-filter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 34px; }
.filter-btn {
  font-family: var(--font);
  font-size: var(--fs-sm);
  font-weight: 600;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  cursor: pointer;
  transition: all 0.2s ease;
}
.filter-btn:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.3); }
.filter-btn.selected { background: #fff; border-color: #fff; color: #111; }
.learn-card.filtered-out { display: none; }

/* ============================================================
   WordPress theme additions
   Everything below exists because the site is now driven by
   templates and fields rather than hand written pages.
   ============================================================ */

/* The templates use the hidden attribute rather than inline styles, so it has
   to win against the display rules the components set. */
[hidden] { display: none !important; }

/* ---------- Accessibility ---------- */
.screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  top: -60px;
  left: 24px;
  z-index: 999;
  background: var(--accent-btn);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 10px 10px;
  font-weight: 600;
  transition: top 0.2s ease;
}
.skip-link:focus {
  top: 0;
  clip: auto;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  white-space: normal;
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- Spacing utilities ---------- */
section.flush-top { padding-top: 0; }

/* ---------- Breadcrumbs ---------- */
.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  color: var(--muted);
  margin-bottom: 22px;
}
.breadcrumbs a { color: var(--muted); }
.breadcrumbs a:hover { color: var(--text); }
.breadcrumbs i { font-style: normal; opacity: 0.45; }
.breadcrumbs [aria-current] { color: var(--text); }
.light .breadcrumbs, .light .breadcrumbs a { color: var(--light-muted); }
.light .breadcrumbs [aria-current] { color: var(--light-text); }

/* ---------- Button rows ---------- */
.button-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 40px;
}
.statement-actions, .savings-actions { margin-top: 36px; }

/* ---------- Section notes ---------- */
.section-note {
  color: var(--muted);
  font-size: var(--fs-sm);
  margin-top: 24px;
  max-width: 780px;
}
.light .section-note { color: var(--light-muted); }

/* ---------- Two column overrides ---------- */
.mount-grid.two-up { grid-template-columns: 1fr 1fr; }
.option-grid.two-up { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 760px) {
  .mount-grid.two-up { grid-template-columns: 1fr; }
}

/* ---------- Inline and card links ---------- */
/* Audit 14 (19 Oct): always underlined, so a link never relies on colour alone. On light
   backgrounds the deeper orange keeps the text above 4.5:1. */
.inline-link { color: var(--accent); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.inline-link:hover { text-decoration-thickness: 2px; }
.light .inline-link { color: var(--accent-btn); }
.card-link { margin-top: 16px; font-size: var(--fs-sm); }
.card-link a { color: var(--accent); font-weight: 600; }

/* ---------- Split body copy ---------- */
.split-copy p {
  color: var(--muted);
  font-size: var(--fs-lead);
  line-height: 1.55;
  letter-spacing: -0.01em;
  max-width: 640px;
  margin-bottom: 18px;
}
.split-copy p:last-child { margin-bottom: 0; }
.light .split-copy p { color: var(--light-muted); }

/* ---------- Comparison table ---------- */
.compare-table .span-cell {
  color: inherit;
  font-weight: 600;
}

/* ---------- Accreditation certificates ---------- */
.cert-list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.cert-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #fff;
  border-radius: 14px;
  padding: 24px 26px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  color: var(--light-text);
}
.cert-head { display: flex; align-items: center; gap: 14px; }
.cert-head h3 { font-size: var(--fs-body); font-weight: 600; color: var(--light-text); }
.cert-card p { font-size: var(--fs-sm); color: var(--light-muted); line-height: 1.55; }
.cert-card img.cert-badge { height: 30px; width: auto; flex-shrink: 0; }
.cert-links { margin-top: auto; display: flex; flex-wrap: wrap; gap: 6px 20px; }
.cert-card .cert-links a { color: var(--accent); font-weight: 600; }
.cert-card .cert-links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.cert-plate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #101024;
  border-radius: 8px;
  padding: 5px 8px;
  flex-shrink: 0;
}
.cert-plate .cert-badge { height: 26px; display: block; }
@media (max-width: 760px) {
  .cert-list { grid-template-columns: 1fr; }
  .cert-card { padding: 22px; }
}

/* ---------- Contact panel ---------- */
.info-text { font-weight: 500; font-size: var(--fs-body); }
.form-hint { color: var(--muted); font-size: var(--fs-sm); margin: -14px 0 20px; }
.field.tight { margin-bottom: 10px; }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.quick-success { text-align: center; padding: 30px 0; }
.quick-success h3 { color: var(--light-text); margin-bottom: 10px; }
.quick-success p { color: var(--light-muted); }
.addr-confirm { color: var(--accent); font-size: var(--fs-sm); margin: -10px 0 18px; }

/* ---------- Learning Centre ---------- */
.learn-card-wrap { display: contents; }
.learn-card-wrap.filtered-out { display: none; }
.learn-empty { color: var(--muted); margin-top: 30px; }

/* ---------- Search ---------- */
.search-form-wrap { max-width: 520px; margin-bottom: 44px; }
.search-form-wrap input[type="search"] {
  width: 100%;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 999px;
  padding: 14px 22px;
  font-family: var(--font);
  font-size: var(--fs-body);
}
.search-results { list-style: none; display: grid; gap: 14px; }
.search-results a {
  display: block;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 28px;
  transition: border-color 0.2s ease;
}
.search-results a:hover { border-color: rgba(255, 255, 255, 0.22); }
.search-results h3 { margin-bottom: 8px; }
.search-results p { color: var(--muted); font-size: var(--fs-body-sm); }

/* ---------- Site map ---------- */
.sitemap-group { margin-bottom: 48px; }
.sitemap-group h2 { font-size: var(--fs-h3); margin-bottom: 18px; }
.sitemap-group ul, .sitemap-links {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px 24px;
}
.sitemap-group a, .sitemap-links a {
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  display: block;
  padding: 10px 0;
}
.sitemap-group a:hover, .sitemap-links a:hover { color: var(--text); }
.sitemap-links { margin-top: 8px; }

/* ---------- Pagination ---------- */
.pagination { margin-top: 56px; display: flex; justify-content: center; }
.pagination .nav-links { display: flex; gap: 8px; flex-wrap: wrap; }
.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--muted);
  font-weight: 600;
  font-size: var(--fs-body-sm);
}
.pagination .page-numbers:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.25); }
.pagination .page-numbers.current { background: var(--accent-btn); border-color: var(--accent-btn); color: #fff; }

/* ---------- 404 ---------- */
.error-hero { min-height: 52vh; display: flex; align-items: center; }

/* ---------- Legal documents ---------- */
.legal-hero { padding-bottom: 40px; }
.article.legal h2 { font-size: var(--fs-h3); }
.article.legal h3 { font-size: var(--fs-lead); }

/* ---------- Holding page ---------- */
.holding-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  text-align: center;
  padding: 40px 24px;
}
.holding-inner { max-width: 560px; }
.holding-inner img { margin: 0 auto 40px; }
.holding-inner h1 { font-size: clamp(2.4rem, 6vw, 3.6rem); margin-bottom: 20px; }
.holding-inner p { color: var(--muted); font-size: var(--fs-md); }
.holding-contact {
  display: flex;
  gap: 24px;
  justify-content: center;
  margin-top: 34px;
  flex-wrap: wrap;
}
.holding-contact a { color: var(--accent); font-weight: 600; }

/* ---------- Editor preview ---------- */
.editor-styles-wrapper { background: var(--bg); color: var(--text); }

/* Supporting line under the homepage hero buttons (WS9 item 51) */
.hero-note { margin-top: 18px; color: rgba(255, 255, 255, 0.72); font-size: var(--fs-sm); }

/* ---------- The process, stacked vertically (WS9 items 55 and 56) ---------- */
.process-layout { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; }
.process-head { position: sticky; top: 120px; }
.process-steps { list-style: none; position: relative; }
.process-step:not(:last-child)::after { content: ""; position: absolute; left: 75px; top: 48px; bottom: 0; width: 1px; background: rgba(0, 0, 0, 0.14); }
.process-step { display: grid; grid-template-columns: 34px 48px 1fr; gap: 0 18px; align-items: start; padding: 0 0 30px; position: relative; }
.process-step:last-child { padding-bottom: 0; }
.process-num { font-weight: 600; font-size: var(--fs-sm); color: var(--accent); letter-spacing: 0.1em; padding-top: 14px; }
.process-icon { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 1px solid rgba(0, 0, 0, 0.12); color: var(--light-text); position: relative; z-index: 1; }
.process-icon svg { width: 22px; height: 22px; }
.process-body { padding-top: 10px; }
.process-body h3 { font-size: var(--fs-lead); margin-bottom: 4px; color: var(--light-text); }
.process-body p { color: var(--light-muted); font-size: var(--fs-body-sm); max-width: 520px; }
@media (max-width: 960px) {
  .process-layout { grid-template-columns: 1fr; gap: 36px; }
  .process-head { position: static; }
}
@media (max-width: 760px) {
  .process-step { grid-template-columns: 26px 40px 1fr; gap: 0 12px; }
  .process-num { padding-top: 10px; }
  .process-step:not(:last-child)::after { left: 57px; top: 40px; }
  .process-icon { width: 40px; height: 40px; }
  .process-icon svg { width: 18px; height: 18px; }
  .process-body { padding-top: 8px; }
}

/* ---------- Proof as a picture: one product icon per installation (WS9 item 60) ---------- */
.proof-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; align-items: center; }
.proof-total { font-size: clamp(4.5rem, 9vw, 7.5rem); font-weight: 700; letter-spacing: -0.05em; line-height: 0.9; margin: 14px 0 12px; color: var(--text); }
.proof-copy h2 { font-size: var(--fs-h3); letter-spacing: -0.025em; margin-bottom: 14px; }
.proof-more { color: var(--accent); white-space: nowrap; }
.proof-lead { color: var(--muted); max-width: 440px; margin-bottom: 24px; }
.proof-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 28px; margin-bottom: 22px; }
.proof-legend li { display: flex; align-items: center; gap: 10px; color: var(--muted); }
.proof-legend strong { color: var(--text); font-size: var(--fs-lead); }
.proof-key { width: 16px; height: 20px; flex-shrink: 0; }
.proof-key.is-sigen { color: var(--accent); }
.proof-key.is-tesla { color: #fff; }
.proof-reviews { color: var(--muted); font-size: var(--fs-body-sm); padding-top: 18px; border-top: 1px solid var(--border); max-width: 440px; }
.proof-reviews strong { color: var(--text); }
.proof-asof { color: #85858c; font-size: var(--fs-xs); margin-top: 8px; }
.proof-dots { margin: 0; }
.proof-dots svg { display: block; width: 100%; height: auto; }
.proof-dots use { color: #2a2a2e; transition: color 0.35s ease; transition-delay: calc(var(--i) * 2.5ms); }
.proof-dots.in use.is-sigen { color: var(--accent); }
.proof-dots.in use.is-tesla { color: #fff; }
/* Icons swell around the pointer (Dan, 12 Oct); drawn by site.js in a layer above the grid. */
.proof-dots svg { overflow: visible; }
.proof-swell { pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .proof-dots use { transition: none; }
  .proof-dots use.is-sigen { color: var(--accent); }
  .proof-dots use.is-tesla { color: #fff; }
}
@media (max-width: 960px) {
  .proof-grid { grid-template-columns: 1fr; gap: 36px; }
}

/* ---------- Our story: numbers and milestones (WS9 item 96) ---------- */
.story-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 48px 0 64px; }
.story-stat { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 8px; padding: 28px 26px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); }
.story-stat dd { font-size: clamp(1.8rem, 2.8vw, 2.5rem); white-space: nowrap; font-weight: 700; letter-spacing: -0.035em; line-height: 1; color: var(--text); }
.story-stat dt { color: var(--muted); font-size: var(--fs-body-sm); }
.timeline { list-style: none; max-width: 860px; position: relative; }
.timeline::before { content: ""; position: absolute; left: 150px; top: 8px; bottom: 8px; width: 1px; background: var(--border); }
.timeline li { display: grid; grid-template-columns: 150px 1fr; gap: 0 40px; position: relative; padding-bottom: 36px; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before { content: ""; position: absolute; left: 146px; top: 7px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.timeline-date { color: var(--accent); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding-top: 3px; }
.timeline-body h3 { font-size: var(--fs-lead); margin-bottom: 6px; line-height: 1.3; }
.timeline-body p { color: var(--muted); font-size: var(--fs-body-sm); max-width: 560px; }
@media (max-width: 960px) {
  .story-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .story-stats { gap: 12px; margin: 36px 0 48px; }
  .story-stat { padding: 20px 18px; }
  .story-stat dd { font-size: 1.6rem; }
  .timeline::before { left: 4px; }
  .timeline li { grid-template-columns: 1fr; padding-left: 28px; gap: 6px; }
  .timeline li::before { left: 0; }
}

/* what3words line under the footer address */
.footer-brand .footer-w3w { margin-top: 2px; }
.footer-w3w a { color: var(--muted); transition: color 0.2s; }
.footer-w3w a:hover { color: var(--text); }
.footer-w3w span { color: var(--accent); font-weight: 700; margin-right: 1px; }

/* ---------- Mobile check (WS9 item 106) ----------
   Readable small print and touch targets of at least 44px on phones. Hit
   areas grow with padding and a matching negative margin, so nothing moves. */
@media (max-width: 760px) {
  /* Running text that was set in the 12.5px label size */
  .footnotes, .spec-panel .spec-note, .contact-desk-note, .calc-note,
  .gallery-grid figcaption, .footer-legal, .footer-legal-links, .footer-accreds,
  .form-proof, .bill-slider .bill-scale { font-size: var(--fs-sm); }

  /* Compare table: tighter cells so three columns fit a 390px screen */
  .compare-table th, .compare-table td { padding: 14px 10px; }
  .compare-table th:first-child, .compare-table td:first-child { padding-left: 0; }
  .compare-table th:last-child, .compare-table td:last-child { padding-right: 0; }

  /* Controls */
  .menu-toggle { width: 44px; height: 44px; padding: 9px 11px; margin-right: -6px; }
  .site-header .logo-mark { padding: 3px; margin: -3px; }
  .site-header .header-cta .btn, .product-bar .btn { min-height: 44px; }
  .hero-video-toggle { width: 44px; height: 44px; }
  .review-nav { width: 44px; height: 44px; }
  .filter-btn { min-height: 44px; }
  .bill-slider input[type="range"] { height: 44px; background-clip: content-box; padding: 19px 0; box-sizing: border-box; }
  .bill-slider input[type="range"]::-webkit-slider-thumb { width: 30px; height: 30px; }

  /* Icon links */
  .footer-social, .nav-social { gap: 0; margin: -12px; }
  .footer-social a, .nav-social a { min-width: 44px; min-height: 44px; padding: 0; margin: 0; justify-content: center; align-items: center; }
  .recog-also a { padding: 11px 8px; margin: -11px -8px; }

  /* Text links that sit on their own */
  .top-strip li > a { padding: 7px 0; }
  .footer-legal-links a, .breadcrumbs a, .cert-links a, .maker-proof .inline-link,
  .review-slide figcaption a, .product-bar-name { display: inline-block; padding: 11px 0; margin: -11px 0; }
  .fn-ref a { display: inline-block; padding: 12px 10px; margin: -12px -10px; }
  .contact-desk-list { gap: 0; }
  .contact-desk-list a { display: inline-flex; align-items: center; min-height: 44px; }
  .footer-accreds { row-gap: 10px; }
  .footer-accreds a { display: inline-block; padding: 5px 0; margin: -5px 0; }
  .hero-actions .hero-link { min-height: 44px; display: inline-flex; align-items: center; }
  .form-proof-tp > a { min-height: 44px; }
}

/* ---------- Scroll sequence (WS9 item 31) ----------
   Default: a plain stack of pictures and captions (phones, reduced motion, no JavaScript).
   With .is-live (site.js, wider screens, motion allowed) the section pins and the steps
   cross-fade as the visitor scrolls: each picture sharpens in over the last, the words rise in. */
.seq { padding: 112px 0; }
.seq-frame { display: grid; gap: 88px; }
.seq-step { display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: center; }
.seq-media { margin: 0; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; background: #000; }
.seq-media img, .seq-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.seq-media.is-video video { object-fit: contain; }
.seq-media img { object-position: center 25%; }
.seq-count { display: block; font-size: var(--fs-sm); letter-spacing: 0.14em; color: var(--muted); margin-bottom: 14px; font-variant-numeric: tabular-nums; }
.seq-copy h2 { margin-bottom: 14px; font-size: clamp(2rem, 3.2vw, 2.9rem); }
.seq-copy p { color: var(--muted); font-size: var(--fs-body); max-width: 400px; }

.seq.is-live { height: calc((var(--seq-count) - 1) * 55vh + 100vh + var(--seq-hold, 0vh)); padding: 0; }
.seq.is-live .seq-pin { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; padding-top: 64px; box-sizing: border-box; overflow: hidden; }
.seq.is-live .seq-frame { position: relative; display: block; width: 100%; height: min(68vh, 620px); }
.seq.is-live .seq-step { position: absolute; top: 0; bottom: 0; left: 24px; right: 24px; pointer-events: none; }
.seq.is-live .seq-step.is-active { pointer-events: auto; }
.seq.is-live .seq-media { height: 100%; aspect-ratio: auto; background: none; opacity: var(--m, 0); filter: blur(var(--b, 0px)) brightness(var(--br, 1)); will-change: opacity, filter; }
.seq.is-live .seq-copy { opacity: var(--t, 0); transform: translateY(var(--y, 0px)); filter: blur(var(--tb, 0px)); will-change: opacity, transform, filter; }

/* Frame scrub (Dan, 13 Oct): the Powerwall 3 taken apart as the visitor
   scrolls. The frames are transparent, so the panel behind them is a light
   studio grey that keeps the dark chassis and cells readable. site.js adds
   the canvas; without it the labelled still shows. */
.seq-media.is-frames { aspect-ratio: auto; background: none; overflow: visible; }
.scrub-panel { padding-top: 22px; background: linear-gradient(180deg, #f5f5f2 0%, #e7e7e3 100%); border-radius: var(--radius); overflow: hidden; }
.scrub-stage { position: relative; aspect-ratio: 6 / 5; width: 100%; margin: 0 auto; }
.scrub-still, .scrub-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: contain; }
.scrub.is-drawn .scrub-still { visibility: hidden; }
.scrub-caption { margin: 0; padding: 0 20px 20px; text-align: center; font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.02em; color: #2b2b31; transition: opacity 0.18s ease; }
.scrub-caption.is-out { opacity: 0; }
.scrub-labels { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; pointer-events: none; }
.scrub-label { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(233, 79, 55, 0.22); transition: opacity 0.3s ease, transform 0.3s ease; }
.scrub-label span { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 12px; font-weight: 600; line-height: 1; color: #fff; background: rgba(18, 18, 22, 0.88); padding: 6px 10px; border-radius: 999px; }
.scrub-label.is-up span { bottom: 16px; }
.scrub-label.is-down span { top: 16px; }
.scrub-label.is-left span, .scrub-label.is-right span { top: 50%; transform: translateY(-50%); }
.scrub-label.is-left span { left: auto; right: 16px; }
.scrub-label.is-right span { left: 16px; }
.scrub.is-scrub .scrub-label { opacity: 0; transform: scale(0.6); }
.scrub.is-scrub.is-labelled .scrub-label { opacity: 1; transform: none; }
/* Pinned on wider screens: the panel fills the frame and the picture sits in the middle of it. */
.seq.is-live .seq-media.is-frames .scrub, .seq.is-live .seq-media.is-frames .scrub-pin, .seq.is-live .seq-media.is-frames .scrub-panel { height: 100%; }
.seq.is-live .seq-media.is-frames .scrub-panel { display: flex; flex-direction: column; justify-content: center; }
.seq.is-live .seq-media.is-frames .scrub-stage { width: min(100%, calc((min(68vh, 620px) - 56px) * 1.2)); }
/* Its own track on phones: the panel stays put under the header while the frames play.
   The pinned block fills the screen; under the panel a prompt invites the scroll
   (Dan, 13 Oct). It fades as the frames finish, and the step's heading, pulled up
   by the prompt's height (--scrub-hint, from site.js), rises into its place. */
.scrub.is-track { height: 250vh; }
.scrub.is-track .scrub-pin { position: sticky; top: 88px; display: flex; flex-direction: column; min-height: calc(100svh - 104px); }
.scrub-hint { display: none; }
.scrub.is-track .scrub-hint { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px 16px; text-align: center; opacity: var(--hint, 1); transform: translateY(calc((1 - var(--hint, 1)) * -12px)); }
.scrub-hint p { margin: 0; max-width: 16em; font-size: var(--fs-h4); font-weight: 600; line-height: 1.25; color: var(--text); text-wrap: balance; }
.scrub-hint-icon { position: relative; width: 22px; height: 34px; border: 2px solid rgba(255, 255, 255, 0.5); border-radius: 12px; }
.scrub-hint-icon::before { content: ""; position: absolute; left: 50%; top: 6px; width: 4px; height: 7px; margin-left: -2px; border-radius: 2px; background: var(--accent); animation: scrub-hint 1.6s ease-in-out infinite; }
@keyframes scrub-hint { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(12px); opacity: 0; } 100% { transform: translateY(0); opacity: 0; } }
.seq-step.has-scrub-track { margin-bottom: calc(-1 * var(--scrub-after, 0px)); }
.seq-step.has-scrub-track .seq-copy { position: relative; align-self: start; margin-top: calc(-22px - var(--scrub-hint, 0px) + 24px); }

@media (max-width: 760px) {
  .seq { padding: 72px 0; }
  .seq-frame { gap: 56px; }
  .seq-step { grid-template-columns: 1fr; gap: 22px; }
}

/* Stack film (Dan, 14 Oct): the SigenStor stack build beside "Expansion".
   The panel matches the film's studio grey so the edges disappear. The
   caption is centred between the top of the panel and the top of the
   tower; site.js moves --stack-top as the tower grows. The finished still
   shows until site.js adds the video over it. */
.split-media.stack-film { background: #f3f3f1; align-self: stretch; display: flex; align-items: center; }
.stack-frame { position: relative; width: 100%; aspect-ratio: 1 / 1; }
/* Browsers shade the film a touch differently from the panel, so its top and
   bottom edges fade out rather than show a line. */
.stack-frame img, .stack-frame video { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 6%, #000 94%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 6%, #000 94%, transparent 100%); }
.split-media.stack-film img, .split-media.stack-film video { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; max-height: none; object-fit: contain; }
.stack-film video { background: #f3f3f1; }
.stack-caption { position: absolute; z-index: 1; left: 50%; top: calc(var(--stack-top, 24%) / 2); transform: translate(-50%, -50%); margin: 0; padding: 0 16px; width: max-content; max-width: 100%; text-align: center; font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.02em; color: #2b2b31; transition: opacity 0.18s ease; }
.stack-caption.is-out { opacity: 0; }
.split-body .spec-panel { margin-top: 32px; padding: 28px 32px; }
.split-body .spec-list li span:first-child { white-space: nowrap; }
@media (max-width: 760px) {
  .split-body .spec-panel { padding: 24px; }
}

/* Size comparison (Dan, 14 Oct) on the compare page: the to-scale drawing,
   with light labels on a transparent background, sits straight on the dark
   section. */
.size-compare { margin: 48px 0 0; }
.size-compare img { display: block; width: 100%; max-width: 760px; height: auto; margin: 0 auto; }
.size-compare figcaption { margin-top: 16px; text-align: center; font-size: var(--fs-xs); color: var(--muted); }
@media (max-width: 760px) {
  .size-compare { margin-top: 36px; }
  .size-compare img { max-width: 420px; }
}

/* Gateway film (Dan, 14 Oct; 15 Oct): the Sigen Gateway SP-F opens on a
   press. The transparent frames sit straight on the section, the shut
   gateway in the middle of the column and level with the copy beside it.
   A caption above names each stage; labels point out the parts when open.
   The open still is the no-JavaScript fallback. */
.split-media.gw-film { align-self: stretch; display: flex; flex-direction: column; justify-content: center; overflow: visible; border-radius: 0; }
.gw-caption { margin: 0 0 8px; text-align: center; transition: opacity 0.16s ease; }
.gw-caption p { margin: 0; }
.gw-caption-head { font-size: var(--fs-body-sm); font-weight: 600; letter-spacing: 0.01em; color: var(--text); }
.gw-caption-sub { margin-top: 4px !important; font-size: var(--fs-xs); color: var(--muted); }
.gw-caption.is-out { opacity: 0; }
.gw-caption[hidden] { display: block; visibility: hidden; }
.gw-frame { position: relative; width: 100%; aspect-ratio: var(--gw-ratio, 1160 / 1000); }
.split-media.gw-film .gw-still, .gw-canvas { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; max-height: none; object-fit: contain; display: block; }
.gw-toggle { position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; border-radius: var(--radius); }
.gw-toggle:disabled { cursor: progress; }
.gw-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.gw-toggle[hidden] { display: none; }
.gw-labels { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; pointer-events: none; }
.gw-label { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(233, 79, 55, 0.25); opacity: 0; transform: scale(0.6); transition: opacity 0.3s ease, transform 0.3s ease; }
.gw-film.is-labelled .gw-label { opacity: 1; transform: none; }
.gw-film.is-labelled .gw-label:nth-child(2) { transition-delay: 0.05s; }
.gw-film.is-labelled .gw-label:nth-child(3) { transition-delay: 0.1s; }
.gw-film.is-labelled .gw-label:nth-child(4) { transition-delay: 0.15s; }
.gw-film.is-labelled .gw-label:nth-child(5) { transition-delay: 0.2s; }
.gw-film.is-labelled .gw-label:nth-child(6) { transition-delay: 0.25s; }
.gw-label span { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 12px; font-weight: 600; line-height: 1; color: #fff; background: rgba(18, 18, 22, 0.92); border: 1px solid rgba(255, 255, 255, 0.16); padding: 6px 10px; border-radius: 999px; }
.gw-label.is-up span { bottom: 16px; }
.gw-label.is-down span { top: 16px; }
.gw-label.is-left span, .gw-label.is-right span { top: 50%; transform: translateY(-50%); }
.gw-label.is-left span { left: auto; right: 16px; }
.gw-label.is-right span { left: 16px; }
/* Hide or show the labels; it holds its space so nothing moves when it appears. */
.gw-labels-toggle { align-self: center; margin-top: 10px; padding: 7px 14px; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 999px; background: none; color: var(--text); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0s linear 0.3s, border-color 0.2s ease; }
.gw-labels-toggle[hidden] { display: block; }
.gw-film.is-open .gw-labels-toggle:not([hidden]) { opacity: 1; visibility: visible; transition: opacity 0.3s ease, border-color 0.2s ease; }
.gw-labels-toggle:hover { border-color: rgba(255, 255, 255, 0.5); }
.gw-labels-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 760px) {
  .gw-label span { font-size: 10px; padding: 5px 8px; }
  .gw-label.is-up span { bottom: 12px; }
  .gw-label.is-down span { top: 12px; }
  .gw-label.is-left span { right: 12px; }
  .gw-label.is-right span { left: 12px; }
}

/* Solar Panels: the two AIKO panels side by side, heading above and copy below (Dan, 15 Oct). */
.panel-pair .section-head { margin-bottom: 56px; }
.panel-pair .section-head h2 { text-wrap: balance; }
.panel-pair-media {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(28px, 6vw, 96px);
}
/* Widths follow each render's pixel width, so both panels keep one scale. */
.panel-pair-media img { display: block; width: calc(var(--w) / 760 * min(22vw, 250px)); height: auto; }
.panel-pair-body { max-width: 860px; margin: 56px auto 0; text-align: center; }
.panel-pair-body .lead { margin: 0 auto; max-width: 700px; text-wrap: balance; }
.panel-pair-body ul.ticks {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 40px;
  margin-top: 36px;
  text-align: left;
}
.panel-pair-body ul.ticks li { display: flex; gap: 12px; align-items: flex-start; padding: 9px 0; font-size: var(--fs-body); }
.panel-pair-body ul.ticks svg { flex-shrink: 0; margin-top: 5px; }
@media (max-width: 760px) {
  .panel-pair .section-head { margin-bottom: 36px; }
  .panel-pair-media img { width: calc(var(--w) / 760 * 38vw); }
  .panel-pair-body { margin-top: 40px; }
  .panel-pair-body ul.ticks { grid-template-columns: 1fr; margin-top: 24px; }
}

/* ---------------------------------------------------------------
   Projects (Dan, 16 Oct): photo grid with lightbox, filterable
   project cards, and each project's page.
--------------------------------------------------------------- */
.photo-grid-list { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.photo-grid-list li[hidden] { display: none; }
.photo-grid-item { display: block; position: relative; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: var(--card); }
.photo-grid-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.photo-grid-item:hover img { transform: scale(1.04); }
.photo-grid-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.photo-grid-more { display: flex; margin: 28px auto 0; }

.project-filters { display: flex; flex-wrap: wrap; gap: 14px 32px; margin-bottom: 36px; }
.project-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.project-filter-label { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--light-muted); margin-right: 4px; }
.light .filter-btn { border-color: rgba(0, 0, 0, 0.14); background: #fff; color: var(--light-muted); }
.light .filter-btn:hover { color: var(--light-text); border-color: rgba(0, 0, 0, 0.3); }
.light .filter-btn.selected { background: var(--light-text); border-color: var(--light-text); color: #fff; }

.project-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.project-card.filtered-out { display: none; }
.project-card-link { display: flex; flex-direction: column; height: 100%; border-radius: var(--radius); overflow: hidden; background: #fff; color: var(--light-text); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); transition: box-shadow 0.25s ease, transform 0.25s ease; }
.project-card-link:hover { box-shadow: 0 14px 34px rgba(0, 0, 0, 0.1); transform: translateY(-2px); }
.project-card-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.project-card-media { aspect-ratio: 4 / 3; overflow: hidden; background: #e6e6ea; }
.project-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.project-card-link:hover .project-card-media img { transform: scale(1.04); }
.project-card-body { display: flex; flex-direction: column; flex: 1; padding: 22px 24px 24px; }
.project-card-meta { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--light-muted); }
.project-card-title { margin-top: 8px; font-size: var(--fs-md); line-height: 1.3; color: var(--light-text); }
.project-card-body p { margin-top: 8px; font-size: var(--fs-body-sm); line-height: 1.5; color: var(--light-muted); }
.project-card-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 18px 0 0; padding-top: 16px; border-top: 1px solid rgba(0, 0, 0, 0.08); }
.project-card-stats dt { font-size: 0.72rem; line-height: 1.3; color: var(--light-muted); }
.project-card-stats dd { margin: 4px 0 0; font-size: var(--fs-body); font-weight: 700; color: var(--light-text); white-space: nowrap; }
.project-card-more { margin-top: auto; padding-top: 18px; font-size: var(--fs-sm); font-weight: 600; color: var(--accent); }
.project-empty { margin-top: 24px; color: var(--light-muted); }
.project-all { margin-top: 28px; text-align: center; }

.project-stats-band { padding: 0 0 8px; }
.project-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1px; margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--border); }
.project-stat { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px; padding: 26px 28px; background: var(--surface); }
.project-stat dt { font-size: var(--fs-sm); color: var(--muted); }
.project-stat dd { margin: 0; display: flex; align-items: baseline; gap: 0; }
.project-stat-value { font-size: clamp(2rem, 3.6vw, 2.8rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1; color: var(--text); }
.project-stat-unit { font-size: var(--fs-md); font-weight: 600; color: var(--muted); }
.project-detail { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.project-story h2 { margin-top: 10px; text-wrap: balance; }
.project-story .split-copy { margin-top: 20px; }

/* Lightbox: built by site.js on first open. */
.lightbox { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(6, 6, 8, 0.96); color: #fff; }
.lightbox::backdrop { background: rgba(6, 6, 8, 0.96); }
.lightbox-stage { position: absolute; inset: 56px 72px 84px; display: flex; align-items: center; justify-content: center; }
.lightbox-img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; user-select: none; }
.lightbox-bar { position: absolute; left: 72px; right: 72px; bottom: 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.72); }
.lightbox-bar a { color: #fff; font-weight: 600; }
.lightbox-btn { position: absolute; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.1); color: #fff; cursor: pointer; transition: background 0.2s ease; }
.lightbox-btn:hover { background: rgba(255, 255, 255, 0.2); }
.lightbox-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lightbox-close { top: 16px; right: 16px; }
.lightbox-prev { left: 14px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 14px; top: 50%; transform: translateY(-50%); }
.lightbox-btn[hidden] { display: none; }

@media (max-width: 1023px) {
  .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .photo-grid-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .project-detail { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}
@media (max-width: 760px) {
  .project-grid { grid-template-columns: 1fr; }
  .photo-grid-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .project-filters { gap: 14px; }
  .project-stat { padding: 20px; }
  .lightbox-stage { inset: 56px 0 92px; }
  .lightbox-bar { left: 16px; right: 132px; }
  .lightbox-prev, .lightbox-next { top: auto; bottom: 18px; transform: none; }
  .lightbox-prev { left: auto; right: 72px; }
}
#gallery .section-head h2, #projects .section-head h2 { text-wrap: balance; }
/* Project write-ups list what was fitted (Dan, 16 Oct). */
.project-story .split-copy ul { margin: -6px 0 18px; padding-left: 20px; color: var(--muted); font-size: var(--fs-md); line-height: 1.6; }
.project-story .split-copy li { padding: 3px 0; }
.project-story .split-copy li::marker { color: var(--accent); }
.project-card[hidden] { display: none; }
.project-more { display: flex; margin: 32px auto 0; }
.project-more[hidden] { display: none; }
.single-powergy_project .page-hero h1 { text-wrap: balance; }

/* Audit 11 (19 Oct): the narrowest phones (320px) get tighter spacing and no icons, so the
   three items fit without widening the page. */
@media (max-width: 374px) {
  .top-strip { font-size: 0.7rem; }
  .top-strip-inner { padding: 0 6px; }
  .top-strip li + li::before { margin: 0 7px; }
  .top-strip li svg { display: none; }
}

/* Audit 13 (19 Oct): the what3words and coverage links sit one above the other, so they
   get real height of their own (44px) instead of overlapping hit areas. */
.footer-w3w a, .footer-coverage a { display: inline-flex; align-items: center; min-height: 44px; }

.form-step h3:focus { outline: none; }
.cookie-banner h2:focus { outline: none; }
/* Privacy notice beside each enquiry button (audit 10, 19 Oct). */
.form-privacy { margin-top: 14px; font-size: var(--fs-xs); line-height: 1.55; color: var(--muted); max-width: 520px; }
.light .form-privacy, .calc-panel .form-privacy, .email-gate .form-privacy { color: var(--light-muted); }
/* "Enter address manually" under the address lookup (audit 19, 19 Oct). */
.address-manual { display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px; padding: 0; border: 0; background: none; font: inherit; font-size: var(--fs-sm); font-weight: 600; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.light .address-manual, .calc-panel .address-manual { color: var(--accent-btn); }
.payback-caveat { margin-top: 20px; font-size: var(--fs-sm); line-height: 1.55; color: var(--muted); max-width: 640px; }
.light .payback-caveat { color: var(--light-muted); }
/* Tables in legal documents, such as the cookie list (19 Oct). */
.article .table-wrap, .legal-content .table-wrap { overflow-x: auto; margin: 18px 0 22px; }
.article table, .legal-content table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: var(--fs-sm); line-height: 1.5; }
.article th, .article td, .legal-content th, .legal-content td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.article th, .legal-content th { color: var(--text); font-weight: 600; }
.article.legal td:first-child, .legal-content td:first-child { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.82rem; white-space: nowrap; }
.article td, .legal-content td { color: var(--muted); }

/* Re-audit 20 Oct: the spec panel's padding pushed one-column project pages past 320px
   (11), and the cookie banner's policy link relied on colour alone (14). */
@media (max-width: 760px) {
  .project-detail .spec-panel { padding: 26px 22px; }
  .project-detail .spec-list li { gap: 14px; }
  .project-detail .spec-list li span:last-child { overflow-wrap: anywhere; }
}
.cookie-intro a { text-decoration: underline; text-underline-offset: 2px; }
/* Below 375px the CTA band's long button label wraps instead of running past the card. */
@media (max-width: 374px) {
  .cta-band .btn { white-space: normal; text-align: center; max-width: 100%; }
}

/* =====================================================================
   Light theme (Dan and Harry, 12 Nov 2026)
   White and light grey pages in the spirit of apple.com and Eight Sleep.
   Orange stays the colour of the main actions; black is kept as an accent:
   photo heroes and photo bands, the footer, and the battery cards.
   The tokens in :root are the light set; the places below that stay dark
   take the dark set, so everything inside them reads as before.
   ===================================================================== */
.on-dark,
.hero,
.page-hero.has-img,
.cta-band,
.site-footer,
.brand-card,
.size-compare,
.lightbox {
  --bg: #0a0a0c;
  --surface: #121215;
  --card: #17171b;
  --border: rgba(255, 255, 255, 0.1);
  --text: #f5f5f7;
  --muted: #a1a1a6;
  --accent: #e94f37;
  color: var(--text);
}
/* Photo heroes keep a dark backing under the fade, so the words below the photo stay white on black. */
.page-hero.has-img { background: var(--bg); }

/* Orange text on white needs the deeper shade to stay readable (4.5:1); the dark places keep the bright one. */
:root { --accent: #c93c25; }

/* Guides: body copy in a readable dark grey rather than the light grey it had on black. */
.article p, .article ul, .article ol { color: #424245; }
.article .article-note { color: var(--muted); }

/* Cards on a light grey section are white; on a white section they are grey. */
.light { --card: #fff; }

/* Two-tone headings: the second line steps back in grey. */
h1 .accent, h2 .accent, h3 .accent { color: #86868b; }
.on-dark h1 .accent, .on-dark h2 .accent, .hero h1 .accent, .hero h2 .accent,
.page-hero.has-img h1 .accent, .cta-band h2 .accent { color: #b0b0b5; }

/* Buttons: outlines are dark on light, white where the background stays dark. */
.btn-ghost { color: var(--text); box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, 0.26); }
.btn-ghost:hover { background: rgba(0, 0, 0, 0.04); box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, 0.6); }
.on-dark .btn-ghost, .hero .btn-ghost, .page-hero.has-img .btn-ghost, .cta-band .btn-ghost, .brand-card .btn-ghost, .site-footer .btn-ghost {
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.38);
}
.on-dark .btn-ghost:hover, .hero .btn-ghost:hover, .page-hero.has-img .btn-ghost:hover, .cta-band .btn-ghost:hover, .brand-card .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.7);
}

/* Recognition strip: a quiet grey bar above the header. */
.top-strip { background: #f5f5f7; border-bottom: 1px solid rgba(0, 0, 0, 0.06); color: #515154; }
.top-strip li + li::before { background: rgba(0, 0, 0, 0.16); }
.top-strip li > a:hover { color: #1d1d1f; }
.top-strip .top-strip-gold { color: #8a6a10; }

/* Header: frosted white, Apple's pattern. Over a photo hero it stays clear
   with white type until the page scrolls (the rules further up). */
.site-header { background: rgba(255, 255, 255, 0.82); border-bottom: 1px solid rgba(0, 0, 0, 0.08); }
.logo-mark .logo-on-dark { display: none; }
.has-photo-hero:not(.nav-locked) .site-header:not(.is-scrolled) .logo-on-dark { display: block; }
.has-photo-hero:not(.nav-locked) .site-header:not(.is-scrolled) .logo-on-light { display: none; }
.has-photo-hero:not(.nav-locked) .site-header:not(.is-scrolled) .menu-toggle span { background: #fff; }
body.nav-locked .site-header { background: #fff; }
@media (min-width: 761px) {
  body .site-header.site-header:has(.nav-drop:hover),
  body .site-header.site-header:has(.nav-drop:focus-within) {
    background: rgba(255, 255, 255, 0.98);
    border-bottom-color: rgba(0, 0, 0, 0.08);
  }
  /* With the panel open the header is white, so its type is dark again. */
  .has-photo-hero .site-header:has(.nav-drop:hover) .nav > a,
  .has-photo-hero .site-header:has(.nav-drop:hover) .nav-drop-toggle,
  .has-photo-hero .site-header:has(.nav-drop:hover) .header-phone,
  .has-photo-hero .site-header:has(.nav-drop:focus-within) .nav > a,
  .has-photo-hero .site-header:has(.nav-drop:focus-within) .nav-drop-toggle,
  .has-photo-hero .site-header:has(.nav-drop:focus-within) .header-phone { color: var(--text); text-shadow: none; }
  .has-photo-hero .site-header:has(.nav-drop:hover) .logo-on-dark,
  .has-photo-hero .site-header:has(.nav-drop:focus-within) .logo-on-dark { display: none; }
  .has-photo-hero .site-header:has(.nav-drop:hover) .logo-on-light,
  .has-photo-hero .site-header:has(.nav-drop:focus-within) .logo-on-light { display: block; }
}
.nav-drop-menu { background: #fff; border-top-color: rgba(0, 0, 0, 0.06); box-shadow: 0 24px 40px rgba(0, 0, 0, 0.08); }
.nav-drop-menu a:hover { background: rgba(0, 0, 0, 0.04); }
.nav-drop-menu a.active { background: rgba(0, 0, 0, 0.03); }
.nav-mega .nav-mega-feature, .nav-mega .nav-mega-feature:hover { background: #e8e8ed; }
@media (max-width: 760px) {
  .nav { background: #fff; }
  .nav .nav-drop-menu, .nav-drop:hover .nav-drop-menu, .nav-drop:focus-within .nav-drop-menu { background: #fff; }
}

/* Product bar on the Tesla and Sigenergy pages. */
.product-bar { background: rgba(255, 255, 255, 0.86); border-bottom-color: rgba(0, 0, 0, 0.08); }

/* Starting point and its chooser. */
.route-arrow { background: rgba(0, 0, 0, 0.05); border-color: rgba(0, 0, 0, 0.12); }
.route-trigger:hover .route-arrow, .route-trigger:focus-visible .route-arrow { color: #fff; }
.route-chooser { background: rgba(245, 245, 247, 0.94); }
.route-close { border-color: rgba(0, 0, 0, 0.18); }
.route-close:hover { background: rgba(0, 0, 0, 0.05); }
.route-tile { background: #fff; border-color: rgba(0, 0, 0, 0.06); box-shadow: 0 2px 14px rgba(0, 0, 0, 0.06); }
.route-tile:hover, .route-tile:focus-visible { border-color: #1d1d1f; }
.route-tile-body { background: #fff; }

/* Battery cards stay black, the accent; the panels banner and the add-a-battery band beside them are light. */
.brand-card { background: #0a0a0c; }
.panel-banner h3, .upgrade-band h3 { color: var(--text); }
.panel-banner p, .upgrade-band p { color: var(--muted); }
.brand-names a { color: #86868b; }

/* Process, reviews, coverage, proof. */
.process-grid .step { border-top-color: rgba(0, 0, 0, 0.85); }
.review-nav { background: rgba(255, 255, 255, 0.92); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06); }
.review-nav:hover { border-color: rgba(0, 0, 0, 0.3); }
.review-bar { background: rgba(0, 0, 0, 0.1); }
.coverage-swatch { background: #26262b; box-shadow: none; }
.proof-key.is-tesla, .proof-dots.in use.is-tesla { color: #1d1d1f; }
.proof-dots use { color: #e3e3e8; }
@media (prefers-reduced-motion: reduce) { .proof-dots use.is-tesla { color: #1d1d1f; } }

/* Small grey type that needs to stay readable on white. */
.footnotes, .proof-asof, .learn-card .read-time, .article-meta, .spec-panel .spec-note { color: var(--muted); }

/* Photo bands keep their dark backing, so phones fade the photo into it. */
.cta-band { background: #121215; }

/* Icon chips, cards and lists. */
.card-icon { background: rgba(0, 0, 0, 0.05); }
.on-dark .card-icon, .brand-card .card-icon { background: rgba(255, 255, 255, 0.07); }
.learn-card:hover { border-color: rgba(0, 0, 0, 0.22); }
.search-results a:hover, .pagination .page-numbers:hover { background: rgba(0, 0, 0, 0.04); }
.hero-note { color: rgba(255, 255, 255, 0.72); }

/* Forms. */
.form-progress span { background: rgba(0, 0, 0, 0.1); }
.option-btn { background: #fff; }
.option-btn:hover { border-color: rgba(0, 0, 0, 0.35); }
.option-btn.selected { background: rgba(233, 79, 55, 0.08); }
.field input, .field textarea { background: #fff; }
.field select { background-color: #fff; }
.field select option { color: #1d1d1f; background: #fff; }
.filter-btn { border-color: rgba(0, 0, 0, 0.14); }
.filter-btn:hover { border-color: rgba(0, 0, 0, 0.4); }
.filter-btn.selected { background: #1d1d1f; border-color: #1d1d1f; color: #fff; }

/* Google's address suggestions. */
.pac-container { background: #fff; border-color: rgba(0, 0, 0, 0.1); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12); }
.pac-item { color: #515154; border-top-color: rgba(0, 0, 0, 0.06); }
.pac-item:hover, .pac-item-selected { background: rgba(0, 0, 0, 0.04); }
.pac-item-query { color: #1d1d1f; }

/* Cookie banner: a white card. */
.cookie-banner { background: #fff; border-color: rgba(0, 0, 0, 0.08); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.16); }
.cookie-switch .track { background: rgba(0, 0, 0, 0.16); }

/* Compare page: the to-scale drawing has light lines and labels, so it sits on a black panel. */
.size-compare { background: var(--bg); border-radius: var(--radius); padding: 48px 24px 28px; }
@media (max-width: 760px) { .size-compare { padding: 28px 16px 20px; } }

/* ---------- Main action button (Dan and Harry, 12 Nov 2026) ----------
   The "Start my design" family: header, home hero, product bar, the closing
   panel on each page, the Compare guide and the 404 page. Orange gradient pill
   with a black arrow disc. Form buttons keep the plain orange .btn-primary.
   White text stays at 4.5:1 or better across the whole gradient. */
.btn-cta {
  position: relative;
  gap: 14px;
  padding: 6px 6px 6px 28px;
  background: linear-gradient(135deg, #d4442a 0%, #c93c25 48%, #a32c17 100%);
  background-size: 140% 100%;
  background-position: 0% 50%;
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 6px 14px -8px rgba(201, 60, 37, 0.45);
}
.btn-cta::after {
  content: "";
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #141416 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff8a50' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 46% no-repeat;
  transition: transform 0.22s ease;
}
.btn-cta:hover {
  background: linear-gradient(135deg, #d4442a 0%, #c93c25 48%, #a32c17 100%);
  background-size: 140% 100%;
  background-position: 100% 50%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 8px 18px -8px rgba(201, 60, 37, 0.6);
}
.btn-cta:hover::after { transform: translateX(3px); }
.btn-cta.btn-nav, .btn-cta.product-bar-cta { gap: 10px; padding: 4px 4px 4px 18px; }
/* No glow in the header or product bar: it spilled onto the phone menu and
   the panel below (Dan, 12 Nov). */
.btn-cta.btn-nav, .btn-cta.btn-nav:hover,
.btn-cta.product-bar-cta, .btn-cta.product-bar-cta:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28); }
.btn-cta.btn-nav::after, .btn-cta.product-bar-cta::after { width: 32px; height: 32px; }
/* The homepage hero's button is white with black text and no arrow, so it
   stands apart from the film (Dan, 13 Nov). The rest of the family keeps
   the orange pill. */
.hero-home .btn-cta,
.hero-home .btn-cta:hover {
  min-height: 52px;
  padding: 0 32px;
  background: #fff;
  color: #141416;
  box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.55);
}
.hero-home .btn-cta:hover { background: #e9e9ec; }
.hero-home .btn-cta::after { display: none; }
@media (prefers-reduced-motion: reduce) {
  .btn-cta, .btn-cta::after { transition: none; }
  .btn-cta:hover, .btn-cta:hover::after { transform: none; }
}
@media (max-width: 760px) {
  .cta-band .btn-cta { white-space: normal; text-align: left; }
}
/* Narrow phones: the logo never gives way to the longer header wording. */
.site-header .header-inner > .logo { flex-shrink: 0; }
@media (max-width: 380px) {
  .btn-cta.btn-nav { gap: 8px; padding-left: 14px; font-size: 0.84rem; }
  .btn-cta.btn-nav::after { width: 30px; height: 30px; }
}
@media (max-width: 340px) {
  .btn-cta.btn-nav { padding: 0 16px; }
  .btn-cta.btn-nav::after { display: none; }
}

/* ---------- Why Powergy: who we are (Dan, 12 Nov) ----------
   A dictionary entry for the name, then the vision and the mission side by
   side. Colours come from the light theme tokens. */
.mission-entry { max-width: 860px; }
.mission-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin: 0 0 22px; }
.mission-word { font-size: clamp(2.6rem, 6vw, 4.4rem); font-weight: 700; letter-spacing: -0.035em; line-height: 1; color: var(--text); }
.mission-say { font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: var(--muted); }
.mission-class { font-size: clamp(1.05rem, 1.6vw, 1.3rem); font-style: italic; color: var(--accent, #c93c25); }
.mission-definition { font-size: var(--fs-lead); line-height: 1.6; color: var(--muted); margin: 0; max-width: 720px; text-wrap: pretty; }
.mission-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 64px; padding-top: 40px; border-top: 1px solid rgba(0, 0, 0, 0.1); }
.mission-col h2 { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; }
.mission-col p { font-size: var(--fs-md); line-height: 1.65; color: var(--text); margin: 0; }
@media (max-width: 760px) {
  .mission-cols { grid-template-columns: 1fr; gap: 32px; margin-top: 44px; padding-top: 32px; }
}
/* The awards photo is three pictures in a square: show it whole. */
.recognition-split .split-media img { aspect-ratio: 1 / 1; height: auto; min-height: 0; max-height: none; object-fit: cover; }