@charset "utf-8";
/* ==========================================================================
   SunRight Solar — design system

   Type pairing: an editorial serif for headings against a clean humanist
   sans for interface and body. That contrast is what stops the page reading
   as a generic template. Numerals are forced to the sans, because serif
   old-style figures make "6.6kW" look like a typo.

   Iconography is deliberately near-absent. Hierarchy is carried by type,
   rule weight, spacing and photography.

   1.  Tokens          7.  Site header
   2.  Reset & base    8.  Mobile navigation
   3.  Typography      9.  Site footer
   4.  Layout          10. Sticky mobile CTA
   5.  Buttons         11. Shared components
   6.  Utilities       12. Motion
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Phone number — temporarily hidden site-wide (owner, 10 Oct 2026)
   Driven by contact.phone_enabled in config/site.php: header.php adds the
   .phone-hidden class to <body> whenever that flag is false. Every phone
   CTA on the site carries a data-cta ending in "-phone", so this one rule
   covers all of them (header widget, footer chip, the mid-page and footer
   "Call" buttons, every product page's "Call 1300 SUN RIGHT" button, and
   the quote popup's phone line) without touching any template. Flip the
   config flag back to true to restore everything; nothing here needs to
   change.
   -------------------------------------------------------------------------- */
.phone-hidden [data-cta$="-phone"],
.phone-hidden .contact-method--phone,
.phone-hidden .qp__fine {
  display: none !important;
}

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand — sampled from the SunRight Solar logo artwork */
  --navy-950: #04182d;
  --navy-900: #072a4c;
  --navy-800: #0a2e56;
  --navy-700: #14487c;
  --navy-600: #1f5e9c;
  --navy-300: #a9c4df;
  --navy-100: #dce9f6;

  --orange-500: #ff5c00;   /* rules, bars, accents — 3.1:1 on white */
  --orange-600: #c34500;   /* orange that carries white text at 5.1:1 */
  --orange-700: #a33a00;
  --gold-400: #ffc400;
  --gold-300: #ffd44d;
  --gold-200: #ffe59a;

  /* Primary action gradient — the brand sunrise, orange through to gold.
     It carries NAVY text, never white: white measures 2.9:1 on the orange end
     and 1.5:1 on the gold, both far under AA. Navy runs 4.7:1 at the darkest
     stop and 9.3:1 at the lightest, so every point of the sweep passes.
     The hover pair moves LIGHTER for the same reason — darkening the orange
     end drops navy to 3.9:1 and breaks it. */
  --sun-600: #fd6800;
  --sun-400: #fe9500;
  --sun-300: #fed107;
  --grad-cta:       linear-gradient(100deg, #fd6800 0%, #fe9500 42%, #fed107 100%);
  --grad-cta-hover: linear-gradient(100deg, #ff7a1a 0%, #ffab1f 42%, #ffda33 100%);

  /* Ink — darker than a humanist face would need, because the geometric
     letterforms carry thin, even strokes and read lighter at the same value. */
  --ink: #0a2e56;
  --body: #39485e;
  --muted: #55657d;
  --on-dark: #ffffff;
  --on-dark-soft: rgba(255, 255, 255, .8);
  --on-dark-faint: rgba(255, 255, 255, .58);

  /* Surfaces */
  --white: #ffffff;
  --sky-25: #f8fbfe;
  --sky-50: #f2f7fd;
  --sky-100: #e4effa;
  --sky-200: #cfe3f6;
  --grey-50: #f6f7f9;
  --grey-100: #eef1f5;
  --line: #e3e9f0;
  --line-soft: #edf1f6;
  --line-strong: #cfd9e6;
  --line-dark: rgba(255, 255, 255, .12);

  --focus: #1f5e9c;

  /* Radii — squared and architectural rather than pill-soft */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-2xl: 36px;
  --r-pill: 999px;   /* buttons and the phone disc only */

  /* Elevation */
  --shadow-xs: 0 1px 2px rgba(7, 42, 76, .05);
  --shadow-sm: 0 1px 2px rgba(7, 42, 76, .04), 0 6px 16px -6px rgba(7, 42, 76, .08);
  --shadow-md: 0 2px 4px rgba(7, 42, 76, .03), 0 16px 32px -12px rgba(7, 42, 76, .14);
  --shadow-lg: 0 4px 10px rgba(7, 42, 76, .04), 0 34px 64px -24px rgba(7, 42, 76, .2);
  --shadow-xl: 0 8px 18px rgba(7, 42, 76, .05), 0 56px 110px -36px rgba(7, 42, 76, .26);

  /* Type — headings follow the logo.
     The SunRight Solar wordmark is a geometric sans with near-circular bowls and
     low stroke contrast, so the display stack is geometric too: Poppins first
     (self-host it, see the @font-face block), then the closest thing already
     on each platform — Century Gothic on Windows, Futura on macOS.
     Body copy runs on the same geometric family at the client's direction, so
     the whole site speaks in the logo's voice. Geometric faces carry a small
     x-height and wide letterforms, so paragraphs are set a step larger, with
     neutral tracking and a shorter measure, to hold their readability.
     Two tokens are kept rather than one so body text can be split back onto a
     humanist face later without touching every rule. */
  --font-display: "Manrope", "Poppins", "Century Gothic", Futura, "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-sans: "Manrope", "Poppins", "Century Gothic", Futura, "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-num: var(--font-display);

  /* Text steps run one notch larger than they would on a humanist face, to
     compensate for the geometric family's smaller x-height. */
  --step--2: .75rem;
  --step--1: clamp(.9375rem, .91rem + .12vw, 1rem);
  --step-0:  clamp(1.0625rem, 1.03rem + .16vw, 1.125rem);
  --step-1:  clamp(1.125rem, 1.09rem + .2vw, 1.25rem);
  --step-2:  clamp(1.1875rem, 1.13rem + .28vw, 1.375rem);
  --step-3:  clamp(1.25rem, 1.16rem + .42vw, 1.5rem);
  --step-4:  clamp(1.5rem, 1.31rem + .88vw, 2rem);
  --step-5:  clamp(1.875rem, 1.55rem + 1.5vw, 2.875rem);
  --step-6:  clamp(2.25rem, 1.6rem + 2.6vw, 3.875rem);

  /* Space */
  --gutter: clamp(1.25rem, 4vw, 3.25rem);
  --section-y: clamp(3.5rem, 5.5vw, 6.5rem);   /* tightened: section joins read as one rhythm, not empty bands */
  --container: 1240px;
  /* Distance from the container's content edge to the viewport edge, for
     media that runs off the side. The content box is the container width on
     wide screens and 100vw less both gutters below it, so the reach is never
     positive (a positive value pulled the picture inward between 940px and
     1340px). */
  --bleed: calc((min(var(--container), 100vw - 2 * var(--gutter)) - 100vw) / 2);
  --container-wide: 1440px;

  --ease: cubic-bezier(.32, .72, .28, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  --header-h: 84px;
}

/* The brand typeface: Manrope, self-hosted.
   -------------------------------------------------------------------------
   WHY THIS FACE, AND NOT THE ONE ON adani.com
   The Adani site sets everything in a typeface it serves as "Adani". Its own
   embedded metadata says what it actually is:

     "This font is a renamed version of Rubrik, licensed for use only within
      the Adani Group. Copyright (c) 2010 by Miles Newlyn."

   So the file itself states the licence is restricted to one company. Copying
   it here would be a licensing breach, not a design decision, and it cannot
   ship. Rubrik is available to licence commercially from newlyn.com if the
   client wants the exact face — that is a purchase, not a download.

   Manrope is the closest open-licensed match. Measured against Rubrik rather
   than eyeballed: x-height to cap-height 0.750 against Rubrik's 0.749, the
   same geometric-humanist genre, the same round bowls and open apertures, the
   same generous width. Of the six candidates compared it was the only one that
   matched the metric ratio to three decimal places.

   One variable file, 24 KB, covering every weight the site uses. It is served
   from this domain — no Google Fonts request, no third party watching who
   reads the page.
   ------------------------------------------------------------------------- */
@font-face {
  font-family: "Manrope";
  src: url("/assets/fonts/Manrope-Variable.woff2") format("woff2-variations"),
       url("/assets/fonts/Manrope-Variable.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  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+2074, U+20AC,
                 U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
  /* `clip`, not `hidden`. Both contain the full-bleed sections, but `hidden`
     makes this element a scroll container, which stops the sticky header
     sticking. `clip` creates no scroll container, so sticky keeps working. */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--body);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  /* Geometric face: neutral tracking and a little more leading, since the
     small x-height and wide letterforms need the extra room.

     Font smoothing is deliberately left at the browser default. Forcing
     `antialiased` thins every stroke, and a geometric face with uniform thin
     strokes is exactly the wrong candidate for it — the text read washed out.
     Subpixel rendering keeps paragraphs solid and legible. */
  line-height: 1.75;
  letter-spacing: 0;
  overflow-wrap: break-word;
  overflow-x: clip;
}
body.is-locked { overflow: hidden; }

img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; border-style: none; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }

ul, ol, dl, dd { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--gold-200); color: var(--navy-900); }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.site-footer :focus-visible,
.final-cta :focus-visible { outline-color: var(--gold-400); }

.skip-link {
  position: fixed;
  top: 0; left: 50%;
  transform: translate(-50%, -120%);
  z-index: 200;
  background: var(--navy-800);
  color: #fff;
  padding: .9rem 1.6rem;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-weight: 600;
  text-decoration: none;
  transition: transform .2s var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: -0.018em;
  text-wrap: balance;
}
/* Geometric faces run wide and light, so display sizes hold at 400 with the
   tracking pulled in; sub-heads go to 700, the only other weight Century
   Gothic and Futura ship with. */
h1 { font-size: var(--step-6); line-height: 1.08; letter-spacing: -0.022em; }
h2 { font-size: var(--step-5); line-height: 1.12; letter-spacing: -0.02em; }
h3 { font-size: var(--step-3); line-height: 1.3;  letter-spacing: -0.012em; font-weight: 700; }
h4 { font-size: var(--step-2); line-height: 1.36; font-weight: 700; }

p { margin: 0 0 1.15em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

/* One body size across the whole page.
   `.lead` used to sit a step above the paragraph directly beneath it, which
   made the size change mid-section for no reason a reader could follow. It now
   matches body copy exactly and earns its emphasis from position and measure,
   not from scale. Only headings and sub-titles step up. */
.lead {
  font-size: var(--step-0);
  line-height: 1.75;
  color: var(--body);
  letter-spacing: 0;
  max-width: 34rem;
}
.measure { max-width: 33rem; }

/* Small tracked label — the only "chrome" the page uses */
.kicker {
  display: block;
  font-family: var(--font-sans);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}
.kicker--accent { color: var(--orange-700); }

/* Sections open on a hairline that spans the full measure, not a short
   coloured stub. A rule that runs the width of the grid reads as structure;
   a floating dash reads as decoration. */
/* Section opener.
   This was a 64px orange bar sitting on a hairline: the most template-looking
   device on the site, and pure ornament — it said nothing. Two things replace
   it, both of which mean something.

   The rule now runs directionally. It starts firm at the left margin and
   dissolves as it travels, so it reads as the start of something rather than
   as a box lid. Nothing is symmetrical about a page you read left to right.

   And every section carries its index, set ON the rule with the rule starting
   after it, the way a magazine sets a chapter number. That is the whole reason
   the rule is a pseudo-element rather than a border: a border cannot begin
   partway across, so the alternative would have been knocking a hole in it
   with a background colour matched to each section — which breaks the moment a
   section's ground changes. This version has no such dependency and works on
   white, grey, sky and navy alike.

   The number is a CSS counter, so no page had to be edited and none can fall
   out of sequence. Orange is now reserved for position and action — the
   current breadcrumb, the CTAs, the stocked markers. It decorates nothing. */
main { counter-reset: sr-section; }

.hairline {
  position: relative;
  counter-increment: sr-section;
  padding-top: clamp(1.6rem, 2.4vw, 2.4rem);
}
.hairline::after {
  content: "";
  position: absolute;
  top: 0;
  left: 2.6rem;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--line-strong), var(--line) 38%, transparent 86%);
}
.hairline::before {
  content: counter(sr-section, decimal-leading-zero);
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(-50%);
  font-family: var(--font-num);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--navy-600);
}
/* The index is a visual aid; without an empty alternative a screen reader
   announces "01" ahead of every heading. Declared as an override rather than
   inline, because a browser without alt-text support drops the whole content
   declaration and the numeral would vanish for everyone. */
@supports (content: "a" / "b") {
  .hairline::before { content: counter(sr-section, decimal-leading-zero) / ""; }
}
.hairline--dark::after {
  background: linear-gradient(90deg, rgba(255, 255, 255, .38), rgba(255, 255, 255, .14) 38%, transparent 86%);
}
.hairline--dark::before { color: var(--gold-400); }
.hairline--ink::after {
  background: linear-gradient(90deg, rgba(10, 46, 86, .32), rgba(10, 46, 86, .12) 38%, transparent 86%);
}

a { color: var(--navy-700); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--navy-900); }

strong, b { font-weight: 600; color: var(--ink); }

.prose a { color: var(--navy-700); text-decoration: underline; text-decoration-color: var(--navy-300); }
.prose a:hover { color: var(--navy-900); text-decoration-color: currentColor; }

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--wide { max-width: calc(var(--container-wide) + var(--gutter) * 2); }

.section { padding-block: var(--section-y); position: relative; }
.section--sky { background: var(--sky-50); }
.section--grey { background: var(--grey-50); }
.section--sky-fade { background: linear-gradient(180deg, var(--sky-50), var(--white) 76%); }

/* One section-head pattern used everywhere, so every section aligns
   to the same left edge and the same internal rhythm. */
.section-head { display: grid; gap: 1.25rem 4rem; align-items: start; }
@media (min-width: 940px) {
  .section-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 0 clamp(2.5rem, 5vw, 5.5rem); }
  .section-head__aside { padding-top: .45rem; }
}
.section-head h2 { max-width: 16ch; }

/* --------------------------------------------------------------------------
   5. Buttons — solid, squared, confident. No glow, no gradient wash.
   -------------------------------------------------------------------------- */
/* Pill with a solid contrasting disc holding the arrow. The disc is what makes
   the button feel made rather than defaulted — it reads as a piece of hardware,
   and it survives being scaled up or down. No extra markup: the inline SVG is
   given the disc directly. */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .85rem;
  padding: .8rem .85rem .8rem 1.7rem;
  border-radius: var(--r-pill);
  font-family: var(--font-sans);
  font-size: .9375rem;
  font-weight: 700;
  letter-spacing: .005em;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  border: 1.5px solid transparent;
  overflow: hidden;
  transition: background-color .24s var(--ease), border-color .24s var(--ease),
              color .24s var(--ease), transform .24s var(--ease), box-shadow .28s var(--ease);
}
.btn .icon {
  width: 2.15rem; height: 2.15rem;
  padding: .58rem;
  flex: none;
  border-radius: 50%;
  background: #fff;
  color: var(--orange-600);
  transition: transform .38s var(--ease-out), background-color .24s var(--ease), color .24s var(--ease);
}
.btn:hover .icon { transform: translateX(3px); }

/* A button whose only content is text keeps even padding. */
.btn:not(:has(.icon)) { padding-inline: 1.7rem; }
/* A leading icon (the phone) keeps the disc so every button reads as one
   family, but sits on the left and does not slide on hover. It needs its own
   class: :first-child would also match the trailing arrow, because the label
   before it is a text node rather than an element. */
.btn { padding-right: .85rem; }
.btn:has(.icon--lead) { padding: .8rem 1.7rem .8rem .85rem; }
.btn--lg:has(.icon--lead) { padding: 1rem 2rem 1rem 1rem; }
.btn--sm:has(.icon--lead) { padding: .5rem 1.35rem .5rem .5rem; }
.btn:hover .icon--lead { transform: none; }
/* Light sweeps across the face on hover */
.btn::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .22), transparent);
  transform: translateX(-160%) skewX(-18deg);
  opacity: 0;
  pointer-events: none;
}
.btn:hover::after { animation: btn-sweep .7s var(--ease-out) forwards; }
@keyframes btn-sweep {
  from { transform: translateX(-160%) skewX(-18deg); opacity: 1; }
  to   { transform: translateX(340%) skewX(-18deg); opacity: 0; }
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); transition-duration: .06s; }
.btn:hover .icon { transform: translateX(4px); }

.btn--primary {
  background: var(--grad-cta);
  color: var(--navy-900);
  box-shadow: 0 1px 2px rgba(120, 60, 0, .18), 0 12px 24px -12px rgba(253, 104, 0, .55);
}
.btn--primary:hover {
  background: var(--grad-cta-hover);
  color: var(--navy-950);
  box-shadow: 0 2px 6px rgba(120, 60, 0, .2), 0 20px 34px -14px rgba(253, 104, 0, .68);
}
/* Navy disc against the sunrise: 4.7:1 at the darkest stop, so the shape holds
   the whole way across, and the white arrow sits at 12:1 inside it. */
