/* ==========================================================================
   HOMEPAGE ANSWER SECTIONS (`/`, Eco Energy Services only)
   ==========================================================================
   Loaded by LandingStep only when the GEO slots are present, after every
   other home sheet. Nothing here introduces a new visual language: the type
   ramp, gradient headings, #f5f6f0 tray + white cards, lime accents, radii
   and the tick icon are the finance (§8) and FAQ (§11) sections' own values,
   restated for the new classes.

   Same unit contract as the rest of the build (see base.css): 1rem is one
   Figma px of the 1920 canvas at >=768 and of the 428 canvas below it, so
   every length is authored as figma_px / 16 for each canvas.

   None of these classes is in motion.css's hidden-state lists, so this
   content is visible on first paint, with or without JavaScript.
   ========================================================================== */

/* ---------------------------------------------------------------- shared */

.geo-wrap {
  width: 78.75rem;                 /* the 1260 content column */
  max-width: calc(100% - 3rem);
  margin: 0 auto;
}

.geo-sec { padding: 7.5rem 0 0; }
.geo-sec + .geo-sec { padding-top: 6.25rem; }

.geo-h {
  margin: 0;
  scroll-margin-top: 5rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-style: italic;
  font-size: 3.25rem;              /* 52/60, §8's heading */
  line-height: 3.75rem;
  letter-spacing: -0.04rem;
  color: var(--ink);
  text-wrap: balance;
}
.geo-h-em {
  background: linear-gradient(88.12deg, #111111 62%, #8fa31f 110%, #e2fa5a 140%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.geo-lead {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 1.5rem;               /* 24/32, §8's paragraph */
  line-height: 2.125rem;
  letter-spacing: -0.01rem;
  color: var(--ink-70);
}
.geo-h + .geo-lead { margin-top: 1.5rem; }
.geo-lead-narrow { max-width: 56rem; }

.geo-p {
  margin: 1.25rem 0 0;
  font-family: var(--font-sans);
  font-size: 1.25rem;
  line-height: 1.875rem;
  letter-spacing: -0.01rem;
  color: var(--ink-70);
}

.geo-sec a:not(.btn),
.geo-psh-intro a {
  color: var(--ink);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 0.0625rem;
  text-underline-offset: 0.2em;
}
.geo-sec a:not(.btn):hover { text-decoration-color: #8fa31f; }
.geo-sec a:focus-visible,
.geo-hero-advisor:focus-visible {
  outline: 0.125rem solid var(--ink);
  outline-offset: 0.1875rem;
  border-radius: 0.125rem;
}

.geo-ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 2.25rem;
}

.geo-tick {
  flex: 0 0 1.5rem;
  width: 1.5rem;
  height: 1.5rem;
}

.geo-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 5rem;
  align-items: start;
}

/* the soft tray the FAQ list sits on: #f5f6f0 -> lime */
.geo-panel {
  border-radius: 0.75rem;
  background: linear-gradient(165deg, #f5f6f0 45%, rgba(226, 250, 90, 0.55) 140%);
  padding: 4rem;
}
.geo-panel-center { text-align: center; }
.geo-panel-center .geo-lead { max-width: 56rem; margin-left: auto; margin-right: auto; }
.geo-panel-center .geo-ctas { justify-content: center; }

.geo-kicker {
  display: inline-block;
  margin: 0;
  padding: 0.25rem 0.625rem;
  border-radius: 0.375rem;
  background: var(--accent);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: 0.02rem;
  color: var(--ink);
}

.geo-note,
.geo-src {
  margin: 1.25rem 0 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5rem;
  color: var(--ink-70);
}

.geo-h3 {
  margin: 3.5rem 0 1.25rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 2rem;
  line-height: 2.5rem;
  letter-spacing: -0.08rem;
  color: var(--ink);
}

/* ------------------------------------------------------- cards (§8 tray) */

.geo-cards {
  display: grid;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: 0.75rem;
  background: var(--panel);
}
.geo-wrap > .geo-cards,
.geo-wrap > .geo-split + .geo-cards { margin-top: 3rem; }
.geo-cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.geo-cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.geo-cards-stack { grid-template-columns: minmax(0, 1fr); }

.geo-card {
  min-width: 0;
  border-radius: 0.75rem;
  background: var(--white);
  padding: 2rem;
  transition:
    box-shadow var(--dur-hover) var(--ease-premium),
    transform var(--dur-hover) var(--ease-premium);
}
.geo-card:hover {
  transform: translateY(-0.1875rem);
  box-shadow: 0 1.125rem 2.5rem -1.25rem rgba(17, 17, 17, 0.22);
}
.geo-card h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.75rem;              /* §8 card title */
  line-height: 2.25rem;
  letter-spacing: -0.08rem;
  color: var(--ink);
}
.geo-kicker + h3 { margin-top: 1rem; }
.geo-card h3 + .geo-kicker { margin-top: 1rem; }
.geo-card p {
  margin: 0.75rem 0 0;
  font-family: var(--font-sans);
  font-size: 1.125rem;
  line-height: 1.6875rem;
  letter-spacing: -0.01rem;
  color: var(--ink-70);
}

.geo-list {
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}
.geo-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1.5rem;
  color: var(--ink);
}

/* ---------------------------------------------------------- hero additions */

