/* ==========================================================================
   PWLI AURORA AMBIENT SYSTEM — SITE-WIDE
   Premier Weight Loss Indianapolis
   
   Drop into: Appearance > Customize > Additional CSS
   Or enqueue in functions.php
   
   This system covers ALL pages and section types across the entire site.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. GLOBAL FIX — Kill dead space padding on site-main
   -------------------------------------------------------------------------- */
main.site-main {
  padding-top: 0 !important;
}

/* --------------------------------------------------------------------------
   2. GLOBAL BODY AURORA ORBS
   Two fixed gradient orbs that float across the viewport on every page.
   They're position:fixed so they persist through scroll.
   -------------------------------------------------------------------------- */
body {
  position: relative;
  overflow-x: hidden;
}

body::before,
body::after {
  content: '';
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(90px);
  opacity: 0;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  will-change: transform, opacity;
}

/* Orb 1 — Teal: starts upper-right, drifts diagonally down-left */
body::before {
  width: clamp(500px, 50vw, 1000px);
  height: clamp(500px, 50vw, 1000px);
  background: radial-gradient(
    circle,
    rgba(107, 201, 205, 0.35) 0%,
    rgba(107, 201, 205, 0.10) 45%,
    transparent 70%
  );
  top: -10%;
  right: -10%;
  animation: auroraOrb1 18s ease-in-out infinite alternate;
}

/* Orb 2 — Pink: starts lower-left, drifts diagonally up-right */
body::after {
  width: clamp(450px, 45vw, 900px);
  height: clamp(450px, 45vw, 900px);
  background: radial-gradient(
    circle,
    rgba(237, 110, 160, 0.30) 0%,
    rgba(237, 110, 160, 0.08) 45%,
    transparent 70%
  );
  bottom: 10%;
  left: -8%;
  animation: auroraOrb2 22s ease-in-out infinite alternate;
}

/* --------------------------------------------------------------------------
   3. SECTION-LEVEL AMBIENT GLOWS
   
   Targets every section type used across the site:
   - Custom theme sections (.team-hero, .team-section, .team-cta, etc.)
   - Elementor sections (.elementor-section)
   - Homepage sections (.hero, .pricing-section, .loyalty-section, etc.)
   - Generic WordPress (.entry-content > section, .wp-block-group)
   
   Uses alternating teal/pink glows based on :nth-child for variety.
   -------------------------------------------------------------------------- */

/* --- Make all targetable sections aurora-ready --- */
.hero,
.team-hero,
.team-section,
.team-section.alt,
.team-cta,
.pricing-section,
.loyalty-section,
.aesthetics-section,
.team-about-section,
.locations-section,
.faq-section,
.cta-section,
.service-hero,
.service-content,
.testimonials-section,
.before-after-section,
.video-section,
.elementor-section,
.elementor-top-section,
.wp-block-group,
.entry-content > section,
section[class*="-section"],
section[class*="-hero"] {
  position: relative;
  overflow: visible;
}