.btn--primary .icon { background: var(--navy-900); color: #fff; }
.btn--primary:hover .icon { background: var(--navy-950); color: #fff; }
/* The white sweep is invisible on a bright fill — darken it here instead. */
.btn--primary::after { background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent); }

.btn--dark { background: var(--navy-800); color: #fff; }
.btn--dark:hover { background: var(--navy-900); color: #fff; }
.btn--dark .icon { background: var(--gold-400); color: var(--navy-900); }

.btn--outline {
  background: transparent;
  color: var(--navy-800);
  border-color: var(--line-strong);
}
.btn--outline:hover { color: var(--navy-900); border-color: var(--navy-800); background: transparent; }
.btn--outline .icon { background: var(--navy-800); color: #fff; }
.btn--outline:hover .icon { background: var(--navy-950); color: #fff; }

.btn--white { background: #fff; color: var(--navy-900); }
.btn--white:hover { background: #fff; color: var(--orange-700); }
.btn--white .icon { background: var(--navy-800); color: #fff; }

.btn--outline-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .38); }
.btn--outline-light:hover { background: rgba(255, 255, 255, .1); border-color: #fff; color: #fff; }
.btn--outline-light .icon { background: #fff; color: var(--navy-900); }

.btn--sm { padding: .5rem .5rem .5rem 1.25rem; font-size: .875rem; gap: .6rem; }
.btn--sm:not(:has(.icon)) { padding-inline: 1.35rem; }
.btn--sm .icon { width: 1.75rem; height: 1.75rem; padding: .48rem; }
.btn--lg { padding: 1rem 1rem 1rem 2rem; font-size: 1rem; }
.btn--lg:not(:has(.icon)) { padding-inline: 2rem; }
.btn--lg .icon { width: 2.4rem; height: 2.4rem; padding: .65rem; }
.btn--block { width: 100%; }

/* Narrow phones. A nowrap button sets a min-content floor, and grid/flex items
   default to min-width:auto, so one long label could push an entire section
   wider than the viewport — which `overflow-x: clip` then hid. Letting the
   label wrap below 560px removes the floor at the source. */
@media (max-width: 560px) {
  .btn { white-space: normal; }
  .btn--lg { padding-left: 1.5rem; }
}

.btn-row { display: flex; flex-wrap: wrap; gap: .85rem; align-items: center; }

/* Text link with an underline that draws in */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: .9375rem;
  color: var(--navy-800);
  text-decoration: none;
  padding-bottom: .35rem;
  background-image: linear-gradient(var(--navy-800), var(--navy-800));
  background-size: 0 1.5px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: color .24s var(--ease), background-size .42s var(--ease-out);
}
.link-arrow .icon { width: 1.05em; height: 1.05em; transition: transform .34s var(--ease-out); }
.link-arrow:hover { color: var(--navy-900); background-size: 100% 1.5px; }
.link-arrow:hover .icon { transform: translateX(5px); }
/* On touch the link is 32px tall — above the 24px AA minimum but tight under a
   thumb. The hit area is grown with a pseudo-element so the target reaches
   ~46px without moving a single pixel of layout, and only where it matters. */
@media (pointer: coarse) {
  .link-arrow { position: relative; }
  .link-arrow::before { content: ""; position: absolute; inset: -7px -4px; }
}

/* --------------------------------------------------------------------------
   6. Utilities
   -------------------------------------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.icon { width: 1.25rem; height: 1.25rem; flex: none; }
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   7. Site header — sticky, single bar
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: saturate(1.7) blur(20px);
  backdrop-filter: saturate(1.7) blur(20px);
  box-shadow: inset 0 -1px 0 rgba(7, 42, 76, .07);
  transition: box-shadow .32s var(--ease), background-color .32s var(--ease);
}
.site-header.is-stuck {
  background: rgba(255, 255, 255, .96);
  box-shadow: inset 0 -1px 0 rgba(7, 42, 76, .08), 0 14px 30px -18px rgba(7, 42, 76, .45);
}
/* Hairline scroll-progress indicator */
.site-header::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 2px;
  width: var(--progress, 0%);
  background: linear-gradient(90deg, var(--orange-500), var(--gold-400));
  transition: width .1s linear;
}

.masthead {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 2.5rem);
  min-height: var(--header-h);
  transition: min-height .32s var(--ease);
}
.site-header.is-stuck .masthead { min-height: 70px; }

.brand { display: inline-flex; flex: none; text-decoration: none; }
.brand img { height: 45px; width: auto; transition: height .32s var(--ease); }
.site-header.is-stuck .brand img { height: 39px; }

.primary-nav { margin-inline: auto; }
.primary-nav__list { display: flex; align-items: center; gap: clamp(.05rem, .5vw, .5rem); }
.primary-nav__item { position: relative; display: flex; align-items: center; }

.primary-nav__link {
  position: relative;
  /* A nav label breaking across two lines is never the right answer — better
     to run out of room and drop something than to fold "Solar Panels" in half. */
  white-space: nowrap;
  padding: .65rem .55rem;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--navy-800);
  text-decoration: none;
  transition: color .2s var(--ease);
}
.primary-nav__link::after {
  content: "";
  position: absolute;
  left: .55rem; right: .55rem; bottom: .3rem;
  height: 1.5px;
  background: var(--navy-800);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .38s var(--ease-out);
}
.primary-nav__item:hover .primary-nav__link,
.primary-nav__link:hover { color: var(--navy-900); }
.primary-nav__item:hover .primary-nav__link::after,
.primary-nav__link:hover::after,
.primary-nav__link[aria-current]::after { transform: scaleX(1); }
.primary-nav__link[aria-current] { color: var(--navy-900); font-weight: 600; }

.primary-nav__disclosure {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 24px: the WCAG 2.2 minimum target (2.5.8). The chevron itself stays
     .8rem. No negative margin: overlapping the link would leave the button
     only ~15px of unobscured target. The link's own right padding is
     trimmed instead (below), which keeps the chevron where it sat. */
  width: 1.5rem; height: 1.5rem;
  color: var(--muted);
  transition: color .2s var(--ease), transform .32s var(--ease);
}
.primary-nav__disclosure .icon { width: .8rem; height: .8rem; }
.has-menu > .primary-nav__link { padding-right: .1rem; }
.primary-nav__item:hover .primary-nav__disclosure,
.primary-nav__disclosure[aria-expanded="true"] { color: var(--navy-800); transform: rotate(180deg); }

/* Menu panels */
.nav-panel {
  position: absolute;
  top: calc(100% + .5rem);
  left: -1rem;
  min-width: 16.5rem;
  padding: .8rem;
  background: rgba(255, 255, 255, .98);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xl);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .24s var(--ease), transform .34s var(--ease-out), visibility .34s;
}
.nav-panel--mega { width: 30rem; padding: 1rem; }
.primary-nav__item:hover > .nav-panel,
.primary-nav__item.is-open > .nav-panel { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-panel::before { content: ""; position: absolute; top: -.5rem; left: 0; right: 0; height: .5rem; }

/* Numeral tiles */
.nav-tiles { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: .5rem; }
.nav-tile {
  display: block;
  padding: .85rem .9rem .8rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: linear-gradient(165deg, #fff, var(--sky-50));
  text-decoration: none;
  transition: border-color .24s var(--ease), transform .24s var(--ease-out), box-shadow .24s var(--ease);
}
.nav-tile { background-size: 100% 100%; background-position: 0 0; }
.nav-tile:hover {
  border-color: var(--navy-300);
  background: linear-gradient(0deg, var(--sky-100) 0%, #fff 100%);
}
.nav-tile:hover .nav-tile__value { transform: translateY(-2px); }
.nav-tile__value { transition: transform .3s var(--ease-out); }
.nav-tile__value {
  display: block;
  font-family: var(--font-num);
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.nav-tile__value em { font-style: normal; font-size: .5em; letter-spacing: 0; color: var(--muted); margin-left: .1em; }
.nav-tile__caption { display: block; margin-top: .3rem; font-size: .75rem; color: var(--muted); }
.nav-tile:hover .nav-tile__caption { color: var(--navy-800); }

.nav-panel__list { display: grid; gap: 1px; }
.nav-panel__list--divided { margin-top: .8rem; padding-top: .6rem; border-top: 1px solid var(--line-soft); }
.nav-panel__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .65rem .85rem;
  border-radius: var(--r-xs);
  font-size: 1rem;
  font-weight: 600;
  color: var(--navy-800);
  text-decoration: none;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.nav-panel__list a .icon { width: .95rem; height: .95rem; opacity: 0; transform: translateX(-6px); transition: opacity .24s var(--ease), transform .3s var(--ease-out); }
.nav-panel__list a {
  box-shadow: inset 0 0 0 0 var(--navy-800);
  transition: background-color .2s var(--ease), color .2s var(--ease),
              box-shadow .28s var(--ease-out), padding-left .28s var(--ease-out);
}
.nav-panel__list a:hover {
  background: var(--sky-50);
  color: var(--navy-900);
  box-shadow: inset 2px 0 0 0 var(--navy-800);
  padding-left: 1.15rem;
}
.nav-panel__list a:hover .icon { opacity: 1; transform: translateX(0); }
.nav-panel__list a[aria-current] { background: var(--sky-100); color: var(--navy-900); }

.nav-panel__overview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-top: .7rem;
  padding: .85rem .85rem;
  border-radius: var(--r-xs);
  background: var(--navy-800);
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  transition: background-color .24s var(--ease);
}
.nav-panel__overview .icon { width: 1rem; height: 1rem; transition: transform .3s var(--ease-out); }
.nav-panel__overview:hover { background: var(--navy-950); color: #fff; }
.nav-panel__overview:hover .icon { color: var(--gold-400); }
.nav-panel__overview:hover .icon { transform: translateX(4px); }

.masthead__actions { display: flex; align-items: center; gap: .9rem; margin-left: auto; }

.phone-link {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  color: var(--navy-800);
  text-decoration: none;
  transition: color .2s var(--ease);
}
.phone-link__icon {
  display: grid;
  place-items: center;
  width: 2.3rem; height: 2.3rem;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  color: var(--navy-700);
  transition: background-color .24s var(--ease), color .24s var(--ease), border-color .24s var(--ease);
}
.phone-link__icon .icon { width: 1rem; height: 1rem; }
.phone-link__text { display: flex; flex-direction: column; line-height: 1.2; }
.phone-link__label { font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.phone-link__number { font-family: var(--font-sans); font-size: 1rem; font-weight: 700; letter-spacing: 0; white-space: nowrap; }
.phone-link:hover { color: var(--navy-900); }
.phone-link:hover .phone-link__icon { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }

.nav-trigger {
  display: none;
  width: 2.8rem; height: 2.8rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-strong);
  place-items: center;
}
.nav-trigger__bars { display: block; width: 20px; }
.nav-trigger__bars i {
  display: block; height: 1.6px; border-radius: 2px; background: var(--navy-800);
  transition: transform .34s var(--ease-out), opacity .2s var(--ease);
}
.nav-trigger__bars i + i { margin-top: 5px; }
.nav-trigger[aria-expanded="true"] .nav-trigger__bars i:nth-child(1) { transform: translateY(6.6px) rotate(45deg); }
.nav-trigger[aria-expanded="true"] .nav-trigger__bars i:nth-child(2) { opacity: 0; }
.nav-trigger[aria-expanded="true"] .nav-trigger__bars i:nth-child(3) { transform: translateY(-6.6px) rotate(-45deg); }

/* The phone block used to appear at 1280. The masthead needs about 1210px for
   brand + nav + actions, and a 1280 viewport leaves 1200 inside the container —
   ten pixels short, so every flex item shrank and the nav labels and the number
   all broke onto two lines. It waits for room now. */
@media (max-width: 1359px) { .phone-link__text { display: none; } }
/* The new lockup's wordmark+tagline is wider per pixel of height than the old
   mark-only logo was. Between 1120 and 1366 the masthead has no slack to
   absorb that (see the note above about the 1210px minimum), so the logo
   steps down here to the width footprint the old logo had at 45px. */
@media (min-width: 1120px) and (max-width: 1379px) { .brand img { height: 33px; } }
@media (min-width: 1120px) and (max-width: 1199px) { .brand img { height: 28px; } }
@media (max-width: 1119px) {
  :root { --header-h: 70px; }
  .primary-nav { display: none; }
  .nav-trigger { display: grid; }
  .brand img { height: 40px; }
  .site-header.is-stuck .masthead { min-height: 64px; }
  .site-header.is-stuck .brand img { height: 36px; }
}
@media (max-width: 599px) {
  .masthead__actions .btn { display: none; }
  .brand img { height: 36px; }
}

/* --------------------------------------------------------------------------
   8. Mobile navigation
   -------------------------------------------------------------------------- */
.mobile-nav {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(4, 24, 45, .5);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.mobile-nav[hidden] { display: none; }
.mobile-nav.is-open { opacity: 1; }

.mobile-nav__panel {
  position: absolute; inset-block: 0; right: 0;
  width: min(25rem, 93vw);
  display: flex; flex-direction: column;
  background: #fff;
  box-shadow: -24px 0 70px rgba(4, 24, 45, .26);
  transform: translateX(100%);
  transition: transform .4s var(--ease-out);
}
.mobile-nav.is-open .mobile-nav__panel { transform: translateX(0); }

.mobile-nav__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.15rem var(--gutter);
  border-bottom: 1px solid var(--line-soft);
}
.mobile-nav__title {
  font-size: .6875rem; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: var(--muted);
}
.mobile-nav__close {
  display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem;
  border-radius: 50%; background: var(--grey-100); color: var(--navy-800);
  transition: background-color .2s var(--ease);
}
.mobile-nav__close:hover { background: var(--sky-100); }
.mobile-nav__close .icon { width: 1rem; height: 1rem; }

.mobile-nav__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: .5rem var(--gutter) 1.5rem; }
.mobile-nav__item + .mobile-nav__item { border-top: 1px solid var(--line-soft); }
.mobile-nav__row { display: flex; align-items: center; justify-content: space-between; }
.mobile-nav__row > a {
  flex: 1; padding: 1.1rem 0;
  font-family: var(--font-display);
  font-size: 1.1875rem; font-weight: 400; letter-spacing: -0.014em;
  color: var(--navy-800); text-decoration: none;
}
.mobile-nav__row > a:hover { color: var(--navy-900); }
.mobile-nav__row button {
  display: grid; place-items: center;
  width: 2.3rem; height: 2.3rem; border-radius: 50%;
  color: var(--navy-700); background: var(--sky-50);
  transition: transform .3s var(--ease), background-color .2s var(--ease);
}
.mobile-nav__row button .icon { width: .95rem; height: .95rem; }
.mobile-nav__row button[aria-expanded="true"] { transform: rotate(180deg); background: var(--sky-100); }

.mobile-nav__sub { padding: 0 0 .9rem .1rem; }
.mobile-nav__sub[hidden] { display: none; }
.mobile-nav__sub a {
  display: block; padding: .6rem 0 .6rem 1.1rem;
  border-left: 1.5px solid var(--line);
  font-size: 1rem; color: var(--body); text-decoration: none;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.mobile-nav__sub a:hover { color: var(--navy-900); border-left-color: var(--navy-800); }

.mobile-nav__foot {
  display: grid; gap: .65rem;
  padding: 1.2rem var(--gutter) calc(1.2rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line-soft);
  background: var(--sky-25);
}

/* --------------------------------------------------------------------------
   9. Site footer
   -------------------------------------------------------------------------- */
.site-footer {
  position: relative;
  background: var(--navy-950);
  color: var(--on-dark-soft);
  padding-block: clamp(3.75rem, 6vw, 6.5rem) 2.25rem;
  font-size: 1rem;
}
.site-footer::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, var(--orange-500) 0%, var(--gold-400) 38%, rgba(31, 94, 156, .6) 100%);
}
.site-footer__top {
  display: grid;
  gap: clamp(2.75rem, 4vw, 5rem);
  grid-template-columns: minmax(0, 1fr);
  padding-bottom: clamp(2.75rem, 4vw, 3.75rem);
  border-bottom: 1px solid var(--line-dark);
}
@media (min-width: 900px) {
  .site-footer__top { grid-template-columns: minmax(17rem, 1fr) minmax(0, 2.4fr); }
}

.site-footer__logo img { height: 54px; width: auto; }

.site-footer__contact { margin-top: 2rem; display: grid; gap: 1.1rem; }
.site-footer__contact > div { display: grid; gap: .2rem; }
.site-footer__contact dt {
  font-size: .6875rem; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold-400);
}
.site-footer__contact dd { color: #fff; font-size: 1rem; }
.site-footer__contact a { color: #fff; text-decoration: none; font-weight: 500; }
.site-footer__contact a:hover { color: var(--gold-400); text-decoration: underline; text-underline-offset: .22em; }
.site-footer__spoken { color: var(--on-dark-faint); margin-left: .5rem; font-size: .875rem; }
.site-footer__hours-row { display: flex; gap: .75rem; justify-content: space-between; max-width: 14rem; }

.social-list { display: flex; gap: .55rem; margin-top: 2rem; }
.social-list a {
  display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem;
  border-radius: 50%;
  border: 1px solid var(--line-dark);
  color: var(--on-dark-soft);
  transition: background-color .24s var(--ease), color .24s var(--ease),
              border-color .24s var(--ease), transform .24s var(--ease-out);
}
.social-list .icon { width: 1.05rem; height: 1.05rem; }
.social-list a:hover { background: #fff; color: var(--navy-900); border-color: #fff; transform: translateY(-3px); }

.site-footer__nav {
  display: grid;
  gap: clamp(1.75rem, 3vw, 2.5rem);
  /* 8.5rem lets two columns fit from a 360px phone up, which halves the
     footer's height there; below that it falls back to one. */
  grid-template-columns: repeat(auto-fit, minmax(min(8.5rem, 100%), 1fr));
}
.site-footer__heading {
  font-family: var(--font-sans);
  font-size: .6875rem; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold-400);
  margin-bottom: 1.2rem;
}
.site-footer__col ul { display: grid; gap: .7rem; }
.site-footer__col a {
  position: relative;
  color: var(--on-dark-soft);
  text-decoration: none;
  transition: color .2s var(--ease), padding-left .26s var(--ease-out);
}
.site-footer__col a::before {
  content: "";
  position: absolute; left: 0; top: 50%;
  width: 0; height: 1px;
  background: var(--gold-400);
  transform: translateY(-50%);
  transition: width .26s var(--ease-out);
}
.site-footer__col a:hover { color: #fff; padding-left: 1.1rem; }
.site-footer__col a:hover::before { width: .7rem; }
.site-footer__col a[aria-current] { color: #fff; }

.site-footer__bottom {
  padding-top: 2.25rem;
  display: grid; gap: 1.5rem;
  align-items: end;
}
@media (min-width: 900px) { .site-footer__bottom { grid-template-columns: minmax(0, 1fr) auto; } }
.site-footer__copy { font-size: .8125rem; color: var(--on-dark-soft); margin-bottom: .9rem; }
.site-footer__creds { display: inline-flex; flex-wrap: wrap; gap: .25rem 1.15rem; margin-left: .35rem; color: var(--on-dark-faint); }
/* Legal and acknowledgement text. Raised from 12px to 13px — 12 is below a
   comfortable reading size and these are the two paragraphs a reader is least
   motivated to squint at. The measure is capped at 46rem rather than 62: at
   1920px the old cap let these lines run to 165 characters, roughly twice a
   readable measure, and long lines are hardest to track at exactly this size. */
.site-footer__disclaimer,
.site-footer__ack {
  font-size: .8125rem; line-height: 1.75;
  color: var(--on-dark-faint);
  max-width: 32rem; margin-bottom: .7rem;
}
.site-footer__top-link {
  justify-self: start;
  font-size: .75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--on-dark-soft); text-decoration: none;
  padding-bottom: .35rem;
  border-bottom: 1px solid var(--line-dark);
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.site-footer__top-link:hover { color: #fff; border-color: var(--gold-400); }
@media (min-width: 900px) { .site-footer__top-link { justify-self: end; } }

/* --------------------------------------------------------------------------
   10. Sticky mobile CTA
   -------------------------------------------------------------------------- */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  display: none; gap: .65rem;
  padding: .75rem var(--gutter) calc(.75rem + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .95);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 28px -14px rgba(7, 42, 76, .3);
  transform: translateY(110%);
  transition: transform .38s var(--ease-out);
}
.sticky-cta.is-visible { transform: translateY(0); }
.sticky-cta__call {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .9rem 1.15rem;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-sm);
  font-weight: 600; font-size: .9375rem;
  color: var(--navy-800); text-decoration: none; flex: none;
}
.sticky-cta__call .icon { width: 1rem; height: 1rem; color: var(--navy-700); }
.sticky-cta__quote { flex: 1; }
@media (max-width: 767px) {
  .sticky-cta { display: flex; }
  .site-footer { padding-bottom: calc(5.75rem + env(safe-area-inset-bottom)); }
}

/* --------------------------------------------------------------------------
   11. Shared components
   -------------------------------------------------------------------------- */
/* Aspect ratios are no longer declared in CSS. Every photograph renders at
   its own intrinsic dimensions, so the file IS the shape the page shows and
   the two can never drift apart. The homepage hero panel is the single
   exception: it is an art-directed bleeding panel that crops on purpose. */
.media-frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--grey-100);
}
/* <picture> must fill the frame, otherwise height:100% on the image has no
   definite containing block and silently falls back to the intrinsic ratio. */
.media-frame picture { display: block; width: 100%; height: 100%; }
.media-frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.media-frame::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(7, 42, 76, .07);
  pointer-events: none;
}
.media-frame.is-revealed img { animation: media-settle 1.6s var(--ease-out) both; }
@keyframes media-settle {
  from { transform: scale(1.06); }
  to   { transform: scale(1); }
}

/* Breadcrumb.
   Two quieter versions came before this one: a plain text row, then the same
   row with a gradient underline marking the current page. Both were correct
   and both read as an afterthought, which is the wrong note for the first
   element under the header.

   So it is a component now. The trail sits in a raised rail — white, hairline,
   pill, a shadow just deep enough to lift it off the page — and each ancestor
   is its own target that tints on hover, so the whole thing behaves like
   navigation rather than like a sentence. The page you are on is a filled navy
   chip: unmistakable, and deliberately NOT the sunrise gradient, because that
   is the primary button's signature and a breadcrumb is not something you
   click to proceed.

   White works on all three grounds: it carries its own border on white, and it
   lifts on the sky and grey heads. */
.breadcrumb { padding-top: clamp(1.25rem, 2.5vw, 2rem); }
.breadcrumb ol {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .1rem;
  max-width: 100%;
  padding: .3rem .4rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  box-shadow: 0 1px 2px rgba(7, 42, 76, .05), 0 10px 24px -18px rgba(7, 42, 76, .45);
}
.breadcrumb li {
  display: inline-flex;
  align-items: center;
  gap: .1rem;
  min-width: 0;
  font-family: var(--font-num);
  font-size: .8125rem;
  letter-spacing: .03em;
}
/* A single hairline, raked forward. A chevron is a UI control borrowed into
   running text; a stroke leaning the way you are travelling belongs to the
   typography, and it holds its shape at 13px where a 5px chevron goes mushy. */
.breadcrumb li + li::before {
  content: "";
  flex: none;
  width: 1px;
  height: 11px;
  margin-inline: .3rem;
  background: var(--navy-300);
  transform: skewX(-16deg);
}
.breadcrumb a {
  padding: .3rem .68rem .34rem;
  border-radius: var(--r-pill);
  color: var(--navy-600);
  text-decoration: none;
  transition: background-color .22s var(--ease), color .22s var(--ease);
}
.breadcrumb a:hover { background: var(--sky-50); color: var(--navy-900); }
/* You are here. 13.6:1 on navy-900, and it cannot be mistaken for a next step. */
.breadcrumb [aria-current] {
  background: var(--navy-900);
  color: #fff;
  font-weight: 600;
}
.breadcrumb [aria-current]:hover { background: var(--navy-950); color: #fff; }

/* On a phone a three-level trail wraps, and a wrapped pill rail turns into a
   lozenge with enormous round ends. Below the fold-point the rail drops its
   chrome and the trail runs as plain text again — the current chip alone is
   enough to mark position at that size. */
@media (max-width: 559px) {
  .breadcrumb ol {
    display: flex;
    gap: .2rem .1rem;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
  }
  .breadcrumb a { padding-inline: .4rem; }
  .breadcrumb li:first-child a { padding-left: 0; }
}

/* Accordion — native <details>, works with JavaScript off.
   Each question is its own card rather than a row in a ruled list: it gives
   the open answer somewhere to sit, and makes the whole block a target
   instead of just the summary line. */
.accordion { display: grid; gap: .75rem; }
.accordion__item {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease), background-color .3s var(--ease);
}
.accordion__item::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--grad-cta);
  transform: scaleX(0); transform-origin: left;
  transition: transform .55s var(--ease-out);
}
.accordion__item:hover { border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.accordion__item[open] {
  border-color: transparent;
  background: linear-gradient(180deg, #fff 60%, #fffaf2);
  box-shadow: 0 4px 10px rgba(7, 42, 76, .04), 0 28px 54px -26px rgba(7, 42, 76, .28);
}
.accordion__item[open]::before { transform: scaleX(1); }
.accordion__item > summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1.75rem;
  padding: 1.4rem clamp(1.25rem, 2vw, 1.75rem);
  cursor: pointer; list-style: none;
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 400; line-height: 1.34; letter-spacing: -0.014em;
  color: var(--ink);
  transition: color .2s var(--ease);
}
.accordion__item > summary::-webkit-details-marker { display: none; }
.accordion__item > summary { transition: color .2s var(--ease); }
.accordion__item > summary:hover { color: var(--navy-900); }
/* The toggle is a disc that fills with the brand sunrise once open. */
.accordion__icon {
  position: relative; flex: none;
  width: 2.25rem; height: 2.25rem;
  margin-top: -.1rem;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  background: #fff;
  transition: background .34s var(--ease), border-color .34s var(--ease), transform .34s var(--ease-out);
}
.accordion__item > summary:hover .accordion__icon { border-color: var(--navy-800); }
.accordion__icon::before,
.accordion__icon::after {
  content: "";
  position: absolute; inset: 50% auto auto 50%;
  width: .8rem; height: 1.6px;
  border-radius: 2px;
  background: var(--navy-800);
  transform: translate(-50%, -50%);
  transition: transform .34s var(--ease-out), background-color .24s var(--ease);
}
.accordion__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.accordion__item[open] .accordion__icon {
  background: var(--grad-cta);
  border-color: transparent;
  transform: rotate(180deg);
}
.accordion__item[open] .accordion__icon::before,
.accordion__item[open] .accordion__icon::after { background: var(--navy-950); }
.accordion__item[open] .accordion__icon::after { transform: translate(-50%, -50%) rotate(0); }
.accordion__body {
  padding: 0 clamp(1.25rem, 2vw, 1.75rem) 1.6rem;
  max-width: 62ch;
}
.accordion__item[open] > .accordion__body { animation: accordion-in .38s var(--ease-out) both; }
@keyframes accordion-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   11b. Shared page components
   Authored for the homepage, used by every page. Kept here rather than in
   home.css so a page that does not load home.css still gets them — the
   omission collapsed every split layout on /solar-panels/.
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   Shared: splits, bleeding media, copy blocks
   -------------------------------------------------------------------------- */
.split { display: grid; gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }
@media (min-width: 940px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .split--media-first .split__media { order: -1; }

  /* The photograph takes its height from the row so the text column is not
     left floating beside a short crop.

     What it must NOT do is take its SHAPE from the row. It used to: the frame
     was absolute and the image ran at aspect-ratio:auto, so the crop was
     whatever height the copy happened to produce — the same 4:5 file rendered
     1.58:1 in one section and 1.50:1 in another, and a portrait photograph
     briefed at 1200x1500 arrived to be shown as a landscape sliver with half
     its height thrown away by object-fit. A frame nobody can specify is not a
     frame you can brief a photographer for.

     So the declared ratio holds. A portrait crop is then taller than the copy
     beside it, which is fine — both columns start at the top and the surplus
     falls at the foot of the text, where it reads as breathing room rather
     than as a hole above the first line. The media column is also given a
     smaller share, so a 4:5 photograph does not tower over its own section. */
  .split--balanced { align-items: start; grid-template-columns: minmax(0, 1fr) minmax(0, .78fr); }
  .split--balanced .split__media { min-height: 0; }
  .split--media-first.split--balanced { grid-template-columns: minmax(0, .78fr) minmax(0, 1fr); }
}

/* Photography that runs off the edge of the viewport reads as art direction
   rather than as a component. */
@media (min-width: 940px) {
  .bleed-right { margin-right: var(--bleed); }
  .bleed-right .media-frame { border-radius: var(--r-xl) 0 0 var(--r-xl); }
  .bleed-left { margin-left: var(--bleed); }
  .bleed-left .media-frame { border-radius: 0 var(--r-xl) var(--r-xl) 0; }
}

.body-copy > * + * { margin-top: 1.2rem; }
.body-copy p { max-width: 34rem; }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.faq__grid { display: grid; gap: clamp(2.25rem, 4vw, 4.5rem); }
@media (min-width: 960px) {
  .faq__grid { grid-template-columns: minmax(0, .68fr) minmax(0, 1.32fr); }
  .faq__aside { position: sticky; top: calc(var(--header-h) + 2.5rem); align-self: start; }
}
.faq__aside h2 { max-width: 12ch; }
@media (max-width: 959px) { .faq__aside { padding-bottom: .5rem; } }

/* --------------------------------------------------------------------------
   Final CTA
   -------------------------------------------------------------------------- */
/* Copy left, photograph right — the same split logic as the hero, so the page
   opens and closes on the same composition. */
.final-cta {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(60% 80% at 8% 0%, rgba(255, 124, 31, .16), transparent 62%),
    var(--navy-950);
  padding-block: clamp(4rem, 7vw, 7.5rem);
}
.final-cta__grid { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; }
@media (min-width: 940px) {
  .final-cta__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.final-cta__media { position: relative; }
.final-cta__media .media-frame { border-radius: var(--r-xl); box-shadow: var(--shadow-xl); }

@media (min-width: 940px) {
  .final-cta__media { margin-right: var(--bleed); }
  .final-cta__media .media-frame { border-radius: var(--r-xl) 0 0 var(--r-xl); }
}

.final-cta h2 { color: #fff; margin-bottom: 1.4rem; max-width: 16ch; }
.final-cta p {
  color: var(--on-dark-soft);
  font-size: var(--step-0); line-height: 1.75;
  margin: 0 0 2.5rem; max-width: 34rem;
}
@media (max-width: 520px) { .final-cta .btn-row { display: grid; } .final-cta .btn { width: 100%; } }

/* Under 360px (Galaxy Fold, 320px SE) a long label cannot stay on one line
   without pushing its arrow disc past the screen edge. Let it wrap. */
@media (max-width: 359px) {
  .btn { white-space: normal; max-width: 100%; text-align: left; }
  .link-arrow { white-space: normal; }
}

.source-link {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); text-decoration: none;
  transition: color .22s var(--ease);
}
.source-link .icon { width: .8rem; height: .8rem; }
.source-link:hover { color: var(--navy-900); }
/* A citation sets at 12px and stands 21px tall, under the 24px minimum for a
   target. It is a standalone line rather than a link inside a sentence, so the
   inline exemption does not cover it. The hit area is grown with a pseudo-
   element on touch: ~45px to tap, not one pixel of layout moved. */
@media (pointer: coarse) {
  .source-link, .captable__ref,
  .ctable th a, .ctable td a, .captable th a, .captable td a,
  .capprofile a, .consent__note a { position: relative; }
  .source-link::before, .captable__ref::before,
  .ctable th a::before, .ctable td a::before,
  .captable th a::before, .captable td a::before,
  .capprofile a::before, .consent__note a::before {
    content: ""; position: absolute; inset: -12px -6px;
  }
}

/* --------------------------------------------------------------------------
   11c. Hub page furniture
   Page head with edge-bleed banner, the two-card comparison, and the inset
   rebates panel. Authored on /solar-panels/, needed by every hub page, so
   they live here rather than in a page stylesheet.
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   Page head + aerial banner
   -------------------------------------------------------------------------- */
.page-head {
  position: relative;
  padding-bottom: clamp(2.5rem, 4vw, 3.5rem);
  background:
    radial-gradient(58% 70% at 4% 0%, var(--sky-100), transparent 62%),
    radial-gradient(44% 58% at 82% 100%, #fff4e8, transparent 66%),
    var(--white);
}
.page-head__inner {
  display: grid;
  gap: clamp(1.5rem, 3vw, 3.5rem);
  padding-top: clamp(1.75rem, 3vw, 2.75rem);
}
@media (min-width: 940px) {
  /* Centred, not stretched. Stretching let the copy decide the banner's shape,
     so the same 2400x1500 file rendered 1.33:1 on a page with a long hero and
     1.65:1 on a page with a short one — 17% of the frame's shape decided by
     paragraph length. The banner is 16:10 on every page now, which is what the
     files are and what the photographer is briefed to deliver. */
  .page-head__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; }
}
.page-head h1 { max-width: 15ch; }
.page-head__lead { margin-top: 1.4rem; }
.page-head__actions { margin-top: 2rem; }

.page-banner { position: relative; }
.page-banner .media-frame { border-radius: var(--r-2xl); box-shadow: var(--shadow-lg); }

@media (min-width: 940px) {
  /* Runs off the right edge, echoing the homepage hero without repeating it.
     The container's content box already sits one gutter inside the element,
     so the reach is exactly --bleed (see :root) — subtracting the gutter as
     well overshoots the viewport and silently crops the photograph further. */
  .page-banner { margin-right: var(--bleed); }
  .page-banner .media-frame { border-radius: var(--r-2xl) 0 0 var(--r-2xl); }
}

/* --------------------------------------------------------------------------
   N-type vs P-type
   -------------------------------------------------------------------------- */
.compare { margin-top: clamp(2.5rem, 4vw, 3.5rem); }
.compare__pair {
  display: grid;
  gap: clamp(1rem, 1.6vw, 1.4rem);
  margin-bottom: clamp(1.75rem, 2.6vw, 2.25rem);
}
@media (min-width: 780px) { .compare__pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.compare__card {
  padding: clamp(1.5rem, 2.4vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: #fff;
}
.compare__card--current { background: linear-gradient(170deg, #fff 60%, #fff7ee); border-color: transparent; box-shadow: var(--shadow-sm); }
.compare__tag {
  display: inline-block;
  margin-bottom: .85rem;
  font-size: .6875rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted);
}
.compare__card--current .compare__tag { color: var(--orange-700); }
.compare__card p { font-size: var(--step-0); line-height: 1.75; }
.compare__close p { max-width: 46rem; }
.compare__close p + p { margin-top: 1.1rem; }

.rebates-panel {
  position: relative;
  overflow: hidden;
  padding: clamp(2rem, 4vw, 3.5rem);
  border-radius: var(--r-2xl);
  border: 1px solid var(--line);
  background:
    radial-gradient(100% 90% at 100% 0%, rgba(254, 209, 7, .16), transparent 58%),
    linear-gradient(160deg, var(--sky-100), var(--sky-50) 55%, #fff);
}
/* The rule is a pseudo-element now, so the tinted panel restates it there. */
.rebates-panel .hairline::after {
  background: linear-gradient(90deg, rgba(10, 46, 86, .32), rgba(10, 46, 86, .12) 38%, transparent 86%);
}
.rebates-panel__body { margin-top: clamp(1.75rem, 2.6vw, 2.25rem); }
.rebates-panel__body p { max-width: 46rem; }
.rebates-panel__body p + p { margin-top: 1.1rem; }
.rebates-panel__actions { margin-top: clamp(1.75rem, 2.6vw, 2.25rem); gap: 1.25rem 2rem; }

/* Standfirst.
   The page head carries the H1, ONE paragraph and the calls to action, so the
   whole proposition lands in a single view. Everything the approved copy adds
   after that opening paragraph runs here instead, immediately below, on a
   readable measure. Nothing was cut to achieve this — the copy moved, and the
   fold now falls after the buttons rather than in the middle of them. */
.page-lede { padding-top: clamp(2.25rem, 3.5vw, 3rem); }
.page-lede__inner { max-width: 46rem; }
.page-lede p { font-size: var(--step-0); line-height: 1.85; color: var(--body); }
.page-lede p + p { margin-top: 1.15rem; }
.page-lede .source-link { margin-top: .2rem; }

/* --------------------------------------------------------------------------
   11d. Guide furniture

   The buying guides share a shape: a numbered specification glossary, a set of
   "best for X" scenarios, and a list of onward links into the size or capacity
   pages. Authored on /best-solar-panels-australia/ and needed by every guide,
   so they live here. Two guides using the same components reads as a system;
   each guide takes its identity from its own comparison instead.
   -------------------------------------------------------------------------- */

/* A section whose approved copy has no intro paragraph runs its head solo
   across the measure rather than carrying a lead nobody wrote. */
.section-head--solo { grid-template-columns: minmax(0, 1fr); }
.section-head--solo h2 { max-width: 24ch; }

/* "What SunRight Solar installs and why" — the same closing section on every guide */
.stocked__body { margin-top: clamp(2.5rem, 4vw, 3.25rem); }
.stocked__body p { max-width: 46rem; }
.stocked__body p + p { margin-top: 1.15rem; }
.stocked__actions { margin-top: clamp(1.75rem, 2.6vw, 2.25rem); gap: 1.25rem 2rem; }

/* Small uppercase label — a stocked-brand marker, a warranty term. */
.chip {
  font-family: var(--font-num);
  font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--orange-700);
  padding: .28rem .6rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.chip--quiet { color: var(--muted); }

/* Specification glossary — numbered, ruled definitions */
.specdefs { display: grid; gap: 0; margin-top: clamp(2.5rem, 4vw, 3.5rem); border-top: 1px solid var(--line); }
.specdef {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: clamp(1rem, 2.2vw, 2rem);
  padding: clamp(1.5rem, 2.4vw, 2rem) 0;
  border-bottom: 1px solid var(--line);
}
.specdef__index {
  grid-row: 1 / span 3;
  font-family: var(--font-num);
  font-size: clamp(1.375rem, 2.2vw, 1.75rem);
  font-weight: 700; line-height: 1; letter-spacing: -0.04em;
  color: var(--sun-600);
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .specdef__index { background: var(--grad-cta); -webkit-background-clip: text; background-clip: text; color: transparent; }
}
.specdef h3 { grid-column: 2; margin-bottom: .75rem; font-size: var(--step-2); }
.specdef__body { grid-column: 2; }
.specdef__body > * + * { margin-top: 1rem; }
.specdef__body p { font-size: var(--step-0); line-height: 1.75; }
/* Both breakpoint blocks MUST stay after the base rules above. They carry the
   same specificity, so cascade order is the only thing deciding the winner —
   put the desktop split first and the heading lands back on top of the body. */
@media (min-width: 940px) {
  .specdef {
    grid-template-columns: auto minmax(0, .62fr) minmax(0, 1.3fr);
    column-gap: clamp(1.5rem, 3vw, 3.25rem);
    align-items: start;
  }
  .specdef h3 { grid-column: 2; grid-row: 1; margin-bottom: 0; }
  .specdef__body { grid-column: 3; grid-row: 1 / span 2; }
}
@media (max-width: 560px) {
  .specdef { grid-template-columns: minmax(0, 1fr); }
  .specdef__index { grid-row: auto; margin-bottom: .5rem; }
  .specdef h3, .specdef__body { grid-column: 1; }
}

/* "Best for X" scenarios — ruled recommendations, no decorative icons */
.scenarios {
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  display: grid;
  gap: clamp(1.75rem, 3vw, 2.5rem) clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 1fr);
}
.scenario { padding-top: 1.35rem; border-top: 1px solid var(--line); }
.scenario h3 { margin-bottom: .65rem; font-size: var(--step-1); }
.scenario p { font-size: var(--step-0); line-height: 1.75; }
.scenario p + p { margin-top: .9rem; }
.scenario .link-arrow { margin-top: 1rem; }
@media (min-width: 760px) {
  .scenarios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* An odd count leaves the last item stranded beside a hole. It takes the
     full width instead and reads as the closing beat; the copy stays on a
     readable measure so the rule does the widening, not the line. */
  .scenarios--odd .scenario:last-child { grid-column: 1 / -1; }
  .scenarios--odd .scenario:last-child p { max-width: 46rem; }
}

/* Onward links into the size or capacity guides */
.sizelinks {
  display: grid; gap: 0;
  margin-top: clamp(1.75rem, 2.6vw, 2.25rem);
  border-top: 1px solid var(--line);
}
.sizelinks a {
  display: grid;
  gap: .3rem 1.5rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  transition: padding-left .28s var(--ease-out), background-color .25s var(--ease);
}
@media (min-width: 720px) { .sizelinks a { grid-template-columns: minmax(11rem, .3fr) minmax(0, 1fr) auto; align-items: baseline; } }
.sizelinks a:hover { padding-left: .75rem; background: var(--sky-25); }
.sizelinks__name { font-family: var(--font-display); font-weight: 700; font-size: var(--step-0); color: var(--ink); }
.sizelinks__desc { font-size: var(--step--1); color: var(--body); }
.sizelinks .icon { width: 1.05rem; height: 1.05rem; color: var(--navy-700); transition: transform .3s var(--ease-out); }
.sizelinks a:hover .icon { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   11e. Comparison tables

   Four pages compare things in a grid of rows and columns, so all four use a
   real <table>. On narrow screens it scrolls sideways inside a labelled,
   focusable region rather than collapsing to stacked cards — the whole point
   of the block is reading values across a row, and a collapsed table destroys
   exactly that. tabindex="0" + role="region" + aria-labelledby on the wrapper
   is what makes a scrolling area reachable from the keyboard.

   Authored on /best-solar-panels-australia/, then copied into two more page
   stylesheets while those pages were built in parallel. Consolidated here.
   -------------------------------------------------------------------------- */
.table-scroll {
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: #fff;
}
.table-scroll:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

/* Shown only while the table can still scroll. Each page sets the width at
   which its own table stops overflowing. */
.table-hint { margin-top: .85rem; font-size: .8125rem; color: var(--muted); }

.ctable { width: 100%; border-collapse: collapse; min-width: 46rem; }
.ctable caption {
  caption-side: top;
  text-align: left;
  padding: clamp(1.1rem, 2vw, 1.5rem) clamp(1.1rem, 2vw, 1.5rem) 0;
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--muted);
}
.ctable th, .ctable td {
  padding: .9rem clamp(.85rem, 1.4vw, 1.15rem);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}
.ctable thead th {
  position: sticky;
  top: 0;
  background: var(--sky-50);
  font-family: var(--font-num);
  font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--navy-800);
  white-space: nowrap;
  border-bottom: 1px solid var(--line-strong);
}
.ctable tbody th {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-0);
  color: var(--ink);
  white-space: nowrap;
}
.ctable td { font-size: .9375rem; line-height: 1.5; color: var(--body); }
.ctable td.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink); white-space: nowrap; }
.ctable tbody tr:last-child th, .ctable tbody tr:last-child td { border-bottom: 0; }
.ctable tbody tr { transition: background-color .25s var(--ease); }
.ctable tbody tr:hover { background: var(--sky-25); }

/* Legend for a marked row or column. The marker is never the only signal —
   the marked cell also carries text. */
.table-note {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem;
  margin-top: 1rem;
  font-size: .8125rem; color: var(--muted);
}
.table-note__key { display: inline-flex; align-items: center; gap: .5rem; }
.table-note__key::before {
  content: "";
  width: 3px; height: 1em; border-radius: 3px;
  background: var(--grad-cta);
}

/* The arrow link on a dark ground. The navy version's colour and its underline
   both fail against navy-950, so the dark CTA block needs its own. */
.link-arrow--light {
  color: #fff;
  background-image: linear-gradient(var(--gold-400), var(--gold-400));
}
.link-arrow--light:hover { color: var(--gold-400); }
/* Two of these stacked in a dark CTA came within 2px of each other at 320px.
   A row that wraps needs its row-gap set, not just its column-gap. */
.btn-row { row-gap: .85rem; }

/* --------------------------------------------------------------------------
   12. Motion
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .85s var(--ease-out), transform .85s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-revealed { opacity: 1; transform: none; }
.no-js [data-reveal] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   404
   -------------------------------------------------------------------------- */
.notfound { max-width: 44rem; padding-block: clamp(1rem, 4vw, 3rem) clamp(2rem, 6vw, 5rem); }
.notfound .lead { margin-top: 1rem; }
.notfound__links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
  gap: .9rem 2rem;
  margin: clamp(1.75rem, 4vw, 2.5rem) 0;
  padding-block: 1.5rem;
  border-block: 1px solid var(--line);
}
.notfound .btn-row { margin-top: 0; }

/* ==========================================================================
   Editorial grid — how section bodies use the width on desktop

   A two-column section head sets the heading on the left and the lead on the
   right. Running copy used to restart at the left edge at a 46rem measure,
   which left the right 40% of every such section empty. Now:

   - running copy continues in the lead's right-hand column, so each section
     reads as one text column beside its heading;
   - lists of short items (capacity-page.css, about.css) run as a two-column
     grid across the full width;
   - a callout that sits between two blocks of copy moves into the left column
     beside the copy that follows it, as a side note;
   - images, tables, splits and grids keep the full width.

   From 1100px only: below that the right-hand column would drop under ~500px
   and set too narrow a measure, so tablets keep the single column.
   --prose-start repeats .section-head's own maths (1fr / 1.1fr with the same
   gap), so the copy lands exactly under the lead at every width.
   ========================================================================== */
:root { --head-gap: clamp(2.5rem, 5vw, 5.5rem); }

@media (min-width: 1100px) {
  :is(.container, .rebates-panel):has(> .section-head) {
    display: flow-root;
    --side-width: calc((100% - var(--head-gap)) / 2);
    --prose-start: calc(var(--side-width) + var(--head-gap));
  }
  :is(.container, .rebates-panel):has(> .section-head) > * { clear: both; }

  /* Body copy: full width, set in two balanced columns that line up with the
     heading / lead split above. No half of the row is ever left empty. */
  :is(.container, .rebates-panel):has(> .section-head) > :is(
    .capcopy, .size-body, .body-copy, .measure, .stocked__body, .capguard,
    .decide__foot, .flow__note, .range__note, .rebates-panel__body
  ) {
    max-width: none;
    margin-left: 0;
    columns: 2;
    column-gap: var(--head-gap);
    /* Two-line minimum either side of a break: a 4-line paragraph splits 2 + 2,
       never 3 + 1 with a lone line stranded at the top of the second column. */
    orphans: 2;
    widows: 2;
  }
  :is(.container, .rebates-panel):has(> .section-head) > :is(.capcopy, .size-body, .body-copy, .measure, .stocked__body, .capguard, .decide__foot, .flow__note, .range__note, .rebates-panel__body) :is(p, ul, ol) { max-width: none; }
  /* Sub-headings, link rows, buttons and lists inside the copy run across
     both columns rather than being split between them. */
  :is(.container, .rebates-panel):has(> .section-head) > :is(.capcopy, .size-body, .body-copy, .measure, .stocked__body, .capguard, .decide__foot, .flow__note, .range__note, .rebates-panel__body)
    > :is(h3, h4, ul, ol, table, .linkset, .btn-row, .link-arrow, .onward, .sizelinks, .table-scroll, .source-link, div) {
    column-span: all;
  }
  /* Copy that follows a head reads on from the lead: a paragraph's distance
     below it rather than a section's. */
  :is(.container, .rebates-panel):has(> .section-head) > .section-head + :is(.capcopy, .size-body, .body-copy, .measure, .stocked__body, .rebates-panel__body) {
    margin-top: clamp(1.5rem, 2vw, 1.85rem);
  }

  /* Side-note pairs: a callout beside the copy that explains it. Both halves
     are filled, so these keep the left / right arrangement. */
  :is(.container, .rebates-panel):has(> .section-head) > :is(.capguard, .callout, .rb-example):has(+ :is(.capcopy, .callout__body, .rb-notice)) {
    float: left;
    clear: left;
    width: var(--side-width);
    margin-left: 0;
    columns: auto;
  }
  :is(.container, .rebates-panel):has(> .section-head) > :is(.capguard, .callout, .rb-example):has(+ :is(.capcopy, .callout__body, .rb-notice)) + * {
    clear: none;
    margin-left: var(--prose-start);
    max-width: none;
    columns: auto;
  }
  :is(.container, .rebates-panel):has(> .section-head) > :is(.callout, .rb-example) p { max-width: none; }
  :is(.container, .rebates-panel):has(> .section-head) > .rb-notice + .btn-row { clear: none; margin-left: var(--prose-start); }
  :is(.container, .rebates-panel):has(> .section-head) > .capguard:has(+ .capcopy),
  :is(.container, .rebates-panel):has(> .section-head) > .capguard:has(+ .capcopy) + .capcopy { margin-top: clamp(1.75rem, 2.6vw, 2.25rem); }
  :is(.container, .rebates-panel):has(> .section-head) > .callout + .callout__body { margin-top: clamp(2.5rem, 4vw, 3.25rem); }
  /* Too short to split (set by main.js): one column at a reading measure. */
  :is(.container, .rebates-panel):has(> .section-head) > .is-single-col { columns: auto; max-width: 46rem; }

  /* Head and body share one even split, so the columns line up all the way down. */
  .section-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--head-gap); }
}

