/* Alder Electric Inc. — site styles. Tokens first; every color comes from here. */
@font-face{font-family:"Archivo";src:url("../fonts/archivo-var.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/inter-var.woff2") format("woff2");font-weight:100 900;font-display:swap}

:root{
  --brand:#2E3092; --accent:#00FFFF; --link:#0B6B87;
  --deep:#16184F; --ink:#1A1B2E; --muted:#5A5C75; --surface:#F4F5FA; --line:#D9DBE8; --white:#fff;
  --on-deep:#e8ecff; --on-deep-soft:#cdd5ff; --on-deep-faint:#9fb0ff;
  --radius:4px;
  --font-head:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif; --head-stretch:112%;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --glow-a:.45; --glow-blur:12px; --glow-spread:26px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:64px}
body{margin:0;font:400 17px/1.6 var(--font-body);color:var(--ink);background:var(--white);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--font-head);font-stretch:var(--head-stretch);line-height:1.12;margin:0 0 .5em;letter-spacing:.005em}
a{color:var(--link)}
a:focus-visible,button:focus-visible{outline:3px solid var(--brand);outline-offset:3px}
.site-header :focus-visible,.hero :focus-visible,.proof :focus-visible,.band.deep :focus-visible,.site-footer :focus-visible,.skip:focus-visible{outline-color:var(--accent)}
.wrap{max-width:1120px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:8px;background:var(--accent);color:var(--deep);padding:10px 16px;border-radius:var(--radius);font-weight:600;z-index:100}
.skip:focus{left:8px}
.glow-text{text-shadow:0 0 var(--glow-blur) rgba(0,255,255,var(--glow-a)),0 0 var(--glow-spread) rgba(0,255,255,calc(var(--glow-a)*.6))}
.glow-logo{filter:drop-shadow(0 0 var(--glow-blur) rgba(0,255,255,var(--glow-a))) drop-shadow(0 0 var(--glow-spread) rgba(0,255,255,calc(var(--glow-a)*.5)))}

/* header */
.site-header{position:sticky;top:0;z-index:20;background:var(--deep);border-bottom:1px solid rgba(0,255,255,.18)}
.nav{display:flex;align-items:center;min-height:56px}
.nav nav{margin:0 auto;display:flex;gap:22px;align-items:center;flex-wrap:wrap;justify-content:center}
.nav a{color:#dfe5ff;text-decoration:none;font-weight:500;font-size:15px}
.nav a:hover{color:var(--accent)}
.nav .tel{color:var(--accent);font-weight:600}

/* hero */
.hero{position:relative;overflow:hidden;background:var(--deep);min-height:620px;display:flex;align-items:center;padding:64px 0 68px;text-align:center}
.hero .bg{position:absolute;inset:0;background:linear-gradient(100deg,var(--deep) 30%,rgba(10,12,60,.55)),url("../img/rooftop-disconnects.jpg") center 40%/cover no-repeat}
.hero .wrap{position:relative;z-index:1;width:100%}
.hero h1{margin:0}
.hero-logo{display:block;width:min(540px,86%);height:auto;margin:0 auto 14px}
.eyebrow{color:var(--accent);font:600 13px var(--font-body);letter-spacing:.14em;text-transform:uppercase;margin:0 0 8px}

/* credentials strip */
.proof{background:var(--deep);border-top:1px solid rgba(0,255,255,.2);border-bottom:1px solid rgba(0,255,255,.2);color:var(--white);text-align:center}
.proof .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.proof .item{padding:16px 20px;border-left:1px solid rgba(0,255,255,.18)}
.proof .item:first-child{border-left:0}
.proof small{display:block;color:var(--on-deep-faint);font-size:12px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:4px}
.proof b{display:block;font:700 18px/1.3 var(--font-head);font-stretch:105%;color:var(--accent)}
.proof span{display:block;font-size:14px;color:var(--on-deep-soft)}

/* bands */
.band{padding:52px 0;text-align:center}
.band.a{background:var(--white);color:var(--ink)}
.band.b{background:var(--surface);color:var(--ink)}
.band.deep{background:var(--deep);color:var(--on-deep)}
.band h2{font-size:clamp(26px,3.4vw,38px);color:var(--brand)}
.band.deep h2{color:var(--white)}
.lede{max-width:62ch;margin:0 auto;color:var(--muted);font-size:18px}
.band.deep .lede{color:var(--on-deep-soft);font-size:20px;max-width:60ch}
.note{margin:18px auto 0;color:var(--muted);font-size:15px;max-width:70ch}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:32px;text-align:center}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:28px}
.card h3{font-size:22px;color:var(--brand)}
.card ul{margin:12px auto 0;padding-left:20px;display:block;width:fit-content;max-width:100%;text-align:left}
.card li{margin:6px 0}
.tag{display:inline-block;font:600 11px var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--brand);border:1px solid var(--line);border-radius:999px;padding:3px 10px;margin-bottom:12px}

.mgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:28px;text-align:center}
.mgrid .card{padding:24px}
.mgrid h3{font-size:19px;margin-bottom:12px}
.mgrid ul{margin-top:6px;font-size:15px}
.mgrid li{margin:3px 0}

/* contact */
.people{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:30px}
.person{background:rgba(255,255,255,.05);border:1px solid rgba(0,255,255,.25);border-radius:var(--radius);padding:24px}
.person h3{color:var(--white);font-size:20px;margin-bottom:2px}
.person .role{color:var(--on-deep-faint);font-size:14px;margin-bottom:12px}
.person a{display:block;color:var(--accent);text-decoration:none;font-weight:500;margin:3px 0;overflow-wrap:anywhere}
.person a:hover{text-decoration:underline}

/* footer */
.site-footer{background:var(--deep);border-top:1px solid rgba(0,255,255,.18);padding:36px 0;font-size:14px;color:var(--on-deep-faint);text-align:center}
.site-footer .wrap{display:flex;gap:24px;flex-wrap:wrap;justify-content:center;align-items:center}
.site-footer img{height:40px;width:auto}

@media(max-width:820px){
  .proof .wrap{grid-template-columns:1fr 1fr}
  .proof .item:nth-child(odd){border-left:0}
  .grid2,.mgrid,.people{grid-template-columns:1fr}
  .nav a:not(.tel){display:none}
  .hero{min-height:480px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.hero.full{min-height:100vh}