/* Sylvia Electrical Contracting — shared stylesheet for index.html, services.html, about.html */
:root{
  --bg:#f7f8fa;           /* cool off-white */
  --surface:#eef1f5;
  --paper:#ffffff;
  --text:#0c0e12;
  --muted:#535a66;
  --rule:#dde2ea;
  --accent:#0057ff;       /* arc-flash blue */
  --accent-hover:#0046cc;
  --accent-bright:#6a9dff;/* accent on dark backgrounds */
  --accent-ink:#ffffff;
  --spark:#ffd60a;        /* hairline detail only (intro spark) */
  --dark:#0b0d12;
  --dark-muted:#a5adbb;
  --dark-rule:#252a35;
  --gutter:20px;
  --max:1200px;
  --header-h:104px;       /* logo row + nav row on mobile */
  --callbar-h:60px;
  --ease:cubic-bezier(.2,.7,.2,1);        /* shared easing for all site motion */
  --ease-io:cubic-bezier(.76,0,.24,1);    /* intro exit only */
  --font:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 16px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{font-weight:600;letter-spacing:-0.025em;line-height:1.08;margin:0}
p{margin:0}
address{font-style:normal}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.eyebrow{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:20px}
.eyebrow::before{content:"";width:7px;height:7px;border:1.5px solid currentColor;border-radius:50%;flex:none}
.lede{color:var(--muted);font-size:18px;max-width:36em}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:100;background:var(--text);color:var(--bg);padding:10px 14px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* Buttons — rectangular, engineered */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 24px;font:500 16px/1 var(--font);text-decoration:none;border:1px solid var(--text);border-radius:2px;transition:background-color .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease);white-space:nowrap}
.btn svg{width:18px;height:18px;flex:none}
.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);transform:translateY(-2px);box-shadow:0 6px 16px -8px rgba(0,87,255,.6)}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--text)}
.btn-ghost:hover{background:var(--text);color:var(--bg);transform:translateY(-2px)}
.btn-sm{min-height:44px;padding:0 16px;font-size:15px}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}
.text-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:500;color:var(--accent);text-decoration:none;border-bottom:1px solid currentColor;padding-top:6px;transition:gap .3s var(--ease),color .3s var(--ease)}
.text-link:hover{gap:12px;color:var(--accent-hover)}

/* Preview ribbon */
.ribbon{background:var(--dark);color:var(--dark-muted);font-size:12.5px;line-height:1.4;text-align:center;padding:8px var(--gutter)}
.ribbon strong{color:#fff;font-weight:500}

/* Header */
.header{position:sticky;top:0;z-index:50;background:rgba(247,248,250,.92);-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid transparent;transition:border-color .4s var(--ease),box-shadow .4s var(--ease)}
.header.is-scrolled{border-bottom-color:var(--rule);box-shadow:0 1px 0 rgba(12,14,18,.02)}
.header-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;max-width:var(--max);margin:0 auto;padding:8px var(--gutter) 0}
.logo{display:inline-flex;align-items:center;gap:10px;min-height:44px;text-decoration:none;font-size:19px;letter-spacing:-0.03em;line-height:1}
.logo b{font-weight:700}
.logo span{font-weight:400;color:var(--muted)}
.logo-mark{width:22px;height:22px;flex:none;color:var(--accent)}
.header-actions{display:flex;align-items:center;gap:20px}
.header-phone{display:none;align-items:center;min-height:44px;font-size:15px;font-weight:500;text-decoration:none;font-variant-numeric:tabular-nums}
.header-phone:hover{color:var(--accent)}
.nav{order:3;flex-basis:100%;display:flex;justify-content:center;gap:4px;margin-top:4px}
.nav a{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 14px;font-size:15px;font-weight:500;color:var(--muted);text-decoration:none;transition:color .3s var(--ease)}
.nav a::after{content:"";position:absolute;left:14px;right:14px;bottom:8px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nav a:hover{color:var(--text)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a[aria-current="page"]{color:var(--text)}

/* Circuit-trace divider: line → 90° step with node → line */
.trace{display:flex;height:33px;max-width:var(--max);margin:0 auto;padding:0 var(--gutter);color:var(--accent)}
.trace .t-a,.trace .t-b{height:1px;background:currentColor;opacity:.35}
.trace .t-a{flex:0 0 var(--x,22%);align-self:flex-start}
.trace .t-b{flex:1 1 auto;align-self:flex-end}
.trace svg{flex:none;width:96px;height:33px;overflow:visible}
.trace path{fill:none;stroke:currentColor;stroke-opacity:.35;stroke-width:1}
.trace circle{fill:var(--accent);stroke:var(--bg);stroke-width:2}
.trace .node-end{fill:var(--bg);stroke:currentColor;stroke-opacity:.5;stroke-width:1}
.trace-flip .t-a{align-self:flex-end}.trace-flip .t-b{align-self:flex-start}.trace-flip svg{transform:scaleY(-1)}

/* Hero */
.hero{position:relative;padding:44px 0 64px;overflow:hidden}
.hero-grid{position:relative;display:grid;gap:40px}
.hero h1{font-size:clamp(38px,9.4vw,76px);letter-spacing:-0.045em;line-height:1.02;font-weight:600;max-width:12.5em}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero .lede{margin:22px 0 32px}
.hero-media{position:relative}
.hero-media picture{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--surface)}
.hero-media img{width:100%;height:100%;object-fit:cover}
.hero-media::before{content:"";position:absolute;top:-12px;left:-12px;width:56px;height:56px;border-top:1px solid var(--accent);border-left:1px solid var(--accent);pointer-events:none}
.hero-media::after{content:"";position:absolute;right:-6px;bottom:-6px;width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px var(--bg)}
.hero-bg{display:none;position:absolute;inset:0;width:100%;height:100%;color:var(--accent);opacity:.12;pointer-events:none}
.hero-bg path{fill:none;stroke:currentColor;stroke-width:1}
.hero-bg circle{fill:currentColor}

/* Trust strip */
.trust{background:var(--dark);color:#fff}
.trust ul{list-style:none;margin:0 auto;max-width:var(--max);padding:22px var(--gutter);display:grid;grid-template-columns:1fr 1fr;gap:14px 20px}
.trust li{display:flex;align-items:center;gap:10px;font-size:14.5px;font-weight:500;line-height:1.3}
.trust li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent-bright);box-shadow:0 0 8px rgba(106,157,255,.8);flex:none}
.trust li:last-child{grid-column:1/-1}

