/* =========================================================
   Ferguson Plumbing, Heating & Electrical — Design System
   ========================================================= */

:root {
  /* Brand palette */
  --navy-950: #0a1f33;
  --navy-900: #0d2a44;
  --navy-800: #123a5c;
  --navy-700: #1a4d78;
  --navy-100: #e7eef5;

  --accent-700: #0369a1;
  --accent-600: #0284c7;
  --accent-500: #0ea5e9;
  --accent-400: #38bdf8;
  --accent-100: #e0f4fd;

  --teal-700: #0e7490;
  --teal-600: #0f8a9e;
  --teal-500: #14a3ba;
  --teal-100: #e0f5f8;

  --blue-600: #2f6fed;
  --blue-100: #e4edfb;

  --green-600: #1c8a5a;
  --green-100: #dcf3e7;

  --purple-600: #7c3aed;
  --purple-100: #efe9fd;

  --gold-600: #b7791f;
  --gold-100: #fdf3d0;

  --red-600: #d1403a;
  --red-100: #fbe2e0;

  /* Generac brand colors — used only to theme the generator sizing
     calculator, matching the Generac logo we display alongside it. */
  --generac-orange: #ea6a20;
  --generac-black: #17140f;

  --ink-900: #14181f;
  --ink-700: #3a4250;
  --ink-500: #667085;
  --ink-300: #98a2b3;
  --ink-100: #eef0f3;

  --surface-0: #ffffff;
  --surface-50: #f7f8fa;
  --surface-100: #f0f2f5;

  --success: #1c8a5a;
  --danger: #d1403a;

  /* Type */
  --font-head: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;
  --font-serif: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;

  /* Effects */
  --shadow-sm: 0 1px 2px rgba(10, 31, 51, 0.06), 0 1px 3px rgba(10, 31, 51, 0.08);
  --shadow-md: 0 4px 10px rgba(10, 31, 51, 0.08), 0 2px 4px rgba(10, 31, 51, 0.06);
  --shadow-lg: 0 20px 40px -12px rgba(10, 31, 51, 0.25);
  --shadow-glow: 0 8px 30px rgba(14, 165, 233, 0.35);

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --container: 1200px;

  /* ---------- Liquid Glass surfaces (iOS / macOS style) ---------- */
  --glass-blur: blur(22px) saturate(180%);
  --glass-blur-soft: blur(14px) saturate(160%);
  --glass-blur-strong: blur(28px) saturate(190%);

  --glass-light: rgba(255, 255, 255, 0.55);
  --glass-light-strong: rgba(255, 255, 255, 0.78);
  --glass-light-tint: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.6));
  --glass-border-light: rgba(255, 255, 255, 0.65);
  --glass-highlight: inset 0 1px 0 rgba(255,255,255,0.7);

  --glass-navy: rgba(13, 42, 68, 0.55);
  --glass-navy-strong: rgba(10, 31, 51, 0.72);
  --glass-navy-tint: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.03));
  --glass-border-navy: rgba(255, 255, 255, 0.18);
  --glass-highlight-navy: inset 0 1px 0 rgba(255,255,255,0.16);

  --glass-shadow: var(--glass-highlight), 0 8px 32px rgba(10,31,51,0.14);
  --glass-shadow-lg: var(--glass-highlight), 0 20px 50px rgba(10,31,51,0.2);
  --glass-shadow-navy: var(--glass-highlight-navy), 0 8px 30px rgba(0,0,0,0.28);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* ---------- Accessibility ---------- */
.skip-link {
  position: absolute;
  top: -60px;
  left: 12px;
  z-index: 1000;
  background: var(--navy-950);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  transition: top .15s ease;
}
.skip-link:focus {
  top: 12px;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--teal-500);
  outline-offset: 2px;
  border-radius: 4px;
}
.btn:focus-visible {
  outline-offset: 3px;
}

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal-in {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--ink-900);
  background: var(--surface-0);
  -webkit-font-smoothing: antialiased;
  line-height: 1.68;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--navy-950);
  line-height: 1.15;
  margin: 0 0 .5em;
  letter-spacing: -0.01em;
}
p { margin: 0 0 1em; color: var(--ink-700); }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: 1rem; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}

.section { padding: 88px 0; }
.section--tight { padding: 56px 0; }
.section--alt { background: var(--surface-50); }
.section--navy {
  background: linear-gradient(160deg, var(--navy-950), var(--navy-800) 70%);
  color: #fff;
}
.section--navy h2, .section--navy h3, .section--navy h4 { color: #fff; }
.section--navy p { color: rgba(255,255,255,0.75); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-700);
  margin-bottom: 14px;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--accent-500);
  display: inline-block;
}
.section--navy .eyebrow { color: var(--accent-400); }

