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

/*  MICROTHEMER STYLES  */

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

@charset "UTF-8";

:root {
  /* ── Font Families ── */
  --font-primary: 'Codec Pro', sans-serif !important;
  /* ── Font Weights ── */
  --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;
  /* ── Section Backgrounds ── */
  --bg-primary: #FFFFFF !important;
  --bg-dark: #112026 !important;
  --bg-light: #F4FCFF !important;
  --bg-cream: #F5F2EE !important;
  /* ── Text ── */
  --text-primary: #112026 !important;
  --text-muted: #4A5E66 !important;
  --text-on-dark: #FFFFFF !important;
  --text-on-orange: #FFFFFF !important;
  /* ── UI ── */
  --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;
}

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;
  }
}

.stying-container {
  background: var(--color-orange) !important;
}

.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;
}