/* Fonts: Red Hat Text and Red Hat Display (SIL Open Font License, see assets/fonts), served from this site so
   they load wherever the page does, with no request to Google. Latin subset only. */
@font-face { font-family: "Red Hat Text"; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/red-hat-text-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Red Hat Text"; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/red-hat-text-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Red Hat Text"; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/red-hat-text-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Red Hat Display"; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/red-hat-display-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Red Hat Display"; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/red-hat-display-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Red Hat Display"; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/red-hat-display-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root {
  --ink: #26282a;
  --ink-soft: #41464b;
  --line: #dde2e6;
  --line-strong: #bfc6cc;
  --sky: #eef3f6;
  --sky-deep: #dfe8ee;
  --paper: #ffffff;
  --sun-coral: #ec7a4a;
  --sun-amber: #f5b254;
  --sun-solid: #ec8b38;
  --sun-solid-hover: #e27a2b;
  --focus: #1f6fb2;
  --star: #b84c1c; /* review stars: a deeper coral that passes 4.5:1 on white and sky */

  --display: "Red Hat Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --text: "Red Hat Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --wrap: 1200px; /* 1,120px of content inside 40px padding (14 Oct 2026; was 1180px) */
  --gutter: clamp(20px, 4vw, 40px);
  --section: clamp(64px, 9vw, 120px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: 1.125rem;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--sun-coral); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3 { font-family: var(--display); color: var(--ink); margin: 0; }
h2 { font-size: clamp(1.9rem, 1.2rem + 2.4vw, 2.75rem); font-weight: 500; line-height: 1.12; letter-spacing: -0.012em; }
h3 { font-size: 1.3rem; font-weight: 600; line-height: 1.25; }
p { margin: 0; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--section) 0; }
.section--sky { background: var(--sky); }
.section-head { max-width: 40rem; margin-bottom: clamp(36px, 5vw, 56px); }
.section-head p { margin-top: 16px; color: var(--ink-soft); font-size: 1.125rem; }

.skip { position: absolute; left: -9999px; top: 8px; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 6px; z-index: 100; }
.skip:focus { left: 12px; }

/* Buttons */
.btn {
  white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 30px;
  font: 600 1.125rem/1 var(--text);
  color: var(--ink); background: var(--sun-solid);
  border: 0; border-radius: 6px; text-decoration: none; cursor: pointer;
  transition: background-color .15s ease;
}
.btn:hover { background: var(--sun-solid-hover); text-decoration: none; }
.btn--small { min-height: 44px; padding: 0 18px; font-size: 1rem; }
.link-quiet { color: var(--ink); font-weight: 500; }

/* Header */
/* Header and navigation: see the "Header and navigation" block at the end of this file. */

/* Hero (home page). One job: a quote request. Kept deliberately sparse, because choosing solar is a big decision
   and the first screen should feel simple: headline, one line, the rating, and a plain three-step form. */
.hero { padding: clamp(28px, 5vw, 72px) 0 0; background: linear-gradient(180deg, var(--paper) 0%, var(--paper) 45%, var(--sky) 100%); overflow: hidden; }
.hero h1 { display: flex; flex-direction: column; gap: 16px; }
.hero h1 .kicker { font-family: var(--text); font-size: 1.125rem; font-weight: 500; color: var(--ink-soft); letter-spacing: 0; line-height: 1.4; }
.hero h1 .display { font-size: clamp(2.4rem, 1.4rem + 3vw, 4rem); font-weight: 500; line-height: 1.04; letter-spacing: -0.024em; max-width: 14ch; }
.hero-lede { margin-top: 22px; font-size: clamp(1.1875rem, 1.1rem + .3vw, 1.3125rem); line-height: 1.5; color: var(--ink-soft); max-width: 30rem; }

.hero-form { position: relative; z-index: 1; overflow: hidden; border: 0; border-radius: 14px; padding: clamp(24px, 3vw, 36px);
  box-shadow: 0 1px 2px rgba(38, 40, 42, .06), 0 24px 48px -20px rgba(38, 40, 42, .28); }
.hero-form::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: linear-gradient(90deg, var(--sun-coral), var(--sun-amber)); }
.hero-form h2 { font-size: 1.75rem; line-height: 1.15; margin-bottom: 18px; }

/* The stepped quote form (quoteSteps in html.mjs). Without JavaScript all three steps show as one form. */
.qf-step { border: 0; margin: 0; padding: 0; min-width: 0; }
.qf-step + .qf-step { margin-top: 24px; }
.qf-step legend { padding: 0; margin-bottom: 14px; font: 600 1.1875rem/1.3 var(--text); color: var(--ink); }
.qf-choices { display: grid; gap: 10px; }
.qf-choice { position: relative; display: block; }
.qf-choice input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.qf-choice span { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 12px 18px;
  border: 1px solid var(--line-strong); border-radius: 10px; background: var(--paper); font-weight: 500; line-height: 1.3;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease; }
.qf-choice span::after { content: ""; flex: none; width: 8px; height: 8px; margin-right: 4px; border-right: 2px solid var(--ink-soft); border-bottom: 2px solid var(--ink-soft); transform: rotate(-45deg); }
.qf-choice:hover span { border-color: var(--ink); box-shadow: 0 2px 8px -4px rgba(38, 40, 42, .3); }
.qf-choice input:checked + span { border-color: var(--ink); background: var(--sky); box-shadow: inset 0 0 0 1px var(--ink); }
.qf-choice input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.qf-hint { margin: 8px 0 0; font-size: 1rem; color: var(--ink-soft); }
.qf-error { margin: 8px 0 0; font-size: 1rem; font-weight: 600; color: #b3261e; }
.qf-error:empty { display: none; }
.qf .field input[aria-invalid="true"] { border-color: #b3261e; box-shadow: inset 0 0 0 1px #b3261e; }
.qf .btn { width: 100%; }
.qf-submit { min-height: 58px; font-size: 1.1875rem; }
.qf-privacy { margin-top: 12px; font-size: 1rem; color: var(--ink-soft); }
.qf-foot { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--ink-soft); }
.qf-foot a { color: var(--ink); font-weight: 600; white-space: nowrap; }
.qf-progress, .qf-next, .qf-back { display: none; }
.js .qf-progress { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: -6px 0 18px; font-size: .9375rem; color: var(--ink-soft); }
.js .qf-next { display: inline-flex; margin-top: 18px; }
.js .qf-next--quiet { display: block; width: fit-content; margin: 12px 0 0 auto; padding: 8px 0; min-height: 44px; border: 0; background: none;
  color: var(--ink); font: 600 1rem var(--text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.js .qf-back { display: inline-block; margin-top: 8px; padding: 8px 0; border: 0; background: none; color: var(--ink-soft); font: 500 1rem var(--text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.js .qf .qf-step + .qf-step { margin-top: 0; }
.js .qf:not(.qf--ready) .qf-step:not([data-step="1"]) { display: none; }
.js .qf.qf--ready .qf-step:not(.is-current) { display: none; }
.qf-bar { display: flex; gap: 4px; flex: 0 0 96px; }
.qf-bar i { flex: 1; height: 4px; border-radius: 2px; background: var(--sky-deep); }
.qf:not([data-current]) .qf-bar i:first-child,
.qf[data-current="1"] .qf-bar i:nth-child(-n+1),
.qf[data-current="2"] .qf-bar i:nth-child(-n+2),
.qf[data-current="3"] .qf-bar i:nth-child(-n+3),
.qf[data-current="4"] .qf-bar i { background: linear-gradient(90deg, var(--sun-coral), var(--sun-amber)); }

/* Proof bar */
.proof { background: var(--sky); border-top: 1px solid var(--sky-deep); }
.proof ul { list-style: none; margin: 0; padding: 22px 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 32px; }
.proof li { display: flex; flex-direction: column; line-height: 1.35; padding-left: 16px; border-left: 2px solid var(--line-strong); }
.proof strong { font-family: var(--display); font-weight: 500; font-size: 1.1875rem; }
.proof span { color: var(--ink-soft); font-size: 1rem; }
.proof a { text-decoration: none; display: flex; flex-direction: column; }
.proof a:hover span { text-decoration: underline; }
.proof .stars { color: var(--star); letter-spacing: 1px; margin-left: 4px; font-size: .95rem; }

/* Promises */
.promises { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px); }
.promise h3 { margin-bottom: 12px; }
.promise > p { color: var(--ink-soft); }
.promise blockquote { margin: 22px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); }
.promise blockquote p { font-family: var(--display); font-size: 1.15rem; line-height: 1.45; color: var(--ink); }
.promise cite, .job cite { display: block; margin-top: 10px; font-style: normal; font-size: 1rem; color: var(--ink-soft); }

/* Services */
.services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 5vw, 72px); }
.service { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 20px; padding: 30px 0; border-top: 1px solid var(--line); }
.service svg { grid-row: span 3; width: 40px; height: 40px; stroke: var(--ink); stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; margin-top: 2px; }
.service svg .warm { stroke: var(--sun-coral); }
.service p { color: var(--ink-soft); margin-top: 6px; }
.service a { margin-top: 12px; font-weight: 600; justify-self: start; }

/* Steps */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px clamp(28px, 4vw, 56px); counter-reset: step; }
.step { position: relative; padding-top: 70px; counter-increment: step; }
.step::before {
  content: counter(step);
  position: absolute; top: 0; left: 0; width: 50px; height: 50px; border-radius: 50%;
  display: grid; place-items: center;
  font: 500 1.25rem/1 var(--display); color: var(--ink);
  border: 5px solid transparent;
  background: linear-gradient(var(--paper), var(--paper)) padding-box, linear-gradient(225deg, var(--sun-coral), var(--sun-amber)) border-box;
}
.step h3 { margin-bottom: 8px; }
.step p { color: var(--ink-soft); }

/* Jobs */
.jobs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 48px) clamp(32px, 5vw, 72px); }
.job { padding-top: 22px; border-top: 2px solid var(--ink); }
.job h3 { font-size: 1.2rem; }
.job blockquote { margin: 14px 0 0; }
.job blockquote p { font-family: var(--display); font-size: 1.3rem; line-height: 1.42; font-weight: 400; }
.jobs--photos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.job--photo { border-top: 0; padding-top: 0; }
.job-photo { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 6px; margin-bottom: 18px; background: var(--line); }
.photo-figure { margin: 28px 0 0; }
.split-side { display: grid; gap: 28px; align-content: start; }
.split-side .photo-figure { margin: 0; }
.jobs--after { margin-top: clamp(36px, 5vw, 56px); }
.photo-figure img { display: block; width: 100%; max-width: 30rem; height: auto; border-radius: 6px; background: var(--line); }
.photo-figure figcaption { margin-top: 10px; font-size: 1rem; color: var(--ink-soft); max-width: 30rem; }
.ratings-line { margin-top: clamp(40px, 5vw, 56px); display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: baseline; }
.ratings-line p { font-size: 1.125rem; }
.ratings-line a { font-weight: 600; }

/* Prices */
.prices { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(36px, 6vw, 96px); align-items: start; }
.price-figure { font-family: var(--display); font-weight: 500; font-size: clamp(3.4rem, 2rem + 5vw, 5.5rem); line-height: 1; letter-spacing: -0.03em; margin: 22px 0 18px; }
.price-figure small { display: block; font: 500 1.125rem/1.4 var(--text); letter-spacing: 0; color: var(--ink-soft); margin-bottom: 8px; }
.prices .lede { color: var(--ink-soft); font-size: 1.125rem; max-width: 30rem; margin-bottom: 28px; }
.warranties { margin: 0; border-top: 1px solid var(--line); }
.warranties div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.warranties dt { font-weight: 600; }
.warranties dd { margin: 0; color: var(--ink-soft); }
.referral { margin-top: 30px; padding: 22px 24px; background: var(--sky); border-radius: 8px; }
.referral p + p { margin-top: 6px; color: var(--ink-soft); }
.referral a { font-weight: 600; }

/* Home page: skimming aids (11 Oct 2026). Key facts in the hero, one dark band for prices, grouped FAQs. */

