/* Electric Power Pro Solutions — Custom Site Styles
   Palette: ink / electric blue (--volt) / arc cyan (--arc). Dark editorial. Voltage motif.
   Brand blue #014CDF sampled from the EPPS logo mark.
*/

:root {
  --ink-0: #050608;
  --ink-1: #0a0c10;
  --ink-2: #11141a;
  --ink-3: #1b1f28;
  --ink-4: #2a303c;
  --line: #2a303c;
  --line-soft: rgba(255,255,255,0.08);
  --paper: #f8f9fb;
  --paper-2: #eef0f4;
  --white: #ffffff;
  --text: #e7e9ee;
  --text-mute: #a5acba;
  --text-dim: #6f7888;

  /* --volt is the accent that has to stay legible as text on --ink-0 (7.3:1).
     --volt-brand is the true logo blue — solid fills only, always white on top. */
  --volt: #4D8DFF;
  --volt-2: #7FB2FF;
  --volt-brand: #014CDF;
  --volt-deep: #0A3FAE;
  --arc: #35D6F0;
  --arc-2: #7FE7F7;
  --red: #ef4444;
  --red-2: #fb7185;

  --grad-volt: linear-gradient(90deg, var(--volt) 0%, var(--arc) 100%);
  --grad-emerg: linear-gradient(135deg, #ef4444 0%, #f97316 100%);

  --display: 'Archivo', system-ui, sans-serif;
  --body: 'Manrope', system-ui, sans-serif;
  --mono: 'Roboto Mono', ui-monospace, monospace;

  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 20px;

  --container: 1240px;
  --header-h: 80px;
  --util-h: 36px;

  --t-fast: 0.18s ease;
  --t: 0.28s cubic-bezier(.2,.7,.2,1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--body);
  background: var(--ink-0);
  color: var(--text);
  line-height: 1.55;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

a { color: var(--arc); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--arc-2); }

button { font: inherit; cursor: pointer; border: none; background: none; }

h1, h2, h3, h4, h5 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--white);
}

h1 { font-size: clamp(2.4rem, 5.5vw, 4.5rem); }
h2 { font-size: clamp(1.9rem, 3.5vw, 3rem); }
h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); }

p { color: var(--text); }
p + p { margin-top: 0.85rem; }
strong { color: var(--white); font-weight: 600; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 28px;
}

.skip-link {
  position: absolute; top: -100px; left: 8px; background: var(--volt);
  color: var(--ink-0); padding: 10px 16px; border-radius: var(--radius-sm); z-index: 999;
  font-weight: 600;
}
.skip-link:focus { top: 8px; }

/* --- Utility bar --- */
.utility-bar {
  background: var(--volt);
  color: var(--ink-0);
  font-size: 14px;
  font-weight: 600;
  height: var(--util-h);
  position: relative;
  z-index: 50;
}
.utility-bar__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 28px;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
}
.util-pulse {
  width: 8px; height: 8px; background: var(--ink-0); border-radius: 50%;
  position: relative;
  animation: pulse 2s infinite;
}
.util-pulse::after {
  content: ""; position: absolute; inset: -4px;
  border: 2px solid var(--ink-0); border-radius: 50%;
  animation: pulse-ring 2s infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
@keyframes pulse-ring {
  0% { transform: scale(0.6); opacity: 1; }
  100% { transform: scale(2.2); opacity: 0; }
}
.util-text { letter-spacing: 0.02em; }
.util-spacer { flex: 1; }
.util-phone { color: var(--ink-0); font-weight: 700; letter-spacing: 0.02em; }
.util-phone:hover { color: var(--ink-0); text-decoration: underline; }

@media (max-width: 720px) {
  .util-text { display: none; }
  .util-spacer { display: none; }
  .utility-bar__inner { justify-content: space-between; }
}

/* --- Header --- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--t), border-color var(--t), backdrop-filter var(--t);
}
.site-header--solid,
.site-header.is-scrolled {
  background: rgba(5,6,8,0.85);
  border-bottom-color: var(--line-soft);
  backdrop-filter: blur(12px) saturate(140%);
}
.header-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 28px;
  height: var(--header-h);
  display: flex; align-items: center; gap: 32px;
}

.brand {
  display: flex; align-items: center; gap: 10px;
  color: var(--volt);
  transition: opacity var(--t-fast);
}
.brand:hover { opacity: 0.88; }
.brand-mark { display: inline-flex; }
.brand-text { display: inline-flex; flex-direction: column; line-height: 1; }
.brand-text__line1 {
  font-family: var(--display); font-weight: 700; font-size: 18px; color: var(--white); letter-spacing: 0.02em;
}
.brand-text__line2 {
  font-family: var(--mono); font-size: 11px; color: var(--volt); letter-spacing: 0.18em; text-transform: uppercase;
  margin-top: 3px;
}
/* PNG wordmark — use object-fit:contain so nothing ever clips */
.brand-logo {
  display: block;
  height: 52px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  /* Logo art has a hard black background that blends with the header at scroll;
     when header is transparent (top of page), a subtle drop-shadow gives lift. */
  filter: drop-shadow(0 4px 18px rgba(1,76,223,0.18));
}
.brand-logo--footer {
  height: 72px;
}
.brand--logo { gap: 0; }
@media (max-width: 520px) {
  .brand-logo { height: 44px; }
}

.primary-nav { display: flex; gap: 4px; margin-left: auto; }
.nav-link {
  font-family: var(--display);
  font-weight: 500;
  color: var(--text);
  padding: 10px 14px;
  font-size: 15px;
  letter-spacing: 0.01em;
  border-radius: var(--radius-sm);
  transition: color var(--t-fast), background var(--t-fast);
  position: relative;
}
.nav-link:hover { color: var(--volt); background: rgba(1,76,223,0.06); }
.nav-link.is-active {
  color: var(--volt);
}
.nav-link.is-active::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px;
  height: 2px; background: var(--volt);
}

.header-cta { margin-left: 8px; }

/* Hamburger toggle */
.m-toggle {
  display: none;
  position: relative;
  width: 48px;
  height: 48px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0;
  cursor: pointer;
  z-index: 60;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.m-toggle:hover { border-color: var(--volt); background: rgba(1,76,223,0.06); }
.m-toggle__bar {
  position: absolute;
  left: 12px; right: 12px;
  height: 2px;
  background: var(--white);
  border-radius: 1px;
  transition: transform 0.35s cubic-bezier(.2,.7,.2,1), opacity 0.2s ease, top 0.35s cubic-bezier(.2,.7,.2,1);
  transform-origin: center;
}
.m-toggle__bar:nth-child(1) { top: 16px; }
.m-toggle__bar:nth-child(2) { top: 23px; }
.m-toggle__bar:nth-child(3) { top: 30px; }
.m-toggle[aria-expanded="true"] {
  border-color: var(--volt);
  background: rgba(1,76,223,0.1);
}
.m-toggle[aria-expanded="true"] .m-toggle__bar:nth-child(1) { top: 23px; transform: rotate(45deg); background: var(--volt); }
.m-toggle[aria-expanded="true"] .m-toggle__bar:nth-child(2) { opacity: 0; }
.m-toggle[aria-expanded="true"] .m-toggle__bar:nth-child(3) { top: 23px; transform: rotate(-45deg); background: var(--volt); }

@media (max-width: 980px) {
  .primary-nav { display: none; }
  .header-cta { display: none; }
  .m-toggle { display: block; margin-left: auto; }
}

/* Drawer — full viewport, OUTSIDE the .site-header (header has backdrop-filter which breaks fixed positioning in descendants). */
.m-drawer {
  position: fixed;
  inset: 0;
  background: var(--ink-1);
  z-index: 55; /* below util-bar (50) — but util-bar has its own bg so doesn't matter; ABOVE most other content */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.m-drawer[hidden] {
  /* keep [hidden] semantic but override default display:none so we can animate in */
  display: none;
}
.m-drawer.is-open {
  opacity: 1;
  pointer-events: auto;
}
.m-drawer__inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 24px 28px 32px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background:
    radial-gradient(ellipse at 80% 0%, rgba(1,76,223,0.08) 0%, transparent 60%),
    var(--ink-1);
}
.m-drawer__brand {
  display: block;
  margin-bottom: 32px;
  max-width: 240px;
}
.m-drawer__brand .brand-logo { height: auto; max-height: 60px; }
.m-nav { display: flex; flex-direction: column; gap: 4px; }
.m-nav-link {
  display: block;
  padding: 18px 4px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 26px;
  color: var(--white);
  border-bottom: 1px solid var(--line);
  letter-spacing: -0.01em;
  transition: color var(--t-fast), padding-left var(--t-fast);
}
.m-nav-link:hover, .m-nav-link:focus-visible {
  color: var(--volt);
  padding-left: 12px;
}
.m-nav-link--cta {
  margin-top: 28px;
  padding: 22px 24px;
  border: 2px solid var(--volt);
  border-radius: var(--radius);
  color: var(--volt);
  text-align: center;
  font-size: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-bottom: 2px solid var(--volt);
}
.m-nav-link--cta:hover {
  background: var(--volt);
  color: var(--ink-0);
  padding-left: 24px;
}
.m-nav-link--cta:hover .btn-live-dot { background: var(--ink-0); }
.m-drawer__meta {
  margin-top: auto;
  padding-top: 36px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-mute);
  line-height: 1.7;
}
.m-drawer__meta p { color: var(--text-mute); margin-top: 8px; }

