/* ==========================================================================
   GALACTICA COMFORT — comfort.je
   Production stylesheet with responsive breakpoints
   ========================================================================== */

/* ─── VARIABLES ───────────────────────────────────────────────────────────── */
:root {
  --color-slate:       #1C2B3A;
  --color-warm-white:  #F5F2EE;
  --color-green:       #2D7D5F;
  --color-mist:        #E8EDF2;
  --color-text-2:      #6B7A8D;
  --color-amber:       #C8873A;
  --color-white:       #ffffff;
  --color-footer:      #142231;

  --font-heading: 'Manrope Variable', Manrope, system-ui, sans-serif;
  --font-body:    'Inter Variable', Inter, system-ui, sans-serif;

  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  12px;

  --section-pad-v: 100px;
  --section-pad-h: 64px;
  --max-w: 1440px;
}

@media (max-width: 1023px) {
  :root {
    --section-pad-v: 80px;
    --section-pad-h: 40px;
  }
}
@media (max-width: 767px) {
  :root {
    --section-pad-v: 64px;
    --section-pad-h: 24px;
  }
}

/* ─── RESET ────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font-family: var(--font-body); background: var(--color-white); color: var(--color-slate); line-height: 1.6; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
ul, ol { list-style: none; }
button { cursor: pointer; font-family: inherit; }

/* ─── SHARED COMPONENTS ────────────────────────────────────────────────────── */

.section-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--section-pad-h);
}

/* Eyebrow label */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 26px;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--color-green);
}
.eyebrow-line {
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--color-green);
  flex-shrink: 0;
}

/* Section headings */
.section-heading {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 44px;
  line-height: 1.07;
  letter-spacing: -2.5px;
  color: var(--color-slate);
  margin-bottom: 18px;
}
.section-sub, .section-body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-text-2);
  max-width: 520px;
}

@media (max-width: 767px) {
  .section-heading { font-size: 30px; letter-spacing: -1.5px; }
  .section-sub, .section-body { font-size: 15px; }
}

/* Photo placeholder */
.photo-placeholder-label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(28, 43, 58, 0.3);
}

/* Buttons */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-slate);
  color: var(--color-warm-white);
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 500;
  padding: 13px 24px;
  border-radius: var(--radius-sm);
  border: none;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.15s;
}
.btn-primary:hover { opacity: 0.85; }
.btn-primary--green { background: var(--color-green); color: #fff; }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--color-slate);
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 500;
  padding: 12px 24px;
  border-radius: var(--radius-sm);
  border: 1.5px solid rgba(28, 43, 58, 0.28);
  text-decoration: none;
  white-space: nowrap;
}
.btn-secondary--sm { font-size: 12.5px; padding: 10px 18px; }

/* ─── NAVIGATION ─────────────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
}

.nav {
  background: var(--color-slate);
  height: 68px;
  display: flex;
  align-items: center;
  padding: 0 40px;
  gap: 0;
}

.nav-logo { display: block; line-height: 0; flex-shrink: 0; }
.nav-logo-img { height: 52px; width: auto; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.nav-links li a {
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 500;
  color: rgba(245, 242, 238, 0.55);
  text-decoration: none;
  padding: 6px 16px;
  border-radius: 4px;
  white-space: nowrap;
  transition: color 0.15s;
}
.nav-links li a:hover, .nav-links li a[aria-current="page"] { color: var(--color-warm-white); }

/* Mobile-only CTA row — hidden on desktop */
.nav-mobile-cta { display: none; }

.nav-cta {
  margin-left: auto;
  background: var(--color-green);
  color: #fff;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  padding: 9px 18px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Hamburger */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  padding: 6px;
  background: none;
  border: none;
  margin-left: auto;
  flex-shrink: 0;
}
.nav-hamburger span {
  display: block;
  width: 100%;
  height: 1.5px;
  background: var(--color-warm-white);
  border-radius: 2px;
  transition: transform 0.25s, opacity 0.25s;
}
.nav-hamburger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-hamburger.is-open span:nth-child(2) { opacity: 0; }
.nav-hamburger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 767px) {
  .nav { padding: 0 24px; height: 60px; }

  .nav-links {
    display: none;
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    background: var(--color-slate);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 4px 0 0;
    border-top: 1px solid rgba(245, 242, 238, 0.1);
    transform: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  }

  .nav-links.is-open { display: flex; }

  /* Nav link rows — Option B style with arrow and separator */
  .nav-links li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-radius: 0;
    font-size: 16px;
    font-weight: 500;
    color: rgba(245, 242, 238, 0.85);
    border-bottom: 1px solid rgba(245, 242, 238, 0.08);
  }

  /* Arrow indicator on each nav link */
  .nav-links li a::after {
    content: '›';
    font-size: 20px;
    color: rgba(245, 242, 238, 0.3);
    line-height: 1;
    font-weight: 300;
  }

  .nav-links li a:hover {
    color: var(--color-warm-white);
    background: rgba(255, 255, 255, 0.04);
  }

  /* Show the mobile CTA row */
  .nav-mobile-cta { display: block; }

  /* CTA button inside the dropdown */
  .nav-cta-mobile {
    display: block;
    background: var(--color-green);
    color: #fff !important;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    padding: 16px 24px;
    margin: 16px 20px 20px;
    border-radius: var(--radius-sm) !important;
    text-decoration: none;
    border-bottom: none !important;
  }

  /* Remove arrow from the CTA row */
  .nav-mobile-cta a::after { display: none; }

  /* Hide desktop CTA on mobile */
  .nav-cta { display: none; }

  .nav-hamburger { display: flex; }
}

/* ─── HERO ───────────────────────────────────────────────────────────────── */
.hero {
  display: grid;
  grid-template-columns: 52% 1fr;
  min-height: 580px;
}

.hero-left {
  background: var(--color-warm-white);
  padding: 80px 52px 80px 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-headline {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 52px;
  line-height: 1.0;
  letter-spacing: -2.5px;
  color: var(--color-slate);
  margin-bottom: 24px;
}
.hero-equals { display: block; color: var(--color-green); }
.hero-sub {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.72;
  color: var(--color-text-2);
  margin-bottom: 40px;
}
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 44px; }
.hero-trust {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
}
.hero-trust span {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--color-text-2);
}
.hero-trust span + span {
  margin-left: 18px;
  padding-left: 18px;
  border-left: 1px solid rgba(107, 122, 141, 0.2);
}
.trust-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-green);
}

.hero-photo {
  position: relative;
  overflow: hidden;
  background: #CDD5DC;
}
.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 1023px) {
  .hero-left { padding: 64px 40px 64px 40px; }
  .hero-headline { font-size: 44px; }
}
@media (max-width: 767px) {
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-photo { display: none; }
  .hero-left { padding: 56px 24px; }
  .hero-headline { font-size: 36px; letter-spacing: -1.5px; }
  .hero-sub { font-size: 15px; }
  .hero-trust span + span { margin-left: 14px; padding-left: 14px; }
}

/* ─── PARTNERS ───────────────────────────────────────────────────────────── */
.partners {
  background: var(--color-white);
  padding: 56px 0;
  overflow: hidden;
  border-top: 1px solid rgba(28, 43, 58, 0.07);
  border-bottom: 1px solid rgba(28, 43, 58, 0.07);
}
.partners-heading {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--color-text-2);
  text-align: center;
  margin-bottom: 36px;
}
.carousel-outer {
  position: relative;
  overflow: hidden;
}
.carousel-outer::before,
.carousel-outer::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}
.carousel-outer::before { left: 0; background: linear-gradient(to right, var(--color-white), transparent); }
.carousel-outer::after  { right: 0; background: linear-gradient(to left, var(--color-white), transparent); }

@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.carousel-track {
  display: flex;
  align-items: center;
  gap: 24px;
  width: max-content;
  animation: marquee 28s linear infinite;
  padding: 0 12px;
}
.carousel-track:hover { animation-play-state: paused; }

.partner-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 136px;
  height: 58px;
  border: 1.5px solid rgba(28, 43, 58, 0.12);
  border-radius: 8px;
  flex-shrink: 0;
  gap: 8px;
  background: var(--color-white);
}
.partner-logo { max-height: 36px; max-width: 110px; object-fit: contain; }
.partner-placeholder-icon {
  width: 26px;
  height: 26px;
  border-radius: 4px;
  background: rgba(28, 43, 58, 0.07);
  flex-shrink: 0;
}
.partner-name {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  color: rgba(28, 43, 58, 0.28);
  letter-spacing: .5px;
  text-transform: uppercase;
}

/* ─── REALITY HEADER ─────────────────────────────────────────────────────── */
.reality-header {
  background: var(--color-white);
  padding: var(--section-pad-v) 0;
}
.reality-header .section-inner { max-width: 780px; }

/* ─── REALITY INTERACTIVE ────────────────────────────────────────────────── */
.reality-interactive {
  background: var(--color-slate);
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
}