.section-head { max-width: 640px; margin-bottom: 48px; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head h2 { font-family: var(--font-serif); font-weight: 600; letter-spacing: -0.01em; font-size: clamp(1.9rem, 3.2vw, 2.7rem); }
.section-head p { font-size: 1.18rem; line-height: 1.65; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 28px;
  border-radius: var(--radius-pill);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.98rem;
  border: 2px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-primary {
  background: linear-gradient(135deg, var(--accent-500), var(--accent-600));
  color: #fff;
  box-shadow: var(--glass-highlight), var(--shadow-glow);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--glass-highlight), 0 12px 34px rgba(14, 165, 233,0.45); }
.btn-blue {
  background: linear-gradient(135deg, #2f6fed, #1d54c4);
  color: #fff;
  box-shadow: var(--glass-highlight), 0 8px 24px rgba(47,111,237,0.35);
}
.btn-blue:hover { transform: translateY(-2px); box-shadow: var(--glass-highlight), 0 12px 34px rgba(47,111,237,0.45); }
.btn-purple {
  background: linear-gradient(135deg, #8b5cf6, #6d28d9);
  color: #fff;
  box-shadow: var(--glass-highlight), 0 8px 24px rgba(109,40,217,0.35);
}
.btn-purple:hover { transform: translateY(-2px); box-shadow: var(--glass-highlight), 0 12px 34px rgba(109,40,217,0.45); }
.btn-outline {
  background: rgba(255,255,255,0.12);
  backdrop-filter: var(--glass-blur-soft);
  -webkit-backdrop-filter: var(--glass-blur-soft);
  border-color: rgba(255,255,255,0.4);
  color: #fff;
  box-shadow: var(--glass-highlight-navy);
}
.btn-outline:hover { border-color: #fff; background: rgba(255,255,255,0.24); }
.btn-navy {
  background: linear-gradient(180deg, var(--navy-800), var(--navy-900));
  color: #fff;
  box-shadow: var(--glass-highlight-navy);
}
.btn-navy:hover { background: linear-gradient(180deg, var(--navy-700), var(--navy-800)); transform: translateY(-2px); }
.btn-ghost {
  background: var(--glass-light);
  backdrop-filter: var(--glass-blur-soft);
  -webkit-backdrop-filter: var(--glass-blur-soft);
  border-color: var(--glass-border-light);
  color: var(--navy-950);
  box-shadow: var(--glass-highlight);
}
.btn-ghost:hover { background: rgba(255,255,255,0.72); }
.btn-block { width: 100%; }
.btn-sm { padding: 10px 20px; font-size: 0.88rem; }

/* ---------- Top utility bar ---------- */
.topbar {
  background: var(--navy-950);
  color: rgba(255,255,255,0.85);
  font-size: 0.85rem;
}
.topbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 9px;
}
.topbar-left { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.topbar-item { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.topbar-item svg { width: 14px; height: 14px; color: var(--accent-400); flex: none; }
.topbar-badge {
  background: var(--accent-500);
  color: var(--navy-950);
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.topbar-social { display: flex; gap: 10px; }
.topbar-social a {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.08);
  border-radius: 50%;
  transition: background .15s ease;
}
.topbar-social a:hover { background: var(--accent-500); }
.topbar-social svg { width: 13px; height: 13px; }
.topbar-right { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

/* ---------- "We're Hiring" CTA badge ---------- */
.hiring-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 16px;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, #fde047, #f59e0b);
  color: var(--navy-950);
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(245, 158, 11, 0.4);
  transition: transform .15s ease, box-shadow .15s ease;
  overflow: hidden;
}
.hiring-badge svg { width: 14px; height: 14px; flex: none; }
.hiring-badge:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(245, 158, 11, 0.55); color: var(--navy-950); }
.google-topbar .hiring-badge { font-size: 0.82rem; }

/* Periodic left-to-right shine sweep across the badge */
.hiring-badge::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 45%;
  height: 100%;
  background: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.85) 50%, transparent 100%);
  transform: skewX(-18deg);
  animation: hiring-badge-shine 3.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes hiring-badge-shine {
  0% { left: -75%; }
  30% { left: 130%; }
  100% { left: 130%; }
}
@media (prefers-reduced-motion: reduce) {
  .hiring-badge::after { animation: none; display: none; }
}

/* ---------- Header / nav ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.62);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid rgba(255,255,255,0.5);
  border-top: 4px solid var(--teal-500);
  box-shadow: var(--glass-highlight);
  transition: box-shadow .2s ease, background .2s ease;
}
.header.is-scrolled { background: rgba(255,255,255,0.78); box-shadow: var(--glass-highlight), var(--shadow-md); }
.header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-block: 14px;
  flex-wrap: nowrap;
  max-width: 1340px;
}
.brand { display: flex; align-items: center; gap: 12px; flex: none; }
.brand-mark {
  width: 46px; height: 46px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--navy-800), var(--navy-950));
  display: grid; place-items: center;
  color: var(--accent-400);
  flex: none;
}
.brand-mark svg { width: 26px; height: 26px; }
.brand-text { line-height: 1.2; }
.brand-text strong {
  display: block;
  font-family: var(--font-head);
  font-size: 1.12rem;
  color: var(--navy-950);
  white-space: nowrap;
}
.brand-text span {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent-600);
  font-weight: 700;
  white-space: nowrap;
}

.brand-logo {
  height: 42px;
  width: auto;
  display: block;
}
.header .brand-logo { height: 40px; }
.footer .brand-logo {
  height: 46px;
  background: #fff;
  padding: 14px 20px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}
.mobile-drawer .brand-logo { height: 34px; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: none;
}
.nav-links a {
  padding: 9px 10px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 0.87rem;
  color: var(--ink-700);
  position: relative;
  white-space: nowrap;
  border: 1.5px solid transparent;
}
.nav-links a:hover {
  color: var(--navy-950);
  background: rgba(255,255,255,0.65);
  backdrop-filter: blur(8px) saturate(160%);
  -webkit-backdrop-filter: blur(8px) saturate(160%);
  border-color: rgba(14,165,233,0.45);
}
.nav-links a:focus-visible { color: var(--navy-950); border-color: var(--accent-500); outline: none; }
.nav-links a.is-active {
  color: var(--navy-950);
  background: rgba(14,165,233,0.14);
  backdrop-filter: blur(8px) saturate(160%);
  -webkit-backdrop-filter: blur(8px) saturate(160%);
  border-color: rgba(14,165,233,0.3);
}

.header-cta { display: flex; align-items: center; gap: 12px; flex: none; }
.header-phone {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--navy-950);
  white-space: nowrap;
}
.header-phone .icon-circle {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--accent-100);
  color: var(--accent-600);
  display: grid; place-items: center;
  flex: none;
}
.header-phone .icon-circle svg { width: 18px; height: 18px; }
.header-phone small {
  display: block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.72rem;
  color: var(--ink-500);
  white-space: nowrap;
}
.header-phone-text { white-space: nowrap; }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  border-radius: 12px;
  border: 1px solid var(--glass-border-light);
  background: var(--glass-light);
  backdrop-filter: var(--glass-blur-soft);
  -webkit-backdrop-filter: var(--glass-blur-soft);
  box-shadow: var(--glass-shadow);
  align-items: center;
  justify-content: center;
}
.nav-toggle svg { width: 20px; height: 20px; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 92vh;
  display: flex;
  align-items: center;
  background:
    linear-gradient(190deg, rgba(9,26,43,0.78) 0%, rgba(10,31,51,0.88) 55%, rgba(10,31,51,0.97) 100%),
    radial-gradient(1400px 700px at 82% 5%, rgba(20,163,186,0.32), transparent 60%),
    linear-gradient(150deg, var(--navy-950) 0%, var(--navy-800) 55%, var(--navy-700) 100%);
  color: #fff;
  padding: 150px 0 110px;
  text-align: center;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background-image: repeating-linear-gradient(115deg, rgba(255,255,255,0.045) 0 2px, transparent 2px 22px);
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 15% 20%, rgba(255,255,255,0.06) 0, transparent 40%);
  pointer-events: none;
}
.hero#top {
  background-image:
    linear-gradient(190deg, rgba(9,26,43,0.7) 0%, rgba(10,31,51,0.82) 55%, rgba(10,31,51,0.95) 100%),
    radial-gradient(1400px 700px at 82% 5%, rgba(20,163,186,0.28), transparent 60%),
    url('../img/photos/van.jpg');
  background-size: cover, cover, cover;
  background-position: center, center, center 35%;
}
.hero .container {
  position: relative;
  max-width: 780px;
}
.hero-copy { margin-inline: auto; }
.hero-badge { margin-inline: auto; }
.hero-lead { margin-inline: auto; }
.hero-actions { justify-content: center; }
.hero-stats { justify-content: center; }
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 22px;
}
.hero-badge svg { width: 16px; height: 16px; color: var(--accent-400); }
.hero h1 {
  color: #fff;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(2.6rem, 5vw, 4.2rem);
  letter-spacing: -0.01em;
  margin-bottom: 22px;
}
.hero h1 em {
  font-style: italic;
  color: var(--accent-400);
}
.hero-lead {
  font-size: 1.28rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.82);
  max-width: 560px;
  margin-bottom: 34px;
}
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 40px; }
.hero-stats {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
}
.hero-stat strong {
  display: block;
  font-family: var(--font-head);
  font-size: 1.7rem;
  color: #fff;
}
.hero-stat span {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.65);
}

/* Photo placeholder frame — used everywhere a real photo will eventually go */
.photo-frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(135deg, var(--navy-800), var(--navy-700));
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.85);
  text-align: center;
  isolation: isolate;
}
.photo-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 14px);
  z-index: 0;
}
.photo-frame-inner {
  position: relative;
  z-index: 1;
  padding: 28px;
  max-width: 280px;
}
.photo-frame-inner .icon-circle {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.25);
  display: grid; place-items: center;
  margin: 0 auto 14px;
}
.photo-frame-inner .icon-circle svg { width: 26px; height: 26px; color: var(--accent-400); }
.photo-frame-inner strong {
  display: block;
  font-family: var(--font-head);
  font-size: 0.95rem;
  color: #fff;
  margin-bottom: 4px;
}
.photo-frame-inner span {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.6);
  display: block;
}
.photo-frame.light {
  background: linear-gradient(135deg, var(--surface-100), var(--ink-100));
  color: var(--ink-500);
}
.photo-frame.light .icon-circle { background: #fff; border-color: var(--ink-100); box-shadow: var(--shadow-sm); }
.photo-frame.light .icon-circle svg { color: var(--accent-600); }
.photo-frame.light .photo-frame-inner strong { color: var(--navy-950); }
.photo-frame.light::before { background: repeating-linear-gradient(135deg, rgba(10,31,51,0.04) 0 2px, transparent 2px 14px); }

/* Real Google Maps embed — same rounded/shadow footprint as .photo-frame */
.map-embed {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
/* Static stylized map card — used only where a live map iframe can't load
   (e.g. inside the sandboxed artifact preview); shows a location card with
   a real "Get Directions" link instead of a dead embed. */
.map-embed--static svg { width: 100%; height: 100%; display: block; }
.map-embed-label {
  position: absolute;
  left: 14px; right: 14px; bottom: 14px;
  background: rgba(255,255,255,0.94);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.map-embed-label strong { font-family: var(--font-head); font-size: 0.92rem; color: var(--navy-950); }
.map-embed-label span { font-size: 0.82rem; color: var(--ink-700); }
.map-embed-directions {
  position: absolute;
  top: 14px; right: 14px;
  background: var(--navy-950);
  color: #fff;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  font-size: 0.82rem;
  font-weight: 700;
  box-shadow: var(--shadow-sm);
  text-decoration: none;
}
.map-embed-directions:hover { background: var(--navy-800); }

/* Real photo container — same footprint as .photo-frame, used once a real image is in place */
/* Keep <picture> (added for WebP + fallback) fully transparent to layout,
   so wrapping an existing <img> in it never changes how it's sized. */
picture { display: contents; }

.photo-real {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  aspect-ratio: 4/3.1;
}
.photo-real img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.split-media .photo-real { aspect-ratio: 4/3.1; }

/* Photo expand badge + lightbox — click any real photo to view it larger */
.photo-real { cursor: zoom-in; }
.photo-real img { transition: transform 0.5s ease; }
.photo-real:hover img { transform: scale(1.04); }
.photo-real .photo-badge {
  position: absolute;
  bottom: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(10, 31, 51, 0.72);
  border: 2px solid rgba(255, 255, 255, 0.85);
  display: grid;
  place-items: center;
  color: var(--accent-400);
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
  z-index: 1;
}
.photo-real .photo-badge svg { width: 18px; height: 18px; }
.photo-real:hover .photo-badge,
.photo-real:focus-visible .photo-badge {
  transform: scale(1.12);
  background: var(--accent-600);
  color: var(--navy-950);
}
/* Toast confirming a phone number was copied (see script.js) */
.call-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(16px);
  background: var(--navy-950);
  color: #fff;
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 0.92rem;
  text-align: center;
  max-width: min(92vw, 380px);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 1000;
}
.call-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .call-toast { transition: none; }
}

.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 31, 51, 0.92);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 999;
  padding: 32px;
}
.lightbox-overlay.is-open { display: flex; }
.lightbox-overlay img {
  max-width: min(920px, 92vw);
  max-height: 88vh;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.lightbox-close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: var(--glass-blur-soft);
  -webkit-backdrop-filter: var(--glass-blur-soft);
  border: 1px solid rgba(255, 255, 255, 0.32);
  box-shadow: var(--glass-highlight-navy);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 0.2s ease;
}
.lightbox-close:hover { background: rgba(255, 255, 255, 0.26); }
@media (prefers-reduced-motion: reduce) {
  .photo-real img,
  .photo-real .photo-badge { transition: none; }
  .photo-real:hover img { transform: none; }
  .photo-real:hover .photo-badge,
  .photo-real:focus-visible .photo-badge { transform: none; }
}

/* ---------- Partner callout banner (e.g. Lennox dealer) ---------- */
.partner-banner {
  background: linear-gradient(120deg, var(--navy-900), var(--navy-800));
  border-radius: var(--radius-lg);
  padding: 40px 48px;
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
  box-shadow: var(--shadow-md);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.partner-badge {
  flex-shrink: 0;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 2px solid var(--accent-500);
  display: grid;
  place-items: center;
  text-align: center;
}
.partner-badge span {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 0.98rem;
  letter-spacing: 0.04em;
  color: var(--accent-400);
}
.partner-badge img {
  width: 76%;
  height: auto;
  display: block;
}
.partner-banner h3 { color: #fff; font-size: 1.5rem; margin-bottom: 8px; }
.partner-banner p { color: rgba(255, 255, 255, 0.75); font-size: 1.02rem; line-height: 1.6; margin: 0; max-width: 520px; }
@media (max-width: 640px) {
  .partner-banner { padding: 32px 24px; text-align: center; justify-content: center; }
  .partner-banner p { margin-inline: auto; }
}

.hero-visual { position: relative; }
.hero-visual .photo-frame { aspect-ratio: 4/5; box-shadow: var(--shadow-lg); }
.hero-visual .float-card {
  position: absolute;
  bottom: -22px;
  left: -22px;
  background: var(--glass-light-strong);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  color: var(--ink-900);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  border: 1px solid var(--glass-border-light);
  box-shadow: var(--glass-shadow-lg);
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 250px;
}
.hero-visual .float-card .icon-circle {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--teal-100);
  color: var(--teal-600);
  display: grid; place-items: center;
  flex: none;
}
.hero-visual .float-card .icon-circle svg { width: 20px; height: 20px; }
.hero-visual .float-card strong { display: block; font-family: var(--font-head); font-size: 0.95rem; }
.hero-visual .float-card span { font-size: 0.78rem; color: var(--ink-500); }

/* ---------- Trust strip ---------- */
.trust-strip {
  background: var(--surface-50);
  border-bottom: 1px solid var(--ink-100);
  padding-block: 26px;
}
.trust-strip .container {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  align-items: center;
  justify-content: space-between;
}
.trust-item { display: flex; align-items: center; gap: 10px; font-size: 0.98rem; font-weight: 600; color: var(--ink-700); }
.trust-item svg { width: 20px; height: 20px; color: var(--accent-600); flex: none; }

/* ---------- Service cards ---------- */
.grid { display: grid; gap: 28px; }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

.card {
  background: var(--glass-light-tint);
  backdrop-filter: var(--glass-blur-soft);
  -webkit-backdrop-filter: var(--glass-blur-soft);
  border: 1px solid var(--glass-border-light);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--glass-shadow);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--glass-highlight), var(--shadow-md); border-color: rgba(255,255,255,0.85); }

.service-card .icon-circle {
  width: 62px; height: 62px;
  border-radius: 16px;
  background: var(--accent-100);
  color: var(--accent-600);
  display: grid; place-items: center;
  margin-bottom: 20px;
}
.service-card .icon-circle svg { width: 29px; height: 29px; }

/* Colored icon-badge tints — each service card gets its own accent so the
   grid reads as a friendly, varied set rather than one repeated icon. */
.service-card .icon-circle.icon-tint-blue   { background: var(--blue-100);   color: var(--blue-600); }
.service-card .icon-circle.icon-tint-green  { background: var(--green-100);  color: var(--green-600); }
.service-card .icon-circle.icon-tint-sky { background: var(--accent-100);  color: var(--accent-600); }
.service-card .icon-circle.icon-tint-purple { background: var(--purple-100); color: var(--purple-600); }
.service-card .icon-circle.icon-tint-yellow { background: var(--gold-100);   color: var(--gold-600); }
.service-card .icon-circle.icon-tint-teal   { background: var(--teal-100);   color: var(--teal-600); }
.service-card .icon-circle.icon-tint-red    { background: var(--red-100);    color: var(--red-600); }

/* Illustrated icon badges — pre-composed colorful artwork (badge + icon baked
   into the image), used in place of the CSS-tinted icon-circle above. */