/* Lock body scroll when drawer is open */
body.is-locked { overflow: hidden; }

/* --- Buttons --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px;
  font-family: var(--display); font-weight: 600; font-size: 15px;
  letter-spacing: 0.01em;
  border-radius: var(--radius);
  transition: transform var(--t-fast), background var(--t-fast), color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
  cursor: pointer; white-space: nowrap;
  text-decoration: none;
}
.btn--primary {
  background: var(--volt); color: var(--ink-0);
  box-shadow: 0 0 0 0 rgba(1,76,223,0.4);
}
.btn--primary:hover {
  background: var(--volt-2); color: var(--ink-0);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px -8px rgba(1,76,223,0.6);
}
.btn--ghost {
  background: transparent; color: var(--white);
  border: 1.5px solid rgba(255,255,255,0.2);
}
.btn--ghost:hover {
  border-color: var(--white); background: rgba(255,255,255,0.05); color: var(--white);
}
.btn--outline {
  background: transparent; color: var(--volt);
  border: 1.5px solid var(--volt);
  padding: 10px 18px;
}
.btn--outline:hover { background: var(--volt); color: var(--ink-0); }
.btn--emergency {
  background: var(--grad-emerg); color: var(--white);
  box-shadow: 0 8px 30px -10px rgba(239,68,68,0.7);
}
.btn--emergency:hover { transform: translateY(-1px) scale(1.02); color: var(--white); }
.btn--xl { padding: 16px 30px; font-size: 17px; }

/* --- Eyebrows + section heads --- */
.eyebrow {
  display: inline-block;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 14px;
}
.eyebrow--volt { color: var(--volt); }
.eyebrow--arc { color: var(--arc); }
.eyebrow--white { color: var(--white); }

.section-head { max-width: 760px; margin-bottom: 56px; }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 { color: var(--white); }

/* --- Hero --- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 80px 0 140px;
  overflow: hidden;
  background: var(--ink-0);
}
.hero__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(1,76,223,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(1,76,223,0.05) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 80%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 80%);
}
.hero__eyebrow { margin-bottom: 28px; }
.hero__scroll {
  position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 10px; color: var(--text-mute);
  letter-spacing: 0.25em; text-transform: uppercase;
  z-index: 3;
  animation: scroll-bounce 2.4s ease-in-out infinite;
}
.hero__scroll-line {
  width: 1px; height: 36px;
  background: linear-gradient(to bottom, transparent, var(--volt));
}
.hero__scroll:hover { color: var(--volt); }
@keyframes scroll-bounce {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 6px); }
}
.hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: var(--ink-1); }
.hero__bg img,
.hero__video {
  width: 100%; height: 100%; object-fit: cover;
  filter: contrast(1.08) saturate(1.05) brightness(0.95);
}
.hero__video {
  object-position: center 40%;
}
.hero__scrim {
  position: absolute; inset: 0;
  background:
    /* darken left side where text sits, fade to clear over the video */
    linear-gradient(100deg,
      rgba(5,6,8,0.92) 0%,
      rgba(5,6,8,0.78) 20%,
      rgba(5,6,8,0.45) 45%,
      rgba(5,6,8,0.18) 70%,
      rgba(5,6,8,0.05) 100%),
    /* subtle vertical fade so hero strip + edges blend into page */
    linear-gradient(180deg, rgba(5,6,8,0.15) 0%, rgba(5,6,8,0) 35%, rgba(5,6,8,0) 65%, rgba(5,6,8,0.6) 100%);
}
.hero__voltage {
  position: absolute; left: 0; right: 0; bottom: 18%;
  width: 100%; height: 200px;
  opacity: 0.75;
  filter: drop-shadow(0 0 16px rgba(1,76,223,0.55));
  z-index: 2;
}
.hero__volt-path {
  stroke-dasharray: 3500;
  animation: volt-flow 6s linear infinite;
}
.hero__volt-path--a {
  animation-duration: 5.2s;
  filter: drop-shadow(0 0 4px rgba(1,76,223,0.8));
}
.hero__volt-path--b {
  animation-duration: 7.8s;
  animation-direction: reverse;
  opacity: 0.55;
}
@keyframes volt-flow {
  0%   { stroke-dashoffset: 3500; }
  100% { stroke-dashoffset: 0; }
}

.hero__inner { position: relative; z-index: 4; }
.hero__title {
  font-size: clamp(4.5rem, 16vw, 13rem);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 0.88;
  margin-bottom: 36px;
  font-family: var(--display);
  text-transform: uppercase;
}
.hero__title-line {
  display: block;
  position: relative;
  animation: title-rise 0.9s cubic-bezier(.2,.7,.2,1) backwards;
}
.hero__title-line--1 { animation-delay: 0.05s; }
.hero__title-line--2 { animation-delay: 0.18s; padding-left: 0.5em; }
@keyframes title-rise {
  0%   { opacity: 0; transform: translateY(40%); clip-path: inset(0 0 100% 0); }
  100% { opacity: 1; transform: translateY(0); clip-path: inset(-10% 0 -10% 0); }
}
.hero__title-text {
  display: inline-block;
  background: linear-gradient(180deg, #fff 0%, #fff 60%, #4D8DFF 60%, #4D8DFF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  position: relative;
  z-index: 2;
}
.hero__title-line--2 .hero__title-text {
  background: var(--grad-volt);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 22px rgba(1,76,223,0.18));
}
.hero__ghost {
  position: absolute; top: 0; left: 0;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(1,76,223,0.18);
  z-index: 1;
  transform: translate(0.18em, 0.06em);
  pointer-events: none;
}
.hero__sub {
  max-width: 620px;
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  color: var(--text-mute);
  margin-bottom: 36px;
  line-height: 1.55;
}
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* Live "pulsing" CTA */
.btn--live { position: relative; }
.btn-live-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: #ef4444; margin-right: 4px;
  position: relative;
  box-shadow: 0 0 0 0 rgba(239,68,68,0.6);
  animation: live-pulse 2s infinite;
}
@keyframes live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(239,68,68,0.6); }
  70%  { box-shadow: 0 0 0 10px rgba(239,68,68,0); }
  100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
}

@media (max-width: 720px) {
  .hero { min-height: 90vh; padding: 60px 0 110px; }
  .hero__title { font-size: clamp(3.8rem, 18vw, 7rem); }
  .hero__title-line--2 { padding-left: 0; }
  .hero__ghost { display: none; }
  .hero__scroll { bottom: 18px; }
}

/* --- Marquee ticker --- */
.marquee {
  background: var(--volt);
  color: var(--ink-0);
  overflow: hidden;
  padding: 16px 0;
  border-top: 2px solid var(--ink-0);
  border-bottom: 2px solid var(--ink-0);
  position: relative;
  z-index: 5;
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 45s linear infinite;
}
.marquee__group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding-right: 0;
  gap: 0;
}
.marquee__group > span {
  display: inline-block;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  padding: 0 24px;
  white-space: nowrap;
}
.marquee__sep {
  color: var(--ink-0);
  font-size: 1.6rem !important;
  opacity: 0.55;
}
@keyframes marquee-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* --- Counters --- */
.counters {
  background: var(--ink-1);
  padding: 100px 0;
  border-bottom: 1px solid var(--line-soft);
  position: relative;
}
.counters__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 48px;
}
.counter { text-align: center; position: relative; }
.counter__num {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(3rem, 7vw, 6rem);
  line-height: 1;
  letter-spacing: -0.03em;
  background: var(--grad-volt);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 16px rgba(1,76,223,0.15));
  margin-bottom: 18px;
}
.counter__lbl {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--text-mute);
}
.counters__voltage {
  position: absolute;
  left: 0; right: 0; bottom: 30px;
  width: 100%; height: 60px;
  opacity: 0.4;
  filter: drop-shadow(0 0 8px rgba(1,76,223,0.4));
  pointer-events: none;
}
.counters__voltage path {
  stroke-dasharray: 2400;
  animation: counter-volt-flow 9s linear infinite;
}
@keyframes counter-volt-flow {
  0%   { stroke-dashoffset: 2400; }
  100% { stroke-dashoffset: 0; }
}

