.wp-block {} /*  (.wp-block {} ensures MT files load in Gutenberg editor) */

/*  MICROTHEMER STYLES  */

/*= Full Code Editor CSS ====== */

@charset "UTF-8";

/* ════════════════════════════════════════════════════════════════════
   SPEEDY SOLAR — GLOBAL STYLESHEET (cleaned & consolidated)
   Plain CSS · Microthemer / Elementor Custom CSS ready.
   ────────────────────────────────────────────────────────────────────
   Sections:
     1. Root tokens          4. Buttons
     2. Base elements        5. Home page sections (.ss-*)
     3. Shared helpers       6. Reduced motion
                             7. Coming-soon page (.cs)   8. Navigation
   ════════════════════════════════════════════════════════════════════ */

/* ── 1. ROOT TOKENS ─────────────────────────────────────────────────── */

:root {
  /* Layout & structure */
  --ss-container: 1780px !important;
  --ss-gutter: 80px !important;
  --ss-section-y: 96px !important;
  --ss-section-y-md: 72px !important;
  --ss-section-y-sm: 56px !important;
  --ss-radius-sm: 8px !important;
  --ss-radius-md: 16px !important;
  --ss-radius-pill: 100px !important;
  --ss-shadow-sm: 0 1px 3px rgba(17, 32, 38, .08), 0 1px 2px rgba(17, 32, 38, .04) !important;
  --ss-shadow-md: 0 10px 30px rgba(17, 32, 38, .10), 0 4px 8px rgba(17, 32, 38, .05) !important;
  --ss-shadow-lg: 0 24px 60px rgba(17, 32, 38, .14) !important;
  --ss-ease: cubic-bezier(.2, .7, .3, 1) !important;
  --ss-dur: 220ms !important;
  --ss-focus: 0 0 0 3px rgba(255, 124, 10, .45) !important;
  /* Font family + weights */
  --font-primary: 'Codec Pro', sans-serif !important;
  --fw-light: 300 !important;
  --fw-regular: 400 !important;
  --fw-bold: 500 !important;
  --fw-ultrablack: 900 !important;
  /* Brand colours */
  --color-orange: #FF7C0A !important;
  --color-dark: #112026 !important;
  --color-mid: #4A5E66 !important;
  --color-off-white: #F5F2EE !important;
  --color-ice: #F4FCFF !important;
  --color-white: #FFFFFF !important;
  --color-border: #E7E3DD !important;
  /* Section backgrounds */
  --bg-primary: #FFFFFF !important;
  --bg-dark: #112026 !important;
  --bg-light: #F4FCFF !important;
  --bg-cream: #F5F2EE !important;
  /* Text */
  --text-primary: #3A4D54 !important;
  --text-muted: #4A5E66 !important;
  --text-on-dark: #FFFFFF !important;
  --text-on-orange: #FFFFFF !important;
  /* UI / buttons */
  --color-accent: #FF7C0A !important;
  --btn-primary-bg: #FF7C0A !important;
  --btn-primary-text: #FFFFFF !important;
  --btn-secondary-bg: transparent !important;
  --btn-secondary-border: #112026 !important;
  --btn-secondary-text: #112026 !important;
  /* Type scale — Perfect Fourth (1.333) */
  --fs-h1: 4.209rem !important;
  /* 67.3px */
  --fs-h2: 3.157rem !important;
  /* 50.5px */
  --fs-h3: 2.369rem !important;
  /* 37.9px */
  --fs-h4: 1.777rem !important;
  /* 28.4px */
  --fs-h5: 1.333rem !important;
  /* 21.3px */
  --fs-body: 1rem !important;
  /* 16px   */
  --fs-body-sm: 0.875rem !important;
  /* 14px */
  --fs-body-tiny: 0.5625rem !important;
  /* 9px  */
  /* Responsive type scale */
  --fs-h1-1440: var(--fs-h2) !important;
  --fs-h2-1440: var(--fs-h3) !important;
  --fs-h3-1440: var(--fs-h4) !important;
  --fs-h4-1440: var(--fs-h5) !important;
  --fs-h5-1440: var(--fs-body) !important;
  --fs-h1-1024: var(--fs-h2-1440) !important;
  --fs-h2-1024: var(--fs-h3-1440) !important;
  --fs-h3-1024: var(--fs-h4-1440) !important;
  --fs-h4-1024: var(--fs-h5-1440) !important;
  --fs-h5-1024: var(--fs-body) !important;
  --fs-h1-767: var(--fs-h2-1024) !important;
  --fs-h2-767: var(--fs-h3-1024) !important;
  --fs-h3-767: var(--fs-h4-1024) !important;
  --fs-h4-767: var(--fs-h5-1024) !important;
  --fs-h5-767: var(--fs-body) !important;
  /* Line heights */
  --lh-h1: 1.15 !important;
  --lh-h2: 1.2 !important;
  --lh-h3: 1.25 !important;
  --lh-h4: 1.3 !important;
  --lh-h5: 1.4 !important;
  --lh-body: 1.45 !important;
  --lh-body-sm: 1.5 !important;
  --lh-body-tiny: 1.55 !important;
  /* Letter spacing */
  --ls-tight: -0.02em !important;
  --ls-normal: 0em !important;
  --ls-wide: 0.05em !important;
}

/* ── 2. BASE ELEMENTS ───────────────────────────────────────────────── */

body {
  font-family: var(--font-primary) !important;
  font-size: var(--fs-body) !important;
  line-height: var(--lh-body) !important;
  font-weight: var(--fw-regular) !important;
  color: var(--text-primary) !important;
  background-color: var(--bg-primary) !important;
}

h1 {
  font-size: var(--fs-h1) !important;
  line-height: var(--lh-h1) !important;
  font-weight: var(--fw-regular) !important;
  letter-spacing: var(--ls-tight) !important;
  color: var(--text-primary) !important;
}

h2 {
  font-size: var(--fs-h2) !important;
  line-height: var(--lh-h2) !important;
  font-weight: var(--fw-bold) !important;
  color: var(--text-primary) !important;
}

h3 {
  font-size: var(--fs-h3) !important;
  line-height: var(--lh-h3) !important;
  font-weight: var(--fw-bold) !important;
  color: var(--text-primary) !important;
}

h4 {
  font-size: var(--fs-h4) !important;
  line-height: var(--lh-h4) !important;
  font-weight: var(--fw-regular) !important;
  color: var(--text-primary) !important;
}

h5 {
  font-size: var(--fs-h5) !important;
  line-height: var(--lh-h5) !important;
  font-weight: var(--fw-regular) !important;
  color: var(--text-primary) !important;
}

.small-body {
  font-size: var(--fs-body-sm) !important;
  line-height: var(--lh-body-sm) !important;
}

.tiny-body {
  font-size: var(--fs-body-tiny) !important;
  line-height: var(--lh-body-tiny) !important;
}

@media (max-width: 1440px) {
  h1 {
    font-size: var(--fs-h1-1440) !important;
  }

  h2 {
    font-size: var(--fs-h2-1440) !important;
  }

  h3 {
    font-size: var(--fs-h3-1440) !important;
  }

  h4 {
    font-size: var(--fs-h4-1440) !important;
  }

  h5 {
    font-size: var(--fs-h5-1440) !important;
  }
}

@media (max-width: 1024px) {
  h1 {
    font-size: var(--fs-h1-1024) !important;
  }

  h2 {
    font-size: var(--fs-h2-1024) !important;
  }

  h3 {
    font-size: var(--fs-h3-1024) !important;
  }

  h4 {
    font-size: var(--fs-h4-1024) !important;
  }

  h5 {
    font-size: var(--fs-h5-1024) !important;
  }
}

@media (max-width: 767px) {
  h1 {
    font-size: var(--fs-h1-767) !important;
  }

  h2 {
    font-size: var(--fs-h2-767) !important;
  }

  h3 {
    font-size: var(--fs-h3-767) !important;
  }

  h4 {
    font-size: var(--fs-h4-767) !important;
  }

  h5 {
    font-size: var(--fs-h5-767) !important;
  }
}

/* ── 3. SHARED HELPERS ──────────────────────────────────────────────── */

.ss-container {
  max-width: var(--ss-container) !important;
  margin-inline: auto !important;
  padding-inline: var(--ss-gutter) !important;
}

.ss-section {
  padding-block: var(--ss-section-y) !important;
}

.ss-section--cream {
  background: var(--bg-cream) !important;
}

.ss-section--ice {
  background: var(--bg-light) !important;
}

.ss-section--dark {
  background: var(--bg-dark) !important;
  color: var(--text-on-dark) !important;
}

.ss-eyebrow {
  display: -webkit-inline-flexbox !important;
  display: -moz-inline-flexbox !important;
  display: -ms-inline-flexbox !important;
  display: inline-flex !important;
  -webkit-align-items: center !important;
  align-items: center !important;
  grid-gap: 8px !important;
  gap: 8px !important;
  font-size: var(--fs-body-sm) !important;
  font-weight: var(--fw-bold) !important;
  letter-spacing: var(--ls-wide) !important;
  text-transform: uppercase !important;
  color: var(--color-orange) !important;
  margin: 0 0 12px !important;
}

/* Section head — h2 and sub each get independent, controllable widths.
   Per section:  .ss-why .ss-section__head { --head-max: 18ch; --sub-max: 34ch; } */

.ss-section__head {
  max-width: var(--head-w, 760px) !important;
  margin: 0 auto 56px !important;
  text-align: center !important;
}

.ss-section__head h2 {
  margin: 0 auto !important;
  max-width: var(--head-max, 100%) !important;
}

@media (max-width: 767px) {
  .ss-section__head h2 {
    font-size: var(--fs-h2-1024) !important;
    padding: 0px 32px !important;
    line-height: 1.1 !important;
  }
}

.ss-section__head .ss-sub {
  color: var(--text-muted) !important;
  margin: 12px auto 0 !important;
  max-width: var(--sub-max, 50ch) !important;
}

@media (max-width: 767px) {
  .ss-section__head .ss-sub {
    padding: 0px 24px !important;
  }
}

.ss-home a:focus-visible,
.ss-home button:focus-visible,
.ss-home [tabindex]:focus-visible {
  outline: none !important;
  box-shadow: var(--ss-focus) !important;
  border-radius: var(--ss-radius-sm) !important;
}

@media (max-width: 1024px) {
  .ss-section {
    padding-block: var(--ss-section-y-md) !important;
  }
}

@media (max-width: 767px) {
  .ss-section {
    padding-block: var(--ss-section-y-sm) !important;
  }

  .ss-section__head {
    margin-bottom: 40px !important;
  }
}

/* ── 4. BUTTONS — Primary · Secondary · Ghost · Dark ────────────────── */

