/* Home battery storage page (/battery-storage/). Rebranded 16 Oct 2026 to match the rest of the site, as the commercial
   page was on 15 Oct: daylight sky fading to white at the top, white and pale blue sections taking turns, the sun
   gradient (the logo's ring) for the offer and the price, the sun ring round every icon, white cards with a soft
   shadow on pale blue (pale blue cards on white), review cards, the ratings pill and "Get My Free Solar Quote".
   Loaded by that page only, after assets/solar-page.css (icons, the flow diagram, the bars).
   Markup: batteryStorage() in src/pages/services.mjs. What's the page's own: the battery photo on the hero card with
   the from price, the panels-to-evening flow, the battery figures, the power cut states, the two lists of where a
   battery can and can't go. */

.page-battery { --bs-radius: 20px; --bs-shadow: 0 1px 2px rgba(38, 40, 42, .06), 0 18px 40px -28px rgba(38, 40, 42, .4);
  --bs-sun: linear-gradient(135deg, var(--sun-coral), var(--sun-amber)); }

/* ---------- Hero: the words, the button and the logos; a battery we fitted on its card beside them ---------- */
.bs-hero { position: relative; overflow: hidden; padding: clamp(24px, 3.4vw, 44px) 0 clamp(40px, 5vw, 64px);
  background: linear-gradient(180deg, var(--sky) 0%, #f5f8fa 52%, var(--paper) 100%); }
.bs-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.bs-hero h1 { display: flex; flex-direction: column; gap: 12px; max-width: 40rem; }
.bs-hero h1 .kicker { font: 500 1.125rem/1.4 var(--text); color: var(--ink-soft); }
.bs-hero h1 .display { font-size: clamp(2.375rem, 1.45rem + 3.1vw, 4rem); font-weight: 500; line-height: 1.04; letter-spacing: -0.025em; text-wrap: balance; }
.bs-hero .page-lede { max-width: 36rem; }
.bs-hero .crumbs ol { margin-bottom: 20px; }
.bs-hero .page-actions { margin-top: 0; }
.bs-acc { list-style: none; margin: 30px 0 0; padding: 22px 0 0; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; max-width: 34rem; }
.bs-acc li { display: flex; align-items: center; }
.bs-acc img { display: block; width: auto; height: calc(var(--h) * .78); max-width: none; }

.bs-hero-card { position: relative; }
.bs-hero-card::before { content: ""; position: absolute; z-index: 0; width: 560px; height: 560px; right: -230px; top: -200px;
  background: url("sun-arc.svg") center / contain no-repeat; pointer-events: none; }
.bs-offer { position: relative; z-index: 1; margin: 0; padding: clamp(18px, 2.4vw, 26px); border-radius: 22px; border: 3px solid transparent;
  background: linear-gradient(var(--paper), var(--paper)) padding-box, var(--bs-sun) border-box;
  box-shadow: 0 1px 2px rgba(38, 40, 42, .06), 0 34px 64px -38px rgba(38, 40, 42, .55); }
.bs-offer-tag { display: inline-block; margin: 0 0 12px; padding: 5px 14px; border-radius: 999px; background: var(--bs-sun); font-weight: 600; font-size: .9375rem; color: var(--ink); }
.bs-offer-img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; background: var(--line); }
.bs-offer figcaption { margin-top: 10px; font-size: .9375rem; line-height: 1.45; color: var(--ink-soft); }
.bs-offer-ticks { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }

@media (min-width: 1000px) {
  .bs-hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "text card" "act card";
    column-gap: clamp(48px, 6vw, 96px); row-gap: 30px; align-items: start; }
  .bs-hero-text { grid-area: text; }
  .bs-hero-card { grid-area: card; margin-top: 46px; }
  .bs-hero-act { grid-area: act; }
}
@media (max-width: 999px) {
  .bs-hero-card { max-width: 30rem; }
  .bs-hero-card::before { width: 380px; height: 380px; right: -170px; top: -150px; }
}
@media (max-width: 700px) { .bs-hero-card::before { width: 300px; height: 300px; right: -200px; top: -40px; } }
/* Straight after the hero, whose foot is already white: less space above the first section. */
.page-battery .bs-hero + .section { padding-top: clamp(32px, 4vw, 56px); }

/* ---------- Shared: section intros, the sun ring, cards and panels ---------- */
.bs-head { max-width: 48rem; }
.bs-ring { flex: none; display: grid; place-items: center; width: 52px; height: 52px; 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; }
.bs-ring .sp-icon { width: 28px; height: 28px; }

