/* ==========================================================================
   OVO Solar & Battery, Microsite Design System
   Brand: #0A9828 (OVO Green) · #00261C (Deep Forest) · #044D29 (Forest) · White
   Type:  OVO Circular (Book 400 / Bold 700 / Black 900)
   ========================================================================== */

/* ---------- Fonts ---------- */
@font-face {
  font-family: 'Gabarito';
  src: url('../assets/fonts/Gabarito-var.woff2') format('woff2');
  font-weight: 400 900; font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('../assets/fonts/Manrope-var.woff2') format('woff2');
  font-weight: 200 800; font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* ============ CLEARLINE TOKENS ============
     Brand sheet (Aug 2026): Ink #121821, Soft White #F5F6F8, Pure White #FFFFFF,
     Slate #667085, plus four route gradients. Master identity is monochrome;
     route colour appears only where it carries meaning.
     Mixed values are precomputed to hex (color-mix has no graceful fallback).
     Legacy chassis names are kept so the component library ports unchanged:
     --green* now hold the CTA (ink) ramp, --forest* the dark surfaces. */
  --green:        #121821;                                    /* CTA: Clearline Ink */
  --green-600:    #121821;                                    /* btn--primary bg */
  --green-700:    #242B37;   /* btn hover */
  --forest:       #121821;
  --forest-deep:  #121821;                                    /* dark section ground */
  --ink:          #121821;
  --body:         #212833;   /* reading text */
  --muted:        #667085;                                    /* Slate, AA on white */
  --line:         #DADDE2;
  --line-soft:    #EBECEF;
  --bg:           #ffffff;
  --bg-soft:      #F5F6F8;                                    /* Soft White */
  --bg-mint:      #F5F6F8;                                    /* legacy alias */
  --white:        #ffffff;
  --amber:        #FFD59E;                                    /* solar route A, accent duty */
  --sun:          #FFD59E;

  /* Route gradients: the only brand colour. Scoped per product via data-route. */
  --route-solar-a:   #FFD59E; --route-solar-b:   #FF6B9D;
  --route-battery-a: #F2E6EE; --route-battery-b: #977DFF;
  --route-ev-a:      #B9F5D8; --route-ev-b:      #5B8DEF;
  --route-heat-a:    #C5F2EA; --route-heat-b:    #159C8E;
  --route-a: var(--route-ev-a);  /* neutral pages default to the EV mint-blue */
  --route-b: var(--route-ev-b);

  --radius-sm: 10px;
  --radius:    16px;
  --radius-lg: 24px;
  --radius-xl: 32px;

  --shadow-sm: 0 1px 2px rgba(18,24,33,.06), 0 2px 8px rgba(18,24,33,.05);
  --shadow:    0 4px 12px rgba(18,24,33,.07), 0 12px 32px rgba(18,24,33,.07);
  --shadow-lg: 0 8px 24px rgba(18,24,33,.10), 0 24px 64px rgba(18,24,33,.12);

  --wrap: 1180px;
  --gutter: clamp(20px, 5vw, 40px);

  --ease: cubic-bezier(.22,.61,.36,1);

  /* Solid surfaces for dark sections. Flat and confident: on the ink ground a
     card is a solid lighter tint of ink, never a translucent wash. */
  --surface-dark:      #1E242F;
  --surface-dark-2:    #262D39;
  --surface-dark-line: #323947;
  --surface-dark-soft: #11171F;
  --on-dark:           #E4E6EA;
  --on-dark-strong:    #FFFFFF;
  --on-dark-muted:     #B5BAC4;
  --accent-light:      #B9F5D8;  /* route mint, dark grounds only */

  /* CTA presence. Buttons must read as pressable objects at a glance. */
  --cta-shadow: 0 2px 0 #2B323F, 0 6px 18px rgba(18,24,33,.30);
  --cta-shadow-hover: 0 3px 0 #2B323F, 0 10px 26px rgba(18,24,33,.36);
  --tap: 48px; /* minimum interactive height, exceeds the 44px AA floor */
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  /* the header is a 74px sticky bar, so anchored and focused elements
     must not land underneath it (WCAG 2.4.11 Focus Not Obscured) */
  scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-weight: 400;
  color: var(--body);
  background: var(--bg);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--green-700); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
h1,h2,h3,h4 { font-family: 'Gabarito', 'Manrope', sans-serif; }
h1,h2,h3,h4 { color: var(--ink); line-height: 1.12; margin: 0 0 .5em; letter-spacing: -0.02em; }
h1 { font-weight: 900; font-size: clamp(2.15rem, 5.2vw, 4rem); letter-spacing: -0.035em; }
h2 { font-weight: 900; font-size: clamp(1.75rem, 3.8vw, 2.85rem); letter-spacing: -0.03em; }
h3 { font-weight: 700; font-size: clamp(1.15rem, 2vw, 1.45rem); }
h4 { font-weight: 700; font-size: 1.05rem; }
p  { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 700; color: var(--ink); }
ul, ol { margin: 0 0 1.1em; padding-left: 1.25em; }
li { margin-bottom: .45em; }
sup {
  font-size: max(0.68em, 11px);   /* absolute floor: em alone compounds to ~8px inside small text */
  font-weight: 700;
  line-height: 0;                 /* keeps the marker from opening up the line */
  padding-left: 1px;
}

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

.skip {
  position: absolute; left: -9999px; top: 0; background: var(--forest-deep); color: #fff;
  padding: 12px 20px; z-index: 999; border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 820px; }
.section { padding: clamp(56px, 8vw, 104px) 0; }
.section--tight { padding: clamp(40px, 5vw, 64px) 0; }
.section--soft { background: var(--bg-soft); }
.section--mint { background: var(--bg-mint); }
.section--dark { background: var(--forest-deep); color: var(--on-dark); }
.section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }
/* strong is dark ink by default, so it has to be rescued on every dark surface,
   not just .section--dark. The hero is the one that bit: a <strong> there
   rendered #00261C on #00261C, a 1.00:1 contrast, and vanished completely. */
.section--dark strong, .section--dark b,
.hero strong, .hero b,
.card--dark strong, .card--dark b { color: #fff; }
/* Buttons must be exempt. `.section--dark a` outranks `.btn--onDark` on
   specificity, so without :not(.btn) it repainted every button's label light
   green: 1.62:1 on the white onDark button, and no better on primary. */
.section--dark a:not(.btn) { color: var(--accent-light); }

.center { text-align: center; }

.grid { display: grid; gap: clamp(20px, 3vw, 32px); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .82rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--green-700); margin-bottom: 16px;
}
/* Same trap as strong: the eyebrow's default green is tuned for light
   backgrounds and drops to 2.58:1 on the hero, so the hero needs it too. */
.section--dark .eyebrow, .hero .eyebrow { color: var(--accent-light); }
.eyebrow::before { content: ''; width: 22px; height: 2px; background: currentColor; border-radius: 2px; }

.lede { font-size: clamp(1.05rem, 1.6vw, 1.24rem); color: var(--body); max-width: 62ch; }
.section--dark .lede { color: var(--on-dark); }
.center .lede { margin-inline: auto; }

/* The hidden attribute must beat any component that sets display.
   .btn sets display:inline-flex, which silently outranks the UA stylesheet's
   [hidden]{display:none} and left the submit button visible on every step. */
[hidden] { display: none !important; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--tap);
  padding: 15px 32px; border-radius: 100px; border: 2px solid transparent;
  font-weight: 700; font-size: 1.02rem; line-height: 1.2; cursor: pointer;
  text-decoration: none !important; text-align: center; position: relative;
  transition: transform .16s var(--ease), box-shadow .16s var(--ease), background .16s var(--ease), color .16s var(--ease);
}
.btn:active { transform: translateY(1px); }

/* Primary carries a hard bottom edge so it reads as a physical, pressable
   object rather than a coloured rectangle. This is the single biggest lever
   on whether a CTA looks clickable at a glance. */