.ss-btn {
  display: -webkit-inline-flexbox !important;
  display: -moz-inline-flexbox !important;
  display: -ms-inline-flexbox !important;
  display: inline-flex !important;
  -webkit-align-items: center !important;
  align-items: center !important;
  -webkit-justify-content: center !important;
  justify-content: center !important;
  grid-gap: 10px !important;
  gap: 10px !important;
  min-height: 52px !important;
  padding: 14px 28px !important;
  font-family: var(--font-primary) !important;
  font-size: var(--fs-body) !important;
  font-weight: var(--fw-bold) !important;
  line-height: 1 !important;
  letter-spacing: .01em !important;
  border-radius: var(--ss-radius-pill) !important;
  border: 2px solid transparent !important;
  text-decoration: none !important;
  cursor: pointer !important;
  -webkit-transition: transform var(--ss-dur) var(--ss-ease), background-color var(--ss-dur) var(--ss-ease), color var(--ss-dur) var(--ss-ease), border-color var(--ss-dur) var(--ss-ease), box-shadow var(--ss-dur) var(--ss-ease) !important;
  transition: transform var(--ss-dur) var(--ss-ease), background-color var(--ss-dur) var(--ss-ease), color var(--ss-dur) var(--ss-ease), border-color var(--ss-dur) var(--ss-ease), box-shadow var(--ss-dur) var(--ss-ease) !important;
}

.ss-btn:hover {
  transform: translateY(-2px) !important;
}

.ss-btn:active {
  transform: translateY(0) !important;
}

.ss-btn--primary {
  background: var(--btn-primary-bg) !important;
  color: var(--btn-primary-text) !important;
  box-shadow: 0 6px 18px rgba(255, 124, 10, 0.28) !important;
}

.ss-btn--primary:hover {
  background: #ff8c2a !important;
  box-shadow: 0 10px 26px rgba(255, 124, 10, 0.38) !important;
}

.ss-btn--secondary {
  background: transparent !important;
  color: var(--btn-secondary-text) !important;
  border-color: var(--btn-secondary-border) !important;
}

.ss-btn--secondary:hover {
  background: var(--color-dark) !important;
  color: var(--color-white) !important;
}

.ss-btn--ghost {
  background: transparent !important;
  color: var(--color-dark) !important;
}

.ss-btn--ghost:hover {
  color: var(--color-orange) !important;
}

.ss-btn--dark {
  background: var(--color-dark) !important;
  color: var(--color-white) !important;
}

.ss-btn--dark:hover {
  background: #1c333b !important;
}

.ss-section--dark .ss-btn--secondary,
.ss-cta .ss-btn--secondary {
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
}

.ss-section--dark .ss-btn--secondary:hover {
  background: #fff !important;
  color: var(--color-dark) !important;
}

.ss-btn .ss-btn__arrow {
  -webkit-transition: transform var(--ss-dur) var(--ss-ease) !important;
  transition: transform var(--ss-dur) var(--ss-ease) !important;
}

.ss-btn:hover .ss-btn__arrow {
  transform: translateX(3px) !important;
}

@media (max-width: 767px) {
  .ss-btn {
    width: 100% !important;
  }
}

/* ── DIVIDER — drop between two sections via an HTML widget ──────────
   Hairline:  <div class="ss-divider"></div>
   Chevron:   <div class="ss-divider ss-divider--chevron"><span>&raquo;</span></div> */

.ss-divider {
  max-width: var(--ss-container) !important;
  margin-inline: auto !important;
  padding-inline: var(--ss-gutter) !important;
  height: 1px !important;
  background: var(--color-border) !important;
  border: 0 !important;
}

.ss-divider--chevron {
  height: auto !important;
  background: none !important;
  display: -webkit-box !important;
  display: -moz-box !important;
  display: -ms-flexbox !important;
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-align-items: center !important;
  align-items: center !important;
  grid-gap: 18px !important;
  gap: 18px !important;
  color: var(--color-border) !important;
}

.ss-divider--chevron::before,
.ss-divider--chevron::after {
  content: "" !important;
  -webkit-flex: 1 !important;
  flex: 1 !important;
  height: 1px !important;
  background: currentColor !important;
}

.ss-divider--chevron span {
  color: var(--color-orange) !important;
  font-weight: 700 !important;
  font-size: var(--fs-h5) !important;
  line-height: 1 !important;
}

/* ════════════════════════════════════════════════════════════════════
   8. NAVIGATION  —  WordPress Menu widget inside a container .solar-nav
   Load SITE-WIDE so it reaches the header template.
   ════════════════════════════════════════════════════════════════════ */

/* Optional header bar — add class .solar-header to the header Section */

.solar-header {
  background: var(--color-white) !important;
  border-bottom: 2px solid var(--color-orange) !important;
}

/* Menu list — horizontal, pushed to the right */

.solar-nav ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: -webkit-box !important;
  display: -moz-box !important;
  display: -ms-flexbox !important;
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-flex-wrap: wrap !important;
  -moz-flex-wrap: wrap !important;
  -ms-flex-wrap: wrap !important;
  flex-wrap: wrap !important;
  -webkit-align-items: center !important;
  align-items: center !important;
  -webkit-justify-content: flex-end !important;
  justify-content: flex-end !important;
  grid-gap: 32px !important;
  gap: 32px !important;
}

.solar-nav li {
  margin: 0 !important;
}

/* Links — grey when inactive */

.solar-nav ul a {
  display: -webkit-inline-flexbox !important;
  display: -moz-inline-flexbox !important;
  display: -ms-inline-flexbox !important;
  display: inline-flex !important;
  -webkit-align-items: center !important;
  align-items: center !important;
  position: relative !important;
  font-family: var(--font-primary) !important;
  font-size: var(--fs-body) !important;
  font-weight: var(--fw-regular) !important;
  color: var(--text-muted) !important;
  text-decoration: none !important;
  letter-spacing: .01em !important;
  padding: 10px 2px !important;
  -webkit-transition: color .28s ease !important;
  transition: color .28s ease !important;
}

.solar-nav ul a:hover {
  color: var(--color-orange) !important;
}

.solar-nav ul a:focus-visible {
  outline: none !important;
  box-shadow: var(--ss-focus) !important;
  border-radius: var(--ss-radius-sm) !important;
}

/* Active page — dark + bold (no dot) */

.solar-nav .current-menu-item > a,
.solar-nav .current_page_item > a,
.solar-nav .current-menu-ancestor > a {
  color: var(--color-dark) !important;
  font-weight: var(--fw-bold) !important;
}

/* CTA pill — "Get a free survey" (menu item 149) */

.solar-nav .menu-item-149 a {
  background: var(--color-orange) !important;
  color: #ffffff !important;
  border-radius: var(--ss-radius-pill) !important;
  padding: 12px 26px !important;
  font-weight: var(--fw-bold) !important;
  margin-left: 24px !important;
  box-shadow: 0 6px 18px rgba(255, 124, 10, 0.28) !important;
  -webkit-transition: background-color var(--ss-dur) var(--ss-ease), box-shadow var(--ss-dur) var(--ss-ease), transform var(--ss-dur) var(--ss-ease) !important;
  transition: background-color var(--ss-dur) var(--ss-ease), box-shadow var(--ss-dur) var(--ss-ease), transform var(--ss-dur) var(--ss-ease) !important;
}

.solar-nav .menu-item-149 a:hover {
  background: #ff8c2a !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 26px rgba(255, 124, 10, 0.38) !important;
}

/* Hide the WP Menu widget's mobile toggle on desktop (kills the trailing gap) */

@media (min-width: 1025px) {
  .solar-nav .elementor-menu-toggle,
  .solar-nav .menu-toggle {
    display: none !important;
  }
}

@media (max-width: 1024px) {
  .solar-nav ul {
    grid-gap: 24px !important;
    gap: 24px !important;
  }
}

/* Active page underline — CSS-controlled, not the widget */

.solar-nav .current-menu-item > a,
.solar-nav .current_page_item > a {
  border-bottom: 2px solid var(--color-orange) !important;
  padding-bottom: 6px !important;
}

/* Never on the CTA pill */

.solar-nav .menu-item-149 a {
  border-bottom: 0 !important;
}

/* ════════════════════════════════════════════════════════════════════
   5. HOME PAGE SECTIONS
   ════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════
   1 · HERO
   Desktop: copy + CTAs left, roof photo right (faded left).
   ════════════════════════════════════════════════════════════════════ */

.ss-hero {
  position: relative !important;
  overflow: clip !important;
  background-image: linear-gradient(to right, #fff var(--hero-fade-start, 25%), rgba(255, 255, 255, 0) var(--hero-fade-end, 65%)), url("https://speedysolar.co.uk/wp-content/uploads/2026/06/solar-hero-image-scaled.webp") !important;
  background-size: cover !important;
  background-position: left top !important;
  background-repeat: no-repeat !important;
}

.ss-hero__inner {
  position: relative !important;
  z-index: 1 !important;
  max-width: var(--ss-container) !important;
  margin-inline: auto !important;
  padding: 120px 120px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 620px) 1fr !important;
}

@media (max-width: 1440px) {
  .ss-hero__inner {
    padding: 80px !important;
  }
}

.ss-hero__content {
  -webkit-align-self: center !important;
  align-self: center !important;
}

.ss-hero__title {
  font-size: var(--fs-h1) !important;
  line-height: var(--lh-h1) !important;
  letter-spacing: -3px !important;
  color: #3A4D54 !important;
  margin: 0 !important;
}

.ss-hero__title span {
  color: #3A4D54 !important;
  font-weight: var(--fw-bold) !important;
}

.ss-hero__title .dot {
  color: var(--color-orange) !important;
  font-weight: var(--fw-bold) !important;
}

.ss-hero__sub {
  font-size: var(--fs-h5) !important;
  line-height: var(--lh-h5) !important;
  color: var(--text-muted) !important;
  max-width: 30rem !important;
  margin: 20px 0 36px !important;
}

.ss-hero__divider {
  width: 120px !important;
  height: 2px !important;
  background: var(--color-orange) !important;
  border-radius: 55px !important;
  margin: 28px 0 !important;
}

.ss-hero__actions {
  display: -webkit-box !important;
  display: -moz-box !important;
  display: -ms-flexbox !important;
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-flex-wrap: wrap !important;
  -moz-flex-wrap: wrap !important;
  -ms-flex-wrap: wrap !important;
  flex-wrap: wrap !important;
  grid-gap: 16px !important;
  gap: 16px !important;
}

/* ── Tablet ── */

@media (max-width: 1024px) {
  .ss-hero__inner {
    padding: 96px var(--ss-gutter) !important;
    grid-template-columns: minmax(0, 560px) 1fr !important;
  }
}

/* ── Mobile: content sits on the image's white-fade top, photo shows below ── */