/* --- Ensure ALL content inside sections sits above aurora --- */
.hero > *,
.team-hero > *,
.team-section > *,
.team-cta > *,
.pricing-section > *,
.loyalty-section > *,
.aesthetics-section > *,
.team-about-section > *,
.locations-section > *,
.faq-section > *,
.cta-section > *,
.service-hero > *,
.service-content > *,
.testimonials-section > *,
.before-after-section > *,
.video-section > *,
.elementor-section > *,
.elementor-top-section > *,
.wp-block-group > *,
section[class*="-section"] > *,
section[class*="-hero"] > * {
  position: relative;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   3a. ALTERNATING SECTION GLOWS (nth-child pattern)
   
   Even sections get teal, odd sections get pink.
   This creates a natural rhythm down the page without
   needing to target every individual class.
   -------------------------------------------------------------------------- */

/* Teal glow — odd sections, biased left */
.elementor-top-section:nth-child(odd)::before,
main.site-main > section:nth-child(odd)::before,
main.site-main > div > section:nth-child(odd)::before {
  content: '';
  position: absolute;
  width: clamp(250px, 38vw, 600px);
  height: clamp(250px, 38vw, 600px);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(100px);
  background: radial-gradient(
    circle,
    rgba(107, 201, 205, 0.11) 0%,
    transparent 60%
  );
  top: 25%;
  left: -5%;
  animation: auroraDriftRight 15s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

/* Pink glow — even sections, biased right */
.elementor-top-section:nth-child(even)::after,
main.site-main > section:nth-child(even)::after,
main.site-main > div > section:nth-child(even)::after {
  content: '';
  position: absolute;
  width: clamp(250px, 35vw, 550px);
  height: clamp(250px, 35vw, 550px);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(100px);
  background: radial-gradient(
    circle,
    rgba(237, 110, 160, 0.09) 0%,
    transparent 60%
  );
  top: 20%;
  right: -5%;
  animation: auroraDriftLeft 17s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

/* --------------------------------------------------------------------------
   3b. NAMED SECTION GLOWS (for key sections that exist on specific pages)
   -------------------------------------------------------------------------- */

/* Hero sections — centered teal breathing pulse (every page) */
.hero::before,
.team-hero::before,
.service-hero::before,
section[class*="-hero"]::before {
  content: '';
  position: absolute;
  width: clamp(300px, 50vw, 700px);
  height: clamp(300px, 50vw, 700px);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(110px);
  background: radial-gradient(
    circle,
    rgba(107, 201, 205, 0.13) 0%,
    transparent 65%
  );
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: auroraPulse 12s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

/* Team/about sections — pink accent right */
.team-section::after,
.team-about-section::after {
  content: '';
  position: absolute;
  width: clamp(250px, 35vw, 600px);
  height: clamp(250px, 35vw, 600px);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(100px);
  background: radial-gradient(
    circle,
    rgba(237, 110, 160, 0.10) 0%,
    transparent 60%
  );
  top: 20%;
  right: -5%;
  animation: auroraDriftLeft 16s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

/* Alt team section — teal accent left */
.team-section.alt::before {
  content: '';
  position: absolute;
  width: clamp(250px, 35vw, 550px);
  height: clamp(250px, 35vw, 550px);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(100px);
  background: radial-gradient(
    circle,
    rgba(107, 201, 205, 0.10) 0%,
    transparent 60%
  );
  top: 30%;
  left: -5%;
  animation: auroraDriftRight 14s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

/* Pricing section — teal-pink combined, centered */
.pricing-section::before {
  content: '';
  position: absolute;
  width: clamp(350px, 50vw, 800px);
  height: clamp(250px, 30vw, 500px);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(110px);
  background: radial-gradient(
    ellipse,
    rgba(107, 201, 205, 0.11) 0%,
    rgba(237, 110, 160, 0.07) 45%,
    transparent 70%
  );
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: auroraPulse 14s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

/* CTA sections — dramatic combined glow */
.team-cta::before,
.cta-section::before,
section[class*="cta"]::before {
  content: '';
  position: absolute;
  width: clamp(400px, 55vw, 900px);
  height: clamp(300px, 30vw, 500px);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(110px);
  background: radial-gradient(
    ellipse,
    rgba(107, 201, 205, 0.13) 0%,
    rgba(237, 110, 160, 0.09) 40%,
    transparent 70%
  );
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: auroraPulse 10s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

/* Loyalty/rewards section — gold-teal warmth */
.loyalty-section::before {
  content: '';
  position: absolute;
  width: clamp(300px, 40vw, 650px);
  height: clamp(300px, 40vw, 650px);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(100px);
  background: radial-gradient(
    circle,
    rgba(245, 166, 35, 0.08) 0%,
    rgba(107, 201, 205, 0.06) 40%,
    transparent 65%
  );
  top: 35%;
  left: 15%;
  animation: auroraDriftRight 13s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

/* Aesthetics section — pink dominant */
.aesthetics-section::before {
  content: '';
  position: absolute;
  width: clamp(300px, 42vw, 700px);
  height: clamp(300px, 42vw, 700px);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(110px);
  background: radial-gradient(
    circle,
    rgba(237, 110, 160, 0.12) 0%,
    rgba(155, 89, 182, 0.05) 50%,
    transparent 65%
  );
  top: 40%;
  right: 10%;
  animation: auroraPulse 15s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

/* Testimonials — warm teal centered */
.testimonials-section::before,
.before-after-section::before {
  content: '';
  position: absolute;
  width: clamp(280px, 38vw, 600px);
  height: clamp(280px, 38vw, 600px);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(100px);
  background: radial-gradient(
    circle,
    rgba(107, 201, 205, 0.10) 0%,
    transparent 60%
  );
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: auroraPulse 16s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

/* Locations section — dual subtle orbs */
.locations-section::before {
  content: '';
  position: absolute;
  width: clamp(200px, 25vw, 400px);
  height: clamp(200px, 25vw, 400px);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(90px);
  background: radial-gradient(
    circle,
    rgba(107, 201, 205, 0.09) 0%,
    transparent 60%
  );
  top: 20%;
  left: 10%;
  animation: auroraDriftRight 12s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

.locations-section::after {
  content: '';
  position: absolute;
  width: clamp(200px, 25vw, 400px);
  height: clamp(200px, 25vw, 400px);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(90px);
  background: radial-gradient(
    circle,
    rgba(237, 110, 160, 0.07) 0%,
    transparent 60%
  );
  bottom: 20%;
  right: 10%;
  animation: auroraDriftLeft 14s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

/* FAQ — subtle teal */
.faq-section::before {
  content: '';
  position: absolute;
  width: clamp(250px, 32vw, 500px);
  height: clamp(250px, 32vw, 500px);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(100px);
  background: radial-gradient(
    circle,
    rgba(107, 201, 205, 0.08) 0%,
    transparent 60%
  );
  top: 40%;
  right: 5%;
  animation: auroraDriftLeft 18s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

/* --------------------------------------------------------------------------
   4. ANIMATED GRADIENT BAR
   Shows at the top of every hero section — teal-to-pink sweep
   -------------------------------------------------------------------------- */
.hero::after,
.team-hero::after,
.service-hero::after,
.med-hero::after,
.meds-hero::after,
.location-hero::after,
.recipe-hero::after,
section[class*="-hero"]::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--pwl-teal, #6bc9cd),
    var(--pwl-pink, #ed6ea0),
    var(--pwl-teal, #6bc9cd),
    var(--pwl-pink, #ed6ea0)
  );
  background-size: 300% 100%;
  animation: gradientSweep 8s linear infinite;
  z-index: 2;
}

/* --------------------------------------------------------------------------
   5. ELEMENTOR DEEP TARGETING
   
   Elementor wraps content in deeply nested divs. These selectors ensure
   the aurora system works regardless of Elementor's structure.
   -------------------------------------------------------------------------- */

/* Make Elementor sections aurora-ready */
.elementor-section-wrap > .elementor-section,
.elementor > .elementor-section,
[data-elementor-type="wp-page"] > .elementor-section,
[data-elementor-type="wp-post"] > .elementor-section {
  position: relative;
  overflow: visible;
}

/* Elementor content above aurora */
.elementor-section > .elementor-container,
.elementor-section > .elementor-background-overlay ~ * {
  position: relative;
  z-index: 1;
}

/* Elementor odd sections — teal glow */
.elementor-section-wrap > .elementor-section:nth-child(odd)::before,
.elementor > .elementor-section:nth-child(odd)::before {
  content: '';
  position: absolute;
  width: clamp(250px, 38vw, 600px);
  height: clamp(250px, 38vw, 600px);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(100px);
  background: radial-gradient(
    circle,
    rgba(107, 201, 205, 0.10) 0%,
    transparent 60%
  );
  top: 25%;
  left: -3%;
  animation: auroraDriftRight 15s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

/* Elementor even sections — pink glow */
.elementor-section-wrap > .elementor-section:nth-child(even)::after,
.elementor > .elementor-section:nth-child(even)::after {
  content: '';
  position: absolute;
  width: clamp(250px, 35vw, 550px);
  height: clamp(250px, 35vw, 550px);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(100px);
  background: radial-gradient(
    circle,
    rgba(237, 110, 160, 0.08) 0%,
    transparent 60%
  );
  top: 20%;
  right: -3%;
  animation: auroraDriftLeft 17s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

/* --------------------------------------------------------------------------
   6. KEYFRAME ANIMATIONS
   -------------------------------------------------------------------------- */

/* Global orb 1: Teal diagonal drift with scale breathing */
@keyframes auroraOrb1 {
  0%   { opacity: 0.6;  transform: translate(0, 0) scale(1); }
  25%  { opacity: 0.85; }
  50%  { opacity: 0.7;  transform: translate(-15vw, 20vh) scale(1.15); }
  75%  { opacity: 0.9; }
  100% { opacity: 0.65; transform: translate(-25vw, 35vh) scale(0.9); }
}

/* Global orb 2: Pink counter-diagonal drift */
@keyframes auroraOrb2 {
  0%   { opacity: 0.55; transform: translate(0, 0) scale(1); }
  30%  { opacity: 0.8; }
  50%  { opacity: 0.65; transform: translate(18vw, -25vh) scale(1.2); }
  70%  { opacity: 0.85; }
  100% { opacity: 0.6;  transform: translate(30vw, -40vh) scale(0.85); }
}

/* Section breathing pulse — scale + opacity */
@keyframes auroraPulse {
  0%   { opacity: 0.5;  transform: translate(-50%, -50%) scale(0.85); }
  50%  { opacity: 0.9;  transform: translate(-50%, -50%) scale(1.1); }
  100% { opacity: 0.5;  transform: translate(-50%, -50%) scale(0.85); }
}

/* Section drift — moves right */
@keyframes auroraDriftRight {
  0%   { opacity: 0.4; transform: translateX(0) scale(1); }
  100% { opacity: 0.75; transform: translateX(8vw) scale(1.08); }
}

/* Section drift — moves left */
@keyframes auroraDriftLeft {
  0%   { opacity: 0.4; transform: translateX(0) scale(1); }
  100% { opacity: 0.75; transform: translateX(-8vw) scale(1.08); }
}

/* Gradient bar sweep */
@keyframes gradientSweep {
  0%   { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

/* --------------------------------------------------------------------------
   7. PERFORMANCE SAFEGUARDS
   -------------------------------------------------------------------------- */

/* Respect reduced-motion user preference */
@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after,
  .hero::before, .hero::after,
  .team-hero::before, .team-hero::after,
  .team-section::after,
  .team-section.alt::before,
  .team-cta::before,
  .pricing-section::before,
  .loyalty-section::before,
  .aesthetics-section::before,
  .cta-section::before,
  .service-hero::before, .service-hero::after,
  .testimonials-section::before,
  .before-after-section::before,
  .locations-section::before, .locations-section::after,
  .faq-section::before,
  .team-about-section::after,
  .elementor-section::before,
  .elementor-section::after,
  section[class*="-section"]::before,
  section[class*="-section"]::after,
  section[class*="-hero"]::before,
  section[class*="-hero"]::after,
  .med-hero::before,
  .med-section::after,
  .page-hero::before,
  .page-cta::before,
  .content-section::after,
  .meds-hero::before,
  .meds-final-cta::before,
  .med-final-cta::before,
  .location-cta::before,
  .tier-cta::before {
    animation: none !important;
    opacity: 0.35 !important;
  }
}

/* Mobile: lighter blur + reduced opacity for GPU performance */
@media (max-width: 768px) {
  body::before,
  body::after {
    filter: blur(80px);
  }

  body::before { animation-name: auroraOrb1Mobile; }
  body::after  { animation-name: auroraOrb2Mobile; }

  /* Section orbs: lighter on mobile */
  .hero::before,
  .team-hero::before,
  .service-hero::before,
  .team-section::after,
  .team-section.alt::before,
  .pricing-section::before,
  .loyalty-section::before,
  .aesthetics-section::before,
  .cta-section::before,
  .team-cta::before,
  .testimonials-section::before,
  .before-after-section::before,
  .locations-section::before, .locations-section::after,
  .faq-section::before,
  .elementor-section::before,
  .elementor-section::after,
  section[class*="-section"]::before,
  section[class*="-hero"]::before,
  .med-hero::before,
  .med-section::after,
  .page-hero::before,
  .page-cta::before,
  .content-section::after,
  .meds-hero::before,
  .meds-final-cta::before,
  .med-final-cta::before,
  .location-cta::before,
  .tier-cta::before {
    filter: blur(70px);
  }
}

@keyframes auroraOrb1Mobile {
  0%   { opacity: 0.2;  transform: translate(0, 0) scale(0.8); }
  100% { opacity: 0.35; transform: translate(-10vw, 15vh) scale(0.9); }
}

@keyframes auroraOrb2Mobile {
  0%   { opacity: 0.18; transform: translate(0, 0) scale(0.8); }
  100% { opacity: 0.3;  transform: translate(10vw, -15vh) scale(0.9); }
}

/* --------------------------------------------------------------------------
   8. UTILITY: AURORA OPT-OUT
   Add class .no-aurora to any section to disable its glow.
   -------------------------------------------------------------------------- */
.no-aurora::before,
.no-aurora::after {
  display: none !important;
}

/* --------------------------------------------------------------------------
   9. BACKGROUND & OVERFLOW OVERRIDES
   
   The theme's sections use opaque backgrounds (var(--navy), gradients)
   that completely block the aurora orbs. These overrides make section 
   backgrounds slightly translucent so the body-level fixed orbs bleed
   through subtly, and change overflow to visible so section-level orbs
   aren't clipped.
   
   Navy at 93% opacity is visually near-identical but lets the aurora
   breathe through. The 7% transparency is barely perceptible on static
   backgrounds but becomes alive when teal/pink orbs drift behind.
   -------------------------------------------------------------------------- */

/* --- Translucent section backgrounds (from main.css) --- */
.hero {
  overflow: visible !important;
}

.social-proof-section {
  background: linear-gradient(180deg, rgba(22, 27, 51, 0.93), rgba(31, 37, 68, 0.93)) !important;
  overflow: visible !important;
}

.pricing-section {
  background: rgba(22, 27, 51, 0.93) !important;
}

.loyalty-section {
  background: linear-gradient(180deg, rgba(31, 37, 68, 0.93), rgba(22, 27, 51, 0.93)) !important;
  overflow: visible !important;
}

.team-section {
  background: rgba(22, 27, 51, 0.93) !important;
}

.aesthetics-section {
  background: linear-gradient(180deg, rgba(22, 27, 51, 0.93), rgba(31, 37, 68, 0.93)) !important;
}

.locations-section {
  background: linear-gradient(180deg, rgba(22, 27, 51, 0.93), rgba(31, 37, 68, 0.93)) !important;
}

.faq-section {
  background: rgba(22, 27, 51, 0.93) !important;
}

.cta-section {
  background: rgba(22, 27, 51, 0.90) !important;
}

/* --- Translucent section backgrounds (from pages.css) --- */
.content-section.alt {
  background: linear-gradient(180deg, rgba(31, 37, 68, 0.93), rgba(22, 27, 51, 0.93)) !important;
}

.content-section.gradient {
  background: linear-gradient(180deg, rgba(22, 27, 51, 0.93), rgba(31, 37, 68, 0.93)) !important;
}

.tech-section {
  background: rgba(22, 27, 51, 0.93) !important;
}

.reviews-section {
  background: rgba(22, 27, 51, 0.93) !important;
}

/* --- Team page sections (pages.css) --- */
.team-hero {
  overflow: visible !important;
}

.team-cta {
  background: rgba(22, 27, 51, 0.90) !important;
}

.physician-hero {
  overflow: visible !important;
}

/* --- Medication & service pages --- */
.med-hero,
.service-hero,
.botox-hero,
.morpheus8-hero {
  overflow: visible !important;
}

/* --- General section overflow fix --- */
section[class*="-section"] {
  overflow: visible !important;
}

section[class*="-hero"] {
  overflow: visible !important;
}

/* --------------------------------------------------------------------------
   10. PSEUDO-ELEMENT CONFLICT RESOLUTION
   
   The theme already uses ::before on .hero and .loyalty-section for
   static radial gradient overlays. Aurora replaces these with animated
   versions. We need to explicitly reset `inset` which the theme sets,
   since aurora uses explicit width/height/top/left positioning instead.
   -------------------------------------------------------------------------- */

/* Hero: theme sets inset:0 for a full-bleed static glow — 
   aurora replaces with a centered, animated, breathing orb */
.hero::before {
  inset: auto !important;
  width: clamp(300px, 50vw, 700px) !important;
  height: clamp(300px, 50vw, 700px) !important;
  border-radius: 50% !important;
  filter: blur(110px) !important;
  background: radial-gradient(
    circle,
    rgba(107, 201, 205, 0.16) 0%,
    transparent 65%
  ) !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  animation: auroraPulse 12s ease-in-out infinite alternate !important;
}

/* Loyalty section: theme sets inset:0 for a full-bleed static glow —
   aurora replaces with an animated gold-teal drift orb */
.loyalty-section::before {
  inset: auto !important;
  width: clamp(300px, 40vw, 650px) !important;
  height: clamp(300px, 40vw, 650px) !important;
  border-radius: 50% !important;
  filter: blur(100px) !important;
  background: radial-gradient(
    circle,
    rgba(245, 166, 35, 0.08) 0%,
    rgba(107, 201, 205, 0.06) 40%,
    transparent 65%
  ) !important;
  top: 35% !important;
  left: 15% !important;
  transform: none !important;
  animation: auroraDriftRight 13s ease-in-out infinite alternate !important;
}

/* Page hero: pages.css sets inset:0 static gradient */
.page-hero::before {
  inset: auto !important;
  width: clamp(300px, 50vw, 700px) !important;
  height: clamp(300px, 50vw, 700px) !important;
  border-radius: 50% !important;
  filter: blur(110px) !important;
  background: radial-gradient(
    circle,
    rgba(107, 201, 205, 0.14) 0%,
    transparent 65%
  ) !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  animation: auroraPulse 12s ease-in-out infinite alternate !important;
}

/* Program hero: pages.css sets inset:0 static gradient */
.program-hero::before,
.prog-hero::before {
  inset: auto !important;
  width: clamp(300px, 50vw, 700px) !important;
  height: clamp(300px, 50vw, 700px) !important;
  border-radius: 50% !important;
  filter: blur(110px) !important;
  background: radial-gradient(
    circle,
    rgba(237, 110, 160, 0.12) 0%,
    rgba(107, 201, 205, 0.06) 40%,
    transparent 65%
  ) !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  animation: auroraPulse 14s ease-in-out infinite alternate !important;
}

/* --------------------------------------------------------------------------
   11. MEDICATION PAGES — BACKGROUND STRIP + SPACING FIX
   
   Strip ALL section backgrounds on medication pages down to bare navy
   so the aurora body orbs are fully visible. Only the body background
   (#161b33) remains. Cards/components keep their glass styling.
   -------------------------------------------------------------------------- */

/* --- Spacing fix: breathing room between hero and nav --- */
.med-hero {
  padding-bottom: 40px !important;
  overflow: visible !important;
}

/* --- SPACING FIX: sticky nav needs bottom clearance so heading is visible --- */
.med-nav-section {
  margin-bottom: 40px !important;
}

.med-nav-section + .med-section,
#basics {
  padding-top: 100px !important;
}

/* When nav is sticky and user scrolls, keep heading visible */
#basics,
#benefits,
#how-it-works,
#dosing,
#safety,
#faq {
  scroll-margin-top: calc(var(--header-height, 80px) + 80px);
}

/* Med sections: aurora-ready */
.med-section {
  position: relative;
  overflow: visible !important;
}

/* --- Strip med-hero static gradient overlay → animated aurora orb --- */
.med-hero::before {
  inset: auto !important;
  width: clamp(400px, 60vw, 900px) !important;
  height: clamp(400px, 60vw, 900px) !important;
  border-radius: 50% !important;
  filter: blur(100px) !important;
  background: radial-gradient(
    circle,
    rgba(107, 201, 205, 0.30) 0%,
    rgba(107, 201, 205, 0.08) 45%,
    transparent 65%
  ) !important;
  top: 45% !important;
  left: 35% !important;
  transform: translate(-50%, -50%) !important;
  animation: auroraPulse 12s ease-in-out infinite alternate !important;
}

/* --- Strip sticky nav background → transparent --- */
.med-nav-section {
  background: transparent !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

/* --- Strip section-alt backgrounds → transparent --- */
.med-section-alt {
  background: transparent !important;
}

/* --- Strip med-final-cta gradient → transparent --- */
.med-final-cta {
  background: transparent !important;
  position: relative;
  overflow: visible !important;
}

/* --- Content z-index --- */
.med-section > .container,
.med-section-alt > .container,
.med-final-cta > .container {
  position: relative;
  z-index: 1;
}

/* --- Section-level aurora glows (bigger/brighter since no bg blocking) --- */

/* Odd sections: teal glow left */
.med-section:nth-of-type(odd)::after {
  content: '';
  position: absolute;
  width: clamp(350px, 45vw, 750px);
  height: clamp(350px, 45vw, 750px);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(100px);
  background: radial-gradient(
    circle,
    rgba(107, 201, 205, 0.20) 0%,
    transparent 60%
  );
  top: 25%;
  left: -8%;
  animation: auroraDriftRight 16s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

/* Even sections: pink glow right */
.med-section:nth-of-type(even)::after {
  content: '';
  position: absolute;
  width: clamp(320px, 42vw, 700px);
  height: clamp(320px, 42vw, 700px);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(100px);
  background: radial-gradient(
    circle,
    rgba(237, 110, 160, 0.18) 0%,
    transparent 60%
  );
  top: 20%;
  right: -8%;
  animation: auroraDriftLeft 18s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

/* --------------------------------------------------------------------------
   12. PRICING / TELEHEALTH / LOCATIONS PAGES
   
   These pages use .page-hero, .page-cta, .content-section classes.
   -------------------------------------------------------------------------- */

/* Page hero: overflow fix */
.page-hero {
  overflow: visible !important;
}

/* Content sections: translucent backgrounds */
.content-section.alt {
  background: linear-gradient(180deg, rgba(31, 37, 68, 0.93), rgba(22, 27, 51, 0.93)) !important;
}

.content-section.gradient {
  background: linear-gradient(180deg, rgba(22, 27, 51, 0.93), rgba(31, 37, 68, 0.93)) !important;
}

/* Content sections: aurora-ready */
.content-section {
  position: relative;
  overflow: visible !important;
}

.content-section > .container {
  position: relative;
  z-index: 1;
}

/* Content odd sections: teal glow */
.content-section:nth-of-type(odd)::after {
  content: '';
  position: absolute;
  width: clamp(250px, 35vw, 550px);
  height: clamp(250px, 35vw, 550px);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(100px);
  background: radial-gradient(
    circle,
    rgba(107, 201, 205, 0.09) 0%,
    transparent 60%
  );
  top: 25%;
  left: -5%;
  animation: auroraDriftRight 15s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

/* Content even sections: pink glow */
.content-section:nth-of-type(even)::after {
  content: '';
  position: absolute;
  width: clamp(250px, 32vw, 500px);
  height: clamp(250px, 32vw, 500px);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(100px);
  background: radial-gradient(
    circle,
    rgba(237, 110, 160, 0.08) 0%,
    transparent 60%
  );
  top: 20%;
  right: -5%;
  animation: auroraDriftLeft 17s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

/* Page CTA: translucent + replace static inset:0 glow */
.page-cta {
  background: rgba(22, 27, 51, 0.90) !important;
  overflow: visible !important;
}

.page-cta::before {
  inset: auto !important;
  width: clamp(400px, 50vw, 800px) !important;
  height: clamp(300px, 30vw, 500px) !important;
  border-radius: 50% !important;
  filter: blur(110px) !important;
  background: radial-gradient(
    ellipse,
    rgba(107, 201, 205, 0.12) 0%,
    rgba(237, 110, 160, 0.08) 40%,
    transparent 70%
  ) !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  animation: auroraPulse 10s ease-in-out infinite alternate !important;
}

/* --------------------------------------------------------------------------
   13. PROGRAM PAGE SECTIONS
   -------------------------------------------------------------------------- */
.section.timeline-section,
.section.reviews-section,
.section.tech-section,
.section.included-section {
  position: relative;
  overflow: visible !important;
}

.section.timeline-section > .container,
.section.reviews-section > .container,
.section.tech-section > .container,
.section.included-section > .container {
  position: relative;
  z-index: 1;
}

.section.tech-section {
  background: rgba(22, 27, 51, 0.93) !important;
}

.section.reviews-section {
  background: rgba(42, 49, 88, 0.93) !important;
}

/* --------------------------------------------------------------------------
   14. AESTHETICS ANCHOR NAV (Morpheus8 + Botox pages)
   Same treatment as med-nav-section — translucent sticky nav
   -------------------------------------------------------------------------- */
.aes-quick-nav {
  background: rgba(31, 37, 68, 0.93) !important;
}

/* --------------------------------------------------------------------------
   15. GENERIC .section BASE CLASS
   
   Morpheus8, Botox, and Program pages use bare .section class.
   Make all aurora-ready with overflow:visible.
   -------------------------------------------------------------------------- */
.section {
  position: relative;
  overflow: visible !important;
}

.section > .container {
  position: relative;
  z-index: 1;
}

/* Quiz CTA sections */
.section.quiz-cta-section {
  position: relative;
  overflow: visible !important;
}

/* Video section */
.video-section {
  position: relative;
  overflow: visible !important;
}

/* --------------------------------------------------------------------------
   16. MEDICATIONS LISTING PAGE — BACKGROUND STRIP
   -------------------------------------------------------------------------- */
.meds-hero {
  overflow: visible !important;
}

.meds-hero::before {
  inset: auto !important;
  width: clamp(350px, 55vw, 800px) !important;
  height: clamp(350px, 55vw, 800px) !important;
  border-radius: 50% !important;
  filter: blur(120px) !important;
  background: radial-gradient(
    circle,
    rgba(107, 201, 205, 0.18) 0%,
    transparent 65%
  ) !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  animation: auroraPulse 12s ease-in-out infinite alternate !important;
}

.meds-grid-section,
.meds-compare-section,
.meds-faq-section,
.meds-how-section,
.meds-proof-section,
.meds-calculator-section {
  position: relative;
  overflow: visible !important;
  background: transparent !important;
}

.meds-grid-section > .container,
.meds-compare-section > .container,
.meds-faq-section > .container,
.meds-how-section > .container,
.meds-proof-section > .container,
.meds-calculator-section > .container {
  position: relative;
  z-index: 1;
}

/* Meds final CTA */
.meds-final-cta,
.med-final-cta {
  position: relative;
  overflow: visible !important;
  background: transparent !important;
}

.meds-final-cta::before,
.med-final-cta::before {
  content: '';
  position: absolute;
  width: clamp(400px, 50vw, 800px);
  height: clamp(300px, 30vw, 500px);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(110px);
  background: radial-gradient(
    ellipse,
    rgba(107, 201, 205, 0.12) 0%,
    rgba(237, 110, 160, 0.08) 40%,
    transparent 70%
  );
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: auroraPulse 10s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

.meds-final-cta > .container,
.med-final-cta > .container {
  position: relative;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   17. LOCATION, RECIPE, QUIZ, TIER PAGES
   -------------------------------------------------------------------------- */

/* Single location page */
.location-hero {
  overflow: visible !important;
}

.location-services,
.location-quick-info,
.location-others,
.location-cta {
  position: relative;
  overflow: visible !important;
}

.location-cta::before {
  content: '';
  position: absolute;
  width: clamp(400px, 50vw, 800px);
  height: clamp(300px, 30vw, 500px);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(110px);
  background: radial-gradient(
    ellipse,
    rgba(107, 201, 205, 0.12) 0%,
    rgba(237, 110, 160, 0.08) 40%,
    transparent 70%
  );
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: auroraPulse 10s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

.location-cta > .container {
  position: relative;
  z-index: 1;
}

/* Location pages — rebuilt loc-* prefix */
.loc-hero {
  background: rgba(22, 27, 51, 0.93) !important;
  overflow: visible !important;
}

.loc-section,
.loc-section-alt,
.loc-nav-section,
.loc-final-cta {
  position: relative;
  overflow: visible !important;
}

.loc-nav-section {
  background: rgba(22, 27, 51, 0.95) !important;
  backdrop-filter: blur(20px);
}

.loc-nav-section + .loc-section {
  margin-top: 20px !important;
  padding-top: 100px !important;
}

#overview,
#services,
#getting-started,
#visit-info,
#reviews,
#nearby,
#faq {
  scroll-margin-top: calc(var(--header-height, 80px) + 80px);
}

/* Recipe pages */
.recipe-hero {
  background: radial-gradient(circle at 30% 20%, rgba(31, 37, 68, 0.93), rgba(22, 27, 51, 0.93)) !important;
  overflow: visible !important;
}

.recipe-content,
.recipe-related {
  position: relative;
  overflow: visible !important;
}

/* Quiz pages */
.quiz-section,
.quiz-trust,
.quiz-related {
  position: relative;
  overflow: visible !important;
}

/* Tier page */
.benefits-section,
.promos-section {
  position: relative;
  overflow: visible !important;
}

.tier-cta {
  position: relative;
  overflow: visible !important;
}

.tier-cta::before {
  content: '';
  position: absolute;
  width: clamp(400px, 50vw, 800px);
  height: clamp(300px, 30vw, 500px);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(110px);
  background: radial-gradient(
    ellipse,
    rgba(107, 201, 205, 0.12) 0%,
    rgba(237, 110, 160, 0.08) 40%,
    transparent 70%
  );
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: auroraPulse 10s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

.tier-cta > .container {
  position: relative;
  z-index: 1;
}