html, body {
  margin: 0;               /* remove default 8px margin that causes scroll with full-bleed rows */
  padding: 0;
  width: 100%;
  overflow-x: hidden;      /* belt-and-suspenders: stop any stray overflow */
}
.image-gallery-pylon {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}

.image-grid-pylon {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.image-card-pylon {
  background: #fff;
  /* border-radius: 12px; */
  box-shadow: 0 6px 18px rgba(0,0,0,0.1);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
  text-align: center;
  /* padding-bottom: 20px; */
}

.image-card-pylon:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.15);
}

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

.image-card-pylon h3 {
  margin: 14px 0 6px;
  font-size: 1.1rem;
  color: #111d48;
  font-weight: 600;
}

.image-card-pylon p {
  font-size: .9rem;
  color: #6b6f78;
  padding: 0 16px;
  margin: 0;
}

/* ✅ Responsive */
@media (max-width: 768px) {
  .image-grid-pylon {
    grid-template-columns: 1fr;
  }
}
.fade-in-image-pylon {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInPylon .6s forwards;
}

@keyframes fadeInPylon {
  to { opacity: 1; transform: translateY(0); }
}

/* ============= THEME TOKENS ============= */
:root{
  --teal-700-solar: #0f766e;
  --cyan-800-solar: #155e75;
  --ink-solar: #0b1220;
  --muted-solar: #6b7a8c;
  --bg-solar: #ffffff;
  --card-solar: #0f1b2a;
  --white-solar: #ffffff;
  --radius-xxl-solar: 22px;
  --shadow-soft-solar: 0 10px 30px rgba(0,0,0,.08);
  --container-w-solar: 1200px;
  --header-h-solar: 72px; /* for scroll-margin if needed */
}

section[id]{ scroll-margin-top: var(--header-h-solar); }

/* ============= BASE LAYOUT ============= */
.container-solar-system{
  width: min(92vw, var(--container-w-solar));
  margin-inline: auto;
}

.section-hero-solar-system{
  position: relative;
  background: var(--bg-solar);
  padding-top: 3vw;
  padding: clamp(48px, .2vw, 80px) 0 0;
}

.grid-hero-solar-system{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
}

.hero-left-solar-system{}
.hero-right-solar-system{
  justify-self: end;
}

.hero-title-solar-system{
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1.05;
  letter-spacing: .2px;
  color: var(--ink-solar);
  margin: 0 0 14px;
  font-weight: 800;
}
.accent-solar-system{
  color: var(--teal-700-solar);
}

.hero-sub-solar-system{
  color: var(--muted-solar);
  margin: 0 0 26px;
  font-size: clamp(15px, 1.8vw, 18px);
}

.hero-cta-solar-system{
  display: flex;
  gap: 12px;
}

.btn-primary-solar-system,
.btn-ghost-solar-system{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  border-radius: 12px;
  font-weight: 600;
  text-decoration: none;
  border: 2px solid transparent;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
}

.btn-primary-solar-system{
  background: linear-gradient(135deg, var(--teal-700-solar), var(--cyan-800-solar));
  color: var(--white-solar);
  box-shadow: var(--shadow-soft-solar);
}
.btn-primary-solar-system:hover{ transform: translateY(-2px); }

.btn-ghost-solar-system{
  background: transparent;
  border-color: var(--cyan-800-solar);
  color: var(--cyan-800-solar);
}
.btn-ghost-solar-system:hover{
  background: var(--cyan-800-solar);
  color: var(--white-solar);
}

.hero-img-solar-system{
    width: min(520px, 40vw);
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 18px;
  box-shadow: 0 16px 40px rgba(6, 18, 32, .18);
  display: block;
}
.hero-band-solar-system{
    display: none; 
  position: absolute;
  left: 50%;
  transform: translateX(10%); /* nudged to sit under the image like the reference */
  bottom: -42px;
  width: min(520px, 40vw);
  height: 100px;
  background: var(--card-solar);
  border-bottom-left-radius: var(--radius-xxl-solar);
  border-bottom-right-radius: var(--radius-xxl-solar);
  z-index: 0;
}
.hero-right-solar-system,
.hero-left-solar-system { position: relative; z-index: 1; }

/* Trusted section */
.section-trusted-solar-system{
   background: #0f1b2a;         /* deep slate like your screenshot */
  color: #fff;
  padding: clamp(56px, 8vw, 84px) 0;
  margin-top: clamp(28px, 6vw, 60px);
}

.trusted-heading-solar-system{
  text-align: center;
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 800;
  letter-spacing: .2px;
  margin: 0 0 clamp(18px, 3vw, 24px);
}

/* Logo carousel */
.logos-wrap-solar-system{
  overflow: hidden;
  position: relative;
  padding: 6px 0;             /* subtle breathing space */
  background: transparent;    /* no panel look */
  border-radius: 0;
}
.logos-track-solar-system{
   display: inline-flex;
  align-items: center;
  gap: clamp(28px, 4vw, 46px);
  padding-inline: 12px;
  animation: marquee-solar-system 28s linear infinite;
  will-change: transform;
}
.logos-wrap-solar-system:hover .logos-track-solar-system{
  animation-play-state: paused;
}

.logo-item-solar-system{
   height: clamp(22px, 3.2vw, 34px);
  width: auto;
  opacity: .9;
  filter: invert(1) grayscale(1) contrast(1.15);
  transition: opacity .2s ease, transform .2s ease;
}
.logo-item-solar-system:hover{
  opacity: 1;
  transform: translateY(-2px);
}

@keyframes marquee-solar-system{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }

}


/* --- DOTS (pagination) --- */
.dots-solar-system{
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: clamp(10px, 2vw, 14px);
}
.dot-solar-system{
  width: 6px; height: 6px;
  background: rgba(255,255,255,.35);
  border-radius: 999px;
  cursor: pointer;
  transition: transform .15s ease, background .2s ease;
}
.dot-solar-system.is-active-solar-system{
  background: rgba(255,255,255,.85);
  transform: scale(1.15);
}

/* ============= SCROLL REVEAL ============= */
.reveal-solar-system{
  opacity: 0;
  transform: translateY(28px) scale(.98);
  transition: opacity .7s cubic-bezier(.2,.65,.2,1),
              transform .7s cubic-bezier(.2,.65,.2,1);
}
.in-view-solar-system{
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .logos-track-solar-system { animation: none; }
  .reveal-solar-system,
  .in-view-solar-system { transition: none; transform: none; opacity: 1; }
}

/* ============= RESPONSIVE ============= */
@media (max-width: 960px){
  .grid-hero-solar-system{
    grid-template-columns: 1fr;
  }
  .hero-right-solar-system{ justify-self: start; }
  .hero-img-solar-system, .hero-band-solar-system{
    width: 100%;
    max-width: 520px;
  }
  .hero-band-solar-system{
    left: 0; transform: none;
  }
}

/* --- RESPONSIVE polish --- */
@media (max-width: 960px){
  .grid-hero-solar-system{ grid-template-columns: 1fr; }
  .hero-img-solar-system{ width: 100%; max-width: 520px; }
}
@media (max-width: 560px){
  .logos-track-solar-system{ gap: 24px; }
  .trusted-heading-solar-system{ font-size: 18px; }
}

/* ========= Overlap settings ========= */
:root{
  --overlap-solar: 64px; /* how much the image dips into the next section on desktop */
}

/* Make sure the hero image can layer above the next section */
.section-hero-solar-system{ position: relative; z-index: 2; }
.hero-right-solar-system{ position: relative; }
.hero-img-solar-system{
  position: relative;
  z-index: 3;                 /* sits above the Trusted section */
  display: block;
  border-radius: 18px;
  box-shadow: 0 16px 40px rgba(6,18,32,.18);
}

/* Remove the old base band if still present */
.hero-band-solar-system{ display: none !important; }

/* ===== Desktop/Large: create the overlap ===== */
@media (min-width: 961px){
  /* Dip the image down */
  .hero-img-solar-system{
    /* transform: translateY(var(--overlap-solar)); */
    margin-top: 80px;
  }

  /* Pull the Trusted section up so the image overlaps it */
  .section-trusted-solar-system{
    position: relative;
    z-index: 1;
    margin-top: calc(var(--overlap-solar) * -1);   /* move section upward */
    padding-top: calc(clamp(56px, 8vw, 84px) + var(--overlap-solar)); /* keep heading in place */
    /* Optional: soften the seam as it tucks under the image */
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  }
}

/* ===== Mobile/Tablet: no overlap (clean stack) ===== */
@media (max-width: 960px){
  .hero-img-solar-system{ transform: none; }
  .section-trusted-solar-system{
    margin-top: clamp(28px, 6vw, 60px);         /* your normal spacing */
    padding-top: clamp(56px, 8vw, 84px);
  }
}

/* Stop marquee while user is paging via dots */
.logos-track-solar-system.manual-solar-system { animation: none !important; }



/* why us */