@media (max-width: 767px) {
  .ss-hero {
    background-image: url("https://speedysolar.co.uk/wp-content/uploads/2026/06/scottish-solar-install-mobile1.webp") !important;
    background-size: 100% auto !important;
    background-position: bottom center !important;
    background-repeat: no-repeat !important;
    background-color: #fff !important;
    height: 640px !important;
  }

  .ss-hero__inner {
    grid-template-columns: 1fr !important;
    padding: 48px var(--ss-gutter) 60vw !important;
    text-align: center !important;
  }

  .ss-hero__content {
    -webkit-align-self: start !important;
    align-self: start !important;
  }

  .ss-hero__title {
    font-size: var(--fs-h3) !important;
    letter-spacing: -1px !important;
    margin: auto !important;
  }

  .ss-hero__sub {
    font-size: var(--fs-body) !important;
    max-width: none !important;
    margin: 16px auto 28px !important;
  }

  .ss-hero__divider {
    display: none !important;
  }

  .ss-hero__actions {
    -webkit-flex-direction: column !important;
    -moz-flex-direction: column !important;
    -ms-flex-direction: column !important;
    flex-direction: column !important;
    -webkit-align-items: stretch !important;
    align-items: stretch !important;
    grid-gap: 12px !important;
    gap: 12px !important;
  }

  .ss-hero__actions .ss-btn {
    width: 100% !important;
  }

  .ss-orbit--hero {
    display: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   MOBILE (≤767) — global: centre headings/copy + full-width buttons
   (Hero mobile lives in the HERO block, not repeated here.)
   ════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  /* Centre headings + copy across sections */

  .ss-quote__inner > div,
  .ss-benefit,
  .ss-video__copy,
  .ss-cta__box,
  .ss-card,
  .ss-quote-card {
    text-align: center !important;
  }

  /* Centre the block-level bits text-align can't reach */

  .ss-benefit__num::after,
  .ss-card__icon {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .ss-card__link {
    -webkit-align-self: center !important;
    align-self: center !important;
  }

  /* Buttons: full-width (covers hero too) */

  .ss-btn {
    width: 100% !important;
  }
}

/* 2 · STATS BAR + CERT LOGOS */

.ss-stats {
  background: var(--color-orange) !important;
  color: var(--text-on-orange) !important;
}

.ss-stats__inner {
  max-width: var(--ss-container) !important;
  margin-inline: auto !important;
  padding: 28px var(--ss-gutter) !important;
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  grid-gap: 24px !important;
  gap: 24px !important;
}

.ss-stat {
  text-align: center !important;
  position: relative !important;
}

.ss-stat + .ss-stat::before {
  content: "" !important;
  position: absolute !important;
  left: -12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 1px !important;
  height: 40px !important;
  background: rgba(255, 255, 255, 0.28) !important;
}

.ss-stat__num {
  font-size: var(--fs-h2) !important;
  font-weight: var(--fw-ultrablack) !important;
  line-height: 1 !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: -2px !important;
}

.ss-stat__label {
  font-size: var(--fs-body-sm) !important;
  font-weight: var(--fw-bold) !important;
  margin-top: 6px !important;
  opacity: .92 !important;
}

.ss-certs__inner {
  max-width: var(--ss-container) !important;
  margin-inline: auto !important;
  padding: 36px var(--ss-gutter) !important;
  display: -webkit-box !important;
  display: -moz-box !important;
  display: -ms-flexbox !important;
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-align-items: center !important;
  align-items: center !important;
  -webkit-justify-content: center !important;
  justify-content: center !important;
  grid-gap: 56px !important;
  gap: 56px !important;
  -webkit-flex-wrap: wrap !important;
  -moz-flex-wrap: wrap !important;
  -ms-flex-wrap: wrap !important;
  flex-wrap: wrap !important;
}

.ss-certs__label {
  width: 100% !important;
  text-align: center !important;
  font-size: var(--fs-body-sm) !important;
  font-weight: var(--fw-bold) !important;
  letter-spacing: var(--ls-wide) !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
  margin-bottom: 4px !important;
}

.ss-certs img {
  height: 44px !important;
  width: auto !important;
  filter: grayscale(1) !important;
  opacity: .6 !important;
  -webkit-transition: filter var(--ss-dur), opacity var(--ss-dur) !important;
  transition: filter var(--ss-dur), opacity var(--ss-dur) !important;
}

.ss-certs img:hover {
  filter: grayscale(0) !important;
  opacity: 1 !important;
}

@media (max-width: 767px) {
  .ss-stats__inner {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-gap: 20px 12px !important;
    gap: 20px 12px !important;
  }

  .ss-stat:nth-child(odd) + .ss-stat::before,
  .ss-stat:nth-child(3)::before {
    display: none !important;
  }

  .ss-certs__inner {
    grid-gap: 28px !important;
    gap: 28px !important;
  }
}

/* 3 · SERVICES (3 cards) */

.ss-services .ss-section__head h2 {
  max-width: 550px !important;
  letter-spacing: -.5px !important;
  margin-bottom: 16px !important;
}

.ss-services__grid {
  max-width: var(--ss-container) !important;
  margin-inline: auto !important;
  padding-inline: var(--ss-gutter) !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  grid-gap: 28px !important;
  gap: 28px !important;
}

.ss-card {
  background: var(--color-white) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--ss-radius-md) !important;
  padding: 36px 32px !important;
  box-shadow: var(--ss-shadow-sm) !important;
  -webkit-transition: transform var(--ss-dur) var(--ss-ease), box-shadow var(--ss-dur) var(--ss-ease), border-color var(--ss-dur) !important;
  transition: transform var(--ss-dur) var(--ss-ease), box-shadow var(--ss-dur) var(--ss-ease), border-color var(--ss-dur) !important;
  display: -webkit-box !important;
  display: -moz-box !important;
  display: -ms-flexbox !important;
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-flex-direction: column !important;
  -moz-flex-direction: column !important;
  -ms-flex-direction: column !important;
  flex-direction: column !important;
}

.ss-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--ss-shadow-md) !important;
  border-color: rgba(255, 124, 10, 0.35) !important;
}

.ss-card__icon {
  width: 56px !important;
  height: 56px !important;
  border-radius: 14px !important;
  display: grid !important;
  place-items: center !important;
  margin-bottom: 20px !important;
  background: rgba(255, 124, 10, 0.1) !important;
  color: var(--color-orange) !important;
}

.ss-card__icon svg {
  width: 28px !important;
  height: 28px !important;
}

.ss-card__title {
  font-size: var(--fs-h4) !important;
  font-weight: var(--fw-bold) !important;
  color: var(--color-dark) !important;
  margin: 0 0 10px !important;
}

.ss-card__body {
  color: var(--text-muted) !important;
  margin: 0 0 24px !important;
}

.ss-card__link {
  margin-top: auto !important;
  -webkit-align-self: flex-start !important;
  align-self: flex-start !important;
}

@media (max-width: 1024px) {
  .ss-services__grid {
    grid-template-columns: 1fr !important;
    max-width: 560px !important;
  }
}

/* 3b · SMART-TARIFF BAND (optional) */

.ss-compat {
  background: var(--color-dark) !important;
  color: var(--text-on-dark) !important;
}

.ss-compat__inner {
  max-width: var(--ss-container) !important;
  margin-inline: auto !important;
  padding: 22px var(--ss-gutter) !important;
  display: -webkit-box !important;
  display: -moz-box !important;
  display: -ms-flexbox !important;
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-align-items: center !important;
  align-items: center !important;
  -webkit-justify-content: center !important;
  justify-content: center !important;
  grid-gap: 14px !important;
  gap: 14px !important;
  text-align: center !important;
  font-size: var(--fs-h5) !important;
  font-weight: var(--fw-regular) !important;
}

@media (max-width: 767px) {
  .ss-compat__inner {
    -webkit-flex-direction: column !important;
    -moz-flex-direction: column !important;
    -ms-flex-direction: column !important;
    flex-direction: column !important;
    grid-gap: 6px !important;
    gap: 6px !important;
  }
}

.ss-compat strong {
  color: var(--color-orange) !important;
  font-weight: var(--fw-bold) !important;
}

/* 4 · EASYPV QUOTE WIDGET */

.ss-quote__inner {
  max-width: var(--ss-container) !important;
  margin-inline: auto !important;
  padding-inline: var(--ss-gutter) !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-gap: 56px !important;
  gap: 56px !important;
  -webkit-align-items: center !important;
  align-items: center !important;
}

.ss-quote__title {
  margin: 0 0 8px !important;
  max-width: 600px !important;
  letter-spacing: -1px !important;
}

@media (max-width: 767px) {
  .ss-quote__title {
    font-size: var(--fs-h4) !important;
  }
}

.ss-quote__sub {
  color: var(--text-muted) !important;
  margin: 0 0 28px !important;
}

.ss-quote__embed {
  background: var(--color-white) !important;
  border: 1px dashed rgba(74, 94, 102, 0.4) !important;
  border-radius: var(--ss-radius-md) !important;
  min-height: 360px !important;
  display: grid !important;
  place-items: center !important;
  color: var(--text-muted) !important;
  box-shadow: var(--ss-shadow-sm) !important;
  padding: 24px !important;
  text-align: center !important;
}

@media (max-width: 1024px) {
  .ss-quote__inner {
    grid-template-columns: 1fr !important;
    grid-gap: 32px !important;
    gap: 32px !important;
  }
}

/* 5 · CUSTOMER BENEFITS (01–04) */

.ss-benefits .ss-section__head h2 {
  max-width: 380px !important;
  letter-spacing: -.5px !important;
  margin-bottom: 16px !important;
}

.ss-benefits__grid {
  max-width: var(--ss-container) !important;
  margin-inline: auto !important;
  padding-inline: var(--ss-gutter) !important;
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  grid-gap: 32px !important;
  gap: 32px !important;
}

.ss-benefit__num {
  font-size: 78px !important;
  font-weight: var(--fw-ultrablack) !important;
  color: var(--color-orange) !important;
  line-height: 1 !important;
  font-variant-numeric: tabular-nums !important;
  display: block !important;
  margin-bottom: 16px !important;
  letter-spacing: -6px !important;
}

.ss-benefit__num::after {
  content: "" !important;
  display: block !important;
  width: 32px !important;
  height: 3px !important;
  background: rgba(255, 124, 10, 0.35) !important;
  border-radius: 2px !important;
  margin-top: 14px !important;
}

.ss-benefit__title {
  font-size: var(--fs-h5) !important;
  font-weight: var(--fw-bold) !important;
  color: var(--color-dark) !important;
  margin: 0 0 8px !important;
}

.ss-benefit__body {
  color: var(--text-muted) !important;
  margin: 0 !important;
}

@media (max-width: 1024px) {
  .ss-benefits__grid {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-gap: 32px 28px !important;
    gap: 32px 28px !important;
  }
}

@media (max-width: 767px) {
  .ss-benefits__grid {
    grid-template-columns: 1fr !important;
  }
}

/* 6 · STV VIDEO FEATURE */

.ss-video__inner {
  max-width: var(--ss-container) !important;
  margin-inline: auto !important;
  padding-inline: var(--ss-gutter) !important;
  display: grid !important;
  grid-template-columns: 1.2fr .8fr !important;
  grid-gap: 48px !important;
  gap: 48px !important;
  -webkit-align-items: center !important;
  align-items: center !important;
}

.ss-video__frame {
  position: relative !important;
  border-radius: var(--ss-radius-md) !important;
  overflow: hidden !important;
  box-shadow: var(--ss-shadow-md) !important;
  aspect-ratio: 16 / 9 !important;
  background: #000 !important;
}

.ss-video__frame iframe,
.ss-video__frame video {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  border: 0 !important;
}

.ss-video__badge {
  position: absolute !important;
  top: 16px !important;
  left: 16px !important;
  z-index: 2 !important;
  display: -webkit-inline-flexbox !important;
  display: -moz-inline-flexbox !important;
  display: -ms-inline-flexbox !important;
  display: inline-flex !important;
  -webkit-align-items: center !important;
  align-items: center !important;
  grid-gap: 8px !important;
  gap: 8px !important;
  background: rgba(17, 32, 38, 0.72) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  backdrop-filter: blur(6px) !important;
  color: #fff !important;
  font-size: var(--fs-body-sm) !important;
  font-weight: var(--fw-bold) !important;
  padding: 8px 14px !important;
  border-radius: var(--ss-radius-pill) !important;
}