/* Sections */
.section{padding:72px 0}
.section-tight{padding:56px 0}
.section-head{display:grid;gap:18px;margin-bottom:44px}
.section-head h2,.h2{font-size:clamp(30px,6.4vw,50px);letter-spacing:-0.035em}
.section-head .lede{font-size:17px}

/* Service cards (home) */
.cards{list-style:none;margin:0;padding:0;display:grid;border-top:1px solid var(--rule)}
.card{padding:28px 0 30px;border-bottom:1px solid var(--rule);position:relative}
.card::before{content:"";position:absolute;top:-1px;left:0;width:100%;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.card:hover::before{transform:scaleX(1)}
.card .icon{display:block;margin-bottom:18px}
.card h3{font-size:20px;letter-spacing:-0.02em}
.card p{color:var(--muted);font-size:16px;margin-top:6px}
.icon{width:40px;height:40px;color:var(--accent)}
.icon path,.icon rect,.icon circle,.icon line,.icon polyline{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.cards-foot{margin-top:28px}

/* Split blocks */
.split{display:grid;gap:36px;align-items:center}
.split-media{overflow:hidden;background:var(--surface);aspect-ratio:4/3}
.split-media img,.media-break img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.split-media:hover img,.media-break figure:hover img{transform:scale(1.03)}
.points{list-style:none;margin:28px 0 0;padding:0;border-top:1px solid var(--rule)}
.points li{padding:18px 0;border-bottom:1px solid var(--rule)}
.points h3{display:flex;align-items:center;gap:10px;font-size:18px;letter-spacing:-0.015em}
.points h3::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none}
.points p{color:var(--muted);font-size:16px;margin-top:6px;padding-left:16px}

/* Reviews (placeholders) */
.reviews{display:grid;gap:16px}
.quote{margin:0;padding:30px 26px;background:var(--paper);border:1px solid var(--rule);border-left:2px solid var(--accent)}
.quote svg{width:28px;height:28px;color:var(--accent);margin-bottom:14px}
.quote blockquote{margin:0;font-size:20px;line-height:1.45;letter-spacing:-0.01em;color:var(--muted)}
.quote figcaption{margin-top:18px;font-size:14px;color:var(--muted)}
.bbb{display:flex;align-items:center;gap:12px;margin-top:28px;font-weight:500}
.bbb::before{content:"A+";display:inline-grid;place-items:center;width:40px;height:40px;border:1px solid var(--accent);color:var(--accent);font-size:14px;font-weight:600;flex:none}

/* CTA band */
.cta{position:relative;background:var(--paper);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);overflow:hidden}
.cta-inner{position:relative;padding:72px var(--gutter);max-width:var(--max);margin:0 auto;display:grid;gap:28px}
.cta h2{font-size:clamp(32px,7vw,56px);letter-spacing:-0.04em;max-width:13em}
.cta p{color:var(--muted);font-size:18px;max-width:34em}
.cta .note{font-size:15px;margin-top:4px}