/* ====== WHY section: structure ====== */
.section-why-solar-system-why{
  background: var(--bg-solar);
  padding: clamp(56px, 2vw, 96px) 0;
}

.eyebrow-solar-system-why{
  color: var(--teal-700-solar);
  font-weight: 800;
  letter-spacing: .4px;
  text-align: center;
  margin: 0 0 8px;
}

.title-solar-system-why{
  text-align: center;
  color: var(--ink-solar);
  font-size: clamp(24px, 4vw, 40px);
  line-height: 1.15;
  margin: 0 0 clamp(28px, 5vw, 48px);
  font-weight: 800;
}

/* Grid with subtle vertical dividers like your screenshot */
.grid-solar-system-why{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 3vw, 28px) clamp(18px, 3vw, 32px);
  position: relative;
}

/* create column separators */
.grid-solar-system-why > .card-solar-system-why{
  position: relative;
  padding: clamp(16px, 3vw, 22px);
  background: transparent;
}
.grid-solar-system-why > .card-solar-system-why:nth-child(1),
.grid-solar-system-why > .card-solar-system-why:nth-child(2),
.grid-solar-system-why > .card-solar-system-why:nth-child(4),
.grid-solar-system-why > .card-solar-system-why:nth-child(5){
  border-right: 1px solid rgba(21,94,117,.15); /* cyan-800 at low opacity */
}
.grid-solar-system-why > .card-solar-system-why:nth-child(n+4){
  border-top: 1px solid rgba(21,94,117,.15);
}

/* card content */
.icon-wrap-solar-system-why{
  width: 44px; height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--teal-700-solar), var(--cyan-800-solar));
  color: #fff;
  box-shadow: 0 8px 24px rgba(15,118,110,.25);
  margin-bottom: 12px;
  flex-shrink: 0;
}
.icon-wrap-solar-system-why i{
  font-size: 22px;
  line-height: 1;
}

.card-title-solar-system-why{
  margin: 0 0 6px;
  font-weight: 800;
  color: var(--ink-solar);
  font-size: clamp(16px, 2vw, 18px);
}
.card-text-solar-system-why{
  margin: 0;
  color: var(--muted-solar);
  font-size: clamp(14px, 1.9vw, 16px);
  line-height: 1.65;
}

/* ====== Reveal Animations (slow) ======
   Uses your existing JS: it toggles .in-view-solar-system.
   Add direction classes ending with -solar-system-why.
*/
.reveal-left-solar-system-why,
.reveal-right-solar-system-why,
.reveal-top-solar-system-why,
.reveal-bottom-solar-system-why{
  opacity: 0;
  transform: translate3d(0,0,0);
  transition:
    opacity 1.05s cubic-bezier(.2,.65,.2,1),
    transform 1.05s cubic-bezier(.2,.65,.2,1);
  will-change: opacity, transform;
}

/* initial offsets */
.reveal-left-solar-system-why{  transform: translateX(-28px); }
.reveal-right-solar-system-why{ transform: translateX( 28px); }
.reveal-top-solar-system-why{   transform: translateY(-28px); }
.reveal-bottom-solar-system-why{transform: translateY( 28px); }

/* when JS adds .in-view-solar-system to the same element */
.in-view-solar-system.reveal-left-solar-system-why,
.in-view-solar-system.reveal-right-solar-system-why,
.in-view-solar-system.reveal-top-solar-system-why,
.in-view-solar-system.reveal-bottom-solar-system-why{
  opacity: 1;
  transform: translate3d(0,0,0);
}