.ss-video__badge .ss-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: var(--color-orange) !important;
}

.ss-video__copy h2 {
  margin: 0 0 12px !important;
}

.ss-video__copy p {
  color: var(--text-muted) !important;
  margin: 0 0 24px !important;
}

@media (max-width: 1024px) {
  .ss-video__inner {
    grid-template-columns: 1fr !important;
    grid-gap: 28px !important;
    gap: 28px !important;
  }
}

/* 7 · WHY CHOOSE (4 value cards) */

.ss-why__grid {
  max-width: var(--ss-container) !important;
  margin-inline: auto !important;
  padding-inline: var(--ss-gutter) !important;
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  grid-gap: 24px !important;
  gap: 24px !important;
}

.ss-why .ss-card {
  background: var(--bg-cream) !important;
  border-color: transparent !important;
}

.ss-why .ss-card:hover {
  background: var(--color-white) !important;
}

.ss-value__title {
  font-size: var(--fs-h5) !important;
  font-weight: var(--fw-bold) !important;
  color: var(--color-dark) !important;
  margin: 0 0 8px !important;
}

.ss-value__body {
  color: var(--text-muted) !important;
  margin: 0 !important;
}

@media (max-width: 1024px) {
  .ss-why__grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 767px) {
  .ss-why__grid {
    grid-template-columns: 1fr !important;
  }
}

/* 8 · TESTIMONIALS (placeholder) */

.ss-testimonials {
  background-color: var(--bg-light) !important;
  background-image: linear-gradient(180deg, var(--bg-light) 0%, var(--bg-light) 3%, rgba(244, 252, 255, 0) 70%), url("https://speedysolar.co.uk/wp-content/uploads/2026/06/speedy-solar-review-image.webp") !important;
  background-size: cover, cover !important;
  background-position: center top, center bottom !important;
  background-repeat: no-repeat, no-repeat !important;
  padding-bottom: clamp(200px, 24vw, 360px) !important;
}

.ss-testimonials__grid {
  max-width: var(--ss-container) !important;
  margin-inline: auto !important;
  padding-inline: var(--ss-gutter) !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  grid-gap: 28px !important;
  gap: 28px !important;
}

.ss-quote-card {
  background: var(--color-white) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--ss-radius-md) !important;
  padding: 32px !important;
  box-shadow: var(--ss-shadow-sm) !important;
  display: -webkit-box !important;
  display: -moz-box !important;
  display: -ms-flexbox !important;
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-flex-direction: column !important;
  -moz-flex-direction: column !important;
  -ms-flex-direction: column !important;
  flex-direction: column !important;
  grid-gap: 16px !important;
  gap: 16px !important;
}

.ss-quote-card__stars {
  color: var(--color-orange) !important;
  letter-spacing: 2px !important;
  font-size: 18px !important;
}

.ss-quote-card__text {
  color: var(--color-dark) !important;
  font-size: var(--fs-h5) !important;
  line-height: var(--lh-h5) !important;
  margin: 0 !important;
}

.ss-quote-card__by {
  color: var(--text-muted) !important;
  font-weight: var(--fw-bold) !important;
  font-size: var(--fs-body-sm) !important;
  margin-top: auto !important;
}

@media (max-width: 1024px) {
  .ss-testimonials__grid {
    grid-template-columns: 1fr !important;
    max-width: 560px !important;
  }
}

/* 9 · FAQ (accessible <details> accordion) */

.ss-faq__list {
  max-width: 820px !important;
  margin-inline: auto !important;
  padding-inline: var(--ss-gutter) !important;
  display: -webkit-box !important;
  display: -moz-box !important;
  display: -ms-flexbox !important;
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-flex-direction: column !important;
  -moz-flex-direction: column !important;
  -ms-flex-direction: column !important;
  flex-direction: column !important;
  grid-gap: 14px !important;
  gap: 14px !important;
}

.ss-faq__item {
  background: var(--color-white) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--ss-radius-md) !important;
  overflow: hidden !important;
  -webkit-transition: border-color var(--ss-dur), box-shadow var(--ss-dur) !important;
  transition: border-color var(--ss-dur), box-shadow var(--ss-dur) !important;
}

.ss-faq__item[open] {
  border-color: rgba(255, 124, 10, 0.4) !important;
  box-shadow: var(--ss-shadow-sm) !important;
}

.ss-faq__q {
  list-style: none !important;
  cursor: pointer !important;
  display: -webkit-box !important;
  display: -moz-box !important;
  display: -ms-flexbox !important;
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-align-items: center !important;
  align-items: center !important;
  -webkit-justify-content: space-between !important;
  justify-content: space-between !important;
  grid-gap: 16px !important;
  gap: 16px !important;
  padding: 22px 24px !important;
  font-size: var(--fs-h5) !important;
  font-weight: var(--fw-bold) !important;
  color: var(--color-dark) !important;
}

.ss-faq__q::-webkit-details-marker {
  display: none !important;
}

.ss-faq__q::after {
  content: "+" !important;
  -webkit-flex: none !important;
  flex: none !important;
  font-size: 28px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  color: var(--color-orange) !important;
  -webkit-transition: transform var(--ss-dur) var(--ss-ease) !important;
  transition: transform var(--ss-dur) var(--ss-ease) !important;
}

.ss-faq__item[open] .ss-faq__q::after {
  transform: rotate(45deg) !important;
}

.ss-faq__a {
  padding: 0 24px 24px !important;
  color: var(--text-muted) !important;
  margin: 0 !important;
}

/* 10 · LOCATIONS MAP (rebranded Scotland SVG) */

.ss-locations .map-wrapper {
  max-width: var(--ss-container) !important;
  margin: 0 auto !important;
  padding-inline: var(--ss-gutter) !important;
  display: -webkit-box !important;
  display: -moz-box !important;
  display: -ms-flexbox !important;
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-flex-wrap: wrap !important;
  -moz-flex-wrap: wrap !important;
  -ms-flex-wrap: wrap !important;
  flex-wrap: wrap !important;
  grid-gap: 2rem !important;
  gap: 2rem !important;
  -webkit-align-items: flex-start !important;
  align-items: flex-start !important;
  font-family: var(--font-primary) !important;
}

.ss-locations .map-left {
  -webkit-flex: 1 !important;
  flex: 1 !important;
  min-width: 320px !important;
  padding: 1rem !important;
  background: var(--bg-cream) !important;
  border-radius: var(--ss-radius-md) !important;
  box-shadow: var(--ss-shadow-sm) !important;
}

.ss-locations .map-left svg {
  width: 100% !important;
  height: auto !important;
  max-height: 600px !important;
  display: block !important;
}

.ss-locations #Districts path {
  fill: #D8DBDD !important;
  stroke: #fff !important;
  stroke-width: 1.5 !important;
  cursor: pointer !important;
  -webkit-transition: fill 0.3s var(--ss-ease), stroke-width 0.3s var(--ss-ease) !important;
  transition: fill 0.3s var(--ss-ease), stroke-width 0.3s var(--ss-ease) !important;
}

.ss-locations #Districts path:hover {
  fill: #FDBB80 !important;
  stroke-width: 2 !important;
}

.ss-locations #Districts path.selected {
  fill: var(--color-orange) !important;
  stroke-width: 2 !important;
}

.ss-locations #Districts path:focus-visible {
  outline: none !important;
  fill: #FCAD66 !important;
  stroke: var(--color-orange) !important;
  stroke-width: 2.5 !important;
}

.ss-locations .map-right {
  -webkit-flex: 1 !important;
  flex: 1 !important;
  min-width: 320px !important;
  display: block !important;
}

.ss-locations .council-card {
  padding: 3rem !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--ss-radius-md) !important;
  background: var(--color-white) !important;
  box-shadow: var(--ss-shadow-sm) !important;
  max-width: 100% !important;
  -webkit-transition: box-shadow 0.3s var(--ss-ease) !important;
  transition: box-shadow 0.3s var(--ss-ease) !important;
}

.ss-locations .council-card img {
  max-width: 200px !important;
  height: auto !important;
  margin-bottom: 1rem !important;
}

.ss-locations .council-card h2 {
  font-size: var(--fs-h3) !important;
  margin: 0 0 .5rem !important;
  color: var(--color-dark) !important;
}

@media (max-width: 767px) {
  .ss-locations .council-card h2 {
    font-size: var(--fs-h5) !important;
  }
}

.ss-locations .council-card h3 {
  font-size: var(--fs-h5) !important;
  margin: 1.2rem 0 .5rem !important;
  color: var(--color-dark) !important;
}

.ss-locations .council-card p {
  font-size: var(--fs-body) !important;
  line-height: var(--lh-body) !important;
  color: var(--text-muted) !important;
  margin: 0 0 .75rem !important;
}

.ss-locations .council-card ul {
  list-style: disc !important;
  padding-left: 1.5rem !important;
  margin-top: .5rem !important;
}

.ss-locations .council-card li {
  margin-bottom: .3rem !important;
}

.ss-locations #council-info ul li a {
  color: var(--color-orange) !important;
  text-decoration: none !important;
  font-weight: var(--fw-bold) !important;
  -webkit-transition: color 0.2s var(--ss-ease) !important;
  transition: color 0.2s var(--ss-ease) !important;
}

.ss-locations #council-info ul li a:hover {
  color: #e06c00 !important;
  text-decoration: underline !important;
}

@media (max-width: 768px) {
  .ss-locations .map-wrapper {
    -webkit-flex-direction: column !important;
    -moz-flex-direction: column !important;
    -ms-flex-direction: column !important;
    flex-direction: column !important;
  }

  .ss-locations .map-left,
  .ss-locations .map-right {
    min-width: 100% !important;
  }

  .ss-locations .map-right {
    margin-top: 1.5rem !important;
  }

  .ss-locations .council-card {
    padding: 1.5rem !important;
  }
}

/* 11 · CLOSING CTA (dark band + installer photo) */

.ss-cta {
  position: relative !important;
  overflow: clip !important;
  background: var(--color-dark) !important;
  color: var(--text-on-dark) !important;
  background-image: linear-gradient(90deg, var(--color-dark) 0%, var(--color-dark) 42%, rgba(17, 32, 38, 0.55) 62%, rgba(17, 32, 38, 0.15) 100%), url("https://speedysolar.co.uk/wp-content/uploads/2026/06/speedy-solar-installer.webp") !important;
  background-size: cover, cover !important;
  background-position: center, right center !important;
  background-repeat: no-repeat !important;
}

.ss-cta__inner {
  position: relative !important;
  z-index: 1 !important;
  max-width: var(--ss-container) !important;
  margin-inline: auto !important;
  padding: 88px var(--ss-gutter) !important;
}

.ss-cta__box {
  max-width: 560px !important;
}

.ss-cta__title {
  color: #fff !important;
  margin: 0 0 14px !important;
  font-weight: var(--fw-regular) !important;
  letter-spacing: var(--ls-tight) !important;
  max-width: 430px !important;
}

