/* ============ VOLTCALC — committed single dark identity ============ */
:root{
  --void:#080E16; --ground:#0B131E; --surf:#101B29; --surf2:#152436; --raise:#1B2E44;
  --line:#1E324A; --line2:#2C4863;
  --ink:#EEF3F9; --ink2:#A9BED4; --muted:#6E85A0; --hi:#FFFFFF;
  --volt:#F5B825; --volt-txt:#F5B825; --volt-dim:#8A6A18; --volt-glow:rgba(245,184,37,.22); --on-volt:#150F02;
  --volt-ink:#F5B825; --volt-bg:#2A2109; --volt-line:#5C4A14;
  --copper:#C87941;
  --ok:#4FB286; --ok-bg:#0E2A21; --ok-line:#235C46;
  --warn:#D9705B; --warn-bg:#1E100D; --warn-ink:#E4C0B8; --on-warn:#1A0906;
  --note:#B47BD6; --note-bg:#1C1330;
  --hero-tint:#152740; --art-live:#F5B825; --art-dim:#3E5878; --art-case:#0E1926;
  --logo-chip:transparent; --logo-pad:0px;
  --plate-hi:#22364C; --plate-lo:#16263A; --plate-edge:#2C4863; --plate-gloss:rgba(255,255,255,.07);
  --plate-screw:#3E5878; --plate-slot:#0B131E; --plate-well:#070D15;
  --lever-hi:#F7C64A; --lever-lo:#C8901A;
}
[data-mode="day"]{
  --void:#EDEFF3; --ground:#F7F8FA; --surf:#FFFFFF; --surf2:#EFF2F6; --raise:#E2E8F0;
  --line:#DCE2EA; --line2:#B9C4D2;
  --ink:#0E1A2B; --ink2:#3B4B60; --muted:#66788E; --hi:#0E1A2B;
  --volt:#F5B825; --volt-txt:#8A6410; --volt-dim:#8A6410; --volt-glow:rgba(138,100,16,.16); --on-volt:#150F02;
  --volt-ink:#7A5A0E; --volt-bg:#FBF1D6; --volt-line:#D9BE72;
  --copper:#9C551F;
  --ok:#1B6B47; --ok-bg:#E2F1E9; --ok-line:#8CC0A8;
  --warn:#A8412C; --warn-bg:#F8E7E3; --warn-ink:#7A3427; --on-warn:#FFFFFF;
  --note:#6C3E86; --note-bg:#F3EAF8;
  --hero-tint:#E4EAF2; --art-live:#D99A12; --art-dim:#93A3B6; --art-case:#FFFFFF;
  --logo-chip:#12100E; --logo-pad:7px;
  --plate-hi:#FFFFFF; --plate-lo:#E7EBF1; --plate-edge:#C3CDDA; --plate-gloss:rgba(255,255,255,.9);
  --plate-screw:#AEBAC9; --plate-slot:#8B98A8; --plate-well:#CED6E0;
  --lever-hi:#FAFBFC; --lever-lo:#D5DCE5;
}
[data-mode="day"] .concept{background:#F2ECF8;color:#4A2E63;border-bottom:1px solid #DCCCEC}
[data-mode="day"] .concept b{color:#331F47}
[data-mode="day"] .seclabel svg [stroke]{stroke:var(--copper)}
[data-mode="day"] .brand .mark{background:var(--logo-chip);padding:var(--logo-pad);border-radius:4px}
[data-mode="day"] .foot .lockup{background:var(--logo-chip);padding:12px;border-radius:4px}
[data-mode="day"] .site{box-shadow:0 0 0 1px var(--line),0 40px 110px -60px rgba(14,26,43,.35)}
[data-mode="day"] .panelwrap,[data-mode="day"] .job,[data-mode="day"] .formwrap{
  box-shadow:0 20px 44px -30px rgba(14,26,43,.4)}
[data-mode="day"] .hero-art{filter:drop-shadow(0 22px 44px rgba(14,26,43,.18))}
[data-mode="day"] .brand .mark{filter:none}
[data-mode="day"] .topbar,[data-mode="day"] .plate,[data-mode="day"] .foot,
[data-mode="day"] .panelhead,[data-mode="day"] .formhead,[data-mode="day"] .job .ph2,
[data-mode="day"] .photo{background:var(--surf2)}
[data-mode="day"] .foot{border-top:1px solid var(--line)}
*{box-sizing:border-box}
body{margin:0;background:var(--void);color:var(--ink);
  transition:background-color .22s ease,color .22s ease;
  font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:16px;line-height:1.62;
  -webkit-font-smoothing:antialiased}

/* ---------- chrome ---------- */
.concept{position:sticky;top:0;z-index:80;background:#151020;color:#B99BD6;border-bottom:1px solid #2A1F3D;
  padding:8px 14px;display:flex;flex-wrap:wrap;gap:5px 12px;align-items:center;justify-content:center;
  font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.13em;text-transform:uppercase;text-align:center}
.concept b{font-weight:600;color:#D8C2ED}
.controls{background:var(--ground);border-bottom:1px solid var(--line);padding:10px 14px;
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;
  position:sticky;top:33px;z-index:75}
.controls .lbl{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted)}
.ctl{font-family:"IBM Plex Mono",monospace;font-size:10.5px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;padding:8px 13px;border-radius:2px;border:1px solid var(--line2);
  background:transparent;color:var(--ink2);cursor:pointer;transition:.16s}
.ctl:hover{border-color:var(--volt);color:var(--volt-txt)}
.ctl[aria-pressed="true"]{background:var(--note-bg);border-color:var(--note);color:var(--note)}
.ctl.nav[aria-pressed="true"]{background:var(--volt);border-color:var(--volt);color:var(--on-volt)}
.ctl:focus-visible{outline:2px solid var(--volt);outline-offset:2px}

/* ---------- site shell ---------- */
.site{max-width:1140px;margin:0 auto;background:var(--ground);
  transition:background-color .22s ease;
  box-shadow:0 0 0 1px var(--line),0 40px 110px -50px #000}
.view{display:none}.view.on{display:block}

/* ============ THE CURRENT LINE — a live conductor, not a border ============ */
.bus{position:relative;height:2px;background:var(--line2);overflow:hidden}
.bus::after{content:"";position:absolute;top:0;left:-30%;width:30%;height:100%;
  background:linear-gradient(90deg,transparent,var(--volt),transparent);
  animation:flow 4.2s linear infinite}
@keyframes flow{to{left:110%}}
.bus.slow::after{animation-duration:7s}

/* ---------- top bar: reads like equipment labelling ---------- */
.topbar{background:var(--void);padding:16px 46px;display:flex;flex-wrap:wrap;
  gap:10px 20px;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:13px;font-family:"Archivo",sans-serif;
  font-weight:900;font-size:20px;letter-spacing:-.02em;line-height:1}
.brand .mark{width:38px;height:auto;flex-shrink:0;display:block;
  filter:drop-shadow(0 0 12px rgba(245,184,37,.25))}
.brand .wm{display:flex;flex-direction:column;gap:3px}
.brand .wm .n1{display:block}
.brand .wm .n2{font-family:"IBM Plex Mono",monospace;font-weight:500;font-size:9.5px;
  letter-spacing:.22em;color:var(--muted)}
.brand span{color:var(--volt-txt)}

.tb-right{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.lic{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--ink2);letter-spacing:.07em}
.lic b{color:var(--hi);font-weight:600}
.ph{font-family:"Archivo",sans-serif;font-weight:800;font-size:19px;color:var(--volt-txt);
  text-decoration:none;white-space:nowrap;transition:.15s}
.ph:hover{text-shadow:0 0 16px var(--volt-glow)}
/* ============ THE LIGHT SWITCH ============ */
.mode{display:inline-flex;align-items:center;gap:11px;background:none;border:none;
  padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.mode:focus-visible{outline:2px solid var(--volt);outline-offset:4px;border-radius:3px}
.swplate{position:relative;width:30px;height:50px;border-radius:3px;flex-shrink:0;
  background:linear-gradient(180deg,var(--plate-hi),var(--plate-lo));
  border:1px solid var(--plate-edge);
  box-shadow:0 1px 2px rgba(0,0,0,.35),inset 0 1px 0 var(--plate-gloss);
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  padding:4px 0;transition:border-color .16s}
.mode:hover .swplate{border-color:var(--volt)}
.screw{width:4px;height:4px;border-radius:50%;background:var(--plate-screw);
  box-shadow:inset 0 .5px 0 rgba(255,255,255,.25);position:relative}
.screw::after{content:"";position:absolute;left:.5px;right:.5px;top:1.5px;height:1px;
  background:var(--plate-slot);transform:rotate(-32deg)}
.swslot{position:relative;width:15px;height:30px;border-radius:2px;
  background:var(--plate-well);box-shadow:inset 0 1px 3px rgba(0,0,0,.5);
  display:flex;align-items:flex-start;padding:2px}
.lever{width:11px;height:13px;border-radius:2px;display:block;
  background:linear-gradient(180deg,var(--lever-hi),var(--lever-lo));
  box-shadow:0 1px 2px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.35);
  transform:translateY(0);
  transition:transform .17s cubic-bezier(.34,1.4,.5,1),box-shadow .17s}
/* night = lights ON = lever up + glowing */
.lever{box-shadow:0 1px 2px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.35),
  0 0 12px var(--volt-glow)}
/* day = lights OFF = lever down */
[data-mode="day"] .lever{transform:translateY(13px);
  box-shadow:0 1px 2px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.5)}
.swlbl{display:flex;flex-direction:column;gap:2px;text-align:left;
  font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);line-height:1.3}
