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;
}
/* Existing styles for the card container */
.image-card-pylon {
  background: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  text-align: center;
  /* Ensure the card has perspective for better 3D transform effects */
  transform-style: preserve-3d;
  /* Added minor padding for scale margin */
  padding-top: 5px; 
}

/* Existing style for the card hover (moves the card up) */
.image-card-pylon:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
}

/* Image styles - Setting up the image for the animation */
.image-card-pylon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* CRITICAL: Use a smooth transition */
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); 
  /* Set initial transform for consistency */
  transform: translateZ(0); 
}

/* NEW: Apply floating transformation to the image when the card is hovered */
.image-card-pylon:hover img {
  /* Combined transform for a "floating" look: */
  
  /* 1. Scale/Zoom: Makes the image slightly larger */
  /* 2. Slight X and Y movement: Moves the image subtly (e.g., 2px) */
  /* 3. Rotate (Z-axis): Adds a tiny rotation for a less rigid feel (0.5 degree) */
  /* 4. translateZ(10px): Brings the image slightly closer to the viewer (3D effect) */
  
  transform: 
    scale(1.03) 
    translateX(2px) 
    translateY(-2px) 
    rotateZ(0.5deg) 
    translateZ(10px); 
}

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

.image-card-pylon p {
  font-size: 0.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-termination-kit{
  width: min(92vw, var(--container-w-solar));
  margin-inline: auto;
}

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

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

.hero-left-termination-kit{}
.hero-right-termination-kit{
  justify-self: end;
}

.hero-title-termination-kit{
  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-termination-kit{
  color: var(--teal-700-solar);
}

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

.hero-cta-termination-kit{
  display: flex;
  gap: 12px;
}

.btn-primary-termination-kit,
.btn-ghost-termination-kit{
  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-termination-kit{
  background: linear-gradient(135deg, var(--teal-700-solar), var(--cyan-800-solar));
  color: var(--white-solar);
  box-shadow: var(--shadow-soft-solar);
}
.btn-primary-termination-kit:hover{ transform: translateY(-2px); }

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

.hero-img-termination-kit{
    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-termination-kit{
    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-termination-kit,
.hero-left-termination-kit { position: relative; z-index: 1; }

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

.trusted-heading-termination-kit{
  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-termination-kit{
  overflow: hidden;
  position: relative;
  padding: 6px 0;             /* subtle breathing space */
  background: transparent;    /* no panel look */
  border-radius: 0;
}
.logos-track-termination-kit{
   display: inline-flex;
  align-items: center;
  gap: clamp(28px, 4vw, 46px);
  padding-inline: 12px;
  animation: marquee-termination-kit 28s linear infinite;
  will-change: transform;
}
.logos-wrap-termination-kit:hover .logos-track-termination-kit{
  animation-play-state: paused;
}

.logo-item-termination-kit{
   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-termination-kit:hover{
  opacity: 1;
  transform: translateY(-2px);
}

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

}


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

/* ============= SCROLL REVEAL ============= */
.reveal-termination-kit{
  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-termination-kit{
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
}

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

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

/* --- RESPONSIVE polish --- */
@media (max-width: 960px){
  .grid-hero-termination-kit{ grid-template-columns: 1fr; }
  .hero-img-termination-kit{ width: 100%; max-width: 520px; }
}
@media (max-width: 560px){
  .logos-track-termination-kit{ gap: 24px; }
  .trusted-heading-termination-kit{ 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-termination-kit{ position: relative; z-index: 2; }
.hero-right-termination-kit{ position: relative; }
.hero-img-termination-kit{
  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-termination-kit{ display: none !important; }

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

  /* Pull the Trusted section up so the image overlaps it */
  .section-trusted-termination-kit{
    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-termination-kit{ transform: none; }
  .section-trusted-termination-kit{
    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-termination-kit.manual-termination-kit { animation: none !important; }



/* why us */

/* ====== WHY section: structure ====== */
.section-why-termination-kit-why{
  background: var(--bg-solar);
  padding: clamp(86px, 3vw, 96px) 0;
}

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

.title-termination-kit-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-termination-kit-why{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 3vw, 28px) clamp(18px, 3vw, 32px);
  position: relative;
}

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

/* card content */
.icon-wrap-termination-kit-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-termination-kit-why i{
  font-size: 22px;
  line-height: 1;
}

.card-title-termination-kit-why{
  margin: 0 0 6px;
  font-weight: 800;
  color: var(--ink-solar);
  font-size: clamp(16px, 2vw, 18px);
}
.card-text-termination-kit-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-termination-kit.
   Add direction classes ending with -termination-kit-why.
*/
.reveal-left-termination-kit-why,
.reveal-right-termination-kit-why,
.reveal-top-termination-kit-why,
.reveal-bottom-termination-kit-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-termination-kit-why{  transform: translateX(-28px); }
.reveal-right-termination-kit-why{ transform: translateX( 28px); }
.reveal-top-termination-kit-why{   transform: translateY(-28px); }
.reveal-bottom-termination-kit-why{transform: translateY( 28px); }

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

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

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

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

.container-termination-kit1-why-us p{
  margin: 0 0 12px;
  color: var(--ink-solar);
  font-size: clamp(14px,1.7vw,16px);
  line-height: 1.65;
}
.why-point-termination-kit1{
  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-termination-kit1{
  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-termination-kit1 > * + *{ margin-top: 12px; }

.why-media-termination-kit1 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-termination-kit1{ padding: 10px 12px; }
}

/* impact */


/* ================= FULL-BLEED IMPACT (merged image + panel) ================= */
.section-impact-termination-kit-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-termination-kit has a max */
.section-impact-termination-kit-impact .container-termination-kit{
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* two columns: big image + dark panel */
.grid-impact-termination-kit-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-termination-kit-impact{ margin: 0; }
.impact-img-termination-kit-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-termination-kit-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-termination-kit-impact{
  color: var(--teal-700-solar);
  font-weight: 800;
  letter-spacing: .4px;
  margin: 0 0 6px;
}
.impact-title-termination-kit-impact{
  font-size: clamp(22px, 3.8vw, 34px);
  font-weight: 800;
  margin: 0 0 6px;
}
.impact-sub-termination-kit-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-termination-kit-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-termination-kit-impact{
  padding: 12px 0;
}
.stat-item-termination-kit-impact:nth-child(odd){
  border-right: 1px solid rgba(255,255,255,.14);
  padding-right: clamp(10px, 2.4vw, 16px);
}
.stat-item-termination-kit-impact:nth-child(even){
  padding-left: clamp(10px, 2.4vw, 16px);
}
/* subtle horizontal rules across each row */
.stats-grid-termination-kit-impact > .stat-item-termination-kit-impact:nth-child(-n+2){
  border-bottom: 1px solid rgba(255,255,255,.14);
  padding-bottom: clamp(10px, 2.2vw, 14px);
}
.stats-grid-termination-kit-impact > .stat-item-termination-kit-impact:nth-child(n+3){
  padding-top: clamp(10px, 2.2vw, 14px);
}

/* Numbers */
.stat-value-termination-kit-impact{
  font-weight: 900;
  letter-spacing: .5px;
  font-size: clamp(28px, 5.6vw, 40px);
  color: var(--white-solar);
}
.stat-note-termination-kit-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-termination-kit-impact{
  align-self: start;
  margin-top: 8px;
  border-color: var(--teal-700-solar);
  color: var(--teal-700-solar);
}
.impact-btn-termination-kit-impact:hover{
  background: var(--teal-700-solar);
  color: #fff;
}

/* ===== Slow reveal on scroll (uses your existing JS toggling .in-view-termination-kit) ===== */
.reveal-left-termination-kit-why,
.reveal-right-termination-kit-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-termination-kit-why{ transform: translateX(-28px); }
.in-view-termination-kit.reveal-left-termination-kit-why,
.in-view-termination-kit.reveal-right-termination-kit-why{
  opacity: 1; transform: translateX(0);
}

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


/* solutions  */

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

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

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

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

.solutions-viewall-btn-termination-kit-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-termination-kit-solution:hover{
  background: var(--teal-700-solar);
  color: #fff;
  transform: translateY(-1px);
}

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

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

/* Card */
.card-termination-kit-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-termination-kit-solution:hover{
  border-color: var(--teal-700-solar);
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(0,0,0,.08);
}

.card-icon-termination-kit-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-termination-kit-solution i{ font-size: 22px; line-height: 1; }

.card-title-termination-kit-solution{
  margin: 0 0 6px;
  font-size: clamp(16px, 2.2vw, 18px);
  font-weight: 800;
  color: var(--ink-solar);
}
.card-text-termination-kit-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-termination-kit-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-termination-kit-solution:hover{
  background: var(--cyan-800-solar);
  color: #fff;
  transform: translateY(-1px);
}

/* Reveal directions (slow) */
.reveal-left-termination-kit-solution,
.reveal-right-termination-kit-solution,
.reveal-top-termination-kit-solution,
.reveal-bottom-termination-kit-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-termination-kit-solution{  transform: translateX(-26px); }
.reveal-right-termination-kit-solution{ transform: translateX( 26px); }
.reveal-top-termination-kit-solution{   transform: translateY(-26px); }
.reveal-bottom-termination-kit-solution{transform: translateY( 26px); }

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

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

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

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

.grid-app-termination-kit-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-termination-kit-app{ grid-template-columns: .95fr 1.05fr; }

/* text block */
.kicker-termination-kit-app{
  color: var(--teal-700-solar);
  font-weight: 800;
  letter-spacing: .4px;
  margin: 0 0 6px;
}
.title-termination-kit-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-termination-kit-app{
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
}
.list-termination-kit-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-termination-kit-app li + li{ margin-top: 10px; }
.list-termination-kit-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-termination-kit.in-view-termination-kit.list-termination-kit-app li{ opacity: 1; transform: none; }
.reveal-termination-kit.in-view-termination-kit.list-termination-kit-app li:nth-child(1){ transition-delay: .05s; }
.reveal-termination-kit.in-view-termination-kit.list-termination-kit-app li:nth-child(2){ transition-delay: .12s; }
.reveal-termination-kit.in-view-termination-kit.list-termination-kit-app li:nth-child(3){ transition-delay: .19s; }
.reveal-termination-kit.in-view-termination-kit.list-termination-kit-app li:nth-child(4){ transition-delay: .26s; }

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

.media-frame-termination-kit-app{
  position: relative;
  width: min(520px, 42vw);
  aspect-ratio: 4/4.8;
  border-radius: 16px;
  isolation: isolate;
  will-change: transform;
}
.media-plate-termination-kit-app{
  position: absolute; inset: 10% 6% 10% 6%;
  background: var(--cyan-800-solar);
  border-radius: 14px;
  z-index: 1;
}
.media-img-termination-kit-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-termination-kit-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-termination-kit-app i{ font-size: 30px; }

/* simple chart card */
.media-chart-termination-kit-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-termination-kit-app{
  display: block;
  width: 100%; height: auto;
}

/* reveal directions for this section (slow) */
.reveal-left-termination-kit-app,
.reveal-right-termination-kit-app,
.reveal-top-termination-kit-app,
.reveal-bottom-termination-kit-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-termination-kit-app{  transform: translateX(-28px); }
.reveal-right-termination-kit-app{ transform: translateX( 28px); }
.reveal-top-termination-kit-app{   transform: translateY(-28px); }
.reveal-bottom-termination-kit-app{transform: translateY( 28px); }

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

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

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

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

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

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

/* arrows */
.projects-nav-termination-kit-projects{
  display: inline-flex;
  gap: 10px;
}
.btn-nav-termination-kit-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-termination-kit-projects:hover{
  background: var(--teal-700-solar);
  color: #fff;
  transform: translateY(-1px);
}
.btn-nav-termination-kit-projects[disabled]{
  opacity: .45; cursor: not-allowed; transform: none;
}

/* viewport + track */
.projects-viewport-termination-kit-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-termination-kit-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-termination-kit-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-termination-kit-projects:hover{
  transform: translateY(-3px);
  border-color: var(--teal-700-solar);
  box-shadow: 0 16px 36px rgba(0,0,0,.08);
}

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

.project-body-termination-kit-projects{
  padding: 12px 14px 10px 14px;
  position: relative;
  border-top: 1px solid rgba(15,118,110,.12);
}
.project-title-termination-kit-projects{
  margin: 0 0 6px;
  font-size: clamp(15px, 1.9vw, 17px);
  font-weight: 800;
  color: var(--ink-solar);
}
.project-meta-termination-kit-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-termination-kit-projects::after{
  content:"";
  display:block;
  height: 1px;
  background: rgba(15,118,110,.16);
  margin-top: 10px;
}
.project-arrow-termination-kit-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-termination-kit-projects:hover .project-arrow-termination-kit-projects{
  transform: translateX(2px);
  color: var(--teal-700-solar);
}

/* Reveal directions for this section */
.reveal-top-termination-kit-projects,
.reveal-bottom-termination-kit-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-termination-kit-projects{ transform: translateY(-26px); }
.in-view-termination-kit.reveal-top-termination-kit-projects,
.in-view-termination-kit.reveal-bottom-termination-kit-projects{
  opacity: 1; transform: none;
}

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

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

  }
}
/* */

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

.kicker-termination-kit-types{
  color: var(--teal-700-solar);
  font-weight: 800;
  letter-spacing: .4px;
  margin: 0 0 6px;
}
.title-termination-kit-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-termination-kit-types{
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-bottom: clamp(16px, 1vw, 24px);
}
.tab-btn-termination-kit-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-termination-kit-types i{ font-size: 18px; }
.tab-btn-termination-kit-types:hover{ transform: translateY(-1px); }
.tab-btn-termination-kit-types.is-active-termination-kit-types{
  background: linear-gradient(135deg, var(--teal-700-solar), var(--cyan-800-solar));
  color: #fff; border-color: transparent;
}

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

.panel-grid-termination-kit-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-termination-kit-types h3{
  margin: 0 0 8px; font-size: clamp(18px, 2.6vw, 22px);
  color: var(--ink-solar); font-weight: 800;
}
.panel-text-termination-kit-types p{
  margin: 0 0 8px; color: var(--muted-solar);
}

.bullets-termination-kit-types{
  list-style: none; padding: 0; margin: 10px 0 0;
  display: grid; gap: 8px;
}
.bullets-termination-kit-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-termination-kit-types i{ color: var(--teal-700-solar); margin-top: 2px; }

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

/* Feature chips */
.feature-grid-termination-kit-types{
  display: flex; flex-wrap: wrap; gap: 10px;
}
.feature-chip-termination-kit-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-termination-kit-types i{ color: var(--teal-700-solar); }

/* Reveal directions for this section */
.reveal-left-termination-kit-types,
.reveal-right-termination-kit-types,
.reveal-top-termination-kit-types,
.reveal-bottom-termination-kit-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-termination-kit-types{  transform: translateX(-26px); }
.reveal-right-termination-kit-types{ transform: translateX( 26px); }
.reveal-top-termination-kit-types{   transform: translateY(-26px); }
.reveal-bottom-termination-kit-types{transform: translateY( 26px); }
.in-view-termination-kit.reveal-left-termination-kit-types,
.in-view-termination-kit.reveal-right-termination-kit-types,
.in-view-termination-kit.reveal-top-termination-kit-types,
.in-view-termination-kit.reveal-bottom-termination-kit-types{
  opacity: 1; transform: none;
}

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


/* pylon */

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

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

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

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

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

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

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

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

.list-pylon-termination-kit-pylon{
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}
.list-pylon-termination-kit-pylon li{
  padding-left: 28px;
  position: relative;
  color: var(--ink-solar);
  line-height: 1.65;
  font-size: clamp(14px, 1.7vw, 16px);
}
.list-pylon-termination-kit-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-termination-kit-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-termination-kit-pylon{
  display: flex; flex-wrap: wrap; gap: 12px;
}

.btn-primary-pylon-termination-kit-pylon,
.btn-ghost-pylon-termination-kit-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-termination-kit-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-termination-kit-pylon:hover{ transform: translateY(-2px); }

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

/* ============= MEDIA SIDE ============= */
.media-pylon-termination-kit-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-termination-kit-pylon{
  display: block;
  width: 100%;
  height: clamp(360px, 46vw, 560px);
  object-fit: cover;
}
.figcap-pylon-termination-kit-pylon{
  padding: 8px 12px;
  font-size: 12px;
  color: var(--muted-solar);
  background: rgba(255,255,255,.6);
}

/* ============= REVEAL ON SCROLL ============= */
.reveal-top-termination-kit-pylon,
.reveal-left-termination-kit-pylon,
.reveal-right-termination-kit-pylon,
.reveal-up-termination-kit-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-termination-kit-pylon{ transform: translateY(-18px); }
.reveal-left-termination-kit-pylon{ transform: translateX(-28px); }
.reveal-right-termination-kit-pylon{ transform: translateX(28px); }
.reveal-in-termination-kit-pylon{ opacity: 1 !important; transform: none !important; }

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

/* why us */


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

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

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

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

/* checklist */
.checks-termination-kit1-why-us{
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 12px;
}
.checks-termination-kit1-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-termination-kit1-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-termination-kit1-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-termination-kit1-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-termination-kit1-why-us h3{
  margin:0 0 6px; font-size: clamp(18px,2.6vw,22px);
}
.card-termination-kit1-why-us p{
  margin:0 0 12px; color: rgba(255,255,255,.82);
}

/* buttons */
.btn-primary-termination-kit1-why-us,
.btn-ghost-termination-kit1-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-termination-kit1-why-us{
  background: linear-gradient(135deg,var(--teal-700-solar),var(--cyan-800-solar));
  color:#fff; box-shadow: var(--shadow-soft-solar);
}
.btn-primary-termination-kit1-why-us:hover{ transform: translateY(-2px); }
.btn-ghost-termination-kit1-why-us{
  color:#cfe8f0; border-color:#2c5863; background: transparent;
}
.btn-ghost-termination-kit1-why-us:hover{ background:#18434c; color:#fff; }

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

/* ===== reveal (slow) ===== */
.reveal-top-termination-kit1-why-us,
.reveal-up-termination-kit1-why-us,
.reveal-right-termination-kit1-why-us,
.reveal-left-termination-kit1-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-termination-kit1-why-us{ transform: translateY(-22px); }
.reveal-right-termination-kit1-why-us{ transform: translateX(28px); }
.reveal-left-termination-kit1-why-us{ transform: translateX(-28px); }
.reveal-in-termination-kit1-why-us{ opacity:1 !important; transform:none !important; }

/* ===== responsive ===== */
@media (max-width: 1024px){
  .grid-termination-kit1-why-us{ grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce){
  .reveal-top-termination-kit1-why-us,
  .reveal-up-termination-kit1-why-us,
  .reveal-right-termination-kit1-why-us,
  .reveal-left-termination-kit1-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-termination-kit1-why-us { order: 3; }
}

/* CEC */

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

.section-csc-termination-kit-csc-products{
  background: var(--bg-solar);
  padding: clamp(22px,1vw,18px) 0;
}

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

/* Header copy */
.head-csc-termination-kit-csc-products{ margin-bottom: clamp(16px,3vw,28px); }
.eyebrow-csc-termination-kit-csc-products{
  display:inline-block; color: var(--teal-700-solar); font-weight:800; letter-spacing:.3px; margin-bottom:6px;
}
.title-csc-termination-kit-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-termination-kit-csc-products{
  margin: 0 0 10px; color: var(--muted-solar); font-size: clamp(14px,1.8vw,17px);
}

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

.doc-card-csc-termination-kit-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-termination-kit-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-termination-kit-csc-products{ display:flex; gap:12px; align-items:flex-start; }
.doc-icon-csc-termination-kit-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-termination-kit-csc-products{ margin:0 0 4px; font-weight:800; color: var(--ink-solar); font-size:16px; }
.doc-note-csc-termination-kit-csc-products{ margin:0; color: var(--muted-solar); font-size:13px; }

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

/* Buttons */
.btn-primary-csc-termination-kit-csc-products,
.btn-ghost-csc-termination-kit-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-termination-kit-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-termination-kit-csc-products:hover{ transform: translateY(-2px); }

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

.btn-wide-csc-termination-kit-csc-products{ width:100%; }

/* ===== Modal ===== */
.modal-csc-termination-kit-csc-products{
  position: fixed; inset: 0; display:none;
  z-index: 1000;
}
.modal-csc-termination-kit-csc-products[aria-hidden="false"]{ display:block; }
.modal-backdrop-csc-termination-kit-csc-products{
  position:absolute; inset:0; background: rgba(11,18,32,.55); backdrop-filter: blur(2px);
}
.modal-dialog-csc-termination-kit-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-termination-kit-csc-products{
  position:absolute; top:10px; right:12px; border:0; background:transparent; font-size:22px; cursor:pointer; color:#6b7a8c;
}
.modal-title-csc-termination-kit-csc-products{ margin:0 0 6px; font-weight:800; color: var(--ink-solar); }
.modal-sub-csc-termination-kit-csc-products{ margin:0 0 12px; color: var(--muted-solar); }

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

/* success pane */
.success-csc-termination-kit-csc-products{ text-align:center; padding: 12px; }
.success-csc-termination-kit-csc-products h4{ margin:8px 0 4px; }
.success-icon-csc-termination-kit-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-termination-kit-csc-products,
.reveal-left-termination-kit-csc-products,
.reveal-right-termination-kit-csc-products,
.reveal-up-termination-kit-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-termination-kit-csc-products{ transform: translateY(-18px); }
.reveal-left-termination-kit-csc-products{ transform: translateX(-28px); }
.reveal-right-termination-kit-csc-products{ transform: translateX(28px); }
.reveal-in-termination-kit-csc-products{ opacity:1 !important; transform:none !important; }

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

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

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

.modal-backdrop-csc-termination-kit-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-termination-kit-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-termination-kit-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: 1180px;
  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: 1180px;
  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;
}
/* ====================== READ MORE (Add-on CSS) ====================== */
.btn-readmore-termination-kit-types{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:14px;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.14);
  background:transparent;
  cursor:pointer;
  font-weight:600;
}

.btn-readmore-termination-kit-types::after{
  content:"\ea4e"; /* RemixIcon: ri-arrow-down-s-line (optional if remixicon loaded) */
  font-family: "remixicon";
  font-weight:400;
  line-height:1;
}

.btn-readmore-termination-kit-types[aria-expanded="true"]::after{
  content:"\ea78"; /* ri-arrow-up-s-line */
}

.readmore-content-termination-kit-types{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid rgba(0,0,0,.10);
}

/* Optional small heading inside readmore */
.readmore-content-termination-kit-types h4{
  margin:0 0 10px 0;
  font-size:1rem;
}
:root {
  --lv-ink: #0b1220;
  --lv-muted: #5a6a7d;
  --lv-bg: #ffffff;
  --lv-card-bg: #ffffff;
  --lv-border: #e7edf5;
  --lv-shadow: 0 14px 36px rgba(10, 20, 36, .10);
  --lv-shadow-soft: 0 10px 24px rgba(10, 20, 36, .06);

  --lv-orange: #0f766e;
  --lv-orange-600:#155e75;
  --lv-orange-400: #2ac7f7;
  --lv-radius: 18px;
}

/* ---------- Section ---------- */
.lv-electric-panel-project {
  background: var(--lv-bg);
  color: var(--lv-ink);
  padding: clamp(20px, 1vw, 18px) 16px;

  /* center the whole block */
  display: flex;
  justify-content: center;
}

.lv-epp-container {
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;

  /* center header and grid within container */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lv-epp-header {
  margin-bottom: 26px;
  width: 100%;
  text-align: center;
}

.lv-epp-kicker {
  display: inline-block;
  font: 600 12px/1.1 system-ui, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #005a52;
  background:  #005f5721;
  padding: 8px 12px;
  border-radius: 999px;
}

.lv-epp-header h2 {
  margin: 12px 0 0;
  font: 700 clamp(22px, 3.5vw, 34px)/1.25 system-ui, Segoe UI, Roboto, Arial, sans-serif;
}

/* ---------- Grid ---------- */
.lv-epp-grid {
  width: 100%;
  margin-top: 16px;

  display: grid;

  /* auto-center cards even if only 1 or 2 items */
  grid-template-columns: repeat(auto-fit, minmax(320px, 360px));
  justify-content: center;

  gap: 22px;
}

@media (max-width:1024px) {
  .lv-epp-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
}

@media (max-width:640px) {
  .lv-epp-grid {
    grid-template-columns: minmax(0, 520px);
  }
}

/* ---------- Card ---------- */
.lv-epp-card {
  background: var(--lv-card-bg);
  border: 1px solid var(--lv-border);
  border-radius: var(--lv-radius);
  overflow: hidden;
  box-shadow: var(--lv-shadow-soft);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
  opacity: 1;

  /* make sure cards fill their grid column nicely */
  width: 100%;
}

.lv-epp-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--lv-shadow);
  border-color: #96fff6;
}

.lv-epp-media {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
}

.lv-epp-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.03);
  transition: transform .5s ease;
}

.lv-epp-card:hover .lv-epp-media img {
  transform: scale(1.06);
}

.lv-epp-year {
  position: absolute;
  inset: 14px auto auto 14px;
  background: linear-gradient(135deg, var(--lv-orange), var(--lv-orange-400));
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}

.lv-epp-body {
  padding: 18px 18px 20px;
  color: var(--lv-ink);
}

.lv-epp-body h3 {
  margin: 2px 0 8px;
  font: 700 18px/1.35 system-ui, Segoe UI, Roboto, Arial, sans-serif;
}

.lv-epp-client {
  color: var(--lv-muted);
  margin: 0 0 10px;
  font-size: 14px;
}

.lv-epp-points {
  margin: 0;
  padding: 0 0 0 18px;
  color: #253048;
}

.lv-epp-points li {
  margin: 6px 0;
}

/* ---------- More button ---------- */
.lv-epp-more-wrap {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px 0 6px;
}

.lv-epp-more {
  border: 0;
  cursor: pointer;
  color: #005a52;
  font-weight: 700;
  padding: 12px 18px;
  border-radius: 12px;
  background: linear-gradient(135deg, #86fff5, #8efff6);
  box-shadow: 0 10px 24px #00342f;
  transition: transform .25s ease, box-shadow .25s ease, filter .2s ease;
}

.lv-epp-more:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px #013733;
  background: linear-gradient(135deg,  #86fff5, #8efff6);
}

.lv-epp-more:active {
  transform: translateY(0);
}

/* ---------- Reveal animations ---------- */
.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
}

.reveal-right {
  opacity: 0;
  transform: translateX(40px);
}

.is-visible {
  opacity: 1;
  transform: translateX(0);
  transition: transform .7s cubic-bezier(.2, .6, .2, 1), opacity .7s;
}

/* hide later cards until 'More Projects' is clicked */
.is-hidden {
  display: none;
}


/* =======================================================================
   Portrait images for project cards (vertical rectangle)
   -----------------------------------------------------------------------
   Recommended export sizes (3:4 aspect ratio):
     • Standard: 900 × 1200 px
     • Hi-res/retina: 1200 × 1600 px (or 1500 × 2000 px)
   Alternative (2:3 aspect ratio) if you prefer taller images:
     • Standard: 1000 × 1500 px
     • Hi-res:   1400 × 2100 px
   Drop this block AFTER the previous project CSS to override 16:9.
   ======================================================================= */

/* Default portrait: 3:4 */
.lv-electric-panel-project .lv-epp-media {
  aspect-ratio: 10/11;
  /* vertical rectangle */
  max-height: 360px;
  /* keeps cards consistent on large screens */
  overflow: hidden;
}

.lv-electric-panel-project .lv-epp-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* fills the frame without distortion */
  object-position: center;
  /* center crop for portraits */
  display: block;
  transform: none;
  /* neutralize any previous scale if applied */
}

/* Slightly taller cap on very wide screens */
@media (min-width: 1200px) {
  .lv-electric-panel-project .lv-epp-media {
    max-height: 640px;
  }
}

/* Optional: add class "is-23" on a card to use a 2:3 portrait */
.lv-electric-panel-project .lv-epp-card.is-23 .lv-epp-media {
  aspect-ratio: 2 / 3;
}

/* Keep the year pill positioned nicely on taller images */
.lv-electric-panel-project .lv-epp-year {
  inset: 12px auto auto 12px;
}