/* ==========================================================================
   Upgrader.ie — Site-wide styles
   Design tokens + shared header/footer + homepage sections.
   No framework/build step: plain, semantic, mobile-first CSS.
   ========================================================================== */

:root {
  /* Brand */
  --up-green: #168340; /* 4.8:1 with white text (was #188942, 4.47:1) */
  --up-green-dark: #126c34;
  --up-green-light: #e8f5ec;
  --up-charcoal: #1c2321;
  --up-charcoal-soft: #3a4340;
  --up-body: #4b5450;

  /* Warm accent tints — variety for cards further down the page */
  --up-amber: #b5871f;
  --up-amber-light: #faf3e2;
  --up-teal: #1b8aa8;
  --up-teal-light: #e6f2f5;
  --up-teal-dark: #167590; /* teal text on --up-teal-light, 4.6:1 */
  --up-clay: #a5522f;
  --up-clay-light: #f7e9e2;

  /* Neutrals */
  --up-white: #ffffff;
  --up-off-white: #f7f8f7;
  --up-mist: #f0f4f6;
  --up-border: #e3e7e4;
  --up-border-strong: #7d8682; /* form control borders, 3.7:1 on white */

  /* Type */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;

  /* Layout */
  --max-width: 1360px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-pad: 3rem;
  --section-pad-panel: 2.25rem;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 26px;
  --radius-xl: 32px;
  --shadow-sm: 0 1px 2px rgba(28, 35, 33, 0.06), 0 1px 1px rgba(28, 35, 33, 0.04);
  --shadow-md: 0 10px 28px rgba(28, 35, 33, 0.09);
  --shadow-lg: 0 24px 60px rgba(28, 35, 33, 0.18);

  --transition: 180ms ease;
}

/* --------------------------------------------------------------------- */
/* Reset                                                                  */
/* --------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--up-body);
  background: var(--up-white);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Links inside running text in the page content (paragraphs, list items,
   table cells) get the same look as .text-link and .article-prose links,
   so they can be told apart from the surrounding text by more than colour
   alone (WCAG 1.4.1). :where() keeps this at the specificity of a plain
   `a`, so any component that styles its own links (navigation, buttons,
   cards, footer, breadcrumbs) is unaffected, as is any link with a class. */
:where(main :is(p, li, td, dd, figcaption)) a:where(:not([class]):not(nav a)) {
  color: var(--up-green-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}

:where(main :is(p, li, td, dd, figcaption)) a:where(:not([class]):not(nav a)):hover {
  color: var(--up-green);
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1, h2, h3, h4 {
  color: var(--up-charcoal);
  line-height: 1.15;
  margin: 0 0 0.6em;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h1 {
  font-weight: 620;
}

p {
  margin: 0 0 1em;
}

button {
  font-family: inherit;
}

/* Keeps in-page anchor targets and keyboard focus clear of the sticky
   site header (WCAG 2.4.11). */
html {
  scroll-padding-top: 88px;
}

/* Focus states — visible everywhere, no exceptions */
a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--up-green);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: 1rem;
  background: var(--up-charcoal);
  color: var(--up-white);
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-sm);
  z-index: 1000;
  /* Pushed off-screen by a large multiple of its own height (rather than a
     fixed rem offset) so no sliver of it can ever peek into the viewport,
     regardless of its rendered height. */
  transform: translateY(-999%);
  transition: transform var(--transition);
}

.skip-link:focus {
  transform: translateY(0);
}

/* --------------------------------------------------------------------- */
/* Layout helpers                                                        */
/* --------------------------------------------------------------------- */

.wrap {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

section {
  padding-block: var(--section-pad);
}

@media (min-width: 640px) {
  :root {
    --section-pad: 3.75rem;
    --section-pad-panel: 2.75rem;
  }
}

@media (min-width: 1024px) {
  :root {
    --section-pad: 4.5rem;
    --section-pad-panel: 3.25rem;
  }
}

/* Large feature panels (grants band, final CTA) already carry their own
   background/shadow separation, so the section wrapping them needs less
   outer whitespace than a standard text section. */
section:has(> .wrap > .grants-band),
section:has(> .wrap > .final-cta),
section:has(> .wrap > .cta-panel) {
  padding-block: var(--section-pad-panel);
}

.section-head {
  max-width: 640px;
  margin-bottom: clamp(2.25rem, 4vw, 3.5rem);
}

.section-head.center {
  margin-inline: auto;
  text-align: center;
}

.section-head h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
}

.eyebrow {
  display: inline-block;
  color: var(--up-green-dark);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.85rem;
}

.eyebrow::before {
  content: "";
  display: inline-block;
  width: 1.4em;
  height: 2px;
  background: currentColor;
  margin-right: 0.6em;
  vertical-align: middle;
  opacity: 0.6;
}

.section-head p {
  font-size: 1.1rem;
}

.bg-soft {
  background: var(--up-off-white);
}

/* --------------------------------------------------------------------- */
/* Buttons                                                                */
/* --------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.95rem 1.85rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 1.02rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform var(--transition), background var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
  white-space: nowrap;
}

/* On the narrowest screens a long button label may wrap rather than push
   the page wider than the viewport (WCAG 1.4.10). Labels that fit on one
   line are unaffected. */
@media (max-width: 399px) {
  .btn {
    white-space: normal;
    text-align: center;
  }
}

.btn-primary {
  background: var(--up-green);
  color: var(--up-white);
  box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
  background: var(--up-green-dark);
  transform: translateY(-1px);
}

.btn-secondary {
  background: transparent;
  color: var(--up-charcoal);
  border-color: #949a97;
}

.btn-secondary:hover {
  border-color: var(--up-charcoal);
  transform: translateY(-1px);
}

.btn-on-dark {
  background: var(--up-white);
  color: var(--up-charcoal);
}

.btn-on-dark:hover {
  background: var(--up-green-light);
  transform: translateY(-1px);
}

.btn-outline-on-dark {
  background: transparent;
  color: var(--up-white);
  border-color: rgba(255, 255, 255, 0.5);
}

.btn-outline-on-dark:hover {
  border-color: var(--up-white);
  transform: translateY(-1px);
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  color: var(--up-green-dark);
}

.link-arrow svg {
  transition: transform var(--transition);
}

.link-arrow:hover svg {
  transform: translateX(3px);
}

/* --------------------------------------------------------------------- */
/* Header                                                                 */
/* --------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--up-border);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  padding-block: 0.85rem;
}

.logo {
  flex-shrink: 0;
}

.logo img {
  height: 40px;
  width: auto;
}

@media (min-width: 820px) {
  .logo img {
    height: 48px;
  }
}

@media (min-width: 1100px) {
  .site-header .wrap {
    gap: 1.5rem;
    padding-block: 0.4rem;
  }

  .logo img {
    height: 58px;
  }
}

.primary-nav {
  display: none;
}

.primary-nav ul {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.primary-nav a {
  display: inline-block;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--up-charcoal-soft);
  padding-block: 0.4rem;
  border-bottom: 2px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}

.primary-nav a:hover {
  color: var(--up-green-dark);
  border-color: var(--up-green);
}

/* Home Upgrades / Home Services dropdown — the label itself is a real link
   to the hub page, with a separate button opening the dropdown menu, so the
   hub pages stay reachable with one click alongside the category flyout. */
.nav-dropdown {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-dropdown-label {
  display: inline-block;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--up-charcoal-soft);
  padding-block: 0.4rem;
  border-bottom: 2px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}

.nav-dropdown-label:hover,
.nav-dropdown-label:focus-visible {
  color: var(--up-green-dark);
  border-color: var(--up-green);
}

.nav-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
  padding: 0.4rem 0.15rem 0.4rem 0.3rem;
  color: var(--up-charcoal-soft);
  background: none;
  border: none;
  cursor: pointer;
  transition: color var(--transition);
}

.nav-dropdown-toggle:hover,
.nav-dropdown-toggle:focus-visible {
  color: var(--up-green-dark);
}

.nav-dropdown-toggle svg {
  transition: transform var(--transition);
  flex-shrink: 0;
}

.nav-dropdown-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 0.6rem);
  left: 0;
  z-index: 60;
  min-width: 210px;
  background: var(--up-white);
  border: 1px solid var(--up-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 0.5rem;
}

/* Higher specificity than ".primary-nav ul" is needed here, since this
   menu is itself a <ul> nested inside that selector's match. */
.nav-dropdown > .nav-dropdown-menu {
  display: none;
}

.nav-dropdown.is-open > .nav-dropdown-menu {
  display: block;
}

.nav-dropdown-menu li a {
  display: block;
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.94rem;
  color: var(--up-charcoal-soft);
  border-bottom: none;
}

.nav-dropdown-menu li a:hover,
.nav-dropdown-menu li a:focus-visible {
  background: var(--up-green-light);
  color: var(--up-green-dark);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.header-actions .btn {
  padding: 0.65rem 1.3rem;
  font-size: 0.9rem;
}

.header-actions .btn-secondary {
  display: none;
}

@media (max-width: 399px) {
  .header-actions {
    gap: 0.5rem;
  }

  .header-actions .btn {
    padding: 0.6rem 0.85rem;
    font-size: 0.85rem;
  }
}

/* Below 360px the logo plus the Find Installers button and menu toggle no
   longer fit on one line at the standard gutter, causing page-wide
   horizontal overflow. Tighten only the header's own spacing at this
   narrow range; 360px and above are untouched. */
@media (max-width: 359px) {
  .site-header .wrap {
    padding-inline: 0.7rem;
    gap: 0.45rem;
  }

  .header-actions {
    gap: 0.3rem;
  }

  .header-actions .btn-primary {
    padding: 0.5rem 0.6rem;
    font-size: 0.7rem;
  }
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--up-border);
  border-radius: var(--radius-sm);
  background: var(--up-white);
  cursor: pointer;
}

.nav-toggle svg {
  width: 22px;
  height: 22px;
}

.mobile-nav {
  display: none;
  border-top: 1px solid var(--up-border);
  background: var(--up-white);
}

.mobile-nav.is-open {
  display: block;
}

.mobile-nav ul {
  padding: 0.5rem var(--gutter) 1.25rem;
  display: flex;
  flex-direction: column;
}

.mobile-nav a {
  display: block;
  padding: 0.75rem 0;
  font-weight: 600;
  color: var(--up-charcoal-soft);
  border-bottom: 1px solid var(--up-border);
}

.mobile-nav .mobile-cta {
  margin-top: 1rem;
  display: flex;
  gap: 0.75rem;
}

/* Home Upgrades / Home Services accordion inside the mobile menu. The label
   is a real link to the hub page; the chevron button expands the category
   list without leaving the current page. */
.mobile-nav-dropdown {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--up-border);
}

.mobile-nav-dropdown-label {
  flex: 1;
  padding: 0.75rem 0;
  font-weight: 600;
  color: var(--up-charcoal-soft);
  border-bottom: none;
}

.mobile-nav-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--up-charcoal-soft);
  background: none;
  border: none;
  cursor: pointer;
}

.mobile-nav-dropdown-toggle svg {
  transition: transform var(--transition);
  flex-shrink: 0;
  color: var(--up-charcoal-soft);
}

.mobile-nav-dropdown-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.mobile-nav-dropdown-menu {
  width: 100%;
  padding-bottom: 0.5rem;
}

/* Higher specificity than ".mobile-nav ul" is needed here, since this menu
   is itself a <ul> nested inside that selector's match. */
.mobile-nav-dropdown > .mobile-nav-dropdown-menu {
  display: none;
}

.mobile-nav-dropdown.is-open > .mobile-nav-dropdown-menu {
  display: block;
}

.mobile-nav-dropdown-menu li a {
  padding: 0.65rem 0 0.65rem 1rem;
  border-bottom: none;
  font-weight: 500;
  font-size: 0.95rem;
}

@media (min-width: 1100px) {
  .primary-nav {
    display: block;
  }

  .nav-toggle {
    display: none;
  }
}

@media (min-width: 1300px) {
  .header-actions .btn-secondary {
    display: inline-flex;
  }
}

/* --------------------------------------------------------------------- */
/* Hero                                                                   */
/* --------------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  /* The hero's own copy block and full-bleed photo already provide top/
     bottom breathing room, so the standard section padding would double
     up here. */
  padding-block: 0;
}

.hero .wrap {
  position: relative;
  z-index: 1;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(2.25rem, 5vw, 3rem);
}

.hero-copy h1 {
  font-size: clamp(2.5rem, 4.6vw, 4rem);
  max-width: 15ch;
  line-height: 1.06;
}

.hero-copy .lede {
  font-size: 1.2rem;
  max-width: 44ch;
  color: var(--up-body);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
}

/* Long hero CTA labels (e.g. Insulation's) can exceed very narrow
   viewports; let the button wrap its own text instead of overflowing. */
.hero-actions .btn {
  white-space: normal;
  min-width: 0;
}

.hero-trust {
  margin-top: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2rem;
}