.reality-image-wrap { position: relative; min-height: 480px; }
.reality-image-state {
  position: absolute;
  inset: 0;
  transition: opacity 0.4s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #B4BFCC;
}
.reality-image-state:nth-child(2) { background: #A2B4AD; }
.reality-image-state:nth-child(3) { background: #8CA49C; }
.reality-image-state img { width: 100%; height: 100%; object-fit: cover; }
.reality-image-state:not(.is-active) { opacity: 0; }
.reality-image-state .photo-placeholder-label { color: rgba(28, 43, 58, 0.3); }

.reality-blocks { display: flex; flex-direction: column; }
.reality-block {
  flex: 1;
  padding: 34px 36px;
  background: none;
  border: none;
  border-left: 3px solid transparent;
  text-align: left;
  opacity: 0.38;
  cursor: pointer;
  transition: opacity 0.25s, border-color 0.25s;
}
.reality-block:not(:last-child) { border-bottom: 1px solid rgba(245, 242, 238, 0.08); }
.reality-block.is-active { opacity: 1; border-left-color: var(--color-green); }
.reality-block-num {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 500;
  color: rgba(245, 242, 238, 0.35);
  letter-spacing: 2px;
  margin-bottom: 10px;
}
.reality-block-title {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 600;
  color: #F5F2EE;
  margin-bottom: 10px;
  letter-spacing: -0.2px;
  line-height: 1.25;
}
.reality-block-body {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.7;
  color: rgba(245, 242, 238, 0.62);
}

@media (max-width: 767px) {
  .reality-interactive { grid-template-columns: 1fr; }
  .reality-image-wrap { min-height: 260px; }
  .reality-block { padding: 24px 24px; }
  .reality-block-title { font-size: 15px; }
}

/* ─── ENGINEERING ────────────────────────────────────────────────────────── */
.engineering-section {
  background: var(--color-white);
  padding: var(--section-pad-v) 0;
}

.cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 64px;
}

.card {
  background: var(--color-white);
  border: 1px solid rgba(28, 43, 58, 0.09);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.card-image {
  height: 200px;
  background: var(--color-mist);
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-image img { width: 100%; height: 100%; object-fit: cover; }
.card-content {
  padding: 24px 26px 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.card-label {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-green);
  margin-bottom: 7px;
}
.card-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.22;
  letter-spacing: -0.4px;
  color: var(--color-slate);
  margin-bottom: 11px;
}
.card-body {
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.68;
  color: var(--color-text-2);
}
.card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-green);
  text-decoration: none;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(28, 43, 58, 0.07);
}

@media (max-width: 767px) {
  .cards-grid { grid-template-columns: 1fr; gap: 16px; margin-top: 44px; }
  .card-image { height: 220px; }
}
@media (min-width: 1280px) {
  .engineering-section .cards-grid,
  .services-section .cards-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ─── HERITAGE ───────────────────────────────────────────────────────────── */
.heritage-section {
  background: var(--color-white);
  padding: var(--section-pad-v) 0;
}

.heritage-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 64px;
}
.heritage-card {
  background: var(--color-slate);
  border: 1px solid rgba(245, 242, 238, 0.07);
  border-radius: var(--radius-lg);
  padding: 32px 26px 36px;
  display: flex;
  flex-direction: column;
}
.heritage-card-label {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-green);
  margin-bottom: 16px;
  line-height: 1.4;
}
.heritage-card-num {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 58px;
  line-height: 1;
  letter-spacing: -3px;
  color: #F5F2EE;
  margin-bottom: 18px;
}
.heritage-card-num .pct { color: var(--color-green); }
.heritage-card-rule {
  border: none;
  border-top: 1px solid rgba(245, 242, 238, 0.1);
  margin-bottom: 16px;
}
.heritage-card-body {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.68;
  color: rgba(245, 242, 238, 0.6);
  flex: 1;
}

@media (max-width: 767px) {
  .heritage-cards { grid-template-columns: 1fr; gap: 16px; margin-top: 44px; }
  .heritage-card-num { font-size: 48px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .heritage-cards { grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
  .heritage-card { padding: 24px 20px 28px; }
}

/* ─── SERVICES ───────────────────────────────────────────────────────────── */
.services-section {
  background: var(--color-white);
  padding: var(--section-pad-v) 0;
}

/* ─── PROCESS ────────────────────────────────────────────────────────────── */
.process-section {
  background: var(--color-white);
  padding: var(--section-pad-v) 0;
}
.process-header {
  margin-bottom: 64px;
}
.process-header-bottom {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.process-header-bottom .section-sub {
  margin: 0;
  max-width: 440px;
}

.process-timeline {
  display: flex;
  flex-direction: column;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 64px;
  width: 100%;
}
.process-step {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 0 28px;
}
.process-marker { display: flex; flex-direction: column; align-items: center; }
.process-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-green);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.process-circle span {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.5px;
}
.process-line {
  flex: 1;
  width: 1.5px;
  background: rgba(45, 125, 95, 0.18);
  margin-top: 3px;
}
.process-row {
  display: flex;
  gap: 48px;
  align-items: flex-start;
  padding-bottom: 44px;
}
.process-step:last-child .process-row { padding-bottom: 0; }
.process-text { flex: 1; min-width: 0; padding-top: 8px; }
.process-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.2;
  letter-spacing: -0.4px;
  color: var(--color-slate);
  margin-bottom: 10px;
}
.process-body {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-text-2);
}
.process-thumb {
  width: 200px;
  height: 156px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-mist);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
}
.process-thumb img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 1023px) {
  .process-header-bottom { gap: 20px; }
  .process-timeline { padding: 0 32px; }
  .process-thumb { width: 160px; height: 124px; }
}
@media (max-width: 767px) {
  .process-header-bottom { flex-direction: column; align-items: flex-start; gap: 16px; }
  .process-header-bottom .btn-secondary { align-self: flex-start; }
  .process-timeline { padding: 0 24px; }
  .process-thumb { display: none; }
  .process-step { grid-template-columns: 36px 1fr; gap: 0 20px; }
  .process-circle { width: 36px; height: 36px; }
  .process-row { padding-bottom: 36px; }
}

/* ─── CTA SECTION ────────────────────────────────────────────────────────── */
.cta-section {
  background: var(--color-slate);
  padding: var(--section-pad-v) var(--section-pad-h);
  text-align: center;
}
.cta-inner { max-width: 560px; margin: 0 auto; }
.cta-eyebrow {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(245, 242, 238, 0.5);
  margin-bottom: 22px;
}
.cta-heading {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 38px;
  line-height: 1.1;
  letter-spacing: -2px;
  color: var(--color-warm-white);
  margin-bottom: 18px;
}
.cta-body {
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.72;
  color: rgba(245, 242, 238, 0.62);
  margin-bottom: 40px;
}

@media (max-width: 767px) {
  .cta-heading { font-size: 28px; letter-spacing: -1.2px; }
  .cta-body { font-size: 15px; }
}