@media (max-width: 820px) {
  .counters__grid { grid-template-columns: repeat(2, 1fr); gap: 40px; }
  .counters { padding: 70px 0; }
}

/* --- Coverage / service-radius map --- */
.coverage {
  background: var(--ink-0);
  padding: 120px 0;
  position: relative;
  overflow: hidden;
}
.coverage::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 70% 50%, rgba(1,76,223,0.05) 0%, transparent 60%),
    radial-gradient(ellipse at 20% 80%, rgba(53,214,240,0.04) 0%, transparent 50%);
  pointer-events: none;
}
.coverage > .container { position: relative; z-index: 1; }
.coverage__map {
  margin-top: 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, var(--ink-1) 0%, var(--ink-2) 100%);
  padding: 32px 24px;
  overflow: hidden;
}
.coverage__map svg {
  width: 100%; height: auto;
  max-height: 720px;
}
.coverage__pin {
  filter: drop-shadow(0 0 6px rgba(1,76,223,0.85));
  transform-origin: center;
  animation: pin-pulse 2.6s ease-in-out infinite;
}
.coverage__pin:nth-of-type(2) { animation-delay: 0.3s; }
.coverage__pin:nth-of-type(3) { animation-delay: 0.6s; }
.coverage__pin:nth-of-type(4) { animation-delay: 0.9s; }
.coverage__pin-ring {
  animation: ring-expand 2.6s ease-out infinite;
  transform-origin: center;
}
@keyframes pin-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}
@keyframes ring-expand {
  0%   { r: 6; opacity: 0.7; }
  100% { r: 28; opacity: 0; }
}
.coverage__hq-ring {
  animation: hq-ring 3s ease-out infinite;
}
@keyframes hq-ring {
  0%   { r: 10; opacity: 0.9; stroke-width: 2; }
  100% { r: 45; opacity: 0; stroke-width: 1; }
}
.coverage__lines path {
  stroke-dasharray: 3 5;
  animation: line-flow 4s linear infinite;
}
@keyframes line-flow {
  to { stroke-dashoffset: -32; }
}
.coverage__legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px;
  margin-top: 28px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-mute);
}
.coverage__legend-item { display: inline-flex; align-items: center; gap: 8px; }
.legend-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.legend-dot--hq { background: var(--volt); box-shadow: 0 0 0 3px rgba(1,76,223,0.25); }
.legend-dot--pin { background: var(--volt); }
.legend-dot--zone {
  background: transparent;
  border: 1.5px dashed var(--volt);
  border-radius: 3px;
  width: 16px; height: 12px;
}

@media (max-width: 760px) {
  .coverage { padding: 80px 0; }
  .coverage__map { padding: 16px 8px; }
}

/* --- Featured fullscreen quote --- */
.featured-quote {
  background:
    radial-gradient(ellipse at center, rgba(1,76,223,0.04) 0%, transparent 60%),
    var(--ink-0);
  padding: 140px 0 100px;
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--line-soft);
}
.featured-quote__inner {
  text-align: center;
  max-width: 1100px;
  position: relative;
  z-index: 1;
}
.featured-quote__mark {
  color: var(--volt);
  opacity: 0.5;
  margin: 24px auto;
}
.featured-quote__text {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2.2rem, 5.5vw, 5rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--white);
  max-width: 1000px;
  margin: 0 auto 60px;
}
.featured-quote__pop {
  display: inline-block;
  font-style: italic;
  background: var(--grad-volt);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
  font-weight: 700;
  filter: drop-shadow(0 0 30px rgba(1,76,223,0.3));
}
.featured-quote__attribution {
  display: inline-flex;
  align-items: center;
  gap: 20px;
}
.featured-quote__attribution > div {
  display: flex; flex-direction: column;
  text-align: left;
}
.featured-quote__attribution strong {
  font-family: var(--display); font-size: 1.2rem; color: var(--white);
}
.featured-quote__attribution span {
  font-family: var(--mono); font-size: 11px; color: var(--text-mute);
  text-transform: uppercase; letter-spacing: 0.2em; margin-top: 4px;
}
.featured-quote__rule {
  display: inline-block;
  width: 48px; height: 2px;
  background: var(--volt);
}
.featured-quote__voltage {
  position: absolute;
  left: 0; right: 0; bottom: 40px;
  width: 100%; height: 60px;
  opacity: 0.5;
}
.featured-quote__voltage path {
  stroke-dasharray: 2200;
  animation: counter-volt-flow 10s linear infinite;
}

/* --- Supporting (mini) quote cards --- */
.quotes-supporting {
  padding: 0 0 100px;
  background: var(--ink-0);
}
.quotes-supporting__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  max-width: 1040px;
  margin: 0 auto;
}
.quote-card--mini {
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 24px;
}
.quote-card--mini blockquote {
  font-family: var(--display);
  font-size: 1.05rem;
  font-style: italic;
  color: var(--text);
  margin: 12px 0 20px;
  line-height: 1.45;
}
.quote-card--mini figcaption { display: flex; flex-direction: column; gap: 2px; }
.quote-card--mini figcaption strong { color: var(--white); font-size: 0.95rem; font-family: var(--display); }
.quote-card--mini figcaption span { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.15em; color: var(--text-mute); }

@media (max-width: 720px) {
  .quotes-supporting__grid { grid-template-columns: 1fr; }
}

/* --- Card spark hover effect (pillar, project, county, service-row photo) --- */
.pillar-card, .project-card, .county-card, .service-row__photo {
  position: relative;
}
.pillar-card::before,
.project-card::before,
.county-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--volt) 50%, transparent 100%);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.6s cubic-bezier(.2,.8,.2,1), opacity 0.3s ease;
  opacity: 0;
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(0 0 8px rgba(1,76,223,0.7));
}
.pillar-card:hover::before,
.project-card:hover::before,
.county-card:hover::before {
  transform: scaleX(1);
  opacity: 1;
}

/* --- Trust ribbon --- */
.trust-ribbon {
  background: var(--ink-1);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  padding: 28px 0;
}
.trust-ribbon__inner {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px;
}
.tr-item {
  display: flex; align-items: center; gap: 12px;
  color: var(--volt);
}
.tr-item > div { display: flex; flex-direction: column; line-height: 1.2; }
.tr-num { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--white); letter-spacing: 0.05em; }
.tr-sub { font-family: var(--mono); font-size: 10px; color: var(--text-mute); text-transform: uppercase; letter-spacing: 0.15em; margin-top: 2px; }

@media (max-width: 980px) {
  .trust-ribbon__inner { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}

/* --- Pillars --- */
.pillars { padding: 120px 0; }
.pillars__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.pillar-card {
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  color: var(--text);
  display: flex; flex-direction: column;
  transition: transform var(--t), border-color var(--t), box-shadow var(--t);
}
.pillar-card:hover {
  transform: translateY(-4px);
  border-color: var(--volt);
  box-shadow: 0 20px 40px -20px rgba(1,76,223,0.3);
}
.pillar-card__photo {
  aspect-ratio: 16/10;
  overflow: hidden;
  position: relative;
}
.pillar-card__photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5,6,8,0) 55%, rgba(5,6,8,0.55) 100%);
  pointer-events: none;
}
.pillar-card__photo img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s ease;
}
.pillar-card:hover .pillar-card__photo img { transform: scale(1.05); }
.pillar-card__body { padding: 28px; flex: 1; display: flex; flex-direction: column; }
.pillar-card__num {
  font-family: var(--mono); color: var(--volt); font-size: 14px;
  letter-spacing: 0.2em; margin-bottom: 14px;
}
.pillar-card__body h3 { margin-bottom: 12px; }
.pillar-card__body p { color: var(--text-mute); margin-bottom: 20px; flex: 1; }
.link-arrow {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--volt); font-family: var(--display); font-weight: 600; font-size: 14px;
  letter-spacing: 0.02em;
  transition: gap var(--t-fast);
}
.pillar-card:hover .link-arrow { gap: 12px; }