.service-card .icon-badge {
  width: 62px; height: 62px;
  display: block;
  object-fit: contain;
  margin-bottom: 20px;
}
.service-card h3 { font-size: 1.28rem; margin-bottom: 10px; }
.service-card p { font-size: 1.05rem; line-height: 1.6; margin-bottom: 16px; }
.service-card .card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--navy-900);
}
.service-card .card-link svg { width: 15px; height: 15px; transition: transform .15s ease; }
.service-card:hover .card-link svg { transform: translateX(3px); }

.service-card.on-navy {
  background: var(--glass-navy-tint);
  backdrop-filter: var(--glass-blur-soft);
  -webkit-backdrop-filter: var(--glass-blur-soft);
  border-color: var(--glass-border-navy);
  box-shadow: var(--glass-shadow-navy);
}
.service-card.on-navy h3, .service-card.on-navy p { color: #fff; }
.service-card.on-navy p { color: rgba(255,255,255,0.7); }

/* Category tabs (used on service pages to jump between sub-services) */
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  padding: 9px 18px;
  border-radius: var(--radius-pill);
  background: var(--glass-light);
  backdrop-filter: var(--glass-blur-soft);
  -webkit-backdrop-filter: var(--glass-blur-soft);
  font-weight: 600;
  font-size: 0.96rem;
  color: var(--ink-700);
  border: 1px solid var(--glass-border-light);
  box-shadow: var(--glass-highlight);
}
.chip:hover { border-color: var(--accent-500); color: var(--navy-950); }

/* ---------- Feature rows (icon + text list) ---------- */
.feature-list { display: grid; gap: 22px; }
.feature-row { display: flex; gap: 16px; align-items: flex-start; }
.feature-row .icon-circle {
  width: 46px; height: 46px;
  border-radius: 12px;
  background: var(--teal-100);
  color: var(--teal-600);
  display: grid; place-items: center;
  flex: none;
}
.feature-row .icon-circle svg { width: 22px; height: 22px; }
.feature-row h3 { font-size: 1.12rem; margin-bottom: 6px; }
.feature-row p { font-size: 1.02rem; line-height: 1.6; margin: 0; }

/* ---------- Team avatar (initials badge — no stock photos) ---------- */
.team-avatar {
  width: 74px; height: 74px;
  border-radius: 50%;
  background: var(--navy-900);
  color: #fff;
  display: grid; place-items: center;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: 0.02em;
  margin-bottom: 20px;
}
.team-avatar--muted { background: var(--surface-100); color: var(--ink-500); }

/* ---------- Split section (image + content) ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.split.reverse .split-media { order: 2; }
.split-media .photo-frame { aspect-ratio: 4/3.1; }

/* ---------- Brand strip ---------- */
.brand-strip { padding-block: 20px; }
.brand-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand-chip {
  height: 36px;
  width: auto;
  max-width: 118px;
  object-fit: contain;
  display: block;
  opacity: 0.88;
  filter: grayscale(0%);
  transition: opacity .15s ease, transform .15s ease;
}
.brand-chip:hover { opacity: 1; transform: translateY(-1px); }
.brand-chip-dark {
  display: inline-flex;
  align-items: center;
  background: var(--navy-950);
  border-radius: var(--radius-sm);
  padding: 9px 16px;
  line-height: 0;
}
.brand-chip-dark .brand-chip { height: 24px; opacity: 1; }
.brand-chip-dark:hover .brand-chip { transform: none; }

/* ---------- Generator sizing calculator ---------- */
.calc-card {
  background: var(--glass-light-tint);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-radius: var(--radius-lg);
  padding: 40px;
  box-shadow: var(--glass-shadow-lg);
  border: 1px solid var(--glass-border-light);
  max-width: 780px;
  margin-inline: auto;
}
.calc-question { margin-bottom: 26px; }
.calc-question:last-of-type { margin-bottom: 0; }
.calc-label { display: block; font-weight: 700; color: var(--navy-950); margin-bottom: 12px; font-size: 0.98rem; }
.calc-options { display: flex; flex-wrap: wrap; gap: 10px; }
.calc-option { position: relative; cursor: pointer; }
.calc-option input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.calc-option span {
  display: inline-block;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--glass-border-light);
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  color: var(--ink-700);
  font-size: 0.92rem;
  font-weight: 600;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.calc-option:hover span { border-color: var(--accent-400); }
.calc-option input:checked + span { background: var(--accent-600); border-color: var(--accent-600); color: #fff; box-shadow: var(--glass-highlight-navy); }
.calc-option input:focus-visible + span { outline: 2px solid var(--accent-400); outline-offset: 2px; }
.calc-result {
  margin-top: 32px;
  padding: 28px;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(19,53,84,0.92), rgba(10,31,51,0.96));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border-navy);
  box-shadow: var(--glass-shadow-navy);
  text-align: center;
}
.calc-result-label { display: block; color: var(--accent-400); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; }
.calc-result-kw { color: #fff; font-family: var(--font-head); font-weight: 800; font-size: clamp(2.1rem, 4vw, 3rem); margin: 8px 0; line-height: 1.1; }
.calc-result-note { color: rgba(255,255,255,0.75); font-size: 0.92rem; line-height: 1.55; max-width: 520px; margin-inline: auto; }
.calc-disclaimer { margin-top: 18px; font-size: 0.82rem; color: var(--ink-500); text-align: center; }
.calc-actions { display: flex; gap: 14px; justify-content: center; margin-top: 24px; flex-wrap: wrap; }
@media (max-width: 640px) {
  .calc-card { padding: 26px 20px; }
}
/* .btn-outline is designed for a dark background (white border/text) — inside
   the white .calc-card it was invisible (white-on-white). Give it a readable
   variant whenever it appears on the card's light background. */
.calc-card .btn-outline { border-color: var(--navy-900); color: var(--navy-900); }
.calc-card .btn-outline:hover { background: var(--navy-900); border-color: var(--navy-900); color: #fff; }

/* ---------- Generator sizing calculator: Generac-branded orange/black ---------- */
#genCalc { border-top: 4px solid var(--generac-orange); }
#genCalc .calc-option:hover span { border-color: var(--generac-orange); }
#genCalc .calc-option input:checked + span { background: var(--generac-orange); border-color: var(--generac-orange); color: #fff; }
#genCalc .calc-option input:focus-visible + span { outline-color: var(--generac-orange); }
#genCalc .calc-result { background: linear-gradient(180deg, rgba(38,33,25,0.92), rgba(23,20,15,0.96)); }
#genCalc .calc-result-label { color: var(--generac-orange); }
#genCalc .btn-primary { background: linear-gradient(135deg, #f0813f, var(--generac-orange)); box-shadow: 0 8px 24px rgba(234,106,32,0.35); }
#genCalc .btn-primary:hover { box-shadow: 0 12px 34px rgba(234,106,32,0.45); }
#genCalc .btn-outline:hover { background: var(--generac-black); border-color: var(--generac-black); }

/* ---------- Fireplace sizing calculator: Regency-branded deep red ---------- */
#fireplaceCalc { border-top: 4px solid var(--red-600); }
#fireplaceCalc .calc-option:hover span { border-color: var(--red-600); }
#fireplaceCalc .calc-option input:checked + span { background: var(--red-600); border-color: var(--red-600); color: #fff; }
#fireplaceCalc .calc-option input:focus-visible + span { outline-color: var(--red-600); }
#fireplaceCalc .calc-result { background: #2a1210; }
#fireplaceCalc .calc-result-label { color: #f0a09c; }
#fireplaceCalc .btn-primary { background: linear-gradient(135deg, #e2645d, var(--red-600)); box-shadow: 0 8px 24px rgba(209,64,58,0.35); }
#fireplaceCalc .btn-primary:hover { box-shadow: 0 12px 34px rgba(209,64,58,0.45); }
#fireplaceCalc .btn-outline:hover { background: #2a1210; border-color: #2a1210; }

/* ---------- Trust strip (repeated guarantee/warranty messaging) ---------- */
.trust-strip { background: var(--surface-50); border-bottom: 1px solid var(--ink-100); padding-block: 16px; }
.trust-strip-row { display: flex; justify-content: center; align-items: center; gap: 40px; flex-wrap: wrap; }
.trust-strip-item { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 0.92rem; color: var(--navy-900); white-space: nowrap; }
.trust-strip-item svg { width: 20px; height: 20px; color: var(--accent-600); flex: none; }
.trust-strip--compact { padding-block: 12px; }
.trust-strip--compact .trust-strip-row { gap: 22px; }
.trust-strip--compact .trust-strip-item { font-size: 0.82rem; }
.trust-strip--compact .trust-strip-item svg { width: 16px; height: 16px; }
@media (max-width: 640px) {
  .trust-strip-row { gap: 18px 22px; }
  .trust-strip-item { font-size: 0.8rem; }
}

/* ---------- Recent work gallery ---------- */
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 36px; }
.gallery-item { margin: 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); background: #fff; border: 1px solid var(--ink-100); transition: transform .2s ease, box-shadow .2s ease; }
.gallery-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.gallery-item .gallery-photo { aspect-ratio: 4/3; overflow: hidden; }
.gallery-item .gallery-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-item figcaption { padding: 14px 16px; font-size: 0.88rem; font-weight: 600; color: var(--navy-900); }
@media (max-width: 860px) {
  .gallery-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .gallery-grid { grid-template-columns: 1fr; }
}

/* ---------- Google reviews ---------- */
.reviews-summary { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
.reviews-summary .google-g { width: 30px; height: 30px; flex: none; }
.reviews-summary-score { font-family: var(--font-head); font-weight: 800; font-size: 1.7rem; color: var(--navy-950); }
.reviews-summary-stars { color: #f5b400; display: inline-flex; gap: 2px; }
.reviews-summary-stars svg { width: 18px; height: 18px; }
.reviews-summary-count { color: var(--ink-400); font-size: 0.92rem; }
.reviews-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 36px; }
.review-card { background: var(--glass-light-tint); backdrop-filter: var(--glass-blur-soft); -webkit-backdrop-filter: var(--glass-blur-soft); border: 1px solid var(--glass-border-light); border-radius: var(--radius-lg); padding: 26px; box-shadow: var(--glass-shadow); display: flex; flex-direction: column; gap: 12px; }
.review-card-stars { color: #f5b400; display: inline-flex; gap: 2px; }
.review-card-stars svg { width: 15px; height: 15px; }
.review-quote { font-size: 0.92rem; line-height: 1.6; color: var(--ink-700); flex: 1; }
.review-author { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; }
.review-author-name { font-weight: 700; font-size: 0.88rem; color: var(--navy-950); }
.review-author-meta { font-size: 0.78rem; color: var(--ink-400); }
.reviews-cta { text-align: center; margin-top: 34px; }
@media (max-width: 1080px) {
  .reviews-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .reviews-grid { grid-template-columns: 1fr; }
}

/* ---------- Financing banner ---------- */
.financing-banner {
  background: linear-gradient(120deg, var(--accent-600), var(--accent-500) 60%, var(--accent-400));
  border-radius: var(--radius-lg);
  padding: 48px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  box-shadow: var(--shadow-glow);
}
.financing-banner h3 { color: #fff; font-size: 1.7rem; margin-bottom: 10px; }
.financing-banner p { color: rgba(255,255,255,0.92); font-size: 1.08rem; line-height: 1.6; margin: 0; max-width: 480px; }
.financing-pills { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.financing-pills span {
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.3);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-size: 0.8rem;
  font-weight: 700;
}
.financing-badge {
  display: inline-flex;
  align-items: center;
  background: #fff;
  border-radius: var(--radius-pill);
  padding: 7px 16px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
}
.financing-badge img { display: block; height: 17px; width: auto; }

/* ---------- Stats band ---------- */
.stats-band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
}
.stat strong {
  display: block;
  font-family: var(--font-head);
  font-size: 2.4rem;
  color: var(--accent-400);
}
.stat span { color: rgba(255,255,255,0.7); font-size: 0.98rem; }

/* ---------- Testimonials ---------- */
.testimonial-card {
  background: var(--glass-light-tint);
  backdrop-filter: var(--glass-blur-soft);
  -webkit-backdrop-filter: var(--glass-blur-soft);
  border-radius: var(--radius-lg);
  padding: 30px;
  box-shadow: var(--glass-shadow);
  border: 1px solid var(--glass-border-light);
}
.stars { display: flex; gap: 3px; margin-bottom: 14px; color: var(--accent-500); }
.stars svg { width: 16px; height: 16px; }
.testimonial-card p { font-size: 1.08rem; line-height: 1.6; color: var(--ink-700); font-style: italic; }
.testimonial-person { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.testimonial-avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--navy-100);
  color: var(--navy-800);
  display: grid; place-items: center;
  font-family: var(--font-head);
  font-weight: 700;
  flex: none;
}
.testimonial-person strong { display: block; font-size: 0.98rem; }
.testimonial-person span { font-size: 0.85rem; color: var(--ink-500); }

/* ---------- Service area ---------- */
.area-list { display: flex; flex-wrap: wrap; gap: 12px; }
.area-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--glass-light);
  backdrop-filter: var(--glass-blur-soft);
  -webkit-backdrop-filter: var(--glass-blur-soft);
  border: 1px solid var(--glass-border-light);
  box-shadow: var(--glass-highlight);
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 0.98rem;
}
.area-pill svg { width: 15px; height: 15px; color: var(--accent-600); }
.area-pill .pill-weather {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  transition: opacity 0.4s ease;
}
.area-pill .pill-weather.is-visible {
  opacity: 1;
  max-width: none;
  margin-left: 6px;
  padding-left: 10px;
  border-left: 1px solid var(--ink-100);
}
.area-pill .pill-weather svg { width: 14px; height: 14px; color: var(--teal-600); }