/* ─── FOOTER ─────────────────────────────────────────────────────────────── */
.site-footer {
  background: var(--color-footer);
}
.footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 60px 64px 0;
}
.footer-top {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin-bottom: 48px;
}
.footer-brand { flex: 0 0 220px; }
.footer-logo-img { height: 42px; width: auto; }
.footer-brand-desc {
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.65;
  color: rgba(245, 242, 238, 0.36);
  margin-top: 14px;
  max-width: 190px;
}
.footer-cols {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.footer-col-heading {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(245, 242, 238, 0.4);
  margin-bottom: 16px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col ul a {
  font-family: var(--font-body);
  font-size: 12.5px;
  color: rgba(245, 242, 238, 0.56);
  text-decoration: none;
  transition: color 0.15s;
}
.footer-col ul a:hover { color: var(--color-warm-white); }
.footer-social { display: flex; flex-direction: column; gap: 10px; }

.footer-bottom {
  border-top: 1px solid rgba(245, 242, 238, 0.08);
  padding: 22px 0 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-copy {
  font-family: var(--font-body);
  font-size: 11.5px;
  color: rgba(245, 242, 238, 0.3);
}
.footer-mcs {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  color: rgba(45, 125, 95, 0.7);
  letter-spacing: 0.5px;
}
.footer-bottom nav { display: flex; gap: 16px; }
.footer-bottom nav a {
  font-family: var(--font-body);
  font-size: 11.5px;
  color: rgba(245, 242, 238, 0.3);
  text-decoration: none;
}
.footer-bottom nav a:hover { color: rgba(245, 242, 238, 0.65); }

@media (max-width: 1023px) {
  .footer-inner { padding: 52px 40px 0; }
}
@media (max-width: 767px) {
  .footer-inner { padding: 48px 24px 0; }
  .footer-top { flex-direction: column; gap: 40px; }
  .footer-brand { flex: none; width: 100%; }
  .footer-cols { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
  .footer-cols > div:last-child { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   SERVICES PAGE — /services/
   ========================================================================== */

/* Eyebrow modifiers
   ----------------------------------------------------------- */
.eyebrow--centred {
  justify-content: center;
}

.eyebrow--light span:not(.eyebrow-line) {
  color: var(--color-green);
}

/* Services hero — centred, no image
   ----------------------------------------------------------- */
.svc-hero {
  background: var(--color-warm-white);
  padding: var(--section-pad-v) var(--section-pad-h);
  text-align: center;
}

.svc-hero__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.svc-hero__title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 56px;
  line-height: 1.03;
  letter-spacing: -3px;
  color: var(--color-slate);
  margin-bottom: 20px;
  max-width: 700px;
}

.svc-hero__sub {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.65;
  color: var(--color-text-2);
  margin-bottom: 36px;
  max-width: 480px;
}

.svc-hero__sub strong {
  color: var(--color-slate);
  font-weight: 600;
}

@media (max-width: 1023px) {
  .svc-hero__title { font-size: 44px; letter-spacing: -2px; }
  .svc-hero__sub   { font-size: 16px; }
}

@media (max-width: 767px) {
  .svc-hero__title { font-size: 34px; letter-spacing: -1.5px; }
  .svc-hero__sub   { font-size: 15px; }
}

/* Systems section
   ----------------------------------------------------------- */
.svc-systems {
  background: var(--color-white);
  padding: var(--section-pad-v) 0;
}

.svc-section-header {
  margin-bottom: 52px;
}

/* 4-column card grid for services page
   ----------------------------------------------------------- */
.svc-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

@media (max-width: 1023px) {
  .svc-cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  .svc-cards { grid-template-columns: 1fr; gap: 16px; }
}

/* Guidance section
   ----------------------------------------------------------- */
.svc-guidance {
  background: var(--color-white);
  padding: 0 0 var(--section-pad-v);
}

.svc-guidance__header {
  max-width: 640px;
  margin-bottom: 52px;
}

.svc-guidance__header p {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.65;
  color: var(--color-text-2);
  margin: 0;
}

/* Feature card — dark split panel
   ----------------------------------------------------------- */
.svc-feature-card {
  background: var(--color-slate);
  border-radius: 16px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 420px;
}

.svc-feature-card__copy {
  padding: 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

/* Heading inside dark feature card — must override .section-heading colour */
.svc-feature-card__copy .section-heading {
  color: var(--color-warm-white);
  font-size: 36px;
  letter-spacing: -1.8px;
  margin-bottom: 20px;
}

.svc-feature-card__copy p {
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.75;
  color: rgba(245, 242, 238, 0.65);
  margin-bottom: 36px;
}

/* Prevent button stretching inside flex column */
.svc-feature-card__copy .btn-primary {
  align-self: flex-start;
}

.svc-feature-card__image {
  background: var(--color-mist);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

@media (max-width: 1023px) {
  .svc-feature-card { grid-template-columns: 1fr; }
  .svc-feature-card__image { min-height: 300px; }
  .svc-feature-card__copy { padding: 48px 40px; }
}

@media (max-width: 767px) {
  .svc-feature-card__copy { padding: 40px 28px; }
  .svc-feature-card__copy .section-heading { font-size: 28px; letter-spacing: -1.2px; }
}

/* Benefits section — 2×2 horizontal grid
   ----------------------------------------------------------- */
.svc-benefits {
  background: var(--color-white);
  padding: var(--section-pad-v) 0;
}

.svc-benefits__header {
  text-align: center;
  margin-bottom: 64px;
}

.svc-benefits__header .section-heading {
  margin-left: auto;
  margin-right: auto;
  max-width: 680px;
}

.svc-benefits__header .section-sub {
  margin: 0 auto;
  text-align: center;
}

.svc-benefits__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  border: 1px solid rgba(28, 43, 58, 0.08);
  border-radius: 16px;
  overflow: hidden;
}

.svc-benefit {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 44px 48px;
  background: var(--color-white);
}

.svc-benefit__icon {
  width: 52px;
  height: 52px;
  min-width: 52px;
  background: rgba(45, 125, 95, 0.1);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.svc-benefit__icon i {
  font-size: 22px;
  color: var(--color-green);
}

.svc-benefit__text h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.3px;
  line-height: 1.25;
  color: var(--color-slate);
  margin-bottom: 10px;
}

.svc-benefit__text p {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.72;
  color: var(--color-text-2);
  margin: 0;
}

@media (max-width: 1023px) {
  .svc-benefit { padding: 36px; }
}

@media (max-width: 767px) {
  .svc-benefits__grid { grid-template-columns: 1fr; }
  .svc-benefit { padding: 28px 24px; }
}

/* Services page CTA
   ----------------------------------------------------------- */
.svc-cta {
  background: var(--color-slate);
  padding: var(--section-pad-v) var(--section-pad-h);
  text-align: center;
}

.svc-cta__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.svc-cta__eyebrow {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(245, 242, 238, 0.45);
  margin-bottom: 24px;
}

.svc-cta__title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 48px;
  line-height: 1.05;
  letter-spacing: -2.5px;
  color: var(--color-warm-white);
  margin-bottom: 18px;
  max-width: 640px;
}

.svc-cta__sub {
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.7;
  color: rgba(245, 242, 238, 0.55);
  margin-bottom: 40px;
  max-width: 480px;
}

@media (max-width: 767px) {
  .svc-cta__title { font-size: 32px; letter-spacing: -1.5px; }
  .svc-cta__sub   { font-size: 15px; }
}

/* ==========================================================================
   SERVICE SUB-PAGES  (sp-*)
   Shared styles for /services/air-source-heat-pumps/, /services/ground-source-heat-pumps/ etc.
   ========================================================================== */

/* Section wrappers
   ----------------------------------------------------------- */
.sp-how {
  background: var(--color-white);
  padding: var(--section-pad-v) var(--section-pad-h);
}

.sp-benefits {
  background: var(--color-warm-white);
  padding: var(--section-pad-v) var(--section-pad-h);
}

.sp-grant {
  background: var(--color-white);
  padding: var(--section-pad-v) var(--section-pad-h);
}

.sp-jersey {
  background: var(--color-white);
  padding: var(--section-pad-v) var(--section-pad-h);
}

/* Section headers
   ----------------------------------------------------------- */
.sp-section-header {
  max-width: 640px;
  margin-bottom: 52px;
}

.sp-section-header--centred {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.sp-section-header--centred .section-sub {
  margin-left: auto;
  margin-right: auto;
}

/* Shared icon tile — used across steps, stat cards, grant points, captions
   ----------------------------------------------------------- */
.sp-icon-tile {
  width: 48px;
  height: 48px;
  min-width: 48px;
  background: rgba(45, 125, 95, 0.1);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.sp-icon-tile i {
  font-size: 22px;
  color: var(--color-green);
}

/* How it works — 3-step grid
   ----------------------------------------------------------- */
.sp-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid rgba(28, 43, 58, 0.09);
  border-radius: 16px;
  overflow: hidden;
}

.sp-step {
  padding: 48px 40px;
  border-right: 1px solid rgba(28, 43, 58, 0.09);
}

.sp-step:last-child {
  border-right: none;
}

.sp-step h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 20px;
  color: var(--color-slate);
  margin-bottom: 12px;
}

.sp-step p {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-text-2);
  line-height: 1.65;
}

/* Benefits — 4-column stat cards
   ----------------------------------------------------------- */
.sp-stat-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.sp-stat-card {
  background: var(--color-white);
  border: 1px solid rgba(28, 43, 58, 0.09);
  border-radius: var(--radius-lg);
  padding: 40px 32px 36px;
  display: flex;
  flex-direction: column;
}

.sp-stat-card .sp-icon-tile {
  margin-bottom: 24px;
}

.sp-stat-metric {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 30px;
  color: var(--color-slate);
  letter-spacing: -1.5px;
  line-height: 1;
  margin-bottom: 8px;
}

.sp-stat-metric span {
  color: var(--color-green);
}

.sp-stat-divider {
  width: 32px;
  height: 2px;
  background: var(--color-green);
  margin-bottom: 16px;
}

.sp-stat-card h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 18px;
  color: var(--color-slate);
  margin-bottom: 10px;
}

.sp-stat-card > p:not(.sp-stat-metric) {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-2);
  line-height: 1.65;
}

/* Grant section — split panel
   ----------------------------------------------------------- */
.sp-grant__panel {
  border: 1px solid rgba(28, 43, 58, 0.09);
  border-radius: 20px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.sp-grant__left {
  padding: 56px 52px;
  border-right: 1px solid rgba(28, 43, 58, 0.09);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.sp-grant__figure {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 80px;
  color: var(--color-slate);
  letter-spacing: -4px;
  line-height: 1;
  margin-bottom: 4px;
}

.sp-grant__figure span {
  color: var(--color-green);
}

.sp-grant__desc {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-text-2);
  line-height: 1.55;
  margin-bottom: 32px;
  max-width: 280px;
}

.sp-grant__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(45, 125, 95, 0.1);
  color: var(--color-green);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 6px;
}

.sp-grant__tag i {
  font-size: 14px;
}

.sp-grant__right {
  padding: 48px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  justify-content: center;
}

.sp-grant__point {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.sp-grant__point-icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  background: rgba(45, 125, 95, 0.1);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.sp-grant__point-icon i {
  font-size: 16px;
  color: var(--color-green);
}

.sp-grant__point h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 15px;
  color: var(--color-slate);
  margin-bottom: 4px;
}

.sp-grant__point p {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-2);
  line-height: 1.6;
}

.sp-grant__footer {
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid rgba(28, 43, 58, 0.07);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.sp-grant__footer p {
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(28, 43, 58, 0.4);
}

.sp-grant__footer a {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-green);
  text-decoration: none;
}

.sp-grant__footer a:hover {
  text-decoration: underline;
}

/* Jersey conditions — photo + captions
   ----------------------------------------------------------- */
.sp-photo {
  background: var(--color-mist);
  border-radius: 20px;
  height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 28px;
  overflow: hidden;
}

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

.sp-captions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.sp-caption {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 28px 24px;
  border: 1px solid rgba(28, 43, 58, 0.09);
  border-radius: 14px;
}

.sp-caption__icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  background: rgba(45, 125, 95, 0.1);
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.sp-caption__icon i {
  font-size: 18px;
  color: var(--color-green);
}

.sp-caption h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  color: var(--color-slate);
  margin-bottom: 6px;
}