/* The standfirst under each page hero: set as a deliberate intro statement,
   not a stray paragraph. */
.page-lede__inner {
  max-width: 52rem;
  padding-left: clamp(1rem, 2vw, 1.5rem);
  border-left: 3px solid var(--orange-500);
}
.page-lede p { font-size: var(--step-1); line-height: 1.75; color: var(--ink); }

/* --------------------------------------------------------------------------
   Long copy beside a picture

   In a split, the picture now starts level with the copy and stays in view
   while the reader scrolls through text that runs longer than it, instead of
   sitting centred with an empty band above and below it.
   -------------------------------------------------------------------------- */
@media (min-width: 940px) {
  .split__media {
    position: sticky;
    top: calc(var(--header-h) + 1.75rem);
    align-self: start;
  }
}

@media (min-width: 1100px) {
  /* Bullet lists inside two-column copy flow with the text, item by item. */
  :is(.container, .rebates-panel):has(> .section-head) > :is(.capcopy, .size-body, .body-copy, .measure, .stocked__body) > :is(ul, ol) { column-span: none; }
  :is(.container, .rebates-panel):has(> .section-head) > :is(.capcopy, .size-body, .body-copy, .measure, .stocked__body) li { break-inside: avoid; max-width: none; }
}

@media (min-width: 940px) {
  /* An odd last key point takes the whole row, its text in two columns,
     rather than sitting alone beside an empty half. */
  .container > .keypoints > p:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    columns: 2;
    column-gap: var(--head-gap);
    orphans: 2;
    widows: 2;
  }
}
@media (min-width: 1100px) {
  /* A block that is only a ruled list (.fitlist) sets the list itself in two
     columns: a grid cannot be split across text columns. */
  :is(.container, .rebates-panel):has(> .section-head) > .size-body:has(> .fitlist:only-child) { columns: auto; }
  :is(.container, .rebates-panel):has(> .section-head) > .size-body > .fitlist:only-child {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--head-gap);
  }
}

/* ==========================================================================
   Section finish — refined editorial
   Large outlined section numerals behind each heading, a sunrise underline
   that grows on hover, a fine rule between copy columns, ticked lists,
   "Good to know" callouts, and images that lift on hover.
   ========================================================================== */
.section { overflow: clip; }

/* Section number: a large, faint outlined numeral behind the heading. */
.hairline::before {
  font-size: clamp(4.5rem, 9vw, 8rem);
  font-weight: 800;
  letter-spacing: -.04em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(31, 94, 156, .26);
  transform: translateY(-38%);
  left: -.25rem;
  z-index: 0;
  pointer-events: none;
}
.hairline--dark::before { -webkit-text-stroke-color: rgba(255, 196, 0, .25); }
.hairline::after { left: 0; top: 0; opacity: .6; }
.hairline > * { position: relative; z-index: 1; }

/* Sunrise underline under every section heading. */
.section-head h2::after,
.faq__aside h2::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: 4px;
  margin-top: 1.1rem;
  border-radius: 4px;
  background: var(--grad-cta);
  transition: width .6s var(--ease-out);
}
section:hover .section-head h2::after { width: 5.5rem; }
.section-head .lead { color: var(--ink); font-size: var(--step-1); }

/* Two-column copy gets a fine rule between the columns. */
:is(.capcopy, .size-body, .body-copy, .measure, .stocked__body, .rebates-panel__body) {
  column-rule: 1px solid var(--line);
}

/* Lists: a gradient tick disc instead of a dash; rows tint on hover. */
main :is(.checklist, .fitlist) li { padding-left: 2.4rem; transition: background-color .3s var(--ease); border-radius: var(--r-sm); }
main :is(.checklist, .fitlist) li::before {
  width: 1.35rem; height: 1.35rem; top: 1.05rem; left: .2rem; border-radius: 50%;
  background: var(--grad-cta) center / cover;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12'/%3E%3C/svg%3E") center / contain no-repeat;
}
main :is(.checklist, .fitlist) li::after {
  content: ""; position: absolute; left: .64rem; top: 1.5rem; width: .5rem; height: .27rem;
  border-left: 2px solid var(--navy-900); border-bottom: 2px solid var(--navy-900); transform: rotate(-45deg);
}
main .fitlist li { position: relative; }
main :is(.checklist, .fitlist) li:hover { background: var(--sky-25); }

/* Key points and factors: the bold lead-in gets a gold underline. */
:is(.keypoints, .factorlist) strong { box-shadow: inset 0 -.38em 0 rgba(255, 196, 0, .28); }

/* Callouts: warmer, with a small "Good to know" label. */
.capguard { background: linear-gradient(120deg, #fff9f1, #fff); border-color: #fde3c7; }
.capguard::before {
  content: "Good to know"; display: block; margin-bottom: .6rem;
  font-size: .6875rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--orange-700);
}

/* Images lift on hover; a soft shadow under every frame. */
.media-frame { box-shadow: var(--shadow-md); transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); }
@media (hover: hover) {
  .media-frame:hover { transform: translateY(-4px); box-shadow: var(--shadow-xl); }
  .media-frame:hover img { transform: scale(1.03); }
}

/* ==========================================================================
   Section polish — component by component
   Prefixed with `main` so these win over the page stylesheets, which load
   after this file. Each rule upgrades a shared component, so every page that
   uses it gets the same treatment.
   ========================================================================== */

/* 1. Ruled schedules (cost, pricing, payback, inclusions): a raised panel with
      rows that slide an accent bar in on hover. */
main .ledger {
  padding: clamp(.5rem, 1.5vw, 1rem) clamp(1.25rem, 2.6vw, 2.5rem);
  background: #fff;
  border: 1px solid var(--line);
  border-top: 3px solid transparent;
  border-image: none;
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
  background-image: linear-gradient(#fff, #fff), var(--grad-cta);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}
main .ledger__row { position: relative; border-radius: var(--r-md); }
main .ledger__row:last-child { border-bottom: 0; }
main .ledger__row::before {
  content: ""; position: absolute; left: calc(-1 * clamp(1.25rem, 2.6vw, 2.5rem)); top: 1.2rem; bottom: 1.2rem; width: 3px;
  border-radius: 3px; background: var(--grad-cta); transform: scaleY(0); transform-origin: top;
  transition: transform .4s var(--ease-out);
}
main .ledger__row:hover::before { transform: scaleY(1); }
main .ledger__label { color: var(--navy-900); }

/* 2. Numbered process steps: filled sunrise discs on a gradient rail. */
main .flow__marker {
  width: 3rem; height: 3rem;
  background: var(--grad-cta); border-color: transparent; color: var(--navy-950);
  box-shadow: 0 6px 16px -6px rgba(253, 104, 0, .55);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
main .flow__step:hover .flow__marker { transform: scale(1.08); box-shadow: 0 10px 22px -8px rgba(253, 104, 0, .7); }
main .flow__step:not(:last-child)::before {
  left: calc(1.5rem - 1px); top: 3.1rem;
  background: linear-gradient(180deg, var(--sun-400), var(--line) 85%);
}
main .flow__step { border-radius: var(--r-md); transition: background-color .3s var(--ease); }

/* 3. Grids of short text blocks (pricing tiers, battery brands): cards with a
      sunrise top edge that lift on hover. */
main :is(.tier, .brandlist__item) {
  position: relative;
  padding: clamp(1.25rem, 2.2vw, 1.75rem);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .35s var(--ease);
}
main :is(.tier, .brandlist__item)::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--grad-cta);
  transform: scaleX(.18); transform-origin: left; transition: transform .5s var(--ease-out);
}
@media (hover: hover) {
  main :is(.tier, .brandlist__item):hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--line-strong); }
  main :is(.tier, .brandlist__item):hover::before { transform: scaleX(1); }
}

/* 4. Sections that are words only: a soft sun glow in the top-right corner so
      a page of text still has light and depth. Colour only, never content. */
main > .section:not(.final-cta):not(:has(img, table, .media-frame, .rebates-panel)) {
  background-image:
    radial-gradient(38rem 24rem at 100% 0%, rgba(255, 196, 0, .10), transparent 70%),
    radial-gradient(30rem 22rem at 0% 100%, rgba(31, 94, 156, .06), transparent 70%);
}

/* 5. Questions: the open answer gets a warm edge; questions nudge on hover. */
@media (hover: hover) {
  main .accordion__item > summary { transition: color .2s var(--ease), padding-left .3s var(--ease-out); }
}

/* 6. The capacity summary card and the key-fact chips under page heroes. */
main .capfig { transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out); }
@media (hover: hover) { main .capfig:hover { transform: translateY(-4px); box-shadow: var(--shadow-xl); } }

/* 7. "Best for…" scenarios on the buying guides: cards like the tiers, and the
      odd closing card sets its copy in two columns instead of a narrow block. */
main .scenario {
  position: relative;
  padding: clamp(1.35rem, 2.4vw, 1.9rem);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
main .scenario::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--grad-cta);
}
@media (hover: hover) { main .scenario:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } }
@media (min-width: 1100px) {
  main .scenarios--odd .scenario:last-child p { max-width: none; }
  main .scenarios--odd .scenario:last-child { columns: 2; column-gap: var(--head-gap); }
  main .scenarios--odd .scenario:last-child > :is(h3, .link-arrow, .btn-row) { column-span: all; }
}