.hero-trust-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--up-charcoal-soft);
}

.hero-trust-item svg {
  flex-shrink: 0;
  color: var(--up-green);
}

/* Photo: plain, full-width, stacked below the copy on small screens */
.hero-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
}

.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 78% 20%;
  display: block;
}

.hero-scrim {
  display: none;
}

@media (min-width: 860px) {
  .hero {
    display: flex;
    align-items: center;
    --hero-h: clamp(480px, 26vw, 500px);
    /* A floor, not a fixed size: hero-copy can carry a variable number of
       lines (breadcrumb, lede length, trust points) across pages, so the
       section must grow to fit its own content instead of clipping it. */
    min-height: var(--hero-h);
  }

  .hero .wrap {
    width: 100%;
  }

  .hero-copy {
    max-width: 600px;
    /* Deliberate breathing room above the first line and below the last
       hero-copy element (trust points, on most pages), independent of
       whether the hero is sitting at its --hero-h floor or has grown
       taller to fit longer copy. Without this, a hero whose content
       reaches exactly the floor's edge has its final line sitting flush
       against the section boundary. */
    padding-block: clamp(40px, 3vw, 48px);
  }

  .hero-copy h1 {
    font-size: clamp(2.1rem, 3vw, 2.75rem);
    margin-bottom: 0.4em;
  }

  .hero-copy .lede {
    font-size: 1.05rem;
    margin-bottom: 0;
  }

  .hero-actions {
    margin-top: 1.5rem;
  }

  .hero-trust {
    margin-top: 1.5rem;
  }

  /* Full-bleed photo layer behind the whole section. The image is shown at
     its own natural aspect ratio (no cover-crop, no transform/scale) and
     anchored to the right edge of the viewport, so it always reaches the
     right edge with zero gap regardless of viewport width, instead of a
     left-percentage offset (whose gap to the right edge grew with viewport
     width). The white fade is a separate overlay on top and never affects
     how the photo is cropped. */
  .hero-photo {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    z-index: 0;
    /* Lets the fade below read the hero's real height (cqh) to find the
       photo's left edge. */
    container-type: size;
  }

  .hero-photo img {
    position: absolute;
    top: 0;
    right: 0;
    left: auto;
    width: auto;
    max-width: none;
    height: 100%;
    object-fit: initial;
    object-position: initial;
  }

  /* One shared fade for every text-left / image-right hero: solid white
     to 35% of the hero's width, fading out by 58%. On very wide screens
     the photo's left edge (its width follows the hero height and
     --hero-photo-ratio) can sit right of 35%, so the fade then starts
     at that edge instead and keeps the same width, so the photo never
     shows a hard left edge. */
  .hero-scrim {
    --hero-photo-left: calc(100cqw - 100cqh * var(--hero-photo-ratio, 1672 / 941));
    display: block;
    position: absolute;
    inset: 0;
    background: linear-gradient(
      90deg,
      var(--up-white) 0,
      var(--up-white) max(35%, var(--hero-photo-left)),
      rgba(255, 255, 255, 0) max(58%, var(--hero-photo-left) + 23%)
    );
  }
}

@media (min-width: 1160px) {
  .hero-copy {
    max-width: 640px;
  }
}

/* Tablet landscape and smaller desktops (860px to 1279px): the photo is
   almost as wide as the viewport here, so the shared 35%-58% fade above
   ends before the hero copy does and the text and outline buttons sit on
   the photograph. Across this range only, the white fade instead stays
   solid white until just past the copy's
   right edge (--hero-fade-start, set per page below to match each page's
   copy width) and then fading out over the photo. The photo, its crop,
   the hero height and the 1280px+ desktop composition are unchanged. */
@media (min-width: 860px) and (max-width: 1279.98px) {
  .hero {
    --hero-fade-start: 590px;
  }

  .hero .hero-photo .hero-scrim {
    left: 0;
    right: 0;
    width: auto;
    aspect-ratio: auto;
    background: linear-gradient(
      90deg,
      var(--up-white) 0,
      var(--up-white) var(--hero-fade-start),
      rgba(255, 255, 255, 0.88) calc(var(--hero-fade-start) + 60px),
      rgba(255, 255, 255, 0.5) calc(var(--hero-fade-start) + 150px),
      rgba(255, 255, 255, 0) calc(var(--hero-fade-start) + 260px)
    );
  }

  .page-home-upgrades .hero,
  .page-home-services .hero {
    --hero-fade-start: 710px;
  }

  .page-home-insurance .hero {
    --hero-fade-start: 600px;
  }

  .page-solar-pv .hero {
    --hero-fade-start: 520px;
  }

  .page-heat-pumps .hero,
  .page-insulation .hero,
  .page-windows-doors .hero {
    --hero-fade-start: 510px;
  }

  .page-find-installers .hero {
    --hero-fade-start: 480px;
  }
}

/* --------------------------------------------------------------------- */
/* Category cards                                                        */
/* --------------------------------------------------------------------- */

.category-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(2, 1fr);
}

.category-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--up-white);
  box-shadow: var(--shadow-md);
  transition: box-shadow var(--transition), transform var(--transition);
  display: flex;
  flex-direction: column;
}

.category-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.category-media {
  min-height: 108px;
  position: relative;
  color: var(--up-white);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0.85rem 1.1rem 0.8rem;
}

.category-media::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 16, 12, 0.55) 0%, rgba(10, 16, 12, 0.05) 70%);
}

.category-icon {
  display: inline-flex;
  position: relative;
  z-index: 1;
  width: 30px;
  height: 30px;
  opacity: 0.9;
  flex-shrink: 0;
}

.category-icon svg {
  width: 100%;
  height: 100%;
}

.category-overlay {
  position: relative;
  z-index: 1;
}

.category-overlay .category-tag {
  display: block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: 0.25rem;
}

.category-overlay h3 {
  color: var(--up-white);
  font-size: 1.15rem;
  margin-bottom: 0;
}

.category-media--solar {
  background: linear-gradient(155deg, #a46900 0%, #8b5800 55%, #704700 100%);
}

.category-media--heatpump {
  background: linear-gradient(155deg, #137b9b 0%, #0f6c8c 55%, #0b5875 100%);
}

.category-media--insulation {
  background: linear-gradient(155deg, #a13d4f 0%, #853041 55%, #6e2635 100%);
}

.category-media--windows {
  background: linear-gradient(155deg, #2b3a55 0%, #435d84 55%, #6c85ac 100%);
}

.category-media--service-electricity {
  background: linear-gradient(155deg, #c2410c 0%, #ac3a0f 55%, #9a3412 100%);
}

.category-media--service-broadband {
  background: linear-gradient(155deg, #1d4ed8 0%, #1e43ad 55%, #1e3a8a 100%);
}

.category-media--service-waste {
  background: linear-gradient(155deg, #2e6b48 0%, #215b3c 55%, #174d32 100%);
}

.category-media--service-insurance {
  background: linear-gradient(155deg, #3d3166 0%, #5b4a94 55%, #8172bd 100%);
}

.category-body {
  padding: 1rem 1.1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  flex: 1;
}

.category-body p {
  font-size: 0.9rem;
  flex: 1;
}

@media (max-width: 640px) {
  .category-grid {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 1024px) {
  .category-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
  }

  .category-overlay h3 {
    font-size: 1.05rem;
  }
}

/* --------------------------------------------------------------------- */
/* Benefits                                                               */
/* --------------------------------------------------------------------- */

.benefit-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.benefit-card {
  padding: 1.5rem 1.75rem;
  background: var(--up-white);
  border: 1px solid var(--up-border);
  border-top: 3px solid var(--up-green);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), transform var(--transition);
}

.benefit-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.benefit-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--up-green);
  margin-bottom: 0.5rem;
}

.benefit-card h3 {
  font-size: 1.15rem;
}

.benefit-card p {
  font-size: 0.96rem;
  margin-bottom: 0;
}

/* --------------------------------------------------------------------- */
/* Latest data                                                           */
/* Editorial, research-led snapshot: three Home Upgrade stat cards carry */
/* the visual weight; Broadband shares the same card treatment as the   */
/* three Home Upgrade cards, distinguished only by its own accent colour */
/* and its Home Services tag.                                           */
/* --------------------------------------------------------------------- */

.data-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}

.data-card {
  position: relative;
  overflow: hidden;
  padding: 1.85rem 1.6rem 1.6rem;
  background: var(--up-white);
  border: 1px solid var(--up-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--transition), transform var(--transition);
}

.data-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--accent, var(--up-green));
}

.data-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.data-card--solar {
  --accent: var(--up-green);
}

.data-card--heatpump {
  --accent: var(--up-teal);
}

.data-card--efficiency {
  --accent: var(--up-clay);
}

.data-card--broadband {
  --accent: var(--up-charcoal-soft);
}

.data-card-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent, var(--up-green-dark));
  margin-bottom: 1rem;
}

.data-stat {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.1rem, 4.5vw, 2.6rem);
  line-height: 1;
  color: var(--up-charcoal);
  margin-bottom: 0.5rem;
}

.data-card h3 {
  font-size: 1.08rem;
  margin-bottom: 0.55rem;
}

.data-detail {
  font-size: 0.92rem;
  color: var(--up-body);
  margin-bottom: 1.1rem;
  flex: 1;
}

.data-source {
  font-size: 0.78rem;
  color: var(--up-charcoal-soft);
  margin-bottom: 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--up-border);
}

.data-takeaway {
  margin-top: 2.5rem;
  max-width: 860px;
  margin-inline: auto;
}

.data-takeaway-label {
  display: block;
  font-weight: 700;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--up-green-dark);
  margin-bottom: 0.65rem;
}

.data-takeaway p {
  font-size: 1.04rem;
  color: var(--up-charcoal-soft);
  margin-bottom: 0;
}

.data-freshness {
  margin-top: 1.5rem;
  max-width: 860px;
  margin-inline: auto;
  font-size: 0.82rem;
  color: var(--up-charcoal-soft);
  opacity: 0.85;
  margin-bottom: 0;
}

@media (min-width: 640px) {
  .data-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .data-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* --------------------------------------------------------------------- */
/* Grants band                                                           */
/* --------------------------------------------------------------------- */

.grants-band {
  position: relative;
  overflow: hidden;
  background: radial-gradient(120% 160% at 100% 0%, #1f6b3c 0%, var(--up-charcoal) 55%);
  color: rgba(255, 255, 255, 0.85);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

.grants-band-icon {
  position: absolute;
  right: clamp(-3rem, -1vw, 1rem);
  top: 50%;
  transform: translateY(-50%);
  width: clamp(180px, 20vw, 280px);
  height: clamp(180px, 20vw, 280px);
  opacity: 0.14;
  color: var(--up-white);
  pointer-events: none;
}

.grants-band-icon svg {
  width: 100%;
  height: 100%;
}

.grants-band .wrap {
  position: relative;
  max-width: none;
  padding: clamp(2.75rem, 6vw, 4.5rem);
  display: grid;
  gap: 2rem;
  align-items: center;
}

.grants-band h2,
.grants-band .eyebrow {
  color: var(--up-white);
}

.grants-band .eyebrow {
  color: #9fe0b8;
}

.grants-band h2 {
  font-size: clamp(1.9rem, 3.2vw, 2.4rem);
}

.grants-band p {
  color: rgba(255, 255, 255, 0.78);
  font-size: 1.08rem;
  max-width: 56ch;
}

.grants-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}

@media (min-width: 860px) {
  .grants-band .wrap {
    grid-template-columns: 1.4fr auto;
  }
}

/* --------------------------------------------------------------------- */
/* How it works                                                          */
/* --------------------------------------------------------------------- */

.steps-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  counter-reset: step;
}

.step-card {
  position: relative;
  padding: 2rem 1.75rem 1.75rem;
  background: var(--up-mist);
  border: 1px solid var(--up-border);
  border-radius: var(--radius-lg);
}

.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--up-green);
  color: var(--up-white);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.2rem;
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow-sm);
}

.step-card h3 {
  font-size: 1.12rem;
}

.step-card p {
  font-size: 0.96rem;
  margin-bottom: 0;
}

@media (min-width: 1024px) {
  .steps-grid {
    grid-template-columns: repeat(12, 1fr);
  }

  .steps-grid .step-card {
    grid-column: span 3;
  }

  .steps-grid .step-card:nth-child(n + 5) {
    grid-column: span 4;
  }
}

/* Solar PV page only: the same deliberate 4-then-3 row pattern used at    */
/* desktop, extended down to tablet so the seven installation steps never  */
/* leave a single orphaned card on its own row at this width.              */
@media (min-width: 768px) and (max-width: 1023px) {
  .page-solar-pv .steps-grid {
    grid-template-columns: repeat(12, 1fr);
  }

  .page-solar-pv .steps-grid .step-card {
    grid-column: span 3;
  }

  .page-solar-pv .steps-grid .step-card:nth-child(n + 5) {
    grid-column: span 4;
  }
}

