/* =============================================================
   HomeX — Residential Solar & Roofing · Pennsylvania + Florida
   Design system: "Meridian"  ·  ink + sun, cinematic dark hero
   Display: Space Grotesk · Body: Inter · Wordmark: Fraunces italic
   Signature: the sun-path arc
   ============================================================= */

:root{
  --ink:      #0A0B0D;
  --ink-2:    #16181D;
  --ink-3:    #1F222A;
  --slate:    #3A4152;
  --slate-2:  #5B6577;
  --paper:    #F7F6F2;
  --paper-2:  #EFEDE6;
  --white:    #FFFFFF;
  --sun:      #F2A93B;
  --sun-deep: #D98A1E;
  --sky:      #2E4B6B;
  --pa:       #3D6BB3;   /* Pennsylvania accent (keystone blue) */
  --fl:       #2E9E86;   /* Florida accent (coastal teal) */
  --line:     rgba(14,15,18,.10);
  --line-d:   rgba(255,255,255,.12);
  --radius: 14px;
  --maxw: 1200px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation:none !important; transition:none !important; }
}
body{
  font-family:'Inter',system-ui,sans-serif;
  background:var(--paper); color:var(--ink);
  line-height:1.65; font-size:1.02rem; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.display{ font-family:'Space Grotesk',sans-serif; font-weight:600; line-height:1.06; letter-spacing:-.02em; }
h1{ font-size:clamp(2.6rem,6.6vw,5rem); }
h2{ font-size:clamp(1.9rem,3.8vw,2.9rem); }
h3{ font-size:1.3rem; }
a{ color:var(--sun-deep); }
img{ max-width:100%; display:block; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 clamp(1.1rem,4vw,2.5rem); }

.eyebrow{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:'Space Grotesk',sans-serif;
  font-size:.76rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:var(--sun-deep); margin-bottom:1rem;
}
.eyebrow::before{ content:""; width:26px; height:2px; background:var(--sun); display:inline-block; }
.on-dark .eyebrow{ color:var(--sun); }
.eyebrow.pa{ color:var(--pa); } .eyebrow.pa::before{ background:var(--pa); }
.eyebrow.fl{ color:var(--fl); } .eyebrow.fl::before{ background:var(--fl); }

/* ---------- Buttons ---------- */
.btn{ display:inline-flex; align-items:center; gap:.5rem; font-family:'Space Grotesk',sans-serif;
  font-weight:600; font-size:1rem; text-decoration:none; padding:.9rem 1.7rem; border-radius:999px;
  transition:transform .15s, box-shadow .15s, background .15s, color .15s; border:2px solid transparent; cursor:pointer; }
.btn:focus-visible{ outline:3px solid var(--sun); outline-offset:3px; }
.btn-sun{ background:var(--sun); color:var(--ink); }
.btn-sun:hover{ background:var(--sun-deep); color:var(--white); transform:translateY(-2px); box-shadow:0 14px 34px rgba(217,138,30,.4), 0 0 26px rgba(242,169,59,.3); }
.btn-ink{ background:var(--ink); color:var(--white); }
.btn-ink:hover{ background:var(--ink-2); transform:translateY(-2px); }
.btn-line{ border-color:var(--ink); color:var(--ink); }
.btn-line:hover{ background:var(--ink); color:var(--white); }
.on-dark .btn-line{ border-color:rgba(255,255,255,.4); color:var(--white); }
.on-dark .btn-line:hover{ background:var(--white); color:var(--ink); }
.btn-sm{ padding:.6rem 1.2rem; font-size:.88rem; }

/* ---------- Header / floating brand ---------- */
.site-header{ position:sticky; top:0; z-index:50; background:rgba(247,246,242,.86); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); }
.nav{ display:flex; align-items:center; justify-content:space-between; padding:.8rem clamp(1.1rem,4vw,2.5rem); max-width:var(--maxw); margin:0 auto; }
.brand{ display:flex; align-items:center; gap:.55rem; text-decoration:none; color:var(--ink); }
.brand .logo{ width:36px; height:36px; flex:none; }
.brand .name{
  font-family:'Fraunces','Space Grotesk',serif; font-style:italic; font-optical-sizing:auto;
  font-weight:600; font-size:1.5rem; letter-spacing:-.01em; color:var(--ink);
}
.brand-group{ display:flex; align-items:center; gap:.85rem; }
.powered-by{ font-size:.7rem; line-height:1.25; color:var(--slate-2); padding-left:.85rem; border-left:1px solid var(--line); white-space:nowrap; }
.powered-by strong{ display:block; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:.82rem; color:var(--ink); letter-spacing:-.01em; }
@media (max-width:640px){ .powered-by{ display:none; } }
.nav-links{ display:flex; align-items:center; gap:1.3rem; list-style:none; }
.nav-links a{ text-decoration:none; color:var(--ink); font-weight:500; font-size:.95rem; padding:.3rem 0; border-bottom:2px solid transparent; white-space:nowrap; }
.nav-links a:hover, .nav-links a[aria-current="page"]{ border-bottom-color:var(--sun); }
.nav-cta{ background:var(--ink); color:var(--white) !important; padding:.55rem 1.2rem !important; border-radius:999px; border-bottom:none !important; }
.nav-cta:hover{ background:var(--sun); color:var(--ink) !important; }
.nav-toggle{ display:none; background:none; border:0; cursor:pointer; padding:.7rem; margin:-.7rem; }
.nav-toggle span{ display:block; width:26px; height:2.5px; background:var(--ink); margin:5px 0; border-radius:2px; transition:.2s; }
@media (max-width:980px){
  .nav-toggle{ display:block; }
  .nav-links{ position:absolute; top:100%; left:0; right:0; background:var(--paper); flex-direction:column; align-items:stretch; gap:.35rem; padding:.7rem 1rem 1.3rem; display:none; border-bottom:1px solid var(--line); box-shadow:0 18px 30px rgba(14,15,18,.1); max-height:80vh; overflow-y:auto; }
  .nav-links.open{ display:flex; }
  .nav-links li{ width:100%; }
  .nav-links a{
    display:block; padding:1rem .9rem; margin:0; border-bottom:0; border-radius:12px;
    min-height:48px; box-sizing:border-box; -webkit-tap-highlight-color:rgba(242,169,59,.18);
  }
  .nav-links li + li{ border-top:1px solid var(--line); }
  .nav-links a:active{ background:rgba(242,169,59,.14); }
  .nav-links a[aria-current="page"]{ background:rgba(242,169,59,.12); border-bottom:0; }
  .nav-cta{ margin-top:.6rem; text-align:center; padding:.9rem 1.2rem !important; }
}

/* Footer wordmark reversed for contrast on dark background */
.site-footer .brand .name{ color:var(--white); }

/* ---------- Sun-path arc (signature) ---------- */
.arc{ position:relative; height:1px; background:var(--line); overflow:visible; }
.arc::before{
  content:""; position:absolute; left:50%; top:-40px; transform:translateX(-50%);
  width:min(760px,90%); height:80px;
  border-radius:50% 50% 0 0 / 100% 100% 0 0;
  border:1px solid var(--sun); border-bottom:none; opacity:.5;
}
.arc::after{
  content:""; position:absolute; left:calc(50% + 300px); top:-46px; transform:translateX(-50%);
  width:12px; height:12px; border-radius:50%; background:var(--sun); box-shadow:0 0 20px rgba(242,169,59,.7);
  animation:arcPulse 2.6s ease-in-out infinite;
}
@keyframes arcPulse{ 0%,100%{ box-shadow:0 0 18px rgba(242,169,59,.6); } 50%{ box-shadow:0 0 34px 6px rgba(242,169,59,.9); } }
@media (max-width:700px){ .arc::after{ left:calc(50% + 130px); } }