/* ---------- CTA banner ---------- */
.cta-banner {
  border-radius: var(--radius-lg);
  padding: 64px;
  text-align: center;
  background: linear-gradient(160deg, var(--navy-950), var(--navy-800));
  color: #fff;
  position: relative;
  overflow: hidden;
}
.cta-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(600px 300px at 50% 0%, rgba(14, 165, 233,0.3), transparent 70%);
}
.cta-banner > * { position: relative; }
.cta-banner .eyebrow { color: var(--accent-400); }
.cta-banner h2 { color: #fff; font-family: var(--font-serif); font-weight: 600; letter-spacing: -0.01em; font-size: clamp(1.8rem, 3.2vw, 2.5rem); }
.cta-banner p { color: rgba(255,255,255,0.8); font-size: 1.15rem; line-height: 1.6; max-width: 540px; margin-inline: auto 24px auto; }
.cta-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }

/* ---------- Forms ---------- */
.form-card {
  background: var(--glass-light-tint);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-radius: var(--radius-lg);
  padding: 36px;
  box-shadow: var(--glass-shadow-lg);
  border: 1px solid var(--glass-border-light);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { margin-bottom: 18px; }
.field label {
  display: block;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--navy-950);
  margin-bottom: 7px;
}
.field input, .field select, .field textarea {
  width: 100%;
  padding: 14px 16px;
  font-size: 1rem;
  border-radius: var(--radius-sm);
  border: 1.5px solid rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--ink-900);
  transition: border-color .15s ease, background .15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--accent-500);
  background: rgba(255,255,255,0.85);
}
.field textarea { resize: vertical; min-height: 110px; }
.field-checkboxes { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 4px; }
.field-checkbox { position: relative; cursor: pointer; }
.field-checkbox input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.field-checkbox span {
  display: inline-block;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--glass-border-light);
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(8px) saturate(160%);
  -webkit-backdrop-filter: blur(8px) saturate(160%);
  color: var(--ink-700);
  font-size: 0.92rem;
  font-weight: 600;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.field-checkbox:hover span { border-color: var(--accent-400); }
.field-checkbox input:checked + span { background: var(--accent-600); border-color: var(--accent-600); color: #fff; }
.field-checkbox input:focus-visible + span { outline: 2px solid var(--accent-400); outline-offset: 2px; }
.field-file {
     position: relative;
     cursor: pointer;
     border: 1.5px dashed rgba(255,255,255,0.8);
     border-radius: var(--radius-sm);
     padding: 18px;
     text-align: center;
     font-size: 0.85rem;
     color: var(--ink-500);
     background: rgba(255,255,255,0.4);
     backdrop-filter: blur(6px);
     -webkit-backdrop-filter: blur(6px);
     transition: border-color .15s ease, background .15s ease;
}
.field-file input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.field-file:hover, .field-file.is-dragover { border-color: var(--accent-500); background: rgba(255,255,255,0.6); }
.field-file-error {
     display: none;
     color: var(--danger);
     font-size: 0.82rem;
     margin-top: 6px;
}
.field-file-error.is-visible { display: block; }
.form-success {
  display: none;
  background: var(--teal-100);
  color: var(--teal-700);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  font-weight: 600;
  font-size: 0.9rem;
  margin-top: 14px;
}
.form-success.is-visible { display: block; }

/* ---------- Footer ---------- */
.footer {
  position: relative;
  background: var(--navy-950);
  color: rgba(255,255,255,0.7);
  padding-top: 72px;
  overflow: hidden;
}
/* Faded sunset photo behind the footer content — decorative only, so it
   sits behind everything and never affects text contrast/readability. */
.footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../img/footer-bg.webp");
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center center;
  opacity: 0.75;
  pointer-events: none;
}
.footer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--navy-950) 0%, rgba(10,31,51,0.32) 35%, rgba(10,31,51,0.32) 65%, var(--navy-950) 100%);
  pointer-events: none;
}
.footer > .container { position: relative; z-index: 1; }
.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.footer .brand-text strong { color: #fff; }
.footer-about p { color: rgba(255,255,255,0.65); font-size: 1rem; line-height: 1.6; max-width: 310px; }
.footer-social { display: flex; gap: 10px; margin-top: 18px; }
.footer-social a {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.14);
  display: grid; place-items: center;
}
.footer-social a:hover { background: var(--accent-500); }
.footer-social svg { width: 16px; height: 16px; }
.footer h3 {
  color: #fff;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 18px;
}
.footer-links li { margin-bottom: 13px; }
.footer-links a { font-size: 1rem; color: rgba(255,255,255,0.7); }
.footer-links a:hover { color: var(--accent-400); }
.footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 1rem;
  margin-bottom: 15px;
  color: rgba(255,255,255,0.75);
}
.footer-contact svg { width: 17px; height: 17px; color: var(--accent-400); flex: none; margin-top: 2px; }
.footer-contact-link {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  color: inherit;
}
.footer-contact-link:hover,
.footer-contact-link:focus-visible { color: var(--accent-400); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-block: 26px;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.45);
  flex-wrap: wrap;
}
.footer-bottom a:hover { color: rgba(255,255,255,0.75); }

/* ---------- Emergency floating pill (mobile) ---------- */
.mobile-call-bar {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 200;
  background: var(--navy-950);
  padding: 12px 16px;
  box-shadow: 0 -8px 24px rgba(0,0,0,0.25);
}
.mobile-call-bar a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(135deg, var(--accent-500), var(--accent-600));
  color: #fff;
  font-family: var(--font-head);
  font-weight: 700;
  padding: 14px;
  border-radius: var(--radius-pill);
}
.mobile-call-bar svg { width: 18px; height: 18px; }

/* ---------- Page hero (interior pages) ---------- */
.page-hero {
  background: linear-gradient(160deg, var(--navy-950), var(--navy-800));
  color: #fff;
  padding: 60px 0 70px;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(900px 400px at 90% 0%, rgba(14, 165, 233,0.28), transparent 60%);
}
.breadcrumb {
  position: relative;
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.55);
  margin-bottom: 18px;
}
.breadcrumb a:hover { color: #fff; }
.page-hero .eyebrow { position: relative; color: var(--accent-400); }
.page-hero h1 { position: relative; color: #fff; font-family: var(--font-serif); font-weight: 600; letter-spacing: -0.01em; font-size: clamp(2.2rem, 4vw, 3.2rem); max-width: 720px; }
.page-hero p.lead { position: relative; color: rgba(255,255,255,0.8); font-size: 1.2rem; line-height: 1.6; max-width: 600px; }
.page-hero .hero-actions { position: relative; }

/* ---------- Hero background animations (theme accents, decorative only) ---------- */
.hero-fx {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Water flow — plumbing & sewer/drainage heroes */
.hero-fx--water svg { position: absolute; left: 0; bottom: -4px; width: 100%; height: 120px; }
.hero-fx--water .wave-line {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  opacity: 0.5;
  stroke-dasharray: 14 16;
  animation: hero-wave-flow 3.4s linear infinite;
}
.hero-fx--water .wave-line.wave-2 { stroke-width: 2; opacity: 0.28; animation-duration: 4.6s; animation-direction: reverse; }
.hero-fx--water .droplet { opacity: 0; animation: hero-droplet-fall 2.8s ease-in infinite; }
.hero-fx--water .ripple {
  fill: none;
  stroke: #5fd4e4;
  stroke-width: 1.6;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: hero-ripple-expand 3s ease-out infinite;
}

/* Heat shimmer + glow — HVAC hero */
.hero-fx--heat .flame-glow {
  position: absolute;
  bottom: -70px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,180,40,0.5), rgba(255,180,40,0) 70%);
  filter: blur(2px);
  animation: hero-flame-pulse 2.6s ease-in-out infinite;
}
.hero-fx--heat .flame-glow.g1 { left: 4%; width: 220px; height: 220px; animation-delay: 0s; }
.hero-fx--heat .flame-glow.g2 { left: 38%; width: 170px; height: 170px; animation-delay: .7s; }
.hero-fx--heat .flame-glow.g3 { left: 70%; width: 200px; height: 200px; animation-delay: 1.3s; }
.hero-fx--heat .heat-line {
  position: absolute;
  bottom: -10px;
  width: 2px;
  height: 90px;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,197,71,0.55) 100%);
  filter: blur(1px);
  animation: hero-heat-rise 3s ease-in-out infinite;
}