.sp-caption p {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-2);
  line-height: 1.6;
}

/* Responsive — Tablet (≤1023px)
   ----------------------------------------------------------- */
@media (max-width: 1023px) {
  .sp-stat-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .sp-grant__panel {
    grid-template-columns: 1fr;
  }

  .sp-grant__left {
    border-right: none;
    border-bottom: 1px solid rgba(28, 43, 58, 0.09);
    padding: 40px 40px;
  }

  .sp-grant__right {
    padding: 40px;
  }

  .sp-grant__figure {
    font-size: 60px;
  }

  .sp-captions {
    grid-template-columns: repeat(2, 1fr);
  }

  .sp-steps {
    grid-template-columns: 1fr;
  }

  .sp-step {
    border-right: none;
    border-bottom: 1px solid rgba(28, 43, 58, 0.09);
  }

  .sp-step:last-child {
    border-bottom: none;
  }

  .sp-photo {
    height: 360px;
  }
}

/* Responsive — Mobile (≤767px)
   ----------------------------------------------------------- */
@media (max-width: 767px) {
  .sp-stat-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .sp-stat-card {
    padding: 28px 20px 24px;
  }

  .sp-grant__left {
    padding: 32px 24px;
  }

  .sp-grant__right {
    padding: 32px 24px;
  }

  .sp-grant__figure {
    font-size: 48px;
    letter-spacing: -2px;
  }

  .sp-grant__desc {
    max-width: 100%;
  }

  .sp-captions {
    grid-template-columns: 1fr;
  }

  .sp-step {
    padding: 32px 24px;
  }

  .sp-photo {
    height: 260px;
    border-radius: 14px;
  }

  .sp-section-header,
  .sp-section-header--centred {
    margin-bottom: 36px;
  }
}

/* ==========================================================================
   GSHP ADDITIONS  —  append to end of sp-styles.css
   ========================================================================== */

/* 2×2 benefit cards  (sp-ben-*)
   ----------------------------------------------------------- */
.sp-ben-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.sp-ben-card {
  background: var(--color-white);
  border: 1px solid rgba(28, 43, 58, 0.09);
  border-radius: 16px;
  padding: 44px;
}

.sp-ben-tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-green);
  background: rgba(45, 125, 95, 0.1);
  padding: 5px 12px;
  border-radius: 5px;
  margin-bottom: 20px;
}

.sp-ben-card h3 {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 26px;
  color: var(--color-slate);
  letter-spacing: -1px;
  line-height: 1.15;
  margin-bottom: 14px;
}

.sp-ben-card p {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-text-2);
  line-height: 1.65;
}

/* Numbered rows  (sp-conditions / sp-nrow*)
   ----------------------------------------------------------- */
.sp-conditions {
  background: var(--color-white);
  padding: var(--section-pad-v) var(--section-pad-h);
}

.sp-nrow {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 64px;
  align-items: start;
  padding: 52px 0;
  border-top: 1px solid rgba(28, 43, 58, 0.09);
}

.sp-nrow:last-child {
  border-bottom: 1px solid rgba(28, 43, 58, 0.09);
}

.sp-nrow__num {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 72px;
  color: rgba(28, 43, 58, 0.07);
  line-height: 1;
  letter-spacing: -3px;
  padding-top: 4px;
}

.sp-nrow__content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

.sp-nrow__cat {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-green);
  margin-bottom: 14px;
  display: block;
}

.sp-nrow__left h3 {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 30px;
  color: var(--color-slate);
  letter-spacing: -1.2px;
  line-height: 1.15;
}

.sp-nrow__right p {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-text-2);
  line-height: 1.75;
}

/* Responsive — Tablet (≤1023px)
   ----------------------------------------------------------- */
@media (max-width: 1023px) {
  .sp-ben-grid {
    grid-template-columns: 1fr;
  }

  .sp-nrow {
    grid-template-columns: 80px 1fr;
    gap: 32px;
  }

  .sp-nrow__num {
    font-size: 52px;
  }

  .sp-nrow__content {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* Responsive — Mobile (≤767px)
   ----------------------------------------------------------- */
@media (max-width: 767px) {
  .sp-ben-card {
    padding: 32px 28px;
  }

  .sp-ben-card h3 {
    font-size: 22px;
  }

  .sp-nrow {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 36px 0;
  }

  .sp-nrow__num {
    font-size: 40px;
    letter-spacing: -2px;
  }

  .sp-nrow__left h3 {
    font-size: 24px;
    letter-spacing: -1px;
  }

  .sp-nrow__right p {
    font-size: 15px;
  }
}

/* ==========================================================================
   AIR CONDITIONING ADDITIONS  —  append to end of sp-styles.css
   ========================================================================== */

/* Split intro section  (sp-split*)
   ----------------------------------------------------------- */
.sp-split {
  background: var(--color-white);
  padding: var(--section-pad-v) var(--section-pad-h);
}

.sp-split__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.sp-split__copy .section-heading {
  margin-top: 20px;
}

.sp-split__copy .section-body {
  margin-bottom: 36px;
}

.sp-checklist {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sp-check-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.sp-check-icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  background: rgba(45, 125, 95, 0.1);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

.sp-check-icon i {
  font-size: 14px;
  color: var(--color-green);
}

.sp-check-item span {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-slate);
  font-weight: 500;
  line-height: 1.55;
}

.sp-split__photo {
  background: var(--color-mist);
  border-radius: 20px;
  height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

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

/* Three-column cards with photos  (sp-trio*)
   ----------------------------------------------------------- */
.sp-trio {
  background: var(--color-warm-white);
  padding: var(--section-pad-v) var(--section-pad-h);
}

.sp-trio__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.sp-trio__card {
  background: var(--color-white);
  border: 1px solid rgba(28, 43, 58, 0.09);
  border-radius: 16px;
  overflow: hidden;
}

.sp-trio__img {
  background: var(--color-mist);
  height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

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

.sp-trio__body {
  padding: 32px 32px 36px;
}

.sp-trio__cat {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-green);
  display: block;
  margin-bottom: 10px;
}

.sp-trio__card h3 {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 22px;
  color: var(--color-slate);
  letter-spacing: -0.8px;
  line-height: 1.2;
  margin-bottom: 12px;
}

.sp-trio__card p {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-2);
  line-height: 1.65;
}

/* Process grid + photo  (sp-process*)
   ----------------------------------------------------------- */
.sp-process {
  background: var(--color-white);
  padding: var(--section-pad-v) var(--section-pad-h);
}

.sp-process__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.sp-process__left .sp-section-header {
  margin-bottom: 40px;
}

.sp-process__items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid rgba(28, 43, 58, 0.09);
  border-radius: 16px;
  overflow: hidden;
}

.sp-process__item {
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(28, 43, 58, 0.09);
  border-bottom: 1px solid rgba(28, 43, 58, 0.09);
}

.sp-process__item:nth-child(2) { border-right: none; }
.sp-process__item:nth-child(3) { border-bottom: none; }
.sp-process__item:nth-child(4) { border-right: none; border-bottom: none; }

.sp-process__item-icon {
  width: 44px;
  height: 44px;
  background: rgba(45, 125, 95, 0.1);
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.sp-process__item-icon i {
  font-size: 20px;
  color: var(--color-green);
}

.sp-process__item h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 17px;
  color: var(--color-slate);
  margin-bottom: 8px;
}

.sp-process__item p {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-2);
  line-height: 1.6;
}