/* Home Services "How switching works" only: 4 steps, so the base auto-fit
   columns above fit 3 per row at tablet widths and leave the 4th step
   orphaned on its own row. A balanced 2x2 avoids that without affecting
   the 4-per-row layout this already gets at desktop. */
@media (min-width: 640px) and (max-width: 1023px) {
  #how-switching-works .steps-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --------------------------------------------------------------------- */
/* Home Upgrade journey                                                   */
/* Shared "how it works" journey section used near the top of the Solar  */
/* PV, Heat Pumps, Insulation and Windows & Doors pages. The eyebrow's    */
/* usual dash marker is suppressed here, per the approved design.        */
/* --------------------------------------------------------------------- */

.journey-section .eyebrow::before {
  content: none;
}

.journey-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}

.journey-card {
  padding: 2rem 1.75rem 1.75rem;
  background: var(--up-mist);
  border: 1px solid var(--up-border);
  border-radius: var(--radius-lg);
}

.journey-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--up-green);
  color: var(--up-white);
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow-sm);
}

.journey-icon svg {
  width: 22px;
  height: 22px;
}

.journey-card h3 {
  font-size: 1.12rem;
}

.journey-card p {
  font-size: 0.96rem;
  margin-bottom: 0;
}

.journey-note {
  margin-top: 2rem;
}

@media (min-width: 640px) and (max-width: 1023px) {
  .journey-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .journey-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* The "What this guide covers" intro band directly beneath the journey
   section reuses the existing panel padding token so it reads as a
   concise introduction rather than a full section. */
.journey-section + section.bg-soft {
  padding-block: var(--section-pad-panel);
}

.feature-photo {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  aspect-ratio: 21 / 9;
  margin: 2rem 0 2.75rem;
}

.feature-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --------------------------------------------------------------------- */
/* Guides                                                                 */
/* --------------------------------------------------------------------- */

.guides-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(2, 1fr);
}

.guide-card {
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--up-white);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), transform var(--transition);
  display: flex;
  flex-direction: column;
}

.guide-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.guide-media {
  aspect-ratio: 21 / 8;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--up-white);
}

.guide-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 16, 12, 0.5) 0%, rgba(10, 16, 12, 0) 45%);
}

.guide-media svg {
  width: 26px;
  height: 26px;
  opacity: 0.9;
}

.guide-tag {
  position: absolute;
  top: 0.7rem;
  left: 0.7rem;
  z-index: 1;
  background: rgba(255, 255, 255, 0.95);
  color: var(--up-charcoal-soft);
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.28rem 0.6rem;
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
}

.guide-body {
  padding: 1rem 1.1rem 1.25rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.guide-body h3 {
  font-size: 1rem;
  margin-bottom: 0.4rem;
}

.guide-body p {
  font-size: 0.85rem;
  margin-bottom: 0.75rem;
  flex: 1;
}

@media (max-width: 640px) {
  .guides-grid {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 1024px) {
  .guides-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* --------------------------------------------------------------------- */
/* Household services                                                    */
/* Distinct from the photo-led Home Upgrade cards on purpose — these are */
/* a separate, lighter-weight product tier. Built with headroom for a    */
/* future secondary action (e.g. "Compare options") without a redesign.  */
/* --------------------------------------------------------------------- */

.service-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 640px) {
  .service-grid {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 1024px) {
  .service-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* --------------------------------------------------------------------- */
/* Find installers                                                       */
/* --------------------------------------------------------------------- */

.installers {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}

.installers-media {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.installers-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 42%;
  display: block;
}

.installers-list {
  display: grid;
  gap: 0.9rem;
  margin: 1.5rem 0 2rem;
}

.installers-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.96rem;
  color: var(--up-charcoal-soft);
}

.installers-list svg {
  color: var(--up-green);
  flex-shrink: 0;
  margin-top: 0.15rem;
}

.disclosure-note {
  font-size: 0.85rem;
  color: var(--up-charcoal-soft);
  background: var(--up-off-white);
  border: 1px solid var(--up-border);
  border-radius: var(--radius-sm);
  padding: 0.9rem 1.1rem;
  margin-top: 1.5rem;
}

@media (min-width: 900px) {
  .installers {
    grid-template-columns: 1fr 1fr;
  }

  .installers.reverse .installers-media {
    order: 2;
  }
}

/* --------------------------------------------------------------------- */
/* Placeholder tiles (used where real photography has not been supplied) */
/* --------------------------------------------------------------------- */

.placeholder-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--up-white);
}

.placeholder-tile svg {
  width: 48px;
  height: 48px;
  opacity: 0.9;
}

/* --------------------------------------------------------------------- */
/* Final CTA                                                             */
/* --------------------------------------------------------------------- */

.final-cta {
  background: linear-gradient(155deg, var(--up-green) 0%, var(--up-green-dark) 100%);
  color: var(--up-white);
  border-radius: var(--radius-xl);
  text-align: center;
  box-shadow: var(--shadow-lg);
}

.final-cta .wrap {
  max-width: 720px;
  padding-block: clamp(3rem, 6vw, 4.5rem);
}

.final-cta h2 {
  color: var(--up-white);
  font-size: clamp(1.8rem, 3.6vw, 2.4rem);
}

.final-cta p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.05rem;
  max-width: 50ch;
  margin-inline: auto;
}

.final-cta .hero-actions {
  justify-content: center;
}

/* --------------------------------------------------------------------- */
/* Closing CTA panel (image-free)                                        */
/* Reusable centred "Find Installers" panel for the close of a guide.    */
/* No photography: keeps every guide's editorial images to a single use. */
/* --------------------------------------------------------------------- */

.cta-panel {
  max-width: 800px;
  margin-inline: auto;
  padding: clamp(2.25rem, 5vw, 3.5rem) clamp(1.5rem, 5vw, 3.25rem);
  background: var(--up-green-light);
  border-radius: var(--radius-xl);
  text-align: center;
}

.cta-panel > .eyebrow {
  margin-bottom: 0.6rem;
}

.cta-panel > p:not(.disclosure-note) {
  font-size: 1.08rem;
  max-width: 56ch;
  margin-inline: auto;
}

.cta-panel-benefits {
  display: grid;
  gap: 0.9rem;
  margin: 2rem 0;
  text-align: left;
}

.cta-panel-benefit {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 1.1rem 1.25rem;
  background: var(--up-white);
  border: 1px solid var(--up-border);
  border-radius: var(--radius-md);
}

.cta-panel-benefit svg {
  color: var(--up-green);
  flex-shrink: 0;
  margin-top: 0.15rem;
}

.cta-panel-benefit p {
  margin: 0;
  font-size: 0.94rem;
  color: var(--up-charcoal-soft);
}

.cta-panel .disclosure-note {
  background: none;
  border: 0;
  padding: 0;
  text-align: center;
  font-size: 0.82rem;
  max-width: 52ch;
  margin-inline: auto;
  margin-top: 1.75rem;
}

@media (min-width: 700px) {
  .cta-panel-benefits {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --------------------------------------------------------------------- */
/* Footer                                                                 */
/* --------------------------------------------------------------------- */

.site-footer {
  background: var(--up-charcoal);
  color: rgba(255, 255, 255, 0.75);
}

.footer-top {
  padding-block: clamp(3.5rem, 6vw, 5rem) 2.75rem;
  display: grid;
  gap: 2.75rem;
}

.footer-brand .logo img {
  width: 120px;
  height: auto;
}

@media (min-width: 820px) {
  .footer-brand .logo img {
    width: 155px;
  }
}

.footer-brand p {
  margin-top: 1rem;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.6);
  max-width: 34ch;
}

.footer-cols {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.footer-col h3 {
  color: var(--up-white);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 1rem;
}

.footer-col ul {
  display: grid;
  gap: 0.65rem;
}

.footer-col a {
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.68);
  transition: color var(--transition);
}

.footer-col a:hover {
  color: var(--up-white);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-block: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.55);
}

.footer-bottom-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
}

@media (min-width: 820px) {
  .footer-top {
    grid-template-columns: 1.1fr 2fr;
  }
}

/* --------------------------------------------------------------------- */
/* Utility                                                                */
/* --------------------------------------------------------------------- */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Solar PV hub page
   ========================================================================== */

/* --------------------------------------------------------------------- */
/* Breadcrumb                                                             */
/* --------------------------------------------------------------------- */

.breadcrumb-nav {
  font-size: 0.85rem;
  color: var(--up-charcoal-soft);
  padding-block: 1rem;
}

.breadcrumb-nav a {
  color: var(--up-green-dark);
  font-weight: 600;
}

.breadcrumb-nav a:hover {
  text-decoration: underline;
}

.breadcrumb-nav .crumb-sep {
  margin: 0 0.45rem;
  opacity: 0.5;
}

.breadcrumb-nav .crumb-current {
  color: var(--up-charcoal-soft);
}

/* --------------------------------------------------------------------- */
/* Page hero (photo sourced at a different aspect ratio to the homepage   */
/* hero. The box is sized using the same ratio as the homepage photo so   */
/* the white-to-photo fade begins at the same horizontal position on      */
/* both pages; the image is cover-cropped to fill that box cleanly since  */
/* its own natural ratio does not match it.)                              */
/* --------------------------------------------------------------------- */

.hero--page .hero-photo img {
  object-position: 78% 30%;
}

@media (min-width: 860px) {
  .hero--page .hero-photo img {
    /* Forces the same 1672/941 framing ratio these photos are cropped
       to, independent of each source image's own natural dimensions,
       and scales with the real (possibly grown) hero height rather
       than a value fixed to the height floor. */
    width: auto;
    aspect-ratio: 1672 / 941;
    object-fit: cover;
  }
}

/* --------------------------------------------------------------------- */
/* Design system tokens — standard widths and heading scale reused        */
/* across every editorial section below the hero.                        */
/* --------------------------------------------------------------------- */

.page-solar-pv {
  --solar-editorial-width: 45rem; /* ~720px: standard editorial text width */
  --solar-h2-size: clamp(1.75rem, 2.4vw, 2rem); /* one H2 scale for every major heading */
}

/* --------------------------------------------------------------------- */
/* Intro                                                                  */
/* --------------------------------------------------------------------- */

/* The editorial column itself is centred within the (much wider) .wrap,   */
/* while every element inside it (eyebrow, H2, paragraphs, lists,          */
/* callouts) stays left aligned, sharing one consistent left edge.         */
.page-intro {
  max-width: var(--solar-editorial-width);
  margin-inline: auto;
  text-align: left;
}

.page-intro > p:not(.disclosure-note) {
  font-size: 1.08rem;
}

.page-solar-pv .section-head {
  max-width: var(--solar-editorial-width);
  margin-inline: auto;
  text-align: left;
}

