/* ==========================================================================
   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: 'OVO Circular';
  src: url('../assets/fonts/OVOCircularWeb-Book.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'OVO Circular';
  src: url('../assets/fonts/OVOCircularWeb-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'OVO Circular';
  src: url('../assets/fonts/OVOCircularWeb-Black.woff2') format('woff2');
  font-weight: 900; font-style: normal; font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --green:        #0A9828;
  --green-600:    #08811f;
  --green-700:    #067019;
  --forest:       #044D29;
  --forest-deep:  #00261C;
  --ink:          #00261C;
  --body:         #3d4f47;
  --muted:        #5F7065;   /* AA on white, soft and mint grounds */
  --line:         #dfe7e3;
  --line-soft:    #eef3f1;
  --bg:           #ffffff;
  --bg-soft:      #f4f8f6;
  --bg-mint:      #e8f5ec;
  --white:        #ffffff;
  --amber:        #F5A623;
  --sun:          #FFCE33;

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

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

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

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

  /* Solid surfaces for dark sections.
     OVO's visual language is flat and confident: on a dark ground, a card is a
     solid lighter tint of the same green family, never a translucent white
     wash. Every surface below is opaque so cards read as objects, not fog. */
  --surface-dark:      #063A29;  /* card on --forest-deep */
  --surface-dark-2:    #0A4A34;  /* raised card / hover */
  --surface-dark-line: #145C42;  /* border on dark */
  --surface-dark-soft: #04301F;  /* recessed well on dark */
  --on-dark:           #C4DBD1;  /* body text on dark */
  --on-dark-strong:    #FFFFFF;
  --on-dark-muted:     #8FA89D;  /* secondary and legal text on dark */
  --accent-light:      #6EE787;  /* light green, dark grounds only */

  /* CTA presence. Buttons must read as pressable objects at a glance. */
  --cta-shadow:       0 2px 0 #05611a, 0 6px 18px rgba(6,112,25,.34);
  --cta-shadow-hover: 0 3px 0 #05611a, 0 12px 28px rgba(6,112,25,.44);
  --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: 'OVO Circular', -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 { 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: #7fe08f; }

.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: #7fe08f; }
.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 #05611a, 0 3px 10px rgba(6,112,25,.3); }

.btn--dark { background: var(--forest-deep); color: #fff; box-shadow: 0 2px 0 #001710, 0 6px 16px rgba(0,38,28,.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 #b7d9c3, 0 6px 18px rgba(0,0,0,.22); }
.btn--onDark:hover { background: #eafff0; 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: 32px; 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; }

@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; }
  .hdr__cta { display: none; }
}

/* ---------- 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(10,152,40,.36) 0%, rgba(10,152,40,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; } }
.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: #eafff0; 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; }

.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; } }
.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: #d6ffe0; }
.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: #d6ffe0; font-size: .98rem; }
.result-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px,1fr)); gap: 14px; }
.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: #9A6100; }
.bar__off  { background: var(--forest); }
.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 { 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: 1.5fr 1fr 1fr 1fr; gap: 34px; }
@media (max-width: 800px) { .ftr__grid { grid-template-columns: 1fr 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; }
/* Width-driven with auto height: a fixed height plus the global max-width:100%
   squashes the lockup whenever the footer column is narrower than the logo. */
.ftr__logo img { width: 100%; max-width: 138px; height: 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; }
.section--dark .footnote { color: #7d968b; }

/* 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); }
.solaflow__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
@media (max-width: 900px) { .solaflow__grid { grid-template-columns: 1fr; } }
.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, #08811f 0%, #033D20 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: #d6ffe0; 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; 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 30px; }
.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: 24px; height: 24px; border-radius: 50%; background: var(--bg-mint);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .78rem; 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 .btn { flex-shrink: 0; padding-inline: 22px; min-height: 54px; }
@media (max-width: 460px) { .pcrow { flex-direction: column; } .pcrow .btn { width: 100%; } }

/* 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(84px, 10vw, 118px); height: auto; opacity: .95; pointer-events: none;
}
@media (max-width: 520px) { .mapstage__mark { width: 72px; 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: 26px; }
.fprog__track { height: 6px; background: var(--line-soft); border-radius: 3px; overflow: hidden; }
.fprog__track span { display: block; height: 100%; width: 0; background: var(--green-600); border-radius: 3px; transition: width .3s var(--ease); }
.fprog__label { margin: 10px 0 0; font-size: .82rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--green-700); }
.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; } }