@media (max-width: 767px) {
  .ss-cta__title {
    font-size: var(--fs-h3) !important;
  }
}

.ss-cta__title span {
  color: var(--color-orange) !important;
  font-weight: var(--fw-bold) !important;
}

.ss-cta__sub {
  color: rgba(255, 255, 255, 0.82) !important;
  margin: 0 0 32px !important;
  font-size: var(--fs-h5) !important;
  line-height: var(--lh-h5) !important;
}

@media (max-width: 767px) {
  .ss-cta__sub {
    font-size: var(--fs-body) !important;
  }
}

@media (max-width: 767px) {
  .ss-cta {
    background-image: linear-gradient(180deg, rgba(17, 32, 38, 0.78), rgba(17, 32, 38, 0.78)), url("https://speedysolar.co.uk/wp-content/uploads/2026/06/speedy-solar-installer.webp") !important;
  }

  .ss-cta__inner {
    padding: 64px var(--ss-gutter) !important;
  }
}

/* ── SOLAR ORBIT — brand graphic device (decorative) ───────────────── */

.ss-has-orbit {
  position: relative !important;
  overflow: clip !important;
}

.ss-orbit {
  position: absolute !important;
  z-index: 0 !important;
  pointer-events: none !important;
  color: #C7D7DE !important;
}

.ss-orbit svg {
  display: block !important;
  width: 100% !important;
  height: auto !important;
}

.ss-orbit svg path {
  fill: currentColor !important;
}

/* Hero — orange orbit, centred & rotated 90° (wide arc), energy-point dot on it */

.ss-orbit--hero {
  width: 300px !important;
  left: 50% !important;
  bottom: 430px !important;
  top: auto !important;
  right: auto !important;
  transform: translateX(-50%) rotate(-90deg) !important;
  -webkit-transform-origin: center !important;
  transform-origin: center !important;
  color: var(--color-off-white) !important;
  opacity: .8 !important;
}

/* CTA — orange flourish on the dark band */

.ss-orbit--cta {
  width: 310px !important;
  bottom: -50px !important;
  left: 55% !important;
  color: var(--color-orange) !important;
  opacity: .35 !important;
}

/* Optional slow drift — add .ss-orbit--spin (respects reduced-motion) */

@keyframes ss-orbit-spin {
  to {
    transform: rotate(360deg);
  }
}

.ss-orbit--spin {
  -webkit-animation: ss-orbit-spin 60s linear infinite !important;
  animation: ss-orbit-spin 60s linear infinite !important;
  -webkit-transform-origin: center !important;
  transform-origin: center !important;
}

@media (max-width: 767px) {
  .ss-orbit--hero {
    width: 150px !important;
    top: 16px !important;
    right: 8px !important;
    left: auto !important;
    opacity: .6 !important;
  }

  .ss-orbit--cta {
    width: 170px !important;
    left: auto !important;
    right: -20px !important;
    bottom: -30px !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   MOBILE-FIRST TIDY  —  tablet + phone refinements
   Placed last so it supersedes the per-section media queries above.
   ════════════════════════════════════════════════════════════════════ */

/* Gutters shrink with the viewport (token cascades to every section) */

@media (max-width: 1024px) {
  :root {
    --ss-gutter: 40px !important;
  }
}

@media (max-width: 767px) {
  :root {
    --ss-gutter: 22px !important;
  }
}

@media (max-width: 767px) {
  /* Vertical rhythm */

  .ss-section__head {
    margin-bottom: 32px !important;
  }

  /* STATS — smaller numerals so the 2×2 never crowds */

  .ss-stat__num {
    font-size: 2.5rem !important;
    letter-spacing: -1px !important;
  }

  /* SMART-TARIFF BAND — body size, not h5 */

  .ss-compat__inner {
    font-size: var(--fs-body) !important;
    padding: 18px var(--ss-gutter) !important;
  }

  /* BENEFITS — restrained index numeral */

  .ss-benefit__num {
    font-size: 3.25rem !important;
    letter-spacing: -3px !important;
    margin-bottom: 12px !important;
  }

  .ss-benefits__grid {
    grid-gap: 26px !important;
    gap: 26px !important;
  }

  /* QUOTE — shorter placeholder */

  .ss-quote__embed {
    min-height: 240px !important;
  }

  /* FAQ — question sits comfortably beside the + */

  .ss-faq__q {
    font-size: var(--fs-body) !important;
    padding: 18px 20px !important;
  }

  .ss-faq__a {
    padding: 0 20px 20px !important;
  }

  /* TESTIMONIALS — trim the rooftop band, tighten cards */

  .ss-testimonials {
    padding-bottom: clamp(140px, 40vw, 220px) !important;
  }

  .ss-testimonials__grid {
    grid-gap: 18px !important;
    gap: 18px !important;
  }

  /* MAP — tighter stack */

  .ss-locations .map-wrapper {
    grid-gap: 1.25rem !important;
    gap: 1.25rem !important;
  }

  .ss-locations .map-left {
    padding: .75rem !important;
  }

  /* CTA — full-width box, comfortable padding */

  .ss-cta__inner {
    padding: 52px var(--ss-gutter) !important;
  }

  .ss-cta__box,
  .ss-cta__title {
    max-width: none !important;
  }
}

/* ── 6. REDUCED MOTION ──────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .ss-home *,
  .ss-home *::before,
  .ss-home *::after {
    -o-transition-duration: .01ms !important;
    -moz-transition-duration: .01ms !important;
    -webkit-transition-duration: .01ms !important;
    transition-duration: .01ms !important;
    -webkit-animation-duration: .01ms !important;
    animation-duration: .01ms !important;
  }

  .ss-btn:hover,
  .ss-card:hover {
    transform: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   7. COMING-SOON PAGE  (.cs)
   ════════════════════════════════════════════════════════════════════ */

.cs {
  min-height: 100vh !important;
  display: -webkit-box !important;
  display: -moz-box !important;
  display: -ms-flexbox !important;
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-align-items: stretch !important;
  align-items: stretch !important;
}

.cs__inner {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  width: 100% !important;
}

@media (max-width: 767px) {
  .cs__inner {
    grid-template-columns: 1fr !important;
  }
}

.cs__content {
  background: var(--bg-primary) !important;
  padding: 80px 72px !important;
  display: -webkit-box !important;
  display: -moz-box !important;
  display: -ms-flexbox !important;
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-flex-direction: column !important;
  -moz-flex-direction: column !important;
  -ms-flex-direction: column !important;
  flex-direction: column !important;
  -webkit-justify-content: center !important;
  justify-content: center !important;
}

@media (max-width: 1024px) {
  .cs__content {
    padding: 60px 48px !important;
  }
}

@media (max-width: 767px) {
  .cs__content {
    padding: 48px 24px !important;
  }
}

.cs__image {
  background-image: url("https://speedysolar.co.uk/wp-content/uploads/2026/06/Coming-soon-image-2a.webp") !important;
  background-size: cover !important;
  background-position: center !important;
  min-height: 500px !important;
}

@media (max-width: 767px) {
  .cs__image {
    min-height: 280px !important;
    width: 100% !important;
  }
}

.cs__logo {
  margin-bottom: 48px !important;
}

.cs__logo img {
  width: 200px !important;
  height: auto !important;
}

.cs__heading {
  font-size: var(--fs-h1) !important;
  font-weight: 800 !important;
  line-height: var(--lh-h1) !important;
  letter-spacing: var(--ls-tight) !important;
  color: var(--color-dark) !important;
  margin: 0 !important;
}

.cs__heading span {
  color: var(--color-orange) !important;
}

@media (max-width: 1440px) {
  .cs__heading {
    font-size: var(--fs-h1-1440) !important;
  }
}

@media (max-width: 1024px) {
  .cs__heading {
    font-size: var(--fs-h1-1024) !important;
  }
}

@media (max-width: 767px) {
  .cs__heading {
    font-size: var(--fs-h1-767) !important;
  }
}

.cs__divider {
  width: 48px !important;
  height: 3px !important;
  background: var(--color-orange) !important;
  border-radius: 2px !important;
  margin: 24px 0 !important;
}

.cs__body {
  font-size: var(--fs-body) !important;
  line-height: var(--lh-body) !important;
  color: var(--color-mid) !important;
  max-width: 400px !important;
  margin: 0 0 40px !important;
}

.cs__contact {
  display: -webkit-box !important;
  display: -moz-box !important;
  display: -ms-flexbox !important;
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-flex-direction: column !important;
  -moz-flex-direction: column !important;
  -ms-flex-direction: column !important;
  flex-direction: column !important;
  grid-gap: 8px !important;
  gap: 8px !important;
}

.cs__contact-label {
  font-size: var(--fs-body-sm) !important;
  font-weight: var(--fw-bold) !important;
  letter-spacing: var(--ls-wide) !important;
  text-transform: uppercase !important;
  color: var(--color-mid) !important;
  margin: 0 !important;
}

.cs__phone {
  font-size: var(--fs-h4) !important;
  font-weight: var(--fw-bold) !important;
  color: var(--color-dark) !important;
  text-decoration: none !important;
}

.cs__phone:hover {
  color: var(--color-orange) !important;
}

.cs__badge {
  display: -webkit-box !important;
  display: -moz-box !important;
  display: -ms-flexbox !important;
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-align-items: center !important;
  align-items: center !important;
  grid-gap: 8px !important;
  gap: 8px !important;
  margin-top: 32px !important;
  font-size: var(--fs-body-sm) !important;
  color: var(--color-mid) !important;
}

.cs__badge-dot {
  width: 8px !important;
  height: 8px !important;
  background: var(--color-orange) !important;
  border-radius: 50% !important;
  -webkit-flex-shrink: 0 !important;
  flex-shrink: 0 !important;
}

/* ════════════════════════════════════════════════════════════════════
   SPEEDY SOLAR — FOOTER  (.ss-footer)
   Uses the global :root tokens. Load site-wide so it reaches the
   Theme Builder footer template (Microthemer global / Site Settings CSS).
   ════════════════════════════════════════════════════════════════════ */

.ss-footer {
  background: var(--bg-dark) !important;
  color: var(--text-on-dark) !important;
  font-family: var(--font-primary) !important;
}

.ss-footer__inner {
  max-width: var(--ss-container) !important;
  margin-inline: auto !important;
  padding: 72px var(--ss-gutter) 32px !important;
}

/* ── Top row ── */

.ss-footer__top {
  display: grid !important;
  grid-template-columns: 1.6fr 1fr 1fr 1fr auto !important;
  grid-gap: 40px 48px !important;
  gap: 40px 48px !important;
  -webkit-align-items: start !important;
  align-items: start !important;
}

/* Brand block */

.ss-footer__logo {
  width: 220px !important;
  max-width: 100% !important;
  height: auto !important;
  margin-bottom: 24px !important;
  display: block !important;
}

.ss-footer__legal {
  margin: 0 !important;
  max-width: 30ch !important;
  color: rgba(255, 255, 255, 0.6) !important;
  font-size: var(--fs-body-sm) !important;
  line-height: 1.7 !important;
}

/* Link columns */

.ss-footer__heading {
  margin: 0 0 18px !important;
  font-size: var(--fs-body) !important;
  font-weight: var(--fw-bold) !important;
  color: #fff !important;
}

.ss-footer__col ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: -webkit-box !important;
  display: -moz-box !important;
  display: -ms-flexbox !important;
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-flex-direction: column !important;
  -moz-flex-direction: column !important;
  -ms-flex-direction: column !important;
  flex-direction: column !important;
  grid-gap: 12px !important;
  gap: 12px !important;
}

.ss-footer__col a,
.ss-footer__legal-links a {
  color: rgba(255, 255, 255, 0.6) !important;
  text-decoration: none !important;
  font-size: var(--fs-body-sm) !important;
  -webkit-transition: color var(--ss-dur) var(--ss-ease) !important;
  transition: color var(--ss-dur) var(--ss-ease) !important;
}

.ss-footer__col a:hover,
.ss-footer__legal-links a:hover {
  color: var(--color-orange) !important;
}

.ss-footer a:focus-visible {
  outline: none !important;
  box-shadow: var(--ss-focus) !important;
  border-radius: 4px !important;
}

/* Endorsement block */

.ss-footer__endorse {
  display: -webkit-box !important;
  display: -moz-box !important;
  display: -ms-flexbox !important;
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-flex-direction: column !important;
  -moz-flex-direction: column !important;
  -ms-flex-direction: column !important;
  flex-direction: column !important;
  -webkit-align-items: flex-end !important;
  align-items: flex-end !important;
  /* right-aligns BOTH label + logo */
}

.ss-footer__endorse-label {
  display: block !important;
  margin-bottom: 10px !important;
  font-size: var(--fs-body-tiny) !important;
  letter-spacing: var(--ls-wide) !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.45) !important;
}