/* Electrical spark / lightning — electrical hero */
.hero-fx--electric .bolt { position: absolute; opacity: 0; animation: hero-bolt-flicker 13s ease-in-out infinite; }
.hero-fx--electric .bolt path { fill: #ffd53d; filter: drop-shadow(0 0 6px rgba(255,213,61,0.85)); }
.hero-fx--electric .bolt.b2 { animation-delay: 4.3s; }
.hero-fx--electric .bolt.b3 { animation-delay: 8s; }
.hero-fx--electric .spark {
  fill: #ffd53d;
  opacity: 0;
  filter: drop-shadow(0 0 4px rgba(255,213,61,0.9));
  animation: hero-spark-flicker 7s ease-in-out infinite;
}

/* Themed cursors — active only over each hero's own animated graphic
   (the rest of hero-fx stays pointer-events:none so text/buttons are unaffected). */
.hero-fx--water svg {
  pointer-events: auto;
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24"><path d="M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z" fill="%2338bdf8" stroke="%23ffffff" stroke-width="1.3"/></svg>') 15 4, pointer;
}
/* Plumbing only: more specific than .hero-fx--water above, so it wins there
   while Sewer & Drainage (base class only) keeps the droplet cursor. */
.hero-fx--water-faucet svg {
  cursor: url('../img/icons/cursor-plumbing-faucet.png') 23 4, pointer;
}
.hero-fx--heat .flame-glow,
.hero-fx--heat .heat-line {
  pointer-events: auto;
  cursor: url('../img/icons/cursor-hvac-flame.png') 20 28, pointer;
}
.hero-fx--electric .bolt,
.hero-fx--electric .spark {
  pointer-events: auto;
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="40" viewBox="0 0 24 48"><path d="M14 0 L2 26 H11 L8 48 L22 20 H13 Z" fill="%23ffd53d" stroke="%237a5b00" stroke-width="0.8"/></svg>') 10 2, pointer;
}

/* Same themed cursors also cover the hero's main "Call" button (the solid
   blue bar), not just the background animation. */
.page-hero:has(.hero-fx--water) .hero-actions .btn-primary {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24"><path d="M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z" fill="%2338bdf8" stroke="%23ffffff" stroke-width="1.3"/></svg>') 15 4, pointer;
}
.page-hero:has(.hero-fx--water-faucet) .hero-actions .btn-primary {
  cursor: url('../img/icons/cursor-plumbing-faucet.png') 23 4, pointer;
}
.page-hero:has(.hero-fx--heat) .hero-actions .btn-primary {
  cursor: url('../img/icons/cursor-hvac-flame.png') 20 28, pointer;
}
.page-hero:has(.hero-fx--electric) .hero-actions .btn-primary {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="40" viewBox="0 0 24 48"><path d="M14 0 L2 26 H11 L8 48 L22 20 H13 Z" fill="%23ffd53d" stroke="%237a5b00" stroke-width="0.8"/></svg>') 10 2, pointer;
}

/* Tri-element (water/fire/lightning) cursor — the combined plumbing+heating+
   electrical mark, used where the site represents all three trades at once:
   the homepage's four service tiles, and the persistent header "Free
   Estimate" button that appears on every other page. */
.quick-tile-grid .quick-tile,
.header-cta .btn-purple {
  cursor: url('../img/icons/cursor-tri-element.png') 20 26, pointer;
}

/* Design Group Co-branded cursor over any "Full Renovation" link — that
   service is delivered through our design-build partnership with them, so
   the cursor becomes their badge wherever the site points to that page. */
a[href="full-renovation.html"],
a[href="#svc-full-renovation"],
a[href="https://www.thedesigngroupco.com/"] {
  cursor: url('../img/icons/cursor-design-group.png') 48 25, pointer;
}
.quick-tile-grid .quick-tile[href="full-renovation.html"],
.quick-tile-grid .quick-tile[href="#svc-full-renovation"],
.quick-tile-grid .quick-tile[href="https://www.thedesigngroupco.com/"] {
  cursor: url('../img/icons/cursor-design-group.png') 48 25, pointer;
}

@keyframes hero-wave-flow {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -60; }
}
@keyframes hero-droplet-fall {
  0% { transform: translateY(-8px); opacity: 0; }
  15% { opacity: .85; }
  80% { opacity: .4; }
  100% { transform: translateY(64px); opacity: 0; }
}
@keyframes hero-ripple-expand {
  0% { transform: scale(0.3); opacity: 0.55; }
  70% { opacity: 0.18; }
  100% { transform: scale(2.4); opacity: 0; }
}
@keyframes hero-flame-pulse {
  0%, 100% { transform: scale(0.85); opacity: 0.45; }
  50% { transform: scale(1.08); opacity: 0.8; }
}
@keyframes hero-heat-rise {
  0% { transform: translateY(0) scaleY(0.6); opacity: 0; }
  35% { opacity: .55; }
  100% { transform: translateY(-100px) scaleY(1.35); opacity: 0; }
}
@keyframes hero-bolt-flicker {
  0%, 88%, 100% { opacity: 0; }
  89% { opacity: 1; }
  90.5% { opacity: 0.15; }
  92% { opacity: .9; }
  94% { opacity: 0; }
}
@keyframes hero-spark-flicker {
  0%, 60%, 100% { opacity: 0; }
  65% { opacity: 1; }
  72% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-fx .wave-line,
  .hero-fx .droplet,
  .hero-fx .flame-glow,
  .hero-fx .heat-line,
  .hero-fx .bolt,
  .hero-fx .spark {
    animation: none !important;
  }
  .hero-fx .wave-line { opacity: 0.35; }
  .hero-fx .droplet { opacity: 0.3; }
  .hero-fx .heat-line { opacity: 0.25; }
  .hero-fx .bolt, .hero-fx .spark { opacity: 0.55; }
}

/* ---------- Accordion (FAQ) ---------- */
.accordion-item {
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-md);
  margin-bottom: 12px;
  overflow: hidden;
  background: #fff;
}
.accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px;
  background: none;
  border: none;
  text-align: left;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--navy-950);
}
.accordion-trigger svg { width: 18px; height: 18px; flex: none; transition: transform .2s ease; color: var(--accent-600); }
.accordion-item.is-open .accordion-trigger svg { transform: rotate(45deg); }
.accordion-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s ease;
  padding: 0 22px;
}
.accordion-item.is-open .accordion-panel { padding-bottom: 22px; }
.accordion-panel p { margin: 0; font-size: 1.04rem; line-height: 1.6; }

/* ---------- Utilities ---------- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--teal-100);
  color: var(--teal-700);
  font-weight: 700;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
}

/* ---------- Responsive ---------- */
@media (max-width: 1300px) {
  .header-phone small { display: none; }
  .header-phone .icon-circle { display: none; }
  .brand-text span { display: none; }
  .nav-links a { padding: 9px 8px; font-size: 0.83rem; }
  .header-cta .btn-sm { padding: 10px 16px; font-size: 0.86rem; }
}
@media (max-width: 1080px) {
  .grid-4, .grid-5 { grid-template-columns: repeat(2, 1fr); }
  .stats-band { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 960px) {
  .hero .container { grid-template-columns: 1fr; }
  .hero-visual { order: -1; margin-bottom: 64px; }
  .hero-visual .float-card { left: 16px; right: 16px; max-width: none; }
  .split, .split.reverse .split-media { grid-template-columns: 1fr; }
  .split { gap: 32px; }
  .split-media { order: -1 !important; }
}
@media (max-width: 860px) {
  .topbar .container { flex-wrap: wrap; row-gap: 6px; }
  .nav-links, .header-phone span.header-phone-text { display: none; }
  .nav-toggle { display: flex; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .mobile-call-bar { display: block; }
  body { padding-bottom: 68px; }
  .financing-banner, .cta-banner { padding: 36px; }
}
@media (max-width: 640px) {
  .section { padding: 60px 0; }
  .grid-4, .grid-5, .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .stats-band { grid-template-columns: 1fr 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  .hero-stats { gap: 22px; }
  .financing-banner { flex-direction: column; align-items: flex-start; }
}

/* ---------- Minimal search homepage ---------- */
.google-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--surface-0);
  border-top: 4px solid var(--teal-500);
}
.google-topbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
  padding: 22px 28px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink-700);
}
.google-topbar a:hover { color: var(--navy-950); text-decoration: underline; }

.google-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 24px 64px;
  text-align: center;
  background-image: linear-gradient(180deg, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.6) 30%, rgba(255,255,255,0.18) 55%, rgba(255,255,255,0) 75%), url("../img/water-splash-bg-full.webp");
  background-repeat: no-repeat, no-repeat;
  background-position: center center, center center;
  background-size: cover, cover;
}
@media (max-width: 640px) {
  .google-main { background-size: cover, cover; background-position: center center, right center; }
}
.google-logo { width: min(340px, 68vw); height: auto; margin-bottom: 14px; }
.google-tagline {
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink-500);
  letter-spacing: 0.01em;
  margin-bottom: 40px;
}

.google-search-form {
  width: 100%;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.google-search-bar {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--glass-light-strong);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1.5px solid var(--glass-border-light);
  border-radius: var(--radius-pill);
  padding: 17px 26px;
  box-shadow: var(--glass-shadow);
  transition: box-shadow .2s ease, border-color .2s ease;
}
.google-search-bar:focus-within {
  box-shadow: var(--shadow-md);
  border-color: var(--teal-500);
}
.google-search-bar svg { width: 20px; height: 20px; color: var(--ink-300); flex: none; }
.google-search-bar input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 1.1rem;
  color: var(--ink-900);
}
.google-search-bar input::placeholder { color: var(--ink-300); }

.google-actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.google-btn { min-width: 190px; }

.google-status {
  min-height: 1.5em;
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--ink-500);
}
.google-status.is-active { color: var(--teal-700); }

/* AI answer card — shown when the search box gets a real answer back
   from the AI backend (assets/js/script.js's askAi()), instead of just
   routing straight to a page. */
.ai-answer {
  display: none;
  width: 100%;
  max-width: 560px;
  margin: 8px auto 0;
  padding: 22px 26px;
  background: #fff;
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  text-align: left;
}
.ai-answer.is-visible { display: block; animation: gh-fade-up .4s ease both; }
.ai-answer-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--teal-700);
  margin-bottom: 10px;
}
.ai-answer-badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teal-500);
}
.ai-answer-text {
  color: var(--navy-950);
  font-size: 1.05rem;
  line-height: 1.6;
  margin-bottom: 18px;
}
.ai-answer-actions { display: flex; gap: 10px; flex-wrap: wrap; }
@media (prefers-reduced-motion: reduce) {
  .ai-answer.is-visible { animation: none; }
}

.google-chips {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  max-width: 720px;
  margin-top: 12px;
}
.google-chips-label {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-300);
}
.google-subtag {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-500);
  margin-top: 28px;
}
.google-brand-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.google-brand-row .brand-chip { height: 26px; opacity: 1; }
.google-brand-row .brand-chip-dark .brand-chip { height: 18px; }

/* Floating card that sits on top of the homepage's water-photo background —
   without it, the trust badges, tagline and brand logos would blend into
   the busy image behind them. Fully opaque so everything stays crisp and
   readable regardless of what's happening in the photo underneath. */
.trust-panel {
  background: var(--glass-light-strong);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border-light);
  border-radius: 20px;
  padding: 20px 28px 24px;
  margin-top: 32px;
  box-shadow: var(--glass-highlight), 0 10px 34px rgba(15, 42, 67, 0.16);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 920px;
  width: 100%;
}
.trust-panel .trust-strip { background: transparent; border: 0; padding-block: 0; }
.trust-panel .google-subtag { margin-top: 0; }
.trust-panel .google-brand-row { margin-top: 0; }
@media (max-width: 640px) {
  .trust-panel { padding: 16px 18px 20px; border-radius: 16px; margin-top: 20px; }
}

.quick-tile-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}
.quick-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 132px;
  padding: 22px 12px;
  background: var(--glass-light-strong);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1.5px solid var(--glass-border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--navy-950);
  text-align: center;
  line-height: 1.25;
}
.quick-tile .icon-circle {
  width: 60px;
  height: 60px;
  border-radius: 18px;
  background: var(--accent-100);
  color: var(--accent-600);
  display: grid;
  place-items: center;
  flex: none;
}
.quick-tile .icon-circle svg { width: 28px; height: 28px; }
.quick-tile .icon-circle.icon-circle--teal { background: var(--teal-100); color: var(--teal-600); }
.quick-tile .icon-circle.icon-circle--img { background: transparent; }
.quick-tile .icon-circle.icon-circle--img img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }
.quick-tile:hover {
  border-color: var(--accent-500);
  box-shadow: var(--glass-highlight), var(--shadow-md);
}