.sp-process__photo {
  background: var(--color-mist);
  border-radius: 20px;
  height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

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

/* Responsive — Tablet (≤1023px)
   ----------------------------------------------------------- */
@media (max-width: 1023px) {
  .sp-split__grid,
  .sp-process__grid {
    grid-template-columns: 1fr;
  }

  .sp-split__photo,
  .sp-process__photo {
    height: 360px;
  }

  .sp-trio__grid {
    grid-template-columns: 1fr 1fr;
  }

  .sp-process__items {
    grid-template-columns: 1fr 1fr;
  }
}

/* Responsive — Mobile (≤767px)
   ----------------------------------------------------------- */
@media (max-width: 767px) {
  .sp-split__photo,
  .sp-process__photo {
    height: 260px;
    border-radius: 14px;
  }

  .sp-trio__grid {
    grid-template-columns: 1fr;
  }

  .sp-trio__img {
    height: 200px;
  }

  .sp-process__items {
    grid-template-columns: 1fr;
  }

  .sp-process__item:nth-child(2),
  .sp-process__item:nth-child(3) {
    border-right: none;
    border-bottom: 1px solid rgba(28, 43, 58, 0.09);
  }

  .sp-process__item:nth-child(4) {
    border-bottom: none;
  }

  .sp-check-item span {
    font-size: 14px;
  }
}

/* ==========================================================================
   HVAC ADDITIONS  —  append to end of sp-styles.css
   NOTE: This file adds only the sp-apart component. All other sections on
   the HVAC page reuse existing classes:
     - Hero          → svc-hero (base)
     - Split intro   → sp-split (AC additions)
     - Benefits rows → sp-conditions / sp-nrow* (GSHP additions)
     - Process       → sp-process (AC additions)
     - CTA           → svc-cta (base)
   ========================================================================== */

/* "What sets HVAC apart"  (sp-apart*)
   Left: eyebrow + heading + body
   Right: 2×2 feature card grid
   ----------------------------------------------------------- */
.sp-apart {
  background: var(--color-warm-white);
  padding: var(--section-pad-v) var(--section-pad-h);
}

.sp-apart__grid {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 80px;
  align-items: start;
}

.sp-apart__left .section-heading {
  margin-top: 20px;
}

.sp-apart__left .section-body {
  max-width: 400px;
}

.sp-apart__features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.sp-apart__feature {
  background: var(--color-white);
  border: 1px solid rgba(28, 43, 58, 0.09);
  border-radius: 16px;
  padding: 36px 32px;
}

.sp-apart__feature .sp-icon-tile {
  margin-bottom: 20px;
}

.sp-apart__feature h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 18px;
  color: var(--color-slate);
  margin-bottom: 10px;
}

.sp-apart__feature p {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-2);
  line-height: 1.65;
}

/* Responsive — Tablet (≤1023px)
   ----------------------------------------------------------- */
@media (max-width: 1023px) {
  .sp-apart__grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .sp-apart__left .section-body {
    max-width: 100%;
  }
}

/* Responsive — Mobile (≤767px)
   ----------------------------------------------------------- */
@media (max-width: 767px) {
  .sp-apart__features {
    grid-template-columns: 1fr;
  }

  .sp-apart__feature {
    padding: 28px 24px;
  }
}

/* ==========================================================================
   OUR PROCESS PAGE  —  /our-process/
   Append to end of src/assets/css/style.css
   New classes: sp-proc* and sp-proc-rigour*
   All existing classes (svc-hero, svc-cta, section-inner, section-heading,
   section-sub, eyebrow, photo-placeholder-label) are reused unchanged.
   ========================================================================== */

/* ── PROCESS STEPS SECTION (sp-proc*)
   White background. Numbered timeline with photo alongside each step.
   ----------------------------------------------------------- */
.sp-proc {
  background: var(--color-white);
  padding: var(--section-pad-v) var(--section-pad-h);
}

.sp-proc__header {
  max-width: 640px;
  margin-bottom: 72px;
}

.sp-proc__steps {
  display: flex;
  flex-direction: column;
}

/* Three-column grid per step: number (76px) | content (1fr) | photo (340px) */
.sp-proc__step {
  display: grid;
  grid-template-columns: 76px 1fr 340px;
  column-gap: 44px;
  position: relative;
  padding-bottom: 60px;
}

.sp-proc__step:last-child {
  padding-bottom: 0;
}

/* Vertical connector line — runs from below the number circle to the bottom
   of the step, connecting to the next step's circle */
.sp-proc__num-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.sp-proc__step:not(:last-child) .sp-proc__num-col::after {
  content: '';
  position: absolute;
  top: 54px;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  background: var(--color-mist);
}

/* Green numbered circle */
.sp-proc__num {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--color-green);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 13.5px;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

/* Step text content */
.sp-proc__content {
  padding-top: 11px;
}

.sp-proc__step-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.18;
  letter-spacing: -0.4px;
  color: var(--color-slate);
  margin-bottom: 13px;
}

.sp-proc__step-body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.72;
  color: var(--color-text-2);
  max-width: 520px;
  margin-bottom: 20px;
}

/* Checklist items */
.sp-proc__details {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.sp-proc__detail {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--color-text-2);
}

.sp-proc__detail i {
  color: var(--color-green);
  font-size: 15px;
  flex-shrink: 0;
  margin-top: 1px;
}

/* Photo column */
.sp-proc__photo-col {
  padding-top: 7px;
}

.sp-proc__photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--color-mist);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

/* ── TECHNICAL RIGOUR SECTION (sp-proc-rigour*)
   Warm white background. Split layout: copy left, photo right.
   ----------------------------------------------------------- */
.sp-proc-rigour {
  background: var(--color-warm-white);
  padding: var(--section-pad-v) var(--section-pad-h);
}

.sp-proc-rigour__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 88px;
  align-items: center;
}

/* Heading and intro body use shared .section-heading and .section-sub — no override needed */

/* Feature list */
.sp-proc-rigour__features {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-top: 40px;
}

.sp-proc-rigour__feature {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}

.sp-proc-rigour__icon {
  width: 46px;
  height: 46px;
  min-width: 46px;
  background: rgba(45, 125, 95, 0.1);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sp-proc-rigour__icon i {
  color: var(--color-green);
  font-size: 22px;
}

.sp-proc-rigour__feature h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.25;
  color: var(--color-slate);
  margin-bottom: 7px;
}

.sp-proc-rigour__feature p {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.68;
  color: var(--color-text-2);
}

/* Photo */
.sp-proc-rigour__photo {
  width: 100%;
  aspect-ratio: 5 / 4;
  background: var(--color-mist);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sp-proc-rigour__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── RESPONSIVE — Tablet (≤1023px)
   ----------------------------------------------------------- */
@media (max-width: 1023px) {

  .sp-proc__step {
    grid-template-columns: 64px 1fr;
    column-gap: 28px;
  }

  .sp-proc__photo-col {
    display: none;
  }

  .sp-proc__step-body {
    max-width: 100%;
  }

  .sp-proc-rigour__grid {
    grid-template-columns: 1fr;
    gap: 52px;
  }

  .sp-proc-rigour__photo {
    aspect-ratio: 16 / 9;
  }
}

/* ── RESPONSIVE — Mobile (≤767px)
   ----------------------------------------------------------- */
@media (max-width: 767px) {

  .sp-proc__header {
    margin-bottom: 48px;
  }

  .sp-proc__step {
    grid-template-columns: 48px 1fr;
    column-gap: 20px;
    padding-bottom: 44px;
  }

  .sp-proc__num {
    width: 40px;
    height: 40px;
    font-size: 12px;
  }

  .sp-proc__step:not(:last-child) .sp-proc__num-col::after {
    top: 42px;
  }

  .sp-proc__content {
    padding-top: 7px;
  }

  .sp-proc__step-title {
    font-size: 18px;
  }

  .sp-proc__step-body {
    font-size: 14px;
  }

  .sp-proc-rigour__features {
    gap: 24px;
    margin-top: 32px;
  }

  .sp-proc-rigour__icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
  }

  .sp-proc-rigour__icon i {
    font-size: 18px;
  }
}

/* ==========================================================================
   CONTACT PAGE  —  /contact/
   Append to end of src/assets/css/style.css
   New classes: sp-cf* (form section) and sp-faq* (FAQ accordion)
   All existing classes (svc-hero, section-inner, section-heading,
   section-sub, eyebrow, btn-primary) are reused unchanged.
   ========================================================================== */

/* ── CONTACT FORM SECTION (sp-cf*)
   White background. Split: info left, form right.
   ----------------------------------------------------------- */