.btn--primary { background: var(--green-600); color: #fff; box-shadow: var(--cta-shadow); }
.btn--primary:hover { background: var(--green-700); box-shadow: var(--cta-shadow-hover); transform: translateY(-2px); }
.btn--primary:active { box-shadow: 0 1px 0 #2B323F, 0 3px 10px rgba(18,24,33,.3); }

.btn--dark { background: var(--forest-deep); color: #fff; box-shadow: 0 2px 0 #000, 0 6px 16px rgba(18,24,33,.26); }
.btn--dark:hover { background: var(--forest); transform: translateY(-2px); }

.btn--ghost { background: #fff; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--green); color: var(--green-700); background: var(--bg-mint); transform: translateY(-2px); }

.btn--onDark { background: #fff; color: var(--forest-deep); box-shadow: 0 2px 0 #BABFC8, 0 6px 18px rgba(0,0,0,.22); }
.btn--onDark:hover { background: var(--bg-soft); transform: translateY(-2px); }

.btn--outlineLight { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.btn--outlineLight:hover { border-color: #fff; background: rgba(255,255,255,.12); transform: translateY(-2px); }

.btn--lg { padding: 19px 40px; font-size: 1.1rem; min-height: 58px; }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.center .btn-row { justify-content: center; }

/* Arrow nudges on hover: motion signals affordance. */
.btn .arw { transition: transform .18s var(--ease); }
.btn:hover .arw { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  .btn:hover, .btn:active { transform: none; }
  .btn:hover .arw { transform: none; }
}

/* ---------- Header ---------- */
.hdr {
  position: sticky; top: 0; z-index: 100;
  background: #fff;
  border-bottom: 1px solid var(--line-soft);
}
.hdr__in { display: flex; align-items: center; gap: 20px; height: 74px; }
.hdr__logo { display: flex; align-items: center; flex-shrink: 0; }
.hdr__logo { min-height: 44px; }
.hdr__logo img { height: 40px; width: auto; }
.hdr__nav { display: flex; gap: 26px; margin-left: auto; }
.hdr__nav a {
  color: var(--ink); font-weight: 700; font-size: .95rem; text-decoration: none;
  display: inline-flex; align-items: center; min-height: 44px;
  border-bottom: 2px solid transparent; transition: border-color .18s, color .18s;
}
.hdr__nav a:hover, .hdr__nav a[aria-current="page"] { border-color: var(--green); color: var(--green-700); text-decoration: none; }
.hdr__cta { flex-shrink: 0; }
.hdr__cta .btn { padding: 12px 24px; font-size: .95rem; }
.hdr__burger {
  display: none; margin-left: auto; background: none; border: 0; cursor: pointer;
  border-radius: 8px; width: 48px; height: 48px; align-items: center; justify-content: center;
  flex-direction: column;
}
.hdr__burger span { display: block; width: 24px; height: 2.5px; background: var(--ink); border-radius: 2px; }
.hdr__burger span + span { margin-top: 5px; }

.hdr__cta .cta-mini { display: none; }
@media (max-width: 940px) {
  .hdr__nav {
    position: fixed; inset: 74px 0 auto 0; background: #fff; flex-direction: column; gap: 0;
    padding: 8px var(--gutter) 20px; border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow); display: none;
  }
  .hdr__nav.is-open { display: flex; }
  .hdr__nav a { padding: 15px 0; border-bottom: 1px solid var(--line-soft); font-size: 1.05rem; }
  .hdr__burger { display: flex; }
  /* The quote button stays in the mobile header: 74% of traffic is mobile and
     the form sits many screens down, so this is the one persistent route to it. */
  .hdr__in { gap: 12px; }
  .hdr__logo img { height: 32px; }
  /* Order at mobile: logo left, then quote button and burger together right. */
  .hdr__cta { margin-left: auto; order: 2; }
  .hdr__burger { order: 3; }
  .hdr__cta .btn { padding: 10px 14px; font-size: .84rem; }
  .hdr__cta .btn .arw { display: none; }
  .hdr__cta .cta-full { display: none; }
  .hdr__cta .cta-mini { display: inline; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative; background: var(--forest-deep); color: var(--on-dark); overflow: hidden;
  padding: clamp(48px, 7vw, 88px) 0 clamp(56px, 8vw, 96px);
}
.hero::after {
  content: ''; position: absolute; top: -18%; right: -12%; width: 620px; height: 620px;
  background: radial-gradient(circle, rgba(91,141,239,.22) 0%, rgba(91,141,239,0) 68%);
  pointer-events: none;
}
.hero__grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.06fr .94fr; gap: clamp(30px, 5vw, 62px); align-items: center;
}
@media (max-width: 900px) { .hero__grid { grid-template-columns: 1fr; } }
/* Heroes with no second column: one properly-measured column, not a 47% void. */
.hero__grid--solo { grid-template-columns: minmax(0, 780px); }
.hero h1 { color: #fff; }
.hero h1 em { font-style: normal; color: var(--accent-light); }
.hero__sub { font-size: clamp(1.06rem, 1.75vw, 1.28rem); color: var(--on-dark); max-width: 54ch; margin-bottom: 30px; }
.hero__pill {
  display: inline-flex; align-items: center; gap: 9px; padding: 9px 18px 9px 12px;
  background: var(--surface-dark); border: 1px solid var(--surface-dark-line);
  border-radius: 100px; font-size: .85rem; font-weight: 700; color: var(--on-dark); margin-bottom: 22px;
}
.hero__pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-light); box-shadow: 0 0 0 4px rgba(110,231,135,.22); }
.hero__ticks { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 11px; }
.hero__ticks li { display: flex; gap: 11px; align-items: flex-start; margin: 0; color: #d6e9df; font-size: 1rem; }
.hero__ticks svg { flex-shrink: 0; margin-top: 3px; }

/* Postcode start card: turns the hero's second column into step one of the form. */
.hero__start {
  background: #fff; color: var(--ink); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: clamp(22px, 3vw, 34px);
}
.hero__start-k { font-weight: 800; font-size: 1.14rem; color: var(--ink); margin: 0 0 12px; }
.hero__start .pcrow input { text-transform: uppercase; }
.hero__start-note { font-size: .84rem; color: var(--muted); margin: 12px 0 0; }

.hero__media { position: relative; }
.hero__media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); width: 100%; }
.hero__badge {
  position: absolute; left: -18px; bottom: 26px;
  background: #fff; color: var(--ink); border-radius: var(--radius);
  padding: 15px 20px; box-shadow: var(--shadow-lg); max-width: 235px;
}
.hero__badge .n { font-size: 1.85rem; font-weight: 900; color: var(--green-700); line-height: 1; letter-spacing: -.03em; }
.hero__badge .l { font-size: .82rem; color: var(--muted); margin-top: 5px; line-height: 1.35; }
@media (max-width: 560px) { .hero__badge { left: 8px; bottom: 10px; max-width: 195px; padding: 12px 15px; } }

/* ---------- Trust bar ---------- */
.trustbar { background: var(--white); border-bottom: 1px solid var(--line-soft); padding: 26px 0; }
.trustbar__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 22px; }
.trustbar__item { display: flex; gap: 13px; align-items: center; }
.trustbar__item svg { flex-shrink: 0; color: var(--green); }
.trustbar__item b { display: block; color: var(--ink); font-weight: 900; font-size: 1.16rem; line-height: 1.15; letter-spacing: -.02em; }
.trustbar__item span { font-size: .88rem; color: var(--muted); line-height: 1.35; display: block; }

/* ---------- Cards ---------- */
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(24px, 3vw, 34px); box-shadow: var(--shadow-sm);
}
.card--flat { box-shadow: none; }
.card--soft { background: var(--bg-soft); border-color: transparent; box-shadow: none; }
.card--dark { background: var(--surface-dark); border-color: var(--surface-dark-line); color: var(--on-dark); box-shadow: none; }
.card--dark h3, .card--dark h4 { color: #fff; }
.card__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%; background: var(--bg-mint);
  color: var(--green-700); font-weight: 900; font-size: 1.05rem; margin-bottom: 18px;
}
.card--dark .card__num { background: var(--surface-dark-line); color: #fff; }

/* ---------- Strategy steps ---------- */
.steps { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); counter-reset: s; }
.step { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 30px 28px 28px; }
.step__k {
  display: inline-flex; align-items: center; gap: 9px; font-size: .74rem; font-weight: 900;
  letter-spacing: .13em; text-transform: uppercase; color: var(--green-700); margin-bottom: 14px;
}
.step__k b {
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  background: var(--green-600); color: #fff; border-radius: 50%; font-size: .85rem; letter-spacing: 0;
}
.step h3 { margin-bottom: .5em; }
.step__stat {
  margin-top: 20px; padding-top: 18px; border-top: 1px dashed var(--line);
  font-size: .93rem; color: var(--muted);
}
.step__stat b { color: var(--green-700); font-weight: 900; font-size: 1.05rem; }

/* ---------- Insight callout ---------- */
.insight {
  background: linear-gradient(135deg, var(--forest-deep) 0%, var(--forest) 100%);
  color: var(--on-dark); border-radius: var(--radius-xl); padding: clamp(30px, 4.5vw, 52px);
  position: relative; overflow: hidden;
}
.insight::after {
  content:''; position:absolute; right:-70px; top:-70px; width:300px; height:300px;
  background: radial-gradient(circle, rgba(110,231,135,.20) 0%, transparent 70%);
}
.insight > * { position: relative; z-index: 1; }
.insight h3 { color: #fff; font-size: clamp(1.35rem, 2.6vw, 1.95rem); font-weight: 900; letter-spacing: -.025em; }
.insight strong { color: var(--accent-light); }
.insight__maths {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 16px; margin-top: 28px;
}
.insight__cell {
  background: var(--surface-dark); border: 1px solid var(--surface-dark-line);
  border-radius: var(--radius); padding: 20px 22px; text-align: center;
}
.insight__cell .v { font-size: 1.85rem; font-weight: 900; color: #fff; line-height: 1; letter-spacing: -.03em; }
.insight__cell .v small { font-size: .95rem; font-weight: 700; }
.insight__cell .k { font-size: .82rem; color: var(--on-dark); margin-top: 8px; line-height: 1.35; }
.insight__cell--win { background: #0C5F33; border-color: var(--accent-light); }
.insight__cell--win .v { color: var(--accent-light); }
.insight__cell--win .k { color: #b6e8c4; }

/* ---------- Split media ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.split--rev .split__media { order: 2; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } .split--rev .split__media { order: 0; } }
.split__media img { border-radius: var(--radius-lg); box-shadow: var(--shadow); width: 100%; }

/* ---------- Calculator ---------- */
.calc { display: grid; grid-template-columns: 400px 1fr; gap: clamp(24px, 3.5vw, 44px); align-items: start; }
@media (max-width: 900px) { .calc { grid-template-columns: 1fr; } }
/* Results stay on screen while the lower controls are used; without this the
   headline number scrolls away before the export and charger buttons appear. */
@media (min-width: 901px) { .calc__out { position: sticky; top: 92px; } }
@media (min-width: 1280px) { .calc { grid-template-columns: 460px 1fr; } }
/* A row of choice buttons sits at one height, with or without a price line. */
[data-ccalc] .choices { grid-auto-rows: 1fr; }
.calc__panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(24px,3vw,32px); box-shadow: var(--shadow-sm); }
.field { margin-bottom: 22px; }
.field:last-child { margin-bottom: 0; }
.field > label.field__label {
  display: block; font-weight: 700; color: var(--ink); font-size: .95rem; margin-bottom: 9px;
}
.field__hint { font-size: .82rem; color: var(--muted); font-weight: 400; margin-top: 5px; }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field input[type="number"], .field select, .field textarea {
  width: 100%; padding: 13px 15px; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  background: #fff; transition: border-color .16s, box-shadow .16s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(10,152,40,.14);
}
.field select { appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%2300261C' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center; padding-right: 42px;
}

/* range */
.range-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.range-val { font-weight: 900; color: var(--green-700); font-size: 1.22rem; letter-spacing: -.02em; }
input[type=range] { width: 100%; -webkit-appearance: none; appearance: none; background: transparent; height: 44px; cursor: pointer; }
input[type=range]::-webkit-slider-runnable-track { height: 6px; background: var(--line); border-radius: 3px; }
input[type=range]::-moz-range-track { height: 6px; background: var(--line); border-radius: 3px; }
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: var(--green);
  border: 4px solid #fff; box-shadow: 0 2px 8px rgba(0,38,28,.28); margin-top: -9px; cursor: pointer;
}
input[type=range]::-moz-range-thumb {
  width: 24px; height: 24px; border-radius: 50%; background: var(--green);
  border: 4px solid #fff; box-shadow: 0 2px 8px rgba(0,38,28,.28); cursor: pointer;
}

/* segmented control */
.seg { display: grid; grid-auto-flow: column; gap: 6px; background: var(--bg-soft); padding: 5px; border-radius: 100px; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label {
  text-align: center; padding: 10px 12px; border-radius: 100px; font-weight: 700; font-size: .9rem;
  cursor: pointer; color: var(--muted); transition: background .16s, color .16s;
}
.seg input:checked + label { background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); }
.seg input:focus-visible + label { outline: 3px solid var(--green); outline-offset: 2px; }

/* results */
.calc__out { display: grid; gap: 18px; }
.result-hero {
  background: linear-gradient(135deg, var(--green-600) 0%, var(--forest) 130%);
  color: #fff; border-radius: var(--radius-lg); padding: clamp(26px,3.4vw,36px);
}
.result-hero .k { font-size: .84rem; text-transform: uppercase; letter-spacing: .13em; font-weight: 700; color: var(--on-dark); }
.result-hero .v { font-size: clamp(2.5rem, 6vw, 3.6rem); font-weight: 900; line-height: 1; letter-spacing: -.04em; margin: 10px 0 4px; }
.result-hero .s { color: var(--on-dark); font-size: .98rem; }
/* Two by two, always: auto-fit strands the fourth cell alone on wide screens. */
.result-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (max-width: 380px) { .result-grid { grid-template-columns: 1fr; } }
.result-cell { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; }
.result-cell .k { font-size: .8rem; color: var(--muted); line-height: 1.3; }
.result-cell .v { font-size: 1.62rem; font-weight: 900; color: var(--ink); letter-spacing: -.03em; line-height: 1.1; margin-top: 6px; }
.result-cell .v small { font-size: .95rem; font-weight: 700; color: var(--muted); }
.result-cell--accent { background: var(--bg-mint); border-color: transparent; }
.result-cell--accent .v { color: var(--green-700); }

/* stacked savings bar */
.bar { height: 34px; border-radius: 8px; overflow: hidden; display: flex; background: var(--line-soft); }
.bar span { display: block; height: 100%; }
.bar__self { background: var(--green-600); }
.bar__exp  { background: #FF6B9D; }
.bar__off  { background: #5B8DEF; }
.bar-key { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 12px; font-size: .85rem; color: var(--muted); }
.bar-key i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; margin-right: 6px; vertical-align: -1px; }

/* ---------- Pricing table ---------- */
.ptable { display: grid; grid-template-columns: repeat(auto-fit, minmax(275px,1fr)); gap: 22px; }
.ptier {
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius-lg);
  padding: 30px 28px; display: flex; flex-direction: column; position: relative;
}
.ptier--best { border-color: var(--green); box-shadow: 0 8px 30px rgba(10,152,40,.16); }
.ptier__flag {
  position: absolute; top: -13px; left: 28px; background: var(--green-600); color: #fff;
  font-size: .72rem; font-weight: 900; letter-spacing: .11em; text-transform: uppercase;
  padding: 6px 14px; border-radius: 100px;
}
.ptier__name { font-size: .8rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }
.ptier__size { font-size: 1.55rem; font-weight: 900; color: var(--ink); letter-spacing: -.03em; margin: 8px 0 2px; }
.ptier__gen { font-size: .9rem; color: var(--muted); margin-bottom: 20px; }
.ptier__price { font-size: 2.35rem; font-weight: 900; color: var(--ink); letter-spacing: -.04em; line-height: 1; }
.ptier__price small { font-size: .95rem; font-weight: 700; color: var(--muted); letter-spacing: 0; }
.ptier__per { font-size: .88rem; color: var(--green-700); font-weight: 700; margin-top: 7px; }
.ptier__list { list-style: none; padding: 0; margin: 22px 0 26px; border-top: 1px solid var(--line-soft); padding-top: 20px; }
.ptier__list li { display: flex; justify-content: space-between; gap: 14px; font-size: .93rem; padding: 7px 0; margin: 0; }
.ptier__list li b { color: var(--ink); font-weight: 700; text-align: right; }
.ptier .btn { margin-top: auto; }

/* ---------- Table ---------- */
.tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius); border: 1px solid var(--line); }
table.data { width: 100%; border-collapse: collapse; background: #fff; font-size: .93rem; min-width: 560px; }
table.data th, table.data td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--line-soft); }
table.data th { background: var(--bg-soft); font-weight: 700; color: var(--ink); font-size: .82rem; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
table.data tr:last-child td { border-bottom: 0; }
table.data td b { color: var(--ink); }
table.data tbody tr:hover { background: var(--bg-soft); }

/* ---------- Remote process ---------- */
.flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap: 20px; position: relative; }
.flow__item { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px 24px; position: relative; }
.flow__badge {
  display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px;
  border-radius: 14px; background: var(--bg-mint); color: var(--green-700); margin-bottom: 16px;
}
.flow__time { font-size: .76rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--green-700); margin-bottom: 8px; }
.flow__item h4, .flow__item h3 { margin-bottom: .4em; }
.flow__item p { font-size: .94rem; color: var(--muted); }

/* ---------- Team ----------
   A plain auto-fill grid leaves an orphan row that reads as "more to come".
   Fixed column counts per breakpoint plus a centred final row keep it
   deliberately composed: 15 people resolve to 5+5+5, 4+4+4+3, or 3x5. */
.team { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
.team__card { text-align: center; width: calc((100% - 4 * 18px) / 5); min-width: 132px; }
@media (max-width: 1100px) { .team__card { width: calc((100% - 3 * 18px) / 4); } }
@media (max-width: 780px)  { .team__card { width: calc((100% - 2 * 18px) / 3); } }
@media (max-width: 480px)  { .team__card { width: calc((100% - 14px) / 2); min-width: 0; } .team { gap: 14px; } }
.team__card img { border-radius: var(--radius); width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--bg-mint); }
.team__card b { display: block; margin-top: 11px; color: var(--ink); font-size: .93rem; font-weight: 700; }
.team__card span { display: block; font-size: .81rem; color: var(--muted); line-height: 1.35; }

/* ---------- Coverage ---------- */
.cov { display: grid; grid-template-columns: repeat(auto-fit, minmax(285px,1fr)); gap: 18px; }
/* A CTA that sits mid-list inside the coverage grid: it must span every column
   rather than take a card slot. */
.cov__cta { grid-column: 1 / -1; text-align: center; margin: 10px 0 4px; }
.cov__card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; }
.cov__card h4 { margin-bottom: .35em; font-size: 1rem; }
.cov__region { font-size: .8rem; color: var(--green-700); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 12px; }
.pcodes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pcode {
  display: inline-block; padding: 4px 10px; background: var(--bg-soft); border-radius: 6px;
  font-size: .78rem; font-weight: 700; color: var(--body); letter-spacing: .03em;
}
.pcode--core { background: var(--bg-mint); color: var(--green-700); }

/* ---------- FAQ ---------- */
.faq { max-width: 860px; margin-inline: auto; }
.faq details {
  border-bottom: 1px solid var(--line); padding: 4px 0;
}
/* Open state gets a tinted panel. The negative margin that bleeds it past the
   text column is only safe once the page gutter is wider than the bleed, below that it pushes the document wider than the viewport. */
