/* ═══════════════════════════════════════════════════════════════════════
   GREENKEY STATIC SITE — SHARED STYLESHEET (assets/css/site.css)
   Extracted 2026-07-11 from the approved homepage (index.html) so every
   page shares one design shell. Page-specific rules stay on the page.
   Design tokens: Alexandria font; forest #1E3512 / action #35691B / lime #8CC63F
═══════════════════════════════════════════════════════════════════════ */
:root{
  /* Greens derived from the ACTUAL logo green #8CC63F (sampled from the PNG) */
  --forest:#1E3512; --forest2:#16290C; --action:#35691B; --lime:#8CC63F;
  --lime-soft:#A6D26A; --ink:#1A2413; --body:#48543f; --mist:#F5F8F0;
  --line:#E3EADB; --white:#fff;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Alexandria',sans-serif;color:var(--ink);background:var(--white);line-height:1.65}
h1,h2,h3,.disp{font-family:'Alexandria',sans-serif}
.wrap{max-width:1320px;margin:0 auto;padding:0 24px}
.btn{display:inline-block;padding:14px 28px;border-radius:8px;font-weight:700;font-size:15px;text-decoration:none}
.btn-lime{background:var(--lime);color:var(--forest2)}
.btn-lime:hover{background:#8bc34a}
.btn-ghost{border:1.5px solid #b9ccb0;color:var(--action)}
.cta-band .btn-ghost{border-color:rgba(255,255,255,.35);color:#e8f0e8}
.btn-green{background:var(--action);color:#fff}
.ph{border:2px dashed #9ab89a;background:repeating-linear-gradient(45deg,#f2f7f0,#f2f7f0 12px,#eaf2e8 12px,#eaf2e8 24px);display:flex;align-items:center;justify-content:center;text-align:center;color:#557055;font-size:13px;font-weight:600;padding:14px;border-radius:12px}
.ph.dark{background:repeating-linear-gradient(45deg,#1a3323,#1a3323 12px,#16301f 12px,#16301f 24px);border-color:#3e5c46;color:#9fbf9f}
.eyebrow{font-size:12px;letter-spacing:3px;font-weight:700;color:var(--lime)}
.sec-title{font-size:38px;font-weight:800;letter-spacing:-.5px;line-height:1.15}
.sec-sub{color:var(--body);font-size:16.5px;max-width:640px;margin-top:12px}
.check{display:flex;gap:9px;align-items:center;font-size:14px;font-weight:600}
.check .dot{width:19px;height:19px;border-radius:50%;background:var(--lime);color:var(--forest2);display:inline-flex;align-items:center;justify-content:center;font-size:12px;flex:none}
/* NAV */
nav{position:sticky;top:0;background:rgba(255,255,255,.97);border-bottom:1px solid var(--line);z-index:50}
.nav-in{display:flex;align-items:center;gap:24px;padding:8px 24px;max-width:1400px;margin:0 auto}
.logo{font-family:'Alexandria';font-weight:800;font-size:21px;color:var(--forest);text-decoration:none;letter-spacing:-.5px}
.logo em{color:var(--lime);font-style:normal}
.logo small{display:block;font-size:9px;letter-spacing:4px;color:#6a7a6a;font-weight:600}
.nav-links{display:flex;flex:0 1 auto;justify-content:center;gap:30px;font-size:14.5px;font-weight:600}
.nav-links a{color:#33421f;text-decoration:none;padding:6px 0;white-space:nowrap}
.nav-links a:hover{color:var(--action)}
.nav-brand{flex:1;display:flex;align-items:center}
.nav-actions{flex:1;display:flex;align-items:center;justify-content:flex-end;gap:14px}
.nav-phone{font-weight:700;color:var(--forest);font-size:14.5px;text-decoration:none;white-space:nowrap}
nav .btn{white-space:nowrap}
/* HERO — light, airy, green as accent */
header{background:
  radial-gradient(720px 420px at 82% 12%, rgba(140,198,63,.22), transparent 65%),
  radial-gradient(560px 380px at 8% 88%, rgba(53,105,27,.10), transparent 60%),
  linear-gradient(180deg,#F4F9EC 0%,#E2EFD1 100%);
  color:var(--ink);padding:76px 0 64px;border-bottom:3px solid var(--lime)}
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero h1{font-size:58px;line-height:1.14;font-weight:800;letter-spacing:-1.5px;color:var(--forest)}
.hero h1 em{color:var(--forest);font-style:normal;text-decoration:underline;text-decoration-color:var(--lime);text-decoration-thickness:7px;text-underline-offset:9px;text-decoration-skip-ink:none}
.hero p.lead{margin:22px 0 28px;font-size:17.5px;color:var(--body);max-width:520px}
/* Google review badge with rotating customer quotes */
.gbadge{background:#fff;border:1px solid var(--line);box-shadow:0 4px 18px rgba(20,40,25,.08);border-radius:14px;padding:18px 22px;margin-top:26px;max-width:560px}
.gbadge .gtop{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:700}
.gbadge .gtop svg{width:24px;height:24px}
.gbadge .stars{color:#f6b900;letter-spacing:2px;font-size:17px}
.gbadge .gtop span.src{color:var(--body);font-weight:600;font-size:14.5px}
.gquotes{height:50px;overflow:hidden;margin-top:10px;border-top:1px solid var(--line);padding-top:8px}
.gq-track{display:flex;flex-direction:column;animation:qrot 24s infinite}
.gq-track:hover{animation-play-state:paused}
.gq-track span{height:50px;line-height:1.55;font-size:14.5px;color:var(--body);display:block;overflow:hidden}
.gq-track span b{color:var(--ink);font-weight:600}
@keyframes qrot{0%,30%{transform:translateY(0)}33.3%,63.3%{transform:translateY(-50px)}66.6%,96.6%{transform:translateY(-100px)}100%{transform:translateY(-150px)}}
.hero-checks{display:grid;grid-template-columns:1fr 1fr;gap:12px 26px;margin-top:26px;border-top:1px solid var(--line);padding-top:22px;max-width:520px}
.hero-media{position:relative}
.hero-media .main{height:420px}
.hero-media img.main{width:100%;height:420px;object-fit:cover;border-radius:16px;display:block;box-shadow:0 18px 44px rgba(20,40,25,.22)}
.hero-media .float{position:absolute;right:-14px;bottom:-30px;width:56%;height:190px;object-fit:cover;border-radius:16px;border:4px solid #fff;transform:rotate(3deg);box-shadow:0 24px 50px rgba(0,0,0,.45)}
/* STRIP */
.strip{background:#fff;border-bottom:1px solid var(--line);padding:20px 0}
.strip-in{display:flex;align-items:center;gap:36px;flex-wrap:wrap;justify-content:center;font-size:13px;font-weight:700;color:#5a6a5a;letter-spacing:1px}
.strip-in span{display:flex;align-items:center;gap:8px}
/* SECTIONS */
section{padding:84px 0}
.light{background:var(--mist)}
.dark{background:var(--forest);color:#fff}
.dark .sec-sub{color:#c4d4c4}
/* SERVICES */
.cards5{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
.scard{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 2px 14px rgba(20,40,25,.05)}
.scard .ph{height:190px;border-radius:0;border-left:0;border-right:0;border-top:0}
.scard .body{padding:20px 22px 22px}
.scard h3{font-size:19px;font-weight:700;margin-bottom:6px}
.scard p{font-size:13.5px;color:var(--body)}
.scard a{display:inline-block;margin-top:12px;color:var(--action);font-weight:700;font-size:13.5px;text-decoration:none}
.tag{display:inline-block;background:var(--mist);border:1px solid #cfe0cd;color:#33421f;font-size:10.5px;font-weight:700;letter-spacing:1.5px;padding:4px 10px;border-radius:99px;margin-bottom:10px}
.tag.soon{background:#fff8e1;border-color:#f0dfa0;color:#7a5c00}
/* STATE OF ENERGY — light with colored column accents */
.stamp{display:inline-flex;align-items:center;gap:8px;background:#eef7e6;border:1px solid #bcd9a0;color:#33581f;font-size:12.5px;font-weight:700;padding:7px 16px;border-radius:99px;letter-spacing:1px}
.truth{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.tcol{background:#fff;border:1px solid var(--line);border-top:4px solid var(--line);border-radius:12px;padding:26px 24px;box-shadow:0 2px 14px rgba(20,40,25,.05)}
.tcol h3{font-size:15px;letter-spacing:1.5px;margin-bottom:16px;display:flex;align-items:center;gap:9px}
.tcol ul{list-style:none}
.tcol li{font-size:13.5px;color:var(--body);padding:9px 0;border-top:1px solid var(--line);line-height:1.5}
.tcol li b{color:var(--ink)}
.now{border-top-color:var(--lime)} .roll{border-top-color:#f0b429} .not{border-top-color:#d98a80}
.now h3{color:var(--action)} .roll h3{color:#a06d00} .not h3{color:#a94438}
/* COMPARE */
.cmp{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.ccard{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px}
.ccard h3{font-size:18px;margin-bottom:8px}
.ccard .pro{color:var(--action);font-size:13px;font-weight:600}
.ccard .con{color:#8a6d3b;font-size:13px;font-weight:600}
.ccard p{font-size:13.5px;color:var(--body);margin-top:8px}
/* REVIEWS — auto-scrolling marquee */
.marq{overflow:hidden;margin-top:40px;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marq-track{display:flex;gap:18px;width:max-content;animation:mscroll 70s linear infinite}
.marq:hover .marq-track{animation-play-state:paused}
@keyframes mscroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.rev{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px;width:330px;flex:none;box-shadow:0 2px 12px rgba(20,40,25,.05)}
.rev .stars{color:#f6b900;letter-spacing:2px;font-size:14px}
.rev p{font-size:14px;color:var(--body);margin:12px 0 14px;font-style:italic;line-height:1.55}
.rev b{font-size:13px}
/* VIDEO FACADES — real player loads only on click (page speed) */
.vids{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
.vid{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 2px 12px rgba(20,40,25,.05)}
.vid .thumb{position:relative;cursor:pointer;background:#000;aspect-ratio:16/9}
.vid .thumb img{width:100%;height:100%;object-fit:cover;display:block;opacity:.94}
.vid .thumb iframe{width:100%;height:100%;border:0;display:block}
.vid .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.vid .play span{width:60px;height:60px;border-radius:50%;background:var(--lime);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(0,0,0,.35);transition:transform .15s}
.vid .thumb:hover .play span{transform:scale(1.1)}
.vid .play i{width:0;height:0;border-left:18px solid var(--forest2);border-top:11px solid transparent;border-bottom:11px solid transparent;margin-left:5px}
.vid .cap{padding:14px 16px;font-size:14px;font-weight:600;color:var(--ink)}
/* PROCESS */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.step{background:#fff;border:1px solid var(--line);border-radius:14px;padding:28px 24px;position:relative}
.step .num{position:absolute;top:-16px;left:22px;background:var(--lime);color:var(--forest2);font-family:'Alexandria';font-weight:800;width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:16px}
.step h3{font-size:17px;margin:8px 0 8px}
.step p{font-size:13.5px;color:var(--body)}
/* AREAS */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.chip{background:#fff;border:1px solid var(--line);border-radius:99px;padding:9px 18px;font-size:13.5px;font-weight:600;color:#33421f;text-decoration:none}
.chip:hover{border-color:var(--lime)}
/* FAQ */
details{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 22px;margin-top:12px}
summary{font-weight:700;font-size:15.5px;cursor:pointer}
details p{margin-top:10px;font-size:14px;color:var(--body)}
/* CTA */
.cta-band{background:linear-gradient(120deg,var(--forest2),#2A4A14);color:#fff;border-radius:20px;padding:56px;display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center}
.cta-band h2{font-size:34px;font-weight:800;letter-spacing:-.5px;line-height:1.15}
.cta-band p{color:#c4d4c4;margin-top:12px;font-size:15px}
.next{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);border-radius:14px;padding:24px}
.next h4{font-size:13px;letter-spacing:2px;color:var(--lime-soft);margin-bottom:14px}
.next div{display:flex;gap:12px;padding:8px 0;font-size:13.5px;color:#dfe8df}
.next .n{color:var(--lime);font-weight:800;font-family:'Alexandria'}
/* FOOTER */
footer{background:var(--forest2);color:#9fb59f;padding:56px 0 32px;font-size:13.5px}
.foot{display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;gap:40px}
footer h5{color:#fff;font-size:13px;letter-spacing:1.5px;margin-bottom:14px}
footer a{color:#9fb59f;text-decoration:none;display:block;padding:3px 0}
.legal{border-top:1px solid rgba(255,255,255,.12);margin-top:40px;padding-top:22px;font-size:12px;color:#6f856f;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
.gallery{display:flex;flex-direction:column;gap:16px;margin-top:22px}.gal-row{display:grid;gap:16px;align-items:start}.gal-row.two{grid-template-columns:1fr 1fr}.gal-row.three{grid-template-columns:repeat(3,1fr)}.faith{background:linear-gradient(180deg,var(--forest2),var(--forest));color:#EEF5E6;padding:78px 0}.faith blockquote{font-size:26px;font-weight:700;line-height:1.55;margin:20px auto 0;max-width:820px}.faith .ref{color:var(--lime);font-weight:700;letter-spacing:2px;font-size:13px;margin-top:12px}.faith-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:38px;text-align:left}.faith-card{background:rgba(255,255,255,.055);border:1px solid rgba(140,198,63,.28);border-radius:14px;padding:22px 24px;font-size:15.5px;line-height:1.6}.faith-card .ref{margin-top:10px}.faith .closing{margin:38px auto 0;max-width:720px;font-size:16.5px;line-height:1.7;color:#D7E6C8}
.gallery img{width:100%;height:auto;border-radius:14px;box-shadow:0 10px 30px rgba(20,40,25,.14);display:block}
.cta-center{grid-column:2}
@media(max-width:900px){.hero,.cta-band,.foot{grid-template-columns:1fr}.cards5,.truth,.cmp,.steps,.vids{grid-template-columns:1fr}.gal-row.two,.gal-row.three{grid-template-columns:1fr 1fr}.faith-grid{grid-template-columns:1fr}.cta-center{grid-column:auto}.hero h1{font-size:40px}.nav-links{display:none}}

/* ═══════════════════════════════════════════════════════════════════════
   SERVICE-PAGE COMPONENTS — added 2026-07-11, first used by /battery-storage/
═══════════════════════════════════════════════════════════════════════ */
.page-hero h1{font-size:46px;line-height:1.12;letter-spacing:-1px}
/* Spec card (dark stat panel under the hero photo) */
.spec-card{background:var(--forest);color:#fff;border-radius:16px;padding:22px 26px;box-shadow:0 18px 44px rgba(20,40,25,.22);margin-top:18px}
.spec-card .lbl{font-size:11px;letter-spacing:3px;color:var(--lime);font-weight:700;text-align:center}
.spec-row{display:flex;justify-content:space-around;border-top:1px solid rgba(140,198,63,.25);margin-top:14px;padding-top:14px}
.spec-row .stat{text-align:center}
.spec-row .val{font-size:24px;font-weight:800;color:#fff}
.spec-row .unit{font-size:11px;color:var(--lime)}
/* Amber "read this first" callout */
.callout{background:#FFF8E1;border:1px solid #FFE082;border-left:4px solid #f0b429;border-radius:0 10px 10px 0;padding:18px 22px;color:#5D4037;font-size:14px;line-height:1.6}
.callout h4{font-weight:800;letter-spacing:.5px;color:#3E2723;margin-bottom:6px;font-size:13px}
/* Rate table */
.price-table{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.price-table table{width:100%;border-collapse:collapse;font-size:14px}
.price-table th{background:var(--forest);color:#fff;text-align:left;padding:12px 16px;font-size:12.5px;letter-spacing:1px}
.price-table td{padding:12px 16px;border-top:1px solid var(--line);color:var(--body)}
.price-table td.num{font-weight:700;color:var(--ink);white-space:nowrap}
/* By-utility cards */
.ucards{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.ucard{background:#fff;border:1px solid var(--line);border-top:4px solid var(--lime);border-radius:12px;padding:24px}
.ucard h4{margin:0 0 4px;color:var(--forest);font-size:17px;font-weight:800}
.ucard .where{font-size:11px;color:var(--action);font-weight:700;letter-spacing:.5px;text-transform:uppercase;margin-bottom:14px}
.ucard p{margin:0 0 8px;font-size:14px;color:var(--body);line-height:1.6}
.ucard p.fine{margin:0;font-size:13px;color:#6a7a6a;line-height:1.55}
@media(max-width:900px){.ucards{grid-template-columns:1fr}.page-hero h1{font-size:36px}}