.swlbl b{font-size:10.5px;font-weight:600;color:var(--volt-txt);letter-spacing:.14em}
[data-mode="day"] .swlbl b{color:var(--copper)}
@media(max-width:620px){.swlbl{display:none}}
@media (prefers-reduced-motion: reduce){.lever{transition:none}}

/* ---------- hero ---------- */
.hero{padding:70px 46px 62px;position:relative;overflow:hidden;
  background:radial-gradient(130% 100% at 8% 0%,var(--hero-tint) 0%,var(--ground) 58%)}
.hero.split{padding-bottom:44px}
.hero.split .hero-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);
  gap:52px;align-items:center}
.hero-art{width:100%;max-width:400px;height:auto;justify-self:end;margin:-14px 0;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.55))}
@media(max-width:860px){.hero.split .hero-in{grid-template-columns:1fr}
  .hero-art{display:none}}
@media(max-width:720px){.hero{padding:48px 22px 44px}}
.hero-grid{position:absolute;inset:0;opacity:.4;pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(90% 70% at 20% 10%,#000 0%,transparent 70%);
  -webkit-mask-image:radial-gradient(90% 70% at 20% 10%,#000 0%,transparent 70%)}
.hero-in{position:relative}
.kicker{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--volt-txt);margin-bottom:14px;display:flex;align-items:center;gap:10px}
.hero h1{font-family:"Archivo",sans-serif;font-weight:900;font-size:clamp(34px,5.6vw,64px);
  line-height:.96;margin:0 0 18px;letter-spacing:-.035em;text-wrap:balance;max-width:13ch}
.hero h1 em{font-style:normal;color:var(--volt-txt)}
.hero p{margin:0 0 30px;font-size:17.5px;line-height:1.62;color:var(--ink2);max-width:40ch}
.cta-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.cta-row .btn-ghost{font-size:14px;padding:12px 18px}
.btn{font-family:"Archivo",sans-serif;font-weight:700;font-size:15px;padding:14px 24px;
  border-radius:2px;text-decoration:none;border:1.5px solid transparent;cursor:pointer;
  transition:.18s;display:inline-block;position:relative}
.btn-primary{background:var(--volt);color:var(--on-volt)}
.btn-primary:hover{box-shadow:0 0 0 1px var(--volt),0 0 26px var(--volt-glow);transform:translateY(-1px)}
.btn-ghost{border-color:var(--line2);color:var(--ink);background:transparent}
.btn-ghost:hover{border-color:var(--volt);color:var(--volt-txt)}
.btn:focus-visible{outline:2px solid var(--volt);outline-offset:3px}

/* ---------- nameplate trust strip ---------- */
.plate{background:var(--void);padding:0 46px}
@media(max-width:720px){.plate{padding:0 22px}}
.plate-in{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));
  border:none;border-radius:0;overflow:hidden;margin:0}
.pcell{padding:20px 20px 20px 0;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:4px}
.pcell:last-child{border-right:none}
.pcell .k{font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted)}
.pcell .v{font-family:"Archivo",sans-serif;font-weight:700;font-size:15.5px;color:var(--hi)}
.pcell .v em{font-style:normal;color:var(--volt-txt)}

/* ---------- sections ---------- */
.sec{padding:66px 46px}
.sec.alt{background:var(--surf);padding:66px 46px}
.sec.tight{padding:44px 46px}
.sec.wide{padding:80px 46px}
.sec-in{max-width:none}
.sec h2 + .grid3,.sec h2 + .factors,.sec h2 + .steps,.sec h2 + .faq,.sec h2 + .signs,
.sec h2 + .job,.sec h2 + .panelwrap,.sec h2 + .areas{margin-top:32px}
.sec .sub + .grid3,.sec .sub + .factors{margin-top:4px}
.narrow{max-width:640px}
@media(max-width:720px){.sec,.sec.alt,.sec.tight,.sec.wide{padding:44px 22px}}
.seclabel{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--copper);margin-bottom:14px;display:flex;align-items:center;gap:10px}
.sec h2{font-family:"Archivo",sans-serif;font-weight:800;font-size:clamp(26px,4vw,40px);
  margin:0 0 11px;letter-spacing:-.028em;text-wrap:balance;line-height:1.02}
.sec .sub{margin:0 0 32px;color:var(--ink2);max-width:52ch;font-size:16px;line-height:1.6}

/* ============ THE PANEL SCHEDULE — services as a load centre ============ */
.panelwrap{border:none;border-radius:0;background:var(--surf2);overflow:hidden;
  box-shadow:0 30px 60px -34px #000}
.panelhead{background:var(--void);padding:11px 16px;display:flex;justify-content:space-between;
  align-items:center;flex-wrap:wrap;gap:8px;border-bottom:1px solid var(--line2)}
.panelhead .t{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink2)}
.panelhead .r{font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--hi);letter-spacing:.1em}
.breakers{display:grid;grid-template-columns:1fr 1fr}
.bk{display:flex;align-items:center;gap:12px;padding:13px 16px;
  border-bottom:1px solid var(--line);border-right:1px solid var(--line);position:relative}
.breakers .bk:nth-child(2n){border-right:none}
.bk .no{font-family:"IBM Plex Mono",monospace;font-size:10px;color:var(--muted);
  width:20px;flex-shrink:0;text-align:right}