/* Page header (services/about) */
.page-head{position:relative;padding:56px 0 52px;overflow:hidden}
.page-head h1{font-size:clamp(40px,10vw,80px);letter-spacing:-0.045em;line-height:1.02;max-width:12em}
.page-head .lede{margin-top:22px}

/* Services list */
.group{padding:56px 0 64px}
.group-head{display:grid;gap:14px;margin-bottom:32px}
.group-num{font-size:13px;font-weight:500;letter-spacing:.12em;color:var(--accent);font-variant-numeric:tabular-nums}
.svc-list{list-style:none;margin:0;padding:0;display:grid;border-top:1px solid var(--rule)}
.svc{padding:22px 0;border-bottom:1px solid var(--rule)}
.svc h3{font-size:19px;letter-spacing:-0.015em}
.svc p{color:var(--muted);font-size:16px;margin-top:6px}
.media-break{display:grid;gap:12px;padding-top:8px;padding-bottom:56px}
.media-break figure{margin:0;overflow:hidden;background:var(--surface);aspect-ratio:16/10}
.media-break.single figure{aspect-ratio:16/9}
.media-break.single img{object-position:50% 20%}

/* About */
.facts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.facts li{padding:22px 18px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.facts b{display:block;font-size:17px;font-weight:600;letter-spacing:-0.015em}
.facts span{display:block;color:var(--muted);font-size:14.5px;margin-top:4px;line-height:1.45}
.prose p+p{margin-top:18px}
.prose p{color:var(--muted);font-size:18px;max-width:36em}
.prose p strong{color:var(--text);font-weight:500}
.tags{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.tags li{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 14px;border:1px solid var(--rule);background:var(--paper);font-size:15px;font-weight:500;border-radius:2px}
.tags li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent)}
.tags-more{margin-top:16px;color:var(--muted)}