@media (max-width: 980px) {
  .pillars__grid { grid-template-columns: 1fr; }
  .pillars { padding: 80px 0; }
}

/* --- Story --- */
.story { padding: 120px 0; background: var(--ink-1); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.story__grid {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px;
  align-items: center;
}
.story__copy h2 { margin-bottom: 24px; }
.story__copy p { color: var(--text-mute); margin-bottom: 18px; font-size: 1.05rem; }
.story__copy .btn { margin-top: 12px; }
.story__photo {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.story__photo img { width: 100%; height: 100%; object-fit: cover; }
.story__stat {
  position: absolute; bottom: 28px; left: 28px; right: 28px;
  background: rgba(5,6,8,0.85);
  backdrop-filter: blur(20px);
  border: 1px solid var(--volt);
  border-radius: var(--radius);
  padding: 20px 24px;
  display: flex; flex-direction: column; gap: 4px;
}
.story__stat-num { font-family: var(--display); font-size: 2.2rem; font-weight: 700; color: var(--volt); line-height: 1; }
.story__stat-lbl { font-family: var(--mono); font-size: 12px; color: var(--text-mute); text-transform: uppercase; letter-spacing: 0.15em; }

@media (max-width: 980px) {
  .story__grid { grid-template-columns: 1fr; gap: 40px; }
  .story { padding: 80px 0; }
}

/* --- Quotes --- */
.quotes { padding: 120px 0; }
.quotes__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.quote-card {
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 36px 28px 28px;
  position: relative;
  color: var(--text);
}
.quote-card__mark {
  color: var(--volt);
  opacity: 0.4;
  margin-bottom: 14px;
}
.quote-card blockquote {
  font-family: var(--display);
  font-size: 1.2rem;
  line-height: 1.5;
  color: var(--white);
  margin-bottom: 28px;
  font-weight: 500;
  font-style: italic;
}
.quote-card figcaption { display: flex; flex-direction: column; gap: 2px; padding-top: 20px; border-top: 1px solid var(--line); }
.quote-card figcaption strong { font-family: var(--display); font-size: 1rem; color: var(--white); }
.quote-card figcaption span { font-family: var(--mono); font-size: 11px; color: var(--text-mute); text-transform: uppercase; letter-spacing: 0.15em; }

@media (max-width: 980px) {
  .quotes__grid { grid-template-columns: 1fr; }
  .quotes { padding: 80px 0; }
}

/* --- Emergency band --- */
.emergency-band {
  padding: 80px 0;
  background:
    radial-gradient(circle at 100% 0%, rgba(239,68,68,0.18) 0%, transparent 50%),
    linear-gradient(180deg, var(--ink-1) 0%, var(--ink-2) 100%);
  border-top: 1px solid rgba(239,68,68,0.3);
  border-bottom: 1px solid rgba(239,68,68,0.3);
}
.emergency-band__inner {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px;
  align-items: center;
}
.emergency-band__title { margin-bottom: 12px; }
.emergency-band p { color: var(--text-mute); max-width: 560px; }
.emergency-band__inner > a { justify-self: end; }

@media (max-width: 720px) {
  .emergency-band__inner { grid-template-columns: 1fr; }
  .emergency-band__inner > a { justify-self: start; }
}

/* --- CTA strip (between main + footer) --- */
.cta-strip {
  padding: 80px 0;
  background: var(--ink-1);
  border-top: 1px solid var(--line-soft);
}
.cta-strip__grid {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px;
  align-items: center;
}
.cta-strip__title { margin-bottom: 12px; }
.cta-strip__sub { color: var(--text-mute); }
.cta-strip__actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }

@media (max-width: 820px) {
  .cta-strip__grid { grid-template-columns: 1fr; }
  .cta-strip__actions { justify-content: flex-start; }
}

/* --- Footer --- */
.site-footer {
  background: var(--ink-0);
  border-top: 1px solid var(--line);
  color: var(--text-mute);
  padding: 80px 0 24px;
}
.footer-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
  gap: 56px;
  padding-bottom: 56px;
  border-bottom: 1px solid var(--line);
}
.footer-brand .brand { color: var(--volt); margin-bottom: 18px; }
.footer-tagline { color: var(--text-mute); margin-bottom: 24px; max-width: 360px; }
.footer-licenses { display: flex; flex-wrap: wrap; gap: 8px; }
.lic-chip {
  display: inline-flex; flex-direction: column;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  line-height: 1.2;
}
.lic-chip__num { font-family: var(--mono); font-size: 12px; color: var(--volt); font-weight: 600; letter-spacing: 0.05em; }
.lic-chip__type { font-family: var(--mono); font-size: 9px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.12em; margin-top: 2px; }

.footer-col h4 {
  font-family: var(--mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.2em; color: var(--text-dim); margin-bottom: 18px; font-weight: 500;
}
.footer-col a {
  display: block; color: var(--text-mute); padding: 4px 0; font-size: 14px;
}
.footer-col a:hover { color: var(--volt); }
.footer-col--contact .footer-phone {
  font-family: var(--display); font-weight: 700; font-size: 1.4rem;
  color: var(--volt); margin-bottom: 4px;
}
.footer-col--contact address {
  font-style: normal; font-size: 14px; color: var(--text-mute); margin-top: 16px;
}

.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 24px;
  font-family: var(--mono); font-size: 12px;
  color: var(--text-dim);
}

@media (max-width: 980px) {
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 40px; }
  .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
}
@media (max-width: 520px) {
  .footer-inner { grid-template-columns: 1fr; gap: 32px; }
}

/* --- Page hero (interior pages) — legacy fallback --- */
.page-hero {
  padding: calc(var(--header-h) + 60px) 0 80px;
  background:
    radial-gradient(ellipse at 80% 0%, rgba(1,76,223,0.08) 0%, transparent 50%),
    var(--ink-0);
  border-bottom: 1px solid var(--line-soft);
}
.page-hero h1 { max-width: 880px; margin-bottom: 20px; }
.page-hero__sub { max-width: 720px; font-size: 1.15rem; color: var(--text-mute); }

/* --- Editorial page hero (interior pages v2) --- */
.page-hero--editorial {
  position: relative;
  padding: 90px 0 100px;
  overflow: hidden;
  background: var(--ink-0);
  border-bottom: 1px solid var(--line-soft);
}
.page-hero__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(1,76,223,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(1,76,223,0.05) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%);
}
.page-hero__voltage {
  position: absolute;
  left: 0; right: 0; bottom: 28%;
  width: 100%; height: 180px;
  opacity: 0.55;
  filter: drop-shadow(0 0 12px rgba(1,76,223,0.4));
  pointer-events: none;
}
.page-hero__voltage path {
  stroke-dasharray: 3000;
  animation: counter-volt-flow 7s linear infinite;
}
.page-hero__inner { position: relative; z-index: 2; }
.page-hero__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(3.5rem, 11vw, 8rem);
  letter-spacing: -0.045em;
  line-height: 0.9;
  margin: 16px 0 28px;
  text-transform: uppercase;
}
.page-hero__title-line {
  display: block;
  position: relative;
  animation: title-rise 0.8s cubic-bezier(.2,.7,.2,1) backwards;
}
.page-hero__title-line--2 { animation-delay: 0.15s; padding-left: 0.35em; }
.page-hero__title-text {
  display: inline-block;
  color: var(--white);
  position: relative;
  z-index: 2;
}
.page-hero__title-line--2 .page-hero__title-text {
  background: var(--grad-volt);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 20px rgba(1,76,223,0.18));
}
.page-hero__ghost {
  position: absolute; top: 0; left: 0;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(1,76,223,0.16);
  z-index: 1;
  transform: translate(0.12em, 0.05em);
  pointer-events: none;
}
.page-hero__sub {
  max-width: 720px;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  color: var(--text-mute);
}

@media (max-width: 720px) {
  .page-hero--editorial { padding: 70px 0 80px; }
  .page-hero__title { font-size: clamp(3rem, 14vw, 5rem); }
  .page-hero__title-line--2 { padding-left: 0; }
  .page-hero__ghost { display: none; }
}

/* --- Interior marquee (smaller than hero marquee) --- */
.marquee--interior {
  padding: 12px 0;
  background: var(--volt);
  border-top: 2px solid var(--ink-0);
  border-bottom: 2px solid var(--ink-0);
}
.marquee--interior .marquee__track { animation-duration: 50s; }
.marquee--interior .marquee__group > span {
  font-size: clamp(1.3rem, 2.2vw, 1.9rem);
  padding: 0 18px;
}
.marquee--interior .marquee__sep { font-size: 1.3rem !important; }