/* 8. Specification glossary: the same raised panel as the ruled schedules. */
main .specdefs {
  padding: clamp(.5rem, 1.5vw, 1rem) clamp(1.25rem, 2.6vw, 2.5rem);
  border: 1px solid var(--line);
  border-top: 3px solid transparent;
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
  background-image: linear-gradient(#fff, #fff), var(--grad-cta);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}
main .specdef:last-child { border-bottom: 0; }
main .specdef { transition: background-color .3s var(--ease); border-radius: var(--r-md); }

/* 9. Value and support blocks (About: beliefs, aftercare; Quote: next steps,
      reasons): cards with a sunrise edge, lifting on hover. */
main :is(.belief, .aftercare__item, .next-step, .reason) {
  position: relative;
  padding: clamp(1.35rem, 2.4vw, 1.9rem);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
main :is(.belief, .aftercare__item, .next-step, .reason)::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--grad-cta);
  transform: scaleX(.18); transform-origin: left; transition: transform .5s var(--ease-out);
}
main :is(.belief, .aftercare__item, .reason) p { max-width: none; }
@media (hover: hover) {
  main :is(.belief, .aftercare__item, .next-step, .reason):hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
  main :is(.belief, .aftercare__item, .next-step, .reason):hover::after { transform: scaleX(1); }
}

/* 10. About opening statement: a large pull-quote with an oversized mark.
       The mark sits under the rule, level with the first line, so it opens
       the statement instead of crowding the hero buttons above. */
main .about-head__statement { position: relative; padding-left: clamp(3.5rem, 6vw, 5.5rem); margin-top: clamp(3rem, 5vw, 4.5rem); padding-top: clamp(1.25rem, 2vw, 1.75rem); }
main .about-head__statement::before {
  content: "\201C"; position: absolute; left: 0; top: calc(clamp(1.25rem, 2vw, 1.75rem) + .3em);
  font-family: Georgia, serif; font-size: clamp(5rem, 9vw, 8rem); line-height: 1;
  background: var(--grad-cta); -webkit-background-clip: text; background-clip: text; color: transparent;
}
main .about-head__statement p { max-width: 54rem; }

/* 11. Contact: the "Send us a message" side gets a supporting line of reassurance
       through layout alone — a tinted panel that holds the heading. */
@media (min-width: 940px) {
  main .msg__aside {
    padding: clamp(1.75rem, 3vw, 2.5rem);
    border-radius: var(--r-xl);
    background:
      radial-gradient(22rem 16rem at 0% 0%, rgba(255, 196, 0, .16), transparent 70%),
      linear-gradient(160deg, var(--sky-50), #fff);
    border: 1px solid var(--line);
  }
  main .msg__aside h2 { max-width: none; overflow-wrap: normal; word-break: normal; hyphens: none; }
  /* The panel holds the heading alone: one column, not half of the
     editorial heading grid, so it reads "Send Us a / Message". */
  main .msg__aside .section-head { grid-template-columns: minmax(0, 1fr); }
}

/* /get-a-quote/: the copy row is sized to the copy, so the tall form card
   no longer stretches it and pushes the photograph to the foot of the column.
   The photograph sits under the copy and stays in view beside the form. */
@media (min-width: 1024px) {
  main .form-head__grid:not(.form-head__grid--split) { grid-template-rows: auto 1fr; }
  main .form-head__grid:not(.form-head__grid--split) > .form-head__media {
    align-self: start; position: sticky; top: calc(var(--header-h) + 2rem);
  }
}

/* ==========================================================================
   Buttons — refresh
   Every call to action reads as a deliberate object at rest and answers the
   pointer clearly on hover. The primary sunrise button is unchanged in rest
   state; everything around it is lifted to sit at the same level of finish.
   ========================================================================== */

/* Primary: the arrow disc gains a soft ring and the arrow travels further. */
.btn--primary .icon { box-shadow: 0 0 0 3px rgba(255, 255, 255, .28); }
.btn--primary:hover { transform: translateY(-3px); }
.btn--primary:hover .icon { transform: translateX(5px) rotate(-8deg); }

/* Secondary on light (Call 1300 SUN RIGHT, See prices…): a real surface — white,
   a confident navy-tinted edge and a soft shadow — that fills navy on hover. */
.btn--outline {
  background: #fff;
  color: var(--navy-900);
  border-color: rgba(10, 46, 86, .28);
  box-shadow: 0 1px 2px rgba(7, 42, 76, .06), 0 10px 22px -14px rgba(7, 42, 76, .35);
}
.btn--outline:hover {
  background: var(--navy-900);
  border-color: var(--navy-900);
  color: #fff;
  box-shadow: 0 2px 6px rgba(7, 42, 76, .12), 0 18px 32px -14px rgba(7, 42, 76, .55);
}
.btn--outline .icon { background: var(--navy-900); color: #fff; transition: transform .38s var(--ease-out), background .3s var(--ease), color .3s var(--ease); }
.btn--outline:hover .icon { background: var(--grad-cta); color: var(--navy-950); }

/* Navy: hover shows — deeper fill, gold glow, the disc turns sunrise. */
.btn--dark { box-shadow: 0 10px 24px -14px rgba(7, 42, 76, .7); }
.btn--dark:hover { background: var(--navy-950); box-shadow: 0 18px 34px -14px rgba(7, 42, 76, .8), 0 0 0 3px rgba(255, 196, 0, .18); }
.btn--dark .icon { transition: transform .38s var(--ease-out), background .3s var(--ease); }
.btn--dark:hover .icon { background: var(--grad-cta); }

/* On dark: the outline fills white on hover; the white button warms up. */
.btn--outline-light { border-color: rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .06); }
.btn--outline-light:hover { background: #fff; border-color: #fff; color: var(--navy-950); }
.btn--outline-light:hover .icon { background: var(--grad-cta); color: var(--navy-950); }
.btn--white { box-shadow: 0 12px 26px -14px rgba(0, 0, 0, .6); }
.btn--white:hover { color: var(--navy-950); box-shadow: 0 18px 34px -14px rgba(0, 0, 0, .7), 0 0 0 3px rgba(255, 196, 0, .35); }
.btn--white:hover .icon { background: var(--grad-cta); color: var(--navy-950); }

/* Pressed: a short, honest press on every button. */
.btn:active { transform: translateY(0) scale(.98); }

/* Keyboard focus: a visible ring on every button, light and dark. */
.btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
:is(.final-cta, .site-footer, .callout, .rb-example) .btn:focus-visible { outline-color: var(--gold-400); }

/* Text links ("Learn more…"): a short sunrise underline at rest says
   "clickable"; on hover it runs the full length and the arrow moves on. */
.link-arrow {
  font-weight: 700;
  color: var(--navy-900);
  background-image: var(--grad-cta);
  background-size: 1.6rem 2px;
  background-position: 0 100%;
}
.link-arrow:hover { color: var(--orange-700); background-size: 100% 2px; }
.link-arrow .icon { color: var(--orange-600); }
.link-arrow--light { color: #fff; background-image: linear-gradient(90deg, var(--gold-400), var(--gold-300)); }
.link-arrow--light:hover { color: var(--gold-300); }
.link-arrow--light .icon { color: var(--gold-400); }

@media (prefers-reduced-motion: reduce) {
  .btn:hover, .btn--primary:hover, .btn:active { transform: none; }
  .btn:hover .icon { transform: none; }
}

/* Phones: paired buttons in heroes and closing bands run full width and
   equal, so the two choices read as a set rather than two ragged pills. */
@media (max-width: 560px) {
  :is(.page-head__actions, .hero__actions, .final-cta .btn-row, .about-head .btn-row) { display: grid; grid-template-columns: minmax(0, 1fr); }
  :is(.page-head__actions, .hero__actions, .final-cta .btn-row, .about-head .btn-row) > .btn { width: 100%; justify-content: space-between; }
  :is(.page-head__actions, .hero__actions, .final-cta .btn-row, .about-head .btn-row) > .btn:has(.icon--lead) { justify-content: flex-start; gap: 1rem; }
}

/* Sticky phone bar: "Call us" is a proper navy button with its own phone
   disc, matching the family, beside the sunrise quote button. */
.sticky-cta { align-items: center; }
.sticky-cta__call {
  gap: .55rem;
  padding: .4rem 1.1rem .4rem .4rem;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--navy-900);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 10px 22px -12px rgba(7, 42, 76, .7);
}
.sticky-cta__call .icon {
  width: 2.15rem; height: 2.15rem; padding: .58rem;
  border-radius: 50%;
  background: var(--grad-cta);
  color: var(--navy-950);
}
.sticky-cta__call:active { transform: scale(.97); }
.sticky-cta__quote { min-height: 2.95rem; }

/* ==========================================================================
   UX audit fixes (measured: tap targets, card measure)
   ========================================================================== */

/* "Source: …" citations: a real 32px+ target everywhere instead of 21px. */
main .source-link { min-height: 2rem; padding-block: .35rem; }

/* Touch screens: every small link reaches a comfortable 44px, by padding or by
   an invisible hit area, without changing the layout. */
@media (pointer: coarse) {
  :is(.breadcrumb a, .site-footer__top-link, .contact-method__value, a.captable__col, .captable__ref, .source-link) { position: relative; }
  :is(.breadcrumb a, .site-footer__top-link, .contact-method__value, a.captable__col, .captable__ref, .source-link)::after {
    content: ""; position: absolute; left: -4px; right: -4px; top: 50%; height: 44px; transform: translateY(-50%);
  }
  .phone-link .phone-link__icon, .nav-trigger { min-width: 44px; min-height: 44px; }
  .brand { min-height: 44px; display: inline-flex; align-items: center; }
}

/* Battery brand cards: two to a row on desktop, so each paragraph sets at a
   readable measure (it was ~28 characters a line in four narrow columns). */
@media (min-width: 940px) {
  main .brandlist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Mid-page quote band (inserted by sr_mid_cta() in footer.php) */
.midcta { padding-block: clamp(1rem, 2vw, 1.5rem); }
.midcta__card {
  display: grid; gap: 1.5rem; align-items: center;
  padding: clamp(1.5rem, 3.5vw, 2.75rem) clamp(1.5rem, 4vw, 3.25rem);
  border-radius: var(--r-2xl);
  background:
    radial-gradient(32rem 20rem at 100% 0%, rgba(255, 196, 0, .22), transparent 70%),
    radial-gradient(24rem 18rem at 0% 100%, rgba(253, 104, 0, .18), transparent 70%),
    var(--navy-950);
  box-shadow: var(--shadow-xl);
  color: #fff;
}
.midcta__kicker { font-size: .6875rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-400); }
.midcta__title { margin-top: .4rem; font-family: var(--font-display); font-size: var(--step-4); line-height: 1.15; letter-spacing: -.02em; color: #fff; }
.midcta__text { margin-top: .5rem; color: rgba(255, 255, 255, .8); font-size: var(--step-0); }
@media (min-width: 940px) { .midcta__card { grid-template-columns: minmax(0, 1fr) auto; gap: 2.5rem; } }
@media (max-width: 560px) {
  .midcta__actions { display: grid; }
  .midcta__actions > .btn { width: 100%; justify-content: space-between; }
  .midcta__actions > .btn:has(.icon--lead) { justify-content: flex-start; gap: 1rem; }
}

/* ==========================================================================
   Section colour system — brand gradients on every section
   Four light washes from the logo palette cycle down every page, so no two
   neighbouring sections share a background. Hero areas carry a sunrise glow;
   closing bands and the footer are navy with an orange-gold glow. Text
   colours are unchanged, and white cards stand out on every wash.
   ========================================================================== */
:root {
  /* Every light section is white with bright, saturated colour spots in two
     corners. The pair of corners rotates down the page, so each section looks
     different from its neighbour while the centre stays clean for reading. */
  --wash-dawn:
    radial-gradient(34rem 24rem at 100% 0%, rgba(255, 196, 0, .34), transparent 68%),
    radial-gradient(26rem 18rem at 0% 100%, rgba(255, 112, 40, .16), transparent 70%),
    #ffffff;
  --wash-sky:
    radial-gradient(34rem 24rem at 0% 0%, rgba(56, 150, 255, .20), transparent 68%),
    radial-gradient(26rem 18rem at 100% 100%, rgba(255, 196, 0, .26), transparent 70%),
    #ffffff;
  --wash-blend:
    radial-gradient(34rem 24rem at 100% 100%, rgba(255, 128, 20, .22), transparent 68%),
    radial-gradient(26rem 18rem at 0% 0%, rgba(255, 210, 60, .26), transparent 70%),
    #ffffff;
  --wash-mist:
    radial-gradient(34rem 24rem at 0% 100%, rgba(56, 150, 255, .18), transparent 68%),
    radial-gradient(28rem 20rem at 100% 0%, rgba(255, 170, 0, .26), transparent 70%),
    #ffffff;
  --wash-hero:
    radial-gradient(40rem 28rem at 100% 0%, rgba(255, 196, 0, .38), transparent 66%),
    radial-gradient(32rem 24rem at 0% 0%, rgba(56, 150, 255, .20), transparent 66%),
    radial-gradient(28rem 16rem at 55% 100%, rgba(255, 112, 40, .14), transparent 70%),
    #ffffff;
  --wash-navy:
    radial-gradient(36rem 26rem at 0% 0%, rgba(255, 124, 31, .42), transparent 66%),
    radial-gradient(32rem 24rem at 100% 100%, rgba(255, 196, 0, .26), transparent 68%),
    radial-gradient(30rem 22rem at 100% 0%, rgba(56, 150, 255, .22), transparent 68%),
    #062340;
}

main > section.section:not(.final-cta):nth-of-type(4n+1) { background: var(--wash-dawn); }
main > section.section:not(.final-cta):nth-of-type(4n+2) { background: var(--wash-sky); }
main > section.section:not(.final-cta):nth-of-type(4n+3) { background: var(--wash-blend); }
main > section.section:not(.final-cta):nth-of-type(4n+4) { background: var(--wash-mist); }

/* Hero areas at the top of every page */
main > :is(.page-head, .form-head, .about-head) { background: var(--wash-hero); }
/* Short standfirst under the hero continues the hero wash */
main > .page-lede { background: #ffffff; }

/* Closing bands and footer */
main .final-cta { background: var(--wash-navy); }
.site-footer {
  background:
    radial-gradient(50rem 26rem at 100% 0%, rgba(255, 196, 0, .10), transparent 70%),
    radial-gradient(40rem 24rem at 0% 100%, rgba(31, 94, 156, .22), transparent 70%),
    #041a30;
}


/* ==========================================================================
   Small-screen and legibility fixes
   ========================================================================== */
/* The narrowest phones (Galaxy Fold, 280px): a long button label wraps onto
   two lines instead of running out of its pill. */
@media (max-width: 359px) {
  main .btn { white-space: normal; text-align: left; }
}

/* Unit suffixes on large numerals ("kW", "kWh") keep their proportion but
   never drop below 11px, where they stop being readable. */
main .size-card__value em,
main .size-panel__value em { font-size: max(.6875rem, .34em); }
main .capacity-card__value em,
main .ladder__value em { font-size: max(.6875rem, .38em); }
.nav-tile__value em { font-size: max(.6875rem, .5em); }

/* Narrowest phones: the call button keeps its icon and gives up its visible
   label (still read by screen readers), so "Get a free quote" fits on one
   line instead of breaking into three. */
@media (max-width: 359px) {
  .sticky-cta__call { padding: .4rem; }
  .sticky-cta__call span {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  .sticky-cta__quote { white-space: nowrap; padding-left: 1.1rem; padding-right: 1.1rem; justify-content: center; }
}

/* ==========================================================================
   Bullets — every list carries a deliberate marker
   The ruled feature, advantage and eligibility lists used a 10px dash that
   read as a stray hyphen. They now use the same gradient tick disc as the
   checklists. The backup-factor list, which had no marker at all, is
   numbered to match the "eleven factors" diagram above it.
   ========================================================================== */
main :is(.ruled-list, .chem__list, .rb-checks) li {
  --tick-top: .9rem;
  padding-left: 2.6rem;
  border-radius: var(--r-sm);
  transition: background-color .3s var(--ease);
}
main .chem__list li { --tick-top: .8rem; }
main .rb-checks li { --tick-top: .85rem; }
main :is(.ruled-list, .chem__list, .rb-checks) li::before {
  content: ""; position: absolute;
  left: .2rem; top: calc(var(--tick-top) + .2rem);
  width: 1.35rem; height: 1.35rem; border-radius: 50%;
  background: var(--grad-cta);
  box-shadow: 0 2px 8px rgba(253, 104, 0, .22);
}
main :is(.ruled-list, .chem__list, .rb-checks) li::after {
  content: ""; position: absolute;
  left: .64rem; top: calc(var(--tick-top) + .65rem);
  width: .5rem; height: .27rem;
  border-left: 2px solid var(--navy-900); border-bottom: 2px solid var(--navy-900);
  transform: rotate(-45deg);
}
main :is(.ruled-list, .chem__list, .rb-checks) li:hover { background: rgba(255, 255, 255, .55); }

/* The compact eligibility list inside a table cell keeps a smaller disc. */
main .rb-checks--compact li { padding-left: 2.1rem; }
main .rb-checks--compact li::before { width: 1.1rem; height: 1.1rem; top: calc(var(--tick-top) + .25rem); }
main .rb-checks--compact li::after { left: .52rem; top: calc(var(--tick-top) + .6rem); width: .42rem; height: .23rem; }

/* Backup factors: numbered 01–11. */
main .factorlist { counter-reset: factor; }
main .factorlist li { position: relative; counter-increment: factor; padding-left: 3.4rem; }
main .factorlist li::before {
  content: counter(factor, decimal-leading-zero);
  position: absolute; left: 0; top: calc(clamp(.9rem, 1.5vw, 1.15rem) - .15rem);
  display: grid; place-items: center;
  width: 2.25rem; height: 2.25rem; border-radius: 50%;
  font-family: var(--font-display); font-size: .78rem; font-weight: 700; letter-spacing: .02em;
  color: var(--navy-900);
  background: linear-gradient(145deg, #fff6e6, #ffe2bd);
  border: 1px solid rgba(253, 104, 0, .28);
  box-shadow: 0 3px 10px rgba(253, 104, 0, .14);
}

/* Legal pages: the gradient dot gains a soft gold halo. */
.legal-sec__body ul li::before { box-shadow: 0 0 0 4px rgba(255, 196, 0, .2); }

/* Panels follow the same rule as sections: a clean surface with colour only
   as a corner glow, never a wash across the whole panel. */
main :is(.capguard, .itype, .rb-scheme, .ladder__note, .batteries__scale) {
  background:
    radial-gradient(24rem 16rem at 100% 0%, rgba(255, 196, 0, .12), transparent 70%),
    #ffffff;
}
main .rb-scheme--state,
main .itype:nth-of-type(even) {
  background:
    radial-gradient(24rem 16rem at 0% 0%, rgba(74, 144, 226, .10), transparent 70%),
    #ffffff;
}
main .rb-part--notice {
  background:
    radial-gradient(20rem 12rem at 0% 0%, rgba(253, 128, 0, .10), transparent 70%),
    #ffffff;
}
main details.accordion__item {
  background:
    radial-gradient(16rem 10rem at 100% 0%, rgba(255, 196, 0, .10), transparent 70%),
    #ffffff;
}
main :is(.rebates__panel, .rebates-panel) {
  background:
    radial-gradient(30rem 20rem at 100% 0%, rgba(255, 196, 0, .16), transparent 70%),
    radial-gradient(26rem 18rem at 0% 100%, rgba(74, 144, 226, .10), transparent 70%),
    #ffffff;
  box-shadow: var(--shadow-sm, 0 2px 12px rgba(10, 46, 86, .06));
}

/* ==========================================================================
   Header and footer refresh
   ========================================================================== */
/* Header: frosted white with a faint sunrise spot behind the logo and the
   quote button, and a permanent sunrise hairline along the bottom edge. */
.site-header {
  background:
    radial-gradient(22rem 6rem at 6% 0%, rgba(255, 196, 0, .16), transparent 70%),
    radial-gradient(22rem 6rem at 96% 0%, rgba(255, 128, 20, .12), transparent 70%),
    rgba(255, 255, 255, .9);
}
.site-header.is-stuck {
  background:
    radial-gradient(22rem 6rem at 6% 0%, rgba(255, 196, 0, .14), transparent 70%),
    radial-gradient(22rem 6rem at 96% 0%, rgba(255, 128, 20, .10), transparent 70%),
    rgba(255, 255, 255, .97);
}
.site-header::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(253, 104, 0, .35) 20%, rgba(255, 196, 0, .45) 50%, rgba(56, 150, 255, .30) 80%, transparent);
  pointer-events: none;
}
/* Nav: a "sunrise glider". One glowing pill (.nav-glider, placed by main.js)
   slides from link to link under the pointer and rests on the current page.
   Without JavaScript the per-link underline below still marks hover. */
.primary-nav__list { position: relative; isolation: isolate; }
.nav-glider {
  position: absolute; z-index: -1; top: 50%; left: 0;
  height: 2.6rem; width: 0; border-radius: var(--r-pill);
  background:
    radial-gradient(120% 140% at 50% 120%, rgba(255, 196, 0, .45), transparent 60%),
    linear-gradient(100deg, rgba(253, 104, 0, .14), rgba(255, 196, 0, .22));
  box-shadow: inset 0 0 0 1px rgba(253, 104, 0, .22), 0 6px 18px -8px rgba(253, 104, 0, .55);
  opacity: 0; transform: translate(var(--gx, 0), -50%) scale(.92);
  transition: transform .45s cubic-bezier(.22, 1.2, .36, 1), width .45s cubic-bezier(.22, 1.2, .36, 1), opacity .25s var(--ease);
  pointer-events: none;
}
.nav-glider.is-on { opacity: 1; transform: translate(var(--gx, 0), -50%) scale(1); }
.js-glider .primary-nav__link::after { display: none; }
.primary-nav__link { transition: color .25s var(--ease), letter-spacing .25s var(--ease); }
.primary-nav__item:hover .primary-nav__link,
.primary-nav__link:hover,
.primary-nav__link:focus-visible { color: var(--orange-700); }
.primary-nav__item:hover .primary-nav__disclosure { color: var(--orange-700); }
.primary-nav__link::after { height: 2px; border-radius: 2px; background: var(--grad-cta); bottom: .25rem; }

/* Phone: the icon disc fills with the sunrise gradient and rings. */
.site-header .phone-link__icon { transition: background .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease); }
.site-header .phone-link__icon .icon { color: var(--orange-600, #e05a00); transition: color .3s var(--ease); }
.site-header .phone-link:hover .phone-link__icon {
  background: var(--grad-cta); border-color: transparent; transform: scale(1.06);
  box-shadow: 0 0 0 5px rgba(255, 196, 0, .2), 0 8px 18px -6px rgba(253, 104, 0, .6);
}
.site-header .phone-link:hover .phone-link__icon .icon { color: var(--navy-900); animation: phone-ring .7s var(--ease) 1; }
.site-header .phone-link:hover .phone-link__number { color: var(--orange-700); }
@keyframes phone-ring {
  0%, 100% { transform: rotate(0); } 20% { transform: rotate(-16deg); } 40% { transform: rotate(14deg); }
  60% { transform: rotate(-10deg); } 80% { transform: rotate(6deg); }
}

/* Quote button: a light sweep crosses it on hover. */
.site-header .masthead__actions .btn--primary { position: relative; overflow: hidden; isolation: isolate; }
.site-header .masthead__actions .btn--primary::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .65) 50%, transparent 70%);
  transform: translateX(-120%);
}
.site-header .masthead__actions .btn--primary:hover::before { transform: translateX(120%); transition: transform .75s var(--ease); }
.site-header .masthead__actions .btn--primary:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -8px rgba(253, 104, 0, .65); }

/* Logo lifts slightly on hover. */
.site-header .brand img { transition: height .32s var(--ease), transform .35s var(--ease), filter .35s var(--ease); }
.site-header .brand:hover img { transform: translateY(-1px) scale(1.03); filter: drop-shadow(0 4px 10px rgba(253, 104, 0, .25)); }

@media (prefers-reduced-motion: reduce) {
  .nav-glider { transition: opacity .2s linear; }
  .site-header .phone-link:hover .phone-link__icon .icon { animation: none; }
  .site-header .masthead__actions .btn--primary:hover::before { transition: none; }
}

/* Footer: deep navy with three colour spots, a sunrise rule on top, and
   column headings that carry a short gradient bar. */
.site-footer {
  background:
    radial-gradient(34rem 22rem at 0% 0%, rgba(255, 124, 31, .26), transparent 68%),
    radial-gradient(30rem 22rem at 100% 0%, rgba(255, 196, 0, .16), transparent 68%),
    radial-gradient(36rem 24rem at 100% 100%, rgba(56, 150, 255, .20), transparent 68%),
    #041a30;
}
.site-footer::before { height: 3px; background: var(--grad-cta); }
.site-footer__heading { position: relative; padding-bottom: .7rem; }
.site-footer__heading::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 1.75rem; height: 2px; border-radius: 2px;
  background: var(--grad-cta);
}
.site-footer__brand {
  padding: clamp(1.25rem, 2vw, 1.75rem);
  border-radius: var(--r-xl);
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  align-self: start;
}

/* ==========================================================================
   Hero finish — every page
   Decoration only, drawn in CSS: no change to the H1, copy, images, preloads
   or markup, and nothing animates the hero photograph (the LCP element).
   All motion stops under prefers-reduced-motion.
   ========================================================================== */
main > :is(.hero, .page-head, .form-head, .about-head) { position: relative; isolation: isolate; overflow-x: clip; }

/* 1. Brighter sunrise light, now on the home hero too. */
main > .hero { background: var(--wash-hero); }

/* 3. Kicker and title: typography only. The kicker is tracked capitals in
      the brand orange; the title is set a little tighter. No rules, bars or
      ornaments beside them. */
main > :is(.hero, .page-head, .form-head, .about-head) .kicker {
  display: block; padding: 0; background: none; border: 0; box-shadow: none;
  font-size: .75rem; font-weight: 700; letter-spacing: .2em;
  color: var(--orange-700);
}
main > :is(.hero, .page-head, .form-head, .about-head) .kicker::before { content: none; display: none; }
main > :is(.hero, .page-head, .form-head, .about-head) h1 { letter-spacing: -.028em; }
/* The home hero's vertical grid rule goes too. */
main > .hero::before { content: none; display: none; }

/* 5. Hero photographs: a soft warm shadow under the frame. */
main :is(.page-banner, .about-head__banner, .form-head__media) { position: relative; }
main :is(.page-banner, .about-head__banner, .form-head__media) .media-frame {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .7), 0 30px 60px -24px rgba(253, 104, 0, .40), 0 18px 40px -20px rgba(7, 42, 76, .35);
}
/* The home hero photo panel keeps its own stacking context. */
main > .hero .hero__panel { isolation: isolate; }

/* 6. Hero buttons lift a touch further on hover. */
main > :is(.hero, .page-head, .form-head, .about-head) .btn:hover { transform: translateY(-2px); }


/* ==========================================================================
   Home trust cards — frosted glass with soap bubbles
   Each card has one brand tint (orange, gold, sky). The number sits in a
   glossy bubble; two translucent bubbles with an iridescent rim and a
   highlight drift in the corner. Motion is slow and stops under
   prefers-reduced-motion.
   ========================================================================== */
main .trust__card {
  --tint: 253, 104, 0;
  flex-direction: row; align-items: center; gap: 1.1rem;
  padding: clamp(1.25rem, 2vw, 1.6rem) clamp(1.25rem, 2vw, 1.6rem);
  border-radius: 1.5rem;
  border: 1px solid rgba(255, 255, 255, .9);
  background:
    radial-gradient(18rem 10rem at 100% 0%, rgba(var(--tint), .10), transparent 70%),
    linear-gradient(160deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .82));
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
          backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 24px 48px -28px rgba(7, 42, 76, .45), 0 8px 18px -12px rgba(var(--tint), .35);
  isolation: isolate;
}
main .trust__card:nth-child(2) { --tint: 255, 176, 0; }
main .trust__card:nth-child(3) { --tint: 56, 150, 255; }

/* The two drifting bubbles. */
main .trust__card::before,
main .trust__card::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  border-radius: 50%; transform-origin: center;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .95) 0 7%, rgba(255, 255, 255, 0) 12%),
    radial-gradient(circle at 70% 76%, rgba(255, 255, 255, .55) 0 4%, rgba(255, 255, 255, 0) 8%),
    radial-gradient(circle at 50% 50%, rgba(var(--tint), .02) 0 52%, rgba(var(--tint), .16) 68%, rgba(120, 190, 255, .22) 80%, rgba(var(--tint), .38) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), 0 10px 24px -14px rgba(var(--tint), .6);
  height: auto; inset: auto;
  animation: trust-drift 9s ease-in-out infinite;
  transition: transform .6s var(--ease-out);
}
main .trust__card::before { width: 6.5rem; aspect-ratio: 1; right: -1.6rem; top: -2.2rem; }
main .trust__card::after  { width: 2.4rem; aspect-ratio: 1; right: 4.4rem; top: 1rem; animation-delay: -4.5s; animation-duration: 7s; }

/* The number inside a glossy bubble. */
main .trust__index {
  flex: none; display: grid; place-items: center;
  width: 3.1rem; height: 3.1rem; border-radius: 50%;
  font-size: .82rem; letter-spacing: .04em; color: var(--navy-900);
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .95) 0 10%, rgba(255, 255, 255, 0) 24%),
    radial-gradient(circle at 50% 60%, rgba(var(--tint), .22), rgba(var(--tint), .55));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .75), inset 0 -6px 12px rgba(var(--tint), .25), 0 8px 18px -8px rgba(var(--tint), .7);
}
main .trust__label { margin-top: 0; }