/* Figma "Homepage" hero, 1920 canvas (1rem = 1 Figma px):
     H1        672 x 112 @ top 124 — Host Grotesk 400 48/56, ls -1.28;
               "UK Homes" 600 italic with a 12px #e2fa5a bar
     sub       1076 x 72 @ top 248 — Instrument Sans 400 20/24, ls -0.16, #111
     checks    726 wide, 2 rows of 24 @ top 352 — gap 24 x 12, icon gap 8
     CTA row   @ top 444 — primary 60 tall, 20 gap, text-link secondary
     reviews   @ top 567 (the design's own 62 below the CTA row)
   Instrument Sans is restated because the root layout's Inter class on
   <body> would otherwise win over the design's --font-sans. */
.hero h1.geo-h1 {
  margin-top: 2rem;                /* header ends at 92 -> 124 */
  width: 42rem;                    /* 672: line 1 ends after "Installation" */
  max-width: calc(100% - 3rem);
  font-size: 3rem;                 /* 48 */
  line-height: 3.5rem;             /* 56 */
  font-weight: 400;
  letter-spacing: -0.08rem;        /* -1.28 */
  white-space: normal;
}
.hero h1.geo-h1 .hl {
  background-position: left bottom 0.625rem;   /* bar centre 96 below the H1 top */
}
.hero h1.geo-h1 ~ .hero-sub {
  margin-top: 0.75rem;             /* 236 -> 248 */
  max-width: 67.25rem;             /* 1076 */
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 1.25rem;              /* 20 */
  line-height: 1.5rem;             /* 24 -> 3 lines = 72 */
  letter-spacing: -0.01rem;
  color: var(--ink);
}
.hero h1.geo-h1 ~ .hero-checks {
  margin-top: 2rem;                /* 320 -> 352 */
  width: 45.375rem;                /* 726 */
  max-width: calc(100% - 3rem);
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 1.5rem;             /* rows 12, columns 24 */
}
.hero h1.geo-h1 ~ .hero-checks li {
  gap: 0.5rem;
  font-family: var(--font-sans);
  line-height: 1.5rem;
  color: var(--ink);
}

.geo-hero-ctas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;                    /* 20 */
  margin-top: 2rem;                /* 412 -> 444 */
}
.geo-hero-advisor {
  padding: 0;
  font-family: var(--font-ui);     /* Geist 500 20/25.6 */
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.6rem;
  letter-spacing: -0.01rem;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-skip-ink: auto;
  text-underline-offset: 0.15em;
  white-space: nowrap;
  cursor: pointer;
}
.geo-hero-advisor:hover { text-decoration-thickness: 0.125rem; }
.hero h1.geo-h1 ~ .hero-reviews {
  margin-top: 3.875rem;            /* the design's own 62 */
  font-family: var(--font-sans);
}

/* Desktop composite offset. Figma sets the photo (and the panel outline drawn
   on it), the dashed connector and the roof-planner callout ~50 lower than
   the base design, so the reviews row sits on sky and clear of the dashed
   line instead of colliding with it. The hero grows by the same amount so
   nothing is clipped. Mobile has its own --geo-hero-shift below. */
@media (min-width: 768px) {
  .hero { --geo-hero-shift-desktop: 3.125rem; height: calc(84.5rem + var(--geo-hero-shift-desktop)); }
  .hero-houses { top: calc(25.3125rem + var(--geo-hero-shift-desktop)); }
  .hero-callout { top: calc(34.5625rem + var(--geo-hero-shift-desktop)); }  /* base: home-sections.css (553) */
}

/* ------------------------------------------------- trust strip credentials */

/* Figma "Accredited solar" section, 1920 canvas (1rem = 1 Figma px):
     logo strip  45 tall, 80 above the grid
     grid        599 left column + 48 gap + 630 video, top-aligned
     heading     "Accredited solar" 600 italic ~46/56; "for UK homes" 25/32
     CTA         32 below the heading; card grid 50 below the CTA
     cards       3 x 2, gap 16, single panel glyph, value 500 32/43
     video       630 x 711, r12, inset 0 0 40 #111 + 0 4 60 #e2fa5a
   Desktop only — the 428 canvas keeps its own rules in home-mobile.css. */
.excl-card-suffix { font-size: 0.5625em; font-weight: 500; letter-spacing: -0.02rem; }  /* 18 at 32 */
@media (min-width: 768px) {
  .excl-certs { margin-bottom: 5rem; }
  .excl-certs img { height: 2.8125rem; }                 /* 45 */
  .excl-grid {
    grid-template-columns: 37.4375rem 39.375rem;         /* 599 | 630 */
    gap: 3rem;                                           /* 48 */
    justify-content: center;
    align-items: start;
  }
  .excl-h { font-size: 1.5625rem; line-height: 2rem; }   /* "for UK homes" 25/32 */
  .excl-italic { font-size: 2.875rem; line-height: 3.5rem; }  /* 46/56 */
  .excl-left .btn { margin-top: 2rem; }
  .excl-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 3.125rem;
  }
  .excl-card { min-height: 0; }
  .excl-card img {                                       /* full panel + badge icon */
    width: 4.6rem;
    height: 3rem;
    margin-bottom: 0.75rem;                              /* value glyph 98 below card top */
  }
  .excl-card h3 { font-weight: 500; line-height: 2.375rem; }   /* 32/38 */
  .excl-card p { margin-top: 0.25rem; }                  /* row 1 = 243, row 2 = 223 */
  .excl-video {
    height: 44.4375rem;                                  /* 711 */
    background: var(--white);
    box-shadow: inset 0 0 2.5rem #111111, 0 0.25rem 3.75rem 0 rgba(226, 250, 90, 0.7);
  }
}