/* --- Stats bands (projects, areas) --- */
.projects-stats, .areas-stats {
  background: var(--ink-1);
  padding: 70px 0;
  border-bottom: 1px solid var(--line-soft);
}
.projects-stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
@media (max-width: 820px) {
  .projects-stats__grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
}

/* --- Services list — giant background numbers --- */
.service-row__bg-num {
  position: absolute;
  top: 50%;
  right: 4%;
  transform: translateY(-50%);
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(10rem, 26vw, 22rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(1,76,223,0.10);
  z-index: 0;
  pointer-events: none;
  letter-spacing: -0.05em;
  user-select: none;
}
.service-row { position: relative; }
.service-row > *:not(.service-row__bg-num) { position: relative; z-index: 1; }
.service-row:nth-child(even) .service-row__bg-num { right: auto; left: 4%; }
@media (max-width: 880px) {
  .service-row__bg-num { font-size: clamp(8rem, 32vw, 14rem); right: -5%; opacity: 0.6; }
  .service-row:nth-child(even) .service-row__bg-num { left: -5%; }
}

/* --- Projects grid: uniform 3-col on desktop, 2-col tablet, 1-col mobile.
   All six cards are the same size. The first project gets a subtle yellow accent
   (border + corner badge) rather than spanning multiple cells, so nothing dominates. */
.projects-grid--asymmetric {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.projects-grid--asymmetric .project-card {
  display: flex;
  flex-direction: column;
}
.projects-grid--asymmetric .project-card__photo {
  aspect-ratio: 16/10;
  width: 100%;
  flex-shrink: 0;
}
.projects-grid--asymmetric .project-card__body {
  padding: 22px 22px 26px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.projects-grid--asymmetric .project-card__body h3 {
  font-size: clamp(1.1rem, 1.4vw, 1.3rem);
  margin: 12px 0 10px;
}
.projects-grid--asymmetric .project-card__body p {
  font-size: 0.92rem;
  flex: 1;
}

/* Featured marker — same dimensions, just an accent stripe + corner badge */
.projects-grid--asymmetric .project-card--featured {
  border-color: var(--volt);
  position: relative;
}
.projects-grid--asymmetric .project-card--featured::after {
  content: "FEATURED";
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 5px 10px;
  background: var(--volt);
  color: var(--ink-0);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  border-radius: var(--radius-sm);
  z-index: 2;
  box-shadow: 0 4px 14px -2px rgba(1,76,223,0.5);
}
.projects-grid--asymmetric .project-card--featured .link-arrow {
  margin-top: 12px;
}

@media (max-width: 980px) {
  .projects-grid--asymmetric { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .projects-grid--asymmetric { grid-template-columns: 1fr; gap: 18px; }
}

/* --- Timeline (about page) --- */
.timeline {
  background: var(--ink-1);
  padding: 100px 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.timeline__track {
  position: relative;
  margin-top: 48px;
}
.timeline__voltage {
  position: absolute;
  top: 50%; left: 0; right: 0;
  transform: translateY(-50%);
  width: 100%; height: 60px;
  opacity: 0.4;
  filter: drop-shadow(0 0 8px rgba(1,76,223,0.4));
  pointer-events: none;
}
.timeline__voltage path {
  stroke-dasharray: 2400;
  animation: counter-volt-flow 10s linear infinite;
}
.timeline__list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
  position: relative;
  z-index: 1;
}
.timeline__item {
  position: relative;
  padding-top: 36px;
  text-align: center;
}
.timeline__dot {
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--volt);
  box-shadow: 0 0 0 4px rgba(1,76,223,0.18), 0 0 12px rgba(1,76,223,0.6);
}
.timeline__item--current .timeline__dot {
  background: var(--arc);
  box-shadow: 0 0 0 4px rgba(53,214,240,0.18), 0 0 16px rgba(53,214,240,0.7);
  animation: pin-pulse 2.2s ease-in-out infinite;
}
.timeline__year {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  color: var(--volt);
  letter-spacing: -0.02em;
  margin-bottom: 8px;
  line-height: 1;
}
.timeline__item--current .timeline__year { color: var(--arc); }
.timeline__title {
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  margin-bottom: 8px;
  color: var(--white);
}
.timeline__item p {
  font-size: 0.88rem;
  color: var(--text-mute);
  line-height: 1.5;
}
@media (max-width: 980px) {
  .timeline__list { grid-template-columns: 1fr 1fr; }
  .timeline__voltage { display: none; }
}
@media (max-width: 560px) {
  .timeline__list { grid-template-columns: 1fr; }
  .timeline__item { text-align: left; padding-top: 0; padding-left: 32px; }
  .timeline__dot { top: 8px; left: 0; transform: none; }
}

/* --- Coverage variant for areas page --- */
.coverage--areas { padding: 80px 0; }

/* --- Contact phone band --- */
.contact-phone-band {
  background:
    radial-gradient(ellipse at 80% 50%, rgba(1,76,223,0.08) 0%, transparent 60%),
    var(--ink-1);
  padding: 80px 0;
  border-bottom: 1px solid var(--line-soft);
}
.contact-phone-band__inner {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 48px;
  align-items: center;
}
.contact-phone-band__left h2 {
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  margin-bottom: 16px;
}
.contact-phone-band__left p {
  color: var(--text-mute);
  max-width: 420px;
}
.contact-phone-band__big {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 36px 40px;
  background:
    linear-gradient(135deg, rgba(1,76,223,0.05), rgba(1,76,223,0.02)),
    var(--ink-0);
  border: 2px solid var(--volt);
  border-radius: var(--radius-lg);
  color: var(--white);
  position: relative;
  transition: transform var(--t), box-shadow var(--t);
}
.contact-phone-band__big:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 40px -10px rgba(1,76,223,0.35);
}
.contact-phone-band__pulse {
  position: absolute;
  top: 16px; right: 20px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #35D6F0;
  box-shadow: 0 0 0 0 rgba(53,214,240,0.7);
  animation: live-pulse 2s infinite;
}
.contact-phone-band__number {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.4rem, 5vw, 4rem);
  letter-spacing: -0.03em;
  color: var(--volt);
  line-height: 1;
}
.contact-phone-band__hint {
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--text-mute);
}
@media (max-width: 820px) {
  .contact-phone-band__inner { grid-template-columns: 1fr; gap: 28px; }
  .contact-phone-band__big { padding: 28px 24px; }
}

/* --- Services list --- */
.services-list { padding: 100px 0; }
.service-row {
  display: grid;
  grid-template-columns: 64px 1.1fr 1.4fr;
  gap: 40px;
  padding: 80px 0;
  border-top: 1px solid var(--line);
  align-items: center;
}
.service-row:first-child { border-top: none; padding-top: 0; }
.service-row:nth-child(even) {
  grid-template-columns: 64px 1.4fr 1.1fr;
}
.service-row:nth-child(even) .service-row__photo { order: 2; }
.service-row:nth-child(even) .service-row__copy { order: 1; }
.service-row:nth-child(even) .service-row__num { order: 0; }

.service-row__num {
  font-family: var(--display); font-weight: 700; font-size: 4rem;
  color: var(--volt); line-height: 1; letter-spacing: -0.04em;
  position: sticky; top: 100px;
}
.service-row__photo {
  aspect-ratio: 4/3;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.service-row__photo img { width: 100%; height: 100%; object-fit: cover; }
.service-row__copy h2 { margin-bottom: 16px; }
.service-row__lede { color: var(--text-mute); font-size: 1.05rem; margin-bottom: 24px; }
.check-list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; margin-bottom: 28px; }
.check-list li {
  position: relative; padding-left: 28px;
  font-size: 0.95rem; color: var(--text);
}
.check-list li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 16px; height: 8px;
  border-left: 2px solid var(--volt);
  border-bottom: 2px solid var(--volt);
  transform: rotate(-45deg);
}

@media (max-width: 880px) {
  .service-row, .service-row:nth-child(even) {
    grid-template-columns: 1fr; gap: 24px; padding: 60px 0;
  }
  .service-row:nth-child(even) .service-row__photo,
  .service-row:nth-child(even) .service-row__copy,
  .service-row:nth-child(even) .service-row__num { order: initial; }
  .service-row__num { position: static; font-size: 2.6rem; }
  .check-list { grid-template-columns: 1fr; }
}

