/* ================================================================
   responsive.css — Crystal Electronics
   Complete responsive styles + attractive mobile menu
   For ALL pages: index, about, capacity, contact,
                  partners, pm-surya-ghar, savings, services
   ================================================================

   HOW TO INTEGRATE — do this on EVERY HTML page:
   ─────────────────────────────────────────────
   1. Add in <head> AFTER your existing <style> block:

      Root pages  → <link rel="stylesheet" href="/assets/responsive.css">
      Sub-folders → <link rel="stylesheet" href="../assets/responsive.css">

   2. Inside <header class="site-nav" id="siteNav">,
      RIGHT AFTER the .nav-brand <a> tag, add:

      <button class="hamburger" id="hamburger" aria-label="Toggle menu" aria-expanded="false">
        <span></span><span></span><span></span>
      </button>

   3. RIGHT BEFORE </header> add the full mobile menu:

      <div class="mobile-menu" id="mobileMenu">
        <div class="mm-backdrop" id="mmBackdrop"></div>
        <div class="mm-panel">
          <div class="mm-header">
            <a href="/"><img src="../assets/Crystal_Electronics.png" alt="Crystal Electronics" class="mm-logo"></a>       
            <button class="mm-close" id="mmClose" aria-label="Close menu">
              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
                fill="none" stroke="currentColor" stroke-width="2.5"
                stroke-linecap="round" stroke-linejoin="round">
                <line x1="18" y1="6" x2="6" y2="18"/>
                <line x1="6" y1="6" x2="18" y2="18"/>
              </svg>
            </button>
          </div>
          <nav class="mm-nav">
            <a href="/about/"        class="mm-link"><span class="mm-icon">◈</span>About</a>
            <a href="/pm-surya-ghar" class="mm-link"><span class="mm-icon">☀</span>PM Surya Ghar</a>
            <a href="/savings"       class="mm-link"><span class="mm-icon">⚡</span>Savings</a>
            <a href="/capacity"      class="mm-link"><span class="mm-icon">🔋</span>Capacity</a>
            <a href="/services"      class="mm-link"><span class="mm-icon">⚙</span>Services</a>
            <a href="/partners"      class="mm-link"><span class="mm-icon">🤝</span>Partners</a>
            <a href="/contact"       class="mm-link"><span class="mm-icon">✉</span>Contact</a>
          </nav>
          <div class="mm-footer">
            <a href="tel:9944560006"  class="mm-cta-call">
              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"
                fill="none" stroke="currentColor" stroke-width="2"
                stroke-linecap="round" stroke-linejoin="round">
                <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07
                         A19.5 19.5 0 0 1 4.07 11.5 19.79 19.79 0 0 1 1 2.83
                         A2 2 0 0 1 3 .82h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7
                         2.81a2 2 0 0 1-.45 2.11L7.09 8.91a16 16 0 0 0 6 6l1.27-1.27
                         a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/>
              </svg>
              99445 60006
            </a>
            <a href="tel:9843143444" class="mm-cta-secondary">98431 43444</a>
          </div>
          <div class="mm-badge">
            <span>⬡</span> PM Surya Ghar Certified EPC Partner
          </div>
        </div>
      </div>

   4. RIGHT BEFORE </body> on every page add:

      <script>
      (function(){
        var ham = document.getElementById('hamburger');
        var menu= document.getElementById('mobileMenu');
        var close= document.getElementById('mmClose');
        var back = document.getElementById('mmBackdrop');
        if(!ham||!menu) return;

        function openMenu(){
          menu.classList.add('is-open');
          document.body.classList.add('menu-open');
          ham.classList.add('is-open');
          ham.setAttribute('aria-expanded','true');
          // mark active link
          var path = window.location.pathname;
          menu.querySelectorAll('.mm-link').forEach(function(a){
            a.classList.toggle('active', a.getAttribute('href')===path);
          });
        }
        function closeMenu(){
          menu.classList.remove('is-open');
          document.body.classList.remove('menu-open');
          ham.classList.remove('is-open');
          ham.setAttribute('aria-expanded','false');
        }

        ham.addEventListener('click', openMenu);
        if(close) close.addEventListener('click', closeMenu);
        if(back)  back.addEventListener('click', closeMenu);
        menu.querySelectorAll('.mm-link').forEach(function(a){
          a.addEventListener('click', closeMenu);
        });
        document.addEventListener('keydown',function(e){
          if(e.key==='Escape') closeMenu();
        });
      })();
      </script>

   ================================================================ */


/* ================================================================
   DESIGN TOKENS (mirror your existing root vars — no conflict)
   ================================================================ */
:root {
  --mm-bg:        #ffffff;
  --mm-fg:        oklch(0.18 0.08 265);
  --mm-primary:   oklch(0.24 0.16 265);
  --mm-eco:       oklch(0.82 0.2 145);
  --mm-cyan:      oklch(0.82 0.18 220);
  --mm-gold:      oklch(0.83 0.15 80);
  --mm-border:    oklch(0.92 0.015 240);
  --mm-muted:     oklch(0.45 0.04 260);
  --mm-grad:      linear-gradient(135deg,
                    oklch(0.24 0.16 265) 0%,
                    oklch(0.45 0.18 245) 55%,
                    oklch(0.82 0.18 220) 100%);
}

p{
  text-align: justify !important;
}
/* ================================================================
   GLOBAL RESETS
   ================================================================ */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; border-color: var(--border); }
img   { max-width: 100%; height: auto; }
body  { overflow-x: hidden; }
body.menu-open { overflow: hidden; }

html,
body {
  overflow-x: hidden;
  width: 100%;
}

    .ce-links li{margin-left: 10px;}

/* ================================================================
   ██   HAMBURGER BUTTON
   ================================================================ */
.hamburger {
  display: none;
  position: relative;
  width: 42px;
  height: 42px;
  background: transparent;
  border: 1.5px solid var(--mm-border);
  border-radius: 10px;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0;
  flex-shrink: 0;
  /* z-index: 300; */
  transition:
    background   0.25s ease,
    border-color 0.25s ease,
    box-shadow   0.25s ease;
  overflow: hidden;
}

/* Gradient shimmer on hover */
/* .hamburger::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--mm-grad);
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: inherit;
} */



/* .hamburger::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--mm-grad);
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: inherit;
} */
/* .hamburger:hover::before,
.hamburger.is-open::before { opacity: 1; } */

.hamburger span {
  display: block;
  position: relative;
  z-index: 1;
  width: 20px;
  height: 2px;
  background: var(--mm-primary);
  border-radius: 2px;
  transform-origin: center;
  transition:
    transform   0.4s cubic-bezier(0.22, 1, 0.36, 1),
    opacity     0.3s ease,
    background  0.3s ease,
    width       0.3s ease;
}
.hamburger:hover span,
.hamburger.is-open span { background: #fff; }

/* Morph to ✕ */
.hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.is-open span:nth-child(2) { opacity: 0; width: 0; }
.hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Show on tablet + mobile */
@media (max-width: 1023px) { .hamburger { display: flex; } }

.ESS{
  width:60%;
  height:100%;
}


/* ================================================================
   ██   MOBILE MENU  (full overlay + slide panel)
   ================================================================ */

/* ── Container ── */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  visibility: hidden;
  transition: visibility 0s linear 0.45s;
}
.mobile-menu.is-open {
  pointer-events: auto;
  visibility: visible;
  transition: visibility 0s linear 0s;
}