.geo-creds {
  list-style: none;
  margin: 2.5rem auto 0;
  padding: 0.75rem;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.75rem;
  border-radius: 0.75rem;
  background: var(--panel);
}
.geo-creds li {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1.25rem 1.25rem 1.375rem;
  border-radius: 0.75rem;
  background: var(--white);
  text-align: center;
}
.geo-creds strong {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.375rem;
  line-height: 1.75rem;
  letter-spacing: -0.04rem;
  color: var(--ink);
}
.geo-creds span {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.375rem;
  color: var(--ink-70);
}

/* ------------------------------------------------------ package intro copy */

.geo-psh-intro {
  margin: 1.5rem 0 0;
  max-width: 34rem;
  font-family: var(--font-sans);
  font-size: 1.25rem;
  line-height: 1.875rem;
  letter-spacing: -0.01rem;
  color: var(--ink-70);
}

/* --------------------------------------------------------------- worth it */

/* ---------------------------------------------------------------- savings */

.geo-factors {
  list-style: none;
  margin: 0;
  padding: 0.75rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  border-radius: 0.75rem;
  background: var(--panel);
}
.geo-factors li {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 1.25rem 1.5rem;
  border-radius: 0.75rem;
  background: var(--white);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.625rem;
  color: var(--ink);
}

/* ------------------------------------------------------------- process cta */

.geo-inline-cta {
  margin-top: 5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 2rem 2.5rem;
  border-radius: 0.75rem;
  background: var(--panel);
}
.geo-inline-cta p {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.75rem;
  line-height: 2.25rem;
  letter-spacing: -0.06rem;
  color: var(--ink);
}
.geo-inline-cta .geo-ctas { margin-top: 0; flex-wrap: nowrap; }

/* ------------------------------------------------------------- about facts */

.geo-facts {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
.geo-facts > div {
  padding: 1.25rem 1.5rem;
  border-radius: 0.75rem;
  background: var(--white);
}
.geo-facts dt {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.375rem;
  line-height: 1.75rem;
  letter-spacing: -0.04rem;
  color: var(--ink);
}
.geo-facts dd {
  margin: 0.25rem 0 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5rem;
  color: var(--ink-70);
}

/* ---------------------------------------------------------------- sources */

.geo-sources {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0.75rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  border-radius: 0.75rem;
  background: var(--panel);
}
.geo-sources li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 1.5rem;
  border-radius: 0.75rem;
  background: var(--white);
}
.geo-sources li > a {
  font-family: var(--font-display);
  font-size: 1.375rem;
  line-height: 1.875rem;
}
.geo-sources li > span:last-child {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5rem;
  color: var(--ink-70);
}

/* --------------------------------------------------------------- final cta */

@media (prefers-reduced-motion: reduce) {
  .geo-card { transition-duration: 1ms; }
  .geo-card:hover { transform: none; }
}

/* ==========================================================================
   MOBILE — the 428 canvas (1rem = 1 px of 428)
   ========================================================================== */