/* prefer-reduced-motion: show everything without animation */
@media (prefers-reduced-motion: reduce){
  .reveal-left-solar-system-why,
  .reveal-right-solar-system-why,
  .reveal-top-solar-system-why,
  .reveal-bottom-solar-system-why{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ====== Responsive ====== */
@media (max-width: 992px){
  .grid-solar-system-why{
    grid-template-columns: repeat(2, 1fr);
  }
  /* tidy borders for 2-column layout */
  .grid-solar-system-why > .card-solar-system-why{
    border-right: none;
    border-top: none;
  }
  .grid-solar-system-why > .card-solar-system-why:nth-child(odd){
    border-right: 1px solid rgba(21,94,117,.15);
  }
  .grid-solar-system-why > .card-solar-system-why:nth-child(n+3){
    border-top: 1px solid rgba(21,94,117,.15);
  }
}
@media (max-width: 560px){
  .grid-solar-system-why{
    grid-template-columns: 1fr;
  }
  .grid-solar-system-why > .card-solar-system-why{
    border: none !important;
    padding: 14px 2px;
  }
}

/* ---- prose & headings (left column) ---- */
.why-copy-solar-system1 p{
  margin: 0 0 12px;
  color: var(--ink-solar);
  font-size: clamp(14px,1.7vw,16px);
  line-height: 1.65;
}

.container-solar-system1-why-us p{
  margin: 0 0 12px;
  color: var(--ink-solar);
  font-size: clamp(14px,1.7vw,16px);
  line-height: 1.65;
}
.why-point-solar-system1{
  background: var(--white-solar);
  border: 1px solid rgba(21,94,117,.12);
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: var(--shadow-soft-solar);
}
.why-h3-solar-system1{
  margin: 16px 0 8px;
  padding-top: 10px;
  padding-bottom: 10px;

  color: var(--ink-solar);
  font-weight: 800;
  font-size: clamp(18px,2.2vw,22px);
}

/* ---- right column: image above card ---- */
.why-right-solar-system1 > * + *{ margin-top: 12px; }

.why-media-solar-system1 img{
  display:block;
  width:100%;
  height:auto;
  border-radius: var(--radius-xxl-solar);
  box-shadow: var(--shadow-soft-solar);
  border: 1px solid rgba(21,94,117,.08);
}

/* responsive tidy-up (your main grid rule already collapses at 1024px) */
@media (max-width: 640px){
  .why-point-solar-system1{ padding: 10px 12px; }
}

/* impact */


/* ================= FULL-BLEED IMPACT (merged image + panel) ================= */
.section-impact-solar-system-impact{
  /* full width, no container cap */
  background: var(--bg-solar);
  padding: 0;                       /* remove outer padding to touch edges */
}

/* make the inner wrapper full width even if .container-solar-system has a max */
.section-impact-solar-system-impact .container-solar-system{
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* two columns: big image + dark panel */
.grid-impact-solar-system-impact{
  display: grid;
  grid-template-columns: 1.25fr 1fr; /* image larger, like your mock */
  align-items: stretch;
  gap: 0;                             /* seamless merge */
  min-height: clamp(360px, 42vw, 560px);
}

/* Left image: edge-to-edge and tall */
.impact-media-solar-system-impact{ margin: 0; }
.impact-img-solar-system-impact{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;                  /* merge edge with panel */
  box-shadow: none;                  /* no card look */
}

/* Right dark panel */
.impact-panel-solar-system-impact{
  background: #2a3a46;              /* deep slate panel */
  color: var(--white-solar);
  border-radius: 0;                  /* flush join with image */
  padding: clamp(20px, 4.6vw, 40px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: none;                  /* flat, like your screenshot */
}

/* Typography */
.impact-kicker-solar-system-impact{
  color: var(--teal-700-solar);
  font-weight: 800;
  letter-spacing: .4px;
  margin: 0 0 6px;
}
.impact-title-solar-system-impact{
  font-size: clamp(22px, 3.8vw, 34px);
  font-weight: 800;
  margin: 0 0 6px;
}
.impact-sub-solar-system-impact{
  color: rgba(255,255,255,.75);
  font-size: clamp(13px, 1.8vw, 14px);
  margin: 0 0 clamp(16px, 3.2vw, 20px);
}

/* 2x2 stats with thin separators like the mock */
.stats-grid-solar-system-impact{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 2.4vw, 22px) clamp(22px, 3.6vw, 36px);
  margin-bottom: clamp(16px, 1vw, 22px);
  position: relative;
}
.stat-item-solar-system-impact{
  padding: 12px 0;
}
.stat-item-solar-system-impact:nth-child(odd){
  border-right: 1px solid rgba(255,255,255,.14);
  padding-right: clamp(10px, 2.4vw, 16px);
}
.stat-item-solar-system-impact:nth-child(even){
  padding-left: clamp(10px, 2.4vw, 16px);
}
/* subtle horizontal rules across each row */
.stats-grid-solar-system-impact > .stat-item-solar-system-impact:nth-child(-n+2){
  border-bottom: 1px solid rgba(255,255,255,.14);
  padding-bottom: clamp(10px, 2.2vw, 14px);
}
.stats-grid-solar-system-impact > .stat-item-solar-system-impact:nth-child(n+3){
  padding-top: clamp(10px, 2.2vw, 14px);
}

/* Numbers */
.stat-value-solar-system-impact{
  font-weight: 900;
  letter-spacing: .5px;
  font-size: clamp(28px, 5.6vw, 40px);
  color: var(--white-solar);
}
.stat-note-solar-system-impact{
  color: rgba(255,255,255,.70);
  font-size: clamp(12px, 1.8vw, 13.5px);
  margin: 6px 0 0;
  line-height: 1.55;
}

/* Button uses your brand colors */
.impact-btn-solar-system-impact{
  align-self: start;
  margin-top: 8px;
  border-color: var(--teal-700-solar);
  color: var(--teal-700-solar);
}
.impact-btn-solar-system-impact:hover{
  background: var(--teal-700-solar);
  color: #fff;
}

/* ===== Slow reveal on scroll (uses your existing JS toggling .in-view-solar-system) ===== */
.reveal-left-solar-system-why,
.reveal-right-solar-system-why{
  opacity: 0;
  transform: translateX(28px);
  transition: opacity 1.05s cubic-bezier(.2,.65,.2,1),
              transform 1.05s cubic-bezier(.2,.65,.2,1);
}
.reveal-left-solar-system-why{ transform: translateX(-28px); }
.in-view-solar-system.reveal-left-solar-system-why,
.in-view-solar-system.reveal-right-solar-system-why{
  opacity: 1; transform: translateX(0);
}

/* ===== Responsive stack ===== */
@media (max-width: 1024px){
  .grid-impact-solar-system-impact{
    grid-template-columns: 1fr;        /* stack */
    min-height: auto;
  }
  .impact-media-solar-system-impact{ order: 1; }
  .impact-panel-solar-system-impact{ order: 2; }
  .stats-grid-solar-system-impact{
    gap: 16px 22px;
  }
  .stats-grid-solar-system-impact > .stat-item-solar-system-impact{
    border-right: none;
  }
  .stats-grid-solar-system-impact > .stat-item-solar-system-impact:nth-child(-n+2){
    border-bottom: 1px solid rgba(255,255,255,.14);
  }
}
@media (max-width: 560px){
  .stats-grid-solar-system-impact{
    grid-template-columns: 1fr;
  }
  .stats-grid-solar-system-impact > .stat-item-solar-system-impact{
    border: none !important;
    padding: 10px 0;
  }
}


/* solutions  */

/* ================== SOLUTIONS ================== */
.section-solutions-solar-system-solution{
  background: var(--bg-solar);
  padding: clamp(48px, 2vw, 40px) 0;
}

.solutions-head-solar-system-solution{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: end;
  margin-bottom: clamp(18px, 1vw, 28px);
}

.solutions-kicker-solar-system-solution{
  color: var(--teal-700-solar);
  font-weight: 800;
  letter-spacing: .4px;
  margin: 0 0 6px;
}

.solutions-title-solar-system-solution{
  margin: 0;
  color: var(--ink-solar);
  font-weight: 800;
  font-size: clamp(22px, 3.6vw, 34px);
}

.solutions-viewall-btn-solar-system-solution{
  justify-self: end;
  padding: 10px 14px;
  font-weight: 600;
  border: 2px solid var(--teal-700-solar);
  color: var(--teal-700-solar);
  background: transparent;
  border-radius: 10px;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.solutions-viewall-btn-solar-system-solution:hover{
  background: var(--teal-700-solar);
  color: #fff;
  transform: translateY(-1px);
}

/* Grid */
.grid-solutions-solar-system-solution{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 3vw, 24px);
}

/* Show only first row by default (3 cards) */
.grid-solutions-solar-system-solution.is-collapsed-solar-system-solution .extra-card-solar-system-solution{
  display: none;
}

/* Card */
.card-solar-system-solution{
  background: #fff;
  border: 1px solid rgba(21,94,117,.18); /* cyan-ish border, very light */
  border-radius: 14px;
  padding: clamp(14px, 2.6vw, 18px);
  box-shadow: var(--shadow-soft-solar);
  display: flex;
  flex-direction: column;
  min-height: 220px;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.card-solar-system-solution:hover{
  border-color: var(--teal-700-solar);
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(0,0,0,.08);
}

.card-icon-solar-system-solution{
  width: 42px; height: 42px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--teal-700-solar), var(--cyan-800-solar));
  margin-bottom: 10px;
  box-shadow: 0 10px 22px rgba(15,118,110,.25);
}
.card-icon-solar-system-solution i{ font-size: 22px; line-height: 1; }

.card-title-solar-system-solution{
  margin: 0 0 6px;
  font-size: clamp(16px, 2.2vw, 18px);
  font-weight: 800;
  color: var(--ink-solar);
}
.card-text-solar-system-solution{
  margin: 0 0 12px;
  color: var(--muted-solar);
  line-height: 1.65;
  font-size: clamp(13.5px, 1.9vw, 15px);
}

/* Link CTA pinned to bottom */
.card-link-solar-system-solution{
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 2px solid var(--cyan-800-solar);
  color: var(--cyan-800-solar);
  text-decoration: none;
  font-weight: 600;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.card-link-solar-system-solution:hover{
  background: var(--cyan-800-solar);
  color: #fff;
  transform: translateY(-1px);
}

/* Reveal directions (slow) */
.reveal-left-solar-system-solution,
.reveal-right-solar-system-solution,
.reveal-top-solar-system-solution,
.reveal-bottom-solar-system-solution{
  opacity: 0;
  transform: translate3d(0,0,0);
  transition: opacity 1.05s cubic-bezier(.2,.65,.2,1),
              transform 1.05s cubic-bezier(.2,.65,.2,1);
  will-change: opacity, transform;
}
.reveal-left-solar-system-solution{  transform: translateX(-26px); }
.reveal-right-solar-system-solution{ transform: translateX( 26px); }
.reveal-top-solar-system-solution{   transform: translateY(-26px); }
.reveal-bottom-solar-system-solution{transform: translateY( 26px); }

.in-view-solar-system.reveal-left-solar-system-solution,
.in-view-solar-system.reveal-right-solar-system-solution,
.in-view-solar-system.reveal-top-solar-system-solution,
.in-view-solar-system.reveal-bottom-solar-system-solution{
  opacity: 1; transform: none;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .reveal-left-solar-system-solution,
  .reveal-right-solar-system-solution,
  .reveal-top-solar-system-solution,
  .reveal-bottom-solar-system-solution{
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
}

/* Responsive */
@media (max-width: 1024px){
  .grid-solutions-solar-system-solution{
    grid-template-columns: repeat(2, 1fr);
  }
  .solutions-head-solar-system-solution{
    grid-template-columns: 1fr;
    align-items: start;
  }
  .solutions-viewall-btn-solar-system-solution{ justify-self: start; }
}
@media (max-width: 560px){
  .grid-solutions-solar-system-solution{
    grid-template-columns: 1fr;
  }
}
/* app */

/* =============== SOLAR APP section =============== */
.section-app-solar-system-app{
  background: var(--bg-solar);
  padding: clamp(18px, 1vw, 36px) 0;
}

.grid-app-solar-system-app{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: clamp(20px, 4.5vw, 48px);
  margin-bottom: clamp(36px, 1vw, 72px);
}
.grid-reverse-solar-system-app{ grid-template-columns: .95fr 1.05fr; }

/* text block */
.kicker-solar-system-app{
  color: var(--teal-700-solar);
  font-weight: 800;
  letter-spacing: .4px;
  margin: 0 0 6px;
}
.title-solar-system-app{
  margin: 0 0 12px;
  color: var(--ink-solar);
  font-size: clamp(22px, 3.8vw, 36px);
  font-weight: 800;
  line-height: 1.15;
}

/* list with subtle stagger */
.list-solar-system-app{
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
}
.list-solar-system-app li{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: var(--muted-solar);
  font-size: clamp(14px, 2vw, 16px);
  line-height: 1.7;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .7s ease, transform .7s ease;
}
.list-solar-system-app li + li{ margin-top: 10px; }
.list-solar-system-app i{
  color: var(--teal-700-solar);
  margin-top: 3px;
  font-size: 18px;
}

/* when parent UL has in-view, reveal list items with stagger */
.reveal-solar-system.in-view-solar-system.list-solar-system-app li{ opacity: 1; transform: none; }
.reveal-solar-system.in-view-solar-system.list-solar-system-app li:nth-child(1){ transition-delay: .05s; }
.reveal-solar-system.in-view-solar-system.list-solar-system-app li:nth-child(2){ transition-delay: .12s; }
.reveal-solar-system.in-view-solar-system.list-solar-system-app li:nth-child(3){ transition-delay: .19s; }
.reveal-solar-system.in-view-solar-system.list-solar-system-app li:nth-child(4){ transition-delay: .26s; }

/* media frame with teal plate + floating badge */
.col-media-solar-system-app{ justify-self: center; }

.media-frame-solar-system-app{
  position: relative;
  width: min(520px, 42vw);
  aspect-ratio: 4/4.8;
  border-radius: 16px;
  isolation: isolate;
  will-change: transform;
}
.media-plate-solar-system-app{
  position: absolute; inset: 10% 6% 10% 6%;
  background: var(--cyan-800-solar);
  border-radius: 14px;
  z-index: 1;
}
.media-img-solar-system-app{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 16px;
  z-index: 2;
  box-shadow: var(--shadow-soft-solar);
}
.badge-solar-system-app{
  position: absolute;
  top: -14px; left: -14px;
  width: 76px; height: 76px;
  border-radius: 999px;
  background: #fff;
  color: var(--teal-700-solar);
  display: grid; place-items: center;
  box-shadow: 0 16px 36px rgba(0,0,0,.12);
  z-index: 3;
}
.badge-solar-system-app i{ font-size: 30px; }

/* simple chart card */
.media-chart-solar-system-app{
  width: min(600px, 46vw);
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(21,94,117,.18);
  box-shadow: var(--shadow-soft-solar);
  overflow: hidden;
  will-change: transform;
}
.chart-img-solar-system-app{
  display: block;
  width: 100%; height: auto;
}

/* reveal directions for this section (slow) */
.reveal-left-solar-system-app,
.reveal-right-solar-system-app,
.reveal-top-solar-system-app,
.reveal-bottom-solar-system-app{
  opacity: 0;
  transform: translate3d(0,0,0);
  transition: opacity 1.05s cubic-bezier(.2,.65,.2,1),
              transform 1.05s cubic-bezier(.2,.65,.2,1);
}
.reveal-left-solar-system-app{  transform: translateX(-28px); }
.reveal-right-solar-system-app{ transform: translateX( 28px); }
.reveal-top-solar-system-app{   transform: translateY(-28px); }
.reveal-bottom-solar-system-app{transform: translateY( 28px); }

.in-view-solar-system.reveal-left-solar-system-app,
.in-view-solar-system.reveal-right-solar-system-app,
.in-view-solar-system.reveal-top-solar-system-app,
.in-view-solar-system.reveal-bottom-solar-system-app{
  opacity: 1; transform: none;
}

/* responsive */
@media (max-width: 1024px){
  .grid-app-solar-system-app,
  .grid-reverse-solar-system-app{
    grid-template-columns: 1fr;
  }
  .media-frame-solar-system-app,
  .media-chart-solar-system-app{ width: 100%; max-width: 560px; }
  .media-frame-solar-system-app{ aspect-ratio: 4/5; }
}

@media (prefers-reduced-motion: reduce){
  .reveal-left-solar-system-app,
  .reveal-right-solar-system-app,
  .reveal-top-solar-system-app,
  .reveal-bottom-solar-system-app,
  .list-solar-system-app li{
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
}
/* Projects */

/* ================== PROJECTS ================== */
.section-projects-solar-system-projects{
  background: var(--bg-solar);
  padding: clamp(28px, 3vw, 46px) 0;
}

.header-projects-solar-system-projects{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: end;
  margin-bottom: clamp(16px, 1vw, 24px);
}

.projects-kicker-solar-system-projects{
  color: var(--teal-700-solar);
  font-weight: 800;
  letter-spacing: .4px;
  margin: 0 0 6px;
}
.projects-title-solar-system-projects{
  margin: 0;
  color: var(--ink-solar);
  font-weight: 800;
  font-size: clamp(22px, 3.4vw, 34px);
}

/* arrows */
.projects-nav-solar-system-projects{
  display: inline-flex;
  gap: 10px;
}
.btn-nav-solar-system-projects{
  width: 38px; height: 38px;
  display: inline-grid; place-items: center;
  border-radius: 8px;
  border: 2px solid var(--teal-700-solar);
  color: var(--teal-700-solar);
  background: transparent;
  cursor: pointer;
  transition: background .2s, color .2s, transform .2s, opacity .2s;
}
.btn-nav-solar-system-projects:hover{
  background: var(--teal-700-solar);
  color: #fff;
  transform: translateY(-1px);
}
.btn-nav-solar-system-projects[disabled]{
  opacity: .45; cursor: not-allowed; transform: none;
}

/* viewport + track */
.projects-viewport-solar-system-projects{
  --gap-projects: 18px;
  --cards-per-view: 4;             /* desktop default */
  overflow: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;   /* snap per card */
  border-radius: 14px;
}
.projects-track-solar-system-projects{
  display: flex;
  gap: var(--gap-projects);
  padding: 2px;                    /* subtle inset so focus rings show */
}

/* card size is based on viewport width for perfect paging */
.project-card-solar-system-projects{
  flex: 0 0 calc((100% - (var(--cards-per-view) - 1) * var(--gap-projects)) / var(--cards-per-view));
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid rgba(21,94,117,.18);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-soft-solar);
  display: flex;
  flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.project-card-solar-system-projects:hover{
  transform: translateY(-3px);
  border-color: var(--teal-700-solar);
  box-shadow: 0 16px 36px rgba(0,0,0,.08);
}

.project-media-solar-system-projects{
  margin: 0;
  aspect-ratio: 16/10;
  overflow: hidden;
}
.project-media-solar-system-projects img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.project-body-solar-system-projects{
  padding: 12px 14px 10px 14px;
  position: relative;
  border-top: 1px solid rgba(15,118,110,.12);
}
.project-title-solar-system-projects{
  margin: 0 0 6px;
  font-size: clamp(15px, 1.9vw, 17px);
  font-weight: 800;
  color: var(--ink-solar);
}
.project-meta-solar-system-projects{
  margin: 0;
  color: var(--muted-solar);
  font-size: clamp(12.5px, 1.7vw, 13.5px);
}

/* thin bottom rule + arrow at far right like your mock */
.project-body-solar-system-projects::after{
  content:"";
  display:block;
  height: 1px;
  background: rgba(15,118,110,.16);
  margin-top: 10px;
}
.project-arrow-solar-system-projects{
  position: absolute;
  right: 12px; bottom: 8px;
  width: 26px; height: 26px;
  border-radius: 8px;
  display: inline-grid; place-items: center;
  color: var(--cyan-800-solar);
  transition: transform .2s ease, background .2s ease, color .2s ease;
}
.project-card-solar-system-projects:hover .project-arrow-solar-system-projects{
  transform: translateX(2px);
  color: var(--teal-700-solar);
}

/* Reveal directions for this section */
.reveal-top-solar-system-projects,
.reveal-bottom-solar-system-projects{
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 1.0s cubic-bezier(.2,.65,.2,1),
              transform 1.0s cubic-bezier(.2,.65,.2,1);
}
.reveal-top-solar-system-projects{ transform: translateY(-26px); }
.in-view-solar-system.reveal-top-solar-system-projects,
.in-view-solar-system.reveal-bottom-solar-system-projects{
  opacity: 1; transform: none;
}

/* Responsive cards per view */
@media (max-width: 1200px){
  .projects-viewport-solar-system-projects{ --cards-per-view: 3; }
}
@media (max-width: 900px){
  .projects-viewport-solar-system-projects{ --cards-per-view: 2; }
  .header-projects-solar-system-projects{
    grid-template-columns: 1fr;
    align-items: start;
  }
  .section-hero-solar-system{
    padding-top: 5rem;

  }
}
@media (max-width: 560px){
  .projects-viewport-solar-system-projects{ --cards-per-view: 1; }
  .section-hero-solar-system{
    padding-top: 5rem;

  }
}
/* */

/* ================== TYPES (tabs) ================== */
.section-types-solar-system-types{
  background: var(--bg-solar);
  padding: clamp(28px, 2vw, 36px) 0;
}

.kicker-solar-system-types{
  color: var(--teal-700-solar);
  font-weight: 800;
  letter-spacing: .4px;
  margin: 0 0 6px;
}
.title-solar-system-types{
  margin: 0 0 clamp(16px, 3.6vw, 26px);
  color: var(--ink-solar);
  font-weight: 800;
  font-size: clamp(22px, 3.6vw, 34px);
}

/* Tabs */
.tabs-solar-system-types{
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-bottom: clamp(16px, 1vw, 24px);
}
.tab-btn-solar-system-types{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 2px solid var(--cyan-800-solar);
  background: transparent;
  color: var(--cyan-800-solar);
  font-weight: 600;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, transform .2s ease, border-color .2s;
}
.tab-btn-solar-system-types i{ font-size: 18px; }
.tab-btn-solar-system-types:hover{ transform: translateY(-1px); }
.tab-btn-solar-system-types.is-active-solar-system-types{
  background: linear-gradient(135deg, var(--teal-700-solar), var(--cyan-800-solar));
  color: #fff; border-color: transparent;
}

/* Panels */
.panel-solar-system-types{ animation: fadeIn-solar-system-types .45s ease both; }
@keyframes fadeIn-solar-system-types{ from{opacity:0; transform: translateY(8px);} to{opacity:1; transform:none;} }

.panel-grid-solar-system-types{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(18px, 4vw, 40px);
  align-items: center;
  background: #fff;
  border: 1px solid rgba(21,94,117,.18);
  border-radius: 16px;
  padding: clamp(16px, 3.6vw, 26px);
  box-shadow: var(--shadow-soft-solar);
  margin-bottom: clamp(16px, 1vw, 24px);
}

.panel-text-solar-system-types h3{
  margin: 0 0 8px; font-size: clamp(18px, 2.6vw, 22px);
  color: var(--ink-solar); font-weight: 800;
}
.panel-text-solar-system-types p{
  margin: 0 0 8px; color: var(--muted-solar);
}

.bullets-solar-system-types{
  list-style: none; padding: 0; margin: 10px 0 0;
  display: grid; gap: 8px;
}
.bullets-solar-system-types li{
  display: flex; gap: 10px; align-items: flex-start;
  color: var(--muted-solar); line-height: 1.65;
  font-size: clamp(14px, 2vw, 16px);
}
.bullets-solar-system-types i{ color: var(--teal-700-solar); margin-top: 2px; }

.panel-media-solar-system-types{
  margin: 0;
  border-radius: 12px; overflow: hidden;
  border: 1px solid rgba(21,94,117,.18);
}
.panel-media-solar-system-types img{
  display: block; width: 100%; height: 100%; object-fit: cover;
}

/* Feature chips */
.feature-grid-solar-system-types{
  display: flex; flex-wrap: wrap; gap: 10px;
}
.feature-chip-solar-system-types{
  display: inline-flex; gap: 8px; align-items: center;
  padding: 8px 12px; border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(21,94,117,.18);
  color: var(--ink-solar);
  font-weight: 600; font-size: 13.5px;
}
.feature-chip-solar-system-types i{ color: var(--teal-700-solar); }

/* Reveal directions for this section */
.reveal-left-solar-system-types,
.reveal-right-solar-system-types,
.reveal-top-solar-system-types,
.reveal-bottom-solar-system-types{
  opacity: 0;
  transform: translate3d(0,0,0);
  transition: opacity 1.05s cubic-bezier(.2,.65,.2,1),
              transform 1.05s cubic-bezier(.2,.65,.2,1);
}
.reveal-left-solar-system-types{  transform: translateX(-26px); }
.reveal-right-solar-system-types{ transform: translateX( 26px); }
.reveal-top-solar-system-types{   transform: translateY(-26px); }
.reveal-bottom-solar-system-types{transform: translateY( 26px); }
.in-view-solar-system.reveal-left-solar-system-types,
.in-view-solar-system.reveal-right-solar-system-types,
.in-view-solar-system.reveal-top-solar-system-types,
.in-view-solar-system.reveal-bottom-solar-system-types{
  opacity: 1; transform: none;
}

/* Responsive */
@media (max-width: 1024px){
  .panel-grid-solar-system-types{ grid-template-columns: 1fr; }
}


/* pylon */

/* Helpful utility so anchored scroll lands below your fixed header */
section[id].section-pylon-solar-system-pylon{ scroll-margin-top: var(--header-h-solar); }

/* ============= LAYOUT ============= */
.section-pylon-solar-system-pylon{
  background: var(--bg-solar);
  padding: clamp(18px, 2vw, 36px) 0;
}

.container-solar-system-pylon{
  width: min(92vw, var(--container-w-solar));
  margin-inline: auto;
}

.grid-pylon-solar-system-pylon{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(20px, 4.8vw, 48px);
  align-items: center;
}

/* ============= COPY SIDE ============= */
.copy-pylon-solar-system-pylon{ color: var(--ink-solar); }

.eyebrow-pylon-solar-system-pylon{
  display: inline-block;
  color: var(--teal-700-solar);
  font-weight: 800;
  letter-spacing: .3px;
  margin-bottom: 8px;
}

.title-pylon-solar-system-pylon{
  margin: 0 0 10px;
  font-weight: 900;
  line-height: 1.1;
  font-size: clamp(24px, 4vw, 40px);
}

.lead-pylon-solar-system-pylon{
  margin: 0 0 14px;
  color: var(--muted-solar);
  font-size: clamp(14px, 1.8vw, 18px);
}

.list-pylon-solar-system-pylon{
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}
.list-pylon-solar-system-pylon li{
  padding-left: 28px;
  position: relative;
  color: var(--ink-solar);
  line-height: 1.65;
  font-size: clamp(14px, 1.7vw, 16px);
}
.list-pylon-solar-system-pylon li::before{
  content: "";
  position: absolute; left: 0; top: .55em;
  width: 12px; height: 12px; border-radius: 3px;
  background: linear-gradient(135deg, var(--teal-700-solar), var(--cyan-800-solar));
  box-shadow: 0 4px 12px rgba(15,118,110,.25);
}

/* ============== SECTION ============== */
.project-wrap-solar{
  background:var(--bg-solar);
  padding:clamp(36px,2vw,72px) 16px;
  scroll-margin-top:var(--header-h-solar);
  color:var(--ink-solar);
}

.project-container-solar{
  width:min(100%, var(--container-w-solar));
  margin-inline:auto;
}

/* ============== HEAD ============== */
.project-head-solar{
  text-align:center;
  margin-bottom:clamp(22px,3vw,36px);
}

.project-kicker-solar{
  display:inline-flex;
  gap:.5rem;
  align-items:center;
  font-weight:800;
  font-size:.92rem;
  opacity:.9;
}
.project-kicker-solar::before{
  content:"";
  width:28px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--teal-700-solar),var(--cyan-800-solar));
}

.project-title-solar{
  margin:.4rem 0 .4rem;
  font-weight:900;
  letter-spacing:.2px;
  font-size:clamp(1.4rem,4.5vw,2.2rem);
}

.project-sub-solar{
  margin:0;
  color:var(--muted-solar);
  line-height:1.65;
}

/* ============== CARD ============== */
.project-card-solar{
  display:grid;
  grid-template-columns: 1.1fr 1fr;
  gap:clamp(16px,2.5vw,24px);
  align-items:stretch;
}

@media (max-width: 900px){
  .project-card-solar{
    grid-template-columns:1fr;
  }
}

/* Visual */
.project-media-solar{
  position:relative;
  margin:0;
  border-radius:var(--radius-xxl-solar);
  overflow:hidden;
  box-shadow:var(--shadow-soft-solar);
  background:#0c1724;
  isolation:isolate;
}

.project-media-solar img{
  display:block;width:100%;height:100%;
  object-fit:cover;aspect-ratio:16/10;
  transform:scale(1.02);
  transition:transform .6s cubic-bezier(.22,1,.36,1), filter .6s ease;
  filter:saturate(1) contrast(1.02);
}
.project-media-solar:hover img{
  transform:scale(1.04);
  filter:saturate(1.05) contrast(1.05);
}

/* Chips */
.project-badges-solar{
  position:absolute;left:14px;bottom:14px;
  display:flex;flex-wrap:wrap;gap:8px;
  z-index:2;
}
.chip-solar{
  display:inline-block;
  padding:.4rem .7rem;
  border-radius:999px;
  color:#fff;
  font-weight:800;
  font-size:.85rem;
  background:linear-gradient(135deg,var(--teal-700-solar),var(--cyan-800-solar));
  box-shadow:0 6px 16px rgba(0,0,0,.15);
}

/* Copy */
.project-copy-solar{
  background:linear-gradient(180deg,#0f1b2a, #112033);
  color:var(--white-solar);
  border-radius:var(--radius-xxl-solar);
  padding:clamp(16px,2.4vw,24px);
  box-shadow:var(--shadow-soft-solar);
  border:1px solid color-mix(in oklab, #fff 10%, transparent);
}

.project-list-solar{
  margin:0 0 16px 0;
  padding-left:0;
  list-style:none;
  display:grid;
  gap:10px;
}
.project-list-solar li{
  position:relative;
  padding-left:28px;
  line-height:1.65;
}
.project-list-solar li::before{
  content:"";
  position:absolute;left:0;top:.55rem;
  width:18px;height:18px;border-radius:8px;
  background:linear-gradient(135deg,var(--teal-700-solar),var(--cyan-800-solar));
  box-shadow:inset 0 0 0 5px rgba(255,255,255,.45);
}

/* CTA Row */
.project-cta-row-solar{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:8px;
}

.project-btn-solar{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.9rem 1.15rem;
  border-radius:999px;
  color:#0b1720;
  font-weight:800;
  background:#fff;
  text-decoration:none;
  border:2px solid transparent;
  transition:transform .2s ease, filter .2s ease, border-color .2s ease;
}
.project-btn-solar:hover{
  transform:translateY(-2px);
  border-color:#fff;
  filter:brightness(1.05);
}

.project-link-solar{
  align-self:center;
  color:#cfe9ff;
  text-decoration:none;
  border-bottom:1px dashed rgba(255,255,255,.45);
  font-weight:700;
}
.project-link-solar:hover{ border-bottom-color:transparent; }

/* ============== REVEAL (tiny util) ============== */
.reveal-solar{
  --dist:28px; --dur:.7s; --delay:0ms;
  opacity:0; will-change:transform,opacity;
  transition:
    transform var(--dur) cubic-bezier(.22,1,.36,1) var(--delay),
    opacity var(--dur) ease var(--delay);
}
.from-up{ transform:translateY(calc(-1*var(--dist))); }
.from-left{ transform:translateX(calc(-1*var(--dist))); }
.from-right{ transform:translateX(var(--dist)); }
.is-visible-solar{ opacity:1!important; transform:translate(0,0)!important; }

@media (prefers-reduced-motion: reduce){
  .reveal-solar{ transition:none; opacity:1; transform:none; }
}
.tagline-pylon-solar-system-pylon{
  background: var(--white-solar);
  border: 1px solid rgba(21,94,117,.14);
  border-left: 4px solid var(--teal-700-solar);
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: var(--shadow-soft-solar);
  color: var(--ink-solar);
  margin: 8px 0 16px;
}

.cta-row-pylon-solar-system-pylon{
  display: flex; flex-wrap: wrap; gap: 12px;
}

.btn-primary-pylon-solar-system-pylon,
.btn-ghost-pylon-solar-system-pylon{
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 16px; border-radius: 12px; font-weight: 700;
  text-decoration: none; border: 2px solid transparent;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn-primary-pylon-solar-system-pylon{
  background: linear-gradient(135deg, var(--teal-700-solar), var(--cyan-800-solar));
  color: var(--white-solar);
  box-shadow: var(--shadow-soft-solar);
}
.btn-primary-pylon-solar-system-pylon:hover{ transform: translateY(-2px); }

.btn-ghost-pylon-solar-system-pylon{
  background: transparent;
  color: var(--cyan-800-solar);
  border-color: var(--cyan-800-solar);
}
.btn-ghost-pylon-solar-system-pylon:hover{
  background: var(--cyan-800-solar);
  color: var(--white-solar);
}

/* ============= MEDIA SIDE ============= */
.media-pylon-solar-system-pylon{
  margin: 0;
  background: #dbe7f0;
  border-radius: var(--radius-xxl-solar);
  overflow: hidden;
  box-shadow: 0 18px 42px rgba(6,18,32,.15);
}
.img-pylon-solar-system-pylon{
  display: block;
  width: 100%;
  height: clamp(360px, 46vw, 560px);
  object-fit: cover;
}
.figcap-pylon-solar-system-pylon{
  padding: 8px 12px;
  font-size: 12px;
  color: var(--muted-solar);
  background: rgba(255,255,255,.6);
}

/* ============= REVEAL ON SCROLL ============= */
.reveal-top-solar-system-pylon,
.reveal-left-solar-system-pylon,
.reveal-right-solar-system-pylon,
.reveal-up-solar-system-pylon{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .8s cubic-bezier(.2,.65,.2,1),
              transform .8s cubic-bezier(.2,.65,.2,1);
  will-change: opacity, transform;
}
.reveal-top-solar-system-pylon{ transform: translateY(-18px); }
.reveal-left-solar-system-pylon{ transform: translateX(-28px); }
.reveal-right-solar-system-pylon{ transform: translateX(28px); }
.reveal-in-solar-system-pylon{ opacity: 1 !important; transform: none !important; }

/* ============= RESPONSIVE ============= */
@media (max-width: 1024px){
  .grid-pylon-solar-system-pylon{ grid-template-columns: 1fr; }
  .img-pylon-solar-system-pylon{ height: clamp(220px, 42vw, 380px); }
}
@media (prefers-reduced-motion: reduce){
  .reveal-top-solar-system-pylon,
  .reveal-left-solar-system-pylon,
  .reveal-right-solar-system-pylon,
  .reveal-up-solar-system-pylon{
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
}

/* why us */


/* make anchor jumps account for sticky header */
.section-why-solar-system1-why-us[id]{ scroll-margin-top: var(--header-h-solar); }

/* ===== layout ===== */
.section-why-solar-system1-why-us{
  background: var(--bg-solar);
  padding: clamp(20px,2vw,24px) 0;
}
.container-solar-system1-why-us{
  width: min(92vw, var(--container-w-solar));
  margin-inline: auto;
}

.head-solar-system1-why-us{
  max-width: 1200px;
  margin-bottom: clamp(18px,2vw,28px);
}
.eyebrow-solar-system1-why-us{
  display:inline-block;
  color: var(--teal-700-solar);
  font-weight: 800;
  letter-spacing: .3px;
  margin-bottom: 6px;
}
.title-solar-system1-why-us{
  margin: 0 0 8px;
  color: var(--ink-solar);
  font-weight: 900;
  line-height: 1.1;
  font-size: clamp(24px,4vw,40px);
}
.title-solar-system1-why-ush3{
  margin: 0 0 8px;
  color: var(--ink-solar);
  font-weight: 900;
  line-height: 1.1;
  font-size: clamp(24px,1vw,40px);
}
.lead-solar-system1-why-us{
  margin: 0;
  color: var(--muted-solar);
  font-size: clamp(14px,1.9vw,18px);
}

/* content grid: checklist + highlight card */
.grid-solar-system1-why-us{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(18px,4vw,40px);
  align-items: start;
}

/* checklist */
.checks-solar-system1-why-us{
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 12px;
}
.checks-solar-system1-why-us li{
  position: relative;
  padding: 12px 14px 12px 44px;
  background: var(--white-solar);
  border: 1px solid rgba(21,94,117,.12);
  border-radius: 14px;
  box-shadow: var(--shadow-soft-solar);
  color: var(--ink-solar);
  line-height: 1.6;
  font-size: clamp(14px,1.7vw,16px);
}
.check-solar-system1-why-us{
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; border-radius: 6px;
  background: linear-gradient(135deg,var(--teal-700-solar),var(--cyan-800-solar));
  box-shadow: 0 6px 16px rgba(15,118,110,.28);
}
.check-solar-system1-why-us::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle at 35% 55%, #fff 0 2px, transparent 2px),
    linear-gradient(45deg, transparent 45%, #fff 45% 55%, transparent 55%),
    linear-gradient(-45deg, transparent 45%, #fff 45% 55%, transparent 55%);
  mask: radial-gradient(circle at 35% 55%, #000 0 3px, transparent 3px);
  opacity:.95;
}

/* highlight card */
.card-solar-system1-why-us{
  background: var(--card-solar);
  color: var(--white-solar);
  border-radius: 16px;
  padding: clamp(16px,3.2vw,22px);
  box-shadow: 0 16px 42px rgba(6,18,32,.18);
  border: 1px solid rgba(255,255,255,.06);
}
.card-solar-system1-why-us h3{
  margin:0 0 6px; font-size: clamp(18px,2.6vw,22px);
}
.card-solar-system1-why-us p{
  margin:0 0 12px; color: rgba(255,255,255,.82);
}

/* buttons */
.btn-primary-solar-system1-why-us,
.btn-ghost-solar-system1-why-us{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 16px; border-radius:12px; font-weight:800;
  text-decoration:none; border:2px solid transparent;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn-primary-solar-system1-why-us{
  background: linear-gradient(135deg,var(--teal-700-solar),var(--cyan-800-solar));
  color:#fff; box-shadow: var(--shadow-soft-solar);
}
.btn-primary-solar-system1-why-us:hover{ transform: translateY(-2px); }
.btn-ghost-solar-system1-why-us{
  color:#cfe8f0; border-color:#2c5863; background: transparent;
}
.btn-ghost-solar-system1-why-us:hover{ background:#18434c; color:#fff; }

.cta-row-solar-system1-why-us{ display:flex; gap:10px; flex-wrap:wrap; }

/* ===== reveal (slow) ===== */
.reveal-top-solar-system1-why-us,
.reveal-up-solar-system1-why-us,
.reveal-right-solar-system1-why-us,
.reveal-left-solar-system1-why-us{
  opacity:0;
  transform: translateY(18px);
  transition: opacity .9s cubic-bezier(.2,.65,.2,1),
              transform .9s cubic-bezier(.2,.65,.2,1);
  will-change: opacity, transform;
}
.reveal-top-solar-system1-why-us{ transform: translateY(-22px); }
.reveal-right-solar-system1-why-us{ transform: translateX(28px); }
.reveal-left-solar-system1-why-us{ transform: translateX(-28px); }
.reveal-in-solar-system1-why-us{ opacity:1 !important; transform:none !important; }

/* ===== responsive ===== */
@media (max-width: 1024px){
  .grid-solar-system1-why-us{ grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce){
  .reveal-top-solar-system1-why-us,
  .reveal-up-solar-system1-why-us,
  .reveal-right-solar-system1-why-us,
  .reveal-left-solar-system1-why-us{
    opacity:1 !important; transform:none !important; transition:none !important;
  }
}
/* Paragraph blocks replacing the checklist */
.why-us-paras {
  display: grid;
  gap: 12px;
}

.why-us-para {
  padding: 12px 14px;
  background: var(--white-solar);
  border: 1px solid rgba(21,94,117,.12);
  border-radius: 14px;
  box-shadow: var(--shadow-soft-solar);
  color: var(--ink-solar);
  line-height: 1.65;
  font-size: clamp(14px,1.7vw,16px);
}

.why-us-subtitle {
  margin: 10px 0 2px;
  color: var(--ink-solar);
  font-weight: 800;
  font-size: clamp(18px,2vw,20px);
}

/* Image above the aside card */
.why-us-hero {
  margin: 0;
  align-self: start;
}

.why-us-hero-img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  display: block;
  box-shadow: 0 16px 42px rgba(6,18,32,.18);
  border: 1px solid rgba(0,0,0,.06);
}

/* Ensure the image + card stack nicely on mobile */
@media (max-width: 1024px){
  .why-us-hero { order: 2; }   /* left column first, then image, then card */
  .card-solar-system1-why-us { order: 3; }
}

/* CEC */

/* smooth anchor offset for sticky headers */
.section-csc-solar-system-csc-products[id]{ scroll-margin-top: var(--header-h-solar); }

.section-csc-solar-system-csc-products{
  background: var(--bg-solar);
  padding: clamp(42px,2vw,88px) 0;
}

.container-csc-solar-system-csc-products{
  width: min(92vw, var(--container-w-solar));
  margin-inline: auto;
}

/* Header copy */
.head-csc-solar-system-csc-products{ margin-bottom: clamp(16px,3vw,28px); }
.eyebrow-csc-solar-system-csc-products{
  display:inline-block; color: var(--teal-700-solar); font-weight:800; letter-spacing:.3px; margin-bottom:6px;
}
.title-csc-solar-system-csc-products{
  margin:0 0 6px; color: var(--ink-solar); font-weight:900; line-height:1.12;
  font-size: clamp(22px,3.6vw,34px);
}
.lead-csc-solar-system-csc-products{
  margin: 0 0 10px; color: var(--muted-solar); font-size: clamp(14px,1.8vw,17px);
}

/* Document grid */
.docs-grid-csc-solar-system-csc-products{
  display:grid; gap: clamp(14px,2.6vw,18px);
  grid-template-columns: repeat(3,1fr);
}
@media (max-width: 960px){ .docs-grid-csc-solar-system-csc-products{ grid-template-columns: 1fr; } }

.doc-card-csc-solar-system-csc-products{
  background: var(--white-solar);
  border: 1px solid rgba(21,94,117,.14);
  border-radius: 16px;
  padding: clamp(14px,2.6vw,18px);
  box-shadow: var(--shadow-soft-solar);
  display:flex; flex-direction:column; gap:12px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.doc-card-csc-solar-system-csc-products:hover{
  transform: translateY(-2px);
  border-color: rgba(21,94,117,.28);
  box-shadow: 0 16px 38px rgba(0,0,0,.10);
}

.doc-meta-csc-solar-system-csc-products{ display:flex; gap:12px; align-items:flex-start; }
.doc-icon-csc-solar-system-csc-products{
  width:40px; height:40px; border-radius:12px; display:grid; place-items:center;
  background: linear-gradient(135deg,var(--teal-700-solar),var(--cyan-800-solar));
  color:#fff; font-size:18px; box-shadow:0 8px 22px rgba(15,118,110,.25); flex-shrink:0;
}
.doc-title-csc-solar-system-csc-products{ margin:0 0 4px; font-weight:800; color: var(--ink-solar); font-size:16px; }
.doc-note-csc-solar-system-csc-products{ margin:0; color: var(--muted-solar); font-size:13px; }

.doc-actions-csc-solar-system-csc-products{ display:flex; gap:10px; flex-wrap:wrap; margin-top:auto; }

/* Buttons */
.btn-primary-csc-solar-system-csc-products,
.btn-ghost-csc-solar-system-csc-products{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px; border-radius:12px; font-weight:800; text-decoration:none;
  border:2px solid transparent; transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn-primary-csc-solar-system-csc-products{
  background: linear-gradient(135deg,var(--teal-700-solar),var(--cyan-800-solar)); color:#fff; box-shadow: var(--shadow-soft-solar);
}
.btn-primary-csc-solar-system-csc-products:hover{ transform: translateY(-2px); }

.btn-ghost-csc-solar-system-csc-products{
  background: transparent; color: var(--cyan-800-solar); border-color: var(--cyan-800-solar);
}
.btn-ghost-csc-solar-system-csc-products:hover{ background: var(--cyan-800-solar); color:#fff; }

.btn-wide-csc-solar-system-csc-products{ width:100%; }

/* ===== Modal ===== */
.modal-csc-solar-system-csc-products{
  position: fixed; inset: 0; display:none;
  z-index: 1000;
}
.modal-csc-solar-system-csc-products[aria-hidden="false"]{ display:block; }
.modal-backdrop-csc-solar-system-csc-products{
  position:absolute; inset:0; background: rgba(11,18,32,.55); backdrop-filter: blur(2px);
}
.modal-dialog-csc-solar-system-csc-products{
  position:absolute; left:50%; top:50%; transform: translate(-50%,-50%);
  width: min(92vw, 520px); background:#fff; border-radius:16px; box-shadow: 0 22px 50px rgba(0,0,0,.25);
  padding: 18px;
}
.modal-close-csc-solar-system-csc-products{
  position:absolute; top:10px; right:12px; border:0; background:transparent; font-size:22px; cursor:pointer; color:#6b7a8c;
}
.modal-title-csc-solar-system-csc-products{ margin:0 0 6px; font-weight:800; color: var(--ink-solar); }
.modal-sub-csc-solar-system-csc-products{ margin:0 0 12px; color: var(--muted-solar); }

.form-csc-solar-system-csc-products{ display:grid; gap:12px; }
.field-csc-solar-system-csc-products label{ display:block; font-size:13px; color: var(--ink-solar); margin-bottom:4px; }
.field-csc-solar-system-csc-products input{
  width:100%; border:1px solid #d7e0ea; border-radius:10px; padding:10px 12px; font-size:14px;
}
.tiny-note-csc-solar-system-csc-products{ margin:8px 0 0; color:#93a3b5; font-size:12px; }

/* success pane */
.success-csc-solar-system-csc-products{ text-align:center; padding: 12px; }
.success-csc-solar-system-csc-products h4{ margin:8px 0 4px; }
.success-icon-csc-solar-system-csc-products{
  width:40px; height:40px; border-radius:12px; display:grid; place-items:center; margin: 0 auto 6px;
  background: linear-gradient(135deg,var(--teal-700-solar),var(--cyan-800-solar)); color:#fff; font-weight:900;
}

/* ===== REVEAL ===== */
.reveal-top-solar-system-csc-products,
.reveal-left-solar-system-csc-products,
.reveal-right-solar-system-csc-products,
.reveal-up-solar-system-csc-products{
  opacity:0; transform: translateY(18px);
  transition: opacity .85s cubic-bezier(.2,.65,.2,1),
              transform .85s cubic-bezier(.2,.65,.2,1);
  will-change: opacity, transform;
}
.reveal-top-solar-system-csc-products{ transform: translateY(-18px); }
.reveal-left-solar-system-csc-products{ transform: translateX(-28px); }
.reveal-right-solar-system-csc-products{ transform: translateX(28px); }
.reveal-in-solar-system-csc-products{ opacity:1 !important; transform:none !important; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .reveal-top-solar-system-csc-products,
  .reveal-left-solar-system-csc-products,
  .reveal-right-solar-system-csc-products,
  .reveal-up-solar-system-csc-products{
    opacity:1 !important; transform:none !important; transition:none !important;
  }
}

/* --- MODAL (gated docs) --- */
.modal-csc-solar-system-csc-products{
  position: fixed;            /* cover the whole viewport */
  inset: 0;
  display: none;              /* toggled via aria-hidden */
  z-index: 9999;              /* sit above everything */
}

.modal-csc-solar-system-csc-products[aria-hidden="false"]{
  display: block;
}

.modal-backdrop-csc-solar-system-csc-products{
  position: absolute;
  inset: 0;
  /* dim + blur the entire page behind the modal */
  background: rgba(11, 18, 32, .55);
  backdrop-filter: blur(8px) saturate(105%);
  -webkit-backdrop-filter: blur(8px) saturate(105%);
  will-change: backdrop-filter;
  z-index: 0;
}

.modal-dialog-csc-solar-system-csc-products{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: min(92vw, 520px);
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0,0,0,.28);
  padding: 18px;
  z-index: 1;                 /* above backdrop */
}

.modal-close-csc-solar-system-csc-products{
  position: absolute;
  top: 10px; right: 12px;
  border: 0; background: transparent;
  font-size: 22px; cursor: pointer; color: #6b7a8c;
}

/* lock page scroll when modal is open */
body.modal-open{
  overflow: hidden;
}

/* Container for the entire section */
.-gemini-mission-section {
  font-family: Arial, sans-serif;
  max-width: 1100px;
  margin: 0 auto;
  background-color: var(--bg-solar);
  /* padding: 20px; */
}

/* Tab buttons container */
.-gemini-tabs-container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  /* background-color: #f0f0f0; */
  border-radius: 50px;
  padding: 5px;
  /* margin-bottom: 30px; */
  width: fit-content;
}

/* Individual tab button styling */
.-gemini-tab {
  background-color: transparent;
  border: none;
  padding: 12px 24px;
  margin: 0 4px;
  border-radius: 50px;
  font-size: 16px;
  cursor: pointer;
  color: #333;
  font-weight: 500;
  transition: all 0.3s ease;
}

/* Active (selected) tab state */
.-gemini-tab.active {
  background-color: #e0e0e0; 
  color: #000;
  font-weight: bold;
}

/* Main content wrapper */
.-gemini-content-wrapper {
  overflow: hidden;
  position: relative;
}

/* Individual content blocks (hidden by default) */
.-gemini-content {
  display: none;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

/* Active content block (visible) */
.-gemini-content.active {
  display: flex;
  flex-direction: column; /* Default for smaller screens */
  gap: 40px;
  opacity: 1;
  transform: translateY(0);
}

/* Layout for wider screens */
@media (min-width: 768px) {
  .-gemini-content.active {
    flex-direction: row; /* Side-by-side on desktop */
  }
}

/* Text and image containers */
.-gemini-text-content,
.-gemini-image-content {
  flex: 1;
}

.-gemini-text-content h2 {
  font-size: 48px;
  color: #0d2847;
  margin-bottom: 20px;
}

.-gemini-text-content p {
  font-size: 18px;
  line-height: 1.6;
  color: #555;
  color: var(--muted-meet-ieng-about);
}

.-gemini-image-content img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}
/* Individual content blocks (hidden by default) */
.-gemini-content {
  display: none;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
  align-items: center; /* Vertically align items when side-by-side */
}

/* Active content block (visible) */
.-gemini-content.active {
  display: flex;
  flex-direction: column; /* Default for smaller screens */
  gap: 40px;
  opacity: 1;
  transform: translateY(0);
}

/* Layout for wider screens */
@media (min-width: 768px) {
  .-gemini-content.active {
    flex-direction: row; /* Side-by-side on desktop */
  }
}

/* Text and image containers */
.-gemini-text-content {
  flex: 1; /* Allow text content to take available space */
}

.-gemini-image-content {
  flex: 1; /* Allow image content to take available space */
  display: flex; /* Use flexbox to center the image */
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  padding: 20px; /* Add some padding around the image if desired */
}


.-gemini-text-content h2 {
  font-size: 48px;
  color: #0d2847;
  margin-bottom: 20px;
}

.-gemini-text-content p {
  font-size: 18px;
  line-height: 1.6;
  color: #555;
}

.-gemini-image-content img {
  /* --- MODIFIED SECTION --- */
  width: 100%; /* Keep it responsive within its constrained size */
  /* Adjust this value to control the maximum image width */
  
  height: 300px;
  max-width: auto;
  display: block;
  border-radius: 8px;
  /* ---------------------- */
}
/* */
/* Container for the entire section */
.-gemini-mission-section {
  max-width: 1100px;
  margin: 0 auto;
}

/* Tab buttons container */
.-gemini-tabs-container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-radius: 50px;
  padding: 5px;
  width: fit-content;
}

/* Individual tab button styling */
.-gemini-tab {
  background-color: transparent;
  border: none;
  padding: 12px 24px;
  margin: 0 4px;
  border-radius: 50px;
  font-size: 16px;
  cursor: pointer;
  color: #333;
  font-weight: 500;
  transition: all 0.3s ease;
}

/* Active (selected) tab state */
.-gemini-tab.active {
  background-color: #e0e0e0;
  color: #000;
  font-weight: 600;
}

/* Main content wrapper */
.-gemini-content-wrapper {
  overflow: hidden;
  position: relative;
}

/* Content blocks (default hidden) */
.-gemini-content {
  display: none;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
  align-items: center;
}

/* Active content block (visible) */
.-gemini-content.active {
  display: flex;
  flex-direction: column;
  gap: 40px;
  opacity: 1;
  transform: translateY(0);
}

@media (min-width: 768px) {
  .-gemini-content.active {
    flex-direction: row;
  }
}

/* Text + image columns */
.-gemini-text-content,
.-gemini-image-content {
  flex: 1;
}

/* Headings in this section – keep same style as about section title style */
.-gemini-text-content h2 {
  font-size: 48px;
  color: #0d2847;
  margin-bottom: 20px;
}

/* UPDATED: paragraph style to match "about us" paragraph */
.-gemini-text-content p {
  font: 400 15px/1.7 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #6a7a89;
  margin: 0;
}

/* Image block */
.-gemini-image-content {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.-gemini-image-content img {
  width: 100%;
  max-width: 480px;
  height: auto;
  border-radius: 8px;
}
/* === SMART WATER HERO – FINAL TWEAKS === */

/* Give the whole hero more space below the sticky header */
section.section-hero-solar-system.section-hero-solar-system--water {
  /* header height (72px) + extra gap */
  padding-top: calc(var(--header-h-solar) + 40px) !important;
  padding-bottom: 48px;
}

/* Desktop: make the image ~60% of original and remove overlap margin */
.section-hero-solar-system--water .hero-img-solar-system {
  width: min(350px, 24vw);   /* smaller again */
  max-width: 350px;
  margin-top: 0 !important;  /* cancel the 80px margin from generic hero */
}

/* centre image column a bit nicer */
.section-hero-solar-system--water .hero-right-solar-system {
  justify-self: center;
}

/* Tablet / small laptop */
@media (max-width: 960px) {
  section.section-hero-solar-system.section-hero-solar-system--water {
    padding-top: calc(var(--header-h-solar) + 32px) !important;
    padding-bottom: 40px;
  }

  .section-hero-solar-system--water .hero-img-solar-system {
    width: 100%;
    max-width: 280px;
    margin: 12px auto 0;
  }
}

/* Mobile phones */
@media (max-width: 560px) {
  section.section-hero-solar-system.section-hero-solar-system--water {
    padding-top: calc(var(--header-h-solar) + 28px) !important;
    padding-bottom: 32px;
  }

  .section-hero-solar-system--water .hero-title-solar-system {
    margin-bottom: 10px;
  }

  .section-hero-solar-system--water .hero-sub-solar-system {
    margin-bottom: 20px;
  }
}


/* ---------- FIX CONSULT FORM MOBILE LAYOUT ---------- */
@media (max-width: 600px) {

  /* Force the grid to go 1 column */
  .consult-block__inner {
    display: block !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    padding: 0 !important;
  }

  /* Force the form to full width */
  .consult-form {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 16px !important;
    border-radius: 12px;
    box-sizing: border-box !important;
  }

  /* Remove extra margins from wrapper */
  #contact,
  .consult-block,
  .cmms-contact-form-wrap {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }

}
/* ---- Mobile: add gap around contact form ---- */
@media (max-width: 600px) {
  .consult-form {
    /* full-width minus side margins */
    width: calc(100% - 32px) !important;
    max-width: none !important;

    /* space from screen edge + a little bottom gap */
    margin: 0 16px 24px !important;
    padding: 16px !important;

    box-sizing: border-box !important;
    border-radius: 16px;
  }
}
/* ====== MOBILE: keep inputs inside the teal card ====== */
@media (max-width: 600px) {

  /* Make each field respect the card padding */
  .consult-form input,
  .consult-form select,
  .consult-form textarea {
    width: 100% !important;          /* fill the available space */
    max-width: 100% !important;      /* never grow beyond card */
    box-sizing: border-box !important;
    display: block;
    margin: 0;                       /* remove any side margins */
  }

  /* If someone types a very long string with no spaces,
     don’t let it stretch the input wider than the card */
  .consult-form input[type="text"],
  .consult-form input[type="email"],
  .consult-form input[type="tel"] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
/* ===== MOBILE PADDING FOR MISSION / VISION / VALUES ===== */
@media (max-width: 600px) {
  .-gemini-mission-section {
    /* full width with nice side padding like the contact form */
    width: 100%;
    max-width: 100%;
    padding: 0 16px 24px !important;   /* left/right padding + a bit bottom */
    box-sizing: border-box;
  }
}
/* ===== MOBILE PADDING FOR ABOUT-US SECTION ===== */
@media (max-width: 600px) {
  /* "About us – where vision meets execution" block */
  #about-us.cmms-contact-form-wrap .cmms-contact-form-inner {
    width: 100%;
    max-width: 100%;
    padding: 0 16px 24px !important;   /* left/right padding + bottom space */
    box-sizing: border-box;
    margin: 0;
  }
}