.page-solar-pv .section-head--tool {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.page-solar-pv .section-head h2,
.page-intro h2,
.content-panel-copy h2 {
  font-size: var(--solar-h2-size);
}

/* --------------------------------------------------------------------- */
/* Content panel (media + copy, alternating sides)                       */
/* --------------------------------------------------------------------- */

.content-panel {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}

/* Every ordinary feature photograph on the page (Suitability, Generation,
   Batteries) renders at this same ratio, regardless of its native
   dimensions, so the photos read as one consistent system. */
.content-panel-media {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.content-panel-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.content-panel-copy > p:not(.disclosure-note) {
  font-size: 1.08rem;
}

.factor-list {
  display: grid;
  gap: 0.85rem;
  margin: 1.25rem 0 0;
}

.factor-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.97rem;
  color: var(--up-charcoal-soft);
}

.factor-list svg {
  color: var(--up-green);
  flex-shrink: 0;
  margin-top: 0.15rem;
}

/* .factor-list carries no bottom margin (it often ends a column or card),
   so whatever text follows it in the same flow needs its own top spacing,
   or the next paragraph / contextual link line starts flush under the
   last tick. A subheading gets the larger gap it would get after prose. */
.factor-list + p {
  margin-top: 1.5rem;
}

.factor-list + h3 {
  margin-top: 2rem;
}

@media (min-width: 900px) {
  .content-panel {
    grid-template-columns: 1fr 1fr;
  }

  .content-panel.reverse .content-panel-media {
    order: 2;
  }
}

/* --------------------------------------------------------------------- */
/* Callouts                                                               */
/* --------------------------------------------------------------------- */

.callout {
  max-width: var(--solar-editorial-width, none);
  margin-top: 2rem;
  border-radius: var(--radius-md);
  padding: 1.35rem 1.5rem;
  font-size: 0.96rem;
  border: 1px solid var(--up-border);
}

.callout p:last-child {
  margin-bottom: 0;
}

.callout-label {
  display: block;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.callout--info {
  background: var(--up-teal-light);
  border-color: rgba(27, 138, 168, 0.25);
}

.callout--info .callout-label {
  color: var(--up-teal-dark);
}

.callout--caution {
  background: var(--up-amber-light);
  border-color: rgba(181, 135, 31, 0.3);
}

.callout--caution .callout-label {
  color: var(--up-amber);
}

.callout + .callout {
  margin-top: 1rem;
}

/* Prose immediately following a callout needs the same breathing room the
   callout itself gets above it, so it doesn't start flush against the
   box's bottom edge. Scoped to text-flow siblings only (not headings,
   grids or other structured components, which already carry their own
   top spacing) so this doesn't double up elsewhere. A section-wide
   callout is often followed by a .page-intro column holding the
   contextual link paragraph, which needs the same gap. */
.callout + p,
.callout + ul,
.callout + ol,
.callout + .page-intro {
  margin-top: 2rem;
}

/* A callout that belongs to a whole section (media + copy row, or a two   */
/* column checklist) rather than to one text column: centred under the    */
/* full row instead of hugging the left edge of a text column.            */
.callout--section {
  margin-inline: auto;
}

/* A pair (or more) of callouts presented as a balanced card row rather
   than stacked full width callouts. Used for the sources cards and the
   heat pump cost cards. */
.callout-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: start;
  margin-top: 2rem;
}

.callout-grid .callout {
  max-width: none;
  margin-top: 0;
}

.callout-grid .callout h3,
.callout-grid .callout h4 {
  font-size: 1rem;
  margin-bottom: 0.85rem;
  color: var(--up-charcoal);
}

/* A card row needs the same 32px breathing room below it that a callout
   itself gets above it, whatever comes next (a subheading here, on the
   cost cards; a dated callout on the sources cards already gets this
   from its own top margin as an ordinary .callout). */
.page-heat-pumps .callout-grid + .page-intro,
.page-insulation .callout-grid + .page-intro,
.page-windows-doors .callout-grid + .page-intro {
  margin-top: 2rem;
}

/* Insulation cost cards: an explicit 3+2 / 2+1 / 1-per-row layout so the
   odd card out centres at the same width as the rest, instead of the
   auto-fit default stretching it full width. Equal card height per row
   comes from align-items: stretch, overriding the callout-grid default. */
.callout-grid.insulation-cost-grid {
  grid-template-columns: 1fr;
  align-items: stretch;
}

@media (min-width: 820px) {
  .callout-grid.insulation-cost-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .callout-grid.insulation-cost-grid .callout:nth-child(1) { grid-column: 1 / 3; }
  .callout-grid.insulation-cost-grid .callout:nth-child(2) { grid-column: 3 / 5; }
  .callout-grid.insulation-cost-grid .callout:nth-child(3) { grid-column: 1 / 3; }
  .callout-grid.insulation-cost-grid .callout:nth-child(4) { grid-column: 3 / 5; }
  .callout-grid.insulation-cost-grid .callout:nth-child(5) { grid-column: 2 / 4; }
}

@media (min-width: 1024px) {
  .callout-grid.insulation-cost-grid {
    grid-template-columns: repeat(6, 1fr);
  }

  .callout-grid.insulation-cost-grid .callout:nth-child(1) { grid-column: 1 / 3; }
  .callout-grid.insulation-cost-grid .callout:nth-child(2) { grid-column: 3 / 5; }
  .callout-grid.insulation-cost-grid .callout:nth-child(3) { grid-column: 5 / 7; }
  .callout-grid.insulation-cost-grid .callout:nth-child(4) { grid-column: 2 / 4; }
  .callout-grid.insulation-cost-grid .callout:nth-child(5) { grid-column: 4 / 6; }
}

/* Attic and cavity wall grant cards: a simple, always-balanced 2-up row,
   equal height, full width on mobile. */
.callout-grid.attic-cavity-grant-grid {
  grid-template-columns: 1fr;
  align-items: stretch;
}

@media (min-width: 820px) {
  .callout-grid.attic-cavity-grant-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Internal, external and floor insulation grant cards: 3-up on desktop,
   2+1 with the third centred at the same width on tablet, 1-per-row on
   mobile. Same technique as the insulation-cost-grid above. */
.callout-grid.wall-floor-grant-grid {
  grid-template-columns: 1fr;
  align-items: stretch;
}

@media (min-width: 820px) {
  .callout-grid.wall-floor-grant-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .callout-grid.wall-floor-grant-grid .callout:nth-child(1) { grid-column: 1 / 3; }
  .callout-grid.wall-floor-grant-grid .callout:nth-child(2) { grid-column: 3 / 5; }
  .callout-grid.wall-floor-grant-grid .callout:nth-child(3) { grid-column: 2 / 4; }
}

@media (min-width: 1024px) {
  .callout-grid.wall-floor-grant-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .callout-grid.wall-floor-grant-grid .callout:nth-child(1),
  .callout-grid.wall-floor-grant-grid .callout:nth-child(2),
  .callout-grid.wall-floor-grant-grid .callout:nth-child(3) {
    grid-column: auto;
  }
}

/* --------------------------------------------------------------------- */
/* Component list (what a system includes)                               */
/* --------------------------------------------------------------------- */

.component-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-top: 2rem;
}

.component-card {
  padding: 1.5rem;
  background: var(--up-mist);
  border: 1px solid var(--up-border);
  border-radius: var(--radius-lg);
}

.component-card .category-icon {
  margin-bottom: 1rem;
}

.component-card h3 {
  font-size: 1.12rem;
}

.component-card p {
  font-size: 0.94rem;
  margin-bottom: 0;
}

/* Desktop: 3 cards on the first row, 2 cards centred on the second row,   */
/* rather than an arbitrary auto-fit count based on viewport width.        */
@media (min-width: 1024px) {
  .component-grid {
    grid-template-columns: repeat(6, 1fr);
  }

  .component-card:nth-child(1) {
    grid-column: 1 / 3;
  }

  .component-card:nth-child(2) {
    grid-column: 3 / 5;
  }

  .component-card:nth-child(3) {
    grid-column: 5 / 7;
  }

  .component-card:nth-child(4) {
    grid-column: 2 / 4;
  }

  .component-card:nth-child(5) {
    grid-column: 4 / 6;
  }
}

/* The base desktop layout above is tuned for exactly 5 cards (Solar PV's
   "what's included" list). The Home Upgrades and Home Services hubs reuse
   the same card, but with 6 and 4 cards respectively, so each gets its own
   even, orphan-free column count instead of inheriting the 5-card spans. */
@media (min-width: 1024px) {
  #explore-by-goal .component-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  #explore-by-goal .component-card {
    grid-column: auto;
  }
}

@media (min-width: 640px) {
  #choose-your-journey .component-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  #choose-your-journey .component-card {
    grid-column: auto;
  }
}

/* --------------------------------------------------------------------- */
/* Quotation checklist                                                    */
/* --------------------------------------------------------------------- */

.checklist-grid {
  display: grid;
  gap: 0.6rem 2rem;
  margin-top: 2rem;
  grid-template-columns: 1fr;
}

.checklist-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--up-border);
}

.checklist-item svg {
  color: var(--up-green);
  flex-shrink: 0;
  margin-top: 0.2rem;
}

.checklist-item strong {
  color: var(--up-charcoal);
  display: block;
  font-size: 0.98rem;
}

.checklist-item span {
  font-size: 0.9rem;
  color: var(--up-charcoal-soft);
}

@media (min-width: 900px) {
  .checklist-grid {
    grid-template-columns: 1fr 1fr;
    column-gap: 3rem;
  }
}

/* --------------------------------------------------------------------- */
/* Solar Payback Explorer                                                 */
/* --------------------------------------------------------------------- */

.calculator {
  background: var(--up-mist);
  border: 1px solid var(--up-border);
  border-radius: var(--radius-xl);
  padding: clamp(1.5rem, 4vw, 2.75rem);
  margin-top: 2rem;
  display: grid;
  gap: 2.25rem;
}

.calc-form {
  display: grid;
  gap: 1.25rem;
}

.calc-field label {
  display: block;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--up-charcoal);
  margin-bottom: 0.4rem;
}

.calc-field .calc-hint {
  display: block;
  font-weight: 400;
  font-size: 0.82rem;
  color: var(--up-charcoal-soft);
  margin-top: 0.35rem;
}

.calc-field input {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--up-border-strong);
  border-radius: var(--radius-sm);
  background: var(--up-white);
  color: var(--up-charcoal);
}

.calc-field input:focus-visible {
  outline: 3px solid var(--up-green);
  outline-offset: 1px;
}

.calc-results {
  background: var(--up-white);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
}

.calc-result-stat {
  margin-bottom: 1.5rem;
}

.calc-result-stat:last-of-type {
  margin-bottom: 0;
}

.calc-result-label {
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--up-green-dark);
}

.calc-result-value {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4vw, 2.4rem);
  color: var(--up-charcoal);
  font-weight: 600;
  margin-top: 0.25rem;
}

.calc-result-note {
  font-size: 0.85rem;
  color: var(--up-charcoal-soft);
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--up-border);
}

.calc-methodology {
  font-size: 0.9rem;
  color: var(--up-charcoal-soft);
  margin-top: 1.5rem;
}

.calc-methodology summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--up-charcoal);
}

.calc-methodology[open] {
  border: 2px solid var(--up-green);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
}

.calc-methodology[open] summary {
  margin-bottom: 0.75rem;
}

.calc-methodology[open] p:last-child {
  margin-bottom: 0;
}

.calc-field select {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--up-border-strong);
  border-radius: var(--radius-sm);
  background: var(--up-white);
  color: var(--up-charcoal);
  cursor: pointer;
}

.calc-field select:focus-visible {
  outline: 3px solid var(--up-green);
  outline-offset: 1px;
}

.calc-field--checkbox label {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-weight: 600;
}

.calc-field--checkbox label span {
  min-width: 0;
}

.calc-field--checkbox input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  flex-shrink: 0;
  margin-top: 0.15rem;
  accent-color: var(--up-green);
}

.calc-field--checkbox input[type="checkbox"]:focus-visible {
  outline: 3px solid var(--up-green);
  outline-offset: 2px;
}

.calc-error {
  color: var(--up-clay, #a5522f);
  font-size: 0.85rem;
  font-weight: 600;
  margin-top: 0.4rem;
}

.calc-field input[aria-invalid="true"],
.calc-field select[aria-invalid="true"] {
  border-color: var(--up-clay, #a5522f);
}

.calc-actual-quote {
  border-top: 1px solid var(--up-border);
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  display: grid;
  gap: 1rem;
}

.calc-warning {
  margin-top: 1.5rem;
}

.calc-source-group-label {
  font-weight: 700;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 1.5rem;
  margin-bottom: 0;
  color: var(--up-charcoal);
}

.calc-source-group-label + .factor-list {
  margin-top: 0.75rem;
}

#calc-assumptions .factor-list + p {
  margin-top: 1.5rem;
}

.calc-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.75rem;
}

.calc-step-continue {
  margin-top: 1.75rem;
  white-space: normal;
  max-width: 100%;
  text-align: center;
}

/* --------------------------------------------------------------------- */
/* Calculator step accordion (Solar Cost and Payback Calculator)         */
/* Reuses the .faq-item chevron pattern at a larger, numbered scale.     */
/* --------------------------------------------------------------------- */

.calculator-steps {
  display: grid;
  gap: 1.25rem;
  margin-top: 2rem;
}

.calc-step {
  border: 1px solid var(--up-border);
  border-radius: var(--radius-lg);
  background: var(--up-white);
  overflow: hidden;
}

.calc-step-summary {
  cursor: pointer;
  padding: 1.35rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  list-style: none;
}

.calc-step-summary::-webkit-details-marker {
  display: none;
}

.calc-step-summary:focus-visible {
  outline: 3px solid var(--up-green);
  outline-offset: -3px;
}

.calc-step-number {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--up-green-light);
  color: var(--up-green-dark);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.calc-step-heading {
  flex: 1;
  display: grid;
  gap: 0.2rem;
}

.calc-step-title {
  font-weight: 700;
  color: var(--up-charcoal);
  font-size: 1.05rem;
}

.calc-step-subtitle {
  font-size: 0.85rem;
  color: var(--up-charcoal-soft);
}

.calc-step-chevron {
  flex-shrink: 0;
  color: var(--up-green);
  transition: transform var(--transition);
}

.calc-step[open] .calc-step-chevron {
  transform: rotate(180deg);
}

.calc-step-body {
  padding: 0 1.5rem 1.5rem;
}

.calc-step-body .calculator {
  margin-top: 0;
}

.calc-step-intro {
  font-size: 0.92rem;
  color: var(--up-charcoal-soft);
  margin-bottom: 1.25rem;
}

@media (prefers-reduced-motion: reduce) {
  .calc-step-chevron {
    transition: none;
  }
}

/* --------------------------------------------------------------------- */
/* Centred heading unit, reused above the how-to cards, the "what to      */
/* have ready" checklist, and the assumptions cards. Mirrors the site's   */
/* established .section-head.center pattern (heading centred as a block,  */
/* content below left aligned) at a smaller, subsection scale.            */
/* --------------------------------------------------------------------- */