/* ── Blurred Backdrop ── */
.mm-backdrop {
  position: absolute;
  inset: 0;
  /* background: oklch(0.12 0.06 265 / 0.65); */
  /* backdrop-filter: blur(6px); */
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.mobile-menu.is-open .mm-backdrop { opacity: 1; }

/* ── Slide Panel ── */
.mm-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: min(340px, 88vw);
  height: 100dvh;
  background: var(--mm-bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateX(100%);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: -12px 0 60px oklch(0.24 0.16 265 / 0.2);
 
  overflow-y: hidden !important;
 
  
}
body.menu-open {
    overflow: hidden;
    height: 100vh;
}
.mobile-menu.is-open .mm-panel { transform: translateX(0); }

/* Decorative gradient bar at top */
.mm-panel::before {
  content: '';
  display: block;
  height: 4px;
  width: 100%;
  flex-shrink: 0;
  background: var(--mm-grad);
}

/* ── Header row ── */
.mm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem 0.875rem;
  border-bottom: 1px solid var(--mm-border);
  flex-shrink: 0;
  position: relative;
}
.mm-logo {
  height: 7rem;
  width: auto;
  object-fit: contain;
}
.mm-close {
  position: absolute;
  right: 30px;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  border: 1.5px solid var(--mm-border);
  /* background: transparent; */
   background: var(--mm-grad);
  cursor: pointer;
  display: grid;
  place-items: center;
  color: white;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
}

/* .hamburger::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--mm-grad);
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: inherit;
} */


.mm-close:hover {
  background: oklch(0.95 0.02 265);
  border-color: var(--mm-primary);
  color: var(--mm-primary);
  transform: rotate(90deg);
}

/* ── Nav links ── */
.mm-nav {
  display: flex;
  flex-direction: column;
  padding: 0.875rem 0.875rem 0;
  gap: 2px;
  flex: 1;
  overflow-y: auto;
}
.mm-link {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.875rem 1rem;
  border-radius: 12px;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--mm-fg);
  text-decoration: none;
  letter-spacing: -0.01em;
  position: relative;
  overflow: hidden;
  transition:
    background  0.2s ease,
    color       0.2s ease,
    transform   0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Hover fill */
.mm-link::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--mm-grad);
  opacity: 0;
  border-radius: inherit;
  transition: opacity 0.25s ease;
}
/* .mm-link > * { position: relative; z-index: 1; } */
.mm-link > * { position: relative; z-index: 1; }
.mm-link { isolation: isolate; }
.mm-link::before { z-index: 0; }
 

.mm-link:hover,
.mm-link.active {
  color: #fff ;
  transform: translateX(4px);
}
.mm-link:hover::before,
.mm-link.active::before { opacity: 1; }

/* Icon bubble */
.mm-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: oklch(0.95 0.02 240);
  font-size: 1rem;
  flex-shrink: 0;
  transition: background 0.2s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.mm-link:hover .mm-icon,
.mm-link.active .mm-icon {
  background: oklch(1 0 0 / 0.2);
  transform: scale(1.1) rotate(-5deg);
}
 

/* Stagger animation for links when menu opens */
.mobile-menu.is-open .mm-link {
  animation: mmLinkIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.mobile-menu.is-open .mm-link:nth-child(1) { animation-delay: 0.08s; }
.mobile-menu.is-open .mm-link:nth-child(2) { animation-delay: 0.13s; }
.mobile-menu.is-open .mm-link:nth-child(3) { animation-delay: 0.18s; }
.mobile-menu.is-open .mm-link:nth-child(4) { animation-delay: 0.23s; }
.mobile-menu.is-open .mm-link:nth-child(5) { animation-delay: 0.28s; }
.mobile-menu.is-open .mm-link:nth-child(6) { animation-delay: 0.33s; }
.mobile-menu.is-open .mm-link:nth-child(7) { animation-delay: 0.38s; }
.mobile-menu-close {
    width: 40px;
    height: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;
    margin: 0;

    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;

    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}
@keyframes mmLinkIn {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Footer / CTA ── */
.mm-footer {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: 1rem 0.875rem 0.75rem;
  border-top: 1px solid var(--mm-border);
  flex-shrink: 0;
}
.mm-cta-call {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  padding: 0.875rem 1.25rem;
  background: var(--mm-grad);
  color: #fff;
  border-radius: 14px;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.01em;
  box-shadow: 0 8px 28px oklch(0.24 0.16 265 / 0.28);
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s;
  animation: mmCtaIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.45s both;
}
.mm-cta-call:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px oklch(0.82 0.18 220 / 0.4);
}
.mm-cta-secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem;
  background: oklch(0.96 0.01 240);
  color: var(--mm-muted);
  border-radius: 10px;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--mm-border);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  animation: mmCtaIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.5s both;
}
.mm-cta-secondary:hover {
  background: oklch(0.92 0.02 265);
  color: var(--mm-primary);
  border-color: var(--mm-primary);
}

@keyframes mmCtaIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Bottom badge ── */
.mm-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.625rem 0.875rem 0.875rem;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--mm-eco);
  flex-shrink: 0;
  animation: mmCtaIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.55s both;
}
.mm-badge span { font-size: 1rem; }

/* Only render on mobile/tablet */
@media (min-width: 1024px) {
  .mobile-menu { display: none !important; }
  .hamburger   { display: none !important; }
}

@media (max-width: 992px){
  .site-nav{
    max-width: 100%;
    position: relative;
  }
  .nav-brand img{
     position: absolute;
     top: 10;
     left: 0;
  }
  .hamburger{
     position: absolute;
     top: 10;
     right:30px;
  }
}


/* ================================================================
   ██   HIDE DESKTOP NAV ON MOBILE/TABLET
   ================================================================ */
@media (max-width: 1023px) {
  nav.desktop-nav,
  ul.nav-links,
  .nav-links     { display: none !important; }
  .nav-cta       { display: none !important; }
}


/* ================================================================
   ██   SITE NAV — mobile layout
   ================================================================ */
@media (max-width: 1023px) {
  .site-nav .inner,
  header.site-nav .nav-inner {
    height: 4.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: 1.25rem;
  }
  .nav-brand img {
    height: 5.5rem;
    width: 9.5rem;
    object-fit: contain;
  }
}
@media (max-width: 480px) {
  /* .site-nav .inner,
  header.site-nav .nav-inner {
    height: 4rem;
    padding-inline: 1rem;
  } */
  .nav-brand img { height: 2.75rem; width: 3rem; }
}


/* ================================================================
   ██   PAGE HEADERS — all inner pages
   ================================================================ */
@media (max-width: 1023px) {
  .page-header .inner,
  .page-header-inner {
    padding-block: 3.5rem 3rem;
    padding-inline: 1.5rem;
  }
  .page-header h1 {
    font-size: clamp(1.875rem, 5.5vw, 3rem);
    max-width: 100%;
    line-height: 1.1;
  }
  .page-header p {
    font-size: 1rem;
    max-width: 100%;
    margin-top: 1rem;
  }
  .page-header-badge {
    font-size: 0.7rem;
    padding: 0.3rem 0.875rem;
  }
 
}
@media (max-width: 640px) {
  .page-header .inner,
  .page-header-inner {
    padding-block: 2.5rem 2rem;
    padding-inline: 1.25rem;
  }
  .page-header h1 { font-size: clamp(1.625rem, 6.5vw, 2.25rem); }
  .page-header p  { font-size: 0.9375rem; }
}
@media (max-width: 380px) {
  .page-header h1 { font-size: clamp(1.375rem, 7vw, 1.875rem); }
}