.sp-cf {
  background: var(--color-white);
  padding: var(--section-pad-v) var(--section-pad-h);
}

.sp-cf__grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 88px;
  align-items: start;
}

/* Left column — info */
.sp-cf__info .section-heading {
  margin-top: 0;
}

.sp-cf__info .section-sub {
  margin-bottom: 48px;
}

.sp-cf__details {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.sp-cf__detail {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.sp-cf__detail-icon {
  width: 38px;
  height: 38px;
  min-width: 38px;
  background: rgba(45, 125, 95, 0.1);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sp-cf__detail-icon i {
  color: var(--color-green);
  font-size: 18px;
}

.sp-cf__detail-label {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-text-2);
  margin-bottom: 4px;
}

.sp-cf__detail-value {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--color-slate);
  text-decoration: none;
}

.sp-cf__detail-value:hover {
  color: var(--color-green);
}

/* Right column — form */
.sp-cf__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.sp-cf__field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 20px;
}

.sp-cf__field--message {
  margin-top: 4px;
}

.sp-cf__label {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-slate);
}

.sp-cf__input {
  height: 48px;
  padding: 0 14px;
  border: 1.5px solid rgba(28, 43, 58, 0.2);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-slate);
  background: var(--color-white);
  outline: none;
  width: 100%;
  transition: border-color 0.15s;
}

.sp-cf__input:focus {
  border-color: var(--color-green);
}

.sp-cf__select {
  height: 48px;
  padding: 0 40px 0 14px;
  border: 1.5px solid rgba(28, 43, 58, 0.2);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-slate);
  background: var(--color-white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7A8D' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  outline: none;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.15s;
}

.sp-cf__select:focus {
  border-color: var(--color-green);
}

.sp-cf__radio-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 24px;
  margin-top: 6px;
}

.sp-cf__radio {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-slate);
  cursor: pointer;
}

.sp-cf__radio input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: var(--color-green);
  flex-shrink: 0;
  cursor: pointer;
}

.sp-cf__textarea {
  padding: 14px;
  border: 1.5px solid rgba(28, 43, 58, 0.2);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-slate);
  background: var(--color-white);
  outline: none;
  width: 100%;
  resize: vertical;
  min-height: 140px;
  transition: border-color 0.15s;
}

.sp-cf__textarea:focus {
  border-color: var(--color-green);
}

.sp-cf__textarea::placeholder,
.sp-cf__input::placeholder {
  color: rgba(28, 43, 58, 0.3);
}

.sp-cf__checkbox {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 24px 0 28px;
}

.sp-cf__checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--color-green);
  flex-shrink: 0;
  margin-top: 1px;
  cursor: pointer;
}

.sp-cf__checkbox label {
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--color-text-2);
  cursor: pointer;
}

.sp-cf__checkbox a {
  color: var(--color-green);
  text-decoration: underline;
}

/* ── FAQ SECTION (sp-faq*)
   White background. Navy hover and open states on question rows.
   ----------------------------------------------------------- */
.sp-faq {
  background: var(--color-white);
  padding: var(--section-pad-v) var(--section-pad-h);
}

.sp-faq__header {
  max-width: 640px;
  margin-bottom: 56px;
}

.sp-faq__list {
  border: 1px solid rgba(28, 43, 58, 0.12);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.sp-faq__item {
  border-bottom: 1px solid rgba(28, 43, 58, 0.1);
}

.sp-faq__item:last-child {
  border-bottom: none;
}

/* Question row — full-width button */
.sp-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding: 24px 28px;
  background: var(--color-white);
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
}

/* Hover state — navy */
.sp-faq__q:hover {
  background: var(--color-slate);
}

.sp-faq__q:hover .sp-faq__q-text {
  color: #fff;
}

.sp-faq__q:hover .sp-faq__icon {
  border-color: rgba(255, 255, 255, 0.25);
}

.sp-faq__q:hover .sp-faq__icon i {
  color: rgba(255, 255, 255, 0.65);
}

.sp-faq__q-text {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
  color: var(--color-slate);
  transition: color 0.15s;
}

.sp-faq__icon {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 50%;
  border: 1.5px solid rgba(28, 43, 58, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, border-color 0.2s;
}

.sp-faq__icon i {
  color: var(--color-text-2);
  font-size: 16px;
  transition: transform 0.25s, color 0.2s;
}

/* Open state — navy question row, green icon */
.sp-faq__item--open .sp-faq__q {
  background: var(--color-slate);
  padding-bottom: 32px;
}

.sp-faq__item--open .sp-faq__q .sp-faq__q-text {
  color: #fff;
}

.sp-faq__item--open .sp-faq__q .sp-faq__icon {
  background: var(--color-green);
  border-color: var(--color-green);
}

.sp-faq__item--open .sp-faq__q .sp-faq__icon i {
  color: #fff;
  transform: rotate(45deg);
}

/* Answer — full-width white block with top padding */
.sp-faq__a {
  width: 100%;
  background: var(--color-white);
  padding: 28px 28px 28px;
}

.sp-faq__a p {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.72;
  color: var(--color-text-2);
  max-width: 820px;
}

/* ── RESPONSIVE — Tablet (≤1023px)
   ----------------------------------------------------------- */
@media (max-width: 1023px) {
  .sp-cf__grid {
    grid-template-columns: 1fr;
    gap: 56px;
  }

  .sp-cf__info .section-sub {
    max-width: 100%;
  }
}

/* ── RESPONSIVE — Mobile (≤767px)
   ----------------------------------------------------------- */
@media (max-width: 767px) {
  .sp-cf__row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .sp-cf__radio-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .sp-faq__q {
    padding: 20px 20px;
  }

  .sp-faq__q-text {
    font-size: 15px;
  }

  .sp-faq__a {
    padding: 24px 20px 24px;
  }
}
/* ── SYSTEM CARE CONDITIONAL SUB-FIELD (sp-cf__system-care*)
   Hidden by default. Revealed via JS when "System Care" is
   selected in the service selector. Sits between the service
   select and the client-type radio group.
   ----------------------------------------------------------- */
.sp-cf__system-care {
  display: none;
  margin-top: -4px;
  margin-bottom: 20px;
  background: rgba(45, 125, 95, 0.06);
  border: 1.5px solid rgba(45, 125, 95, 0.22);
  border-radius: var(--radius-md);
  padding: 20px 20px 16px;
}

.sp-cf__system-care--visible {
  display: block;
}

.sp-cf__system-care-label {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-slate);
  margin-bottom: 12px;
}

/* Single-column override for the System Care radio grid */
.sp-cf__radio-grid--col1 {
  grid-template-columns: 1fr;
  gap: 10px;
}

/* ==========================================================================
   SYSTEM CARE PAGE  —  /system-care/
   New classes prefixed sp-sc__*. Reuses: svc-hero, svc-cta, sp-faq,
   section-inner, eyebrow, section-heading, section-sub, btn-primary,
   btn-secondary, btn-primary--green, sp-faq__* (all unchanged).
   ========================================================================== */

/* ── TWO PROPOSITIONS  (sp-sc__props*)
   White background. Centred header. Two cards side by side —
   left card outlined, right card navy-filled.
   ----------------------------------------------------------- */
.sp-sc__props {
  background: var(--color-white);
  padding: var(--section-pad-v) var(--section-pad-h);
}

.sp-sc__props-header {
  text-align: center;
  margin-bottom: 64px;
}

.sp-sc__props-header .section-heading {
  margin-left: auto;
  margin-right: auto;
  max-width: 600px;
}

.sp-sc__props-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.sp-sc__prop-card {
  border: 1.5px solid var(--color-mist);
  border-radius: var(--radius-lg);
  padding: 48px;
  display: flex;
  flex-direction: column;
}

.sp-sc__prop-card--dark {
  background: var(--color-slate);
  border-color: var(--color-slate);
}

.sp-sc__prop-tag {
  display: inline-block;
  background: var(--color-mist);
  color: var(--color-slate);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 4px;
  margin-bottom: 28px;
  align-self: flex-start;
}

.sp-sc__prop-card--dark .sp-sc__prop-tag {
  background: var(--color-green);
  color: #fff;
}

.sp-sc__prop-card h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 27px;
  line-height: 1.12;
  letter-spacing: -0.5px;
  color: var(--color-slate);
  margin-bottom: 16px;
}

.sp-sc__prop-card--dark h3 {
  color: var(--color-warm-white);
}

.sp-sc__prop-card > p {
  font-family: var(--font-body);
  font-size: 15.5px;
  color: var(--color-text-2);
  line-height: 1.65;
  margin-bottom: 28px;
}

.sp-sc__prop-card--dark > p {
  color: rgba(245, 242, 238, 0.62);
}

.sp-sc__prop-features {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 36px;
  flex: 1;
}

