/* WordPress-only additions to the static design system. */
.sp-form-success { display: flex; align-items: flex-start; gap: 12px; padding: 20px 22px; border-radius: 16px; background: var(--sp-green-soft, #e9f5df); color: var(--sp-dark, #0b1110); font-size: 15px; line-height: 1.5; }
.sp-form-success i { color: var(--sp-green-dark, #3e7a24); font-size: 22px; }
.sp-form-error { margin: 12px 0 0; color: #b4362b; font-size: 14px; font-weight: 600; }
button[aria-busy="true"] { opacity: .7; cursor: progress; }

/* =========================================================
   Typeface (client request, Oct 2026): same pairing as carbon3.co.uk.
   Poppins for headings, menu, buttons and labels; Inter for body text.
   (Fonts loaded from Google Fonts in inc/assets.php.)
   ========================================================= */
:root {
  --sp-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --sp-serif: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
body, input, select, textarea { font-family: var(--sp-font); }
h1, h2, h3, h4, h5, h6,
.sp-h2, .sp-btn, button,
.sp-nav__link, .sp-mega__item strong, .sp-mega__col-title strong, .sp-mega__list a, .sp-mega__aside h4,
.sp-mobilenav__parent, .sp-mobilenav__sub a,
.sp-label, .sp-crumb, .sp-footer__col-title, .sp-footer__office-region,
.sp-cs-detail__eyebrow, .sp-svc-strip__eyebrow, .sp-csx__eyebrow, .sp-cst__eyebrow, .sp-cs-related__eyebrow,
.sp-sol-hero__specs strong, .sp-hero__stat-num, .sp-impact__num, .sp-cs-page__stats strong,
.sp-final__title, .sp-footer__finance-title {
  font-family: var(--sp-serif);
}

/* Weight, spacing and line height as carbon3.co.uk (client request, Oct 2026):
   semi-bold headings with normal letter spacing and open line height, lighter labels.
   !important: overrides the many per-component heading rules in style.css / extend.css. */
h1, h2, h3, h4, h5, h6,
.sp-h2, .sp-hero__title, .sp-sol-hero__title, .sp-page-hero__title, .sp-final__title {
  font-weight: 600 !important;
  letter-spacing: normal !important;
}
h1, .sp-hero__title, .sp-sol-hero__title, .sp-page-hero__title { line-height: 1.1 !important; }
h2, .sp-h2, .sp-final__title { line-height: 1.18 !important; }
h3, h4 { line-height: 1.3 !important; }
.sp-label { font-weight: 500; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
/* Phones: keep each hero headline line on one line with the wider (normal) letter spacing. */
@media (max-width: 575.98px) {
  .sp-hero__title { font-size: clamp(28px, 8.8vw, 40px) !important; }
}

/* Calmer heading scale (client request, Oct 2026): close to carbon3.co.uk (42px section headings). */
@media (min-width: 576px) {
  .sp-hero__title { font-size: clamp(36px, 3.8vw, 56px) !important; }
}
.sp-page-hero__title, .sp-sol-hero__title { font-size: clamp(30px, 3.3vw, 48px) !important; }
.sp-h2, .sp-tl__title, .sp-cst__title, .sp-impact__title, .sp-partners2__title, .sp-installs__title,
.sp-choose__title, .sp-testi__title, .sp-csx__title, .sp-accred2__title, .sp-cs-detail__title,
.sp-oct-export__title, .sp-oct-hustle__title, .sp-oct-power__title, .sp-feas h2, .sp-sol-enquire h2 {
  font-size: clamp(28px, 2.7vw, 40px) !important;
}
.sp-final__title { font-size: clamp(28px, 2.9vw, 42px) !important; }
.sp-svc-panel__title, .sp-testi__video-title, .sp-testi__reviews-title { font-size: clamp(22px, 2vw, 28px) !important; }

/* Lighter homepage hero (client request, Oct 2026): overlay roughly halved, video slightly brighter. */
.sp-hero__scrim {
  background:
    linear-gradient(180deg, transparent 62%, rgba(11, 17, 16, .32) 85%, rgba(11, 17, 16, .28) 100%),
    linear-gradient(90deg, rgba(11, 17, 16, .12) 0%, rgba(11, 17, 16, .26) 32%, rgba(11, 17, 16, .08) 60%, rgba(11, 17, 16, 0) 90%) !important;
}
@media (max-width: 991.98px) {
  .sp-hero__scrim { background: linear-gradient(180deg, rgba(11, 17, 16, .28) 0%, rgba(11, 17, 16, .16) 35%, rgba(11, 17, 16, .2) 65%, rgba(11, 17, 16, .5) 100%) !important; }
}
.sp-hero__video { filter: saturate(1.1) contrast(1.03) brightness(1.08); }
/* Hero text stays readable on the lighter background. */
.sp-hero__title, .sp-hero__lede { text-shadow: 0 2px 16px rgba(0, 0, 0, .55), 0 1px 3px rgba(0, 0, 0, .4); }
@media (max-width: 991.98px) {
  .sp-hero__scrim { background: linear-gradient(180deg, rgba(11, 17, 16, .42) 0%, rgba(11, 17, 16, .32) 40%, rgba(11, 17, 16, .36) 70%, rgba(11, 17, 16, .55) 100%) !important; }
}

/* =========================================================
   Contact bar above the header (client request, Oct 2026).
   Part of the sticky header, so phone / email stay visible while scrolling.
   Text and visibility: Site Settings → Header. Phone, email, WhatsApp: Site Settings → Contact.
   ========================================================= */
.sp-topbar { display: block; background: #0b1110; border-bottom: 1px solid rgba(255, 255, 255, .06); font-size: 13px; }
.sp-topbar__inner { height: 38px; }
.sp-topbar__link, .sp-topbar__meta { color: rgba(255, 255, 255, .86); font-weight: 500; }
.sp-topbar__link:hover { color: #ffffff; }
.sp-topbar__link:hover i { color: #ffffff; }
.sp-topbar__link i, .sp-topbar__meta i { color: var(--sp-green-light, #7bcb55); }
.sp-topbar__sep { background: rgba(255, 255, 255, .18); }
.sp-header.is-stuck:not(.is-dark) .sp-topbar { background: #0b1110; }
@media (max-width: 991.98px) {
  .sp-topbar__left { display: none; }
  .sp-topbar__inner { justify-content: center; height: 34px; }
}
@media (max-width: 575.98px) {
  .sp-topbar { font-size: 12px; }
  .sp-topbar__right { gap: 10px; }
  .sp-topbar__email, .sp-topbar__sep--wa, .sp-topbar__link--wa { display: none; }
}
/* Contact bar in the brand green (client request). */
.sp-topbar, .sp-header.is-stuck:not(.is-dark) .sp-topbar { background: #6ab544; border-bottom-color: rgba(0, 0, 0, .06); }
.sp-topbar__link, .sp-topbar__meta { color: #ffffff; font-weight: 600; }
.sp-topbar__link i, .sp-topbar__meta i { color: #ffffff; }
.sp-topbar__link:hover, .sp-topbar__link:hover i { color: #0b1110; }
.sp-topbar__sep { background: rgba(255, 255, 255, .45); }
/* Hero: one compact call to action (client request). */
.sp-hero__ctas .sp-btn { height: 50px; padding: 0 24px; font-size: 14.5px; }
@media (max-width: 575.98px) { .sp-hero__ctas .sp-btn { height: 48px; padding: 0 22px; font-size: 14px; } }

/* Hero headline refinement (client request, Oct 2026): balanced size, tight leading, readable copy. */
@media (min-width: 576px) {
  .sp-hero__title { font-size: clamp(40px, 4.15vw, 62px) !important; line-height: 1.04 !important; margin-bottom: 22px !important; }
  .sp-hero__lede { font-size: 18px; line-height: 1.6; max-width: 540px; margin-bottom: 30px; }
}
.sp-hero__title em { color: #7bcb55; }
/* Soft shade behind the text column only; the right side of the video stays bright. */
@media (min-width: 992px) {
  .sp-hero__scrim {
    background:
      linear-gradient(90deg, rgba(11, 17, 16, .5) 0%, rgba(11, 17, 16, .32) 32%, rgba(11, 17, 16, .08) 55%, rgba(11, 17, 16, 0) 70%),
      linear-gradient(180deg, transparent 62%, rgba(11, 17, 16, .3) 100%) !important;
  }
}

/* Group menu panels (Sectors, Services): columns follow the number of sections. */
@media (min-width: 1200px) {
  .sp-mega--sectors .sp-mega__cols { grid-template-columns: repeat(var(--sp-cols, 5), minmax(0, 1fr)); }
  .sp-mega--sectors[data-cols="2"] { width: min(760px, 96vw); }
  .sp-mega--sectors[data-cols="3"] { width: min(1000px, 96vw); }
}
@media (min-width: 1200px) {
  .sp-mega--sectors[data-cols="2"] { width: min(940px, 96vw); }
  .sp-mega--sectors .sp-mega__foot .sp-btn { flex: none; white-space: nowrap; }
  .sp-mega--sectors .sp-mega__foot-copy a { white-space: nowrap; }
}

/* Main menu: larger text and even spacing now there are 7 items (client request, Oct 2026). */
@media (min-width: 1200px) {
  .sp-header .sp-nav { flex: 1 1 auto; justify-content: center; }
  .sp-header .sp-nav__list { gap: 6px; }
  .sp-header .sp-nav__link { font-size: 15.5px; font-weight: 500; padding: 12px 16px; gap: 6px; }
  .sp-header .sp-nav__link .bi-chevron-down { font-size: 11px; }
  .sp-header .sp-nav__link.is-active::after { left: 16px; right: 16px; }
}
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .sp-header .sp-nav__list { gap: 2px; }
  .sp-header .sp-nav__link { font-size: 15px; padding: 12px 12px; }
  .sp-header .sp-nav__link.is-active::after { left: 12px; right: 12px; }
}
@media (min-width: 1600px) {
  .sp-header .sp-nav__list { gap: 12px; }
  .sp-header .sp-nav__link { font-size: 16px; padding: 12px 18px; }
}
/* Menu over the homepage video: keep it readable. */
.sp-header.is-dark:not(.is-stuck) .sp-nav__link { color: #ffffff; font-weight: 600; text-shadow: 0 1px 8px rgba(0, 0, 0, .55); }

/* Mega menu footer strip in the brand green (client request, Oct 2026). */
@media (min-width: 1200px) {
  .sp-mega__foot { background: #6ab544 !important; color: #ffffff !important; }
  .sp-mega__foot-copy, .sp-mega__foot-copy i { color: #ffffff !important; }
  .sp-mega__foot-copy a { color: #ffffff !important; text-decoration: underline; text-underline-offset: 3px; }
  .sp-mega__foot-copy a:hover { color: #0b1110 !important; }
  .sp-mega__foot .sp-btn { background: #ffffff !important; color: #3e7a24 !important; border-color: #ffffff !important; box-shadow: none !important; }
  .sp-mega__foot .sp-btn:hover { background: #0b1110 !important; color: #ffffff !important; border-color: #0b1110 !important; }
}

/* Section headings: use the full width of their column and break into even lines,
   instead of narrow fixed widths that left one word on its own (client request, Oct 2026). */
h1, h2, h3 { text-wrap: balance; }
.sp-tl__title, .sp-impact__title, .sp-accred2__title, .sp-partners2__title, .sp-installs__title,
.sp-choose__title, .sp-testi__title, .sp-cst__title, .sp-csx__title { max-width: none !important; }
/* "One team, / from first survey to long-term care." – green phrase on its own line. */
.sp-tl__title em { display: block; }

/* Footer: Union Jack badge (client feedback). */
.sp-footer__ukflag { display: inline-block; width: 26px; height: 13px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); flex: none; }
.sp-footer__badge { display: inline-flex; align-items: center; gap: 8px; }
/* Brand ribbon: logos marked "Larger" in the homepage section. */
.sp-brands__slot--lg img { transform: scale(1.45); transform-origin: center; }

/* =========================================================
   Battery brands: cards (Battery Storage page) and brand pages (Oct 2026)
   ========================================================= */
.sp-brandcards__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.sp-brandcard { display: flex; flex-direction: column; background: #ffffff; border: 1px solid #e3eddc; border-radius: 20px; overflow: hidden; color: var(--sp-dark); text-decoration: none; transition: transform .3s var(--sp-ease-out), box-shadow .3s; }
.sp-brandcard:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -40px rgba(11, 17, 16, .5); color: var(--sp-dark); }
.sp-brandcard__logo { display: flex; align-items: center; justify-content: center; height: 76px; padding: 16px 22px; border-bottom: 1px solid #eef3ea; }
.sp-brandcard__logo img { max-height: 38px; max-width: 150px; width: auto; height: auto; object-fit: contain; }
.sp-brandcard__media { display: flex; align-items: center; justify-content: center; height: 180px; padding: 14px; background: #f6f9f4; }
.sp-brandcard__media img { max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; }
.sp-brandcard__body { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 20px; flex: 1; }
.sp-brandcard__name { font-family: var(--sp-serif); font-size: 18px; font-weight: 600; }
.sp-brandcard__text { font-size: 14px; line-height: 1.55; color: var(--sp-muted); }
.sp-brandcard__specs { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--sp-muted); }
.sp-brandcard__specs strong { color: var(--sp-dark); }
.sp-brandcard__cta { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; color: var(--sp-green-text, #6ab544); }
.sp-brandcards__grid--compact { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.sp-brandcard--compact .sp-brandcard__cta { padding: 14px 18px; justify-content: space-between; }

.sp-brandhero { padding: 40px 0 72px; background: linear-gradient(180deg, #f4f8f2 0%, #ffffff 100%); }
.sp-brandhero .sp-crumb { margin-bottom: 28px; }
.sp-brandhero .sp-crumb a, .sp-brandhero .sp-crumb span { color: var(--sp-dark); }
.sp-brandhero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 48px; align-items: center; }
.sp-brandhero__logo { display: inline-flex; margin-bottom: 18px; }
.sp-brandhero__logo img { max-height: 44px; width: auto; }
.sp-brandhero__title { font-size: clamp(32px, 3.4vw, 50px); line-height: 1.08; margin: 14px 0 16px; color: var(--sp-dark); }
.sp-brandhero__title em { font-style: normal; color: var(--sp-green-text, #6ab544); }
.sp-brandhero__lede { font-size: 17px; line-height: 1.65; color: var(--sp-muted); max-width: 560px; margin-bottom: 26px; }
.sp-brandhero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.sp-brandhero__media { background: #ffffff; border: 1px solid #e3eddc; border-radius: 26px; padding: 26px; box-shadow: 0 40px 80px -60px rgba(11, 17, 16, .45); }
.sp-brandhero__media > img { display: block; width: 100%; height: 320px; object-fit: contain; }
.sp-brandhero__specs { list-style: none; margin: 18px 0 0; padding: 18px 0 0; border-top: 1px solid #eef3ea; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.sp-brandhero__specs strong { display: block; font-family: var(--sp-serif); font-size: 22px; color: var(--sp-dark); }
.sp-brandhero__specs span { font-size: 13px; color: var(--sp-muted); }
.sp-brandlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sp-brandlist li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.5; color: var(--sp-dark); }
.sp-brandlist i { color: var(--sp-green-text, #6ab544); margin-top: 2px; flex: none; }
.sp-brandaside .sp-brandlist { margin-top: 12px; }
.sp-brandtable-wrap { overflow-x: auto; border: 1px solid #e3eddc; border-radius: 18px; background: #ffffff; }
.sp-brandtable { width: 100%; border-collapse: collapse; font-size: 15px; }
.sp-brandtable th, .sp-brandtable td { padding: 16px 20px; text-align: left; vertical-align: top; border-bottom: 1px solid #eef3ea; }
.sp-brandtable th { background: #f4f8f2; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--sp-muted); font-weight: 600; }
.sp-brandtable tr:last-child td { border-bottom: 0; }
.sp-brandcols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.sp-brandcol { background: #ffffff; border: 1px solid #e3eddc; border-radius: 20px; padding: 26px; }
.sp-brandcol h3 { font-size: 18px; margin: 0 0 16px; }
.sp-brandrange-img { background: #ffffff; border: 1px solid #e3eddc; border-radius: 18px; padding: 16px; }
.sp-brandrange-img img { width: 100%; height: auto; }
@media (max-width: 991.98px) {
  .sp-brandhero__grid, .sp-brandcols { grid-template-columns: minmax(0, 1fr); }
  .sp-brandhero__media > img { height: 240px; }
}
.sp-brandhero .sp-crumb ol { background: #ffffff !important; border: 1px solid #e3eddc !important; backdrop-filter: none !important; }
.sp-brandhero .sp-crumb li, .sp-brandhero .sp-crumb a, .sp-brandhero .sp-crumb span, .sp-brandhero .sp-crumb i { color: var(--sp-dark) !important; }
.sp-brandhero .sp-crumb li:first-child a { background: #e9f5df !important; }
.sp-brandhero .sp-crumb li:first-child a i { color: #3e7a24 !important; }
.sp-brandaside .sp-brandlist li { justify-content: flex-start !important; text-align: left; padding: 10px 0; border-bottom: 1px solid #eef3ea; }
.sp-brandaside .sp-brandlist li:last-child { border-bottom: 0; }

/* By-sector cards: two cards share the full width */
@media (min-width: 576px) { .sp-sol-sectors__grid:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); } }

/* Brand ribbon: featured brands get a larger card */
.sp-brands__slot--feature { width: 158px; height: 64px; border-color: rgba(106, 181, 68, .45); }
.sp-brands__slot--feature img { max-height: 38px; }
@media (max-width: 575.98px) { .sp-brands__slot--feature { width: 132px; height: 54px; } .sp-brands__slot--feature img { max-height: 32px; } }

/* Links inside section intros */
.sp-section__intro a { color: var(--sp-green-text); text-decoration: underline; text-underline-offset: 3px; }
.sp-section__intro a:hover { color: var(--sp-ink, #0b1110); }

/* Brand cards: brand name shown when no logo has been uploaded */
.sp-brandcard__wordmark { font-family: var(--sp-serif); font-weight: 600; font-size: 19px; color: var(--sp-dark, #0b1110); letter-spacing: normal; text-align: center; }

/* Gallery "Show the whole photo" style, for product shots on white */
.sp-sol-gallery__grid--contain { grid-auto-rows: 300px; }
.sp-sol-gallery__grid--contain .sp-sol-gallery__item { background: #fff; border: 1px solid var(--sp-border); }
.sp-sol-gallery__grid--contain .sp-sol-gallery__item img { object-fit: contain; padding: 22px 22px 52px; }
.sp-sol-gallery__grid--contain .sp-sol-gallery__item:hover img { transform: scale(1.03); }
.sp-sol-gallery__grid--contain .sp-sol-gallery__caption { color: var(--sp-dark, #0b1110); text-shadow: none; font-size: 13.5px; bottom: 16px; text-align: center; }
@media (max-width: 991.98px) { .sp-sol-gallery__grid--contain { grid-auto-rows: 260px; } }
@media (min-width: 992px) { .sp-sol-gallery__grid--contain { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 480px) and (max-width: 991.98px) { .sp-sol-gallery__grid--contain { grid-template-columns: repeat(2, 1fr); } }

/* By-sector cards: three cards share the full width on large screens */
@media (min-width: 1200px) { .sp-sol-sectors__grid:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); } }

/* Accreditation tiles that link to a certificate */
.sp-accred2__tile--link > a { display: contents; color: inherit; text-decoration: none; }
.sp-accred2__tile--link { cursor: pointer; }
.sp-accred2__tile--link .sp-accred2__cap { color: var(--sp-green-text); }
.sp-accred2__tile--link:hover .sp-accred2__cap { text-decoration: underline; }

/* Credential logo strips: seven logos sit on one row (ECA added) */
@media (min-width: 992px) { .sp-sol-trust__logos:has(> :nth-child(7):last-child) { grid-template-columns: repeat(7, 1fr); gap: 16px; } }
@media (max-width: 575.98px) { .sp-sol-trust__logos:has(> :nth-child(7):last-child) { grid-template-columns: repeat(4, 1fr); } }

/* Photo-hero breadcrumb: sit in normal flow above the eyebrow (the old absolute position assumed a header overlaying the hero) */
.sp-sol-hero .sp-breadcrumb--onDark { position: static; max-width: none; margin: 0 0 18px; padding: 0; flex-wrap: wrap; row-gap: 4px; }
@media (max-width: 575.98px) { .sp-sol-hero .sp-breadcrumb--onDark { margin-bottom: 14px; padding: 0; } }

/* Photo hero: optional ticked points and note */
.sp-sol-hero__points { list-style: none; margin: 4px 0 18px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 22px; max-width: 620px; }
.sp-sol-hero__points li { display: flex; align-items: flex-start; gap: 10px; color: #fff; font-weight: 500; font-size: 15px; line-height: 1.4; }
.sp-sol-hero__points i { color: #7bcb55; font-size: 17px; line-height: 1.2; flex: 0 0 auto; }
.sp-sol-hero__note { color: rgba(255, 255, 255, .82); font-size: 15px; line-height: 1.6; max-width: 600px; margin: 0 0 26px; padding-left: 14px; border-left: 3px solid #6ab544; }
@media (max-width: 575.98px) { .sp-sol-hero__points { grid-template-columns: 1fr; } }

/* Card grids: five cards fill two full rows (3 + 2 wider) instead of leaving a gap */
@media (min-width: 992px) {
  .sp-sol-included__grid--3:has(> :nth-child(5):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .sp-sol-included__grid--3:has(> :nth-child(5):last-child) > * { grid-column: span 2; }
  .sp-sol-included__grid--3:has(> :nth-child(5):last-child) > :nth-child(n+4) { grid-column: span 3; }
}

/* Long "who it's for" lists (7+) wrap as tags rather than a fixed grid */
.sp-audience:has(> :nth-child(7)) { display: flex; flex-wrap: wrap; }
.sp-audience:has(> :nth-child(7)) li { flex: 0 1 auto; }

/* ==========================================================================
   Landing-page sections (lp_hero, lp_split, lp_checker, lp_tiles)
   ========================================================================== */
.lp-hero { position: relative; overflow: hidden; color: #fff; background: var(--sp-dark); padding-top: 56px; }
.lp-hero__bg { position: absolute; inset: 0; }
.lp-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.lp-hero__scrim { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(8, 14, 12, .94) 0%, rgba(8, 14, 12, .84) 46%, rgba(8, 14, 12, .5) 100%); }
.lp-hero__inner { position: relative; z-index: 1; }
.lp-hero__crumb { position: static !important; padding: 0 !important; margin: 0 0 26px !important; max-width: none !important; flex-wrap: wrap; }
.lp-hero__grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 56px; align-items: center; padding-bottom: 64px; }
.lp-hero__grid--single { grid-template-columns: minmax(0, 760px); }
.lp-hero__badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: rgba(106, 181, 68, .16); border: 1px solid rgba(123, 203, 85, .45); color: #d4f2c3; font-size: 13px; font-weight: 600; letter-spacing: .02em; margin-bottom: 18px; }
.lp-hero__badge i { color: #7bcb55; }
.lp-hero__title { font-family: var(--sp-serif); font-weight: 600; font-size: clamp(34px, 3.6vw, 54px); line-height: 1.08; color: #fff; margin: 0 0 18px; text-wrap: balance; }
.lp-hero__title em { font-style: normal; color: #7bcb55; }
.lp-hero__lede { font-size: 17px; line-height: 1.65; color: rgba(255, 255, 255, .86); max-width: 610px; margin: 0 0 22px; }
.lp-hero__ticks { list-style: none; margin: 0 0 20px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px 24px; max-width: 620px; }
.lp-hero__ticks li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; font-weight: 500; line-height: 1.4; color: #fff; }
.lp-hero__ticks i { flex: 0 0 22px; height: 22px; border-radius: 50%; background: var(--sp-green); color: #fff; display: grid; place-items: center; font-size: 13px; margin-top: -1px; }
.lp-hero__note { color: rgba(255, 255, 255, .8); font-size: 15px; line-height: 1.6; max-width: 600px; margin: 0 0 28px; padding-left: 14px; border-left: 3px solid var(--sp-green); }
.lp-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }

.lp-est { background: #fff; color: var(--sp-dark); border-radius: 22px; padding: 30px; box-shadow: 0 34px 70px -24px rgba(0, 0, 0, .55); }
.lp-est__label { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--sp-green-dark); }
.lp-est__title { font-family: var(--sp-serif); font-size: 24px !important; font-weight: 600; line-height: 1.25; margin: 8px 0 22px; color: var(--sp-dark); }
.lp-est__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.lp-est__row label { font-size: 14px; color: var(--sp-muted); }
.lp-est__cost { font-family: var(--sp-serif); font-size: 28px; font-weight: 600; color: var(--sp-dark); font-variant-numeric: tabular-nums; }
.lp-est__range { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 999px; background: linear-gradient(to right, var(--sp-green) var(--lp-fill, 26%), #e5ebe2 var(--lp-fill, 26%)); outline: none; margin: 4px 0 8px; cursor: pointer; }
.lp-est__range::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 3px solid var(--sp-green); box-shadow: 0 4px 12px rgba(11, 17, 16, .25); }
.lp-est__range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid var(--sp-green); box-shadow: 0 4px 12px rgba(11, 17, 16, .25); }
.lp-est__range:focus-visible { box-shadow: 0 0 0 4px rgba(106, 181, 68, .3); }
.lp-est__scale { display: flex; justify-content: space-between; font-size: 12px; color: var(--sp-muted); margin-bottom: 18px; font-variant-numeric: tabular-nums; }
.lp-est__results { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lp-est__res { border: 1px solid var(--sp-border); border-radius: 14px; padding: 14px 16px; display: grid; gap: 4px; }
.lp-est__res span { font-size: 12.5px; color: var(--sp-muted); }
.lp-est__res strong { font-family: var(--sp-serif); font-size: 24px; font-weight: 600; color: var(--sp-dark); font-variant-numeric: tabular-nums; }
.lp-est__res--grant { background: var(--sp-green-soft); border-color: rgba(106, 181, 68, .35); }
.lp-est__res--grant strong { color: var(--sp-green-dark); }
.lp-est__bar { height: 6px; border-radius: 999px; background: #edf1ea; margin: 14px 0 12px; overflow: hidden; }
.lp-est__bar span { display: block; height: 100%; background: var(--sp-green); border-radius: inherit; transition: width .35s var(--sp-ease); }
.lp-est__note { font-size: 12.5px; line-height: 1.5; color: var(--sp-muted); margin: 0 0 18px; }
.lp-est__cta { width: 100%; justify-content: center; }

.lp-hero__facts { position: relative; z-index: 1; border-top: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .05); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.lp-hero__facts ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lp-hero__facts li { display: flex; align-items: center; gap: 12px; padding: 20px 18px 20px 0; font-size: 14px; color: rgba(255, 255, 255, .78); }
.lp-hero__facts li + li { padding-left: 18px; border-left: 1px solid rgba(255, 255, 255, .1); }
.lp-hero__facts i { color: #7bcb55; font-size: 20px; }
.lp-hero__facts strong { color: #fff; font-weight: 600; }

.lp-split__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.lp-split__body p { font-size: 16.5px; line-height: 1.75; color: var(--sp-text); }
.lp-split__hl { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.lp-split__hl li { border: 1px solid var(--sp-border); background: #fff; border-radius: 16px; padding: 16px; display: grid; gap: 4px; }
.lp-split__hl i { color: var(--sp-green); font-size: 20px; }
.lp-split__hl strong { font-family: var(--sp-serif); font-size: 22px; font-weight: 600; color: var(--sp-dark); }
.lp-split__hl span { font-size: 13px; color: var(--sp-muted); line-height: 1.4; }
.lp-split__steps { background: #fff; border: 1px solid var(--sp-border); border-radius: 22px; padding: 32px; box-shadow: 0 24px 48px -32px rgba(11, 17, 16, .35); }
.lp-split__steps-title { font-family: var(--sp-serif); font-size: 20px !important; font-weight: 600; margin: 0 0 20px; color: var(--sp-dark); }
.lp-timeline { list-style: none; margin: 0; padding: 0; }
.lp-timeline__item { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; padding-bottom: 22px; }
.lp-timeline__item:last-child { padding-bottom: 0; }
.lp-timeline__item:not(:last-child)::before { content: ""; position: absolute; left: 21px; top: 46px; bottom: 4px; width: 2px; background: linear-gradient(var(--sp-green), rgba(106, 181, 68, .15)); }
.lp-timeline__num { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--sp-green-soft); color: var(--sp-green-dark); font-family: var(--sp-serif); font-weight: 600; font-size: 15px; border: 1px solid rgba(106, 181, 68, .35); }
.lp-timeline h4 { font-family: var(--sp-serif); font-size: 17px; font-weight: 600; margin: 10px 0 4px; color: var(--sp-dark); }
.lp-timeline p { font-size: 14.5px; line-height: 1.6; color: var(--sp-muted); margin: 0; }
.lp-split__cta { margin-top: 24px; }

.lp-check__grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: 56px; align-items: start; }
.lp-check__intro { font-size: 16.5px; line-height: 1.7; color: var(--sp-muted); margin: 0 0 18px; }
.lp-check__criteria { list-style: none; margin: 0; padding: 0; }
.lp-check__criteria li { display: flex; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--sp-border); }
.lp-check__criteria li:first-child { border-top: 1px solid var(--sp-border); }
.lp-check__icon { flex: 0 0 46px; height: 46px; border-radius: 12px; background: var(--sp-green-soft); color: var(--sp-green-dark); display: grid; place-items: center; font-size: 20px; }
.lp-check__criteria strong { font-family: var(--sp-serif); font-size: 16.5px; font-weight: 600; color: var(--sp-dark); }
.lp-check__criteria p { font-size: 14.5px; line-height: 1.6; color: var(--sp-muted); margin: 4px 0 0; }
.lp-check__small { font-size: 13px; color: var(--sp-muted); margin: 16px 0 0; display: flex; gap: 8px; align-items: flex-start; line-height: 1.5; }
.lp-check__tool { background: #fff; border: 1px solid var(--sp-border); border-radius: 22px; padding: 28px; box-shadow: 0 24px 48px -32px rgba(11, 17, 16, .35); }
.lp-check__tool-title { display: flex; align-items: center; gap: 10px; font-family: var(--sp-serif); font-size: 19px !important; font-weight: 600; margin: 0 0 18px; color: var(--sp-dark); }
.lp-check__tool-title i { color: var(--sp-green); }
.lp-q { border: 1px solid var(--sp-border); border-radius: 14px; padding: 14px 16px; margin: 0 0 12px; transition: border-color .2s ease, background .2s ease; }
.lp-q legend { float: left; width: 100%; padding: 0; margin: 0 0 12px; font-size: 14.5px; font-weight: 500; line-height: 1.45; color: var(--sp-dark); display: flex; gap: 10px; }
.lp-q__num { flex: 0 0 22px; height: 22px; border-radius: 50%; background: var(--sp-light); display: grid; place-items: center; font-size: 12px; font-weight: 600; color: var(--sp-muted); }
.lp-q__opts { clear: both; display: flex; gap: 8px; padding-left: 32px; }
.lp-q__opts label { position: relative; cursor: pointer; }
.lp-q__opts input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.lp-q__opts span { display: inline-flex; align-items: center; padding: 7px 20px; border: 1px solid rgba(11, 17, 16, .16); border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--sp-dark); transition: all .2s ease; }
.lp-q__opts label:hover span { border-color: var(--sp-green); }
.lp-q__opts input:focus-visible + span { box-shadow: 0 0 0 3px rgba(106, 181, 68, .35); }
.lp-q__opts input[value="yes"]:checked + span { background: var(--sp-green); border-color: var(--sp-green); color: #fff; }
.lp-q__opts input[value="no"]:checked + span { background: var(--sp-dark); border-color: var(--sp-dark); color: #fff; }
.lp-q.is-yes { border-color: rgba(106, 181, 68, .5); background: rgba(233, 245, 223, .45); }
.lp-q.is-no { border-color: rgba(11, 17, 16, .22); }
.lp-check__progress { font-size: 13px; color: var(--sp-muted); margin-top: 4px; }
.lp-result { display: flex; gap: 14px; padding: 18px; border-radius: 16px; margin-top: 6px; }
.lp-result > i { font-size: 26px; line-height: 1; }
.lp-result strong { font-family: var(--sp-serif); font-size: 17px; font-weight: 600; color: var(--sp-dark); }
.lp-result p { font-size: 14px; line-height: 1.55; color: var(--sp-text); margin: 4px 0 12px; }
.lp-result--pass { background: var(--sp-green-soft); border: 1px solid rgba(106, 181, 68, .4); }
.lp-result--pass > i { color: var(--sp-green-dark); }
.lp-result--fail { background: #fff7ec; border: 1px solid #f1d6ad; }
.lp-result--fail > i { color: #b06a00; }

.lp-tiles__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--lp-cols, 5), minmax(0, 1fr)); gap: 16px; }
.lp-tile { background: #fff; border: 1px solid var(--sp-border); border-radius: 18px; transition: transform .3s var(--sp-ease-out), box-shadow .3s ease, border-color .3s ease; }
.lp-tile > a, .lp-tile:not(.lp-tile--link) { display: flex; flex-direction: column; height: 100%; padding: 26px 22px; color: inherit; text-decoration: none; }
.lp-tile--link { padding: 0; }
.lp-tile--link:hover { transform: translateY(-3px); border-color: rgba(106, 181, 68, .45); box-shadow: 0 18px 36px -24px rgba(11, 17, 16, .35); }
.lp-tile__icon { width: 52px; height: 52px; border-radius: 14px; background: var(--sp-green-soft); color: var(--sp-green-dark); display: grid; place-items: center; font-size: 24px; margin-bottom: 16px; }
.lp-tile h3 { font-family: var(--sp-serif); font-size: 17px !important; font-weight: 600; line-height: 1.3; margin: 0 0 8px; color: var(--sp-dark); }
.lp-tile p { font-size: 14px; line-height: 1.6; color: var(--sp-muted); margin: 0 0 14px; }
.lp-tile__more { margin-top: auto; font-size: 13.5px; font-weight: 600; color: var(--sp-green-dark); display: inline-flex; gap: 6px; align-items: center; }

@media (max-width: 1199.98px) {
  .lp-tiles__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lp-hero__grid { gap: 40px; }
}
@media (max-width: 991.98px) {
  .lp-hero { padding-top: 40px; }
  .lp-hero__grid, .lp-split__grid, .lp-check__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .lp-est { max-width: 560px; }
  .lp-hero__facts ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-hero__facts li:nth-child(3) { border-left: 0; padding-left: 0; }
  .lp-hero__facts li:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .1); }
  .lp-tiles__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
  .lp-hero__ticks { grid-template-columns: minmax(0, 1fr); }
  .lp-est, .lp-split__steps, .lp-check__tool { padding: 22px; }
  .lp-est__results { grid-template-columns: 1fr 1fr; }
  .lp-est__res strong { font-size: 20px; }
  .lp-split__hl { grid-template-columns: minmax(0, 1fr); }
  .lp-tiles__grid { grid-template-columns: minmax(0, 1fr); }
  .lp-q__opts { padding-left: 0; }
  .lp-hero__facts li { padding: 16px 10px 16px 0; font-size: 13px; }
  .lp-hero__facts li + li { padding-left: 10px; }
}
@media (prefers-reduced-motion: reduce) { .lp-est__bar span, .lp-tile { transition: none; } }
.lp-split__copy .sp-h2, .lp-check__info .sp-h2 { margin-bottom: 18px; }
.lp-split__body p:first-child { margin-top: 0; }
@media (max-width: 575.98px) {
  .lp-hero__ctas .sp-btn, .lp-split__cta, .lp-result .sp-btn { width: 100%; justify-content: center; text-align: center; white-space: normal; line-height: 1.3; height: auto; min-height: 50px; padding-top: 12px; padding-bottom: 12px; }
}

/* Eligibility checker as a lead form */
.lp-q__opts input[value="Yes"]:checked + span { background: var(--sp-green); border-color: var(--sp-green); color: #fff; }
.lp-q__opts input[value="No"]:checked + span { background: var(--sp-dark); border-color: var(--sp-dark); color: #fff; }
.lp-result__link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--sp-green-dark); text-decoration: underline; text-underline-offset: 3px; }
.lp-check__contact { margin-top: 18px; padding-top: 20px; border-top: 1px dashed rgba(11, 17, 16, .14); }
.lp-check__contact-title { font-family: var(--sp-serif); font-size: 18px !important; font-weight: 600; margin: 0 0 6px; color: var(--sp-dark); }
.lp-check__contact-text { font-size: 14px; line-height: 1.55; color: var(--sp-muted); margin: 0 0 14px; }
.lp-check__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.lp-field { display: grid; gap: 6px; }
.lp-field label { font-size: 13px; font-weight: 600; color: var(--sp-dark); }
.lp-field sup { color: var(--sp-green-dark); }
.lp-field input { width: 100%; height: 46px; padding: 0 14px; border: 1px solid rgba(11, 17, 16, .16); border-radius: 12px; font: inherit; font-size: 15px; color: var(--sp-dark); background: #fff; transition: border-color .2s ease, box-shadow .2s ease; }
.lp-field input:focus { outline: none; border-color: var(--sp-green); box-shadow: 0 0 0 3px rgba(106, 181, 68, .25); }
.lp-check__consent { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 16px; font-size: 13px; line-height: 1.5; color: var(--sp-muted); cursor: pointer; }
.lp-check__consent input { margin-top: 3px; accent-color: var(--sp-green); }
.lp-check__consent a { color: var(--sp-green-dark); }
.lp-check__submit { width: 100%; justify-content: center; }
.lp-check__reassure { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12.5px; color: var(--sp-muted); margin: 10px 0 0; }
.lp-check__reassure i { color: var(--sp-green); }
.lp-check__tool .sp-form-success { display: flex; gap: 14px; align-items: flex-start; padding: 22px; border-radius: 16px; background: var(--sp-green-soft); border: 1px solid rgba(106, 181, 68, .4); font-size: 15px; line-height: 1.55; }
.lp-check__tool .sp-form-success i { font-size: 26px; color: var(--sp-green-dark); }
.lp-check__tool .sp-form-error { margin: 10px 0 0; font-size: 14px; color: #b42318; }
@media (max-width: 575.98px) { .lp-check__fields { grid-template-columns: minmax(0, 1fr); } .lp-check__submit { white-space: normal; height: auto; min-height: 50px; } }

/* "Our team will" as a single row of small cards */
.lp-split__grid--row { grid-template-columns: minmax(0, 1fr); gap: 30px; }
.lp-split__grid--row .lp-split__copy { max-width: 820px; }
.lp-split__grid--row .lp-split__steps { background: none; border: 0; box-shadow: none; padding: 0; }
.lp-split__grid--row .lp-split__steps-title { font-size: 18px !important; margin-bottom: 14px; }
.lp-timeline--row { display: grid; grid-template-columns: repeat(var(--lp-steps, 5), minmax(0, 1fr)); gap: 14px; }
.lp-timeline--row .lp-timeline__item { grid-template-columns: 1fr; gap: 12px; padding: 18px; background: #fff; border: 1px solid var(--sp-border); border-radius: 16px; align-content: start; }
.lp-timeline--row .lp-timeline__item::before { display: none; }
.lp-timeline--row .lp-timeline__num { width: 38px; height: 38px; font-size: 14px; }
.lp-timeline--row h4 { margin: 0; font-size: 15.5px; line-height: 1.35; }

/* Compact project tiles (icon + title) */
.lp-tile > a, .lp-tile:not(.lp-tile--link) { padding: 20px 18px; }
.lp-tile__icon { width: 46px; height: 46px; font-size: 21px; margin-bottom: 14px; }
.lp-tile h3 { font-size: 15.5px !important; margin-bottom: 0; }
.lp-tile p:empty { display: none; }
.lp-tile__more { margin-top: 12px; font-size: 13px; }

@media (max-width: 991.98px) { .lp-timeline--row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .lp-timeline--row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lp-tiles__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* =========================================================
   Solar grants (BEAS) landing page v4 and its menu link (client request, Oct 2026)
   ========================================================= */

/* Highlighted top-level menu item (menu item option "Highlight this item") */
@media (min-width: 1200px) {
  .sp-header .sp-nav__link.sp-nav__link--highlight { background: var(--sp-green-soft) !important; color: var(--sp-green-dark) !important; border-radius: 999px; padding: 9px 16px !important; margin: 0 4px; box-shadow: inset 0 0 0 1px rgba(106, 181, 68, .4) !important; gap: 7px; text-shadow: none !important; }
  .sp-header .sp-nav__link--highlight i { font-size: 14px !important; opacity: 1 !important; color: var(--sp-green); }
  .sp-header .sp-nav__link--highlight::after { display: none !important; }
  .sp-header .sp-nav__link--highlight:hover, .sp-header .sp-nav__link--highlight.is-active,
  .sp-header.is-dark:not(.is-stuck) .sp-nav__link--highlight { background: var(--sp-green) !important; color: #ffffff !important; box-shadow: none !important; }
  .sp-header .sp-nav__link--highlight:hover i, .sp-header .sp-nav__link--highlight.is-active i,
  .sp-header.is-dark:not(.is-stuck) .sp-nav__link--highlight i { color: #ffffff; }
}
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .sp-header .sp-nav__link.sp-nav__link--highlight { padding: 8px 13px !important; margin: 0 2px; }
}
.sp-mobilenav__row--highlight { border-bottom: 0; margin: 8px 0; }
.sp-mobilenav__row--highlight .sp-mobilenav__parent { padding: 14px 16px; border-radius: 14px; background: rgba(106, 181, 68, .16); border: 1px solid rgba(123, 203, 85, .45); }
.sp-mobilenav__hl { display: inline-flex; align-items: center; gap: 10px; }
.sp-mobilenav__row--highlight .sp-mobilenav__hl i { color: #7bcb55; opacity: 1; font-size: 17px; transform: none !important; }
.sp-mobilenav__row--highlight .sp-mobilenav__parent > i { opacity: 1; }

/* Text beside a dark side card, steps underneath */
.lp-split__grid--row.lp-split__grid--aside { grid-template-columns: minmax(0, 1.3fr) minmax(0, .9fr); gap: 48px 64px; align-items: center; }
.lp-split__grid--aside .lp-split__copy { max-width: none; }
.lp-split__grid--row .lp-split__steps { grid-column: 1 / -1; }
.lp-split__grid--aside .lp-split__steps { background: #f4f8f2; border: 1px solid #e3eddc; border-radius: 24px; padding: 30px; }
.lp-split__aside { position: relative; overflow: hidden; background: #0b1110; color: #ffffff; border-radius: 24px; padding: 34px 32px; box-shadow: 0 34px 70px -40px rgba(11, 17, 16, .6); }
.lp-split__aside::before { content: ""; position: absolute; right: -90px; top: -90px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(106, 181, 68, .38), rgba(106, 181, 68, 0) 70%); pointer-events: none; }
.lp-split__aside > * { position: relative; z-index: 1; }
.lp-split__aside-label { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sp-serif); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #9fdc7c; }
.lp-split__aside-title { font-family: var(--sp-serif); font-size: 23px !important; line-height: 1.3 !important; color: #ffffff; margin: 12px 0 22px; }
.lp-split__aside-title em { font-style: normal; color: #7bcb55; }
.lp-split__aside-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.lp-split__aside-list li { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); font-family: var(--sp-serif); font-size: 15px; font-weight: 500; }
.lp-split__aside-list li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.lp-split__aside-list i { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--sp-green); color: #ffffff; display: grid; place-items: center; font-size: 12px; }
.lp-split__aside-note { margin: 20px 0 0; font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, .72); }
.lp-split__aside-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 14px; font-weight: 600; color: #9fdc7c; text-decoration: underline; text-underline-offset: 3px; }
.lp-split__aside-link:hover { color: #ffffff; }

/* "Our team will" steps with icons and arrows between them */
.lp-split__grid--aside .lp-split__steps-title { font-size: 20px !important; margin-bottom: 18px; }
.lp-timeline--row .lp-timeline__item--icon { padding: 22px 20px 20px; gap: 14px; transition: transform .3s var(--sp-ease-out), box-shadow .3s ease; }
.lp-timeline--row .lp-timeline__item--icon:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -26px rgba(11, 17, 16, .4); }
.lp-timeline--row .lp-timeline__item--icon .lp-timeline__num { position: absolute; top: 18px; right: 18px; width: auto; height: auto; background: none; border: 0; font-size: 13px; color: var(--sp-muted-2); }
.lp-timeline__icon { width: 50px; height: 50px; border-radius: 14px; background: var(--sp-green-soft); color: var(--sp-green-dark); display: grid; place-items: center; font-size: 23px; }
@media (min-width: 992px) {
  .lp-timeline--row { gap: 22px; }
  .lp-timeline--row .lp-timeline__item--icon:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: -18px; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%; border: 1px solid #dfe9d8; z-index: 2; background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%233e7a24' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M6 3.5 10.5 8 6 12.5'/%3E%3C/svg%3E") center / 12px no-repeat; }
}
@media (max-width: 1199.98px) {
  .lp-split__grid--row.lp-split__grid--aside { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }
}
@media (max-width: 991.98px) {
  .lp-split__grid--row.lp-split__grid--aside { grid-template-columns: minmax(0, 1fr); }
  .lp-split__aside { max-width: 620px; }
}
@media (max-width: 575.98px) {
  .lp-split__hl { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .lp-split__hl li { padding: 12px 10px; }
  .lp-split__hl strong { font-size: 19px; }
  .lp-split__hl span { font-size: 11.5px; }
  .lp-split__aside { padding: 26px 22px; }
  .lp-split__aside-list li { padding: 10px 12px; font-size: 14px; }
  .lp-split__grid--aside .lp-split__steps { padding: 20px 16px; }
  .lp-timeline--row { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .lp-timeline--row .lp-timeline__item--icon { grid-template-columns: 44px minmax(0, 1fr); align-items: center; padding: 14px 44px 14px 14px; }
  .lp-timeline--row .lp-timeline__item--icon .lp-timeline__num { top: 50%; transform: translateY(-50%); }
  .lp-timeline__icon { width: 44px; height: 44px; font-size: 20px; border-radius: 12px; }
}

/* Dark band (landing sections with Background "Dark band") */
main [data-band="dark"] { background: #0b1110 !important; color: #ffffff; }
.lp-tiles--dark { position: relative; overflow: hidden; }
.lp-tiles--dark::before { content: ""; position: absolute; inset: 0; background: radial-gradient(600px 360px at 88% 0%, rgba(106, 181, 68, .22), rgba(106, 181, 68, 0) 70%), radial-gradient(520px 300px at 0% 100%, rgba(106, 181, 68, .12), rgba(106, 181, 68, 0) 70%); pointer-events: none; }
.lp-tiles--dark .container-xxl { position: relative; z-index: 1; }
.lp-tiles--dark .sp-section__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 48px; align-items: end; max-width: none; }
.lp-tiles--dark .sp-section__head .sp-section__intro { margin: 0; max-width: 520px; justify-self: end; }
.lp-tiles--dark .sp-label { color: rgba(255, 255, 255, .72); }
.lp-tiles--dark .sp-h2 { color: #ffffff; }
.lp-tiles--dark .sp-h2 em { color: #7bcb55; }
.lp-tiles--dark .sp-section__intro { color: rgba(255, 255, 255, .72); }
.lp-tiles--dark .lp-tile { position: relative; background: rgba(255, 255, 255, .045); border-color: rgba(255, 255, 255, .1); }
.lp-tiles--dark .lp-tile > a, .lp-tiles--dark .lp-tile:not(.lp-tile--link) { padding: 28px 22px 24px; min-height: 196px; }
.lp-tiles--dark .lp-tile__icon { width: 56px; height: 56px; font-size: 26px; border-radius: 16px; background: rgba(106, 181, 68, .16); color: #9fdc7c; margin-bottom: 22px; }
.lp-tiles--dark .lp-tile h3 { color: #ffffff; font-size: 16.5px !important; }
.lp-tiles--dark .lp-tile p { color: rgba(255, 255, 255, .7); }
.lp-tiles--dark .lp-tile__num { position: absolute; top: 20px; right: 22px; font-family: var(--sp-serif); font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .35); }
.lp-tiles--dark .lp-tile__more { color: #9fdc7c; }
.lp-tiles--dark .lp-tile--link:hover { background: rgba(255, 255, 255, .07); border-color: rgba(123, 203, 85, .6); box-shadow: 0 24px 44px -28px rgba(0, 0, 0, .7); }
@media (max-width: 991.98px) {
  .lp-tiles--dark .sp-section__head { grid-template-columns: minmax(0, 1fr); }
  .lp-tiles--dark .sp-section__head .sp-section__intro { justify-self: start; }
}
@media (max-width: 575.98px) {
  .lp-tiles--dark .lp-tile > a, .lp-tiles--dark .lp-tile:not(.lp-tile--link) { padding: 20px 16px 18px; min-height: 0; }
  .lp-tiles--dark .lp-tile__icon { width: 46px; height: 46px; font-size: 21px; margin-bottom: 14px; }
  .lp-tiles--dark .lp-tile h3 { font-size: 15px !important; }
}

/* Eligibility checker on the light green band */
main [data-band="alt"] .lp-check__icon { background: #ffffff; box-shadow: inset 0 0 0 1px rgba(106, 181, 68, .3); }
main [data-band="alt"] .lp-check__criteria li { border-color: rgba(11, 17, 16, .1); }

/* Enquiry form: phone and email card under the points (section option) */
.sp-sol-enquire__contact { display: grid; gap: 12px; max-width: 460px; margin-top: 28px; padding: 22px 24px; border-radius: 20px; background: #0b1110; color: #ffffff; }
.sp-sol-enquire__contact-label { font-family: var(--sp-serif); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #9fdc7c; }
.sp-sol-enquire__contact a { display: flex; align-items: center; gap: 12px; font-family: var(--sp-serif); font-size: 17px; font-weight: 600; color: #ffffff; text-decoration: none; overflow-wrap: anywhere; }
.sp-sol-enquire__contact a span { flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--sp-green); display: grid; place-items: center; font-size: 15px; }
.sp-sol-enquire__contact a:hover { color: #9fdc7c; }
@media (min-width: 992px) {
  .sp-sol-enquire__intro:has(.sp-sol-enquire__contact) { position: sticky; top: 150px; }
}

/* Closing banner: room for three buttons on one row */
@media (min-width: 992px) {
  .sp-final__inner:has(.sp-final__ctas > :nth-child(3)) { max-width: 960px; }
}
@media (max-width: 991.98px) {
  .lp-tiles__grid > .lp-tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 575.98px) {
  .sp-sol-enquire__contact { padding: 18px; }
  .sp-sol-enquire__contact a { font-size: 15px; overflow-wrap: normal; }
}
/* Eight menu items (Solar Grants added): a little tighter below 1600px so the bar never crowds the button. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .sp-header .sp-nav__list { gap: 0; }
  .sp-header .sp-nav__link { font-size: 14.5px; padding: 12px 10px; }
  .sp-header .sp-nav__link.is-active::after { left: 10px; right: 10px; }
  .sp-header .sp-nav__link.sp-nav__link--highlight { padding: 7px 12px !important; margin: 0 4px; }
}
@media (min-width: 1400px) and (max-width: 1599.98px) {
  .sp-header .sp-nav__list { gap: 2px; }
  .sp-header .sp-nav__link { padding: 12px 13px; }
  .sp-header .sp-nav__link.is-active::after { left: 13px; right: 13px; }
}

/* =========================================================
   Hero readability and breadcrumbs (client feedback, 22 Oct 2026)
   ========================================================= */

/* Homepage hero: a deeper shade behind the text column, the menu and the foot of the video,
   so white text reads on any frame; the right-hand side of the video stays bright. */
.sp-hero__scrim {
  background:
    linear-gradient(180deg, rgba(6, 12, 10, .62) 0%, rgba(6, 12, 10, .2) 16%, rgba(6, 12, 10, 0) 28%),
    linear-gradient(90deg, rgba(6, 12, 10, .82) 0%, rgba(6, 12, 10, .68) 30%, rgba(6, 12, 10, .34) 55%, rgba(6, 12, 10, .08) 75%, rgba(6, 12, 10, 0) 100%),
    linear-gradient(0deg, rgba(6, 12, 10, .55) 0%, rgba(6, 12, 10, 0) 32%) !important;
}
@media (max-width: 991.98px) {
  .sp-hero__scrim { background: linear-gradient(180deg, rgba(6, 12, 10, .7) 0%, rgba(6, 12, 10, .58) 35%, rgba(6, 12, 10, .62) 70%, rgba(6, 12, 10, .8) 100%) !important; }
}
.sp-hero__video { filter: saturate(1.05) contrast(1.02) brightness(.96); }
.sp-hero__title { text-shadow: 0 2px 20px rgba(0, 0, 0, .55), 0 1px 3px rgba(0, 0, 0, .45); }
.sp-hero__lede { color: #ffffff !important; font-weight: 500; text-shadow: 0 1px 2px rgba(0, 0, 0, .6), 0 2px 18px rgba(0, 0, 0, .55) !important; }

/* Breadcrumbs: one readable white pill on every page (photo heroes, light heroes, case studies, brands). */
.sp-crumb { position: relative; z-index: 3; margin: 0 0 26px; }
.sp-crumb ol { max-width: 100%; padding: 5px 16px 5px 5px !important; background: rgba(255, 255, 255, .96) !important; border: 1px solid rgba(255, 255, 255, .96) !important; box-shadow: 0 10px 28px -16px rgba(0, 0, 0, .55); -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.sp-crumb li { font-size: 13.5px; font-weight: 600; color: #4b5650; }
.sp-crumb li + li::before { color: #a0aaa4 !important; }
.sp-crumb a { color: #2b3530 !important; }
.sp-crumb a:hover { color: var(--sp-green-dark, #3e7a24) !important; }
.sp-crumb li:first-child a { background: #e9f5df !important; color: #3e7a24 !important; }
.sp-crumb li:first-child a:hover { background: var(--sp-green, #6ab544) !important; color: #ffffff !important; }
.sp-crumb li:first-child a i { color: inherit !important; }
.sp-crumb [aria-current] { color: #0f1a14 !important; font-weight: 700; }
.sp-crumb--light ol { border-color: #e2eadc !important; box-shadow: 0 8px 22px -16px rgba(15, 26, 20, .35); }
.sp-page-hero .sp-crumb { margin-bottom: 22px; }
@media (max-width: 575.98px) {
  .sp-crumb { margin-bottom: 18px; }
  .sp-crumb li { font-size: 12.5px; }
  .sp-crumb li + li::before { margin: 0 6px !important; }
  /* One line on phones: Home, the immediate parent and the current page; long labels end in an ellipsis */
  .sp-crumb ol { flex-wrap: nowrap; }
  .sp-crumb li { min-width: 0; }
  .sp-crumb li:first-child { flex-shrink: 0; }
  .sp-crumb li:last-child:not(:nth-child(2)) { display: inline-flex !important; }
  .sp-crumb li:not(:first-child):not(:last-child):not(:nth-last-child(2)) { display: none !important; }
  .sp-crumb li:not(:first-child) a, .sp-crumb [aria-current] { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* Homepage headline tabs: show which headline is on screen and let visitors pick one; the bar fills
   over the 8s rotation in script.js and pauses while the pointer or keyboard focus is in the hero. */
.sp-hero__tabs { margin-top: 34px; max-width: 600px; gap: 20px; }
.sp-hero__tab { color: rgba(255, 255, 255, .7); padding-bottom: 11px; text-shadow: 0 1px 2px rgba(0, 0, 0, .55); }
.sp-hero__tab:hover, .sp-hero__tab.is-active { color: #ffffff; }
.sp-hero__tab.is-active .sp-hero__tab-label { font-weight: 700; }
.sp-hero__tab-num { color: #8fd36a; }
.sp-hero__tab-label { font-size: 13.5px; }
.sp-hero__tab-bar { height: 3px; background: rgba(255, 255, 255, .3); }
.sp-hero__tab.is-active .sp-hero__tab-bar::after { animation-duration: 8s; }
/* The centred "Scroll" cue would sit on the tabs on shorter or narrower screens */
@media (max-width: 1199.98px), (max-height: 820px) { .sp-hero__scroll { display: none; } }
@media (max-width: 575.98px) {
  .sp-hero__tabs { gap: 10px; margin-top: 24px; }
  .sp-hero__tab-label { font-size: 12px; }
}

/* =========================================================
   Team directory: leadership and team sections, laid out like the client's reference
   spiritenergy.co.uk/our-team (22 Oct 2026): a green heading per team, then photo cards
   (landscape photo, name, role in green); a person silhouette until a photo is added.
   ========================================================= */
.sp-people { display: flex; flex-direction: column; gap: 60px; }
.sp-people__team { margin: 0 0 24px; font-size: clamp(24px, 2.2vw, 31px); font-weight: 600; letter-spacing: -.015em; line-height: 1.2; color: var(--sp-green); }
.sp-people__grid { --cols: 3; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 36px 26px; }
.sp-people__grid--4 { --cols: 4; }
.sp-person { display: flex; flex-direction: column; min-width: 0; }
.sp-person__photo { position: relative; aspect-ratio: 3 / 2; margin-bottom: 16px; border-radius: 8px; overflow: hidden; background: #eef2ea; isolation: isolate; }
.sp-person__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; transition: transform .8s var(--sp-ease-out); }
.sp-person__photo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--sp-green); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--sp-ease-out); z-index: 2; }
.sp-person:hover .sp-person__photo img { transform: scale(1.04); }
.sp-person:hover .sp-person__photo::after { transform: scaleX(1); }
.sp-person__photo--none { display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, #f2f5ef 0%, #e5ebe0 100%); }
.sp-person__photo--none svg { width: 50%; height: auto; margin-top: 8%; fill: #c4d0bc; }
.sp-person__name { margin: 0 0 3px; font-size: 19px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; color: var(--sp-text); }
.sp-person__role { margin: 0; font-size: 16px; font-weight: 500; line-height: 1.4; color: var(--sp-green-dark); }
.sp-person__bio { margin: 10px 0 0; font-size: 14.5px; line-height: 1.65; color: var(--sp-muted); }
.sp-person__mail { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 14px; font-weight: 600; color: var(--sp-text); text-decoration: none; }
.sp-person__mail:hover { color: var(--sp-green-dark); }
.sp-leadership .sp-leadership__foot { margin-top: 60px; }
@media (max-width: 991.98px) {
  .sp-people__grid--4 { --cols: 3; }
  .sp-people { gap: 48px; }
}
@media (max-width: 767.98px) {
  .sp-people__grid, .sp-people__grid--4 { --cols: 2; gap: 28px 16px; }
  .sp-people__team { margin-bottom: 18px; }
  .sp-person__photo { margin-bottom: 12px; border-radius: 6px; }
  .sp-person__name { font-size: 16px; }
  .sp-person__role { font-size: 14px; }
  .sp-person__bio { font-size: 13.5px; line-height: 1.6; }
  .sp-leadership .sp-leadership__foot { margin-top: 40px; }
}