.howto-head {
  max-width: 640px;
  margin-inline: auto;
  margin-bottom: 1.25rem;
  text-align: center;
}

.howto-head h3 {
  font-size: 1.15rem;
  margin-bottom: 0;
}

.howto-head p {
  font-size: 0.95rem;
  color: var(--up-charcoal-soft);
  margin-top: 0.5rem;
  margin-bottom: 0;
}

/* --------------------------------------------------------------------- */
/* How to use this calculator                                            */
/* --------------------------------------------------------------------- */

.howto {
  margin-top: 2rem;
}

.howto-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.howto-step {
  padding: 1.25rem;
  background: var(--up-mist);
  border: 1px solid var(--up-border);
  border-radius: var(--radius-lg);
  text-align: left;
}

.howto-step .calc-step-number {
  margin-bottom: 0.75rem;
}

.howto-step h4 {
  font-size: 1rem;
  margin-bottom: 0.35rem;
}

.howto-step p {
  font-size: 0.9rem;
  color: var(--up-charcoal-soft);
  margin-bottom: 0;
}

.howto-ready {
  margin-top: 2rem;
}

/* The checklist itself is centred as a constrained block (narrower than
   the full calculator width, since it is a short list), while each item
   inside stays left aligned: the checkmark and its text sit side by
   side, not centred as text. */
.howto-ready-list {
  max-width: 420px;
  margin-inline: auto;
  margin-top: 0;
  text-align: left;
}

/* --------------------------------------------------------------------- */
/* Assumptions and sources                                               */
/* --------------------------------------------------------------------- */

.assumptions {
  margin-top: 2.5rem;
}

.assumptions-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  align-items: stretch;
}