.key-figures--three .key-figures { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.cta-row { margin-top: clamp(36px, 5vw, 52px); display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.cta-row p { color: var(--ink-soft); }
.cta-row p a { color: var(--ink); font-weight: 600; white-space: nowrap; }

.prices .more-link { margin-bottom: 22px; }

.section--ink { background: var(--ink); color: #fff; }
.section--ink h2, .section--ink h3, .section--ink .price-figure { color: #fff; }
.section--ink .price-figure small, .section--ink .prices .lede, .section--ink p { color: #c9ced3; }
.section--ink .price-figure { background: linear-gradient(90deg, var(--sun-amber), #fff 60%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.section--ink a:not(.btn) { color: #fff; }
.section--ink .warranties, .section--ink .warranties div { border-color: rgba(255, 255, 255, .18); }
.section--ink .warranties dt { color: #fff; }
.section--ink .warranties dd { color: #c9ced3; }
.section--ink .referral { background: rgba(255, 255, 255, .07); }
.section--ink .referral strong { color: #fff; }
.section--ink .referral p + p { color: #c9ced3; }
.services:has(> .service:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.section--ink :focus-visible { outline-color: var(--sun-amber); }

.faq-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(36px, 4vw, 48px) clamp(32px, 5vw, 64px); }
.faq-group h3 { font-size: 1.2rem; margin-bottom: 14px; }
.faq-group .faq { max-width: none; }

@media (max-width: 900px) {
  .key-figures--three .key-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faq-groups { grid-template-columns: minmax(0, 1fr); }
  .services:has(> .service:nth-child(3):last-child) { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .key-figures--three .key-figures { grid-template-columns: minmax(0, 1fr); }
}

/* Team */
.team { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px); }
.person .ring {
  width: 96px; height: 96px; border-radius: 50%; margin-bottom: 22px;
  display: grid; place-items: center; font: 400 2rem/1 var(--display); color: var(--ink);
  border: 8px solid transparent;
  background: linear-gradient(var(--paper), var(--paper)) padding-box, linear-gradient(225deg, var(--sun-coral), var(--sun-amber)) border-box;
}
/* A photo sits inside the same sun ring as the initials. The name is right beside it, so the image has empty alt text. */
.person .ring--photo { overflow: hidden; }
.person .ring--photo img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.person .role { color: var(--ink-soft); font-size: 1rem; margin-top: 2px; }
.person p:last-child { margin-top: 12px; color: var(--ink-soft); }

/* Areas */
.areas { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(36px, 6vw, 96px); }
.areas > div > p { color: var(--ink-soft); font-size: 1.125rem; margin-top: 16px; max-width: 34rem; }
.towns { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.towns a { display: inline-block; padding: 9px 16px; border: 1px solid var(--line-strong); border-radius: 999px; text-decoration: none; font-weight: 500; }
.towns a:hover { border-color: var(--sun-coral); }
.address-card { border-top: 2px solid var(--ink); padding-top: 22px; }
.address-card address { font-style: normal; margin-top: 10px; }
.address-card dl { margin: 18px 0 0; display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 8px 16px; }
.address-card dt { color: var(--ink-soft); }
.address-card dd { margin: 0; }
.address-card .directions { display: inline-block; margin-top: 20px; font-weight: 600; }
.map-embed { margin-top: 24px; aspect-ratio: 4 / 3; border: 1px solid var(--line, #ddd); }
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }

/* FAQ */
.faq { max-width: 48rem; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; padding: 22px 44px 22px 0; position: relative;
  font: 500 1.2rem/1.35 var(--display);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 14px; height: 14px; margin-top: -10px;
  border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg); transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.faq details p { padding: 0 0 24px; color: var(--ink-soft); max-width: 42rem; }

/* Book */
.book { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(36px, 6vw, 96px); align-items: start; }
.book-intro p { margin-top: 16px; color: var(--ink-soft); font-size: 1.125rem; max-width: 30rem; }
.book-intro .call-line { margin-top: 28px; color: var(--ink); }
.book-intro .call-line a { font-weight: 600; }
.sunset { margin-top: 36px; width: 220px; }
.form { background: var(--paper); border-radius: 10px; padding: clamp(24px, 4vw, 40px); border: 1px solid var(--sky-deep); }
.field { margin-bottom: 20px; }
.field label, .field legend { display: block; font-weight: 600; margin-bottom: 8px; }
.field input, .field select {
  width: 100%; min-height: 52px; padding: 12px 14px;
  font: 400 1.125rem/1.3 var(--text); color: var(--ink);
  background: var(--paper); border: 1px solid var(--line-strong); border-radius: 6px;
}
.field input:focus-visible, .field select:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--focus); }
.field-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.form .btn { width: 100%; margin-top: 6px; }
.form .small { margin-top: 14px; font-size: 1rem; color: var(--ink-soft); }
.form-status { margin-top: 14px; padding: 14px 16px; border-radius: 6px; background: var(--sky); font-size: 1rem; }
.form-status[hidden] { display: none; }

/* Footer */
.site-footer { border-top: 1px solid var(--line); padding: 56px 0 40px; font-size: 1rem; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2.5fr)); gap: 36px; }
.site-footer img { width: 164px; height: auto; margin-bottom: 18px; }
.site-footer address { font-style: normal; color: var(--ink-soft); }
.site-footer h2 { font: 600 1rem/1.4 var(--text); margin-bottom: 12px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.site-footer a { color: var(--ink); }
.footer-base { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--ink-soft); display: flex; flex-wrap: wrap; gap: 8px 28px; }

/* Responsive */
@media (max-width: 900px) {
  .hero h1 .kicker { font-size: 1rem; }
  .proof ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .promises, .team { grid-template-columns: minmax(0, 1fr); }
  .services, .jobs { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prices, .areas, .book { grid-template-columns: minmax(0, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid > :first-child { grid-column: 1 / -1; }
  .person { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 0 18px; }
  .person .ring { width: 80px; height: 80px; font-size: 1.6rem; grid-row: span 3; margin: 0; border-width: 7px; }
  .person p:last-child { grid-column: 2; }
}
@media (max-width: 560px) {
  body { font-size: 1.03rem; }
  .steps { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .step { padding-top: 0; padding-left: 68px; min-height: 50px; }
  .proof ul { gap: 14px 18px; }
  .warranties div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .field-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .address-card dl { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .address-card dd { margin-bottom: 8px; }
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------- Inner pages (added for the full site) ---------- */

.page-hero { position: relative; padding: clamp(28px, 4vw, 56px) 0 clamp(44px, 6vw, 76px); background: linear-gradient(180deg, var(--paper) 0%, var(--paper) 45%, var(--sky) 100%); border-bottom: 1.5px solid var(--line-strong); overflow: hidden; }
.page-hero .wrap { position: relative; }
.crumbs ol { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: 1rem; color: var(--ink-soft); }
.crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--line-strong); }
.crumbs a { color: var(--ink-soft); }
.page-hero h1 { display: flex; flex-direction: column; gap: 14px; max-width: 46rem; position: relative; z-index: 1; }
.page-hero h1 .kicker { font-family: var(--text); font-size: 1.125rem; font-weight: 500; color: var(--ink-soft); line-height: 1.4; }
.page-hero h1 .display { font-size: clamp(2.4rem, 1.5rem + 3.2vw, 4rem); font-weight: 500; line-height: 1.05; letter-spacing: -0.02em; }
.page-lede { margin-top: 22px; font-size: 1.1875rem; line-height: 1.55; color: var(--ink-soft); max-width: 40rem; position: relative; z-index: 1; }
.page-lede a { color: var(--ink); font-weight: 600; }
.page-actions { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; position: relative; z-index: 1; }
.page-actions .call { display: flex; flex-direction: column; line-height: 1.3; }
.page-actions .call a { font-weight: 600; font-size: 1.125rem; text-decoration: none; }
.page-actions .call a:hover { text-decoration: underline; }
.page-actions .call span { color: var(--ink-soft); font-size: 1rem; }
.page-sun { position: absolute; right: var(--gutter); bottom: calc(-1 * clamp(44px, 6vw, 76px)); width: clamp(170px, 22vw, 270px); height: auto; }

.prose { max-width: 44rem; }
.prose h2 { margin-bottom: 16px; }
.prose h3 { margin: 26px 0 8px; font-size: 1.2rem; }
.prose p { color: var(--ink-soft); }
.prose p + p { margin-top: 14px; }
.prose a { color: var(--ink); font-weight: 500; }
.ticks { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 10px; }
.ticks li { position: relative; padding-left: 30px; color: var(--ink); }
.ticks li::before { content: ""; position: absolute; left: 1px; top: .38em; width: 16px; height: 16px; border-radius: 50%; border: 3.5px solid transparent; background: linear-gradient(var(--paper), var(--paper)) padding-box, linear-gradient(225deg, var(--sun-coral), var(--sun-amber)) border-box; }
.prose .ticks + p { margin-top: 18px; }

.split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.fact-card { background: var(--sky); border-radius: 10px; padding: clamp(22px, 3vw, 30px); }
.section--sky .fact-card { background: var(--paper); }
.fact-card .price-figure { margin: 0 0 14px; font-size: clamp(2.6rem, 1.8rem + 2.6vw, 3.6rem); }
.fact-card p { color: var(--ink-soft); }
.fact-card .btn { margin-top: 20px; }
.fact-card .fact-title { font-family: var(--display); font-size: 1.3rem; color: var(--ink); margin-bottom: 8px; }
.facts { margin: 12px 0 0; display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 10px 14px; }
.facts dt { color: var(--ink-soft); }
.facts dd { margin: 0; }
.more-link { margin-top: 22px; }
.more-link a { font-weight: 600; }

.quote-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 48px); }
.quote { margin: 0; padding-top: 18px; border-top: 2px solid var(--ink); }
.quote p { font-family: var(--display); font-size: 1.2rem; line-height: 1.45; }
.quote cite { display: block; margin-top: 10px; font-style: normal; font-size: 1rem; color: var(--ink-soft); }

.rating-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 760px; }
.rating-card { display: flex; flex-direction: column; gap: 4px; padding: 28px; border: 1px solid var(--line-strong); border-radius: 10px; text-decoration: none; }
.rating-card .score { font-family: var(--display); font-weight: 400; font-size: 3.4rem; line-height: 1; }
.rating-card .stars { color: var(--star); letter-spacing: 2px; }
.rating-card .go { margin-top: 10px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.rating-card:hover { border-color: var(--sun-coral); }
.as-of { margin-top: 14px; color: var(--ink-soft); font-size: 1rem; }

.area-groups { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px clamp(24px, 4vw, 48px); }
.area-group h3 { font-size: 1.15rem; padding-bottom: 10px; border-bottom: 2px solid var(--ink); margin-bottom: 4px; }
.area-group ul { list-style: none; margin: 0; padding: 0; }
.area-group li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.area-group a { font-weight: 500; }
.area-group span { color: var(--ink-soft); font-size: 1rem; white-space: nowrap; }

.steps--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.quote-layout { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.quote-layout .hero-form { grid-column: auto; grid-row: auto; align-self: start; }
.page-hero--form .page-lede { max-width: 34rem; }
.page-hero--form .call { margin-top: 24px; color: var(--ink-soft); }
.page-hero--form .call a { color: var(--ink); font-weight: 600; }

.notice { border-left: 3px solid var(--sun-solid); padding-left: 22px; }
.small-print { margin-top: 28px; color: var(--ink-soft); font-size: 1rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.footer-grid { grid-template-columns: minmax(0, 3.2fr) repeat(4, minmax(0, 2fr)); }

@media (max-width: 1100px) {
  .area-groups { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .split, .quote-layout { grid-template-columns: minmax(0, 1fr); }
  .quote-list { grid-template-columns: minmax(0, 1fr); }
  .steps--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .area-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quote-layout .hero-form { margin-top: 8px; }
}
@media (max-width: 700px) { .page-sun { display: none; } }
@media (max-width: 560px) {
  .steps--four { grid-template-columns: minmax(0, 1fr); }
  .area-groups, .rating-cards { grid-template-columns: minmax(0, 1fr); }
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Hand-written content pages (prices, guides, areas) ---------- */
.guide-meta { margin-top: 16px; color: var(--ink-soft); font-size: 1rem; position: relative; z-index: 1; }
.prose .intro { font-size: 1.125rem; }
.prose ul:not(.ticks):not(.towns), .prose ol:not(.sources):not(.numbered) { color: var(--ink-soft); padding-left: 1.2em; margin: 14px 0 0; display: grid; gap: 8px; }
.prose ul:not(.ticks) li::marker { color: var(--sun-coral); }
.prose h2 + .intro { margin-top: 0; }
.prose strong { color: var(--ink); font-weight: 600; }

.data-table-wrap { overflow-x: auto; margin: 24px 0 0; -webkit-overflow-scrolling: touch; }
.data-table-wrap:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.data-table { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: 1rem; line-height: 1.45; }
.data-table caption { text-align: left; color: var(--ink-soft); font-size: 1rem; padding-bottom: 12px; }
.data-table th, .data-table td { text-align: left; vertical-align: top; padding: 12px 16px 12px 0; border-bottom: 1px solid var(--line); }
.data-table thead th { border-bottom: 2px solid var(--ink); font-weight: 600; font-size: 1rem; }
.data-table tbody th { font-weight: 500; color: var(--ink); }
.data-table td { color: var(--ink-soft); }
.table-note { margin-top: 12px !important; font-size: 1rem; }
.section--sky .data-table th, .section--sky .data-table td { border-bottom-color: var(--sky-deep); }

.key-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 24px clamp(24px, 3vw, 40px); margin-top: 28px; }
.key-figure { border-top: 2px solid var(--ink); padding-top: 16px; }
.key-figure strong { display: block; font: 500 clamp(2rem, 1.6rem + 1.2vw, 2.6rem)/1.1 var(--display); letter-spacing: -0.02em; color: var(--ink); }
.key-figure span { display: block; margin-top: 8px; color: var(--ink); }
.key-figure small { display: block; margin-top: 6px; color: var(--ink-soft); font-size: .9375rem; }

.prose .notice { margin-top: 22px; }
.notice p { color: var(--ink); }

.numbered { list-style: none; counter-reset: n; padding: 0; margin: 18px 0 0; display: grid; gap: 16px; }
.numbered li { counter-increment: n; position: relative; padding-left: 46px; color: var(--ink-soft); }
.numbered li::before { content: counter(n); position: absolute; left: 0; top: -2px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font: 500 1rem/1 var(--display); color: var(--ink); background: linear-gradient(var(--paper), var(--paper)) padding-box, linear-gradient(225deg, var(--sun-coral), var(--sun-amber)) border-box; border: 3px solid transparent; }
.section--sky .numbered li::before { background: linear-gradient(var(--sky), var(--sky)) padding-box, linear-gradient(225deg, var(--sun-coral), var(--sun-amber)) border-box; }
.numbered strong { color: var(--ink); font-weight: 600; }

.toc { margin-top: 0; padding: 20px 24px; background: var(--sky); border-radius: 10px; max-width: 44rem; }
.toc p { font-weight: 600; margin: 0 0 8px; }
.toc ol { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }
.toc a { color: var(--ink); }

.related { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0 clamp(24px, 4vw, 48px); }
.related li { display: flex; flex-direction: column; gap: 4px; padding: 18px 0; border-top: 1px solid var(--line-strong); }
.related a { font: 500 1.15rem/1.35 var(--display); color: var(--ink); }
.related span { color: var(--ink-soft); font-size: 1rem; }

.sources-section { padding-top: clamp(40px, 6vw, 72px); padding-bottom: clamp(40px, 6vw, 72px); }
.sources-section h2 { font-size: 1.4rem; }
.sources { margin: 14px 0 0; padding-left: 1.3em; display: grid; gap: 8px; font-size: 1rem; color: var(--ink-soft); }
.sources a { font-weight: 400; overflow-wrap: anywhere; }
/* Sources folded away on sales pages (14 Oct 2026): a closed <details>, styled like an FAQ row. */
.sources-section--folded { padding-top: clamp(28px, 4vw, 44px); padding-bottom: clamp(28px, 4vw, 44px); }
.sources-fold { border-block: 1px solid var(--line); }
.sources-fold summary { list-style: none; cursor: pointer; position: relative; display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 4px 16px; padding: 18px 44px 18px 0; }
.sources-fold summary::-webkit-details-marker { display: none; }
.sources-fold summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 12px; height: 12px; margin-top: -9px;
  border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg); transition: transform .2s ease; }
.sources-fold[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.sources-fold summary h2 { margin: 0; font-size: 1.25rem; }
.sources-fold summary span { font-size: .9375rem; color: var(--ink-soft); }
.sources-fold summary:hover h2 { text-decoration: underline; text-decoration-color: var(--sun-coral); text-underline-offset: 4px; }
.sources-fold > p { margin-top: 4px; }
.sources-fold > .sources { margin-bottom: 22px; }

.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); margin-top: 24px; }
.two-col h3 { margin-top: 0 !important; }
.two-col > div { border-top: 2px solid var(--ink); padding-top: 18px; }

.region-towns { margin-top: 28px; }
.draft-banner { background: #fff1e4; border-bottom: 2px solid var(--sun-solid); padding: 14px 0; font-weight: 600; }

@media (max-width: 800px) {
  .two-col { grid-template-columns: minmax(0, 1fr); }
}
.quote-list--single { grid-template-columns: minmax(0, 1fr); margin-top: 26px; max-width: 40rem; }
.services-note, .numbers-note { margin-top: clamp(32px, 4vw, 48px); }
.quote-list--two { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 32px; }
@media (max-width: 900px) { .quote-list--two { grid-template-columns: minmax(0, 1fr); } }
.place-list { list-style: none; margin: 18px 0 0; padding: 0; max-width: 44rem; border-top: 1px solid var(--line); }
.place-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.place-list a, .place-list .place { font-weight: 500; color: var(--ink); }
.place-list .miles { color: var(--ink-soft); font-size: 1rem; white-space: nowrap; }
.place-list .note { grid-column: 1 / -1; color: var(--ink-soft); font-size: 1rem; }
.section--sky .place-list, .section--sky .place-list li { border-color: var(--sky-deep); }

.home-guides-title { margin: clamp(40px, 6vw, 64px) 0 4px; font: 400 1.5rem/1.25 var(--display); }

/* ---------- Header and navigation (rethought 11 Oct 2026) ----------
   Desktop (1120px and up): a slim proof bar, then logo, the main nav and the quote button. Panels drop down
   full width under the header. Below 1120px: logo, phone, quote button and Menu, with the nav in a full-height
   panel of accordions and the quote and call buttons at the bottom. The header stays on screen as you scroll. */
html { scroll-padding-top: 124px; }
.site-header { position: sticky; top: 0; z-index: 50; background: var(--paper); }

.topbar { background: var(--sky); border-bottom: 1px solid var(--line); font-size: .9375rem; color: var(--ink-soft); }
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 36px; }
.topbar p { margin: 0; display: flex; align-items: center; gap: 22px; white-space: nowrap; }
.topbar a { color: var(--ink); text-decoration: none; }
.topbar a:hover { text-decoration: underline; text-decoration-color: var(--sun-coral); }
.topbar .stars { color: var(--star); letter-spacing: 1px; margin-right: 4px; }
.topbar-proof > * + *::before { content: ""; display: inline-block; width: 4px; height: 4px; margin: 0 14px 2px 0; border-radius: 50%; background: var(--sun-amber); vertical-align: middle; }
.topbar .topbar-proof { gap: 14px; }
.topbar-phone { font-weight: 600; }

.mainbar { border-bottom: 1px solid var(--line); background: rgba(255,255,255,.97); }
.mainbar .wrap { display: flex; align-items: stretch; gap: 24px; min-height: 72px; }
.brand { display: flex; align-items: center; flex: none; }
.brand img { width: 200px; height: auto; }

.nav { display: flex; align-items: stretch; flex: 1 1 auto; }
.nav-list { list-style: none; margin: 0; padding: 0; display: flex; align-items: stretch; gap: 2px; }
.nav-item { display: flex; align-items: center; }
.nav-top { display: flex; align-items: center; height: 100%; padding: 0 2px 0 10px; font-weight: 500; color: var(--ink); text-decoration: none; white-space: nowrap; }
.nav-item:not(.has-panel) .nav-top { padding: 0 10px; }
.nav-item:hover > .nav-top, .nav-item.is-open > .nav-top { text-decoration: underline; text-decoration-color: var(--sun-coral); text-underline-offset: 6px; }
.nav-item.is-here > .nav-top { box-shadow: inset 0 -3px 0 var(--sun-coral); }
.nav-toggle { display: flex; align-items: center; justify-content: center; width: 26px; height: 32px; margin-right: 6px; padding: 0; background: none; border: 0; border-radius: 4px; color: var(--ink-soft); cursor: pointer; }
.nav-toggle:hover { color: var(--ink); }
.nav-toggle svg { flex: none; transition: transform .15s ease; }
.nav-item.is-open .nav-toggle svg { transform: rotate(180deg); }

.nav-panel { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: 0 22px 40px rgba(38, 40, 42, .10); }
.nav-item.is-open > .nav-panel { display: block; }
.nav-panel-inner { max-width: var(--wrap); margin: 0 auto; padding: 30px var(--gutter) 34px; display: flex; gap: clamp(28px, 4vw, 56px); }
.nav-group { flex: 1 1 0; min-width: 0; }
.nav-group-title { margin: 0 0 12px; font-size: .875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.nav-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.nav-group--cols ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
.nav-group li { position: relative; margin: 0 -10px; padding: 7px 10px; border-radius: 8px; }
.nav-group li.has-note { padding: 9px 10px; }
.nav-group li:hover, .nav-group li.is-current { background: var(--sky); }
.nav-group li a { display: block; color: var(--ink); text-decoration: none; }
.nav-group li.has-note a { font-weight: 600; }
.nav-group li a::after { content: ""; position: absolute; inset: 0; border-radius: 8px; }
.nav-link-note { display: block; margin-top: 2px; font-size: 1rem; color: var(--ink-soft); }
.nav-more { margin: 10px 0 0; }
.nav-more a { font-weight: 600; text-decoration: underline; text-decoration-color: var(--sun-coral); text-underline-offset: 4px; }
.nav-promo { flex: 0 0 280px; align-self: flex-start; padding: 22px 24px; background: var(--sky); border-radius: 12px; }
.nav-promo .nav-promo-title { margin: 0 0 6px; font: 500 1.25rem/1.2 var(--display); color: var(--ink); }
.nav-promo p { margin: 0 0 16px; font-size: 1rem; color: var(--ink-soft); }
.nav-promo .btn { width: 100%; }
.nav-promo .nav-promo-call { margin: 12px 0 0; text-align: center; }
.nav-promo-call a { color: var(--ink); font-weight: 600; }

.header-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; flex: none; }
.header-phone { display: none; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; color: var(--ink); text-decoration: none; white-space: nowrap; }
.cta-short { display: none; }
.menu-toggle, .nav-mobile-extra { display: none; }

@media (min-width: 1120px) {
  .nav-toggle-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  /* Without JavaScript, panels open on hover and keyboard focus. */
  html:not(.js) .nav-item:hover > .nav-panel, html:not(.js) .nav-item:focus-within > .nav-panel { display: block; }
}
@media (min-width: 1120px) and (max-width: 1239px) {
  .mainbar .wrap { gap: 16px; }
  .brand img { width: 174px; }
  .nav-top { padding-left: 8px; font-size: .96875rem; }
  .nav-item:not(.has-panel) .nav-top { padding: 0 8px; }
  .topbar-proof span:last-child { display: none; }
}
/* 14 Oct 2026: with Commercial solar in the main bar, the full button label only fits from 1,200px. Between 1,120 and
   1,199px the header button says "Free Quote", as on phones. */
@media (min-width: 1120px) and (max-width: 1199px) {
  .header-cta .cta-long { display: none; }
  .header-cta .cta-short { display: inline; }
}

@media (max-width: 1119px) {
  html { scroll-padding-top: 80px; }
  .topbar { display: none; }
  .mainbar .wrap { align-items: center; gap: 12px; min-height: 64px; }
  .brand img { width: 174px; }
  .header-phone { display: inline-flex; }
  .menu-toggle {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 12px;
    background: var(--paper); border: 1px solid var(--line-strong); border-radius: 8px; color: var(--ink);
    font: 600 1rem/1 var(--text); cursor: pointer;
  }
  .menu-icon-close { display: none; }
  .menu-toggle[aria-expanded="true"] .menu-icon-open { display: none; }
  .menu-toggle[aria-expanded="true"] .menu-icon-close { display: inline; }

  .nav {
    display: none; position: fixed; left: 0; right: 0; top: var(--header-h, 65px); bottom: 0; z-index: 49;
    flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
    padding: 4px var(--gutter) 32px; background: var(--paper); border-top: 1px solid var(--line);
  }
  .nav.is-open { display: flex; }
  .nav-list { flex-direction: column; gap: 0; }
  .nav-item { flex-direction: column; align-items: stretch; border-bottom: 1px solid var(--line); }
  .has-panel > .nav-top { display: none; }
  .nav-top, .nav-item:not(.has-panel) .nav-top { height: auto; padding: 16px 0; font-size: 1.125rem; }
  .nav-item.is-here > .nav-top { box-shadow: none; text-decoration: underline; text-decoration-color: var(--sun-coral); text-decoration-thickness: 2px; text-underline-offset: 6px; }
  .nav-toggle { width: 100%; height: auto; min-height: 56px; margin: 0; justify-content: space-between; padding: 16px 0; color: var(--ink); font: 500 1.125rem/1.3 var(--text); }
  .nav-toggle svg { width: 16px; height: 16px; }
  .nav-panel { position: static; box-shadow: none; border: 0; }
  .nav-panel-inner { display: block; max-width: none; padding: 0 0 18px; }
  .nav-group + .nav-group { margin-top: 18px; }
  .nav-group li, .nav-group li.has-note { margin: 0; padding: 11px 12px; }
  .nav-link-note { display: none; }
  .nav-group li.has-note a { font-weight: 500; }
  .nav-more { margin-top: 6px; }
  .nav-more a { padding: 11px 12px; }
  .nav-promo { display: none; }
  .nav-mobile-extra { display: block; margin-top: 12px; }
  .nav-secondary { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-wrap: wrap; gap: 0 22px; }
  .nav-secondary a { display: inline-block; padding: 10px 0; color: var(--ink-soft); }
  .nav-mobile-cta { display: grid; gap: 10px; }
  .nav-mobile-cta p { margin: 4px 0 0; text-align: center; font-size: 1rem; color: var(--ink-soft); }
  .btn--ghost { background: var(--paper); border: 1.5px solid var(--ink); color: var(--ink); }
  .btn--ghost:hover { background: var(--sky); }
  body.menu-open { overflow: hidden; }
}
@media (max-width: 640px) {
  .brand img { width: 128px; }
  .mainbar .wrap, .header-actions { gap: 8px; }
  .header-phone { justify-content: center; width: 44px; border: 1px solid var(--line-strong); border-radius: 8px; }
  .header-phone span { display: none; }
  .header-cta { padding: 0 14px; }
  .menu-toggle { width: 44px; padding: 0; }
  .menu-toggle-label { display: none; }
}
@media (max-width: 359px) {
  .brand img { width: 108px; }
  .header-cta { padding: 0 10px; font-size: .9375rem; }
  /* The smallest phones: the call button goes, so the header fits. The number is still in the menu and the hero. */
  .header-phone { display: none !important; }
}
/* The header button says "Get My Free Solar Quote" (14 Oct 2026, James). It doesn't fit beside the logo, call and
   menu buttons below 720px, so phones and small tablets show "Free Quote"; the menu's own button has the full words. */
@media (max-width: 719px) {
  .cta-long { display: none; }
  .cta-short { display: inline; }
}
/* Keyboard focus outlines the whole menu row, not just the link text. */
.nav-group li:has(a:focus-visible) { outline: 3px solid var(--focus); outline-offset: 0; }
.nav-group li a:focus-visible { outline: none; }

/* Home page: design pass after review (11 Oct 2026). Job details on photo cards, the sun-path diagram. */
.job-meta { margin: -4px 0 6px; font-size: 1rem; font-weight: 600; color: var(--ink-soft); }
.sun-path { margin: 0; background: var(--paper); border-radius: 10px; padding: clamp(16px, 2.5vw, 28px); }
.sun-path svg { width: 100%; height: auto; max-width: 520px; margin: 0 auto; overflow: visible; }
.sp-arc { fill: none; stroke: #8a9096; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 1 9; }
.sp-compass line { stroke: var(--ink); stroke-width: 2; }
.sp-compass path { fill: var(--ink); }
.sp-compass text, .sp-face-label { font: 600 22px var(--text); fill: var(--ink); }
.sp-face { stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; }
.sp-south { fill: url(#spSouth); }
.sp-ew, .swatch--ew { fill: #fbdcb2; background: #fbdcb2; }
.sp-north, .swatch--north { fill: #dfe5ea; background: #dfe5ea; }
.sp-panel { fill: #2b333c; stroke: #fff; stroke-width: .6; }
.sp-label { font: 400 21px var(--text); fill: var(--ink-soft); }
.sp-time { font-weight: 600; fill: var(--ink); }
.sun-key { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; }
.sun-key li { display: flex; align-items: flex-start; gap: 12px; line-height: 1.4; }
.sun-key strong { font-weight: 600; }
.swatch { flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 4px; border: 1.5px solid var(--ink); }
.swatch--south { background: linear-gradient(180deg, var(--sun-amber), var(--sun-coral)); }
.sun-path figcaption { margin-top: 14px; font-size: 1rem; line-height: 1.5; color: var(--ink-soft); }
@media (max-width: 560px) {
  .sun-path { padding: 14px 12px 18px; }
  .sp-label { font-size: 27px; }
  .sp-compass text, .sp-face-label { font-size: 28px; }
}
@media (max-width: 560px) {
  .hero-form h2 { font-size: 1.5rem; }
  .qf-choices { gap: 8px; }
  .qf-choice span { min-height: 52px; padding: 10px 14px; }
}

/* ---------- Home page, simplified (11 Oct 2026, 4pm) ----------
   Same words and headings as before (they carry the SEO score); only the presentation is calmer. Related sections
   share one background, so the page reads as a few chapters rather than eleven stripes. Hairlines, boxes and big
   rings are gone: white space does the separating. One quote style, one link style, one button per section. */
.section--join { padding-top: 0; }
.page-home .section-head { margin-bottom: clamp(32px, 4vw, 48px); }

/* The quote mark the home page's customer quotes use (a mask, so it takes the coral). */
.page-home { --quote-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 24'%3E%3Cpath d='M0 24V13.5C0 6 4.2 1.4 12.5 0l1.3 3.2C9 4.6 6.7 7.4 6.6 11.5H12V24H0zm18 0V13.5C18 6 22.2 1.4 30.5 0l1.3 3.2C27 4.6 24.7 7.4 24.6 11.5H30V24H18z'/%3E%3C/svg%3E"); }

/* Installs: Patrick's line leads, then three photo cards with the same quiet quote style. */
.quote-list--lead { display: block; margin-top: 18px; }
.quote-list--lead .quote { padding: 0; border: 0; }
.quote-list--lead .quote p { font-family: var(--display); font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); line-height: 1.4; color: var(--ink); max-width: 36rem; }
.page-home .jobs--photos { gap: clamp(28px, 4vw, 48px); }
.page-home .job blockquote { margin-top: 10px; }
.page-home .job blockquote p { font-family: var(--text); font-size: 1.0625rem; line-height: 1.55; }
.page-home .job h3 { font-size: 1.125rem; }


/* How it works: a small coral number beside each step instead of six big rings. */
.page-home .steps { gap: 36px clamp(28px, 4vw, 56px); }
.page-home .step { padding: 0; min-height: 0; }
.page-home .step::before { position: static; display: block; width: auto; height: auto; margin-bottom: 8px; border: 0; background: none;
  font: 600 1rem/1 var(--text); color: var(--star); content: "Step " counter(step); }

/* Prices: the referral offer as a plain line, not a box. */
.page-home .referral, .page-home .section--ink .referral { margin-top: 28px; padding: 0; background: none; border-radius: 0; }

/* ---------- Home: "Will solar panels pay for themselves?" (12 Oct 2026, 1am) ----------
   The question people have once they've seen the prices. The heading asks it, the line under it answers. In the sky
   card: payback first and largest, then the panels' life as a strip (one block a year to 25 years +, dark until the
   payback window and sunny after it), then what pays it back (bill savings, plus export payments), then the cost and
   carbon as background in small type. Below: how panels make the savings, and a button to the quote form. Each
   figure has a label, then the number and the words that finish it, then "Source: ...". Plain divs and spans rather
   than lists: with lists, Surfer's AI Search read 70 instead of 73. The strip is hidden from screen readers (it
   repeats figures already given). */
.pay { --pay-gap: clamp(48px, 6vw, 88px); padding: clamp(24px, 3.6vw, 52px); border-radius: 18px; background: var(--sky); }
.nums-label { display: block; margin: 0 0 6px; font-weight: 600; font-size: .9375rem; line-height: 1.3; color: var(--star); }
.nums-fig { position: relative; display: block; margin: 0; font: 500 clamp(1.75rem, .9rem + 1.8vw, 2.25rem)/1.1 var(--display); letter-spacing: -0.02em; color: var(--ink); }
.nums-text { display: block; margin-top: 10px; color: var(--ink); }
.nums-src { display: block; margin: 8px 0 0; font-size: .9375rem; line-height: 1.45; color: var(--ink-soft); }

/* Payback: the answer, set largest, its words beside it */
.pay-lead { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(24px, 4vw, 56px); align-items: end; }
.pay-lead .nums-label { grid-column: 1 / -1; margin-bottom: 10px; }
.pay-lead .nums-fig { grid-column: 1; grid-row: 2 / span 2; font-size: clamp(3rem, 1.4rem + 4.6vw, 5.25rem); line-height: .95; letter-spacing: -0.035em; }
.pay-lead .nums-text { grid-column: 2; grid-row: 2; max-width: 24rem; margin: 0; font-size: 1.125rem; line-height: 1.5; }
.pay-lead .nums-src { grid-column: 2; grid-row: 3; }

/* The panels' life: one block a year for 25 years */
.nums-life { margin-top: clamp(32px, 4vw, 48px); }
.nums-life-pay { position: relative; display: block; width: max-content; max-width: 100%; margin: 0 0 16px 42%; transform: translateX(-50%);
  font-weight: 600; font-size: .9375rem; line-height: 1.3; color: var(--ink); }
.nums-life-pay::after { content: ""; position: absolute; left: 50%; top: 100%; height: 6px; margin-left: -1px; border-left: 2px solid var(--ink); }
.nums-track { position: relative; height: 20px; }
.nums-track::before { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--ink-soft) 0%, var(--ink-soft) 36%, var(--sun-coral) 48%, var(--sun-amber) 100%);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 calc(4% - 3px), transparent calc(4% - 3px) 4%);
  mask: repeating-linear-gradient(90deg, #000 0 calc(4% - 3px), transparent calc(4% - 3px) 4%); border-radius: 3px; }
.nums-window { position: absolute; left: 36%; width: calc(12% - 3px); top: -10px; height: 6px; border: 2px solid var(--ink); border-bottom: 0; border-radius: 3px 3px 0 0; }
.nums-life-ends { display: flex; justify-content: space-between; gap: 16px; margin-top: 12px; font-size: .9375rem; color: var(--ink-soft); }
.nums-life-ends span:last-child { text-align: right; }

/* What pays it back: bill savings plus export payments, with a plus between them */
.pay-why { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--pay-gap); margin-top: clamp(32px, 4vw, 48px);
  padding-top: clamp(24px, 3vw, 36px); border-top: 1px solid var(--line-strong); }
.pay-eyebrow { grid-column: 1 / -1; margin-bottom: 14px; font: 600 1.125rem/1.3 var(--display); color: var(--ink); }
.pay-why > .nums-item { position: relative; }
.pay-why > .nums-item + .nums-item .nums-fig::before { content: ""; position: absolute; top: 50%; left: calc(var(--pay-gap) / -2 - 18px);
  width: 36px; height: 36px; margin-top: -18px; border-radius: 50%; box-shadow: 0 1px 3px rgba(38, 40, 42, .12);
  background: linear-gradient(var(--sun-coral), var(--sun-coral)) center / 12px 2px no-repeat,
    linear-gradient(var(--sun-coral), var(--sun-coral)) center / 2px 12px no-repeat, var(--paper); }

/* Background: the cost and carbon, in small type */
.pay-context { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--pay-gap); margin-top: clamp(28px, 3.6vw, 40px);
  padding-top: 20px; border-top: 1px solid var(--line-strong); }
.pay-context .nums-label { margin-bottom: 4px; font-size: .875rem; color: var(--ink-soft); }
.pay-context .nums-fig { display: inline; font: 600 1rem/1.5 var(--text); letter-spacing: 0; }
.pay-context .nums-text { display: inline; margin: 0; font-size: 1rem; color: var(--ink-soft); }
.pay-context .nums-src { margin-top: 4px; font-size: .875rem; }

/* Below the card: how panels make the savings, and the way to get your own figures */
.pay-foot { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px clamp(32px, 5vw, 72px); align-items: start;
  margin-top: clamp(32px, 4vw, 48px); }
.pay-foot .prose p { margin: 0; }
.pay-cta { padding: clamp(22px, 2.6vw, 30px); border: 1px solid var(--line); border-radius: 14px; }
.pay-cta p { margin: 0; }
.pay-cta .btn { margin-top: 20px; }
.pay-more { display: block; margin-top: 16px; font-weight: 600; }

@media (max-width: 860px) {
  .pay-foot { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .pay-lead { display: block; }
  .pay-lead .nums-text { margin-top: 14px; }
  .pay-why, .pay-context { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  .pay-why { row-gap: 56px; }
  .pay-eyebrow { margin-bottom: -36px; }
  .pay-why > .nums-item + .nums-item .nums-fig::before { content: none; }
  .pay-why > .nums-item + .nums-item::before { content: ""; position: absolute; top: -46px; left: 0; width: 36px; height: 36px; border-radius: 50%;
    box-shadow: 0 1px 3px rgba(38, 40, 42, .12);
    background: linear-gradient(var(--sun-coral), var(--sun-coral)) center / 12px 2px no-repeat,
      linear-gradient(var(--sun-coral), var(--sun-coral)) center / 2px 12px no-repeat, var(--paper); }
}

/* Team: smaller rings than the About page, so the people's words lead, but big enough to see a face (12 Oct 2026). */
.page-home .person .ring { width: 84px; height: 84px; border-width: 5px; font-size: 1.5rem; margin-bottom: 16px; }

/* Areas: no rule over the address. */
.page-home .address-card { border-top: 0; padding-top: 0; }

/* Guides under the FAQs: no rules. */
.page-home .related li { border-top: 0; padding: 12px 0; }

/* The quote section at the foot: same three-step card as the hero. */
.book--steps { align-items: center; }
@media (max-width: 900px) {
  .page-home .person { grid-template-columns: 76px minmax(0, 1fr); }
  .page-home .person .ring { width: 76px; height: 76px; }
  .section--join { padding-top: 0; }
}

/* ---------- Home page: landing page design techniques (11 Oct 2026, 5pm) ----------
   From a blur test: the headline and photo stood out, the form's choices vanished. So the form now has the contrast
   (orange markers on each choice, a tinted hero behind the white card), an arrow built into the form points at it
   (see "the arrow built into the form" below), the photo is a little smaller so it doesn't compete, and key promises
   are in bold for skimmers. (The tinted hero and the smaller photo gave way to the hero of 12 Oct 2026, at the end of this file.) */
.page-home .proof { background: var(--paper); border-top: 0; border-bottom: 1px solid var(--line); }
.page-home .hero-lede strong { color: var(--ink); font-weight: 600; }
.page-home .prices strong { color: var(--ink); font-weight: 600; }
.page-home .section--ink .prices strong { color: #fff; }

/* Each choice gets an orange marker, so the form is the brightest thing in the first screen. */
.qf-choice span::after { width: 28px; height: 28px; margin: 0; border: 0; border-radius: 50%; transform: none;
  background: var(--sun-solid) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4.5 2.5 8 6l-3.5 3.5' fill='none' stroke='%2326282a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.qf-choice:hover span { border-color: var(--sun-solid); }
.qf-choice input:checked + span::after { background-color: var(--sun-solid-hover); }


/* ---------- Home page: "Is your home right" (11 Oct 2026, evening) ----------
   The sun's path beside a quick roof check: one tap per factor, a line of feedback, and a result card whose ring fills
   as you answer, ending at the survey button. ("What we install" was a power-flow drawing beside it until 14 Oct 2026;
   it's now three cards, in the "What we install, simplified" block at the end of this file.) */

/* Is your home right: a free roof check, one question at a time (redesigned 11 Oct 2026, 11pm). Wide screens: the
   heading and the sun-path drawing on the left, the check on the right as one card. Phones: heading, check, drawing.
   Without JavaScript the card is simply the list of five factors. */
.rc { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "head body" "aside body";
  grid-template-rows: auto 1fr; column-gap: clamp(36px, 5vw, 72px); align-items: start; }
.rc-head { grid-area: head; max-width: 34rem; }
.rc-head p { margin-top: 14px; font-size: 1.125rem; color: var(--ink-soft); }
.rc-aside { grid-area: aside; margin-top: clamp(24px, 3vw, 36px); }
.rc-body { grid-area: body; }

.sun-path { border-radius: 20px; box-shadow: 0 1px 2px rgba(38, 40, 42, .05), 0 24px 48px -36px rgba(38, 40, 42, .4); }
.sp-panels { transition: opacity .35s ease; }
.sp-panels--n, .sp-panels--ew { opacity: 0; }
.sun-path[data-dir="ew"] .sp-panels--s, .sun-path[data-dir="n"] .sp-panels--s { opacity: 0; }
.sun-path[data-dir="ew"] .sp-panels--ew { opacity: 1; }
.sun-path[data-dir="n"] .sp-panels--n { opacity: .55; }
.sp-face-label { transition: opacity .35s ease; }
.sun-path[data-dir="ew"] .sp-face-label--ew, .sun-path[data-dir="n"] .sp-face-label--n { opacity: 0; }
.sp-sun { transition: opacity .35s ease; }
.sun-path[data-dir="ew"] .sp-sun--s { opacity: .3; }
.sun-path[data-dir="n"] .sp-sun { opacity: .22; }
.js .sp-face { cursor: pointer; }
.sun-key li { margin: 0 -10px; padding: 6px 10px; border-radius: 8px; transition: background-color .2s ease; }
.sun-key li.is-active { background: var(--sky); }

/* The card */
.rc-card { padding: clamp(24px, 3.2vw, 44px); border-radius: 22px; background: var(--paper);
  box-shadow: 0 1px 2px rgba(38, 40, 42, .06), 0 28px 56px -30px rgba(38, 40, 42, .45); }
.rc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.rc-item > p { color: var(--ink-soft); }
.rc-item strong { font-weight: 600; color: var(--ink); }
.rc-item[hidden], .rc-list[hidden], .rc-verdict[hidden], .rc-nav[hidden], .rc-back[hidden] { display: none; }

.rc-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.rc-eyebrow { display: flex; align-items: center; gap: 8px; font-size: .9375rem; font-weight: 600; color: var(--ink); }
.rc-eyebrow::before { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 3px solid var(--sun-solid); }
.rc-count { font-size: .9375rem; color: var(--ink-soft); }
.rc-bar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin: 14px 0 clamp(22px, 3vw, 30px); }
.rc-bar span { height: 6px; border-radius: 3px; background: var(--sky-deep); transition: background-color .25s ease; }
.rc-bar span.is-now { background: var(--line-strong); }
.rc-bar span.is-done { background: linear-gradient(90deg, var(--sun-coral), var(--sun-amber)); }

/* One question */
.rc-q { margin: 0; padding: 0; border: 0; min-width: 0; }
.rc-q:focus { outline: none; }
.rc-q:focus-visible { outline: 3px solid var(--focus); outline-offset: 6px; border-radius: 6px; }
.rc-question { padding: 0; margin-bottom: 18px; font: 500 clamp(1.375rem, 1.1rem + .9vw, 1.75rem)/1.2 var(--display); letter-spacing: -0.01em; color: var(--ink); }
.rc-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 10px; }
.rc-opt { position: relative; display: block; }
.rc-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.rc-opt span { display: flex; align-items: center; gap: 12px; min-height: 56px; height: 100%; padding: 12px 16px; border: 1.5px solid var(--line-strong);
  border-radius: 12px; background: var(--paper); font-size: 1.0625rem; font-weight: 500; line-height: 1.25; color: var(--ink);
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease; }
.rc-opt span::before { content: ""; flex: none; width: 20px; height: 20px; box-sizing: border-box; border-radius: 50%; border: 2px solid #848c93; background: var(--paper); }
.rc-opt:hover span { border-color: var(--sun-solid); box-shadow: 0 4px 14px -8px rgba(38, 40, 42, .35); }
.rc-opt input:checked + span { border-color: var(--ink); background: var(--sky); }
.rc-opt input:checked + span::before { border: 6px solid var(--ink); }
.rc-opt input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }

/* The line on how that answer looks, marked by its status */
.rc-say { display: flex; gap: 10px; margin-top: 16px; font-size: 1.0625rem; font-weight: 500; line-height: 1.45; color: var(--ink); }
.rc-say:empty { display: none; }
.rc-say::before { content: ""; flex: none; width: 24px; height: 24px; margin-top: 1px; background: var(--rc-mark-bg) center / 100% no-repeat; }
.rc-say a { font-weight: 600; }
.rc [data-status="good"] { --rc-mark-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='1' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ec7a4a'/%3E%3Cstop offset='1' stop-color='%23f5b254'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='13' cy='13' r='13' fill='url(%23g)'/%3E%3Cpath d='M8 13.4l3.4 3.4L18.4 9.6' fill='none' stroke='%2326282a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.rc [data-status="fair"] { --rc-mark-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Ccircle cx='13' cy='13' r='13' fill='%23fbdcb2'/%3E%3Cpath d='M8 13.4l3.4 3.4L18.4 9.6' fill='none' stroke='%2326282a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.rc [data-status="stop"] { --rc-mark-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Ccircle cx='13' cy='13' r='13' fill='%2326282a'/%3E%3Cpath d='M13 7.5v7' stroke='%23fff' stroke-width='2.6' stroke-linecap='round'/%3E%3Ccircle cx='13' cy='18.6' r='1.6' fill='%23fff'/%3E%3C/svg%3E"); }
.rc [data-status="unsure"] { --rc-mark-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Ccircle cx='13' cy='13' r='12' fill='%23fff' stroke='%23bfc6cc' stroke-width='2'/%3E%3Cpath d='M10.2 10.4a2.9 2.9 0 1 1 4.3 2.5c-.9.5-1.5 1.1-1.5 2.1' fill='none' stroke='%2326282a' stroke-width='2.2' stroke-linecap='round'/%3E%3Ccircle cx='13' cy='18.7' r='1.4' fill='%2326282a'/%3E%3C/svg%3E"); }

/* The factor itself, as the "why", under the answers */
.rc-card.is-steps .rc-why { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); font-size: .9375rem; line-height: 1.55; }

/* Back and Next */
.rc-nav { display: flex; align-items: center; gap: 16px; margin-top: clamp(22px, 3vw, 30px); }
.rc-next { margin-left: auto; }
.rc-next[aria-disabled="true"] { opacity: .45; box-shadow: none; }
.rc-back, .rc-again { padding: 8px 2px; border: 0; background: none; font: inherit; font-weight: 600; color: var(--ink);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.rc-back:focus-visible, .rc-again:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }

/* The result */
.rc-v-head { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 18px; align-items: center; }
.rc-v-mark { width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(225deg, var(--sun-coral), var(--sun-amber)); }
.rc-v-mark path { fill: none; stroke: var(--ink); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.rc-verdict[data-verdict="stop"] .rc-v-mark { background: var(--ink); }
.rc-verdict[data-verdict="stop"] .rc-v-mark path { stroke: #fff; }
.rc-verdict[data-verdict="unsure"] .rc-v-mark { background: var(--sky-deep); }
.rc-v-title { font: 500 clamp(1.5rem, 1.2rem + .9vw, 1.875rem)/1.15 var(--display); letter-spacing: -0.01em; color: var(--ink); }
.rc-v-title:focus { outline: none; }
.rc-v-text { margin-top: 4px; color: var(--ink-soft); }
.rc-sum { list-style: none; margin: 22px 0 0; padding: 0; border-top: 1px solid var(--line); }
.rc-sum li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line); }
.rc-sum li::before { content: ""; width: 22px; height: 22px; background: var(--rc-mark-bg) center / 100% no-repeat; }
.rc-sum-q { color: var(--ink-soft); }
.rc-sum-a { font-weight: 600; color: var(--ink); text-align: right; }
.rc-again { margin-top: 14px; }

/* Under the card: the survey button, always there, and the guide link */
.rc-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: clamp(22px, 3vw, 30px); }
.rc-cta p { flex: 1 1 15rem; color: var(--ink-soft); }
.rc-body > .more-link { margin-top: 20px; }

/* The quote form: a line to say the roof check answers come along (added by site.js). */
.qf-note { margin: 0 0 14px; padding: 10px 14px; border-radius: 8px; background: var(--sky); font-size: .9375rem; line-height: 1.4; color: var(--ink); }

@media (max-width: 900px) {
  .rc { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "body" "aside"; grid-template-rows: none; }
  .rc-body { margin-top: 26px; }
  .rc-aside { margin-top: 32px; }
}
@media (max-width: 560px) {
  .rc-card { border-radius: 18px; }
  .rc-v-head { grid-template-columns: 52px minmax(0, 1fr); gap: 14px; }
  .rc-v-mark { width: 52px; height: 52px; }
}

/* ---------- Home hero: the arrow built into the form (11 Oct 2026, evening) ----------
   Replaces the hand-drawn "Start here" note. The form's title sits on a dark band with an arrow cut into its left
   edge, pointing in from the headline (the Salesforce pattern James shared): the eye lands on the band, and the shape
   itself says where to start. The sun line stays along the top. White on ink, 14.8:1. Home hero only: the form at the
   foot of the page and the get-a-quote page keep their own look. */
/* Since 13 Oct 2026 every quote form uses this card (.qcard): James, "change all other get quote forms like the one in
   the hero". */
.qcard { --card-pad: clamp(24px, 3vw, 36px); padding: var(--card-pad); }
.qcard::before { z-index: 2; }
/* 14 Oct 2026: the band holds the title and, under it, a line on what the quote gives you (.qcard-sub), in a softer
   white so the title still leads (10:1 on ink), its two lines balanced. */
.qcard-head { margin: calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad)) 24px;
  padding: 24px var(--card-pad) 21px calc(var(--card-pad) + 8px); background: var(--ink); color: #fff;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 calc(50% + 18px), 18px 50%, 0 calc(50% - 18px)); }
.hero-form .qcard-head h2 { margin: 0; color: #fff; }
.qcard-sub { margin: 7px 0 0; max-width: 24rem; font: 400 1rem/1.45 var(--text); color: rgba(255, 255, 255, .8); text-wrap: balance; }
@media (max-width: 560px) {
  /* Phones: a slimmer band and arrow, so the form still starts high on a 390 by 844 phone. */
  .qcard-head { margin-bottom: 18px; padding: 16px var(--card-pad) 15px calc(var(--card-pad) + 6px);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 calc(50% + 14px), 14px 50%, 0 calc(50% - 14px)); }
  .qcard-sub { margin-top: 5px; font-size: .9375rem; line-height: 1.4; }
}

/* ---------- Town and area pages: a recent install in SolarSave's own photos (11 Oct 2026) ----------
   Straight under the ratings bar, on the same sky background, so ratings, credentials and real local work read as one
   band of proof. One row on wide screens; on phones two columns, the first photo full width when there are three.
   Wide photos go two to a row, stacked on phones. */
.proof + .section--sky { padding-top: clamp(40px, 5vw, 64px); }
.install-gallery { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); }
.install-gallery figure { margin: 0; }
.install-photo { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 10px; background: var(--line); }
.install-gallery figcaption { margin-top: 10px; font-size: 1rem; line-height: 1.45; color: var(--ink-soft); }
/* Wide photos (aerial views, a whole roof from the scaffold): two side by side, 3:2. */
.install-gallery--wide .install-photo { aspect-ratio: 3 / 2; }
/* Inside a page's text column (Nottinghamshire, under "How our solar panel installations work"). */
.prose .install-gallery { margin: 18px 0 6px; }
@media (max-width: 760px) {
  .install-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; }
  .install-gallery[style*="--n: 3"] figure:first-child { grid-column: 1 / -1; }
  .install-gallery[style*="--n: 3"] figure:first-child .install-photo { aspect-ratio: 4 / 3; }
  .install-gallery figcaption { font-size: .9375rem; }
  .install-gallery--wide { grid-template-columns: minmax(0, 1fr); }
  .install-gallery--wide[style*="--n: 3"] figure:first-child .install-photo { aspect-ratio: 3 / 2; }
}

/* Quote form, step 2: "Do you own the property?" Two tap answers, styled like step 1, and a note for anyone who rents. */
.qf-owner-note { margin-top: 12px; padding: 10px 14px; border-radius: 8px; background: var(--sky); color: var(--ink); }
.qf-owner-note[hidden] { display: none; }

/* ---------- Home: more photos of SolarSave's own installs (12 Oct 2026, 1:30am) ----------
   In "Local solar panel installers": a wall of six recent installs, one per job, square, with the town, postcode
   district and month, each linking to the area page that shows that job. Under the installation steps: one roof in
   Grimsby from start to finish (before, the rails, the panels), using the town pages' gallery. */
.iwall { margin-top: clamp(36px, 4.5vw, 56px); }
.iwall-title { margin: 0 0 16px; font: 600 1.125rem/1.3 var(--display); color: var(--ink); }
.iwall-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); margin: 0; padding: 0; list-style: none; }
.iwall-grid li { margin: 0; }
.iwall-grid a { display: block; color: var(--ink); text-decoration: none; }
.iwall-photo { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 10px; background: var(--line);
  transition: transform .2s ease; }
.iwall-grid a:hover .iwall-photo { transform: scale(1.02); }
.iwall-place { display: block; margin-top: 10px; font-weight: 600; font-size: 1rem; line-height: 1.3; }
.iwall-grid a:hover .iwall-place { text-decoration: underline; text-decoration-color: var(--sun-coral); text-underline-offset: 3px; }
.iwall-date { display: block; margin-top: 2px; font-size: .9375rem; color: var(--ink-soft); }
@media (max-width: 1000px) { .iwall-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 22px; } }
@media (max-width: 560px) { .iwall-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .iwall-photo { transition: none; } .iwall-grid a:hover .iwall-photo { transform: none; } }

.install-day { margin-top: clamp(36px, 4.5vw, 56px); padding-top: clamp(28px, 3.4vw, 40px); border-top: 1px solid var(--line); }
.install-day-title { margin: 0 0 18px; font-size: 1.125rem; color: var(--ink-soft); }
.install-day-title strong { font-family: var(--display); font-weight: 600; color: var(--ink); }

/* ---------- Home: the customers' photo cards as a moving strip (12 Oct 2026, 2am) ----------
   Same cards and words, styled like the recent-installs wall (rounded photo, bold title, the quote, then the name in
   grey) and running edge to edge. site.js copies the cards and slides them left, 30 px a second, in a loop; it
   pauses on hover, on focus or with the Pause button, and while off screen. With reduced motion or no JavaScript the
   cards sit still in a row that scrolls sideways when it's wider than the screen. */
.jm { position: relative; margin-top: clamp(4px, 1vw, 12px); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.jm:focus-visible { outline-offset: -3px; }
.page-home .jm .jm-track { display: flex; gap: clamp(20px, 2.4vw, 32px); width: max-content; margin: 0 auto; padding: 4px var(--gutter) 12px; }
.page-home .jm .job { flex: 0 0 auto; width: clamp(264px, 25vw, 336px); scroll-snap-align: start; }
.page-home .jm .job-photo { aspect-ratio: 4 / 3; border-radius: 10px; margin-bottom: 14px; }
.page-home .jm .job h3 { font: 600 1.0625rem/1.3 var(--text); color: var(--ink); }
.page-home .jm .job blockquote { margin-top: 8px; }
.page-home .jm .job blockquote p { font-size: 1rem; line-height: 1.55; }
.page-home .jm .job cite { margin-top: 8px; font-size: .9375rem; }
/* Install photo cards between the reviews (built by site.js): what it shows, then the place and month. */
.page-home .jm .job-what { margin: 0; font: 600 1.0625rem/1.3 var(--text); color: var(--ink); }
.page-home .jm .job-where { margin: 6px 0 0; font-size: .9375rem; color: var(--ink-soft); }
/* Moving */
.jm.is-moving { overflow: hidden; scroll-snap-type: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.page-home .jm.is-moving .jm-track { margin: 0; padding-left: 0; padding-right: 0; animation: jm-slide var(--jm-time, 40s) linear infinite; }
@keyframes jm-slide { from { transform: translateX(0); } to { transform: translateX(calc(-1 * var(--jm-shift, 0px))); } }
.page-home .jm.is-moving:hover .jm-track, .page-home .jm.is-moving:focus-within .jm-track,
.page-home .jm.is-moving.is-paused .jm-track, .page-home .jm.is-moving.is-offscreen .jm-track { animation-play-state: paused; }
/* The Pause / Play button, above the strip on the right */
.jm-bar { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.jm-bar[hidden] { display: none; }
.jm-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 1px solid var(--line-strong);
  border-radius: 999px; background: var(--paper); color: var(--ink); font: 600 .9375rem/1 var(--text); cursor: pointer; }
.jm-toggle:hover { border-color: var(--ink); }
.jm-icon { width: 10px; height: 12px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; box-sizing: border-box; }
.jm-toggle[data-paused="true"] .jm-icon { width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent currentColor; }
@media (prefers-reduced-motion: reduce) { .page-home .jm.is-moving .jm-track { animation: none; } }

/* The single-page form. Tighter than the stepped form so all of it fits beside the headline: Yes / No side by side with
   a radio dot (a tap selects here, it doesn't move on, so no arrow), name across the top, phone and postcode side by
   side, down to the narrowest phones. (The "What would you like a quote for?" choices came out at 4:10am.) */
.qf--single { container-type: inline-size; }
.qf--single .qf-group { border: 0; margin: 0 0 18px; padding: 0; min-width: 0; }
.qf--single legend { padding: 0; margin-bottom: 10px; font: 600 1.0625rem/1.3 var(--text); color: var(--ink); }
.qf--single .qf-choices--two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.qf--single .qf-choice span { justify-content: flex-start; gap: 10px; min-height: 52px; height: 100%; padding: 10px 12px; font-size: 1rem; line-height: 1.25; }
.qf--single .qf-choice span::after { display: none; }
.qf--single .qf-choice span::before { content: ""; flex: none; box-sizing: border-box; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--line-strong); background: var(--paper); transition: border-color .15s ease, border-width .15s ease; }
.qf--single .qf-choice:hover span { border-color: var(--sun-solid); }
.qf--single .qf-choice input:checked + span { border-color: var(--sun-solid-hover); background: #fff5ec; box-shadow: inset 0 0 0 1px var(--sun-solid-hover); }
.qf--single .qf-choice input:checked + span::before { border: 6px solid var(--sun-solid-hover); }
.qf--single .qf-owner-note { margin-top: 10px; font-size: .9375rem; }
.qf--single .qf-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; }
.qf--single .qf-field--wide { grid-column: 1 / -1; }
.qf--single .field { margin-bottom: 16px; min-width: 0; }
.qf--single .field label { margin-bottom: 6px; }
.qf--single .field input { min-height: 50px; }
.qf--single .qf-submit { margin-top: 2px; }
@container (max-width: 250px) {
  .qf--single .qf-choices--two, .qf--single .qf-fields { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Home: the main offer, a full solar and battery system from £7,500 (12 Oct 2026, night) ----------
   SolarSave's owner asked for "a full system from £7500 fully installed including battery. One side of scaffolding" to
   be the main offer (Fox ESS, the entry-level system; EcoFlow is the premium one). Two places: "Solar panel and battery
   systems" straight after the ratings bar, and the price in the prices band (a tag in the hero came out the same night,
   James). The Fox ESS card wears the logo's sun ring as its border; the EcoFlow card
   is quieter, with the only battery photo we have (an EcoFlow). */
.sys { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(16px, 2vw, 24px); align-items: stretch;
  margin-top: clamp(28px, 4vw, 44px); }
/* Links under the systems, on /solar-panels-and-battery/ (13 Oct 2026): panels on their own, or a battery for existing panels. */
.sys-routes { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 32px; }
.sys-routes li { line-height: 1.5; }
.sys-routes strong { font-weight: 600; margin-right: 4px; }
.sys-routes a { font-weight: 600; }
.sys-card { position: relative; border-radius: 18px; background: var(--paper); padding: clamp(24px, 3vw, 40px); overflow: hidden; }
.sys-card > * { position: relative; z-index: 1; }
.sys-card--main { border: 3px solid transparent;
  background: linear-gradient(var(--paper), var(--paper)) padding-box, linear-gradient(135deg, var(--sun-coral), var(--sun-amber)) border-box;
  box-shadow: 0 26px 50px -30px rgba(38, 40, 42, .4); }
.sys-card--main::after { content: ""; position: absolute; right: -96px; top: -128px; width: 260px; height: 260px; border-radius: 50%;
  border: 12px solid transparent; background: linear-gradient(135deg, var(--sun-coral), var(--sun-amber)) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .22; pointer-events: none; }
.sys-tag { display: inline-block; margin: 0 0 14px; padding: 4px 12px; border-radius: 999px; font-weight: 600; font-size: .9375rem;
  line-height: 1.4; background: #fff4e6; color: var(--star); }
.sys-card--premium .sys-tag { background: var(--sky); color: var(--ink-soft); }
.sys-card h3 { font-size: clamp(1.5rem, 1.25rem + .7vw, 1.875rem); line-height: 1.15; text-wrap: balance; }
.sys-card--premium h3 { font-size: clamp(1.3125rem, 1.15rem + .4vw, 1.5rem); }
.sys-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; margin: 16px 0 0; }
.sys-price small { font-size: 1.125rem; color: var(--ink-soft); }
.sys-price strong { font: 500 clamp(3rem, 2.1rem + 3vw, 4.25rem)/1 var(--display); letter-spacing: -0.03em; color: var(--ink); }
.sys-price span { font-weight: 600; font-size: 1.125rem; }
.sys-list { margin: 24px 0 30px; }
.sys-list strong { font-weight: 600; }
.sys-card--premium { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 0 clamp(18px, 2vw, 28px); align-items: start; align-content: center;
  border: 1px solid var(--sky-deep); }
.sys-photo { margin: 0; }
.sys-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 12px; background: var(--sky); }
.sys-photo figcaption { margin-top: 8px; font-size: .875rem; line-height: 1.35; color: var(--ink-soft); }
.sys-premium-text > p:not(.sys-tag) { margin-top: 12px; color: var(--ink-soft); }
.sys-more { display: inline-block; margin-top: 16px; font-weight: 600; color: var(--ink); text-underline-offset: 3px; }
.sys-small { max-width: 46rem; margin-top: 22px; font-size: 1rem; color: var(--ink-soft); }
@media (max-width: 900px) {
  .sys { grid-template-columns: minmax(0, 1fr); }
  .sys-card--premium { grid-template-columns: 160px minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .sys-card--main .btn { width: 100%; text-align: center; }
  .sys-card--premium { grid-template-columns: 100px minmax(0, 1fr); }
  .sys-photo figcaption { font-size: .8125rem; }
}

/* ---------- Quote forms: first name, last name, email, phone and postcode (12 Oct 2026, night) ----------
   James: "form for get quote needs to capture, first name, last name, post code, email, phone". Every quote form asks
   for all five. In the stepped form the last step has first and last name side by side, then email and phone. The
   forms on other pages get the same red outline as the home page forms when an answer needs fixing. */
.qf[data-steps] { container-type: inline-size; }
.qf-step .qf-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; }
.qf-step .qf-field--wide { grid-column: 1 / -1; }
.quote-form .field input[aria-invalid="true"] { border-color: #b3261e; box-shadow: inset 0 0 0 1px #b3261e; }
@container (max-width: 250px) {
  .qf-step .qf-fields { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Home hero headline: question as a lead-in, answer as the headline (13 Oct 2026, 3am) ----------
   "Getting solar quotes? Get one with no pressure to sign." at one size broke as "Get one with no / pressure to sign."
   (James: "it looks a bit odd"). The question is now a smaller deep-coral line over the answer, and "with no pressure"
   and "to sign" can't be split. Still one H1, read as one sentence. */
/* 13 Oct 2026, 3:15am: "Get honest advice, with no pressure to sign." is longer, so the answer is a little smaller and
   breaks after the comma on wide screens ("Get honest advice," / "with no pressure to sign."). */
.page-home .hero h1 .display { max-width: none; }
.page-home .hero h1 .display-a { font-size: clamp(2.4rem, 1.2rem + 2.5vw, 3.5rem); }
@media (max-width: 359px) { .page-home .hero h1 .display-a { font-size: 2.125rem; } }
.page-home .hero h1 .display-q, .page-home .hero h1 .display-a { display: block; }
.page-home .hero h1 .display-q { margin-bottom: .3em; font-size: clamp(1.375rem, .5em, 2rem); line-height: 1.2; letter-spacing: -0.01em; color: var(--star); }
/* 14 Oct 2026, 2:35am (James: the headline "needs to clearly answer the question as fast as possible 'What do you do'
   in a very simple way whilst keeping the USP"): "Solar panels and batteries." then the promise, "No pressure to sign.",
   at the same size in the deep coral the question used. "Getting solar quotes?" came out (the headline now answers
   directly). Was "Getting solar quotes?" over "Get honest advice, with no pressure to sign." */
.page-home .hero h1 .display-usp { display: block; font-size: clamp(2.4rem, 1.2rem + 2.5vw, 3.5rem); color: var(--ink); }
@media (max-width: 359px) { .page-home .hero h1 .display-usp { font-size: 2.125rem; } }
/* 14 Oct 2026, 4:40am (James): "Lower Electricity Bills" over "With Solar Designed for Your Home." in the deep coral,
   his words and capitals, with the line under it "Get solar panels and battery storage matched to your electricity
   use. Clear costs, no pushy sales and support after installation." Was "Solar panels and batteries. No pressure to
   sign." with "One of our local team visits, shows you what you'd save and leaves the written quote with you. Most
   homes are fitted in a day." The headline is longer, so it's a little smaller on phones and keeps its lines balanced. */
.page-home .hero h1 .display-a, .page-home .hero h1 .display-usp { text-wrap: balance; }
@media (max-width: 600px) { .page-home .hero h1 .display-a, .page-home .hero h1 .display-usp { font-size: 2.125rem; line-height: 1.08; } }
@media (max-width: 359px) { .page-home .hero h1 .display-a, .page-home .hero h1 .display-usp { font-size: 1.875rem; } }

/* Google's G (13 Oct 2026): beside the Google rating here, in the ratings bar and on the reviews page, and before
   "Google" in a review's source. Sized by its width and height attributes; sits on the text's middle. */
.g-logo { display: inline-block; flex: none; vertical-align: -0.2em; margin-right: 6px; }
.proof .g-logo { margin-right: 8px; vertical-align: -0.15em; }

/* ---------- Header and navigation, UX pass (13 Oct 2026) ----------
   Research: insights/2026-10-13_nav-ux-research.md.
   - Wide screens: only the main bar stays on screen; the slim top bar (ratings, Commercial solar, About us, Contact)
     scrolls away with the page, so the sticky part is 73 px, not 110 (NN/g: keep sticky headers small).
   - The phone number sits in the main bar beside the quote button (BrightLocal: 60% of people phone a local business).
   - Commercial is a top-bar link on wide screens and stays in the phone menu (.nav-item--mobile).
   - Phones: the call and menu buttons are labelled "Call" and "Menu" under their icons (NN/g: label a hidden menu). */
.header-phone-call { display: none; }
.nav-item.is-here > .nav-toggle .nav-toggle-label { text-decoration: underline; text-decoration-color: var(--sun-coral); text-decoration-thickness: 2px; text-underline-offset: 6px; }
@media (min-width: 1120px) {
  .site-header { top: calc(-1 * var(--topbar-h, 37px)); }
  html { scroll-padding-top: 92px; }
  .nav-item--mobile { display: none; }
  .header-phone { display: inline-flex; padding: 0 2px; font-size: 1rem; }
  .mainbar .wrap { gap: 14px; }
  .brand img { width: 182px; }
  .nav-top { padding-left: 9px; }
  .nav-item:not(.has-panel) .nav-top { padding: 0 9px; }
  .nav-toggle { margin-right: 3px; }
  .header-actions { gap: 12px; }
  .header-phone .phone-icon { color: var(--sun-solid-hover); }
  .header-phone:hover .header-phone-num { text-decoration: underline; text-decoration-color: var(--sun-coral); text-underline-offset: 4px; }
}
@media (max-width: 640px) {
  .header-phone, .menu-toggle { flex-direction: column; justify-content: center; gap: 2px; width: 50px; min-height: 46px; padding: 3px 0 2px; }
  .header-phone svg, .menu-toggle svg { width: 20px; height: 20px; }
  .header-phone .header-phone-call, .menu-toggle .menu-toggle-label { display: block; font: 600 .6875rem/1 var(--text); letter-spacing: .01em; color: var(--ink); }
  .header-phone .header-phone-num { display: none; }
}
/* 14 Oct 2026: with the longer header button ("Get My Free Solar Quote"), wide screens need a little less room too:
   the logo and the menu's spacing come in slightly, so the row fits the page width (it ran 27px past it). */
@media (min-width: 1280px) {
  .brand img { width: 170px; }
  .nav-top { padding-left: 8px; }
  .nav-item:not(.has-panel) .nav-top { padding: 0 8px; }
  .header-cta { padding: 0 15px; }
}
@media (min-width: 1120px) and (max-width: 1279px) {
  .brand img { width: 163px; }
  .mainbar .wrap { gap: 12px; }
  .nav-top { padding-left: 7px; font-size: .96875rem; }
  .nav-item:not(.has-panel) .nav-top { padding: 0 7px; }
  .nav-toggle { width: 22px; margin-right: 1px; }
  .header-actions { gap: 12px; }
  .header-phone { font-size: .96875rem; }
}
/* Just above the phone layout the header still shows the full phone number, so the logo is a little smaller there
   (13 Oct 2026, new logo). */
@media (min-width: 641px) and (max-width: 700px) {
  .brand img { width: 158px; }
}
@media (max-width: 400px) {
  .brand img { width: 108px; }
  .mainbar .wrap, .header-actions { gap: 6px; }
  .header-phone, .menu-toggle { width: 46px; }
}

/* ---------- Nav dropdown, simplified (13 Oct 2026, 4:15am) ----------
   James: the menus were "too complex and overwhelming". One small dropdown under Solar panels: four links, each the
   page's name in plain words with one line under it. No columns, no guide lists, no quote card (the quote button and
   phone number are always beside it). Wide screens: a card hanging from the Solar panels item. Phones: the same four
   links, notes shown, in the accordion. */
.nav-simple { list-style: none; margin: 0; padding: 10px; display: grid; gap: 2px; }
.nav-simple li { position: relative; padding: 12px 14px; border-radius: 10px; }
.nav-simple li:hover, .nav-simple li.is-current { background: var(--sky); }
.nav-simple a { display: block; font-weight: 600; color: var(--ink); text-decoration: none; }
.nav-simple a::after { content: ""; position: absolute; inset: 0; border-radius: 10px; }
.nav-simple .nav-link-note { display: block; margin-top: 2px; font-size: .9375rem; line-height: 1.35; color: var(--ink-soft); }
.nav-simple li:has(a:focus-visible) { outline: 3px solid var(--focus); outline-offset: 0; }
.nav-simple a:focus-visible { outline: none; }
@media (min-width: 1120px) {
  .nav-item.has-panel { position: relative; }
  .nav-panel--simple { left: -6px; right: auto; width: 380px; border: 1px solid var(--line); border-top: 0;
    border-radius: 0 0 14px 14px; box-shadow: 0 24px 44px -12px rgba(38, 40, 42, .22); }
}
@media (max-width: 1119px) {
  .nav-simple { padding: 0 0 14px; }
  .nav-simple li { padding: 10px 12px; }
}

/* ---------- Home hero, stripped back (14 Oct 2026) ----------
   James, 1:30am: "improve the hero design on the homepage to convert better, it looks a bit cramped"; then, 2:20am:
   "this feels very cramped. We need to strip unnecessary information". So the hero says three things and asks for one:
   - Left: the keyword line with a map pin, the headline, one line about the visit, one panel with the Trustpilot and
     Google ratings along its top and three customers' words running down it. (The accreditation logos sat under it
     until 3:30am; they're now a strip under the hero.)
   - Right: the quote form.
   Taken out tonight, in order: the full drone photo, the photo strip and the "Installing within 100 miles of
   Doncaster" tag (the photo crops are kept in src/data/photos.mjs). The three customer excerpts came out with them
   and went back in at 2:30am (James), in the panel under the ratings.
   Kept from earlier decisions: the form on one page with no photo behind it (12 Oct), the ratings above the fold
   (13 Oct), the logos in their own colours on a clear background. Wide screens: a 1,200px page, the copy 620px, an 80px
   gap and the form 420px from 1,334px wide (James, from a layout review, 2:20am).
   Phones and tablets, in order: the copy and ratings, the form. Markup: home() in src/pages/home.mjs. */
.page-home .hero { padding: clamp(24px, 3.4vw, 48px) 0 clamp(48px, 5.5vw, 80px); background: var(--paper); }
.hh-grid { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
@media (min-width: 1000px) {
  .hh-grid { grid-template-columns: minmax(0, 1fr) clamp(23.5rem, 33vw, 26.25rem); grid-template-rows: auto 1fr; column-gap: clamp(40px, 6vw, 80px); row-gap: 36px; }
  .hh-copy { grid-column: 1; grid-row: 1; padding-top: 8px; }
  .hh-side { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
}
.page-home .hero h1 { gap: 14px; }
.page-home .hero h1 .kicker { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-size: 1.125rem; }
.hh-pin { width: 19px; height: 19px; flex: none; fill: none; stroke: var(--sun-coral); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.page-home .hero-lede { margin-top: 22px; max-width: 34rem; }
/* The promise on its own line, so it never breaks part way through. */
.page-home .hero-lede strong { display: block; margin-top: 2px; }

@media (max-width: 600px) {
  .page-home .hero h1 .kicker { font-size: 1rem; align-items: flex-start; }
  .hh-pin { margin-top: 2px; }
  .page-home .hero-lede { margin-top: 18px; }
}

/* The proof panel: the ratings along the top, then the excerpts one under another (back at 2:30am, as they were). */
.hh-proof { margin-top: 26px; padding: 0 clamp(18px, 2vw, 24px); border-radius: 16px; background: var(--sky); }
.hh-scores { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 26px; margin: 0; padding: 15px 0 14px; border-bottom: 1px solid var(--line-strong); }
.hh-scores a, .hh-tp { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: .9375rem; color: var(--ink-soft); text-decoration: none; }
.hh-scores strong { font: 600 1.1875rem/1 var(--text); color: var(--ink); }
.hh-scores .stars { color: var(--star); letter-spacing: 1px; font-size: 1rem; }
.hh-scores .g-logo { align-self: center; margin-right: -2px; }
.hh-scores a:hover > span:last-child { text-decoration: underline; text-underline-offset: 3px; }
.hh-quotes { list-style: none; margin: 0; padding: 0; }
.hh-quote { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 12px; row-gap: 3px; align-items: start; padding: 14px 0 15px; }
.hh-quote + .hh-quote { border-top: 1px solid var(--line); }
.hh-initial { grid-row: 1 / span 2; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  font: 600 .9375rem/1 var(--display); color: var(--ink); border: 2px solid transparent;
  background: linear-gradient(var(--paper), var(--paper)) padding-box, linear-gradient(225deg, var(--sun-coral), var(--sun-amber)) border-box; }
.hh-quote blockquote { margin: 0; padding: 0; border: 0; }
.hh-quote blockquote p { margin: 0; font: 400 1.0625rem/1.45 var(--display); color: var(--ink); }
.hh-quote strong { font-weight: 600; background: linear-gradient(transparent 62%, rgba(245, 178, 84, .5) 62%); }
.hh-cite { margin: 0; font-size: .875rem; line-height: 1.4; color: var(--ink-soft); }
.hh-scroll:focus-visible { outline-offset: 4px; }
@media (max-width: 600px) {
  /* Phones: the ratings on their own, then the excerpts as cards side by side to swipe, so the form still starts
     high. */
  .hh-proof { margin-top: 22px; padding: 0; border-radius: 0; background: none; }
  .hh-scores { padding: 0 0 12px; border: 0; gap: 6px 22px; }
  .hh-scroll { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 2px; scroll-padding: 0 var(--gutter); }
  .hh-scroll::-webkit-scrollbar { display: none; }
  .hh-quotes { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: 10px; }
  .hh-quote, .hh-quote + .hh-quote { grid-template-columns: 26px minmax(0, 1fr); grid-template-rows: 1fr auto; column-gap: 9px; row-gap: 10px;
    padding: 14px 14px 12px; border: 0; border-radius: 12px; background: var(--sky); scroll-snap-align: start; }
  .hh-quote blockquote { grid-column: 1 / -1; grid-row: 1; }
  .hh-quote blockquote p { font-size: .9375rem; line-height: 1.4; }
  .hh-initial { grid-row: 2; width: 26px; height: 26px; font-size: .8125rem; align-self: center; }
  .hh-cite { grid-row: 2; align-self: center; font-size: .8125rem; line-height: 1.35; }
}


/* The form. */
.hh-side .hero-form { margin: 0; box-shadow: 0 1px 3px rgba(38, 40, 42, .08), 0 24px 56px -16px rgba(38, 40, 42, .32); }
@media (min-width: 1000px) and (max-width: 1239px) { .hh-side .hero-form h2 { font-size: 1.5rem; } }

/* ---------- Home: accreditation logos as a strip under the hero (14 Oct 2026, 3:30am) ----------
   James, with another installer's "Fully accredited" strip: "do the accreditation logos as a strip like theyve done
   here but using this branding design". A full-width band in the site's sky tint, ruled off from the white hero above
   and the sky "systems" section below, a short label in the body font, then the logos in a row split by thin rules.
   Logos keep their own colours on a clear background (the schemes' rules; MCS uses a copy with its white made
   see-through). Phones: three logos, then two. Markup: accreditationStrip() in src/pages/home.mjs. */
.acc-strip { padding: clamp(20px, 2.6vw, 28px) 0 clamp(22px, 2.8vw, 30px); background: var(--sky); border-bottom: 1px solid var(--line); }
.acc-label { margin: 0 0 14px; text-align: center; font: 500 .9375rem/1.3 var(--text); color: var(--ink-soft); }
.acc-logos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; row-gap: 14px; }
.acc-logos li { display: flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 clamp(20px, 3.4vw, 46px); }
.acc-logos li + li { border-left: 1px solid var(--line-strong); }
.acc-logos img { display: block; width: auto; max-width: none; }
@media (max-width: 640px) {
  .acc-logos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 16px; }
  .acc-logos li { grid-column: span 2; min-height: 50px; padding: 0 6px; }
  .acc-logos li:nth-child(4) { grid-column: 2 / span 2; border-left: 0; }
  .acc-logos li:nth-child(5) { grid-column: 4 / span 2; }
  .acc-logos img { max-width: 100%; object-fit: contain; }
}

/* ---------- Home: "Why choose SolarSave?" (14 Oct 2026, 3:45am) ----------
   James: "after the accreditations section, design a section Why Choose Solar Save?, make it a beautiful design that
   helps convert". Straight after the accreditation strip, on white between the sky strip and the sky systems section.
   Wide screens: the heading, the line under it, three figures and the quote button on the left, which stays in view
   while the three reasons scroll past on the right. Each reason: an icon in the logo's sun ring, the promise, a
   sentence, and a customer's words as the proof under an orange rule. The first, "No pressure, no rush" (the answer
   most people comparing quotes want), is a white card ringed in the sun gradient; the other two are sky cards.
   Phones: heading, reasons, then the figures and the button, so the ask comes after the reasons.
   Markup: whySection() in src/pages/home.mjs. Same three reasons and words as the section it replaces. */
.why-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.why-head h2 { font-size: clamp(2.125rem, 1.5rem + 2.2vw, 3.25rem); line-height: 1.05; letter-spacing: -0.02em; text-wrap: balance; }
.why-head p { margin-top: 16px; max-width: 27rem; font-size: 1.1875rem; line-height: 1.55; color: var(--ink-soft); }

/* Three figures, ruled above and below, split by thin rules. */
.why-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border-block: 1px solid var(--line); }
.why-stats > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px; padding: 18px 0 18px 18px; }
.why-stats > div:first-child { padding-left: 0; }
.why-stats > div + div { border-left: 1px solid var(--line); }
.why-stats dd { margin: 0; font: 500 clamp(1.875rem, 1.45rem + 1.2vw, 2.5rem)/1 var(--display); letter-spacing: -0.02em; color: var(--ink); white-space: nowrap; }
.why-stats dd .stars { margin-left: 4px; font-size: .6em; vertical-align: .35em; color: var(--star); }
.why-stats dt { font-size: .9375rem; line-height: 1.35; color: var(--ink-soft); }
.why-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 28px; }
.why-call { color: var(--ink); font-weight: 600; white-space: nowrap; }

/* The reasons */
.why-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.why-item { position: relative; display: grid; grid-template-columns: 60px minmax(0, 1fr); column-gap: 22px; align-items: start;
  padding: clamp(24px, 2.6vw, 34px); border-radius: 20px; background: var(--sky); overflow: hidden; }
.why-item > * { grid-column: 2; position: relative; z-index: 1; }
.why-icon { grid-column: 1 !important; grid-row: 1 / span 3; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%;
  border: 2.5px solid transparent; background: linear-gradient(var(--paper), var(--paper)) padding-box, linear-gradient(225deg, var(--sun-coral), var(--sun-amber)) border-box; }
.why-icon svg { width: 30px; height: 30px; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.why-icon svg .warm { stroke: var(--sun-coral); stroke-width: 2; }
.why-item h3 { margin: 4px 0 8px; font-size: clamp(1.3125rem, 1.15rem + .5vw, 1.5rem); line-height: 1.2; }
.why-item > p { color: var(--ink-soft); line-height: 1.6; }
.why-item blockquote { margin: 18px 0 0; padding: 0 0 0 18px; border: 0; border-left: 3px solid var(--sun-coral); }
.why-item blockquote p { font: 400 1.1875rem/1.45 var(--display); color: var(--ink); }
.why-item cite { display: block; margin-top: 8px; font-style: normal; font-size: .9375rem; color: var(--ink-soft); }

/* The lead reason: white, ringed in the sun gradient, the logo's ring rising in the corner. */
.why-item--lead { border: 3px solid transparent; box-shadow: 0 26px 50px -32px rgba(38, 40, 42, .45);
  background: linear-gradient(var(--paper), var(--paper)) padding-box, linear-gradient(135deg, var(--sun-coral), var(--sun-amber)) border-box; }
.why-item--lead::after { content: ""; position: absolute; right: -110px; top: -150px; width: 260px; height: 260px; border-radius: 50%;
  border: 12px solid transparent; background: linear-gradient(135deg, var(--sun-coral), var(--sun-amber)) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .18; pointer-events: none; }
.why-item--lead h3 { font-size: clamp(1.5rem, 1.25rem + .8vw, 1.875rem); }
.why-item--lead blockquote p { font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); line-height: 1.35; }

@media (min-width: 1000px) {
  .why-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(48px, 6vw, 96px); align-items: start; }
  .why-side { position: sticky; top: 108px; }
  .why-proof { margin-top: 36px; }
}
@media (max-width: 999px) {
  /* The heading, then the reasons, then the figures and the button. */
  .why-side { display: contents; }
  .why-head { order: 1; }
  .why-list { order: 2; }
  .why-proof { order: 3; }
}
@media (max-width: 560px) {
  .why-item { grid-template-columns: minmax(0, 1fr); padding: 22px; }
  .why-item > * { grid-column: 1; }
  .why-icon { grid-column: 1 !important; grid-row: auto; width: 52px; height: 52px; margin-bottom: 14px; }
  .why-icon svg { width: 26px; height: 26px; }
  .why-stats > div { padding-left: 12px; }
  .why-stats dt { font-size: .875rem; }
}

/* ---------- Home hero: an install photo under the reviews (14 Oct 2026, 4:50am) ----------
   James: "put the picture of the solar under the reviews". Grimsby, DN33: sky, the whole array, red tiles. Wide
   screens: under the reviews panel in the left column, beside the form. Phones and tablets: after the form. */
.hh-photo { margin: 0; }
.hh-photo-img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 16px; background: var(--sky); }
.hh-photo figcaption { margin-top: 10px; font-size: .9375rem; line-height: 1.45; color: var(--ink-soft); }
@media (max-width: 600px) { .hh-photo-img { border-radius: 12px; } }

/* ---------- Home: "What we install", simplified (14 Oct 2026, 5:15am) ----------
   James: "its become way to much, it needs to answer the question What do we install". Three white cards on the sky
   section, one per thing SolarSave installs: a picture, the name, one sentence and a "in more detail" line; the whole
   card is the link to that service. Wide screens: three in a row. Phones: one under another, the picture as a small
   thumbnail beside the words, so the section stays short. Markup: installCards() in src/pages/home.mjs. */
.wi { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
.wi-card { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 18px; background: var(--paper);
  box-shadow: 0 1px 2px rgba(38, 40, 42, .05), 0 18px 36px -26px rgba(38, 40, 42, .35); transition: box-shadow .2s ease, transform .2s ease; }
.wi-card:hover { transform: translateY(-2px); box-shadow: 0 1px 2px rgba(38, 40, 42, .06), 0 24px 44px -24px rgba(38, 40, 42, .42); }
.wi-media { aspect-ratio: 4 / 3; background: var(--sky); }
.wi-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wi-media--art { display: grid; place-items: center; padding: 8% 6%; background: #fdf1e3; }
.wi-media--art .cs-art { display: block; width: 100%; height: auto; }
.wi-body { display: flex; flex-direction: column; flex: 1; padding: clamp(20px, 2.2vw, 28px); }
.wi-body h3 { font-size: clamp(1.375rem, 1.2rem + .5vw, 1.625rem); line-height: 1.2; letter-spacing: -0.01em; }
.wi-body h3 a { color: var(--ink); text-decoration: none; }
.wi-body h3 a::after { content: ""; position: absolute; inset: 0; border-radius: 18px; }
.wi-body h3 a:focus-visible { outline: none; }
.wi-card:has(a:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
.wi-body p { margin-top: 10px; line-height: 1.6; color: var(--ink-soft); }
.wi-more { margin-top: auto; padding-top: 16px; font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.wi-more::after { content: "\00a0\2192"; text-decoration: none; display: inline-block; transition: transform .2s ease; }
.wi-card:hover .wi-more { text-decoration-color: var(--sun-coral); text-decoration-thickness: 2px; }
.wi-card:hover .wi-more::after { transform: translateX(3px); }
/* The commercial drawing (the same one as on /commercial-solar/; its styles live in commercial-page.css there). */
.wi .cs-art-line { fill: var(--paper); stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.wi .cs-art-thin { fill: none; stroke: var(--ink); stroke-width: 1.25; }
.wi .cs-art-panels rect { fill: var(--ink); }
.wi .cs-art-ground { stroke: var(--line-strong); stroke-width: 2; }
.wi .cs-art-sun circle, .wi .cs-art-sun path { fill: none; stroke: var(--sun-coral); stroke-width: 3; stroke-linecap: round; }
.wi .cs-art-badge circle { fill: var(--sun-solid); }
.wi .cs-art-badge text { fill: var(--ink); text-anchor: middle; }
.wi .cs-art-big { font: 500 46px/1 var(--display); letter-spacing: -0.02em; }
.wi .cs-art-small { font: 600 17px/1 var(--text); }
@media (max-width: 900px) {
  /* A square thumbnail inset at the top left, the words beside it. */
  .wi { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .wi-card { flex-direction: row; align-items: flex-start; gap: 16px; padding: 16px; }
  .wi-media { flex: none; width: clamp(84px, 24vw, 168px); aspect-ratio: 1; border-radius: 12px; overflow: hidden; }
  .wi-media--art { padding: 6px; }
  .wi-body { padding: 2px 0 0; }
  .wi-body p { margin-top: 6px; font-size: 1rem; line-height: 1.5; }
  .wi-more { padding-top: 10px; font-size: .9375rem; }
}
@media (prefers-reduced-motion: reduce) { .wi-card, .wi-card:hover, .wi-more::after { transition: none; transform: none; } }

/* ---------- Home hero: the photo above the reviews, the reviews overlapping it (14 Oct 2026, 3:10pm) ----------
   James: "move the image up above the reviews, but put the reviews on top of the image overlapping it". The photo
   sits under the lede; the reviews panel is lifted over its bottom edge as a card with a shadow. */
.hh-media { margin-top: 26px; }
.hh-media .hh-photo-img { aspect-ratio: 16 / 8; }
.hh-media .hh-proof { position: relative; margin: clamp(-120px, -9vw, -72px) clamp(16px, 2.4vw, 28px) 0; background: var(--paper);
  box-shadow: 0 1px 3px rgba(38, 40, 42, .08), 0 20px 44px -18px rgba(38, 40, 42, .35); }
@media (max-width: 600px) {
  .hh-media { margin-top: 20px; }
  .hh-media .hh-photo-img { aspect-ratio: 4 / 3; }
  .hh-media .hh-proof { margin: -56px 10px 0; padding: 12px 12px 12px; border-radius: 12px; background: var(--paper); }
  .hh-media .hh-scroll { margin: 0 -12px; padding: 0 12px 2px; scroll-padding: 0 12px; }
}

/* ---------- Quote forms: a Google reviews band along the foot (14 Oct 2026, 3:16pm) ----------
   James: "add to the bottom of the form like theyve done here with the google reviews". Full width of the card on the
   sky background, the Google mark and score on the left, the line on the right. */
.qcard-google { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap;
  margin: 24px calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad)); padding: 14px var(--card-pad); background: var(--sky); border-top: 1px solid var(--line); }
.qcard-google p { margin: 0; }
.qcg-badge { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 8px; row-gap: 2px; align-items: center; }
.qcg-badge .g-logo { grid-row: 1; }
.qcg-name { grid-row: 1; font: 600 .6875rem/1.1 var(--text); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.qcg-score { grid-column: 1 / -1; display: inline-flex; align-items: baseline; gap: 6px; }
.qcg-score strong { font: 600 1.125rem/1 var(--text); color: var(--ink); }
.qcg-score .stars { color: var(--star); letter-spacing: 1px; font-size: 1rem; }
.qcg-text { font-size: .9375rem; line-height: 1.35; color: var(--ink-soft); text-align: right; }
.qcg-text strong { color: var(--ink); font-weight: 600; }
@media (max-width: 560px) {
  .qcard-google { flex-wrap: nowrap; gap: 12px; padding: 12px var(--card-pad); }
  .qcg-text { font-size: .8125rem; }
}

/* The privacy line, moved from under the button into the Google band (14 Oct 2026, 3:19pm): small print across its foot. */
.qcard-google .qcg-privacy { flex: 1 0 100%; margin: 2px 0 0; padding-top: 10px; border-top: 1px solid var(--line); font-size: .8125rem; line-height: 1.4; color: var(--ink-soft); }
.qcg-privacy a { color: var(--ink-soft); text-underline-offset: 2px; white-space: nowrap; }
@media (max-width: 560px) { .qcard-google { flex-wrap: wrap; } .qcg-badge, .qcg-text { flex: 0 1 auto; } .qcg-text { margin-left: auto; } }

/* ---------- Home hero: the accreditation logos under the quote form (14 Oct 2026, 3:22pm) ----------
   James: "remove the accreditations bar, and put the accrediations logo somewhere in the hero that fits the design
   well". A small label over a thin rule, then the five logos in one row, scaled to about 80% of their strip size so
   they read as a quiet badge row under the form. Phones: three then two, centred. Markup: heroAccreditations(). */
.hh-acc { margin-top: 28px; }
.hh-acc-label { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; font: 500 .8125rem/1.3 var(--text); letter-spacing: .02em; color: var(--ink-soft); white-space: nowrap; }
.hh-acc-label::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.hh-acc-logos { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hh-acc-logos li { display: flex; align-items: center; }
.hh-acc-logos img { display: block; width: auto; height: calc(var(--h) * .8); max-width: none; }
@media (max-width: 999px) {
  .hh-acc { max-width: 30rem; margin-left: auto; margin-right: auto; }
}
@media (max-width: 374px) {
  /* Very small phones: three then two, centred. */
  .hh-acc-logos { flex-wrap: wrap; justify-content: center; gap: 14px 24px; }
}
/* The Google band's line in smaller print wherever the form is narrow (tablets' side column and phones), so the badge
   and the line stay side by side. */
@media (max-width: 1239px) { .qcg-text { font-size: .8125rem; } }
@media (max-width: 374px) { .qcg-text { margin-left: 0; text-align: left; } }

/* ---------- Quote forms: two steps, postcode first (14 Oct 2026, 3:51pm) ----------
   James: "yes do option B" (insights/2026-10-14_quote-form-conversion-research.md). Step 1: "What's your postcode?",
   a hint, and "Check my postcode". Step 2: a sky-blue line saying the area is covered (with a Change button), then
   "Who should we send your quote to?" and the four contact boxes. "Step 1 of 2" and "Step 2 of 2" sit at the right of
   each step's question. Outside the area, a warm note under the postcode. Without JavaScript both steps show as one
   form and the check button and step counts are hidden. Markup: quoteTwoStep() in src/lib/html.mjs. */
.qf--two .qf2-pc label, .qf2-lead { margin: 0 0 6px; font: 600 1.0625rem/1.3 var(--text); color: var(--ink); }
.qf2-pc .qf-hint { margin: 0 0 10px; font-size: .9375rem; line-height: 1.4; }
.qf2-pc { margin-bottom: 16px; }
.qf2-check { display: none; }
.qf2-step--2 { margin-top: 8px; }
.qf2-lead { margin: 0 0 14px; }
.js .qf2-check { display: flex; }
.js .qf--two:not(.is-step2) .qf2-step--2,
.js .qf--two.is-step2 .qf2-step--1 { display: none; }
.js .qf2-step--2 { margin-top: 0; }
.qf2-check[aria-disabled="true"] { opacity: .85; cursor: progress; }
/* Outside the area: a warm note, not an error. */
.qf2-out { margin: -2px 0 16px; padding: 12px 14px; border-radius: 8px; background: #fff5ec; box-shadow: inset 3px 0 0 var(--sun-solid);
  font-size: .9375rem; line-height: 1.45; color: var(--ink); }
.qf2-out[hidden] { display: none; }
.qf2-out p { margin: 0; }
.qf2-out p + p { margin-top: 6px; }
.qf2-out a { color: var(--ink); font-weight: 600; white-space: nowrap; }
/* Inside the area: the postcode confirmed, with a way back. */
.qf2-area { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 18px; padding: 6px 6px 6px 12px;
  border-radius: 8px; background: var(--sky); }
.qf2-area[hidden] { display: none; }
.qf2-area-text { display: flex; align-items: center; gap: 10px; margin: 0; font: 600 1rem/1.35 var(--text); color: var(--ink); }
.qf2-tick { flex: none; width: 22px; height: 22px; }
.qf2-tick circle { fill: #237a45; }
.qf2-tick path { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.qf2-change { flex: none; min-height: 44px; padding: 0 8px; border: 0; background: none; color: var(--ink); font: 500 .9375rem var(--text);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.qf2-change:hover { color: var(--ink-soft); }
.qf2-change:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; border-radius: 4px; }
/* Narrow cards (phones): the confirmed line stays on one line beside Change. */
@container (max-width: 330px) {
  .qf2-area { padding: 4px 2px 4px 10px; gap: 4px; }
  .qf2-area-text { gap: 8px; font-size: .875rem; }
  .qf2-tick { width: 20px; height: 20px; }
  .qf2-change { padding: 0 8px; font-size: .875rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .js .qf--two.is-step2 .qf2-step--2 { animation: qf2-in .25s ease-out; }
  @keyframes qf2-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}

/* ---------- Quote cards: "Step 1" and "Step 2" tabs on the top edge (14 Oct 2026, 4:10pm) ----------
   James, with another installer's form: "can we add step 1 and step 2 to the form like theyve done here". Two tabs at
   the card's top right, standing on its sun stripe. The current step is amber, the colour the stripe ends in, so it
   reads as the stripe rising into a tab; the other is pale; a finished step gets a green tick. Hidden without
   JavaScript, when both steps show at once. Markup: quoteCard() in src/lib/html.mjs; site.js moves them. */
.qcard-steps { display: none; }
.js .qcard-steps { position: relative; z-index: 2; display: flex; justify-content: flex-end; gap: 4px; margin: 0; padding: 0 18px 0 0; list-style: none; }
.qcard-step { padding: 7px 16px 6px; border-radius: 8px 8px 0 0; background: var(--sky-deep); font: 600 .875rem/1.2 var(--text); color: var(--ink-soft); }
.qcard-step.is-current { background: var(--sun-amber); color: var(--ink); }
.qcard-step.is-done::before { content: ""; display: inline-block; width: 9px; height: 5px; margin: 0 8px 3px 0; border-left: 2px solid #237a45; border-bottom: 2px solid #237a45; transform: rotate(-45deg); }

/* ---------- Home hero, rebuilt round the two-step form (14 Oct 2026, 4:10pm) ----------
   James: "redesign the hero of the homepage to account for this new form design as it's changed the entire dynamic".
   The form now opens with one question, so its card is short, and the old layout left a gap under it. Two rows now:
   1. The promise and the one question, side by side: the keyword line, headline, the line under it and the
      accreditation logos on the left; the form, with its Step 1 and Step 2 tabs, on the right. Both end at about the
      same height on step 1.
   2. The proof, across the full width: the Grimsby install photo as a wide band, with the reviews card over its lower
      edge and the three customers' words side by side under the ratings.
   Phones: keyword line, headline, the line under it, the form (now on the first screen), the logos, then the photo
   with the reviews over it (swipe the words, as before). Tablets: the same order, with the words one under another.
   Kept from James's earlier choices: plain white, no photo behind the form, the reviews over the photo, the logos in
   the hero. Markup: home() in src/pages/home.mjs. */
.hh-grid > .hh-acc { margin-top: 0; }
.hh-grid > .hh-media { margin-top: 8px; }
@media (min-width: 1000px) {
  .hh-grid { grid-template-rows: auto 1fr auto; grid-template-areas: "copy side" "acc side" "proof proof"; row-gap: 0; }
  .hh-copy { grid-area: copy; }
  .hh-side { grid-area: side; align-self: start; }
  .hh-grid > .hh-acc { grid-area: acc; align-self: start; max-width: 34rem; margin: 44px 0 0; }
  .hh-grid > .hh-acc .hh-acc-logos img { height: calc(var(--h) * .9); }
  .hh-grid > .hh-media { grid-area: proof; margin-top: clamp(56px, 6vw, 84px); }
  .hh-grid > .hh-media .hh-photo-img { aspect-ratio: 1120 / 400; object-position: 50% 30%; border-radius: 20px; }
  .hh-grid > .hh-media .hh-proof { max-width: calc(100% - 64px); margin: -168px auto 0; padding: 0 clamp(22px, 2.4vw, 30px); border-radius: 18px; }
  .hh-grid > .hh-media .hh-scores { padding: 18px 0 16px; }
  .hh-grid > .hh-media .hh-quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Each customer's name sits at the foot of its column, so the three line up whatever the length of the words. */
  .hh-grid > .hh-media .hh-quote { grid-template-rows: 1fr auto; row-gap: 10px; padding: 20px 22px 22px; }
  .hh-grid > .hh-media .hh-quote:first-child { padding-left: 0; }
  .hh-grid > .hh-media .hh-quote:last-child { padding-right: 0; }
  .hh-grid > .hh-media .hh-quote + .hh-quote { border-top: 0; border-left: 1px solid var(--line); }
}
@media (min-width: 601px) and (max-width: 999px) {
  .hh-side, .hh-grid > .hh-acc { width: 100%; max-width: 32rem; margin-left: auto; margin-right: auto; }
  .hh-grid > .hh-media { margin-top: 24px; }
}

/* ---------- Home hero on the install photo (14 Oct 2026, 4:29pm) ----------
   James: "use the picture of the solar panels as the background of the hero, choose the best picture. And make sure all
   the content still pops out". The Grimsby install fills the hero behind a dark wash (deepest on the left, under the
   words; lighter towards the form) and stops part way down the reviews card, so the card sits across its lower edge.
   White headline and line under it; the logos on a white panel so their own colours hold; the form a white card with
   a deeper shadow. Markup: heroBackground() in src/pages/home.mjs. */
.page-home .hero.hh--photo { position: relative; isolation: isolate; background: var(--paper); --hh-cut: 150px; }
.hh-bg { position: absolute; inset: 0 0 var(--hh-cut) 0; z-index: -1; overflow: hidden; background: #2b3036; }
.hh-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.hh-bg::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(18, 21, 24, .84) 0%, rgba(18, 21, 24, .7) 42%, rgba(18, 21, 24, .32) 68%, rgba(18, 21, 24, .14) 100%),
              linear-gradient(180deg, rgba(18, 21, 24, .2) 0%, rgba(18, 21, 24, 0) 30%, rgba(18, 21, 24, .25) 100%); }
/* Phones and tablets: the words sit over the whole width, so the wash is even. */
@media (max-width: 999px) {
  .hh-bg::after { background: linear-gradient(180deg, rgba(18, 21, 24, .8) 0%, rgba(18, 21, 24, .66) 45%, rgba(18, 21, 24, .5) 100%); }
}
.hh--photo .hh-copy, .hh--photo h1, .hh--photo .hero-lede { color: #fff; }
.page-home .hh--photo h1 .kicker, .page-home .hh--photo h1 .display-usp { color: #fff; }
.page-home .hh--photo .hero-lede { color: rgba(255, 255, 255, .9); text-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.page-home .hh--photo h1 { text-shadow: 0 2px 18px rgba(0, 0, 0, .25); }
.hh--photo .hh-pin { stroke: var(--sun-amber); }
.hh--photo .hh-side .hero-form { box-shadow: 0 2px 6px rgba(0, 0, 0, .18), 0 30px 70px -18px rgba(0, 0, 0, .55); }
.hh--photo .qcard-step:not(.is-current) { background: #e9eff3; }
/* The logos on a white panel, label above it in white. */
.hh--photo .hh-acc-label { color: rgba(255, 255, 255, .88); }
.hh--photo .hh-acc-label::after { background: rgba(255, 255, 255, .3); }
.hh--photo .hh-acc-logos { padding: 14px 22px; border-radius: 12px; background: rgba(255, 255, 255, .96); box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .45); }
/* The reviews card across the photo's lower edge (no photo of its own now). */
.hh--photo .hh-media .hh-proof { margin: 0; box-shadow: 0 2px 6px rgba(0, 0, 0, .12), 0 28px 60px -20px rgba(0, 0, 0, .5); }
@media (min-width: 1000px) {
  .page-home .hero.hh--photo { padding-top: clamp(40px, 4.4vw, 64px); --hh-cut: 190px; }
  .hh--photo .hh-grid > .hh-media { margin-top: clamp(48px, 5vw, 72px); }
  .hh--photo .hh-grid > .hh-media .hh-proof { max-width: calc(100% - 64px); margin: 0 auto; }
}
@media (min-width: 601px) and (max-width: 999px) {
  .page-home .hero.hh--photo { --hh-cut: 220px; }
  .hh--photo .hh-media .hh-proof { margin: 0; }
}
@media (max-width: 600px) {
  .page-home .hero.hh--photo { padding-top: 28px; --hh-cut: 170px; }
  .hh--photo .hh-acc-logos { padding: 12px 14px; }
  .hh--photo .hh-media .hh-proof { margin: 0 0 0; padding: 14px 14px 12px; }
  .hh--photo .hh-media .hh-scroll { margin: 0 -14px; padding: 0 14px 2px; scroll-padding: 0 14px; }
}

/* ---------- Home hero on the photo, made bright (14 Oct 2026, 4:35pm) ----------
   James: "instead of dimming it theres any way in design to make it bright, I want it to represent a brighter feeling".
   The dark wash is now a white one: soft white under the words on the left (dark text again, as on the rest of the
   site), clearing to the right so the blue sky and the panels show at full strength beside the form. The photo is
   framed higher to show more sky, and slightly lifted in colour. Phones and tablets: white at the top under the
   words, thinning towards the form. The form, logos and reviews stay as cards. Overrides the 4:29pm block above. */
.hh--photo .hh-bg { background: var(--sky); }
.hh--photo .hh-bg img { object-position: 50% 12%; filter: saturate(1.12) brightness(1.06); }
.hh--photo .hh-bg::after {
  background: linear-gradient(90deg, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .9) 34%, rgba(255, 255, 255, .55) 52%, rgba(255, 255, 255, .12) 70%, rgba(255, 255, 255, 0) 100%),
              linear-gradient(180deg, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, .25) 100%); }
@media (max-width: 999px) {
  .hh--photo .hh-bg::after { background: linear-gradient(180deg, rgba(255, 255, 255, .93) 0%, rgba(255, 255, 255, .88) 34%, rgba(255, 255, 255, .5) 60%, rgba(255, 255, 255, .2) 100%); }
}
.hh--photo .hh-copy, .hh--photo h1, .page-home .hh--photo h1 .kicker, .page-home .hh--photo h1 .display-usp { color: var(--ink); }
.page-home .hh--photo h1 { text-shadow: none; }
.page-home .hh--photo .hero-lede { color: var(--ink-soft); text-shadow: none; }
.hh--photo .hh-pin { stroke: var(--sun-coral); }
.hh--photo .hh-acc-label { color: var(--ink-soft); }
.hh--photo .hh-acc-label::after { background: var(--line-strong); }
.hh--photo .hh-acc-logos { box-shadow: 0 1px 3px rgba(38, 40, 42, .08), 0 12px 30px -14px rgba(38, 40, 42, .3); }
.hh--photo .hh-side .hero-form { box-shadow: 0 2px 6px rgba(38, 40, 42, .12), 0 30px 70px -20px rgba(38, 40, 42, .45); }
.hh--photo .qcard-step:not(.is-current) { background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
/* The label and the logos share one white panel, so the label reads wherever it lands on the photo (on phones it sat
   over the roof). */
.hh--photo .hh-acc { padding: 14px 22px 16px; border-radius: 12px; background: rgba(255, 255, 255, .96);
  box-shadow: 0 1px 3px rgba(38, 40, 42, .08), 0 12px 30px -14px rgba(38, 40, 42, .3); }
.hh--photo .hh-acc-logos { padding: 0; border-radius: 0; background: none; box-shadow: none; }
.hh--photo .hh-acc-label { margin-bottom: 12px; }
.hh--photo .hh-acc-label::after { background: var(--line); }
@media (max-width: 600px) { .hh--photo .hh-acc { padding: 12px 14px 14px; } }

/* ---------- "Why choose SolarSave?": each review as a review card (14 Oct 2026, 4:39pm) ----------
   James: "in these parts, can we design the review part of each box better". Was a quote with a coral rule down its
   left. Now a white card inside each sky box (sky inside the white lead box): five stars and "Trustpilot" along the
   top, the words a little larger, then a footer with the customer's initial in the sun ring, their name and the month.
   A large, faint coral quote mark sits in the top right corner. Markup: whyItem() in src/pages/home.mjs. */
.why-review { position: relative; margin: 20px 0 0; padding: 18px 22px 16px; border-radius: 16px; background: var(--paper);
  box-shadow: 0 1px 2px rgba(38, 40, 42, .06), 0 14px 30px -20px rgba(38, 40, 42, .35); overflow: hidden; }
.why-review::before { content: ""; position: absolute; top: 14px; right: 16px; width: 46px; height: 46px; opacity: .2; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ec7a4a' transform='rotate(180 12 12)' d='M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z'/%3E%3C/svg%3E") center / contain no-repeat; }
.why-item--lead .why-review { background: var(--sky); box-shadow: none; }
.why-review-top { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: .875rem; color: var(--ink-soft); }
.why-review-top .stars { color: var(--star); letter-spacing: 2px; font-size: 1rem; }
.why-review-src { font-weight: 600; color: var(--ink); }
.why-item .why-review blockquote { margin: 0; padding: 0; border: 0; }
.why-item .why-review blockquote p { position: relative; font: 400 1.1875rem/1.45 var(--display); color: var(--ink); }
.why-item--lead .why-review blockquote p { font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); line-height: 1.35; }
.why-review figcaption { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.why-item--lead .why-review figcaption { border-top-color: var(--line-strong); }
.why-review-initial { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font: 600 .9375rem/1 var(--text); color: var(--ink);
  border: 2px solid transparent; background: linear-gradient(var(--paper), var(--paper)) padding-box, linear-gradient(225deg, var(--sun-coral), var(--sun-amber)) border-box; }
.why-review-who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; font-size: .9375rem; color: var(--ink-soft); }
.why-review-who strong { font-weight: 600; color: var(--ink); }
@media (max-width: 560px) {
  .why-review { padding: 16px 16px 14px; }
  .why-review::before { width: 36px; height: 36px; top: 12px; right: 12px; }
}

/* ---------- Home hero, after Atomic Marketing's solar landing page (14 Oct 2026, 5:05pm) ----------
   Trust at the top: the star rating in a white pill above the keyword line; the keyword line now "Local MCS certified
   solar panel installers in [place]"; four selling points as ticks under the line below the headline (after the form on
   phones, so the form still starts high); the accreditation logos back under the form, after the Google rating, as in
   the video. Markup: heroRating(), heroTicks() and home() in src/pages/home.mjs. */
.hh-rating { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 0 0 18px; padding: 8px 16px; border-radius: 999px;
  background: rgba(255, 255, 255, .92); box-shadow: 0 1px 3px rgba(38, 40, 42, .08), 0 8px 20px -12px rgba(38, 40, 42, .3); font-size: .9375rem; color: var(--ink-soft); }
.hh-rating > span { display: inline-flex; align-items: center; gap: 8px; }
.hh-rating .stars { color: var(--star); letter-spacing: 1px; font-size: 1rem; }
.hh-rating strong { color: var(--ink); font-weight: 600; }
.hh-rating-g { padding-left: 16px; border-left: 1px solid var(--line-strong); }
.hh-rating .g-logo { margin: 0; }
.page-home .hero h1 .kicker > span { min-width: 0; }
.hh-ticks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 12px 28px; }
.hh-ticks li { display: flex; align-items: center; gap: 10px; font: 500 1.0625rem/1.35 var(--text); color: var(--ink); }
.hh-ticks li::before { content: ""; flex: none; width: 24px; height: 24px; border-radius: 50%;
  background: var(--sun-solid) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.5l3.2 3.2L17 8.8' fill='none' stroke='%2326282a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; }
.hh-side .hh-acc { margin-top: 24px; }
@media (min-width: 1000px) {
  .hh-grid { grid-template-areas: "copy side" "ticks side" "proof proof"; }
  .hh-grid > .hh-ticks { grid-area: ticks; align-self: start; margin-top: 30px; }
}
@media (max-width: 999px) {
  .hh-grid > .hh-ticks { padding: 16px 18px; border-radius: 14px; background: rgba(255, 255, 255, .94); grid-template-columns: minmax(0, 1fr); gap: 10px;
    width: 100%; max-width: 32rem; margin: 0 auto; box-shadow: 0 1px 3px rgba(38, 40, 42, .08), 0 12px 30px -14px rgba(38, 40, 42, .3); }
  .hh-ticks li { font-size: 1rem; }
}
@media (max-width: 600px) {
  /* Phones: the Trustpilot line only, on one line (the Google rating is on the form just below). */
  .hh-rating { display: flex; width: fit-content; max-width: 100%; margin-bottom: 14px; padding: 7px 14px; font-size: .8125rem; }
  .hh-rating .stars { font-size: .875rem; }
  .hh-rating-x, .hh-rating-g { display: none !important; }
}
/* The ticks one under another on every screen (14 Oct 2026, 5:10pm; James: "can we do the ticks one after eachover"). */
.hh-ticks { grid-template-columns: minmax(0, 1fr); gap: 12px; }
/* Key words in bold in the line under the headline (14 Oct 2026, 5:11pm; James, with another installer's hero: "they
   bolded certain words in the subheading"): what makes it theirs ("matched to your electricity use") and what customers
   praise most ("Clear costs, no pushy sales"). Inline, in full black, unlike the earlier rule that put a strong on its
   own line. */
.page-home .hh--photo .hero-lede strong { display: inline; margin: 0; font-weight: 600; color: var(--ink); }

/* ---------- Quote cards: no dark band, no orange stripe (14 Oct 2026, 5:12pm) ----------
   James: "on the get quote form can we get rid of the dark background, and the orange strip on top". Every quote card's
   head is now white like the rest of the card, the title in dark text and the line under it in grey, with a thin rule
   before the first question. The arrow cut into the band's left edge went with the band. The Step 1 and Step 2 tabs
   stay (the current one amber). */
.hero-form.qcard::before { display: none; }
.qcard-head { margin-bottom: 22px; padding: 26px var(--card-pad) 20px; background: none; color: var(--ink); clip-path: none; border-bottom: 1px solid var(--line); }
.hero-form .qcard-head h2 { color: var(--ink); }
.qcard-sub { color: var(--ink-soft); }
@media (max-width: 560px) {
  .qcard-head { margin-bottom: 18px; padding: 20px var(--card-pad) 16px; clip-path: none; }
}
/* The title and the line under it centred (14 Oct 2026, 5:13pm; James: "can we centre Get My Free Solar Quote / Get a
   quote and we'll help calculate how much you could save."). */
.qcard-head { text-align: center; }
.qcard-sub { margin-left: auto; margin-right: auto; }

/* ---------- Home page brand pass (14 Oct 2026, 5:24pm) ----------
   James asked what further down the home page didn't match the bright hero and the white quote form, then "sort it":
   1. The prices band is pale blue with dark text, not dark (home(): section--sky section--prices). The price stays the
      largest thing in it.
   2. Every "Get a free quote" button on the home page now says "Get My Free Solar Quote", like the hero, header and form.
   3. Ticked lists everywhere use the hero's tick: a filled orange circle with a dark tick (was a hollow orange ring).
   4. The Google reviews strip matches the site's other reviews (google-reviews.css, end).
   5. No orange outlines: the Fox ESS card and the "No pressure, no rush" box are plain white cards with a soft shadow,
      without the gradient border and the faint ring in the corner, like the quote form. */
.section--prices .price-figure { color: var(--ink); }
.section--prices .price-figure small { color: var(--ink-soft); }
.section--prices .warranties { border-top-color: var(--line-strong); }
.section--prices .warranties div { border-bottom-color: var(--line-strong); }
.section--prices .referral { margin-top: 28px; padding: 20px 22px; border-radius: 14px; background: var(--paper); box-shadow: 0 1px 3px rgba(38, 40, 42, .06), 0 12px 28px -18px rgba(38, 40, 42, .3); }

.ticks li { padding-left: 34px; }
.ticks li::before { left: 0; top: .12em; width: 22px; height: 22px; border: 0;
  background: var(--sun-solid) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.5l3.2 3.2L17 8.8' fill='none' stroke='%2326282a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }


/* 14 Oct 2026: warranty labels are longer now ("Panel performance"), so a wider label column keeps them on one line. */
@media (min-width: 561px) { .warranties div { grid-template-columns: 11rem minmax(0, 1fr); } }
/* In a narrow side column (city pages) the label sits above its text instead. */
.split .warranties div { grid-template-columns: minmax(0, 1fr); gap: 2px; }

/* ===== The sun arc: SolarSave's visual mark (14 Oct 2026) =====
   The orange ring from the "o" in the logo, faded, rising out of a corner. James chose it as the brand's visual
   identity. The two featured cards (the first "Why choose" reason, the Fox ESS system) draw it with ::after above;
   everywhere else it's a background image, so it needs no extra markup: sun-arc.svg on light backgrounds,
   sun-arc-dark.svg on dark ones. Corner arcs are 260px; page-level ones larger. */
.fact-card, .section--sky .fact-card, .pay {
  background-image: url("sun-arc.svg"); background-repeat: no-repeat;
  background-position: right -110px top -150px; background-size: 260px 260px; }
/* Price boxes are narrow, so the arc sits further into the corner, clear of the price. */
.fact-card, .section--sky .fact-card { background-position: right -140px top -170px; }
.page-hero {
  background: url("sun-arc.svg") right -150px top -230px / 480px 480px no-repeat,
    linear-gradient(180deg, var(--paper) 0%, var(--paper) 45%, var(--sky) 100%); }
/* Rising out of the right-hand edge, level with the top of the quote card (on 1,440px screens it sits behind the card). */
#get-quote {
  background-image: url("sun-arc.svg"); background-repeat: no-repeat;
  background-position: right -150px top -110px; background-size: 520px 520px; }
/* Inner page headers had a small bright sunrise drawing; the faded arc replaces it, so there's one sun, not two. */
.page-sun { display: none; }
.site-footer {
  background: url("sun-arc.svg") right -170px bottom -330px / 520px 520px no-repeat; }
@media (max-width: 700px) {
  .page-hero { background-position: right -160px top -200px, 0 0; background-size: 300px 300px, auto; }
  #get-quote { background-position: right -170px top -210px; background-size: 320px 320px; }
  .site-footer { background-position: right -130px bottom -220px; background-size: 340px 340px; }
}

/* The installation team: a panel drawing in the sun ring, in place of an initial. */
.person .ring--icon svg { width: 46px; height: 46px; fill: none; stroke: var(--ink); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; }
.person .ring--icon svg .warm { stroke: var(--sun-coral); stroke-width: 2; }

/* Hero reviews as full review cards (16 Oct 2026, as on the commercial page): stars and source, the words in full,
   then the initial, name and date. The excerpt layout above still sets the panel, spacing and phone swiping. */
.hh-proof .hh-quote.hh-review { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.hh-review-top { display: flex; align-items: center; gap: 10px; margin: 0; font-size: .875rem; color: var(--ink-soft); }
.hh-review-top .stars { color: var(--star); letter-spacing: 2px; font-size: 1rem; }
.hh-review-src { font-weight: 600; color: var(--ink); }
.hh-proof .hh-review blockquote { margin: 0 0 auto; }
.hh-review-who { display: flex; align-items: center; gap: 10px; margin: 0; padding-top: 10px; border-top: 1px solid var(--line); font-size: .875rem; line-height: 1.35; color: var(--ink-soft); }
.hh-review-who strong { margin-right: 6px; font-weight: 600; color: var(--ink); background: none; }
.hh-review-who .hh-initial { flex: none; }

/* 0% deposit beside the hero button (16 Oct 2026): a white pill, so it reads on every hero background. */
.deposit-pill { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 18px 0 0; padding: 5px 14px 5px 5px; border-radius: 999px;
  background: var(--paper); box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 8px 20px -10px rgba(0, 0, 0, .25); font-size: .9375rem; line-height: 1.3; color: var(--ink); }
.deposit-pill strong { padding: 4px 11px; border-radius: 999px; background: var(--sun-amber); font-weight: 700; color: var(--ink); }

/* Cookie banner (17 Oct 2026): asks before Google Analytics loads (assets/site.js). Bottom left on wide screens, along
   the bottom on phones. Accept and Reject look the same. "Cookie settings" in the footer brings it back (with JavaScript). */
.cookie-banner { position: fixed; z-index: 60; left: 16px; right: 16px; bottom: 16px; max-width: 30rem; padding: 18px 20px;
  background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 2px 6px rgba(38, 40, 42, .12), 0 22px 48px -18px rgba(38, 40, 42, .45); }
.cookie-text { margin: 0; padding-right: 30px; font-size: 1rem; line-height: 1.5; color: var(--ink-soft); }
.cookie-text strong { display: block; margin-bottom: 4px; color: var(--ink); font-size: 1.0625rem; font-weight: 600; }
.cookie-text a { color: var(--ink); font-weight: 600; white-space: nowrap; }
@media (max-width: 560px) { .cookie-banner { left: 10px; right: 10px; bottom: 10px; padding: 14px 16px; } .cookie-actions { margin-top: 12px; } }
.cookie-actions { display: flex; gap: 10px; margin-top: 14px; }
.cookie-actions .btn { flex: 1; }
.cookie-close { position: absolute; top: 8px; right: 8px; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 8px;
  background: none; color: var(--ink-soft); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.cookie-close:hover { background: var(--sky); color: var(--ink); }
.footer-cookie { display: none; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }
.js .footer-cookie { display: inline; }