/* ---------- Cinematic full hero (Tesla-vibe) ---------- */
.hero{ background:var(--ink); color:var(--white); position:relative; overflow:hidden; }
.hero::before{
  content:""; position:absolute; top:-140px; right:-120px; width:620px; height:620px;
  background:radial-gradient(circle, rgba(242,169,59,.22), transparent 62%); pointer-events:none;
}
.hero::after{
  content:""; position:absolute; left:50%; bottom:-1px; transform:translateX(-50%);
  width:min(1100px,120%); height:220px; border-radius:50% 50% 0 0 / 100% 100% 0 0;
  border-top:1.5px solid rgba(242,169,59,.4); border-left:1px solid rgba(242,169,59,.15); border-right:1px solid rgba(242,169,59,.15);
  pointer-events:none;
}
.hero-xl{ min-height:min(92vh,920px); display:flex; align-items:center; }
.hero-xl::before{ width:900px; height:900px; top:-220px; right:-260px; }
.hero-xl .hz{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(1200px 500px at 15% 115%, rgba(46,75,107,.55), transparent 60%),
    linear-gradient(180deg, transparent 0%, rgba(0,0,0,.35) 100%);
}
.hero-xl .roofline{
  position:absolute; left:0; right:0; bottom:0; height:38%; z-index:0; pointer-events:none; opacity:.9;
  background:
    linear-gradient(115deg, transparent 47%, rgba(242,169,59,.10) 50%, transparent 53%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 2px, transparent 2px 46px);
  clip-path: polygon(0% 100%, 0% 62%, 8% 48%, 8% 60%, 18% 60%, 26% 38%, 26% 60%, 40% 60%, 40% 30%, 55% 30%, 55% 55%, 68% 55%, 76% 20%, 76% 55%, 88% 55%, 88% 44%, 100% 44%, 100% 100%);
}
.hero-photo::before{ display:none; }
.hero-photo::after{ display:none; }
.hero-photo-bg{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero-photo-bg img{ width:100%; height:100%; object-fit:cover; object-position:center 42%; }
.hero-photo-overlay{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(60% 58% at 50% 46%, rgba(10,11,13,.58), transparent 72%),
    linear-gradient(180deg, rgba(10,11,13,.74) 0%, rgba(10,11,13,.52) 24%, rgba(10,11,13,.58) 76%, rgba(10,11,13,.88) 100%);
}
@media (max-width:820px){
  .hero-photo-bg img{ object-position:center 38%; }
  .hero-photo-overlay{
    background:
      radial-gradient(80% 60% at 50% 42%, rgba(10,11,13,.62), transparent 72%),
      linear-gradient(180deg, rgba(10,11,13,.8) 0%, rgba(10,11,13,.6) 24%, rgba(10,11,13,.66) 76%, rgba(10,11,13,.92) 100%);
  }
}
.hero-inner{ position:relative; z-index:1; display:grid; grid-template-columns:1.15fr .85fr; gap:3rem; align-items:center; padding:clamp(3.5rem,8vw,6rem) 0 clamp(4rem,9vw,7rem); }
.hero-xl .hero-inner{ grid-template-columns:1fr; text-align:center; padding:clamp(2rem,6vw,3rem) 0; }
.hero-xl .lede, .hero-xl .hero-ctas, .hero-xl .hero-trust{ margin-left:auto; margin-right:auto; }
.hero-xl .hero-ctas{ justify-content:center; }
.hero-xl .hero-trust{ justify-content:center; }
.hero h1{ color:var(--white); margin:.5rem 0 1.2rem; }
.hero h1 em{ font-style:normal; color:var(--sun); }
.hero .lede{ font-size:1.18rem; color:rgba(255,255,255,.82); max-width:34rem; }
.hero-ctas{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2rem; }
.hero-trust{ display:flex; flex-wrap:wrap; gap:1.6rem; margin-top:2.4rem; padding-top:1.8rem; border-top:1px solid rgba(255,255,255,.12); }
.hero-trust .t{ font-size:.85rem; color:rgba(255,255,255,.6); text-decoration:none; }
a.hero-trust .t, .hero-trust a.t{ transition:opacity .2s ease; }
.hero-trust a.t:hover{ opacity:.75; }
.hero-trust .t b{ display:block; font-family:'Space Grotesk',sans-serif; font-size:1.5rem; color:var(--sun); font-weight:600; }
.scroll-cue{ position:absolute; left:50%; bottom:1.6rem; transform:translateX(-50%); z-index:1; display:flex; flex-direction:column; align-items:center; gap:.4rem; color:rgba(255,255,255,.5); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; }
.scroll-cue span{ width:1px; height:34px; background:linear-gradient(var(--sun),transparent); animation:scrollcue 1.8s ease-in-out infinite; }
@keyframes scrollcue{ 0%{ opacity:0; transform:scaleY(.3); transform-origin:top; } 40%{ opacity:1; } 100%{ opacity:0; transform:scaleY(1); transform-origin:top; } }

/* hero panel visual */
.panel-card{ position:relative; justify-self:center; background:linear-gradient(150deg,#12141a,#1c2028); border:1px solid rgba(255,255,255,.1); border-radius:20px; padding:1.6rem; width:min(360px,90%); box-shadow:0 30px 70px rgba(0,0,0,.45); }
.panel-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; aspect-ratio:1.3; }
.panel-cell{ background:linear-gradient(135deg,#1e3a5f,#2E4B6B); border-radius:3px; border:1px solid rgba(120,170,220,.25); position:relative; overflow:hidden; }
.panel-cell::after{ content:""; position:absolute; inset:0; background:linear-gradient(115deg,transparent 40%,rgba(242,169,59,.35) 50%,transparent 60%); }
.panel-readout{ display:flex; justify-content:space-between; align-items:flex-end; margin-top:1.2rem; }
.panel-readout .big{ font-family:'Space Grotesk',sans-serif; font-size:2rem; font-weight:600; color:var(--sun); line-height:1; }
.panel-readout .lbl{ font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.5); }
.panel-readout .live{ font-size:.7rem; color:#7CE0A0; display:flex; align-items:center; gap:.4rem; }
.panel-readout .live::before{ content:""; width:7px; height:7px; border-radius:50%; background:#7CE0A0; box-shadow:0 0 8px #7CE0A0; }
@media (max-width:820px){ .hero-inner{ grid-template-columns:1fr; } .panel-card{ margin-top:.5rem; } }

/* ---------- Marquee trust strip ---------- */
.marquee{ background:var(--ink-2); border-top:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08); overflow:hidden; padding:.9rem 0;
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track{ display:flex; width:max-content; gap:3rem; animation:marquee 32s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee span{ display:inline-flex; align-items:center; gap:.6rem; font-family:'Space Grotesk',sans-serif; font-size:.85rem; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.62); white-space:nowrap; }
.marquee span::before{ content:"☀"; color:var(--sun); }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ---------- Sections ---------- */
section{ padding:clamp(3.5rem,7vw,5.5rem) 0; }
.section-head{ max-width:46rem; margin-bottom:2.6rem; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head p{ color:var(--slate); font-size:1.08rem; margin-top:.6rem; }
.paper-2{ background:var(--paper-2); position:relative; overflow:hidden; }
.paper-2::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(1100px 520px at 10% -18%, rgba(242,169,59,.12), transparent 60%),
    radial-gradient(900px 460px at 105% 115%, rgba(46,75,107,.14), transparent 60%),
    radial-gradient(rgba(14,15,18,.06) 1px, transparent 1px);
  background-size:auto, auto, 28px 28px;
}
.paper-2 .wrap{ position:relative; z-index:1; }
.dark{ background:var(--ink); color:rgba(255,255,255,.82); position:relative; overflow:hidden; }
.dark::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(950px 460px at 90% -15%, rgba(242,169,59,.16), transparent 60%),
    radial-gradient(750px 420px at 2% 112%, rgba(46,75,107,.38), transparent 60%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 56px);
}
.dark .wrap{ position:relative; z-index:1; }
.dark h2,.dark h3,.dark h4{ color:var(--white); }
.dark .section-head p{ color:rgba(255,255,255,.65); }
.section-xl{ padding:clamp(5rem,10vw,8.5rem) 0; }

/* ---------- Scroll reveal ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); }
.reveal.in{ opacity:1; transform:translateY(0); }

/* ---------- Cards ---------- */
.grid{ display:grid; gap:1.4rem; }
.cols-2{ grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.cols-3{ grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); }
.cols-4{ grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.card{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:1.9rem 1.7rem; transition:transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s ease, background .3s ease; position:relative; overflow:hidden; isolation:isolate; }
.card::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--sun),var(--sun-deep),var(--sun)); transform:scaleX(0); transform-origin:left; transition:transform .4s ease; }
.card:hover::before{ transform:scaleX(1); }
.card:hover{ transform:translateY(-6px); box-shadow:0 24px 54px rgba(14,15,18,.14), 0 0 0 1px rgba(242,169,59,.14); }
.card .ico{ width:52px; height:52px; border-radius:12px; background:var(--ink); display:grid; place-items:center; margin-bottom:1.1rem; transition:transform .3s ease, box-shadow .3s ease; }
.card .ico svg{ width:26px; height:26px; stroke:var(--sun); }
.card:hover .ico{ transform:scale(1.08) rotate(-4deg); box-shadow:0 0 0 6px rgba(242,169,59,.14); }
.card h3{ margin-bottom:.5rem; }
.card p{ color:var(--slate); font-size:.98rem; }
.card .more{ display:inline-block; margin-top:1rem; font-family:'Space Grotesk',sans-serif; font-weight:600; text-decoration:none; color:var(--ink); }
.card .more::after{ content:" →"; color:var(--sun-deep); transition:margin .2s ease; }
.card:hover .more::after{ margin-left:.25em; }
.dark .card{ background:rgba(255,255,255,.045); border-color:rgba(255,255,255,.1); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
.dark .card p{ color:rgba(255,255,255,.6); }
.dark .card .ico{ background:var(--sun); }
.dark .card .ico svg{ stroke:var(--ink); }
.dark .card .more{ color:var(--white); }
.dark .card:hover{ background:rgba(255,255,255,.07); box-shadow:0 24px 54px rgba(0,0,0,.45), 0 0 0 1px rgba(242,169,59,.22); }

.card.featured{ border:2px solid var(--sun); position:relative; }
.card.featured::before{ content:"Priority service"; position:absolute; top:-13px; left:1.7rem; background:var(--sun); color:var(--ink); font-family:'Space Grotesk',sans-serif; font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:.3rem .8rem; border-radius:999px; }

/* ---------- Process (numbered — real sequence) ---------- */
.steps{ counter-reset:step; display:grid; gap:1.2rem; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
.step{ position:relative; padding:2rem 1.6rem 1.6rem; background:var(--white); border:1px solid var(--line); border-radius:var(--radius); }
.step::before{ counter-increment:step; content:"0" counter(step); position:absolute; top:1.2rem; right:1.4rem; font-family:'Space Grotesk',sans-serif; font-size:1.6rem; font-weight:700; color:var(--paper-2); }
.step .dot{ width:14px; height:14px; border-radius:50%; background:var(--sun); margin-bottom:1rem; box-shadow:0 0 0 5px rgba(242,169,59,.2); }
.step h3{ font-size:1.15rem; margin-bottom:.4rem; }
.step p{ color:var(--slate); font-size:.94rem; }

/* ---------- Stats band ---------- */
.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1.5rem; text-align:center; }
.stat .num{ font-family:'Space Grotesk',sans-serif; font-size:2.8rem; font-weight:600; color:var(--sun); line-height:1; text-shadow:0 0 28px rgba(242,169,59,.5); }
.stat .lbl{ font-size:.85rem; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.6); margin-top:.5rem; }

/* ---------- Split ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; }
@media (max-width:820px){ .split{ grid-template-columns:1fr; gap:2rem; } }
.checklist{ list-style:none; margin-top:1.2rem; }
.checklist li{ padding-left:2.2rem; position:relative; margin:.7rem 0; color:var(--slate); }
.checklist li strong{ color:var(--ink); }
.checklist li::before{ content:""; position:absolute; left:0; top:.15rem; width:1.5rem; height:1.5rem; border-radius:50%; background:var(--sun); }
.checklist li::after{ content:""; position:absolute; left:.5rem; top:.5rem; width:.5rem; height:.28rem; border-left:2px solid var(--ink); border-bottom:2px solid var(--ink); transform:rotate(-45deg); }
.dark .checklist li{ color:rgba(255,255,255,.72); }
.dark .checklist li strong{ color:var(--white); }

/* ---------- Visual placeholder ---------- */
.ph{ border-radius:var(--radius); background:linear-gradient(150deg,var(--paper-2),#e2ddd0); min-height:280px; display:grid; place-items:center; color:var(--slate-2); font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; border:1px dashed rgba(58,65,82,.3); text-align:center; padding:1rem; }
.ph.roof{ background:linear-gradient(150deg,#26303f,#2E4B6B); color:rgba(255,255,255,.6); border-color:rgba(255,255,255,.2); }
.ph.pa{ background:linear-gradient(150deg,#1c2a3f,var(--pa)); color:rgba(255,255,255,.7); border-color:rgba(255,255,255,.2); }
.ph.fl{ background:linear-gradient(150deg,#173430,var(--fl)); color:rgba(255,255,255,.7); border-color:rgba(255,255,255,.2); }

/* ---------- Google rating badge ---------- */
.google-rating-badge{ display:inline-flex; align-items:center; gap:.6rem; margin-top:1.2rem; padding:.65rem 1.2rem; background:var(--white); border:1px solid var(--line); border-radius:999px; text-decoration:none; color:var(--ink); box-shadow:0 10px 26px rgba(14,15,18,.08); transition:transform .2s ease, box-shadow .2s ease; }
.google-rating-badge:hover{ transform:translateY(-2px); box-shadow:0 14px 32px rgba(14,15,18,.14); }
.google-g{ width:20px; height:20px; flex:none; }
.grb-stars{ color:var(--sun-deep); letter-spacing:.05em; font-size:.9rem; }
.grb-text{ font-size:.88rem; color:var(--slate); }
.grb-text strong{ color:var(--ink); font-family:'Space Grotesk',sans-serif; }
[data-theme="dark"] .google-rating-badge{ background:var(--card-bg); border-color:var(--line); color:var(--text); }
[data-theme="dark"] .grb-text{ color:var(--slate); }
[data-theme="dark"] .grb-text strong{ color:var(--text); }

/* ---------- Split media (real photo/video, sized up + weighted right) ---------- */
.wrap.split.split-lg{ grid-template-columns:.85fr 1.3fr; gap:2.6rem; }
@media (max-width:980px){ .wrap.split.split-lg{ grid-template-columns:1fr; gap:2rem; } }
.split-media{ border-radius:var(--radius); overflow:hidden; min-height:480px; box-shadow:0 26px 60px rgba(14,15,18,.22); position:relative; }
.split-media img, .split-media video{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:980px){ .split-media{ min-height:340px; } }
@media (max-width:560px){ .split-media{ min-height:230px; border-radius:16px; } }

/* ---------- Testimonials ---------- */
.quote{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:1.8rem; }
.quote .stars{ color:var(--sun); letter-spacing:.1em; margin-bottom:.7rem; }
.quote p{ font-size:1.02rem; color:var(--ink); }
.quote .who{ margin-top:1rem; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:.92rem; }
.quote .who span{ display:block; color:var(--slate-2); font-weight:400; font-size:.85rem; }

/* ---------- Savings calculator ---------- */
.calc{ background:var(--white); border:1px solid var(--line); border-radius:20px; padding:2rem; box-shadow:0 10px 40px rgba(14,15,18,.06); }
.calc label{ display:block; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:.9rem; margin:1.2rem 0 .5rem; }
.calc input[type=range]{ width:100%; accent-color:var(--sun); height:6px; cursor:pointer; }
.calc input[type=range]::-webkit-slider-thumb{ box-shadow:0 0 0 6px rgba(242,169,59,.18); }
.calc input[type=range]::-moz-range-thumb{ box-shadow:0 0 0 6px rgba(242,169,59,.18); border:none; }
.calc select{ width:100%; padding:.7rem .8rem; font:inherit; border:1.5px solid var(--line); border-radius:10px; background:var(--paper); color:var(--text); }
.calc .val{ font-family:'Space Grotesk',sans-serif; color:var(--sun-deep); font-weight:600; }
.calc-out{ background:var(--ink); color:var(--white); border-radius:16px; padding:1.8rem; text-align:center; position:relative; overflow:hidden; }
.calc-out::before{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(420px 220px at 85% -20%, rgba(242,169,59,.28), transparent 60%); }
.calc-out>*{ position:relative; z-index:1; }
.calc-out .big{ font-family:'Space Grotesk',sans-serif; font-size:3rem; font-weight:600; color:var(--sun); line-height:1; text-shadow:0 0 26px rgba(242,169,59,.5); }
.calc-out .lbl{ font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.55); margin-top:.5rem; }

/* ---------- Estimator: bill-vs-payment bars + stat tiles ---------- */
.calc-compare{ margin-top:1.5rem; text-align:left; }
.cc-row{ display:flex; align-items:center; gap:.7rem; margin:.6rem 0; }
.cc-label{ font-size:.76rem; color:rgba(255,255,255,.6); width:6.4rem; flex:none; }
.cc-track{ flex:1; height:8px; border-radius:99px; background:rgba(255,255,255,.12); overflow:hidden; }
.cc-fill{ height:100%; border-radius:99px; transition:width .5s cubic-bezier(.2,.8,.3,1); }
.cc-fill.old{ background:rgba(255,255,255,.4); width:100%; }
.cc-fill.new{ background:var(--sun); width:0%; }
.cc-amt{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:.86rem; width:3.6rem; flex:none; text-align:right; }
.calc-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:.7rem; margin-top:1.6rem; padding-top:1.3rem; border-top:1px solid rgba(255,255,255,.12); }
.cs-item{ text-align:center; }
.cs-num{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:1.1rem; color:var(--sun); }
.cs-lbl{ font-size:.64rem; color:rgba(255,255,255,.5); margin-top:.25rem; line-height:1.3; }
@media (max-width:480px){ .calc-stats{ grid-template-columns:repeat(2,1fr); } }

/* ---------- Net metering eligibility checker ---------- */
.nm-checker{ background:var(--white); border:1px solid var(--line); border-radius:20px; padding:1.8rem; box-shadow:0 10px 40px rgba(14,15,18,.06); max-width:760px; margin:0 auto; }
.nm-checker-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
@media (max-width:620px){ .nm-checker-row{ grid-template-columns:1fr; } }
.nm-checker label{ display:block; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:.85rem; margin-bottom:.5rem; }
.nm-checker select, .nm-checker input{ width:100%; padding:.75rem .9rem; font:inherit; border:1.5px solid var(--line); border-radius:10px; background:var(--paper); color:inherit; }
.nm-result{ margin-top:1.3rem; padding:1rem 1.2rem; border-radius:12px; font-size:.92rem; line-height:1.5; }
.nm-result.ok{ background:rgba(46,158,134,.1); border:1px solid rgba(46,158,134,.35); color:var(--ink); }
.nm-result.no{ background:rgba(217,138,30,.1); border:1px solid rgba(217,138,30,.35); color:var(--ink); }
.nm-result strong{ display:block; font-family:'Space Grotesk',sans-serif; margin-bottom:.2rem; }
.nm-checker.nm-highlight{ animation:nmPulse 1.6s ease-out 2; }
@keyframes nmPulse{
  0%{ box-shadow:0 10px 40px rgba(14,15,18,.06), 0 0 0 0 rgba(242,169,59,.55); }
  60%{ box-shadow:0 10px 40px rgba(14,15,18,.06), 0 0 0 14px rgba(242,169,59,0); }
  100%{ box-shadow:0 10px 40px rgba(14,15,18,.06), 0 0 0 0 rgba(242,169,59,0); }
}
[data-theme="dark"] .nm-result.ok, [data-theme="dark"] .nm-result.no{ color:var(--text); }

/* ---------- Pricing tiers ---------- */
.tier{ background:var(--white); border:1px solid var(--line); border-radius:18px; padding:2rem; position:relative; }
.tier.featured{ border-color:var(--sun); box-shadow:0 16px 44px rgba(242,169,59,.18); }
.tier .badge{ position:absolute; top:-13px; left:2rem; background:var(--sun); color:var(--ink); font-family:'Space Grotesk',sans-serif; font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:.3rem .8rem; border-radius:999px; }
.tier h3{ font-size:1.35rem; }
.tier .price{ font-family:'Space Grotesk',sans-serif; font-size:2.6rem; font-weight:600; margin:.6rem 0; }
.tier .price small{ font-size:.9rem; color:var(--slate-2); font-weight:400; }
.tier ul{ list-style:none; margin:1.2rem 0; }
.tier li{ padding:.5rem 0 .5rem 1.7rem; position:relative; color:var(--slate); font-size:.95rem; border-bottom:1px solid var(--line); }
.tier li::before{ content:"✓"; position:absolute; left:0; color:var(--sun-deep); font-weight:700; }

/* ---------- FAQ ---------- */
.faq{ max-width:48rem; }
.faq details{ background:var(--white); border:1px solid var(--line); border-radius:12px; margin-bottom:.9rem; overflow:hidden; }
.faq summary{ cursor:pointer; list-style:none; padding:1.15rem 3rem 1.15rem 1.4rem; font-family:'Space Grotesk',sans-serif; font-weight:600; position:relative; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; position:absolute; right:1.3rem; top:50%; transform:translateY(-50%); font-size:1.5rem; color:var(--sun-deep); }
.faq details[open] summary::after{ content:"–"; }
.faq details p{ padding:0 1.4rem 1.2rem; color:var(--slate); }

/* ---------- Forms ---------- */
.form{ background:var(--white); border:1px solid var(--line); border-radius:18px; padding:2rem; }
.form label{ display:block; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:.9rem; margin:1rem 0 .4rem; }
.form input,.form select,.form textarea{ width:100%; padding:.8rem .9rem; font:inherit; border:1.5px solid var(--line); border-radius:10px; background:var(--paper); }
.form input:focus,.form select:focus,.form textarea:focus{ outline:2px solid var(--sun); border-color:var(--sun); }
.form .row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width:600px){ .form .row{ grid-template-columns:1fr; } }
.form button{ margin-top:1.4rem; width:100%; border:0; }

/* ---------- CTA band ---------- */
.cta-band{ background:var(--ink); color:var(--white); text-align:center; position:relative; overflow:hidden; }
.cta-band::before{ content:""; position:absolute; left:50%; top:-60px; transform:translateX(-50%); width:min(700px,90%); height:120px; border-radius:50% 50% 0 0/100% 100% 0 0; border:1px solid rgba(242,169,59,.4); border-bottom:none; }
.cta-band h2{ color:var(--white); margin-bottom:.7rem; }
.cta-band p{ color:rgba(255,255,255,.7); max-width:36rem; margin:0 auto 1.8rem; }

/* ---------- Callout ---------- */
.callout{ background:#FFF6E6; border-left:4px solid var(--sun); border-radius:0 12px 12px 0; padding:1.1rem 1.4rem; margin:1.5rem 0; font-size:.95rem; color:#3A4152; }
.callout strong{ color:var(--ink); }
.callout.dark-c{ background:rgba(242,169,59,.08); border-left-color:var(--sun); color:rgba(255,255,255,.75); }
.callout.dark-c strong{ color:var(--white); }

/* ---------- Page hero ---------- */
.page-hero{ background:var(--ink); color:var(--white); padding:clamp(3.4rem,7vw,5.5rem) 0; position:relative; overflow:hidden; }
.page-hero::before{ content:""; position:absolute; top:-120px; right:-100px; width:480px; height:480px; background:radial-gradient(circle,rgba(242,169,59,.18),transparent 62%); z-index:0; pointer-events:none; }
.page-hero::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 58px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 1px, transparent 1px 58px);
  -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.85), rgba(0,0,0,.2));
  mask-image:linear-gradient(180deg, rgba(0,0,0,.85), rgba(0,0,0,.2));
}
.page-hero .wrap{ position:relative; z-index:1; }
.page-hero h1{ color:var(--white); position:relative; }
.page-hero p{ color:rgba(255,255,255,.75); max-width:40rem; margin-top:.9rem; font-size:1.12rem; position:relative; }
.page-hero.pa::before{ background:radial-gradient(circle,rgba(61,107,179,.32),transparent 62%); }
.page-hero.fl::before{ background:radial-gradient(circle,rgba(46,158,134,.32),transparent 62%); }
/* Intensified "black-on-black solar panel" texture, used on the Solar page hero */
.page-hero.tex-panel::after{
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.07) 0 1px, transparent 1px 64px),
    linear-gradient(122deg, transparent 40%, rgba(242,169,59,.08) 50%, transparent 60%),
    linear-gradient(180deg, #0A0B0D 0%, #14161B 100%);
  -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.95), rgba(0,0,0,.35));
  mask-image:linear-gradient(180deg, rgba(0,0,0,.95), rgba(0,0,0,.35));
}

/* ---------- Video-background page hero (roofing) ---------- */
.page-hero-video::before, .page-hero-video::after{ display:none; }
.page-hero-video{ min-height:min(76vh,700px); display:flex; align-items:center; padding:clamp(4rem,11vw,6rem) 0; }
.page-hero-video-bg{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.page-hero-video-bg video{ width:100%; height:100%; object-fit:cover; object-position:center 40%; }
.page-hero-video-overlay{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(55% 65% at 50% 32%, rgba(10,11,13,.32), transparent 70%),
    linear-gradient(180deg, rgba(10,11,13,.72) 0%, rgba(10,11,13,.4) 34%, rgba(10,11,13,.5) 68%, rgba(10,11,13,.86) 100%);
}
@media (max-width:820px){
  .page-hero-video{ min-height:min(62vh,540px); padding:clamp(3.4rem,10vw,4.2rem) 0; }
  .page-hero-video-bg video{ object-position:center 32%; }
  .page-hero-video-overlay{
    background:linear-gradient(180deg, rgba(10,11,13,.8) 0%, rgba(10,11,13,.54) 28%, rgba(10,11,13,.62) 70%, rgba(10,11,13,.9) 100%);
  }
}
@media (prefers-reduced-motion: reduce){
  .page-hero-video-bg video{ display:none; }
  .page-hero-video-bg{ background:var(--ink); }
}
.page-hero.tex-panel::before{ width:640px; height:640px; top:-220px; right:-220px; background:radial-gradient(circle,rgba(242,169,59,.22),transparent 62%); }

/* ---------- State grid (PA / FL) ---------- */
.state-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.6rem; }
@media (max-width:820px){ .state-grid{ grid-template-columns:1fr; } }
.state-card{ border-radius:20px; padding:2.2rem; position:relative; overflow:hidden; color:var(--white); min-height:280px; display:flex; flex-direction:column; justify-content:flex-end; text-decoration:none; }
.state-card::before{ content:""; position:absolute; inset:0; opacity:.9; }
.state-card.pa::before{ background:linear-gradient(155deg,#111820,var(--pa)); }
.state-card.fl::before{ background:linear-gradient(155deg,#0f1e1a,var(--fl)); }
.state-card > *{ position:relative; z-index:1; }
.state-card .tag{ font-family:'Space Grotesk',sans-serif; font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.7); margin-bottom:.6rem; }
.state-card h3{ font-size:1.8rem; color:var(--white); margin-bottom:.6rem; }
.state-card p{ color:rgba(255,255,255,.82); font-size:.98rem; margin-bottom:1rem; }
.state-card .go{ font-family:'Space Grotesk',sans-serif; font-weight:600; color:var(--white); display:inline-flex; align-items:center; gap:.4rem; }
.state-card{ transition:transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s ease; }
.state-card:hover{ transform:translateY(-6px); }
.state-card.pa:hover{ box-shadow:0 24px 56px rgba(61,107,179,.4); }
.state-card.fl:hover{ box-shadow:0 24px 56px rgba(46,158,134,.4); }

/* ---------- State toggle (contact page) ---------- */
.state-toggle{ display:flex; gap:.7rem; flex-wrap:wrap; margin-bottom:1.2rem; }
.st-btn{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:.92rem; padding:.75rem 1.3rem; border-radius:999px; border:1.5px solid var(--line); background:var(--white); color:var(--ink); cursor:pointer; transition:.2s; }
.st-btn:hover{ border-color:var(--sun); }
.st-btn.active{ background:var(--ink); color:var(--white); border-color:var(--ink); box-shadow:0 8px 22px rgba(14,15,18,.18); }
.st-btn.active.pa{ background:var(--pa); border-color:var(--pa); }
.st-btn.active.fl{ background:var(--fl); border-color:var(--fl); }

.compare-table{ width:100%; border-collapse:collapse; background:var(--white); border-radius:16px; overflow:hidden; border:1px solid var(--line); }
.compare-table th,.compare-table td{ padding:1rem 1.2rem; text-align:left; border-bottom:1px solid var(--line); font-size:.95rem; }
.compare-table th{ font-family:'Space Grotesk',sans-serif; background:var(--paper-2); }
.compare-table td:first-child, .compare-table th:first-child{ color:var(--slate-2); font-size:.85rem; text-transform:uppercase; letter-spacing:.05em; width:34%; }
.compare-table tr:last-child td{ border-bottom:none; }
.compare-table tbody tr{ transition:background .15s ease; }
.compare-table tbody tr:hover{ background:rgba(242,169,59,.08); }

/* ---------- Live install map (locations page) ---------- */
.install-map-wrap{ background:var(--white); border:1px solid var(--line); border-radius:22px; padding:1.4rem; box-shadow:0 20px 50px rgba(14,15,18,.08); }
.install-map{ position:relative; height:560px; border-radius:16px; overflow:hidden; background:#0b1a12; }
.install-map-fallback{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.55); font-size:.9rem; letter-spacing:.03em; }
.install-map .leaflet-container{ background:#0b1a12; font-family:'Inter',sans-serif; }
.install-map .leaflet-control-attribution{ background:rgba(10,11,13,.55); color:rgba(255,255,255,.6); backdrop-filter:blur(6px); }
.install-map .leaflet-control-attribution a{ color:rgba(255,255,255,.8); }
.install-map .leaflet-control-zoom a{ background:rgba(10,11,13,.75); color:#fff; border-color:rgba(255,255,255,.15); }
.install-map .leaflet-control-zoom a:hover{ background:rgba(10,11,13,.92); }

.install-pin{ width:9px; height:9px; border-radius:50%; background:#3EE07E; box-shadow:0 0 7px 1.5px rgba(62,224,126,.85), 0 0 0 2px rgba(11,26,18,.55); position:relative; }
.install-pin::after{
  content:""; position:absolute; inset:-7px; border-radius:50%;
  border:1.5px solid rgba(62,224,126,.65);
  animation:installPulse 2.4s ease-out infinite;
  animation-delay:var(--pulse-delay, 0s);
}
@keyframes installPulse{
  0%{ transform:scale(.35); opacity:.9; }
  100%{ transform:scale(2.6); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .install-pin::after{ animation:none; display:none; }
}

.install-map-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1.2rem; }
.ims-item{ text-align:center; padding:1rem .5rem; background:var(--paper-2); border-radius:14px; }
.ims-num{ display:block; font-family:'Space Grotesk',sans-serif; font-size:1.7rem; font-weight:600; color:var(--ink); }
.ims-lbl{ display:block; font-size:.78rem; color:var(--slate-2); margin-top:.2rem; text-transform:uppercase; letter-spacing:.04em; }
.install-map-note{ font-size:.82rem; color:var(--slate-2); margin-top:1rem; text-align:center; }
@media (max-width:760px){
  .install-map{ height:420px; }
  .install-map-stats{ grid-template-columns:1fr; }
}

[data-theme="dark"] .install-map-wrap{ background:var(--card-bg); border-color:var(--line); }
[data-theme="dark"] .ims-item{ background:rgba(255,255,255,.05); }
[data-theme="dark"] .ims-num{ color:var(--text); }

.chip-row{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.2rem; }
.chip{ background:var(--paper-2); border:1px solid var(--line); border-radius:999px; padding:.45rem .95rem; font-size:.85rem; color:var(--slate); }
.dark .chip{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14); color:rgba(255,255,255,.75); }

/* ---------- Footer ---------- */
.site-footer{ background:var(--ink); color:rgba(255,255,255,.62); padding:3.5rem 0 2rem; font-size:.95rem; border-top:3px solid var(--sun); }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2.5rem; margin-bottom:2.5rem; }
@media (max-width:760px){ .footer-grid{ grid-template-columns:1fr 1fr; gap:2rem; } }
@media (max-width:480px){ .footer-grid{ grid-template-columns:1fr; } }
.site-footer h4{ color:var(--white); font-family:'Space Grotesk',sans-serif; font-size:1rem; margin-bottom:.9rem; }
.site-footer a{ color:rgba(255,255,255,.62); text-decoration:none; }
.site-footer a:hover{ color:var(--sun); }
.site-footer ul{ list-style:none; }
.site-footer li{ margin:.45rem 0; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.12); padding-top:1.5rem; display:flex; flex-wrap:wrap; justify-content:space-between; gap:.8rem; font-size:.84rem; color:rgba(255,255,255,.45); }
.footer-disc{ font-size:.78rem; color:rgba(255,255,255,.4); margin-top:1rem; line-height:1.6; }
.footer-license{ border-top:1px solid rgba(255,255,255,.12); margin-top:2rem; padding-top:2rem; text-align:center; }
.footer-social{ display:flex; justify-content:center; gap:.9rem; margin-bottom:1.2rem; }
.site-footer .footer-social a{ width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.06); color:rgba(255,255,255,.65); transition:background .2s ease, color .2s ease; }
.site-footer .footer-social a:hover{ background:var(--sun); color:var(--ink); }
.footer-social svg{ width:19px; height:19px; }
.footer-copyright{ font-size:.85rem; color:rgba(255,255,255,.55); margin-bottom:1.6rem; }
.footer-license-head{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--sun); margin-bottom:.7rem; }
.footer-license-list{ font-size:.8rem; color:rgba(255,255,255,.45); line-height:1.8; max-width:760px; margin:0 auto 1.8rem; }
.footer-license-list strong{ color:rgba(255,255,255,.75); }
.site-footer .footer-domain-pill{ display:inline-block; background:rgba(255,255,255,.94); color:var(--ink); font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:.85rem; padding:.6rem 1.4rem; border-radius:999px; text-decoration:none; }
.site-footer .footer-domain-pill:hover{ background:var(--sun); }

/* ---------- Utility ---------- */
.center{ text-align:center; }
.mt-2{ margin-top:2rem; }
.skip-link{ position:absolute; left:-999px; top:0; background:var(--sun); color:var(--ink); padding:.6rem 1rem; font-weight:700; z-index:100; }
.skip-link:focus{ left:0; }
.badge-row{ display:flex; flex-wrap:wrap; gap:1rem; align-items:center; margin-top:1.5rem; }
.badge-chip{ display:inline-flex; align-items:center; gap:.5rem; background:var(--white); border:1px solid var(--line); border-radius:999px; padding:.5rem 1rem; font-size:.85rem; font-weight:500; transition:transform .2s ease, box-shadow .2s ease; }
.badge-chip:hover{ transform:translateY(-2px); box-shadow:0 10px 22px rgba(14,15,18,.12); }
.badge-chip svg{ width:16px; height:16px; stroke:var(--sun-deep); }

/* =============================================================
   Premium layer — theme, motion, and the new interactive pieces
   ============================================================= */

/* Native cross-page transitions where supported; silent no-op elsewhere */
@view-transition{ navigation:auto; }

/* ---------- Dark mode ----------
   --ink and --white keep their literal values in both themes — they're
   used as permanent background colors (hero, footer, CTA pills, logo
   mark) that must stay black/white regardless of theme. Everything that
   needs to actually flip uses --text, or an explicit override below.
   NOTE: the :root fallback for --text must come BEFORE the
   [data-theme="dark"] block — both selectors have equal specificity, so
   whichever is declared last wins the cascade on the <html> element. */
:root{ --text: var(--ink); }
[data-theme="dark"]{
  --paper:    #121317;
  --paper-2:  #191B20;
  --card-bg:  #1C1E24;
  --slate:    #C7CAD3;
  --slate-2:  #9AA0AD;
  --line:     rgba(255,255,255,.12);
  --text:     #EDEAE2;
}
[data-theme="dark"] body{ background:var(--paper); color:var(--text); }
[data-theme="dark"] .card,
[data-theme="dark"] .quote,
[data-theme="dark"] .tier,
[data-theme="dark"] .calc,
[data-theme="dark"] .form,
[data-theme="dark"] .faq details,
[data-theme="dark"] .step,
[data-theme="dark"] .compare-table,
[data-theme="dark"] .nm-checker,
[data-theme="dark"] .gallery-tile,
[data-theme="dark"] .trust-item,
[data-theme="dark"] .team-card{ background:var(--card-bg); border-color:var(--line); }
[data-theme="dark"] .trust-item .ti-label{ color:var(--text); }
[data-theme="dark"] .team-card .role{ color:rgba(255,255,255,.6); }
[data-theme="dark"] .nm-checker select, [data-theme="dark"] .nm-checker input{ background:var(--paper); color:var(--text); border-color:var(--line); }
[data-theme="dark"] .card .ico{ background:var(--sun); }
[data-theme="dark"] .card .ico svg{ stroke:var(--ink); }
[data-theme="dark"] .card .more,
[data-theme="dark"] .checklist li strong,
[data-theme="dark"] .quote p,
[data-theme="dark"] .brand .name,
[data-theme="dark"] .powered-by strong,
[data-theme="dark"] .nav-links a{ color:var(--text); }
[data-theme="dark"] .form input, [data-theme="dark"] .form select, [data-theme="dark"] .form textarea{ background:var(--paper); color:var(--text); border-color:var(--line); }
[data-theme="dark"] .compare-table th{ background:var(--paper); color:var(--text); }
[data-theme="dark"] .st-btn{ background:var(--white); color:var(--ink); }
[data-theme="dark"] .badge-chip{ background:var(--card-bg); color:var(--text); border-color:var(--line); }
[data-theme="dark"] .site-header{ background:rgba(18,19,23,.86); }
[data-theme="dark"] .nav-toggle span{ background:var(--sun); }
[data-theme="dark"] .nav-links{ background:var(--paper); }
[data-theme="dark"] .btn-line{ border-color:var(--slate); color:var(--text); }
[data-theme="dark"] .btn-line:hover{ background:var(--text); color:var(--ink); }
[data-theme="dark"] .ph{ filter:brightness(.82); }

/* Theme toggle button */
.theme-toggle{
  display:inline-grid; place-items:center; width:38px; height:38px; border-radius:50%;
  border:1.5px solid var(--line); background:var(--white); color:var(--ink); cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease; flex:none;
}
.theme-toggle:hover{ transform:translateY(-2px); box-shadow:0 8px 18px rgba(14,15,18,.14); }
.theme-toggle svg{ width:18px; height:18px; stroke:var(--ink); fill:none; stroke-width:1.8; }
.theme-toggle .moon{ display:none; }
[data-theme="dark"] .theme-toggle .sun{ display:none; }
[data-theme="dark"] .theme-toggle .moon{ display:block; }

/* ---------- Scrolled navbar ---------- */
.site-header{ transition:box-shadow .25s ease, padding .25s ease; }
.site-header.scrolled{ box-shadow:0 8px 26px rgba(14,15,18,.08); }
.site-header.scrolled .nav{ padding-top:.55rem; padding-bottom:.55rem; }

/* ---------- Grain overlay ---------- */
.grain-overlay{
  position:fixed; inset:0; z-index:9000; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Particle canvas (heroes) ---------- */
.particle-canvas{ position:absolute; inset:0; z-index:0; pointer-events:none; width:100%; height:100%; }

/* ---------- Live "producing now" widget ---------- */
.live-widget{
  position:absolute; right:clamp(1rem,4vw,3rem); bottom:1.6rem; z-index:2;
  background:linear-gradient(150deg,#12141a,#1c2028); border:1px solid rgba(255,255,255,.12); border-radius:16px;
  padding:1rem 1.3rem; box-shadow:0 20px 50px rgba(0,0,0,.4); display:none;
}
.hero-xl .live-widget{ display:block; position:static; margin:2rem auto 0; width:max-content; }
.lw-row{ display:flex; align-items:center; gap:.5rem; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.55); }
.lw-dot{ width:7px; height:7px; border-radius:50%; background:#7CE0A0; box-shadow:0 0 8px #7CE0A0; animation:lwPulse 1.8s ease-in-out infinite; }
@keyframes lwPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
.lw-big{ font-family:'Space Grotesk',sans-serif; font-size:1.9rem; font-weight:600; color:var(--sun); margin-top:.25rem; text-shadow:0 0 20px rgba(242,169,59,.5); }
.lw-sub{ font-size:.7rem; color:rgba(255,255,255,.45); margin-top:.15rem; }
@media (max-width:820px){ .live-widget{ position:static; margin:1.6rem auto 0; width:max-content; } }

/* ---------- Testimonial carousel ---------- */
.carousel{ overflow:hidden; }
.carousel-track{ display:flex; transition:transform .5s cubic-bezier(.2,.8,.3,1); touch-action:pan-y; }
.carousel-slide{ flex:0 0 100%; padding:0 .4rem; }
.carousel-nav{ display:flex; align-items:center; justify-content:center; gap:1.1rem; margin-top:1.6rem; }
.carousel-dots{ display:flex; justify-content:center; gap:.5rem; margin-top:0; }
.carousel-dots button{ width:9px; height:9px; border-radius:50%; border:0; background:var(--line); cursor:pointer; padding:0; transition:.2s; }
.carousel-dots button.active{ background:var(--sun); width:24px; border-radius:5px; }
.carousel-arrow{ display:inline-grid; place-items:center; width:40px; height:40px; border-radius:50%; flex:none;
  border:1.5px solid var(--line); background:var(--white); color:var(--ink); cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease; }
.carousel-arrow:hover{ transform:translateY(-2px); box-shadow:0 8px 18px rgba(14,15,18,.14); }
.carousel-arrow svg{ width:16px; height:16px; stroke:var(--ink); fill:none; }
[data-theme="dark"] .carousel-arrow{ background:var(--card-bg); border-color:var(--line); }
[data-theme="dark"] .carousel-arrow svg{ stroke:var(--text); }

/* ---------- Heading accent (hand-drawn keyword loop) ---------- */
.hl{ position:relative; display:inline-block; }
.hl::after{
  content:""; position:absolute; left:-.42em; right:-.4em; top:-.16em; bottom:-.1em;
  border:2px solid var(--sun); border-radius:52% 48% 46% 54% / 58% 44% 56% 42%;
  transform:rotate(-1.6deg); pointer-events:none;
}
.on-dark .hl::after{ border-color:var(--sun); }

/* ---------- Before / after slider ---------- */
/* ---------- Roofing intro reel (roofing.html) ---------- */
.roofing-reel-wrap{ display:flex; justify-content:center; }
.roofing-reel{ width:100%; max-width:420px; height:auto; display:block; border-radius:var(--radius); box-shadow:0 24px 60px rgba(14,15,18,.22); background:#0b1a12; position:relative; }
@media (max-width:600px){ .roofing-reel{ max-width:340px; } }

/* Ambient blurred-video backdrop behind the roofing reel section */
.roofing-video-section{ position:relative; overflow:hidden; isolation:isolate; }
.roofing-video-section > .wrap{ position:relative; z-index:1; }
.roofing-video-bg{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.roofing-video-bg video{
  width:100%; height:100%; object-fit:cover;
  filter:blur(48px) saturate(1.25) brightness(.94);
  transform:scale(1.22);
}
.roofing-video-bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg,
    var(--paper) 0%, var(--paper) 26%,
    rgba(247,246,242,.88) 40%, rgba(247,246,242,.5) 58%,
    rgba(247,246,242,.22) 76%, rgba(247,246,242,.06) 100%);
}
[data-theme="dark"] .roofing-video-bg::after{
  background:linear-gradient(100deg,
    var(--ink) 0%, var(--ink) 26%,
    rgba(10,11,13,.88) 40%, rgba(10,11,13,.5) 58%,
    rgba(10,11,13,.22) 76%, rgba(10,11,13,.06) 100%);
}
@media (max-width:820px){
  .roofing-video-bg::after{
    background:linear-gradient(180deg,
      var(--paper) 0%, var(--paper) 30%,
      rgba(247,246,242,.86) 46%, rgba(247,246,242,.45) 64%,
      rgba(247,246,242,.15) 100%);
  }
  [data-theme="dark"] .roofing-video-bg::after{
    background:linear-gradient(180deg,
      var(--ink) 0%, var(--ink) 30%,
      rgba(10,11,13,.86) 46%, rgba(10,11,13,.45) 64%,
      rgba(10,11,13,.15) 100%);
  }
}
@media (prefers-reduced-motion: reduce){
  .roofing-video-bg video{ display:none; }
  .roofing-video-bg{ background:var(--paper); }
  [data-theme="dark"] .roofing-video-bg{ background:var(--ink); }
}

.ba-slider{ position:relative; border-radius:var(--radius); overflow:hidden; user-select:none; touch-action:none; min-height:340px; box-shadow:0 20px 50px rgba(14,15,18,.14); }
.ba-slider .ph{ position:absolute; inset:0; min-height:0; border-radius:0; border:0; margin:0; }
.ba-slider .ph img{ width:100%; height:100%; object-fit:cover; object-position:center 65%; display:block; }
.ba-slider .ph::after{ content:none; }
.ba-after{ clip-path:inset(0 50% 0 0); }
.ba-tag{ position:absolute; top:1rem; z-index:2; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; background:rgba(10,11,13,.72); color:#fff; padding:.4rem .8rem; border-radius:999px; }
.ba-tag.before{ left:1rem; } .ba-tag.after{ right:1rem; }
.ba-handle{ position:absolute; top:0; bottom:0; left:50%; width:0; z-index:3; transform:translateX(-50%); cursor:ew-resize; }
.ba-handle::before{ content:""; position:absolute; top:0; bottom:0; left:0; width:2px; background:#fff; box-shadow:0 0 10px rgba(0,0,0,.4); }
.ba-handle::after{ content:"↔"; position:absolute; top:50%; left:0; transform:translate(-50%,-50%); width:42px; height:42px; border-radius:50%; background:#fff; color:var(--ink); display:grid; place-items:center; font-size:1.1rem; box-shadow:0 8px 20px rgba(0,0,0,.3); }

/* ---------- Testimonial video placeholder ---------- */
.testi-video-wrap{ max-width:800px; margin:0 auto; }
.testi-video-ph{
  position:relative; aspect-ratio:16/9; border-radius:var(--radius);
  background:linear-gradient(150deg,#26303f,#2E4B6B); border:1px dashed rgba(255,255,255,.25);
  display:grid; place-items:center; gap:.9rem; color:rgba(255,255,255,.65);
  font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; text-align:center; padding:1rem;
}
.tv-play{ width:64px; height:64px; border-radius:50%; background:var(--sun); display:grid; place-items:center; flex:none; }
.tv-play svg{ width:22px; height:22px; fill:var(--ink); margin-left:3px; }
.testi-video{ width:100%; aspect-ratio:16/9; border-radius:var(--radius); display:block; background:#000; box-shadow:0 24px 60px rgba(14,15,18,.3); }

/* ---------- Unified real-photo/video color grade ----------
   Applied to every real (non-illustrated) photo and video across the site —
   install photos, testimonial videos, roofing reel, hero photo — so they
   read as one consistent shoot instead of a mix of camera/source tones. */
.site-photo{ filter:saturate(1.07) contrast(1.035) brightness(.99); }

/* ---------- Gallery + lightbox ---------- */
.gallery{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1rem; }
.gallery-tile{ border-radius:var(--radius); overflow:hidden; transition:transform .3s ease, box-shadow .3s ease; }
.gallery-tile:hover{ transform:translateY(-4px) scale(1.015); box-shadow:0 20px 44px rgba(14,15,18,.16); }
.gallery-tile .ph{ min-height:190px; margin:0; border-radius:var(--radius); }
.gallery-tile img{ width:100%; height:190px; object-fit:cover; display:block; border-radius:var(--radius); }
.gallery-cap{ font-size:.82rem; color:var(--slate-2); margin-top:.5rem; text-align:center; }

/* ---------- Portfolio bento gallery (about.html recent installs) ---------- */
.gallery-portfolio{ grid-template-columns:repeat(4,1fr); grid-auto-rows:200px; grid-auto-flow:dense; gap:1.1rem; }
.gallery-portfolio .gallery-tile{ box-shadow:0 14px 34px rgba(14,15,18,.12); }
.gallery-portfolio .gallery-tile:hover{ box-shadow:0 22px 48px rgba(14,15,18,.2); }
.gallery-portfolio .gallery-tile:first-child{ grid-column:span 2; grid-row:span 2; }
.gallery-portfolio .gallery-tile img{ width:100%; height:100%; }
@media (max-width:900px){
  .gallery-portfolio{ grid-template-columns:repeat(2,1fr); grid-auto-rows:180px; }
  .gallery-portfolio .gallery-tile:first-child{ grid-column:span 2; grid-row:span 2; }
}
@media (max-width:560px){
  .gallery-portfolio{ grid-template-columns:1fr; grid-auto-rows:240px; }
  .gallery-portfolio .gallery-tile:first-child{ grid-column:span 1; grid-row:span 1; }
}

/* ---------- Equipment gallery (solar.html premium hardware) ---------- */
.equip-gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.equip-tile{ position:relative; border-radius:var(--radius); overflow:hidden; box-shadow:0 18px 44px rgba(0,0,0,.28); transition:transform .3s ease, box-shadow .3s ease; }
.equip-tile:hover{ transform:translateY(-4px); box-shadow:0 24px 54px rgba(0,0,0,.34); }
.equip-tile img{ width:100%; height:360px; object-fit:cover; display:block; }
.equip-tile .equip-overlay{ position:absolute; left:0; right:0; bottom:0; padding:2.2rem 1.2rem 1rem; background:linear-gradient(0deg, rgba(0,0,0,.85) 20%, rgba(0,0,0,.45) 65%, rgba(0,0,0,0)); }
.equip-tile .equip-label{ display:block; color:#fff; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1rem; }
.equip-tile .equip-sub{ display:block; margin-top:.3rem; color:rgba(255,255,255,.75); font-size:.8rem; line-height:1.35; }
@media (max-width:820px){ .equip-gallery{ grid-template-columns:1fr; } .equip-tile img{ height:280px; } }

/* ---------- Meet the team ---------- */
.team-tier-label{ text-align:center; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--sun-deep); margin:2.6rem 0 1.2rem; }
.team-tier-label:first-of-type{ margin-top:0; }
.team-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1.1rem; }
.team-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:1.7rem 1.2rem; text-align:center; transition:transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s ease; }
.team-card:hover{ transform:translateY(-4px); box-shadow:0 20px 44px rgba(14,15,18,.14); }
.team-avatar{ width:64px; height:64px; margin:0 auto .9rem; border-radius:50%; background:linear-gradient(150deg,var(--ink),#2E3648); color:var(--sun); display:grid; place-items:center; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.05rem; letter-spacing:.02em; }
.team-card h3{ font-size:1.02rem; margin-bottom:.15rem; }
.team-card .role{ font-size:.82rem; color:var(--slate); line-height:1.4; }
.dark .team-card{ background:rgba(255,255,255,.045); border-color:rgba(255,255,255,.1); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
.dark .team-card h3{ color:var(--white); }
.dark .team-card .role{ color:rgba(255,255,255,.62); }
.team-lead-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.6rem; max-width:640px; margin:0 auto; }
.team-lead-card{ background:var(--white); border:2px solid var(--sun); border-radius:var(--radius); padding:2.6rem 1.6rem; text-align:center; transition:transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s ease; }
.team-lead-card:hover{ transform:translateY(-4px); box-shadow:0 24px 54px rgba(14,15,18,.18); }
.team-lead-avatar{ width:108px; height:108px; margin:0 auto 1.3rem; border-radius:50%; background:linear-gradient(150deg,var(--ink),#2E3648); color:var(--sun); display:grid; place-items:center; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.85rem; letter-spacing:.02em; }
.team-lead-card h3{ font-size:1.3rem; margin-bottom:.3rem; }
.team-lead-card .role{ font-size:.9rem; color:var(--sun-deep); font-weight:600; letter-spacing:.02em; }
[data-theme="dark"] .team-lead-card,
.dark .team-lead-card{ background:rgba(255,255,255,.045); border-color:var(--sun); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
[data-theme="dark"] .team-lead-card h3,
.dark .team-lead-card h3{ color:var(--white); }
.lightbox{ position:fixed; inset:0; z-index:9500; background:rgba(6,7,9,.92); display:none; align-items:center; justify-content:center; gap:1rem; opacity:0; transition:opacity .25s ease; }
.lightbox.open{ display:flex; opacity:1; }
.lb-stage{ display:flex; flex-direction:column; align-items:center; gap:.8rem; }
.lb-caption{ color:rgba(255,255,255,.7); font-size:.9rem; }
.lb-close,.lb-prev,.lb-next{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2); color:#fff; width:46px; height:46px; border-radius:50%; font-size:1.4rem; cursor:pointer; display:grid; place-items:center; transition:.2s; }
.lb-close{ position:absolute; top:1.4rem; right:1.4rem; }
.lb-close:hover,.lb-prev:hover,.lb-next:hover{ background:rgba(255,255,255,.18); }
@media (max-width:640px){ .lb-prev,.lb-next{ width:38px; height:38px; } }

/* ---------- Sticky quote bar ---------- */
.sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:400; transform:translateY(120%); transition:transform .35s cubic-bezier(.2,.8,.3,1);
  background:rgba(10,11,13,.92); backdrop-filter:blur(14px); border-top:1px solid rgba(255,255,255,.1);
  padding:.8rem clamp(1rem,4vw,2rem); display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.sticky-cta.show{ transform:translateY(0); }
.sticky-cta .sc-text{ color:rgba(255,255,255,.85); font-size:.92rem; font-family:'Space Grotesk',sans-serif; font-weight:600; }
.sticky-cta .sc-text small{ display:block; font-family:'Inter',sans-serif; font-weight:400; color:rgba(255,255,255,.5); font-size:.76rem; }
.sticky-cta .sc-actions{ display:flex; gap:.6rem; flex:none; }
@media (max-width:520px){ .sticky-cta .sc-text small{ display:none; } }

/* ---------- Skeleton shimmer on placeholder tiles ---------- */
.ph{ position:relative; overflow:hidden; }
.ph::after{
  content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
  animation:shimmer 3.2s ease-in-out infinite;
}
@keyframes shimmer{ 0%{ transform:translateX(-100%); } 55%,100%{ transform:translateX(100%); } }

/* ---------- Trust badge strip (icon-forward) ---------- */
.trust-strip{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1.2rem; }
.trust-item{ display:flex; align-items:center; gap:.9rem; background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:1.1rem 1.3rem; transition:transform .2s ease, box-shadow .2s ease; text-decoration:none; color:inherit; }
.trust-item:hover{ transform:translateY(-3px); box-shadow:0 14px 30px rgba(14,15,18,.1); }
.trust-item .ti-ico{ width:44px; height:44px; border-radius:50%; background:var(--ink); display:grid; place-items:center; flex:none; }
.trust-item .ti-ico svg{ width:22px; height:22px; stroke:var(--sun); fill:none; stroke-width:1.8; }
.trust-item .ti-label{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:.95rem; }
.trust-item .ti-sub{ font-size:.78rem; color:var(--slate-2); }

/* ---------- State map ---------- */
.state-map{ display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; align-items:center; }
@media (max-width:820px){ .state-map{ grid-template-columns:1fr; } }
.state-map svg{ width:100%; height:auto; }
.state-map .st-shape{ transition:fill .25s ease; cursor:pointer; }
.state-map.pa .st-shape{ fill:rgba(61,107,179,.16); stroke:var(--pa); stroke-width:2; }
.state-map.pa .st-shape:hover{ fill:rgba(61,107,179,.3); }
.state-map.fl .st-shape{ fill:rgba(46,158,134,.16); stroke:var(--fl); stroke-width:2; }
.state-map.fl .st-shape:hover{ fill:rgba(46,158,134,.3); }
.state-map .st-marker{ fill:var(--ink); stroke:var(--white); stroke-width:2; transition:r .2s ease; }
.state-map .st-marker:hover{ r:7; }
.state-map .st-city{ font-family:'Space Grotesk',sans-serif; font-size:11px; font-weight:600; fill:var(--ink); pointer-events:none; }