@media (max-width: 767.98px) {
  .geo-wrap { width: calc(100% - 2.5rem); max-width: none; }   /* 20 gutters */
  .geo-sec { padding-top: 4.5rem; }
  .geo-sec + .geo-sec { padding-top: 4rem; }

  .geo-h { font-size: 2.25rem; line-height: 2.75rem; letter-spacing: -0.06rem; }
  .geo-lead { font-size: 1.125rem; line-height: 1.6875rem; }
  .geo-h + .geo-lead { margin-top: 1.25rem; }
  .geo-p { font-size: 1rem; line-height: 1.5rem; }
  .geo-split { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .geo-panel { padding: 2rem 1.25rem; }
  .geo-ctas { margin-top: 1.75rem; gap: 0.75rem; }
  .geo-ctas .btn-lg { font-size: 1rem; }

  .geo-cards-2, .geo-cards-3 { grid-template-columns: minmax(0, 1fr); }
  .geo-wrap > .geo-cards,
  .geo-wrap > .geo-split + .geo-cards { margin-top: 2rem; }
  .geo-card { padding: 1.5rem 1.25rem; }
  .geo-card h3 { font-size: 1.375rem; line-height: 1.75rem; letter-spacing: -0.04rem; }
  .geo-card p { font-size: 1rem; line-height: 1.5rem; }
  .geo-list li { font-size: 1rem; line-height: 1.375rem; }
  .geo-h3 { margin-top: 2.5rem; font-size: 1.5rem; line-height: 2rem; letter-spacing: -0.04rem; }

  /* hero: copy -> CTA -> advisor -> trust chips, per the mobile order */
  .hero h1.geo-h1 { margin-top: 2rem; width: 24.25rem; max-width: none; font-size: 2.375rem; line-height: 2.875rem; }
  /* The desktop Figma values above must not reach the 428 canvas: restore
     the mobile hero's own sizing (only the Instrument Sans fix carries over). */
  .hero h1.geo-h1 ~ .hero-sub {
    width: 24.25rem; max-width: none; margin-top: 0.375rem;
    font-weight: 400; font-size: 1rem; line-height: normal;
  }
  .hero h1.geo-h1 ~ .hero-reviews { margin-top: 0; }
  .hero-inner > .geo-hero-ctas { order: 3; flex-direction: column; gap: 0.75rem; margin-top: 1.5rem; }
  .geo-hero-ctas .btn.btn-lg { font-size: 1rem; line-height: 1.6rem; }
  .geo-hero-ctas .btn.btn-lg .chip { width: 2rem; height: 2rem; }
  .geo-hero-advisor { font-size: 1rem; line-height: 1.6rem; }
  .hero h1.geo-h1 ~ .hero-checks {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1rem;
    width: 24.25rem;
    max-width: none;
    margin-top: 1rem;
  }
  .hero h1.geo-h1 ~ .hero-checks li { font-size: 0.9375rem; line-height: normal; }

  /* The answer-first hero copy runs ~160 canvas px deeper than the design's
     two-line headline, so the photo composite (houses, the rotated review
     badge on the roof, the planner callout) moves down by exactly that much
     instead of the copy being cut. --geo-hero-shift is the one number. */
  .hero { --geo-hero-shift: 9.875rem; height: calc(57.875rem + var(--geo-hero-shift)); }
  .hero-sky { height: calc(65.6875rem + var(--geo-hero-shift)); }
  .hero-houses { top: calc(33.0625rem + var(--geo-hero-shift)); }
  .hero-reviews { top: calc(27.2738647461rem + var(--geo-hero-shift)); }
  .hero-callout { top: calc(45.8125rem + var(--geo-hero-shift)); }

  .geo-creds { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 24.25rem; max-width: 100%; margin-top: 2rem; }
  .geo-creds li { padding: 1rem 0.75rem; }
  .geo-creds li:last-child { grid-column: 1 / -1; }
  .geo-creds strong { font-size: 1.125rem; line-height: 1.5rem; }
  .geo-creds span { font-size: 0.875rem; line-height: 1.25rem; }

  .geo-psh-intro { font-size: 1rem; line-height: 1.5rem; max-width: none; text-align: center; }


  .geo-factors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .geo-factors li { padding: 0.875rem; font-size: 1rem; line-height: 1.375rem; gap: 0.5rem; }
  .geo-factors .geo-tick { flex-basis: 1.25rem; width: 1.25rem; height: 1.25rem; }

  .geo-inline-cta { margin-top: 3rem; flex-direction: column; align-items: flex-start; padding: 1.5rem 1.25rem; gap: 1.25rem; }
  .geo-inline-cta p { font-size: 1.25rem; line-height: 1.75rem; }
  .geo-inline-cta .geo-ctas { flex-wrap: wrap; }

  .geo-facts { grid-template-columns: minmax(0, 1fr); }
  .geo-sources { grid-template-columns: minmax(0, 1fr); margin-top: 2rem; }
  .geo-sources li { padding: 1.25rem; }
  .geo-sources li > a { font-size: 1.125rem; line-height: 1.5rem; }

}

/* ------------------------------------------------------ sticky + callouts */

/* "Get Free Quote" is longer than the 186-wide pill the design sized for
   "Get a quote", so the shell sizes to its label instead of wrapping it. */
.quickbar { width: auto; }
.quickbar .pill-cta { width: auto; white-space: nowrap; gap: 0.625rem; }

/* Call button beside the CTA — Figma "Frame 113": CTA + 4 gap + 60x60 white
   box, 2px #111 border, r12, 36x36 phone icon; 4 padding all round. */
.quickbar .pv-pill { gap: 0.25rem; padding: 0.25rem; }
.pill-phone {
  flex: none;
  width: 3.75rem;
  height: 3.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 0.125rem solid #111;
  border-radius: 0.75rem;
  transition: background-color 0.2s ease;
}
.pill-phone:hover { background: var(--accent); }
.pill-phone img { width: 2.25rem; height: 2.25rem; display: block; }

/* The callouts' lime pill is an absolutely placed box measured for one word
   ("upfront"); on this page it highlights the title's own last word instead,
   so it fits whatever the copy is. */
.callout-hl { display: none !important; }
.geo-callout-em {
  padding: 0 0.375rem;
  border-radius: 0.5rem;
  background: var(--accent);
}

/* ==========================================================================
   "Is Solar Worth It for a UK Home?" — Figma "Frame 1707481542", 1920 canvas
     band     1880 x 616 @ x20, r12, #000 with the 4px/24px dot pattern
     copy     x310 (band-relative), top 80: H2 451 wide, Host Grotesk 600
              italic 48/54, white -> #e2fa5a; lead 741 wide 20/24 white;
              lime CTA (10/10/10/16, gap 10, r12, 40px #111 chip) 32 below;
              #0a0a0a note (16/20, gap 12, r8) 794 wide, 32 below
     photo    736-wide frame flush right; 776 x 585 image, black fades
              191 left / 129 top / 175 bottom
   ========================================================================== */
.geo-worth { padding: 5rem 0 0; }
/* Figma: 80 from the accreditation section's content to the band, and 80
   below the band (the next heading then sits 132 under it). The previous
   section already ends with 90 of its own padding, hence the -10. */
@media (min-width: 768px) {
  .geo-worth { padding: 0 0 5rem; margin-top: -0.625rem; }
}
.geo-worth-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: calc(100% - 2.5rem);                     /* 1880 */
  margin: 0 auto;
  border-radius: 0.75rem;
  background: #000;
}
.geo-worth-dots {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect width='4' height='4' fill='%23ffffff' fill-opacity='.04'/%3E%3C/svg%3E");
  background-size: 1.5rem 1.5rem;
  background-position: 1.375rem 1.25rem;
}
.geo-worth-photo {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 46rem;                                   /* 736 */
  overflow: hidden;
}
.geo-worth-photo img {
  position: absolute;
  top: 0;
  left: 0;
  width: 48.5rem;                                 /* 776 */
  height: 36.5625rem;                             /* 585 */
  max-width: none;
  object-fit: cover;
}
.geo-worth-fade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, #000 0, rgba(0, 0, 0, 0) 11.9375rem),
    linear-gradient(to bottom, #000 0, rgba(0, 0, 0, 0) 8.0625rem),
    linear-gradient(to top, #000 0, #000 1.9375rem, rgba(0, 0, 0, 0) 10.9375rem);
}
.geo-worth-copy {
  position: relative;
  width: 49.625rem;                               /* 794 */
  max-width: calc(100% - 2.5rem);
  padding: 5rem 0;
  margin-left: 19.375rem;                         /* 310 */
}
.geo-worth .geo-h {
  width: 28.1875rem;                              /* 451 */
  text-wrap: wrap;                                /* Figma breaks after "for a", not balanced */
  font-size: 3rem;
  line-height: 3.375rem;                          /* 48/54 */
  letter-spacing: -0.08rem;
}
.geo-worth .geo-h-em {
  background: linear-gradient(90deg, #ffffff 0%, #e2fa5a 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.geo-worth-lead {
  width: 46.3125rem;                              /* 741 */
  max-width: 100%;
  margin: 0.75rem 0 0;
  font-family: var(--font-sans);
  font-size: 1.25rem;
  line-height: 1.5rem;
  letter-spacing: -0.01rem;
  color: var(--white);
}
.geo-btn-lime {
  margin-top: 2rem;
  padding: 0.625rem 0.625rem 0.625rem 1rem;
  gap: 0.625rem;
  border-radius: 0.75rem;
  background: var(--accent);
  color: var(--ink);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.6rem;
}
.geo-btn-lime:hover { background: #d7f03f; }
.geo-btn-lime .chip { width: 2.5rem; height: 2.5rem; background: var(--ink); }
.geo-btn-lime .chip img { filter: invert(1); }
.geo-btn-lime:focus-visible { outline-color: var(--white); }
.geo-worth-note {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 2rem;
  padding: 1rem 1.25rem;
  border-radius: 0.5rem;
  background: #0a0a0a;
}
.geo-worth-info { flex: 0 0 2rem; width: 2rem; height: 2rem; }
.geo-worth-note p {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.25rem;
  letter-spacing: -0.01rem;
  color: rgba(255, 255, 255, 0.7);
}

/* 428 canvas: copy first, photo underneath, same band styling. */
@media (max-width: 767.98px) {
  .geo-worth { padding-top: 3rem; }
  .geo-worth-band { width: calc(100% - 2.5rem); display: flex; flex-direction: column; }
  .geo-worth-copy { width: auto; max-width: none; margin: 0; padding: 2.5rem 1.25rem 1.5rem; }
  .geo-worth .geo-h { width: auto; font-size: 2.25rem; line-height: 2.625rem; }
  .geo-worth-lead { width: auto; font-size: 1.0625rem; line-height: 1.5rem; }
  .geo-btn-lime { font-size: 1rem; }
  .geo-btn-lime .chip { width: 2rem; height: 2rem; }
  .geo-worth-note { align-items: flex-start; padding: 1rem; }
  .geo-worth-note p { font-size: 0.9375rem; line-height: 1.375rem; }
  .geo-worth-photo { position: relative; width: 100%; height: 17.5rem; order: 2; }
  .geo-worth-photo img { width: 100%; height: 100%; }
  .geo-worth-fade {
    background:
      linear-gradient(to bottom, #000 0, rgba(0, 0, 0, 0) 5rem),
      linear-gradient(to top, #000 0, rgba(0, 0, 0, 0) 4rem);
  }
}

/* ==========================================================================
   "A Complete Solar System" showcase — Figma "Frame 91/93…", 1920 canvas.
   Every card (620 x 515, r8, white, 20 apart):
     top block   340 x 259 @ 24,24 — #e2fa5a 20% -> 0% left-to-right, 3px
                 #e2fa5a left border; title @ 48,44 Host Grotesk 500 32/43;
                 copy 300 wide @ 48,95, Instrument Sans 20/24, #111 70%
     bullets     572 x 100 @ 24,307 — #111 8%, 1px dashed #111 16%, r8,
                 2 x 2 grid, 12 padding, gaps 12 x 24
     actions     CTA 248 x 60 @ 24,431; note 304 wide @ 292, centred on it
   Left column: "A Complete" 28 / "Solar System" 56 italic / "Built Around
   Your Home" 32, intro 501 wide 20/24, checks 12 apart.
   Desktop only — the 428 canvas keeps home-mobile.css.
   ========================================================================== */
@media (min-width: 768px) {
  .pshow .psh-wrap { gap: 8.6875rem; }                     /* 330+501 -> 970 */
  /* 80 above the heading, the same as the 80 below the "Read Reviews" button
     (`.psh-left` bottom padding), so the column sits balanced. Was 7.5rem. */
  .pshow .psh-left { padding-top: 5rem; }
  /* Three stacked runs; the H2's own 64/70 strut would otherwise space them. */
  .pshow .psh-h { width: 31.3125rem; font-size: 1.75rem; line-height: 2.3125rem; letter-spacing: -0.08rem; }
  .pshow .psh-h br { display: none; }
  .pshow .psh-h-thin { display: block; font-size: 1.75rem; line-height: 2.3125rem; }    /* 28/37 @ 120 */
  .pshow .psh-h-em { display: inline-block; margin-top: 0.25rem; font-size: 3.5rem; line-height: 3.5rem; }  /* 56/56 @ 161 */
  .psh-h-tail { display: block; margin-top: 0.375rem; color: var(--ink-70); font-size: 2rem; line-height: 2.6875rem; } /* 32/43 @ 223 */
  .pshow .geo-psh-intro {
    max-width: 31.3125rem;                                 /* 501 */
    margin-top: 0.75rem;
    font-size: 1.25rem;
    line-height: 1.5rem;
    color: var(--ink);
  }
  .pshow .psh-checks { margin-top: 2rem; gap: 0.75rem; }

  .psh-cards { gap: 1.25rem; }                             /* 20 */
  .psh-card {
    display: grid;
    grid-template-columns: 15.5rem minmax(0, 1fr);         /* CTA | note */
    column-gap: 1.25rem;
    align-items: center;
    padding: 1.5rem;
  }
  .psh-card .psh-title,
  .psh-card .psh-sub {
    grid-column: 1 / -1;
    justify-self: start;
    box-sizing: border-box;
    width: 21.25rem;                                       /* 340 */
    margin: 0;
    border-left: 0.1875rem solid var(--accent);
    background: linear-gradient(90deg, rgba(226, 250, 90, 0.2), rgba(226, 250, 90, 0));
  }
  .psh-card .psh-title {
    padding: 1.25rem 1rem 0 1.3125rem;                     /* text @ 48,44 */
    font-weight: 500;
    font-size: 2rem;
    line-height: 2.6875rem;
    letter-spacing: -0.08rem;
  }
  .psh-card .psh-sub {
    min-height: 12.25rem;                                  /* block = 259 */
    padding: 0.5rem 1rem 1.25rem 1.3125rem;                /* 300 text column */
    font-size: 1.25rem;
    line-height: 1.5rem;
  }
  .psh-card .psh-shot { left: 22.25rem; top: 1.5rem; height: 16.1875rem; }  /* beside the block */
  /* Mounting card: the lime panel is drawn ONCE, on the wrapper, at the height
     the title + blurb pair has on every other card (3.9375 + 12.25 = 16.1875,
     the video's own height), and its content is centred in it vertically. Same
     border, wash, width and text padding, so nothing else moves. */
  .psh-card .psh-panel {
    grid-column: 1 / -1;
    justify-self: start;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
    width: 21.25rem;
    min-height: 16.1875rem;
    border-left: 0.1875rem solid var(--accent);
    background: linear-gradient(90deg, rgba(226, 250, 90, 0.2), rgba(226, 250, 90, 0));
  }
  .psh-card .psh-panel .psh-title,
  .psh-card .psh-panel .psh-sub { width: auto; border-left: 0; background: none; }
  .psh-card .psh-panel .psh-sub { min-height: 0; }
  .psh-card .psh-bullets {
    grid-column: 1 / -1;
    grid-row: 3;
    margin: 1.5rem 0 0;
    padding: 0.75rem;
    gap: 0.75rem 1.5rem;
    border: 0.0625rem dashed rgba(17, 17, 17, 0.16);
    border-radius: 0.5rem;
    background: rgba(17, 17, 17, 0.08);
  }
  .psh-card .psh-bullets span { font-size: 0.9375rem; line-height: 1.25rem; }   /* 15/20 */
  .psh-card .psh-btn {
    grid-column: 1;
    grid-row: 4;
    justify-self: start;
    margin-top: 1.5rem;
  }
  .psh-card .psh-rule { display: none; }
  .psh-card .psh-note {
    grid-column: 2;
    grid-row: 4;
    margin: 1.5rem 0 0;
  }
  .psh-card .psh-note p { width: auto; }
}

/* the tail line on the 428 canvas */
@media (max-width: 767.98px) {
  .psh-h-tail { color: var(--ink-70); font-size: 0.6em; }
}

/* ==========================================================================
   "Solar Technology Selected for the Property" — Figma "Frame 1707481634"
     card     1260 x 426, r12, 4px #e2fa5a border, #fcfdf8
     heading  526 wide @ 48,48 — Host Grotesk 600 italic 48/54, #111 -> lime
     tail     "Not a Fixed Package" @ top 168, 400 32/43, #111 70%
     image    688 x 217, flush bottom-left
     copy     468 wide @ left 678, top 68 — Instrument Sans 24/32, 70%
     note     530 wide @ top 308 — 12 pad, 10 gap, #111 8%, 1px dashed 16%,
              r8; 24 tick, 16/16 500 #111
   ========================================================================== */
.geo-brand-card {
  position: relative;
  box-sizing: border-box;
  width: 78.75rem;                                  /* 1260 */
  max-width: calc(100% - 3rem);
  min-height: 26.625rem;                            /* 426 */
  margin: 0 auto;
  display: grid;
  grid-template-columns: 42.125rem minmax(0, 1fr);  /* 674 + 4 border -> copy @ 678 */
  border: 0.25rem solid var(--accent);
  border-radius: 0.75rem;
  background: #fcfdf8;
  overflow: hidden;
}
.geo-brand-head { padding: 2.75rem 0 0 2.75rem; }   /* 48 incl. border */
.geo-brand .geo-h {
  width: 32.875rem;                                 /* 526 */
  font-size: 3rem;
  line-height: 3.375rem;
  letter-spacing: -0.08rem;
  text-wrap: wrap;
}
.geo-brand .geo-h-em {
  background: linear-gradient(90deg, #111111 55%, #e2fa5a 130%);
  -webkit-background-clip: text;
  background-clip: text;
}
.geo-brand-tail {
  display: block;
  margin-top: 0.75rem;                              /* 156 -> 168 */
  font-style: normal;
  font-weight: 400;
  font-size: 2rem;
  line-height: 2.6875rem;
  color: var(--ink-70);
}
.geo-brand-img {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 43rem;                                     /* 688 */
  height: auto;
  max-width: none;
  pointer-events: none;
}
.geo-brand-copy {
  grid-column: 2;
  grid-row: 1;
  padding: 4rem 2.75rem 1.5rem 0;                   /* top 68 */
}
.geo-brand-lead {
  width: 29.25rem;                                  /* 468 */
  max-width: 100%;
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1.5rem;
  line-height: 2rem;
  letter-spacing: -0.01rem;
  color: var(--ink-70);
}
.geo-brand-note {
  box-sizing: border-box;
  width: 33.125rem;                                 /* 530 */
  max-width: 100%;
  margin-top: 3rem;                                 /* 260 -> 308 */
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border: 0.0625rem dashed rgba(17, 17, 17, 0.16);
  border-radius: 0.5rem;
  background: rgba(17, 17, 17, 0.08);
}
.geo-brand-note p {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.25rem;
  letter-spacing: -0.01rem;
  color: var(--ink);
}

/* 428 canvas: heading, copy, note, then the house underneath. */
@media (max-width: 767.98px) {
  .geo-brand-card { width: calc(100% - 2.5rem); max-width: none; min-height: 0; display: flex; flex-direction: column; }
  .geo-brand-head { padding: 1.75rem 1.25rem 0; }
  .geo-brand .geo-h { width: auto; font-size: 2.25rem; line-height: 2.625rem; }
  .geo-brand-tail { font-size: 1.5rem; line-height: 2rem; margin-top: 0.5rem; }
  .geo-brand-copy { padding: 1.25rem 1.25rem 0; }
  .geo-brand-lead { width: auto; font-size: 1.0625rem; line-height: 1.5rem; }
  /* icon vertically centred on the paragraph, as on desktop (was flex-start) */
  .geo-brand-note { width: auto; margin-top: 1.25rem; align-items: center; }
  .geo-brand-note p { font-size: 0.9375rem; }
  .geo-brand-img { position: static; order: 3; width: 100%; margin-top: 1.5rem; }
}

/* "UK Solar Information & Guidance": heading and intro centred. */
.geo-guidance .geo-h,
.geo-guidance .geo-lead { text-align: center; margin-left: auto; margin-right: auto; }

/* ==========================================================================
   FAQ — Figma "Frame 101" + "Frame 1707481635", 1920 canvas
     heading  521 wide, centred — Host Grotesk 600 italic 52/60, #111 -> lime
     sub      675 wide, centred, 24/32 70%, 24 below
     groups   2 x 618, 24 apart, 40 below — 12 padding, 10 gap, r12,
              #f5f6f0 -> #e2fa5a; rows are the existing white 72-tall rows
   ========================================================================== */
.geo-qna .qna-row { flex-direction: column; align-items: center; gap: 2.5rem; }
.geo-qna .qna-left { width: auto; align-items: center; text-align: center; }
.geo-qna .qna-h { width: 32.5625rem; max-width: 100%; }          /* 521 */
.geo-qna .qna-h-em { width: auto; }
.geo-qna .qna-sub { width: 42.1875rem; max-width: 100%; margin-top: 1.5rem; }  /* 675 */
.geo-qna .qna-card { display: none; }
.qna-faqs-cols {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;                                                   /* 24 */
  align-items: start;
}
@media (max-width: 767.98px) {
  .geo-qna .qna-h { width: auto; }
  .geo-qna .qna-sub { width: auto; }
  .qna-faqs-cols { grid-template-columns: minmax(0, 1fr); gap: 0.625rem; }
}

/* ==========================================================================
   Final CTA — Figma footer card ("Link - Solid Black" frame), 1920 canvas
     copy     688 x 72 centred, Instrument Sans 20/24 #111
     trust    one row, 24 gap, 32 below the copy
     CTAs     primary (232 x 60) + underlined advisor link, 20 apart,
              32 below the trust row
   ========================================================================== */
.ftr-card .ftr-sub { width: 43rem; line-height: 1.5rem; margin-top: 0.25rem; }  /* 688, 20/24, top 180 */
.geo-final-trust {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.5rem;
}
.geo-final-trust li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.5rem;
  color: var(--ink);
}
.geo-final-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  margin-top: 2rem;
}

/* "Do I Need a Battery…": the "Neither option…" line under the heading. */
.geo-battery .geo-battery-note { margin-top: 1rem; }

@media (max-width: 767.98px) {
  .ftr-card .ftr-sub { width: auto; padding: 0 1.25rem; }
  .geo-final-trust { flex-direction: column; align-items: center; margin-top: 1.5rem; }
  .geo-final-row { flex-direction: column; gap: 1rem; margin-top: 1.5rem; }
}

/* "Why Homeowners Choose…": centred title; each card carries the same
   panel + badge icon as the accreditation cards (73.6 x 48). */
.geo-why .geo-h { text-align: center; }
.geo-why-icon { display: block; width: 4.6rem; height: 3rem; margin-bottom: 1.25rem; }

/* "How Solar Panel Installation Works" step titles: the 60px line box (1.5x
   the 40px type) left wrapped titles visibly detached and pushed the
   three-line "Connection, Monitoring & Support" description under the sketch.
   1.15 keeps the lines connected; size, weight and card box are unchanged. */
.pvc-title { line-height: 2.875rem; }

/* The sketch keeps its absolute box (Figma 396x223, 32 off the card's bottom)
   whenever the copy fits above it. It now sits in the card's flow, so when a
   description runs past its top edge it gives up only the height it must and
   scales down inside its own box, rather than covering the last lines of text. */
.pvc-card { display: flex; flex-direction: column; }
.pvc-head,
.pvc-desc { flex: none; }
.pvc-desc { margin-bottom: 0.5rem; }
.pvc-sketchwrap {
  position: relative;
  top: auto;
  left: auto;
  flex: 0 1 13.9375rem;           /* 223 */
  min-height: 0;
  margin: auto 0 2rem -2.5rem;    /* card x 0, 32 above the bottom edge */
  container-type: size;
}
@media (min-width: 768px) {
  @container (max-height: 13.875rem) {
    .pvc-sketch { object-fit: contain; object-position: 50% 100%; }
  }
}
@media (max-width: 767.98px) {
  .pvc-sketchwrap {
    flex-basis: 12.1875rem;       /* 195 */
    margin-left: -1.3775rem;      /* card x 17.96 */
  }
  @container (max-height: 12.125rem) {
    .pvc-sketch { object-fit: contain; object-position: 50% 100%; }
  }
}

/* "Earn From Exports" followed the Why cards with no gap; give it the page's
   section rhythm (120 desktop, matching its own bottom padding; 40 on a phone,
   where the lime panel is full-bleed). */
.iexc { margin-top: 7.5rem; }
@media (max-width: 767.98px) {
  .iexc { margin-top: 2.5rem; }
}

/* "Complete Solar System": the reviews row's slot now holds a standard black
   button, bottom-anchored like the row was; hidden on a phone, as the row is. */
.psh-reviews-btn { margin-top: auto; align-self: flex-start; }
/* The hero's Trustpilot row sits above the button: the row takes the
   bottom-anchoring (its own `margin-top: auto`) and the button follows it at
   a fixed gap, so the pair stays together at the foot of the column. */
.psh-reviews + .psh-reviews-btn { margin-top: 1.5rem; }
@media (max-width: 767.98px) {
  .psh-reviews-btn { display: none; }
}

/* Battery: the note under the heading finishes on the same line as the
   paragraph beside it (two-column layout only; stacked, it keeps a 16 gap). */
.geo-battery .geo-split { align-items: stretch; }
.geo-battery .geo-split > :first-child { display: flex; flex-direction: column; gap: 1rem; }
.geo-battery .geo-split > :first-child .geo-battery-note { margin-top: auto; }
/* Phone only: the "Neither option…" note moves below the two option cards.
   The split and its columns flatten into the section's own column so the note
   can be ordered last; heading -> lead keeps the split's 20 gap, lead -> cards
   keeps its 32 (`.geo-split + .geo-cards`), and the note sits 20 under the
   cards. Same element and styling — only its position changes. */
@media (max-width: 767.98px) {
  .geo-battery .geo-wrap { display: flex; flex-direction: column; }
  .geo-battery .geo-split,
  .geo-battery .geo-split > :first-child,
  .geo-battery .geo-split > :last-child { display: contents; }
  .geo-battery .geo-split .geo-lead { margin-top: 1.25rem; }
  .geo-battery .geo-split > :first-child .geo-battery-note { order: 1; margin-top: 1.25rem; }
}

/* Battery cards: title and "Best suited to" share one row, at opposite ends. */
.geo-compare-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
}
.geo-compare-head .geo-kicker { margin: 0; }

/* "Earn From Exports" now precedes the Why section; its own 120 bottom padding
   is the section gap, so Why drops its 120 top padding there (desktop only —
   on a phone the full-bleed panel has none). */
@media (min-width: 768px) {
  .iexc + .why { padding-top: 0; }
}

@media (max-width: 767.98px) {
  /* the accredited card's lime glow, slightly lighter (was full alpha) */
  .excl-video { box-shadow: 0 0.25rem 3.75rem 0 rgba(226, 250, 90, 0.7); }
}

/* "How Solar Panel / Installation Works", phone only: room between it and the
   photo above (it sat flush against it), and the two runs set as one heading
   rather than two blocks — the 48px run's 64px line box and the 6px margin left
   a gap wider than either line's own spacing. Desktop is untouched. */
@media (max-width: 767.98px) {
  .pvsec .pv-head { margin-top: 2.5rem; }
  .pvsec .pv-h .pv { line-height: 3.25rem; }
  .pvsec .pv-h .rest { margin-top: 0; }
}