/* ============================================================
   BDC ELECTRIC INC — design system
   Brand: safety orange + black + white, family-owned PEI electricians
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root{
  /* brand */
  --orange:#EE7A24;
  --orange-bright:#FF9436;
  --orange-deep:#C75E12;
  --orange-glow:rgba(238,122,36,.55);

  /* dark "Voltage" theme (default) */
  --bg:#0B0C0F;
  --bg-2:#111319;
  --surface:#161922;
  --surface-2:#1C202B;
  --line:rgba(255,255,255,.09);
  --line-strong:rgba(255,255,255,.16);
  --text-1:#F3F5F8;
  --text-2:#9AA2AF;
  --text-3:#6B7280;
  --on-accent:#120A03;

  /* type */
  --display:'Space Grotesk',system-ui,sans-serif;
  --body:'IBM Plex Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;

  /* spacing */
  --r-sm:8px; --r-md:14px; --r-lg:22px; --r-xl:32px;
  --shadow:0 18px 50px -18px rgba(0,0,0,.65);
  --shadow-soft:0 10px 30px -12px rgba(0,0,0,.45);
  --maxw:1200px;
  --ls-caps:.14em;
}

/* ---- Daylight theme (clean & bright) ---- */
[data-theme="daylight"]{
  --bg:#FBFAF7;
  --bg-2:#FFFFFF;
  --surface:#FFFFFF;
  --surface-2:#F3F2EE;
  --line:rgba(15,18,25,.10);
  --line-strong:rgba(15,18,25,.18);
  --text-1:#15171C;
  --text-2:#525A66;
  --text-3:#8A929E;
  --shadow:0 20px 50px -22px rgba(20,22,28,.28);
  --shadow-soft:0 10px 28px -14px rgba(20,22,28,.20);
}

/* ---- Blueprint theme (electric blue, techy) ---- */
[data-theme="blueprint"]{
  --orange:#37C0FF;
  --orange-bright:#5FD0FF;
  --orange-deep:#1E8FCC;
  --orange-glow:rgba(55,192,255,.5);
  --on-accent:#04141E;
  --bg:#070C16;
  --bg-2:#0C1422;
  --surface:#101B2E;
  --surface-2:#152339;
  --line:rgba(120,180,255,.14);
  --line-strong:rgba(120,180,255,.26);
  --text-1:#EAF2FB;
  --text-2:#8DA3BE;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--body);
  background:var(--bg);
  color:var(--text-1);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
}

h1,h2,h3,h4{font-family:var(--display);font-weight:700;margin:0;line-height:1.02;letter-spacing:-.02em;}
p{margin:0;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;}
.eyebrow{
  font-family:var(--mono);font-size:13px;font-weight:600;
  letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--orange);
  display:inline-flex;align-items:center;gap:9px;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--orange);display:inline-block;}

/* ---------- buttons ---------- */
.btn{
  font-family:var(--display);font-weight:600;font-size:16px;
  display:inline-flex;align-items:center;gap:10px;justify-content:center;
  padding:0 26px;height:54px;border-radius:var(--r-md);
  border:none;cursor:pointer;position:relative;
  transition:transform .12s ease,box-shadow .2s ease,background .2s ease;
  text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;
}
.btn svg{width:19px;height:19px;}
.btn-primary{
  background:var(--orange);color:var(--on-accent);
  box-shadow:0 4px 0 var(--orange-deep),0 14px 30px -10px var(--orange-glow);
}
.btn-primary:hover{background:var(--orange-bright);transform:translateY(-1px);
  box-shadow:0 5px 0 var(--orange-deep),0 20px 40px -10px var(--orange-glow);}
.btn-primary:active{transform:translateY(3px);box-shadow:0 1px 0 var(--orange-deep);}
.btn-ghost{
  background:transparent;color:var(--text-1);
  border:2px solid var(--line-strong);
}
.btn-ghost:hover{border-color:var(--orange);color:var(--orange);}
.btn-lg{height:60px;font-size:17px;padding:0 32px;}

/* ---------- section scaffolding ---------- */
section{position:relative;}
.sec-pad{padding:110px 0;}
.sec-head{max-width:680px;margin-bottom:54px;}
.sec-head h2{font-size:clamp(34px,4.6vw,56px);margin:18px 0 0;color:var(--text-1);}
.sec-head .lede{color:var(--text-2);font-size:19px;line-height:1.6;margin-top:18px;}

.divider-arc{height:2px;width:100%;background:
  linear-gradient(90deg,transparent,var(--line-strong) 18%,var(--line-strong) 82%,transparent);}

/* tag chips */
.chips{display:flex;flex-wrap:wrap;gap:10px;}
.chip{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:12.5px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-2);
  padding:9px 14px;border:1px solid var(--line);border-radius:999px;
  background:var(--surface);
}
.chip svg{width:15px;height:15px;color:var(--orange);}

/* utility */
.spark-text{color:var(--orange);}