/* --- Projects grid --- */
.projects-grid-section { padding: 80px 0 120px; }
.projects-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.project-card {
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--t), border-color var(--t);
}
.project-card:hover {
  transform: translateY(-4px);
  border-color: var(--volt);
}
.project-card__photo { aspect-ratio: 16/10; overflow: hidden; }
.project-card__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.project-card:hover .project-card__photo img { transform: scale(1.05); }
.project-card__body { padding: 24px; }
.project-card__body h3 { margin: 14px 0 12px; }
.project-card__body p { color: var(--text-mute); font-size: 0.95rem; }

.tag {
  display: inline-block;
  font-family: var(--mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.18em;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  background: rgba(1,76,223,0.12);
  color: var(--volt);
}
.tag--volt { background: rgba(1,76,223,0.12); color: var(--volt); }

@media (max-width: 980px) {
  .projects-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .projects-grid { grid-template-columns: 1fr; }
}

.why-band { padding: 80px 0 120px; background: var(--ink-1); border-top: 1px solid var(--line-soft); }
.why-band__inner { display: grid; grid-template-columns: 1fr 1.3fr; gap: 56px; align-items: start; }
.why-list { list-style: none; display: flex; flex-direction: column; gap: 20px; }
.why-list li {
  padding: 20px 24px;
  background: var(--ink-2);
  border-left: 3px solid var(--volt);
  border-radius: var(--radius-sm);
  color: var(--text-mute);
}
.why-list li strong { display: block; color: var(--white); margin-bottom: 4px; font-family: var(--display); }
@media (max-width: 820px) {
  .why-band__inner { grid-template-columns: 1fr; gap: 32px; }
}

/* --- Counties + cities --- */
.counties { padding: 80px 0 0; }
.counties__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.county-card {
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 36px;
  transition: border-color var(--t), transform var(--t);
}
.county-card:hover { border-color: var(--volt); transform: translateY(-3px); }
.county-card h2 { margin-bottom: 16px; font-size: clamp(1.6rem, 2.4vw, 2rem); }
.county-card p { color: var(--text-mute); margin-bottom: 22px; }

.cities { padding: 100px 0 120px; }
.cities__grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 28px;
}
.cities__grid li {
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  font-family: var(--display); font-weight: 500;
  color: var(--text);
  font-size: 0.95rem;
}
.cities__note { color: var(--text-mute); font-style: italic; }

@media (max-width: 980px) {
  .counties__grid { grid-template-columns: 1fr; }
  .cities__grid { grid-template-columns: repeat(2, 1fr); }
}

/* --- About --- */
.about-meet { padding: 80px 0; background: var(--ink-1); border-bottom: 1px solid var(--line-soft); }
.about-meet__grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 56px; align-items: center; }
.about-meet__photo {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.about-meet__photo img { width: 100%; height: 100%; object-fit: cover; }
.about-meet__badge {
  position: absolute; bottom: 24px; left: 24px;
  background: var(--volt);
  color: var(--ink-0);
  padding: 16px 22px;
  border-radius: var(--radius);
  display: flex; flex-direction: column; gap: 2px;
}
.about-meet__badge .num { font-family: var(--display); font-weight: 700; font-size: 1.8rem; line-height: 1; }
.about-meet__badge .lbl { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.15em; }

.about-meet__copy h2 { margin-bottom: 18px; }
.about-meet__copy .lede { color: var(--white); font-size: 1.15rem; margin-bottom: 16px; }
.about-meet__copy p { color: var(--text-mute); margin-bottom: 14px; }
.about-meet__stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  padding-top: 28px; margin-top: 28px;
  border-top: 1px solid var(--line);
}
.about-meet__stats > div { display: flex; flex-direction: column; gap: 4px; }
.about-meet__stats .num { font-family: var(--display); font-weight: 700; font-size: 1.8rem; color: var(--volt); }
.about-meet__stats .lbl { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.15em; color: var(--text-mute); }

@media (max-width: 980px) {
  .about-meet__grid { grid-template-columns: 1fr; gap: 40px; }
}

.values { padding: 100px 0; }
.values__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.values__grid article {
  padding: 36px;
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  border-top: 3px solid var(--volt);
}
.values__num { font-family: var(--mono); color: var(--volt); font-size: 13px; letter-spacing: 0.2em; margin-bottom: 14px; }
.values__grid h3 { margin-bottom: 12px; }
.values__grid p { color: var(--text-mute); }

@media (max-width: 720px) { .values__grid { grid-template-columns: 1fr; } }

.creds { padding: 80px 0 120px; }
.creds__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cred-card {
  padding: 28px; background: var(--ink-1);
  border: 1px solid var(--volt);
  border-radius: var(--radius);
  display: flex; flex-direction: column; gap: 6px;
}
.cred-card__num { font-family: var(--mono); font-weight: 600; font-size: 1.2rem; color: var(--volt); letter-spacing: 0.05em; }
.cred-card__type { font-family: var(--mono); font-size: 11px; color: var(--text-mute); text-transform: uppercase; letter-spacing: 0.15em; }

@media (max-width: 720px) { .creds__grid { grid-template-columns: 1fr; } }