.sw{width:15px;height:26px;border-radius:2px;background:var(--raise);border:1px solid var(--line2);
  flex-shrink:0;position:relative;overflow:hidden}
.sw::after{content:"";position:absolute;left:2px;right:2px;top:2px;height:9px;border-radius:1px;
  background:var(--volt);box-shadow:0 0 9px var(--volt-glow)}
.bk .nm{font-size:14.5px;color:var(--ink);line-height:1.35}
.bk .amp{margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:10px;
  color:var(--muted);flex-shrink:0;padding-left:8px;border-bottom:1px dotted var(--line2);
  padding-bottom:1px;transition:color .15s,border-color .15s}
.bk[data-d]{cursor:help}
.bk[data-d]:hover,.bk[data-d]:focus-visible,.bk.on{background:var(--raise);outline:none}
.bk[data-d]:hover .amp,.bk[data-d]:focus-visible .amp,.bk.on .amp{
  color:var(--volt-txt);border-bottom-color:var(--volt-dim)}
.bk[data-d]:hover .sw::after,.bk[data-d]:focus-visible .sw::after,.bk.on .sw::after{
  box-shadow:0 0 14px var(--volt);height:11px}
.bkread{display:flex;gap:16px;align-items:flex-start;padding:15px 16px;background:var(--void);
  border-top:1px solid var(--line2);min-height:62px}
.bkread .ab{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.14em;
  color:var(--volt-txt);flex:0 0 76px;padding-top:2px}
.bkread .df{font-size:13.5px;color:var(--ink2);line-height:1.5;margin:0}
.bkread .df b{color:var(--ink);font-weight:600}
@media(max-width:640px){.breakers{grid-template-columns:1fr}.bk{border-right:none!important}
  .bkread{flex-direction:column;gap:6px;min-height:0}.bkread .ab{flex:none}}

/* ---------- live data strip ---------- */
.live{background:var(--surf2);box-shadow:0 30px 60px -34px #000;overflow:hidden;margin-top:32px}
.livehead{background:var(--void);padding:11px 16px;display:flex;justify-content:space-between;
  align-items:center;flex-wrap:wrap;gap:8px;border-bottom:1px solid var(--line2)}
.livehead .t{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink2);display:flex;align-items:center;gap:9px}
.livehead .t i{width:7px;height:7px;border-radius:50%;background:var(--ok);
  box-shadow:0 0 0 3px rgba(79,178,134,.18);animation:lpulse 2.2s ease-in-out infinite}
@keyframes lpulse{0%,100%{opacity:1}50%{opacity:.35}}
.livehead .r{font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--muted);letter-spacing:.1em}
.liverows{display:grid;grid-template-columns:1fr 1fr}
.liverow{display:flex;gap:16px;padding:20px 18px;border-right:1px solid var(--line);align-items:flex-start}
.liverows .liverow:last-child{border-right:none}
.livenum{font-family:"Archivo",sans-serif;font-weight:800;font-size:38px;line-height:.92;
  color:var(--volt-txt);flex-shrink:0;min-width:52px}
.livenum.warnv{color:var(--warn)}
.livebody h5{margin:0 0 5px;font-size:14.5px;color:var(--ink);font-weight:600;line-height:1.35}
.livebody p{margin:0 0 6px;font-size:13px;color:var(--ink2);line-height:1.5}
.livebody .src{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.08em;
  color:var(--muted);text-transform:uppercase}
.livefoot{padding:12px 18px;border-top:1px solid var(--line2);background:var(--void);
  font-size:12.5px;color:var(--muted);line-height:1.5}
@media(max-width:720px){.liverows{grid-template-columns:1fr}
  .liverow{border-right:none;border-bottom:1px solid var(--line)}}

/* ---------- commercial: service riser art + one-line diagram ---------- */
@keyframes crise{0%{transform:translateY(0);opacity:0}14%{opacity:1}
  86%{opacity:1}100%{transform:translateY(112px);opacity:0}}
.cpulse{animation:crise 2.8s linear infinite}
.cpulse.p2{animation-delay:.93s}
.cpulse.p3{animation-delay:1.86s}
@keyframes cflow{to{stroke-dashoffset:-40}}
.cbusline{stroke-dasharray:5 15;animation:cflow 1.2s linear infinite}

.oneline{background:var(--surf2);box-shadow:0 30px 60px -34px #000;overflow:hidden}
.ol-head{background:var(--void);padding:11px 16px;display:flex;justify-content:space-between;
  align-items:center;flex-wrap:wrap;gap:8px;border-bottom:1px solid var(--line2)}
.ol-head .t{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink2)}
.ol-head .r{font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--hi);letter-spacing:.1em}
.ol-body{padding:26px 20px 8px;overflow-x:auto}
.ol-body svg{display:block;width:100%;min-width:560px;height:auto}
.oln{cursor:pointer}
.oln .box{fill:var(--raise);stroke:var(--line2);stroke-width:1.4;transition:.18s}
.oln .lb{fill:var(--ink);font-size:12px;font-family:"IBM Plex Sans",sans-serif}
.oln .cd{fill:var(--muted);font-size:10px;letter-spacing:.14em;
  font-family:"IBM Plex Mono",monospace;transition:.18s}
.oln .gl{stroke:var(--art-dim);stroke-width:1.5;fill:none;transition:.18s}
.oln:hover .box,.oln:focus-visible .box,.oln.on .box{stroke:var(--volt);fill:var(--surf)}
.oln:hover .cd,.oln:focus-visible .cd,.oln.on .cd{fill:var(--volt-txt)}
.oln:hover .gl,.oln:focus-visible .gl,.oln.on .gl{stroke:var(--volt)}
.oln:focus-visible{outline:none}
.ol-wire{stroke:var(--art-dim);stroke-width:1.6;fill:none}
.ol-read{display:flex;gap:16px;align-items:flex-start;padding:15px 16px;background:var(--void);
  border-top:1px solid var(--line2);min-height:74px}
.ol-read .ab{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.14em;
  color:var(--volt-txt);flex:0 0 116px;padding-top:2px}
.ol-read .df{font-size:13.5px;color:var(--ink2);line-height:1.55;margin:0}
.ol-read .df b{color:var(--ink);font-weight:600}
@media(max-width:640px){.ol-read{flex-direction:column;gap:6px;min-height:0}.ol-read .ab{flex:none}}
@media (prefers-reduced-motion: reduce){.cpulse,.cbusline{animation:none}}

/* ---------- branch cards ---------- */
.branches{display:grid;grid-template-columns:repeat(auto-fit,minmax(252px,1fr));gap:16px}
.branch{border:none;border-radius:0;background:var(--surf);
  display:flex;flex-direction:column;overflow:hidden;transition:.22s;
  box-shadow:inset 0 2px 0 0 var(--volt)}
.branch:hover{transform:translateY(-3px);box-shadow:inset 0 2px 0 0 var(--volt),0 24px 48px -28px #000}
.branch .cap{padding:24px 24px 4px;background:none}
.branch .cap h3{font-family:"Archivo",sans-serif;font-weight:800;font-size:20px;margin:0 0 4px}
.branch .cap p{margin:0;font-size:12.5px;color:var(--muted);font-family:"IBM Plex Mono",monospace;letter-spacing:.05em}
.branch .bd{padding:14px 24px 26px;display:flex;flex-direction:column;gap:16px;flex:1}
.branch ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;font-size:14.5px;color:var(--ink2)}
.branch li{display:flex;gap:9px;align-items:flex-start}
.branch li::before{content:"";width:6px;height:6px;margin-top:8px;flex-shrink:0;
  background:var(--volt);transform:rotate(45deg)}