.google-footer {
  padding: 22px 24px;
  border-top: 1px solid var(--ink-100);
  background: var(--surface-50);
}
.google-footer-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 20px;
  font-size: 0.88rem;
  color: var(--ink-500);
  padding-block: 6px;
}
.google-footer-links a { color: var(--ink-700); font-weight: 600; }
.google-footer-links a:hover { color: var(--navy-950); }
.google-footer-row .dot { color: var(--ink-300); }

@media (max-width: 640px) {
  .google-topbar { padding: 16px 18px; gap: 16px; font-size: 0.85rem; }
  .google-logo { width: min(260px, 72vw); }
  .google-tagline { font-size: 0.92rem; margin-bottom: 30px; }
  .google-search-bar { padding: 14px 20px; }
  .google-actions { flex-direction: column; width: 100%; }
  .google-btn { width: 100%; min-width: 0; }
  .quick-tile { width: 104px; padding: 18px 10px; }
  .quick-tile .icon-circle { width: 50px; height: 50px; }
  .quick-tile .icon-circle svg { width: 24px; height: 24px; }
}

/* ---------- Homepage entrance & interaction motion ---------- */
@keyframes gh-fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes gh-logo-in {
  from { opacity: 0; transform: translateY(14px) scale(0.94); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes gh-pulse-glow {
  0%, 100% { box-shadow: var(--shadow-sm); border-color: var(--teal-500); }
  50% { box-shadow: 0 0 0 6px rgba(20,163,186,0.14), var(--shadow-md); border-color: var(--teal-600); }
}
@keyframes gh-dot-pulse {
  0%, 80%, 100% { opacity: 0.2; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-2px); }
}
@keyframes gh-icon-in {
  from { opacity: 0; transform: scale(0.5) rotate(-15deg); }
  to { opacity: 1; transform: scale(1) rotate(0); }
}

.google-topbar { animation: gh-fade-up .6s ease both; }
.google-logo { animation: gh-logo-in .7s cubic-bezier(.22,1,.36,1) both; }
.google-tagline { animation: gh-fade-up .6s ease both .12s; }
.google-search-form { animation: gh-fade-up .6s ease both .24s; }
.google-chips { animation: gh-fade-up .6s ease both .38s; }

/* Same entrance treatment on every other page's hero, staggered top to bottom */
.page-hero .breadcrumb { animation: gh-fade-up .5s ease both; }
.page-hero .eyebrow { animation: gh-fade-up .55s ease both .08s; }
.page-hero h1 { animation: gh-fade-up .6s ease both .16s; }
.page-hero .lead { animation: gh-fade-up .6s ease both .24s; }
.page-hero .hero-actions { animation: gh-fade-up .6s ease both .32s; }
.quick-tile-grid .quick-tile { animation: gh-fade-up .5s ease both; }
.quick-tile-grid .quick-tile:nth-child(1) { animation-delay: .42s; }
.quick-tile-grid .quick-tile:nth-child(2) { animation-delay: .46s; }
.quick-tile-grid .quick-tile:nth-child(3) { animation-delay: .5s; }
.quick-tile-grid .quick-tile:nth-child(4) { animation-delay: .54s; }
.quick-tile-grid .quick-tile:nth-child(5) { animation-delay: .58s; }
.quick-tile-grid .quick-tile:nth-child(6) { animation-delay: .62s; }

.google-search-bar svg { animation: gh-icon-in .5s cubic-bezier(.22,1,.36,1) both .5s; }

.google-search-bar {
  transition: box-shadow .25s ease, border-color .25s ease, transform .2s ease;
}
.google-search-bar:focus-within { transform: translateY(-1px); }
.google-search-bar.is-searching {
  animation: gh-pulse-glow 1.1s ease-in-out infinite;
}
.google-search-bar.is-searching svg { animation: none; }

.google-status {
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .35s ease, transform .35s ease;
}
.google-status.is-visible { opacity: 1; transform: translateY(0); }
.google-status .gh-dots span {
  display: inline-block;
  animation: gh-dot-pulse 1.2s ease-in-out infinite;
}
.google-status .gh-dots span:nth-child(2) { animation-delay: .15s; }
.google-status .gh-dots span:nth-child(3) { animation-delay: .3s; }

.quick-tile,
.google-btn {
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.quick-tile:hover { transform: translateY(-4px); }
.google-btn:hover { transform: translateY(-2px); }
.google-btn:active,
.quick-tile:active { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .google-topbar, .google-logo, .google-tagline, .google-search-form,
  .google-chips, .quick-tile-grid .quick-tile, .google-search-bar svg,
  .google-search-bar.is-searching, .google-status .gh-dots span,
  .page-hero .breadcrumb, .page-hero .eyebrow, .page-hero h1,
  .page-hero .lead, .page-hero .hero-actions {
    animation: none !important;
  }
  .google-search-bar, .google-btn, .quick-tile, .google-status {
    transition: none !important;
  }
}

/* Mobile nav drawer */
.mobile-drawer {
  position: fixed;
  inset: 0;
  z-index: 300;
  visibility: hidden;
}
.mobile-drawer.is-open { visibility: visible; }
.mobile-drawer-overlay {
  position: absolute; inset: 0;
  background: rgba(10,31,51,0.45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .2s ease;
}
.mobile-drawer.is-open .mobile-drawer-overlay { opacity: 1; }
.mobile-drawer-panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(320px, 84vw);
  background: rgba(255,255,255,0.8);
  backdrop-filter: var(--glass-blur-strong);
  -webkit-backdrop-filter: var(--glass-blur-strong);
  border-left: 1px solid var(--glass-border-light);
  box-shadow: -12px 0 40px rgba(10,31,51,0.25);
  padding: 24px;
  transform: translateX(100%);
  transition: transform .25s ease;
  overflow-y: auto;
}
.mobile-drawer.is-open .mobile-drawer-panel { transform: translateX(0); }
.mobile-drawer-close {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--glass-light);
  backdrop-filter: var(--glass-blur-soft);
  -webkit-backdrop-filter: var(--glass-blur-soft);
  border: 1px solid var(--glass-border-light);
  display: grid; place-items: center;
  margin-bottom: 22px;
}
.mobile-drawer-close svg { width: 18px; height: 18px; }
.mobile-drawer a {
  display: block;
  padding: 14px 4px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--navy-950);
  border-bottom: 1px solid var(--ink-100);
}
.mobile-drawer .btn { margin-top: 20px; }

/* ---------- Chatbot widget (all pages) ---------- */
/* Injected entirely by assets/js/script.js — see chatbot section there.
   Backed by api/chat.js; see that file for deployment/setup. */
.gh-dots span {
  display: inline-block;
  animation: gh-dot-pulse 1.2s ease-in-out infinite;
}
.gh-dots span:nth-child(2) { animation-delay: .15s; }
.gh-dots span:nth-child(3) { animation-delay: .3s; }

.chatbot-launcher {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: linear-gradient(135deg, var(--accent-500), var(--accent-600));
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: var(--glass-highlight-navy), var(--shadow-glow);
  z-index: 900;
  transition: transform .2s ease, box-shadow .2s ease;
}
.chatbot-launcher:hover { transform: translateY(-3px) scale(1.04); }
.chatbot-launcher svg { width: 26px; height: 26px; }
.chatbot-launcher .chatbot-launcher-close-icon { display: none; }
.chatbot-launcher.is-open .chatbot-launcher-chat-icon { display: none; }
.chatbot-launcher.is-open .chatbot-launcher-close-icon { display: block; }
.chatbot-launcher-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--teal-500);
  border: 2px solid #fff;
}

.chatbot-panel {
  position: fixed;
  right: 22px;
  bottom: 94px;
  width: 360px;
  max-width: calc(100vw - 32px);
  height: 500px;
  max-height: calc(100vh - 140px);
  background: rgba(255,255,255,0.82);
  backdrop-filter: var(--glass-blur-strong);
  -webkit-backdrop-filter: var(--glass-blur-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow-lg), var(--shadow-lg);
  display: none;
  flex-direction: column;
  overflow: hidden;
  z-index: 900;
  border: 1px solid var(--glass-border-light);
}
.chatbot-panel.is-open { display: flex; animation: gh-fade-up .3s ease both; }

.chatbot-header {
  background: rgba(10,31,51,0.82);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  color: #fff;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}
.chatbot-header-icon {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: grid; place-items: center;
  flex: none;
}
.chatbot-header-icon svg { width: 18px; height: 18px; color: var(--accent-400); }
.chatbot-header-text strong { display: block; font-family: var(--font-head); font-size: 0.98rem; }
.chatbot-header-text span { font-size: 0.78rem; color: rgba(255,255,255,0.65); }
.chatbot-header-text span::before {
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--teal-400, #5fd4e4);
  margin-right: 5px;
}

.chatbot-messages {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: rgba(247,248,250,0.4);
}
.chatbot-msg {
  max-width: 82%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 0.92rem;
  line-height: 1.5;
  white-space: pre-wrap;
}
.chatbot-msg--bot {
  align-self: flex-start;
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--glass-border-light);
  color: var(--navy-950);
  border-bottom-left-radius: 4px;
}
.chatbot-msg--user {
  align-self: flex-end;
  background: linear-gradient(135deg, var(--accent-500), var(--accent-600));
  color: #fff;
  border-bottom-right-radius: 4px;
}
.chatbot-msg--error {
  align-self: center;
  background: transparent;
  color: var(--ink-400);
  font-size: 0.82rem;
  text-align: center;
  max-width: 100%;
}
.chatbot-typing {
  align-self: flex-start;
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--glass-border-light);
  border-bottom-left-radius: 4px;
  padding: 12px 16px;
}
.chatbot-typing .gh-dots span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ink-300);
  margin: 0 2px;
}

.chatbot-footer {
  flex: none;
  border-top: 1px solid var(--glass-border-light);
  padding: 12px;
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.chatbot-form { display: flex; gap: 8px; }
.chatbot-input {
  flex: 1;
  border: 1px solid var(--glass-border-light);
  background: rgba(255,255,255,0.6);
  border-radius: var(--radius-pill);
  padding: 10px 16px;
  font-size: 0.92rem;
  font-family: var(--font-body);
  color: var(--ink-900);
}
.chatbot-input:focus-visible { outline: 2px solid var(--teal-500); outline-offset: 1px; }
.chatbot-send {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--navy-950);
  color: #fff;
  display: grid; place-items: center;
  cursor: pointer;
  flex: none;
  transition: background .15s ease;
}
.chatbot-send:hover { background: var(--navy-900); }
.chatbot-send:disabled { opacity: 0.5; cursor: default; }
.chatbot-send svg { width: 16px; height: 16px; }
.chatbot-footer-cta {
  display: block;
  text-align: center;
  font-size: 0.78rem;
  color: var(--ink-400);
  margin-top: 8px;
}
.chatbot-footer-cta a { color: var(--teal-600); font-weight: 600; }