/* ================================================================
   ██   SECTION DIVIDERS
   ================================================================ */
@media (max-width: 768px) {
  .section-divider { padding: 0.5rem 1.25rem; }
  .divider-icon    { width: 2rem; height: 2rem; }
  .divider-icon svg,
  .divider-icon i  { width: 1rem; height: 1rem; font-size: 1rem; }
}


/* ================================================================
   ██   SHARED BUTTONS
   ================================================================ */
@media (max-width: 480px) {
  .btn-primary, .btn-outline {
    padding: 0.75rem 1.125rem;
    font-size: 0.875rem;
  }
}


/* ================================================================
   ██   FOOTER
   ================================================================ */
@media (max-width: 1023px) {
  .ce-footer-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
}
@media (max-width: 640px) {
  .ce-footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
}
@media (max-width: 480px) {
  .ce-footer        { padding: 2.5rem 1.25rem 1.5rem; }
  .ce-footer-grid   { grid-template-columns: 1fr; gap: 2rem; }
  .ce-bottom        {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
}


/* ================================================================
   ██   BACK TO TOP
   ================================================================ */
@media (max-width: 640px) {
  .back-to-top { bottom: 1.25rem; right: 1.23rem !important; width: 2.75rem; height: 2.75rem; }
}


/* ================================================================
   PAGE: INDEX (homepage)
   ================================================================ */

/* Hero — stack at tablet */
@media (max-width: 1023px) {
  .hero .inner {
    grid-template-columns: 1fr;
    padding-top: 3rem;
    padding-bottom: 4rem;
    gap: 2.5rem;
  }
  .hero h1 { font-size: clamp(2rem, 5.5vw, 3rem); }
  .hero p  { font-size: 1rem; margin-top: 1rem; }

  .hero-img-wrap { max-width: 520px; margin-inline: auto; width: 100%; }
  .float-badge {
    padding: 0.525rem 0.005rem;
    gap: 0.5rem;
    border-radius: 0.875rem;
  }

}

@media (max-width: 768px) {
  .hero .inner    { padding-top: 2rem; padding-bottom: 3rem; gap: 2rem; }
  .hero h1        { font-size: clamp(1.875rem, 6vw, 2.5rem); }
  .hero-ctas      { gap: 0.625rem; margin-top: 1.5rem; }
  .hero-stats     { max-width: 100%; gap: 0.625rem; margin-top: 1.75rem; }
  .stat-card .val { font-size: 1.25rem; }
  .stat-card .lbl { font-size: 0.6rem; }

  /* Float badges — tuck inside image on small screens */
  .float-badge-bottom { bottom: 0.5rem; left: 0.625rem; }
  .float-badge-top    { top: 0.5rem;   right: 0.625rem; }
  
  .float-badge .icon-wrap { width: 2.25rem; height: 2.25rem; }
  .float-badge .val { font-size: 0.875rem; }
  .float-badge .sub { font-size: 0.65rem; }
}

@media (max-width: 640px) {
  .hero h1 { font-size: clamp(1.75rem, 6.5vw, 2.25rem); }
  .hero-ctas { flex-direction: column; }
  .hero-ctas .btn-primary,
  .hero-ctas .btn-outline { width: 100%; justify-content: center; }
}

@media (max-width: 480px) {
  .hero .inner    { padding-top: 1.5rem; padding-bottom: 2rem; }
  .stat-card      { padding: 0.625rem 0.75rem; }
  .stat-card .val { font-size: 1.1rem; }
  .stat-card .lbl { font-size: 0.55rem; letter-spacing: 0.08em; }

  .float-badge-bottom { bottom: 0.25rem; left: 0.25rem; }
  .float-badge-top    { top: 0.25rem; right: 0.25rem; }
  .float-badge { padding: 0.25rem 0.5rem; gap: 0.375rem; border-radius: 0.75rem; }
  .float-badge .icon-wrap { width: 2rem; height: 2rem; }
  .float-badge .val  { font-size: 0.8rem; font-weight: 700; }
  .float-badge .sub  { font-size: 0.6rem; }
    .about-card img{
    width:70% !important;
  }
  .about {
    padding-block: 1rem !important;
  }
}

/* Highlights section */
@media (max-width: 1023px) {
  .highlights { padding-block: 3rem; }
  .highlights-header { margin-bottom: 2rem; gap: 1rem; }
  .highlights-header h2 { font-size: clamp(1.5rem, 4vw, 2rem); }
}
@media (max-width: 767px) {
  .cards-grid { grid-template-columns: 1fr 1fr; gap: 1rem; }
}
@media (max-width: 480px) {
  .cards-grid { grid-template-columns: 1fr; gap: 0.875rem; }
  .nav-card   { padding: 1.375rem; }
}

/* About teaser */
@media (max-width: 1023px) {
  .about .inner  { grid-template-columns: 1fr; gap: 2rem; padding: 0 1rem !important; }
  .about-card-wrap { max-width: 480px; margin-inline: auto; width: 100%; }
}
@media (max-width: 640px) {
  .about-card    { padding: 2rem; }
  .about-card .big-num { font-size: 3rem; }
  .about-card svg { width: 5.5rem; height: 5.5rem; }
  .guarantee-strip { padding: 0.875rem 1.125rem; }
  .guarantee-strip .g-val { font-size: 1.25rem; }
  .about{
    padding-block: 5rem 0;
  }
}
@media (max-width: 480px) {
  .about-card    { padding: 1.5rem; }
  .about-card .big-num { font-size: 2.5rem; }
  .about-text h2 { font-size: clamp(1.5rem, 5.5vw, 2rem); }
  .about-text p  { font-size: 0.9375rem; }
  .about-text .btn-primary { width: 100%; justify-content: center; }
}


/* ================================================================
   PAGE: ABOUT
   ================================================================ */
/* ==========================================================
   RESPONSIVE FIXES
========================================================== */

/* Large Tablets */
@media (max-width: 1024px) {

  section {
    padding: 4rem 1.5rem;
  }

  .page-header-inner {
    padding: 4rem 1.5rem 3rem;
  }

  .leadership-grid {
    grid-template-columns: 1fr;
  }

  .founder-cards {
    grid-template-columns: 1fr;
  }

  .why-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .mission-grid {
    grid-template-columns: 1fr;
  }

  .ce-footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
  }
}


/* Tablets */
@media (max-width: 768px) {

  section {
    padding: 3.5rem 1.25rem;
  }

  .section-divider {
    padding: 1rem;
  }

  .page-header-inner {
    padding: 3.5rem 1.25rem;
  }

  .page-header h1 {
    font-size: 2.2rem;
    line-height: 1.15;
  }

  .page-header p {
    font-size: 1rem;
  }

  .intro-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .why-grid {
    grid-template-columns: 1fr;
  }

  .why-card[style] {
    grid-column: auto !important;
  }

  .referral-list {
    grid-template-columns: 1fr;
  }

  .mission-card,
  .referral-card {
    padding: 2rem;
  }

  .section-title {
    font-size: 2rem;
  }

  .nav-brand img {
    width: 10rem;
    height: auto;
  }

  .back-to-top {
    right: 1rem;
    bottom: 1rem;
  }
}


