/* ============================================================
   CHAVIS ELECTRICAL SERVICES — "Charged" design system
   LIGHT theme. BLUE brand (from logo). Yellow = electricity effect ONLY.
   Fonts: Space Grotesk (display) / Inter (body) / JetBrains Mono (labels)
   ============================================================ */

:root{
  /* ---- palette (light) ---- */
  --bg:        #f5f7fb;   /* page */
  --bg-2:      #eef2f8;   /* alt sections / footer */
  --bg-3:      #ffffff;   /* inputs */
  --surface:   #ffffff;   /* cards */
  --surface-2: #ffffff;
  --line:      rgba(16,24,40,.12);
  --line-2:    rgba(16,24,40,.20);

  /* BRAND BLUE (from the Chavis logo) — used for all UI accents */
  --volt:        #2e7cff;
  --volt-bright: #4f9dff;
  --volt-deep:   #1850c7;   /* deep blue — icons/accents on light (readable) */
  --spark:       #7ab0ff;
  --accent-ink:  #1a53cf;   /* blue accent text on light */
  --glow:        rgba(46,124,255,.5);
  --glow-soft:   rgba(46,124,255,.18);

  /* ELECTRICITY EFFECT ONLY — yellow/gold (hero lightning + energy glow) */
  --elec:      #f5b300;
  --elec-glow: rgba(244,179,0,.30);

  --ink:    #111a2b;   /* near-black text */
  --ink-2:  #41506a;   /* body text */
  --muted:  #6b7589;   /* muted text */

  /* ---- type ---- */
  --display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --body:    "Inter", system-ui, -apple-system, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, monospace;

  /* ---- spacing / shape ---- */
  --container: 1240px;
  --radius:    14px;
  --radius-sm: 10px;
  --radius-lg: 22px;

  /* ---- motion ---- */
  --ease:    cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --spring:  cubic-bezier(.34,1.56,.64,1);

  --shadow:      0 18px 44px -22px rgba(23,33,60,.28);
  --shadow-volt: 0 16px 40px -16px var(--glow);

  --bolt-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 2 4 14h6l-1 8 9-12h-6z'/%3E%3C/svg%3E");
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  font-family:var(--body);
  background:var(--bg);
  color:var(--ink);
  line-height:1.65;
  font-size:clamp(1rem,.96rem + .2vw,1.075rem);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ambient brand wash */
body::before{
  content:"";
  position:fixed; inset:0;
  background:
    radial-gradient(60vw 60vw at 82% -12%, rgba(46,124,255,.10), transparent 60%),
    radial-gradient(46vw 46vw at 4% 4%, rgba(79,157,255,.07), transparent 55%);
  z-index:0; pointer-events:none;
}
main,header,footer{ position:relative; z-index:1; }

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; }
::selection{ background:var(--volt); color:#fff; }

/* ---------- typography ---------- */
h1,h2,h3,h4{ font-family:var(--display); font-weight:700; line-height:1.05; letter-spacing:-.03em; color:var(--ink); }
.h-xl{ font-size:clamp(2.6rem,1.6rem + 4.6vw,5.4rem); line-height:1.0; letter-spacing:-.045em; }
.h-lg{ font-size:clamp(2.1rem,1.5rem + 2.8vw,3.6rem); line-height:1.04; letter-spacing:-.04em; }
.h-md{ font-size:clamp(1.55rem,1.2rem + 1.6vw,2.3rem); letter-spacing:-.03em; }
.h-sm{ font-size:clamp(1.2rem,1.05rem + .6vw,1.45rem); letter-spacing:-.02em; }
p{ color:var(--ink-2); max-width:65ch; }
.lead{ font-size:clamp(1.1rem,1rem + .5vw,1.35rem); color:var(--ink-2); }
strong{ color:var(--ink); font-weight:600; }
.text-balance{ text-wrap:balance; }
.text-pretty{ text-wrap:pretty; }

/* gradient text (brand blue, dark enough to read on light) */
.grad{
  background:linear-gradient(100deg,#4f9dff,#2e7cff 50%,#1850c7 90%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* eyebrow / mono label — text is blue; the bolt glyph is the yellow electricity accent */
.eyebrow{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--mono); font-size:.72rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--accent-ink);
}
.eyebrow::before{
  content:""; width:16px; height:16px; flex:none;
  background:var(--elec); -webkit-mask:var(--bolt-mask) center/contain no-repeat;
  mask:var(--bolt-mask) center/contain no-repeat;
  filter:drop-shadow(0 1px 4px var(--elec-glow));
}

/* ---------- layout ---------- */
.container{ width:min(100% - 2.4rem,var(--container)); margin-inline:auto; }
.section{ padding:clamp(4.5rem,3rem + 8vw,9rem) 0; }
.section-tight{ padding:clamp(3rem,2rem + 4vw,5rem) 0; }
.center{ text-align:center; }
.stack-sm>*+*{ margin-top:.8rem; }
.stack>*+*{ margin-top:1.3rem; }
.eyebrow + h1,.eyebrow + h2,.eyebrow + h3{ margin-top:1.1rem; }
.section-head{ max-width:760px; }
.section-head.center{ margin-inline:auto; }

/* ---------- buttons ---------- */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:1rem 1.7rem; border-radius:999px; font-weight:600; font-size:1rem;
  border:1px solid transparent; white-space:nowrap; isolation:isolate;
  transition:transform .25s var(--spring), box-shadow .3s var(--ease), background .3s var(--ease);
  will-change:transform;
}
.btn svg{ width:1.15em; height:1.15em; }
.btn-primary{
  background:linear-gradient(135deg,#3d87ff,#1546b8);
  color:#fff; box-shadow:0 10px 26px -10px var(--glow), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn-primary::after{
  content:""; position:absolute; inset:0; border-radius:inherit; z-index:-1;
  background:linear-gradient(135deg,var(--volt-bright),var(--volt));
  opacity:0; transition:opacity .3s var(--ease);
}
.btn-primary:hover{ transform:translateY(-3px); box-shadow:0 22px 44px -14px var(--glow), inset 0 1px 0 rgba(255,255,255,.35); color:#fff; }
.btn-primary:hover::after{ opacity:1; }
.btn-ghost{ background:#fff; color:var(--ink); border-color:var(--line-2); }
.btn-ghost:hover{ transform:translateY(-3px); border-color:var(--volt); box-shadow:var(--shadow-volt); color:var(--ink); }
.btn-lg{ padding:1.15rem 2.1rem; font-size:1.06rem; }
.btn:active{ transform:translateY(-1px) scale(.99); }
.btn:focus-visible{ outline:2px solid var(--volt-deep); outline-offset:3px; }

.btn-call{ font-family:var(--mono); letter-spacing:.02em; }

/* ---------- header / nav ---------- */
.site-header{
  position:fixed; top:0; inset-inline:0; z-index:90;
  transition:background .35s var(--ease), border-color .35s var(--ease), backdrop-filter .35s, box-shadow .35s;
  border-bottom:1px solid transparent;
}
.site-header.scrolled{
  background:rgba(255,255,255,.85); backdrop-filter:blur(16px) saturate(140%);
  border-bottom-color:var(--line); box-shadow:0 8px 30px -20px rgba(23,33,60,.4);
}
.nav{ display:flex; align-items:center; gap:1.5rem; height:78px; }
.brand{ display:flex; align-items:center; gap:.6rem; font-family:var(--display); font-weight:700; letter-spacing:-.02em; font-size:1.05rem; color:var(--ink); }
.brand-logo{ height:46px; width:auto; display:block; flex:none; }
.brand .b-name{ line-height:1.05; }
.brand small{ display:block; font-family:var(--mono); font-size:.57rem; letter-spacing:.2em; color:var(--accent-ink); font-weight:500; margin-top:3px; }
.nav-links{ display:flex; align-items:center; gap:.35rem; margin-left:auto; }
.nav-links a{ position:relative; padding:.55rem .8rem; border-radius:8px; font-size:.94rem; color:var(--ink-2); transition:color .25s; }
.nav-links a:hover,.nav-links a[aria-current="page"]{ color:var(--ink); }
.nav-links a::after{
  content:""; position:absolute; left:.8rem; right:.8rem; bottom:.35rem; height:2px; border-radius:2px;
  background:var(--volt); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease);
}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{ transform:scaleX(1); }

/* dropdown */
.has-drop{ position:relative; }
.drop{
  position:absolute; top:calc(100% + 8px); left:0; min-width:248px;
  background:#fff; backdrop-filter:blur(18px);
  border:1px solid var(--line); border-radius:var(--radius); padding:.5rem;
  box-shadow:var(--shadow); opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}
.has-drop:hover .drop,.has-drop:focus-within .drop{ opacity:1; visibility:visible; transform:translateY(0); }
.drop a{ display:flex; align-items:center; gap:.6rem; padding:.6rem .7rem; border-radius:9px; width:100%; font-size:.92rem; color:var(--ink-2); }
.drop a:hover{ background:var(--bg-2); color:var(--ink); }
.drop a::after{ display:none; }
.drop a .di{ width:18px; height:18px; color:var(--volt-deep); flex:none; }

.nav-cta{ display:flex; align-items:center; gap:.6rem; }
.nav-phone{ display:inline-flex; align-items:center; gap:.5rem; font-family:var(--mono); font-weight:600; font-size:.95rem; padding:.5rem .4rem; color:var(--ink); }
.nav-phone svg{ width:1.05em; height:1.05em; color:var(--volt-deep); }
.nav-phone:hover{ color:var(--accent-ink); }

.burger{ display:none; width:46px; height:46px; border-radius:10px; background:#fff; border:1px solid var(--line-2); align-items:center; justify-content:center; flex-direction:column; gap:5px; margin-left:auto; }
.burger span{ width:20px; height:2px; background:var(--ink); border-radius:2px; transition:.3s var(--ease); }
.burger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; }
.burger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* mobile drawer */
.drawer{
  position:fixed; inset:0 0 0 auto; width:min(86vw,380px); z-index:95;
  background:#fff; border-left:1px solid var(--line);
  transform:translateX(100%); transition:transform .4s var(--ease-out);
  padding:90px 1.6rem 2rem; overflow-y:auto; display:flex; flex-direction:column; gap:.2rem;
  box-shadow:-30px 0 60px -30px rgba(23,33,60,.4);
}
.drawer.open{ transform:translateX(0); }
.drawer a{ padding:.85rem .4rem; border-bottom:1px solid var(--line); font-size:1.05rem; color:var(--ink-2); }
.drawer a:hover{ color:var(--ink); }
.drawer .drawer-sub{ display:flex; flex-direction:column; }
.drawer .drawer-sub a{ font-size:.95rem; padding-left:1.2rem; color:var(--muted); }
.drawer .btn{ margin-top:1.2rem; }
.scrim{ position:fixed; inset:0; background:rgba(17,26,43,.45); backdrop-filter:blur(3px); z-index:94; opacity:0; visibility:hidden; transition:.4s; }
.scrim.open{ opacity:1; visibility:visible; }

/* ---------- hero ---------- */
.hero{ position:relative; min-height:100svh; display:flex; align-items:center; padding-top:100px; padding-bottom:4rem; overflow:hidden;
  background:linear-gradient(180deg,#ffffff 0%,#eef2f8 100%); }
.hero-canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:1; }
.hero-grid{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px; opacity:.6;
  -webkit-mask:radial-gradient(70% 70% at 50% 40%,#000,transparent 90%);
  mask:radial-gradient(70% 70% at 50% 40%,#000,transparent 90%);
}
.hero .container{ position:relative; z-index:2; }
.hero-inner{ max-width:880px; }
.hero h1{ margin-top:1.3rem; }
.hero .lead{ margin-top:1.5rem; max-width:46ch; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.2rem; align-items:center; }
.hero-trust{ display:flex; flex-wrap:wrap; gap:1.4rem 2rem; margin-top:2.8rem; align-items:center; color:var(--muted); font-size:.9rem; }
.hero-trust .ht{ display:flex; align-items:center; gap:.55rem; }
.hero-trust strong{ color:var(--ink); }
.stars{ color:#f5a200; letter-spacing:2px; }

/* word reveal — padding gives descenders room inside the clip box */
.reveal-words .word{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.18em; margin-bottom:-.18em; }
.reveal-words .word i{ display:inline-block; font-style:inherit; transform:translateY(115%); transition:transform .8s var(--ease-out); }
.reveal-words.in .word i{ transform:translateY(0); }

/* ---------- trust bar / partners ---------- */
.partners{ border-block:1px solid var(--line); background:#fff; }
.partners .container{ padding-block:2.6rem; text-align:center; }
.partners .pl{ display:block; font-family:var(--mono); font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); margin-bottom:1.6rem; }
.partner-row{ display:grid; grid-template-columns:repeat(6,1fr); gap:1rem; align-items:stretch; }
.partner-chip{
  display:flex; align-items:center; justify-content:center; min-height:78px; padding:1rem 1.1rem;
  background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 8px 22px -16px rgba(23,33,60,.35);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.partner-chip:hover{ transform:translateY(-4px); border-color:var(--line-2); box-shadow:var(--shadow); }
.partner-chip img{ max-height:40px; max-width:100%; width:auto; object-fit:contain; }
@media (max-width:980px){ .partner-row{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:560px){ .partner-row{ grid-template-columns:repeat(2,1fr); } }

/* ---------- glass / card ---------- */
.glass{
  background:#fff;
  border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); position:relative; overflow:hidden;
}

/* ---------- service grid ---------- */
.grid{ display:grid; gap:1.3rem; }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }

.scard{
  display:flex; flex-direction:column; gap:1rem; padding:1.8rem;
  background:#fff;
  border:1px solid var(--line); border-radius:var(--radius); position:relative; overflow:hidden;
  box-shadow:0 10px 30px -22px rgba(23,33,60,.3);
  transition:transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
  will-change:transform;
}
.scard::before{ /* charge sweep */
  content:""; position:absolute; inset:0; border-radius:inherit; opacity:0;
  background:radial-gradient(120% 80% at 50% -20%,var(--glow-soft),transparent 70%);
  transition:opacity .4s var(--ease);
}
.scard::after{ /* top edge accent line */
  content:""; position:absolute; top:0; left:0; right:0; height:3px; transform:scaleX(0); transform-origin:left;
  background:linear-gradient(90deg,var(--volt-bright),var(--volt),transparent);
  transition:transform .5s var(--ease);
}
.scard:hover{ transform:translateY(-8px); border-color:var(--line-2); box-shadow:var(--shadow), var(--shadow-volt); }
.scard:hover::before{ opacity:1; }
.scard:hover::after{ transform:scaleX(1); }
.scard .ico{
  width:54px; height:54px; border-radius:13px; flex:none; display:grid; place-items:center;
  background:linear-gradient(150deg,rgba(46,124,255,.18),rgba(46,124,255,.06));
  border:1px solid rgba(46,124,255,.28); color:var(--volt-deep);
  transition:transform .5s var(--spring), color .4s, box-shadow .4s, background .4s;
}
.scard:hover .ico{ transform:translateY(-2px) scale(1.06); color:var(--volt); box-shadow:0 8px 22px -6px var(--glow); }
.scard .ico svg{ width:28px; height:28px; }
.scard h3{ font-size:1.25rem; }
.scard p{ color:var(--ink-2); font-size:.97rem; }
.scard .more{ margin-top:auto; font-family:var(--mono); font-size:.8rem; letter-spacing:.04em; color:var(--accent-ink); display:inline-flex; align-items:center; gap:.45rem; }
.scard .more svg{ width:14px; height:14px; transition:transform .3s var(--ease); }
.scard:hover .more svg{ transform:translateX(4px); }

/* feature split */
.split{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,1rem + 4vw,5rem); align-items:center; }
.split.rev{ grid-template-columns:.95fr 1.05fr; }
.media{ position:relative; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow); }
.media img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; }
.media.duo img{ filter:grayscale(1) contrast(1.04) brightness(1.02); }
.media.duo::after{ content:""; position:absolute; inset:0; background:linear-gradient(140deg,rgba(46,124,255,.5),rgba(24,80,199,.32)); mix-blend-mode:multiply; }
.media .badge-float{
  position:absolute; bottom:1rem; left:1rem; right:1rem; padding:1rem 1.2rem;
  background:rgba(255,255,255,.92); backdrop-filter:blur(10px); border:1px solid var(--line-2); border-radius:var(--radius-sm);
  display:flex; align-items:center; gap:.9rem; box-shadow:0 14px 30px -16px rgba(23,33,60,.5);
}

/* checklist */
.checks{ list-style:none; display:grid; gap:.85rem; }
.checks li{ display:flex; gap:.75rem; align-items:flex-start; color:var(--ink-2); }
.checks li svg{ width:22px; height:22px; flex:none; color:var(--volt-deep); margin-top:2px; }

/* ---------- stats ---------- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; }
.stat{ padding:1.6rem 1.4rem; text-align:center; }
.stat .n{ font-family:var(--display); font-weight:700; font-size:clamp(2.2rem,1.4rem + 2.4vw,3.2rem); line-height:1; letter-spacing:-.03em; }
.stat .n .grad{ display:inline-block; }
.stat .l{ font-family:var(--mono); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-top:.6rem; }

/* ---------- process / steps ---------- */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.3rem; counter-reset:step; }
.step{ position:relative; padding:2rem 1.6rem; }
.step .num{ font-family:var(--mono); font-size:.8rem; color:var(--accent-ink); letter-spacing:.2em; }
.step .ring{ width:58px; height:58px; border-radius:50%; display:grid; place-items:center; border:1px solid rgba(46,124,255,.28); background:linear-gradient(150deg,rgba(46,124,255,.16),rgba(46,124,255,.05)); margin-bottom:1.1rem; color:var(--volt-deep); }
.step .ring svg{ width:26px; height:26px; }
.step h3{ font-size:1.2rem; margin-bottom:.4rem; }
.step.line::after{ content:""; position:absolute; top:calc(2rem + 29px); right:-.65rem; width:1.3rem; height:2px; background:linear-gradient(90deg,var(--volt),transparent); }

/* ---------- reviews ---------- */
.review{ padding:1.8rem; display:flex; flex-direction:column; gap:1rem; height:100%; }
.review .stars{ font-size:1.05rem; }
.review p{ color:var(--ink); font-size:1.02rem; line-height:1.6; }
.review .who{ display:flex; align-items:center; gap:.75rem; margin-top:auto; }
.review .av{ width:42px; height:42px; border-radius:50%; display:grid; place-items:center; font-family:var(--display); font-weight:700; background:linear-gradient(150deg,var(--volt-bright),var(--volt-deep)); color:#fff; }
.review .who b{ display:block; font-size:.95rem; }
.review .who span{ font-size:.8rem; color:var(--muted); font-family:var(--mono); }
.gicon{ width:20px; height:20px; }

/* marquee */
.marquee{ overflow:hidden; -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee-track{ display:flex; gap:1.2rem; width:max-content; animation:scrollx 46s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee .review{ width:380px; flex:none; }
@keyframes scrollx{ to{ transform:translateX(-50%); } }

/* ---------- CTA band (light blue-tinted panel) ---------- */
.cta-band{ position:relative; overflow:hidden; border-radius:var(--radius-lg); padding:clamp(2.5rem,1.5rem + 5vw,5rem); text-align:center; border:1px solid rgba(46,124,255,.32); background:linear-gradient(150deg,#e9f1ff,#ffffff 72%); box-shadow:var(--shadow); }
.cta-band::before{ content:""; position:absolute; inset:0; background:radial-gradient(60% 120% at 50% 0%,var(--glow-soft),transparent 60%); }
.cta-band > *{ position:relative; }
.cta-band .hero-cta{ justify-content:center; }

/* ---------- service area ---------- */
.area-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:.8rem; }
.area-chip{ padding:1.1rem 1rem; border:1px solid var(--line); border-radius:var(--radius-sm); background:#fff; display:flex; align-items:center; gap:.6rem; transition:.3s var(--ease); box-shadow:0 8px 22px -18px rgba(23,33,60,.4); }
.area-chip:hover{ border-color:var(--volt); background:#f3f8ff; transform:translateY(-3px); box-shadow:var(--shadow-volt); }
.area-chip svg{ width:18px; height:18px; color:var(--volt-deep); flex:none; }

/* ---------- forms ---------- */
.form{ display:grid; gap:1.1rem; }
.field{ display:flex; flex-direction:column; gap:.45rem; }
.field label{ font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.field input,.field select,.field textarea{
  background:#fff; border:1px solid var(--line-2); border-radius:var(--radius-sm);
  color:var(--ink); padding:.95rem 1.1rem; font:inherit; transition:border-color .25s,box-shadow .25s;
}
.field input::placeholder,.field textarea::placeholder{ color:#9aa3b2; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--volt); box-shadow:0 0 0 4px var(--glow-soft); }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
.form-note{ font-size:.82rem; color:var(--muted); }

/* page hero (interior) */
.phero{ position:relative; padding:150px 0 clamp(3rem,2rem + 4vw,5rem); overflow:hidden; background:linear-gradient(180deg,#ffffff,#f5f7fb); }
.phero::after{ content:""; position:absolute; inset:0; z-index:0; background:radial-gradient(50% 100% at 82% 0%,rgba(46,124,255,.14),transparent 60%); pointer-events:none; }
.phero .container{ position:relative; z-index:1; }
.breadcrumb{ font-family:var(--mono); font-size:.75rem; letter-spacing:.1em; color:var(--muted); display:flex; gap:.5rem; align-items:center; }
.breadcrumb a:hover{ color:var(--accent-ink); }

/* badges / pills */
.pill{ display:inline-flex; align-items:center; gap:.45rem; padding:.4rem .85rem; border-radius:999px; border:1px solid var(--line-2); background:#fff; font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); }
.pill.volt{ border-color:rgba(46,124,255,.45); background:#f3f8ff; color:var(--accent-ink); }
.pill svg{ width:14px; height:14px; }

/* price cards */
.price{ padding:2rem; display:flex; flex-direction:column; gap:1.2rem; height:100%; }
.price.feat{ border-color:rgba(46,124,255,.5); box-shadow:var(--shadow-volt); }
.price .tag{ font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-ink); }
.price .amt{ font-family:var(--display); font-weight:700; font-size:2.4rem; letter-spacing:-.03em; color:var(--ink); }
.price .amt span{ font-size:.95rem; color:var(--muted); font-family:var(--body); font-weight:400; }
.price .checks{ margin-top:.4rem; }
.price .checks li{ font-size:.95rem; }

/* footer (light) */
.site-footer{ border-top:1px solid var(--line); background:var(--bg-2); padding:clamp(4.5rem,3.5rem + 3vw,6.5rem) 0 2rem; }
.foot-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:2.5rem; }
.foot-grid h4{ font-family:var(--mono); font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); font-weight:600; margin-bottom:1.1rem; }
.foot-grid a,.foot-grid p{ color:var(--ink-2); font-size:.94rem; display:block; padding:.28rem 0; transition:color .2s; max-width:none; }
.foot-grid a:hover{ color:var(--accent-ink); }
.foot-contact a{ display:flex; align-items:center; gap:.6rem; }
.foot-contact svg{ width:17px; height:17px; color:var(--volt-deep); flex:none; }
.foot-bottom{ border-top:1px solid var(--line); margin-top:3rem; padding-top:1.6rem; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; color:var(--muted); font-size:.84rem; }
.foot-bottom .mono{ font-family:var(--mono); }
.foot-brand .brand{ margin-bottom:1rem; }
.foot-brand .brand-logo{ height:50px; }
.foot-brand p{ margin-top:1rem; }
.foot-social{ display:flex; gap:.6rem; margin-top:1.2rem; }
.foot-social a{ width:40px; height:40px; border-radius:10px; border:1px solid var(--line-2); display:grid; place-items:center; background:#fff; padding:0; color:var(--ink-2); }
.foot-social a:hover{ border-color:var(--volt); color:var(--accent-ink); transform:translateY(-3px); box-shadow:var(--shadow-volt); }
.foot-social svg{ width:18px; height:18px; }

/* sticky mobile call bar */
.callbar{ position:fixed; bottom:0; inset-inline:0; z-index:80; display:none; gap:.7rem; padding:.7rem; background:rgba(255,255,255,.95); backdrop-filter:blur(14px); border-top:1px solid var(--line); box-shadow:0 -10px 30px -20px rgba(23,33,60,.4); }
.callbar .btn{ flex:1; padding:.85rem; }

/* reveal — progressive enhancement */
.js .reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease-out),transform .7s var(--ease-out); }
.reveal.in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.08s; } .reveal[data-d="2"]{ transition-delay:.16s; }
.reveal[data-d="3"]{ transition-delay:.24s; } .reveal[data-d="4"]{ transition-delay:.32s; }
.reveal[data-d="5"]{ transition-delay:.4s; }

/* FAQ accordion */
.faq{ display:grid; gap:.8rem; max-width:840px; }
.faq details{ border:1px solid var(--line); border-radius:var(--radius-sm); background:#fff; overflow:hidden; transition:border-color .3s var(--ease), box-shadow .3s var(--ease); box-shadow:0 8px 22px -18px rgba(23,33,60,.4); }
.faq details[open]{ border-color:var(--line-2); }
.faq summary{ list-style:none; cursor:pointer; padding:1.1rem 1.3rem; font-family:var(--display); font-weight:600; font-size:1.06rem; color:var(--ink); display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-family:var(--mono); color:var(--volt-deep); font-size:1.5rem; line-height:1; transition:transform .3s var(--ease); }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq .ans{ padding:0 1.3rem 1.2rem; }
.faq .ans p{ max-width:72ch; color:var(--ink-2); }

/* spec / quick-fact list */
.speclist{ display:grid; gap:.8rem; list-style:none; }
.speclist li{ display:flex; gap:.8rem; align-items:center; padding:.95rem 1.1rem; border:1px solid var(--line); border-radius:var(--radius-sm); background:#fff; color:var(--ink-2); }
.speclist li strong{ color:var(--ink); }
.speclist svg{ width:22px; height:22px; color:var(--volt-deep); flex:none; }

/* big service icon for interior hero panels */
.svc-emblem{ width:90px; height:90px; border-radius:20px; display:grid; place-items:center; background:linear-gradient(150deg,rgba(46,124,255,.2),rgba(46,124,255,.06)); border:1px solid rgba(46,124,255,.3); color:var(--volt-deep); box-shadow:0 14px 36px -14px var(--glow); }
.svc-emblem svg{ width:46px; height:46px; }

/* ---------- booking calendar ---------- */
.bk-wrap{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(1.5rem,1rem + 3vw,3rem); align-items:start; }
.bk-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:clamp(1.3rem,1rem + 1vw,1.9rem); }
.bk-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; }
.bk-head .m{ font-family:var(--display); font-weight:700; font-size:1.2rem; color:var(--ink); }
.bk-nav{ display:flex; gap:.5rem; }
.bk-nav button{ width:38px; height:38px; border-radius:9px; border:1px solid var(--line-2); background:#fff; color:var(--ink); display:grid; place-items:center; transition:.2s var(--ease); }
.bk-nav button:hover:not(:disabled){ border-color:var(--volt); color:var(--volt-deep); }
.bk-nav button:disabled{ opacity:.3; cursor:not-allowed; }
.bk-nav svg{ width:18px; height:18px; }
.bk-dow{ display:grid; grid-template-columns:repeat(7,1fr); gap:.35rem; margin-bottom:.4rem; }
.bk-dow span{ text-align:center; font-family:var(--mono); font-size:.62rem; letter-spacing:.08em; color:var(--muted); text-transform:uppercase; padding:.3rem 0; }
.bk-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:.35rem; }
.bk-day{ aspect-ratio:1; border:1px solid transparent; border-radius:9px; background:var(--bg-2); color:var(--ink); font-weight:600; font-size:.95rem; display:grid; place-items:center; cursor:pointer; transition:.16s var(--ease); }
.bk-day:hover:not(:disabled){ background:#e4edff; border-color:var(--volt); }
.bk-day:disabled{ background:transparent; color:#c4cbd8; cursor:default; }
.bk-day.sel{ background:linear-gradient(135deg,#3d87ff,#1546b8); color:#fff; box-shadow:var(--shadow-volt); }
.bk-slots{ display:grid; grid-template-columns:repeat(auto-fill,minmax(98px,1fr)); gap:.55rem; }
.slot-btn{ padding:.7rem .4rem; border-radius:9px; border:1px solid var(--line-2); background:#fff; color:var(--ink); font-weight:600; font-size:.9rem; cursor:pointer; transition:.16s var(--ease); }
.slot-btn:hover{ border-color:var(--volt); color:var(--volt-deep); transform:translateY(-2px); }
.slot-btn.sel{ background:linear-gradient(135deg,#3d87ff,#1546b8); color:#fff; border-color:transparent; }
.bk-empty{ color:var(--muted); font-size:.95rem; padding:.5rem 0; }
.bk-label{ font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:1.5rem 0 .7rem; display:block; }
.bk-picked{ font-weight:600; color:var(--volt-deep); }
.bk-hidden{ display:none !important; }
@media (max-width:880px){ .bk-wrap{ grid-template-columns:1fr; } }

/* divider with bolt (yellow electricity glyph) */
.bolt-div{ display:flex; align-items:center; gap:1rem; color:var(--line-2); }
.bolt-div::before,.bolt-div::after{ content:""; height:1px; flex:1; background:linear-gradient(90deg,transparent,var(--line-2),transparent); }
.bolt-div svg{ width:20px; height:20px; color:var(--elec); filter:drop-shadow(0 1px 4px var(--elec-glow)); }

/* ---------- responsive ---------- */
@media (max-width:980px){
  .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr); }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:1fr; }
  .step.line::after{ display:none; }
  .split,.split.rev{ grid-template-columns:1fr; }
  .split .media{ order:-1; }
  .foot-grid{ grid-template-columns:1fr 1fr; gap:2rem; }
}
@media (max-width:760px){
  .nav-links,.nav-cta .nav-phone span{ display:none; }
  .burger{ display:flex; }
  .nav-cta{ margin-left:auto; }
  .grid-3,.grid-4,.grid-2{ grid-template-columns:1fr; }
  .area-grid{ grid-template-columns:repeat(2,1fr); }
  .field-row{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr; }
  .callbar{ display:flex; }
  body{ padding-bottom:70px; }
  .hero{ min-height:auto; padding-top:120px; }
  .brand-logo{ height:44px; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .reveal{ opacity:1; transform:none; }
  .reveal-words .word i{ transform:none; }
  .marquee-track{ animation:none; }
}

/* ============ BLOG INDEX CARDS ============ */
.blog-card{display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease)}
.blog-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-volt);border-color:var(--line-2)}
.blog-card-img{height:190px;overflow:hidden;border-bottom:1px solid var(--line)}
.blog-card-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease)}
.blog-card:hover .blog-card-img img{transform:scale(1.05)}
.blog-card-icon{height:190px;display:grid;place-items:center;background:linear-gradient(150deg,var(--volt-bright),var(--volt));border-bottom:1px solid var(--line)}
.blog-card-icon svg{width:48px;height:48px;color:#fff}
.blog-meta-row{display:flex;align-items:center;gap:.6rem;font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:1rem}

/* ============ ARTICLE / BLOG POST ============ */
.post-wrap{max-width:760px;margin:0 auto}
.post-meta{display:flex;flex-wrap:wrap;gap:.6rem 1.1rem;align-items:center;margin-top:1.2rem;font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.post-meta .pill{text-transform:none;letter-spacing:0}
.post-figure{margin:2.2rem 0 0;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow)}
.post-figure img{display:block;width:100%;height:auto}
.post-body{font-size:1.075rem;line-height:1.75;color:var(--ink-2);margin-top:2.4rem}
.post-body h2{font-family:var(--display);font-weight:600;font-size:clamp(1.45rem,1.1rem + 1.4vw,1.95rem);line-height:1.2;letter-spacing:-.02em;color:var(--ink);margin-top:2.7rem}
.post-body h3{font-family:var(--display);font-weight:600;font-size:1.2rem;color:var(--ink);margin-top:1.9rem}
.post-body p{margin-top:1.15rem}
.post-body h2:first-child,.post-body h3:first-child,.post-body p:first-child{margin-top:0}
.post-body a{color:var(--accent-ink);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;transition:color .2s var(--ease)}
.post-body a:hover{color:var(--volt-deep)}
.post-body strong{color:var(--ink);font-weight:700}
.post-body ul,.post-body ol{margin:1.25rem 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.75rem}
.post-body ul li{position:relative;padding-left:1.9rem}
.post-body ul li::before{content:"";position:absolute;left:.15rem;top:.55em;width:.7rem;height:.7rem;background:var(--volt);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.post-body ol{counter-reset:li}
.post-body ol li{position:relative;padding-left:2.4rem;counter-increment:li}
.post-body ol li::before{content:counter(li);position:absolute;left:0;top:-.05em;width:1.6rem;height:1.6rem;display:grid;place-items:center;font-family:var(--mono);font-size:.8rem;color:#fff;background:var(--volt);border-radius:7px}
.post-body blockquote{margin:1.7rem 0;padding:1.1rem 1.4rem;border-left:3px solid var(--volt);background:var(--bg-2);border-radius:0 var(--radius) var(--radius) 0;color:var(--ink);font-size:1.1rem}