/* --- Contact --- */
.contact { padding: 80px 0 120px; }
.contact__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 56px; }
.contact__form h2 { margin-bottom: 8px; }
.contact__form-sub { color: var(--text-mute); margin-bottom: 28px; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.contact__form label {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 16px;
}
.contact__form label span {
  font-family: var(--mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--text-mute);
}
.contact__form input,
.contact__form textarea,
.contact__form select {
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  font-family: var(--body); font-size: 15px;
  color: var(--white);
  transition: border-color var(--t-fast), background var(--t-fast);
}
.contact__form input:focus,
.contact__form textarea:focus,
.contact__form select:focus {
  border-color: var(--volt); outline: none;
  background: var(--ink-2);
}
.contact__form textarea { resize: vertical; }
.form-fineprint { font-size: 12px; color: var(--text-dim); margin-top: 16px; }

.contact__info { display: flex; flex-direction: column; gap: 28px; }
.contact-block {
  padding: 24px;
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.contact-block__big {
  display: block;
  font-family: var(--display); font-weight: 700;
  font-size: 1.6rem; color: var(--volt);
  margin: 4px 0;
}
.contact-block__alt {
  display: block; font-family: var(--mono); font-size: 14px; color: var(--text-mute);
}
.contact-block__note { font-size: 13px; color: var(--text-dim); margin-top: 8px; }
.contact-block__addr { font-style: normal; color: var(--text); margin: 4px 0; font-size: 15px; line-height: 1.5; }

@media (max-width: 980px) {
  .contact__grid { grid-template-columns: 1fr; }
}

/* --- 404 --- */
.four04 {
  min-height: 70vh;
  display: flex; align-items: center; justify-content: center;
  padding: 80px 0;
  background:
    radial-gradient(circle at 50% 30%, rgba(1,76,223,0.08) 0%, transparent 50%),
    var(--ink-0);
}
.four04__inner { text-align: center; max-width: 600px; }
.four04__bolt {
  margin: 0 auto 28px;
  filter: drop-shadow(0 0 24px rgba(1,76,223,0.5));
}
.four04__logo {
  display: block;
  margin: 0 auto 32px;
  width: 100%;
  max-width: 520px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 8px 40px rgba(1,76,223,0.25));
}
.four04 h1 { margin-bottom: 20px; }
.four04 p { color: var(--text-mute); margin-bottom: 28px; }
.four04__links { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 36px; }
.four04__phone { font-family: var(--mono); font-size: 15px; color: var(--text-mute); }
.four04__phone a { font-weight: 600; color: var(--volt); }

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ============ Option A — simplified, logo-forward homepage hero ============ */
.hero--simple{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  text-align:center;position:relative;overflow:hidden;background:var(--ink-0);
  padding:calc(var(--header-h) + 60px) 0 120px;
}
.hero--simple .hero__grid{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(to right,rgba(1,76,223,0.05) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(1,76,223,0.05) 1px,transparent 1px);
  background-size:80px 80px;
  mask-image:radial-gradient(ellipse 80% 70% at 50% 45%,rgba(0,0,0,.85),transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 45%,rgba(0,0,0,.85),transparent 80%);
}
.hero__inner--center{position:relative;z-index:4;max-width:900px;padding-left:24px;padding-right:24px;margin:0 auto;}
.hero__logo{
  width:min(560px,80vw);height:auto;display:block;margin:0 auto 34px;
  filter:drop-shadow(0 22px 60px rgba(0,0,0,.6));
  animation:title-rise .9s cubic-bezier(.2,.7,.2,1) backwards;
}
.hero--simple .hero__eyebrow{margin-bottom:22px;animation:title-rise .9s cubic-bezier(.2,.7,.2,1) .1s backwards;}
.hero__head{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:-.02em;line-height:.98;font-size:clamp(2.1rem,5vw,3.7rem);
  color:var(--white);margin:0 auto 20px;max-width:12ch;
  animation:title-rise .9s cubic-bezier(.2,.7,.2,1) .16s backwards;
}
.hero__head .accent{
  background:var(--grad-volt);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.hero__sub--center{margin-left:auto;margin-right:auto;max-width:580px;text-align:center;}
.hero__actions--center{justify-content:center;}
@media (max-width:720px){
  .hero--simple{min-height:88vh;padding:calc(var(--header-h) + 32px) 0 90px;}
  .hero__logo{width:min(420px,82vw);margin-bottom:26px;}
}

/* ==========================================================================
   EPPS additions — components that did not exist in the PLA baseline.
   Ordered after everything else so these win the cascade (see the dark-theme
   / header-fit note in the project build gotchas).
   ========================================================================== */

/* --- hero: business name kicker above the hook (one H1, name inside it) --- */
.hero__head { display: flex; flex-direction: column; gap: 14px; align-items: center; }
.hero__head-kicker {
  font-family: var(--mono);
  font-size: clamp(0.66rem, 1.5vw, 0.82rem);
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--volt);
}
.hero__head-hook { display: block; }
.hero__nap {
  margin-top: 26px;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  color: var(--text-dim);
}

/* --- breadcrumbs --- */
.crumbs { border-bottom: 1px solid var(--line-soft); background: var(--ink-1); }
.crumbs__list {
  list-style: none; display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px; padding: 14px 0; margin: 0;
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.06em;
}
.crumbs__list li { color: var(--text-dim); display: flex; align-items: center; gap: 8px; }
.crumbs__list li + li::before { content: '/'; color: var(--ink-4); }
.crumbs__list a { color: var(--text-mute); }
.crumbs__list a:hover { color: var(--volt); }
.crumbs__list [aria-current='page'] { color: var(--volt); }

/* --- seven-card service grid --- */
.pillars__grid--seven { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
@media (max-width: 720px) { .pillars__grid--seven { grid-template-columns: 1fr; } }

/* --- "signs you need an upgrade" --- */
.signs { padding: 100px 0; background: var(--ink-1); border-block: 1px solid var(--line); }
.signs__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px;
}
.sign-card {
  position: relative; padding: 30px 28px 28px;
  background: var(--ink-2); border: 1px solid var(--line);
  border-radius: var(--radius); border-left: 3px solid var(--volt);
}
.sign-card__num {
  display: block; font-family: var(--mono); font-size: 0.72rem;
  letter-spacing: 0.2em; color: var(--volt); margin-bottom: 12px;
}
.sign-card h3 { font-size: 1.15rem; margin-bottom: 10px; }
.sign-card p { color: var(--text-mute); font-size: 0.95rem; }
.signs__note { margin-top: 36px; text-align: center; color: var(--text-mute); }
.signs__note a { font-weight: 600; }

/* --- numbered process list --- */
.process { padding: 100px 0; }
.process__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.process-step {
  display: grid; grid-template-columns: 64px 1fr; gap: 24px; align-items: start;
  padding: 28px 0; border-top: 1px solid var(--line);
}
.process-step:last-child { border-bottom: 1px solid var(--line); }
.process-step__num {
  display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--volt-brand); color: #fff;
  font-family: var(--display); font-weight: 700; font-size: 1.1rem;
}
.process-step h3 { margin-bottom: 8px; }
.process-step p { color: var(--text-mute); max-width: 70ch; }
@media (max-width: 620px) {
  .process-step { grid-template-columns: 40px 1fr; gap: 16px; }
  .process-step__num { width: 36px; height: 36px; font-size: 0.9rem; }
}

/* --- FAQ (native disclosure, no JS) --- */
.faq { padding: 100px 0; background: var(--ink-1); border-block: 1px solid var(--line); }
.faq__list { max-width: 860px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 24px 0; cursor: pointer; list-style: none;
  font-family: var(--display); font-weight: 600; font-size: 1.08rem;
  color: var(--white); transition: color var(--t-fast);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--volt); }
.faq-item__mark {
  flex: none; position: relative; width: 18px; height: 18px;
}
.faq-item__mark::before,
.faq-item__mark::after {
  content: ''; position: absolute; inset: 50% 0 auto 0;
  height: 2px; background: var(--volt); transition: transform var(--t);
}
.faq-item__mark::after { transform: rotate(90deg); }
.faq-item[open] .faq-item__mark::after { transform: rotate(0deg); }
.faq-item__body { padding: 0 0 26px; max-width: 72ch; }
.faq-item__body p { color: var(--text-mute); }

/* --- reviews invitation (no invented testimonials) --- */
.reviews-invite { padding: 100px 0; }
.reviews-invite__inner {
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: start;
}
.reviews-invite h2 { margin-bottom: 18px; }
.reviews-invite p { color: var(--text-mute); margin-bottom: 14px; max-width: 56ch; }
.reviews-invite .btn { margin-top: 12px; }
.reviews-invite__promises { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.reviews-invite__promises li {
  padding: 22px 24px; background: var(--ink-1);
  border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--text-mute); font-size: 0.95rem;
}
.reviews-invite__promises strong { color: var(--white); display: block; margin-bottom: 4px; }
@media (max-width: 900px) { .reviews-invite__inner { grid-template-columns: 1fr; gap: 36px; } }

/* --- outbound resources --- */
.resources { padding: 100px 0; background: var(--ink-1); border-block: 1px solid var(--line); }
.resources__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px;
}
.resource-card a {
  display: block; height: 100%; padding: 30px 28px;
  background: var(--ink-2); border: 1px solid var(--line);
  border-radius: var(--radius); color: inherit;
  transition: border-color var(--t-fast), transform var(--t-fast);
}
.resource-card a:hover { border-color: var(--volt); transform: translateY(-2px); }
.resource-card h3 { font-size: 1.08rem; margin-bottom: 10px; }
.resource-card p { color: var(--text-mute); font-size: 0.93rem; margin-bottom: 16px; }

/* --- individual service pages --- */
.svc-hero { padding: 72px 0 80px; border-bottom: 1px solid var(--line); }
.svc-hero__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
.svc-hero__title { font-size: clamp(2.1rem, 4.4vw, 3.4rem); margin: 14px 0 20px; }
.svc-hero__lede { color: var(--text-mute); font-size: 1.06rem; max-width: 60ch; }
.svc-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.svc-hero__nap {
  margin-top: 24px; font-family: var(--mono); font-size: 0.76rem;
  letter-spacing: 0.04em; color: var(--text-dim);
}
.svc-hero__photo img {
  width: 100%; border-radius: var(--radius-lg);
  border: 1px solid var(--line); aspect-ratio: 4 / 3; object-fit: cover;
}
@media (max-width: 900px) { .svc-hero__grid { grid-template-columns: 1fr; gap: 36px; } }

.svc-body { padding: 90px 0; }
.svc-body__grid { display: grid; grid-template-columns: 1.4fr 0.6fr; gap: 64px; align-items: start; }
.svc-body__main h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin: 44px 0 18px; }
.svc-body__main h2:first-child { margin-top: 0; }
.svc-body__main p { color: var(--text-mute); max-width: 68ch; }
.svc-body__aside { position: sticky; top: 120px; display: grid; gap: 20px; }
.svc-cta-card {
  padding: 32px 30px; background: var(--ink-1);
  border: 1px solid var(--volt); border-radius: var(--radius-lg);
}
.svc-cta-card h2 { font-size: 1.4rem; margin: 10px 0 12px; }
.svc-cta-card p { color: var(--text-mute); font-size: 0.94rem; }
.svc-cta-card__phone {
  display: block; margin: 20px 0 4px;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.5rem, 2.4vw, 1.9rem); color: var(--volt);
}
.svc-cta-card__hours {
  font-family: var(--mono); font-size: 0.74rem;
  letter-spacing: 0.06em; color: var(--text-dim); margin-bottom: 20px;
}
.svc-related {
  padding: 30px 28px; background: var(--ink-1);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
}
.svc-related h2 { font-size: 1.05rem; margin-bottom: 16px; }
.svc-related__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.svc-related__list a {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 13px 0; border-top: 1px solid var(--line);
  color: var(--text-mute); font-size: 0.93rem;
}
.svc-related__list a:hover { color: var(--volt); }
@media (max-width: 980px) {
  .svc-body__grid { grid-template-columns: 1fr; gap: 44px; }
  .svc-body__aside { position: static; }
}