/* Footer */
.footer{background:var(--dark);color:var(--dark-muted);font-size:15px;padding:56px 0 calc(32px + var(--callbar-h) + env(safe-area-inset-bottom))}
.footer a{text-decoration:none;color:#fff;transition:color .3s var(--ease)}
.footer a:hover{color:var(--accent-bright)}
.footer-grid{display:grid;gap:36px}
.footer .logo{color:#fff;margin-bottom:12px}
.footer .logo span{color:var(--dark-muted)}
.footer .logo-mark{color:var(--accent-bright)}
.footer h2{font-size:12.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--dark-muted);margin-bottom:14px}
.footer ul{list-style:none;margin:0;padding:0}
.footer li a{display:inline-flex;align-items:center;min-height:40px}
.footer address{line-height:1.7}
.footer .phone{display:inline-flex;align-items:center;min-height:44px;font-size:20px;font-weight:500;font-variant-numeric:tabular-nums}
.footer-meta{margin-top:48px;padding-top:22px;border-top:1px solid var(--dark-rule);display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;font-size:13.5px}

/* Mobile call bar */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;align-items:center;justify-content:center;gap:10px;min-height:var(--callbar-h);padding:0 16px env(safe-area-inset-bottom);background:var(--accent);color:#fff;font-weight:500;font-size:16px;text-decoration:none;box-shadow:0 -6px 20px -10px rgba(11,13,18,.5)}
.callbar svg{width:18px;height:18px;flex:none}
.callbar span{opacity:.82;font-weight:400}

/* Intro (home only). Hidden by default; only shown when the head script adds .intro-on. */
.intro{display:none}
html.intro-on .intro{display:flex;position:fixed;inset:0;z-index:1000;flex-direction:column;align-items:center;justify-content:center;padding:0 var(--gutter);background:var(--bg);text-align:center;will-change:transform;animation:intro-exit .7s var(--ease-io) 2.1s forwards}
html.intro-skip .intro{animation:intro-exit-now .6s var(--ease-io) forwards}
.intro-mark{font-size:clamp(38px,9vw,96px);letter-spacing:-0.045em;line-height:1.05}
.intro-mark span{display:inline-block;opacity:0;transform:translateY(.4em);animation:intro-rise .75s var(--ease) forwards}
.intro-mark span:nth-child(1){font-weight:700;animation-delay:.3s}
.intro-mark span:nth-child(2){font-weight:400;color:var(--muted);animation-delay:.45s}
.intro-wire{position:relative;width:min(300px,62vw);height:1px;margin:30px auto 20px}
.intro-wire::before{content:"";position:absolute;inset:0;background:var(--accent);transform:scaleX(0);transform-origin:left;animation:intro-draw .6s var(--ease) .85s forwards}
.intro-wire::after{content:"";position:absolute;inset:0;background:var(--spark);opacity:0;animation:intro-flash .5s ease-out 1.4s forwards}
.intro-spark{position:absolute;top:-3px;left:0;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:#fff;box-shadow:0 0 0 1.5px var(--spark),0 0 10px 3px rgba(255,214,10,.7),0 0 18px 4px rgba(0,87,255,.55);opacity:0;animation:intro-spark .6s var(--ease) .85s forwards}
.intro-place{font-size:13px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);opacity:0;animation:intro-fade .5s var(--ease) 1.4s forwards}
html.intro-on .hero-grid{animation:hero-settle .9s var(--ease) 2.25s both}
html.intro-skip .hero-grid{animation:hero-settle-now .9s var(--ease) .2s both}
@keyframes intro-rise{to{opacity:1;transform:none}}
@keyframes intro-draw{to{transform:scaleX(1)}}
@keyframes intro-fade{to{opacity:1}}
@keyframes intro-flash{0%{opacity:.9}100%{opacity:0}}
@keyframes intro-spark{0%{left:0;opacity:0}15%{opacity:1}85%{opacity:1}100%{left:100%;opacity:0}}
@keyframes intro-exit{to{transform:translateY(-100%)}}
@keyframes intro-exit-now{to{transform:translateY(-100%)}}
@keyframes hero-settle{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes hero-settle-now{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* Scroll reveal. Visible by default; .js-anim (added by JS) opts elements into the hidden start state. */
html.js-anim .reveal{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--d,0ms)}
html.js-anim .reveal.is-in{opacity:1;transform:none}
/* Signature: traces draw themselves once, then the node lights up (<1s) */
html.js-anim .trace .t-a,html.js-anim .trace .t-b{transform:scaleX(0);transform-origin:left}
html.js-anim .trace .t-a{transition:transform .32s linear}
html.js-anim .trace .t-b{transition:transform .32s var(--ease) .5s}
html.js-anim .trace path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .18s linear .32s}
html.js-anim .trace circle:not(.node-end){fill:var(--rule);transition:fill .2s ease .3s}
html.js-anim .trace.is-in .t-a,html.js-anim .trace.is-in .t-b{transform:none}
html.js-anim .trace.is-in path{stroke-dashoffset:0}
html.js-anim .trace.is-in circle:not(.node-end){fill:var(--accent);animation:node-pulse .7s ease-out .3s}
@keyframes node-pulse{0%{filter:drop-shadow(0 0 0 rgba(0,87,255,0))}35%{filter:drop-shadow(0 0 6px rgba(0,87,255,.95))}100%{filter:drop-shadow(0 0 0 rgba(0,87,255,0))}}

/* ≥ 640px */
@media (min-width:640px){
  :root{--gutter:32px}
  .trust ul{grid-template-columns:repeat(3,auto);justify-content:space-between}
  .trust li:last-child{grid-column:auto}
  .cards{grid-template-columns:1fr 1fr;column-gap:40px}
  .reviews{grid-template-columns:1fr 1fr}
  .svc-list{grid-template-columns:1fr 1fr;column-gap:40px}
  .media-break{grid-template-columns:1fr 1fr}
  .media-break.single{grid-template-columns:1fr}
  .facts{grid-template-columns:repeat(3,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
}
/* ≥ 900px: single-row header, desktop layouts; call bar hidden */
@media (min-width:900px){
  :root{--header-h:72px;--callbar-h:0px}
  .callbar{display:none}
  .header-inner{flex-wrap:nowrap;padding-top:0;min-height:72px}
  .nav{order:0;flex-basis:auto;margin:0 0 0 auto}
  .header-actions{margin-left:20px}
  .hero{padding:72px 0 104px}
  .hero-bg{display:block}
  .hero-grid{grid-template-columns:1.15fr .85fr;gap:64px;align-items:center}
  .media-break.single figure{aspect-ratio:21/9}
  .media-break{padding-bottom:80px}
  .card{padding:36px 28px 40px 0}
  .hero-media picture{aspect-ratio:4/5}
  .trust ul{display:flex;justify-content:space-between;padding:24px var(--gutter)}
  .section{padding:112px 0}
  .section-head{grid-template-columns:1fr 1fr;align-items:end;gap:48px;margin-bottom:56px}
  .cards{grid-template-columns:repeat(3,1fr)}
  .split{grid-template-columns:1fr 1fr;gap:72px}
  .split.flip .split-media{order:2}
  .cta-inner{grid-template-columns:1.3fr auto;align-items:end;padding:104px var(--gutter)}
  .page-head{padding:88px 0 80px}
  .group{padding:80px 0 96px}
  .group-head{grid-template-columns:1fr 1fr;gap:48px;align-items:end;margin-bottom:44px}
  .svc-list{grid-template-columns:repeat(3,1fr)}
  .footer{padding-bottom:36px}
  .footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr}
}
@media (min-width:1080px){
  .header-phone{display:inline-flex}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  .intro{display:none!important}
  html.js-anim .reveal{opacity:1;transform:none}
  .btn:hover,.split-media:hover img,.media-break figure:hover img{transform:none}
}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}