.branch .go{margin-top:auto}

/* ---------- cards ---------- */
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:34px 30px}
.card{border:none;border-top:2px solid var(--copper);border-radius:0;padding:20px 0 0;
  background:none;display:flex;flex-direction:column;gap:9px}
.card h4{font-family:"Archivo",sans-serif;font-weight:700;font-size:16px;margin:0;color:var(--ink)}
.card p{margin:0;font-size:14.5px;color:var(--ink2)}
.card .sym{color:var(--copper);margin-bottom:2px}

/* ---------- service areas ---------- */
.areas{display:flex;flex-wrap:wrap;gap:8px}
.area{font-family:"IBM Plex Mono",monospace;font-size:12.5px;padding:9px 15px;border-radius:0;
  background:none;border:none;border-bottom:1px solid var(--line2);color:var(--ink2);transition:.15s}
.area:hover{border-color:var(--volt);color:var(--volt-txt)}
.area.home{color:var(--hi);border-bottom-color:var(--volt);border-bottom-width:2px}
.area.lux{border-bottom-color:var(--copper);color:var(--ink2)}
.area.lux:hover{border-bottom-color:var(--volt);color:var(--volt-txt)}

/* ---------- form ---------- */
.formwrap{background:var(--surf2);border:none;border-radius:0;overflow:hidden;
  box-shadow:0 34px 70px -40px #000}
.formhead{background:var(--void);padding:24px 28px;border-bottom:2px solid var(--volt)}
.formhead h3{font-family:"Archivo",sans-serif;font-weight:800;font-size:24px;margin:0 0 5px;letter-spacing:-.02em}
.formhead p{margin:0;font-size:13px;color:var(--muted);font-family:"IBM Plex Mono",monospace;letter-spacing:.04em}
.formbody{padding:28px}
.frow{display:grid;grid-template-columns:repeat(auto-fit,minmax(195px,1fr));gap:13px;margin-bottom:13px}
.fg{display:flex;flex-direction:column;gap:6px}
.fg label{font-family:"IBM Plex Mono",monospace;font-size:10px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.fg input,.fg select,.fg textarea{font-family:"IBM Plex Sans",sans-serif;font-size:15px;
  padding:12px 13px;border:1px solid var(--line2);border-radius:2px;background:var(--void);
  color:var(--ink);width:100%;transition:.15s}
.fg input::placeholder,.fg textarea::placeholder{color:var(--art-dim)}
.fg textarea{min-height:84px;resize:vertical}
.fg input:focus,.fg select:focus,.fg textarea:focus{outline:none;border-color:var(--volt);
  box-shadow:0 0 0 1px var(--volt),0 0 18px -6px var(--volt-glow)}
.fg .err{font-size:12px;color:var(--warn);display:none;font-family:"IBM Plex Mono",monospace}
.fg.bad input,.fg.bad select{border-color:var(--warn)}
.fg.bad .err{display:block}
.photo{border:none;border-left:2px solid var(--copper);border-radius:0;padding:13px 16px;
  font-size:13.5px;color:var(--muted);background:var(--void);margin-bottom:17px}
.done{background:var(--ok-bg);border:1px solid var(--ok);border-radius:3px;padding:21px;
  display:none;flex-direction:column;gap:9px}
.done.on{display:flex}
.done h4{font-family:"Archivo",sans-serif;font-weight:800;font-size:19px;margin:0;color:var(--ok)}
.done p{margin:0;font-size:14.5px;color:var(--ink2)}
.done .demo{color:var(--muted);font-size:12.5px;font-style:italic}

/* ---------- annotations ---------- */
.anno{display:none;background:var(--note-bg);border-left:3px solid var(--note);
  border-radius:0 2px 2px 0;padding:13px 16px;margin:12px 0;gap:6px;flex-direction:column}
body.notes .anno{display:flex}
.anno .t{font-family:"IBM Plex Mono",monospace;font-size:9.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--note)}
.anno p{margin:0;font-size:14px;color:var(--ink2)}

/* ---------- before ---------- */
.before{display:none;border:none;border-left:3px solid var(--warn);border-radius:0;margin:0 46px 26px;overflow:hidden}
body.compare .before{display:block}
.before .hd{background:var(--warn);color:var(--on-warn);padding:9px 16px;font-family:"IBM Plex Mono",monospace;
  font-size:10px;font-weight:600;letter-spacing:.13em;text-transform:uppercase}
.before .bd{padding:17px;background:var(--warn-bg)}
.before ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px;font-size:14.5px;color:var(--warn-ink)}
.before li::marker{color:var(--warn)}

.foot{background:var(--void);padding:44px 46px;font-size:13.5px;color:var(--muted);
  display:flex;flex-direction:column;gap:7px}
.foot .lockup{width:118px;height:auto;display:block;margin-bottom:14px;opacity:.95}
.foot .l{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--hi);letter-spacing:.05em}

/* ---------- LIVE STATUS ---------- */
.stat{display:inline-flex;align-items:center;gap:6px;font-family:"IBM Plex Mono",monospace;
  font-size:9.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ok);background:var(--ok-bg);border:1px solid var(--ok-line);
  padding:3px 8px;border-radius:2px;white-space:nowrap;vertical-align:middle}
.stat i{width:6px;height:6px;border-radius:50%;background:var(--ok);flex-shrink:0;
  box-shadow:0 0 0 0 rgba(79,178,134,.65);animation:pulse 2.4s ease-out infinite}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(79,178,134,.6)}
  70%{box-shadow:0 0 0 7px rgba(79,178,134,0)}
  100%{box-shadow:0 0 0 0 rgba(79,178,134,0)}}
.pcell .v .stat{margin-left:7px}

/* ---------- deep service pages ---------- */
.steps{display:flex;flex-direction:column;gap:0;border:none}
.step{display:flex;gap:22px;padding:19px 0;border-bottom:1px solid var(--line);background:none}
.step:last-child{border-bottom:none}
.step .n{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--volt-txt);
  width:26px;flex-shrink:0;padding-top:2px;letter-spacing:.08em}
.step h4{font-family:"Archivo",sans-serif;font-weight:700;font-size:15.5px;margin:0 0 4px}
.step p{margin:0;font-size:14px;color:var(--ink2)}
.factors{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:26px 30px}
.fx{border:none;border-top:1px solid var(--line2);border-radius:0;padding:15px 0 0;background:none}
.fx h4{font-family:"Archivo",sans-serif;font-weight:700;font-size:14.5px;margin:0 0 4px}
.fx p{margin:0;font-size:13.5px;color:var(--ink2)}
.signs{display:flex;flex-direction:column;gap:9px;margin:0;padding:0;list-style:none}
.signs li{display:flex;gap:11px;align-items:flex-start;font-size:15px;color:var(--ink2)}
.signs li::before{content:"";width:7px;height:7px;margin-top:8px;flex-shrink:0;
  background:var(--warn);transform:rotate(45deg)}