/* --- odds and ends --- */
.coverage__cta { margin-top: 32px; text-align: center; }
.work-note { margin-top: 40px; text-align: center; color: var(--text-mute); }
.contact-block__hours { color: var(--text); margin-bottom: 6px; }
.footer-hours {
  margin-top: 10px; font-family: var(--mono);
  font-size: 0.74rem; letter-spacing: 0.06em; color: var(--text-dim);
}
.footer-credit { color: var(--text-dim); text-decoration: underline; text-underline-offset: 3px; }
.footer-credit:hover { color: var(--volt); }
.cred { padding: 80px 0 110px; }
.cred__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cred__grid p { color: var(--text-mute); font-size: 0.95rem; }
@media (max-width: 860px) { .cred__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cred__grid { grid-template-columns: 1fr; } }
.check-list li { font-size: 0.96rem; }
@media (max-width: 760px) { .check-list { grid-template-columns: 1fr; } }

/* --- logo sizing -----------------------------------------------------------
   Two lockups: a horizontal one for the header/footer/drawer, and the stacked
   mark for the hero. The stacked mark is portrait (881x300 vs 902x1058), so it
   has to be capped by HEIGHT in the hero or it eats the entire first fold. */
.brand-logo { height: 40px; filter: drop-shadow(0 4px 18px rgba(1,76,223,0.22)); }
.brand-logo--footer { height: 52px; }
@media (max-width: 620px) { .brand-logo { height: 32px; } }

.hero__logo {
  width: auto;
  height: clamp(150px, 24vh, 230px);
  margin: 0 auto 26px;
}
.hero--simple { min-height: auto; padding: calc(var(--header-h) + 56px) 0 96px; }
.hero__head { max-width: 20ch; }
.hero__head-hook { max-width: 14ch; margin: 0 auto; }

/* --- header brand: mark + typeset name ------------------------------------ */
.brand--logo { display: inline-flex; align-items: center; gap: 11px; }
.brand-mark {
  height: 42px; width: auto; flex: none;
  filter: drop-shadow(0 4px 16px rgba(1,76,223,0.28));
}
.brand-words { display: flex; flex-direction: column; line-height: 1; }
.brand-words__l1 {
  font-family: var(--display); font-weight: 700;
  font-size: 1.02rem; letter-spacing: -0.01em; color: var(--white);
  text-transform: uppercase;
}
.brand-words__l1 em { font-style: normal; color: var(--volt); }
.brand-words__l2 {
  font-family: var(--mono); font-size: 0.6rem; font-weight: 500;
  letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--text-dim); margin-top: 5px;
}
.m-drawer__brand { display: inline-flex; align-items: center; gap: 12px; }
.m-drawer__brand .brand-mark { height: 46px; }
@media (max-width: 620px) {
  .brand-mark { height: 34px; }
  .brand-words__l1 { font-size: 0.86rem; }
  .brand-words__l2 { font-size: 0.52rem; letter-spacing: 0.28em; }
}
/* footer keeps the full horizontal lockup — there is room for it there */
.brand-logo--footer { height: 62px; }
.coverage__map svg { max-width: 900px; margin: 0 auto; }

/* --- header phone (moved out of the utility bar into the nav) -------------- */
.util-hours {
  font-family: var(--mono); font-size: 0.72rem;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.header-phone {
  display: inline-flex; align-items: center; gap: 8px;
  margin-left: auto; padding: 9px 16px 9px 13px;
  border: 1.5px solid rgba(77,141,255,0.35); border-radius: 999px;
  color: var(--white); font-family: var(--display); font-weight: 700;
  font-size: 1.02rem; letter-spacing: -0.01em; white-space: nowrap;
  transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.header-phone svg { color: var(--volt); flex: none; }
.header-phone:hover {
  color: var(--white); border-color: var(--volt);
  background: rgba(1,76,223,0.14);
}
.header-cta { margin-left: 14px; }
/* The nav already pushes right; don't let the phone double up on auto margins. */
.primary-nav { margin-left: auto; }
@media (max-width: 1180px) {
  .header-phone__num { display: none; }
  .header-phone { padding: 9px 11px; }
}
@media (max-width: 1120px) {
  .header-phone__num { display: inline; }   /* room again once the nav is gone */
}
@media (max-width: 760px) {
  .header-cta { display: none; }
}
@media (max-width: 560px) {
  .header-phone__num { font-size: 0.9rem; }
  .util-hours { display: none; }
}

/* Archivo runs a little wider than Space Grotesk — pull the display tracking in. */
h1, h2, h3, h4, h5 { letter-spacing: -0.025em; }
.hero__head { letter-spacing: -0.03em; }

/* Archivo sets wider than Space Grotesk did, so the header needs more room:
   nothing in the top bar is allowed to wrap onto a second line. */
.header-inner { gap: 20px; }
.nav-link { white-space: nowrap; padding: 10px 11px; font-size: 14.5px; }
.brand-words__l1 { white-space: nowrap; }
.brand--logo { flex: none; }
@media (max-width: 1320px) {
  .nav-link { padding: 10px 8px; font-size: 14px; }
  .header-inner { gap: 14px; }
}
@media (max-width: 1120px) {
  .primary-nav { display: none; }   /* drawer takes over earlier now */
  .m-toggle { display: inline-flex; }
}

/* --- small screens: the phone number stays, everything else yields ---------
   Marc's call — the number is the point of the header, so on narrow screens we
   drop the wordmark to the bare house mark and hide the utility strip (which
   was rendering as a lone pulse dot) rather than shrink the number. */
@media (max-width: 620px) {
  .brand-words { display: none; }
  .brand--logo { gap: 0; }
  .header-inner { gap: 12px; padding: 0 16px; }
  .header-phone { margin-left: auto; padding: 8px 14px 8px 11px; }
  .header-phone__num { font-size: 0.98rem; }
}
@media (max-width: 560px) {
  .utility-bar { display: none; }
  :root { --util-h: 0px; }
}

/* --- map on small screens --------------------------------------------------
   The SVG scales uniformly, so at 390px the town labels shrink to an illegible
   smudge. Below 900px it becomes a horizontal scroller with a floor width that
   keeps the type readable, and the user pans instead. */
.coverage__hint { display: none; }
@media (max-width: 900px) {
  .coverage__map {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    border-radius: var(--radius);
  }
  .coverage__map svg { min-width: 760px; max-width: none; }
  .coverage__hint {
    display: block;
    margin-top: 12px;
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-dim);
    text-align: center;
  }
  .coverage__legend { margin-top: 14px; }
}

/* --- overflow safety -------------------------------------------------------
   Grid and flex items default to min-width:auto, so an intrinsically wide child
   refuses to shrink and pushes the whole page wider than the viewport. On the
   contact page the culprit was the <select> — its min-content width is set by
   its longest <option> ("New circuit / outlets / switches / lighting"), which
   forced .contact__form and .contact__info to 420px inside a 375px screen. */
.contact__grid > *,
.contact__form,
.contact__info,
.svc-body__grid > *,
.story__grid > *,
.reviews-invite__inner > *,
.cta-strip__grid > *,
.emergency-band__inner > *,
.contact-phone-band__inner > * { min-width: 0; }

.contact__form input,
.contact__form select,
.contact__form textarea { width: 100%; max-width: 100%; }

/* Long option text must not dictate the control's width. */
.contact__form select { text-overflow: ellipsis; }

/* --- outer counties block (areas page) ------------------------------------ */
.outer-counties {
  margin-top: 64px; padding-top: 56px;
  border-top: 1px solid var(--line);
}
.outer-counties h2 { margin: 10px 0 14px; font-size: clamp(1.5rem, 2.6vw, 2rem); }
.outer-counties__lede { color: var(--text-mute); max-width: 62ch; margin-bottom: 34px; }
.outer-counties__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px;
}
.outer-counties__grid li {
  min-width: 0;
  padding: 22px 24px; background: var(--ink-1);
  border: 1px solid var(--line); border-radius: var(--radius);
  border-left: 3px solid var(--arc);
}
.outer-counties__grid strong {
  display: block; font-family: var(--display); font-weight: 700;
  font-size: 1.06rem; color: var(--white); margin-bottom: 6px;
}
.outer-counties__grid span { color: var(--text-mute); font-size: 0.92rem; }