:root{
  --paper:#E6ECEF; --panel:#FAFBFC; --panel2:#EEF2F5; --ink:#15263A; --muted:#5A6A7A; --line:#D0D9E0;
  --accent:#1B6CA8; --duct:#1B7CC4; --hydro:#16867A; --energy:#B7791F; --elec:#9B3FB5;
  --font:"Barlow",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --cond:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#10171E; --panel:#18212A; --panel2:#1F2A35; --ink:#E3EAF1; --muted:#93A3B3; --line:#2D3A46;
    --accent:#4FA3E0; --duct:#4FA8E8; --hydro:#3DBBA9; --energy:#E3A548; --elec:#C77BDD;
  }
}
:root[data-theme="dark"]{
  --paper:#10171E; --panel:#18212A; --panel2:#1F2A35; --ink:#E3EAF1; --muted:#93A3B3; --line:#2D3A46;
  --accent:#4FA3E0; --duct:#4FA8E8; --hydro:#3DBBA9; --energy:#E3A548; --elec:#C77BDD;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
body{background:var(--paper);color:var(--ink);font:16px/1.5 var(--font);min-height:100vh;display:flex;flex-direction:column}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.top{display:flex;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--panel)}
.brand{display:flex;align-items:center;gap:8px;font:700 24px/1 var(--cond);letter-spacing:.01em;text-decoration:none}
.brand .mark{flex:none}
.wrap{flex:1;width:100%;max-width:1080px;margin:0 auto;padding:40px 16px 32px}
.hero h1{margin:0 0 10px;font:700 clamp(30px,5vw,44px)/1.05 var(--cond);max-width:18ch}
.hero p{margin:0 0 32px;color:var(--muted);max-width:60ch}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.card{display:flex;flex-direction:column;gap:8px;padding:20px;background:var(--panel);border:1px solid var(--line);border-radius:10px;text-decoration:none;transition:border-color .15s,transform .15s}
.card:hover{border-color:var(--accent);transform:translateY(-2px)}
.card h2{margin:0;font:700 26px/1.1 var(--cond)}
.card p{margin:0;color:var(--muted);font-size:15px;flex:1}
.tag{align-self:flex-start;padding:2px 9px;border-radius:10px;font:600 12.5px/1.5 var(--font);color:var(--c);background:color-mix(in srgb,var(--c) 14%,transparent)}
.go{font-weight:600;color:var(--accent)}
.go::after{content:" →"}
.fine{margin:28px 0 0;color:var(--muted);font-size:14px}
.foot{padding:16px;text-align:center;color:var(--muted);font-size:13px;border-top:1px solid var(--line)}
.soon{max-width:560px}
.soon h1{margin:0 0 10px;font:700 clamp(30px,5vw,40px)/1.05 var(--cond)}
.soon p{color:var(--muted)}
.btn{display:inline-block;margin-top:12px;padding:8px 14px;border:1px solid var(--line);border-radius:6px;background:var(--panel);font-weight:600;text-decoration:none}
.btn:hover{border-color:var(--accent)}
@media (prefers-reduced-motion:reduce){.card{transition:none}.card:hover{transform:none}}
.topnav{display:flex;gap:4px;margin-left:auto}
.topnav a{padding:6px 10px;border-radius:6px;text-decoration:none;color:var(--muted);font-weight:500}
.topnav a:hover{color:var(--ink);background:var(--panel2)}
.group{margin-top:40px;scroll-margin-top:16px}
.group>h2{margin:0 0 14px;font:700 24px/1.1 var(--cond)}
.group>h2 span{margin-left:6px;color:var(--muted);font:500 15px/1 var(--font)}
.group>.sub{margin:-8px 0 14px;color:var(--muted);max-width:70ch}
@media (max-width:520px){.topnav a{padding:6px 7px;font-size:14px}}
/* Residential: the two highlighted guides */
.grid.feature{grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr))}
.grid.feature .card{padding:26px 24px;border:2px solid var(--accent);background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 10%,var(--panel)),var(--panel) 60%)}
.grid.feature .card h2{font-size:32px}
.grid.feature .card p{font-size:16px;color:var(--ink)}
@media (max-width:620px){
  .top{flex-wrap:wrap;gap:6px}
  .topnav{margin-left:0;width:100%;overflow-x:auto;scrollbar-width:none}
  .topnav::-webkit-scrollbar{display:none}
  .topnav a{flex:none}
}