.assumptions-card {
  background: var(--up-white);
  border: 1px solid var(--up-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 1.5rem;
  text-align: left;
  font-size: 0.9rem;
  color: var(--up-charcoal-soft);
}

.assumptions-card h4 {
  font-size: 1rem;
  margin-bottom: 0.85rem;
}

.assumptions-card p:last-child {
  margin-bottom: 0;
}

.assumptions-card strong {
  color: var(--up-charcoal);
}

.assumptions-eligibility li {
  font-size: 0.88rem;
}

.assumptions-card h4 + .calc-source-group-label {
  margin-top: 0;
}

.cta-panel-actions {
  justify-content: center;
  margin-top: 2rem;
}

@media (min-width: 900px) {
  .calculator {
    grid-template-columns: 1.1fr 1fr;
  }
}

/* --------------------------------------------------------------------- */
/* FAQ accordion                                                          */
/* --------------------------------------------------------------------- */

.faq-list {
  display: grid;
  gap: 0.9rem;
  margin-top: 2rem;
  max-width: var(--solar-editorial-width, none);
  margin-inline: auto;
}

.faq-item {
  border: 1px solid var(--up-border);
  border-radius: var(--radius-md);
  padding: 0.3rem 1.4rem;
  background: var(--up-white);
}

.faq-item summary {
  cursor: pointer;
  padding-block: 1.1rem;
  font-weight: 600;
  color: var(--up-charcoal);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary svg {
  flex-shrink: 0;
  transition: transform var(--transition);
  color: var(--up-green);
}

.faq-item[open] summary svg {
  transform: rotate(180deg);
}

.faq-item p {
  padding-bottom: 1.1rem;
  margin: 0;
  font-size: 0.96rem;
}

/* --------------------------------------------------------------------- */
/* Stat analysis card                                                     */
/* --------------------------------------------------------------------- */

.stat-analysis {
  display: grid;
  gap: 2rem;
  align-items: center;
  background: var(--up-off-white);
  border-radius: var(--radius-xl);
  padding: clamp(1.75rem, 4vw, 2.75rem);
}

.stat-analysis-figure {
  text-align: center;
  padding: 1.5rem;
  background: var(--up-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.stat-analysis-figure .data-stat {
  margin: 0;
}

.stat-analysis-figure .data-source {
  margin-top: 0.5rem;
}

.stat-analysis-copy h3 {
  font-size: 1.2rem;
}

.stat-analysis-copy p:last-child {
  margin-bottom: 0;
}

@media (min-width: 780px) {
  .stat-analysis {
    grid-template-columns: 260px 1fr;
  }
}

/* --------------------------------------------------------------------- */
/* Heat Pumps page                                                       */
/* Mirrors the .page-solar-pv scoping below: same editorial width and    */
/* H2 scale, applied additively so the approved Solar page is untouched. */
/* --------------------------------------------------------------------- */

.page-heat-pumps {
  --solar-editorial-width: 45rem;
  --solar-h2-size: clamp(1.75rem, 2.4vw, 2rem);
}

.page-heat-pumps .section-head {
  max-width: var(--solar-editorial-width);
  margin-inline: auto;
  text-align: left;
}

.page-heat-pumps .section-head--tool {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.page-heat-pumps .section-head h2,
.page-heat-pumps .page-intro h2,
.page-heat-pumps .content-panel-copy h2 {
  font-size: var(--solar-h2-size);
}

.page-heat-pumps .step-card {
  background: var(--up-mist);
}

/* Six installation steps: a balanced 3-then-3 desktop grid rather than
   the seven-card 4-then-3 split used on Solar. */
@media (min-width: 1024px) {
  .page-heat-pumps .steps-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --------------------------------------------------------------------- */
/* Heat Pump Readiness Check                                             */
/* Reuses .calculator/.calc-results/.calc-result-label/.factor-list as   */
/* established on Solar's Payback Explorer. Only the question/option     */
/* controls below are new, since Solar has no equivalent radio input UI. */
/* --------------------------------------------------------------------- */

.readiness-form {
  display: grid;
  gap: 1.5rem;
}

.readiness-question {
  border: 0;
  padding: 0;
  margin: 0;
}

.readiness-question legend {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--up-charcoal);
  margin-bottom: 0.6rem;
  padding: 0;
}

.readiness-options {
  display: grid;
  gap: 0.5rem;
}

.readiness-option {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.92rem;
  color: var(--up-charcoal-soft);
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--up-border);
  border-radius: var(--radius-sm);
  background: var(--up-white);
  cursor: pointer;
}

.readiness-option input {
  margin-top: 0.2rem;
  flex-shrink: 0;
  accent-color: var(--up-green);
}

.readiness-option:has(input:checked) {
  border-color: var(--up-green);
  background: var(--up-green-light);
  color: var(--up-charcoal);
}

.readiness-option input:focus-visible {
  outline: 3px solid var(--up-green);
  outline-offset: 2px;
}

.readiness-group {
  margin-top: 1.5rem;
}

.readiness-group:first-of-type {
  margin-top: 1.25rem;
}

.readiness-group h3 {
  font-size: 1rem;
  margin-bottom: 0.75rem;
}

.readiness-group .factor-list {
  margin-top: 0;
}

/* The Readiness Check form has more fields than Solar's calculator, so its
   results panel is kept in view while scrolling through the questions
   rather than scrolling away above the fold. */
@media (min-width: 900px) {
  #readiness-results {
    position: sticky;
    top: 6rem;
    align-self: start;
  }
}

/* --------------------------------------------------------------------- */
/* Insulation page                                                       */
/* Mirrors the .page-solar-pv / .page-heat-pumps scoping above: same     */
/* editorial width and H2 scale, applied additively so neither approved  */
/* page is touched.                                                      */
/* --------------------------------------------------------------------- */

.page-insulation {
  --solar-editorial-width: 45rem;
  --solar-h2-size: clamp(1.75rem, 2.4vw, 2rem);
}

.page-insulation .section-head {
  max-width: var(--solar-editorial-width);
  margin-inline: auto;
  text-align: left;
}

.page-insulation .section-head--tool {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.page-insulation .section-head h2,
.page-insulation .page-intro h2,
.page-insulation .content-panel-copy h2 {
  font-size: var(--solar-h2-size);
}

.page-insulation .step-card {
  background: var(--up-mist);
}

/* SEAI insulation grants: several h3 subheadings run through one flowing
   page-intro column. The shared h3 rule carries no top margin (cards
   provide their own padding elsewhere), so it needs one here to keep the
   same breathing room as the rest of the page's section spacing. */
.page-insulation .page-intro h3 {
  margin-top: 2rem;
}

/* Seven work steps: the same 4-then-3 desktop split used on Solar's
   seven step installation journey, rather than an even 3 or 4 column grid
   that would leave an orphaned card. */
@media (min-width: 1024px) {
  .page-insulation .steps-grid {
    grid-template-columns: repeat(12, 1fr);
  }

  .page-insulation .steps-grid .step-card {
    grid-column: span 3;
  }

  .page-insulation .steps-grid .step-card:nth-child(n + 5) {
    grid-column: span 4;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .page-insulation .steps-grid {
    grid-template-columns: repeat(12, 1fr);
  }

  .page-insulation .steps-grid .step-card {
    grid-column: span 3;
  }

  .page-insulation .steps-grid .step-card:nth-child(n + 5) {
    grid-column: span 4;
  }
}

/* --------------------------------------------------------------------- */
/* Windows and Doors page                                                */
/* Mirrors the .page-solar-pv / .page-heat-pumps / .page-insulation      */
/* scoping above: same editorial width and H2 scale, applied additively  */
/* so none of the three approved pages are touched.                      */
/* --------------------------------------------------------------------- */

.page-windows-doors {
  --solar-editorial-width: 45rem;
  --solar-h2-size: clamp(1.75rem, 2.4vw, 2rem);
}

.page-windows-doors .section-head {
  max-width: var(--solar-editorial-width);
  margin-inline: auto;
  text-align: left;
}

.page-windows-doors .section-head--tool {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.page-windows-doors .section-head h2,
.page-windows-doors .page-intro h2,
.page-windows-doors .content-panel-copy h2 {
  font-size: var(--solar-h2-size);
}

.page-windows-doors .step-card {
  background: var(--up-mist);
}

.page-windows-doors .page-intro h3 {
  margin-top: 2rem;
}

/* Eight replacement steps: an even 4 then 4 desktop split, rather than the
   7 or 6 step splits used on Solar, Heat Pumps and Insulation. Resets the
   base .steps-grid .step-card span (written for Solar's 12 column, 4 then
   3 layout) back to one column each, since this page uses a plain 4 column
   grid instead. */
@media (min-width: 1024px) {
  .page-windows-doors .steps-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .page-windows-doors .steps-grid .step-card,
  .page-windows-doors .steps-grid .step-card:nth-child(n + 5) {
    grid-column: auto;
  }
}

/* Window and Door Check: group the tool intro and the interactive panel
   into one visual component. Reuses the same mist tone already used for
   the calculator panel itself, so the intro now reads as part of the same
   card rather than sitting on the page above it. The calculator keeps its
   own background, border and radius unchanged, so it still reads as a
   distinct inset panel within the frame; only its top margin is tightened
   and a subtle shadow added to keep that separation legible against a
   matching background. */
.page-windows-doors #problem-check .tool-frame {
  background: var(--up-mist);
  border-radius: var(--radius-xl);
  padding: clamp(1.5rem, 4vw, 2.5rem);
}

.page-windows-doors #problem-check .tool-frame .section-head--tool {
  margin-top: 0;
  margin-bottom: 0;
}

.page-windows-doors #problem-check .calculator {
  margin-top: 1.5rem;
  box-shadow: var(--shadow-sm);
}

/* The Window and Door Check form has more fields than Solar's calculator,
   so its results panel is kept in view while scrolling through the
   questions, same intent and values as the Heat Pumps Readiness Check's
   #readiness-results rule above, scoped here since this panel uses its
   own id. */
@media (min-width: 900px) {
  .page-windows-doors #problem-check-results {
    position: sticky;
    top: 6rem;
    align-self: start;
  }
}

/* Cost section sources cards: give the two source cards equal height once
   the grid's auto-fit places them side by side (from roughly 600px of
   available width up), so their bottom edges align at tablet and desktop.
   Below that, .callout-grid's own auto-fit already collapses this to a
   single column, where each card keeps its natural height untouched. */
.page-windows-doors .callout-grid.sources-grid {
  align-items: stretch;
}

.page-windows-doors .callout-grid.sources-grid .callout {
  display: flex;
  flex-direction: column;
}

/* --------------------------------------------------------------------- */
/* Electricity page                                                      */
/* Mirrors the .page-solar-pv / .page-heat-pumps / .page-insulation /    */
/* .page-windows-doors scoping above: same editorial width and H2 scale, */
/* applied additively so none of the four approved pages are touched.    */
/* --------------------------------------------------------------------- */

.page-electricity {
  --solar-editorial-width: 45rem;
  --solar-h2-size: clamp(1.75rem, 2.4vw, 2rem);
}

.page-electricity .section-head {
  max-width: var(--solar-editorial-width);
  margin-inline: auto;
  text-align: left;
}

.page-electricity .section-head--tool {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.page-electricity .section-head h2,
.page-electricity .page-intro h2,
.page-electricity .content-panel-copy h2 {
  font-size: var(--solar-h2-size);
}

/* --------------------------------------------------------------------- */
/* Broadband page                                                        */
/* Mirrors the .page-electricity scoping above: same editorial width and */
/* H2 scale, applied additively so none of the existing flagship pages   */
/* are touched.                                                          */
/* --------------------------------------------------------------------- */

.page-broadband {
  --solar-editorial-width: 45rem;
  --solar-h2-size: clamp(1.75rem, 2.4vw, 2rem);
}

.page-broadband .section-head {
  max-width: var(--solar-editorial-width);
  margin-inline: auto;
  text-align: left;
}

.page-broadband .section-head--tool {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.page-broadband .section-head h2,
.page-broadband .page-intro h2,
.page-broadband .content-panel-copy h2 {
  font-size: var(--solar-h2-size);
}

/* --------------------------------------------------------------------- */
/* Waste page                                                            */
/* Mirrors the .page-electricity scoping above: same editorial width and */
/* H2 scale, applied additively so none of the existing flagship pages   */
/* are touched.                                                          */
/* --------------------------------------------------------------------- */

.page-waste {
  --solar-editorial-width: 45rem;
  --solar-h2-size: clamp(1.75rem, 2.4vw, 2rem);
}

.page-waste .section-head {
  max-width: var(--solar-editorial-width);
  margin-inline: auto;
  text-align: left;
}

.page-waste .section-head--tool {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.page-waste .section-head h2,
.page-waste .page-intro h2,
.page-waste .content-panel-copy h2 {
  font-size: var(--solar-h2-size);
}

/* --------------------------------------------------------------------- */
/* Home Insurance page                                                   */
/* Mirrors the .page-electricity scoping above: same editorial width and */
/* H2 scale, applied additively so none of the existing flagship pages   */
/* are touched.                                                          */
/* --------------------------------------------------------------------- */

.page-home-insurance {
  --solar-editorial-width: 45rem;
  --solar-h2-size: clamp(1.75rem, 2.4vw, 2rem);
}

/* This page's hero carries one extra line (the hero-disclosure) that the
   other flagship pages don't, so the shared fixed hero height clips the
   second trust point behind the breadcrumb from ~1024px up. Scoped
   override only: taller hero height for this page, same --hero-h
   mechanism the shared hero/photo/scrim already use, so the full-bleed
   photo scales with it automatically. */
@media (min-width: 860px) {
  .page-home-insurance .hero {
    --hero-h: clamp(530px, 30vw, 545px);
  }
}

.page-home-insurance .section-head {
  max-width: var(--solar-editorial-width);
  margin-inline: auto;
  text-align: left;
}

/* Related guides: centred heading block above a left-aligned list, mirroring
   the site's .section-head.center / howto-head pattern. Scoped so it wins
   over this page's left-aligned .section-head default above. */
.page-home-insurance .related-guides-block {
  max-width: var(--solar-editorial-width);
  margin-inline: auto;
}

.page-home-insurance .related-guides-block .section-head {
  text-align: center;
  margin-inline: auto;
}

.page-home-insurance .related-guides-block .factor-list {
  text-align: left;
}

.page-home-insurance .section-head--tool {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.page-home-insurance .section-head h2,
.page-home-insurance .page-intro h2,
.page-home-insurance .content-panel-copy h2 {
  font-size: var(--solar-h2-size);
}

/* The comparison CTA's button carries longer branded copy than other
   buttons on the site, so it needs to wrap instead of forcing a fixed
   nowrap width on narrow screens. */
.btn-compare-cta {
  white-space: normal;
  text-align: center;
  max-width: 100%;
}

/* Small, muted ownership disclosure directly under the hero buttons.
   Deliberately lighter than .disclosure-note's bordered box so it reads
   as a footnote, not a competing call to action. */
.page-home-insurance .hero-disclosure {
  margin-top: 0.85rem;
  max-width: 44ch;
  font-size: 0.82rem;
  color: var(--up-charcoal-soft);
}

/* ==========================================================================
   Supporting articles (spoke pages under the four pillars)
   Shared, minimal component set reused by every article. Editorial reading
   width, not the wider hub layout the pillars use, since these pages carry
   long form prose rather than a full visual page build.
   ========================================================================== */

.article-header {
  padding-bottom: 0;
}

.article-header .eyebrow {
  margin-bottom: 0.75rem;
}

.article-lede {
  max-width: 46rem;
  font-size: 1.125rem;
  color: var(--up-charcoal-soft);
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  font-size: 0.9rem;
  color: var(--up-body);
  border-top: 1px solid var(--up-border);
  border-bottom: 1px solid var(--up-border);
  padding: 0.85rem 0;
  margin: 1.5rem 0 0;
}

.article-prose {
  max-width: 46rem;
}

.article-prose h2 {
  font-size: clamp(1.4rem, 2.4vw, 1.75rem);
  margin-top: 2.75rem;
}

/* Breathing room between the review/disclosure strip in the header and the
   opening H2 of the article body, so the first heading reads as a deliberate
   start rather than sitting flush under the strip. */
.article-prose > h2:first-child {
  margin-top: 3.25rem;
}

.article-prose h3 {
  font-size: 1.15rem;
  margin-top: 1.75rem;
}

.article-prose > p:first-of-type {
  font-size: 1.05rem;
}

.article-prose ul,
.article-prose ol {
  margin: 0 0 1.25rem;
  padding-left: 1.25rem;
  list-style: disc;
}

.article-prose ol {
  list-style: decimal;
}

.article-prose li {
  margin-bottom: 0.5rem;
}

.article-prose a {
  color: var(--up-green-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.article-prose a:hover {
  color: var(--up-charcoal);
}

.article-figure {
  margin: 1.5rem 0 2rem;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--up-border);
}

.article-figure img {
  width: 100%;
  height: auto;
}

.table-scroll {
  overflow-x: auto;
  margin: 1.5rem 0;
  border: 1px solid var(--up-border);
  border-radius: var(--radius-md);
}

/* main.js makes a table wrapper focusable only while it actually scrolls
   sideways, so keyboard users can scroll it with the arrow keys. */
.table-scroll:focus-visible {
  outline: 3px solid var(--up-green);
  outline-offset: 2px;
}

.spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  min-width: 520px;
}

.spec-table caption {
  text-align: left;
  font-size: 0.85rem;
  color: var(--up-body);
  padding: 0.75rem 1rem 0;
}

.spec-table th,
.spec-table td {
  text-align: left;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--up-border);
  vertical-align: top;
}

.spec-table thead th {
  background: var(--up-off-white);
  color: var(--up-charcoal);
  font-family: var(--font-display);
  font-weight: 600;
}

.spec-table tbody tr:last-child td {
  border-bottom: none;
}

.article-checklist {
  margin: 1.5rem 0;
  padding: 1.25rem 1.5rem;
  background: var(--up-off-white);
  border-radius: var(--radius-md);
  border: 1px solid var(--up-border);
}

.article-checklist h3 {
  margin-top: 0;
}

.article-checklist ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.article-checklist li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.7rem;
}

.article-checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.4em;
  width: 0.7rem;
  height: 0.7rem;
  border: 2px solid var(--up-green);
  border-radius: 3px;
}

.article-related {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--up-border);
}

.article-related h2 {
  font-size: 1.2rem;
  margin-bottom: 1rem;
}

.article-related ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.75rem;
}

.article-related a {
  color: var(--up-green-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (min-width: 640px) {
  .article-related ul {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --------------------------------------------------------------------- */
/* Legal pages                                                           */
/* Unlike a spoke article (which is followed by a "Related guides"       */
/* section that supplies its own section padding before the footer),     */
/* .article-prose is the last thing in <main> on every legal page, so     */
/* its final element, often a bordered callout, would otherwise sit      */
/* flush against the footer with no page background between them. This   */
/* reuses the same --section-pad-panel rhythm as the site's other        */
/* final-panel sections (cta-panel, final-cta, grants-band) immediately  */
/* above a footer.                                                       */
/* --------------------------------------------------------------------- */

.page-editorial-standards main > article,
.page-corrections-policy main > article,
.page-our-partnerships main > article,
.page-privacy-policy main > article,
.page-cookie-policy main > article,
.page-terms-and-conditions main > article,
.page-disclaimer main > article,
.page-accessibility main > article,
.page-contact main > article,
.page-not-found main > article {
  padding-bottom: var(--section-pad-panel);
}

/* --------------------------------------------------------------------- */
/* Guides hub intro                                                      */
/* --------------------------------------------------------------------- */

.guides-intro {
  padding-bottom: 0;
}

.guides-intro .wrap {
  max-width: 760px;
}

.guides-intro h1 {
  font-size: clamp(2.1rem, 4vw, 2.75rem);
}

.guides-intro .lede {
  font-size: 1.1rem;
  color: var(--up-body);
}

/* --------------------------------------------------------------------- */
/* Home Upgrades / Home Services hub heroes — reuse the shared .hero      */
/* (breadcrumb now lives inside .hero-copy, as the left column), plain    */
/* .hero rather than .hero--page since each image's own aspect ratio      */
/* (not the 1672/941 shared by the other flagship pages) is shown in      */
/* full at desktop, exactly as the homepage hero already does for its     */
/* own photo. Only --hero-photo-ratio (which the shared desktop fade      */
/* defaults to 1672/941 for those other pages) needs a per-page value so  */
/* the fade still finds each image's real left edge on wide screens.      */
/* --------------------------------------------------------------------- */

@media (min-width: 860px) {
  /* Both hubs carry a longer lede and two hero-trust lines than the
     homepage's single-line lede, which the shared fixed hero height
     clips (same issue Home Insurance's own scoped override fixes below).
     Scoped override only: taller hero height, same --hero-h mechanism
     the shared hero/photo/scrim already use, so the full-bleed photo and
     fade scale with it automatically. */
  .page-home-upgrades .hero,
  .page-home-services .hero {
    --hero-h: clamp(600px, 34vw, 620px);
  }

  .page-home-upgrades .hero {
    --hero-photo-ratio: 1774 / 887;
  }

  .page-home-services .hero {
    --hero-photo-ratio: 1942 / 809;
  }
}

/* Mobile/tablet crop (shared 4:3 .hero-photo box, object-fit: cover):
   tuned per image so the house/solar panels stay visible on the Upgrades
   photo and the television, lamp and router all stay in frame on the
   Services photo, instead of the site-wide default 78% 20% crop. */
.page-home-upgrades .hero-photo img {
  object-position: 88% 35%;
}

.page-home-services .hero-photo img {
  object-position: 100% 42%;
}

/* Desktop crop (860px to 1799px): nudge the right-anchored Services photo
   to the right so more of the floor lamp clears the full-width white fade,
   while the television and router stay in frame. The hero's overflow:
   hidden trims the right edge. From 1800px the lamp is already clear of
   the photo-sized fade, so the photo is left as is. */
@media (min-width: 860px) and (max-width: 1799.98px) {
  .page-home-services .hero-photo img {
    transform: translateX(8%);
  }
}

/* Same editorial-column tokens every other content page (Solar PV, Grants,
   Broadband, etc.) defines for itself, so the hubs' .page-intro sections
   ("What to weigh up" / "What to compare") get the same centred-column,
   left-aligned-text treatment already established sitewide, instead of
   falling back to an unconstrained full-width block. */
.page-home-upgrades,
.page-home-services {
  --solar-editorial-width: 45rem;
  --solar-h2-size: clamp(1.75rem, 2.4vw, 2rem);
}

/* Find Installers never picked up these tokens, so its "How this works"
   and "What SEAI registration means" .page-intro sections fell back to an
   unconstrained, undersized heading instead of the same centred-column
   treatment every other page's .page-intro sections use (matching the
   centred "Browse by upgrade type" section immediately between them). */
.page-find-installers {
  --solar-editorial-width: 45rem;
  --solar-h2-size: clamp(1.75rem, 2.4vw, 2rem);
}

/* The "X companies currently registered..." heading above the filter/cards
   used the generic .section-head rule, which isn't centred within the wide
   listing .wrap, so it sat against the left edge out of step with the
   centred .page-intro sections above and below it. Centre the block itself
   (same column width as .page-intro) while keeping its eyebrow/H2/paragraph
   left aligned inside it; the filter bar and cards below are separate
   elements and are unaffected. */
.page-find-installers .section-head {
  max-width: var(--solar-editorial-width);
  margin-inline: auto;
  text-align: left;
}

/* --------------------------------------------------------------------- */
/* Supporting article cards                                              */
/* Reused on the Guides hub, on each money page's Related guides section */
/* and on the homepage's secondary guides area, so one card component    */
/* carries every real-photo article link across the site.                */
/* --------------------------------------------------------------------- */

.section-head .btn {
  margin-top: 0.5rem;
}

.support-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
  margin-top: 1.75rem;
}

.support-card {
  display: flex;
  flex-direction: column;
  background: var(--up-white);
  border: 1px solid var(--up-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), transform var(--transition);
}

.support-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.support-card-media {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.support-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.support-card-body {
  padding: 1.1rem 1.25rem 1.35rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.support-card-body h3 {
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

.support-card-body h3 a {
  color: var(--up-charcoal);
}

.support-card-body h3 a:hover {
  color: var(--up-green-dark);
}

.support-card-body p {
  font-size: 0.88rem;
  margin-bottom: 0.75rem;
  flex: 1;
}

@media (min-width: 640px) {
  .support-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --------------------------------------------------------------------- */
/* Homepage: secondary "More Guides" area                                */
/* Deliberately lighter than the four main guide cards above it: a       */
/* muted heading, no border, and title-only compact cards with no        */
/* excerpt or per-card read link, so it reads as a lighter-weight tier.  */
/* --------------------------------------------------------------------- */

.more-guides {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: clamp(2rem, 4vw, 2.75rem);
  border-top: 1px solid var(--up-border);
}

.section-head--sub {
  max-width: 640px;
  margin-bottom: 1.5rem;
}

.section-head--sub h3 {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
}

.section-head--sub p {
  font-size: 0.98rem;
  margin-bottom: 0;
}

.support-grid--compact .support-card {
  box-shadow: none;
}

.support-grid--compact .support-card-body {
  padding: 0.85rem 1rem;
}

.support-grid--compact .support-card-body h3 {
  font-size: 0.92rem;
  margin-bottom: 0;
}

.more-guides-cta {
  margin: 1.5rem 0 0;
}

@media (min-width: 640px) {
  .support-grid--compact {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .support-grid--compact {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* --------------------------------------------------------------------- */
/* Grants page                                                           */
/* Mirrors the .page-solar-pv / .page-heat-pumps / .page-insulation /    */
/* .page-windows-doors scoping above: same editorial width and H2 scale, */
/* applied additively so none of the existing flagship pages are touched.*/
/* --------------------------------------------------------------------- */

.page-grants {
  --solar-editorial-width: 45rem;
  --solar-h2-size: clamp(1.75rem, 2.4vw, 2rem);
}

.page-grants .section-head {
  max-width: var(--solar-editorial-width);
  margin-inline: auto;
  text-align: left;
}

.page-grants .section-head--tool {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.page-grants .section-head h2,
.page-grants .page-intro h2,
.page-grants .content-panel-copy h2 {
  font-size: var(--solar-h2-size);
}

/* Current individual grant amounts: several h3 subheadings (Attic
   insulation, Cavity wall insulation, etc.) run through one flowing
   page-intro column, exactly as on Insulation and Windows & Doors. The
   shared h3 rule carries no top margin, so it needs one here to keep the
   same breathing room as the rest of the page's section spacing. */
.page-grants .page-intro h3 {
  margin-top: 2rem;
}

/* Related guides: centred heading block above a left-aligned list, mirroring
   the site's .section-head.center / Home Insurance related-guides-block
   pattern. Scoped so it wins over this page's left-aligned .section-head
   default above. */
.page-grants .related-guides-block {
  max-width: var(--solar-editorial-width);
  margin-inline: auto;
}

.page-grants .related-guides-block .section-head {
  text-align: center;
  margin-inline: auto;
}

.page-grants .related-guides-block .factor-list {
  text-align: left;
}

/* Choose your route sits on a .bg-soft band, so the table keeps a white
   surface and its off-white header row stays distinct. */
.page-grants #choose-route .table-scroll {
  background: var(--up-white);
}

/* The comparison table's caption is a small green section label, styled
   like the site's eyebrow labels, so it sits above the serif column
   headings without competing with them. */
.page-grants #choose-route .spec-table caption {
  text-align: center;
  color: var(--up-green-dark);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Grant routes comparison table: desktop keeps the standard .spec-table
   layout inside its horizontal-scroll wrapper. Below 640px there isn't
   room for four columns at a readable size, so the table is reflowed into
   one stacked card per row (What to know criterion), with each answer
   labelled by its route via the data-label attributes in the markup.
   Explicit ARIA roles on the table markup keep it exposed as a real table
   to assistive tech even though the CSS display values change here. */
@media (max-width: 640px) {
  .page-grants #choose-route .table-scroll {
    overflow-x: visible;
    border: none;
    background: none;
    border-radius: 0;
    margin: 1.5rem 0;
  }

  .page-grants #choose-route .spec-table {
    min-width: 0;
    font-size: 0.95rem;
  }

  .page-grants #choose-route .spec-table caption {
    padding: 0 0 0.85rem;
  }

  .page-grants #choose-route .spec-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .page-grants #choose-route .spec-table tbody {
    display: block;
  }

  .page-grants #choose-route .spec-table tr {
    display: block;
    border: 1px solid var(--up-border);
    background: var(--up-white);
    border-radius: var(--radius-md);
    padding: 0 1rem;
    margin-bottom: 1rem;
  }

  .page-grants #choose-route .spec-table tr:last-child {
    margin-bottom: 0;
  }

  .page-grants #choose-route .spec-table th[scope="row"] {
    display: block;
    padding: 0.9rem 0 0.4rem;
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--up-charcoal);
    border-bottom: 1px solid var(--up-border);
  }

  .page-grants #choose-route .spec-table td {
    display: block;
    padding: 0.6rem 0;
    border-bottom: 1px dashed var(--up-border);
  }

  .page-grants #choose-route .spec-table td:last-of-type {
    border-bottom: none;
    padding-bottom: 0.9rem;
  }

  .page-grants #choose-route .spec-table td::before {
    content: attr(data-label);
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--up-green-dark);
    margin-bottom: 0.2rem;
  }

  .page-grants #choose-route .spec-table tbody tr:last-child td {
    border-bottom: 1px dashed var(--up-border);
  }

  .page-grants #choose-route .spec-table tbody tr:last-child td:last-of-type {
    border-bottom: none;
  }
}