.bs-cards { list-style: none; margin: clamp(44px, 6vw, 64px) 0 0; padding: 0; display: grid; gap: clamp(14px, 1.6vw, 20px); }
@media (min-width: 900px) { .bs-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.bs-card { padding: clamp(20px, 2.4vw, 28px); border-radius: var(--bs-radius); background: var(--paper); box-shadow: var(--bs-shadow); }
.bs-card .bs-ring { margin-bottom: 16px; }
.bs-card h3 { font-size: 1.1875rem; font-weight: 600; line-height: 1.3; }
.bs-card p { margin-top: 8px; color: var(--ink-soft); line-height: 1.6; }

.bs-split { display: grid; gap: 32px; }
.bs-split h2 { text-wrap: balance; }
@media (min-width: 900px) { .bs-split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 88px); align-items: center; } }

.bs-panel { position: relative; padding: clamp(22px, 3vw, 30px); border-radius: var(--bs-radius); background: var(--paper); box-shadow: var(--bs-shadow); }
.bs-panel h3 { font-size: 1.25rem; font-weight: 600; line-height: 1.3; }
.bs-panel .bs-ring { margin-bottom: 16px; }
.bs-panel > p { margin-top: 8px; line-height: 1.6; color: var(--ink-soft); }
.bs-panel--sun { overflow: hidden; border: 3px solid transparent; background: linear-gradient(var(--paper), var(--paper)) padding-box, var(--bs-sun) border-box; }
.bs-panel--sun > * { position: relative; z-index: 1; }
/* The faded sun arc rising in the corner, as on the home page's first "Why choose" card. */
.bs-panel--sun::after { content: ""; position: absolute; z-index: 0; width: 260px; height: 260px; right: -110px; top: -120px;
  background: url("sun-arc.svg") center / contain no-repeat; pointer-events: none; }
.bs-ask { margin-top: 22px; }

/* On white sections, cards and panels turn pale blue and lose their shadow. */
.page-battery .section:not(.section--sky) .bs-card,
.page-battery .section:not(.section--sky) .bs-panel:not(.bs-panel--sun) { background: var(--sky); box-shadow: none; }

/* ---------- Figures: sizes and costs ---------- */
.bs-figs { display: grid; gap: clamp(14px, 1.6vw, 20px); }
@media (min-width: 640px) { .bs-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .bs-figs:not(.bs-figs--2) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.bs-fig { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 8px; padding: 26px 22px 20px; border-radius: 16px; background: var(--sky); }
.bs-fig::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--bs-sun); }
.page-battery .section--sky .bs-fig { background: var(--paper); box-shadow: var(--bs-shadow); }
.bs-fig-value { font: 500 clamp(1.75rem, 1.35rem + 1.2vw, 2.375rem)/1.05 var(--display); letter-spacing: -0.02em; color: var(--ink); }
.bs-fig-label { color: var(--ink); line-height: 1.5; }
.bs-fig-src { margin-top: auto; padding-top: 6px; font-size: .875rem; color: var(--ink-soft); }
.bs-after { max-width: 48rem; margin-top: clamp(28px, 4vw, 40px); }
.bs-after p { line-height: 1.65; }

/* ---------- Backup power: three states ---------- */
.bs-states { list-style: none; margin: 0; padding: 4px clamp(20px, 2.6vw, 28px); border-radius: var(--bs-radius); background: var(--paper); box-shadow: var(--bs-shadow); }
.bs-states li { display: grid; grid-template-columns: 6.75rem minmax(0, 1fr); gap: 14px; align-items: start; padding: 20px 0; }
.bs-states li + li { border-top: 1px solid var(--line); }
.bs-state { justify-self: start; padding: 5px 12px; border-radius: 999px; font-weight: 700; font-size: .875rem; line-height: 1.2; background: var(--sky); color: var(--ink-soft); }
.bs-state--on { background: var(--bs-sun); color: var(--ink); }
.bs-states h3 { font-size: 1.0625rem; font-weight: 600; line-height: 1.35; }
.bs-states p { margin-top: 4px; color: var(--ink-soft); line-height: 1.5; }
@media (max-width: 420px) { .bs-states li { grid-template-columns: minmax(0, 1fr); gap: 8px; } }