.job{border:none;border-radius:0;overflow:hidden;background:var(--surf);
  box-shadow:0 30px 60px -36px #000;display:grid;grid-template-columns:1.35fr 1fr;align-items:stretch}
@media(max-width:760px){.job{grid-template-columns:1fr}}
.job .ph2{position:relative;background:var(--void);padding:0;min-height:290px;
  display:flex;align-items:flex-end;justify-content:flex-start;overflow:hidden;
  background-image:linear-gradient(rgba(30,50,74,.55) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(30,50,74,.55) 1px,transparent 1px);
  background-size:30px 30px}
.job .ph2 .slot{position:relative;z-index:2;margin:0 0 16px 16px;
  font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.16em;
  color:var(--copper);border:1px solid var(--copper);padding:6px 11px;background:#0A121C}
.job .ph2::before,.job .ph2::after{content:"";position:absolute;width:30px;height:30px;
  border:2px solid var(--copper);opacity:.85}
.job .ph2::before{top:14px;left:14px;border-right:none;border-bottom:none}
.job .ph2::after{top:14px;right:14px;border-left:none;border-bottom:none}
.job .jb{padding:28px;display:flex;flex-direction:column;gap:14px;justify-content:center}
.job .meta{display:flex;flex-wrap:wrap;gap:7px}
.tagm{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  padding:4px 9px;border-radius:2px;background:var(--surf2);border:1px solid var(--line);color:var(--ink2)}
.faq{display:flex;flex-direction:column;gap:0;border:none}
.qa{padding:20px 0;border-bottom:1px solid var(--line);background:none}
.qa:last-child{border-bottom:none}
.qa h4{font-family:"Archivo",sans-serif;font-weight:700;font-size:15px;margin:0 0 5px}
.qa p{margin:0;font-size:14px;color:var(--ink2)}
.crumb{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted);padding:15px 46px;background:var(--void);
  border-bottom:1px solid var(--line)}
.crumb b{color:var(--volt-txt);font-weight:600}
.more{display:inline-flex;align-items:center;gap:7px;font-family:"IBM Plex Mono",monospace;
  font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--copper);
  background:none;border:none;cursor:pointer;padding:6px 0;transition:.15s}
.more:hover{color:var(--volt-txt);gap:11px}
.more:focus-visible{outline:2px solid var(--volt);outline-offset:3px}


/* ============ THE JOB RUN — process as a conduit run ============ */
.flow{display:flex;flex-direction:column;margin-top:34px}
.node{display:grid;grid-template-columns:78px 1fr;gap:22px;position:relative;padding-bottom:34px}
.node.last{padding-bottom:0}
.rail{position:relative;display:flex;justify-content:center}
.node:not(.last) .rail::after{content:"";position:absolute;top:78px;bottom:-34px;left:50%;
  width:2px;margin-left:-1px;background:var(--line2);overflow:hidden}
.node:not(.last) .rail::before{content:"";position:absolute;top:78px;bottom:-34px;left:50%;
  width:2px;margin-left:-1px;z-index:2;
  background:linear-gradient(180deg,transparent,var(--volt),transparent);
  background-size:100% 60px;background-repeat:no-repeat;
  animation:drop 3.4s linear infinite}
@keyframes drop{0%{background-position:0 -60px}100%{background-position:0 calc(100% + 60px)}}
.jb{width:78px;height:78px;flex-shrink:0;border:1px solid var(--line2);background:var(--surf2);
  display:flex;align-items:center;justify-content:center;position:relative;z-index:3;
  transition:.2s}
.jb svg{width:44px;height:44px}
.jb::before,.jb::after{content:"";position:absolute;width:9px;height:9px;border:1px solid var(--copper);opacity:.6}
.jb::before{top:-1px;left:-1px;border-right:none;border-bottom:none}
.jb::after{bottom:-1px;right:-1px;border-left:none;border-top:none}
.node:hover .jb{border-color:var(--volt);box-shadow:0 0 34px -12px var(--volt-glow)}
.txt{padding-top:4px}
.stp{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);display:block;margin-bottom:6px}
.txt h4{font-family:"Archivo",sans-serif;font-weight:800;font-size:19px;margin:0 0 7px;letter-spacing:-.015em}
.txt p{margin:0 0 11px;font-size:15.5px;color:var(--ink2);max-width:46ch;line-height:1.55}
.who{font-family:"IBM Plex Mono",monospace;font-size:9.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;padding:4px 10px;display:inline-block}
.who.we{color:var(--ok);background:var(--ok-bg);border:1px solid var(--ok-line)}
.who.you{color:var(--volt-ink);background:var(--volt-bg);border:1px solid var(--volt-line)}
.flownote{margin-top:30px;padding:18px 20px;background:var(--surf2);border-left:3px solid var(--volt);
  font-size:15.5px;color:var(--ink2)}
.flownote b{color:var(--hi);font-weight:600}
@media(max-width:640px){
  .node{grid-template-columns:58px 1fr;gap:16px;padding-bottom:28px}
  .jb{width:58px;height:58px}.jb svg{width:32px;height:32px}
  .node:not(.last) .rail::after,.node:not(.last) .rail::before{top:58px;bottom:-28px}
  .txt h4{font-size:17px}
}
@media (prefers-reduced-motion: reduce){.node .rail::before{display:none}}


/* ============ CODEX — the legend on the drawing ============ */
.codex{border-top:2px solid var(--copper);margin-top:32px}
.cx{display:grid;grid-template-columns:112px 1fr;gap:20px;padding:15px 0;
  border-bottom:1px solid var(--line)}
.cx .ab{font-family:"IBM Plex Mono",monospace;font-size:13px;font-weight:600;
  color:var(--volt-txt);letter-spacing:.06em;padding-top:1px}
.cx .df{font-size:15px;color:var(--ink2);line-height:1.5}
.cx .df b{color:var(--hi);font-weight:600}
.codex-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 44px}
@media(max-width:820px){.codex-cols{grid-template-columns:1fr}}
@media(max-width:520px){.cx{grid-template-columns:88px 1fr;gap:14px}.cx .ab{font-size:12px}}


/* ============ PROOF BAND + SOCIAL ============ */
.proof{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center;
  background:var(--surf2);padding:30px 34px;margin-top:34px}