.ss-footer__roofing {
  width: 180px !important;
  max-width: 100% !important;
  height: auto !important;
  display: inline-block !important;
  margin-right: -2px !important;
}

/* ── Bottom bar ── */

.ss-footer__bottom {
  display: -webkit-box !important;
  display: -moz-box !important;
  display: -ms-flexbox !important;
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-align-items: center !important;
  align-items: center !important;
  -webkit-justify-content: space-between !important;
  justify-content: space-between !important;
  -webkit-flex-wrap: wrap !important;
  -moz-flex-wrap: wrap !important;
  -ms-flex-wrap: wrap !important;
  flex-wrap: wrap !important;
  grid-gap: 16px !important;
  gap: 16px !important;
  margin-top: 48px !important;
  padding-top: 24px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.ss-footer__copy {
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.5) !important;
  font-size: var(--fs-body-sm) !important;
}

.ss-footer__legal-links {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: -webkit-box !important;
  display: -moz-box !important;
  display: -ms-flexbox !important;
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-flex-wrap: wrap !important;
  -moz-flex-wrap: wrap !important;
  -ms-flex-wrap: wrap !important;
  flex-wrap: wrap !important;
  grid-gap: 8px 24px !important;
  gap: 8px 24px !important;
}

/* ── Tablet (≤1024): brand + endorse full-width, 3 link columns in a row ── */

@media (max-width: 1024px) {
  .ss-footer__top {
    grid-template-columns: repeat(3, 1fr) !important;
    grid-gap: 36px 32px !important;
    gap: 36px 32px !important;
  }

  .ss-footer__brand {
    grid-column: 1 / -1 !important;
  }

  .ss-footer__endorse {
    grid-column: 1 / -1 !important;
    text-align: left !important;
  }
}

/* ── Mobile (≤767): brand + endorse full-width, links in 2 columns ── */

@media (max-width: 767px) {
  .ss-footer__inner {
    padding: 48px var(--ss-gutter) 28px !important;
  }

  .ss-footer__top {
    grid-template-columns: 1fr 1fr !important;
    grid-gap: 32px 24px !important;
    gap: 32px 24px !important;
  }

  .ss-footer__brand,
  .ss-footer__endorse {
    grid-column: 1 / -1 !important;
  }

  .ss-footer__bottom {
    -webkit-flex-direction: column !important;
    -moz-flex-direction: column !important;
    -ms-flex-direction: column !important;
    flex-direction: column !important;
    -webkit-align-items: flex-start !important;
    align-items: flex-start !important;
    margin-top: 36px !important;
  }
}

/* ── Small phones (≤420): single column ── */

@media (max-width: 420px) {
  .ss-footer__top {
    grid-template-columns: 1fr !important;
  }
}

/* Scroll reveal — only when JS is on AND motion is allowed */

@media (prefers-reduced-motion: no-preference) {
  .ss-reveal-on .ss-reveal {
    opacity: 0 !important;
    transform: translateY(24px) !important;
    -webkit-transition: opacity 0.6s var(--ss-ease), transform 0.6s var(--ss-ease) !important;
    transition: opacity 0.6s var(--ss-ease), transform 0.6s var(--ss-ease) !important;
    will-change: opacity, transform !important;
  }

  .ss-reveal-on .ss-reveal.is-in {
    opacity: 1 !important;
    transform: none !important;
  }

  /* stagger inside card grids */

  .ss-reveal-on [class$="__grid"] > .ss-reveal:nth-child(2) {
    -webkit-transition-delay: 90ms !important;
    transition-delay: 90ms !important;
  }

  .ss-reveal-on [class$="__grid"] > .ss-reveal:nth-child(3) {
    -webkit-transition-delay: 180ms !important;
    transition-delay: 180ms !important;
  }

  .ss-reveal-on [class$="__grid"] > .ss-reveal:nth-child(4) {
    -webkit-transition-delay: 270ms !important;
    transition-delay: 270ms !important;
  }
}

.sp-intro h2 {
  font-weight: var(--fw-regular) !important;
  letter-spacing: -2px !important;
  font-size: var(--fs-h2) !important;
}

@media (max-width: 1440px) {
  .sp-intro h2 {
    font-size: var(--fs-h3) !important;
  }
}

@media (max-width: 767px) {
  .sp-intro h2 {
    font-size: var(--fs-h4) !important;
    letter-spacing: -1px !important;
  }
}

.sp-product h2 {
  font-size: var(--fs-h3) !important;
  font-weight: var(--fw-regular) !important;
  letter-spacing: -1px !important;
}

@media (max-width: 1440px) {
  .sp-product h2 {
    font-size: var(--fs-h4) !important;
  }
}

.sp-choose h2 {
  font-weight: var(--fw-regular) !important;
  letter-spacing: -2px !important;
}

.sp-cta__heading {
  font-weight: var(--fw-regular) !important;
  font-size: var(--fs-h2) !important;
}

@media (max-width: 767px) {
  .sp-cta__heading {
    font-size: var(--fs-h3) !important;
  }
}

