:root{
    --green-600:#17A44A;
    --green-700:#0E8A3C;
    --green-800:#0B6B30;
    --green-tint:#EAF7EE;
    --navy-950:#0A121C;
    --navy-900:#0E2436;
    --ink:#20281F;
    --body:#5E6B62;
    --paper:#FFFFFF;
    --paper-soft:#F6F8F6;
    --line:#E6EAE6;
    --r-lg:26px;
    --r-md:16px;
    --r-sm:10px;
    --maxw:1180px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{margin:0; background:var(--paper); color:var(--ink); font-family:'Poppins',sans-serif; font-weight:400; -webkit-font-smoothing:antialiased;}
  h1,h2,h3,h4{margin:0; font-family:'Poppins',sans-serif; font-weight:600;}
  a{color:inherit; text-decoration:none;}
  img,svg{max-width:100%; display:block;}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
  ul{margin:0; padding:0; list-style:none;}
  @media (prefers-reduced-motion: reduce){*{animation-duration:.001ms !important; transition-duration:.001ms !important;}}

  /* ===== pill button ===== */
  .pill{
    display:inline-flex; align-items:center; gap:5px; background:var(--green-600); color:#fff;
    border:none; border-radius:999px; padding: 6px 22px 6px 16px; font-weight:600; font-size:14px;
    cursor:pointer; transition:background .2s ease;
  }
  .pill:hover{background:var(--green-800);}
  .pill .ic{width:28px; height:28px; border-radius:50%; background:rgba(255,255,255,0.28); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
  .pill.outline{background:transparent; border:1.5px solid var(--green-600); color:var(--green-700); padding:8px 22px 8px 6px;}
  .pill.outline .ic{background:var(--green-tint); color:var(--green-700);}
  .link-quote{color:var(--green-700); font-weight:600; font-size:14px; border-bottom:1.5px solid var(--green-700); padding-bottom:2px;}


  /* ===== hero ===== */
  .hero-shell{padding:20px 24px 0; max-width:var(--maxw); margin:0 auto;}
  .hero{
    position:relative; border-radius:var(--r-lg); overflow:hidden; min-height:420px;
    display:flex; align-items:center; padding:0 56px;
    background:
      radial-gradient(ellipse at 75% 15%, rgba(255,255,255,0.16), transparent 45%),
      linear-gradient(115deg, #0B3D2A 0%, #0F5C34 38%, #1C8A4C 68%, #2FAE63 100%);
  }
  /* Power-system pages (1-10 KW) get a distinct navy/blue hero so they
     read as a different section from the green product-catalog pages. */
  .hero.power-hero{
    background:
      radial-gradient(ellipse at 75% 15%, rgba(255,255,255,0.14), transparent 45%),
      linear-gradient(115deg, var(--navy-950) 0%, var(--navy-900) 42%, #14507A 72%, var(--secondary) 100%);
  }
  .hero .sky-grid{position:absolute; inset:0; opacity:.14;
    background-image:repeating-linear-gradient(90deg, #fff 0 1px, transparent 1px 64px), repeating-linear-gradient(0deg, #fff 0 1px, transparent 1px 64px);
  }
  .hero-copy{position:relative; z-index:3; max-width:460px; padding:64px 0;}
  .hero-copy .eyebrow{font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:#BFF0CE;}
  .hero-copy h1{font-size:clamp(28px,3.4vw,42px); line-height:1.18; color:#fff; margin-top:14px; font-weight:600;}
  .hero-copy p{font-size:14.5px; color:#D7F0DE; margin-top:14px; line-height:1.7; max-width:400px;}
  .hero-copy .hero-ctas{display:flex; gap:14px; margin-top:26px; flex-wrap:wrap;}
  .pill.on-dark{background:#fff; color:var(--green-800);}
  .pill.on-dark .ic{background:var(--green-tint); color:var(--green-700);}
  .pill.outline.on-dark{border-color:rgba(255,255,255,0.55); color:#267844;}
  .pill.outline.on-dark .ic{background:rgba(255,255,255,0.18); color:#267844;}

  .hero-art{position:absolute; right:0; bottom:0; top:0; width:52%; z-index:1;}
  .hero-art svg{width:100%; height:100%;}

  .badge{
    position:absolute; z-index:4; background:rgba(10,30,20,0.42); backdrop-filter:blur(6px);
    border:1px solid rgba(255,255,255,0.35); border-radius:999px; padding:8px 16px 8px 8px;
    display:flex; align-items:center; gap:9px; color:#fff; font-size:11.5px; font-weight:500;
  }
  .badge .dot{width:24px; height:24px; border-radius:50%; background:rgba(255,255,255,0.9); display:flex; align-items:center; justify-content:center; font-size:12px;}
  .badge.b1{top:44px; right:200px;}
  .badge.b2{top:130px; right:40px;}
  .badge.b3{bottom:56px; right:150px;}
  @media (max-width:760px){.badge{display:none;}}

  .breadcrumb{text-align:center;     display: flex;
    justify-content: center; font-size:12.5px; color:var(--body); padding:20px 0 0;}
  .breadcrumb b{color:var(--ink); font-weight:600;}
  .breadcrumb .dot{margin:0 8px; color:var(--green-600);}

  /* ===== centered intro w/ rings ===== */
  .intro{position:relative; text-align:center; padding:56px 24px 40px; overflow:hidden;}
  .intro .rings{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:640px; height:640px; z-index:0; opacity:.5;}
  .intro-content{position:relative; z-index:1;}
  .intro h2{font-size:clamp(26px,3.4vw,38px); font-weight:400; color:var(--ink);}
  .intro p{font-size:14.5px; color:var(--body); margin-top:10px;}

  /* explore grid */
  .explore{padding:0 24px 64px;}
  .explore .heading{text-align:center; font-size:20px; font-weight:600; margin-bottom:30px; color:var(--ink);}
  .explore-grid{max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:repeat(7,1fr); gap:16px;}
  .explore-card{
    background:#fff; border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden;
    transition:transform .2s ease, box-shadow .2s ease; cursor:pointer;
  }
  .explore-card:hover{transform:translateY(-3px); box-shadow:0 10px 26px rgba(15,90,50,.12);}
  .explore-card .thumb{background:var(--paper-soft); aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; padding:18px;}
  .explore-card .thumb svg{width:100%; height:100%;}
  .explore-card .cap{padding:12px 12px 16px; font-size:12.5px; font-weight:600; color:var(--ink); line-height:1.4;}
  @media (max-width:980px){.explore-grid{grid-template-columns:repeat(4,1fr);}}
  @media (max-width:620px){.explore-grid{grid-template-columns:repeat(2,1fr);}}

  /* ===== product section heading ===== */
  .range-heading{max-width:var(--maxw); margin:0 auto; padding:0 24px 28px;}
  .range-heading h2{font-size:clamp(22px,2.6vw,30px); font-weight:600; color:var(--ink);}

  /* ===== product card ===== */
  .products{max-width:var(--maxw); margin:0 auto; padding:0 24px 70px; display:flex; flex-direction:column; gap:26px;}
  .pcard{
    scroll-margin-top:80px; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
    padding:28px; display:grid; grid-template-columns:290px 1fr; gap:32px;
  }
  .pcard .art{
    background:var(--paper-soft); border-radius:var(--r-md); display:flex; align-items:center; justify-content:center;
    padding:20px; min-height:230px;
  }
  .pcard .art svg{width:100%; height:100%;}
  .pcard .art img{width:100%; height:100%; object-fit:contain;}
  .pcard .content .idx-tag{font-size:11.5px; font-weight:600; color:var(--green-700); text-transform:uppercase; letter-spacing:.06em;}
  .pcard h3{font-size:21px; font-weight:600; color:var(--ink); margin-top:8px; line-height:1.3;}

  .lbl{font-size:12px; font-weight:600; color:var(--green-700); text-transform:uppercase; letter-spacing:.05em; margin-top:20px; display:block;}
  .feat-grid{display:grid; grid-template-columns:1fr 1fr; gap:9px 22px; margin-top:10px;}
  .feat-item{display:flex; gap:9px; font-size:13px; color:var(--ink); line-height:1.5;}
  .feat-item .n{flex-shrink:0; width:18px; height:18px; border-radius:50%; background:var(--green-tint); color:var(--green-700); font-size:10.5px; font-weight:700; display:flex; align-items:center; justify-content:center; margin-top:1px;}

  .spec-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px 22px; margin-top:10px;}
  .spec-item{display:flex; gap:10px; align-items:flex-start;}
  .spec-item .ic{width:30px; height:30px; border-radius:8px; background:var(--paper-soft); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
  .spec-item b{display:block; font-size:12.5px; font-weight:600; color:var(--ink);}
  .spec-item span{font-size:12px; color:var(--body);}

  .pcard-ctas{display:flex; align-items:center; gap:20px; margin-top:22px; flex-wrap:wrap;}

  /* price table (secondary, inside a details-style block) */
  .price-toggle{margin-top:22px; border-top:1px solid var(--line); padding-top:16px;}
  .price-toggle summary{cursor:pointer; font-size:13px; font-weight:600; color:var(--ink); list-style:none; display:flex; align-items:center; gap:8px;}
  .price-toggle summary::-webkit-details-marker{display:none;}
  .price-toggle summary .chev{transition:transform .2s ease; color:var(--green-700);}
  .price-toggle[open] summary .chev{transform:rotate(90deg);}
  .price-table{margin-top:14px; border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden;}
  table{width:100%; border-collapse:collapse;}
  thead th{text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.04em; font-weight:600; color:var(--body); background:var(--paper-soft); padding:10px 14px;}
  tbody td{padding:11px 14px; font-size:13px; border-top:1px solid var(--line); color:var(--ink);}
  td.price{font-weight:600; text-align:right;}
  td.pw{color:var(--green-700); font-weight:600; text-align:right;}
  .best-badge{display:inline-block; margin-left:7px; font-size:9px; background:#F4C542; color:#3A2C00; padding:2px 7px; border-radius:5px; font-weight:700;}

  @media (max-width:880px){
    nav.cats{display:none;}
    .hero{padding:0 24px;}
    .hero-art{display:none;}
    .pcard{grid-template-columns:1fr;}
    .pcard .art{min-height:180px;}
    .feat-grid,.spec-grid{grid-template-columns:1fr;}
    .explore-grid{grid-template-columns:repeat(3,1fr);}
  }

  /* ===== why choose (split dark) ===== */
  .why{max-width:var(--maxw); margin:0 auto 70px; padding:0 24px;}
  .why-panel{border-radius:var(--r-lg); overflow:hidden; display:grid; grid-template-columns:0.9fr 1.1fr; background:#f8fffb;}
  .why-art{ position:relative; min-height:380px; display:flex; align-items:center; justify-content:center;}
  .why-art svg{width:78%; height:78%;}
  .why-copy{padding:48px 44px; color:#2d2c2c;}
  .why-copy h2{font-size:clamp(22px,2.4vw,28px); font-weight:400;}
  .why-2x2{display:grid; grid-template-columns:1fr 1fr; gap:24px 28px; margin-top:30px;}
  .why-item{display:flex; gap:12px;}
  .why-item .ic{width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,0.12); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
  .why-item b{display:block; font-size:14px; font-weight:600;}
  .why-item p{font-size:12.5px; color:#636564; margin-top:4px; line-height:1.5;}
  @media (max-width:880px){.why-panel{grid-template-columns:1fr;} .why-art{min-height:220px;}}

  /* ===== quote CTA ===== */
  .quote-shell{max-width:var(--maxw); margin:0 auto 70px; padding:0 24px;}
  .quote{
    border-radius:var(--r-lg); overflow:hidden; background:#fff; border:1px solid #e0ffea; color:var(--ink);
    display:grid; grid-template-columns:1fr 1fr; position:relative;
  }
  .quote-form{padding:48px 44px;}
  .quote-form h2{font-size:clamp(22px,2.4vw,28px); font-weight:400;}
  .quote-form form{margin-top:26px;}

  .quote-form .form-label{
    color:var(--ink); font-weight:600; font-size:13px; margin-bottom:6px;
  }
  .quote-form .form-control,
  .quote-form .form-select{
    width:100%; background-color:#fefefe;
    border:1px solid #d7d7d7; color:var(--ink); padding:12px 14px; border-radius:8px;
    font-size:13.5px; font-family:'Poppins',sans-serif;
  }
  .quote-form .form-control:focus,
  .quote-form .form-select:focus{
    background-color:#fff; border-color:var(--green-600); color:var(--ink);
    box-shadow:0 0 0 3px rgba(23,164,74,0.15); outline:none;
  }
  .quote-form .form-control::placeholder{color:#5C7285;}
  .quote-form textarea.form-control{min-height:100px; resize:vertical;}

  .quote-form .form-check{display:flex; align-items:flex-start; gap:8px; margin-top:6px;}
  .quote-form .form-check-input{margin-top:3px; flex-shrink:0;}
  .quote-form .form-check-input:checked{background-color:var(--green-600); border-color:var(--green-600);}
  .quote-form .form-check-label{font-size:12.5px; color:var(--body); line-height:1.5;}
  .quote-form .invalid-feedback{font-size:12px;}
  .quote-form #formSuccessMsg{font-size:13px; padding:10px 14px; margin-bottom:18px;}

  .quote-art{ display:flex; align-items:center; justify-content:center; padding:30px;}
  .quote-art svg{width:100%; max-width:320px;}
  @media (max-width:880px){.quote{grid-template-columns:1fr;} .quote-art{order:-1; min-height:180px;}}

  /* =====================================================================
     SERVICE LANDING PAGES (industrial / commercial / on-grid / off-grid /
     hybrid / lithium / home / installation) — full-bleed hero variant +
     the extra components these pages need beyond the product-catalog set.
     Prefixed svc- to avoid clashing with style.css's own .stats-strip etc.
     ===================================================================== */

  .hero.full-bleed{
    border-radius:0; justify-content:center;
  background-image: linear-gradient(49deg, #000000ad, #00000054), var(--hero-img);
    background-size:cover; background-position:center; background-repeat:no-repeat;
  }
  @media (max-width:880px){.hero.full-bleed{padding:0 24px;}}
  .hero.full-bleed .hero-copy{max-width:640px; margin:0 auto; text-align:center;}
  .hero.full-bleed .hero-copy p{margin-left:auto; margin-right:auto;}
  .hero.full-bleed .hero-copy .hero-ctas{justify-content:center;}
  .eyebrow.on-light{color:var(--green-700);}

  /* ---- thin metrics strip ---- */
  .svc-metrics{max-width:var(--maxw); margin:0 auto; padding:22px 24px; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
  .svc-metrics .m-item{text-align:center; padding:8px 10px; border-left:1px solid var(--line);}
  .svc-metrics .m-item:first-child{border-left:none;}
  .svc-metrics .m-item .m-num{font-size:22px; font-weight:700; color:var(--green-700);}
  .svc-metrics .m-item .m-label{font-size:12px; color:var(--body); margin-top:4px; line-height:1.4;}
  @media (max-width:760px){
    .svc-metrics{grid-template-columns:repeat(2,1fr); gap:18px 0;}
    .svc-metrics .m-item:nth-child(2n+1){border-left:none;}
  }

  /* ---- centered section head (eyebrow + h2 + subtitle) ---- */
  .svc-section-head{max-width:660px; margin:0 auto; text-align:center; padding:0 24px 44px;}
  .svc-section-head h2{font-size:clamp(24px,2.6vw,32px); font-weight:600; color:var(--ink); margin-top:10px;}
  .svc-section-head p{font-size:14px; color:var(--body); margin-top:12px; line-height:1.6;}

  /* ---- overview (copy + at-a-glance box) ---- */
  .svc-overview{max-width:var(--maxw); margin:0 auto; padding:0 24px; display:grid; grid-template-columns:1.6fr 1fr; gap:52px; align-items:start;}
  .svc-overview h2{font-size:clamp(24px,2.6vw,32px); font-weight:600; color:var(--ink); margin-top:10px;}
  .svc-overview p{font-size:14px; color:var(--body); line-height:1.8; margin-top:14px;}
  .svc-glance{background:var(--paper-soft); border-radius:var(--r-md); padding:26px 28px;}
  .svc-glance .g-row{display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding:14px 0; border-top:1px solid var(--line);}
  .svc-glance .g-row:first-child{border-top:none; padding-top:0;}
  .svc-glance dt{font-size:12.5px; color:var(--body); margin:0;}
  .svc-glance dd{margin:0; font-size:13px; font-weight:600; color:var(--ink); text-align:right;}
  @media (max-width:880px){.svc-overview{grid-template-columns:1fr;}}

  /* ---- system-type cards ---- */
  .svc-systype-grid{max-width:var(--maxw); margin:0 auto; padding:0 24px; display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
  .svc-systype-card{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:26px;}
  .svc-systype-card .tag-pill{display:inline-block; background:var(--green-tint); color:var(--green-700); font-size:10.5px; font-weight:700; padding:5px 12px; border-radius:999px; text-transform:uppercase; letter-spacing:.03em;}
  .svc-systype-card .sy-icon{width:42px; height:42px; border-radius:11px; background:var(--green-tint); display:flex; align-items:center; justify-content:center; margin-top:16px; color:var(--green-700); font-size:19px; font-weight:700;}
  .svc-systype-card h3{margin-top:16px; font-size:19px; font-weight:600; color:var(--ink);}
  .svc-systype-card p{margin-top:10px; font-size:13.5px; color:var(--body); line-height:1.6;}
  .svc-systype-card ul{margin-top:16px; display:flex; flex-direction:column; gap:8px;}
  .svc-systype-card ul li{font-size:13px; color:var(--ink); padding-left:18px; position:relative;}
  .svc-systype-card ul li::before{content:"–"; position:absolute; left:0; color:var(--green-700); font-weight:700;}
  @media (max-width:880px){.svc-systype-grid{grid-template-columns:1fr;}}

  /* ---- why split: icon-list left, dark stat tiles right ---- */
  .svc-why{background:#EAF7EE;}
  .svc-why-grid{max-width:var(--maxw); margin:0 auto; padding:0 24px; display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center;}
  .svc-why-list{display:flex; flex-direction:column; gap:22px;}
  .svc-why-list .wi-item{display:flex; gap:14px;}
  .svc-why-list .wi-item .wi-ic{width:36px; height:36px; border-radius:50%; background:var(--green-600); color:#fff; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:15px;}
  .svc-why-list .wi-item b{display:block; font-size:15px; color:var(--ink);}
  .svc-why-list .wi-item p{margin-top:4px; font-size:13px; color:var(--body); line-height:1.5;}
  .svc-stat-tiles{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
  .svc-stat-tiles .st-tile{background:var(--navy-950); border-radius:var(--r-md); padding:22px;}
  .svc-stat-tiles .st-tile .st-num{font-size:23px; font-weight:700; color:#7FD79B;}
  .svc-stat-tiles .st-tile .st-label{font-size:11.5px; color:rgba(255,255,255,0.7); margin-top:6px; line-height:1.4;}
  @media (max-width:880px){.svc-why-grid{grid-template-columns:1fr;}}

  /* ---- pill rows: sectors served / cities ---- */
  .svc-pill-row{max-width:var(--maxw); margin:0 auto; padding:0 24px; display:flex; flex-wrap:wrap; gap:12px; justify-content:center;}
  .svc-pill{display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:999px; padding:9px 18px; font-size:13px; color:var(--ink); background:#fff;}
  .svc-pill .dot{width:6px; height:6px; border-radius:50%; background:var(--green-600); flex-shrink:0;}
  .svc-pill.muted{background:var(--paper-soft);}

  /* ---- cross-link cards (other services) ---- */
  .svc-links-row{max-width:var(--maxw); margin:0 auto; padding:0 24px 10px; display:flex; gap:18px; overflow-x:auto;}
  .svc-link-card{flex:0 0 220px; background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:20px;}
  .svc-link-card h4{margin-top:8px; font-size:15px; font-weight:600; color:var(--ink); line-height:1.35;}
  .svc-link-card a.more{display:inline-block; margin-top:14px; font-size:12.5px; font-weight:600; color:var(--green-700);}

  /* ---- dark quote-form variant ---- */
  .quote.dark{background:var(--navy-950); border-color:var(--navy-950);}
  .quote.dark .quote-form h2{color:#fff;}
  .quote.dark .quote-form .form-label{color:#fff;}
  .quote.dark .quote-form .form-control,
  .quote.dark .quote-form .form-select{background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.18); color:#fff;}
  .quote.dark .quote-form .form-control:focus,
  .quote.dark .quote-form .form-select:focus{background:rgba(255,255,255,0.1);}
  .quote.dark .quote-form .form-control::placeholder{color:rgba(255,255,255,0.45);}
  .quote.dark .quote-form .form-check-label{color:rgba(255,255,255,0.65);}