.faq details[open] { background: var(--bg-soft); border-radius: var(--radius); border-bottom-color: transparent; padding: 4px 20px; margin: 6px 0; }
@media (min-width: 560px) {
  .faq details[open] { padding: 4px 24px; margin: 6px -24px; }
}
.faq summary {
  list-style: none; cursor: pointer; padding: 22px 44px 22px 0; position: relative;
  font-weight: 700; color: var(--ink); font-size: 1.06rem; line-height: 1.4;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; position: absolute; right: 6px; top: 50%; width: 12px; height: 12px;
  border-right: 2.5px solid var(--green); border-bottom: 2.5px solid var(--green);
  transform: translateY(-70%) rotate(45deg); transition: transform .22s var(--ease);
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details > div { padding: 0 0 24px; color: var(--body); }
.faq details > div p:last-child { margin-bottom: 0; }

/* ---------- Form ---------- */
.formwrap { display: grid; grid-template-columns: 1fr 420px; gap: clamp(28px,4vw,56px); align-items: start; }
@media (max-width: 940px) { .formwrap { grid-template-columns: 1fr; } }
.formcard {
  background: #fff; border-radius: var(--radius-xl); padding: clamp(26px,3.4vw,40px);
  box-shadow: var(--shadow-lg); border: 1px solid var(--line);
}
.form-consent { font-size: .82rem; color: var(--muted); line-height: 1.5; }
.form-consent a { text-decoration: underline; }
.form-err { color: #c0392b; font-size: .84rem; font-weight: 700; margin-top: 6px; display: none; }
.field.has-err input, .field.has-err select { border-color: #c0392b; }
.field.has-err .form-err { display: block; }

.alert {
  border-radius: var(--radius); padding: 18px 22px; font-size: .93rem; margin-bottom: 22px;
  display: none;
}
.alert--warn { background: #fff6e5; border: 1px solid #f5d9a0; color: #7a5a12; }
.alert.is-on { display: block; }

.trust-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.trust-list li { display: flex; gap: 13px; align-items: flex-start; margin: 0; }
.trust-list svg { flex-shrink: 0; margin-top: 2px; color: var(--green); }
.trust-list b { display: block; color: var(--ink); }
.trust-list span { font-size: .9rem; color: var(--muted); }

/* ---------- CTA band ---------- */
.ctaband {
  background: linear-gradient(135deg, var(--forest-deep) 0%, var(--forest) 100%);
  color: var(--on-dark); border-radius: var(--radius-xl); padding: clamp(34px,5vw,62px);
  text-align: center; position: relative; overflow: hidden;
}
.ctaband::after {
  content:''; position:absolute; left:50%; top:-40%; width:640px; height:640px; transform: translateX(-50%);
  background: radial-gradient(circle, rgba(110,231,135,.16) 0%, transparent 65%);
}
.ctaband > * { position: relative; z-index: 1; }
.ctaband h2 { color: #fff; }
.ctaband .lede { color: var(--on-dark); margin-inline: auto; }

/* ---------- Footer ---------- */
.ftr { background: var(--forest-deep); color: var(--on-dark-muted); padding: clamp(48px,6vw,72px) 0 32px; font-size: .9rem; }
.ftr a { color: var(--on-dark); }
.ftr a:hover { color: #fff; }
.ftr__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 30px; }
@media (max-width: 1080px) { .ftr__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 800px) { .ftr__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .ftr__grid { grid-template-columns: 1fr; } }
.ftr h5, .ftr h3 { color: #fff; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 16px; font-weight: 900; }
.ftr ul { list-style: none; padding: 0; margin: 0; }
.ftr li { margin-bottom: 10px; }
.ftr__logo img { height: 46px; width: auto; margin-bottom: 18px; }
.ftr__legal { margin-top: 42px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.11); font-size: .84rem; line-height: 1.65; color: var(--on-dark-muted); }
.ftr__legal p { margin-bottom: .9em; }

/* ---------- Long-form prose ----------
   Body copy runs to a comfortable measure rather than the full grid width.
   Used on the explainer pages where a section is mostly reading. */
.prose { max-width: 68ch; margin-left: auto; margin-right: auto; }
.prose ol, .prose ul { margin: 0 0 1.15em; padding-left: 1.25em; }
.prose li { margin-bottom: .55em; }

/* ---------- Tick list ----------
   A checklist that reads as reassurance rather than as a bulleted spec. */
.ticklist { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 14px; }
.ticklist li { position: relative; padding-left: 34px; margin: 0; }
.ticklist li::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 21px; height: 21px;
  border-radius: 50%; background: var(--green);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.6 10.2l2.9 2.9 5.9-6.2' fill='none' stroke='%23fff' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 21px 21px; background-repeat: no-repeat;
}

/* ---------- Utility ---------- */
.mt-1 { margin-top: 12px; } .mt-2 { margin-top: 24px; }
.mt-3 { margin-top: 36px; } .mt-4 { margin-top: 48px; }
.mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: 24px; } .mb-3 { margin-bottom: 36px; }
.small { font-size: .87rem; }
.muted { color: var(--muted); }
.nowrap { white-space: nowrap; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.footnote { font-size: .84rem; color: var(--muted); line-height: 1.6; max-width: 72ch; }
.footnote.center, .center .footnote { margin-inline: auto; }
.section--dark .footnote { color: #7d968b; }
/* The hero is always a dark ground, so a footnote in it needs the on-dark
   secondary step. Slate muted was 3.58:1 there, under the 4.5 AA floor for
   small text, and it sits directly under the price on the three brand pages. */
.hero .footnote { color: var(--on-dark-muted); }

/* Reveal on scroll.
   The hidden state is only applied once JS has confirmed it can un-apply it
   (html.js). Without JS, or if IntersectionObserver never fires, content
   stays visible rather than being permanently invisible. */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; } }

/* ==========================================================================
   V2 COMPONENTS
   ========================================================================== */

/* ---------- Section heading block (consistent, centred, symmetrical) ------ */
.shead { max-width: 720px; margin: 0 auto clamp(32px, 4vw, 52px); text-align: center; }
.shead .lede { margin-inline: auto; }

/* ---------- Location CTA strip ------------------------------------------
   "Solar & battery installers in" is static; only the place rotates. The
   place sits in a fixed-width slot so a long county replacing a short town
   never shifts the line, the button, or anything below it. */
.locstrip { background: var(--forest-deep); color: #fff; padding: 30px 0; }
.locstrip__in {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 14px 22px;
}
.locstrip__line {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: nowrap;
  font-size: clamp(1.05rem, 2.2vw, 1.55rem); font-weight: 900;
  letter-spacing: -.02em; line-height: 1.25; margin: 0;
}
.locstrip__label { color: var(--accent-light); white-space: nowrap; }
.locstrip__place {
  color: #fff; display: inline-block;
  min-width: 11ch;                 /* fixed slot: nothing reflows on change */
  text-align: left; position: relative; white-space: nowrap;
}
.locstrip__place::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -6px;
  height: 3px; background: var(--green); border-radius: 3px;
}
.locstrip .btn { flex-shrink: 0; }

@media (max-width: 620px) {
  .locstrip__line { flex-direction: column; align-items: center; gap: 4px; }
  .locstrip__place { min-width: 0; text-align: center; }
  .locstrip__in { flex-direction: column; }
}

/* ---------- SolaFlow embed ---------------------------------------------- */
.solaflow { background: var(--bg-soft); }
/* The estimator is the hero of this section, so it takes the middle of the
   screen with the header centred above it. Capped so the iframe's own layout
   never has to stretch across a 1440 viewport. */
.solaflow__stage { max-width: 1040px; margin-inline: auto; }
.solaflow .center { max-width: 920px; margin-inline: auto; }
.solaflow .center .lede { max-width: 640px; margin-inline: auto; }
.solaflow__steps { list-style: none; padding: 0; margin: 22px 0 0; counter-reset: sf; }
.solaflow__steps li {
  position: relative; padding-left: 44px; margin-bottom: 16px; counter-increment: sf; font-size: .97rem;
}
.solaflow__steps li::before {
  content: counter(sf); position: absolute; left: 0; top: -1px;
  width: 30px; height: 30px; border-radius: 50%; background: var(--green-600); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: .85rem;
}
.solaflow__steps li b { display: block; color: var(--ink); }

/* Facade: the iframe is only loaded on interaction or when it nears the
   viewport, so a 3rd-party embed can never hold up LCP on an ad landing. */
.sfembed { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow); }
.sfembed iframe { display: block; width: 100%; border: 0; }
.sfembed__facade {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  min-height: 420px; padding: 40px 28px; text-align: center; background: linear-gradient(160deg, #26395B 0%, #121821 100%); color: #fff;
  cursor: pointer; border: 0; width: 100%;
}
.sfembed__facade h3 { color: #fff; margin: 0; font-size: clamp(1.3rem, 2.6vw, 1.85rem); }
.sfembed__facade p { color: var(--on-dark); max-width: 44ch; margin: 0; }
.sfembed__facade .btn { pointer-events: none; }
.sfembed__badge { display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #b6e8c4; }

/* ---------- UK coverage map (geographic) ---------------------------------
   Full-bleed interactive section. One path per installer territory, dissolved
   from real postcode boundaries, so hovering anywhere in a territory lights
   the whole thing and surfaces that installer. */
.mapsec { background: var(--bg-soft); }
.mapwrap {
  display: grid; grid-template-columns: minmax(0, 1fr) 384px;
  gap: clamp(24px, 3.5vw, 52px); align-items: start;
}
@media (max-width: 1040px) { .mapwrap { grid-template-columns: 1fr; } }

.mapstage {
  position: relative; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-xl); padding: clamp(14px, 2vw, 26px);
  box-shadow: var(--shadow-sm);
}
.ukmap { width: 100%; height: auto; display: block; max-height: 78vh; margin-inline: auto; }

.ukmap__zone { cursor: pointer; transition: fill .16s var(--ease); outline: none; }
.ukmap__zone path { stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ukmap__zone--on path   { fill: var(--green); }
.ukmap__zone--off path  { fill: #eef2f0; stroke: #dbe4df; cursor: default; }
.ukmap__zone--on:hover path,
.ukmap__zone--on:focus-visible path,
.ukmap__zone--on.is-active path { fill: var(--forest-deep); }
.ukmap__zone--on:focus-visible path { stroke: var(--forest-deep); stroke-width: 3; }
.ukmap__inset-frame { fill: none; stroke: var(--line); stroke-width: 1.5; stroke-dasharray: 5 4; }
.ukmap__inset-label { font-size: 15px; font-weight: 900; fill: var(--muted); letter-spacing: .04em; }

.maplegend {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  gap: 10px; max-width: 380px; margin: 18px auto 0;
  font-size: .88rem; color: var(--muted);
}
.maplegend > span { display: flex; align-items: center; justify-content: center; }
@media (max-width: 420px) { .maplegend { grid-auto-flow: row; } }
.maplegend i, .maplegend b { width: 15px; height: 15px; border-radius: 4px; display: inline-block; margin-right: 8px; vertical-align: -3px; }
.maplegend .on  { background: var(--green); }
.maplegend .off { background: #eef2f0; border: 1.5px solid #dbe4df; }

/* The card that follows the hover */
.mapcard {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-xl);
  padding: clamp(22px, 2.4vw, 30px); box-shadow: var(--shadow);
  position: sticky; top: 96px;
}
.mapcard__empty { text-align: center; padding: 26px 8px; color: var(--muted); }
.mapcard__empty svg { margin: 0 auto 14px; color: var(--line); display: block; }
.mapcard__empty b { display: block; color: var(--ink); margin-bottom: 6px; font-size: 1.05rem; }

.mapcard__head { display: flex; gap: 16px; align-items: center; margin-bottom: 20px; }
.mapcard__photo {
  width: 78px; height: 78px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
  background: var(--bg-mint); border: 3px solid var(--bg-mint);
}
.mapcard__area { font-size: .72rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; color: var(--green-700); }
.mapcard__name { font-size: 1.22rem; font-weight: 900; color: var(--ink); letter-spacing: -.025em; line-height: 1.15; margin-top: 4px; }
.mapcard__region { font-size: .88rem; color: var(--muted); margin-top: 3px; }
.mapcard__stat { display: flex; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px dashed var(--line); font-size: .92rem; }
.mapcard__stat:last-of-type { border-bottom: 0; }
.mapcard__stat b { color: var(--ink); white-space: nowrap; }
.mapcard__codes { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 20px; }

/* Green tick claim row, used for the export rate and other offers */
.claim { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; padding: 9px 0; }
.claim svg { flex-shrink: 0; margin-top: 2px; }
.claim b { color: var(--ink); }

/* ---------- Region page hero -------------------------------------------- */
.rhero { background: var(--forest-deep); color: var(--on-dark); padding: clamp(40px,5vw,68px) 0; }
.rhero__grid { display: grid; grid-template-columns: 1fr 320px; gap: clamp(28px,4vw,56px); align-items: center; }
@media (max-width: 860px) { .rhero__grid { grid-template-columns: 1fr; } }
.rhero h1 { color: #fff; }

/* ---------- Reviews ------------------------------------------------------ */
.reviews { display: grid; grid-template-columns: repeat(auto-fit, minmax(276px,1fr)); gap: 20px; }
.review { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px; display: flex; flex-direction: column; }
.review__who b { color: var(--ink); display: block; font-size: .92rem; }
.reviews__pending {
  border: 2px dashed var(--line); border-radius: var(--radius-lg); padding: 34px; text-align: center; color: var(--muted); background: var(--bg-soft);
}

/* ---------- Quiz --------------------------------------------------------- */
.quiz { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-xl); box-shadow: var(--shadow); overflow: hidden; max-width: 760px; margin-inline: auto; }
.quiz__bar { height: 6px; background: var(--line-soft); }
.quiz__bar span { display: block; height: 100%; background: var(--green); width: 0; transition: width .35s var(--ease); }
.quiz__body { padding: clamp(26px, 4vw, 44px); }
.quiz__step { font-size: .76rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; color: var(--green-700); margin-bottom: 12px; }
.quiz__q { font-size: clamp(1.3rem, 2.8vw, 1.8rem); font-weight: 900; color: var(--ink); letter-spacing: -.025em; line-height: 1.2; margin-bottom: 8px; }
.quiz__hint { color: var(--muted); font-size: .93rem; margin-bottom: 24px; }
.quiz__opts { display: grid; gap: 12px; }
.quiz__opts--2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 520px) { .quiz__opts--2 { grid-template-columns: 1fr; } }
.quiz__opt {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  padding: 17px 20px; min-height: var(--tap);
  border: 2px solid var(--line); border-radius: var(--radius); background: #fff;
  font-weight: 700; color: var(--ink); cursor: pointer; font-size: .98rem;
  transition: border-color .14s var(--ease), background .14s var(--ease), transform .14s var(--ease);
}
.quiz__opt:hover { border-color: var(--green); background: var(--bg-mint); transform: translateY(-2px); }
.quiz__opt .ic { font-size: 1.3rem; line-height: 1; }
.quiz__opt small { display: block; font-weight: 400; color: var(--muted); font-size: .84rem; margin-top: 2px; }
.quiz__nav { display: flex; justify-content: space-between; align-items: center; margin-top: 24px; gap: 12px; }
.quiz__back { background: none; border: 0; color: var(--muted); font-weight: 700; cursor: pointer; padding: 10px 4px; font-size: .92rem; }
.quiz__back:hover { color: var(--ink); }

.qresult__badge { display: inline-flex; align-items: center; gap: 9px; padding: 9px 18px; border-radius: 100px; background: var(--bg-mint); color: var(--green-700); font-weight: 900; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 18px; }
.qresult__tariff { font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 900; color: var(--ink); letter-spacing: -.03em; line-height: 1.1; margin-bottom: 10px; }
.qresult__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 14px; margin: 26px 0; }
.qresult__cell { background: var(--bg-soft); border-radius: var(--radius); padding: 18px 20px; text-align: center; }
.qresult__cell .v { font-size: 1.55rem; font-weight: 900; color: var(--green-700); letter-spacing: -.03em; line-height: 1.1; }
.qresult__cell .k { font-size: .8rem; color: var(--muted); margin-top: 5px; line-height: 1.3; }
.qresult__why { background: var(--bg-mint); border-radius: var(--radius); padding: 20px 22px; margin-bottom: 24px; font-size: .94rem; }
.qresult__why b { display: block; margin-bottom: 6px; }

/* ---------- Form additions ---------------------------------------------- */
.addr-results:empty { display: none; }
.addr-results { border: 1.5px solid var(--line); border-top: 0; margin-top: -6px; border-radius: 0 0 var(--radius-sm) var(--radius-sm); max-height: 230px; overflow-y: auto; background: #fff; }
.addr-results button {
  display: block; width: 100%; text-align: left; padding: 12px 15px; border: 0; border-bottom: 1px solid var(--line-soft);
  background: #fff; cursor: pointer; font-size: .93rem; min-height: 44px;
}
.addr-results button:hover, .addr-results button:focus { background: var(--bg-mint); color: var(--green-700); outline: none; }
.addr-results button:last-child { border-bottom: 0; }
.addr-status:empty { display: none; }
.addr-status { font-size: .84rem; margin-top: 7px; display: flex; align-items: center; gap: 7px; }
.addr-status--ok { color: var(--green-700); font-weight: 700; }
.addr-status--warn { color: #9a6b00; }
.addr-status--err { color: #c0392b; font-weight: 700; }

.slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 10px; }
.slot { position: relative; }
.slot input { position: absolute; opacity: 0; pointer-events: none; }
.slot label {
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 14px 12px; min-height: var(--tap);
  border: 2px solid var(--line); border-radius: var(--radius-sm); cursor: pointer;
  font-weight: 700; font-size: .91rem; color: var(--body); transition: border-color .14s, background .14s, color .14s;
}
.slot input:checked + label { border-color: var(--green); background: var(--bg-mint); color: var(--green-700); }
.slot input:focus-visible + label { outline: 3px solid var(--green); outline-offset: 2px; }

.checkline { display: flex; gap: 12px; align-items: flex-start; padding: 15px 17px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: #fff; cursor: pointer; }
.checkline:hover { border-color: var(--green); }
.checkline input { width: 24px; height: 24px; accent-color: var(--green); flex-shrink: 0; margin: 1px 0 0; cursor: pointer; }
.checkline span { font-size: .93rem; font-weight: 700; color: var(--ink); }
.checkline small { display: block; font-weight: 400; color: var(--muted); font-size: .84rem; margin-top: 2px; }

.trustrow { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; justify-content: center; margin-top: 20px; font-size: .84rem; color: var(--muted); }
.trustrow span { display: inline-flex; align-items: center; gap: 7px; }
.trustrow svg { color: var(--green); flex-shrink: 0; }

/* Coverage and team cards became links in v2, so they need link resets. */
a.cov__card, a.team__card { text-decoration: none; color: inherit; display: block; transition: border-color .16s var(--ease), transform .16s var(--ease), box-shadow .16s var(--ease); }
a.cov__card:hover { text-decoration: none; border-color: var(--green); transform: translateY(-3px); box-shadow: var(--shadow); }
a.team__card:hover { text-decoration: none; transform: translateY(-3px); }
a.team__card:hover b { color: var(--green-700); }
a.cov__card h4 { transition: color .16s var(--ease); }
a.cov__card:hover h4 { color: var(--green-700); }

/* ==========================================================================
   V3: region hero, portraits, form
   ========================================================================== */

/* ---------- Region hero -------------------------------------------------- */
.rhero__grid { grid-template-columns: 1fr 300px; }
@media (max-width: 900px) { .rhero__grid { grid-template-columns: 1fr; } }
.rhero__claims { display: grid; gap: 4px; margin-top: 24px; }
.rhero__claims .claim { color: var(--on-dark); padding: 7px 0; }
.rhero__claims .claim b { color: #fff; }

/* OVO frames people in a soft circular mask with clear padding, never
   overlaid with text. Same idea here: portrait, then caption underneath. */
.rhero__portrait { text-align: center; }
.rhero__portrait img {
  width: 100%; max-width: 260px; aspect-ratio: 1; object-fit: cover;
  border-radius: 50%; margin-inline: auto; display: block;
  background: var(--surface-dark);
  border: 6px solid var(--surface-dark);
  box-shadow: 0 12px 40px rgba(0,0,0,.28);
}
.rhero__portrait-cap { margin-top: 16px; line-height: 1.35; }
.rhero__portrait-cap b { display: block; color: #fff; font-size: 1.05rem; }
.rhero__portrait-cap span { display: block; color: var(--on-dark-muted); font-size: .88rem; }

/* ---------- Team grid: circular, consistent, OVO-style ------------------- */
.team__card img {
  border-radius: 50%; aspect-ratio: 1; object-fit: cover;
  border: 4px solid var(--bg-mint); background: var(--bg-mint);
}
.team__card b { margin-top: 14px; }

/* ---------- Highlighted prep card ---------------------------------------- */
.card--prep {
  background: var(--bg-mint); border: 2px solid var(--green); box-shadow: none;
  position: relative;
}
.card--prep h4, .card--prep .h4 { color: var(--green-700); display: flex; align-items: center; gap: 9px; }
.card--prep h4::before, .card--prep .h4::before {
  content: ''; width: 22px; height: 22px; flex-shrink: 0; border-radius: 6px; background: var(--green);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M9 11l3 3L22 4'/%3E%3Cpath d='M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11'/%3E%3C/svg%3E") center/16px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M9 11l3 3L22 4'/%3E%3Cpath d='M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11'/%3E%3C/svg%3E") center/16px no-repeat;
}
.card--prep ul { margin-bottom: 0; }
.card--prep li { color: var(--body); }

/* ==========================================================================
   FORM, rebuilt
   Sectioned, generous, and sized so every control is comfortably tappable.
   A utility company's form, not a lead-gen scrape.
   ========================================================================== */
.formcard { padding: clamp(22px, 3vw, 40px); }

.fsec { border: 0; padding: 0; margin: 0 0 38px; }
.fsec:last-of-type { margin-bottom: 22px; }
.fsec__legend {
  display: flex; align-items: center; gap: 10px; width: 100%;
  font-size: .76rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase;
  color: var(--green-700); margin-bottom: 16px; padding: 0;
}
.fsec__legend::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.fsec__n {
  width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(135deg, var(--route-ev-a), var(--route-ev-b));
  color: var(--ink); font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .8rem; letter-spacing: 0; flex-shrink: 0;
}

/* Field grid: single column by default, pairs only where it genuinely helps */
.fgrid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 16px 18px; }
.fgrid .span-2 { grid-column: 1 / -1; }
@media (max-width: 640px) { .fgrid { grid-template-columns: 1fr; } .fgrid .span-2 { grid-column: auto; } }

.field { margin: 0; }
.field > label, .field__label {
  display: block; font-weight: 700; color: var(--ink); font-size: .93rem; margin-bottom: 8px;
}
.field input[type="text"], .field input[type="email"], .field input[type="tel"],
.field input[type="number"], .field select, .field textarea {
  width: 100%; min-height: 54px; padding: 15px 16px;
  border: 1.5px solid var(--line); border-radius: 12px; background: #fff;
  font-size: 1rem; transition: border-color .15s, box-shadow .15s;
}
.field textarea { min-height: 96px; resize: vertical; }
.field select { padding-right: 44px; }
.field input::placeholder { color: #a8b8b0; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--green); box-shadow: 0 0 0 4px rgba(10,152,40,.13);
}
/* The two .field *:focus rules above set outline:none at (0,2,1), which outranks the
   global :focus-visible at (0,1,0). Keyboard focus needs a real indicator, so put one
   back at the same specificity. Mouse focus keeps the quieter glow. */
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 3px solid var(--green); outline-offset: 2px;
}

.field__hint { font-size: .84rem; color: var(--muted); margin-top: 7px; line-height: 1.4; }

/* Postcode + button pair that stacks cleanly on mobile */
.pcrow { display: flex; gap: 10px; }
.pcrow input { flex: 1; min-width: 0; text-transform: uppercase; }
.pcrow input::placeholder { text-transform: none; }
.pcrow .btn { flex-shrink: 0; padding-inline: 22px; min-height: 54px; }
@media (max-width: 460px) { .pcrow { flex-direction: column; } .pcrow .btn { width: 100%; } }

/* Desktop: the form reads as a column, not a 1,100px sheet. A postcode is
   eight characters; its input does not need 900px of them. */
form[data-lead-form] { max-width: 720px; margin-inline: auto; }
@media (min-width: 641px) { form[data-lead-form] .pcrow input { max-width: 320px; } }

/* Choice cards: even columns, equal heights, comfortable targets */
.choices { display: grid; gap: 10px; }
.choices--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.choices--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 720px) { .choices--4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 380px) { .choices--2, .choices--4 { grid-template-columns: 1fr; } }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice label {
  display: flex; align-items: center; justify-content: center; text-align: center;
  height: 100%; min-height: 56px; padding: 13px 10px;
  overflow-wrap: anywhere; hyphens: auto;
  border: 1.5px solid var(--line); border-radius: 12px; background: #fff;
  cursor: pointer; font-weight: 700; font-size: .94rem; color: var(--body);
  transition: border-color .15s, background .15s, color .15s;
}
.choice input:checked + label { border-color: var(--green); border-width: 2px; background: var(--bg-mint); color: var(--green-700); }
.choice input:focus-visible + label { outline: 3px solid var(--green); outline-offset: 2px; }
.choice label:hover { border-color: var(--green); }

/* Callback slots */
.slots { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
@media (max-width: 380px) { .slots { grid-template-columns: 1fr; } }
.slot label { min-height: 54px; border-radius: 12px; font-size: .92rem; }

/* Tickbox row */
.checkline { border-radius: 12px; padding: 16px 18px; min-height: 56px; align-items: center; }

/* Errors */
.form-err { color: #c0392b; font-size: .85rem; font-weight: 700; margin-top: 6px; display: none; }
.field.has-err input[type], .field.has-err select, .field.has-err textarea,
.fsec .field.has-err input, .fsec .field.has-err select {
  border-color: #c0392b; box-shadow: 0 0 0 3px rgba(192,57,43,.10);
}
.field.has-err .form-err, fieldset.has-err .form-err { display: block; }
.field.has-err > label, .field.has-err .field__label { color: #c0392b; }

.trustrow {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
  margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line-soft);
}
.trustrow span { justify-content: center; text-align: left; }
@media (max-width: 560px) { .trustrow { grid-template-columns: 1fr; } .trustrow span { justify-content: flex-start; } }

/* An h3 that needs h4's visual weight, used where document outline and visual
   hierarchy disagree (a card heading inside an h2 section). */
h3.h4, .h4 { font-weight: 700; font-size: 1.05rem; }
.h3 { font-weight: 700; font-size: clamp(1.15rem, 2vw, 1.45rem); }

/* Inline prose links get a comfortable target without disturbing line rhythm. */
.lede a, p a:not(.btn) { padding-block: 2px; }

/* Sticky CTA steps aside when the page's own primary action is on screen. */

/* ==========================================================================
   V4
   ========================================================================== */

/* ---------- Approximate-pricing note -------------------------------------- */
.pricenote {
  display: flex; gap: 13px; align-items: flex-start;
  max-width: 780px; margin: 26px auto 0; padding: 18px 22px;
  background: var(--bg-mint); border-radius: var(--radius); font-size: .94rem;
}
.pricenote svg { flex-shrink: 0; color: var(--green-700); margin-top: 2px; }
.pricenote b { color: var(--green-700); }

/* ---------- Clickable table rows ------------------------------------------ */
tr.rowlink { cursor: pointer; transition: background .14s var(--ease); }
tr.rowlink:hover, tr.rowlink:focus-visible { background: var(--bg-mint); outline: none; }
tr.rowlink:focus-within { box-shadow: inset 0 0 0 2px var(--green); }
.rowlink__go a { display: inline-flex; align-items: center; justify-content: flex-end;
  min-width: 44px; min-height: 44px; color: inherit; }
tr.rowlink:hover b, tr.rowlink:focus-visible b { color: var(--green-700); }
/* --line is a border tone: as text it lands at 1.26:1, so the affordance arrow
   was invisible. --muted keeps it quiet but actually visible. */
.rowlink__go { width: 44px; text-align: right; color: var(--muted); }
tr.rowlink:hover .rowlink__go, tr.rowlink:focus-visible .rowlink__go { color: var(--green-700); }
tr.rowlink:hover .arw { transform: translateX(3px); }
.rowlink__go .arw { display: inline-block; transition: transform .16s var(--ease); }

/* ---------- Header: hides going down, returns coming up -------------------
   A sticky bar that never leaves eats vertical space on a phone. Hiding it on
   the way down and bringing it straight back on the way up gives the space
   back without stranding anyone at the bottom of a long page. */
.hdr { transition: transform .28s var(--ease); will-change: transform; }
.hdr.is-tucked { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) { .hdr { transition: none; } }

/* ---------- CTA bands: everything centred on the card --------------------- */
.ctaband .btn-row { justify-content: center; }
.ctaband .lede { margin-left: auto; margin-right: auto; }

/* ---------- Map: OVO mark sits in the corner of the plate ----------------- */
.mapstage { position: relative; }
.mapstage__mark {
  position: absolute; top: clamp(14px, 2vw, 26px); right: clamp(14px, 2vw, 26px);
  width: clamp(46px, 5vw, 62px); height: auto; opacity: .95; pointer-events: none;
}
@media (max-width: 520px) { .mapstage__mark { width: 40px; top: 12px; right: 12px; } }

/* ---------- Map side column travels as one block -------------------------
   The card and the postcode checker were sticky independently, so the card
   slid over the input on scroll. Stick the whole column instead. */
.mapaside { position: sticky; top: 92px; display: grid; gap: 14px; }
.mapaside .mapcard { position: static; }
@media (max-width: 1040px) { .mapaside { position: static; } }

/* ---------- Calculator: room to breathe -----------------------------------
   The controls were sitting too close together to scan as separate questions. */
.calc__panel .field { margin-bottom: 30px; padding-bottom: 30px; border-bottom: 1px solid var(--line-soft); }
.calc__panel .field:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.calc__panel .range-row { margin-bottom: 12px; }
.calc__panel .field__hint { margin-top: 10px; }
.calc__panel .seg { margin-top: 4px; }
.calc__out { gap: 22px; }

/* ---------- Data tables on small screens ---------------------------------
   table.data carries min-width:560px, so on a phone it sits in a horizontal
   scroller. That is fine for a reference table, but the generation table now
   has tappable rows, and a tap inside a horizontal scroller competes with the
   swipe. Below 700px we drop the two least load-bearing columns so the table
   fits the viewport and the row is unambiguously a tap target. */
@media (max-width: 700px) {
  .tbl-scroll--rows { overflow-x: visible; }
  .tbl-scroll--rows table.data { min-width: 0; font-size: .88rem; }
  .tbl-scroll--rows table.data th, .tbl-scroll--rows table.data td { padding: 12px 10px; }
  .tbl-scroll--rows table.data th:nth-child(3), .tbl-scroll--rows table.data td:nth-child(3),
  .tbl-scroll--rows table.data th:nth-child(5), .tbl-scroll--rows table.data td:nth-child(5) { display: none; }
  .tbl-scroll--rows table.data th { white-space: normal; }
  .rowlink__go { width: 28px; }
}

/* ---------- Map placeholder ----------------------------------------------
   #ukmap is empty until the boundary data arrives. Reserving its space stops
   the section collapsing to a sliver, removes the layout shift when the map
   lands, and gives the lazy-load observer a real box to watch. */
#ukmap { min-height: clamp(320px, 62vw, 620px); display: flex; align-items: center; justify-content: center; }
#ukmap:empty::after {
  content: ''; width: 44px; height: 44px; border-radius: 50%;
  border: 3px solid var(--line); border-top-color: var(--green); animation: mapspin .9s linear infinite;
}
@keyframes mapspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #ukmap:empty::after { animation: none; } }
#ukmap .ukmap { max-height: none; }
.mapfail { color: var(--muted); text-align: center; max-width: 30ch; margin: 0; }

/* Legend reads as a caption under the map, not a full-width stretched row */
@media (max-width: 420px) {
  .maplegend { grid-auto-flow: row; justify-items: center; gap: 8px; }
  .maplegend > span { justify-content: center; }
}

/* ---------- Booking aside travels with the form --------------------------
   The enquiry form is long, so by the time someone is halfway down it the
   reassurance has scrolled off. Sticking the column keeps "what happens next"
   and the prep list beside the fields the whole way down.

   The offset clears the header. max-height plus internal scroll covers the
   case where the column is taller than the viewport, which would otherwise
   leave its lower half permanently unreachable. */
@media (min-width: 941px) {
  .formaside {
    position: sticky;
    top: 92px;
    max-height: calc(100vh - 112px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    display: grid;
    gap: 16px;
    align-content: start;
    padding-right: 4px;
  }
  .formaside::-webkit-scrollbar { width: 6px; }
  .formaside::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
  .formaside > * { margin-top: 0 !important; }

  /* The photo is the only decorative item in this column, so it is what gives
     way to keep "what happens next" and the prep list on screen. Capped on a
     normal laptop, dropped entirely where the viewport is genuinely short. */
  .formaside > img {
    border-radius: var(--radius-lg);
    max-height: 150px;
    width: 100%;
    object-fit: cover;
    object-position: center 30%;
  }
}
@media (min-width: 941px) and (max-height: 760px) {
  .formaside > img { display: none; }
}

/* ---------- Next door ------------------------------------------------------
   A way forward at the end of a long reading section. Placed where someone has
   just been given a reason to act, rather than left to find the form. */
.nextdoor {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 18px 26px; margin-top: clamp(28px, 4vw, 44px);
  padding: clamp(22px, 3vw, 30px) clamp(22px, 3vw, 34px);
  background: var(--bg-mint); border-radius: var(--radius-lg);
}
.nextdoor b { display: block; color: var(--ink); font-size: 1.12rem; letter-spacing: -.02em; }
.nextdoor span:not(.arw) { display: block; color: var(--body); font-size: .95rem; margin-top: 5px; max-width: 46ch; }
.nextdoor__acts { display: flex; flex-wrap: wrap; gap: 12px; flex-shrink: 0; }
.nextdoor--centre { justify-content: center; text-align: center; }
.nextdoor--centre span:not(.arw) { margin-inline: auto; }
@media (max-width: 700px) {
  .nextdoor { flex-direction: column; align-items: stretch; text-align: center; }
  .nextdoor span:not(.arw) { margin-inline: auto; }
  .nextdoor__acts { flex-direction: column; }
  .nextdoor__acts .btn { width: 100%; }
}

/* ---------- Cost per kWp chart --------------------------------------------
   The collapse from £2,374 to £1,268 is the most counter-intuitive number on
   the page and it was buried in a muted sentence. Bars are proportional from a
   true zero baseline, and every figure comes from systemCost() in data.js. */
.kwpchart { margin: 20px 0 0; padding: 18px 0 0; border-top: 1px dashed var(--line); }
.kwpchart figcaption { font-size: .8rem; font-weight: 700; color: var(--muted); margin-bottom: 14px; }
.kwpchart__row { display: grid; grid-template-columns: 84px minmax(0,1fr); gap: 12px; align-items: center; margin-bottom: 9px; }
.kwpchart__row:last-child { margin-bottom: 0; }
.kwpchart__lab { font-size: .8rem; font-weight: 700; color: var(--ink); line-height: 1.2; }
.kwpchart__lab small { font-weight: 400; color: var(--muted); font-size: .75rem; }
.kwpchart__track { background: var(--bg-soft); border-radius: 6px; height: 34px; display: block; }
.kwpchart__bar {
  display: flex; align-items: center; justify-content: flex-end; height: 100%;
  padding-right: 10px; border-radius: 6px; background: #c0392b; color: #fff;
  font-weight: 900; font-size: .84rem; letter-spacing: -.01em;
}
.kwpchart__bar--mid  { background: #9A6100; }
.kwpchart__bar--best { background: var(--green-600); }

/* ---------- Disclosure -----------------------------------------------------
   Long reference content that repeats something interactive elsewhere. Kept in
   the DOM for search and for anyone who wants it, out of the default scroll. */
.disclose { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; margin-top: 22px; }
.disclose > summary {
  list-style: none; cursor: pointer; padding: 18px 22px; min-height: 56px;
  display: flex; align-items: center; gap: 12px;
  font-weight: 700; color: var(--green-700); font-size: .97rem;
}
.disclose > summary::-webkit-details-marker { display: none; }
.disclose > summary::after {
  content: ''; margin-left: auto; width: 10px; height: 10px;
  border-right: 2.5px solid var(--green); border-bottom: 2.5px solid var(--green);
  transform: rotate(45deg); transition: transform .2s var(--ease);
}
.disclose[open] > summary::after { transform: rotate(-135deg); }
.disclose[open] > summary { border-bottom: 1px solid var(--line-soft); }
.disclose__body { padding: 0 14px 14px; }
.disclose:hover { border-color: var(--green); }

/* ---------- Stepped form ---------------------------------------------------
   Only applied once JS confirms it can drive the steps. Without it every
   fieldset stays visible and the form behaves exactly as before. */
.fprog { margin-bottom: 32px; }
.fprog__track { height: 8px; background: var(--line-soft); border-radius: 3px; overflow: hidden; }
.fprog__track span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--route-ev-a), var(--route-ev-b)); border-radius: 3px; transition: width .3s var(--ease); }
.fprog__label { margin: 10px 0 0; font-size: .82rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.fnav { display: flex; gap: 12px; margin-top: 8px; }
.fnav .btn { flex: 1; }
/* Must out-rank .fnav .btn or Back inherits flex:1 and dwarfs the primary. */
.fnav .fnav__back { flex: 0 0 auto; min-width: 104px; }
.is-stepped .fsec[hidden] { display: none; }
.is-stepped .fsec { margin-bottom: 8px; }
@media (prefers-reduced-motion: reduce) { .fprog__track span { transition: none; } }


/* =========================================================================
   CLEARLINE ROUTE THEMING
   One neutral brand, four recognisable routes. A page opts in with
   <body data-route="solar|battery|ev|heat">; the gradient utilities below
   then pick up that route's pair. Gradients are purposeful: heroes, route
   cards and the service signal, never decorative fill.
   ========================================================================= */
body[data-route="solar"]   { --route-a: var(--route-solar-a);   --route-b: var(--route-solar-b); }
body[data-route="battery"] { --route-a: var(--route-battery-a); --route-b: var(--route-battery-b); }
body[data-route="ev"]      { --route-a: var(--route-ev-a);      --route-b: var(--route-ev-b); }
body[data-route="heat"]    { --route-a: var(--route-heat-a);    --route-b: var(--route-heat-b); }

.g-route { background: linear-gradient(135deg, var(--route-a), var(--route-b)); }
.g-solar   { background: linear-gradient(135deg, var(--route-solar-a),   var(--route-solar-b)); }
.g-battery { background: linear-gradient(135deg, var(--route-battery-a), var(--route-battery-b)); }
.g-ev      { background: linear-gradient(135deg, var(--route-ev-a),      var(--route-ev-b)); }
.g-heat    { background: linear-gradient(135deg, var(--route-heat-a),    var(--route-heat-b)); }

/* The four-dash service signal from the reversed lockup. Used on dark grounds. */
.signal { display: inline-flex; gap: 7px; }
.signal i { width: 26px; height: 5px; border-radius: 3px; display: inline-block; }
.signal i:nth-child(1) { background: linear-gradient(90deg, var(--route-solar-a),   var(--route-solar-b)); }
.signal i:nth-child(2) { background: linear-gradient(90deg, var(--route-battery-a), var(--route-battery-b)); }
.signal i:nth-child(3) { background: linear-gradient(90deg, var(--route-ev-a),      var(--route-ev-b)); }
.signal i:nth-child(4) { background: linear-gradient(90deg, var(--route-heat-a),    var(--route-heat-b)); }

/* The clean horizontal line, the brand's recurring graphic device. */
.rule { border: 0; height: 2px; border-radius: 2px; background: var(--line); margin: 0; }
.rule--route { background: linear-gradient(90deg, var(--route-a), var(--route-b)); }

/* Route cards: a .card that is an anchor. Text stays ink, the route rule on top
   carries the colour, hover lifts like every other pressable surface. */
a.routecard { display: block; color: var(--body); text-decoration: none;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease); }
a.routecard h3 { color: var(--ink); }
a.routecard:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
a.routecard:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }

/* =========================================================================
   ROUND 2 - symmetry, photography, life
   ========================================================================= */
/* Route cards: four equal columns on desktop, equal heights everywhere.
   The CTA line pins to the base so no card's footer drifts. */
.routegrid { display: grid; gap: clamp(16px, 2vw, 24px); grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .routegrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .routegrid { grid-template-columns: 1fr; } }
a.routecard { display: flex; flex-direction: column; }
a.routecard p { flex: 0 0 auto; }
a.routecard .go { margin-top: auto; padding-top: 14px; font-weight: 700; color: var(--ink); font-size: .95rem; }
a.routecard .rule--route { transition: width .25s var(--ease); }
a.routecard:hover .rule--route { width: 104px; }
@media (prefers-reduced-motion: reduce) { a.routecard .rule--route { transition: none; } }

/* Matched feature pair (tariff guide / county map): same anatomy, same height. */
.featurepair { display: grid; gap: clamp(16px, 2vw, 24px); grid-template-columns: 1fr 1fr; }
@media (max-width: 760px) { .featurepair { grid-template-columns: 1fr; } }
.featurepair .card { display: flex; flex-direction: column; }
.featurepair .card .btn { margin-top: auto; align-self: flex-start; }

/* Photography. Fixed aspect crops so rows always align. */
.photo { border-radius: var(--radius-lg); box-shadow: var(--shadow); width: 100%;
  aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.photo--tall { aspect-ratio: 3 / 4; }
.photoband { display: grid; gap: clamp(14px, 2vw, 22px); grid-template-columns: repeat(3, 1fr); }
@media (max-width: 760px) { .photoband { grid-template-columns: 1fr; } }
.photocap { font-size: .85rem; color: var(--muted); margin-top: 8px; }

/* County stat tiles. Rendered only when sourced data exists (guardrail G2). */
.statgrid { display: grid; gap: clamp(14px, 2vw, 22px); grid-template-columns: repeat(3, 1fr); }
@media (max-width: 760px) { .statgrid { grid-template-columns: 1fr; } }
.stat { background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 24px; text-align: center; }
.stat b { display: block; font-family: 'Gabarito', sans-serif; font-size: clamp(1.7rem, 3vw, 2.3rem);
  color: var(--ink); letter-spacing: -.02em; line-height: 1.1; }
.stat span { display: block; color: var(--muted); font-size: .9rem; margin-top: 6px; }

/* The four-dash signal as a quiet divider between long stretches. */
.divider { display: flex; justify-content: center; padding: clamp(10px, 2vw, 22px) 0; }

/* Export-rate bars: a visual second rendering of the dated table above them. */
.ratebar { margin-top: 14px; }
.ratebar__row { display: grid; grid-template-columns: minmax(150px, 240px) 1fr 64px;
  gap: 12px; align-items: center; margin-bottom: 12px; }
.ratebar__label { font-size: .9rem; color: var(--body); }
.ratebar__track { background: var(--bg-soft); border-radius: 100px; height: 14px; overflow: hidden; }
.ratebar__fill { height: 100%; border-radius: 100px;
  background: linear-gradient(90deg, var(--route-ev-a), var(--route-ev-b)); }
.ratebar__val { font-weight: 800; color: var(--ink); font-size: .95rem; text-align: right; }
@media (max-width: 560px) {
  .ratebar__row { grid-template-columns: 1fr 56px; }
  .ratebar__label { grid-column: 1 / -1; margin-bottom: -6px; }
}

/* Photographic hero (Warm Homes): ink wash over the image, light lockup above the h1. */
.hero--img { background: var(--forest-deep); }
.hero--img .hero__bg { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .34; }
.hero--img::after { display: none; }
.hero--img .wrap { position: relative; z-index: 2; }
.hero__lockup { height: 44px; width: auto; margin-bottom: 26px; display: block; }

/* Explicit route classes beat the page-route gradient on rules and chips. */
.rule--route.g-solar   { background: linear-gradient(90deg, var(--route-solar-a),   var(--route-solar-b)); }
.rule--route.g-battery { background: linear-gradient(90deg, var(--route-battery-a), var(--route-battery-b)); }
.rule--route.g-ev      { background: linear-gradient(90deg, var(--route-ev-a),      var(--route-ev-b)); }
.rule--route.g-heat    { background: linear-gradient(90deg, var(--route-heat-a),    var(--route-heat-b)); }

/* Product cutouts: transparent renders sit straight on the page, no card, no
   plate. A soft drop-shadow grounds them without boxing them in. */
.cutout { display: block; margin: 0 auto; width: auto; max-width: min(78%, 340px);
  height: auto; filter: drop-shadow(0 22px 34px rgba(18,24,33,.20)); }
.cutout--wide { max-width: min(92%, 560px); }
.kitstrip { display: grid; gap: clamp(18px, 3vw, 34px);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  align-items: end; justify-items: center; }
.kitstrip figure { margin: 0; text-align: center; }
.kitstrip .cutout { max-width: min(88%, 240px); }
.kitstrip figcaption { font-size: .88rem; color: var(--muted); margin-top: 12px; }

/* A cutout inside split media must stay bare: the chassis rounds and shadows
   photographic media there, which would re-box the transparent renders. */
.split__media img.cutout { border-radius: 0; box-shadow: none; width: auto; }

/* =========================================================================
   ROUND 4 - tech-tinted tariff rows, symmetric rules, county calculator
   ========================================================================= */
/* Tariff rows tinted by the technology they reference (brand route colours,
   precomputed to hex). A left rule in the route's strong colour plus a
   whisper of the route's light colour behind the row. Text stays AA. */
table.data tr[data-tech] td:first-child { border-left: 4px solid transparent; }
table.data tr[data-tech="solar"]   { background: #FFF6EA; } table.data tr[data-tech="solar"]   td:first-child { border-left-color: #FF6B9D; }
table.data tr[data-tech="battery"] { background: #F9F4F7; } table.data tr[data-tech="battery"] td:first-child { border-left-color: #977DFF; }
table.data tr[data-tech="ev"]      { background: #EBFCF4; } table.data tr[data-tech="ev"]      td:first-child { border-left-color: #5B8DEF; }
table.data tr[data-tech="heat"]    { background: #EEFBF9; } table.data tr[data-tech="heat"]    td:first-child { border-left-color: #159C8E; }
.techkey { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: .82rem; color: var(--muted); }
.techkey i { width: 12px; height: 12px; border-radius: 4px; display: inline-block; margin-right: 5px; vertical-align: -1px; }

/* Symmetric rules grid: equal rows, route rule per card, matched anatomy. */
.rulegrid { display: grid; gap: clamp(16px, 2vw, 24px); grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; }
@media (max-width: 760px) { .rulegrid { grid-template-columns: 1fr; } }
.rulegrid .card { display: flex; flex-direction: column; }

/* County calculator */
.ccalc { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(20px, 3vw, 34px); box-shadow: var(--shadow); }
.ccalc__row { margin-bottom: 20px; }
.ccalc__lab { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  font-weight: 700; color: var(--ink); margin-bottom: 10px; }
.ccalc__lab output { color: var(--green-700); }
.ccalc input[type="range"] { width: 100%; accent-color: var(--ink); min-height: 32px; }
.ccalc__opts { display: flex; flex-wrap: wrap; gap: 8px; }
.ccalc__opts button { border: 1.5px solid var(--line); background: #fff; border-radius: 100px;
  padding: 9px 15px; font: inherit; font-size: .9rem; font-weight: 700; color: var(--body);
  cursor: pointer; min-height: 44px; }
.ccalc__opts button:hover { border-color: var(--muted); }
.ccalc__opts button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.ccalc__opts button small { display: block; font-weight: 400; font-size: .78rem; opacity: .82; }
.ccalc__outs { display: grid; gap: 12px; grid-template-columns: repeat(4, 1fr);
  margin-top: 6px; padding-top: 20px; border-top: 1px solid var(--line-soft); }
@media (max-width: 860px) { .ccalc__outs { grid-template-columns: repeat(2, 1fr); } }
.ccalc__outs > div { background: var(--bg-soft); border-radius: var(--radius); padding: 14px 16px; }
.ccalc__outs b { display: block; font-family: 'Gabarito', sans-serif; color: var(--ink);
  font-size: clamp(1.25rem, 2.4vw, 1.7rem); letter-spacing: -.02em; line-height: 1.15; }
.ccalc__outs span { display: block; color: var(--muted); font-size: .82rem; margin-top: 3px; }
.ccalc__split { margin-top: 18px; }
.ccalc__splittrack { background: var(--bg-soft); border-radius: 100px; height: 16px; overflow: hidden; }
.ccalc__splitfill { height: 100%; border-radius: 100px 0 0 100px;
  background: linear-gradient(90deg, var(--route-solar-a), var(--route-solar-b));
  transition: width .3s var(--ease); }
.ccalc__splitlab { font-size: .88rem; color: var(--body); margin-top: 8px; }
@media (prefers-reduced-motion: reduce) { .ccalc__splitfill { transition: none; } }

/* Coverage index: strict equal-tile grid, no ragged wrap. Every tile is the
   same size, columns align, and each carries its county's yield subline. */
.cnation { margin-top: 34px; }
.cnation__head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 16px; }
.cnation__head h3 { margin: 0; }
.cnation__count { font-size: .8rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: 100px; padding: 3px 12px; }
.cnation__head .rule { flex: 1; }
.cgrid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
@media (max-width: 480px) { .cgrid { grid-template-columns: repeat(2, 1fr); } }
a.ctile { display: block; background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; text-decoration: none; min-height: 62px;
  transition: transform .16s var(--ease), box-shadow .16s var(--ease), border-color .16s var(--ease); }
a.ctile b { display: block; color: var(--ink); font-size: .95rem; letter-spacing: -.01em; }
a.ctile span { display: block; color: var(--muted); font-size: .78rem; margin-top: 3px; }
a.ctile:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--muted); }
a.ctile:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }

/* Calculator option buttons living inside a .choices grid: fill the cell,
   read like the chassis choice chips. */
.choices .ccbtn { width: 100%; min-height: 52px; border: 1.5px solid var(--line); background: #fff;
  border-radius: 12px; padding: 10px 12px; font: inherit; font-size: .92rem; font-weight: 700;
  color: var(--body); cursor: pointer; text-align: center; }
.choices .ccbtn small { display: block; font-weight: 400; font-size: .78rem; color: var(--muted); margin-top: 2px; }
.choices .ccbtn:hover { border-color: var(--muted); }
.choices .ccbtn[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.choices .ccbtn[aria-pressed="true"] small { color: rgba(255,255,255,.75); }
.choices .ccbtn:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
.choices--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 380px) { .choices--3 { grid-template-columns: 1fr; } }

/* Supplier identifiers in the tariff tables: small logo beside the tariff
   name, nominative use only, sized so no logo shouts over another. */
.suplogo { display: flex; align-items: center; gap: 10px; }
.suplogo img { height: 26px; width: auto; max-width: 92px; object-fit: contain; flex-shrink: 0; }
.suplogo > div { min-width: 0; }

/* ---------- Blog diagrams ---------- */
.diagram { margin: 26px 0 30px; }
.diagram svg { width: 100%; height: auto; display: block; border-radius: var(--radius-lg); }
.diagram figcaption { font-size: .84rem; color: var(--muted); margin-top: 10px; line-height: 1.5; }

/* Diagram typography: brand fonts, not the SVG author's guess. CSS beats the
   font-family presentation attribute, so this governs every diagram including
   any added later. Display face for numbers and headings, body face for labels. */
.diagram svg text { font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; }
.diagram svg text[font-weight="600"],
.diagram svg text[font-weight="700"],
.diagram svg text[font-weight="800"],
.diagram svg text[font-weight="900"],
.diagram svg text[font-weight="bold"],
.diagram svg .dg-display { font-family: 'Gabarito', 'Manrope', sans-serif; letter-spacing: -.01em; }

/* ---------- Quiz variant ----------
   Same form, presented one question at a time with big tap targets. Only
   the choice buttons change; every field, name and validation rule is the
   form variant's, so the two collect identical data. */
.is-quiz .fsec__legend { font-size: 1.35rem; line-height: 1.3; margin-bottom: 22px; }
.is-quiz .field { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.is-quiz .choices { gap: 12px; }
.is-quiz .choice label {
  padding: 20px 22px; font-size: 1.05rem; border-radius: 14px; border-width: 2px;
}
.is-quiz .choice input:checked + label { box-shadow: 0 0 0 3px rgba(151,125,255,.18); }
@media (max-width: 560px) {
  .is-quiz .choices--4, .is-quiz .choices--3, .is-quiz .choices--2 { grid-template-columns: 1fr; }
  .is-quiz .choice label { padding: 18px 20px; }
}

/* Mobile persistent CTA bar (phones only, see initMobileBar) */
.mobbar { position:fixed; left:0; right:0; bottom:0; z-index:60; padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.96); border-top:1px solid var(--line); transform:translateY(110%); transition:transform .25s var(--ease, ease);
  display:none; }
.mobbar .btn { width:100%; justify-content:center; }
.mobbar.is-on { transform:translateY(0); }
@media (max-width: 940px) { .mobbar { display:block; } }
@media (prefers-reduced-motion: reduce) { .mobbar { transition:none; } }

/* Capture-then-enrich form: screen one is three fields and one button */
.fsec--capture .capture-grid { display:grid; grid-template-columns:1fr; gap:14px; }
@media (min-width:640px) { .fsec--capture .capture-grid { grid-template-columns:1fr 1fr; } .fsec--capture .capture-grid .field:first-child { grid-column:1 / -1; } }
.capture-ok { margin:0 0 16px; padding:14px 16px; }
.capture-ok a { color:var(--green-700, #06642a); text-decoration:underline; }

/* ==========================================================================
   Branded product pages: nav disclosure, breadcrumbs, price, spec tables,
   package strip and the trademark notice.
   Added 20 Aug 2026 with the Powerwall 3 / Duracell / LONGi pages.
   The product calculator deliberately adds no new classes: it reuses the
   county calculator's (.calc, .ccbtn, .result-*, .bar*) so the two stay
   visually identical and there is one thing to maintain, not two.
   ========================================================================== */

/* ---------- Nav disclosure ---------- */
.hdr__grp { position: relative; display: inline-flex; align-items: center; gap: 2px; }
.hdr__disc {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; min-height: 44px; padding: 0; border: 0; background: none;
  color: var(--ink); cursor: pointer; border-radius: var(--radius-sm);
}
.hdr__disc svg { transition: transform .18s var(--ease); }
.hdr__disc[aria-expanded="true"] svg { transform: rotate(180deg); }
.hdr__disc:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
.hdr__sub {
  position: absolute; top: 100%; left: -14px; z-index: 60; margin: 0;
  min-width: 232px; padding: 8px; list-style: none;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .16s var(--ease), transform .16s var(--ease), visibility .16s;
}
.hdr__grp:hover .hdr__sub,
.hdr__grp:focus-within .hdr__sub,
.hdr__disc[aria-expanded="true"] + .hdr__sub {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.hdr__sub li { margin: 0; }
.hdr__nav .hdr__sub a {
  display: flex; padding: 10px 12px; border-bottom: 0; border-radius: var(--radius-sm);
  font-size: .92rem; font-weight: 600; color: var(--body);
}
.hdr__nav .hdr__sub a:hover, .hdr__nav .hdr__sub a[aria-current="page"] {
  background: var(--bg-soft); color: var(--green-700);
}
@media (max-width: 940px) {
  .hdr__grp { display: block; }
  .hdr__disc { display: none; }
  .hdr__sub {
    position: static; opacity: 1; visibility: visible; transform: none;
    min-width: 0; padding: 0 0 10px 16px; border: 0; box-shadow: none;
    background: none; border-radius: 0;
  }
  .hdr__nav .hdr__sub a {
    padding: 11px 0; font-size: .98rem; border-bottom: 1px solid var(--line-soft);
    border-radius: 0;
  }
  .hdr__nav .hdr__sub a:hover, .hdr__nav .hdr__sub a[aria-current="page"] { background: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hdr__sub, .hdr__disc svg { transition: none; }
}

/* ---------- Breadcrumbs ---------- */
.crumbs { font-size: .84rem; font-weight: 600; margin-bottom: 12px; color: var(--on-dark-muted); }
.crumbs a { color: var(--on-dark-muted); text-decoration: underline; text-underline-offset: 3px; }
.crumbs a:hover { color: var(--on-dark-strong); }
.crumbs span { margin: 0 4px; }
.crumbs [aria-current="page"] { color: var(--on-dark); }

/* ---------- The ad price, restated on the landing page ---------- */
.brandprice {
  font-family: 'Gabarito', system-ui, sans-serif; font-weight: 800;
  font-size: clamp(2.6rem, 8vw, 4.2rem); line-height: 1.05;
  color: var(--on-dark-strong); margin: 18px 0 22px; letter-spacing: .01em;
}
.brandprice span {
  display: block; font-family: 'Manrope', system-ui, sans-serif; font-weight: 700;
  font-size: 1.05rem; line-height: 1; color: var(--on-dark-muted);
  letter-spacing: 0; margin-bottom: 2px;
}
.brandprice span:empty { display: none; }
.brandprice small { font-size: 1.05rem; font-weight: 700; color: var(--on-dark-muted); }
.brandprice sup { font-size: .42em; vertical-align: super; color: var(--on-dark-muted); }

/* ---------- Spec tables ---------- */
.tablescroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 6px 0 10px; }
.spec { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 460px; }
.spec caption { text-align: left; }
.spec th, .spec td { padding: 12px 14px; text-align: left; vertical-align: top; }
.spec thead th { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); border-bottom: 2px solid var(--line); }
.spec tbody th { font-weight: 700; color: var(--ink); width: 46%; }
.spec tbody td { color: var(--body); }
.spec tbody tr { border-bottom: 1px solid var(--line-soft); }
.spec tbody tr:last-child { border-bottom: 0; }
.spec tbody tr:nth-child(odd) { background: var(--bg-soft); }
.section--soft .spec tbody tr:nth-child(odd) { background: var(--white); }
@media (max-width: 520px) {
  .spec { font-size: .88rem; min-width: 380px; }
  .spec th, .spec td { padding: 10px; }
}

/* ---------- Calculator additions ---------- */
.pcalc__place { font-size: .86rem; font-weight: 600; margin-top: 8px; min-height: 1.2em; color: var(--muted); }
.pcalc__place.is-ok { color: var(--green-700); }
.pcalc__place.is-warn { color: #8A5A00; }
.pcalc__assume { border-top: 1px solid var(--surface-dark-line); padding-top: 14px; margin: 0; }
.pcalc__row { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; font-size: .92rem; border-bottom: 1px solid var(--surface-dark-line); }
.pcalc__row:last-child { border-bottom: 0; }
.pcalc__row--total { font-size: 1.02rem; padding-top: 12px; }
.pcalc__row--total span, .pcalc__row--total b { font-weight: 800; }

/* ---------- Package strip ---------- */
.pkggrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 1000px) { .pkggrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .pkggrid { grid-template-columns: 1fr; } }
.pkgcard {
  display: flex; flex-direction: column; text-decoration: none;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px; transition: box-shadow .18s var(--ease), transform .18s var(--ease);
}
.pkgcard:hover { box-shadow: var(--shadow); transform: translateY(-2px); text-decoration: none; }
.pkgcard__media { display: flex; align-items: flex-end; justify-content: center; height: 148px; margin-bottom: 14px; }
.pkgcard__media img { max-height: 148px; width: auto; max-width: 100%; }
.pkgcard h3 { font-size: 1.06rem; margin: 0 0 4px; color: var(--ink); }
.pkgcard p { font-size: .88rem; color: var(--muted); margin: 0 0 12px; }
.pkgcard__price {
  margin-top: auto; font-family: 'Gabarito', system-ui, sans-serif; font-weight: 800;
  font-size: 1.7rem; color: var(--ink); letter-spacing: .01em;
}
.pkgcard__price small { display: block; font-family: 'Manrope', system-ui, sans-serif; font-size: .78rem; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.pkgcard .go { margin-top: 10px; font-size: .86rem; font-weight: 700; color: var(--green-700); }
@media (prefers-reduced-motion: reduce) { .pkgcard { transition: none; } .pkgcard:hover { transform: none; } }

/* ---------- Trademark notice ---------- */
.tmnote { font-size: .8rem; line-height: 1.6; color: var(--muted); margin: 0; }

/* ==========================================================================
   Product wells, form symmetry and touch targets.
   Added 20 Aug 2026. A white battery on a white card is invisible, which is
   what the ads never do: they shoot every product on a deep navy ground with
   a coloured glow behind it. These wells bring that treatment onto the site
   so the click from the ad lands on something that looks like the ad.
   ========================================================================== */

/* ---------- Product well ---------- */
.prodwell {
  display: flex; align-items: center; justify-content: center;
  padding: clamp(18px, 3vw, 30px);
  border-radius: var(--radius);
  border: 1px solid var(--surface-dark-line);
  background-color: var(--surface-dark-soft);
  background: radial-gradient(115% 85% at 50% 100%, rgba(151, 125, 255, .26), rgba(151, 125, 255, 0) 62%), linear-gradient(168deg, #16202E 0%, var(--surface-dark-soft) 68%);
  overflow: hidden;
}
.prodwell img, .prodwell .cutout {
  max-width: 100%; width: auto; margin: 0;
  filter: drop-shadow(0 18px 34px rgba(0, 0, 0, .45));
}
/* Route pages tint the glow to their own accent, same ramp as the creative. */
[data-route="solar"] .prodwell {
  background-color: var(--surface-dark-soft);
  background: radial-gradient(115% 85% at 50% 100%, rgba(255, 126, 159, .24), rgba(255, 126, 159, 0) 62%), linear-gradient(168deg, #16202E 0%, var(--surface-dark-soft) 68%);
}
[data-route="ev"] .prodwell {
  background-color: var(--surface-dark-soft);
  background: radial-gradient(115% 85% at 50% 100%, rgba(111, 162, 234, .24), rgba(111, 162, 234, 0) 62%), linear-gradient(168deg, #16202E 0%, var(--surface-dark-soft) 68%);
}
[data-route="heat"] .prodwell {
  background-color: var(--surface-dark-soft);
  background: radial-gradient(115% 85% at 50% 100%, rgba(55, 173, 159, .24), rgba(55, 173, 159, 0) 62%), linear-gradient(168deg, #16202E 0%, var(--surface-dark-soft) 68%);
}

/* The hero render sits on the dark hero already, so it needs no well. */
.hero .prodwell { background: none; border: 0; padding: 0; }

/* Package cards: the media area becomes the well, fixed height so every card
   in the row is identical whatever the product's aspect ratio. */
.pkgcard__media {
  height: 190px; margin-bottom: 16px; padding: 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--surface-dark-line);
  background-color: var(--surface-dark-soft);
  background: radial-gradient(120% 88% at 50% 100%, rgba(151, 125, 255, .28), rgba(151, 125, 255, 0) 60%), linear-gradient(168deg, #16202E 0%, var(--surface-dark-soft) 68%);
  align-items: center;
}
.pkgcard__media img { max-height: 100%; filter: drop-shadow(0 14px 26px rgba(0, 0, 0, .5)); }
@media (max-width: 480px) { .pkgcard__media { height: 168px; } }

/* Kit strip figures: same treatment, equal heights across the row. */
.kitstrip figure > picture {
  display: flex; align-items: center; justify-content: center;
  height: 260px; padding: 22px; margin-bottom: 14px;
  border-radius: var(--radius);
  border: 1px solid var(--surface-dark-line);
  background-color: var(--surface-dark-soft);
  background: radial-gradient(115% 85% at 50% 100%, rgba(151, 125, 255, .24), rgba(151, 125, 255, 0) 62%), linear-gradient(168deg, #16202E 0%, var(--surface-dark-soft) 68%);
}
[data-route="solar"] .kitstrip figure > picture {
  background-color: var(--surface-dark-soft);
  background: radial-gradient(115% 85% at 50% 100%, rgba(255, 126, 159, .22), rgba(255, 126, 159, 0) 62%), linear-gradient(168deg, #16202E 0%, var(--surface-dark-soft) 68%);
}
.kitstrip figure > picture .cutout {
  max-width: 100%; max-height: 100%; width: auto;
  filter: drop-shadow(0 16px 28px rgba(0, 0, 0, .5));
}
@media (max-width: 620px) { .kitstrip figure > picture { height: 210px; } }

/* ---------- Footer: real tap targets, and a fifth column that fits ---------- */
.ftr li { margin-bottom: 0; }
.ftr li a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 2px 0;
}
.ftr__legal a { display: inline-block; padding: 11px 2px; }

/* ---------- Postcode rows: balanced, and the code reads centred ---------- */
.pcrow { align-items: stretch; }
.pcrow input {
  flex: 1 1 auto; min-width: 0; min-height: 52px;
  text-align: center; letter-spacing: .06em; font-weight: 700;
  text-transform: uppercase;
}
.pcrow input::placeholder {
  letter-spacing: normal; font-weight: 500; text-transform: none;
  text-align: center; opacity: .78;
}
.pcrow .btn { flex: 0 0 auto; min-height: 52px; white-space: nowrap; }
@media (max-width: 460px) { .pcrow input, .pcrow .btn { width: 100%; } }
/* The lead form's postcode sits in a labelled grid, so it keeps the form's
   own left-aligned rhythm rather than being centred out of line with the
   fields above and below it. */
form[data-lead-form] .pcrow input { text-align: left; text-transform: uppercase; letter-spacing: normal; font-weight: 600; }
form[data-lead-form] .pcrow input::placeholder { text-align: left; }

/* ---------- Sliders: a 44px grab area without a 44px bar ---------- */
.calc__panel input[type="range"]:focus-visible { outline: 3px solid var(--green); outline-offset: 4px; }

/* Kit strip: stretch each figure to its column so the wells line up. Content
   sizing left three products at 226, 222 and 344px wide in the same row. */
.kitstrip { justify-items: stretch; }
.kitstrip figure { width: 100%; }
.kitstrip .cutout { max-width: min(88%, 240px); }

/* Postcode and town chips are standalone tap targets, not inline prose links,
   so they get a real height rather than the 28px text sizing gave them. */
.pcode { min-height: 34px; display: inline-flex; align-items: center; }
@media (max-width: 760px) { .pcode { min-height: 42px; padding: 4px 14px; } .pcodes { gap: 8px; } }

/* Breadcrumbs are standalone navigation, not prose, so they get a real
   tap target rather than the 18px the text size alone gave them. */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.crumbs a, .crumbs [aria-current="page"] { display: inline-flex; align-items: center; min-height: 40px; padding: 0 2px; }
.crumbs span { margin: 0 2px; }

/* Postcode inputs had browser-default padding, so the centred text sat in a
   box that was only tall because of min-height. Give it real padding. */
.pcrow input { padding: 14px 16px; }

/* The media well contains a <picture>, which is inline and has no height of
   its own, so max-height:100% on the img resolved against nothing and the
   product spilled over the card text. Give every link in the chain a height. */
.pkgcard__media > picture,
.prodwell > picture,
.kitstrip figure > picture > img { min-height: 0; }
.pkgcard__media > picture {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
}
.pkgcard__media > picture > img {
  max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain;
}
.prodwell > picture { display: flex; align-items: center; justify-content: center; width: 100%; }
.prodwell > picture > img { max-height: 420px; max-width: 100%; width: auto; height: auto; object-fit: contain; }

/* ---------- Blog hub cards with hero thumbnails ----------------------------
   Shared 16:10 crop via aspect-ratio so every card in a row matches to the
   pixel whatever shape the source photo is. The thumb bleeds to the card edge:
   negative margins against the card padding, radius clipped to the card's. */
.routecard--thumbed { padding-top: 0; overflow: hidden; }
.routecard__thumb { display: block; margin: 0 calc(-1 * clamp(24px, 3vw, 34px)) 16px; }
.routecard__thumb picture, .routecard__thumb img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

/* Source URLs are long and unbreakable by design; without this they push a
   375px viewport sideways. Anywhere-wrapping is correct for URLs. */
details ul.small.muted li, details ul.small.muted span.muted { overflow-wrap: anywhere; }

/* ---------- Contextual photo inside a guide --------------------------------
   Full-column photography with a soft radius and a quiet caption. The credit
   is part of the caption line, small and muted: attribution without clutter.
   Fixed aspect comes from width/height on the img, so no CLS. */
.ctxphoto { margin: 30px 0; }
.ctxphoto img { width: 100%; height: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.ctxphoto figcaption { margin-top: 10px; font-size: .84rem; color: var(--muted); line-height: 1.55; }
.ctxphoto__credit { opacity: .75; font-size: .78rem; }

/* Install-photo strip on the hub and brand pages: two or three photographs in
   a row that crop to a shared height, radius matching the cards around them.
   Symmetry is enforced by aspect-ratio rather than hoping the sources agree. */
.photostrip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.photostrip--2 { grid-template-columns: repeat(2, 1fr); }
.photostrip a, .photostrip > div { display: block; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.photostrip img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; transition: transform .5s var(--ease); }
.photostrip a:hover img { transform: scale(1.04); }
@media (max-width: 720px) {
  .photostrip { grid-template-columns: 1fr 1fr; }
  .photostrip > *:nth-child(3) { display: none; }
}
@media (prefers-reduced-motion: reduce) { .photostrip img { transition: none; } }

/* Trust strip under the guide byline: why the number can be believed. */
.truststrip { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 14px 0 0; padding: 12px 16px; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: var(--bg-soft); font-size: .82rem; color: var(--muted); }
.truststrip b { color: var(--body); font-weight: 600; }
.truststrip span { display: inline-flex; align-items: center; gap: 6px; }
.truststrip i { width: 6px; height: 6px; border-radius: 50%; background: var(--route-b); flex: none; }

/* ---------- Product figure inside a guide ----------------------------------
   A render on its own dark ground with two or three specs beside it, so a wall
   of guide text gets a real object in it rather than another grey card. The
   specs resolve from the product registry at build time: the number in a guide
   and the number in the calculator are the same row. */
.prodfig { display: grid; grid-template-columns: 190px 1fr; gap: 22px; align-items: center; margin: 28px 0; padding: 0; }
.prodfig__media { position: relative; display: flex; align-items: center; justify-content: center; height: 220px; padding: 6px 6px 18px; }
.prodfig__media::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: 2px; height: 16px; border-radius: 50%; background: radial-gradient(closest-side, rgba(18, 24, 33, .24), rgba(18, 24, 33, 0) 76%); }
.prodfig__media picture { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.prodfig__media img { position: relative; z-index: 1; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; filter: drop-shadow(0 12px 20px rgba(18, 24, 33, .22)); }
.prodfig__cap { margin: 0; }
.prodfig__name { display: block; font-size: 1.06rem; line-height: 1.3; color: var(--ink); margin-bottom: 10px; }
.prodfig__specs { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0; font-size: .88rem; }
.prodfig__specs dt { color: var(--muted); }
.prodfig__specs dd { margin: 0; color: var(--body); font-weight: 600; }
.prodfig__note { display: block; margin-top: 10px; font-size: .84rem; color: var(--muted); }
@media (max-width: 640px) {
  .prodfig { grid-template-columns: 1fr; gap: 16px; }
  .prodfig__media { height: 240px; }
  /* Two columns of specs squeeze the values into three-word lines on a phone.
     Stack them: label above value, one pair per row. */
  .prodfig__specs { grid-template-columns: 1fr; gap: 0; }
  .prodfig__specs dt { margin-top: 10px; font-size: .8rem; }
  .prodfig__specs dt:first-child { margin-top: 0; }
}

/* ---------- The system on the stage, top of the results column --------------
   The array is the back layer and the selected battery stands in front of it
   on the same ground line, so the visitor watches the package assemble rather
   than reading a list of parts. A flex row rather than absolute positioning,
   because the four packages are four different widths and the group has to sit
   optically centred whichever one is on: a two-unit Duracell is nearly twice
   the width of a single Powerwall. Fixed aspect ratio so switching never
   reflows the results underneath. Contain, never cover: these are cutouts and
   a cropped product render looks like a mistake. */
.sysviz { margin: 0; }
.sysviz__stage { position: relative; display: flex; align-items: flex-end; justify-content: center; aspect-ratio: 16 / 10; padding: 2% 2% 7%; }
/* No panel, no card, no slab: the kit sits on the page. What stops a white
   product reading as a cut-out pasted onto white is the contact shadow it
   casts on the floor, so that is the one thing kept, in slate rather than
   black. Nothing clips it, hence no overflow rule. */
.sysviz__stage::after { content: ""; position: absolute; z-index: 1; left: 14%; right: 14%; bottom: 4%; height: 20px; border-radius: 50%; background: radial-gradient(closest-side, rgba(18, 24, 33, .26), rgba(18, 24, 33, 0) 76%); }
.sysviz__layer { position: relative; z-index: 2; display: flex; align-items: flex-end; justify-content: center; }
.sysviz__layer picture { display: flex; align-items: flex-end; justify-content: center; height: 100%; }
.sysviz__layer picture[hidden] { display: none; }
.sysviz__layer img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.sysviz__layer--panel { height: 100%; max-width: 44%; }
.sysviz__layer--panel img { filter: drop-shadow(0 14px 22px rgba(18, 24, 33, .20)); }
/* Shorter than the array because it is: a 1990 mm module against a battery
   around a metre tall. The negative margin is the overlap, and the shadow
   falls left so it lands on the panel standing behind it. */
.sysviz__layer--batt { z-index: 3; height: 76%; max-width: 56%; margin-left: -11%; }
.sysviz__layer--batt img { filter: drop-shadow(-20px 12px 26px rgba(18, 24, 33, .30)); }
/* Panels only: the array has the stage to itself. */
.sysviz__stage.is-panel .sysviz__layer--batt { display: none; }
.sysviz__stage.is-panel .sysviz__layer--panel { max-width: 50%; }
/* Battery only, on a battery page where no array is in the job. */
.sysviz__stage.is-batt .sysviz__layer--panel { display: none; }
.sysviz__stage.is-batt .sysviz__layer--batt { height: 96%; max-width: 64%; margin-left: 0; }
/* Both, the default. */
.sysviz__stage.is-pair .sysviz__layer--batt { height: 76%; max-width: 56%; margin-left: -11%; }
@keyframes sysviz-in { from { opacity: 0; transform: translate3d(18px, 0, 0); } to { opacity: 1; transform: none; } }
.sysviz__stage.is-pair .sysviz__layer--batt, .sysviz__stage.is-batt .sysviz__layer--batt { animation: sysviz-in .36s var(--ease) both; }
.sysviz__cap { display: flex; flex-direction: column; gap: 3px; margin: 14px 0 0; padding: 0 0 18px; border-bottom: 1px solid var(--line); }
.sysviz__cap b { font-size: 1.02rem; line-height: 1.3; color: var(--ink); }
.sysviz__cap span { font-size: .86rem; color: var(--muted); }
@media (max-width: 560px) {
  .sysviz__stage { aspect-ratio: 5 / 4; padding: 6% 5% 9%; }
  .sysviz__cap b { font-size: .96rem; }
}
@media (prefers-reduced-motion: reduce) {
  .sysviz__stage.is-pair .sysviz__layer--batt, .sysviz__stage.is-batt .sysviz__layer--batt { animation: none; }
}

/* Every option in a calculator choice group is the same height, whichever row
   it lands on. Four battery buttons in a 2x2 were ragged because one label
   wrapped to three lines and the others did not. */
[data-pcalc] .choices { grid-auto-rows: 1fr; }
[data-pcalc] .ccbtn { height: 100%; }
@media (max-width: 380px) {
  [data-pcalc] .choices--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-pcalc] .choices--2 .ccbtn { padding-left: 8px; padding-right: 8px; font-size: .92rem; }
  [data-pcalc] .choices--2 .ccbtn small { font-size: 12px; } /* was .71rem = 11.36px, under the 12px floor */
}
/* Keep the slider's value on one line and let the label take the slack. */
.range-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.range-row .range-val { white-space: nowrap; flex: 0 0 auto; }
.range-row label { min-width: 0; }


/* 12px type floor (audit, 2 Sep 2026): <small> inherited the browser's 'smaller' inside the
   calculator choice buttons (11.36px) and the footnote strong (11.2px). Explicit floor. */
.choices .ccbtn small, .ccalc__opts button small, .footnote small { font-size: 12px; }

/* Footer links: 44px-class hit area on a phone (audit, 2 Sep 2026). */
.ftr li { margin-bottom: 2px; }
.ftr li a { display: inline-block; padding: 8px 0; }

/* ==========================================================================
   3 SEP UPGRADE: hero video, inline video, YouTube facades, badges, quick
   answer, cross-package links, phone CTA, bottom quote bar, exit intent.
   Markup for .vid/.yt/.badges/.qa/.xlink/.cta-bar comes from the generators;
   this file only styles and drives it. The exit panel is the exception: it
   is built entirely by site.js, so <body data-exit="1"> is the only thing
   a page needs to carry for it.
   ========================================================================== */

/* ---------- Hero video: full-bleed loop behind the homepage hero ----------
   .hero already establishes the stacking context (position:relative,
   overflow:hidden) and .hero__grid already sits at z-index:2, so the video
   and its scrim only need explicit z-indexes below that to land underneath
   the hero copy regardless of where they fall in the markup. */
.hero-video {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.hero-video__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  /* Flat, not a gradient: worst case (a bright, near-white video frame)
     still resolves to roughly 7.8:1 for white text at this opacity, so
     every word of the hero copy clears AA regardless of what is playing. */
  background: rgba(18, 24, 33, .7);
}

/* ---------- Inline install video: a plain, captioned 16:9 block ----------- */
.vid { margin: 30px 0; }
.vid video {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #000;
  border-radius: var(--radius-lg); box-shadow: var(--shadow); display: block;
}
.vid figcaption { margin-top: 10px; font-size: .84rem; color: var(--muted); line-height: 1.55; }

/* ---------- YouTube click-to-load facade -----------------------------------
   A static poster and a button until the visitor asks for the video, so no
   YouTube script or iframe ever loads on a page view that never presses
   play. 64px clears the 44px target floor with room to spare. */
.yt {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-lg);
  overflow: hidden; background: #000; box-shadow: var(--shadow); cursor: pointer;
}
.yt__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.yt__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 64px; height: 64px; min-width: 44px; min-height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(18, 24, 33, .82); border: 2px solid rgba(255, 255, 255, .92); color: #fff;
  cursor: pointer; transition: background .16s var(--ease), transform .16s var(--ease);
}
.yt__play::before {
  content: ''; width: 0; height: 0; margin-left: 4px;
  border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent #fff;
}
.yt__play:hover { background: var(--green-600); }
.yt__play:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.yt__credit { margin-top: 10px; font-size: .84rem; color: var(--muted); }
@media (prefers-reduced-motion: reduce) {
  .yt__play { transition: none; }
  .yt__play:hover { transform: translate(-50%, -50%); }
}

/* ---------- Accreditation badges, on the dark band -------------------------
   White marks read only on the ink ground, so the lede and the row are both
   styled for that background: --on-dark-muted, the token this file already
   uses for secondary text on --forest-deep, rather than the plain --muted
   slate that fails AA there (see the footnote and eyebrow fixes above). */
.badges__lede {
  margin: 0 0 16px; text-align: center;
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--on-dark-muted);
}
.badges {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px;
}
.badges li { margin: 0; display: flex; align-items: center; }
.badges img { height: 28px; width: auto; display: block; }
@media (min-width: 640px) {
  .badges { gap: 22px; }
  .badges img { height: 38px; }
}

/* ---------- Quick answer box, top of money pages ---------------------------
   max-width is a ceiling, not a fight with the parent: nested inside
   .wrap--narrow or .prose it simply fills that narrower column instead. */
.qa {
  display: block; width: 100%; max-width: var(--wrap); margin: 0 auto clamp(24px, 3vw, 36px);
  background: var(--bg-soft); border: 1px solid var(--line); border-left: 5px solid var(--route-ev-a);
  border-radius: var(--radius); padding: 20px 24px;
}
.qa__label {
  margin: 0 0 8px; font-size: 12px; font-weight: 900; letter-spacing: .12em;
  text-transform: uppercase; color: var(--green-700);
}
.qa__text { margin: 0; font-size: clamp(17px, 1.6vw, 18px); font-weight: 600; color: var(--ink); line-height: 1.5; }

/* ---------- Cross-package link cards ---------------------------------------
   grid-auto-rows:1fr plus height:100% on the anchor keeps every card in the
   row the same height whatever its own copy runs to. */
.xlink { display: grid; gap: clamp(14px, 2vw, 20px); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); grid-auto-rows: 1fr; }
@media (max-width: 640px) { .xlink { grid-template-columns: 1fr; } }
.xlink__card {
  display: flex; flex-direction: column; gap: 6px; height: 100%; min-height: 44px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 20px 22px; color: var(--body); text-decoration: none !important;
  transition: transform .16s var(--ease), box-shadow .16s var(--ease), border-color .16s var(--ease);
}
.xlink__card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--green); }
.xlink__card:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
.xlink__k { font-size: .76rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--green-700); }
.xlink__card strong { font-size: 1.08rem; color: var(--ink); }
.xlink__card > span:last-child { font-size: .92rem; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .xlink__card { transition: none; } .xlink__card:hover { transform: none; } }

/* ---------- Phone CTA, beside the primary button ---------------------------
   Same min-height and vertical padding as .btn, so the pair reads as one
   row at a glance. Both are inline-flex, so dropping this straight after a
   .btn (in a .btn-row or not) wraps to its own line on a narrow screen the
   same way any inline content wraps, no extra markup required. */
.cta-phone {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: var(--tap); padding: 15px 22px; border-radius: 100px; border: 2px solid var(--line);
  background: #fff; color: var(--ink); font-weight: 700; font-size: 1.02rem;
  text-decoration: none !important; text-align: center;
  transition: border-color .16s var(--ease), color .16s var(--ease), background .16s var(--ease), transform .16s var(--ease);
}
.cta-phone svg { flex-shrink: 0; }
.cta-phone:hover { border-color: var(--green); color: var(--green-700); background: var(--bg-mint); transform: translateY(-2px); }
.cta-phone:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
/* On the dark hero (or any .section--dark) the white/line pairing above
   would sit near-invisible on ink, so mirror .btn--outlineLight instead. */
.section--dark .cta-phone, .hero .cta-phone {
  background: transparent; border-color: rgba(255, 255, 255, .5); color: #fff;
}
.section--dark .cta-phone:hover, .hero .cta-phone:hover { background: rgba(255, 255, 255, .12); border-color: #fff; color: #fff; }
@media (prefers-reduced-motion: reduce) { .cta-phone:hover { transform: none; } }

/* ---------- Bottom-of-viewport quote bar -----------------------------------
   Visible by default so a no-JS visitor keeps the CTA the whole time;
   site.js (initCtaBar) then hides it until 600px of scroll and while #book
   is on screen by toggling .is-hidden. Never shown alongside .mobbar:
   initMobileBar bails out wherever a page carries a .cta-bar. */
.cta-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 65;
  display: flex; align-items: center; gap: 14px;
  padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
  background: #fff; border-top: 1px solid var(--line); /* solid, 3 Sep: at .97 the section heading behind the bar ghosted through the price line at 375 */
  box-shadow: 0 -4px 20px rgba(18, 24, 33, .10);
  transform: translateY(0); transition: transform .28s var(--ease);
}
.cta-bar.is-hidden { transform: translateY(110%); }
.cta-bar__info { flex: 1 1 auto; min-width: 0; }
.cta-bar__info b { display: block; color: var(--ink); font-size: .98rem; line-height: 1.25; }
.cta-bar__info span { display: block; color: var(--muted); font-size: .8rem; }
.cta-bar .btn { flex: 0 0 auto; }
@media (max-width: 480px) {
  .cta-bar { flex-wrap: wrap; }
  .cta-bar__info { flex-basis: 100%; text-align: center; }
  .cta-bar .btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) { .cta-bar { transition: none; } }

/* ---------- Exit intent panel -----------------------------------------------
   Built entirely by site.js (initExitIntent), so this only styles the two
   classes it creates. No discount or countdown copy belongs in here. */
.exit {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(18, 24, 33, .62);
  opacity: 0; visibility: hidden; transition: opacity .2s var(--ease);
}
.exit.is-on { opacity: 1; visibility: visible; }
.exit__panel {
  position: relative; width: 100%; max-width: 440px; max-height: 88vh; overflow-y: auto;
  background: #fff; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg);
  padding: clamp(28px, 4vw, 40px); transform: translateY(14px); transition: transform .22s var(--ease);
}
.exit.is-on .exit__panel { transform: translateY(0); }
.exit__close {
  position: absolute; top: 12px; right: 12px; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: 50%; color: var(--muted); cursor: pointer;
}
.exit__close:hover { background: var(--bg-soft); color: var(--ink); }
.exit__close:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
.exit__title { margin: 0 0 8px; padding-right: 36px; font-size: 1.35rem; }
.exit__sub { margin: 0 0 20px; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .exit, .exit__panel { transition: none; } }
@media (max-width: 480px) {
  .exit { padding: 0; align-items: flex-end; }
  .exit__panel { max-width: 100%; max-height: 92vh; border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
}

/* Badge sizing, 3 Sep: the six marks have wildly different aspect ratios (MCS & NAPIT & Which? are
   portrait or square, TrustMark/RECC/NICEIC are wide). A single height cap made the portrait marks
   read as postage stamps. Cap by both axes so each mark fills a similar visual box. */
.badges li img { height: auto; width: auto; max-height: 40px; max-width: 132px; }
.badges li img[src*="mcs_"], .badges li img[src*="napit_"], .badges li img[src*="which_"] { max-height: 54px; }
@media (min-width: 940px) {
  .badges li img { max-height: 46px; max-width: 160px; }
  .badges li img[src*="mcs_"], .badges li img[src*="napit_"], .badges li img[src*="which_"] { max-height: 64px; }
}

/* Package-page quote bar inner layout (brand-pages.js emits .cta-bar__inner / .cta-bar__price). */
.cta-bar__inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 1120px; margin: 0 auto; }
.cta-bar__price { font-weight: 700; font-size: 15px; line-height: 1.3; }
@media (max-width: 600px) { .cta-bar__inner { flex-wrap: wrap; justify-content: center; text-align: center; } .cta-bar__price { width: 100%; font-size: 14px; } }

/* Badge band, 3 Sep: the marks are white PNGs and every placement on the site is a light section,
   so the row carries its own dark band. The lede sits on the light ground in ink. */
.badges { background: #121821; border-radius: 14px; padding: 22px 24px; }
.badges__lede { color: #4D5766; }
.section--dark .badges { background: transparent; padding: 0; border-radius: 0; }
.section--dark .badges__lede { color: var(--on-dark-muted); }
@media (min-width: 940px) { .badges { padding: 26px 32px; } }

/* Package grid symmetry, 3 Sep: five cards (four batteries + the LONGi panel). Five equal columns on
   wide screens; two columns with the fifth card spanning the row on tablets; single column on phones. */
.pkggrid { display: grid; gap: 20px; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: stretch; }
.pkggrid .pkgcard { height: 100%; display: flex; flex-direction: column; }
.pkggrid .pkgcard .go { margin-top: auto; }
@media (max-width: 1179px) {
  .pkggrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pkggrid .pkgcard:nth-child(5):last-child { grid-column: 1 / -1; }
}
@media (max-width: 599px) { .pkggrid { grid-template-columns: 1fr; } .pkggrid .pkgcard:nth-child(5):last-child { grid-column: auto; } }
@media (min-width: 1180px) { .pkggrid .pkgcard__media { width: 100%; height: 180px; } .pkggrid .pkgcard__media picture, .pkggrid .pkgcard__media img { max-height: 160px; width: auto; max-width: 100%; margin: 0 auto; } }

/* Package card alignment, 3 Sep: descriptors wrap to two lines on the Duracell cards and one on the
   Tesla cards, which pushed the prices out of line. Reserve two lines for the descriptor and pin the
   price block to the bottom so every price and every "See the numbers" sits on the same baseline. */
.pkggrid .pkgcard > p { min-height: 2.75em; }
.pkggrid .pkgcard .pkgcard__price { margin-top: auto; }
.pkggrid .pkgcard .go { margin-top: 10px; }

/* Footnote links, 3 Sep: source URLs never widen a phone viewport. */
.footnote a, .footnote { overflow-wrap: anywhere; word-break: break-word; }