.sp-hero {
  position: relative !important;
  overflow: clip !important;
  min-height: 80vh !important;
  display: -webkit-box !important;
  display: -moz-box !important;
  display: -ms-flexbox !important;
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-align-items: center !important;
  align-items: center !important;
  background-image: linear-gradient(to right, rgba(17, 32, 38, 0.88) 0%, rgba(17, 32, 38, 0.55) 55%, rgba(17, 32, 38, 0.1) 100%), url(https://speedysolar.co.uk/wp-content/uploads/2026/07/solar-uk-properties-4.webp) !important;
  background-size: cover !important;
  background-position: center !important;
}

@media (max-width: 767px) {
  .sp-hero {
    min-height: 60vh !important;
  }
}

.sp-hero__inner {
  position: relative !important;
  z-index: 1 !important;
  max-width: var(--ss-container) !important;
  margin-inline: auto !important;
  padding: 120px var(--ss-gutter) !important;
  width: 100% !important;
}

@media (max-width: 1024px) {
  .sp-hero__inner {
    padding-block: 96px !important;
  }
}

@media (max-width: 767px) {
  .sp-hero__inner {
    padding-block: 80px !important;
  }
}

.sp-hero__content {
  max-width: 540px !important;
}

.sp-hero__heading {
  font-size: var(--fs-h1) !important;
  font-weight: var(--fw-regular) !important;
  line-height: 72px !important;
  letter-spacing: -3px !important;
  color: var(--color-white) !important;
  margin: 16px 0 20px !important;
}

@media (max-width: 767px) {
  .sp-hero__heading {
    line-height: 1.1 !important;
    letter-spacing: -1.5px !important;
    font-size: var(--fs-h2) !important;
    max-width: 400px !important;
    margin: auto !important;
  }
}

.sp-hero__highlight {
  font-weight: var(--fw-bold) !important;
  color: var(--color-white) !important;
}

.sp-hero__dot {
  color: var(--color-orange) !important;
  font-weight: var(--fw-bold) !important;
}

.sp-hero__divider {
  width: 48px !important;
  height: 3px !important;
  background: var(--color-orange) !important;
  border-radius: 2px !important;
  margin-bottom: 20px !important;
}

.sp-hero__sub {
  font-size: var(--fs-body) !important;
  line-height: var(--lh-body) !important;
  color: rgba(255, 255, 255, 0.82) !important;
  max-width: 500px !important;
  margin: 0 0 36px !important;
}

.sp-orbit--hero {
  position: absolute !important;
  z-index: 0 !important;
  pointer-events: none !important;
  width: 440px !important;
  right: -12% !important;
  top: 80% !important;
  transform: translateY(-50%) rotate(-45deg) !important;
  color: rgba(255, 255, 255, 0.18) !important;
}

.sp-orbit--hero svg {
  display: block !important;
  width: 100% !important;
  height: auto !important;
}

@media (max-width: 1024px) {
  .sp-orbit--hero {
    width: 320px !important;
    right: 2% !important;
  }
}

@media (max-width: 767px) {
  .sp-orbit--hero {
    display: none !important;
  }
}

.sp-intro__inner {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-gap: 72px !important;
  gap: 72px !important;
  -webkit-align-items: center !important;
  align-items: center !important;
}

@media (max-width: 1024px) {
  .sp-intro__inner {
    grid-gap: 48px !important;
    gap: 48px !important;
  }
}

@media (max-width: 767px) {
  .sp-intro__inner {
    grid-template-columns: 1fr !important;
    grid-gap: 40px !important;
    gap: 40px !important;
  }
}

.sp-intro__body {
  color: var(--text-muted) !important;
  line-height: var(--lh-body) !important;
  margin: 0 0 16px !important;
}

.sp-intro__body:last-of-type {
  margin-bottom: 36px !important;
}

.sp-intro__stats {
  display: -webkit-box !important;
  display: -moz-box !important;
  display: -ms-flexbox !important;
  display: -webkit-flex !important;
  display: flex !important;
  grid-gap: 36px !important;
  gap: 36px !important;
  -webkit-flex-wrap: wrap !important;
  -moz-flex-wrap: wrap !important;
  -ms-flex-wrap: wrap !important;
  flex-wrap: wrap !important;
}

.sp-intro__stat {
  display: -webkit-box !important;
  display: -moz-box !important;
  display: -ms-flexbox !important;
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-flex-direction: column !important;
  -moz-flex-direction: column !important;
  -ms-flex-direction: column !important;
  flex-direction: column !important;
  grid-gap: 4px !important;
  gap: 4px !important;
}

.sp-intro__stat-num {
  font-size: var(--fs-h3) !important;
  font-weight: var(--fw-ultrablack) !important;
  color: var(--color-orange) !important;
  line-height: 1 !important;
  letter-spacing: var(--ls-tight) !important;
}

@media (max-width: 1024px) {
  .sp-intro__stat-num {
    font-size: var(--fs-h4) !important;
  }
}

.sp-intro__stat-label {
  font-size: var(--fs-body-sm) !important;
  font-weight: var(--fw-bold) !important;
  letter-spacing: var(--ls-wide) !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
}

.sp-intro__image {
  background-image: url(https://speedysolar.co.uk/wp-content/uploads/2026/07/solar-installer.webp) !important;
  background-size: cover !important;
  background-position: center !important;
  border-radius: var(--ss-radius-md) !important;
  min-height: 480px !important;
  box-shadow: var(--ss-shadow-md) !important;
}

@media (max-width: 767px) {
  .sp-intro__image {
    min-height: 260px !important;
    order: -1 !important;
  }
}

.sp-product__inner {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-gap: 72px !important;
  gap: 72px !important;
  -webkit-align-items: center !important;
  align-items: center !important;
}

@media (max-width: 1024px) {
  .sp-product__inner {
    grid-gap: 48px !important;
    gap: 48px !important;
  }
}

@media (max-width: 767px) {
  .sp-product__inner {
    grid-template-columns: 1fr !important;
    grid-gap: 36px !important;
    gap: 36px !important;
  }
}

@media (min-width: 768px) {
  .sp-product--reversed .sp-product__inner .sp-product__copy {
    order: 1 !important;
  }

  .sp-product--reversed .sp-product__inner .sp-product__image {
    order: 2 !important;
  }
}

.sp-product__image img {
  width: 100% !important;
  height: auto !important;
  border-radius: var(--ss-radius-md) !important;
  display: block !important;
  box-shadow: var(--ss-shadow-sm) !important;
}

.sp-product__placeholder {
  margin: 8px 0 0 !important;
  font-size: var(--fs-body-tiny) !important;
  color: var(--color-orange) !important;
  font-style: italic !important;
}

.sp-product__body {
  color: var(--text-muted) !important;
  line-height: var(--lh-body) !important;
  margin: 0 0 16px !important;
}

.sp-product__body:last-of-type {
  margin-bottom: 28px !important;
}

.sp-specs {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: -webkit-box !important;
  display: -moz-box !important;
  display: -ms-flexbox !important;
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-flex-direction: column !important;
  -moz-flex-direction: column !important;
  -ms-flex-direction: column !important;
  flex-direction: column !important;
  grid-gap: 10px !important;
  gap: 10px !important;
}

@media (max-width: 767px) {
  .sp-specs {
    display: -webkit-inline-flexbox !important;
    display: -moz-inline-flexbox !important;
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
  }
}

.sp-specs li {
  -webkit-align-items: left !important;
  align-items: left !important;
  text-align: left !important;
  font-size: var(--fs-body) !important;
  font-weight: var(--fw-bold) !important;
  color: var(--color-dark) !important;
}

.sp-specs li::before {
  content: '' !important;
  display: inline-block !important;
  width: 8px !important;
  height: 8px !important;
  background: var(--color-orange) !important;
  border-radius: 50% !important;
  -webkit-flex-shrink: 0 !important;
  flex-shrink: 0 !important;
  margin-right: 12px !important;
}

.sp-image-break {
  height: 420px !important;
  background-image: url(https://speedysolar.co.uk/wp-content/uploads/2026/07/solar-uk-properties.webp) !important;
  background-size: cover !important;
  background-position: center !important;
  background-attachment: fixed !important;
}

@media (max-width: 767px) {
  .sp-image-break {
    height: 220px !important;
    background-attachment: scroll !important;
  }
}

.sp-choose__grid {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  grid-gap: 48px !important;
  gap: 48px !important;
  -webkit-align-items: start !important;
  align-items: start !important;
  margin-bottom: 40px !important;
}

@media (max-width: 767px) {
  .sp-choose__grid {
    grid-template-columns: 1fr !important;
    grid-gap: 24px !important;
    gap: 24px !important;
  }
}

.sp-choose__card {
  background: var(--bg-light) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--ss-radius-md) !important;
  padding: 36px 32px !important;
  box-shadow: var(--ss-shadow-sm) !important;
}

.sp-choose__card p:last-child {
  margin: 0 !important;
  color: var(--text-muted) !important;
  line-height: var(--lh-body) !important;
}

.sp-choose__brand {
  font-size: var(--fs-h5) !important;
  font-weight: var(--fw-ultrablack) !important;
  color: var(--color-dark) !important;
  margin: 0 0 12px !important;
}

.sp-choose__divider {
  width: 2px !important;
  background: var(--color-orange) !important;
  -webkit-align-self: stretch !important;
  align-self: stretch !important;
  border-radius: 2px !important;
}

@media (max-width: 767px) {
  .sp-choose__divider {
    width: 48px !important;
    height: 2px !important;
    margin: 0 auto !important;
  }
}

.sp-choose__note {
  text-align: center !important;
  color: var(--text-muted) !important;
  font-style: italic !important;
  max-width: 680px !important;
  margin: 0 auto !important;
  line-height: var(--lh-body) !important;
}

.sp-cta {
  position: relative !important;
  overflow: clip !important;
  background: var(--color-dark) !important;
  color: var(--text-on-dark, #fff) !important;
  background-image: linear-gradient(90deg, var(--color-dark) 0%, var(--color-dark) 42%, rgba(17, 32, 38, 0.55) 62%, rgba(17, 32, 38, 0.15) 100%), url(https://speedysolar.co.uk/wp-content/uploads/2026/06/speedy-solar-installer.webp) !important;
  background-size: cover, cover !important;
  background-position: center, right center !important;
  background-repeat: no-repeat !important;
}

.sp-cta__inner {
  position: relative !important;
  z-index: 1 !important;
  max-width: var(--ss-container) !important;
  margin-inline: auto !important;
  padding: 88px var(--ss-gutter) !important;
}

@media (max-width: 1024px) {
  .sp-cta__inner {
    padding-block: 72px !important;
  }
}

@media (max-width: 767px) {
  .sp-cta__inner {
    padding-block: 64px !important;
  }
}

.sp-cta__box {
  max-width: 420px !important;
}

.sp-cta__heading {
  line-height: var(--lh-h2) !important;
  letter-spacing: var(--ls-tight) !important;
  color: var(--color-white) !important;
  margin: 12px 0 20px !important;
}

.sp-cta__highlight {
  font-weight: var(--fw-bold) !important;
  color: var(--color-white) !important;
}

.sp-cta__dot {
  color: var(--color-orange) !important;
  font-weight: var(--fw-bold) !important;
}

.sp-cta__sub {
  color: rgba(255, 255, 255, 0.75) !important;
  max-width: 480px !important;
  margin: 0 0 36px !important;
  line-height: var(--lh-body) !important;
}

.sp-cta__phone {
  margin: 20px 0 0 !important;
  font-size: var(--fs-body-sm) !important;
  color: rgba(255, 255, 255, 0.55) !important;
}

.sp-cta__phone a {
  color: var(--color-orange) !important;
  text-decoration: none !important;
  font-weight: var(--fw-bold) !important;
}

.sp-cta__phone a:hover {
  text-decoration: underline !important;
}

.sp-orbit--cta {
  position: absolute !important;
  z-index: 0 !important;
  pointer-events: none !important;
  width: 450px !important;
  bottom: -200px !important;
  left: 55% !important;
  color: var(--color-orange) !important;
  opacity: .7 !important;
}

.sp-orbit--cta svg {
  display: block !important;
  width: 100% !important;
  height: auto !important;
}

@media (max-width: 767px) {
  .sp-orbit--cta {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .ss-btn {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  .sp-hero__content {
    text-align: center !important;
    max-width: 100% !important;
  }

  .sp-hero__divider {
    margin-inline: auto !important;
  }

  .sp-hero__sub {
    max-width: 100% !important;
  }

  .sp-intro__copy {
    text-align: center !important;
  }

  .sp-intro__stats {
    -webkit-justify-content: center !important;
    justify-content: center !important;
  }

  .sp-product__copy {
    text-align: center !important;
  }

  .sp-specs li {
    -webkit-justify-content: center !important;
    justify-content: center !important;
  }

  .sp-choose__card {
    text-align: center !important;
  }

  .sp-cta__box {
    max-width: 100% !important;
    text-align: center !important;
  }

  .sp-cta__sub {
    max-width: 100% !important;
  }

  .sp-cta__phone {
    text-align: center !important;
  }
}

.bs-intro h2 {
  font-weight: var(--fw-regular) !important;
  letter-spacing: -2px !important;
  font-size: var(--fs-h2) !important;
}

@media (max-width: 767px) {
  .bs-intro h2 {
    font-size: var(--fs-h3) !important;
  }
}

.bs-products h2 {
  font-weight: var(--fw-regular) !important;
  letter-spacing: -2px !important;
}

@media (max-width: 767px) {
  .bs-products h2 {
    font-size: var(--fs-h4) !important;
    letter-spacing: -1px !important;
  }
}

.bs-sizing h2 {
  font-weight: var(--fw-regular) !important;
  letter-spacing: -2px !important;
  font-size: var(--fs-h3) !important;
}

@media (max-width: 767px) {
  .bs-sizing h2 {
    font-size: var(--fs-h4) !important;
    letter-spacing: -1px !important;
  }
}

.bs-cta__heading {
  font-weight: var(--fw-regular) !important;
}

.bs-hero {
  position: relative !important;
  overflow: hidden !important;
  min-height: 80vh !important;
  display: -webkit-box !important;
  display: -moz-box !important;
  display: -ms-flexbox !important;
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-align-items: center !important;
  align-items: center !important;
  background-image: linear-gradient(to right, rgba(17, 32, 38, 0.9) 0%, rgba(17, 32, 38, 0.58) 55%, rgba(17, 32, 38, 0.12) 100%), url(https://speedysolar.co.uk/wp-content/uploads/2026/07/battery-storage-hero.webp) !important;
  background-size: cover !important;
  background-position: center !important;
}

@media (max-width: 767px) {
  .bs-hero {
    min-height: 60vh !important;
    background-position: right !important;
  }
}

.bs-hero__inner {
  position: relative !important;
  z-index: 1 !important;
  max-width: var(--ss-container) !important;
  margin-inline: auto !important;
  padding: 120px var(--ss-gutter) !important;
  width: 100% !important;
}

@media (max-width: 1024px) {
  .bs-hero__inner {
    padding-block: 96px !important;
  }
}

@media (max-width: 767px) {
  .bs-hero__inner {
    padding-block: 80px !important;
    max-width: 400px !important;
  }
}

.bs-hero__content {
  max-width: 580px !important;
}

.bs-hero__heading {
  font-size: var(--fs-h1) !important;
  font-weight: var(--fw-regular) !important;
  line-height: 72px !important;
  letter-spacing: -3px !important;
  color: var(--color-white) !important;
  margin: 16px 0 20px !important;
}

@media (max-width: 767px) {
  .bs-hero__heading {
    font-size: var(--fs-h3) !important;
    line-height: 1.1 !important;
    letter-spacing: -1.5px !important;
  }
}

.bs-hero__highlight {
  font-weight: var(--fw-bold) !important;
  color: var(--color-white) !important;
}

.bs-hero__dot {
  color: var(--color-orange) !important;
  font-weight: var(--fw-bold) !important;
}

.bs-hero__sub {
  font-size: var(--fs-body) !important;
  line-height: var(--lh-body) !important;
  color: rgba(255, 255, 255, 0.82) !important;
  max-width: 500px !important;
  margin: 0 0 36px !important;
}

.bs-orbit--hero {
  position: absolute !important;
  z-index: 0 !important;
  pointer-events: none !important;
  width: 440px !important;
  right: -12% !important;
  top: 80% !important;
  transform: translateY(-50%) rotate(25deg) !important;
  color: rgba(255, 255, 255, 0.18) !important;
}

.bs-orbit--hero svg {
  display: block !important;
  width: 100% !important;
  height: auto !important;
}

@media (max-width: 1024px) {
  .bs-orbit--hero {
    width: 320px !important;
    right: 2% !important;
  }
}

@media (max-width: 767px) {
  .bs-orbit--hero {
    display: none !important;
  }
}

.bs-intro__inner {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-gap: 72px !important;
  gap: 72px !important;
  -webkit-align-items: center !important;
  align-items: center !important;
}

@media (max-width: 1024px) {
  .bs-intro__inner {
    grid-gap: 48px !important;
    gap: 48px !important;
  }
}

@media (max-width: 767px) {
  .bs-intro__inner {
    grid-template-columns: 1fr !important;
    grid-gap: 40px !important;
    gap: 40px !important;
  }
}

.bs-intro__image {
  background-image: url(https://speedysolar.co.uk/wp-content/uploads/2026/07/tesla-battery-storage.webp) !important;
  background-size: cover !important;
  background-position: center !important;
  border-radius: var(--ss-radius-md) !important;
  min-height: 500px !important;
  box-shadow: var(--ss-shadow-md) !important;
}

@media (max-width: 767px) {
  .bs-intro__image {
    min-height: 260px !important;
    order: -1 !important;
  }
}

.bs-intro__body {
  color: var(--text-muted) !important;
  line-height: var(--lh-body) !important;
  margin: 0 0 16px !important;
}

.bs-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-gap: 28px !important;
  gap: 28px !important;
}

@media (max-width: 1024px) {
  .bs-grid {
    grid-gap: 20px !important;
    gap: 20px !important;
  }
}

@media (max-width: 767px) {
  .bs-grid {
    grid-template-columns: 1fr !important;
  }
}

.bs-card {
  padding: 0 !important;
  overflow: hidden !important;
}

.bs-card__image img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
}

.bs-card__placeholder {
  margin: 0 !important;
  padding: 6px 16px !important;
  font-size: var(--fs-body-tiny) !important;
  color: var(--color-orange) !important;
  font-style: italic !important;
  background: rgba(255, 124, 10, 0.06) !important;
}

.bs-card__content {
  padding: 32px 32px 36px !important;
  display: -webkit-box !important;
  display: -moz-box !important;
  display: -ms-flexbox !important;
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-flex-direction: column !important;
  -moz-flex-direction: column !important;
  -ms-flex-direction: column !important;
  flex-direction: column !important;
  -webkit-flex: 1 !important;
  flex: 1 !important;
}

@media (max-width: 1024px) {
  .bs-card__content {
    padding: 24px 24px 28px !important;
  }
}

.bs-card__heading {
  font-size: var(--fs-h4) !important;
  font-weight: var(--fw-ultrablack) !important;
  line-height: var(--lh-h4) !important;
  color: var(--color-dark) !important;
  margin: 0 0 14px !important;
}

.bs-card__body {
  color: var(--text-muted) !important;
  line-height: var(--lh-body) !important;
  margin: 0 0 24px !important;
  -webkit-flex: 1 !important;
  flex: 1 !important;
}

.bs-specs {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: -webkit-box !important;
  display: -moz-box !important;
  display: -ms-flexbox !important;
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-flex-direction: column !important;
  -moz-flex-direction: column !important;
  -ms-flex-direction: column !important;
  flex-direction: column !important;
  grid-gap: 8px !important;
  gap: 8px !important;
  border-top: 1px solid var(--color-border) !important;
  padding-top: 20px !important;
}

.bs-specs li {
  display: -webkit-box !important;
  display: -moz-box !important;
  display: -ms-flexbox !important;
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-align-items: center !important;
  align-items: center !important;
  grid-gap: 10px !important;
  gap: 10px !important;
  font-size: var(--fs-body-sm) !important;
  font-weight: var(--fw-bold) !important;
  color: var(--color-dark) !important;
}

.bs-specs li::before {
  content: '' !important;
  display: inline-block !important;
  width: 6px !important;
  height: 6px !important;
  background: var(--color-orange) !important;
  border-radius: 50% !important;
  -webkit-flex-shrink: 0 !important;
  flex-shrink: 0 !important;
}

.bs-image-break {
  height: 420px !important;
  background-image: url(https://speedysolar.co.uk/wp-content/uploads/2026/07/tesla-battery-storage-1a-scaled.webp) !important;
  background-size: cover !important;
  background-position: center !important;
  background-attachment: fixed !important;
}

@media (max-width: 767px) {
  .bs-image-break {
    height: 220px !important;
    background-attachment: scroll !important;
  }
}

.bs-sizing__inner {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-gap: 72px !important;
  gap: 72px !important;
  -webkit-align-items: center !important;
  align-items: center !important;
}

@media (max-width: 1024px) {
  .bs-sizing__inner {
    grid-gap: 48px !important;
    gap: 48px !important;
  }
}

@media (max-width: 767px) {
  .bs-sizing__inner {
    grid-template-columns: 1fr !important;
    grid-gap: 40px !important;
    gap: 40px !important;
  }
}

.bs-sizing__body {
  color: var(--text-muted) !important;
  line-height: var(--lh-body) !important;
  margin: 0 0 28px !important;
}

.bs-sizing__note {
  color: var(--text-muted) !important;
  font-style: italic !important;
  line-height: var(--lh-body) !important;
  margin: 28px 0 0 !important;
}

.bs-sizing__image {
  background-image: url(https://speedysolar.co.uk/wp-content/uploads/2026/07/home-lit-up-at-night.webp) !important;
  background-size: cover !important;
  background-position: center !important;
  border-radius: var(--ss-radius-md) !important;
  min-height: 520px !important;
  box-shadow: var(--ss-shadow-md) !important;
}

@media (max-width: 767px) {
  .bs-sizing__image {
    min-height: 260px !important;
    order: -1 !important;
  }
}

.bs-tiers {
  border-left: 3px solid var(--color-orange) !important;
  border-radius: 0 0 0 2px !important;
}

.bs-tiers__item {
  padding: 20px 24px !important;
  border-bottom: 1px solid var(--color-border) !important;
  -webkit-transition: background-color var(--ss-dur) var(--ss-ease) !important;
  transition: background-color var(--ss-dur) var(--ss-ease) !important;
}

.bs-tiers__item:last-child {
  border-bottom: none !important;
}

.bs-tiers__item:hover {
  background: rgba(255, 124, 10, 0.04) !important;
}

.bs-tiers__size {
  display: block !important;
  font-size: var(--fs-h4) !important;
  font-weight: var(--fw-ultrablack) !important;
  color: var(--color-orange) !important;
  letter-spacing: var(--ls-tight) !important;
  margin-bottom: 6px !important;
}

.bs-tiers__desc {
  font-size: var(--fs-body-sm) !important;
  line-height: var(--lh-body) !important;
  color: var(--text-muted) !important;
  margin: 0 !important;
}

.bs-cta {
  position: relative !important;
  overflow: clip !important;
  background: var(--color-dark) !important;
  color: var(--text-on-dark, #fff) !important;
  background-image: linear-gradient(90deg, var(--color-dark) 0%, var(--color-dark) 42%, rgba(17, 32, 38, 0.55) 62%, rgba(17, 32, 38, 0.15) 100%), url(https://speedysolar.co.uk/wp-content/uploads/2026/06/speedy-solar-installer.webp) !important;
  background-size: cover, cover !important;
  background-position: center, right center !important;
  background-repeat: no-repeat !important;
}

.bs-cta__inner {
  position: relative !important;
  z-index: 1 !important;
  max-width: var(--ss-container) !important;
  margin-inline: auto !important;
  padding: 88px var(--ss-gutter) !important;
}

@media (max-width: 1024px) {
  .bs-cta__inner {
    padding-block: 72px !important;
  }
}

@media (max-width: 767px) {
  .bs-cta__inner {
    padding-block: 64px !important;
  }
}

.bs-cta__box {
  max-width: 720px !important;
}

.bs-cta__heading {
  font-size: var(--fs-h2) !important;
  line-height: var(--lh-h2) !important;
  letter-spacing: var(--ls-tight) !important;
  color: var(--color-white) !important;
  margin: 12px 0 20px !important;
}

@media (max-width: 767px) {
  .bs-cta__heading {
    font-size: var(--fs-h3) !important;
  }
}

.bs-cta__highlight {
  font-weight: var(--fw-bold) !important;
  color: var(--color-white) !important;
}

.bs-cta__dot {
  color: var(--color-orange) !important;
  font-weight: var(--fw-bold) !important;
}

.bs-cta__sub {
  color: rgba(255, 255, 255, 0.75) !important;
  max-width: 480px !important;
  margin: 0 0 36px !important;
  line-height: var(--lh-body) !important;
}

.bs-cta__phone {
  margin: 20px 0 0 !important;
  font-size: var(--fs-body-sm) !important;
  color: rgba(255, 255, 255, 0.55) !important;
}

.bs-cta__phone a {
  color: var(--color-orange) !important;
  text-decoration: none !important;
  font-weight: var(--fw-bold) !important;
}

.bs-cta__phone a:hover {
  text-decoration: underline !important;
}

.bs-orbit--cta {
  position: absolute !important;
  z-index: 0 !important;
  pointer-events: none !important;
  width: 450px !important;
  bottom: -200px !important;
  left: 55% !important;
  color: var(--color-orange) !important;
  opacity: .7 !important;
}

.bs-orbit--cta svg {
  display: block !important;
  width: 100% !important;
  height: auto !important;
}

@media (max-width: 767px) {
  .bs-orbit--cta {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .ss-btn {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  .bs-hero__content {
    text-align: center !important;
    max-width: 100% !important;
  }

  .bs-hero__sub {
    max-width: 100% !important;
  }

  .bs-intro__copy {
    text-align: center !important;
  }

  .bs-card__content {
    text-align: center !important;
  }

  .bs-specs li {
    -webkit-justify-content: center !important;
    justify-content: center !important;
  }

  .bs-sizing__copy {
    text-align: center !important;
  }

  .bs-tiers {
    border-left: none !important;
    border-top: 3px solid var(--color-orange) !important;
  }

  .bs-tiers__item {
    text-align: center !important;
  }

  .bs-cta__box {
    max-width: 100% !important;
    text-align: center !important;
  }

  .bs-cta__sub {
    max-width: 100% !important;
  }

  .bs-cta__phone {
    text-align: center !important;
  }
}