/* ---------- Where a battery can go: two lists and a photo ---------- */
.bs-where { display: grid; gap: clamp(14px, 1.6vw, 20px); }
@media (min-width: 700px) { .bs-where { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bs-where-photo { grid-column: 1 / -1; } }
@media (min-width: 1000px) { .bs-where { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr); align-items: start; } .bs-where-photo { grid-column: auto; } }
.bs-where .bs-panel h3 { margin-bottom: 14px; }
.bs-no { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.bs-no li { position: relative; padding-left: 36px; line-height: 1.45; }
.bs-no li::before { content: "\00d7"; position: absolute; left: 0; top: -1px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  font: 700 17px/1 var(--text); color: var(--paper); background: #5b6168; }
.bs-where-photo { margin: 0; }
.bs-where-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; }
@media (min-width: 700px) and (max-width: 999px) { .bs-where-photo img { aspect-ratio: 16 / 9; } }
.bs-where-photo figcaption { margin-top: 10px; font-size: .9375rem; line-height: 1.45; color: var(--ink-soft); }
.bs-where-size { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-top: clamp(24px, 3vw, 32px); max-width: 56rem; line-height: 1.55; color: var(--ink-soft); }
.bs-where-size strong { font: 500 1.375rem/1.25 var(--display); letter-spacing: -0.01em; color: var(--ink); }

/* ---------- Costs: the figures beside our price ---------- */
.bs-cost { display: grid; gap: 28px; }
@media (min-width: 1000px) { .bs-cost { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(32px, 4vw, 56px); align-items: start; } }
.bs-cost-after { margin-top: 24px; max-width: 46rem; line-height: 1.6; }
.bs-price-label { font-weight: 600; color: var(--ink); }
.bs-price-fig { margin-top: 10px; font: 500 clamp(2.5rem, 1.9rem + 1.8vw, 3.25rem)/1 var(--display); letter-spacing: -0.02em; color: var(--ink); }
.bs-price-fig small { margin-right: 6px; font: 500 1rem/1 var(--text); letter-spacing: 0; color: var(--ink-soft); }
.bs-price > p:not(.bs-price-label):not(.bs-price-fig) { margin-top: 14px; }
.bs-price .btn { margin-top: 22px; }

/* ---------- Is it worth it: export against buying ---------- */
.bs-use h3 { margin-bottom: 18px; }
.bs-use .sp-source { margin-top: 16px; }

/* ---------- What customers say: review cards ---------- */
.bs-reviews { display: grid; gap: 16px; }
@media (min-width: 800px) { .bs-reviews { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.bs-review { position: relative; margin: 0; padding: 18px 22px 16px; border-radius: 16px; background: var(--paper); overflow: hidden;
  display: flex; flex-direction: column; box-shadow: 0 1px 2px rgba(38, 40, 42, .06), 0 14px 30px -20px rgba(38, 40, 42, .35); }
.bs-review::before { content: ""; position: absolute; top: 14px; right: 16px; width: 40px; height: 40px; 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; }
.bs-review-top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 10px; padding-right: 44px; font-size: .875rem; color: var(--ink-soft); }
.bs-review-top .stars { color: var(--star); letter-spacing: 2px; font-size: 1rem; }
.bs-review-src { font-weight: 600; color: var(--ink); }
.bs-review blockquote { margin: 0 0 auto; padding: 0; border: 0; }
.bs-review blockquote p { font: 400 1.125rem/1.45 var(--display); color: var(--ink); }
.bs-review figcaption { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.bs-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; }
.bs-review-who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; font-size: .9375rem; color: var(--ink-soft); }
.bs-review-who strong { font-weight: 600; color: var(--ink); }
.page-battery .ratings-line { margin-top: 24px; }

/* ---------- More on batteries and everything else we do: cards ---------- */
.page-battery .related { display: grid; gap: 16px; }
@media (min-width: 800px) { .page-battery .related { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.page-battery .related li { padding: 20px 22px; border: 0; border-radius: 16px; background: var(--sky); }
.page-battery .related li a { font-weight: 600; }
.page-battery .services .service svg { box-sizing: content-box; width: 28px; height: 28px; padding: 11px; margin-top: 0; 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; }
.page-battery .services .service { padding: clamp(20px, 2.4vw, 28px); border: 0; border-radius: var(--bs-radius); background: var(--paper); box-shadow: var(--bs-shadow); }
.page-battery .service { grid-template-columns: 56px minmax(0, 1fr); }
@media (max-width: 700px) { .page-battery .services { grid-template-columns: minmax(0, 1fr); gap: 16px; } }
@media (min-width: 701px) { .page-battery .services { gap: 20px; } }