/* =============================================================
   BC HOME SERVICE — v8.7 "v9" hero polish for internal pages
   Applied ONLY to pages carrying <body class="hero-v9"> (phase 1:
   service hubs + about/contact/service-areas). Additive layer:
   refines typography, chips, breadcrumb and CTA depth inside the
   page hero. Nothing is removed — the base design stays intact.
   ============================================================= */

/* — refined top hairline + depth on the hero itself — */
body.hero-v9 .page-hero { position: relative; }
body.hero-v9 .page-hero::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--svc-color, #2E86DE), var(--svc-color-2, #4A9AE8), #FF6B35, transparent);
  opacity: 0.85;
  z-index: 5;
  pointer-events: none;
}

/* — breadcrumb as a glass chip — */
body.hero-v9 .page-hero .breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
body.hero-v9 .page-hero .breadcrumb .current { color: #fff; font-weight: 700; }
body.hero-v9 .page-hero .breadcrumb .sep { opacity: 0.45; }

/* — eyebrow chip with a live dot — */
body.hero-v9 .page-hero .section-eyebrow.on-dark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 15px;
  border-radius: 999px;
  background: rgba(72, 202, 228, 0.12);
  border: 1px solid rgba(72, 202, 228, 0.3);
  color: #8FE3F7;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
body.hero-v9 .page-hero .section-eyebrow.on-dark::after {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #2ECC71;
  box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.55);
  animation: heroV9Pulse 2s infinite;
}
@keyframes heroV9Pulse {
  0% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.55); }
  70% { box-shadow: 0 0 0 8px rgba(46, 204, 113, 0); }
  100% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0); }
}

/* — headline: tighter, deeper, calmer — */
body.hero-v9 .page-hero h1.hero-h1-3d {
  letter-spacing: -0.03em;
  line-height: 1.08;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35);
}
body.hero-v9 .page-hero h1 .grad-3d {
  background: linear-gradient(100deg, #48CAE4 0%, #4A9AE8 45%, #FF8C42 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 6px 22px rgba(72, 202, 228, 0.25));
}

/* — lead paragraph readability — */
body.hero-v9 .page-hero p.lead {
  color: rgba(255, 255, 255, 0.82);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.3);
  max-width: 620px;
}

/* — CTA depth + motion — */
body.hero-v9 .page-hero .hero-ctas .btn-primary {
  box-shadow: 0 18px 44px -14px rgba(255, 107, 53, 0.65), 0 2px 8px rgba(10, 22, 40, 0.35);
  transition: transform 0.22s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)),
              box-shadow 0.22s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
}
body.hero-v9 .page-hero .hero-ctas .btn-primary:hover {
  transform: translateY(-3px) scale(1.015);
  box-shadow: 0 26px 60px -16px rgba(255, 107, 53, 0.8), 0 4px 12px rgba(10, 22, 40, 0.4);
}
body.hero-v9 .page-hero .hero-ctas .btn-outline,
body.hero-v9 .page-hero .hero-ctas .btn-blue-outline {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: transform 0.22s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)), border-color 0.22s;
}
body.hero-v9 .page-hero .hero-ctas .btn-outline:hover,
body.hero-v9 .page-hero .hero-ctas .btn-blue-outline:hover {
  transform: translateY(-3px);
}

@media (prefers-reduced-motion: reduce) {
  body.hero-v9 .page-hero .section-eyebrow.on-dark::after { animation: none; }
  body.hero-v9 .page-hero .hero-ctas .btn-primary,
  body.hero-v9 .page-hero .hero-ctas .btn-outline,
  body.hero-v9 .page-hero .hero-ctas .btn-blue-outline { transition: none; }
}