/* Mobile */
@media (max-width: 576px) {
.bills-grid{
  margin-top: -100px !important;
}
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .funding-section{
    padding: 10px !important;
  }

  .capacity-section{
    margin-top: -30px;
  }
  .bills-section{
    margin-top: 80px;
  }
  .section-pad{
    margin-top: 40px;
  }

  section {
    padding: 3rem 1rem;
  }

  .page-header-inner {
    padding: 3rem 1rem;
  }

  .page-header h1 {
    font-size: 1.9rem;
  }

  .page-header p {
    font-size: 0.95rem;
    line-height: 1.7;
  }

  .section-title {
    font-size: 1.75rem;
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }

  .stat-card {
    padding: 1.25rem;
  }

  .stat-num {
    font-size: 1.8rem;
  }

  .founder-card {
    padding: 1.5rem;
  }

  .founder-name {
    font-size: 1.1rem;
  }

  .mission-card,
  .referral-card {
    padding: 1.5rem;
  }

  .mission-card h3,
  .referral-card h3 {
    font-size: 1.4rem;
  }

  .referral-list li {
    font-size: 0.85rem;
  }

  .cta-btn,
  .ce-quote-btn {
    width: 100%;
    justify-content: center;
  }

  .ce-footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .footer-logo {
    max-width: 180px;
  }

  .ce-bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .orb-1 {
    width: 280px;
    height: 280px;
    top: -80px;
    right: -80px;
  }

  .orb-2 {
    width: 220px;
    height: 220px;
    left: -60px;
    bottom: -80px;
  }
}


/* Small Mobile */
@media (max-width: 380px) {

  .page-header h1 {
    font-size: 1.65rem;
  }

  .section-title {
    font-size: 1.5rem;
  }

  .stat-num {
    font-size: 1.6rem;
  }

  .founder-card {
    padding: 1.25rem;
  }

  .mission-card,
  .referral-card {
    padding: 1.25rem;
  }

  .nav-brand img {
    width: 8rem;
  }
}
/* ================================================================
   PAGE: CAPACITY
   ================================================================ */

/* =====================================================
   RESPONSIVE DESIGN
===================================================== */

/* ---------- Large Tablet ---------- */
@media (max-width: 1200px) {

  .container{
    max-width:100%;
    padding-inline:1.5rem;
  }

  .ce-footer-grid{
    gap:3rem;
  }

}




/* ---------- Tablet ---------- */
@media (max-width: 1024px){

  /* NAVBAR */
  .site-nav .inner{
    height:4.5rem;
  }

  .nav-brand img{
    width:10rem;
    height:auto;
  }

  .nav-links{
    gap:1.2rem;
    font-size:.82rem;
  }

  /* HEADER */

  .page-header .inner{
    padding-block:4rem;
  }

  .page-header h1{
    font-size:3rem;
    max-width:100%;
  }

  .page-header p{
    font-size:1rem;
    max-width:36rem;
  }

  .page-header-orb-1{
    width:350px;
    height:350px;
  }

  .page-header-orb-2{
    width:220px;
    height:220px;
  }

  /* CAPACITY */

  .capacity-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .capacity-card{
    padding:1.5rem;
  }

  /* WHY */

  .why-grid{
    grid-template-columns:repeat(2,1fr);
  }

  /* FOOTER */

  .ce-footer-grid{
    grid-template-columns:repeat(2,1fr);
    gap:2.5rem;
  }

}


/* ---------- Small Tablet ---------- */
@media (max-width: 768px){

  .container{
    padding-inline:1rem;
  }

  /* HEADER */

  .page-header .inner{
    padding-block:3rem;
  }

  .page-header h1{
    font-size:2.5rem;
    line-height:1.1;
  }

  .page-header p{
    font-size:.95rem;
  }

  .page-header-badge{
    font-size:.7rem;
  }

  /* CAPACITY */

  .capacity-grid{
    grid-template-columns:1fr;
  }

  .capacity-card{
    padding:1.5rem;
  }

  .cap-rec-val{
    font-size:1.6rem;
  }

  /* WHY */

  .why-grid{
    grid-template-columns:1fr;
  }

  .why-card{
    padding:1.25rem;
  }

  /* SECTIONS */

  .capacity-section{
    padding-block:3rem;
  }

  .why-section{
    padding-bottom:3rem;
  }

  .section-intro{
    margin-bottom:2rem;
  }

  .section-intro h2{
    font-size:1.6rem;
  }

  /* FOOTER */

  .ce-footer-grid{
    grid-template-columns:1fr;
    gap:2rem;
  }

  .footer-logo{
    width:180px;
    margin-left:0;
  }

  .section-pad {
  padding-block: 0 !important;
  }

  .page-header{
    padding-block: 0 !important;
  }
  .ce-tagline{
    max-width:100% !important;
  }

}


/* ---------- Mobile ---------- */
@media (max-width: 576px){

  /* NAVBAR */

  .site-nav .inner{
    height:4rem;
  }

  .nav-brand img{
    width:8rem;
  }

  .nav-cta{
    padding:.55rem .9rem;
    font-size:.75rem;
  }

  /* HEADER */

  .page-header{
    text-align:center;
  }

  .page-header .inner{
    padding-block:2.5rem;
  }

  .page-header h1{
    font-size:2rem;
  }

  .page-header p{
    font-size:.9rem;
    margin-inline:auto;
  }

  .page-header-badge{
    margin-inline:auto;
  }

  /* ORBS */

  .page-header-orb-1{
    width:240px;
    height:240px;
    top:-100px;
  }

  .page-header-orb-2{
    width:180px;
    height:180px;
  }

  /* CAPACITY */

  .capacity-card{
    padding:1.25rem;
    border-radius:20px;
  }

  .cap-icon-box{
    width:2.8rem;
    height:2.8rem;
  }

  .cap-rec-val{
    font-size:1.5rem;
  }

  /* WHY */

  .why-card{
    flex-direction:column;
    gap:.75rem;
  }

  /* BUTTONS */

  .btn-primary{
    width:100%;
    justify-content:center;
  }

  /* DIVIDER */

  .divider-icon{
    width:2rem;
    height:2rem;
  }

  .divider-icon svg{
    width:1rem;
    height:1rem;
  }

  /* BACK TO TOP */

  .back-to-top{
    width:2.75rem;
    height:2.75rem;
    bottom:1rem;
    right:1rem;
  }

}


/* ---------- Small Mobile ---------- */
@media (max-width: 400px){

  .page-header h1{
    font-size:1.75rem;
  }

  .section-intro h2{
    font-size:1.35rem;
  }

  .cap-rec-val{
    font-size:1.35rem;
  }

  .ce-footer{
    padding:2rem 1rem 1.25rem;
  }

  .ce-social-row{
    gap:.4rem;
  }

  .ce-social-btn{
    width:32px;
    height:32px;
  }

}

/* ================================================================
   PAGE: CONTACT
   ================================================================ */