/* Eight application steps do not fit the four-then-three pattern used   */
/* elsewhere for seven steps, which would otherwise leave one card       */
/* orphaned on its own row. An even four-then-four grid keeps every row  */
/* balanced.                                                             */

@media (min-width: 768px) {
  .page-grants .steps-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .page-grants .steps-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .page-grants .steps-grid .step-card {
    grid-column: span 1;
  }
}

/* --------------------------------------------------------------------- */
/* Find Installers directory                                             */
/* --------------------------------------------------------------------- */

.installer-hub-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
  margin-top: 2rem;
}

@media (min-width: 700px) {
  .installer-hub-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.installer-hub-card {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 1.75rem;
  background: var(--up-white);
  border: 1px solid var(--up-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), transform var(--transition);
}

.installer-hub-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.installer-hub-card h3 {
  font-size: 1.2rem;
}

.installer-hub-card p {
  font-size: 0.94rem;
  color: var(--up-charcoal-soft);
  margin-bottom: 0;
  flex: 1;
}

.installer-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
  margin-top: 2rem;
}

@media (min-width: 700px) {
  .installer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .installer-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.installer-card {
  display: flex;
  flex-direction: column;
  background: var(--up-white);
  border: 1px solid var(--up-border);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
}

.installer-card h3 {
  font-size: 1.05rem;
  margin-bottom: 0.4rem;
}

.installer-measures {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.5rem 0 0.85rem;
  padding: 0;
  list-style: none;
}

.installer-measure-tag {
  font-size: 0.76rem;
  font-weight: 600;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  background: var(--up-green-light);
  color: var(--up-green-dark);
}

.installer-registration {
  font-size: 0.85rem;
  color: var(--up-charcoal-soft);
  margin-bottom: 0.25rem;
}

.installer-registration-number {
  margin-bottom: 0.85rem;
}

.installer-card-cta {
  margin-top: auto;
  align-self: flex-start;
}

.installer-count {
  font-weight: 700;
  color: var(--up-charcoal);
}

/* --------------------------------------------------------------------- */
/* Find Installers county filter                                         */
/* --------------------------------------------------------------------- */

.installer-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  margin-top: 2rem;
  padding: 1.1rem 1.35rem;
  background: var(--up-mist);
  border: 1px solid var(--up-border);
  border-radius: var(--radius-md);
}

.installer-filter-label {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--up-charcoal);
}

.installer-filter-select {
  padding: 0.55rem 2.25rem 0.55rem 0.9rem;
  border: 1px solid var(--up-border-strong);
  border-radius: var(--radius-sm);
  background: var(--up-white);
  font-family: inherit;
  font-size: 0.94rem;
  color: var(--up-charcoal);
  cursor: pointer;
}

.installer-filter-select:focus-visible {
  outline: 2px solid var(--up-green);
  outline-offset: 2px;
}

.installer-filter-result {
  margin: 0;
  font-size: 0.88rem;
  color: var(--up-charcoal-soft);
  flex-basis: 100%;
}

@media (min-width: 640px) {
  .installer-filter-result {
    flex-basis: auto;
    margin-left: auto;
  }
}

.installer-empty-state {
  margin-top: 2rem;
  padding: 1.75rem;
  background: var(--up-mist);
  border: 1px solid var(--up-border);
  border-radius: var(--radius-md);
  font-size: 0.96rem;
  color: var(--up-charcoal-soft);
  text-align: center;
}

.installer-empty-reset {
  display: inline-flex;
  margin-top: 0.75rem;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--up-green-dark);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.installer-empty-reset:hover {
  color: var(--up-green);
}

/* -------------------- Cookie consent banner -------------------- */
.cookie-consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  background: var(--up-charcoal);
  color: var(--up-white);
  border-top: 4px solid var(--up-green);
  box-shadow: 0 -8px 24px rgba(28, 35, 33, 0.28);
}

.cookie-consent-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 18px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  justify-content: space-between;
}

.cookie-consent-text {
  margin: 0;
  flex: 1 1 320px;
  max-width: 62ch;
  font-size: 0.92rem;
  line-height: 1.5;
  color: #f1f3f2;
}

.cookie-consent-text .text-link {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cookie-consent-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.cookie-consent-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  font-size: 0.92rem;
  font-weight: 700;
  font-family: inherit;
  line-height: 1.2;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.cookie-consent-btn-settings {
  background: transparent;
  border-color: var(--up-white);
  color: var(--up-white);
}

.cookie-consent-btn-settings:hover,
.cookie-consent-btn-settings:focus-visible {
  background: rgba(255, 255, 255, 0.14);
}

.cookie-consent-btn-accept {
  background: var(--up-green);
  border-color: var(--up-green);
  color: var(--up-white);
}

.cookie-consent-btn-accept:hover,
.cookie-consent-btn-accept:focus-visible {
  background: var(--up-green-dark);
  border-color: var(--up-green-dark);
}

.cookie-consent-btn:focus-visible {
  outline: 3px solid var(--up-teal);
  outline-offset: 2px;
}

@media (max-width: 767px) {
  .cookie-consent-inner {
    padding: 16px;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
  }

  .cookie-consent-text {
    flex: 0 1 auto;
  }

  .cookie-consent-actions {
    width: 100%;
  }

  .cookie-consent-btn {
    flex: 1 1 auto;
  }
}

/* -------------------- Cookie settings panel -------------------- */
.cookie-settings-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(28, 35, 33, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.cookie-settings {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: var(--up-white);
  color: var(--up-charcoal);
  border-top: 4px solid transparent;
  border-image: linear-gradient(90deg, var(--up-green), var(--up-teal)) 1;
  border-radius: var(--radius-lg);
  padding: 28px 24px 24px;
  box-shadow: var(--shadow-lg);
}

.cookie-settings h2 {
  margin: 0 0 10px;
  font-size: 1.2rem;
}

.cookie-settings-intro {
  margin: 0 0 20px;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--up-body);
}

.cookie-settings-intro .text-link {
  color: var(--up-green-dark);
}

.cookie-settings-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--up-body);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.cookie-settings-close:hover,
.cookie-settings-close:focus-visible {
  color: var(--up-charcoal);
}

.cookie-settings-close:focus-visible {
  outline: 3px solid var(--up-teal);
  outline-offset: 2px;
}

.cookie-settings-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--up-border);
}

.cookie-settings-row-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cookie-settings-row-title {
  font-weight: 700;
  font-size: 0.95rem;
}

.cookie-settings-row-desc {
  font-size: 0.86rem;
  color: var(--up-body);
}

.cookie-settings-always-on {
  flex-shrink: 0;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--up-body);
  padding-top: 2px;
}

.cookie-settings-toggle {
  position: relative;
  flex-shrink: 0;
  display: inline-block;
  width: 42px;
  height: 24px;
}

.cookie-settings-toggle input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.cookie-settings-toggle-track {
  position: absolute;
  inset: 0;
  background: var(--up-border);
  border-radius: 999px;
  transition: background 0.15s ease;
  pointer-events: none;
}