@media (max-width: 480px) {
  .chatbot-panel {
    right: 12px;
    left: 12px;
    bottom: 84px;
    width: auto;
    max-width: none;
    height: calc(100vh - 120px);
  }
  .chatbot-launcher { right: 16px; bottom: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .chatbot-panel.is-open { animation: none; }
  .chatbot-launcher { transition: none; }
  .chatbot-typing .gh-dots span { animation: none; opacity: 1; }
}

/* ---------- Before/after comparison slider ---------- */
.ba-slider { max-width: 720px; margin: 0 auto; }
.ba-slider-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  user-select: none;
  touch-action: none;
  background: var(--surface-100);
}
.ba-img { position: absolute; top: 0; left: 0; height: 100%; max-width: none; object-fit: cover; display: block; }
.ba-img-after { width: 100%; }
.ba-slider-before { position: absolute; top: 0; left: 0; bottom: 0; width: 50%; overflow: hidden; }
.ba-slider-handle {
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: 4px; background: rgba(255,255,255,0.9);
  transform: translateX(-50%);
  cursor: ew-resize;
  display: flex; align-items: center; justify-content: center;
}
.ba-slider-handle-grip {
  width: 44px; height: 44px; border-radius: 50%;
  background: #fff; color: var(--navy-900);
  display: grid; place-items: center;
  box-shadow: var(--shadow-md);
}
.ba-slider-handle-grip svg { width: 20px; height: 20px; }
.ba-tag {
  position: absolute; top: 16px;
  background: rgba(13,42,68,0.85); color: #fff;
  font-family: var(--font-head); font-weight: 700; font-size: 0.76rem;
  letter-spacing: 0.03em; text-transform: uppercase;
  padding: 6px 12px; border-radius: var(--radius-pill);
  pointer-events: none;
}
.ba-tag-before { left: 16px; }
.ba-tag-after { right: 16px; }
.ba-slider-note {
  text-align: center;
  font-size: 0.92rem;
  color: var(--ink-500);
  margin-top: 14px;
}
@media (max-width: 640px) {
  .ba-slider-handle-grip { width: 38px; height: 38px; }
}

/* ---------- Notice / disclaimer callout ---------- */
.notice-callout {
  display: flex; gap: 16px; align-items: flex-start;
  background: var(--surface-50);
  border: 1px solid var(--ink-100);
  border-left: 4px solid var(--accent-500);
  border-radius: var(--radius-md);
  padding: 20px 24px;
}
.notice-callout svg { flex: none; width: 24px; height: 24px; color: var(--accent-600); margin-top: 2px; }
.notice-callout p { margin: 0; font-size: 0.98rem; line-height: 1.6; color: var(--ink-700); }
.notice-callout strong { color: var(--navy-900); }

/* ---------- Price cards (pricing guide page) ---------- */
.price-card { display: flex; flex-direction: column; gap: 6px; }
.price-card .price-name { font-size: 1.1rem; font-weight: 700; color: var(--navy-900); margin-bottom: 2px; }
.price-card .price-range { font-family: var(--font-head); font-weight: 800; font-size: 1.5rem; color: var(--teal-600); }
.price-card .price-note { font-size: 0.95rem; color: var(--ink-500); line-height: 1.55; margin-top: 4px; }

/* ---------- Referral banner (financing-banner variant) ---------- */
.financing-banner--teal { background: linear-gradient(120deg, var(--navy-900), var(--teal-600) 70%, var(--teal-500)); }

/* ---------- Maintenance plan cards ---------- */
.plan-card { text-align: center; display: flex; flex-direction: column; }
.plan-card--featured { border-color: var(--accent-500); box-shadow: var(--shadow-md); position: relative; }
.plan-card--featured::before {
  content: "Most Popular";
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--accent-500); color: #fff;
  font-family: var(--font-head); font-size: 0.72rem; font-weight: 800;
  letter-spacing: 0.04em; text-transform: uppercase;
  padding: 6px 16px; border-radius: var(--radius-pill);
  white-space: nowrap;
}
.plan-price { font-family: var(--font-head); font-weight: 800; font-size: 2.4rem; color: var(--navy-900); margin: 14px 0 4px; }
.plan-price span { font-size: 1rem; font-weight: 600; color: var(--ink-500); }
.plan-list { text-align: left; list-style: none; margin: 20px 0; display: grid; gap: 12px; flex: 1; }
.plan-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.98rem; line-height: 1.5; }
.plan-list li svg { flex: none; width: 18px; height: 18px; color: var(--teal-600); margin-top: 2px; }

/* ==========================================================================
   Header logo, per-page personality — the flame/droplet/bolt mark in the
   logo comes alive to match whichever service page you're on. Purely
   decorative (aria-hidden), confined to the header lockup, off by default
   everywhere else. Markup: <span class="logo-fx"><i></i><i></i><i></i></span>
   sits right after the header .brand-logo image; body.page-* switches on
   the relevant look.
   ========================================================================== */
.header .brand { position: relative; }
.logo-fx { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.logo-fx i { position: absolute; display: none; }
.logo-fx i::before { content: ""; position: absolute; display: block; }
/* The flame/droplet/bolt glyph is only the leftmost ~16% of the logo
   lockup — narrow the effect box to that icon zone for the themes whose
   little flame/drip/spark shapes need to land ON the icon, not the
   wordmark. Plumbing's shine sweeps the full lockup, so it keeps the
   default full-width box above. */
.page-sewer .logo-fx,
.page-hvac .logo-fx,
.page-electrical .logo-fx {
  width: 16%;
  height: 100%;
  overflow: visible;
}

@media (prefers-reduced-motion: reduce) {
  .header .brand-logo { animation: none !important; filter: none !important; }
  .logo-fx i, .logo-fx i::before { display: none !important; animation: none !important; }
}

/* ---------- Plumbing: a wet, glossy sheen + one slow, lazy drip ---------- */
.page-plumbing .header .brand-logo {
  animation: logo-water-glow 5.8s ease-in-out infinite;
}
.page-plumbing .logo-fx { overflow: hidden; }
.page-plumbing .logo-fx i:nth-child(1) {
  display: block;
  top: -20%; left: -35%;
  width: 16%; height: 140%;
  background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,0.6) 45%, rgba(255,255,255,0.6) 55%, transparent 100%);
  filter: blur(1.5px);
  transform: skewX(-18deg);
  animation: logo-shine-sweep 6.2s cubic-bezier(.32,.02,.42,1) infinite;
}
.page-plumbing .logo-fx i:nth-child(2) {
  display: block;
  left: 6%; top: 58%;
  width: 4px; height: 5px;
  background: radial-gradient(circle at 32% 28%, #d6f6fd 0%, #7fd8ee 32%, #38bdf8 68%, #1c8fc4 100%);
  border-radius: 50% 50% 50% 0;
  transform: rotate(45deg);
  box-shadow: 0 0 2px rgba(15,90,130,.45);
  opacity: 0;
  transform-origin: 50% 15%;
  animation: logo-single-drip 6.4s cubic-bezier(.55,.06,.68,.19) infinite 1.4s;
}
@keyframes logo-shine-sweep {
  0%, 6%  { left: -35%; }
  46%     { left: 125%; }
  100%    { left: 125%; }
}
@keyframes logo-single-drip {
  0%   { opacity: 0;    top: 56%;  transform: rotate(43deg) translateX(0)    scale(.55, .7); }
  6%   { opacity: .92;  transform: rotate(46deg) translateX(.3px) scale(.8, .85); }
  16%  { opacity: .95;  top: 66%;  transform: rotate(44deg) translateX(-.3px) scale(1, 1.05); }
  38%  { opacity: .95;  top: 96%;  transform: rotate(45deg) translateX(.2px) scale(.95, 1.35); }
  58%  { opacity: .9;   top: 130%; transform: rotate(45deg) translateX(0)    scale(.85, 1.6); }
  66%  { opacity: .55;  top: 144%; transform: rotate(45deg) scale(1.5, .45); }
  72%  { opacity: 0;    top: 148%; transform: rotate(45deg) scale(1.7, .3); }
  100% { opacity: 0;    top: 56%;  transform: rotate(43deg) scale(.55, .7); }
}

/* ---------- Sewer & Drainage: it's actually dripping, on a loop ---------- */
.page-sewer .header .brand-logo {
  animation: logo-water-glow 5.8s ease-in-out infinite;
}
.page-sewer .logo-fx i {
  display: block;
  background: radial-gradient(circle at 32% 28%, #ddf7fc 0%, #8fdcef 30%, #38bdf8 66%, #1c8fc4 100%);
  border-radius: 50% 50% 50% 0;
  transform: rotate(45deg);
  box-shadow: 0 0 2px rgba(15,90,130,.5);
  opacity: 0;
  transform-origin: 50% 15%;
}
.page-sewer .logo-fx i:nth-child(1) { left: 9%;  width: 4px; height: 5px; animation: logo-drip-fall 2.35s cubic-bezier(.55,.06,.68,.19) infinite -.15s; }
.page-sewer .logo-fx i:nth-child(2) { left: 41%; width: 5px; height: 6px; animation: logo-drip-fall 2.75s cubic-bezier(.55,.06,.68,.19) infinite .82s; }
.page-sewer .logo-fx i:nth-child(3) { left: 71%; width: 4px; height: 5px; animation: logo-drip-fall 2.9s  cubic-bezier(.55,.06,.68,.19) infinite 1.68s; }
@keyframes logo-drip-fall {
  0%   { top: 48%;  opacity: 0;   transform: rotate(43deg) translateX(0) scale(.5, .65); }
  7%   { opacity: 1; transform: rotate(46deg) translateX(.3px) scale(.85, .9); }
  20%  { top: 60%; transform: rotate(44deg) translateX(-.3px) scale(1, 1.1); }
  48%  { top: 105%; opacity: 1; transform: rotate(45deg) translateX(.2px) scale(.92, 1.4); }
  68%  { top: 148%; opacity: .95; transform: rotate(45deg) scale(.85, 1.65); }
  76%  { opacity: .5; top: 163%; transform: rotate(45deg) scale(1.6, .4); }
  82%  { opacity: 0; top: 167%; transform: rotate(45deg) scale(1.8, .25); }
  100% { top: 48%;  opacity: 0; transform: rotate(43deg) scale(.5, .65); }
}
@keyframes logo-water-glow {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(56,189,248,.15)); }
  45%      { filter: drop-shadow(0 0 3px rgba(56,189,248,.22)); }
  62%      { filter: drop-shadow(0 0 7px rgba(56,189,248,.5)); }
  80%      { filter: drop-shadow(0 0 4px rgba(56,189,248,.3)); }
}

