/*
Theme Name: Power Plus
Theme URI: https://powerplusgenerators.com.pk
Author: Power Plus
Description: Custom theme for Power Plus — solar EPC, inverters, batteries and generators, Karachi.
            Built from the approved design. Do not edit colours or type here without updating
            the design tokens block below, which is the single source of truth.
Version: 2.24.0
License: GNU General Public License v2 or later
Text Domain: powerplus
*/

/* =========================================================================
   This file is the design CSS, unchanged from the approved HTML build.
   Tokens live in :root. Change a colour there and it changes sitewide.
   ========================================================================= */

:root{
  --navy:#000B25;--navy-800:#141E36;--navy-700:#1D2A47;
  --ember:#F59E0B;--ember-700:#B87911;--ember-50:#FFF6E6;
  --green:#08973C;--green-700:#06752E;--green-50:#EAF7EF;
  --surface:#F0F3FA;--surface-50:#F7F9FC;
  --muted:#7F8592;--border:#DDE1E8;
  --shadow:0 4px 24px rgba(0,11,37,.08);
  --pad:20px;--bar:68px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:Inter,system-ui,sans-serif;font-size:15px;line-height:1.6;color:var(--navy);background:#fff}
h1,h2,h3{font-family:'Plus Jakarta Sans',Inter,sans-serif;font-weight:800;line-height:1.15;margin:0 0 .5em;letter-spacing:-.02em}
h3{font-weight:700}
h1{font-size:32px;font-weight:800}h2{font-size:26px;font-weight:700}h3{font-size:18px;font-weight:600}
p{margin:0 0 1em}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:1200px;margin:0 auto;padding:0 var(--pad)}
section{padding:54px 0}
.sec-head{margin-bottom:26px}
.sec-head p{color:var(--muted);font-size:14.5px;margin:0;max-width:64ch}
.dark .sec-head p{color:#aeb5c6}
.center{text-align:center}
.eyebrow{font-size:12px;font-weight:700;color:var(--green);margin:0 0 10px;display:block;letter-spacing:.04em}
:focus-visible{outline:3px solid var(--ember);outline-offset:2px;border-radius:4px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:54px;padding:0 22px;border-radius:8px;font-weight:600;font-size:15.5px;text-decoration:none;border:0;cursor:pointer;width:100%;transition:background .15s}
.btn-primary{background:var(--ember);color:var(--navy)}
.btn-primary:hover{background:var(--ember-700);color:#fff}
.btn-wa{background:var(--green);color:#fff}
.btn-wa:hover{background:var(--green-700)}
.btn-dark{background:var(--navy);color:#fff}
.btn-ghost{background:transparent;color:var(--navy);border:1.5px solid var(--navy)}
.btn-ghost.on-dark{color:#fff;border-color:rgba(255,255,255,.55)}
.btn-row{display:flex;flex-direction:column;gap:12px}
.reassure{font-size:12.5px;color:var(--muted);margin:11px 0 0;display:flex;gap:7px;align-items:flex-start;line-height:1.45}
.reassure i{font-style:normal;color:var(--green);flex:0 0 auto}
.dark .reassure{color:#9aa3b8}

.micro{margin-top:22px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.micro a{font-weight:600;font-size:14.5px;text-decoration:none;color:var(--ember-700);border-bottom:2px solid rgba(245,158,11,.35);padding-bottom:2px;cursor:pointer}
.micro a:hover{border-color:var(--ember)}
.dark .micro a{color:var(--ember)}
.micro .or{font-size:13px;color:var(--muted)}
.dark .micro .or{color:#8f9ab5}

.ph{background:repeating-linear-gradient(135deg,#eef1f7,#eef1f7 12px,#e6eaf3 12px,#e6eaf3 24px);border:1.5px dashed #b9c0d0;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:14px;color:#5c6478;min-height:140px}
.ph b{font-size:12px;font-weight:700;color:#39415a}
.ph span{font-size:11px;line-height:1.35;margin-top:4px}
.ph code{font-size:10px;color:#7a8299;word-break:break-all;margin-top:5px;font-family:ui-monospace,monospace}
.ph.dark{background:repeating-linear-gradient(135deg,#17213a,#17213a 12px,#1d294a 12px,#1d294a 24px);border-color:#3a476a;color:#aab3c9}
.ph.dark b{color:#dfe4ef}.ph.dark code{color:#8f9ab5}
.ph.sm{min-height:96px}
/* a photo sitting beside a column of text fills that column */
.split > .ph,.split > img{min-height:300px;height:100%;object-fit:cover}
.hero .wrap > .ph,.hero .wrap > img{min-height:280px;height:100%;object-fit:cover;border-radius:14px}

.announce{background:var(--ember);color:var(--navy);font-size:13px;font-weight:500;padding:9px var(--pad);display:flex;gap:14px;align-items:center;justify-content:center;text-align:center;flex-wrap:wrap}
.announce .sep{display:none;opacity:.45}
.announce b{font-weight:700}

header{position:sticky;top:0;z-index:800;background:#fff;border-bottom:1px solid var(--border)}
.nav{display:flex;align-items:center;gap:12px;min-height:62px}
.logo{font-family:'Plus Jakarta Sans';font-weight:800;font-size:20px;letter-spacing:-.02em;text-decoration:none;line-height:1.1;color:var(--navy)}
.logo span{display:block;font-family:Inter;font-size:9px;font-weight:500;color:var(--muted);letter-spacing:.08em}
.nav-desk{display:none;margin-left:30px;font-size:15px;font-weight:500;align-items:center;flex:1}
.nav-desk .nav-menu{display:flex;align-items:center;gap:22px;list-style:none;margin:0;padding:0}
.nav-desk .nav-menu > li{position:relative;list-style:none}
.nav-desk .nav-menu li{list-style:none}
.nav-desk a{color:var(--navy);white-space:nowrap;border-bottom:2px solid transparent;display:inline-block}
.nav-desk a:hover{color:var(--ember-700)}
/* a parent item gets a small chevron */
.nav-desk .has-sub > a::after,
.nav-desk .menu-item-has-children > a::after{content:"▾";margin-left:5px;font-size:11px;opacity:.6}
/* the dropdown itself — opens on hover and on keyboard focus */
.nav-desk .sub-menu{position:absolute;top:100%;left:-14px;min-width:210px;background:#fff;
  border:1px solid var(--border);border-radius:12px;box-shadow:0 16px 40px rgba(0,11,37,.14);
  padding:8px;margin:8px 0 0;list-style:none;opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .15s,transform .15s,visibility .15s;z-index:810}
.nav-desk .has-sub:hover > .sub-menu,
.nav-desk .has-sub:focus-within > .sub-menu,
.nav-desk .menu-item-has-children:hover > .sub-menu,
.nav-desk .menu-item-has-children:focus-within > .sub-menu{opacity:1;visibility:visible;transform:translateY(0)}
.nav-desk .sub-menu li{margin:0}
.nav-desk .sub-menu a{display:block;padding:9px 12px;border-radius:8px;border:0;font-size:14.5px;font-weight:500}
.nav-desk .sub-menu a:hover{background:var(--surface-50)}
/* the gap between item and dropdown must stay hoverable */
.nav-desk .has-sub::after,
.nav-desk .menu-item-has-children::after{content:"";position:absolute;left:0;right:0;top:100%;height:10px}
.nav-desk a{text-decoration:none;padding:8px 0}
.nav-tools{margin-left:auto;display:flex;align-items:center;gap:8px}
.icon-btn{width:44px;height:44px;display:grid;place-items:center;border:0;background:none;cursor:pointer;border-radius:8px;color:var(--navy);font-size:19px}
.icon-btn.wa{background:var(--green);color:#fff}
.nav-cta{display:none}

.panel{position:fixed;inset:0;z-index:900;background:var(--navy);color:#fff;transform:translateX(100%);transition:transform .25s ease;overflow-y:auto;padding:0 var(--pad) 40px}
.panel[data-open="1"]{transform:none}
.panel-top{display:flex;align-items:center;min-height:62px;margin:0 calc(var(--pad)*-1);padding:0 var(--pad);border-bottom:1px solid rgba(255,255,255,.12)}
.panel-top .logo{color:#fff}.panel-top .logo span{color:#8f9ab5}
.panel-top button{margin-left:auto;background:none;border:0;color:#fff;font-size:26px;cursor:pointer;width:44px;height:44px}
.panel .plain{display:block;padding:16px 0;font-weight:600;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.12)}
.line-row{display:flex;align-items:center;gap:12px;background:var(--navy-800);border-radius:10px;padding:14px;margin-top:12px;text-decoration:none;color:#fff}
.line-row b{display:block;font-size:16px}
.line-row small{color:#aeb5c6;font-size:12.5px}

.hero{position:relative;background:var(--navy);color:#fff;padding:42px 0 38px;overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(110% 80% at 88% 40%,rgba(41,121,255,.32),transparent 62%),radial-gradient(70% 60% at 5% 95%,rgba(41,121,255,.15),transparent 60%);pointer-events:none}
.hero .wrap{position:relative;z-index:1}
.hero h1{font-size:clamp(30px,7.4vw,42px)}
.hero p{color:#c5cbdb;font-size:16px;max-width:50ch}
/* hero photos — two of them, each with its own frame. No fixed height on the
   wrapper: a single aspect-ratio box was clipping whichever photo was taller. */
.hero-media{margin-top:26px;display:grid;gap:10px;grid-template-columns:1fr}
.hm-main,.hm-side{border-radius:12px;overflow:hidden;position:relative}
.hm-main,.hm-side{aspect-ratio:16/10;min-height:200px}
.hm-main img,.hm-side img{width:100%;height:100%;object-fit:cover;display:block}
/* the dashed placeholder has to fit inside its own box, not spill out of it */
.hm-main .ph,.hm-side .ph{width:100%;height:100%;min-height:0;margin:0;padding:16px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;overflow:hidden}
.hm-main .ph b,.hm-side .ph b{font-size:12px}
.hm-main .ph span,.hm-side .ph span{font-size:10.5px;line-height:1.3}
/* with only one photo set, it takes the whole frame */
.hero-media.single .hm-main{aspect-ratio:16/10}
@media(min-width:860px){
  .hero-media{grid-template-columns:1.55fr 1fr;gap:12px;align-items:stretch}
  .hm-main,.hm-side{aspect-ratio:auto;min-height:340px}
  .hero-media.single{grid-template-columns:1fr}
  .hero-media.single .hm-main{aspect-ratio:16/10;min-height:0}
}
.hero-pills{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0;padding:0;list-style:none}
.hero-pills li{font-size:12.5px;font-weight:600;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);padding:8px 13px;border-radius:8px;display:flex;gap:7px;align-items:center}
.hero-pills i{font-style:normal;color:var(--ember)}

.creds{background:var(--navy-800);color:#fff;padding:16px 0;border-top:1px solid rgba(255,255,255,.08)}
.creds-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cred{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;line-height:1.35}
.cred i{font-style:normal;color:var(--green);font-size:15px;flex:0 0 auto}
.cred b{display:block;font-size:13px;color:#fff}
.cred em{font-style:normal;color:#9aa3b8;display:block}

.usp{border-bottom:1px solid var(--border);padding:26px 0}
.usp-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.usp-item{display:flex;gap:11px;align-items:flex-start}
.usp-item .ico{width:34px;height:34px;border-radius:7px;background:var(--surface);display:grid;place-items:center;font-size:16px;flex:0 0 auto}
.usp-item b{display:block;font-size:14px;line-height:1.3}
.usp-item em{font-style:normal;font-size:12.5px;color:var(--muted);line-height:1.35;display:block}

.chain{display:grid;gap:10px}
.chain-item{background:#fff;border:1px solid var(--border);border-radius:10px;padding:14px 16px;display:flex;gap:13px;align-items:flex-start}
.chain-item .n{width:28px;height:28px;border-radius:50%;background:var(--navy);color:#fff;font-size:12.5px;font-weight:700;display:grid;place-items:center;flex:0 0 auto;margin-top:1px}
.chain-item.own{border-color:var(--ember);background:var(--ember-50)}
.chain-item.own .n{background:var(--ember);color:var(--navy)}
.chain-item b{display:block;font-size:14.5px}
.chain-item em{font-style:normal;font-size:12.5px;color:var(--muted);line-height:1.4;display:block}
.chain-note{font-size:12.5px;color:var(--muted);margin-top:16px}

.divs{display:grid;gap:14px}
.divcard{background:var(--navy-800);border-radius:12px;padding:20px;border-left:3px solid var(--green)}
.divcard.d2{border-left-color:var(--ember)}
.divcard.d3{border-left-color:#2979FF}
.divcard.d4{border-left-color:#9AA3B8}
.divcard h3{font-size:17px;margin-bottom:4px}
.divcard p{font-size:13.5px;color:#aeb5c6;margin:0 0 14px}
.divline{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:700;text-decoration:none;color:#fff;background:rgba(255,255,255,.07);border-radius:8px;padding:11px 13px}
.divline small{display:block;font-weight:500;font-size:11.5px;color:#9aa3b8}

.cats{display:grid;gap:16px}
.cat{border:1px solid var(--border);border-radius:14px;padding:22px;background:var(--surface-50);display:flex;flex-direction:column}
.cat .tag{width:40px;height:40px;border-radius:9px;display:grid;place-items:center;font-size:19px;margin-bottom:14px}
.cat.c1 .tag{background:#FEF3DC}.cat.c2 .tag{background:#E4EEFD}.cat.c3 .tag{background:#E1F5E8}
.cat h3{margin-bottom:6px}
.cat p{font-size:13.5px;color:var(--muted);margin:0 0 18px}
.cat .ph{min-height:110px;margin-bottom:16px}
.cat .btn{margin-top:auto}

.prods{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.prod{border:1px solid var(--border);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;background:#fff}
.prod-img{background:var(--surface-50);padding:12px;position:relative;
  aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;overflow:hidden}
.prod-img .ph{min-height:100px;width:100%;height:100%;border-radius:8px}
/* a real product photo — contain, not cover, so cut-outs are never clipped */
.prod-img img{width:100%!important;height:100%!important;object-fit:contain!important;
  border-radius:8px;display:block}
.badge{position:absolute;top:10px;left:10px;z-index:2;font-size:10.5px;font-weight:700;padding:4px 9px;border-radius:999px;background:var(--green);color:#fff}
.badge.amber{background:var(--ember);color:var(--navy)}
.prod-body{padding:12px;display:flex;flex-direction:column;flex:1}
.prod-brand{font-size:10.5px;font-weight:700;color:var(--muted);letter-spacing:.06em}
.prod h3{font-size:14px;margin:4px 0 7px;font-family:Inter;font-weight:600;line-height:1.3}
.prod .specs{font-size:11.5px;color:var(--muted);margin:0 0 8px}
.prod .warr{font-size:11px;color:var(--green);font-weight:600;margin:0 0 10px}
.prod .btn{min-height:44px;font-size:13.5px;margin-top:auto}
.head-row{display:flex;align-items:flex-end;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.head-row h2{margin:0}
.head-row a{margin-left:auto;font-weight:600;font-size:14.5px;text-decoration:none;color:var(--ember-700);white-space:nowrap}

.brand-scroll{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}
.brand-scroll::-webkit-scrollbar{display:none}
.brand-chip{flex:0 0 auto;scroll-snap-align:start;border:1px solid var(--border);border-radius:8px;padding:14px 18px;font-weight:700;font-size:13.5px;color:#4a5165;background:#fff;white-space:nowrap}
/* a brand that has products becomes a link into the shop */
.brand-chip.is-link{text-decoration:none;color:var(--navy);display:inline-flex;align-items:center;gap:8px;
  transition:border-color .15s,background .15s,transform .15s}
.brand-chip.is-link:hover{border-color:var(--ember);background:#FFFCF5;transform:translateY(-1px)}
.brand-chip.is-link span{font-size:11.5px;font-weight:800;color:var(--muted);background:var(--surface-50);
  border-radius:999px;padding:2px 8px;min-width:22px;text-align:center}
.brand-chip.is-link:hover span{background:#FFF1D6;color:var(--ember-700)}

.certs{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px}
@media(min-width:560px) and (max-width:1023px){.certs{grid-template-columns:repeat(2,1fr)}}
/* every card image the same shape, whatever was uploaded */
.cert .ph,.cert img{width:100%!important;aspect-ratio:4/5;height:auto!important;
  object-fit:cover!important;object-position:center top;border-radius:8px;display:block;margin-bottom:10px}
.cert .ph.sm{min-height:0}
.cert{background:#fff;border:1px solid var(--border);border-radius:10px;padding:12px;text-align:center}
.cert .ph{min-height:120px;margin-bottom:9px}
.cert b{font-size:12.5px;display:block}
.cert em{font-style:normal;font-size:11.5px;color:var(--muted)}

.dark{background:var(--navy);color:#fff}
.dark h2,.dark h3{color:#fff}
.dark p{color:#c5cbdb}

.svc{display:grid;gap:14px}
.svc-card{background:var(--navy-800);border-radius:12px;padding:20px;border-top:3px solid var(--ember)}
.svc-card .ico{font-size:22px;margin-bottom:10px;display:block}
.svc-card p{font-size:13.5px;color:#aeb5c6;margin:0 0 14px}
.svc-card a{font-size:13.5px;font-weight:600;color:var(--ember);text-decoration:none}

/* header WhatsApp button — text, not just an icon */
/* WordPress / WooCommerce accessibility text — read aloud, never shown */
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;
  overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important}
/* sale price: old one struck through and quiet, new one bold */
.prod-price del{color:var(--muted);font-weight:600;font-size:.72em;margin-right:8px;text-decoration-thickness:2px}
.prod-price ins{text-decoration:none}
/* product cards — every card the same shape, so prices and buttons line up
   across the row however long a title or description happens to be */
.prod{display:flex;flex-direction:column}
.prod-body{display:flex;flex-direction:column;flex:1;padding:14px 14px 16px}
.prod-body h3{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:2.6em;margin:0 0 8px}
.prod-body .specs{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  min-height:4.2em;margin:0 0 10px}
.prod-body .warr{margin:0 0 10px}
.btn-buy{background:var(--ember);color:var(--navy);border:0}
.btn-buy:hover{background:var(--ember-700);color:#fff}
.btn-buy.added{display:none}
.prod-wa{display:block;text-align:center;margin-top:9px;font-size:13.5px;font-weight:700;
  color:var(--green);text-decoration:none;cursor:pointer}
.prod-wa:hover{text-decoration:underline}
.prod-price{margin-top:auto!important}          /* pushes price + button to the bottom */
.prod-price.is-quote{font-size:17px;color:var(--muted);font-weight:700}
.prod-body .btn{margin-top:12px}
.prod-price{font-family:'Plus Jakarta Sans',Inter,sans-serif;font-weight:800;font-size:22px;
  letter-spacing:-.02em;color:var(--navy);margin:2px 0 10px}
/* NTN — number, optional ATL tick, and a link to FBR so it can be checked */
.ntn{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.ntn b{font-weight:700}
.ntn-atl{font-size:.92em;font-weight:700;color:var(--green)}
.ntn-verify{font-size:.92em;font-weight:600;color:var(--ember-700);text-decoration:underline;
  text-underline-offset:2px}
footer .ntn-verify{color:var(--ember)}
footer .ntn-atl{color:#3BD874}
.nav-wa{white-space:nowrap;padding:0 15px;min-height:46px;font-size:14.5px;gap:7px}
.nav-wa-ic{font-size:15px;line-height:1}

@media(min-width:900px){ .nav-desk{display:flex} .icon-btn.menu{display:none} }

/* slide-in panel: both levels, nothing to tap open */
.panel .nav-menu{list-style:none;margin:0;padding:0}
.panel .nav-menu > li{border-bottom:1px solid rgba(255,255,255,.12)}
.panel .nav-menu > li > a{display:block;padding:15px 0;font-size:18px;font-weight:700;color:#fff;text-decoration:none}
.panel .pp-has-sub{position:relative}
.panel .pp-sub-toggle{position:absolute;top:8px;right:0;width:46px;height:46px;border:0;background:none;
  color:#fff;font-size:20px;cursor:pointer;line-height:1;opacity:.75;transition:transform .2s}
.panel .pp-has-sub.open > .pp-sub-toggle{transform:rotate(180deg)}
.panel .sub-menu{list-style:none;margin:0 0 12px;padding:0 0 0 14px;border-left:2px solid var(--ember);
  overflow:hidden;max-height:600px;transition:max-height .25s ease,margin .25s ease,opacity .2s}
.panel .pp-has-sub:not(.open) > .sub-menu{max-height:0;margin-bottom:0;opacity:0}
.panel .sub-menu a{display:block;padding:9px 0;font-size:15px;color:#c2cadb;text-decoration:none}
.panel .sub-menu a:hover{color:#fff}

/* cart */
.pp-cart{display:inline-flex;align-items:center;gap:6px;min-height:46px;padding:0 13px;border-radius:9px;
  border:1.5px solid var(--border);background:#fff;color:var(--navy);text-decoration:none;position:relative}
.pp-cart:hover{border-color:var(--ember);background:#FFFCF5}
.pp-cart-ic{font-size:17px;line-height:1}
.pp-cart-n{min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--ember);color:var(--navy);
  font-family:Inter,sans-serif;font-size:11.5px;font-weight:800;display:inline-flex;align-items:center;justify-content:center}
.pp-cart-n.empty{background:var(--surface);color:var(--muted)}

/* on a phone the WhatsApp button was eating half the bar — icon only,
   and the cart sits beside it */
@media(max-width:620px){
  .nav-wa{padding:0 12px;font-size:0;gap:0;min-height:42px}
  .nav-wa-ic{font-size:18px}
  .nav-wa-txt{display:none}
  .pp-cart{min-height:42px;padding:0 10px;gap:5px}
  .pp-cart-ic{font-size:16px}
}
.split{display:grid;gap:28px}
.solar{background:linear-gradient(160deg,#F1FAF4 0%,#E6F4EC 100%)}
.solar h2 em{font-style:normal;color:var(--green)}
.solar-feats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:22px 0 24px;padding:0;list-style:none;align-items:stretch}
.solar-feats li{font-size:13px;font-weight:600;display:flex;gap:9px;align-items:center;line-height:1.35;
  padding:11px 12px;background:rgba(255,255,255,.55);border:1px solid var(--border);border-radius:10px}
.solar-feats i{font-size:18px;line-height:1}
.solar-feats i{font-style:normal;color:var(--green);flex:0 0 auto}

.counts{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:28px}
.count b{display:block;font-family:'Plus Jakarta Sans';font-size:28px;font-weight:800;line-height:1}
.count em{font-style:normal;font-size:12.5px;color:var(--muted);line-height:1.35;display:block;margin-top:5px}

.gal{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.gal .ph{min-height:126px;aspect-ratio:1}

.pack{display:grid;gap:12px}
.pack-item{display:flex;gap:12px;align-items:flex-start;background:var(--surface-50);border:1px solid var(--border);border-radius:10px;padding:14px}
.pack-item i{font-style:normal;font-size:17px;flex:0 0 auto}
.pack-item b{display:block;font-size:14px}
.pack-item em{font-style:normal;font-size:12.5px;color:var(--muted);line-height:1.4;display:block}

.tl{list-style:none;margin:0;padding:0;position:relative}
.tl::before{content:"";position:absolute;left:7px;top:8px;bottom:8px;width:2px;background:rgba(255,255,255,.18)}
.tl li{position:relative;padding:0 0 24px 32px}
.tl li::before{content:"";position:absolute;left:0;top:6px;width:16px;height:16px;border-radius:50%;background:var(--ember);border:3px solid var(--navy)}
.tl b{display:block;font-family:'Plus Jakarta Sans';font-size:16px}
.tl em{font-style:normal;font-size:13.5px;color:#aeb5c6}

.team{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.tm{text-align:center}
.tm .ph{width:96px;height:96px;border-radius:50%;margin:0 auto 10px;min-height:0}
.tm b{display:block;font-size:14.5px}
.tm em{font-style:normal;font-size:12.5px;color:var(--muted)}

.quotes{display:grid;gap:14px}
.quote{background:var(--navy-800);border-radius:12px;padding:20px;color:#fff}
.stars{color:var(--ember);letter-spacing:2px;font-size:14px;margin-bottom:10px}
.quote p{font-size:14px;color:#d3d8e4;margin:0}
.who-row{display:flex;gap:10px;align-items:center;margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.12)}
.who-row .av{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.08);border:1px dashed #4b5673;display:grid;place-items:center;font-size:9px;color:#8f9ab5;flex:0 0 auto}
.who-row b{display:block;font-size:14px}
.who-row em{font-style:normal;font-size:12.5px;color:#aeb5c6}

.areas{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px;padding:0;list-style:none}
.areas li{font-size:12.5px;font-weight:600;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:7px 13px}

.faq details{border-bottom:1px solid var(--border)}
.faq summary{padding:17px 40px 17px 0;font-weight:600;font-size:15px;cursor:pointer;list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:8px;top:15px;font-size:22px;color:var(--ember-700);line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq .ans{padding:0 0 17px;font-size:14px;color:#3a4155}
.faq .ans p{margin:0 0 .7em}

.cta{background:var(--ember);color:var(--navy);padding:44px 0}
.cta h2{font-size:27px;margin-bottom:.35em}
.cta p{color:#4a3a12;font-size:15px;margin:0 0 18px}
.cta .reassure{color:#5c4a1c}
.cta .reassure i{color:#2c6b3f}
.cta .phone{display:flex;align-items:center;gap:9px;font-weight:700;font-size:17px;text-decoration:none;margin-top:16px}

footer{background:var(--navy);color:#aeb5c6;padding:44px 0 26px;font-size:14px}
footer h4{font-family:'Plus Jakarta Sans';color:#fff;font-size:15px;margin:0 0 10px}
footer a{color:#aeb5c6;text-decoration:none;display:block;padding:5px 0}
footer a:hover{color:#fff}
.fgrid{display:grid;gap:26px}
.fbrand .logo{color:#fff}.fbrand .logo span{color:#8f9ab5}
.fbot{margin-top:28px;padding-top:18px;border-top:1px solid rgba(255,255,255,.12);font-size:12.5px;display:grid;gap:6px}


/* floating contact toggle */
.fab{position:fixed;right:16px;bottom:16px;z-index:860;display:flex;flex-direction:column;align-items:flex-end;gap:10px;padding-bottom:env(safe-area-inset-bottom)}
.fab-items{display:flex;flex-direction:column;align-items:flex-end;gap:10px;opacity:0;transform:translateY(10px) scale(.96);pointer-events:none;transition:opacity .18s ease,transform .18s ease}
.fab[data-open="1"] .fab-items{opacity:1;transform:none;pointer-events:auto}
.fab-item{display:inline-flex;align-items:center;gap:9px;height:46px;padding:0 16px 0 13px;border-radius:999px;text-decoration:none;font-weight:600;font-size:14px;box-shadow:0 6px 20px rgba(0,11,37,.22);white-space:nowrap;border:0;cursor:pointer;font-family:Inter}
.fab-item.wa{background:var(--green);color:#fff}
.fab-item.call{background:var(--navy);color:#fff}
.fab-item.cart{background:var(--ember);color:var(--navy)}
.fab-toggle{width:56px;height:56px;border-radius:50%;border:0;cursor:pointer;background:var(--green);color:#fff;font-size:23px;display:grid;place-items:center;box-shadow:0 8px 24px rgba(8,151,60,.38);transition:transform .18s ease,background .18s}
.fab[data-open="1"] .fab-toggle{background:var(--navy);transform:rotate(90deg);box-shadow:0 8px 24px rgba(0,11,37,.3)}
.fab-badge{position:absolute;top:-2px;right:-2px;min-width:20px;height:20px;border-radius:999px;background:var(--ember);color:var(--navy);font-size:11px;font-weight:700;display:grid;place-items:center;padding:0 5px;font-family:Inter;border:2px solid #fff}
.fab-badge[hidden]{display:none}
.fab-wrap{position:relative}

@media (min-width:768px){
  :root{--pad:32px}
  body{font-size:16px}
  section{padding:86px 0}
  h1{font-size:54px}h2{font-size:36px}h3{font-size:21px}
  .btn{width:auto}
  .btn-row{flex-direction:row;flex-wrap:wrap}
  .announce .sep{display:inline}
  .nav-desk{display:flex}
  .nav-cta{display:inline-flex}
  .icon-btn.menu{display:none}
    .hero{padding:86px 0 76px}
  .hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
  .hero-media{margin:0}
  .creds-grid{grid-template-columns:repeat(4,1fr);gap:26px}
  .usp-grid{grid-template-columns:repeat(4,1fr);gap:28px}
  .chain{grid-template-columns:repeat(7,1fr);gap:8px}
  .chain-item{flex-direction:column;gap:8px;text-align:center;align-items:center;padding:16px 10px}
  .divs{grid-template-columns:repeat(4,1fr)}
  .cats{grid-template-columns:repeat(2,1fr)}
  .prods{grid-template-columns:repeat(4,1fr);gap:18px}
  .certs{grid-template-columns:repeat(2,1fr);gap:18px;max-width:640px}
  .svc{grid-template-columns:repeat(4,1fr)}
  .counts{grid-template-columns:repeat(4,1fr);gap:28px}
  .count b{font-size:40px}
  .gal{grid-template-columns:repeat(3,1fr);gap:14px}
  .pack{grid-template-columns:repeat(3,1fr)}
  .team{grid-template-columns:repeat(5,1fr)}
  .quotes{grid-template-columns:repeat(3,1fr)}
  .split{grid-template-columns:1fr 1fr;gap:56px;align-items:stretch}
  /* five short labels of different lengths — give each one the same box and
     sit them on a common baseline, so the row reads as a row */
  .solar-feats{grid-template-columns:repeat(5,1fr);gap:12px;align-items:stretch}
  .solar-feats li{flex-direction:column;align-items:center;text-align:center;gap:8px;
    font-size:12.5px;justify-content:flex-start;padding:14px 8px;
    background:rgba(255,255,255,.55);border:1px solid var(--border);border-radius:10px}
  .solar-feats li span{display:block;min-height:2.7em;display:flex;align-items:center;justify-content:center}
  .solar-feats i{font-size:22px}
  .cta .wrap{display:flex;align-items:center;gap:44px}
  .cta .side{margin-left:auto;flex-shrink:0;text-align:right}
  .cta .phone{justify-content:flex-end;font-size:19px}
  .fgrid{grid-template-columns:1.7fr 1fr 1fr 1fr}
  .fbot{grid-template-columns:1fr auto}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}html{scroll-behavior:auto}}


/* =========================================================================
   PAGE-SPECIFIC STYLES — appended from the approved page designs
   ========================================================================= */

/* ===== Solar Installation Karachi ===== */
.narrow{max-width:820px}
.sec-head p{color:var(--muted);font-size:14.5px;margin:0;max-width:64ch}
.dark .sec-head p{color:#aeb5c6}
.reassure i{font-style:normal;color:var(--green);flex:0 0 auto}
.dark .reassure{color:#9aa3b8}
.micro a{font-weight:600;font-size:14.5px;text-decoration:none;color:var(--ember-700);border-bottom:2px solid rgba(245,158,11,.35);padding-bottom:2px;cursor:pointer}
.micro .or{font-size:13px;color:var(--muted)}
.dark .micro a{color:var(--ember)}
.ph b{font-size:12px;font-weight:700;color:#39415a}
.ph span{font-size:11px;line-height:1.35;margin-top:4px}
.ph code{font-size:10px;color:#7a8299;word-break:break-all;margin-top:5px;font-family:ui-monospace,monospace}
.ph.dark b{color:#dfe4ef}
.ph.dark code{color:#8f9ab5}
.announce .sep{display:none;opacity:.45}
.announce b{font-weight:700}
.logo span{display:block;font-family:Inter;font-size:9px;font-weight:500;color:var(--muted);letter-spacing:.08em}
.nav-desk a{text-decoration:none;padding:8px 0}
.nav-desk a[aria-current]{color:var(--ember-700);border-bottom:2px solid var(--ember)}
.panel-top .logo{color:#fff}
.panel-top .logo span{color:#8f9ab5}
.panel-top button{margin-left:auto;background:none;border:0;color:#fff;font-size:26px;cursor:pointer;width:44px;height:44px}
.panel .plain{display:block;padding:16px 0;font-weight:600;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.12)}
.line-row b{display:block;font-size:16px}
.line-row small{color:#aeb5c6;font-size:12.5px}
/* breadcrumb */
.crumb{background:var(--surface);font-size:12.5px;padding:11px 0;border-bottom:1px solid var(--border)}
.crumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin:0;padding:0}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:var(--navy)}
.crumb li[aria-current]{font-weight:600}
/* page hero */
.phero{background:var(--navy);color:#fff;padding:40px 0;position:relative;overflow:hidden}
.phero::after{content:"";position:absolute;inset:0;background:radial-gradient(100% 80% at 92% 20%,rgba(8,151,60,.26),transparent 62%);pointer-events:none}
.phero .wrap{position:relative;z-index:1}
.phero h1{font-size:clamp(29px,7vw,40px)}
.phero p{color:#c5cbdb;font-size:16px;max-width:54ch}
.phero-pills{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 24px;padding:0;list-style:none}
.phero-pills li{font-size:12.5px;font-weight:600;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);padding:8px 13px;border-radius:8px}
/* toc */
.toc{background:var(--surface-50);border:1px solid var(--border);border-radius:12px;padding:18px 20px;margin:0 0 32px}
.toc b{font-size:13px;letter-spacing:.03em;color:var(--muted);display:block;margin-bottom:10px;text-transform:uppercase}
.toc ol{margin:0;padding-left:18px;font-size:14.5px}
.toc li{margin:5px 0}
.toc a{color:var(--navy);text-decoration:none;border-bottom:1px solid var(--border)}
.toc a:hover{border-color:var(--ember)}
/* prose */
.prose h2{margin-top:44px}
.prose h3{margin-top:26px;font-size:17px}
.prose p{font-size:15.5px}
.prose ul{padding-left:20px;margin:0 0 1.1em}
.prose li{margin:6px 0}
.call.green{border-left-color:var(--green);background:var(--green-50)}
.call.red{border-left-color:var(--red);background:var(--red-50)}
.call b{display:block;margin-bottom:5px}
.call p:last-child{margin:0}
/* numbers row */
.vs{display:grid;gap:12px;margin:22px 0}
.vs div{border:1px solid var(--border);border-radius:10px;padding:16px}
.vs .bad{border-color:#E8C4BF;background:var(--red-50)}
.vs .good{border-color:#B9E3C8;background:var(--green-50)}
.vs b{display:block;font-family:'Plus Jakarta Sans';font-size:26px;font-weight:800;line-height:1}
.vs em{font-style:normal;font-size:13px;color:#55607a;display:block;margin-top:5px}
/* steps */
.steps{list-style:none;margin:0;padding:0;position:relative;counter-reset:s}
.steps::before{content:"";position:absolute;left:17px;top:14px;bottom:14px;width:2px;background:var(--border)}
.dark .steps::before{background:rgba(255,255,255,.16)}
.steps li{position:relative;padding:0 0 26px 52px}
.steps .n{position:absolute;left:0;top:0;width:36px;height:36px;border-radius:50%;background:var(--ember);color:var(--navy);font-weight:700;display:grid;place-items:center;font-size:15px}
.steps h3{font-size:17px;margin:0 0 4px}
.steps p{font-size:14px;margin:0;color:var(--muted)}
.dark .steps p{color:#aeb5c6}
.steps .dur{font-size:11.5px;font-weight:700;color:var(--green);display:block;margin-top:5px}
/* included list */
.incl{display:grid;gap:10px;padding:0;list-style:none;margin:0}
.incl li{display:flex;gap:11px;align-items:flex-start;background:var(--surface-50);border:1px solid var(--border);border-radius:9px;padding:13px 15px;font-size:14px}
.incl i{font-style:normal;color:var(--green);font-weight:700;flex:0 0 auto}
.incl b{display:block;font-size:14px}
.incl em{font-style:normal;font-size:12.5px;color:var(--muted);display:block;line-height:1.4}
/* comparison table */
.cmp{width:100%;border-collapse:collapse;font-size:13.5px;margin:20px 0}
.cmp th{background:var(--navy);color:#fff;text-align:left;padding:12px;font-weight:600;font-size:13px}
.cmp td{border:1px solid var(--border);padding:11px 12px;vertical-align:top}
.cmp tr:nth-child(even) td{background:var(--surface-50)}
.cmp td:first-child{font-weight:600;background:#fff}
.cmp-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* price factors */
.factors{display:grid;gap:12px}
.factor{border:1px solid var(--border);border-radius:10px;padding:16px;background:#fff}
.factor .amt{font-size:11.5px;font-weight:700;color:var(--ember-700);letter-spacing:.03em;display:block;margin-bottom:6px}
.factor b{display:block;font-size:15px;margin-bottom:4px}
.factor p{font-size:13.5px;color:var(--muted);margin:0}
.dark h2,.dark h3{color:#fff}
.dark p{color:#c5cbdb}
.alt{background:var(--surface)}
.gal .ph{min-height:126px;aspect-ratio:1}
.quote p{font-size:14px;color:#d3d8e4;margin:0}
.who-row .av{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.08);border:1px dashed #4b5673;display:grid;place-items:center;font-size:9px;color:#8f9ab5;flex:0 0 auto}
.who-row b{display:block;font-size:14px}
.who-row em{font-style:normal;font-size:12.5px;color:#aeb5c6}
/* form */
.formcard{background:#fff;border:1px solid var(--border);border-radius:14px;padding:22px;box-shadow:0 4px 24px rgba(0,11,37,.08);max-width:480px}
.formcard label{display:block;font-size:13px;font-weight:600;margin:0 0 6px}
.formcard input,.formcard select{width:100%;min-height:52px;border:1.5px solid var(--border);border-radius:8px;padding:0 13px;font-size:15.5px;font-family:Inter;margin-bottom:14px;background:#fff;color:var(--navy)}
.formcard input:focus,.formcard select:focus{border-color:var(--ember);outline:none}
.formcard .hp{position:absolute;left:-9999px}
/* ask list */
.ask{counter-reset:q;list-style:none;padding:0;margin:0;display:grid;gap:11px}
.ask li{display:flex;gap:13px;align-items:flex-start;border:1px solid var(--border);border-radius:10px;padding:14px 16px;background:#fff}
.ask li::before{counter-increment:q;content:counter(q);width:26px;height:26px;border-radius:50%;background:var(--navy);color:#fff;font-size:12px;font-weight:700;display:grid;place-items:center;flex:0 0 auto;margin-top:1px}
.ask b{display:block;font-size:14.5px;margin-bottom:3px}
.ask em{font-style:normal;font-size:12.5px;color:var(--muted);line-height:1.45;display:block}
/* faq */
.faq details{border-bottom:1px solid var(--border)}
.faq summary{padding:17px 40px 17px 0;font-weight:600;font-size:15px;cursor:pointer;list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:8px;top:15px;font-size:22px;color:var(--ember-700);line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq .ans{padding:0 0 17px;font-size:14.5px;color:#3a4155}
.faq .ans p{margin:0 0 .7em}
/* related links — internal linking block for SEO */
.rel{display:grid;gap:10px}
.rel a{display:flex;gap:12px;align-items:center;border:1px solid var(--border);border-radius:10px;padding:14px 16px;text-decoration:none;background:#fff}
.rel a:hover{border-color:var(--ember)}
.rel i{font-style:normal;font-size:18px}
.rel b{display:block;font-size:14.5px}
.rel em{font-style:normal;font-size:12.5px;color:var(--muted)}
.cta h2{font-size:26px}
.cta p{color:#4a3a12;font-size:15px;margin:0 0 18px}
.cta .reassure{color:#5c4a1c}
.cta .reassure i{color:#2c6b3f}
footer h4{font-family:'Plus Jakarta Sans';color:#fff;font-size:15px;margin:0 0 10px}
footer a{color:#aeb5c6;text-decoration:none;display:block;padding:5px 0}
footer a:hover{color:#fff}
.fbrand .logo{color:#fff}
.fbrand .logo span{color:#8f9ab5}
.fab[data-open="1"] .fab-items{opacity:1;transform:none;pointer-events:auto}
.fab[data-open="1"] .fab-toggle{background:var(--navy);transform:rotate(90deg);box-shadow:0 8px 24px rgba(0,11,37,.3)}
@media(min-width:860px){
  .announce .sep{display:inline}
  .phero{padding:76px 0 68px}
  .phero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
  .vs{grid-template-columns:1fr 1fr;gap:18px}
  .vs b{font-size:34px}
  .steps{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
  .steps::before{left:18px;right:18px;top:18px;bottom:auto;height:2px;width:auto}
  .steps li{padding:52px 0 0}
  .incl{grid-template-columns:1fr 1fr}
  .factors{grid-template-columns:repeat(3,1fr)}
  .rel{grid-template-columns:repeat(3,1fr)}
  .cta .wrap{display:flex;align-items:center;gap:44px}
  .cta .side{margin-left:auto;flex-shrink:0}
}
.toc{max-width:560px}

/* ===== Solar Packages ===== */
.narrow{max-width:820px}
.sec-head p{color:var(--muted);font-size:14.5px;margin:0;max-width:64ch}
.dark .sec-head p{color:#aeb5c6}
.reassure i{font-style:normal;color:var(--green);flex:0 0 auto}
.dark .reassure{color:#9aa3b8}
.micro a{font-weight:600;font-size:14.5px;text-decoration:none;color:var(--ember-700);border-bottom:2px solid rgba(245,158,11,.35);padding-bottom:2px;cursor:pointer}
.micro .or{font-size:13px;color:var(--muted)}
.dark .micro a{color:var(--ember)}
.ph b{font-size:12px;font-weight:700;color:#39415a}
.ph span{font-size:11px;line-height:1.35;margin-top:4px}
.ph code{font-size:10px;color:#7a8299;word-break:break-all;margin-top:5px;font-family:ui-monospace,monospace}
.ph.dark b{color:#dfe4ef}
.ph.dark code{color:#8f9ab5}
.announce .sep{display:none;opacity:.45}
.announce b{font-weight:700}
.logo span{display:block;font-family:Inter;font-size:9px;font-weight:500;color:var(--muted);letter-spacing:.08em}
.nav-desk a{text-decoration:none;padding:8px 0}
.nav-desk a[aria-current]{color:var(--ember-700);border-bottom:2px solid var(--ember)}
.panel-top .logo{color:#fff}
.panel-top .logo span{color:#8f9ab5}
.panel-top button{margin-left:auto;background:none;border:0;color:#fff;font-size:26px;cursor:pointer;width:44px;height:44px}
.panel .plain{display:block;padding:16px 0;font-weight:600;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.12)}
.line-row b{display:block;font-size:16px}
.line-row small{color:#aeb5c6;font-size:12.5px}
.crumb{background:var(--surface);font-size:12.5px;padding:11px 0;border-bottom:1px solid var(--border)}
.crumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin:0;padding:0}
.crumb a{color:var(--muted);text-decoration:none}
.crumb li[aria-current]{font-weight:600}
.phero{background:var(--navy);color:#fff;padding:40px 0;position:relative;overflow:hidden}
.phero::after{content:"";position:absolute;inset:0;background:radial-gradient(100% 80% at 90% 25%,rgba(245,158,11,.22),transparent 62%);pointer-events:none}
.phero .wrap{position:relative;z-index:1}
.phero h1{font-size:clamp(29px,7vw,40px)}
.phero p{color:#c5cbdb;font-size:16px;max-width:56ch}
/* honesty block */
.honest{border:1px solid var(--border);border-left:3px solid var(--ember);border-radius:0 12px 12px 0;background:var(--surface-50);padding:22px}
.honest b{display:block;font-family:'Plus Jakarta Sans',Inter,sans-serif;font-weight:800;
  font-size:16.5px;letter-spacing:-.01em;margin-bottom:8px}
.honest p{margin:0 0 10px;font-size:14.5px;line-height:1.6;color:#4b5568}
.honest p:last-child{margin-bottom:0}
.honest h2{font-size:21px}
.honest ol{margin:0;padding-left:20px;font-size:14.5px}
.honest li{margin:8px 0}
/* toggle */
.toggle-wrap{text-align:center;margin:0 0 28px}
.toggle{display:inline-flex;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:4px;width:100%;max-width:360px}
.toggle button{flex:1;min-height:46px;border:0;background:none;border-radius:999px;font-weight:600;font-size:14.5px;cursor:pointer;color:var(--muted);font-family:Inter;transition:background .15s,color .15s}
.toggle button[aria-pressed="true"]{background:var(--navy);color:#fff}
.toggle-note{font-size:12.5px;color:var(--muted);margin:10px 0 0}
/* package cards */
.pkgs{display:grid;gap:18px}
.pkg{background:#fff;border:1px solid var(--border);border-radius:14px;padding:22px;position:relative;display:flex;flex-direction:column}
.pkg.pop{border:2px solid var(--ember);box-shadow:0 14px 44px rgba(0,11,37,.14)}
.pkg-badge{position:absolute;top:-12px;left:22px;background:var(--ember);color:var(--navy);font-size:11px;font-weight:700;padding:5px 12px;border-radius:999px;letter-spacing:.03em}
.pkg h3{font-size:21px;margin-bottom:4px}
.pkg .who{font-size:13px;color:var(--muted);margin:0 0 14px;padding-bottom:14px;border-bottom:1px solid var(--border)}
.pkg .lbl{font-size:11px;font-weight:700;letter-spacing:.05em;color:var(--muted);display:block;margin-bottom:8px}
.pkg ul{list-style:none;margin:0 0 16px;padding:0}
.pkg li{font-size:13.5px;padding:5px 0 5px 23px;position:relative;line-height:1.4}
.pkg li::before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:700}
.price{padding-top:14px;border-top:1px solid var(--border);margin-bottom:16px;margin-top:auto}
.price small{display:block;font-size:12px;color:var(--muted)}
.price b{font-family:Inter;font-size:26px;font-weight:700;display:block;line-height:1.2}
.fill{background:#FFF4DC;border-bottom:2px dashed var(--ember-700);padding:0 8px;color:var(--ember-700);font-size:22px}
.price .per{font-size:12px;color:var(--muted);font-weight:500}
/* factors */
.factors{display:grid;gap:12px}
.factor{border:1px solid var(--border);border-radius:10px;padding:16px;background:#fff}
.factor .amt{font-size:11px;font-weight:700;color:var(--ember-700);letter-spacing:.04em;display:block;margin-bottom:6px}
.factor b{display:block;font-size:15px;margin-bottom:4px}
.factor p{font-size:13.5px;color:var(--muted);margin:0}
/* in / out */
.inout{display:grid;gap:18px}
.col{border:1px solid var(--border);border-radius:12px;padding:20px}
.col.in{border-top:3px solid var(--green)}
.col.out{border-top:3px solid var(--muted);background:var(--surface-50)}
.col h3{font-size:17px}
.col ul{list-style:none;margin:0;padding:0}
.col li{font-size:13.5px;padding:6px 0 6px 23px;position:relative;line-height:1.4}
.col.in li::before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:700}
.col.out li::before{content:"—";position:absolute;left:0;color:var(--muted);font-weight:700}
/* payment */
.pay{display:grid;gap:12px;counter-reset:p}
.payrow{display:flex;gap:14px;align-items:flex-start;background:var(--navy-800);border-radius:10px;padding:16px}
.payrow .pc{width:32px;height:32px;border-radius:50%;background:var(--ember);color:var(--navy);font-weight:700;font-size:13px;display:grid;place-items:center;flex:0 0 auto}
.payrow b{display:block;font-size:15px;color:#fff}
.payrow em{font-style:normal;font-size:13px;color:#aeb5c6;display:block;line-height:1.45}
.payrow .amt{margin-left:auto;font-family:'Plus Jakarta Sans';font-weight:800;font-size:18px;color:var(--ember);flex:0 0 auto}
/* table */
.cmp{width:100%;border-collapse:collapse;font-size:13.5px;margin:20px 0}
.cmp th{background:var(--navy);color:#fff;text-align:left;padding:12px;font-weight:600;font-size:13px}
.cmp td{border:1px solid var(--border);padding:11px 12px;vertical-align:top}
.cmp tr:nth-child(even) td{background:var(--surface-50)}
.cmp td:first-child{font-weight:600;background:#fff}
.cmp-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* cheap vs right */
.cheap{display:grid;gap:12px}
.cheapitem{border:1px solid #E8C4BF;background:var(--red-50);border-radius:10px;padding:16px}
.cheapitem b{display:block;font-size:14.5px;margin-bottom:4px;color:var(--red)}
.cheapitem p{font-size:13.5px;margin:0;color:#5b3c38}
.dark h2,.dark h3{color:#fff}
.dark p{color:#c5cbdb}
.alt{background:var(--surface)}
.gal .ph{min-height:126px;aspect-ratio:1}
.quote p{font-size:14px;color:#d3d8e4;margin:0}
.who-row .av{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.08);border:1px dashed #4b5673;display:grid;place-items:center;font-size:9px;color:#8f9ab5;flex:0 0 auto}
.who-row b{display:block;font-size:14px}
.who-row em{font-style:normal;font-size:12.5px;color:#aeb5c6}
.faq details{border-bottom:1px solid var(--border)}
.faq summary{padding:17px 40px 17px 0;font-weight:600;font-size:15px;cursor:pointer;list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:8px;top:15px;font-size:22px;color:var(--ember-700);line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq .ans{padding:0 0 17px;font-size:14.5px;color:#3a4155}
.faq .ans p{margin:0 0 .7em}
.rel{display:grid;gap:10px}
.rel a{display:flex;gap:12px;align-items:center;border:1px solid var(--border);border-radius:10px;padding:14px 16px;text-decoration:none;background:#fff}
.rel a:hover{border-color:var(--ember)}
.rel i{font-style:normal;font-size:18px}
.rel b{display:block;font-size:14.5px}
.rel em{font-style:normal;font-size:12.5px;color:var(--muted)}
.cta h2{font-size:26px}
.cta p{color:#4a3a12;font-size:15px;margin:0 0 18px}
.cta .reassure{color:#5c4a1c}
.cta .reassure i{color:#2c6b3f}
footer h4{font-family:'Plus Jakarta Sans';color:#fff;font-size:15px;margin:0 0 10px}
footer a{color:#aeb5c6;text-decoration:none;display:block;padding:5px 0}
footer a:hover{color:#fff}
.fbrand .logo{color:#fff}
.fbrand .logo span{color:#8f9ab5}
.fab[data-open="1"] .fab-items{opacity:1;transform:none;pointer-events:auto}
.fab[data-open="1"] .fab-toggle{background:var(--navy);transform:rotate(90deg);box-shadow:0 8px 24px rgba(0,11,37,.3)}
@media(min-width:860px){
  .announce .sep{display:inline}
  .phero{padding:72px 0 64px}
  .phero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
  .pkgs{grid-template-columns:repeat(4,1fr);gap:16px;align-items:stretch}
  .pkg{padding:20px 18px}
  .factors{grid-template-columns:repeat(3,1fr)}
  .inout{grid-template-columns:1fr 1fr}
  .cheap{grid-template-columns:repeat(2,1fr)}
  .rel{grid-template-columns:repeat(3,1fr)}
  .cta .wrap{display:flex;align-items:center;gap:44px}
  .cta .side{margin-left:auto;flex-shrink:0}
}
/* ===== Elevated Solar Structures ===== */
.narrow{max-width:820px}
.sec-head p{color:var(--muted);font-size:14.5px;margin:0;max-width:64ch}
.dark .sec-head p{color:#aeb5c6}
.reassure i{font-style:normal;color:var(--green);flex:0 0 auto}
.dark .reassure{color:#9aa3b8}
.micro a{font-weight:600;font-size:14.5px;text-decoration:none;color:var(--ember-700);border-bottom:2px solid rgba(245,158,11,.35);padding-bottom:2px;cursor:pointer}
.micro .or{font-size:13px;color:var(--muted)}
.dark .micro a{color:var(--ember)}
.ph b{font-size:12px;font-weight:700;color:#39415a}
.ph span{font-size:11px;line-height:1.35;margin-top:4px}
.ph code{font-size:10px;color:#7a8299;word-break:break-all;margin-top:5px;font-family:ui-monospace,monospace}
.ph.dark b{color:#dfe4ef}
.ph.dark code{color:#8f9ab5}
.announce .sep{display:none;opacity:.45}
.announce b{font-weight:700}
.logo span{display:block;font-family:Inter;font-size:9px;font-weight:500;color:var(--muted);letter-spacing:.08em}
.nav-desk a{text-decoration:none;padding:8px 0}
.nav-desk a[aria-current]{color:var(--ember-700);border-bottom:2px solid var(--ember)}
.panel-top .logo{color:#fff}
.panel-top .logo span{color:#8f9ab5}
.panel-top button{margin-left:auto;background:none;border:0;color:#fff;font-size:26px;cursor:pointer;width:44px;height:44px}
.panel .plain{display:block;padding:16px 0;font-weight:600;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.12)}
.line-row b{display:block;font-size:16px}
.line-row small{color:#aeb5c6;font-size:12.5px}
.crumb{background:var(--surface);font-size:12.5px;padding:11px 0;border-bottom:1px solid var(--border)}
.crumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin:0;padding:0}
.crumb a{color:var(--muted);text-decoration:none}
.crumb li[aria-current]{font-weight:600}
.phero{background:var(--navy);color:#fff;padding:40px 0;position:relative;overflow:hidden}
.phero::after{content:"";position:absolute;inset:0;background:radial-gradient(100% 80% at 90% 22%,rgba(8,151,60,.26),transparent 62%);pointer-events:none}
.phero .wrap{position:relative;z-index:1}
.phero h1{font-size:clamp(29px,7vw,40px)}
.phero p{color:#c5cbdb;font-size:16px;max-width:54ch}
.phero-pills{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 24px;padding:0;list-style:none}
.phero-pills li{font-size:12.5px;font-weight:600;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);padding:8px 13px;border-radius:8px}
.toc{background:var(--surface-50);border:1px solid var(--border);border-radius:12px;padding:18px 20px;margin:0 0 32px}
.toc b{font-size:12px;letter-spacing:.04em;color:var(--muted);display:block;margin-bottom:10px;text-transform:uppercase}
.toc ol{margin:0;padding-left:18px;font-size:14.5px}
.toc li{margin:5px 0}
.toc a{color:var(--navy);text-decoration:none;border-bottom:1px solid var(--border)}
.toc a:hover{border-color:var(--ember)}
.prose h2{margin-top:44px}
.prose h3{margin-top:26px;font-size:17px}
.prose p{font-size:15.5px}
.prose ul{padding-left:20px;margin:0 0 1.1em}
.prose li{margin:6px 0}
.call.green{border-left-color:var(--green);background:var(--green-50)}
.call.red{border-left-color:var(--red);background:var(--red-50)}
.call b{display:block;margin-bottom:5px}
.call p:last-child{margin:0}
/* before / after */
.ba{display:grid;gap:16px}
.bacard{border:1px solid var(--border);border-radius:12px;overflow:hidden}
.bacard .ph{border:0;border-radius:0;min-height:190px}
.bacard .lab{padding:14px 16px}
.bacard.b{border-top:3px solid var(--muted)}
.bacard.a{border-top:3px solid var(--green)}
.bacard h3{font-size:16px;margin-bottom:5px}
.bacard p{font-size:13.5px;color:var(--muted);margin:0}
.spec{border:1px solid var(--border);border-radius:10px;padding:16px;background:#fff}
.spec .ico{font-size:19px;display:block;margin-bottom:8px}
.spec b{display:block;font-size:15px;margin-bottom:4px}
.spec p{font-size:13.5px;color:var(--muted);margin:0}
/* build steps */
.build{list-style:none;margin:0;padding:0;position:relative}
.build::before{content:"";position:absolute;left:17px;top:14px;bottom:14px;width:2px;background:rgba(255,255,255,.16)}
.build li{position:relative;padding:0 0 26px 52px}
.build .n{position:absolute;left:0;top:0;width:36px;height:36px;border-radius:50%;background:var(--ember);color:var(--navy);font-weight:700;display:grid;place-items:center;font-size:15px}
.build h3{font-size:16.5px;margin:0 0 4px}
.build p{font-size:14px;margin:0;color:#aeb5c6}
/* use cases */
.uses{display:grid;gap:12px}
.use{border:1px solid var(--border);border-radius:10px;padding:16px;background:var(--surface-50)}
.use b{display:block;font-size:15px;margin-bottom:4px}
.use p{font-size:13.5px;color:var(--muted);margin:0}
/* red flags */
.flags{display:grid;gap:12px}
.flag{border:1px solid #E8C4BF;background:var(--red-50);border-radius:10px;padding:16px}
.flag b{display:block;font-size:14.5px;margin-bottom:4px;color:var(--red)}
.flag p{font-size:13.5px;margin:0;color:#5b3c38}
.cmp{width:100%;border-collapse:collapse;font-size:13.5px;margin:20px 0}
.cmp th{background:var(--navy);color:#fff;text-align:left;padding:12px;font-weight:600;font-size:13px}
.cmp td{border:1px solid var(--border);padding:11px 12px;vertical-align:top}
.cmp tr:nth-child(even) td{background:var(--surface-50)}
.cmp td:first-child{font-weight:600;background:#fff}
.cmp-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.dark h2,.dark h3{color:#fff}
.dark p{color:#c5cbdb}
.alt{background:var(--surface)}
.gal .ph{min-height:126px;aspect-ratio:1}
.quote p{font-size:14px;color:#d3d8e4;margin:0}
.who-row .av{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.08);border:1px dashed #4b5673;display:grid;place-items:center;font-size:9px;color:#8f9ab5;flex:0 0 auto}
.who-row b{display:block;font-size:14px}
.who-row em{font-style:normal;font-size:12.5px;color:#aeb5c6}
.faq details{border-bottom:1px solid var(--border)}
.faq summary{padding:17px 40px 17px 0;font-weight:600;font-size:15px;cursor:pointer;list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:8px;top:15px;font-size:22px;color:var(--ember-700);line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq .ans{padding:0 0 17px;font-size:14.5px;color:#3a4155}
.faq .ans p{margin:0 0 .7em}
.rel{display:grid;gap:10px}
.rel a{display:flex;gap:12px;align-items:center;border:1px solid var(--border);border-radius:10px;padding:14px 16px;text-decoration:none;background:#fff}
.rel a:hover{border-color:var(--ember)}
.rel i{font-style:normal;font-size:18px}
.rel b{display:block;font-size:14.5px}
.rel em{font-style:normal;font-size:12.5px;color:var(--muted)}
.cta h2{font-size:26px}
.cta p{color:#4a3a12;font-size:15px;margin:0 0 18px}
.cta .reassure{color:#5c4a1c}
.cta .reassure i{color:#2c6b3f}
footer h4{font-family:'Plus Jakarta Sans';color:#fff;font-size:15px;margin:0 0 10px}
footer a{color:#aeb5c6;text-decoration:none;display:block;padding:5px 0}
footer a:hover{color:#fff}
.fbrand .logo{color:#fff}
.fbrand .logo span{color:#8f9ab5}
.fab[data-open="1"] .fab-items{opacity:1;transform:none;pointer-events:auto}
.fab[data-open="1"] .fab-toggle{background:var(--navy);transform:rotate(90deg);box-shadow:0 8px 24px rgba(0,11,37,.3)}
@media(min-width:860px){
  .announce .sep{display:inline}
  .phero{padding:74px 0 66px}
  .phero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
  .ba{grid-template-columns:1fr 1fr}
  .build{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
  .build::before{left:18px;right:18px;top:18px;bottom:auto;height:2px;width:auto}
  .build li{padding:52px 0 0}
  .uses{grid-template-columns:repeat(2,1fr)}
  .flags{grid-template-columns:repeat(2,1fr)}
  .rel{grid-template-columns:repeat(3,1fr)}
  .cta .wrap{display:flex;align-items:center;gap:44px}
  .cta .side{margin-left:auto;flex-shrink:0}
  .toc{max-width:560px}
}

/* =========================================================================
   MOBILE SAFETY NET
   Anything laid out in columns collapses to one on a phone, and nothing is
   allowed to push the page sideways.
   ========================================================================= */
@media(max-width:859px){
  .pkgs,.factors,.inout,.cheap,.rel,.incl,.vs,.uses,.flags,.ba,.build,.steps,
  .solar-feats,.team,.creds-grid,.usp-grid{grid-template-columns:1fr!important}
  .phero .wrap,.cta .wrap{display:block!important}
  .cta .side{margin:18px 0 0!important}
  .pkg{padding:20px 18px}
}
@media(max-width:600px){
  .gal,.certs,.prods,.counts{grid-template-columns:1fr 1fr}
}
html,body{overflow-x:hidden;max-width:100%}
img,video,table{max-width:100%}

/* =========================================================================
   WHERE WE WORK — the map (sits in the split, in place of a photo)
   Drawn as SVG from real coordinates, so it stays sharp at any size and
   loads with the page. No map service, no API key, nothing to break.
   ========================================================================= */
.pp-reach-map{background:var(--navy);border-radius:16px;padding:14px;position:relative;overflow:hidden;
  align-self:stretch;display:flex;align-items:center}
.pp-reach-map::after{content:"";position:absolute;right:-150px;top:-150px;width:520px;height:520px;
  border-radius:50%;background:radial-gradient(closest-side,rgba(245,158,11,.10),transparent 70%);
  pointer-events:none}
.pp-map{width:100%;height:auto;display:block;max-height:560px;position:relative;z-index:1}
.pp-map-land{fill:#141E36;stroke:#2B3A5C;stroke-width:2;stroke-linejoin:round}

.pp-pin .dot{fill:var(--ember)}
.pp-pin .pulse{fill:var(--ember);opacity:.20;transform-origin:center;
  animation:pp-ping 2.6s cubic-bezier(.3,0,.2,1) infinite}
.pp-pin text{fill:#fff;font-family:Inter,sans-serif;font-size:17px;font-weight:600;
  paint-order:stroke;stroke:#000B25;stroke-width:5px;stroke-linejoin:round}
.pp-pin.hq .dot{fill:#fff}
.pp-pin.hq text{font-weight:800;font-size:19px}
.pp-pin.hq .pulse{fill:#fff;opacity:.26}

@keyframes pp-ping{
  0%{transform:scale(1);opacity:.30}
  70%{transform:scale(2.6);opacity:0}
  100%{transform:scale(2.6);opacity:0}
}
@media (prefers-reduced-motion:reduce){ .pp-pin .pulse{animation:none} }
@media(max-width:600px){
  .pp-pin text{font-size:21px}
  .pp-pin.hq text{font-size:23px}
  .pp-reach-map{padding:8px}
}

/* =========================================================================
   RECOGNITION — dealerships and awards, oldest first.
   Read as a run of years, which is the whole argument.
   ========================================================================= */
.pp-creds{display:grid;gap:12px;margin-top:22px}
@media(min-width:720px){ .pp-creds{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))} }
.pp-cred{background:#fff;border:1px solid var(--border);border-radius:12px;padding:16px 18px;
  position:relative;overflow:hidden}
.pp-cred-year{display:inline-block;font-family:'Plus Jakarta Sans',Inter,sans-serif;font-weight:800;
  font-size:13px;letter-spacing:.04em;color:var(--muted);background:var(--surface-50);
  border-radius:999px;padding:3px 10px;margin-bottom:10px}
.pp-cred b{display:block;font-family:'Plus Jakarta Sans',Inter,sans-serif;font-weight:800;
  font-size:17px;letter-spacing:-.01em;line-height:1.25;color:var(--navy)}
.pp-cred em{font-style:normal;display:block;color:var(--muted);font-size:14px;margin-top:4px}
/* the most recent one carries the brand colour */
.pp-cred.is-latest{background:var(--navy);border-color:var(--navy)}
.pp-cred.is-latest::after{content:"";position:absolute;right:-90px;top:-90px;width:280px;height:280px;
  border-radius:50%;background:radial-gradient(closest-side,rgba(245,158,11,.22),transparent 70%);
  pointer-events:none}
.pp-cred.is-latest .pp-cred-year{background:var(--ember);color:var(--navy)}
.pp-cred.is-latest b{color:#fff;position:relative;z-index:1}
.pp-cred.is-latest em{color:#c2cadb;position:relative;z-index:1}

/* =========================================================================
   AWARD BAND — kept for any page that still uses it
   ========================================================================= */
.pp-award{display:flex;align-items:center;gap:16px;background:var(--navy);color:#fff;
  border-radius:14px;padding:18px 22px;margin-top:22px;position:relative;overflow:hidden}
.pp-award::after{content:"";position:absolute;right:-120px;top:-120px;width:380px;height:380px;
  border-radius:50%;background:radial-gradient(closest-side,rgba(245,158,11,.20),transparent 70%);
  pointer-events:none}
.pp-award-medal{font-size:30px;line-height:1;flex:0 0 auto;position:relative;z-index:1}
.pp-award-txt{position:relative;z-index:1;min-width:0}
.pp-award-txt b{display:block;font-family:'Plus Jakarta Sans',Inter,sans-serif;font-weight:800;
  font-size:clamp(17px,2.4vw,21px);letter-spacing:-.01em}
.pp-award-txt em{font-style:normal;display:block;color:#c2cadb;font-size:14px;margin-top:4px;line-height:1.45}
.pp-award-year{margin-left:auto;flex:0 0 auto;position:relative;z-index:1;
  background:var(--ember);color:var(--navy);font-family:'Plus Jakarta Sans',Inter,sans-serif;
  font-weight:800;font-size:15px;padding:8px 14px;border-radius:8px}
@media(max-width:560px){
  .pp-award{flex-wrap:wrap;gap:12px;padding:16px}
  .pp-award-year{margin-left:0;order:3}
}

/* =========================================================================
   404 — a wrong link should still lead somewhere
   ========================================================================= */
.pp-404 .wrap{display:block;max-width:780px}
.pp-404 h1{font-size:clamp(28px,6vw,44px);margin:0 0 12px}
.pp-404-sub{color:#c2cadb;font-size:16px;line-height:1.55;max-width:56ch;margin:0}

.pp-404-links{display:grid;gap:12px;margin:22px 0 0}
@media(min-width:620px){ .pp-404-links{grid-template-columns:1fr 1fr} }
.pp-404-card{display:block;background:#fff;border:1px solid var(--border);border-radius:12px;
  padding:16px 18px;text-decoration:none;color:var(--navy);transition:border-color .15s,transform .15s}
.pp-404-card:hover{border-color:var(--ember);transform:translateY(-1px)}
.pp-404-card b{display:block;font-family:'Plus Jakarta Sans',Inter,sans-serif;font-weight:800;font-size:16.5px}
.pp-404-card em{font-style:normal;display:block;color:var(--muted);font-size:13.5px;margin-top:4px;line-height:1.45}

.pp-404-wa{margin-top:26px;background:var(--surface-50);border:1px solid var(--border);
  border-left:3px solid var(--green);border-radius:0 12px 12px 0;padding:20px 22px}
.pp-404-wa b{display:block;font-family:'Plus Jakarta Sans',Inter,sans-serif;font-weight:800;font-size:16.5px}
.pp-404-wa p{margin:6px 0 14px;color:#4b5568;font-size:14.5px}
.pp-404-wa .btn{display:inline-flex}

/* =========================================================================
   WHITE CARDS INSIDE DARK SECTIONS
   A dark section sets white text. Any white card inside it then inherits
   white-on-white and its headings disappear. Every such card states its own
   colour here, so it can never happen again.
   ========================================================================= */
.chain-item,.prod,.cert,.factor,.formcard,.ask li,.rel a,.pkg,.spec,.pp-cred,
.nav-desk .sub-menu{color:var(--navy)}
.chain-item b,.prod b,.cert b,.factor b,.formcard b,.ask b,.rel a b,.pkg b,.spec b,
.pp-cred b,.ask li strong{color:var(--navy)}
.chain-item h3,.prod h3,.factor h3,.formcard h3,.pkg h3,.spec h3,.rel a h3{color:var(--navy)}
.chain-item p,.factor p,.formcard p,.spec p{color:#4b5568}
.ask em,.cert em,.prod .specs,.pkg .who{color:var(--muted)}
/* the one card that is meant to be dark keeps its light text */
.pp-cred.is-latest b{color:#fff}
.pp-cred.is-latest em{color:#c2cadb}

/* =========================================================================
   LEAD FORM — three fields, because a fourth costs more leads than it gains
   ========================================================================= */
.pp-lead{background:var(--navy);border-radius:16px;padding:26px 24px;margin-top:26px;
  color:#fff;position:relative;overflow:hidden}
.pp-lead::after{content:"";position:absolute;right:-140px;top:-140px;width:440px;height:440px;
  border-radius:50%;background:radial-gradient(closest-side,rgba(245,158,11,.16),transparent 70%);
  pointer-events:none}
.pp-lead > *{position:relative;z-index:1}
.pp-lead-head b{display:block;font-family:'Plus Jakarta Sans',Inter,sans-serif;font-weight:800;
  font-size:clamp(20px,3vw,26px);letter-spacing:-.02em;margin-bottom:8px}
.pp-lead-head p{color:#c2cadb;margin:0 0 18px;font-size:15px;line-height:1.55;max-width:60ch}

.pp-lead-form label{display:block;font-size:13px;font-weight:600;color:#9aa6c0;margin-bottom:12px}
.pp-lead-form label span{font-weight:500;opacity:.7}
.pp-lead-form input{display:block;width:100%;margin-top:6px;min-height:50px;border-radius:10px;
  border:1.5px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#fff;
  padding:12px 14px;font-size:16px;font-family:Inter,sans-serif}
.pp-lead-form input::placeholder{color:#7f8aa3}
.pp-lead-form input:focus{outline:none;border-color:var(--ember);background:rgba(255,255,255,.10)}
.pp-lead-row{display:grid;gap:12px}
@media(min-width:620px){ .pp-lead-row{grid-template-columns:1fr 1fr} }
.pp-lead-btn{width:100%;min-height:54px;margin-top:6px;font-size:16px}
.pp-lead-note{color:#8f9ab5;font-size:12.5px;margin:12px 0 0;text-align:center}
.pp-lead-err{background:rgba(220,80,70,.16);border:1px solid rgba(220,80,70,.4);color:#ffd7d3;
  border-radius:9px;padding:10px 14px;font-size:14px;margin:0 0 14px}
/* honeypot: a real person never sees this */
.pp-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

.pp-lead-done b{display:block;font-family:'Plus Jakarta Sans',Inter,sans-serif;font-weight:800;
  font-size:22px;color:#3BD874;margin-bottom:8px}
.pp-lead-done p{color:#c2cadb;margin:0 0 16px;line-height:1.6}
.pp-lead-done .btn{display:inline-flex}