.sp-sc__prop-feature {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.sp-sc__prop-check {
  color: var(--color-green);
  font-size: 17px;
  line-height: 1.4;
  flex-shrink: 0;
}

.sp-sc__prop-feature strong {
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--color-slate);
  display: block;
  margin-bottom: 3px;
}

.sp-sc__prop-card--dark .sp-sc__prop-feature strong {
  color: var(--color-warm-white);
}

.sp-sc__prop-feature p {
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--color-text-2);
  line-height: 1.6;
  margin: 0;
}

.sp-sc__prop-card--dark .sp-sc__prop-feature p {
  color: rgba(245, 242, 238, 0.5);
}

.sp-sc__prop-link {
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--color-green);
  text-decoration: none;
  align-self: flex-start;
}

.sp-sc__prop-link:hover {
  text-decoration: underline;
}

/* ── WHAT'S INCLUDED  (sp-sc__includes*)
   Warm-white background. Centred header. 4-column strip with
   hairline gap separators — same technique as svc-benefits__grid.
   ----------------------------------------------------------- */
.sp-sc__includes {
  background: var(--color-warm-white);
  padding: var(--section-pad-v) var(--section-pad-h);
}

.sp-sc__includes-header {
  text-align: center;
  margin-bottom: 52px;
}

.sp-sc__includes-header .section-heading {
  margin-left: auto;
  margin-right: auto;
  max-width: 620px;
}

.sp-sc__includes-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  background: var(--color-mist);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.sp-sc__includes-cell {
  background: var(--color-white);
  padding: 40px 36px;
}

.sp-sc__includes-cell i {
  font-size: 30px;
  color: var(--color-green);
  display: block;
  margin-bottom: 20px;
}

.sp-sc__includes-cell h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 18px;
  color: var(--color-slate);
  letter-spacing: -0.3px;
  line-height: 1.2;
  margin-bottom: 10px;
}

.sp-sc__includes-cell p {
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--color-text-2);
  line-height: 1.6;
  margin: 0;
}

/* ── REMOTE MONITORING  (sp-sc__monitor*)
   White background. 50/50 split — copy left, photo right.
   ----------------------------------------------------------- */
.sp-sc__monitor {
  background: var(--color-white);
  padding: var(--section-pad-v) var(--section-pad-h);
}

.sp-sc__monitor__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 96px;
  align-items: center;
}

.sp-sc__monitor__copy .section-heading {
  margin-bottom: 16px;
}

.sp-sc__monitor__copy .section-sub {
  margin-bottom: 0;
}

.sp-sc__check-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 28px 0 40px;
}

.sp-sc__check-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.sp-sc__check-dot {
  width: 20px;
  height: 20px;
  min-width: 20px;
  background: var(--color-green);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  flex-shrink: 0;
}

.sp-sc__check-dot i {
  font-size: 11px;
  color: #fff;
}

.sp-sc__check-item p {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-slate);
  line-height: 1.5;
  margin: 0;
}

.sp-sc__monitor__photo {
  background: var(--color-mist);
  border-radius: var(--radius-lg);
  min-height: 460px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

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

/* ── SUPPORT PLANS  (sp-sc__plans*)
   Warm-white background. Centred header. 3 cards — middle card
   navy-filled with "Most popular" badge.
   ----------------------------------------------------------- */
.sp-sc__plans {
  background: var(--color-warm-white);
  padding: var(--section-pad-v) var(--section-pad-h);
}

.sp-sc__plans-header {
  text-align: center;
  margin-bottom: 64px;
}

.sp-sc__plans-header .section-heading {
  margin-left: auto;
  margin-right: auto;
  max-width: 580px;
}

.sp-sc__plans-header .section-sub {
  margin: 0 auto;
  text-align: center;
}

.sp-sc__plan-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}

.sp-sc__plan-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 44px 40px;
  display: flex;
  flex-direction: column;
  position: relative;
}

.sp-sc__plan-card--featured {
  background: var(--color-slate);
}

.sp-sc__plan-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-green);
  color: #fff;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 20px;
  white-space: nowrap;
}

.sp-sc__plan-tag {
  display: inline-block;
  background: var(--color-mist);
  color: var(--color-slate);
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 4px;
  margin-bottom: 20px;
  align-self: flex-start;
}

.sp-sc__plan-card--featured .sp-sc__plan-tag {
  background: rgba(255, 255, 255, 0.12);
  color: var(--color-warm-white);
}

.sp-sc__plan-card h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 24px;
  color: var(--color-slate);
  letter-spacing: -0.4px;
  line-height: 1.15;
  margin-bottom: 10px;
}

.sp-sc__plan-card--featured h3 {
  color: var(--color-warm-white);
}

.sp-sc__plan-desc {
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--color-text-2);
  line-height: 1.6;
  margin: 0;
}

.sp-sc__plan-card--featured .sp-sc__plan-desc {
  color: rgba(245, 242, 238, 0.62);
}

.sp-sc__plan-divider {
  border: none;
  border-top: 1px solid var(--color-mist);
  margin: 24px 0;
}

.sp-sc__plan-card--featured .sp-sc__plan-divider {
  border-top-color: rgba(255, 255, 255, 0.12);
}

.sp-sc__plan-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 11px;
  flex: 1;
  margin-bottom: 32px;
}

.sp-sc__plan-feature {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--color-slate);
}

.sp-sc__plan-card--featured .sp-sc__plan-feature {
  color: var(--color-warm-white);
}

.sp-sc__plan-feature i {
  font-size: 15px;
  color: var(--color-green);
  flex-shrink: 0;
}

.sp-sc__plan-feature--no {
  color: rgba(28, 43, 58, 0.3);
}

.sp-sc__plan-card--featured .sp-sc__plan-feature--no {
  color: rgba(245, 242, 238, 0.22);
}

.sp-sc__plan-feature--no i {
  color: rgba(28, 43, 58, 0.18);
}

.sp-sc__plan-card--featured .sp-sc__plan-feature--no i {
  color: rgba(245, 242, 238, 0.16);
}

/* Full-width CTA button at base of each plan card */
.sp-sc__plan-cta {
  display: block;
  text-align: center;
  width: 100%;
}

/* ── RESPONSIVE — Tablet (≤1023px)
   ----------------------------------------------------------- */
@media (max-width: 1023px) {
  .sp-sc__props-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .sp-sc__includes-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  .sp-sc__monitor__inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .sp-sc__monitor__photo {
    min-height: 340px;
    order: -1;
  }

  .sp-sc__plan-cards {
    grid-template-columns: 1fr;
    gap: 32px;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
  }

  .sp-sc__props-header {
    margin-bottom: 48px;
  }
}

/* ── RESPONSIVE — Mobile (≤767px)
   ----------------------------------------------------------- */
@media (max-width: 767px) {
  .sp-sc__prop-card {
    padding: 32px 28px;
  }

  .sp-sc__prop-card h3 {
    font-size: 22px;
  }

  .sp-sc__includes-strip {
    grid-template-columns: 1fr;
  }

  .sp-sc__includes-cell {
    padding: 32px 28px;
  }

  .sp-sc__monitor__photo {
    min-height: 260px;
    border-radius: var(--radius-md);
  }

  .sp-sc__plan-card {
    padding: 40px 32px 36px;
    max-width: 100%;
  }

  .sp-sc__plans-header {
    margin-bottom: 48px;
  }
}

/* ==========================================================================
   ABOUT PAGE  —  /about/
   New classes prefixed sp-ab__*. Reuses: svc-hero, svc-cta, sp-split,
   sp-split__grid, sp-split__copy, sp-split__photo, section-inner, eyebrow,
   section-heading, section-body, btn-primary--green (all unchanged).
   ========================================================================== */

/* ── GROUP SECTION  (sp-ab__group*)
   Slate background. Copy left, credential cards right.
   ----------------------------------------------------------- */
.sp-ab__group {
  background: var(--color-slate);
  padding: var(--section-pad-v) var(--section-pad-h);
}

.sp-ab__group__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 88px;
  align-items: center;
}

/* Override section-heading colour for dark background */
.sp-ab__group__heading {
  color: var(--color-warm-white);
}

.sp-ab__group__body {
  font-family: var(--font-body);
  font-size: 15.5px;
  color: rgba(245, 242, 238, 0.62);
  line-height: 1.75;
  margin-bottom: 32px;
  max-width: 100%;
}

.sp-ab__group__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--color-warm-white);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  padding: 13px 22px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background 0.15s;
}

.sp-ab__group__link:hover {
  background: rgba(255, 255, 255, 0.13);
}

.sp-ab__group__link span {
  opacity: 0.5;
}

/* Credential + verticals grid */
.sp-ab__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.sp-ab__credential {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  padding: 28px 26px;
}

.sp-ab__credential__heading {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 26px;
  color: var(--color-warm-white);
  letter-spacing: -0.8px;
  line-height: 1.15;
  margin-bottom: 10px;
}

.sp-ab__credential__heading .accent {
  color: var(--color-green);
}