main .trust__card:hover {
  transform: translateY(-5px);
  border-color: rgba(255, 255, 255, .95);
  background:
    radial-gradient(18rem 10rem at 100% 0%, rgba(var(--tint), .16), transparent 70%),
    linear-gradient(160deg, #fff, rgba(255, 255, 255, .9));
  box-shadow: 0 1px 0 #fff inset, 0 30px 56px -26px rgba(7, 42, 76, .45), 0 14px 30px -14px rgba(var(--tint), .5);
}
main .trust__card:hover::before { transform: translate(-6px, 8px) scale(1.12); }
main .trust__card:hover::after  { transform: translate(-10px, -4px) scale(1.25); }
main .trust__card:hover .trust__index { transform: scale(1.06); }

@keyframes trust-drift {
  0%, 100% { translate: 0 0; }
  50% { translate: -4px 6px; }
}
@media (prefers-reduced-motion: reduce) {
  main .trust__card::before, main .trust__card::after { animation: none; }
}

/* ==========================================================================
   Hero sun — a glowing sun behind every page's hero photograph
   Pure CSS behind the image, so the photo (the LCP element) is untouched.
   A bright core fades through gold and orange into a soft corona, peeking
   out from behind the frame's top corner.
   ========================================================================== */
:root {
  --sun:
    radial-gradient(circle at 50% 50%,
      #fffdf2 0 13%, #fff0b3 20%, #ffd75e 30%, #ffb323 41%, #ff8f1f 50%,
      rgba(255, 143, 31, .42) 58%, rgba(255, 179, 35, .16) 68%, rgba(255, 196, 0, 0) 76%);
}
main :is(.page-banner, .about-head__banner, .form-head__media)::before,
main > .hero .hero__content::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  aspect-ratio: 1; border-radius: 50%;
  background: var(--sun);
  animation: hero-sun 9s ease-in-out infinite;
}
main :is(.page-banner, .about-head__banner, .form-head__media)::before {
  width: clamp(11rem, 17vw, 16rem); top: clamp(-5.5rem, -6vw, -3.5rem); left: clamp(-5.5rem, -6vw, -3.5rem);
}
/* Home: the sun rises from behind the photograph's top-left corner. */
main > .hero .hero__content::after {
  width: clamp(12rem, 18vw, 17rem); top: clamp(1rem, 3vw, 2.5rem); right: clamp(-9rem, -10vw, -6rem);
}
@keyframes hero-sun {
  0%, 100% { transform: scale(1); opacity: .95; }
  50% { transform: scale(1.06); opacity: 1; }
}
@media (max-width: 1023px) {
  main > .hero .hero__content::after { width: 9rem; top: auto; bottom: -4.25rem; right: -2.5rem; }
}
@media (max-width: 939px) {
  main :is(.page-banner, .about-head__banner, .form-head__media)::before { width: 8.5rem; top: -2.75rem; left: auto; right: -2.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  main :is(.page-banner, .about-head__banner, .form-head__media)::before,
  main > .hero .hero__content::after { animation: none; }
}
/* /get-a-quote/: the photo sits under the copy, so its sun rises from the
   top-right corner, clear of the text above. */
@media (min-width: 940px) {
  main .form-head__grid:not(.form-head__grid--split) .form-head__media::before { left: auto; right: clamp(-5.5rem, -5vw, -3.5rem); }
}

/* ==========================================================================
   Quote popup (includes/quote-popup.php)
   Sized so the whole form is visible in one view on every device: the photo
   panel appears only on wide screens, and spacing tightens on short ones.
   ========================================================================== */
html.qp-lock { overflow: hidden; }
.qp {
  width: min(62rem, calc(100vw - 1.5rem));
  max-width: none; max-height: calc(100dvh - 1.5rem);
  margin: auto; padding: 0; border: 0;
  border-radius: 1.75rem;
  background: #fff; color: var(--body);
  box-shadow: 0 40px 100px -30px rgba(4, 24, 45, .65), 0 0 0 1px rgba(255, 255, 255, .6);
  overflow: hidden;
}
.qp[open] { animation: qp-in .38s cubic-bezier(.2, .9, .3, 1.05) both; }
.qp::backdrop { background: rgba(4, 24, 45, .58); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
@keyframes qp-in { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }

.qp__shell { display: grid; max-height: calc(100dvh - 1.5rem); }
@media (min-width: 900px) { .qp__shell { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); } }

/* Photo panel */
.qp__aside { position: relative; display: none; overflow: hidden; background: #062340; color: #fff; }
@media (min-width: 900px) { .qp__aside { display: flex; align-items: flex-end; } }
.qp__photo, .qp__photo picture { position: absolute; inset: 0; }
.qp__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 50%; }
.qp__aside::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(4, 24, 45, .05) 0%, rgba(4, 24, 45, .35) 45%, rgba(4, 24, 45, .92) 100%);
}
.qp__aside-copy { position: relative; z-index: 1; padding: clamp(1.75rem, 2.6vw, 2.25rem); }
.qp__aside-title { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.2; letter-spacing: -.02em; color: #fff; margin: 0 0 1.1rem; }
.qp__promises { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.qp__promises li { position: relative; padding-left: 1.85rem; font-size: .9rem; line-height: 1.45; color: rgba(255, 255, 255, .88); }
.qp__promises li::before {
  content: ""; position: absolute; left: 0; top: .05rem; width: 1.2rem; height: 1.2rem; border-radius: 50%;
  background: var(--grad-cta);
}
.qp__promises li::after {
  content: ""; position: absolute; left: .4rem; top: .38rem; width: .42rem; height: .24rem;
  border-left: 2px solid #062340; border-bottom: 2px solid #062340; transform: rotate(-45deg);
}

/* Form side */
.qp__main {
  position: relative; overflow-y: auto; overscroll-behavior: contain;
  padding: clamp(1.25rem, 3vw, 2.25rem) clamp(1.1rem, 3vw, 2.4rem);
  background:
    radial-gradient(22rem 12rem at 100% 0%, rgba(255, 196, 0, .14), transparent 70%),
    #fff;
}
.qp__close {
  position: absolute; top: .85rem; right: .85rem; z-index: 2;
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  border: 1px solid var(--line); background: #fff; color: var(--navy-800); cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease), transform .25s var(--ease);
}
.qp__close .icon { width: 1rem; height: 1rem; }
.qp__close:hover { background: var(--navy-900); color: #fff; transform: rotate(90deg); }
.qp__eyebrow { margin: 0 0 .35rem; font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--orange-700); }
.qp__title { margin: 0; padding-right: 2.75rem; font-family: var(--font-display); font-size: clamp(1.45rem, 2.4vw, 1.85rem); line-height: 1.15; letter-spacing: -.02em; color: var(--ink); }
.qp__lede { margin: .45rem 0 0; font-size: .92rem; line-height: 1.5; color: var(--muted); }

.qp__form { display: grid; gap: .85rem; margin-top: 1.1rem; }
.qp__group { margin: 0; padding: 0; border: 0; min-width: 0; }
.qp__legend { padding: 0; margin-bottom: .4rem; font-size: .8rem; font-weight: 700; color: var(--ink); }
.qp__choices { display: grid; gap: .45rem; }
.qp__choices--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.qp__choices--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 640px) { .qp__choices--four { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.qp__choice { position: relative; }
.qp__choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.qp__choice label {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 2.6rem; padding: .35rem .5rem; border-radius: .8rem;
  border: 1.5px solid #dbe3ec; background: #fbfcfe;
  font-size: .84rem; font-weight: 600; line-height: 1.2; color: var(--navy-800); cursor: pointer;
  transition: border-color .2s var(--ease), background-color .2s var(--ease), box-shadow .2s var(--ease), color .2s var(--ease);
}
.qp__choice label:hover { border-color: rgba(253, 104, 0, .45); background: #fffaf3; }
.qp__choice input:checked + label {
  border-color: #fd6800; background: linear-gradient(160deg, #fff7ea, #ffefd6); color: var(--navy-900);
  box-shadow: 0 6px 16px -10px rgba(253, 104, 0, .8);
}
.qp__choice input:focus-visible + label { outline: 3px solid rgba(253, 104, 0, .35); outline-offset: 2px; }

.qp__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem .75rem; }
.qp__field { min-width: 0; }
.qp__field--full { grid-column: 1 / -1; }
.qp__label { display: block; margin-bottom: .3rem; font-size: .8rem; font-weight: 700; color: var(--ink); }
.qp__input {
  width: 100%; height: 2.85rem; padding: 0 .9rem; border-radius: .8rem;
  border: 1.5px solid #dbe3ec; background: #fbfcfe;
  font: inherit; font-size: 1rem; color: var(--ink);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease);
}
.qp__input:hover { border-color: #c4d0dd; }
.qp__input:focus { outline: none; border-color: #fd6800; background: #fff; box-shadow: 0 0 0 4px rgba(253, 104, 0, .14); }
.qp__error { margin: .3rem 0 0; font-size: .78rem; font-weight: 600; line-height: 1.35; color: #b42318; }
.qp__error:empty { display: none; }
.is-invalid .qp__input, .is-invalid .qp__choice label { border-color: #d92d20; }

.qp__consent { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .25rem .65rem; align-items: start; }
.qp__consent input { width: 1.2rem; height: 1.2rem; margin: .1rem 0 0; accent-color: #fd6800; }
.qp__consent label { font-size: .84rem; line-height: 1.45; color: var(--body); }
.qp__consent a { color: var(--navy-800); text-decoration: underline; text-underline-offset: 2px; }
.qp__consent .qp__error { grid-column: 2; }
.qp__trap { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.qp__submit { width: 100%; justify-content: space-between; }
.qp__fine { margin: 0; font-size: .76rem; line-height: 1.45; color: var(--muted); text-align: center; }
.qp__fine a { color: var(--navy-800); font-weight: 700; text-decoration: none; white-space: nowrap; }

/* Thank-you panel */
.qp__done { display: grid; justify-items: start; gap: .9rem; padding: 1rem 0 .5rem; }
.qp__done-mark { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--grad-cta); color: var(--navy-900); }
.qp__done-mark .icon { width: 1.4rem; height: 1.4rem; }
.qp__done .qp__lede { margin: 0; display: block; }

/* Short screens: tighten so the form still shows whole. */
@media (max-height: 820px) {
  .qp__form .qp__lede, .qp__main > .qp__lede { display: none; }
  .qp__form { gap: .7rem; margin-top: .85rem; }
  .qp__fields { gap: .55rem .65rem; }
}
@media (max-height: 700px) {
  .qp__main { padding-top: 1rem; padding-bottom: 1rem; }
  .qp__eyebrow { display: none; }
  .qp__title { font-size: 1.3rem; }
  .qp__input { height: 2.6rem; }
  .qp__choice label { min-height: 2.35rem; font-size: .8rem; }
  .qp__label, .qp__legend { margin-bottom: .2rem; font-size: .76rem; }
  .qp__form { gap: .6rem; margin-top: .7rem; }
  .qp__fine { display: none; }
}
@media (max-width: 480px) {
  .qp { width: calc(100vw - 1rem); max-height: calc(100dvh - 1rem); border-radius: 1.35rem; }
  .qp__shell { max-height: calc(100dvh - 1rem); }
}
@media (prefers-reduced-motion: reduce) {
  .qp[open] { animation: none; }
}

/* Hero sun, refined: placed on the side away from the headline, softer
   colour, and still. It sets the mood without pulling the eye. */
:root {
  --sun:
    radial-gradient(circle at 50% 50%,
      #fffaf0 0 12%, #ffeeb8 20%, #ffd978 31%, #ffbf4d 42%, #ffa43a 50%,
      rgba(255, 164, 58, .30) 58%, rgba(255, 196, 90, .12) 68%, rgba(255, 210, 120, 0) 77%);
}
main :is(.page-banner, .about-head__banner, .form-head__media)::before,
main > .hero .hero__content::after { animation: none; opacity: .92; }
/* Page heroes: rising behind the photo's top edge, towards the right. */
main :is(.page-banner, .about-head__banner)::before {
  width: clamp(10rem, 15vw, 14rem); left: auto; right: 14%; top: clamp(-5.25rem, -5.5vw, -3.25rem);
}
/* Home: higher, peeking round the photo's top-left corner above the headline. */
main > .hero .hero__content::after {
  width: clamp(10rem, 15vw, 14rem); top: clamp(-5.5rem, -5vw, -3.5rem); right: clamp(-8rem, -9vw, -5.5rem);
}
@media (max-width: 1023px) {
  main > .hero .hero__content::after { width: 8rem; top: auto; bottom: -3.75rem; right: -2rem; }
}
@media (max-width: 939px) {
  main :is(.page-banner, .about-head__banner, .form-head__media)::before { width: 7.5rem; top: -2.5rem; left: auto; right: 1.5rem; }
}
.qp__main:focus { outline: none; }
.qp__main { max-height: calc(100dvh - 1.5rem); }
@media (max-width: 480px) { .qp__main { max-height: calc(100dvh - 1rem); } }
/* Very short phones (568px and below). */
@media (max-height: 600px) {
  .qp__main { padding: .8rem .9rem .9rem; }
  .qp__title { font-size: 1.15rem; padding-right: 2.5rem; }
  .qp__close { top: .55rem; right: .55rem; width: 2.2rem; height: 2.2rem; }
  .qp__form { gap: .5rem; margin-top: .55rem; }
  .qp__fields { gap: .45rem .55rem; }
  .qp__input { height: 2.4rem; font-size: .95rem; }
  .qp__choices { gap: .35rem; }
  .qp__choice label { min-height: 2.1rem; font-size: .76rem; }
  .qp__label, .qp__legend { margin-bottom: .15rem; font-size: .72rem; }
  .qp__consent label { font-size: .76rem; line-height: 1.35; }
  .qp__submit { padding-top: .55rem; padding-bottom: .55rem; }
}

/* Gradient buttons: paint the gradient under the transparent border too, so
   it no longer tiles and leaves an orange sliver at one end and a yellow one
   at the other. */
.btn { background-origin: border-box; }

/* ==========================================================================
   Forms v2 — floating labels, more air (popup, /get-a-quote/, /contact/)
   The label sits inside its field and floats up on focus or once filled, so
   the form loses three rows of clutter and gains breathing room while still
   fitting one screen.
   ========================================================================== */
.qp { width: min(64rem, calc(100vw - 1.5rem)); }
@media (min-width: 900px) { .qp__shell { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
.qp__photo img { object-position: 50% 30%; }
.qp__aside::after { background: linear-gradient(180deg, rgba(4, 24, 45, 0) 0%, rgba(4, 24, 45, 0) 48%, rgba(4, 24, 45, .55) 72%, rgba(4, 24, 45, .9) 100%); }
.qp__aside-title { font-size: 1.35rem; margin-bottom: .9rem; }
.qp__main { padding: clamp(1.5rem, 3.2vw, 2.6rem) clamp(1.25rem, 3.2vw, 2.75rem); }
.qp__title { font-size: clamp(1.5rem, 2.4vw, 1.95rem); }
.qp__lede { margin-top: .4rem; }
.qp__form { gap: 1.05rem; margin-top: 1.35rem; }
.qp__fields { gap: .8rem .8rem; }
.qp__legend { margin-bottom: .5rem; font-size: .82rem; }
.qp__choice label { min-height: 2.75rem; }

.qp__float { position: relative; }
.qp__float .qp__input { height: 3.4rem; padding: 1.3rem .95rem .3rem; }
.qp__float .qp__label {
  position: absolute; left: 1rem; top: 1.7rem; transform: translateY(-50%);
  margin: 0; max-width: calc(100% - 2rem); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-size: .95rem; font-weight: 500; color: var(--muted);
  pointer-events: none; transition: top .18s var(--ease), font-size .18s var(--ease), color .18s var(--ease);
}
.qp__float .qp__input:focus + .qp__label,
.qp__float .qp__input:not(:placeholder-shown) + .qp__label {
  top: .82rem; font-size: .7rem; font-weight: 700; letter-spacing: .02em; color: var(--navy-700);
}
.qp__float .qp__input:focus + .qp__label { color: var(--orange-700); }
.qp__opt { font-weight: 500; color: var(--muted); }
.qp__area { resize: none; line-height: 1.45; padding-top: 1.45rem; overflow: hidden; transition: height .22s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease); }
.qp__area:focus, .qp__area:not(:placeholder-shown) { height: 5.6rem; overflow: auto; }

/* Property type sits on one line with its label on wider forms. */
@media (min-width: 560px) {
  .qp__group--inline .qp__legend { float: left; width: 7.25rem; margin: .8rem 0 0; }
  .qp__group--inline .qp__choices { overflow: hidden; }
  .qp__group--inline .qp__error { clear: both; }
}

/* Short screens */
@media (max-height: 820px) {
  .qp__form { gap: .85rem; margin-top: 1rem; }
  .qp__fields { gap: .65rem; }
}
@media (max-height: 700px) {
  .qp__float .qp__input { height: 3rem; padding-top: 1.15rem; }
  .qp__float .qp__label { top: 1.5rem; font-size: .9rem; }
  .qp__float .qp__input:focus + .qp__label,
  .qp__float .qp__input:not(:placeholder-shown) + .qp__label { top: .7rem; font-size: .66rem; }
  .qp__area { padding-top: 1.3rem; }
  .qp__area:focus, .qp__area:not(:placeholder-shown) { height: 4.6rem; }
  .qp__choice label { min-height: 2.4rem; }
  .qp__form { gap: .65rem; margin-top: .75rem; }
  .qp__fields { gap: .5rem; }
}
@media (max-height: 600px) {
  .qp__float .qp__input { height: 2.75rem; padding-top: 1rem; }
  .qp__float .qp__label { top: 1.375rem; font-size: .85rem; }
  .qp__float .qp__input:focus + .qp__label,
  .qp__float .qp__input:not(:placeholder-shown) + .qp__label { top: .6rem; font-size: .62rem; }
  .qp__area { padding-top: 1.15rem; }
  .qp__choice label { min-height: 2.15rem; }
  .qp__form { gap: .5rem; margin-top: .55rem; }
  .qp__fields { gap: .4rem; }
  .qp__lede { display: none; }
}

/* Page forms (/get-a-quote/, /contact/) use the same blocks inside their card. */
.qp__form--page { margin-top: 0; }
main .form-card .sform__foot { margin-top: 1.1rem; padding-top: 0; border-top: 0; }
main .form-card .sform__foot .btn { width: 100%; justify-content: space-between; }
/* Page form cards on short phones: tighter frame so the card fits the screen
   below the header. The privacy line moves into the consent's Privacy Policy
   link, which is already there. */
main .form-card .sform__foot { gap: .6rem; }
.form-card .sform__privacy { font-size: .78rem; line-height: 1.45; }
@media (max-height: 700px) and (max-width: 939px) {
  main .form-card { padding: 1rem .95rem; border-radius: 1.25rem; }
  .form-card .sform__privacy { display: none; }
  main .form-card .sform__foot { margin-top: .75rem; }
}
@media (max-height: 640px) and (max-width: 939px) {
  .form-card .qp__float .qp__input { height: 2.7rem; padding-top: 1rem; }
  .form-card .qp__float .qp__label { top: 1.35rem; font-size: .85rem; }
  .form-card .qp__float .qp__input:focus + .qp__label,
  .form-card .qp__float .qp__input:not(:placeholder-shown) + .qp__label { top: .58rem; font-size: .62rem; }
  .form-card .qp__area { padding-top: 1.1rem; }
  .form-card .qp__choice label { min-height: 2.1rem; font-size: .78rem; }
  .form-card .qp__form { gap: .5rem; }
  .form-card .qp__fields { gap: .4rem; }
  .form-card .qp__legend { margin-bottom: .2rem; font-size: .74rem; }
  .form-card .qp__consent label { font-size: .76rem; line-height: 1.35; }
  .form-card .sform__foot .btn { padding-top: .5rem; padding-bottom: .5rem; }
}
@media (max-height: 600px) and (max-width: 939px) {
  main .form-card { padding: .8rem .8rem .85rem; }
  main .form-card .sform__foot { margin-top: .55rem; }
}
/* The shared blocks own their spacing; the older page-form margins
   (forms.css .fgroup / .fstep) do not apply inside them. */
main .qp__form .qp__group,
.qp .qp__form .qp__group { margin: 0; }
/* Narrow half-width fields: a slightly smaller resting label so
   "Suburb or postcode" and "Phone (optional)" read in full. */
@media (max-width: 559px) {
  .qp__float .qp__label { font-size: .86rem; left: .85rem; max-width: calc(100% - 1.5rem); }
  .qp__float .qp__input { padding-left: .85rem; padding-right: .7rem; }
}
.qp__lbl-short { display: none; }
@media (max-width: 439px) {
  .qp__lbl-full { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .qp__lbl-short { display: inline; }
}

/* Footer base: the full width is used. Copyright left, "Back to top" right,
   then the disclaimer and the acknowledgement side by side beneath. */
@media (min-width: 900px) {
  .site-footer__bottom { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 1.1rem clamp(3rem, 6vw, 6rem); }
  .site-footer__legal { display: contents; }
  .site-footer__copy { grid-column: 1; grid-row: 1; margin: 0; align-self: center; }
  .site-footer__top-link { grid-column: 2; grid-row: 1; justify-self: end; align-self: center; }
  .site-footer__disclaimer { grid-column: 1; grid-row: 2; max-width: none; margin: 0; }
  .site-footer__ack { grid-column: 2; grid-row: 2; max-width: none; margin: 0; }
}

/* ==========================================================================
   Header menu — glass bubble
   A clear, frosted bubble slides from item to item under the pointer and
   rests on the current page: translucent fill, a fine light rim, a soft
   highlight across its top and a faint warm tint. No dot, no glow ring.
   ========================================================================== */
.primary-nav__link { font-weight: 500; color: #3b4a5e; background: none !important; }
.primary-nav__item:hover .primary-nav__link,
.primary-nav__link:hover,
.primary-nav__link:focus-visible,
.primary-nav__link[aria-current] { color: var(--navy-950, #04182d); }
.primary-nav__link[aria-current] { font-weight: 600; }
.primary-nav__item:hover .primary-nav__disclosure { color: var(--navy-950, #04182d); }

.nav-glider {
  top: 50%; bottom: auto; height: 2.55rem; border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, .35) 48%, rgba(255, 255, 255, .12) 52%, rgba(255, 255, 255, .28) 100%),
    radial-gradient(120% 140% at 50% 120%, rgba(255, 176, 60, .22), transparent 62%),
    rgba(255, 244, 228, .38);
  -webkit-backdrop-filter: blur(8px) saturate(1.5);
          backdrop-filter: blur(8px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    inset 0 -1px 2px rgba(253, 104, 0, .10),
    0 0 0 1px rgba(253, 104, 0, .14),
    0 6px 16px -10px rgba(7, 42, 76, .35);
  transform: translate(var(--gx, 0), -50%) scale(.9);
  transition: transform .5s cubic-bezier(.22, 1.15, .36, 1), width .5s cubic-bezier(.22, 1.15, .36, 1), opacity .25s var(--ease);
}
.nav-glider.is-on { transform: translate(var(--gx, 0), -50%) scale(1); }
.nav-glider::after { content: none; }

/* Header quote button: full size, matching the hero buttons. */
.site-header .masthead__quote {
  padding: .7rem .6rem .7rem 1.6rem; gap: .8rem;
  font-size: 1rem; font-weight: 700;
}
.site-header .masthead__quote .icon { width: 2.1rem; height: 2.1rem; padding: .56rem; }
.site-header.is-stuck .masthead__quote { padding-top: .6rem; padding-bottom: .6rem; }
@media (max-width: 1279px) {
  .site-header .masthead__quote { padding: .62rem .55rem .62rem 1.35rem; font-size: .95rem; gap: .65rem; }
  .site-header .masthead__quote .icon { width: 1.9rem; height: 1.9rem; padding: .5rem; }
}

/* Popup photo panel: the full landscape family photo sits uncropped at the
   top, the promise copy beneath it on navy. Nobody is cut out of frame. */
@media (min-width: 900px) {
  .qp__aside {
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    background:
      radial-gradient(22rem 14rem at 0% 100%, rgba(255, 124, 31, .28), transparent 70%),
      radial-gradient(20rem 14rem at 100% 100%, rgba(56, 150, 255, .18), transparent 70%),
      #062340;
  }
  .qp__photo { position: relative; inset: auto; flex: none; aspect-ratio: 1535 / 1024; }
  .qp__photo picture { position: static; display: block; width: 100%; height: 100%; }
  .qp__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; }
  .qp__aside::after { content: none; }
  .qp__aside-copy { margin-top: auto; padding: clamp(1.5rem, 2.4vw, 2.1rem); }
  .qp__aside-title { font-size: 1.4rem; line-height: 1.25; }
}
@media (min-width: 900px) {
  /* Photo grows into the free height; anchored left, where the family sits,
     so everyone stays in frame and no empty band is left above the copy. */
  .qp__photo { flex: 1 1 auto; aspect-ratio: auto; min-height: 18rem; }
  .qp__photo img { object-position: 0% 62%; }
  .qp__aside-copy { margin-top: 0; }
}

/* ==========================================================================
   Submenus — one hover for every item
   The capacity tiles' hover (soft sky fill rising from the bottom, a fine
   blue rim, the label lifting a touch) now applies to every submenu link:
   the guide links in each desktop dropdown and the links in the mobile menu.
   ========================================================================== */
.nav-panel__list { gap: .4rem; }
.nav-panel__list a,
.mobile-nav__sub a {
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  box-shadow: none;
  background: transparent;
  transition: border-color .24s var(--ease), background-color .24s var(--ease), color .2s var(--ease);
}
.nav-panel__list a:hover,
.nav-panel__list a:focus-visible,
.mobile-nav__sub a:hover,
.mobile-nav__sub a:focus-visible {
  border-color: var(--navy-300);
  background: linear-gradient(0deg, var(--sky-100) 0%, #fff 100%);
  color: var(--navy-900);
  box-shadow: none;
  padding-left: .85rem;
}
.nav-panel__list a { padding: .7rem .85rem; }
.nav-panel__list a[aria-current],
.mobile-nav__sub a[aria-current] {
  border-color: var(--navy-300);
  background: linear-gradient(0deg, var(--sky-100) 0%, #fff 100%);
}
/* Mobile submenu: the left rule gives way to the same card treatment. */
.mobile-nav__sub { display: grid; gap: .35rem; }
.mobile-nav__sub a { padding: .65rem .85rem; border-left-width: 1px; }
.mobile-nav__sub a:hover, .mobile-nav__sub a:focus-visible { border-left-color: var(--navy-300); padding-left: .85rem; }

/* ==========================================================================
   Submenus — gradient panel, glass-bubble items
   The panel carries soft gold, sky and peach light; every item sits on it as
   a clear glass bubble (translucent fill, light rim, highlight across the
   top) and on hover takes the warm glass look of the header's menu bubble.
   ========================================================================== */
.nav-panel {
  background:
    radial-gradient(22rem 14rem at 100% 0%, rgba(255, 196, 0, .30), transparent 68%),
    radial-gradient(20rem 14rem at 0% 100%, rgba(56, 150, 255, .22), transparent 70%),
    radial-gradient(16rem 10rem at 0% 0%, rgba(255, 128, 40, .14), transparent 70%),
    linear-gradient(160deg, #fffdf8 0%, #f6f9ff 100%);
  border-color: rgba(255, 255, 255, .9);
  box-shadow: 0 1px 0 #fff inset, 0 30px 60px -24px rgba(7, 42, 76, .45), 0 10px 24px -14px rgba(253, 104, 0, .25);
}
/* Rest: clear glass. */
.nav-tile,
.nav-panel__list a,
.mobile-nav__sub a {
  border: 1px solid rgba(255, 255, 255, .95);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .80) 0%, rgba(255, 255, 255, .45) 50%, rgba(255, 255, 255, .30) 100%);
  -webkit-backdrop-filter: blur(6px) saturate(1.4);
          backdrop-filter: blur(6px) saturate(1.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 0 0 1px rgba(7, 42, 76, .06), 0 4px 12px -8px rgba(7, 42, 76, .25);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease), background-color .3s var(--ease), border-color .3s var(--ease), color .2s var(--ease);
}
/* Hover / focus / current: the warm glass bubble lifts. */
.nav-tile:hover, .nav-tile:focus-visible, .nav-tile[aria-current],
.nav-panel__list a:hover, .nav-panel__list a:focus-visible, .nav-panel__list a[aria-current],
.mobile-nav__sub a:hover, .mobile-nav__sub a:focus-visible, .mobile-nav__sub a[aria-current] {
  border-color: rgba(255, 255, 255, 1);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .92) 0%, rgba(255, 255, 255, .40) 48%, rgba(255, 255, 255, .14) 52%, rgba(255, 255, 255, .32) 100%),
    radial-gradient(120% 140% at 50% 120%, rgba(255, 176, 60, .32), transparent 62%),
    rgba(255, 240, 220, .55);
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 -1px 2px rgba(253, 104, 0, .12),
    0 0 0 1px rgba(253, 104, 0, .22),
    0 12px 22px -12px rgba(253, 104, 0, .45);
  color: var(--navy-950, #04182d);
  padding-left: .85rem;
}
.nav-tile:hover, .nav-panel__list a:hover { transform: translateY(-2px); }
.mobile-nav__sub a:hover, .mobile-nav__sub a:focus-visible { border-left-color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .nav-tile:hover, .nav-panel__list a:hover { transform: none; }
}

/* ==========================================================================
   Footer — final design
   Typography and proportion do the work: a statement line beside large
   contact details, a calm four-column sitemap, then a quiet base. Deep navy
   with one cool light and one warm light; no boxes, bars or ornaments.
   ========================================================================== */
.site-footer {
  background:
    radial-gradient(60rem 34rem at 100% 100%, rgba(40, 120, 220, .22), transparent 65%),
    radial-gradient(40rem 26rem at 88% -10%, rgba(255, 176, 60, .10), transparent 65%),
    #031628;
  padding-block: clamp(4rem, 7vw, 7rem) 2.5rem;
}
.site-footer::before { height: 2px; background: linear-gradient(90deg, #fd6800, #fed107 45%, rgba(56, 150, 255, .7)); }

/* Row 1: statement and contact */
.site-footer__top { gap: clamp(3rem, 5vw, 5rem); padding-bottom: clamp(3rem, 5vw, 4.5rem); border-bottom-color: rgba(255, 255, 255, .09); }
@media (min-width: 900px) { .site-footer__top { grid-template-columns: minmax(0, 1fr); } }
.site-footer__brand {
  display: grid; gap: clamp(2rem, 4vw, 3rem);
  padding: 0; border: 0; border-radius: 0; background: none;
  padding-bottom: clamp(2.5rem, 4.5vw, 4rem);
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}
@media (min-width: 900px) {
  .site-footer__brand { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: end; column-gap: clamp(3rem, 7vw, 7rem); }
}
.site-footer__logo img { height: 48px; }
.site-footer__tagline {
  margin: clamp(1.5rem, 2.6vw, 2.25rem) 0 0;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.25rem, 4.6vw, 4rem); line-height: 1.02; letter-spacing: -.035em;
  color: #fff; max-width: 14ch;
}
.site-footer__desc { margin: 1.1rem 0 0; max-width: 34rem; font-size: 1rem; line-height: 1.65; color: rgba(226, 234, 244, .66); }

.site-footer__contact { margin: 0; gap: 1.5rem; }
@media (min-width: 600px) { .site-footer__contact { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .site-footer__contact { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; } }
.site-footer__contact > div { gap: .45rem; }
.site-footer__contact dt { font-size: .72rem; font-weight: 600; letter-spacing: .18em; color: #ffc94d; }
.site-footer__contact dd { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; }
.site-footer__contact a {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1.15; letter-spacing: -.02em;
  color: #fff; text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size .35s var(--ease-out), color .2s var(--ease);
}
.site-footer__contact a:hover { color: #fff; text-decoration: none; background-size: 100% 1px; }
.site-footer__spoken { margin: 0; font-size: .95rem; color: rgba(226, 234, 244, .55); }

/* Row 2: sitemap */
.site-footer__nav { grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr)); gap: clamp(2rem, 3vw, 3rem); }
@media (min-width: 900px) { .site-footer__nav { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.site-footer__heading { padding-bottom: 0; margin-bottom: 1.25rem; font-size: .72rem; letter-spacing: .18em; color: #ffc94d; }
.site-footer__heading::after { content: none; }
.site-footer__col ul { gap: .8rem; }
.site-footer__col a { color: rgba(226, 234, 244, .74); font-size: .98rem; }
.site-footer__col a::before { content: none; }
.site-footer__col a:hover { color: #fff; padding-left: 0; }
.site-footer__col a {
  background: linear-gradient(#ffc94d, #ffc94d) 0 100% / 0 1px no-repeat;
  padding-bottom: 2px;
  transition: color .2s var(--ease), background-size .35s var(--ease-out);
}
.site-footer__col a:hover { background-size: 100% 1px; }
.site-footer__col a[aria-current] { color: #fff; }

/* Row 3: base */
.site-footer__bottom { padding-top: 2rem; }
.site-footer__copy { font-size: .85rem; color: rgba(226, 234, 244, .8); }
.site-footer__creds { color: rgba(226, 234, 244, .5); }
.site-footer__legal-links { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; }
.site-footer__legal-links a { font-size: .85rem; color: rgba(226, 234, 244, .8); text-decoration: none; transition: color .2s var(--ease); }
.site-footer__legal-links a:hover { color: #fff; text-decoration: underline; text-underline-offset: .25em; }
.site-footer__top-link {
  display: inline-flex; align-items: center; gap: .75rem;
  padding: 0; border: 0;
  font-size: .72rem; letter-spacing: .18em; color: rgba(226, 234, 244, .8);
}
.site-footer__top-link::after { content: none !important; }
.site-footer__top-icon {
  display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .22);
  transition: background-color .25s var(--ease), border-color .25s var(--ease), transform .3s var(--ease-out);
}
.site-footer__top-icon .icon { width: 1rem; height: 1rem; transform: rotate(-90deg); }
.site-footer__top-link:hover { color: #fff; }
.site-footer__top-link:hover .site-footer__top-icon { background: #fff; border-color: #fff; color: #031628; transform: translateY(-3px); }
.site-footer__disclaimer, .site-footer__ack { font-size: .8rem; line-height: 1.7; color: rgba(226, 234, 244, .5); }

@media (min-width: 900px) {
  .site-footer__bottom { grid-template-columns: minmax(0, 1fr) auto auto; column-gap: clamp(2rem, 4vw, 3.5rem); row-gap: 1.6rem; }
  .site-footer__copy { grid-column: 1; grid-row: 1; }
  .site-footer__legal-links { grid-column: 2; grid-row: 1; align-self: center; }
  .site-footer__top-link { grid-column: 3; grid-row: 1; }
  .site-footer__disclaimer { grid-column: 1; grid-row: 2; padding-top: 1.6rem; border-top: 1px solid rgba(255, 255, 255, .07); }
  .site-footer__ack { grid-column: 2 / -1; grid-row: 2; padding-top: 1.6rem; border-top: 1px solid rgba(255, 255, 255, .07); }
}
@media (max-width: 899px) {
  .site-footer__bottom { gap: 1.1rem; }
  .site-footer__legal { display: grid; gap: .8rem; }
}
.site-footer__tagline { max-width: 11.5ch; text-wrap: balance; }
@media (max-width: 599px) {
  .site-footer__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.25rem; }
  .site-footer__col a { font-size: .92rem; }
}
@media (min-width: 900px) {
  .site-footer__bottom { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
  .site-footer__legal-links { justify-self: start; }
}

/* ==========================================================================
   Footer — compact glass band (supersedes the earlier footer blocks)
   One screen tall on a laptop: brand and contact beside four link columns,
   a slim base row and one line of fine print. A navy-to-blue gradient with
   warm and cool light, slow translucent bubbles behind, and glass-bubble
   treatment on the contact buttons, link hovers and the back-to-top button.
   ========================================================================== */
.site-footer {
  position: relative; overflow: hidden; isolation: isolate;
  padding-block: clamp(2.75rem, 4.5vw, 4rem) 1.5rem;
  color: rgba(226, 234, 244, .78);
  background:
    radial-gradient(42rem 26rem at 0% 0%, rgba(255, 128, 31, .22), transparent 65%),
    radial-gradient(38rem 26rem at 100% 0%, rgba(255, 196, 0, .12), transparent 65%),
    radial-gradient(50rem 30rem at 100% 100%, rgba(56, 150, 255, .30), transparent 65%),
    linear-gradient(160deg, #041a30 0%, #062a4d 55%, #0a3a68 100%);
}
.site-footer::before { height: 3px; background: linear-gradient(90deg, #fd6800, #fed107 50%, #38a0ff); z-index: 1; }

/* Main band */
.site-footer__main { display: grid; gap: clamp(1.75rem, 3vw, 2.5rem); padding-bottom: clamp(1.5rem, 2.4vw, 2rem); border-bottom: 1px solid rgba(255, 255, 255, .1); }
@media (min-width: 1000px) { .site-footer__main { grid-template-columns: minmax(0, 1.35fr) minmax(0, 3.2fr); column-gap: clamp(2rem, 4vw, 4rem); align-items: start; } }
.site-footer__brand { display: grid; gap: 1rem; align-content: start; padding: 0; border: 0; background: none; }
.site-footer__logo img { height: 44px; width: auto; }
.site-footer__desc { margin: 0; max-width: 24rem; font-size: .92rem; line-height: 1.6; color: rgba(226, 234, 244, .7); }
.site-footer__address { margin: 0; font-size: .85rem; color: rgba(226, 234, 244, .65); }

/* Glass contact buttons */
.site-footer__chips { display: grid; gap: .6rem; max-width: 22rem; }
.site-footer__chip {
  display: flex; align-items: center; gap: .8rem;
  padding: .55rem 1rem .55rem .55rem; border-radius: 999px;
  color: #fff; text-decoration: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .06) 55%, rgba(255, 255, 255, .03) 100%);
  border: 1px solid rgba(255, 255, 255, .18);
  -webkit-backdrop-filter: blur(10px) saturate(1.4); backdrop-filter: blur(10px) saturate(1.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 10px 24px -16px rgba(0, 0, 0, .6);
  transition: transform .3s var(--ease-out), background-color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.site-footer__chip:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 210, 140, .45);
  background: linear-gradient(180deg, rgba(255, 255, 255, .22) 0%, rgba(255, 200, 120, .10) 55%, rgba(255, 160, 60, .10) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 14px 28px -14px rgba(253, 104, 0, .55);
}
.site-footer__chip-icon {
  flex: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: linear-gradient(135deg, #fd6800, #fed107); color: #062340; font-weight: 800; font-size: 1rem;
}
.site-footer__chip-icon .icon { width: 1rem; height: 1rem; }
.site-footer__chip-text { display: grid; line-height: 1.2; min-width: 0; }
.site-footer__chip-label { font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 214, 140, .9); }
.site-footer__chip-value { font-size: 1rem; font-weight: 600; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Link columns */
.site-footer__nav { display: grid; gap: 1.5rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.site-footer__col { min-width: 0; }
.site-footer__col > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; cursor: default; }
.site-footer__col > summary::-webkit-details-marker { display: none; }
.site-footer__fold { display: none; }
.site-footer__heading { margin: 0 0 .75rem; padding: 0; font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #ffc94d; }
.site-footer__heading::after { content: none; }
.site-footer__col ul { display: grid; gap: .15rem; margin: 0 0 0 -.6rem; padding: 0; list-style: none; }
.site-footer__col a {
  display: inline-block; padding: .32rem .6rem; border-radius: 999px;
  font-size: .9rem; line-height: 1.35; color: rgba(226, 234, 244, .8); text-decoration: none;
  border: 1px solid transparent; background: none; background-size: auto;
  transition: color .2s var(--ease), background-color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease-out);
}
.site-footer__col a::before { content: none; }
.site-footer__col a:hover, .site-footer__col a:focus-visible, .site-footer__col a[aria-current] {
  color: #fff; padding-left: .6rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, .18) 0%, rgba(255, 255, 255, .06) 55%, rgba(255, 200, 120, .08) 100%);
  border-color: rgba(255, 255, 255, .22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 6px 14px -10px rgba(253, 104, 0, .6);
}
.site-footer__col a:hover { transform: translateX(2px); }

/* Base row */
.site-footer__base { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.75rem; padding-top: 1.1rem; }
.site-footer__copy { margin: 0; flex: 1 1 auto; font-size: .82rem; color: rgba(226, 234, 244, .82); }
.site-footer__cred { margin-left: .6rem; color: rgba(226, 234, 244, .55); }
.site-footer__legal-links { display: flex; gap: .4rem 1.25rem; flex-wrap: wrap; }
.site-footer__legal-links a { font-size: .82rem; color: rgba(226, 234, 244, .82); text-decoration: none; }
.site-footer__legal-links a:hover { color: #fff; text-decoration: underline; text-underline-offset: .25em; }
.site-footer__top-link {
  display: inline-flex; align-items: center; gap: .6rem; padding: 0; border: 0;
  font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(226, 234, 244, .82); text-decoration: none;
}
.site-footer__top-link::after { content: none !important; }
.site-footer__top-icon {
  display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .05));
  border: 1px solid rgba(255, 255, 255, .25);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: transform .3s var(--ease-out), background-color .3s var(--ease), box-shadow .3s var(--ease);
}
.site-footer__top-icon .icon { width: .95rem; height: .95rem; transform: rotate(-90deg); }
.site-footer__top-link:hover { color: #fff; }
.site-footer__top-link:hover .site-footer__top-icon { transform: translateY(-3px); background: linear-gradient(135deg, #fd6800, #fed107); color: #062340; box-shadow: 0 10px 20px -8px rgba(253, 104, 0, .7); }

/* Fine print: one quiet line each */
.site-footer__fine { display: grid; gap: .35rem 2.5rem; margin-top: .9rem; }
@media (min-width: 1000px) { .site-footer__fine { grid-template-columns: 1fr 1fr; } }
.site-footer__disclaimer, .site-footer__ack { margin: 0; max-width: none; font-size: .74rem; line-height: 1.55; color: rgba(226, 234, 244, .5); }

/* Tablet: brand row above, four columns below */
@media (min-width: 700px) and (max-width: 999px) {
  .site-footer__brand { grid-template-columns: auto 1fr; column-gap: 2rem; align-items: center; }
  .site-footer__brand .site-footer__logo, .site-footer__brand .site-footer__desc { grid-column: 1; }
  .site-footer__chips { grid-column: 2; grid-row: 1 / span 2; justify-self: end; }
}

/* Phones: link groups fold, so the footer fits one screen */
@media (max-width: 699px) {
  .site-footer { padding-block: 2.25rem 1.25rem; padding-bottom: calc(1.25rem + 5.25rem + env(safe-area-inset-bottom)); }
  .site-footer__main { gap: 1.25rem; }
  .site-footer__nav { grid-template-columns: 1fr; gap: 0; }
  .site-footer__col { border-top: 1px solid rgba(255, 255, 255, .1); }
  .site-footer__col:last-child { border-bottom: 1px solid rgba(255, 255, 255, .1); }
  .site-footer__col > summary { cursor: pointer; padding: .8rem 0; }
  .site-footer__heading { margin: 0; }
  .site-footer__fold { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .2); color: #ffc94d; transition: transform .3s var(--ease); }
  .site-footer__fold .icon { width: .85rem; height: .85rem; }
  .site-footer__col[open] .site-footer__fold { transform: rotate(180deg); }
  .site-footer__col ul { grid-template-columns: 1fr 1fr; padding-bottom: .8rem; }
  .site-footer__base { gap: .6rem 1.25rem; }
  .site-footer__copy { flex-basis: 100%; }
  .site-footer__top-link { margin-left: auto; }
}
/* Brand column: a single stack (overrides the older two-column brand rule). */
.site-footer__brand { grid-template-columns: minmax(0, 1fr); align-items: start; column-gap: 0; border-bottom: 0; padding-bottom: 0; }
@media (min-width: 1000px) { .site-footer__main { grid-template-columns: minmax(17rem, 1.25fr) minmax(0, 3fr); } }
@media (min-width: 700px) and (max-width: 999px) {
  .site-footer__brand { grid-template-columns: auto minmax(0, 1fr); column-gap: 2rem; align-items: center; }
}
/* Phones: tighter so the whole footer shows at once. */
@media (max-width: 699px) {
  .site-footer { padding-top: 1.75rem; padding-bottom: calc(1rem + 4.75rem + env(safe-area-inset-bottom)); }
  .site-footer__desc { display: none; }
  .site-footer__brand { gap: .8rem; }
  .site-footer__logo img { height: 38px; }
  .site-footer__chips { gap: .5rem; max-width: none; }
  .site-footer__chip { padding: .4rem .9rem .4rem .4rem; }
  .site-footer__chip-icon { width: 2.1rem; height: 2.1rem; }
  .site-footer__main { gap: 1rem; padding-bottom: 1rem; }
  .site-footer__col > summary { padding: .62rem 0; }
  .site-footer__base { padding-top: .85rem; gap: .5rem 1.1rem; }
  .site-footer__copy { font-size: .78rem; }
  .site-footer__fine { margin-top: .6rem; gap: .3rem; }
  .site-footer__disclaimer, .site-footer__ack { font-size: .68rem; line-height: 1.45; }
}
@media (max-width: 380px) {
  .site-footer__col > summary { padding: .5rem 0; }
  .site-footer__chip { padding-top: .32rem; padding-bottom: .32rem; }
  .site-footer__chip-icon { width: 1.95rem; height: 1.95rem; }
  .site-footer__disclaimer, .site-footer__ack { font-size: .65rem; }
}

/* ==========================================================================
   Standfirst under every hero — editorial
   No rule, no box. The opening paragraph is set as a large display
   standfirst across the full content width; its first line is in deep navy
   and the rest falls back to slate, the way a magazine opens a feature.
   Anything after it (rebate notes, sources, links) sits at body size below.
   ========================================================================== */
main > .page-lede { padding-top: clamp(2.75rem, 4.5vw, 4rem); }
.page-lede__inner { max-width: none; padding-left: 0; border-left: 0; }
.page-lede__inner > p:first-child {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.3rem, .95rem + 1.25vw, 2rem); line-height: 1.42; letter-spacing: -.016em;
  color: #5b6b82; text-wrap: pretty; max-width: 64ch;
}
.page-lede__inner > p:first-child::first-line { color: var(--ink); font-weight: 500; }
.page-lede__inner > p:not(:first-child) { font-size: var(--step-0); line-height: 1.75; color: var(--body); max-width: 52rem; }
.page-lede__inner > p:first-child + p,
.page-lede__inner > p:first-child + div { margin-top: clamp(1.25rem, 2vw, 1.75rem); }

/* ==========================================================================
   Typography fixes (site-wide audit)
   ========================================================================== */
/* 1. Standfirst: 32px sat too close to the 46px section headings and made a
      hard jump down to the 18px text beneath it. A standfirst reads best at
      roughly 1.4x body: now about 25px on desktop, 20px on phones. */
.page-lede__inner > p:first-child {
  font-size: clamp(1.25rem, 1.05rem + .62vw, 1.6rem);
  line-height: 1.5; letter-spacing: -.01em; max-width: 68ch;
}
.page-lede__inner > p:not(:first-child) { font-size: var(--step-0); }

/* 2. Footer fine print was 11.8px, below a readable size. */
.site-footer__disclaimer, .site-footer__ack { font-size: max(.78rem, 12.5px); line-height: 1.6; }
@media (max-width: 699px) { .site-footer__disclaimer, .site-footer__ack { font-size: 12px; } }

/* 3. Manrope has no italic, so the browser slanted it artificially (the Act
      names on the legal pages). Set them upright and a touch stronger. */
.legal-sec__body em, main em:not([class]) { font-style: normal; font-weight: 600; color: var(--ink); }
.nav-tile__value em, [class*="__value"] em, .size-h1__value em { font-weight: 600; color: inherit; }

/* 4. Colour spots no longer touch a section's top or bottom edge, so where a
      white band meets a coloured corner there is no hard-edged block. */
main > section.section:not(.final-cta),
main > :is(.page-head, .form-head, .about-head) { position: relative; isolation: isolate; }
main > section.section:not(.final-cta)::after,
main > :is(.page-head, .form-head, .about-head)::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1;
  background:
    linear-gradient(180deg, #fff 0, rgba(255, 255, 255, 0) 4.5rem),
    linear-gradient(0deg, #fff 0, rgba(255, 255, 255, 0) 4.5rem);
}

/* ==========================================================================
   No accent lines
   The owner rejected the gradient lines as decoration: the short sunrise bar
   under headings, bars that draw across a card on hover, the growing link
   underline, fading rules, section seams, the header scroll-progress line.
   All removed here in one place (html body prefix so this wins over the
   per-page stylesheets, which load after main.css). Structure is carried by
   spacing, type and plain 1px borders instead.
   ========================================================================== */
html body .section-head h2::after,
html body .faq__aside h2::after,
html body .hairline::after,
html body .accordion__item::before,
html body main > section.section::before,
html body .site-header::before,
html body .site-header::after,
html body .site-footer::before,
html body .form-card::before,
html body :is(.profile, .tier, .rb-state, .process__step, .pairing__cell, .cycle__stage, .brandlist__item, .size-panel, .itype, .cost-note, .rb-scheme, .scenario, .ledger__row, .rb-notice, .rb-part--notice)::before,
html body :is(.belief, .aftercare__item, .next-step, .reason)::after { content: none; }

/* Marks that carry meaning stay, as plain solid colour. */
html body :is(th, .table-note__key)::before { background-image: none !important; background-color: #fd6800 !important; }
html body th::after { background-image: none !important; background-color: var(--navy-800) !important; }
html body .worked__then::before,
html body .flow__step::before { background-image: none !important; background-color: var(--line-strong) !important; }

/* Text links: no resting bar, no growing line. A plain underline on hover. */
html body .link-arrow { background-image: none; padding-bottom: 0; text-underline-offset: .3em; text-decoration-thickness: 1px; }
html body .link-arrow:hover, html body .link-arrow:focus-visible { background-image: none; text-decoration: underline; }
html body .site-footer__col a, html body .site-footer__contact a { background-image: none; }

/* Notices that lost their side bar get a quiet tinted surface instead. */
html body :is(.rb-notice, .rb-part--notice) { border: 1px solid #f1dcc0; background: #fffaf2; border-radius: var(--r-sm); }
.site-footer__heading { display: block; }
/* Home size cards: the orange/yellow gauge line under each figure goes too. */
html body .size-card__bar { display: none; }
html body .size-card__value { margin-bottom: .9rem; }

/* ==========================================================================
   Design review fixes (desktop design + typography audits)
   html body prefix: these must win over the per-page stylesheets.
   ========================================================================== */

/* --- Layout ---------------------------------------------------------- */
/* Mid-page quote band: room for its shadow, so it is not cut in a straight
   line by the next section. */
html body .midcta { padding-block: clamp(2.5rem, 5vw, 4.25rem); background: transparent; }
html body .midcta__card { box-shadow: 0 22px 44px -30px rgba(4, 24, 45, .55); }

/* Section numerals sit above the heading instead of running through its
   first letters. Smaller and quieter. */
html body .hairline:not(.about-head__statement) { padding-top: clamp(3.1rem, 4.6vw, 4.3rem); }
html body .hairline:not(.about-head__statement)::before {
  top: 0; left: 0; transform: none; line-height: .8;
  font-size: clamp(2.5rem, 3.8vw, 3.5rem);
  -webkit-text-stroke-width: 1.25px;
}

/* A heading with no aside uses the row instead of leaving the right half
   empty. */
html body .section-head--solo h2 { max-width: none; }
html body .faq__aside h2 { max-width: none; text-wrap: balance; }

/* Rebates: notices and the wide WA/Tasmania card use their width. */
html body .rb-notice--head p, html body .rb-notice p { max-width: none; }
html body .rb-state p { max-width: none; }
html body .rb-state .rb-notice + p { margin-top: 1rem; }
@media (min-width: 1100px) {
  html body .rb-states > .rb-state:last-child:nth-child(odd) { columns: 2; column-gap: clamp(2rem, 4vw, 3.5rem); }
  html body .rb-states > .rb-state:last-child:nth-child(odd) > :is(h2, .rb-state__source) { column-span: all; }
  html body .rb-states > .rb-state:last-child:nth-child(odd) > p { break-inside: avoid; }
}

/* Cards in a row end on the same line: the closing link is pinned to the
   foot of each card. */
html body .tier__body { display: flex; flex-direction: column; flex: 1; }
html body .tier__body .link-arrow { margin-top: auto; padding-top: 1rem; align-self: flex-start; }
html body .size-panel { display: flex; flex-direction: column; }
html body .size-panel .spec-list { margin-top: auto; }
html body .size-panel > .link-arrow { align-self: flex-start; }

/* Hero sun: one consistent position, never sliced by the header. */
html body main > .hero .hero__content::after { top: clamp(1.25rem, 2.5vw, 2.25rem); }
@media (min-width: 940px) {
  html body .form-head__media::before { width: clamp(8rem, 11vw, 10.5rem); left: auto; right: 14%; top: clamp(-4rem, -4vw, -2.75rem); }
}

/* --- Decoration the owner rejected ------------------------------------ */
html body .capacity-card__bar { display: none; }
html body :is(.ladder__bar i, .capfig__measure i) { background: var(--navy-700); background-image: none; }
html body .caprange__list::after { background: var(--navy-700); background-image: none; }
/* Yellow highlighter under bold lead-ins. */
html body :is(.keypoints, .factorlist) strong { box-shadow: none; }
/* Pill labels in the quote hero become plain ticked text. */
html body .marks .chip {
  padding: 0; border: 0; background: none; box-shadow: none; border-radius: 0;
  font-size: .8rem; letter-spacing: .14em; color: var(--navy-700);
}
/* Gradient-filled numerals: solid brand orange dark enough to read
   (6.6:1 on white; the gradient fell to 1.5:1 at its yellow end). */
html body :is(.bprofile__index, .ledger__index, .legal-sec__n, .why__index, .method__index, .specdef__index, .next-step__index, .benefit__index, .itype__index, .spine__index, .brand-item__index) {
  background: none; -webkit-background-clip: border-box; background-clip: border-box;
  -webkit-text-fill-color: currentColor; color: var(--orange-700);
}

/* --- Typography -------------------------------------------------------- */
/* Card paragraphs never drop under 16px on phones. */
:root { --step--1: 1rem; }
html body :is(.rb-checks li, .rb-table td > p, table td > p) { font-size: 1rem; }
/* One weight for bold. */
html body strong, html body b { font-weight: 700; }
/* Standfirst steps down so it never outranks an H3. */
html body .page-lede__inner > p:first-child { font-size: clamp(1.2rem, 1.05rem + .5vw, 1.5rem); }
/* Rebates: programme headings outrank the H3s beside them. */
html body .rb-state h2 { font-size: clamp(1.4rem, 1.2rem + .7vw, 1.75rem); font-weight: 600; letter-spacing: -.015em; }
html body .tier__head { letter-spacing: -.012em; }
/* FAQ questions and long headings balance instead of leaving one word. */
html body .accordion__item > summary > span { text-wrap: balance; }
/* Units keep normal spacing and their real case ("kWh", not "KWH"). */
html body .caprange__unit { text-transform: none; }
html body :is(.size-panel__value, .ladder__value, .size-card__value, .capacity-card__value, .nav-tile__value) em { letter-spacing: 0; }
/* Small labels: a 12px floor. */
html body :is(.site-footer__chip-label, .site-footer__top-link, .site-footer__heading, .phone-link__label, .midcta__kicker, .process__label, .compare__tag, .pairing__label, .ctable__here, .cycle__when, .caprange__title, .caprange__unit, .option__tag, .contact-method__label, .legal-toc__title, .bprofile__specs dt, .chip) { font-size: .75rem; }
html body .phone-link__label { font-weight: 600; }
/* Footer fine print: enough contrast to read (was 3.4:1). */
html body :is(.site-footer__disclaimer, .site-footer__ack, .site-footer__cred) { color: rgba(226, 234, 244, .74); }
/* Legal copy: a readable measure. */
html body .legal-sec__body > p { max-width: 70ch; }
@media (min-width: 1100px) {
  html body .rb-states > .rb-state:last-child:nth-child(odd) { display: block; }
  html body .rb-states > .rb-state:last-child:nth-child(odd) > p { margin-top: 0; margin-bottom: .9rem; }
}
@media (min-width: 940px) { html body .form-head__media::before { right: 24%; } }

/* ==========================================================================
   Mobile and tablet review fixes
   ========================================================================== */
.nb { white-space: nowrap; }

/* Message box: once it has focus or text it is always tall enough that the
   typed lines sit below the floated label, on every screen height. */
html body .qp__float .qp__area:focus,
html body .qp__float .qp__area:not(:placeholder-shown) { height: 5.25rem; padding-top: 1.5rem; overflow: auto; }

/* Popup submit button stays in view even when error messages lengthen the
   form: it sticks to the bottom of the scrolling panel. */
html body .qp .qp__submit { position: sticky; bottom: 0; z-index: 2; box-shadow: 0 -10px 16px 6px #fff, 0 12px 24px -12px rgba(253, 104, 0, .55); }
@media (max-height: 480px) {
  /* Phones held sideways */
  html body .qp__lede, html body .qp__fine { display: none; }
  html body .qp__form { gap: .5rem; margin-top: .5rem; }
}

/* Tall phones have room for a full-width email field, so a long address
   shows whole. (Short phones keep two fields per row to fit one screen.) */
@media (max-width: 480px) and (min-height: 900px) {
  html body .qp__fields { grid-auto-flow: dense; }
  html body .qp__field:has(> input[type="email"]) { grid-column: 1 / -1; }
}

/* Floated labels never drop under 11px. */
@media (max-height: 640px) {
  html body .qp__float .qp__input:focus + .qp__label,
  html body .qp__float .qp__input:not(:placeholder-shown) + .qp__label { font-size: .7rem; }
}

/* Capacity comparison table on phones: a narrow label column, so the data
   columns have room. (main.js scrolls "this capacity" into view.) */
@media (max-width: 759px) {
  html body .captable th[scope="row"],
  html body .captable .captable__corner { min-width: 6.25rem; width: 6.25rem; font-size: .82rem; line-height: 1.35; padding-left: .7rem; padding-right: .6rem; white-space: normal; }
}

/* Numbered checklists (price and cost guides): a plain number badge. The
   tick meant for bulleted lists escaped to the top of the section here. */
html body ol.checklist > li { position: relative; }
html body ol.checklist > li::after { content: none; }
html body ol.checklist > li::before {
  -webkit-mask: none; mask: none;
  display: grid; place-items: center;
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  background: #fff3e2; border: 1px solid rgba(253, 104, 0, .3);
  color: var(--navy-900); font-family: var(--font-display); font-size: .78rem; font-weight: 700; letter-spacing: .02em;
}

/* Tap targets: 44px on touch screens. */
@media (pointer: coarse) {
  html body .mobile-nav__row button, html body .mobile-nav__close, html body .qp__close { min-width: 44px; min-height: 44px; }
  html body .legal-toc a { min-height: 44px; display: flex; align-items: center; }
  html body .site-footer__legal-links a, html body .site-footer__top-link { min-height: 44px; display: inline-flex; align-items: center; }
  html body .site-footer__col a { padding-top: .6rem; padding-bottom: .6rem; }
  html body .breadcrumb a, html body .source-link, html body .contact-method__value { min-height: 44px; display: inline-flex; align-items: center; }
  html body .qp__input { min-height: 44px; }
  html body textarea.qp__input { min-height: 44px; }
}
/* ==========================================================================
   Effects pass A — home, about, contact, quote, legal
   Depth from light: glass cards on the corner glows, warm-tinted shadows,
   staggered arrival for card groups. Only transform, opacity, box-shadow,
   background and colour move; nothing above the fold animates on load.
   ========================================================================== */

/* 1. Glass cards: clear fill, bright rim, top highlight; warm lift on hover. */
html body :is(.belief, .aftercare__item, .next-step, .reason, .process__step, .contact-method, .legal-meta > div) {
  background: linear-gradient(180deg, rgba(255, 255, 255, .94) 0%, rgba(255, 255, 255, .7) 100%);
  border: 1px solid rgba(255, 255, 255, .95);
  -webkit-backdrop-filter: blur(10px) saturate(1.4); backdrop-filter: blur(10px) saturate(1.4);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(7, 42, 76, .07), 0 1px 2px rgba(7, 42, 76, .04), 0 18px 34px -22px rgba(7, 42, 76, .3);
}
html body .process__step { border-radius: var(--r-lg); }
html body :is(.belief, .aftercare__item, .next-step, .reason, .process__step, .contact-method) {
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out), background-color .45s var(--ease);
}
@media (hover: hover) {
  html body :is(.belief, .aftercare__item, .next-step, .reason, .process__step, .contact-method):hover {
    transform: translateY(-4px);
    background-color: rgba(255, 243, 226, .7); border-color: #fff;
    box-shadow: inset 0 1px 0 #fff, inset 0 -1px 2px rgba(253, 104, 0, .08), 0 0 0 1px rgba(253, 104, 0, .2), 0 2px 4px rgba(7, 42, 76, .04), 0 26px 44px -24px rgba(253, 104, 0, .42), 0 18px 36px -22px rgba(7, 42, 76, .28);
  }
}

/* 2. Card groups arrive one after another (they used to pop in together).
      Runs once when main.js marks the card revealed; below the fold only. */
@keyframes fx-rise { from { opacity: 0; transform: translateY(22px); } }
@media (prefers-reduced-motion: no-preference) {
  html body main > section :is(.size-card, .rebate-item, .process__step, .belief, .aftercare__item, .method__step, .next-step, .reason)[data-reveal].is-revealed {
    animation: fx-rise .8s var(--ease-out) var(--fx-d, 0ms) backwards;
  }
}
html body main > section :is(.size-grid, .rebate-grid, .process__steps, .beliefs, .aftercare, .method, .next-steps, .reasons) > :nth-child(2) { --fx-d: 90ms; }
html body main > section :is(.size-grid, .rebate-grid, .process__steps, .beliefs, .aftercare, .method, .next-steps, .reasons) > :nth-child(3) { --fx-d: 180ms; }
html body main > section :is(.size-grid, .rebate-grid, .process__steps, .beliefs, .aftercare, .method, .next-steps, .reasons) > :nth-child(4) { --fx-d: 270ms; }

/* 3. FAQ: closed questions are glass; hover warms them like the menu bubble. */
html body details.accordion__item:not([open]) {
  background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .62));
  border-color: rgba(255, 255, 255, .95);
  -webkit-backdrop-filter: blur(10px) saturate(1.4); backdrop-filter: blur(10px) saturate(1.4);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(7, 42, 76, .07), 0 10px 22px -18px rgba(7, 42, 76, .3);
}
html body details.accordion__item:not([open]):hover {
  background-color: rgba(255, 240, 220, .6);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(253, 104, 0, .22), 0 16px 28px -18px rgba(253, 104, 0, .45);
}
html body details.accordion__item:not([open]) > summary:hover .accordion__icon { background: var(--grad-cta); border-color: transparent; transform: rotate(90deg); }
html body details.accordion__item[open] { box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(253, 104, 0, .14), 0 4px 10px rgba(7, 42, 76, .04), 0 30px 54px -28px rgba(253, 104, 0, .35), 0 24px 48px -28px rgba(7, 42, 76, .3); }

/* 4. Forms: the card floats on warm light; choices take the glass bubble. */
html body .form-card { box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(7, 42, 76, .06), 0 2px 4px rgba(7, 42, 76, .04), 0 40px 70px -40px rgba(253, 104, 0, .38), 0 30px 60px -34px rgba(7, 42, 76, .32); }
html body .qp__choice label { transition: border-color .25s var(--ease), background-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease-out), color .2s var(--ease); }
html body .qp__choice input:not(:checked) + label:hover {
  transform: translateY(-1px); border-color: rgba(253, 104, 0, .35);
  background: linear-gradient(180deg, #fff 0%, rgba(255, 244, 228, .7) 100%);
  box-shadow: inset 0 1px 0 #fff, 0 10px 18px -12px rgba(253, 104, 0, .5);
}
html body .qp__choice input:checked + label { box-shadow: inset 0 1px 0 #fff, 0 10px 20px -12px rgba(253, 104, 0, .75); }
html body .qp__input:focus { box-shadow: 0 0 0 4px rgba(253, 104, 0, .14), 0 12px 22px -16px rgba(253, 104, 0, .55); }

/* 5. Guide rows (quote page): the whole row becomes a warm glass bubble. */
@media (min-width: 720px) {
  html body .sizelinks a {
    margin-inline: -.9rem; padding-inline: .9rem;
    transition: background-color .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
  }
  html body .sizelinks a:is(:hover, :focus-visible) {
    padding-left: .9rem; border-bottom-color: transparent; border-radius: var(--r-md);
    background: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 243, 226, .55));
    box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(253, 104, 0, .2), 0 14px 26px -16px rgba(253, 104, 0, .45);
  }
  html body .sizelinks a:is(:hover, :focus-visible) .icon { color: var(--orange-600); transform: translateX(5px); }
}

/* 6. Closing photograph: sunset light spills onto the navy beneath it. */
html body .final-cta__media .media-frame { box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 50px 90px -40px rgba(253, 128, 20, .5), 0 30px 60px -30px rgba(0, 0, 0, .6); }

/* 7. Legal: glass contents panel, bubble for the current clause, and the
      clause you jumped to is lit. */
html body :is(.legal-toc, .legal-sec) {
  background: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .78));
  border-color: rgba(255, 255, 255, .95);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(7, 42, 76, .07), 0 20px 40px -28px rgba(7, 42, 76, .3);
  transition: box-shadow .5s var(--ease);
}
html body .legal-toc { -webkit-backdrop-filter: blur(10px) saturate(1.4); backdrop-filter: blur(10px) saturate(1.4); }
html body .legal-toc a { border: 1px solid transparent; transition: background-color .25s var(--ease), box-shadow .25s var(--ease), color .2s var(--ease); }
html body .legal-toc a:is(:hover, :focus-visible, .is-current) {
  background: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 240, 220, .6));
  border-color: #fff;
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(253, 104, 0, .2), 0 10px 18px -12px rgba(253, 104, 0, .45);
}
html body .legal-sec:target { box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(253, 104, 0, .3), 0 30px 54px -30px rgba(253, 104, 0, .45), 0 20px 40px -28px rgba(7, 42, 76, .3); }

@media (prefers-reduced-motion: reduce) {
  html body :is(.belief, .aftercare__item, .next-step, .reason, .process__step, .contact-method):hover,
  html body .qp__choice input:not(:checked) + label:hover,
  html body details.accordion__item:not([open]) > summary:hover .accordion__icon,
  html body .sizelinks a:is(:hover, :focus-visible) .icon { transform: none; }
}

/* Orange side bars on notes go the way of the other accent lines. */
html body .legal-note { border: 1px solid #f1dcc0; border-radius: var(--r-md); background: #fffaf2; }
html body .range__note { border-left: 0; padding: 1rem 1.25rem; border: 1px solid #e3ecf6; border-radius: var(--r-md); background: #f6f9fd; max-width: none; }
/* ==========================================================================
   Section effects: solar panel, size, buying-guide and cost pages
   One idea throughout: cards are clear glass resting on the corner glows.
   Depth comes from a bright rim, a top highlight and navy-tinted shadow;
   on hover the card lifts and its light turns warm. No lines, no ornaments.
   ========================================================================== */

/* 1. Glass cards: size panels, scenarios, pairing figures, compare cards,
      brand profiles. Translucent, so the section glow shows through. */
html body :is(.size-panel, .scenario, .pairing__cell, .compare__card, .profile) {
  background: linear-gradient(180deg, rgba(255, 255, 255, .92) 0%, rgba(255, 255, 255, .66) 100%);
  border: 1px solid rgba(255, 255, 255, .95);
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 -6rem 5rem -5rem rgba(255, 176, 60, 0),
    0 0 0 1px rgba(7, 42, 76, .07),
    0 1px 2px rgba(7, 42, 76, .04),
    0 18px 34px -22px rgba(7, 42, 76, .30);
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
}
html body .scenario::before, html body .profile::before { content: none; }
@media (hover: hover) {
  html body :is(.size-panel, .scenario, .pairing__cell, .compare__card, .profile):hover {
    transform: translateY(-4px);
    border-color: #fff;
    box-shadow:
      inset 0 1px 0 #fff,
      inset 0 -6rem 5rem -5rem rgba(255, 176, 60, .24),
      0 0 0 1px rgba(253, 104, 0, .20),
      0 1px 2px rgba(7, 42, 76, .04),
      0 26px 44px -24px rgba(253, 104, 0, .42);
  }
}
/* The card that carries the answer keeps a resting warm light. */
html body .compare__card--current {
  background:
    radial-gradient(22rem 12rem at 100% 100%, rgba(255, 176, 60, .16), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .66));
}

/* 2. Big capacity figures: a still sun glow rises behind the numeral. */
html body .size-panel {
  background:
    radial-gradient(15rem 11rem at 0% 0%, rgba(255, 196, 0, .22), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .66));
}
html body .pairing__cell {
  background:
    radial-gradient(13rem 9rem at 0% 0%, rgba(255, 196, 0, .20), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .66));
}
html body .size-panel .link-arrow .icon { transition: transform .35s var(--ease-out); }
html body .size-panel:hover .link-arrow .icon { transform: translateX(4px); }

/* 3. Raised schedules (cost ledgers, specification glossary): the gradient
      top line goes; the panel becomes glass with a deeper, softer shadow. */
html body :is(.ledger, .specdefs, .payband) {
  border: 1px solid rgba(255, 255, 255, .95);
  background: linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(255, 255, 255, .72));
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(7, 42, 76, .07), 0 2px 4px rgba(7, 42, 76, .03), 0 30px 56px -34px rgba(7, 42, 76, .38);
}
html body :is(.ledger__row, .specdef) { transition: background-color .35s var(--ease); }
@media (hover: hover) {
  html body :is(.ledger__row, .specdef):hover { background-color: rgba(255, 176, 60, .07); }
}

/* 4. Comparison tables: glass frame, row and column light up together,
      stocked brands rest on a warm wash that fades across the row. */
html body .table-scroll {
  background: linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(255, 255, 255, .74));
  border-color: rgba(255, 255, 255, .95);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(7, 42, 76, .07), 0 24px 48px -32px rgba(7, 42, 76, .36);
}
html body :is(.ctable, .ptable) :is(td, th) { transition: box-shadow .3s var(--ease), background-color .3s var(--ease); }
html body .ctable tbody tr.is-stocked { background: linear-gradient(90deg, rgba(255, 176, 60, .14), rgba(255, 176, 60, 0) 62%); }
@media (hover: hover) {
  html body :is(.ctable, .ptable) tbody tr:hover { background-color: rgba(56, 150, 255, .06); }
  html body .ctable tbody tr.is-stocked:hover { background-color: rgba(255, 176, 60, .10); }
  html body :is(.ctable, .ptable):has(tbody td:nth-child(2):hover) tbody td:nth-child(2),
  html body :is(.ctable, .ptable):has(tbody td:nth-child(3):hover) tbody td:nth-child(3),
  html body :is(.ctable, .ptable):has(tbody td:nth-child(4):hover) tbody td:nth-child(4),
  html body :is(.ctable, .ptable):has(tbody td:nth-child(5):hover) tbody td:nth-child(5),
  html body :is(.ctable, .ptable):has(tbody td:nth-child(6):hover) tbody td:nth-child(6) { box-shadow: inset 0 0 0 99rem rgba(56, 150, 255, .055); }
}

/* 5. Size links: the warm glass bubble of the header menu on each row. */
html body .sizelinks a { transition: box-shadow .35s var(--ease), background-color .35s var(--ease), border-color .35s var(--ease); }
@media (hover: hover) {
  html body .sizelinks a { padding-inline: .85rem; }
  html body .sizelinks a:hover, html body .sizelinks a:focus-visible {
    padding-left: .85rem;
    border-color: transparent; border-radius: var(--r-md);
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, .35) 55%, rgba(255, 255, 255, .25) 100%),
      rgba(255, 236, 210, .75);
    box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(253, 104, 0, .20), 0 14px 24px -14px rgba(253, 104, 0, .45);
  }
}

/* 6. Key facts under the size hero: one glass band instead of open rules. */
html body .scaleband {
  border: 1px solid rgba(255, 255, 255, .95);
  border-radius: var(--r-xl);
  padding-inline: clamp(1.25rem, 2.4vw, 2.25rem);
  background:
    radial-gradient(18rem 10rem at 0% 0%, rgba(255, 196, 0, .16), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .6));
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(7, 42, 76, .07), 0 22px 44px -30px rgba(7, 42, 76, .34);
}
html body .scaleband > div:last-child { border-bottom: 0; }
@media (min-width: 900px) { html body .scaleband > div { border-bottom: 0; } }

/* 7. Questions: warm rim and light on hover; the icon answers. */
html body .accordion__item { transition: box-shadow .4s var(--ease-out), border-color .3s var(--ease); }
html body .accordion__icon { transition: transform .35s var(--ease-out), box-shadow .35s var(--ease), background-color .3s var(--ease), border-color .3s var(--ease); }
@media (hover: hover) {
  html body .accordion__item:not([open]):hover {
    border-color: #fff;
    box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(253, 104, 0, .20), 0 18px 30px -20px rgba(253, 104, 0, .40);
  }
  html body .accordion__item > summary:hover .accordion__icon { transform: scale(1.08); box-shadow: 0 6px 14px -6px rgba(253, 104, 0, .55); }
}

/* 8. Groups arrive in sequence rather than all at once. */
@media (min-width: 900px) {
  html body .checklist__item[data-reveal]:nth-child(even) { --reveal-delay: 110ms; }
}

@media (prefers-reduced-motion: reduce) {
  html body :is(.size-panel, .scenario, .pairing__cell, .compare__card, .profile):hover,
  html body .accordion__item > summary:hover .accordion__icon,
  html body .size-panel:hover .link-arrow .icon { transform: none; }
}
/* ==========================================================================
   Battery pages — depth, glass and hover finish
   /batteries/, the six capacity pages, /best-home-battery-australia/,
   /solar-battery-price/. Light and shadow only: no lines, bars or ornaments.
   ========================================================================== */
html body {
  --fx-rim: inset 0 1px 0 rgba(255, 255, 255, .95), 0 0 0 1px rgba(7, 42, 76, .06);
  --fx-rest: 0 1px 2px rgba(7, 42, 76, .04), 0 18px 34px -24px rgba(7, 42, 76, .32), 0 12px 26px -22px rgba(253, 104, 0, .22);
  --fx-up: 0 2px 4px rgba(7, 42, 76, .05), 0 30px 52px -28px rgba(7, 42, 76, .42), 0 18px 36px -22px rgba(253, 104, 0, .40);
}

/* 1. Cards (daily cycle, brands, price tiers, scenarios, brand profiles):
      a light rim, a shadow tinted navy and amber, a gentle lift on hover.
      The staggered fade is restored: each card's own transition used to
      replace the reveal transition, so the group appeared all at once. */
html body :is(.cycle__stage, .brandlist__item, .tier, .scenario, .bprofile) {
  border-color: rgba(255, 255, 255, .95);
  box-shadow: var(--fx-rim), var(--fx-rest);
  transition: opacity .8s var(--ease-out) var(--reveal-delay, 0ms), transform .45s var(--ease-out), box-shadow .45s var(--ease);
}
html body :is(.cycle__stage, .brandlist__item, .tier, .scenario) {
  background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .78));
}
html body .brandlist__item:nth-child(2), html body .checklist__item:nth-child(even) { --reveal-delay: 80ms; }
html body .brandlist__item:nth-child(3) { --reveal-delay: 160ms; }
html body .brandlist__item:nth-child(4) { --reveal-delay: 240ms; }
@media (hover: hover) {
  html body :is(.cycle__stage, .brandlist__item, .tier, .scenario, .bprofile):hover {
    transform: translateY(-4px);
    border-color: #fff;
    box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(253, 104, 0, .16), var(--fx-up);
  }
}

/* 2. Photographs and diagrams: a white rim and a warm, layered shadow. */
html body .section .media-frame { box-shadow: 0 0 0 1px rgba(255, 255, 255, .8), var(--fx-rest); }
@media (hover: hover) {
  html body .section .media-frame:hover { box-shadow: 0 0 0 1px rgba(255, 255, 255, .9), var(--fx-up); }
}

/* 3. Panels and tables: the gradient top edge on the schedules goes; every
      panel is a clean raised surface. */
html body main :is(.ledger, .specdefs) { border: 1px solid rgba(255, 255, 255, .95); background: #fff; }
html body main :is(.ledger, .specdefs, .caprail, .payband, .captable__scroll, .table-scroll) { box-shadow: var(--fx-rim), var(--fx-rest); }
html body :is(.caprail, .payband) { border-color: rgba(255, 255, 255, .95); }
/* Notes: glass on the section's glow instead of a flat tint or a side bar. */
html body :is(.capnote, .cycle__note, .capguard, .captable__note, .option) {
  border: 1px solid rgba(255, 255, 255, .95);
  border-radius: var(--r-lg);
  box-shadow: var(--fx-rim), 0 16px 30px -26px rgba(7, 42, 76, .34);
}
html body :is(.capnote, .cycle__note, .option) {
  background: radial-gradient(22rem 12rem at 0% 100%, rgba(56, 150, 255, .10), transparent 70%), linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(255, 255, 255, .74));
}
html body .captable__note { background: radial-gradient(18rem 10rem at 0% 0%, rgba(255, 176, 60, .16), transparent 70%), #fff; }

/* 4. Rows (ledger, glossary, capacity ladder, onward size links): the hover
      surface reaches past the text instead of stopping flush against it. */
html body :is(.ledger__row, .specdef, .ladder__row) { transition: background-color .3s var(--ease), box-shadow .3s var(--ease); }
@media (hover: hover) {
  html body :is(.ledger__row, .specdef, .ladder__row):hover {
    background-color: #f5f9fe; padding-left: 0; border-radius: var(--r-md); border-color: transparent;
    box-shadow: -1rem 0 0 #f5f9fe, 1rem 0 0 #f5f9fe;
  }
}
/* The ladder bar is a measure: it no longer stretches to full on hover. */
html body .ladder__row:hover .ladder__bar i { width: var(--fill, 20%); }
html body .ladder__value { transition: color .3s var(--ease); }
html body .ladder__row:hover .ladder__value { color: var(--navy-700); }

/* 5. Capacity figure: a glass tile over a still sun glow. */
@media (min-width: 900px) {
  html body .capband__grid { background: radial-gradient(34rem 18rem at 17% 50%, rgba(255, 170, 50, .30), transparent 70%) no-repeat; }
}
html body .capfig {
  border-color: rgba(255, 255, 255, .95);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .88) 0%, rgba(255, 255, 255, .50) 55%, rgba(255, 255, 255, .66) 100%),
    radial-gradient(120% 90% at 100% 0%, rgba(255, 196, 0, .22), transparent 60%);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 2px rgba(253, 104, 0, .08), 0 0 0 1px rgba(7, 42, 76, .06), var(--fx-up);
}
html body .capfig__measure { box-shadow: inset 0 1px 2px rgba(7, 42, 76, .12); }

/* 6. Capacity range: glass-bubble tiles, the current one lit from above. */
html body .caprange__node {
  border-color: rgba(255, 255, 255, .95);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(7, 42, 76, .08), 0 8px 16px -10px rgba(7, 42, 76, .35);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease), background-color .3s var(--ease), color .2s var(--ease);
}
html body a.caprange__node:is(:hover, :focus-visible) {
  background: linear-gradient(180deg, #fff 0%, #fff7ea 55%, #ffeacc 100%);
  border-color: #fff; color: var(--navy-950, #04182d); transform: translateY(-3px);
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 2px rgba(253, 104, 0, .12), 0 0 0 1px rgba(253, 104, 0, .22), 0 12px 22px -12px rgba(253, 104, 0, .5);
}
html body .caprange__item.is-current .caprange__node {
  background: linear-gradient(180deg, #0f416f 0%, #062340 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 14px 24px -12px rgba(6, 35, 64, .7), 0 10px 22px -12px rgba(253, 104, 0, .45);
}

/* 7. Comparison table: "this capacity" is a lit lane; rows answer the pointer. */
html body .captable :is(td, th[scope="row"]) { transition: background-color .25s var(--ease); }
html body .captable thead th.is-current { background: linear-gradient(180deg, #ffe2c0, #fff1e2); }
html body .captable td.is-current { background: #fff8f1; box-shadow: inset 12px 0 12px -12px rgba(253, 104, 0, .13), inset -12px 0 12px -12px rgba(253, 104, 0, .13); }
@media (hover: hover) {
  html body .captable tbody tr:hover > td { background-color: #f5f9fe; }
  html body .captable tbody tr:hover > th[scope="row"] { background-color: #eaf1f9; }
  html body .captable tbody tr:hover > td.is-current { background-color: #ffeedd; }
  html body .ptable tbody tr:hover { background-color: #f5f9fe; }
}

/* 8. Capacity rail and payback band: a recessed track, bars with a top light. */
html body :is(.caprail__track, .payband__track) { box-shadow: inset 0 1px 2px rgba(7, 42, 76, .12); }
html body .caprail__bar { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 5px 10px -5px rgba(7, 42, 76, .55); }
html body .caprail__row.is-stocked .caprail__bar { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 5px 12px -5px rgba(253, 104, 0, .65); }

/* 9. Questions: closed items lift a touch under the pointer. */
html body .accordion__item { transition: transform .35s var(--ease-out), box-shadow .35s var(--ease), border-color .3s var(--ease); }
@media (hover: hover) {
  html body .accordion__item:not([open]):hover { transform: translateY(-2px); border-color: #fff; box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(253, 104, 0, .16), var(--fx-rest); }
}

@media (prefers-reduced-motion: reduce) {
  html body :is(.cycle__stage, .brandlist__item, .tier, .scenario, .bprofile, .accordion__item, a.caprange__node):is(:hover, :focus-visible) { transform: none; }
}

/* Left rules that turned orange on hover stay their resting colour. */
html body .expansion__points > div:hover, html body .keypoints > p:hover { border-left-color: var(--line-strong); }

/* ==========================================================================
   Effects pass D — inverters, rebates and shared finishing touches
   Same material as the other passes: clear glass on the corner glows, a
   bright rim, navy-and-amber shadow, a gentle warm lift on hover.
   ========================================================================== */
html body :is(.itype, .ibrand, .decide__card, .rb-state, .rb-part, .rb-example, .apps > *, .callout) {
  border: 1px solid rgba(255, 255, 255, .95);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(7, 42, 76, .07), 0 1px 2px rgba(7, 42, 76, .04), 0 18px 34px -24px rgba(7, 42, 76, .32), 0 12px 26px -22px rgba(253, 104, 0, .2);
  transition: opacity .8s var(--ease-out) var(--reveal-delay, 0ms), transform .45s var(--ease-out), box-shadow .45s var(--ease);
}
html body :is(.itype, .decide__card, .rb-state, .rb-part) {
  background: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .74));
}
/* Inverter brands were bare ruled columns: they become cards like the rest. */
html body .ibrand { padding: clamp(1.1rem, 1.8vw, 1.5rem); border-radius: var(--r-lg); background: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .74)); }
@media (hover: hover) {
  html body :is(.itype, .ibrand, .decide__card, .rb-state, .rb-part):hover {
    transform: translateY(-4px); border-color: #fff;
    box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(253, 104, 0, .18), 0 2px 4px rgba(7, 42, 76, .05), 0 30px 52px -28px rgba(7, 42, 76, .4), 0 18px 36px -22px rgba(253, 104, 0, .4);
  }
}
/* The two rebate schemes: large glass panels, lit from their corner. */
html body .rb-scheme { box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(7, 42, 76, .07), 0 30px 60px -40px rgba(7, 42, 76, .4); }
/* Rebate index table: rows answer the pointer. */
html body .rb-index :is(td, th) { transition: background-color .25s var(--ease); }
@media (hover: hover) { html body .rb-index tbody tr:hover > :is(td, th) { background-color: #f5f9fe; } }

/* System-size cards: figures line up across the row (the link no longer
   shares the spare height with the table above it). */
html body .size-panel > .link-arrow { margin-top: 1.4rem; }

/* Shared: brand-coloured text selection and a confident keyboard focus ring. */
::selection { background: #ffd89a; color: #04182d; }
html body :is(a, button, summary, input, textarea, select, [tabindex]):focus-visible { outline: 3px solid rgba(253, 104, 0, .55); outline-offset: 3px; border-radius: 6px; }
html body .site-footer :focus-visible, html body .final-cta :focus-visible { outline-color: #ffd257; }

@media (prefers-reduced-motion: reduce) {
  html body :is(.itype, .ibrand, .decide__card, .rb-state, .rb-part):hover { transform: none; }
}

/* ==========================================================================
   Quote popup — finish
   The promise copy becomes a frosted glass card resting over the foot of the
   photograph; the form side gains soft corner light, glassy fields, and a
   clear gradient state for the chosen option. Sizes are unchanged, so the
   form still fits one screen.
   ========================================================================== */
html body .qp { box-shadow: 0 50px 120px -40px rgba(4, 24, 45, .75), 0 0 0 1px rgba(255, 255, 255, .5); }
html body .qp::backdrop { background: radial-gradient(60rem 40rem at 70% 20%, rgba(253, 128, 20, .16), transparent 60%), rgba(4, 24, 45, .66); -webkit-backdrop-filter: blur(8px) saturate(1.2); backdrop-filter: blur(8px) saturate(1.2); }

@media (min-width: 900px) {
  /* Photo fills the panel; the glass card overlaps its lower edge. */
  html body .qp__aside { background: radial-gradient(24rem 16rem at 0% 100%, rgba(255, 124, 31, .42), transparent 70%), radial-gradient(22rem 16rem at 100% 100%, rgba(56, 150, 255, .30), transparent 70%), #062340; }
  html body .qp__photo { -webkit-mask: linear-gradient(180deg, #000 78%, transparent 100%); mask: linear-gradient(180deg, #000 78%, transparent 100%); }
  html body .qp__photo img { transform-origin: 30% 60%; animation: qp-photo 14s ease-out both; }
  html body .qp__aside-copy {
    position: relative; z-index: 1;
    margin: -4.25rem 1.25rem 1.25rem; padding: 1.35rem 1.4rem 1.4rem;
    border-radius: 1.25rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, .20) 0%, rgba(255, 255, 255, .08) 100%);
    border: 1px solid rgba(255, 255, 255, .28);
    -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 24px 44px -24px rgba(0, 0, 0, .55);
  }
  html body .qp__aside-title { font-size: 1.28rem; margin-bottom: .85rem; text-wrap: balance; }
  html body .qp__promises { gap: .5rem; }
  html body .qp__promises li { color: #fff; }
}
@keyframes qp-photo { from { transform: scale(1.06); } to { transform: scale(1); } }

/* Form side: warm light top-right, cool light bottom-left. */
html body .qp__main {
  background:
    radial-gradient(24rem 14rem at 100% 0%, rgba(255, 196, 0, .20), transparent 70%),
    radial-gradient(22rem 14rem at 0% 100%, rgba(56, 150, 255, .10), transparent 70%),
    #fff;
}
html body .qp__title { font-weight: 500; }
html body .qp__close {
  background: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .7)); border-color: rgba(255, 255, 255, .95);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(7, 42, 76, .08), 0 8px 16px -10px rgba(7, 42, 76, .4);
}

/* Fields and options: glass at rest. */
html body .qp__input, html body .qp__choice label {
  background: linear-gradient(180deg, #fff 0%, #f7fafd 100%);
  border-color: #d6e0eb;
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(7, 42, 76, .04);
}
html body .qp__input:focus { background: #fff; border-color: #fd6800; box-shadow: 0 0 0 4px rgba(253, 104, 0, .14), 0 12px 22px -16px rgba(253, 104, 0, .55); }
/* The chosen option is unmistakable: the sunrise gradient, navy text. */
html body .qp__choice input:checked + label {
  background: var(--grad-cta); background-origin: border-box; border-color: transparent;
  color: var(--navy-950, #04182d); font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 12px 22px -12px rgba(253, 104, 0, .8);
}
html body .qp__choice label { white-space: nowrap; }
@media (min-width: 640px) { html body .qp__choices--four .qp__choice label { font-size: .8rem; padding-inline: .35rem; } }
html body .qp__consent input { border-radius: .35rem; }
html body .qp .qp__submit { box-shadow: 0 -10px 16px 6px rgba(255, 255, 255, .92), inset 0 1px 0 rgba(255, 255, 255, .35), 0 16px 30px -14px rgba(253, 104, 0, .75); }
html body .qp__fine a { text-decoration: underline; text-underline-offset: .2em; }

@media (prefers-reduced-motion: reduce) { html body .qp__photo img { animation: none; } }
@media (min-width: 900px) {
  /* Centre the crop on the family so all four faces and the dog stay in. */
  html body .qp__photo img { object-position: 27% 55%; transform-origin: 40% 60%; }
  html body .qp__choices--four .qp__choice label { letter-spacing: -.01em; }
}
@keyframes qp-photo { from { transform: scale(1.03); } to { transform: scale(1); } }
/* The popup panel takes focus on open only to keep the first option from
   looking pre-selected; it is not a control, so it shows no focus ring. */
html body .qp__main:focus, html body .qp__main:focus-visible { outline: none; }

/* ==========================================================================
   Floating contact buttons (WhatsApp, email) — every page
   Bottom right; on phones they sit above the Call / Quote bar. Round discs
   with a glass label that slides out on hover or keyboard focus.
   ========================================================================== */
.floatcta {
  position: fixed; z-index: 70; right: clamp(.9rem, 2vw, 1.5rem); bottom: clamp(1rem, 2.4vw, 1.75rem);
  display: grid; gap: .7rem; justify-items: end; pointer-events: none;
}
.floatcta__btn {
  pointer-events: auto; display: inline-flex; align-items: center; gap: 0;
  height: 3.4rem; padding: .3rem; border-radius: 999px; text-decoration: none;
  color: var(--navy-950, #04182d);
  background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .74));
  border: 1px solid rgba(255, 255, 255, .95);
  -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(7, 42, 76, .08), 0 16px 30px -14px rgba(7, 42, 76, .5);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease);
}
.floatcta__icon {
  flex: none; display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: 50%;
  transition: transform .3s var(--ease-out);
}
.floatcta__btn--wa .floatcta__icon { background: linear-gradient(145deg, #2fe07a, #12a550); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 8px 16px -8px rgba(18, 165, 80, .9); }
.floatcta__btn--mail .floatcta__icon { background: var(--grad-cta); color: var(--navy-950, #04182d); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 8px 16px -8px rgba(253, 104, 0, .9); }
.floatcta__label {
  max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0;
  font-family: var(--font-sans); font-size: .9rem; font-weight: 700;
  transition: max-width .4s var(--ease-out), opacity .25s var(--ease), padding .4s var(--ease-out);
}
@media (hover: hover) {
  .floatcta__btn:hover, .floatcta__btn:focus-visible { transform: translateY(-2px); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(253, 104, 0, .2), 0 22px 36px -14px rgba(7, 42, 76, .55); }
  .floatcta__btn:hover .floatcta__label, .floatcta__btn:focus-visible .floatcta__label { max-width: 12rem; opacity: 1; padding: 0 .75rem 0 1rem; }
  .floatcta__btn:hover .floatcta__icon { transform: scale(1.05); }
}
/* Phones: smaller, and clear of the sticky Call / Quote bar. */
@media (max-width: 767px) {
  .floatcta { right: .75rem; bottom: calc(5.4rem + env(safe-area-inset-bottom)); gap: .55rem; }
  .floatcta__btn { height: 3.1rem; }
  .floatcta__icon { width: 2.5rem; height: 2.5rem; }
}
/* Out of the way while the menu or the quote popup is open, and in print. */
body.is-locked .floatcta, html.qp-lock .floatcta { opacity: 0; visibility: hidden; }
@media print { .floatcta { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .floatcta__btn, .floatcta__icon, .floatcta__label { transition: none; }
  .floatcta__btn:hover, .floatcta__btn:hover .floatcta__icon { transform: none; }
}

/* ==========================================================================
   Tablet and phone: one sticky bar with Mail Us and Get a Free Quote.
   The floating WhatsApp / email discs are for desktop only.
   ========================================================================== */
@media (max-width: 1119px) {
  html body .floatcta { display: none; }
  html body .sticky-cta { display: flex; }
  html body .site-footer { padding-bottom: calc(1.25rem + 4.75rem + env(safe-area-inset-bottom)); }
}
@media (min-width: 768px) and (max-width: 1119px) {
  /* On a tablet the bar is centred and no wider than it needs to be. */
  html body .sticky-cta { justify-content: center; gap: .9rem; padding-inline: var(--gutter); }
  html body .sticky-cta__quote { flex: 0 1 22rem; }
}

/* ==========================================================================
   Home hero headline: two lines, broken where the sense breaks.
   "Premium Solar and Batteries," / "Designed Around Your Home".
   Each phrase is its own line; the size is set so each fits on one line
   beside the photograph. On phones a phrase may wrap within itself, but
   "Designed" always starts a new line.
   ========================================================================== */
html body .hero h1 { max-width: none; }
html body .hero__line { display: block; }
@media (min-width: 700px) {
  html body .hero__line { white-space: nowrap; }
}
@media (min-width: 700px) and (max-width: 1023px) {
  html body .hero h1 { font-size: clamp(2.3rem, 5.6vw, 3.25rem); }
}
@media (min-width: 1024px) {
  html body .hero h1 { font-size: clamp(2.1rem, 3.35vw, 2.8rem); line-height: 1.14; }
}

/* ==========================================================================
   Hero sun, softer (every page). Smaller, paler and more transparent, so it
   reads as light behind the photograph rather than an object beside it.
   ========================================================================== */
:root {
  --sun:
    radial-gradient(circle at 50% 50%,
      rgba(255, 244, 214, .95) 0 10%, rgba(255, 226, 150, .75) 22%, rgba(255, 200, 110, .5) 36%,
      rgba(255, 180, 90, .26) 50%, rgba(255, 190, 110, .10) 62%, rgba(255, 200, 120, 0) 74%);
}
html body main :is(.page-banner, .about-head__banner, .form-head__media)::before,
html body main > .hero .hero__content::after { opacity: .7; filter: blur(2px); }
@media (min-width: 940px) {
  html body main :is(.page-banner, .about-head__banner)::before { width: clamp(8.5rem, 12vw, 11.5rem); top: clamp(-4.25rem, -4.4vw, -2.75rem); }
  html body .form-head__media::before { width: clamp(7rem, 9.5vw, 9rem); }
}
@media (min-width: 1024px) {
  html body main > .hero .hero__content::after { width: clamp(8.5rem, 12vw, 11.5rem); right: clamp(-6.5rem, -7vw, -4.5rem); }
}

/* ==========================================================================
   Home: battery capacities as a glass bar chart
   Each card carries a translucent column whose height is its capacity
   relative to the largest (5kWh shortest, 42kWh tallest). The columns rise
   when the row scrolls into view and warm up under the pointer.
   ========================================================================== */
html body .capacity-card { justify-content: flex-end; gap: .85rem; padding-top: 1.25rem; }
/* The battery photos are cut from the owner's own studio lineup photo (real
   product photography, background removed -- see tools/composite-battery-
   v11.php) and placed on ONE shared gradient across every card, so the
   section reads as one deliberate, designed grid instead of each card
   carrying its own differently-toned background (the earlier per-photo
   blurred-wall version read as inconsistent / "forced"). Relative sizing
   is driven by the units' true casing heights measured off the source
   photo, not the cutout's own pixel size (background removal resizes each
   cutout to its own cap, which would otherwise scramble the proportions).
   Ocean blue reuses the exact blue already used elsewhere in this file's
   own gradients (rgba(31, 94, 156, ...)), so it's on-brand rather than an
   arbitrary new hue; it also pairs naturally with the navy headings/text.
   The well's CSS background matches the image's gradient exactly, so
   object-fit:contain never shows a visible seam at any card width. */
html body .capacity-card__bar {
  position: relative;
  display: flex; align-items: flex-end; justify-content: center; order: -1;
  height: clamp(6.5rem, 11vw, 10rem); border-radius: 1rem; overflow: hidden;
  background: linear-gradient(135deg, #e4effa 0%, #8ebee6 38%, #3f82bd 72%, #1f5e9c 100%);
  box-shadow: inset 0 0 0 1px rgba(7, 42, 76, .08);
  transition: background .38s var(--ease);
}
html body .capacity-card__bar img {
  display: block; width: 100%; height: 100%; object-fit: contain; object-position: center bottom;
  transform-origin: 50% 100%;
  transition: transform 1s cubic-bezier(.2, .8, .2, 1) var(--reveal-delay, 0ms),
              opacity 1s var(--ease-out) var(--reveal-delay, 0ms), filter .32s var(--ease);
}
html body .capacity-card__bar--placeholder img { opacity: .9; }
/* Rise on reveal (with JavaScript off the photos simply stand at full size). */
html.js body li[data-reveal]:not(.is-revealed) .capacity-card__bar img { transform: translateY(12%) scale(.94); opacity: 0; }
html body .capacity-card:hover .capacity-card__bar img { transform: scale(1.04); filter: saturate(1.1) brightness(1.03); }
html body .capacity-card:hover .capacity-card__bar { background: linear-gradient(135deg, #f0f7fd 0%, #a8d1ee 38%, #529bd1 72%, #2a6cad 100%); }
/* A soft diagonal light sweep across the unit on hover -- a quiet, premium
   touch (product-photography reflection). */
html body .capacity-card__bar::before {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .75) 49%, rgba(255, 255, 255, .75) 53%, transparent 62%);
  transform: translateX(-130%);
  transition: transform 1.1s linear;
  pointer-events: none;
}
html body .capacity-card:hover .capacity-card__bar::before { transform: translateX(130%); }
/* The same sweep also plays once, automatically, as each card scrolls into
   view -- so the effect isn't hover-only (most visitors scroll past without
   hovering every card, especially on touch). No explicit "from": it starts
   at the base rule's -130% and animates to 130%, then (fill-mode: none)
   snaps back to that same -130% rest state once finished, off-screen and
   ready for hover to replay it. */
@keyframes capacity-sweep-in { to { transform: translateX(130%); } }
@media (prefers-reduced-motion: no-preference) {
  html.js body li[data-reveal].is-revealed .capacity-card__bar::before {
    animation: capacity-sweep-in 1s var(--ease-out) calc(var(--reveal-delay, 0ms) + 480ms) 1;
  }
}
@media (max-width: 520px) { html body .capacity-card__bar { height: 9rem; } }

/* Popup (4 Oct copy): the longer "Property type (optional)" label needs a
   wider column beside its options; the intro always shows on tall screens. */
@media (min-width: 560px) { html body .qp__group--wide .qp__legend { width: 10.75rem; } }
html body .qp__legend .qp__opt { font-weight: 500; }
/* Get a Quote card is narrow beside the photo on small laptops: use the short
   field labels there too and let the option labels sit a size smaller. */
@media (min-width: 1024px) and (max-width: 1279px) {
  html body .form-card .qp__lbl-full { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  html body .form-card .qp__lbl-short { display: inline; }
  html body .form-card .qp__choice label { font-size: .74rem; padding-inline: .2rem; letter-spacing: -.01em; }
  html body .form-card .qp__float .qp__label { font-size: .86rem; }
}
/* Narrowest phones: a slightly smaller resting label so "Email (optional)" fits. */
@media (max-width: 359px) { html body .qp__float .qp__label { font-size: .78rem; left: .7rem; max-width: calc(100% - 1.1rem); } }
@media (min-width: 1024px) and (max-width: 1279px) {
  html body .form-card .qp__choices--four .qp__choice label { white-space: normal; line-height: 1.15; }
}

/* ==========================================================================
   Forms v3 (owner, 4 Oct 2026)
   Labels sit above their fields and stay there, so a filled form can still
   be read. Selected options are navy with white text. A monthly bill select
   joins the quote forms. Spacing steps down on shorter screens so the whole
   form still shows at once.
   ========================================================================== */
html body .qp__field--stack { display: grid; gap: .28rem; align-content: start; }
html body .qp__field--stack .qp__label {
  position: static; transform: none; margin: 0; max-width: none;
  font-size: .78rem; font-weight: 700; line-height: 1.25; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: auto;
}
html body .qp__field--stack .qp__input { height: 2.7rem; padding: 0 .85rem; font-size: 1rem; }
html body .qp__field--stack .qp__area { height: 2.7rem; padding: .62rem .85rem; line-height: 1.4; overflow: hidden; resize: none; }
html body .qp__field--stack .qp__area:focus,
html body .qp__field--stack .qp__area:not(:placeholder-shown) { height: 4.6rem; padding-top: .62rem; overflow: auto; }
html body .qp__select {
  appearance: none; -webkit-appearance: none; cursor: pointer; color: var(--ink);
  padding-right: 2.4rem;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23072a4c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #fff 0%, #f7fafd 100%);
  background-repeat: no-repeat; background-position: right .8rem center, 0 0; background-size: 1rem, auto;
}
html body .qp__select:invalid, html body .qp__select option[value=""] { color: var(--muted); }
html body .qp__hint { margin: 0; font-size: .74rem; line-height: 1.4; color: var(--muted); }
html body .qp__form { gap: .8rem; margin-top: 1rem; }
html body .qp__fields { gap: .65rem .75rem; }
/* The intro is one short line now: keep it on all but the shortest screens. */
html body .qp__main > .qp__lede { display: block; margin-top: .3rem; }

/* Selected option: navy, white text. */
html body .qp__choice input:checked + label {
  background: linear-gradient(180deg, #0d3b66 0%, #062340 100%); border-color: #062340;
  color: #fff; font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 8px 16px -10px rgba(6, 35, 64, .7);
}
html body .qp__choice input:checked + label:hover { background: linear-gradient(180deg, #0d3b66 0%, #062340 100%); color: #fff; }

/* Submit button: a quieter glow. */
html body .qp .qp__submit,
html body .form-card .sform__foot .btn--primary { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 8px 16px -10px rgba(253, 104, 0, .5); }
html body .qp .qp__submit { box-shadow: 0 -10px 16px 6px rgba(255, 255, 255, .92), inset 0 1px 0 rgba(255, 255, 255, .35), 0 8px 16px -10px rgba(253, 104, 0, .5); }

/* Shorter screens: step the spacing down. */
@media (max-height: 800px) {
  html body .qp__main { padding-top: 1.1rem; padding-bottom: 1rem; }
  html body .qp__form { gap: .6rem; margin-top: .7rem; }
  html body .qp__fields { gap: .5rem .7rem; }
  html body .qp__field--stack .qp__input, html body .qp__field--stack .qp__area { height: 2.45rem; }
  html body .qp__field--stack .qp__area { padding-top: .5rem; padding-bottom: .5rem; }
  html body .qp__choice label { min-height: 2.3rem; }
  html body .qp__legend { margin-bottom: .3rem; }
  html body .qp .qp__submit { padding-top: .6rem; padding-bottom: .6rem; }
}
@media (max-height: 700px) {
  html body .qp__title { font-size: 1.3rem; }
  html body .qp__form { gap: .5rem; margin-top: .55rem; }
  html body .qp__fields { gap: .4rem .6rem; }
  html body .qp__field--stack { gap: .18rem; }
  html body .qp__field--stack .qp__label, html body .qp__legend { font-size: .72rem; }
  html body .qp__field--stack .qp__input, html body .qp__field--stack .qp__area { height: 2.25rem; font-size: .95rem; }
  html body .qp__choice label { min-height: 2.1rem; font-size: .78rem; }
  html body .qp__hint { font-size: .68rem; line-height: 1.3; }
  html body .qp__consent label { font-size: .78rem; line-height: 1.35; }
  html body .qp__fine { display: none; }
}
@media (max-height: 600px) {
  html body .qp__main { padding: .7rem .85rem .8rem; }
  html body .qp__main > .qp__lede { display: none; }
  html body .qp__title { font-size: 1.12rem; }
  html body .qp__form { gap: .38rem; margin-top: .45rem; }
  html body .qp__fields { gap: .3rem .5rem; }
  html body .qp__field--stack .qp__input, html body .qp__field--stack .qp__area { height: 2.05rem; font-size: .9rem; padding-inline: .65rem; }
  html body .qp__field--stack .qp__area { padding-top: .38rem; padding-bottom: .38rem; }
  html body .qp__choice label { min-height: 1.9rem; font-size: .74rem; }
  html body .qp__choices { gap: .3rem; }
  html body .qp__legend { margin-bottom: .15rem; }
  html body .qp__hint { display: none; }
  html body .qp .qp__submit { padding-top: .45rem; padding-bottom: .45rem; }
  html body .qp .qp__submit .icon { width: 1.8rem; height: 1.8rem; padding: .45rem; }
}
/* Page form cards follow the same steps (they share the header's space). */
@media (max-height: 800px) { html body .form-card .qp__form { gap: .6rem; } }
@media (max-height: 640px) and (max-width: 939px) {
  html body .form-card .qp__hint { display: none; }
  html body .form-card .qp__field--stack .qp__input, html body .form-card .qp__field--stack .qp__area { height: 2.1rem; font-size: .9rem; }
  html body .form-card .qp__field--stack .qp__label { font-size: .72rem; }
}
/* Phones: the same compact step regardless of height, since four options
   stack in two rows there. */
@media (max-width: 559px) {
  html body .qp__form { gap: .55rem; margin-top: .6rem; }
  html body .qp__fields { gap: .45rem .6rem; }
  html body .qp__field--stack { gap: .2rem; }
  html body .qp__field--stack .qp__input, html body .qp__field--stack .qp__area { height: 2.4rem; }
  html body .qp__field--stack .qp__area { padding-top: .48rem; padding-bottom: .48rem; }
  html body .qp__choice label { min-height: 2.25rem; }
  html body .qp__choices { gap: .35rem; }
  html body .qp__legend { margin-bottom: .25rem; }
  html body .qp__hint { font-size: .68rem; line-height: 1.3; }
  html body .qp__consent label { font-size: .8rem; line-height: 1.35; }
  html body .qp__main { padding-top: 1rem; padding-bottom: .9rem; }
  html body .qp .qp__submit, html body .form-card .sform__foot .btn { padding-top: .55rem; padding-bottom: .55rem; }
  html body .form-card .sform__foot { margin-top: .6rem; }
  html body .form-card .sform__privacy { display: none; }
}
@media (max-width: 559px) and (max-height: 700px) {
  html body .qp__main > .qp__lede, html body .qp__hint { display: none; }
  html body .qp__field--stack .qp__input, html body .qp__field--stack .qp__area { height: 2.15rem; font-size: .92rem; }
  html body .qp__choice label { min-height: 2rem; font-size: .76rem; }
  html body .qp__form { gap: .42rem; margin-top: .45rem; }
  html body .qp__fields { gap: .32rem .5rem; }
  html body main .form-card { padding: .75rem .8rem .8rem; }
  html body .form-card .sform__foot { margin-top: .45rem; }
  html body .qp .qp__submit .icon, html body .form-card .sform__foot .btn .icon { width: 1.8rem; height: 1.8rem; padding: .45rem; }
  html body .qp .qp__submit, html body .form-card .sform__foot .btn { padding-top: .42rem; padding-bottom: .42rem; }
}
@media (max-width: 559px) and (max-height: 600px) {
  html body .qp__field--stack .qp__input, html body .qp__field--stack .qp__area { height: 1.95rem; font-size: .88rem; }
  html body .qp__choice label { min-height: 1.8rem; font-size: .72rem; }
  html body .qp__field--stack .qp__label, html body .qp__legend { font-size: .68rem; }
  html body .qp__form { gap: .32rem; }
  html body .qp__consent label { font-size: .72rem; line-height: 1.3; }
  html body main .form-card { padding: .6rem .7rem .65rem; }
}
/* Short laptops: the page card drops its privacy line (the consent row
   already links the Privacy Policy). */
@media (min-width: 940px) and (max-height: 740px) {
  html body .form-card .sform__privacy { display: none; }
  html body .form-card .sform__foot { margin-top: .7rem; }
}
/* The smallest phones (320 x 568): the four interest options share one row
   and the fields are a little shorter, so the page form still shows whole. */
@media (max-width: 359px) and (max-height: 600px) {
  html body .form-card .qp__choices--four { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .25rem; }
  html body .form-card .qp__choices--four .qp__choice label { white-space: normal; line-height: 1.1; font-size: .64rem; padding: .15rem .1rem; min-height: 2.2rem; }
  html body .form-card .qp__input, html body .form-card textarea.qp__input { min-height: 36px; height: 36px; }
  html body .form-card .qp__fields { gap: .25rem .45rem; }
  html body .form-card .qp__form { gap: .28rem; }
  html body .form-card .sform__foot { margin-top: .35rem; }
}
/* Full-width fields have room for their full label on every screen. */
html body .qp__field--full .qp__lbl-full { position: static; width: auto; height: auto; overflow: visible; clip: auto; clip-path: none; white-space: normal; }
html body .qp__field--full .qp__lbl-short { display: none; }

/* ==========================================================================
   Quote popup — room to breathe (desktop)
   A wider dialog with a slimmer photo panel gives the form more width, so
   the bill and message fields sit side by side: one row fewer. The height
   saved goes into spacing between groups. Nothing is removed.
   ========================================================================== */
@media (min-width: 1200px) {
  html body .qp { width: min(72rem, calc(100vw - 2rem)); }
  html body .qp__shell { grid-template-columns: minmax(0, .74fr) minmax(0, 1.26fr); }
  html body .qp__main { padding-inline: clamp(2.25rem, 3.4vw, 3.25rem); }
  /* Bill and message share a row; the hint stays under the bill field. */
  html body .qp .qp__fields > .qp__field--full { grid-column: auto; }
  html body .qp .qp__field--stack .qp__area:focus,
  html body .qp .qp__field--stack .qp__area:not(:placeholder-shown) { height: 4.2rem; }
  html body .qp .qp__group--wide .qp__legend { width: 11.5rem; }
}
/* Tall enough screens: generous spacing and calmer type. */
@media (min-width: 1200px) and (min-height: 840px) {
  html body .qp__main { padding-top: 2.6rem; padding-bottom: 2.1rem; }
  html body .qp__title { font-size: 2rem; }
  html body .qp__main > .qp__lede { margin-top: .5rem; font-size: 1rem; }
  html body .qp .qp__form { gap: 1.35rem; margin-top: 1.6rem; }
  html body .qp .qp__fields { gap: 1.1rem 1rem; }
  html body .qp .qp__field--stack { gap: .42rem; }
  html body .qp .qp__legend { margin-bottom: .55rem; }
  html body .qp .qp__group--inline .qp__legend { margin-bottom: 0; }
  html body .qp .qp__field--stack .qp__input, html body .qp .qp__field--stack .qp__area { height: 2.95rem; }
  html body .qp .qp__field--stack .qp__area { padding-top: .72rem; }
  html body .qp .qp__choice label { min-height: 2.85rem; font-size: .86rem; }
  html body .qp .qp__fine { margin-top: -.35rem; }
}
/* Labels a touch lighter so the form reads calmer everywhere. */
html body .qp__field--stack .qp__label, html body .qp__legend { font-weight: 600; color: #22344d; }
html body .qp__hint { color: #6a7a90; }
/* Laptops 700–839px tall: the wider layout leaves spare height; use it. */
@media (min-width: 1200px) and (min-height: 700px) and (max-height: 839px) {
  html body .qp__main { padding-top: 1.7rem; padding-bottom: 1.4rem; }
  html body .qp__title { font-size: 1.7rem; }
  html body .qp__main > .qp__lede { display: block; margin-top: .35rem; }
  html body .qp .qp__form { gap: .95rem; margin-top: 1.1rem; }
  html body .qp .qp__fields { gap: .8rem 1rem; }
  html body .qp .qp__field--stack { gap: .32rem; }
  html body .qp .qp__field--stack .qp__label, html body .qp .qp__legend { font-size: .78rem; }
  html body .qp .qp__legend { margin-bottom: .4rem; }
  html body .qp .qp__group--inline .qp__legend { margin: .7rem 0 0; }
  html body .qp .qp__field--stack .qp__input, html body .qp .qp__field--stack .qp__area { height: 2.6rem; font-size: 1rem; }
  html body .qp .qp__field--stack .qp__area { padding-top: .55rem; }
  html body .qp .qp__choice label { min-height: 2.5rem; font-size: .84rem; }
  html body .qp .qp__hint { font-size: .72rem; }
  html body .qp .qp__consent label { font-size: .84rem; }
  html body .qp .qp__submit { padding-top: .7rem; padding-bottom: .7rem; }
  html body .qp .qp__fine { display: block; }
}
@media (min-width: 1200px) and (min-height: 700px) and (max-height: 759px) {
  html body .qp__main { padding-top: 1.3rem; padding-bottom: 1.1rem; }
  html body .qp .qp__form { gap: .75rem; margin-top: .85rem; }
  html body .qp .qp__fields { gap: .65rem 1rem; }
  html body .qp .qp__choice label { min-height: 2.35rem; }
  html body .qp .qp__field--stack .qp__input, html body .qp .qp__field--stack .qp__area { height: 2.45rem; }
}

/* Rows, not cards. The rebate parts and the monitoring-app list are ruled
   rows inside a panel; an earlier pass gave them a card border with no side
   padding, so their text sat on the border. Back to plain rows. */
html body .rb-part, html body .apps > * {
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  background: none; box-shadow: none; transform: none;
  transition: opacity .8s var(--ease-out) var(--reveal-delay, 0ms);
}
html body .rb-part:last-child, html body .apps > :last-child { border-bottom: 0; }
html body .rb-part:hover { transform: none; box-shadow: none; border-color: var(--line); }