/* ==========================================
   TABLET (991px and below)
========================================== */
@media (max-width: 991px) {

  .container {
    padding-inline: 20px;
  }

  /* Navigation */
  .site-nav .inner {
    height: 80px;
  }

  .nav-brand img {
    width: 180px;
    height: auto;
  }

  .nav-links {
    display: none;
  }

  .nav-cta {
    display: inline-flex;
    padding: 10px 16px;
    font-size: 14px;
  }

  /* Header */
  .page-header .inner {
    padding-block: 70px;
  }

  .page-header h1 {
    font-size: 42px;
  }

  .page-header p {
    font-size: 17px;
  }

  /* Contact */
  .contact-card {
    padding: 40px 30px;
    border-radius: 30px;
  }

  .contact-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .info-col h2 {
    font-size: 32px;
  }

  .contact-form {
    padding: 30px;
  }

  /* Footer */
  .ce-footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
  }
}


/* ==========================================
   MOBILE (767px and below)
========================================== */
@media (max-width: 767px) {

  .container {
    padding-inline: 16px;
  }

  /* Navigation */
  .site-nav .inner {
    height: 70px;
  }

  .nav-brand img {
    width: 150px;
    height: auto;
  }

  .nav-cta {
    font-size: 13px;
    padding: 8px 14px;
  }

  /* Header */
  .page-header .inner {
    padding-block: 50px;
  }

  .page-header-badge {
    font-size: 11px;
  }

  .page-header h1 {
    font-size: 34px;
    line-height: 1.15;
  }

  .page-header p {
    font-size: 15px;
    margin-top: 14px;
  }

  /* Contact */
  .contact-section {
    padding-block: 50px;
  }

  .contact-card {
    padding: 24px;
    border-radius: 24px;
  }

  .info-col h2 {
    font-size: 28px;
  }

  .info-col .tagline {
    font-size: 16px;
  }

  .contact-item-value,
  .contact-item-value-sm {
    font-size: 15px;
    line-height: 1.6;
  }

  .contact-icon {
    width: 50px;
    height: 50px;
    min-width: 50px;
  }

  .contact-form {
    padding: 24px;
  }

  .contact-form h3 {
    font-size: 24px;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .form-input {
    font-size: 15px;
  }

  .form-submit {
    font-size: 15px;
  }

  /* Decorative blobs */
  .blob-gold,
  .blob-eco {
    width: 220px;
    height: 220px;
  }

  /* Footer */
  .ce-footer {
    padding: 0px 20px 20px;
  }

  .ce-footer-grid {
    grid-template-columns: 1fr;
    gap: 35px;
  }

  .footer-logo {
    max-width: 220px;
    margin-left: 0;
  }

  .ce-tagline {
    max-width: 100%;
    text-align: justify;
  }

  .ce-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}


/* ==========================================
   SMALL MOBILE (480px and below)
========================================== */
@media (max-width: 480px) {

  .page-header h1 {
    font-size: 28px;
  }

  .page-header p {
    font-size: 14px;
  }

  .contact-card {
    padding: 20px;
    border-radius: 20px;
  }

  .info-col h2 {
    font-size: 24px;
  }

  .contact-form {
    padding: 20px;
  }

  .contact-form h3 {
    font-size: 20px;
  }

  .contact-item {
    gap: 12px;
  }

  .contact-icon {
    width: 46px;
    height: 46px;
    min-width: 46px;
  }

  .contact-item-value,
  .contact-item-value-sm {
    font-size: 14px;
    word-break: break-word;
  }

  .form-input {
    padding: 12px 14px;
  }

  .form-submit {
    padding: 14px;
  }

  .back-to-top {
    width: 44px;
    height: 44px;
    right: 15px;
    bottom: 15px;
  }

  .section-divider {
    gap: 10px;
  }

  .divider-icon {
    width: 36px;
    height: 36px;
  }
}
/* ================================================================
   PAGE: PARTNERS
   ================================================================ */
/* ==========================================
   PARTNERS PAGE RESPONSIVE
========================================== */

/* Tablet */
@media (max-width: 991px) {

  .partners-section {
    padding-block: 60px;
  }

  .section-intro {
    margin-bottom: 35px;
  }

  .section-intro h2 {
    font-size: 32px;
    line-height: 1.2;
  }

  .partners-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .partner-card {
    padding: 30px 20px;
  }

  .partner-card img {
    height: 90px;
  }

  .cta-section {
    padding-bottom: 60px;
  }
}


/* Mobile */
@media (max-width: 767px) {

  .partners-section {
    padding-block: 50px;
  }

  .section-intro {
    text-align: center;
    margin-bottom: 30px;
  }

  .section-intro .kicker {
    font-size: 11px;
    letter-spacing: 2px;
  }

  .section-intro h2 {
    font-size: 26px;
    line-height: 1.3;
  }

  .partners-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .partner-card {
    min-height: 140px;
    padding: 25px;
    border-radius: 20px;
  }

  .partner-card img {
    height: 70px;
    max-width: 180px;
  }

  .cta-inner {
    padding-inline: 10px;
  }

  .btn-primary {
    width: 100%;
    justify-content: center;
    padding: 14px 20px;
    font-size: 15px;
  }
}


/* Small Mobile */
@media (max-width: 480px) {

  .section-intro h2 {
    font-size: 22px;
  }

  .partners-grid {
    gap: 14px;
  }

  .partner-card {
    min-height: 120px;
    padding: 20px;
  }

  .partner-card img {
    height: 60px;
    max-width: 150px;
  }

  .btn-primary {
    font-size: 14px;
    padding: 13px 18px;
  }
}

/* ================================================================
   PAGE: PM SURYA GHAR
   ================================================================ */

@media (max-width: 1023px) {
  .subsidy-section { padding-block: 3rem; }
  .subsidy-grid    { gap: 1.125rem; }
}
@media (max-width: 767px) {
  .subsidy-grid { grid-template-columns: 1fr; }
}
@media (min-width: 560px) and (max-width: 767px) {
  .subsidy-grid { grid-template-columns: 1fr 1fr; }
  .subsidy-card.highlight { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .subsidy-section { padding-block: 2.25rem; }
  .subsidy-card    { padding: 1.625rem; border-radius: 1.375rem; }
  .subsidy-card .amount { font-size: 2.375rem; }
  .subsidy-card .kw-label { margin-top: 1.25rem; font-size: 0.8125rem; }
  .subsidy-card .note     { font-size: 0.8125rem; }
}
@media (max-width: 480px) {
  .subsidy-card .amount { font-size: 2rem; }
}

/* CTA band */
@media (max-width: 1023px) {
  .cta-band { grid-template-columns: 1fr; gap: 1.75rem; }
  .cta-buttons { justify-content: flex-start; flex-wrap: wrap; }
  .cta-band-section { padding-bottom: 2rem; }
}
@media (max-width: 640px) {
  .cta-band { padding: 2rem; border-radius: 1.375rem; }
  .cta-band h2 { font-size: clamp(1.375rem, 5vw, 1.75rem); }
  .cta-band p  { font-size: 0.9375rem; margin-top: 0.75rem; }
}
@media (max-width: 480px) {
  .cta-band       { padding: 1.5rem; border-radius: 1.125rem; }
  .cta-band-section { padding-bottom: 2.5rem; }
  .cta-buttons    { flex-direction: column; }
  .cta-buttons .btn-primary,
  .cta-buttons .btn-outline { width: 100%; justify-content: center; }
}


/* ================================================================
   PAGE: SAVINGS
   ================================================================ */

/* =========================================================
   RESPONSIVE SYSTEM (Mobile First Enhancements)
   ========================================================= */

/* =========================
   1. GLOBAL TYPOGRAPHY SCALE
   ========================= */
@media (max-width: 1024px) {
  h1 {
    font-size: clamp(2rem, 4vw, 3rem) !important;
  }

  h2 {
    font-size: clamp(1.5rem, 3vw, 2.2rem);
  }

  p {
    font-size: 1rem;
  }
}

@media (max-width: 768px) {
  body {
    line-height: 1.5;
  }

  h1 {
    font-size: 1.9rem !important;
  }

  h2 {
    font-size: 1.4rem;
  }

  p {
    font-size: 0.95rem;
  }
}

@media (max-width: 480px) {
  h1 {
    font-size: 1.6rem !important;
  }

  h2 {
    font-size: 1.25rem;
  }

  p {
    font-size: 0.9rem;
  }
}

/* =========================
   2. CONTAINER SYSTEM
   ========================= */
@media (max-width: 1024px) {
  .container {
    padding-inline: 1.5rem;
  }
}

@media (max-width: 768px) {
  .container {
    padding-inline: 1.25rem;
  }
}

@media (max-width: 480px) {
  .container {
    padding-inline: 1rem;
  }
}

/* =========================
   3. NAVIGATION (MOBILE FIX)
   ========================= */
@media (max-width: 1024px) {
  .nav-links {
    gap: 1.2rem;
    font-size: 0.8rem;
  }

  .nav-brand img {
    width: 10rem;
    height: auto;
  }
}

/* Mobile menu transformation */
@media (max-width: 768px) {
  .site-nav .inner {
    height: 4.5rem;
  }

  .nav-links {
    display: none !important; /* You can replace with hamburger menu */
  }

  .nav-cta {
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
  }
}

/* =========================
   4. PAGE HEADER
   ========================= */
@media (max-width: 768px) {
  .page-header .inner {
    padding-block: 3rem;
    text-align: center;
  }

  .page-header h1 {
    font-size: 1.9rem !important;
    max-width: 100%;
  }

  .page-header p {
    font-size: 0.95rem;
    max-width: 100%;
  }

  .header-orb-1,
  .header-orb-2 {
    opacity: 0.5;
    transform: scale(0.8);
  }
}

/* =========================
   5. BILL COMPARISON GRID
   ========================= */
@media (max-width: 768px) {
  .bills-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .bill-card {
    padding: 1.5rem;
  }

  .bill-card .compare-row {
    gap: 1rem;
  }

  .before-val {
    font-size: 1.1rem !important;
  }

  .after-val {
    font-size: 1.4rem !important;
  }
}

@media (max-width: 480px) {
  .bill-card {
    padding: 1.25rem;
  }

  .bill-card .compare-row {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
}

/* =========================
   6. FUNDING SECTION
   ========================= */
@media (max-width: 1024px) {
  .funding-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .funding-heading h3 {
    font-size: 1.6rem;
  }
}

@media (max-width: 768px) {
  .funding-card {
    padding: 1.25rem;
  }

  .funding-card .pct {
    font-size: 1.8rem;
  }

  .funding-cards {
    grid-template-columns: 1fr;
  }
}

/* =========================
   7. CTA BUTTONS
   ========================= */
@media (max-width: 768px) {
  .cta-row {
    flex-direction: column;
    align-items: stretch;
  }

  .btn-primary,
  .btn-outline {
    width: 100%;
    justify-content: center;
  }
}

/* =========================
   8. FOOTER RESPONSIVE FIX
   ========================= */
@media (max-width: 1024px) {
  .ce-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
  }
}

@media (max-width: 768px) {
  .ce-footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .ce-footer {
    text-align: left;
  }

  .ce-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* =========================
   9. TOUCH OPTIMIZATION
   ========================= */
@media (max-width: 768px) {
  a, button {
    min-height: 44px;
  }

  .nav-links a {
    padding: 0.5rem 0;
  }

  .ce-social-btn {
    width: 40px;
    height: 40px;
  }
}

/* =========================
   10. PERFORMANCE TWEAKS
   ========================= */
@media (max-width: 768px) {
  .header-orb,
  .animate-glow,
  .animate-pulse {
    animation: none !important;
  }

  .scroll-progress {
    height: 2px;
  }
}

/* ================================================================
   PAGE: SERVICES
   ================================================================ */

/* Expertise strip */
@media (max-width: 1023px) {
  .section-pad,
  .section-pad-lg { padding-block: 3rem; }
  .expertise-grid { grid-template-columns: 1fr 1fr; gap: 0.875rem; }
}
@media (max-width: 640px) {
  .expertise-grid  { grid-template-columns: 1fr; gap: 0.75rem; }
  .expertise-item  { padding: 1rem; }
  .expertise-item span { font-size: 0.875rem; }
}

/* EPC cards */
@media (max-width: 1023px) {
  .epc-grid { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
}
@media (max-width: 767px) {
  .epc-grid { grid-template-columns: 1fr; gap: 1.125rem; }
}
@media (max-width: 480px) {
  .epc-card { padding: 1.625rem; border-radius: 1.375rem; }
  .epc-card h3 { font-size: 1.125rem; }
  .epc-card p  { font-size: 0.875rem; }
}

/* Storage + Agri */
@media (max-width: 1023px) {
  .storage-grid { grid-template-columns: 1fr; gap: 1.5rem; }
}
@media (max-width: 640px) {
  .agri-card { padding: 2rem; border-radius: 1.5rem; }
  .agri-card h3 { font-size: clamp(1.375rem, 5vw, 1.75rem); }
  .agri-card p  { font-size: 1rem; }
  .bess-card .body { padding: 1.5rem; }
  .bess-card h3    { font-size: 1.25rem; }
}
@media (max-width: 480px) {
  .agri-card { padding: 1.625rem; border-radius: 1.25rem; }
  .bess-card .body { padding: 1.25rem; }
  .bess-card h3 { font-size: 1.125rem; }
}

/* Utility scale */
@media (max-width: 1023px) {
  .utility-grid { grid-template-columns: 1fr; gap: 2rem; }
}
@media (max-width: 767px) {
  .utility-features { grid-template-columns: 1fr 1fr; gap: 0.875rem; }
  .utility-feat span { font-size: 0.8125rem; }
}
@media (max-width: 480px) {
  .utility-features { grid-template-columns: 1fr; }
  .utility-feat     { padding: 0.875rem 1rem; }
}

/* B2B band */
@media (max-width: 1023px) {
  .b2b-band { flex-direction: column; gap: 1.5rem; padding: 2rem; }
}
@media (max-width: 640px) {
  .b2b-band { padding: 1.625rem; border-radius: 1.25rem; }
  .b2b-band p { font-size: 0.9375rem; }
}
@media (max-width: 480px) {
  .b2b-band { padding: 1.375rem; border-radius: 1.125rem; }
  .b2b-band .btn-primary { width: 100%; justify-content: center; }
}

/* Section title */
@media (max-width: 640px) {
  .section-title { font-size: clamp(1.5rem, 5.5vw, 2.25rem); max-width: 100%; }
}
@media (max-width: 480px) {
  .section-pad,
  .section-pad-lg { padding-block: 2.25rem; }
}


/* ================================================================
   ██   OVERFLOW PROTECTION (all pages)
   ================================================================ */
.hero,
.page-header,
.contact-card,
.funding-band,
.mission-card,
.agri-card,
.about-card-wrap,
.bess-card { overflow: hidden; }


















/* ═══════════════════════════════════════════════════════════════
   ESS PAGE — RESPONSIVE CSS
   Covers all content sections except navbar and footer.
   Breakpoints:
     xs  : < 480px
     sm  : 480px – 639px
     md  : 640px – 767px
     lg  : 768px – 1023px
     xl  : 1024px+  (base layout — already defined inline)
═══════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────
   SHARED SECTION SPACING
───────────────────────────────────────────────────────────────*/
@media (max-width: 1023px) {
  .section,
  .section--lg {
    padding: 3.5rem 0;
  }
}

@media (max-width: 639px) {
  .section,
  .section--lg {
    padding: 2.5rem 0;
  }

  .inner {
    padding-inline: 1rem;
  }
}


/* ─────────────────────────────────────────────────────────────
   GRID OVERRIDES
   grid-2, grid-2c, grid-3, grid-4 collapse to single column
   at appropriate breakpoints.
───────────────────────────────────────────────────────────────*/
@media (max-width: 1023px) {
  .grid-2 {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

@media (max-width: 767px) {
  .grid-3 {
    grid-template-columns: 1fr;
  }

  .grid-4 {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 479px) {
  .grid-4 {
    grid-template-columns: 1fr;
  }

  .grid-2c {
    grid-template-columns: 1fr;
  }
}


/* ─────────────────────────────────────────────────────────────
   HERO
───────────────────────────────────────────────────────────────*/
@media (max-width: 1023px) {
  .hero__inner {
    grid-template-columns: 1fr;
    padding: 3.5rem 1.25rem 4rem;
    gap: 2.5rem;
  }

  .hero__h1 {
    font-size: clamp(1.875rem, 5vw, 2.75rem);
  }

  .hero__p {
    font-size: 1rem;
  }

  /* Move visual below text naturally — no reordering needed */
  .hero__visual {
    max-width: 32rem;
    margin-inline: auto;
    width: 100%;
  }

  .hero__badge-float {
    left: 0;
    bottom: -1rem;
  }
}

@media (max-width: 639px) {
  .hero__inner {
    padding: 2.5rem 1rem 3.5rem;
    gap: 2rem;
  }

  .hero__badge {
    font-size: 0.7rem;
    padding: 0.3rem 0.75rem;
  }

  .hero__h1 {
    font-size: clamp(1.625rem, 6vw, 2.25rem);
  }

  .hero__p {
    font-size: 0.9375rem;
    margin-top: 1rem;
  }

  .hero__btns {
    flex-direction: column;
    gap: 0.625rem;
  }

  .btn-primary,
  .btn-outline {
    width: 100%;
    justify-content: center;
    padding: 0.8rem 1.25rem;
    font-size: 0.9rem;
  }

  .hero__card {
    min-height: 200px;
    padding: 1.25rem;
  }

  .hero__ess-placeholder {
    font-size: 1rem;
    gap: 0.75rem;
  }

  .hero__ess-placeholder svg {
    width: 2.5rem;
    height: 2.5rem;
  }

  .hero__badge-float {
    padding: 0.75rem 1rem;
    gap: 0.5rem;
    left: 0;
    bottom: -0.75rem;
  }

  .hero__badge-float__icon {
    width: 2.25rem;
    height: 2.25rem;
  }

  .hero__badge-float__value {
    font-size: 0.875rem;
  }
}


/* ─────────────────────────────────────────────────────────────
   ABOUT ESS (section — grid-2 with feature cards)
───────────────────────────────────────────────────────────────*/
@media (max-width: 1023px) {
  /* grid-2 already collapsed above */
  .section-title--xl {
    font-size: clamp(1.625rem, 4vw, 2.25rem);
  }
}

@media (max-width: 639px) {
  .section-kicker {
    font-size: 0.7rem;
  }

  .section-title {
    font-size: clamp(1.375rem, 4.5vw, 1.75rem);
    margin-top: 0.5rem;
  }

  .section-title--xl {
    font-size: clamp(1.375rem, 4.5vw, 1.875rem);
  }

  .feature-card {
    padding: 1rem;
  }

  .feature-card__title {
    font-size: 0.9rem;
  }

  .icon-box-sun,
  .icon-box-eco {
    width: 2.5rem;
    height: 2.5rem;
  }

  .icon-box-sun svg,
  .icon-box-eco svg {
    width: 1.25rem;
    height: 1.25rem;
  }
}


/* ─────────────────────────────────────────────────────────────
   KEY BENEFITS
───────────────────────────────────────────────────────────────*/
@media (max-width: 767px) {
  /* grid-3 → 1 col */
  .benefit-card {
    padding: 1.25rem;
  }
}

@media (max-width: 639px) {
  .benefit-card {
    padding: 1rem;
  }

  .benefit-card__title {
    font-size: 1rem;
    margin-top: 1rem;
  }

  .benefit-card__desc {
    font-size: 0.8375rem;
  }
}


/* ─────────────────────────────────────────────────────────────
   SEGMENTS (Residential / Commercial / Industrial)
───────────────────────────────────────────────────────────────*/
@media (max-width: 767px) {
  /* grid-3 → 1 col */
  .segment-card {
    padding: 1.5rem;
  }
}

@media (max-width: 639px) {
  .segment-card {
    padding: 1.25rem;
  }

  .segment-card__title {
    font-size: 1.0625rem;
    margin-top: 1rem;
  }

  .segment-card__desc {
    font-size: 0.875rem;
  }

  .segment-card__list li {
    font-size: 0.8375rem;
  }

  .segment-tag {
    font-size: 0.6rem;
  }

  .icon-box-eco--sm {
    width: 2.25rem;
    height: 2.25rem;
  }

  .icon-box-eco--sm svg {
    width: 1.1rem;
    height: 1.1rem;
  }
}


/* ─────────────────────────────────────────────────────────────
   SOLAR + BATTERY (grid-2 + check rows + energy flow card)
───────────────────────────────────────────────────────────────*/
@media (max-width: 1023px) {
  .energy-flow-card {
    padding: 2rem;
  }
}

@media (max-width: 639px) {
  .check-row {
    padding: 0.75rem;
  }

  .check-row__text {
    font-size: 0.8125rem;
  }

  .energy-flow-card {
    padding: 1.5rem 1.25rem;
  }

  .energy-flow-grid {
    gap: 0.625rem;
  }

  .energy-flow-item {
    padding: 0.75rem 0.5rem;
  }

  .energy-flow-item svg {
    width: 1.375rem;
    height: 1.375rem;
  }

  .energy-flow-item__label {
    font-size: 0.55rem;
    letter-spacing: 0.12em;
    margin-top: 0.5rem;
  }

  .energy-flow-item__value {
    font-size: 0.75rem;
    margin-top: 0.2rem;
  }

  .energy-flow-card__p {
    font-size: 0.9375rem;
    margin-top: 1.5rem;
  }
}


/* ─────────────────────────────────────────────────────────────
   WHY CHOOSE US (grid-4)
───────────────────────────────────────────────────────────────*/
@media (max-width: 767px) {
  /* grid-4 → 2 col */
  .why-card {
    padding: 1.25rem;
  }
}

@media (max-width: 479px) {
  /* grid-4 → 1 col */
  .why-card {
    padding: 1rem;
  }

  .why-card__title {
    font-size: 0.9375rem;
    margin-top: 1rem;
  }

  .why-card__desc {
    font-size: 0.8125rem;
  }
}


/* ─────────────────────────────────────────────────────────────
   CTA BANNER
───────────────────────────────────────────────────────────────*/
@media (max-width: 1023px) {
  .cta-banner {
    padding: 2rem;
    border-radius: 1.75rem;
  }
}

@media (max-width: 767px) {
  .cta-banner__inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .btn-gold {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 639px) {
  .cta-banner {
    padding: 1.5rem 1.25rem;
    border-radius: 1.25rem;
  }

  .cta-banner__h3 {
    font-size: clamp(1.375rem, 5vw, 1.75rem);
  }

  .cta-banner__p {
    font-size: 0.9375rem;
    margin-top: 0.5rem;
  }

  .btn-gold {
    padding: 0.875rem 1.25rem;
    font-size: 0.875rem;
  }
}


/* ─────────────────────────────────────────────────────────────
   REVEAL ANIMATION — disable on reduced-motion
───────────────────────────────────────────────────────────────*/
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal.visible,
  .animate-float,
  .animate-float-delay {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}









/* ================================================================
   HEADER MASTER FIX — All Devices
   ================================================================ */

/* ── Reset nav padding completely ── */
.site-nav {
  padding: 0 !important;
}

.site-nav.scrolled {
  padding: 0 !important;
}

/* ── Inner container — all screens ── */
.site-nav .inner,
.site-nav .container.inner,
header.site-nav .inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-inline: 2rem !important;
  height: 80px !important;
  position: relative !important;
}

/* ── Logo — desktop default ── */
.nav-brand img {
  height: 4.5rem !important;
  width: 9rem !important;
  object-fit: contain !important;
}

/* ── Scrolled logo ── */
.site-nav.scrolled .nav-brand img {
  height: 3.5rem !important;
  width: 7.5rem !important;
}

/* ================================================================
   DESKTOP (≥ 1280px) — full nav visible
   ================================================================ */
@media (min-width: 1280px) {
  .site-nav .inner,
  .site-nav .container.inner {
    height: 90px !important;
    padding-inline: 3rem !important;
    margin-top: 20px;
  }

  .nav-brand img {
    height: 5rem !important;
    width: 10rem !important;
  }

  .hamburger {
    display: none !important;
  }

  ul.nav-links,
  .nav-links {
    display: flex !important;
    gap: 1.75rem !important;
    font-size: 0.875rem !important;
  }

  .nav-cta {
    display: inline-flex !important;
  }
}

/* ================================================================
   TABLET + 1024px (1024px – 1279px) — hamburger
   ================================================================ */
@media (min-width: 1024px) and (max-width: 1279px) {
  .site-nav .inner,
  .site-nav .container.inner {
    height: 80px !important;
    padding-inline: 2rem !important;
  }

  .nav-brand img {
    height: 4rem !important;
    width: 8rem !important;
  }

  /* Hide desktop nav */
  ul.nav-links,
  .nav-links {
    display: none !important;
  }

  .nav-cta {
    display: none !important;
  }

  /* Show hamburger */
  .hamburger {
    display: flex !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
  }

  .hamburger span {
    background: #fff !important;
  }

  .site-nav.scrolled .hamburger {
    border-color: var(--mm-border) !important;
  }

  .site-nav.scrolled .hamburger span {
    background: oklch(0.24 0.16 265) !important;
  }

  /* Show mobile menu at this range */
  .mobile-menu {
    display: block !important;
  }
}

/* ================================================================
   TABLET (768px – 1023px)
   ================================================================ */
@media (min-width: 768px) and (max-width: 1023px) {
  .site-nav .inner,
  .site-nav .container.inner {
    height: 75px !important;
    padding-inline: 1.75rem !important;
  }

  .nav-brand img {
    height: 3.75rem !important;
    width: 7.5rem !important;
  }

  ul.nav-links,
  .nav-links {
    display: none !important;
  }

  .nav-cta {
    display: none !important;
  }

  .hamburger {
    display: flex !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
  }

  .hamburger span {
    background: #fff !important;
  }

  .site-nav.scrolled .hamburger {
    border-color: var(--mm-border) !important;
  }

  .site-nav.scrolled .hamburger span {
    background: oklch(0.24 0.16 265) !important;
  }

  .mobile-menu {
    display: block !important;
  }
}

/* ================================================================
   MOBILE (≤ 767px)
   ================================================================ */
@media (max-width: 767px) {
  .site-nav .inner,
  .site-nav .container.inner {
    height: 65px !important;
    padding-inline: 1.25rem !important;
  }

  .nav-brand img {
    height: 3rem !important;
    width: 6.5rem !important;
  }

  ul.nav-links,
  .nav-links {
    display: none !important;
  }

  .nav-cta {
    display: none !important;
  }

  .hamburger {
    display: flex !important;
    border-color: rgba(8, 42, 79, 0.5) !important;
  }

  .hamburger span {
    background: #092754 !important;
  }

  .site-nav.scrolled .hamburger {
    border-color: var(--mm-border) !important;
  }

  .site-nav.scrolled .hamburger span {
    background: oklch(0.24 0.16 265) !important;
  }

  .mobile-menu {
    display: block !important;
  }
}

/* ================================================================
   SMALL MOBILE (≤ 480px)
   ================================================================ */
@media (max-width: 480px) {
  .site-nav .inner,
  .site-nav .container.inner {
    height: 60px !important;
    padding-inline: 1rem !important;
    margin-top: 60px !important;
  }

  .nav-brand img {
    height: 7.5rem !important;
    width: 10rem !important;
  }
}

/* ================================================================
   SCROLLED STATE — all mobile/tablet sizes
   ================================================================ */
@media (max-width: 1279px) {
  .site-nav.scrolled .inner,
  .site-nav.scrolled .container.inner,
  header.site-nav.scrolled .inner {
    height: 65px !important;
    margin-top: 0 !important;
  }
}





/* ================================================================
   LOGO SIZE FIX
   ================================================================ */

/* Desktop (≥ 1280px) */
@media (min-width: 1280px) {
  .nav-brand img {
    height: 7rem !important;
    width: 12rem !important;
  }

  .site-nav.scrolled .nav-brand img {
    height: 5rem !important;
    width: 10rem !important;
  }
}

/* Tablet + 1024px (1024px – 1279px) */
@media (min-width: 1024px) and (max-width: 1279px) {
  .nav-brand img {
    height: 6rem !important;
    width: 11rem !important;
  }

  .site-nav.scrolled .nav-brand img {
    height: 4.5rem !important;
    width: 9rem !important;
  }
}

/* Tablet (768px – 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  .nav-brand img {
    height: 5.5rem !important;
    width: 10rem !important;
  }

  .site-nav.scrolled .nav-brand img {
    height: 4rem !important;
    width: 8rem !important;
  }
}

/* Mobile (≤ 767px) */
@media (max-width: 767px) {
  .nav-brand img {
    height: 4.5rem !important;
    width: 8.5rem !important;
  }

  .site-nav.scrolled .nav-brand img {
    height: 3.5rem !important;
    width: 7rem !important;
  }
}

/* Small Mobile (≤ 480px) */
@media (max-width: 480px) {
  .nav-brand img {
    height: 7.5rem !important;
    width: 10rem !important;
  }

  .site-nav.scrolled .nav-brand img {
    height: 3rem !important;
    width: 6rem !important;
  }
}




/* about page */
@media (max-width:480px){
        .page-header{margin-top: 80px;}

}

@media (min-width: 1280px) {
  .mobile-menu { display: none !important; }
  .hamburger   { display: none !important; }
}