/* ---------- HVAC: the mark catches fire ---------- */
.page-hvac .header .brand-logo {
  animation: logo-fire-glow 2.9s ease-in-out infinite;
}
.page-hvac .logo-fx i {
  display: block;
  bottom: 57%;
  width: 6px; height: 13px;
  border-radius: 48% 52% 55% 45% / 60% 65% 35% 40%;
  background: linear-gradient(0deg, #c2410c 0%, #ea580c 38%, #f97316 68%, #fdba74 100%);
  filter: blur(.4px);
  opacity: 0;
  transform-origin: bottom center;
}
.page-hvac .logo-fx i::before {
  left: 50%; bottom: 0;
  width: 40%; height: 55%;
  transform: translateX(-50%);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: linear-gradient(0deg, #fde047 0%, #fef9c3 75%, transparent 100%);
  opacity: .85;
  filter: blur(.3px);
}
.page-hvac .logo-fx i:nth-child(1) { left: 16%; height: 11px; animation: logo-flame-lick-a 1.47s cubic-bezier(.4,.02,.3,1) infinite -.1s; }
.page-hvac .logo-fx i:nth-child(2) { left: 41%; height: 17px; animation: logo-flame-lick-b 1.68s cubic-bezier(.4,.02,.3,1) infinite -.62s; }
.page-hvac .logo-fx i:nth-child(3) { left: 65%; height: 12px; animation: logo-flame-lick-a 1.31s cubic-bezier(.4,.02,.3,1) infinite -1.02s; }
@keyframes logo-flame-lick-a {
  0%   { opacity: 0;   transform: scaleY(.45) scaleX(.75) translateY(0)   rotate(-1deg); }
  22%  { opacity: .85; transform: scaleY(.8)  scaleX(.95) translateY(-1px) rotate(1deg); }
  41%  { opacity: 1;   transform: scaleY(1.05) scaleX(1.08) translateY(-4px) rotate(-2deg); }
  57%  { opacity: .9;  transform: scaleY(.85) scaleX(.9)  translateY(-2px) rotate(2deg); }
  74%  { opacity: .55; transform: scaleY(.65) scaleX(.85) translateY(-1px) rotate(-1deg); }
  100% { opacity: 0;   transform: scaleY(.45) scaleX(.75) translateY(0)   rotate(1deg); }
}
@keyframes logo-flame-lick-b {
  0%   { opacity: 0;   transform: scaleY(.5)  scaleX(.8) translateY(0)    rotate(2deg); }
  19%  { opacity: .8;  transform: scaleY(.9)  scaleX(1)  translateY(-2px) rotate(-1deg); }
  36%  { opacity: 1;   transform: scaleY(1.1) scaleX(1.1) translateY(-5px) rotate(2deg); }
  50%  { opacity: .95; transform: scaleY(.95) scaleX(.98) translateY(-3px) rotate(-2deg); }
  68%  { opacity: .6;  transform: scaleY(.7)  scaleX(.88) translateY(-1px) rotate(1deg); }
  86%  { opacity: .2;  transform: scaleY(.55) scaleX(.8) translateY(0)    rotate(-1deg); }
  100% { opacity: 0;   transform: scaleY(.5)  scaleX(.8) translateY(0)    rotate(2deg); }
}
@keyframes logo-fire-glow {
  0%   { filter: drop-shadow(0 0 3px rgba(249,115,22,.35)) brightness(1); }
  17%  { filter: drop-shadow(0 0 6px rgba(239,68,68,.5)) brightness(1.04); }
  33%  { filter: drop-shadow(0 0 4px rgba(249,115,22,.4)) brightness(.98); }
  49%  { filter: drop-shadow(0 0 10px rgba(239,68,68,.65)) brightness(1.1); }
  64%  { filter: drop-shadow(0 0 5px rgba(249,115,22,.42)) brightness(1); }
  81%  { filter: drop-shadow(0 0 8px rgba(239,68,68,.55)) brightness(1.06); }
  100% { filter: drop-shadow(0 0 3px rgba(249,115,22,.35)) brightness(1); }
}

/* ---------- Electrical: sparks off the bolt, lights flicker ---------- */
.page-electrical .header .brand-logo {
  animation: logo-electric-flicker 4.3s steps(1, end) infinite;
}
.page-electrical .logo-fx i {
  display: block;
  width: 6px; height: 13px;
  background: linear-gradient(180deg, #fff9db 0%, #fde047 45%, #f59e0b 100%);
  clip-path: polygon(62% 0%, 18% 52%, 46% 52%, 32% 100%, 88% 42%, 52% 42%);
  opacity: 0;
  filter: blur(.3px) drop-shadow(0 0 4px rgba(250,204,21,.9)) drop-shadow(0 0 9px rgba(125,211,252,.5));
}
.page-electrical .logo-fx i:nth-child(1) { left: 30%; top: 16%; animation: logo-spark-flash-a 4.3s steps(1, end) infinite 0s; }
.page-electrical .logo-fx i:nth-child(2) { left: 57%; top: 9%;  width: 5px; height: 10px; animation: logo-spark-flash-b 4.3s steps(1, end) infinite -2.1s; }
.page-electrical .logo-fx i:nth-child(3) { display: none; }
/* Two irregular flash trains per cycle rather than one clean pulse — real
   arcing stutters: a quick double-strike, a beat of dark, a single tail. */
@keyframes logo-spark-flash-a {
  0%, 43%, 100% { opacity: 0; transform: translateX(0); }
  44%  { opacity: 1;   transform: translateX(-.4px); }
  45%  { opacity: .15; }
  46%  { opacity: .9;  transform: translateX(.3px); }
  48%  { opacity: 0; }
  71%  { opacity: 0; }
  72%  { opacity: .75; transform: translateX(.2px); }
  73%  { opacity: 0; }
}
@keyframes logo-spark-flash-b {
  0%, 60%, 100% { opacity: 0; transform: translateX(0); }
  61%  { opacity: .95; transform: translateX(.4px); }
  62%  { opacity: .1; }
  63%  { opacity: .8;  transform: translateX(-.3px); }
  65%  { opacity: 0; }
  90%  { opacity: 0; }
  91%  { opacity: .6; }
  92%  { opacity: 0; }
}
@keyframes logo-electric-flicker {
  0%, 43%, 100% { filter: drop-shadow(0 0 2px rgba(250,204,21,.25)) brightness(1); }
  44%  { filter: drop-shadow(0 0 11px rgba(250,204,21,.95)) brightness(1.35); }
  45%  { filter: drop-shadow(0 0 2px rgba(250,204,21,.2)) brightness(.92); }
  46%  { filter: drop-shadow(0 0 13px rgba(125,211,252,.9)) brightness(1.4); }
  48%  { filter: drop-shadow(0 0 2px rgba(250,204,21,.2)) brightness(1); }
  72%  { filter: drop-shadow(0 0 8px rgba(250,204,21,.7)) brightness(1.18); }
  73%  { filter: drop-shadow(0 0 2px rgba(250,204,21,.2)) brightness(1); }
  91%  { filter: drop-shadow(0 0 6px rgba(125,211,252,.6)) brightness(1.12); }
  93%  { filter: drop-shadow(0 0 2px rgba(250,204,21,.2)) brightness(1); }
}

/* Click FX — themed splash effects for clicks on empty page areas (service pages only) */
.click-fx {
  position: fixed;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 4000;
}

/* Plumbing: wrench pop */
.click-fx--wrench .wrench-icon {
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  color: #38bdf8;
  filter: drop-shadow(0 0 0 #ffffff) drop-shadow(0 2px 5px rgba(10, 42, 82, 0.55)) drop-shadow(0 0 8px rgba(255, 255, 255, 0.85));
  stroke: #ffffff;
  stroke-width: 0.6;
  transform: translate(-50%, -50%) rotate(-50deg) scale(0);
  opacity: 0;
  animation: wrenchPop 700ms cubic-bezier(.34, 1.56, .64, 1) forwards;
}
@keyframes wrenchPop {
  0%   { transform: translate(-50%, -50%) rotate(-55deg) scale(0.2); opacity: 0; }
  30%  { transform: translate(-50%, -50%) rotate(14deg) scale(1.18); opacity: 1; }
  50%  { transform: translate(-50%, -50%) rotate(-8deg) scale(1); opacity: 1; }
  75%  { transform: translate(-50%, -50%) rotate(3deg) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(0deg) scale(0.82); opacity: 0; }
}

/* Sewer & Drainage: water splash */
.click-fx--splash .splash-ring {
  position: absolute;
  left: 0;
  top: 0;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  border: 2px solid rgba(47, 127, 196, 0.7);
  transform: scale(0);
  opacity: 1;
  animation: splashRing 720ms ease-out forwards;
}
.click-fx--splash .splash-ring--2 { animation-delay: 100ms; border-color: rgba(47, 127, 196, 0.45); }
@keyframes splashRing {
  to { transform: scale(6); opacity: 0; }
}
.click-fx--splash .splash-drop {
  position: absolute;
  left: 0;
  top: 0;
  width: 7px;
  height: 9px;
  margin: -5px 0 0 -3.5px;
  border-radius: 50% 50% 50% 0;
  background: linear-gradient(160deg, #cdeafc, #2f7fc4);
  transform: rotate(45deg) scale(0.5);
  opacity: 0;
  animation: splashDrop 680ms cubic-bezier(.3, .6, .4, 1) forwards;
}
@keyframes splashDrop {
  0%   { transform: translate(0, 0) rotate(45deg) scale(0.4); opacity: 1; }
  55%  { transform: translate(var(--dx), var(--dy)) rotate(45deg) scale(1); opacity: 1; }
  100% { transform: translate(calc(var(--dx) * 1.25), calc(var(--dy) * 1.25 + 16px)) rotate(45deg) scale(0.55); opacity: 0; }
}

/* HVAC: fire burst */
.click-fx--fire .fire-glow {
  position: absolute;
  left: 0;
  top: 0;
  width: 54px;
  height: 54px;
  margin: -27px 0 0 -27px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 150, 50, 0.55), rgba(255, 120, 30, 0) 70%);
  transform: scale(0.25);
  opacity: 0;
  animation: fireGlow 600ms ease-out forwards;
}
@keyframes fireGlow {
  0%   { transform: scale(0.2); opacity: 0; }
  30%  { opacity: 0.9; }
  100% { transform: scale(1.7); opacity: 0; }
}
.click-fx--fire .fire-flame {
  position: absolute;
  left: 0;
  top: 0;
  width: 15px;
  height: 25px;
  margin: -25px 0 0 -7.5px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: radial-gradient(circle at 50% 30%, #ffe27a, #ff9d3d 55%, #ff5b1f 85%);
  transform-origin: bottom center;
  opacity: 0;
  animation: fireBurst 650ms ease-out forwards;
}
.click-fx--fire .fire-flame.f2 { margin-left: -18.5px; width: 11px; height: 19px; animation-delay: 45ms; }
.click-fx--fire .fire-flame.f3 { margin-left: 3.5px; width: 11px; height: 19px; animation-delay: 90ms; }
@keyframes fireBurst {
  0%   { transform: scaleY(0.3) scaleX(0.6) translateY(0); opacity: 0; }
  28%  { opacity: 1; }
  55%  { transform: scaleY(1.15) scaleX(1) translateY(-4px); opacity: 1; }
  100% { transform: scaleY(0.5) scaleX(0.5) translateY(-30px); opacity: 0; }
}

/* Electrical: lightning strike */
.click-fx--bolt .bolt-icon {
  position: absolute;
  left: 0;
  top: 0;
  width: 32px;
  height: 32px;
  margin: -16px 0 0 -16px;
  color: #ffd23f;
  filter: drop-shadow(0 0 6px rgba(255, 210, 60, 0.9)) drop-shadow(0 0 14px rgba(120, 190, 255, 0.6));
  transform: scale(0.5);
  opacity: 0;
  animation: boltFlash 480ms steps(1, end) forwards;
}
@keyframes boltFlash {
  0%   { opacity: 0; transform: scale(0.5); }
  8%   { opacity: 1; transform: scale(1.15); }
  18%  { opacity: 0.15; }
  26%  { opacity: 1; transform: scale(1); }
  42%  { opacity: 1; }
  62%  { opacity: 0.8; }
  100% { opacity: 0; transform: scale(1); }
}
.click-fx--bolt .spark {
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
  border-radius: 50%;
  background: #fff2b8;
  box-shadow: 0 0 6px 1px rgba(255, 220, 120, 0.9);
  transform: translate(0, 0) scale(1);
  opacity: 1;
  animation: sparkOut 420ms ease-out forwards;
}
@keyframes sparkOut {
  to { transform: translate(var(--dx), var(--dy)) scale(0.3); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .click-fx { display: none; }
}