@media(max-width:760px){.proof{grid-template-columns:1fr;padding:26px 22px}}
.proof h3{font-family:"Archivo",sans-serif;font-weight:800;font-size:22px;margin:0 0 8px;letter-spacing:-.02em}
.proof p{margin:0;font-size:15.5px;color:var(--ink2);max-width:50ch}
.stars{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.stars svg{width:17px;height:17px}
.stars .ct{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.1em;color:var(--muted)}
.revbtns{display:flex;flex-direction:column;gap:9px}
.revbtn{display:flex;align-items:center;gap:10px;padding:11px 16px;background:var(--void);
  border:1px solid var(--line2);color:var(--ink);text-decoration:none;
  font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;white-space:nowrap;transition:.16s}
.revbtn:hover{border-color:var(--volt);color:var(--volt-txt)}
.revbtn svg{width:15px;height:15px;flex-shrink:0}

.socials{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.soc{display:flex;align-items:center;gap:9px;padding:10px 14px;border:1px solid var(--line2);
  color:var(--ink2);text-decoration:none;font-family:"IBM Plex Mono",monospace;
  font-size:11px;letter-spacing:.09em;transition:.16s}
.soc:hover{border-color:var(--volt);color:var(--volt-txt)}
.soc svg{width:15px;height:15px;flex-shrink:0}
.soc b{color:var(--hi);font-weight:600}


/* ============ OUTAGE SIMULATOR ============ */
.sim{border:1px solid var(--line2);background:var(--surf);overflow:hidden;margin-top:34px;
  transition:background .45s ease,border-color .45s ease}
.sim.out{background:#05090F;border-color:#1A2A3D}
[data-mode="day"] .sim.out{background:#101A26;border-color:#26384B}
.sim-head{padding:20px 24px;border-bottom:1px solid var(--line);display:flex;
  flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;
  transition:border-color .45s ease}
.sim.out .sim-head{border-color:#1A2A3D}
.sim-head h3{font-family:"Archivo",sans-serif;font-weight:800;font-size:20px;margin:0 0 4px;
  transition:color .45s ease}
.sim.out .sim-head h3,.sim.out .sim-body,.sim.out .cir .nm{color:#DCE7F3}
.sim-head p{margin:0;font-size:13px;color:var(--muted);font-family:"IBM Plex Mono",monospace;letter-spacing:.05em}
.killbtn{font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;padding:13px 20px;border:1.5px solid var(--warn);background:transparent;
  color:var(--warn);cursor:pointer;transition:.18s;white-space:nowrap}
.killbtn:hover{background:var(--warn);color:var(--on-warn)}
.killbtn:focus-visible{outline:2px solid var(--volt);outline-offset:3px}
.sim.out .killbtn{border-color:var(--ok);color:var(--ok)}
.sim.out .killbtn:hover{background:var(--ok);color:#04140D}
.sim-body{padding:24px;display:grid;grid-template-columns:1.15fr 1fr;gap:30px;color:var(--ink)}
@media(max-width:820px){.sim-body{grid-template-columns:1fr;gap:24px}}
.cirs{display:flex;flex-direction:column;gap:2px}
.cir{display:flex;align-items:center;gap:13px;padding:11px 12px;cursor:pointer;
  border:1px solid transparent;transition:background .16s}
.cir:hover{background:var(--surf2)}
.sim.out .cir:hover{background:#0C1621}
.cir input{position:absolute;opacity:0;pointer-events:none}
.bulb{width:15px;height:15px;border-radius:50%;flex-shrink:0;background:var(--line2);
  transition:background .3s ease,box-shadow .3s ease}
.cir input:checked ~ .bulb{background:var(--volt)}
.sim.out .cir input:checked ~ .bulb{background:var(--volt);box-shadow:0 0 14px var(--volt),0 0 30px rgba(245,184,37,.35)}
.sim.out .cir input:not(:checked) ~ .bulb{background:#16202C}
.sim.out .cir input:not(:checked) ~ .nm{color:#3C4B5C}
.cir .nm{font-size:15px;transition:color .3s ease}
.cir .w{margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--muted);flex-shrink:0}
.cir .box{width:15px;height:15px;border:1.5px solid var(--line2);border-radius:2px;flex-shrink:0;
  position:relative;transition:.16s}
.cir input:checked ~ .box{background:var(--volt);border-color:var(--volt)}
.cir input:checked ~ .box::after{content:"";position:absolute;left:4px;top:.5px;width:4px;height:8px;
  border:solid var(--on-volt);border-width:0 2px 2px 0;transform:rotate(43deg)}
.cir input:focus-visible ~ .box{outline:2px solid var(--volt);outline-offset:2px}

.readout{display:flex;flex-direction:column;gap:18px}
.gauge{border:1px solid var(--line);padding:20px;transition:border-color .45s ease}
.sim.out .gauge{border-color:#1A2A3D}
.gauge .k{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);display:block;margin-bottom:8px}
.gauge .big2{font-family:"Archivo",sans-serif;font-weight:900;font-size:46px;line-height:1;
  color:var(--volt-txt);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.sim.out .gauge .big2{color:var(--volt)}
.gauge .u{font-size:15px;color:var(--ink2);margin-left:6px;font-weight:500;font-family:"IBM Plex Sans",sans-serif}
.gauge .note{font-size:13.5px;color:var(--muted);margin-top:9px;line-height:1.5}
.bar{height:7px;background:var(--line);margin-top:13px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--volt);transition:width .45s ease}
.bar i.low{background:var(--warn)}
.srcs{display:flex;gap:0}
.srcbtn{flex:1;font-family:"IBM Plex Mono",monospace;font-size:10.5px;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;padding:12px 8px;border:1px solid var(--line2);
  background:transparent;color:var(--muted);cursor:pointer;transition:.16s}
.srcbtn+.srcbtn{border-left:none}
.srcbtn[aria-pressed="true"]{background:var(--volt);border-color:var(--volt);color:var(--on-volt)}
.srcbtn:focus-visible{outline:2px solid var(--volt);outline-offset:2px}
@media (prefers-reduced-motion: reduce){.sim,.bulb,.bar i{transition:none}}




/* ============ FAQ PAGE ============ */
.faqnav{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:34px}
.faqnav a{font-family:"IBM Plex Mono",monospace;font-size:10.5px;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;padding:9px 14px;border:1px solid var(--line2);color:var(--ink2);
  text-decoration:none;transition:.16s}
.faqnav a:hover{border-color:var(--volt);color:var(--volt-txt)}
.faqgrp{margin-bottom:44px;scroll-margin-top:110px}
.faqgrp h3{font-family:"Archivo",sans-serif;font-weight:800;font-size:24px;margin:0 0 4px;letter-spacing:-.02em}
.faqgrp .gs{font-size:15px;color:var(--muted);margin:0 0 18px}
details.qa2{border-bottom:1px solid var(--line);padding:0}
details.qa2 summary{list-style:none;cursor:pointer;padding:18px 34px 18px 0;position:relative;
  font-family:"Archivo",sans-serif;font-weight:700;font-size:16.5px;color:var(--ink);transition:color .15s}
details.qa2 summary::-webkit-details-marker{display:none}
details.qa2 summary:hover{color:var(--volt-txt)}
details.qa2 summary::after{content:"";position:absolute;right:6px;top:50%;width:9px;height:9px;
  border-right:2px solid var(--copper);border-bottom:2px solid var(--copper);
  transform:translateY(-70%) rotate(45deg);transition:transform .18s}
details.qa2[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
details.qa2 .ans{padding:0 0 20px;font-size:15.5px;color:var(--ink2);line-height:1.62;max-width:70ch}
details.qa2 .ans b{color:var(--hi);font-weight:600}
details.qa2 summary:focus-visible{outline:2px solid var(--volt);outline-offset:-2px}
@media (prefers-reduced-motion: reduce){details.qa2 summary::after{transition:none}}


/* ============ SOLAR DAY CURVE ============ */
.curve{border:1px solid var(--line2);background:var(--surf);margin-top:34px}
.curve-head{padding:20px 24px;border-bottom:1px solid var(--line);display:flex;
  flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
.curve-head h3{font-family:"Archivo",sans-serif;font-weight:800;font-size:20px;margin:0 0 4px}
.curve-head p{margin:0;font-size:13px;color:var(--muted);font-family:"IBM Plex Mono",monospace;letter-spacing:.05em}
.legend{display:flex;gap:16px;flex-wrap:wrap}
.lg{display:flex;align-items:center;gap:7px;font-family:"IBM Plex Mono",monospace;
  font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink2)}
.lg i{width:14px;height:3px;border-radius:2px;display:block}
.lg.gen i{background:var(--gen)} .lg.use i{background:var(--use)}
.lg.batt i{background:var(--gen);opacity:.28;height:10px}
.curve-body{padding:24px}
.curve svg{width:100%;height:auto;display:block;overflow:visible}
.ctrl{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:20px;margin-top:22px}
.ctrl label{font-family:"IBM Plex Mono",monospace;font-size:10px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);display:block;margin-bottom:8px}
.ctrl input[type=range]{width:100%;accent-color:var(--gen);height:4px}
.ctrl .v2{font-family:"Archivo",sans-serif;font-weight:700;font-size:17px;color:var(--ink)}
.ctrl .hint2{display:block;font-size:13px;color:var(--muted);margin-top:5px;line-height:1.45}
.verdict{margin-top:22px;padding:18px 20px;background:var(--surf2);border-left:3px solid var(--gen);
  font-size:15.5px;color:var(--ink2);line-height:1.6}
.verdict b{color:var(--hi);font-weight:600}
.pull{border-top:2px solid var(--copper);border-bottom:2px solid var(--copper);
  padding:40px 0;margin:0;text-align:center}
.pull q{font-family:"Archivo",sans-serif;font-weight:900;font-size:clamp(26px,4.6vw,44px);
  line-height:1.06;letter-spacing:-.03em;quotes:none;display:block;max-width:18ch;margin:0 auto}
.pull q em{font-style:normal;color:var(--volt-txt)}
.pull .attr{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.19em;
  text-transform:uppercase;color:var(--muted);margin-top:18px;display:block}
.axlbl{font-family:"IBM Plex Mono",monospace;font-size:9px;fill:var(--muted);letter-spacing:.1em}
.gridln{stroke:var(--line);stroke-width:1}
:root{--gen:#F5B825; --use:#5AA9E6}
[data-mode="day"]{--gen:#B0820E; --use:#1F6FB2}

/* ============ SYMPTOM TRIAGE ============ */
.triage{border:1px solid var(--line2);background:var(--surf);margin-top:34px}
.tri-head{padding:20px 24px;border-bottom:1px solid var(--line)}
.tri-head h3{font-family:"Archivo",sans-serif;font-weight:800;font-size:20px;margin:0 0 4px}
.tri-head p{margin:0;font-size:13px;color:var(--muted);font-family:"IBM Plex Mono",monospace;letter-spacing:.05em}
.tri-body{padding:24px;display:grid;grid-template-columns:1fr 1.1fr;gap:28px;align-items:start}
@media(max-width:780px){.tri-body{grid-template-columns:1fr;gap:22px}}
.syms{display:flex;flex-direction:column;gap:2px}
.symbtn{text-align:left;padding:13px 15px;border:1px solid transparent;background:none;cursor:pointer;
  color:var(--ink2);font-family:"IBM Plex Sans",sans-serif;font-size:15px;transition:.15s;
  border-bottom:1px solid var(--line)}
.symbtn:hover{background:var(--surf2);color:var(--ink)}
.symbtn[aria-pressed="true"]{background:var(--surf2);color:var(--ink);border-left:3px solid var(--volt);padding-left:12px}
.symbtn:focus-visible{outline:2px solid var(--volt);outline-offset:-2px}
.dx{border:1px solid var(--line);padding:22px;min-height:210px}
.dx .lvl{display:inline-flex;align-items:center;gap:8px;font-family:"IBM Plex Mono",monospace;
  font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:5px 11px;margin-bottom:14px}
.dx .lvl.now{color:var(--warn);background:var(--warn-bg);border:1px solid var(--warn)}
.dx .lvl.soon{color:var(--volt-ink);background:var(--volt-bg);border:1px solid var(--volt-line)}
.dx .lvl.calm{color:var(--ok);background:var(--ok-bg);border:1px solid var(--ok-line)}
.dx h4{font-family:"Archivo",sans-serif;font-weight:800;font-size:19px;margin:0 0 9px}
.dx p{margin:0 0 11px;font-size:15px;color:var(--ink2);line-height:1.6}
.dx .why2{font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--muted);
  border-top:1px dashed var(--line2);padding-top:12px;margin:0 0 16px}
.dx .act{display:flex;flex-wrap:wrap;gap:9px;align-items:center}
.dx .act .btn{font-size:14px;padding:11px 18px}
.dx .tel{font-family:"Archivo",sans-serif;font-weight:800;font-size:17px;color:var(--volt-txt);text-decoration:none}

/* ============ FAQ FILTER ============ */
.faqfind{position:relative;margin-bottom:22px}
.faqfind input{width:100%;font-family:"IBM Plex Sans",sans-serif;font-size:16px;padding:14px 16px 14px 44px;
  border:1px solid var(--line2);background:var(--void);color:var(--ink)}
.faqfind input:focus{outline:none;border-color:var(--volt);box-shadow:0 0 0 1px var(--volt)}
.faqfind svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:17px;height:17px;
  stroke:var(--muted);pointer-events:none}
.faqfind .cnt{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--muted);
  margin-top:9px;display:block;letter-spacing:.08em}
details.qa2.hide,.faqgrp.hide{display:none}


/* ---------- battery charge visual ---------- */
.cell{display:flex;gap:20px;align-items:stretch}
.cellart{width:74px;flex-shrink:0;display:flex;flex-direction:column;align-items:center}
.cellart .cap2{width:26px;height:7px;border-radius:2px 2px 0 0;background:var(--line2)}
.cellart .body2{flex:1;width:100%;border:2px solid var(--line2);border-radius:4px;
  position:relative;overflow:hidden;background:var(--void);min-height:168px}
.cellart .fill{position:absolute;left:0;right:0;bottom:0;
  background:linear-gradient(180deg,var(--volt),#C8901A);
  transition:height .5s linear,background .4s ease}
.cellart .fill.warn2{background:linear-gradient(180deg,#E08B4A,var(--warn))}
.cellart .fill.dead{background:var(--line2)}
.cellart .body2 .pc{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:"Archivo",sans-serif;font-weight:900;font-size:19px;color:var(--hi);
  text-shadow:0 1px 6px rgba(0,0,0,.6);z-index:2}
.cellart .ticks{position:absolute;inset:0;z-index:1;pointer-events:none}
.cellart .ticks i{position:absolute;left:0;right:0;height:1px;background:var(--line);opacity:.45}
.cellmeta{flex:1;display:flex;flex-direction:column;gap:14px;justify-content:center}
.clock{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
.clock b{color:var(--volt-txt);font-weight:600}


/* ---------- commercial project selector ---------- */
.pjs{display:flex;flex-direction:column;gap:2px}
.pjbtn{text-align:left;padding:15px 16px;border:none;border-bottom:1px solid var(--line);
  background:none;cursor:pointer;transition:.15s;display:flex;flex-direction:column;gap:4px;width:100%}
.pjbtn b{font-family:"Archivo",sans-serif;font-weight:700;font-size:15.5px;color:var(--ink2);transition:color .15s}
.pjbtn span{font-size:13.5px;color:var(--muted);line-height:1.45}
.pjbtn:hover{background:var(--surf2)} .pjbtn:hover b{color:var(--ink)}
.pjbtn[aria-pressed="true"]{background:var(--surf2);border-left:3px solid var(--volt);padding-left:13px}
.pjbtn[aria-pressed="true"] b{color:var(--ink)}
.pjbtn:focus-visible{outline:2px solid var(--volt);outline-offset:-2px}
.pjout{border:1px solid var(--line);padding:24px;min-height:290px}
.pjstats{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:18px}
@media(max-width:520px){.pjstats{grid-template-columns:1fr}}
.pjstat .k{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);display:block;margin-bottom:5px}
.pjstat .v3{font-family:"Archivo",sans-serif;font-weight:800;font-size:19px;color:var(--volt-txt);line-height:1.2}
.pjstat .v3.sm{font-size:14.5px;color:var(--ink);font-weight:600;line-height:1.4}
.pjout .lead2{font-size:15.5px;color:var(--ink2);line-height:1.6;margin:0 0 18px}
.pjout .prep{border-top:1px dashed var(--line2);padding-top:16px}
.pjout .prep .k{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);display:block;margin-bottom:10px}
.pjout .prep ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px}
.pjout .prep li{display:flex;gap:10px;font-size:14.5px;color:var(--ink2)}
.pjout .prep li::before{content:"";width:6px;height:6px;margin-top:7px;flex-shrink:0;
  background:var(--copper);transform:rotate(45deg)}


/* ============ QUOTE BUILDER ============ */
.qb{display:grid;grid-template-columns:1.25fr .85fr;gap:30px;align-items:start;margin-top:34px}
@media(max-width:900px){.qb{grid-template-columns:1fr}}
.qcat{border:1px solid var(--line2);margin-bottom:12px;background:var(--surf)}
.qcatbtn{width:100%;text-align:left;background:none;border:none;cursor:pointer;
  padding:18px 20px;display:grid;grid-template-columns:1fr auto;gap:4px 14px;align-items:center}
.qcn{grid-column:1;grid-row:1;font-family:"Archivo",sans-serif;font-weight:800;font-size:18px;color:var(--ink)}
.qcs{grid-column:1;grid-row:2;font-size:13.5px;color:var(--muted)}
.qch{grid-column:2;grid-row:1/3;font-family:"IBM Plex Mono",monospace;font-size:20px;color:var(--copper);
  width:26px;text-align:center;transition:transform .2s}
.qcatbtn[aria-expanded="true"] .qch{transform:rotate(45deg)}
.qcatbtn:hover{background:var(--surf2)}
.qcatbtn:focus-visible{outline:2px solid var(--volt);outline-offset:-2px}
.qitems{display:none;border-top:1px solid var(--line);padding:8px 20px 18px}
.qcat.open .qitems{display:block}
.qitem{display:flex;align-items:center;gap:14px;padding:11px 0;border-bottom:1px solid var(--line);cursor:pointer}
.qitem:last-child{border-bottom:none}
.qmain{display:flex;align-items:center;gap:12px;flex:1;min-width:0}
.qitem input{position:absolute;opacity:0;pointer-events:none}
.qbox{width:17px;height:17px;border:1.5px solid var(--line2);border-radius:2px;flex-shrink:0;
  position:relative;transition:.15s}
.qitem input:checked ~ .qbox,.qitem input:checked + .qbox{background:var(--volt);border-color:var(--volt)}
.qitem input:checked ~ .qbox::after,.qitem input:checked + .qbox::after{content:"";position:absolute;
  left:5px;top:1px;width:4px;height:9px;border:solid var(--on-volt);border-width:0 2px 2px 0;transform:rotate(43deg)}
.qitem input:focus-visible ~ .qbox,.qitem input:focus-visible + .qbox{outline:2px solid var(--volt);outline-offset:2px}
.ql{font-size:15.5px;color:var(--ink2)}
.qitem input:checked ~ .qmain .ql,.qitem input:checked + .qbox + .ql{color:var(--ink)}
.qsel{font-family:"IBM Plex Sans",sans-serif;font-size:13.5px;padding:7px 9px;border:1px solid var(--line2);
  background:var(--void);color:var(--ink);flex-shrink:0;opacity:.4;pointer-events:none;transition:opacity .15s}
.qitem input:checked ~ .qsel{opacity:1;pointer-events:auto}
.qsum{border:1px solid var(--line2);background:var(--surf2);position:sticky;top:120px}
.qsum-h{padding:18px 20px;border-bottom:1px solid var(--line2)}
.qsum-h h3{font-family:"Archivo",sans-serif;font-weight:800;font-size:19px;margin:0 0 3px}
.qsum-h p{margin:0;font-size:12.5px;color:var(--muted);font-family:"IBM Plex Mono",monospace;letter-spacing:.05em}
.qsum-b{padding:20px;max-height:46vh;overflow:auto}
.qgrp{margin-bottom:18px}
.qgrp:last-child{margin-bottom:0}
.qgrp .gh{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--copper);display:block;margin-bottom:8px}
.qgrp ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px}
.qgrp li{display:flex;gap:10px;font-size:14.5px;color:var(--ink2);line-height:1.45}
.qgrp li::before{content:"";width:6px;height:6px;margin-top:7px;flex-shrink:0;background:var(--volt);transform:rotate(45deg)}
.qempty{font-size:14.5px;color:var(--muted);font-style:italic}
.qsum-f{padding:18px 20px;border-top:1px solid var(--line2)}
.qcount{font-family:"Archivo",sans-serif;font-weight:800;font-size:15px;color:var(--ink);margin-bottom:12px;display:block}
.qacts{display:flex;flex-direction:column;gap:9px}
.qmini{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  padding:10px 14px;border:1px solid var(--line2);background:transparent;color:var(--ink2);cursor:pointer;transition:.15s}
.qmini:hover{border-color:var(--volt);color:var(--volt-txt)}
.qdone{background:var(--ok-bg);border:1px solid var(--ok);padding:24px;display:none;flex-direction:column;gap:12px}
.qdone.on{display:flex}
.qdone h3{font-family:"Archivo",sans-serif;font-weight:800;font-size:21px;margin:0;color:var(--ok)}
.qref{font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--ink2);background:var(--void);
  padding:14px 16px;white-space:pre-wrap;line-height:1.6;max-height:280px;overflow:auto}

/* ---------- ENERGISE ON LOAD ---------- */
.en{opacity:0;transform:translateY(9px);animation:en .55s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes en{to{opacity:1;transform:none}}
.d1{animation-delay:.05s}.d2{animation-delay:.16s}.d3{animation-delay:.27s}.d4{animation-delay:.38s}
@media(max-width:720px){
  .topbar,.crumb,.foot{padding-left:22px;padding-right:22px}
  .before{margin-left:22px;margin-right:22px}
}
@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important}
  .en{opacity:1;transform:none}
  .bus::after{display:none}
}

/* ---------- real-site navigation ---------- */
.mainnav{background:var(--void);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:70}
.mainnav-in{max-width:1180px;margin:0 auto;display:flex;align-items:stretch;gap:2px;
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;padding:0 12px}
.mainnav-in::-webkit-scrollbar{display:none}
.mainnav a{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink2);text-decoration:none;padding:15px 13px;
  white-space:nowrap;border-bottom:2px solid transparent;transition:.16s;display:flex;align-items:center}
.mainnav a:hover{color:var(--hi);background:var(--surf)}
.mainnav a[aria-current="page"]{color:var(--volt-txt);border-bottom-color:var(--volt)}
.mainnav a:focus-visible{outline:2px solid var(--volt);outline-offset:-2px}
.mainnav .navcta{margin-left:auto;color:var(--on-volt);background:var(--volt);font-weight:600;
  border-bottom-color:transparent;padding:15px 18px}
.mainnav .navcta:hover{background:var(--hi);color:var(--void)}
@media(max-width:900px){.mainnav .navcta{margin-left:0}}
a.btn{text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.formnote{font-size:13px;color:var(--muted);margin-top:12px;line-height:1.5}
.fg .err.live{display:block}