.sp-ab__credential__body {
  font-family: var(--font-body);
  font-size: 12.5px;
  color: rgba(245, 242, 238, 0.5);
  line-height: 1.55;
}

.sp-ab__verticals {
  grid-column: 1 / -1;
  background: rgba(45, 125, 95, 0.14);
  border: 1px solid rgba(45, 125, 95, 0.28);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
}

.sp-ab__verticals__label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-green);
  margin-bottom: 16px;
}

.sp-ab__verticals__dot {
  width: 7px;
  height: 7px;
  background: var(--color-green);
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}

/* Roadmap strip — 5 equal cells, connected border */
.sp-ab__roadmap {
  display: flex;
  align-items: stretch;
  gap: 0;
}

.sp-ab__roadmap-cell {
  flex: 1;
  background: rgba(255, 255, 255, 0.04);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  padding: 14px 14px 12px;
  display: flex;
  flex-direction: column;
}

.sp-ab__roadmap-cell--first {
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.sp-ab__roadmap-cell--last {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.sp-ab__roadmap-cell--live {
  background: rgba(45, 125, 95, 0.18);
  border-color: rgba(45, 125, 95, 0.38);
}

.sp-ab__roadmap-cell--live.sp-ab__roadmap-cell--first {
  border-left-color: rgba(45, 125, 95, 0.38);
}

.sp-ab__roadmap-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  color: rgba(245, 242, 238, 0.42);
  letter-spacing: -0.2px;
  margin-bottom: 4px;
  line-height: 1.2;
}

.sp-ab__roadmap-cell--live .sp-ab__roadmap-name {
  color: var(--color-warm-white);
}

.sp-ab__roadmap-geo {
  font-family: var(--font-body);
  font-size: 10.5px;
  color: rgba(245, 242, 238, 0.25);
  margin-bottom: 10px;
  line-height: 1.3;
}

.sp-ab__roadmap-cell--live .sp-ab__roadmap-geo {
  color: rgba(245, 242, 238, 0.5);
}

.sp-ab__roadmap-badge {
  display: inline-block;
  margin-top: auto;
  align-self: flex-start;
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(245, 242, 238, 0.3);
  background: rgba(255, 255, 255, 0.06);
  padding: 3px 8px;
  border-radius: 4px;
}

.sp-ab__roadmap-badge--live {
  color: var(--color-green);
  background: rgba(45, 125, 95, 0.25);
}

/* Responsive — stack roadmap to 2-col then 1-col on small screens */
@media (max-width: 767px) {
  .sp-ab__roadmap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .sp-ab__roadmap-cell,
  .sp-ab__roadmap-cell--first,
  .sp-ab__roadmap-cell--last {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-sm);
  }

  .sp-ab__roadmap-cell--live,
  .sp-ab__roadmap-cell--live.sp-ab__roadmap-cell--first {
    border-color: rgba(45, 125, 95, 0.38);
  }
}

/* ── HOW WE WORK  (sp-ab__how*)
   Warm-white background. Split header, 3-column approach grid.
   ----------------------------------------------------------- */
.sp-ab__how {
  background: var(--color-warm-white);
  padding: var(--section-pad-v) var(--section-pad-h);
}

.sp-ab__how__header {
  margin-bottom: 60px;
}

.sp-ab__how__header-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: end;
}

/* Suppress default section-heading bottom margin — alignment handled by grid */
.sp-ab__how__header-split .section-heading {
  margin-bottom: 0;
}

.sp-ab__how__intro {
  font-family: var(--font-body);
  font-size: 16.5px;
  color: var(--color-text-2);
  line-height: 1.65;
  margin: 0;
}

.sp-ab__how__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--color-mist);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.sp-ab__how-cell {
  background: var(--color-white);
  padding: 44px 38px;
}

.sp-ab__how-icon {
  width: 44px;
  height: 44px;
  background: rgba(45, 125, 95, 0.1);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
}

.sp-ab__how-icon i {
  font-size: 22px;
  color: var(--color-green);
}

.sp-ab__how-cell h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 19px;
  color: var(--color-slate);
  letter-spacing: -0.3px;
  margin-bottom: 12px;
  line-height: 1.2;
}

.sp-ab__how-cell p {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-2);
  line-height: 1.65;
  margin: 0;
}

/* ── THE STANDARD  (sp-ab__standard*)
   White background. Centred header. 4-column strip with
   warm-white cells — visually distinct from sp-sc__includes.
   ----------------------------------------------------------- */
.sp-ab__standard {
  background: var(--color-white);
  padding: var(--section-pad-v) var(--section-pad-h);
}

.sp-ab__standard__header {
  text-align: center;
  margin-bottom: 52px;
}

.sp-ab__standard__header .section-heading {
  margin-left: auto;
  margin-right: auto;
  max-width: 580px;
  margin-bottom: 0;
}

.sp-ab__standard-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  background: var(--color-mist);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.sp-ab__standard-cell {
  background: var(--color-warm-white);
  padding: 40px 34px;
}

.sp-ab__standard-cell i {
  font-size: 28px;
  color: var(--color-green);
  display: block;
  margin-bottom: 18px;
}

.sp-ab__standard-cell h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 17px;
  color: var(--color-slate);
  letter-spacing: -0.2px;
  margin-bottom: 10px;
  line-height: 1.2;
}

.sp-ab__standard-cell p {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-text-2);
  line-height: 1.6;
  margin: 0;
}

/* ── RESPONSIVE — Tablet (≤1023px)
   ----------------------------------------------------------- */
@media (max-width: 1023px) {
  .sp-ab__group__inner {
    grid-template-columns: 1fr;
    gap: 52px;
  }

  .sp-ab__how__header-split {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .sp-ab__how__grid {
    grid-template-columns: 1fr;
  }

  .sp-ab__how-cell {
    padding: 36px 32px;
  }

  .sp-ab__standard-strip {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── RESPONSIVE — Mobile (≤767px)
   ----------------------------------------------------------- */
@media (max-width: 767px) {
  .sp-ab__stats {
    grid-template-columns: 1fr;
  }

  .sp-ab__credential__heading {
    font-size: 22px;
  }

  .sp-ab__standard-strip {
    grid-template-columns: 1fr;
  }

  .sp-ab__standard-cell {
    padding: 32px 28px;
  }
}

/* ============================================================
   LEGAL PAGES — Privacy Policy + Terms & Conditions
   Append to bottom of src/assets/css/style.css
   ============================================================ */

.sp-legal {
  background: var(--color-white, #ffffff);
  padding: 80px 64px;
}

.sp-legal__inner {
  max-width: 800px;
  margin: 0 auto;
}

.sp-legal__meta {
  font-size: 13px;
  color: var(--color-text-2, #6B7A8D);
  margin-bottom: 48px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--color-mist, #E8EDF2);
}

.sp-legal h2 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 22px;
  color: var(--color-slate, #1C2B3A);
  margin: 48px 0 16px;
}

.sp-legal h2:first-of-type {
  margin-top: 0;
}

.sp-legal p {
  font-size: 16px;
  line-height: 1.75;
  color: #3D4F61;
  margin: 0 0 16px;
}

.sp-legal ul {
  margin: 0 0 20px 0;
  padding-left: 20px;
}

.sp-legal li {
  font-size: 16px;
  line-height: 1.75;
  color: #3D4F61;
  margin-bottom: 8px;
}

.sp-legal a {
  color: var(--color-green, #2D7D5F);
  text-decoration: underline;
}

.sp-legal__divider {
  border: none;
  border-top: 1px solid var(--color-mist, #E8EDF2);
  margin: 40px 0;
}

.sp-legal__note {
  background: var(--color-warm-white, #F5F2EE);
  border-radius: var(--radius-lg, 12px);
  padding: 24px 28px;
  margin: 24px 0;
}

.sp-legal__note p {
  margin: 0;
  font-size: 15px;
  color: #3D4F61;
}

.sp-legal__contact-box {
  background: var(--color-warm-white, #F5F2EE);
  border-radius: var(--radius-lg, 12px);
  padding: 32px 36px;
  margin-top: 48px;
}

.sp-legal__contact-box h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 18px;
  color: var(--color-slate, #1C2B3A);
  margin: 0 0 12px;
}

.sp-legal__contact-box p {
  margin: 0 0 8px;
  font-size: 15px;
  color: #3D4F61;
}

.sp-legal__contact-box p:last-child {
  margin-bottom: 0;
}

/* Tablet */
@media (max-width: 1024px) {
  .sp-legal {
    padding: 64px 40px;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .sp-legal {
    padding: 48px 24px;
  }

  .sp-legal h2 {
    font-size: 19px;
    margin: 40px 0 14px;
  }

  .sp-legal p,
  .sp-legal li {
    font-size: 15px;
  }

  .sp-legal__contact-box {
    padding: 24px 20px;
  }

  .sp-legal__note {
    padding: 20px;
  }
}