.cookie-settings-toggle-track::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--up-white);
  box-shadow: 0 1px 2px rgba(28, 35, 33, 0.3);
  transition: transform 0.15s ease;
}

.cookie-settings-toggle input:checked + .cookie-settings-toggle-track {
  background: var(--up-green);
}

.cookie-settings-toggle input:checked + .cookie-settings-toggle-track::before {
  transform: translateX(18px);
}

.cookie-settings-toggle input:focus-visible + .cookie-settings-toggle-track {
  outline: 3px solid var(--up-teal);
  outline-offset: 2px;
}

.cookie-settings-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.cookie-settings-actions .cookie-consent-btn {
  flex: 1 1 auto;
}

.cookie-settings-actions .cookie-consent-btn-settings {
  background: var(--up-white);
  border-color: var(--up-border);
  color: var(--up-charcoal);
}

.cookie-settings-actions .cookie-consent-btn-settings:hover,
.cookie-settings-actions .cookie-consent-btn-settings:focus-visible {
  background: var(--up-mist);
}

@media (max-width: 480px) {
  .cookie-settings {
    padding: 24px 18px 18px;
  }

  .cookie-settings-actions {
    flex-direction: column;
  }
}

/* -------------------- Footer "Cookie Settings" control -------------------- */
.footer-col button.footer-cookie-settings {
  display: inline;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  font: inherit;
  font-size: 0.92rem;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.68);
  text-align: left;
  transition: color var(--transition);
}

.footer-col button.footer-cookie-settings:hover {
  text-decoration: underline;
}

.footer-col button.footer-cookie-settings:focus-visible {
  outline: 2px solid var(--up-teal);
  outline-offset: 2px;
}

/* -------------------- Legal page inline text links -------------------- */
.text-link {
  color: var(--up-green-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.text-link:hover {
  color: var(--up-green);
}

/* --------------------------------------------------------------------- */
/* Contact hub (/contact/)                                               */
/* --------------------------------------------------------------------- */

/* Hero: a restrained pale green introduction band, and a stronger green
   accent under every section heading on this page. */
.page-contact .article-header {
  background: var(--up-green-light);
  border-radius: var(--radius-lg);
  padding: 2rem clamp(1.25rem, 4vw, 3rem) 2.25rem;
}

.page-contact .section-head h2 {
  position: relative;
  padding-bottom: 0.85rem;
}

.page-contact .section-head.center h2::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 56px;
  height: 3px;
  border-radius: 999px;
  background: var(--up-green);
}

.page-contact .eyebrow::before {
  width: 1.8em;
  height: 3px;
  opacity: 0.9;
}

/* Circular icon treatment shared by every card on this page. An active
   journey (home upgrades, Home Insurance, an available "helpful to know"
   item) gets a solid green outline on a pale green disc; a not-yet-live
   service gets the same shape in a muted green tint, so it still reads as
   "on brand" without resembling an active control. */
.contact-icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--up-green-light);
  border: 2px solid var(--up-green);
  color: var(--up-green-dark);
  margin-bottom: 1.1rem;
}

.contact-icon-circle svg {
  width: 26px;
  height: 26px;
}

.contact-icon-circle--muted {
  background: var(--up-white);
  border-color: rgba(24, 137, 66, 0.4);
  color: var(--up-green);
}

/* Research home upgrades: 4 balanced, equal height cards with a full width
   green CTA pinned to the bottom of every card. */
.contact-upgrade-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.contact-upgrade-card p {
  flex: 1 1 auto;
}

.contact-upgrade-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 1.25rem;
  text-align: center;
  white-space: normal;
}

/* The sitewide .btn-primary fill (white text on --up-green) measures
   4.47:1, just under the 4.5:1 AA threshold for normal text. That is a
   pre-existing, sitewide choice this page should not silently redefine,
   but this redesign uses the solid green CTA far more heavily than
   elsewhere, so the page's own active buttons use the darker
   --up-green-dark fill instead, which comfortably passes AA (6.5:1) with
   the same white text. The "available now" pill gets the same treatment
   further down, alongside its inactive counterpart. */
.contact-upgrade-cta,
.insurance-feature-card .btn-primary {
  background: var(--up-green-dark);
  border-color: var(--up-green-dark);
}

.contact-upgrade-cta:hover,
.insurance-feature-card .btn-primary:hover {
  background: #0f5c2c;
}

.contact-upgrade-cta:disabled:hover,
.contact-upgrade-cta[aria-disabled="true"]:hover {
  background: var(--up-green-dark);
}

.contact-icon-circle--lg {
  width: 68px;
  height: 68px;
}

.contact-icon-circle--lg svg {
  width: 32px;
  height: 32px;
}

/* Grid items otherwise take their automatic (content based) minimum width
   into account when sizing an "fr" track, which can force an equal-width
   grid noticeably out of balance whenever one card's button label is
   longer than the rest. Letting cards shrink below their content's
   natural width keeps every grid on this page genuinely equal width. */
#research-upgrades .component-card,
#home-services-contact .component-card,
#helpful-to-know .component-card {
  min-width: 0;
}

@media (min-width: 640px) {
  #research-upgrades .component-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  #research-upgrades .component-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  #research-upgrades .component-card {
    grid-column: auto;
  }
}

.component-card .link-arrow {
  margin-top: 1rem;
}

/* Home services: 3 cards using the exact same card, .contact-upgrade-card
   flex behaviour and .contact-upgrade-cta button style as the Home
   Upgrade cards above (nothing new is defined for those pieces here), so
   the two rows are genuinely the same size, not just the same base
   classes. The one difference from a Home Upgrade card is only ever 1-up
   or 3-up, never a 2 plus 1 split: every width below 1024px, including
   every tablet width tested, stays a single column; at 1024px and up the
   grid is 3-up, but its width is capped and centred to match a Home
   Upgrade column's width instead of stretching 3 cards across the full
   4-column row width (which would make them noticeably wider). */
#home-services-contact .component-grid {
  grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
  #home-services-contact .contact-services-grid {
    grid-template-columns: repeat(3, 1fr);
    max-width: calc(75% - 0.3125rem);
    margin-inline: auto;
  }

  #home-services-contact .contact-services-grid > * {
    grid-column: auto;
  }
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}

.btn:disabled:hover,
.btn[aria-disabled="true"]:hover {
  transform: none;
}

/* Household services cards: shown for reference only, with no actions,
   so they use a deliberately muted, inactive treatment (grey surface,
   dashed border, neutral icon) that still keeps text at AA contrast. */
.contact-service-card--inactive {
  background: var(--up-off-white);
  border-style: dashed;
  border-color: #c9cfcb;
}

.contact-service-card--inactive h3 {
  color: var(--up-charcoal-soft);
}

.contact-service-card--inactive .contact-icon-circle {
  background: var(--up-white);
  border-color: #b3bab6;
  color: #6b7470;
}

.contact-upgrade-card p.contact-service-status {
  flex: 0 0 auto;
  margin-top: 1.25rem;
}

/* Status pill used to mark a feature as available now or not available.
   Text always carries the same meaning as the colour, so the state never
   depends on colour alone. */
.status-pill {
  display: inline-block;
  flex-shrink: 0;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  background: rgba(24, 137, 66, 0.12);
  color: var(--up-green-dark);
  border: 1px solid rgba(24, 137, 66, 0.3);
}

.status-pill--inactive {
  background: var(--up-white);
  color: var(--up-body);
  border-color: #b3bab6;
}

.status-pill--live {
  background: var(--up-green-dark);
  color: var(--up-white);
  border-color: var(--up-green-dark);
}

/* Home Insurance: a smaller, centred feature card below the 3 home
   services cards, not a fourth service card and not a leftover full
   width banner. A fixed max width plus auto margins keeps it centred at
   every width above mobile, and simply becomes the full width available
   inside the page's normal gutters once the viewport is narrower than
   that max width, with no extra breakpoint needed. */
.insurance-feature-card {
  max-width: 640px;
  margin: 2.5rem auto 0;
  padding: clamp(1.75rem, 4vw, 2.5rem);
  background: var(--up-green-light);
  border: 1px solid rgba(24, 137, 66, 0.22);
  border-top: 4px solid var(--up-green-dark);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  text-align: center;
}

.insurance-feature-card .contact-icon-circle {
  margin: 0 auto 1.25rem;
  background: var(--up-white);
}

.insurance-feature-card h3 {
  margin-bottom: 0.75rem;
}

.insurance-feature-card p {
  text-align: left;
  margin: 0 auto 1.5rem;
}

.insurance-feature-card .btn {
  display: inline-flex;
}

/* General enquiry: form panel + "What to expect" panel. Ported from the
   CompareInsuranceIreland.ie contact form with Upgrader.ie colours:
   stacked on mobile and side-by-side from 1024px. */
.enquiry-layout {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-top: 28px;
}
@media (min-width: 1024px) {
  .enquiry-layout { flex-direction: row; align-items: flex-start; gap: 36px; }
  .enquiry-form { flex: 1 1 62%; }
  .enquiry-aside { flex: 0 1 38%; }
}
.enquiry-form {
  border: 1px solid var(--up-border);
  border-radius: var(--radius-sm);
  padding: 26px 22px;
  background: var(--up-white);
}
@media (max-width: 399px) {
  .enquiry-form { padding: 22px 16px; }
}
.enquiry-form > .form-row,
.enquiry-form > .form-field { margin-top: 18px; }
.enquiry-form > .form-row:first-child,
.enquiry-form > .form-field:first-child { margin-top: 0; }
/* minmax(0, 1fr) rather than 1fr, so a long <select> option cannot force
   the column wider than the screen (WCAG 1.4.10 reflow at 320px). */
.form-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}
@media (min-width: 640px) {
  .form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.form-field label {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--up-charcoal);
}
.form-required { color: var(--up-green-dark); }
.form-optional { color: var(--up-charcoal-soft); font-weight: 500; font-size: 0.85rem; }
.form-help { margin: 4px 0 0; color: var(--up-charcoal-soft); font-size: 0.85rem; }
.form-field input,
.form-field select,
.form-field textarea {
  min-height: 44px;
  min-width: 0;
  max-width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--up-border-strong);
  border-radius: 6px;
  font: inherit;
  color: var(--up-charcoal);
  background: var(--up-white);
}
.form-field textarea { min-height: 140px; resize: vertical; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: 3px solid var(--up-green);
  outline-offset: 1px;
}
.form-actions { margin-top: 22px; }
.form-privacy-note {
  margin: 14px 0 0;
  color: var(--up-charcoal-soft);
  font-size: 0.85rem;
}
.form-message {
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 6px;
  font-size: 0.92rem;
}
/* Status regions stay in the page so screen readers announce them
   reliably; they take up no space until a message is written. */
.form-message:empty {
  margin: 0;
  padding: 0;
  border: 0;
}
.form-required-note { margin: 0; }
.form-message--success { background: var(--up-green-light); color: var(--up-green-dark); border: 1px solid rgba(24, 137, 66, 0.3); }
.form-message--error { background: #fdecec; color: #a3221c; border: 1px solid #f3bcb9; }
.form-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form-turnstile { margin-top: 18px; }
.enquiry-form .btn[disabled],
.enquiry-form .btn[aria-disabled="true"] { opacity: 0.65; cursor: not-allowed; }
.enquiry-aside {
  padding: 26px 24px;
  border-radius: var(--radius-sm);
  background: var(--up-off-white);
}
.enquiry-aside h3 { font-size: 1.15rem; margin-bottom: 10px; }
.enquiry-aside p { margin: 0 0 14px; color: var(--up-charcoal-soft); }
.enquiry-aside p:last-of-type { margin-bottom: 0; }
.enquiry-aside-list { margin: 16px 0 0; padding: 0; list-style: none; }
.enquiry-aside-list li {
  position: relative;
  margin-bottom: 10px;
  padding-left: 22px;
  color: var(--up-charcoal);
  font-size: 0.92rem;
}
.enquiry-aside-list li:last-child { margin-bottom: 0; }
.enquiry-aside-operator {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--up-border);
  font-size: 0.9rem;
  color: var(--up-charcoal-soft);
}
.enquiry-aside-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--up-green);
}

.page-contact a[href^="mailto:"],
.form-privacy-note a {
  color: var(--up-green-dark);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.page-contact a[href^="mailto:"]:hover,
.form-privacy-note a:hover {
  color: var(--up-green);
}

/* Helpful to know: 4 balanced, equal height summary cards. */
.contact-summary-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

@media (min-width: 640px) {
  #helpful-to-know .component-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  #helpful-to-know .component-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  #helpful-to-know .component-card {
    grid-column: auto;
  }
}

/* Each card's status pill sits on its own line above the card text. The
   paragraph stays a normal text block (not a flex row), so a sentence
   that contains links, like the General enquiries card, wraps as one
   continuous line of text instead of breaking into separate pieces. */
#helpful-to-know .component-card .status-pill {
  display: table;
  margin-bottom: 0.5rem;
}