/* ==========================================================================
   RECO Integrated Psychiatry - Site-Specific Styles
   Brand: Deep Purple Theme
   Version: 1.1.0 — Aligned with RECO Island / RECO Immersive network styling
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Theme Overrides (CSS Custom Properties)
   --------------------------------------------------------------------------
   Purple is used as an accent color — the same way green (#50A63C) is used
   in RECO Immersive and orange (#E87800) in RECO Island.  Most of the page
   stays neutral (off-white, white, dark) with purple providing selective pops.
   -------------------------------------------------------------------------- */
:root {
  /* Brand Colors - Purple Theme */
  --primary: #6B3FA0;
  --primary-light: #8B5FC0;
  --primary-dark: #5A2E8C;
  --primary-rgb: 107, 63, 160;

  /* Secondary Accent */
  --gold: #C9A84C;
  --gold-light: #D4B96E;
  --gold-dark: #A8893A;
  --gold-rgb: 201, 168, 76;

  /* Neutrals */
  --white: #ffffff;
  --black: #000000;

  /* Dark Override — matches Island/Immersive off-black */
  --dark: #070c01;
  --bg-dark: #070c01;
  --off-black: #201E10;
  --lite-black: #8f8e84;
  --primary-black: #201E10;

  /* Off-white Override — same warm sand as network */
  --off-white: #F4F0E6;
  --bg-secondary: #F4F0E6;
  --lite-sand: #F4F0E6;
  --sand: #e7ddc5;

  /* Purple tints for gradients */
  --purple-50: #f5f0fa;
  --purple-100: #ede5f5;
  --purple-200: #d4c4e8;
  --purple-900: #2d1650;

  /* ---- Network-aligned layout tokens ---- */
  /* Matches Island/Immersive max-container (1136px) */
  --container-network: 1136px;

  /* Section padding matches Island/Immersive padding-96 */
  --section-padding-lg: 96px;
  --section-padding-md: 72px;
  --section-padding-sm: 48px;
}

/* --------------------------------------------------------------------------
   Webflow Layout Resets (must come before nav so .nav-container can override)
   -------------------------------------------------------------------------- */
.w-layout-blockcontainer {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
  display: block;
}

.w-container {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

.w-container::before,
.w-container::after {
  content: " ";
  display: table;
}

.w-container::after {
  clear: both;
}

.max-container {
  max-width: 1136px;
  padding-left: 24px;
  padding-right: 24px;
}

.max-container.wide {
  max-width: 1920px;
  padding-left: 32px;
  padding-right: 32px;
}

.w-layout-grid {
  display: grid;
}

/* --------------------------------------------------------------------------
   1b. Network-Aligned Section Spacing
   --------------------------------------------------------------------------
   Island & Immersive use consistent 120px top/bottom on main content
   sections, 96px on secondary sections, and 56px on compact ones.
   -------------------------------------------------------------------------- */
.about-section,
.services-section,
.difference-section,
.testimonials-section,
.blog-section,
.contact-section,
.insurance-section {
  padding-top: var(--section-padding-lg);
  padding-bottom: var(--section-padding-lg);
}

.trust-bar,
.team-section {
  padding-top: var(--section-padding-md);
  padding-bottom: var(--section-padding-md);
}

.network-section {
  padding-top: var(--section-padding-sm);
  padding-bottom: var(--section-padding-sm);
}

/* --------------------------------------------------------------------------
   1c. Network-Aligned Typography
   --------------------------------------------------------------------------
   Island/Immersive: large display headings use font-weight 300 with
   letter-spacing -2px and line-height 0.9. Section headings use weight
   300 or 400.  Card titles use weight 500–600.
   -------------------------------------------------------------------------- */
h1, h2 {
  font-weight: 300;
  letter-spacing: -2px;
  line-height: 0.95;
}

h3 {
  font-weight: 300;
  letter-spacing: -0.5px;
}

h4 {
  font-weight: 400;
}

/* Section titles — match the Island/Immersive .font-64 display style */
.section-title {
  font-weight: 300;
  letter-spacing: -2px;
  line-height: 0.95;
  color: var(--off-black);
  margin-bottom: var(--space-6);
}

/* Large display text utility — matches .font-104 from Webflow */
.display-text {
  font-size: clamp(3rem, 6vw, 6.5rem);
  font-weight: 300;
  letter-spacing: -2px;
  line-height: 0.9;
}

/* --------------------------------------------------------------------------
   2. Navbar Overrides
   -------------------------------------------------------------------------- */
.reco-navbar {
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.reco-navbar.scrolled {
  background-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 20px rgba(107, 63, 160, 0.08);
}

.reco-navbar.scrolled .nav-link {
  color: var(--gray-800);
}

.reco-navbar.scrolled .nav-link:hover {
  color: var(--primary);
}

/* Dark mode navbar at hero */
.reco-navbar:not(.scrolled) .nav-link {
  color: rgba(255, 255, 255, 0.9);
}

.reco-navbar:not(.scrolled) .nav-link:hover {
  color: var(--white);
}

.reco-navbar:not(.scrolled) .navbar-phone {
  color: rgba(255, 255, 255, 0.9);
}

.reco-navbar:not(.scrolled) .navbar-toggle span {
  background-color: var(--white);
}

/* Logo text in navbar */
.navbar-logo-text {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-xl);
  letter-spacing: -0.02em;
  color: var(--white);
  transition: color var(--duration-base);
}

.navbar-logo-text span {
  color: var(--primary-light);
  transition: color var(--duration-base);
}

.reco-navbar.scrolled .navbar-logo-text {
  color: var(--dark);
}

.reco-navbar.scrolled .navbar-logo-text span {
  color: var(--primary);
}

/* Mega Menu Enhancements */
.nav-mega {
  border-top: 3px solid var(--primary);
}

.mega-featured {
  background: linear-gradient(135deg, var(--purple-50) 0%, var(--purple-100) 100%);
}

.mega-featured h5 {
  font-size: var(--text-lg);
  font-weight: 600;
  margin-bottom: var(--space-2);
  color: var(--text-primary);
}

.mega-featured p {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-4);
}

.mega-featured .btn {
  font-size: var(--text-xs);
}

/* Gold CTA button in navbar */
.btn--gold {
  background-color: var(--primary);
  color: var(--white);
  border-color: var(--primary);
  font-family: var(--font-accent);
}

.btn--gold:hover {
  background-color: var(--primary-dark);
  border-color: var(--primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.35);
}

/* --------------------------------------------------------------------------
   3. Hero Section
   -------------------------------------------------------------------------- */
.hero--psychiatry {
  min-height: 100vh;
  background-color: var(--dark);
}

.hero__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero__video-fallback {
  display: none;
}
.hero__video-fallback:only-child {
  display: block;
}

.hero--psychiatry .hero__overlay {
  background: linear-gradient(
    135deg,
    rgba(26, 26, 46, 0.85) 0%,
    rgba(107, 63, 160, 0.5) 50%,
    rgba(26, 26, 46, 0.8) 100%
  );
}

.hero--psychiatry .hero__content {
  max-width: 720px;
}

.hero__tag-line {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-accent);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: var(--space-6);
  padding: var(--space-2) var(--space-4);
  background: rgba(107, 63, 160, 0.1);
  border: 1px solid rgba(107, 63, 160, 0.25);
  border-radius: var(--radius-full);
}

.hero__tag-line::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: var(--primary);
  border-radius: 50%;
  animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.3); }
}

/* Centered section header utility (matches Island/Immersive pattern) */
.section-header--center {
  text-align: center;
  max-width: 700px;
  margin: 0 auto var(--space-16);
}
.section-header--center-tight {
  text-align: center;
  max-width: 700px;
  margin: 0 auto var(--space-12);
}

.hero--psychiatry .hero__title {
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  font-weight: 300;
  line-height: 1.08;
  margin-bottom: var(--space-6);
  color: var(--white);
}

.hero--psychiatry .hero__subtitle {
  font-size: var(--text-xl);
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.7;
  margin-bottom: var(--space-10);
  max-width: 580px;
}

.hero__typed-wrapper {
  display: block;
  margin-top: var(--space-4);
  font-family: var(--font-accent);
  font-size: var(--text-base);
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: var(--tracking-wide);
}

.hero__typed-wrapper span {
  color: var(--primary-light, #8B5FC0);
}

.typed-cursor {
  color: var(--primary-light, #8B5FC0) !important;
  font-weight: 300;
}

/* Hero scroll indicator */
.hero__scroll {
  position: absolute;
  bottom: var(--space-10);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  color: rgba(255, 255, 255, 0.5);
  font-family: var(--font-accent);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  animation: float-down 2s ease-in-out infinite;
}

.hero__scroll-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(180deg, rgba(255,255,255,0.5) 0%, transparent 100%);
}

@keyframes float-down {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(8px); }
}

/* --------------------------------------------------------------------------
   4. Trust Bar / Marquee Overrides
   -------------------------------------------------------------------------- */
.trust-bar {
  background-color: var(--white);
  border-top: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
}

.trust-bar .marquee {
  padding: var(--space-8) 0;
}

.trust-bar .marquee__item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 var(--space-4);
  opacity: 0.4;
  filter: grayscale(100%);
  transition: all var(--duration-base);
}

.trust-bar .marquee__item:hover {
  opacity: 1;
  filter: grayscale(0%);
}

/* --------------------------------------------------------------------------
   5. About Section
   -------------------------------------------------------------------------- */
.about-section {
  background-color: var(--white);
}

.about-section .section-header {
  max-width: 700px;
  margin: 0 auto var(--space-16);
  text-align: center;
}

.section-tag {
  display: inline-block;
  font-family: var(--font-accent);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: var(--space-4);
  padding: var(--space-2) var(--space-4);
  background: rgba(var(--primary-rgb), 0.06);
  border-radius: var(--radius-full);
}

.section-subtitle {
  font-size: var(--text-lg);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  max-width: 640px;
  margin: 0 auto;
}

/* About cards — border-radius 12px matches Island/Immersive card pattern */
.about-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}

.about-card {
  position: relative;
  padding: var(--space-10) var(--space-8);
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  text-align: center;
  transition: all 0.2s ease;
  overflow: hidden;
  /* Island-style shadow */
  box-shadow: 0 2px 8px rgba(85, 61, 0, 0.04);
}

.about-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}

.about-card:hover {
  /* Island-style shadow on hover */
  box-shadow: 4px 4px 20px rgba(85, 61, 0, 0.1);
  transform: translateY(-4px);
  border-color: transparent;
}

.about-card:hover::before {
  transform: scaleX(1);
}

.about-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 12px;
  background: rgba(var(--primary-rgb), 0.06);
  margin-bottom: var(--space-6);
}

.about-card__icon svg {
  width: 28px;
  height: 28px;
  color: var(--primary);
}

.about-card__title {
  font-size: var(--text-xl);
  font-weight: 500;
  margin-bottom: var(--space-4);
  color: var(--text-primary);
}

.about-card__text {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

/* --------------------------------------------------------------------------
   6. Services Grid
   -------------------------------------------------------------------------- */
.services-section {
  background-color: var(--off-white);
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}

/* Service cards — 12px radius, subtle shadow, matching treatment-card from Webflow */
.service-card {
  position: relative;
  background: var(--white);
  border-radius: 12px;
  padding: 24px 24px 32px;
  transition: all 0.2s ease;
  border: 1px solid var(--gray-200);
  overflow: hidden;
}

.service-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--primary);
  transform: scaleX(0);
  transition: transform 0.2s ease;
}

.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 4px 4px 5px rgba(85, 61, 0, 0.1);
  border-color: transparent;
}

.service-card:hover::after {
  transform: scaleX(1);
}

.service-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(var(--primary-rgb), 0.06);
  margin-bottom: var(--space-5);
  transition: background 0.2s ease;
}

.service-card:hover .service-card__icon {
  background: var(--primary);
}

.service-card__icon svg {
  width: 24px;
  height: 24px;
  color: var(--primary);
  transition: color 0.2s ease;
}

.service-card:hover .service-card__icon svg {
  color: var(--white);
}

.service-card__title {
  font-size: var(--text-lg);
  font-weight: 500;
  margin-bottom: var(--space-3);
  color: var(--text-primary);
}

.service-card__text {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-4);
}

.service-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-accent);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--primary);
  font-weight: 500;
  transition: gap var(--duration-fast);
}

.service-card__link:hover {
  gap: var(--space-3);
}

.service-card__link svg {
  width: 14px;
  height: 14px;
  transition: transform var(--duration-fast);
}

.service-card:hover .service-card__link svg {
  transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   7. Conditions Section
   -------------------------------------------------------------------------- */
.conditions-section {
  background: linear-gradient(180deg, #070c01 0%, #120a1e 50%, #070c01 100%);
  position: relative;
  overflow: hidden;
  padding: 120px 0;
}

.conditions-section::before {
  content: '';
  position: absolute;
  top: -30%;
  right: -15%;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(var(--primary-rgb), 0.1) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.conditions-section::after {
  content: '';
  position: absolute;
  bottom: -20%;
  left: -10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(var(--primary-rgb), 0.06) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.conditions-layout {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--space-16);
  align-items: center;
}

.conditions-text h2 {
  color: var(--white);
  margin-bottom: var(--space-6);
}

.conditions-text p {
  font-size: var(--text-lg);
  color: rgba(255, 255, 255, 0.65);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-8);
}

.conditions-text .btn--secondary {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.3);
}

.conditions-text .btn--secondary:hover {
  background-color: var(--white);
  color: var(--primary);
  border-color: var(--white);
}

.conditions-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.condition-pill {
  display: inline-flex;
  align-items: center;
  padding: 10px 22px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-full);
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  font-weight: 400;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
}

.condition-pill:hover {
  background: rgba(var(--primary-rgb), 0.2);
  border-color: rgba(var(--primary-rgb), 0.4);
  color: var(--white);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(var(--primary-rgb), 0.15);
}

/* --------------------------------------------------------------------------
   8. Why Choose Us / RECO Difference
   -------------------------------------------------------------------------- */
.difference-section {
  background-color: var(--white);
}

.difference-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8);
  margin-bottom: var(--space-16);
}

/* Difference cards — clean, minimal, lots of whitespace */
.difference-card {
  text-align: center;
  padding: var(--space-10) var(--space-6);
  border-radius: 12px;
  transition: all 0.2s ease;
}

.difference-card:hover {
  background: var(--off-white);
}

.difference-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(var(--primary-rgb), 0.06);
  margin-bottom: var(--space-6);
  transition: all 0.2s ease;
}

.difference-card:hover .difference-card__icon {
  background: var(--primary);
  transform: scale(1.05);
}

.difference-card__icon svg {
  width: 28px;
  height: 28px;
  color: var(--primary);
  transition: color 0.2s ease;
}

.difference-card:hover .difference-card__icon svg {
  color: var(--white);
}

.difference-card__title {
  font-size: var(--text-lg);
  font-weight: 500;
  margin-bottom: var(--space-3);
  color: var(--text-primary);
}

.difference-card__text {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

/* Stats bar — clean, accent-only purple (like how Island uses orange on its CTA bar) */
.stats-bar {
  background: var(--primary);
  border-radius: 16px;
  padding: var(--section-padding-sm) var(--space-10);
}

.stats-bar .stats {
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8);
}

.stats-bar .stat__number {
  color: var(--white);
  font-size: var(--text-4xl);
  font-weight: 300;
  letter-spacing: -1px;
  margin-bottom: var(--space-2);
}

.stats-bar .stat__label {
  color: rgba(255, 255, 255, 0.65);
  font-size: var(--text-xs);
  font-family: var(--font-accent);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   9. Team Preview
   -------------------------------------------------------------------------- */
.team-section {
  background-color: var(--off-white);
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8);
  margin-bottom: var(--space-12);
}

/* Team cards — 12px radius, subtle shadow, matches network card style */
.team-card {
  text-align: center;
  background: var(--white);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.2s ease;
  border: 1px solid var(--gray-200);
}

.team-card:hover {
  transform: translateY(-4px);
  box-shadow: 4px 4px 5px rgba(85, 61, 0, 0.1);
  border-color: transparent;
}

.team-card__image-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: linear-gradient(135deg, var(--purple-100), var(--purple-200));
}

.team-card__image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.team-card:hover .team-card__image-wrap img {
  transform: scale(1.05);
}

.team-card__info {
  padding: var(--space-6);
}

.team-card__name {
  font-size: var(--text-lg);
  font-weight: 500;
  margin-bottom: var(--space-1);
  color: var(--text-primary);
}

.team-card__title {
  font-family: var(--font-accent);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: var(--space-2);
}

.team-card__credentials {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* --------------------------------------------------------------------------
   10. Testimonials
   -------------------------------------------------------------------------- */
.testimonials-section {
  background: linear-gradient(180deg, var(--lite-sand) 0%, #fff 100%);
  overflow: hidden;
  padding: 120px 0;
}

.testimonials-wrapper {
  max-width: 800px;
  margin: 0 auto;
}

/* Island-style: large centered quote, subtle stars, progress bars */
.testimonial-slide {
  text-align: center;
  padding: 32px 16px;
}

.testimonial-slide__stars {
  display: flex;
  gap: 4px;
  justify-content: center;
  margin-bottom: 32px;
  color: var(--primary);
}

.testimonial-slide__stars svg {
  width: 18px;
  height: 18px;
  fill: var(--primary);
}

.testimonial-slide__text {
  font-family: 'Figtree', sans-serif;
  font-size: clamp(24px, 3.5vw, 36px);
  line-height: 1.4;
  color: var(--off-black);
  font-weight: 300;
  font-style: normal;
  margin-bottom: 32px;
  letter-spacing: -0.02em;
}

.testimonial-slide__author {
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 2px;
}

.testimonial-slide__role {
  font-size: 14px;
  color: rgba(32, 30, 16, 0.4);
}

.testimonials-stars-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 32px;
}

.testimonials-stars-row svg {
  width: 16px;
  height: 16px;
  fill: var(--primary);
}

.testimonials-stars-row .star-text {
  font-family: 'Figtree', sans-serif;
  font-weight: 300;
  font-size: 16px;
  color: var(--off-black);
}

.testimonials-stars-row .star-text span {
  color: rgba(32, 30, 16, 0.35);
}

.padding-96-top {
  padding-top: 96px;
}

.testimonials-inner {
  padding-top: 0;
}

.reviews-div-wrapper {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.review-container {
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 48px 0 32px;
}

/* Progress bar fill animation */
.testimonial-progress__bar.active .testimonial-progress__fill {
  animation: progressFill 5s linear forwards;
}

@keyframes progressFill {
  from { width: 0; }
  to { width: 100%; }
}

/* Custom progress bars for testimonials */
.testimonial-progress {
  display: flex;
  gap: var(--space-3);
  max-width: 400px;
  margin: var(--space-10) auto 0;
}

.testimonial-progress__bar {
  flex: 1;
  height: 3px;
  background: var(--gray-200);
  border-radius: var(--radius-full);
  overflow: hidden;
  cursor: pointer;
}

.testimonial-progress__fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--primary), var(--primary-light));
  border-radius: var(--radius-full);
}

.testimonial-progress__bar.active .testimonial-progress__fill {
  width: 100%;
}

.testimonial-progress__bar.completed .testimonial-progress__fill {
  width: 100%;
}

/* --------------------------------------------------------------------------
   11. Insurance Section
   -------------------------------------------------------------------------- */
.insurance-section {
  background-color: var(--off-white);
}

.insurance-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-6);
  margin-bottom: var(--space-12);
}

.insurance-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  padding: var(--space-4);
  background: var(--white);
  border-radius: 12px;
  border: 1px solid var(--gray-200);
  transition: all 0.2s ease;
}

.insurance-logo:hover {
  border-color: transparent;
  box-shadow: 4px 4px 5px rgba(85, 61, 0, 0.1);
}

.insurance-logo img {
  max-height: 40px;
  max-width: 100%;
  opacity: 0.6;
  filter: grayscale(100%);
  transition: all var(--duration-base);
}

.insurance-logo:hover img {
  opacity: 1;
  filter: grayscale(0%);
}

/* --------------------------------------------------------------------------
   12. Admissions CTA Section
   -------------------------------------------------------------------------- */
.admissions-cta {
  position: relative;
  overflow: hidden;
  background: var(--dark);
}

.admissions-cta .hero__overlay {
  background: linear-gradient(
    135deg,
    rgba(26, 26, 46, 0.9) 0%,
    rgba(107, 63, 160, 0.6) 50%,
    rgba(26, 26, 46, 0.9) 100%
  );
}

.admissions-cta__content {
  position: relative;
  z-index: 1;
  padding: var(--space-24) 0;
}

.admissions-steps {
  margin-top: var(--space-12);
}

.admissions-steps .steps {
  counter-reset: step-counter;
}

.admissions-steps .step {
  position: relative;
  text-align: center;
}

.admissions-steps .step::before {
  color: var(--primary);
  opacity: 0.4;
}

.admissions-steps .step__title {
  color: var(--white);
  font-size: var(--text-xl);
  font-weight: 500;
}

.admissions-steps .step__text {
  color: rgba(255, 255, 255, 0.6);
  font-size: var(--text-sm);
}

/* Step connector line */
.admissions-steps .step::after {
  content: '';
  position: absolute;
  top: 28px;
  right: -36%;
  width: 70%;
  height: 1px;
  background: linear-gradient(90deg, rgba(var(--primary-rgb), 0.4), transparent);
}

.admissions-steps .step:last-child::after {
  display: none;
}

/* --------------------------------------------------------------------------
   13. Blog Preview
   -------------------------------------------------------------------------- */
.blog-section {
  background: linear-gradient(180deg, #fff 0%, var(--lite-sand) 100%);
  padding: 120px 0;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}

/* Blog cards — 12px radius matching network */
.blog-card {
  background: var(--white);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.06);
  transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  box-shadow: 0 2px 8px rgba(85, 61, 0, 0.04);
}

.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 4px 4px 20px rgba(85, 61, 0, 0.1);
  border-color: transparent;
}

.blog-card__image {
  position: relative;
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, var(--lite-sand), var(--sand));
  overflow: hidden;
}

.blog-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow);
}

.blog-card:hover .blog-card__image img {
  transform: scale(1.1);
}

.blog-card__category {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  font-family: var(--font-accent);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--white);
  background: var(--primary);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
}

.blog-card__body {
  padding: var(--space-6);
}

.blog-card__date {
  font-family: var(--font-accent);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
}

.blog-card__title {
  font-size: var(--text-lg);
  font-weight: 500;
  margin-bottom: var(--space-3);
  color: var(--text-primary);
  line-height: var(--leading-snug);
}

.blog-card__excerpt {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-4);
}

.blog-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-accent);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--primary);
  font-weight: 500;
}

.blog-card__link svg {
  width: 14px;
  height: 14px;
  transition: transform var(--duration-fast);
}

.blog-card:hover .blog-card__link svg {
  transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   14. Contact / CTA Section
   -------------------------------------------------------------------------- */
.contact-section {
  background-color: var(--off-white);
}

.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: start;
}

.contact-form-wrapper {
  background: var(--white);
  padding: var(--space-10);
  border-radius: 16px;
  box-shadow: 4px 4px 5px rgba(85, 61, 0, 0.1);
}

.contact-form-wrapper h3 {
  margin-bottom: var(--space-2);
}

.contact-form-wrapper > p {
  color: var(--text-secondary);
  margin-bottom: var(--space-8);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.contact-info {
  padding: var(--space-4) 0;
}

.contact-info h3 {
  margin-bottom: var(--space-8);
}

.contact-info-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

.contact-info-item__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  background: rgba(var(--primary-rgb), 0.08);
}

.contact-info-item__icon svg {
  width: 22px;
  height: 22px;
  color: var(--primary);
}

.contact-info-item__label {
  font-family: var(--font-accent);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: var(--space-1);
}

.contact-info-item__value {
  font-size: var(--text-base);
  color: var(--text-primary);
  font-weight: 500;
}

.contact-info-item__value a {
  color: var(--primary);
  transition: color var(--duration-fast);
}

.contact-info-item__value a:hover {
  color: var(--primary-dark);
}

.contact-map {
  margin-top: var(--space-8);
  border-radius: 12px;
  overflow: hidden;
  height: 220px;
  background: var(--gray-200);
}

.contact-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* --------------------------------------------------------------------------
   15. Network Bar — clean, light, matching Island/Immersive footer style
   -------------------------------------------------------------------------- */
.network-section {
  background-color: var(--off-white);
}

.network-section h4 {
  color: var(--gray-500);
  font-family: var(--font-accent);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  text-align: center;
  margin-bottom: var(--space-8);
}

.network-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-12);
  flex-wrap: wrap;
}

.network-logo {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-lg);
  color: var(--gray-400);
  transition: all 0.2s ease;
  white-space: nowrap;
}

.network-logo:hover {
  color: var(--off-black);
}

.network-logo span {
  color: var(--primary);
}

/* --------------------------------------------------------------------------
   16. Footer Overrides
   --------------------------------------------------------------------------
   Island and Immersive both use clean, light footers.
   Psychiatry follows the same pattern for network consistency.
   -------------------------------------------------------------------------- */
.reco-footer {
  background-color: var(--white);
  border-top: 1px solid var(--gray-200);
  padding-top: var(--section-padding-md);
  padding-bottom: var(--space-8);
}

.reco-footer,
.reco-footer a {
  color: var(--off-black);
}

.reco-footer a:hover {
  color: var(--primary);
}

.footer-column h4 {
  color: var(--primary);
  font-weight: 500;
}

.footer-contact__phone {
  color: var(--primary);
  font-weight: 500;
}

.footer-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: rgba(var(--primary-rgb), 0.06);
  border: 1px solid rgba(var(--primary-rgb), 0.12);
  border-radius: var(--radius-full);
  font-family: var(--font-accent);
  font-size: var(--text-xs);
  color: var(--primary);
  margin-top: var(--space-6);
  letter-spacing: var(--tracking-wide);
}

/* Footer bottom separator — matches Island/Immersive separator-line */
.footer-bottom {
  border-top: 1px solid rgba(32, 30, 16, 0.1);
  margin-top: var(--space-12);
  padding-top: var(--space-8);
}

.footer-bottom,
.footer-bottom a {
  color: var(--gray-500);
  font-size: var(--text-sm);
}

/* --------------------------------------------------------------------------
   17. Section Divider
   -------------------------------------------------------------------------- */
.section-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--primary-rgb), 0.2), transparent);
  border: none;
  margin: 0;
}

/* --------------------------------------------------------------------------
   18. Back to Top Button
   -------------------------------------------------------------------------- */
.back-to-top {
  position: fixed;
  bottom: var(--space-8);
  right: var(--space-8);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-sticky);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all var(--duration-base) var(--ease-out);
  box-shadow: 0 4px 16px rgba(var(--primary-rgb), 0.3);
  cursor: pointer;
  border: none;
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background: var(--primary-dark);
  transform: translateY(-2px);
}

.back-to-top svg {
  width: 20px;
  height: 20px;
}

/* --------------------------------------------------------------------------
   19. Accessibility Focus Styles
   -------------------------------------------------------------------------- */
*:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.15);
}

/* --------------------------------------------------------------------------
   19b. Missing Utility & Component Classes
   -------------------------------------------------------------------------- */

/* --- Hero Section Wrappers --- */
/* --- Hero Video Container (Webflow pattern) --- */
.section-hero.hero--psychiatry {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  background: linear-gradient(135deg, #1a1a2e 0%, #2d1650 40%, #6B3FA0 100%);
}

.hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.hero-video::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(26,26,46,0.85) 0%, rgba(45,22,80,0.7) 40%, rgba(107,63,160,0.5) 100%);
  z-index: 1;
}

.w-background-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.w-background-video video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
  animation: heroKenBurns 25s ease-in-out infinite alternate;
}

/* Ken Burns subtle zoom/pan on hero poster (gives life without video) */
@keyframes heroKenBurns {
  0% {
    transform: translate(-50%, -50%) scale(1) translateX(0);
  }
  100% {
    transform: translate(-50%, -50%) scale(1.08) translateX(-1.5%);
  }
}

.w-background-video-atom {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.div-hero-main-page {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column-reverse;
  color: var(--white, #fff);
  width: 100%;
  height: 100%;
  min-height: 100vh;
  padding: 0 56px 56px;
}

/* --- Hero Display Typography (matching Island/Immersive clean style) --- */
.hero-display {
  font-family: 'Figtree', sans-serif;
  font-weight: 300;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: #ffffff;
  margin: 0;
  text-align: center;
}

.hero-subtitle {
  font-family: 'Figtree', sans-serif;
  font-weight: 400;
  font-size: clamp(16px, 2vw, 20px);
  line-height: 1.6;
  color: rgba(244, 240, 230, 0.75);
  margin: 0;
  text-align: center;
}

.hero-typed-label {
  font-family: 'DM Mono', monospace;
  font-weight: 400;
  font-size: 16px;
  color: rgba(244, 240, 230, 0.6);
}

.hero-typed-text {
  font-family: 'DM Mono', monospace;
  font-weight: 500;
  font-size: 16px;
  color: var(--primary-light, #8B5FC0);
}

.hero__typed-wrapper {
  margin-top: 1.5rem;
  min-height: 28px;
}

.hero-cta-row {
  display: flex;
  gap: 1rem;
  margin-top: 2.5rem;
  justify-content: center;
  flex-wrap: wrap;
}

.btn--outline-white {
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: #ffffff;
  background: transparent;
  backdrop-filter: blur(8px);
}

.btn--outline-white:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #ffffff;
}

.hide-mobile { display: inline; }

.font-64 {
  font-size: 64px;
  line-height: 1.05;
  letter-spacing: -2px;
  margin-bottom: 0;
}

.font-104 {
  font-size: 104px;
  line-height: 0.9;
}

.centered {
  text-align: center;
}

.off-white {
  color: rgba(244, 240, 230, 0.7);
}

.hero-h1 {
  color: var(--white, #ffffff);
}

.callusnow-div {
  display: flex;
  gap: 8px;
  align-items: center;
}

.callusnow-div a {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.not-in-florida {
  display: flex;
  align-items: center;
  gap: 4px;
}

.tablet-centered {
  text-align: left;
}

@media (max-width: 991px) {
  .tablet-centered {
    text-align: center;
  }
}
.div-hero-h1 { display: flex; flex-direction: column; align-items: center; gap: 12px; position: absolute; inset: auto 0% 45%; width: 100%; text-align: center; }
.div-hero1-flex { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: center; }
/* --- Hero Bottom Bar (Island-pattern: description left, call right) --- */
/* Parent .div-hero-main-page already provides 56px side padding */
.div-hero-bottom .div-hero-content {
  display: flex;
  flex-flow: row;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  position: relative;
}

.div-hero-bottom .max-424 {
  max-width: 424px;
  text-align: left;
}

.div-hero-bottom .flex-10 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  text-align: right;
  flex-shrink: 0;
}

.div-hero-bottom .callusnow-div a {
  color: #fff;
}

.div-hero-bottom .not-in-florida a {
  color: #fff;
  text-decoration: none;
}

.div-hero-bottom .not-in-florida a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (max-width: 991px) {
  .div-hero-bottom .div-hero-content {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 32px;
  }
  .div-hero-bottom .flex-10 {
    align-items: center;
    text-align: center;
  }
  .div-hero-bottom .max-424 {
    text-align: center;
  }
  /* Lift the hero bottom text off the very bottom edge.
     .div-hero-main-page is min-height:100vh + column-reverse flex, which pinned
     .div-hero-bottom flush against the viewport bottom and crushed the parent
     section's padding. */
  .hero--psychiatry .div-hero-main-page {
    padding-bottom: 48px;
    min-height: calc(100vh - 48px);
  }
}

@media (max-width: 767px) {
  .hero--psychiatry .div-hero-main-page {
    padding-bottom: 32px;
    min-height: calc(100vh - 32px);
  }
}
.max-424 { max-width: 424px; }

@media (max-width: 767px) {
  .hide-mobile { display: none; }
}

/* --- Button Variants --- */
.btn--white { display: inline-flex; align-items: center; gap: 8px; padding: 14px 32px; background: #fff; color: #1a1a1a; border-radius: 100px; font-family: 'DM Mono', monospace; font-size: 14px; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; text-decoration: none; transition: all 0.3s ease; border: 1px solid rgba(255,255,255,0.3); }
.btn--white:hover { background: rgba(255,255,255,0.9); transform: translateY(-2px); }
.btn--lg { padding: 18px 40px; font-size: 16px; }

/* --- Typography Utilities --- */
.font-48 { font-size: 48px; line-height: 1.05; letter-spacing: -2px; }
.minus-4-spacing { letter-spacing: -2px; }
.lighter-black { color: rgba(0,0,0,0.6); }
.span-white { color: #fff; }
.tab-centered { text-align: center; }

/* --- Grid Layout Utilities --- */
._3-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

/* --- Flexbox Utilities --- */
.flex-10 { display: flex; gap: 10px; align-items: center; }
.flex-24 { display: flex; flex-direction: column; gap: 24px; }
.flex-64 { display: flex; flex-direction: column; gap: 64px; }

/* --- Spacing Utilities --- */
.top-bottom-padding-160 { padding-top: 96px; padding-bottom: 96px; }
._24-gap { gap: 24px; }

/* --- Marquee Track --- */
.marquee__track { display: flex; gap: 48px; animation: marquee 30s linear infinite; }

/* --------------------------------------------------------------------------
   20. Responsive Overrides
   -------------------------------------------------------------------------- */

/* Tablet */
@media (max-width: 991px) {
  .font-64 {
    font-size: 48px;
  }

  .font-104 {
    font-size: 64px;
  }

  .section-hero.hero--psychiatry {
    min-height: 80vh;
  }

  .about-cards {
    grid-template-columns: 1fr;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
  }

  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .conditions-layout {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  .difference-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .stats-bar .stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .insurance-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .blog-grid .blog-card:last-child {
    display: none;
  }

  .contact-layout {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  .admissions-steps .step::after {
    display: none;
  }

  .hero--psychiatry .hero__title {
    font-size: clamp(2rem, 5vw, 3rem);
  }

  .div-hero-main-page {
    padding: 0 32px 48px;
    min-height: 80vh;
  }

  .div-hero-h1 {
    bottom: 48%;
  }

  .div-hero-bottom {
    gap: 32px;
  }

  .font-48 {
    font-size: 36px;
  }

  ._3-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .top-bottom-padding-160 {
    padding-top: 72px;
    padding-bottom: 72px;
  }

  /* Fix multi-column grids to stack */
  .process-steps-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .font-64 {
    font-size: 36px;
  }

  .font-104 {
    font-size: 48px;
  }

  .minus-4-spacing {
    letter-spacing: -2px;
  }

  .div-hero1-flex {
    flex-direction: column;
    gap: 4px;
  }

  .section-hero.hero--psychiatry {
    min-height: 100vh; /* Full viewport height on mobile */
  }

  .services-grid {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
  }

  .difference-grid {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
  }

  .stats-bar {
    padding: var(--space-8) var(--space-6);
    border-radius: 12px;
  }

  /* Fix mobile menu icon - add glass background */
  .navbar-toggle {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 8px;
    padding: 8px;
    width: 44px;
    height: 44px;
    justify-content: center;
  }

  /* Fix mobile menu - add translucent glass effect */
  .mobile-menu {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }

  .dark-mode .mobile-menu {
    background: rgba(10, 10, 10, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }

  /* Fix homepage hero text size on mobile */
  .hero--psychiatry .hero__title {
    font-size: clamp(1.75rem, 8vw, 2.5rem);
    text-align: center;
  }

  .hero--psychiatry .hero__subtitle {
    font-size: clamp(0.875rem, 4vw, 1.125rem);
    text-align: center;
  }

  /* Fix "Call Us" button text wrapping */
  .navbar-phone {
    white-space: nowrap;
    font-size: 0.75rem;
  }

  /* Fix "About Us" section text */
  .about-section .section-title {
    font-size: clamp(1.5rem, 6vw, 2.25rem);
    text-align: center;
  }

  .about-section .section-subtitle {
    font-size: clamp(0.875rem, 3.5vw, 1rem);
    text-align: center;
  }

  /* Fix "Where Healing Begins" visibility */
  .about-section .hero__tag-line,
  .section-tag {
    color: var(--primary);
    background: rgba(var(--primary-rgb), 0.1);
  }

  /* Fix about cards to match Island style */
  .about-card {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  }

  .about-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  }

  /* Fix accreditations carousel - show 1 item on mobile */
  .trust-bar .marquee__track {
    gap: var(--space-6);
  }

  .trust-bar .marquee__item {
    min-width: 120px;
    height: 60px;
  }

  /* Fix "Take the first step" button color */
  .btn--gold {
    background-color: var(--primary);
    border-color: var(--primary);
  }

  .btn--gold:hover {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
  }

  /* Fix all 2-column and 3-column layouts to stack */
  .grid--2,
  .grid--3,
  ._3-grid,
  .team-grid-div {
    grid-template-columns: 1fr !important;
  }

  /* Fix process steps to stack vertically */
  .steps,
  .admissions-steps .steps,
  .process-steps-grid {
    grid-template-columns: 1fr !important;
  }

  /* Fix stats cards to single column */
  .stats {
    grid-template-columns: 1fr !important;
  }

  /* Fix card grids */
  .services-grid,
  .blog-grid,
  .team-grid,
  .insurance-grid {
    grid-template-columns: 1fr !important;
  }

  .stats-bar .stats {
    grid-template-columns: 1fr !important; /* Single column for stats on mobile */
    gap: var(--space-6);
  }

  .stats-bar .stat__number {
    font-size: var(--text-3xl);
  }

  .team-grid {
    grid-template-columns: 1fr;
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
  }

  .insurance-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .blog-grid {
    grid-template-columns: 1fr;
  }

  .blog-grid .blog-card:last-child {
    display: block;
  }

  .testimonial-slide__text {
    font-size: var(--text-lg);
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .contact-form-wrapper {
    padding: var(--space-6);
    border-radius: 12px;
  }

  .network-logos {
    gap: var(--space-6);
  }

  .network-logo {
    font-size: var(--text-base);
  }

  /* Reduce section padding on mobile to match network responsive behavior */
  .about-section,
  .services-section,
  .difference-section,
  .testimonials-section,
  .blog-section,
  .contact-section,
  .insurance-section {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .trust-bar,
  .team-section {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .hero__scroll {
    display: none;
  }

  .admissions-cta__content {
    padding: var(--space-16) 0;
  }

  .admissions-steps .steps {
    grid-template-columns: 1fr;
  }

  .div-hero-main-page {
    padding: 0 20px 40px;
    min-height: 100vh; /* Full height on mobile */
  }

  .div-hero-h1 {
    bottom: 50%;
    width: 100%;
    padding: 0 20px;
  }

  .div-hero-bottom {
    flex-direction: column;
    align-items: center;
    gap: 24px;
    text-align: center;
  }

  .hero-bottom-right {
    align-items: center;
    text-align: center;
  }

  .font-48 {
    font-size: 32px;
  }

  .minus-4-spacing {
    letter-spacing: -2px;
  }

  ._3-grid {
    grid-template-columns: 1fr;
  }

  .div-hero1-flex {
    flex-direction: column;
  }

  .top-bottom-padding-160 {
    padding-top: 56px;
    padding-bottom: 56px;
  }

  /* Fix homepage animation white gap */
  .section--steps,
  .steps-layout {
    margin-top: 0;
    padding-top: 64px;
  }

  /* Fix phase circles overlapping steps */
  .steps-v2-card {
    flex-direction: column;
    gap: 16px;
    padding: 24px 0;
  }

  .step-number-circle {
    margin: 0 auto;
  }

  /* Ensure "Not local?" text shows on mobile */
  .not-in-florida {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }

  .not-in-florida .off-white,
  .not-in-florida a {
    font-size: 0.875rem;
  }
}

/* Small Mobile */
@media (max-width: 479px) {
  .font-64 {
    font-size: 28px;
  }

  .font-104 {
    font-size: 36px;
  }

  .section-hero.hero--psychiatry {
    min-height: 100vh; /* Full viewport height */
  }

  .conditions-grid {
    gap: var(--space-2);
  }

  .condition-pill {
    font-size: var(--text-xs);
    padding: var(--space-1) var(--space-3);
  }

  .insurance-grid {
    grid-template-columns: 1fr; /* Single column on small mobile */
    gap: var(--space-3);
  }

  .div-hero-main-page {
    padding: 0 16px 32px;
    min-height: 100vh;
  }

  .hero-bottom-label {
    font-size: 12px;
  }

  .hero-bottom-link {
    font-size: 16px;
  }

  .font-48 {
    font-size: 28px;
  }

  .btn--lg {
    padding: 14px 28px;
    font-size: 14px;
  }

  /* Ensure all text is readable */
  .hero--psychiatry .hero__title {
    font-size: 1.75rem;
  }

  .hero--psychiatry .hero__subtitle {
    font-size: 0.875rem;
  }
}

/* --------------------------------------------------------------------------
   COMPREHENSIVE MOBILE FIXES (ALL ISSUES)
   -------------------------------------------------------------------------- */

/* Fix accreditations carousel on mobile (all screen sizes) */
@media (max-width: 991px) {
  /* Make Splide carousel show appropriate number of slides */
  .splide__slide {
    min-width: 150px;
  }

  .marquee__item {
    min-width: 120px;
  }

  /* Fix all grid layouts to responsive columns */
  .services-landing-grid,
  .related-services-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Fix process steps */
  .process-steps {
    display: flex;
    flex-direction: column;
  }

  /* Fix horizontal layouts */
  .contact-layout,
  .conditions-layout,
  .steps-layout {
    display: flex;
    flex-direction: column;
  }
}

@media (max-width: 767px) {
  /* Override ANY remaining multi-column grids */
  .grid--2,
  .grid--3,
  .grid--4,
  ._3-grid,
  .services-grid,
  .difference-grid,
  .team-grid,
  .blog-grid,
  .insurance-grid,
  .services-landing-grid,
  .related-services-grid {
    grid-template-columns: 1fr !important;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Fix stats to single column */
  .stats,
  .stats-bar .stats {
    grid-template-columns: 1fr !important;
  }

  /* Fix steps to vertical */
  .steps,
  .admissions-steps .steps,
  .process-steps-grid {
    grid-template-columns: 1fr !important;
    display: flex;
    flex-direction: column;
  }

  /* Fix team grid to stack */
  .team-grid-div {
    flex-direction: column;
  }

  .team-grid-div .left-column,
  .team-grid-div .right-column {
    border: none;
    padding: 0;
    width: 100%;
  }

  .team-grid-div .left-column {
    margin-bottom: var(--space-6);
  }

  /* Fix section headers */
  .section-header,
  .section-header--center,
  .section-header--center-tight {
    text-align: center;
  }

  /* Ensure text wrapping */
  h1, h2, h3, h4, h5, h6,
  .hero__title,
  .section-title {
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  /* Fix button sizing */
  .btn,
  .btn--primary,
  .btn--secondary,
  .btn--gold,
  .btn--white {
    width: 100%;
    max-width: 320px;
    justify-content: center;
  }

  .hero__actions {
    width: 100%;
    align-items: center;
  }

  /* Fix form rows */
  .form-row,
  .contact-layout {
    grid-template-columns: 1fr !important;
  }
}

/* --------------------------------------------------------------------------
   21. Loading & Transition States
   -------------------------------------------------------------------------- */
.page-loaded .animate-on-scroll {
  /* Activation handled by JS */
}

/* Smooth image loading */
img {
  transition: opacity var(--duration-base);
}

img[data-src] {
  opacity: 0;
}

img.loaded {
  opacity: 1;
}

/* ==========================================================================
   22a. Homepage Rebuild — Island/Immersive-Quality Sections
   ========================================================================== */

/* --- Hero: Bottom text links (Island-pattern, replaces old button CTA) --- */
/* See .div-hero-bottom and .hero-bottom-link in section 19b above. */

/* --- "This is RECO Psychiatry" About: Island-pattern cards ---
   Structure: 3-grid > flex-24 > corner-12 image wrapper + text below
   Title text positioned absolute at top-left of image
   Description text sits below the image (not overlaid) --- */

/* Island-matching card image wrapper */
.corner-12 {
  border-radius: 12px;
  overflow: hidden;
}
.corner-12.max-435 {
  max-height: 435px;
  position: relative;
  overflow: clip;
}
.corner-12.max-435.light-shadow {
  background-color: #fff;
  width: 100%;
  height: 100%;
  overflow: hidden;
  box-shadow: 4px 4px 5px #553d001a;
}
.corner-12.shadow {
  box-shadow: 4px 4px 5px #553d001a;
}

/* Image fill inside card wrapper */
.corner-12 .image {
  object-fit: cover;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Title text absolutely positioned top-left of image */
.text-absolute {
  position: absolute;
  color: #fff;
  text-shadow: 0 1px 8px rgba(0,0,0,0.55), 0 0 24px rgba(0,0,0,0.25);
}
.text-absolute.font-weight-light {
  font-weight: 300;
}
.text-absolute.font-weight-light.font-24 {
  max-width: 230px;
  top: 24px;
  left: 24px;
  font-size: 24px;
}
.text-absolute.font-weight-light.font-24.high-z {
  z-index: 50;
}

/* Description text below the image */
.font-16.font-height-112 {
  line-height: 112%;
}
.font-16.font-height-112.minus2-spacing {
  letter-spacing: -0.25px;
}

/* Span for bolding key phrase in description */
.span-black {
  color: var(--primary-black);
}

/* Card container: center items, full width child */
.flex-24._100-width {
  width: 100%;
  align-items: center;
}

/* Description text under about cards: centered, constrained width (Island match) */
.about-section .font-16.font-height-112 .font-lite-black {
  text-align: center;
  width: 80%;
  margin: 0 auto;
  line-height: 1.4;
}

/* --- Dark Staggered Text Section (The RECO Difference) — with video bg --- */
.section-dark-stagger {
  background-color: #070c01;
  padding: 120px 0;
  position: relative;
  overflow: hidden;
}
.section-dark-stagger .stagger-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.3;
  pointer-events: none;
}
.section-dark-stagger::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.7) 100%);
  pointer-events: none;
}
.stagger-content {
  max-width: 1136px;
  margin: 0 auto;
  padding: 0 32px;
  position: relative;
  z-index: 2;
}
.stagger-label {
  font-family: 'DM Mono', monospace;
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  margin-bottom: 48px;
}
.stagger-headline {
  font-family: 'Figtree', sans-serif;
  font-weight: 300;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.1;
  letter-spacing: -2px;
  color: #fff;
}
.stagger-headline.push-right {
  padding-left: clamp(40px, 5vw, 80px);
  margin-top: 8px;
}
.stagger-sub {
  margin-top: 56px;
  max-width: 480px;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255,255,255,0.5);
}
.stagger-sub.push-right {
  margin-left: clamp(40px, 5vw, 80px);
}

/* --- Treatment Splide Carousel (replace flat grid) --- */
.treatment-carousel-section {
  background: linear-gradient(180deg, var(--lite-sand) 0%, #fff 100%);
  padding: 120px 0;
}
.treatment-carousel-header {
  max-width: 1136px;
  margin: 0 auto 48px;
  padding: 0 32px;
}
.treatment-slide-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  box-shadow: 0 2px 8px rgba(85, 61, 0, 0.04);
}
.treatment-slide-card:hover {
  transform: translateY(-4px);
  box-shadow: 4px 4px 20px rgba(85, 61, 0, 0.1);
  border-color: transparent;
}
.treatment-slide-card__img {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.treatment-slide-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.treatment-slide-card:hover .treatment-slide-card__img img {
  transform: scale(1.05);
}
.treatment-slide-card__body {
  padding: 24px;
}
.treatment-slide-card__title {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 8px;
  color: var(--off-black);
}
.treatment-slide-card__desc {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(32, 30, 16, 0.6);
  margin-bottom: 16px;
}
.treatment-slide-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
  transition: gap 0.2s;
}
.treatment-slide-card__link:hover {
  gap: 10px;
}
.treatment-slide-card__link svg {
  width: 14px;
  height: 14px;
}

/* --- Facility Image Carousel --- */
.facility-carousel-section {
  background: linear-gradient(180deg, #fff 0%, var(--lite-sand) 100%);
  padding: 120px 0;
}
.facility-slide {
  border-radius: 12px;
  overflow: hidden;
}
.facility-slide img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  display: block;
}
.facility-slide-caption {
  padding: 20px 4px 0;
}
.facility-slide-caption .font-24 {
  margin-bottom: 4px;
}

/* --- Team: Staggered 2-Column Layout --- */
/* --- Team Grid (Island pattern) --- */
.team-grid-div {
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  display: flex;
  position: relative;
}
.team-grid-div .left-column {
  border-right: 1px solid rgba(143, 142, 132, 0.6);
  height: 100%;
  padding-right: 48px;
  display: flex;
}
.team-grid-div .right-column {
  height: 100%;
  padding-left: 32px;
  padding-right: 16px;
  display: flex;
}
.team-member {
  display: flex;
  gap: 24px;
  align-items: center;
}
.team-member__img {
  border-radius: 12px;
  width: 96px;
  height: 96px;
  overflow: hidden;
  flex-shrink: 0;
}
.team-member__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.team-name {
  font-size: 20px;
  font-weight: 300;
  letter-spacing: -0.25px;
  line-height: 112%;
  color: var(--off-black);
}
.team-role {
  font-size: 16px;
  letter-spacing: -0.25px;
  color: var(--lite-black);
}

/* --- Steps Section v2 (Premium RECO pattern) --- */
.section--steps {
  background: linear-gradient(180deg, var(--lite-sand) 0%, #fff 100%);
  padding: 120px 0;
}
.steps-layout {
  display: flex;
  gap: 80px;
  align-items: flex-start;
  max-width: 1136px;
  margin: 0 auto;
}
.steps-heading-col {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 380px;
  flex-shrink: 0;
  position: sticky;
  top: 120px;
}
.steps-heading-ctas {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}
.steps-cards-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.steps-v2-card {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  padding: 40px 0;
  border-bottom: 1px solid rgba(32, 30, 16, 0.08);
  position: relative;
}
.steps-v2-card:first-child {
  padding-top: 0;
}
.steps-v2-card:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.steps-v2-card__num-wrap {
  flex-shrink: 0;
  position: relative;
}
.steps-v2-card__num {
  font-family: 'DM Mono', monospace;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 1px;
  color: var(--primary);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(107, 63, 160, 0.3);
  border-radius: 12px;
  background: rgba(107, 63, 160, 0.06);
  position: relative;
  z-index: 2;
}
.steps-v2-card__connector {
  position: absolute;
  left: 25px;
  top: 52px;
  width: 1px;
  height: calc(100% - 52px);
  background: linear-gradient(180deg, rgba(107, 63, 160, 0.15) 0%, rgba(107, 63, 160, 0.03) 100%);
  z-index: 1;
}
.steps-v2-card:first-child .steps-v2-card__connector {
  top: 52px;
  height: calc(100% - 52px);
}
.steps-v2-card__body {
  flex: 1;
  padding-top: 4px;
}

.btn--outline {
  background: transparent;
  border: 1px solid rgba(0,0,0,0.15);
  color: var(--off-black);
}
.btn--outline:hover {
  background: rgba(0,0,0,0.03);
}

/* --- Form Fields (Island pattern) --- */
.form-field {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 8px;
  font-size: 16px;
  font-family: Figtree, sans-serif;
  background: #fff;
  outline: none;
  transition: border-color 0.2s ease;
}
.form-field:focus {
  border-color: var(--primary);
}
.form-field.height-120 {
  min-height: 100px;
  resize: vertical;
}

@media (max-width: 991px) {
  .section--steps {
    padding: 80px 0;
  }
  .steps-layout {
    flex-direction: column;
    gap: 56px;
  }
  .steps-heading-col {
    max-width: 100%;
    text-align: center;
    align-items: center;
    position: static;
  }
  .steps-heading-ctas {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
  .form-row {
    flex-direction: column !important;
  }
}
@media (max-width: 767px) {
  .section--steps {
    padding: 64px 0;
  }
  .steps-layout {
    gap: 40px;
  }
  .steps-v2-card {
    gap: 20px;
    padding: 32px 0;
  }
  .steps-heading-ctas {
    flex-direction: column;
    width: 100%;
    align-items: stretch;
  }
  .steps-heading-ctas .btn {
    text-align: center;
  }
}

/* --- Typed.js Emotional Section --- */
.typed-emotional-section {
  background: linear-gradient(180deg, #0d0a14 0%, #120a1e 40%, #110a1e 70%, #070c01 100%);
  padding: 120px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.typed-emotional-section::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(var(--primary-rgb), 0.08) 0%, transparent 70%);
  pointer-events: none;
}
.typed-emotional-headline {
  font-family: 'Figtree', sans-serif;
  font-weight: 300;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.2;
  letter-spacing: -1px;
  color: #fff;
}
.typed-emotional-headline .typed-gold {
  color: var(--primary-light);
}
.typed-emotional-sub {
  margin-top: 24px;
  font-size: 16px;
  color: rgba(255,255,255,0.5);
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

/* --- Splide overrides for treatment/facility carousels --- */
.treatment-splide .splide__track,
.facility-splide .splide__track {
  padding-bottom: 8px;
}
.treatment-splide .splide__pagination,
.facility-splide .splide__pagination {
  margin-top: 32px;
  gap: 10px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.treatment-splide .splide__pagination li,
.facility-splide .splide__pagination li {
  line-height: 0;
}
.treatment-splide .splide__pagination__page,
.facility-splide .splide__pagination__page {
  background: rgba(0,0,0,0.15);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease;
}
.treatment-splide .splide__pagination__page:hover,
.facility-splide .splide__pagination__page:hover {
  background: rgba(0,0,0,0.35);
}
.treatment-splide .splide__pagination__page.is-active {
  background: var(--primary);
  transform: scale(1.3);
}
.facility-splide .splide__pagination__page.is-active {
  background: var(--primary);
  transform: scale(1.3);
}

/* --- Responsive for new homepage sections --- */
@media (max-width: 991px) {
  .text-absolute.font-weight-light.font-24 {
    font-size: 20px;
    left: 16px;
  }
  .text-absolute.font-weight-light.font-24.high-z {
    font-size: 20px;
  }
  .team-grid-div {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    flex-flow: column;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    justify-content: flex-start;
    align-items: flex-start;
    display: grid;
  }
  .team-grid-div .left-column {
    border-right: none;
    width: 100%;
    padding-right: 0;
  }
  .team-grid-div .right-column {
    width: 100%;
    padding-left: 0;
  }
}

@media (max-width: 767px) {
  .about-section ._3-grid {
    grid-column-gap: 48px;
    grid-row-gap: 48px;
    grid-template-columns: 1fr;
  }
  .section-dark-stagger {
    padding: 64px 0;
  }
  .contact-cta-grid {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
  }
  .stagger-headline.push-right {
    padding-left: 24px;
  }
  .stagger-sub.push-right {
    margin-left: 24px;
  }
  .team-grid-div {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .team-grid-div .left-column,
  .team-grid-div .right-column {
    width: 100%;
    padding: 0;
  }
  .team-member__img {
    width: 72px;
    height: 72px;
  }
  .treatment-carousel-section,
  .facility-carousel-section {
    padding: 80px 0;
  }
  .facility-slide img {
    height: 280px;
  }
}

/* ==========================================================================
   22. Webflow Navigation System (Matching Island/Immersive)
   ========================================================================== */

/* --- Nav Section (Fixed top bar) --- */
.section-nav {
  z-index: 1000;
  width: 100%;
  padding-top: 24px;
  padding-bottom: 24px;
  position: fixed;
  top: 0;
  left: 0;
}

.nav-container {
  max-width: 1920px;
  margin: 0 auto;
  padding-left: 32px;
  padding-right: 32px;
  position: relative;
}

.nav-div-wrapper {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.nav-home-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  z-index: 10;
}

.recohomelogo.logo {
  color: var(--off-black);
}

.recohomelogo.logo svg.logo {
  width: 260px;
  height: 42px;
  transition: color 0.3s ease, fill 0.3s ease, stroke 0.3s ease;
}

/* Ensure SVG paths inherit color properly */
.recohomelogo.logo svg.logo path,
.recohomelogo.logo svg.logo text {
  fill: currentColor !important;
  transition: fill 0.3s ease, stroke 0.3s ease;
}

/* Logo text stroke must ALWAYS match fill to avoid white outline on color switch.
   The SVG <text> element has inline stroke="currentColor" + stroke-width="1".
   We force stroke to match currentColor so it tracks the parent .logo color. */
.recohomelogo.logo svg.logo text {
  stroke: currentColor !important;
  stroke-width: 1;
  paint-order: stroke;
}

/* Inner pages without dark hero: ensure logo starts dark before JS runs */
.page--inner .recohomelogo.logo {
  color: var(--off-black) !important;
}

/* Ensure nav link text is vertically centered */
.nav-link-block > div {
  line-height: 1;
  display: flex;
  align-items: center;
}

/* --- Glassmorphic Nav Bar --- */
.nav-links-div {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  background-color: rgba(244, 240, 230, 0.5);
  border-radius: 8px;
  justify-content: flex-start;
  align-items: center;
  height: 56px;
  padding-left: 20px;
  padding-right: 20px;
  display: flex;
}

/* --- Nav Link Styles --- */
.nav-link-block {
  color: rgba(32, 30, 16, 0.6);
  justify-content: center;
  align-self: center;
  align-items: center;
  height: 56px;
  padding-left: 12px;
  padding-right: 12px;
  text-decoration: none;
  transition: color 0.2s;
  display: flex;
  cursor: pointer;
  font-size: 14px;
  font-family: Figtree, sans-serif;
}

.nav-link-block:hover,
.nav-link-block.w--current {
  color: var(--off-black);
}

.nav-link-block.has-dropdown {
  cursor: default;
}

.nav-link-block.has-dropdown.hover-active {
  color: var(--off-black);
}

/* --- Nav Item Wrapper (for dropdown trigger) --- */
.nav-item-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

/* --- Nav Right Side (phone + mobile toggle) --- */
.nav-right-side {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  align-items: center;
  display: flex;
}

.phone-call {
  text-decoration: none;
}

/* Purple CTA button in nav (replaces orange from Island) */
.nav-cta-div {
  background-color: var(--primary);
  border-radius: 100px;
  justify-content: center;
  align-items: center;
  height: 56px;
  padding: 16px 32px;
  transition: background-color 0.2s;
  display: flex;
}

.nav-cta-div:hover {
  background-color: var(--primary-dark);
}

.nav-cta-div.psych-cta {
  background-color: var(--primary);
}

.nav-cta-div.psych-cta:hover {
  background-color: var(--primary-dark);
}

.nav-cta-div .call-us {
  display: none;
}

/* --- Desktop Dropdown Containers --- */
.desktop-nav-dropdown-container {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  background-color: #fff;
  border: 1px solid rgba(143, 142, 132, 0.3);
  border-radius: 16px;
  justify-content: space-between;
  align-items: stretch;
  width: 704px;
  max-width: 704px;
  padding: 12px;
  display: flex;
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  box-shadow: 0 2px 20px rgba(32, 30, 16, 0.1);
}

.desktop-nav-dropdown-container.about,
.desktop-nav-dropdown-container.treatment {
  z-index: 99;
  opacity: 0;
  height: auto;
  min-height: 350px;
  transition: opacity 0.2s;
  display: none;
  position: fixed;
  top: 64px;
}

.desktop-nav-dropdown-container.conditions {
  z-index: 99;
  opacity: 0;
  flex-flow: row-reverse;
  height: 380px;
  transition: opacity 0.2s;
  display: none;
  position: fixed;
  top: 64px;
}

.desktop-nav-dropdown-container.admissions,
.desktop-nav-dropdown-container.resources {
  z-index: 99;
  opacity: 0;
  flex-flow: row-reverse;
  height: auto;
  min-height: 380px;
  max-height: 80vh;
  overflow-y: auto;
  transition: opacity 0.2s;
  display: none;
  position: fixed;
  top: 64px;
}

.dropdown-spacer {
  width: 100%;
  height: 12px;
  position: absolute;
  top: -12px;
}

/* --- Dropdown Link Columns --- */
.nav-dropdown-links-div {
  flex-flow: column;
  width: 50%;
  height: 100%;
  display: flex;
  overflow: hidden;
}

.nav-dropdown-links-div.treatment {
  width: 50%;
}

.nav-dropdown-link {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  flex-flow: column;
  padding: 12px;
  text-decoration: none;
  display: flex;
  color: var(--off-black);
  border-radius: 12px;
  width: 100%;
  transition: background-color 0.2s;
}

.nav-dropdown-link:hover {
  background-color: var(--lite-sand);
}

/* --- Special Side Panel in Dropdown --- */
.nav-special-side-div {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-flow: column;
  align-self: stretch;
  width: 50%;
  height: 100%;
  display: flex;
  position: relative;
  overflow: visible;
}
.desktop-nav-dropdown-container.conditions .nav-special-side-div,
.desktop-nav-dropdown-container.admissions .nav-special-side-div,
.desktop-nav-dropdown-container.resources .nav-special-side-div {
  overflow: hidden;
}

/* --- Overflow prevention on dropdown containers --- */
.desktop-nav-dropdown-container {
  overflow: visible;
}
.desktop-nav-dropdown-container.conditions,
.desktop-nav-dropdown-container.admissions,
.desktop-nav-dropdown-container.resources {
  overflow: hidden;
}

/* --- 2-Column Mega Menu (Services Dropdown) --- */
.nav-special-side-div.therapies-div {
  padding: 0;
}

.flex-auto.treatment-nav {
  display: flex;
  gap: 0;
  width: 100%;
  height: 100%;
}

.treatment-div {
  flex: 1;
  padding: 16px;
}

.treatment-div.right-border {
  border-right: 1px solid rgba(143, 142, 132, 0.2);
}

.link-small {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  white-space: nowrap;
  flex-wrap: nowrap;
}

.hoverable {
  text-decoration: none;
  transition: color 0.2s;
}

.hoverable:hover {
  color: var(--off-black, #201E10);
}

/* Cross-site links in nav */
.reco-other-div {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  color: var(--white);
  background-color: #1a1a1a;
  background-image: linear-gradient(#0000, #00000080), linear-gradient(#00000080, #00000080);
  background-position: 0 0, 0 0, 50%;
  background-repeat: repeat, repeat, no-repeat;
  background-size: auto, auto, cover;
  border-radius: 8px;
  flex-flow: column;
  height: 100%;
  padding: 8px 8px 14px 16px;
  display: flex;
  justify-content: space-between;
}

.reco-other-div .w-embed {
  display: flex;
  align-items: center;
}

.reco-other-div .w-embed svg {
  color: #ffffff;
  max-height: 28px;
  width: auto;
}

/* Facility card description text: prevent wrapping */
.reco-other-div .font-18.font-semibold {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 15px;
  line-height: 1.3;
}

.reco-link {
  text-decoration: none;
  display: block;
  height: 100%;
}

.number-div {
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  padding: 10px;
  display: flex;
  color: #ffffff;
}

.number-div .font-dm {
  color: #ffffff;
}

.number-div.pink {
  background-color: #f03e7c;
}

.number-div.purple {
  background-color: #6B3FA0;
}

.number-div.blue,
.number-div.teal {
  background-color: #10a8ca;
}

.number-div.green {
  background-color: #50A63C;
}

.number-div.orange {
  background-color: #6B3FA0;
}

/* Insurance verification CTA in dropdown */
.veryify-insurance-link-block {
  background-color: var(--primary);
  border-radius: 12px;
  padding: 20px;
  color: white;
  text-decoration: none;
  display: flex;
  flex-flow: column;
  gap: 8px;
  height: 100%;
  min-height: 200px;
  justify-content: flex-end;
  transition: filter 0.2s;
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  overflow: hidden;
}

/* Dark gradient overlay so text is readable over images */
.veryify-insurance-link-block::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.35) 40%, rgba(0,0,0,0.1) 70%, transparent 100%);
  border-radius: 12px;
  z-index: 0;
}

.veryify-insurance-link-block > * {
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

.veryify-insurance-link-block:hover {
  filter: brightness(1.1);
}

/* Nav dropdown background images (paths relative to CSS file) */
.veryify-insurance-link-block.nav-bg-conditions {
  background-image: url('../images/nav-conditions.webp');
}
.veryify-insurance-link-block.nav-bg-programs {
  background-image: url('../images/nav-programs.webp');
}
.veryify-insurance-link-block.nav-bg-admissions {
  background-image: url('../images/nav-admissions.webp');
}
.veryify-insurance-link-block.nav-bg-resources {
  background-image: url('../images/nav-resources.webp');
}

/* --- Mobile Menu Toggle (matching Immersive: cream translucent pill) --- */
.mobile-menu-toggle {
  display: none;
  cursor: pointer;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  background-color: #f4f0e680;
  border-radius: 8px;
  flex-flow: column;
  width: 56px;
  height: 56px;
  justify-content: center;
  align-items: center;
  z-index: 1001;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.menu-x-wrapper {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 16px;
  height: 100%;
  display: flex;
  position: relative;
}

.div-line {
  background-color: #030326;
  flex-flow: column;
  width: 100%;
  height: 2px;
  display: flex;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.div-line.top {
  margin-bottom: 6px;
  position: absolute;
}

.div-line.bottom {
  margin-top: 6px;
  position: absolute;
  transform: translate(0);
}

/* Hamburger to X animation */
.mobile-menu-toggle.is-open .div-line.top {
  transform: translateY(5px) rotate(45deg);
}

.mobile-menu-toggle.is-open .div-line.bottom {
  transform: translateY(-5px) rotate(-45deg);
}

/* --- Mobile Menu --- */
.mobile-menu {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: var(--lite-sand);
  z-index: 999;
  overflow-y: auto;
  padding-top: 100px;
  /* Override reco-base.css transform that pushes menu off-screen */
  transform: none;
  transition: none;
}

.mobile-menu.open {
  display: flex;
  transform: none;
}

.mobile-menu-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 0 24px;
}

.mobile-menu-links-div {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.menu-links-section-div {
  padding: 24px 0;
}

.menu-links-section-div .font-24 {
  font-size: 24px;
  font-weight: 300;
  margin-bottom: 16px;
  color: var(--off-black);
}

.menu-links-section-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mobile-nav-link {
  font-size: 16px;
  color: rgba(32, 30, 16, 0.6);
  text-decoration: none;
  transition: color 0.2s;
}

.mobile-nav-link:hover {
  color: var(--primary);
}

.separator-line {
  width: 100%;
  height: 1px;
  background-color: rgba(143, 142, 132, 0.3);
}

/* ==========================================================================
   23. Webflow Footer System (Matching Island/Immersive)
   ========================================================================== */

.footer.section {
  position: relative;
  background-color: var(--lite-sand);
}

.footer-container {
  max-width: 1920px;
  margin: 0 auto;
  padding-left: 56px;
  padding-right: 56px;
}

/* Soft purple/lavender atmospheric wash — layered radial glows over a
   warm-cream base. Stays light enough that dark footer text reads. */
.footer .footer-container {
  position: relative;
  background-color: #f4f0e6;
  background-image:
    radial-gradient(70% 80% at 15% 10%, rgba(184, 157, 217, 0.55) 0%, transparent 70%),
    radial-gradient(60% 70% at 85% 30%, rgba(138, 93, 196, 0.40)  0%, transparent 70%),
    radial-gradient(70% 80% at 50% 90%, rgba(107, 63, 160, 0.45)  0%, transparent 75%),
    radial-gradient(50% 55% at 90% 85%, rgba(74, 38, 128, 0.30)   0%, transparent 70%);
}

.footer-padding {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex-flow: column;
  padding-top: 96px;
  padding-bottom: 32px;
  display: flex;
}

.footer-flex {
  display: flex;
  justify-content: space-between;
  gap: 48px;
}

.flex-auto-48 {
  grid-column-gap: 48px;
  grid-row-gap: 48px;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
  flex: 1;
}

.flex-0 {
  grid-column-gap: 0;
  grid-row-gap: 0;
  flex-flow: column;
  display: flex;
  width: 100%;
}

.padding-40 {
  padding-top: 40px;
  padding-bottom: 40px;
}

.padding-40.bottom-only {
  padding-top: 0;
}

._4-grid {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  display: grid;
}

.flex-16 {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: column;
  display: flex;
}

.flex-40 {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  flex-flow: column;
  display: flex;
}

.flex-40._30-width {
  width: 30%;
  min-width: 280px;
}

.flex-12.down {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.accreditations-div {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 24px;
}

.grid-5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  align-items: center;
}

.grid-5 img {
  max-height: 40px;
  width: auto;
  opacity: 0.6;
  transition: opacity 0.2s;
}

.grid-5 img:hover {
  opacity: 1;
}

/* Footer form */
.footer .form-field {
  background-color: white;
  border: 1px solid rgba(143, 142, 132, 0.3);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 14px;
  font-family: Figtree, sans-serif;
  width: 100%;
}

/* Brand-color submit buttons — selectors below use input. prefix to outrank
   Webflow's later-loaded `.w-button { background-color: #3898ec }` rule. */
.orange-submit,
.purple-submit,
input.orange-submit,
input.purple-submit,
input.purple-submit.w-button,
input.orange-submit.w-button {
  background-color: var(--primary);
  color: white;
  border: none;
  border-radius: 100px;
  padding: 14px 32px;
  font-size: 14px;
  font-family: Figtree, sans-serif;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
  width: 100%;
}

.orange-submit:hover,
.purple-submit:hover,
input.orange-submit:hover,
input.purple-submit:hover {
  background-color: var(--primary-dark);
}

/* Footer accent strip + heading color — match the cohesive brand pop that
   island/immersive get from Webflow. Pure additive overrides; no markup change. */
.footer .font-12.font-lite-black,
.footer .font-12.font-black {
  color: var(--primary);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.footer .accreditations-div .grid-5 img {
  filter: grayscale(0.2);
}

.footer a:hover,
.footer .font-16.font-black:hover {
  color: var(--primary);
}

/* Social circles */
.social-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--off-black);
  transition: color 0.2s, background-color 0.2s;
  text-decoration: none;
}

.social-circle:hover {
  color: var(--primary);
  background-color: rgba(107, 63, 160, 0.1);
}

.social-circle svg {
  width: 16px;
  height: 16px;
}

/* Center align utility for footer bottom */
.flex-auto.center-align {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding-top: 24px;
}

.flex-8 {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Footer: Secondary links grid */
._2-grid {
  grid-column-gap: 40px;
  grid-row-gap: 8px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

/* Secondary footer links (conditions/therapies below separator) */
.footer .font-12.font-black,
a.font-12.font-black {
  color: var(--off-black);
  text-decoration: none;
  font-size: 12px;
  line-height: 1.3;
  transition: color 0.2s ease;
  display: block;
  padding: 3px 0;
}

.footer .font-12.font-black:hover,
a.font-12.font-black:hover {
  color: var(--primary);
}

/* Secondary links container inside footer */
.footer ._2-grid > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Footer form layout */
.w-form {
  margin: 0;
}

.w-form-done,
.footer .w-form-done {
  text-align: center;
  background-color: #ddd;
  padding: 20px;
  display: none !important;
}

.w-form-fail,
.footer .w-form-fail {
  background-color: #ffdede;
  margin-top: 10px;
  padding: 10px;
  display: none !important;
}

.w-input {
  color: #333;
  vertical-align: middle;
  background-color: #fff;
  border: 1px solid #ccc;
  width: 100%;
  height: 38px;
  margin-bottom: 10px;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 1.42857;
  display: block;
}

.w-input::placeholder {
  color: #999;
}

.w-input:focus {
  border-color: #3898ec;
  outline: 0;
}

.w-button {
  color: #fff;
  line-height: inherit;
  cursor: pointer;
  background-color: #3898ec;
  border: 0;
  border-radius: 0;
  padding: 9px 15px;
  text-decoration: none;
  display: inline-block;
}

input.w-button {
  -webkit-appearance: button;
}

.flex-24 {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.flex-24.left-align {
  justify-content: flex-start;
  align-items: flex-start;
}

.flex-24.left-align.full-width {
  width: 100%;
}

.flex-16-auto {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}

.flex-16-auto.full-width {
  width: 100%;
}

.full-width {
  width: 100%;
}

/* ==========================================================================
   24. Webflow Utility Classes
   ========================================================================== */

.font-14 {
  font-size: 14px;
  margin-bottom: 0;
  line-height: 1.2;
}

.font-12 {
  font-size: 12px;
  margin-bottom: 0;
  line-height: 1.4;
}

.font-16 {
  font-size: 16px;
}

.font-18 {
  font-size: 18px;
  font-weight: 400;
}

.font-20 {
  font-size: 20px;
}

.font-20.font-height-112 {
  line-height: 112%;
}

.font-20.font-height-112.font-minus2 {
  letter-spacing: -0.25px;
}

.font-24 {
  font-size: 24px;
  line-height: 1.2;
}

.font-light.font-48.font-minus4 {
  letter-spacing: -1px;
}

.font-light.font-48.font-minus4.centered {
  line-height: 1.05;
  letter-spacing: -2px;
}

.flex-24.max-500 {
  max-width: 600px;
  position: relative;
}

.font-semibold {
  font-weight: 500;
}

.font-light {
  font-weight: 300;
}

.font-white {
  color: var(--white);
}

.font-black {
  color: var(--off-black);
}

.font-lite-black {
  color: rgba(32, 30, 16, 0.5);
}

.font-lite-sand {
  color: rgba(244, 240, 230, 0.7);
}

.off-black {
  color: var(--off-black);
}

.dm-mono {
  font-family: 'DM Mono', monospace;
}

.figtree {
  font-family: Figtree, sans-serif;
}

.opacity-60 {
  opacity: 0.6;
}

.w-inline-block {
  max-width: 100%;
  display: inline-block;
}

/* Override w-inline-block for nav links — must come AFTER w-inline-block */
.nav-link-block.w-inline-block {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Override w-inline-block for flex-8 "View all" links — flex must win */
.flex-8.w-inline-block,
a.flex-8.link-small.w-inline-block {
  display: flex;
  align-items: center;
}

/* (Webflow layout resets moved to top of file - before nav section) */

/* Font DM alias (matches Island/Immersive class) */
.font-dm {
  font-family: 'DM Mono', monospace;
}

/* Flex-48 horizontal layout (used in footer) */
.flex-48 {
  grid-column-gap: 48px;
  grid-row-gap: 48px;
  flex-flow: column;
  display: flex;
}

.flex-48.horizontal {
  flex-flow: row;
}

/* Nav blog card in dropdown */
.nav-blog-wrapper-item {
  width: 100%;
  height: 100%;
}

.nav-blog-link-block {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px;
  border-radius: 12px;
  background-size: cover;
  background-position: center;
  color: white;
  text-decoration: none;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.nav-blog-grad-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.6) 100%);
  z-index: 0;
  border-radius: 12px;
}

.nav-blog-link-block > * {
  position: relative;
  z-index: 1;
}

.flex-8.down {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ==========================================================================
   25. Responsive Overrides for Webflow Nav
   ========================================================================== */

/* Mid-desktop transition (992-1199px): keep the desktop nav links but switch the
   phone CTA to the compact "Call Us" label so the dropdowns and CTA don't crowd
   each other. Without this, the phone number gets visually squished between
   1080-1199px before the mobile menu kicks in at 991px. */
@media (max-width: 1199px) and (min-width: 992px) {
  .nav-cta-div {
    flex-shrink: 0;
    white-space: nowrap;
    padding: 10px 18px;
  }
  .nav-cta-div .font-14.font-white.dm-mono.number {
    display: none;
  }
  .nav-cta-div .font-14.font-white.dm-mono.call-us {
    display: block;
  }
  .nav-links-div {
    gap: 8px;
  }
}

@media (max-width: 991px) {
  .nav-links-div {
    display: none;
  }

  .mobile-menu-toggle {
    display: flex;
  }

  .nav-right-side {
    gap: 8px;
  }

  .nav-cta-div {
    height: 48px;
    padding: 10px 18px;
    /* Don't allow the phone CTA to flex-shrink and squish at narrow desktop widths.
       Combined with white-space:nowrap and the compact "Call Us" label, the nav
       stays clean across the 768-991px range that previously caused the number
       to compress mid-collapse. */
    flex-shrink: 0;
    white-space: nowrap;
  }

  /* Hide the long phone number, show the compact "Call Us" label.
     Previously this only kicked in at ≤767px, so between 768-991px the
     full number rendered and got squeezed by flex layout. */
  .nav-cta-div .font-14.font-white.dm-mono.number {
    display: none;
  }
  .nav-cta-div .font-14.font-white.dm-mono.call-us {
    display: block;
  }

  .footer-flex {
    flex-direction: column;
  }

  .flex-48.horizontal {
    flex-flow: column;
  }

  .flex-40._30-width {
    width: 100%;
  }

  ._4-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }

  ._2-grid {
    grid-template-columns: 1fr;
  }

  .desktop-nav-dropdown-container {
    width: 90vw;
    max-width: 90vw;
  }
}

@media (max-width: 767px) {
  .section-nav {
    padding-top: 16px;
    padding-bottom: 16px;
  }

  .nav-container {
    padding-left: 16px;
    padding-right: 16px;
  }

  .footer-container {
    padding-left: 24px;
    padding-right: 24px;
  }

  .footer-padding {
    padding-top: 64px;
  }

  .flex-48.horizontal {
    flex-flow: column;
    gap: 32px;
  }

  ._4-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .grid-5 {
    grid-template-columns: repeat(3, 1fr);
  }

  .recohomelogo.logo svg.logo {
    height: 34px;
    width: auto;
  }
}

@media (max-width: 767px) {
  /* Mobile header: show "Call Us" instead of phone number */
  .nav-cta-div .font-14.font-white.dm-mono.number {
    display: none;
  }
  .nav-cta-div .font-14.font-white.dm-mono.call-us {
    display: block;
  }

  /* Mobile hero: hide "Call us now" + phone number (desktop only) */
  .callusnow-div {
    display: none !important;
  }
}

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

/* ==========================================================================
   25b. Breadcrumbs (matching RECO Island inner-page pattern)
   Supports both .breadcrumbs (plural, Schema.org pages) and
   .breadcrumb (singular, simpler markup pages)
   ========================================================================== */

.breadcrumbs,
.breadcrumb {
  padding: 12px 0;
  background-color: var(--off-white, #F4F0E6);
  border-bottom: 1px solid rgba(143, 142, 132, 0.15);
}

.breadcrumbs .container,
.breadcrumb .container {
  max-width: 1136px;
  margin: 0 auto;
  padding: 0 24px;
}

.breadcrumbs ol,
.breadcrumb ol {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.05em;
  list-style: none;
  margin: 0;
  padding: 0;
}

.breadcrumbs ol li,
.breadcrumb ol li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--lite-black, #8f8e84);
}

/* Auto-separator for Schema.org breadcrumbs (no manual separator elements) */
.breadcrumbs ol li + li::before {
  content: '/';
  color: rgba(143, 142, 132, 0.5);
}

/* Hide manual separator elements (used in .breadcrumb variant) */
.breadcrumb__separator {
  color: rgba(143, 142, 132, 0.5);
  font-size: 14px;
}

.breadcrumbs ol li a,
.breadcrumbs ol li a span,
.breadcrumb ol li a {
  color: var(--lite-black, #8f8e84);
  text-decoration: none;
  transition: color 0.2s;
}

.breadcrumbs ol li a:hover,
.breadcrumbs ol li a:hover span,
.breadcrumb ol li a:hover {
  color: var(--primary, #6B3FA0);
}

.breadcrumbs ol li:last-child,
.breadcrumb ol li:last-child,
.breadcrumb ol li[aria-current="page"] {
  color: var(--off-black, #201E10);
  font-weight: 500;
}

.breadcrumbs ol li:last-child span {
  color: var(--off-black, #201E10);
  font-weight: 500;
}

/* ==========================================================================
   26. New Homepage Sections (Stats, Pathway, FAQ, Insurance, Accreditations)
   ========================================================================== */

/* --- Stats Section --- */

/* ==========================================================================
   Treatment Pathway — "Your Journey" (Premium Redesign)
   Purple (#6B3FA0) + Gold (#C9A84C) palette with glassmorphic cards,
   animated ring markers, connecting lines, scroll-driven reveal.
   ========================================================================== */

/* --- Section shell & light background (Island/Immersive aesthetic) --- */
.section--pathway {
  background: linear-gradient(180deg, #ffffff 0%, #f5f0eb 100%);
  padding: 120px 0;
  position: relative;
  overflow: hidden;
}

/* Ambient glow — hidden on light bg */
.pathway-bg-glow {
  display: none;
}

/* --- Section header --- */
.pathway-header {
  text-align: center;
  margin-bottom: 72px;
  position: relative;
  z-index: 1;
}
.pathway-label {
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 20px;
  color: rgba(32, 30, 16, 0.3);
  opacity: 1;
}
.pathway-heading {
  color: #201E10;
  letter-spacing: -2px;
  line-height: 1.05;
  max-width: 600px;
  margin: 0 auto 20px;
}
.pathway-heading--muted {
  color: rgba(32, 30, 16, 0.5);
}
.pathway-subtitle {
  color: rgba(32, 30, 16, 0.45);
  max-width: 480px;
  margin: 0 auto;
  line-height: 1.5;
}

/* --- 4-column grid --- */
.pathway-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  width: 100%;
  position: relative;
  z-index: 1;
}

/* --- Individual card --- */
.pathway-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  overflow: visible;
  padding: 32px 20px 40px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(32, 30, 16, 0.06);
  border-radius: 12px;
  transition: background 0.4s ease, border-color 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease;
}
.pathway-card.visible:hover {
  background: #fff;
  border-color: rgba(32, 30, 16, 0.12);
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(32, 30, 16, 0.06);
}

/* --- Circle marker with animated ring --- */
.pathway-card__marker {
  position: relative;
  width: 80px;
  height: 80px;
  margin-bottom: 24px;
  flex-shrink: 0;
}
.pathway-card__number {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 1px;
  color: #201E10;
  z-index: 2;
}
.pathway-card__ring {
  position: absolute;
  inset: 0;
}
.pathway-card__ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.pathway-card__ring-progress {
  stroke-linecap: round;
  transition: stroke-dashoffset 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Ring fills in when card is visible (via .visible from IntersectionObserver) */
.pathway-card.visible .pathway-card__ring-progress {
  stroke-dashoffset: 0 !important;
}

/* --- Horizontal connector line between steps --- */
.pathway-card__connector {
  display: none;   /* shown via ::after on desktop between cards */
}
.pathway-card:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 72px;               /* vertical center of 80px marker + 32px card padding */
  left: 50%;
  width: 100%;
  height: 1px;
  background: rgba(32, 30, 16, 0.06);
  z-index: 0;
  pointer-events: none;
}

/* --- Icon below marker --- */
.pathway-card__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(32, 30, 16, 0.03);
  border: 1px solid rgba(32, 30, 16, 0.06);
  color: #201E10;
  margin-bottom: 20px;
  transition: background 0.3s ease, color 0.3s ease;
}
.pathway-card:hover .pathway-card__icon {
  background: rgba(32, 30, 16, 0.06);
  color: #201E10;
}

/* --- Card body text --- */
.pathway-card__body {
  position: relative;
  z-index: 2;
}
.pathway-card__title {
  color: #201E10;
  letter-spacing: -0.3px;
  line-height: 1.15;
  margin-bottom: 10px;
}
.pathway-card__text {
  color: rgba(32, 30, 16, 0.5);
  line-height: 1.65;
}

/* ==========================================================================
   Pathway — Responsive
   ========================================================================== */
@media (max-width: 991px) {
  .section--pathway {
    padding: 100px 0 80px;
  }
  .pathway-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
  .pathway-card:not(:last-child)::after {
    display: none;
  }
  .pathway-header {
    margin-bottom: 48px;
  }
}

@media (max-width: 767px) {
  .section--pathway {
    padding: 80px 0 64px;
    background: linear-gradient(180deg, #ffffff 0%, #f5f0eb 100%);
  }
  .pathway-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    max-width: 420px;
    margin: 0 auto;
  }
  .pathway-card {
    flex-direction: row;
    text-align: left;
    padding: 24px;
    gap: 20px;
  }
  .pathway-card__marker {
    width: 60px;
    height: 60px;
    min-width: 60px;
    margin-bottom: 0;
  }
  .pathway-card__icon {
    display: none;   /* hide separate icon on mobile — marker is enough */
  }
  .pathway-card__body {
    flex: 1;
  }
  .pathway-card__title {
    font-size: 17px;
  }
  .pathway-card__text {
    font-size: 13px;
  }
  .pathway-heading {
    font-size: 36px;
    letter-spacing: -1.5px;
  }
}

/* --- FAQ Accordion --- */
.section--faq {
  background: linear-gradient(180deg, #fff 0%, var(--lite-sand) 100%);
  padding: 120px 0;
}
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.faq-item {
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.faq-item:first-child {
  border-top: 1px solid rgba(0,0,0,0.08);
}
.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 24px 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Figtree', sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: var(--off-black);
  text-align: left;
  gap: 16px;
}
.faq-question:hover {
  color: var(--primary);
}
.faq-icon {
  flex-shrink: 0;
  transition: transform 0.3s ease;
}
.faq-item.active .faq-icon {
  transform: rotate(45deg);
}
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
}
.faq-item.active .faq-answer {
  max-height: 300px;
  padding-bottom: 24px;
}
.faq-answer p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--lite-black);
  margin: 0;
}

/* --- Insurance Logos --- */
/* --- Accreditations --- */
.section--accreditations {
  background: linear-gradient(180deg, #f4f0e6 0%, #f5f0eb 50%, #ffffff 100%);
  padding: 120px 0;
  position: relative;
  overflow: hidden;
}
.accreditation-logos-grid {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 48px;
  flex-wrap: wrap;
}
.accreditation-logo {
  display: flex;
  align-items: center;
  justify-content: center;
}
.accreditation-logo img {
  height: 56px;
  width: auto;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}
.accreditation-logo img:hover {
  opacity: 1;
}

/* Accreditations Splide Carousel */
.section--accreditations .splide-wrapper {
  position: relative;
}
.section--accreditations .gradient-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(90deg, #f5f0eb 0%, transparent 15%, transparent 85%, #ffffff 100%);
}
.section--accreditations .splide__slide {
  display: flex;
  align-items: center;
  justify-content: center;
}
.section--accreditations .slide-image {
  height: 56px;
  width: auto;
  opacity: 0.55;
  transition: opacity 0.3s ease;
}
.section--accreditations .slide-image:hover {
  opacity: 1;
}
.section--accreditations .accred-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(32, 30, 16, 0.4);
  text-decoration: none;
  letter-spacing: 0.5px;
  font-size: 13px;
  transition: all 0.2s ease;
}
.section--accreditations .accred-cta:hover {
  color: var(--primary);
  gap: 12px;
}
.section--accreditations .accred-cta svg {
  transition: transform 0.2s ease;
}
.section--accreditations .accred-cta:hover svg {
  transform: translateX(3px);
}

/* --- Responsive for new sections --- */
@media (max-width: 991px) {
  .section--faq {
    padding: 80px 0;
  }
}

@media (max-width: 767px) {
  .accreditation-logos-grid {
    gap: 32px;
  }
  .accreditation-logo img {
    height: 40px;
  }
  .section--accreditations .slide-image {
    height: 40px;
  }
  .section--faq {
    padding: 64px 0;
  }
  .section--accreditations {
    padding: 64px 0;
  }
}


/* ==========================================================================
   BRAIN SCROLL: Scroll-Driven Psychiatry Visualization
   ========================================================================== */
.brain-scroll {
  position: relative;
  height: 500vh; /* Creates long scroll zone */
  background: #f5f0eb;
}

.brain-scroll__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}


.brain-scroll__bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #f5f0eb 0%, #ffffff 30%, #ffffff 60%, #f4f0e6 100%);
  z-index: 0;
}

/* Brain SVG Container */
.brain-scroll__brain-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  pointer-events: none;
}

.brain-scroll__brain {
  color: rgba(107, 63, 160, 0.12); /* Purple tint for the brain on light bg */
  transition: color 0.3s ease;
  transform: scale(var(--brain-scale, 0.05));
  opacity: var(--brain-opacity, 0);
  will-change: transform, opacity;
}

.brain-scroll__brain svg {
  width: 320px;
  height: 320px;
  display: block;
}

.brain-scroll__glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(107, 63, 160, 0.08) 0%, rgba(107, 63, 160, 0) 70%);
  opacity: var(--brain-opacity, 0);
  pointer-events: none;
  filter: blur(40px);
}

/* ==========================================================================
   NEURAL HUB: Futuristic Center Visualization
   ========================================================================== */
.neural-hub {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 560px;
  height: 560px;
  z-index: 1;
  pointer-events: none;
}

.neural-hub__svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* --- Concentric Rings --- */
.neural-hub__ring {
  transition: stroke 0.8s ease, stroke-opacity 0.8s ease;
}

.neural-hub__ring-glow {
  transition: opacity 0.8s ease, stroke-width 0.8s ease;
}

/* Phase 1: innermost ring glows */
.neural-hub[data-active-phase="1"] .neural-hub__ring-glow--1,
.neural-hub[data-active-phase="2"] .neural-hub__ring-glow--1,
.neural-hub[data-active-phase="3"] .neural-hub__ring-glow--1,
.neural-hub[data-active-phase="4"] .neural-hub__ring-glow--1,
.neural-hub[data-active-phase="5"] .neural-hub__ring-glow--1 {
  opacity: 0.7;
}

/* Phase 2: + ring 2 */
.neural-hub[data-active-phase="2"] .neural-hub__ring-glow--2,
.neural-hub[data-active-phase="3"] .neural-hub__ring-glow--2,
.neural-hub[data-active-phase="4"] .neural-hub__ring-glow--2,
.neural-hub[data-active-phase="5"] .neural-hub__ring-glow--2 {
  opacity: 0.6;
}

/* Phase 3: + ring 3 */
.neural-hub[data-active-phase="3"] .neural-hub__ring-glow--3,
.neural-hub[data-active-phase="4"] .neural-hub__ring-glow--3,
.neural-hub[data-active-phase="5"] .neural-hub__ring-glow--3 {
  opacity: 0.5;
}

/* Phase 4: + ring 4 */
.neural-hub[data-active-phase="4"] .neural-hub__ring-glow--4,
.neural-hub[data-active-phase="5"] .neural-hub__ring-glow--4 {
  opacity: 0.4;
}

/* Phase 5: all rings fully lit + enhanced glow */
.neural-hub[data-active-phase="5"] .neural-hub__ring-glow--1 { opacity: 1; stroke-width: 3; }
.neural-hub[data-active-phase="5"] .neural-hub__ring-glow--2 { opacity: 0.85; stroke-width: 2.5; }
.neural-hub[data-active-phase="5"] .neural-hub__ring-glow--3 { opacity: 0.7; stroke-width: 2; }
.neural-hub[data-active-phase="5"] .neural-hub__ring-glow--4 { opacity: 0.6; stroke-width: 2; }

/* Base ring subtle brightening when active */
.neural-hub[data-active-phase="1"] .neural-hub__ring--1,
.neural-hub[data-active-phase="2"] .neural-hub__ring--1,
.neural-hub[data-active-phase="3"] .neural-hub__ring--1,
.neural-hub[data-active-phase="4"] .neural-hub__ring--1,
.neural-hub[data-active-phase="5"] .neural-hub__ring--1 {
  stroke: rgba(107, 63, 160, 0.2);
}

.neural-hub[data-active-phase="2"] .neural-hub__ring--2,
.neural-hub[data-active-phase="3"] .neural-hub__ring--2,
.neural-hub[data-active-phase="4"] .neural-hub__ring--2,
.neural-hub[data-active-phase="5"] .neural-hub__ring--2 {
  stroke: rgba(107, 63, 160, 0.18);
}

.neural-hub[data-active-phase="3"] .neural-hub__ring--3,
.neural-hub[data-active-phase="4"] .neural-hub__ring--3,
.neural-hub[data-active-phase="5"] .neural-hub__ring--3 {
  stroke: rgba(107, 63, 160, 0.15);
}

.neural-hub[data-active-phase="4"] .neural-hub__ring--4,
.neural-hub[data-active-phase="5"] .neural-hub__ring--4 {
  stroke: rgba(107, 63, 160, 0.12);
}

/* --- Orbital Dots --- */
.neural-hub__dot {
  transition: opacity 0.8s ease;
}

/* Show dots per ring activation */
.neural-hub[data-active-phase="1"] .neural-hub__dot--1a,
.neural-hub[data-active-phase="2"] .neural-hub__dot--1a,
.neural-hub[data-active-phase="3"] .neural-hub__dot--1a,
.neural-hub[data-active-phase="4"] .neural-hub__dot--1a,
.neural-hub[data-active-phase="5"] .neural-hub__dot--1a {
  opacity: 0.8;
}

.neural-hub[data-active-phase="2"] .neural-hub__dot--2a,
.neural-hub[data-active-phase="2"] .neural-hub__dot--2b,
.neural-hub[data-active-phase="3"] .neural-hub__dot--2a,
.neural-hub[data-active-phase="3"] .neural-hub__dot--2b,
.neural-hub[data-active-phase="4"] .neural-hub__dot--2a,
.neural-hub[data-active-phase="4"] .neural-hub__dot--2b,
.neural-hub[data-active-phase="5"] .neural-hub__dot--2a,
.neural-hub[data-active-phase="5"] .neural-hub__dot--2b {
  opacity: 0.7;
}

.neural-hub[data-active-phase="3"] .neural-hub__dot--3a,
.neural-hub[data-active-phase="3"] .neural-hub__dot--3b,
.neural-hub[data-active-phase="4"] .neural-hub__dot--3a,
.neural-hub[data-active-phase="4"] .neural-hub__dot--3b,
.neural-hub[data-active-phase="5"] .neural-hub__dot--3a,
.neural-hub[data-active-phase="5"] .neural-hub__dot--3b {
  opacity: 0.6;
}

.neural-hub[data-active-phase="4"] .neural-hub__dot--4a,
.neural-hub[data-active-phase="4"] .neural-hub__dot--4b,
.neural-hub[data-active-phase="5"] .neural-hub__dot--4a,
.neural-hub[data-active-phase="5"] .neural-hub__dot--4b {
  opacity: 0.5;
}

/* Phase 5: all dots brighter */
.neural-hub[data-active-phase="5"] .neural-hub__dot--1a { opacity: 1; }
.neural-hub[data-active-phase="5"] .neural-hub__dot--2a,
.neural-hub[data-active-phase="5"] .neural-hub__dot--2b { opacity: 0.9; }
.neural-hub[data-active-phase="5"] .neural-hub__dot--3a,
.neural-hub[data-active-phase="5"] .neural-hub__dot--3b { opacity: 0.8; }
.neural-hub[data-active-phase="5"] .neural-hub__dot--4a,
.neural-hub[data-active-phase="5"] .neural-hub__dot--4b { opacity: 0.7; }

/* --- Connection Lines --- */
.neural-hub__conn {
  transition: opacity 0.6s ease;
}

.neural-hub[data-active-phase="1"] .neural-hub__conn--left-1,
.neural-hub[data-active-phase="1"] .neural-hub__conn--left-2,
.neural-hub[data-active-phase="3"] .neural-hub__conn--left-1,
.neural-hub[data-active-phase="3"] .neural-hub__conn--left-2,
.neural-hub[data-active-phase="3"] .neural-hub__conn--left-3 {
  opacity: 0.5;
}

.neural-hub[data-active-phase="2"] .neural-hub__conn--right-1,
.neural-hub[data-active-phase="2"] .neural-hub__conn--right-2,
.neural-hub[data-active-phase="4"] .neural-hub__conn--right-1,
.neural-hub[data-active-phase="4"] .neural-hub__conn--right-2,
.neural-hub[data-active-phase="4"] .neural-hub__conn--right-3 {
  opacity: 0.5;
}

.neural-hub[data-active-phase="5"] .neural-hub__conn {
  opacity: 0.6;
}

/* --- Central Core --- */
.neural-hub__core-outer {
  transition: fill 0.8s ease, stroke 0.8s ease, r 0.8s ease;
}

.neural-hub__core-inner {
  transition: fill 0.8s ease, stroke 0.8s ease;
}

.neural-hub__core-pulse {
  transition: opacity 0.6s ease;
}

/* Core brightens with each phase */
.neural-hub[data-active-phase="1"] .neural-hub__core-outer {
  fill: rgba(107, 63, 160, 0.06);
  stroke: rgba(107, 63, 160, 0.2);
}
.neural-hub[data-active-phase="1"] .neural-hub__core-inner {
  fill: rgba(107, 63, 160, 0.08);
  stroke: rgba(107, 63, 160, 0.25);
}

.neural-hub[data-active-phase="2"] .neural-hub__core-outer {
  fill: rgba(107, 63, 160, 0.08);
  stroke: rgba(107, 63, 160, 0.25);
}
.neural-hub[data-active-phase="2"] .neural-hub__core-inner {
  fill: rgba(107, 63, 160, 0.1);
  stroke: rgba(107, 63, 160, 0.3);
}

.neural-hub[data-active-phase="3"] .neural-hub__core-outer {
  fill: rgba(107, 63, 160, 0.1);
  stroke: rgba(107, 63, 160, 0.3);
}
.neural-hub[data-active-phase="3"] .neural-hub__core-inner {
  fill: rgba(107, 63, 160, 0.14);
  stroke: rgba(107, 63, 160, 0.35);
}

.neural-hub[data-active-phase="4"] .neural-hub__core-outer {
  fill: rgba(107, 63, 160, 0.12);
  stroke: rgba(107, 63, 160, 0.35);
}
.neural-hub[data-active-phase="4"] .neural-hub__core-inner {
  fill: rgba(107, 63, 160, 0.18);
  stroke: rgba(107, 63, 160, 0.4);
}

.neural-hub[data-active-phase="5"] .neural-hub__core-outer {
  fill: rgba(107, 63, 160, 0.16);
  stroke: rgba(107, 63, 160, 0.45);
}
.neural-hub[data-active-phase="5"] .neural-hub__core-inner {
  fill: rgba(107, 63, 160, 0.22);
  stroke: rgba(107, 63, 160, 0.5);
}

/* Pulsing core animation on phase 5 */
.neural-hub[data-active-phase="5"] .neural-hub__core-pulse {
  opacity: 1;
  animation: neuralCorePulse 2s ease-in-out infinite;
}

@keyframes neuralCorePulse {
  0%, 100% {
    opacity: 0.4;
    stroke-width: 1;
  }
  50% {
    opacity: 0;
    stroke-width: 3;
    r: 72;
  }
}

/* --- Phase Number Display --- */
.neural-hub__phase-num {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.5s ease;
  width: 80px;
  height: 80px;
  text-align: center;
}

.neural-hub[data-active-phase="1"] .neural-hub__phase-num,
.neural-hub[data-active-phase="2"] .neural-hub__phase-num,
.neural-hub[data-active-phase="3"] .neural-hub__phase-num,
.neural-hub[data-active-phase="4"] .neural-hub__phase-num,
.neural-hub[data-active-phase="5"] .neural-hub__phase-num {
  opacity: 1;
}

.neural-hub__phase-label {
  font-size: 8px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(107, 63, 160, 0.4);
  line-height: 1;
  margin-bottom: 2px;
}

.neural-hub__phase-number {
  font-size: 28px;
  font-weight: 300;
  letter-spacing: -1px;
  color: rgba(107, 63, 160, 0.55);
  line-height: 1;
  transition: color 0.6s ease, font-size 0.4s ease;
}

.neural-hub[data-active-phase="5"] .neural-hub__phase-number {
  color: rgba(107, 63, 160, 0.8);
  font-size: 32px;
}

/* --- Radial Glow --- */
.neural-hub__radial-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(107, 63, 160, 0.06) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.8s ease, width 0.8s ease, height 0.8s ease;
  pointer-events: none;
  filter: blur(30px);
}

.neural-hub[data-active-phase="1"] .neural-hub__radial-glow {
  opacity: 0.4;
  width: 250px;
  height: 250px;
}
.neural-hub[data-active-phase="2"] .neural-hub__radial-glow {
  opacity: 0.55;
  width: 320px;
  height: 320px;
}
.neural-hub[data-active-phase="3"] .neural-hub__radial-glow {
  opacity: 0.7;
  width: 400px;
  height: 400px;
}
.neural-hub[data-active-phase="4"] .neural-hub__radial-glow {
  opacity: 0.85;
  width: 480px;
  height: 480px;
}
.neural-hub[data-active-phase="5"] .neural-hub__radial-glow {
  opacity: 1;
  width: 560px;
  height: 560px;
  background: radial-gradient(circle, rgba(107, 63, 160, 0.1) 0%, rgba(107, 63, 160, 0.03) 50%, transparent 70%);
}

/* --- Ring rotation for phase 5 (subtle) --- */
.neural-hub[data-active-phase="5"] .neural-hub__ring-glow--4 {
  animation: neuralRingSpin 60s linear infinite;
}
.neural-hub[data-active-phase="5"] .neural-hub__ring-glow--3 {
  animation: neuralRingSpin 45s linear infinite reverse;
}

@keyframes neuralRingSpin {
  from { transform-origin: 300px 300px; transform: rotate(0deg); }
  to { transform-origin: 300px 300px; transform: rotate(360deg); }
}

/* --- Mobile responsive --- */
@media (max-width: 991px) {
  .neural-hub {
    width: 380px;
    height: 380px;
  }
  .neural-hub__phase-num {
    width: 64px;
    height: 64px;
  }
  .neural-hub__phase-number {
    font-size: 24px;
  }
  .neural-hub__phase-label {
    font-size: 7px;
    letter-spacing: 2px;
  }
}

@media (max-width: 767px) {
  .neural-hub {
    width: 280px;
    height: 280px;
    opacity: 0.85;
  }
  .neural-hub__phase-num {
    width: 56px;
    height: 56px;
    gap: 0;
  }
  .neural-hub__phase-label {
    font-size: 6px;
    letter-spacing: 1.5px;
  }
  .neural-hub__phase-number {
    font-size: 20px;
  }
  .neural-hub__radial-glow {
    display: none;
  }
}

@media (max-width: 479px) {
  .neural-hub {
    width: 220px;
    height: 220px;
    opacity: 0.9;
  }
  .neural-hub__phase-num {
    width: 48px;
    height: 48px;
  }
  .neural-hub__phase-label {
    font-size: 5px;
  }
  .neural-hub__phase-number {
    font-size: 18px;
  }
}


/* Progress bar */
.brain-scroll__progress {
  position: absolute;
  left: 32px;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 200px;
  background: rgba(32, 30, 16, 0.08);
  border-radius: 1px;
  z-index: 10;
}

.brain-scroll__progress-fill {
  width: 100%;
  height: 0%;
  background: linear-gradient(180deg, #6B3FA0, #8B5FC0);
  border-radius: 1px;
  transition: height 0.1s linear;
}

/* Phase content */
.brain-scroll__phase {
  position: absolute;
  z-index: 5;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  pointer-events: none;
}

.brain-scroll__phase.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Intro text */
.brain-scroll__intro {
  text-align: center;
  max-width: 600px;
}

/* Cards */
.brain-scroll__card {
  max-width: 380px;
}

.brain-scroll__card--left {
  left: 6%;
  top: 50%;
  transform: translateY(-50%) translateX(-40px);
}
.brain-scroll__card--left.active {
  transform: translateY(-50%) translateX(0);
}

.brain-scroll__card--right {
  right: 6%;
  top: 50%;
  transform: translateY(-50%) translateX(40px);
}
.brain-scroll__card--right.active {
  transform: translateY(-50%) translateX(0);
}

.brain-scroll__card--center {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) translateY(40px);
}
.brain-scroll__card--center.active {
  transform: translate(-50%, -50%) translateY(0);
}

.brain-scroll__card-inner {
  background: #ffffff;
  border: 1px solid rgba(32, 30, 16, 0.06);
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 4px 24px rgba(32, 30, 16, 0.06);
}

.brain-scroll__card-num {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 2px;
  color: rgba(32, 30, 16, 0.15);
  margin-bottom: 12px;
  text-transform: uppercase;
}

.brain-scroll__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.brain-scroll__tags span {
  font-size: 11px;
  font-family: 'DM Mono', monospace;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(32, 30, 16, 0.4);
  border: 1px solid rgba(32, 30, 16, 0.1);
  border-radius: 100px;
  padding: 4px 12px;
  background: rgba(32, 30, 16, 0.03);
}

/* Mobile responsive */
@media (max-width: 991px) {
  .brain-scroll { height: 400vh; }
  .brain-scroll__brain svg { width: 260px; height: 260px; }
  .brain-scroll__card { max-width: 320px; }
  .brain-scroll__card--left { left: 4%; }
  .brain-scroll__card--right { right: 4%; }
}

@media (max-width: 767px) {
  .brain-scroll { height: 350vh; }
  .brain-scroll__brain svg { width: 200px; height: 200px; }
  .brain-scroll__card {
    max-width: calc(100% - 48px);
    left: 24px !important;
    right: 24px !important;
    top: auto !important;
    bottom: 24px;
    transform: translateY(30px) !important;
  }
  .brain-scroll__card.active {
    transform: translateY(0) !important;
  }
  .brain-scroll__progress { display: none; }
  .brain-scroll__glow { width: 300px; height: 300px; }
}


/* ==========================================================================
   RECO Logo Glow - Phase 5 Brain Scroll Finale
   ========================================================================== */

/* --- Card RECO Logo (inside the phase 5 card) --- */
.brain-scroll__reco-logo {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  opacity: 0;
  transform: scale(0.85) translateY(8px);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.3s,
              transform 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
}

.brain-scroll__reco-svg {
  width: 140px;
  height: auto;
  color: #6B3FA0;
}

/* Activate only when phase 5 card is active */
.brain-scroll__card[data-phase="5"].active .brain-scroll__reco-logo {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.brain-scroll__card[data-phase="5"].active .brain-scroll__reco-svg {
  animation: recoCardGlow 4s ease-in-out infinite 1s;
}

@keyframes recoCardGlow {
  0%, 100% {
    filter:
      drop-shadow(0 0 4px rgba(107, 63, 160, 0.3))
      drop-shadow(0 0 12px rgba(107, 63, 160, 0.2))
      drop-shadow(0 0 24px rgba(107, 63, 160, 0.15));
    color: #6B3FA0;
  }
  33% {
    filter:
      drop-shadow(0 0 6px rgba(107, 63, 160, 0.5))
      drop-shadow(0 0 18px rgba(107, 63, 160, 0.35))
      drop-shadow(0 0 36px rgba(107, 63, 160, 0.25));
    color: #7B4FB8;
  }
  66% {
    filter:
      drop-shadow(0 0 5px rgba(107, 63, 160, 0.4))
      drop-shadow(0 0 16px rgba(107, 63, 160, 0.3))
      drop-shadow(0 0 32px rgba(107, 63, 160, 0.2));
    color: #9B6FD0;
  }
}

/* --- Neural Hub Center RECO Logo (replaces phase number on phase 5) --- */
.neural-hub__reco-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  z-index: 3;
  width: 120px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.neural-hub__reco-svg {
  width: 100%;
  height: auto;
  display: block;
  color: #6B3FA0;
}

/* Hide phase number and show logo on phase 5 */
.neural-hub[data-active-phase="5"] .neural-hub__phase-num {
  opacity: 0 !important;
  transform: translate(-50%, -50%) scale(0.8);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.neural-hub[data-active-phase="5"] .neural-hub__reco-logo {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  animation: recoHubGlow 5s ease-in-out infinite 0.6s;
}

@keyframes recoHubGlow {
  0%, 100% {
    filter:
      drop-shadow(0 0 6px rgba(107, 63, 160, 0.4))
      drop-shadow(0 0 16px rgba(107, 63, 160, 0.25))
      drop-shadow(0 0 40px rgba(107, 63, 160, 0.15));
    color: #6B3FA0;
  }
  25% {
    filter:
      drop-shadow(0 0 8px rgba(107, 63, 160, 0.6))
      drop-shadow(0 0 24px rgba(107, 63, 160, 0.4))
      drop-shadow(0 0 48px rgba(107, 63, 160, 0.25))
      drop-shadow(0 0 64px rgba(107, 63, 160, 0.1));
    color: #7B4FB8;
  }
  50% {
    filter:
      drop-shadow(0 0 8px rgba(107, 63, 160, 0.5))
      drop-shadow(0 0 20px rgba(107, 63, 160, 0.35))
      drop-shadow(0 0 44px rgba(107, 63, 160, 0.2))
      drop-shadow(0 0 60px rgba(107, 63, 160, 0.1));
    color: #8B5FC0;
  }
  75% {
    filter:
      drop-shadow(0 0 10px rgba(107, 63, 160, 0.55))
      drop-shadow(0 0 22px rgba(107, 63, 160, 0.3))
      drop-shadow(0 0 46px rgba(107, 63, 160, 0.2))
      drop-shadow(0 0 56px rgba(107, 63, 160, 0.08));
    color: #7B4FB8;
  }
}

/* SVG stroke draw-in animation on phase 5 */
.neural-hub__reco-svg g path {
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  transition: stroke-dashoffset 0s;
}

.neural-hub[data-active-phase="5"] .neural-hub__reco-svg g path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Stagger the three path elements for sequential draw-in */
.neural-hub[data-active-phase="5"] .neural-hub__reco-svg g path:nth-child(1) {
  transition-delay: 0.2s;
}
.neural-hub[data-active-phase="5"] .neural-hub__reco-svg g path:nth-child(2) {
  transition-delay: 0.5s;
}
.neural-hub[data-active-phase="5"] .neural-hub__reco-svg g path:nth-child(3) {
  transition-delay: 0.8s;
}

/* Card logo also gets draw-in effect */
.brain-scroll__reco-svg g path {
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  transition: stroke-dashoffset 0s;
}

.brain-scroll__card[data-phase="5"].active .brain-scroll__reco-svg g path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.brain-scroll__card[data-phase="5"].active .brain-scroll__reco-svg g path:nth-child(1) {
  transition-delay: 0.4s;
}
.brain-scroll__card[data-phase="5"].active .brain-scroll__reco-svg g path:nth-child(2) {
  transition-delay: 0.7s;
}
.brain-scroll__card[data-phase="5"].active .brain-scroll__reco-svg g path:nth-child(3) {
  transition-delay: 1.0s;
}

/* --- Mobile responsive for RECO logo glow --- */
@media (max-width: 991px) {
  .neural-hub__reco-logo {
    width: 90px;
  }
  .brain-scroll__reco-svg {
    width: 120px;
  }
}

@media (max-width: 767px) {
  .neural-hub__reco-logo {
    width: 70px;
  }
  .brain-scroll__reco-svg {
    width: 100px;
  }
  .brain-scroll__reco-logo {
    margin-top: 14px;
  }
}

@media (max-width: 479px) {
  .neural-hub__reco-logo {
    width: 56px;
  }
  .brain-scroll__reco-svg {
    width: 80px;
  }
}


/* ========================================================================
   Psychiatry Team Section - Unique Dark Design
   ======================================================================== */
.psych-team-section {
  background: linear-gradient(180deg, #ffffff 0%, #f5f0eb 100%);
  padding: 120px 0;
  position: relative;
  overflow: hidden;
}

.psych-team-section::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(107, 63, 160, 0.04) 0%, transparent 70%);
  pointer-events: none;
}

.psych-team-section::after {
  content: '';
  position: absolute;
  bottom: -30%;
  left: -10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(107, 63, 160, 0.03) 0%, transparent 70%);
  pointer-events: none;
}

/* Featured Doctor Card */
.psych-team-featured {
  display: flex;
  gap: 48px;
  align-items: center;
  background: #ffffff;
  border: 1px solid rgba(32, 30, 16, 0.06);
  border-radius: 16px;
  padding: 40px;
  margin-bottom: 64px;
  box-shadow: 0 4px 24px rgba(32, 30, 16, 0.06);
}

.psych-team-featured__img {
  flex-shrink: 0;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid rgba(107, 63, 160, 0.15);
  box-shadow: 0 8px 32px rgba(32, 30, 16, 0.08);
}

.psych-team-featured__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.psych-team-featured__info {
  flex: 1;
}

/* Credential Badges */
.psych-team-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.psych-team-badge {
  display: inline-block;
  padding: 6px 16px;
  border: 1px solid rgba(32, 30, 16, 0.1);
  border-radius: 20px;
  font-size: 12px;
  font-family: 'DM Mono', monospace;
  color: rgba(32, 30, 16, 0.5);
  letter-spacing: 1px;
  text-transform: uppercase;
  background: rgba(32, 30, 16, 0.03);
}

/* Team Grid - Square (Island pattern) */
.psych-team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.psych-team-card {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  transition: transform 0.3s ease;
}

.psych-team-card:hover {
  transform: translateY(-4px);
}

.psych-team-card__img {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 8px;
  border: 2px solid rgba(32, 30, 16, 0.06);
  transition: border-color 0.3s, box-shadow 0.3s;
}

/* Square variant — now circular and constrained for cleaner look */
.psych-team-card__img.psych-team-card__img--square {
  width: 100%;
  max-width: 180px;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 1px solid rgba(32, 30, 16, 0.06);
  background: rgba(32, 30, 16, 0.03);
  position: relative;
  margin-bottom: 4px;
}

.psych-team-card:hover .psych-team-card__img--square {
  box-shadow: 0 12px 32px rgba(32, 30, 16, 0.1);
}

.psych-team-card:hover .psych-team-card__img:not(.psych-team-card__img--square) {
  border-color: var(--primary);
  box-shadow: 0 0 24px rgba(107, 63, 160, 0.1);
}

.psych-team-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.psych-team-card:hover .psych-team-card__img img {
  transform: scale(1.05);
}

.psych-team-card__info {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 4px 0;
}

/* Team Section Responsive */
@media (max-width: 991px) {
  .psych-team-featured {
    flex-direction: column;
    text-align: center;
    padding: 32px;
    gap: 24px;
  }
  .psych-team-featured__img {
    width: 180px;
    height: 180px;
  }
  .psych-team-badges {
    justify-content: center;
  }
  .psych-team-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 24px;
  }
}

@media (max-width: 767px) {
  .psych-team-section {
    padding: 64px 0;
  }
  .psych-team-featured__img {
    width: 150px;
    height: 150px;
  }
  .psych-team-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 16px;
  }
  .psych-team-card__img {
    width: 100px;
    height: 100px;
  }
  .psych-team-card__img.psych-team-card__img--square {
    width: 100%;
    max-width: 140px;
    border-radius: 50%;
  }
}


/* ==========================================================================
   27. RECO Brand Alignment — Premium Section Patterns
   ==========================================================================
   Unified section label, header row, gradient backgrounds, and typography
   patterns matching RECO Island and RECO Immersive.
   ========================================================================== */

/* --- Section Label: DM Mono, uppercase, letter-spacing 1.5px, reduced opacity --- */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'DM Mono', monospace;
  font-size: 13px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(32, 30, 16, 0.3);
  margin-bottom: 20px;
}

.section-label--gold {
  color: rgba(32, 30, 16, 0.3);
  opacity: 1;
}

.section-label--center {
  justify-content: center;
}

/* --- Muted heading color for partial-color pattern (dark bg sections) --- */
.font-muted-light {
  color: rgba(255, 255, 255, 0.35);
}

/* --- Horizontal Header Row (heading left, CTA right) --- */
.section-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 48px;
}

.section-header-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.5px;
  color: var(--off-black);
  text-decoration: none;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.section-header-cta:hover {
  color: var(--primary);
  gap: 12px;
}

.section-header-cta svg {
  transition: transform 0.2s ease;
}

.section-header-cta:hover svg {
  transform: translateX(3px);
}

/* --- Treatment Carousel Header Row --- */
.treatment-carousel-header__row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 1rem;
}

/* --- Conditions Section: Premium restyle --- */
.conditions-label {
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.3);
  margin-bottom: 20px;
}

.conditions-heading {
  color: #fff;
  margin-bottom: 0;
}

.conditions-desc {
  margin-top: 20px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.45);
  max-width: 420px;
}

.conditions-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 28px;
  letter-spacing: 0.5px;
  color: var(--primary);
  text-decoration: none;
  transition: all 0.2s ease;
}

.conditions-cta-link:hover {
  gap: 12px;
  color: var(--primary-light);
}

.conditions-cta-link svg {
  transition: transform 0.2s ease;
}

.conditions-cta-link:hover svg {
  transform: translateX(3px);
}

/* --- Testimonials Premium --- */
.testimonials-section .section-label {
  color: rgba(32, 30, 16, 0.3);
  margin-bottom: 0;
}

.review-container {
  min-height: 140px;
  margin: 40px 0 32px;
}

.testimonial-slide__text {
  font-family: 'Figtree', sans-serif;
  font-size: clamp(22px, 3vw, 32px);
  line-height: 1.5;
  color: var(--off-black);
  font-weight: 300;
  font-style: normal;
  letter-spacing: -0.02em;
}

/* --- Team Section: "View All" Link --- */
.team-view-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(32, 30, 16, 0.5);
  text-decoration: none;
  letter-spacing: 0.5px;
  transition: all 0.2s ease;
}

.team-view-all:hover {
  color: var(--primary);
  gap: 12px;
}

.team-view-all svg {
  transition: transform 0.2s ease;
}

.team-view-all:hover svg {
  transform: translateX(3px);
}

/* --- Contact CTA Section --- */
.section--contact-cta {
  background: linear-gradient(180deg, var(--lite-sand) 0%, #fff 100%);
  padding: 120px 0;
}

.section--contact-cta .btn--primary {
  background-color: var(--primary);
  border-color: var(--primary);
  transition: all 0.3s ease;
}

.section--contact-cta .btn--primary:hover {
  background-color: var(--primary-dark);
  border-color: var(--primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(var(--primary-rgb), 0.25);
}

/* --- Form Fields Premium --- */
.section--contact-cta .form-field {
  background-color: var(--lite-sand);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  padding: 16px 18px;
  font-size: 16px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.section--contact-cta .form-field:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.08);
  background-color: #fff;
}

/* --- FAQ Premium Styling --- */
.faq-question {
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.25px;
  padding: 28px 0;
}

.faq-answer p {
  color: rgba(32, 30, 16, 0.55);
}

.faq-item {
  border-bottom: 1px solid rgba(32, 30, 16, 0.06);
}

.faq-item:first-child {
  border-top: 1px solid rgba(32, 30, 16, 0.06);
}

/* --- Accreditation Logos Premium --- */
.accreditation-logo img {
  height: 52px;
  opacity: 0.6;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.accreditation-logo img:hover {
  opacity: 1;
  transform: scale(1.05);
}

/* --- About Section Gradient --- */
.about-section {
  background: linear-gradient(180deg, #fff 0%, var(--lite-sand) 100%);
}

/* --- Stagger Section Premium --- */
.stagger-label {
  color: var(--primary);
  opacity: 0.6;
  letter-spacing: 1.5px;
}

/* --- Network Section Gradient --- */
.network-section {
  background: linear-gradient(180deg, var(--lite-sand) 0%, var(--lite-sand) 100%);
}

/* --- Steps V2 Card Premium --- */
.steps-v2-card__num {
  font-size: 14px;
  letter-spacing: 1.5px;
  border-radius: 14px;
  width: 52px;
  height: 52px;
}

/* --- Blog Card Category Badge --- */
.blog-card__category {
  background: var(--primary);
  font-size: 11px;
  letter-spacing: 1px;
  padding: 4px 12px;
}

/* --- Facility Slide Premium --- */
.facility-slide {
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* --- Typed Emotional Section Premium --- */
.typed-emotional-headline {
  font-size: clamp(28px, 4.5vw, 56px);
  letter-spacing: -1.5px;
  line-height: 1.15;
}

.typed-emotional-sub {
  color: rgba(255, 255, 255, 0.4);
  line-height: 1.7;
  font-size: 17px;
}

/* --- Featured Doctor Card Premium Glow (overridden in section 28 below) --- */

/* --- Pathway Section Gradient (overridden in section 28 below) --- */

/* --- Responsive Adjustments for New Patterns --- */
@media (max-width: 991px) {
  .section-header-row {
    margin-bottom: 40px;
  }
  .treatment-carousel-header__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .section--contact-cta {
    padding: 80px 0;
  }
  .conditions-section {
    padding: 80px 0;
  }
  .testimonials-section {
    padding: 80px 0;
  }
  .blog-section {
    padding: 80px 0;
  }
  .facility-carousel-section {
    padding: 80px 0;
  }
  .treatment-carousel-section {
    padding: 80px 0;
  }
  .typed-emotional-section {
    padding: 80px 0;
  }
  .section--accreditations {
    padding: 80px 0;
  }
}

@media (max-width: 767px) {
  .section-header-row {
    margin-bottom: 32px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .section-label {
    margin-bottom: 16px;
    font-size: 12px;
  }
  .section--contact-cta {
    padding: 64px 0;
  }
  .conditions-section {
    padding: 64px 0;
  }
  .testimonials-section {
    padding: 64px 0;
  }
  .blog-section {
    padding: 64px 0;
  }
  .facility-carousel-section {
    padding: 64px 0;
  }
  .treatment-carousel-section {
    padding: 64px 0;
  }
  .typed-emotional-section {
    padding: 64px 0;
  }
  .section--accreditations {
    padding: 64px 0;
  }
  .testimonial-slide__text {
    font-size: clamp(18px, 3vw, 24px);
  }
  .accreditation-logo img {
    height: 40px;
  }
  .psych-team-card__img.psych-team-card__img--square {
    border-radius: 50%;
    max-width: 140px;
  }
}


/* ==========================================================================
   28. COMPREHENSIVE RECO BRAND ALIGNMENT FIX
   ==========================================================================
   Section-by-section overhaul to match RECO Island and RECO Immersive quality.
   Fixes: section transitions, borders, text colors, spacing, card styles,
   Leadership section, Your Journey section, FAQ, Blog, Accreditations.
   ========================================================================== */

/* --- SECTION FLOW: Smooth gradient transitions between all sections ---
   Island/Immersive use alternating light/dark with soft gradient bridges.
   The pattern: white -> sand -> dark -> sand -> white (etc).
   Every section gradient endpoint MUST match the next section's start. --- */

/* About Section: white at top, warm sand at bottom -> flows into dark stagger */
.about-section {
  background: linear-gradient(180deg, #fff 0%, #f8f4ec 60%, #f0ebe0 100%);
  padding: 120px 0 100px;
}

/* Dark Stagger: starts dark (after sand), exits dark -> flows into treatment carousel */
.section-dark-stagger {
  background: #070c01;
}

/* Treatment Carousel: sand at top flowing from dark exit, to white bottom */
.treatment-carousel-section {
  background: linear-gradient(180deg, #f0ebe0 0%, #f8f4ec 40%, #fff 100%);
  padding: 120px 0;
}

/* Conditions Section: deep dark with purple tint */
.conditions-section {
  background: linear-gradient(180deg, #070c01 0%, #0e081a 40%, #120a1e 60%, #0e081a 90%, #070c01 100%);
  padding: 120px 0;
}

/* Brain Scroll: warm off-white light theme */
.brain-scroll {
  background: #f5f0eb;
}

/* Facility Carousel: warm sand, back to light */
.facility-carousel-section {
  background: linear-gradient(180deg, #fff 0%, #f8f4ec 50%, #f0ebe0 100%);
  padding: 120px 0;
}

/* Steps Section: warm sand -> flows nicely from facility carousel */
.section--steps {
  background: linear-gradient(180deg, #f0ebe0 0%, #f8f4ec 40%, #fff 100%);
  padding: 120px 0;
}

/* Blog Section: white -> warm sand */
.blog-section {
  background: linear-gradient(180deg, #fff 0%, #f8f4ec 50%, var(--lite-sand) 100%);
  padding: 120px 0;
}

/* FAQ Section: warm sand (matches blog exit) -> back to white */
.section--faq {
  background: linear-gradient(180deg, var(--lite-sand) 0%, #f8f4ec 40%, #fff 100%);
  padding: 120px 0;
}

/* Contact CTA: white -> warm sand */
.section--contact-cta {
  background: linear-gradient(180deg, #fff 0%, #f8f4ec 50%, var(--lite-sand) 100%);
  padding: 120px 0;
}

/* Network: consistent warm sand */
.network-section {
  background: var(--lite-sand);
}

/* Testimonials: warm sand at top, white at bottom */
.testimonials-section {
  background: linear-gradient(180deg, var(--lite-sand) 0%, #f8f4ec 40%, #fff 100%);
  padding: 120px 0;
}


/* --- SECTION LABELS: Match Island/Immersive exactly ---
   Island uses: DM Mono, 14px, uppercase, letter-spacing ~1.5px,
   color rgba(32,30,16,0.35) for light backgrounds,
   rgba(255,255,255,0.3) for dark backgrounds. --- */

.section-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'DM Mono', monospace;
  font-size: 13px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(32, 30, 16, 0.3);
  margin-bottom: 20px;
}

.section-label--gold {
  color: rgba(32, 30, 16, 0.3);
  opacity: 1;
}

/* --- CARD BORDERS: Match Island/Immersive card style ---
   Island uses: border-radius 12px, border: 1px solid rgba(0,0,0,0.06),
   box-shadow: 4px 4px 5px rgba(85,61,0,0.1) on hover.
   Immersive uses 16px radius, subtle shadows. --- */

/* Treatment cards: match Island card feel */
.treatment-slide-card {
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 1px 4px rgba(85, 61, 0, 0.03);
  background: #fff;
}

.treatment-slide-card:hover {
  transform: translateY(-4px);
  box-shadow: 4px 4px 20px rgba(85, 61, 0, 0.1);
  border-color: transparent;
}

/* Blog cards: match Island card borders */
.blog-card {
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 1px 4px rgba(85, 61, 0, 0.03);
  background: #fff;
}

.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 4px 4px 20px rgba(85, 61, 0, 0.1);
  border-color: transparent;
}

/* Facility slide: consistent radius */
.facility-slide {
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}


/* --- LEADERSHIP / TEAM SECTION: Make it feel RECO ---
   Island pattern: clean light background, two-column staggered grid,
   square photos with 12px radius, subtle borders, warm tones.

   The psych team was too dark and disconnected. We're refining it:
   - Keep the dark premium feel but add warmer purple-to-sand flow
   - Better card styling with glassmorphic borders matching Island
   - More generous spacing
   - Featured doctor card: warmer, more RECO-branded --- */

/* Team section: light elegant (matching Island/Immersive) */
/* Note: Main .psych-team-section styles defined earlier with light background */

/* Featured doctor card: clean light style */
.psych-team-featured {
  display: flex;
  gap: 48px;
  align-items: center;
  background: #ffffff;
  border: 1px solid rgba(32, 30, 16, 0.06);
  border-radius: 16px;
  padding: 48px;
  margin-bottom: 64px;
  box-shadow: 0 4px 24px rgba(32, 30, 16, 0.06);
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

.psych-team-featured:hover {
  border-color: rgba(32, 30, 16, 0.12);
  box-shadow: 0 8px 32px rgba(32, 30, 16, 0.08);
}

/* Featured doctor photo: clean with subtle purple accent */
.psych-team-featured__img {
  flex-shrink: 0;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid rgba(107, 63, 160, 0.15);
  box-shadow: 0 8px 32px rgba(32, 30, 16, 0.08);
}

/* Credential badges: subtle, refined */
.psych-team-badge {
  display: inline-block;
  padding: 6px 16px;
  border: 1px solid rgba(32, 30, 16, 0.08);
  border-radius: 20px;
  font-size: 11px;
  font-family: 'DM Mono', monospace;
  color: rgba(32, 30, 16, 0.45);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  transition: all 0.3s ease;
}

.psych-team-badge:hover {
  border-color: rgba(107, 63, 160, 0.2);
  color: var(--primary);
}

/* Team grid: square photos with rounded corners like Island */
.psych-team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.psych-team-card {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.psych-team-card:hover {
  transform: translateY(-6px);
}

/* Square photos matching Island pattern — constrained size for clean look */
.psych-team-card__img.psych-team-card__img--square {
  width: 100%;
  max-width: 180px;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 1px solid rgba(32, 30, 16, 0.06);
  background: #f5f0eb;
  overflow: hidden;
  transition: all 0.35s ease;
}

.psych-team-card:hover .psych-team-card__img--square {
  border-color: rgba(32, 30, 16, 0.12);
  box-shadow: 0 8px 32px rgba(32, 30, 16, 0.08);
}

/* Team card text: consistent with Island pattern */
.psych-team-card__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 0;
}


/* --- YOUR JOURNEY / STEPS SECTION: Make it RECO ---
   Island uses: parallelogram step numbers, image+text layout, warm colors.
   Psych version should feel premium but consistent. --- */

/* Steps heading: match Island font-48 light style */
.steps-heading-col .font-48 {
  letter-spacing: -2px;
  line-height: 0.95;
}

/* Steps number wrap: refined with purple/gold accent */
.steps-v2-card__num {
  font-family: 'DM Mono', monospace;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1.5px;
  color: var(--primary);
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(107, 63, 160, 0.15);
  border-radius: 12px;
  background: rgba(107, 63, 160, 0.04);
  position: relative;
  z-index: 2;
  transition: all 0.3s ease;
}

.steps-v2-card:hover .steps-v2-card__num {
  border-color: rgba(107, 63, 160, 0.3);
  color: var(--primary);
  background: rgba(107, 63, 160, 0.08);
}

/* Steps connector: subtle purple line */
.steps-v2-card__connector {
  position: absolute;
  left: 25px;
  top: 52px;
  width: 1px;
  height: calc(100% - 52px);
  background: linear-gradient(180deg, rgba(107, 63, 160, 0.15) 0%, rgba(107, 63, 160, 0.03) 100%);
  z-index: 1;
}

/* Steps card divider */
.steps-v2-card {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  padding: 40px 0;
  border-bottom: 1px solid rgba(32, 30, 16, 0.06);
  position: relative;
  transition: all 0.3s ease;
}

.steps-v2-card:hover {
  border-bottom-color: rgba(32, 30, 16, 0.12);
}

/* Steps CTA buttons: match Island style */
.steps-heading-ctas .btn--primary {
  background-color: var(--primary);
  border-color: var(--primary);
  color: #fff;
  padding: 16px 32px;
  border-radius: 8px;
  font-family: 'Figtree', sans-serif;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.steps-heading-ctas .btn--primary:hover {
  background-color: var(--primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(var(--primary-rgb), 0.2);
}

.steps-heading-ctas .btn--outline {
  background: transparent;
  border: 1px solid rgba(32, 30, 16, 0.12);
  color: var(--off-black);
  padding: 16px 32px;
  border-radius: 8px;
  font-family: 'Figtree', sans-serif;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.steps-heading-ctas .btn--outline:hover {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(32, 30, 16, 0.2);
}


/* --- FAQ SECTION: Match Island accordion style ---
   Island uses: clean white bg, subtle divider lines, weight 400 question text,
   lite-black answers, smooth accordion animation. --- */

.faq-item {
  border-bottom: 1px solid rgba(32, 30, 16, 0.06);
}

.faq-item:first-child {
  border-top: 1px solid rgba(32, 30, 16, 0.06);
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 28px 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Figtree', sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: var(--off-black);
  text-align: left;
  gap: 16px;
  letter-spacing: -0.25px;
  transition: color 0.2s ease;
}

.faq-question:hover {
  color: var(--primary);
}

.faq-answer p {
  font-size: 16px;
  line-height: 1.7;
  color: rgba(32, 30, 16, 0.5);
  margin: 0;
}


/* --- ACCREDITATIONS: Light clean style matching Island --- */
/* Note: Main .section--accreditations styles defined earlier with light background */
/* These overrides removed - dark backgrounds replaced with light */


/* --- CONDITION PILLS: Refined matching RECO brand ---
   Subtle glass-like pills with purple accent on hover. --- */

.condition-pill {
  display: inline-flex;
  align-items: center;
  padding: 10px 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 100px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  font-weight: 400;
  transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
}

.condition-pill:hover {
  background: rgba(var(--primary-rgb), 0.12);
  border-color: rgba(var(--primary-rgb), 0.25);
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(var(--primary-rgb), 0.1);
}

/* --- CONDITIONS TEXT: Better hierarchy --- */
.conditions-label {
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.25);
  margin-bottom: 20px;
  font-size: 13px;
}

.conditions-heading {
  color: #fff;
  margin-bottom: 0;
  letter-spacing: -2px;
  line-height: 1.05;
}

.conditions-desc {
  margin-top: 20px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.4);
  max-width: 420px;
  font-size: 16px;
}

.conditions-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 28px;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.4);
  text-decoration: none;
  transition: all 0.2s ease;
  font-size: 13px;
}

.conditions-cta-link:hover {
  gap: 12px;
  color: var(--primary);
}


/* --- BLOG CARDS: Match Island card body style --- */
.blog-card__body {
  padding: 24px;
}

.blog-card__date {
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  color: rgba(32, 30, 16, 0.35);
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}

.blog-card__title {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 8px;
  color: var(--off-black);
  line-height: 1.3;
  letter-spacing: -0.25px;
}

.blog-card__excerpt {
  font-size: 14px;
  color: rgba(32, 30, 16, 0.5);
  line-height: 1.65;
  margin-bottom: 16px;
}

.blog-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--primary);
  font-weight: 500;
  text-decoration: none;
  transition: gap 0.2s ease;
}

.blog-card:hover .blog-card__link {
  gap: 10px;
}

.blog-card__category {
  position: absolute;
  top: 16px;
  left: 16px;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fff;
  background: var(--primary);
  padding: 4px 12px;
  border-radius: 100px;
}


/* --- SECTION HEADER ROW: Match Island layout --- */
.section-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 48px;
}

.section-header-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'DM Mono', monospace;
  font-size: 13px;
  letter-spacing: 0.5px;
  color: rgba(32, 30, 16, 0.4);
  text-decoration: none;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.section-header-cta:hover {
  color: var(--primary);
  gap: 12px;
}


/* --- TREATMENT CAROUSEL HEADER: Refined alignment --- */
.treatment-carousel-header {
  max-width: 1136px;
  margin: 0 auto 48px;
  padding: 0 24px;
}

.treatment-carousel-header__row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 1rem;
}


/* --- TESTIMONIAL TEXT: Match Island review style ---
   Island uses: large Figtree weight-300 centered quote text. --- */

.testimonial-slide__text,
#review-text {
  font-family: 'Figtree', sans-serif;
  font-size: clamp(22px, 3vw, 32px);
  line-height: 1.5;
  color: var(--off-black);
  font-weight: 300;
  font-style: normal;
  letter-spacing: -0.02em;
  text-align: center;
}

/* Stars row: match Island pattern */
.testimonials-stars-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 32px;
}

.testimonials-stars-row svg {
  width: 16px;
  height: 16px;
  fill: var(--primary);
}

.testimonials-stars-row .star-text {
  font-family: 'Figtree', sans-serif;
  font-weight: 300;
  font-size: 16px;
  color: var(--off-black);
}

.testimonials-stars-row .star-text span {
  color: rgba(32, 30, 16, 0.3);
}


/* --- TYPED EMOTIONAL: Refined to match Island "Your life as a ___" --- */
.typed-emotional-headline {
  font-family: 'Figtree', sans-serif;
  font-weight: 300;
  font-size: clamp(28px, 4.5vw, 56px);
  line-height: 1.15;
  letter-spacing: -1.5px;
  color: rgba(255, 255, 255, 0.85);
}

.typed-emotional-headline .typed-gold {
  color: var(--primary-light);
}

.typed-emotional-sub {
  margin-top: 24px;
  font-size: 17px;
  color: rgba(255, 255, 255, 0.35);
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.7;
}

/* --- PRIMARY CTA BUTTON: Purple --- */
.btn--primary {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark, #5A2E8C) 100%);
  color: #fff;
  border: none;
  padding: 16px 40px;
  border-radius: 8px;
  font-family: 'Figtree', sans-serif;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  cursor: pointer;
}

.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(107, 63, 160, 0.35);
}

/* --- GOLD CTA BUTTON: Match Island orange-submit style --- */
.btn--gold {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: #fff;
  border: none;
  padding: 16px 40px;
  border-radius: 8px;
  font-family: 'Figtree', sans-serif;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  cursor: pointer;
}

.btn--gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(107, 63, 160, 0.3);
}


/* --- FORM FIELDS: Match Island input style --- */
.section--contact-cta .form-field,
.form-field.w-input {
  background-color: #f8f4ec;
  border: 1px solid rgba(32, 30, 16, 0.06);
  border-radius: 8px;
  padding: 16px 18px;
  font-size: 16px;
  font-family: 'Figtree', sans-serif;
  color: var(--off-black);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
  width: 100%;
}

.section--contact-cta .form-field:focus,
.form-field.w-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.06);
  background-color: #fff;
}


/* --- STAGGER SECTION: Refined text --- */
.stagger-label {
  font-family: 'DM Mono', monospace;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.3);
  margin-bottom: 40px;
}

.stagger-headline {
  font-family: 'Figtree', sans-serif;
  font-weight: 300;
  color: #fff;
  letter-spacing: -2px;
  line-height: 1.05;
}

.stagger-sub {
  color: rgba(255, 255, 255, 0.4);
  line-height: 1.7;
  font-size: 17px;
  max-width: 480px;
}


/* --- HERO SECTION: Consistent with Island --- */
.hero-display {
  font-family: 'Figtree', sans-serif;
  font-weight: 300;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.0;
  letter-spacing: -2px;
  color: #fff;
  text-align: center;
}


/* --- FONT MUTED / SPAN STYLES: Consistent with Island --- */
.font-muted-light {
  color: rgba(255, 255, 255, 0.3);
}

.font-lite-black {
  color: rgba(32, 30, 16, 0.5);
}

span.font-lite-black {
  color: rgba(32, 30, 16, 0.5);
}


/* --- TEAM VIEW ALL LINK: Match Island "Meet the team" link --- */
.team-view-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(32, 30, 16, 0.4);
  text-decoration: none;
  letter-spacing: 0.5px;
  font-size: 13px;
  transition: all 0.2s ease;
}

.team-view-all:hover {
  color: var(--primary);
  gap: 12px;
}


/* --- FOOTER: Match Island footer pattern --- */
.footer.section {
  background: var(--lite-sand);
  padding: 0;
}

.footer-padding {
  padding: 80px 0 32px;
}

._4-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 48px;
}

.footer .font-12.font-lite-black {
  color: rgba(32, 30, 16, 0.35);
  font-family: 'DM Mono', monospace;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.footer .font-16.font-black {
  color: var(--off-black);
  text-decoration: none;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.2;
  transition: color 0.2s ease;
  display: block;
  padding: 4px 0;
}

.footer .font-16.font-black:hover {
  color: var(--primary);
}


/* Duplicate pathway connector removed — see main pathway styles above */


/* --- RESPONSIVE: Maintain quality at all breakpoints --- */
@media (max-width: 991px) {
  .psych-team-section {
    padding: 80px 0;
  }
  .psych-team-featured {
    flex-direction: column;
    text-align: center;
    padding: 32px;
    gap: 24px;
  }
  .psych-team-featured__img {
    width: 160px;
    height: 160px;
  }
  .psych-team-badges {
    justify-content: center;
  }
  .psych-team-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 24px;
  }
  .section--steps {
    padding: 80px 0;
  }
  .steps-layout {
    flex-direction: column;
    gap: 48px;
  }
  .steps-heading-col {
    position: static;
    max-width: 100%;
  }
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .conditions-layout {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

@media (max-width: 767px) {
  .psych-team-section {
    padding: 64px 0;
  }
  .psych-team-featured__img {
    width: 140px;
    height: 140px;
  }
  .psych-team-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 16px;
  }
  .blog-grid {
    grid-template-columns: 1fr;
  }
  .blog-grid .blog-card:last-child {
    display: none;
  }
  ._4-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  .steps-v2-card {
    gap: 20px;
    padding: 32px 0;
  }
  .steps-v2-card__num {
    width: 44px;
    height: 44px;
    font-size: 12px;
    border-radius: 10px;
  }
  .accreditation-logos-grid {
    gap: 24px;
  }
  .accreditation-logo img {
    height: 40px;
  }
  .section-header-row {
    margin-bottom: 32px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .treatment-carousel-header__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .treatment-carousel-header {
    padding: 0 24px;
    margin-bottom: 32px;
  }
}


/* ==========================================================================
   SECTION BORDERS — Visual separation matching Island / Immersive pattern
   ==========================================================================
   Island and Immersive use subtle border-top / border-bottom between sections
   to create visual separation. Light sections use primary-tinted borders;
   dark sections use white-tinted borders.
   ========================================================================== */

/* Treatment Carousel (light bg) */
.treatment-carousel-section {
  border-top: 1px solid rgba(107, 63, 160, 0.08);
}

/* Blog section (light bg) */
.blog-section {
  border-top: 1px solid rgba(107, 63, 160, 0.08);
}

/* Testimonials section (light bg — sand gradient) */
.testimonials-section {
  border-top: 1px solid rgba(107, 63, 160, 0.08);
  border-bottom: 1px solid rgba(107, 63, 160, 0.08);
}

/* Accreditations section (dark bg) */
.section--accreditations {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.section--accreditations .flex-64 {
  align-items: center;
}

.section--accreditations .flex-24.max-500 {
  align-items: center;
}

/* FAQ section (light bg) */
.section--faq {
  border-top: 1px solid rgba(107, 63, 160, 0.08);
}

.section--faq .flex-64 {
  align-items: center;
}

.section--faq .flex-24.max-500 {
  align-items: center;
}

/* Steps section (light bg) */
.section--steps {
  border-top: 1px solid rgba(107, 63, 160, 0.08);
}

/* Contact CTA section (light bg) */
.section--contact-cta {
  border-top: 1px solid rgba(107, 63, 160, 0.08);
}

/* Facility Carousel (light bg) */
.facility-carousel-section {
  border-top: 1px solid rgba(107, 63, 160, 0.08);
}

/* Team section (light bg) */
.psych-team-section {
  border-top: 1px solid rgba(32, 30, 16, 0.06);
  border-bottom: 1px solid rgba(32, 30, 16, 0.06);
}

/* Conditions section (dark bg) */
.conditions-section {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* Pathway section border */
.section--pathway {
  border-bottom: 1px solid rgba(32, 30, 16, 0.06);
}

/* Typed emotional section (dark bg) */
.typed-emotional-section {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* ==========================================================================
   Inner Page Hero (Light background, Island-style)
   ========================================================================== */
.section-white {
  background-color: var(--white, #fff);
  color: var(--off-black, #201E10);
}

.section.section-white {
  background-color: var(--white, #fff);
  height: auto;
}

.inner-hero {
  position: relative;
}

.inner-hero .animate-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.inner-hero .animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Button outline variant for light hero backgrounds */
.btn--outline {
  color: var(--off-black, #201E10);
  border: 1px solid var(--lite-black, #8F8E84);
  background: transparent;
  transition: all 0.3s ease;
}

.btn--outline:hover {
  background: var(--off-black, #201E10);
  color: var(--white, #fff);
  border-color: var(--off-black, #201E10);
}

/* ==========================================================================
   CONTACT PAGE — Island-style Redesign
   ========================================================================== */

/* --- Contact page hero section needs extra top padding for fixed nav --- */
.psych-contact-hero-wrapper {
  padding-top: 160px;
  padding-bottom: 40px;
}

/* --- Hero Banner (purple/gold gradient, matches Island's warm gradient) --- */
.psych-contact-hero {
  gap: 24px;
  background-image: linear-gradient(31deg, #e8d5f7, #d4b8eb, #c9a84c40);
  border-radius: 16px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 80px 112px;
  display: flex;
}

.psych-contact-hero .font-64 {
  max-width: 720px;
}

/* --- Two-column contact wrapper (Island pattern: info left, form right) --- */
.psych-contact-wrapper {
  gap: 64px;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 0;
  display: flex;
}

.psych-reach-out {
  gap: 40px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  max-width: 400px;
  display: flex;
  flex-shrink: 0;
}

/* --- Contact links (phone/email row) --- */
.psych-contact-links {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.psych-contact-link {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--off-black);
  font-size: 16px;
  font-weight: 300;
  text-decoration: none;
  transition: color 0.2s ease;
}

.psych-contact-link:hover {
  color: var(--primary);
}

.psych-contact-link svg {
  flex-shrink: 0;
}

/* --- Address row --- */
.psych-address-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.psych-address-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.psych-get-dir {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--off-black);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: all 0.2s ease;
}

.psych-get-dir:hover {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

/* --- Form column --- */
.psych-form-col {
  width: 100%;
  flex: 1;
}

.psych-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
  width: 100%;
}

.psych-form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.psych-form-field {
  color: var(--off-black);
  background-color: rgba(143, 142, 132, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  margin-bottom: 0;
  padding: 14px 16px;
  font-family: var(--font-body, 'Figtree', sans-serif);
  font-size: 15px;
  font-weight: 400;
  width: 100%;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}

.psych-form-field:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(107, 63, 160, 0.08);
  outline: none;
  background-color: #fff;
}

.psych-form-field::placeholder {
  color: var(--lite-black);
}

.psych-form-textarea {
  width: 100%;
  height: 120px;
  resize: vertical;
}

select.psych-form-field {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238F8E84' d='M6 8.5L1 3.5h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}

/* --- Submit button (purple, matching brand) --- */
.psych-submit {
  background-color: var(--primary);
  border: none;
  border-radius: 12px;
  padding: 16px 66px;
  color: #fff;
  font-family: var(--font-body, 'Figtree', sans-serif);
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}

.psych-submit:hover {
  background-color: var(--primary-dark);
  transform: translateY(-1px);
}

.psych-submit:active {
  transform: translateY(0);
}

/* --- Map section --- */
.psych-map-section {
  padding-top: 0 !important;
}

.psych-map-wrapper {
  border-radius: 16px;
  overflow: hidden;
  height: 420px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

.psych-map-wrapper iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* --- Crisis section --- */
.psych-crisis-section {
  background-color: var(--off-white);
}

.psych-crisis-header {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 48px;
}

.psych-crisis-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.psych-crisis-card {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.psych-crisis-card:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  transform: translateY(-2px);
}

.psych-crisis-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(220, 38, 38, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #dc2626;
  flex-shrink: 0;
}

.psych-crisis-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #dc2626;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 10px 20px;
  font-family: var(--font-body, 'Figtree', sans-serif);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  margin-top: auto;
  width: fit-content;
  transition: background-color 0.2s ease;
}

.psych-crisis-btn:hover {
  background: #b91c1c;
}

/* --- Contact page responsive --- */
@media screen and (max-width: 991px) {
  .psych-contact-hero {
    padding: 56px;
  }

  .psych-reach-out {
    max-width: 360px;
  }
}

@media screen and (max-width: 767px) {
  .max-container.wide {
    padding-left: 24px;
    padding-right: 24px;
  }

  .psych-contact-hero {
    padding: 48px 32px;
  }

  .psych-contact-hero .font-64 {
    font-size: 36px;
  }

  .psych-contact-wrapper {
    flex-direction: column;
    gap: 48px;
  }

  .psych-reach-out {
    max-width: none;
    width: 100%;
  }

  .psych-contact-links {
    flex-direction: column;
    gap: 16px;
  }

  .psych-map-wrapper {
    height: 300px;
    border-radius: 12px;
  }

  .psych-crisis-grid {
    grid-template-columns: 1fr;
  }

  .psych-submit {
    width: 100%;
    text-align: center;
  }
}

@media screen and (max-width: 479px) {
  .max-container.wide {
    padding-left: 16px;
    padding-right: 16px;
  }

  .psych-contact-hero {
    padding: 32px 24px;
  }

  .psych-contact-hero .font-64 {
    font-size: 28px;
  }

  .psych-contact-hero .font-24 {
    font-size: 18px;
  }

  .psych-crisis-card {
    padding: 24px;
  }

  .psych-map-wrapper {
    height: 250px;
  }
}

/* ==========================================================================
   Dark Hero Section (Island-Style)
   Adapted from RECO Island treatment page hero for Psychiatry brand
   ========================================================================== */

/* --- Section: Dark Background (matches Island's section-black) --- */
.section-dark-purple {
  color: #fff;
  background-color: #010000;
  width: 100%;
  height: auto;
  overflow: visible;
}

.section-dark-purple.section {
  background-color: #010000;
  width: 100%;
  height: auto;
  overflow: visible;
  margin-bottom: 0;
  padding-bottom: 0;
  position: relative;
  z-index: 2;
}

/* Image drops below dark bg — hero image overlaps the next section */
.section-dark-purple + section,
.section-dark-purple + .service-page,
.section.section-dark-purple + section {
  margin-top: 0;
  position: relative;
  z-index: 1;
}

/* --- Layout: Top Padding for Fixed Nav --- */
.padding-168 {
  flex-flow: column;
  padding-top: 190px;
  display: flex;
}

/* --- Layout: Two-Column Hero Flex --- */
.flex-74 {
  grid-column-gap: 74px;
  grid-row-gap: 74px;
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.flex-74.right-to-left {
  flex-flow: row-reverse;
  justify-content: space-between;
  align-items: flex-start;
}

/* --- Hero Image Wrapper --- */
.video-wrapper {
  border-radius: 12px;
  width: 80%;
  height: 560px;
  position: relative;
  overflow: hidden;
  margin-bottom: -72px;
}

/* --- Full Cover Image --- */
.full-image {
  background-color: #1a1a1a;
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: all .3s cubic-bezier(.455, .03, .515, .955);
  position: static;
}

.full-image:hover {
  transform: scale(1.1);
}

/* --- Text Column --- */
.flex-32 {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  flex-flow: column;
  display: flex;
}

.flex-32.width-100 {
  width: 100%;
}

/* --- Text Alignment --- */
.flex-24.left-align {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

/* --- Font Utility Classes for Dark Hero --- */
.font-white {
  color: #fff;
  text-decoration: none;
}

.font-lite-black {
  color: var(--lite-black, #8F8E84);
}

.font-light {
  font-weight: 300;
}

.font-64 {
  font-size: 64px;
}

.font-64.font-light {
  font-family: Figtree, sans-serif;
  font-weight: 300;
  line-height: .9;
  letter-spacing: -2px;
  color: #fff;
}

/* About section heading: dark text on light background */
.about-section .font-64.font-light {
  color: var(--off-black, #201E10);
}

.font-24 {
  font-size: 24px;
}

.font-24.font-light.height-90 {
  line-height: .9;
}

.font-24.font-light.font-lite-black {
  color: var(--lite-black, #8F8E84);
}

.height-90 {
  line-height: .9;
}

.width-100 {
  width: 100%;
  overflow: hidden;
}

/* --- Dark Hero CTA Buttons --- */
.dark-hero-cta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 40px;
}

.dark-hero-cta .btn--gold {
  background: linear-gradient(135deg, var(--primary, #6B3FA0), var(--primary-dark, #5A2E8C));
  color: #fff;
  border: none;
  padding: 14px 32px;
  border-radius: 8px;
  font-family: var(--font-body, 'Figtree', sans-serif);
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
}

.dark-hero-cta .btn--gold:hover {
  background: linear-gradient(135deg, var(--primary-light, #8B5FC0), var(--primary, #6B3FA0));
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(107, 63, 160, 0.35);
}

.dark-hero-cta .btn--outline-light {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 14px 32px;
  border-radius: 8px;
  font-family: var(--font-body, 'Figtree', sans-serif);
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
}

.dark-hero-cta .btn--outline-light:hover {
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.08);
}

/* --- Additional Utility Classes --- */
.line-140 { line-height: 1.4; }
.font-32 { font-size: 32px; }
.font-28 { font-size: 28px; }
.section-off-white {
  background-color: var(--off-white, #f8f7f4);
  padding: var(--space-20, 80px) 0;
}
.stat-card {
  background: var(--white, #fff);
  border: 1px solid rgba(107, 63, 160, 0.12);
  border-radius: 12px;
  padding: 32px 24px;
  text-align: center;
  transition: all 0.3s ease;
}
.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(107, 63, 160, 0.1);
}
.stat-number {
  font-family: 'Figtree', sans-serif;
  font-size: 48px;
  font-weight: 700;
  color: var(--primary, #6B3FA0);
  line-height: 1;
  margin-bottom: 8px;
}
.stat-label {
  font-size: 14px;
  color: var(--text-secondary, #666);
  line-height: 1.4;
}
.stat-description {
  font-size: 13px;
  color: var(--text-secondary, #888);
  margin-top: 8px;
  line-height: 1.5;
}
.distortion-card {
  background: var(--white, #fff);
  border: 1px solid rgba(107, 63, 160, 0.1);
  border-radius: 12px;
  padding: 24px;
  transition: all 0.3s ease;
}
.distortion-card:hover {
  box-shadow: 0 8px 24px rgba(107, 63, 160, 0.08);
  transform: translateY(-2px);
}
.timeline-item {
  display: flex;
  gap: 24px;
  padding: 24px 0;
  border-bottom: 1px solid rgba(107, 63, 160, 0.08);
}
.timeline-item:last-child { border-bottom: none; }
.faq-container {
  max-width: 800px;
  margin: 0 auto;
}

/* --- Responsive: Tablet (max 991px) --- */
@media screen and (max-width: 991px) {
  .section-dark-purple .video-wrapper {
    height: 440px;
  }

  .section-dark-purple .font-64 {
    font-size: 48px;
  }

  .section-dark-purple .font-24 {
    font-size: 20px;
  }

  .section-dark-purple .padding-168 {
    padding-top: 140px;
  }
}

/* --- Responsive: Mobile (max 767px) --- */
@media screen and (max-width: 767px) {
  .section-dark-purple .flex-74,
  .section-dark-purple .flex-74.right-to-left {
    flex-flow: column-reverse;
    gap: 40px;
  }

  .section-dark-purple .video-wrapper {
    width: 100%;
    height: 280px;
  }

  .section-dark-purple .font-64 {
    font-size: 36px;
    line-height: 1.05;
  }

  .section-dark-purple .font-24 {
    font-size: 18px;
  }

  .section-dark-purple .padding-168 {
    padding-top: 120px;
    padding-bottom: 40px;
  }

  .section-dark-purple .video-wrapper {
    margin-bottom: 0;
  }

  .section-dark-purple + section,
  .section-dark-purple + .service-page,
  .section.section-dark-purple + section {
    margin-top: 0;
  }

  /* Responsive utility overrides */
  .font-32 { font-size: 24px; }
  .font-28 { font-size: 22px; }
  .stat-number { font-size: 36px; }
}

/* --- Responsive: Small mobile (max 479px) --- */
@media screen and (max-width: 479px) {
  .section-dark-purple .font-64 {
    font-size: 28px;
  }

  .section-dark-purple .font-24 {
    font-size: 16px;
  }

  .section-dark-purple .padding-168 {
    padding-top: 100px;
    padding-bottom: 32px;
  }

  .section-dark-purple .video-wrapper {
    height: 220px;
  }
}

/* ==========================================================================
   MOBILE CSS FIXES — April 2026
   Fixes: menu toggle glass, mobile menu translucent, hero text sizing,
   call button nowrap, about section contrast, accreditations sizing,
   brain animation white gap.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fix 1: Mobile Menu Toggle — White Glass Background (matching other RECO sites)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 991px) {
  .mobile-menu-toggle {
    background: rgba(255, 255, 255, 0.85);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    width: 56px;
    height: 56px;
    padding: 8px;
    display: flex;
    position: relative;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }
}

@media screen and (max-width: 479px) {
  .mobile-menu-toggle {
    width: 44px;
    height: 44px;
  }
}

/* --------------------------------------------------------------------------
   Fix 2: Mobile Menu — Glass Translucent Purple Background
   -------------------------------------------------------------------------- */
@media screen and (max-width: 991px) {
  .mobile-menu {
    background: rgba(107, 63, 160, 0.92) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }

  .mobile-menu.open {
    background: rgba(107, 63, 160, 0.92) !important;
  }

  /* Adjust text colors for purple bg */
  .mobile-menu .menu-links-section-div .font-24 {
    color: rgba(255, 255, 255, 0.95);
  }

  .mobile-menu .mobile-nav-link {
    color: rgba(255, 255, 255, 0.7);
  }

  .mobile-menu .mobile-nav-link:hover {
    color: #fff;
  }

  .mobile-menu .separator-line {
    background-color: rgba(255, 255, 255, 0.15);
  }

  /* When menu is open: purple glass toggle so white X lines are visible */
  .mobile-menu-toggle.is-open {
    background: rgba(107, 63, 160, 0.85);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 8px rgba(107, 63, 160, 0.2);
  }

  .mobile-menu-toggle.is-open .div-line {
    background-color: #fff;
  }
}

/* --------------------------------------------------------------------------
   Fix 3: Mobile Hero Text — Smaller on Mobile
   -------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  /* Homepage hero title */
  .hero-h1,
  .div-hero-h1 .font-104,
  .div-hero-h1 .font-64 {
    font-size: 2rem !important;
    line-height: 1;
    letter-spacing: -1px;
  }

  /* Subtitle text */
  .hero-subtitle,
  .div-hero-bottom .font-24 {
    font-size: 1rem;
  }

  /* "Not local?" text visible and properly sized */
  .not-in-florida,
  .not-in-florida .off-white,
  .not-in-florida a {
    font-size: 0.875rem !important;
    text-align: center;
  }

}

@media screen and (max-width: 479px) {
  .hero-h1,
  .div-hero-h1 .font-104,
  .div-hero-h1 .font-64 {
    font-size: 1.75rem !important;
    line-height: 1;
    letter-spacing: -1px;
  }
}

/* --------------------------------------------------------------------------
   Fix 4: Mobile Hero Call Button — Prevent "Call" and "Us" on Separate Lines
   -------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  .phone-call .nav-cta-div {
    white-space: nowrap;
    padding: 10px 20px;
    height: auto;
  }

  .phone-call .call-us {
    white-space: nowrap;
  }

  .nav-cta-div .call-us {
    white-space: nowrap;
  }

  .nav-cta-div {
    white-space: nowrap;
    flex-shrink: 0;
  }
}

/* --------------------------------------------------------------------------
   Fix 5: About Section — "Where Healing Begins" Better Contrast
   --------------------------------------------------------------------------
   The section-tag / hero__tag-line text is white on a light background.
   Ensure it uses the purple brand color with a tinted background pill
   for strong readability on both light and dark contexts.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  .about-section .section-tag,
  .about-section .hero__tag-line {
    color: var(--primary) !important;
    background: rgba(107, 63, 160, 0.12) !important;
    padding: 6px 16px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.1em;
    display: inline-block;
  }

  /* Ensure section title is visible on gradient bg */
  .about-section .section-title {
    color: var(--off-black) !important;
  }

  .about-section .section-subtitle {
    color: var(--lite-black) !important;
  }
}

/* Also fix on desktop/tablet for consistency */
.about-section .section-tag,
.about-section .hero__tag-line {
  color: var(--primary);
  background: rgba(107, 63, 160, 0.1);
  padding: 6px 16px;
  border-radius: 100px;
}

/* --------------------------------------------------------------------------
   Fix 6: Mobile Accreditations Carousel — Larger Items, Better Spacing
   -------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  /* Increase slide image / logo size on mobile */
  .section--accreditations .slide-image {
    height: 52px !important;
    opacity: 0.7;
  }

  .section--accreditations .splide__slide {
    padding: 0 8px;
  }

  .accreditation-logos-grid {
    gap: 24px !important;
  }

  .accreditation-logo img {
    height: 48px !important;
    opacity: 0.7;
  }

  /* Trust bar marquee items bigger on mobile */
  .trust-bar .marquee__item {
    min-width: 140px !important;
    height: 64px !important;
  }

  .trust-bar .marquee__track {
    gap: 32px;
  }

  .trust-bar .marquee__item img {
    max-height: 48px;
  }
}

@media screen and (max-width: 479px) {
  .section--accreditations .slide-image {
    height: 44px !important;
  }

  .accreditation-logo img {
    height: 42px !important;
  }

  .trust-bar .marquee__item {
    min-width: 120px !important;
    height: 56px !important;
  }
}

/* --------------------------------------------------------------------------
   Fix 7: Brain Animation Section — Remove Huge White Gap Above on Mobile
   -------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  .brain-scroll {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Reduce the tall scroll zone on mobile to prevent excessive white space */
  .brain-scroll {
    height: 300vh;
  }

  .brain-scroll__sticky {
    padding-top: 0;
  }

  /* Remove any gap between the section above and brain scroll */
  .conditions-section + .brain-scroll,
  .section + .brain-scroll {
    margin-top: 0;
  }

  /* Tighten the brain SVG on small screens */
  .brain-scroll__brain svg {
    width: 180px;
    height: 180px;
  }

  .brain-scroll__glow {
    width: 250px;
    height: 250px;
  }
}

@media screen and (max-width: 479px) {
  .brain-scroll {
    height: 280vh;
  }

  .brain-scroll__brain svg {
    width: 150px;
    height: 150px;
  }

  .brain-scroll__glow {
    width: 200px;
    height: 200px;
  }
}


/* ==========================================================================
   ABOUT SECTION — Intro Cards (Island-exact pattern)
   ========================================================================== */

/* 3-column grid container */
.intro-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 16px;
}

/* Outer wrapper: card + description below */
.intro-card-wrapper {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

/* Image card with overlay text */
.intro-card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  max-width: 435px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.04);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.intro-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.06);
}

.intro-card .image {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

/* Dark gradient overlay at top of card — white text super clear without covering faces */
.intro-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 45%;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.35) 35%,
    rgba(0, 0, 0, 0.1) 70%,
    rgba(0, 0, 0, 0) 100%
  );
  z-index: 5;
  pointer-events: none;
  border-radius: 12px 12px 0 0;
}

/* Text overlay — top-left of image, white on dark gradient */
.about-section .text-absolute {
  position: absolute;
  top: 24px;
  left: 24px;
  color: #fff;
  font-family: 'Figtree', sans-serif;
  font-weight: 300;
  font-size: 24px;
  line-height: 1.2;
  max-width: 230px;
  z-index: 10;
  text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

/* Description text below the card */
.intro-card__desc {
  font-family: 'Figtree', sans-serif;
  font-size: 16px;
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.intro-card__desc .span-black {
  color: var(--off-black, #201E10);
  font-weight: 500;
}

@media screen and (max-width: 991px) {
  .intro-cards {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  .about-section .text-absolute {
    font-size: 20px;
    top: 16px;
    left: 16px;
    max-width: 180px;
  }
  .intro-card__desc {
    font-size: 14px;
  }
}

@media screen and (max-width: 767px) {
  .intro-cards {
    grid-template-columns: 1fr;
    gap: 32px;
    max-width: 400px;
    margin: 0 auto;
  }
  .intro-card .image {
    aspect-ratio: 4 / 3;
  }
  .about-section .text-absolute {
    font-size: 22px;
    top: 20px;
    left: 20px;
    max-width: 200px;
  }
  .intro-card__desc {
    font-size: 15px;
  }
}

/* ==========================================================================
   MOBILE RESPONSIVENESS FIXES — April 2026
   Comprehensive mobile fixes for homepage and inner pages
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fix 1: Mobile Hero Height & Text Sizing (max-width: 767px)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  /* Increase hero height on mobile for better fill */
  .hero--psychiatry {
    min-height: 90vh;
  }

  /* Make hero main text smaller and centered. Use longhand padding so the
     bottom-spacing rule earlier in the file (padding-bottom + min-height) keeps
     the bottom-bar text lifted off the viewport edge. */
  .hero--psychiatry .div-hero-main-page {
    text-align: center;
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 0;
  }

  .hero--psychiatry .div-hero-h1 {
    text-align: center;
  }

  .hero--psychiatry .hero-display {
    font-size: clamp(32px, 8vw, 44px);
    line-height: 1.15;
  }

  .hero--psychiatry .hero__typed-wrapper {
    font-size: 18px;
    justify-content: center;
  }

  .hero--psychiatry .max-424 {
    max-width: 100%;
  }

  .hero--psychiatry .font-24.off-white {
    font-size: 16px;
    text-align: center;
    line-height: 1.5;
  }

  .hero--psychiatry .div-hero-bottom {
    padding: 0 16px;
  }

  .hero--psychiatry .flex-10 {
    flex-direction: column;
    gap: 24px;
    align-items: center;
  }

  .hero--psychiatry .callusnow-div {
    text-align: center;
    font-size: 16px;
    flex-direction: column;
    gap: 8px;
  }

  .hero--psychiatry .callusnow-div a {
    font-size: 22px;
    font-weight: 600;
  }

  /* Center "Not Local?" section */
  .hero--psychiatry .not-in-florida {
    text-align: center;
    justify-content: center;
    align-items: center;
    gap: 8px;
  }

  .hero--psychiatry .not-in-florida > div {
    font-size: 14px;
  }

  .hero--psychiatry .not-in-florida a {
    font-size: 14px;
  }
}

/* --------------------------------------------------------------------------
   Fix 2: About Section Title — Reduce Size + Fix Visibility on Mobile
   --------------------------------------------------------------------------
   "This is RECO Psychiatry," and "where healing begins." must each fit on
   1 line (2 lines total). Ensure dark text on the light about-section bg.
   -------------------------------------------------------------------------- */

/* Ensure about-section heading is always dark (not white from hero styles) */
.about-section .font-64.font-light.centered {
  color: var(--off-black, #201E10) !important;
}

.about-section .font-64.font-light.centered .font-lite-black {
  color: rgba(32, 30, 16, 0.45) !important;
}

@media screen and (max-width: 991px) {
  .about-section .font-64.font-light.centered {
    font-size: 36px;
    line-height: 1.1;
    letter-spacing: -1.5px;
  }
}

@media screen and (max-width: 767px) {
  .about-section .font-64 {
    font-size: 28px !important;
    line-height: 1.15 !important;
    letter-spacing: -1px !important;
  }

  .about-section .font-64.font-light.centered {
    font-size: 28px !important;
    line-height: 1.15 !important;
    letter-spacing: -1px !important;
    max-width: 100% !important;
  }
}

@media screen and (max-width: 479px) {
  .about-section .font-64 {
    font-size: 22px !important;
    line-height: 1.15 !important;
    letter-spacing: -0.5px !important;
  }

  .about-section .font-64.font-light.centered {
    font-size: 22px !important;
    line-height: 1.15 !important;
    letter-spacing: -0.5px !important;
  }
}

@media screen and (max-width: 374px) {
  .about-section .font-64.font-light.centered {
    font-size: 19px !important;
    line-height: 1.2 !important;
    letter-spacing: -0.3px !important;
  }
}

/* --------------------------------------------------------------------------
   Fix 3: Brain Animation Section — Remove White Gap & Fix Overlaps
   -------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  /* Remove white gap above brain section */
  .brain-scroll {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Fix phase circles overlapping with step text */
  .brain-scroll__phase {
    margin-bottom: 80px;
  }

  .brain-scroll__phase-number {
    margin-bottom: 16px;
  }

  .brain-scroll__phase-title {
    margin-bottom: 12px;
  }
}

/* --------------------------------------------------------------------------
   Fix 4: Accreditations Carousel — Better Spacing on Mobile
   -------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  .section--accreditations .splide__slide {
    width: auto !important;
    margin: 0 16px;
  }

  .section--accreditations .slide-image {
    width: auto;
    max-width: 140px;
    height: auto;
  }
}

/* --------------------------------------------------------------------------
   Fix 5: 4-Step Process — Stack Vertically on Mobile
   -------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  /* Stack the 4-column grid into 1 column */
  section#process > .container > div[style*="grid-template-columns"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 48px !important;
  }
}

/* --------------------------------------------------------------------------
   Fix 6: First Visit Section — Stack Vertically on Mobile
   -------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  /* Stack 2-column "First Visit" layout */
  div[style*="grid-template-columns: 1fr 1fr"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 32px !important;
  }
}

/* --------------------------------------------------------------------------
   Fix 7: Inner Pages — Multi-Column Layouts Stack on Mobile
   -------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  /* General fix for all inline grid layouts */
  [style*="display: grid"][style*="grid-template-columns"] {
    display: block !important;
  }

  [style*="display: grid"][style*="grid-template-columns"] > * {
    margin-bottom: 32px;
  }

  [style*="display: grid"][style*="grid-template-columns"] > *:last-child {
    margin-bottom: 0;
  }
}

/* --------------------------------------------------------------------------
   Fix 8: Mobile Menu Glass Translucent Effect (Already Applied Above)
   Mobile menu background was already fixed in lines 7727-7758
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Fix 9: Logo SVG — Eliminate white border/outline on dark backgrounds
   The SVG <text> element has inline stroke + stroke-width. When the JS
   switches the logo color on scroll, the stroke must always match fill.
   Also ensure no outline/border on the wrapper element itself.
   -------------------------------------------------------------------------- */
.recohomelogo.logo,
.recohomelogo.logo svg.logo {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Force all SVG elements to inherit color — no stale white stroke */
.recohomelogo.logo svg.logo path,
.recohomelogo.logo svg.logo text,
.recohomelogo.logo svg.logo g {
  fill: currentColor !important;
  stroke: currentColor !important;
  transition: fill 0.3s ease, stroke 0.3s ease, color 0.3s ease;
}

/* ClipPath rect fill="white" is standard SVG but hide from rendering just in case */
.recohomelogo.logo svg.logo defs rect {
  fill: white;
}

/* Ensure the SVG text element never shows a contrasting stroke.
   The inline JS handles color switching via setting `color` on the wrapper,
   so fill:currentColor and stroke:currentColor both track the same value.
   This eliminates any residual white/dark outline mismatch during transition. */
.recohomelogo.logo svg.logo text {
  stroke: currentColor !important;
  stroke-width: 0.8 !important;
  paint-order: stroke !important;
}

/* Inner pages: always dark logo since they have light backgrounds */
.page--inner .recohomelogo.logo {
  color: var(--off-black) !important;
}

/* --------------------------------------------------------------------------
   Fix 10: Homepage Hero Text — Smaller on Mobile
   -------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  .hero--psychiatry .font-24.off-white,
  .hero--psychiatry .div-hero-content .font-24 {
    font-size: 15px !important;
    line-height: 1.5;
  }

  .hero--psychiatry .hero-display {
    font-size: clamp(28px, 7vw, 40px) !important;
    line-height: 1.12;
    letter-spacing: -1.5px;
  }

  /* "Not local?" section: tighter on small screens */
  .hero--psychiatry .not-in-florida {
    font-size: 13px;
  }

  .hero--psychiatry .not-in-florida .off-white,
  .hero--psychiatry .not-in-florida a,
  .hero--psychiatry .not-in-florida .font-white {
    font-size: 13px !important;
  }
}

@media screen and (max-width: 479px) {
  .hero--psychiatry .hero-display {
    font-size: clamp(24px, 7vw, 32px) !important;
    line-height: 1.12;
    letter-spacing: -1px;
  }

  .hero--psychiatry .font-24.off-white,
  .hero--psychiatry .div-hero-content .font-24 {
    font-size: 14px !important;
  }
}

/* --------------------------------------------------------------------------
   Fix 11: Mobile Header "Call Us" Button — Prevent Line Wrapping
   -------------------------------------------------------------------------- */
@media screen and (max-width: 991px) {
  .nav-cta-div,
  .nav-cta-div .call-us,
  .phone-call .nav-cta-div,
  .phone-call .call-us {
    white-space: nowrap !important;
    flex-shrink: 0;
    min-width: max-content;
  }

  .nav-cta-div .font-14.font-white.dm-mono.call-us {
    white-space: nowrap !important;
  }
}

/* --------------------------------------------------------------------------
   Fix 12: "Take the First Step" Button — Purple, Not Gold
   The typed-emotional-section CTA should use primary (purple) color.
   -------------------------------------------------------------------------- */
.typed-emotional-section .btn--primary {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark, #5A2E8C) 100%) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}

.typed-emotional-section .btn--primary:hover {
  background: linear-gradient(135deg, var(--primary-dark, #5A2E8C) 0%, var(--primary) 100%) !important;
  box-shadow: 0 8px 24px rgba(107, 63, 160, 0.35) !important;
}

/* --------------------------------------------------------------------------
   Fix 13: Mobile Accreditations Carousel — Show 1 Item, Bigger Logos
   The Splide JS is set to perPage:2 at 479px which makes them tiny.
   Override via CSS to make logos much larger on small screens.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 479px) {
  .section--accreditations .splide__slide {
    min-width: 100% !important;
    display: flex !important;
    justify-content: center !important;
  }

  .section--accreditations .slide-image {
    height: 56px !important;
    max-width: none !important;
    width: auto !important;
    opacity: 0.75;
  }
}

@media screen and (max-width: 767px) {
  .section--accreditations .slide-image {
    height: 56px !important;
    max-width: none !important;
  }

  .section--accreditations .splide__slide {
    display: flex !important;
    justify-content: center !important;
    padding: 0 12px !important;
  }
}

/* --- mega dropdown (multi-column) --- */
.desktop-nav-dropdown-container.mega {
  width: 1040px;
  max-width: 1040px;
  z-index: 99;
  opacity: 0;
  height: auto;
  min-height: 380px;
  transition: opacity 0.2s;
  display: none;
  position: fixed;
  top: 64px;
  left: 50%;
  transform: translate(-50%);
  padding: 16px;
  gap: 8px;
}
.nav-mega-col {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-width: 0;
}
.nav-mega-col-title {
  font-family: Figtree, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8f8e84;
  padding: 8px 12px 4px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(143, 142, 132, 0.18);
}
@media (max-width: 1100px) {
  .desktop-nav-dropdown-container.mega {
    width: 960px;
    max-width: 960px;
  }
}

/* === Vertical fill for nav side panel CTAs (Admissions/Resources dropdowns) === */
.section-nav .desktop-nav-dropdown-container.admissions .nav-special-side-div,
.section-nav .desktop-nav-dropdown-container.resources .nav-special-side-div {
  display: flex !important;
  align-self: stretch;
  align-items: stretch;
  min-height: 340px;
}
.section-nav .desktop-nav-dropdown-container.admissions .veryify-insurance-link-block,
.section-nav .desktop-nav-dropdown-container.resources .veryify-insurance-link-block {
  flex: 1 1 auto;
  width: 100%;
  min-height: 340px;
  height: auto;
  border-radius: 12px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  padding: 20px;
  justify-content: flex-end;
}

/* Force dropdown columns to equal-stretch */
.section-nav .desktop-nav-dropdown-container.admissions,
.section-nav .desktop-nav-dropdown-container.resources {
  align-items: stretch !important;
}
.section-nav .desktop-nav-dropdown-container.admissions > *,
.section-nav .desktop-nav-dropdown-container.resources > * {
  align-self: stretch !important;
}
.section-nav .desktop-nav-dropdown-container.admissions .nav-special-side-div,
.section-nav .desktop-nav-dropdown-container.resources .nav-special-side-div {
  height: auto !important;
}
.section-nav .desktop-nav-dropdown-container.admissions .veryify-insurance-link-block,
.section-nav .desktop-nav-dropdown-container.resources .veryify-insurance-link-block {
  height: 100% !important;
  min-height: 100% !important;
}


/* === A11Y + PageSpeed (auto-appended) =================================== */
.reco-skip-link {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: 99999;
  background: #201E10;
  color: #F4F0E6;
  padding: 12px 20px;
  font-family: 'DM Mono', monospace;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 0 0 6px 0;
}
.reco-skip-link:focus {
  position: fixed;
  left: 0;
  top: 0;
  width: auto;
  height: auto;
  outline: 3px solid #f4f0e6;
  outline-offset: -2px;
}
.reco-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 2px;
  border-radius: 2px;
}
.nav-link-block:focus-visible,
.mobile-nav-link:focus-visible,
.nav-dropdown-link:focus-visible,
.phone-call:focus-visible,
.mobile-menu-toggle:focus-visible,
.marquee__item:focus-visible {
  outline: 2px solid #201E10;
  outline-offset: 3px;
  border-radius: 4px;
}
button.mobile-menu-toggle {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  -webkit-appearance: none;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   Ken Burns motion on homepage scene images — visibly moving (not
   subtle), smooth, with cross-image stagger via JS-set delays so
   adjacent images don't breathe in sync.
   ============================================================ */
img[src*="/assets/images/generated/"] {
  transform-origin: center center;
  will-change: transform;
  animation: recoKenBurnsA 14s ease-in-out infinite alternate;
}

/* Stagger via index attribute set by inline JS (see home.php).
   Each image gets a different starting point in the cycle. */
img[src*="/assets/images/generated/"][data-kb="0"] { animation-delay: 0s; }
img[src*="/assets/images/generated/"][data-kb="1"] { animation-delay: -2s;  }
img[src*="/assets/images/generated/"][data-kb="2"] { animation-delay: -5s;  animation-name: recoKenBurnsB; }
img[src*="/assets/images/generated/"][data-kb="3"] { animation-delay: -8s;  }
img[src*="/assets/images/generated/"][data-kb="4"] { animation-delay: -11s; animation-name: recoKenBurnsC; }
img[src*="/assets/images/generated/"][data-kb="5"] { animation-delay: -3s;  animation-name: recoKenBurnsB; }
img[src*="/assets/images/generated/"][data-kb="6"] { animation-delay: -6s;  animation-name: recoKenBurnsC; }
img[src*="/assets/images/generated/"][data-kb="7"] { animation-delay: -9s;  }
img[src*="/assets/images/generated/"][data-kb="8"] { animation-delay: -12s; animation-name: recoKenBurnsB; }
img[src*="/assets/images/generated/"][data-kb="9"] { animation-delay: -1s;  animation-name: recoKenBurnsC; }

@keyframes recoKenBurnsA {
  0%   { transform: scale(1.08) translate(-2.5%, -1.5%); }
  100% { transform: scale(1.18) translate(2.5%, 2%); }
}
@keyframes recoKenBurnsB {
  0%   { transform: scale(1.16) translate(2.2%, -2.2%); }
  100% { transform: scale(1.07) translate(-2.5%, 2.5%); }
}
@keyframes recoKenBurnsC {
  0%   { transform: scale(1.10) translate(-1.5%, 2.2%); }
  100% { transform: scale(1.18) translate(2%, -2.2%); }
}

/* Make sure the parent element clips the overflow so the slight pan/zoom
   stays inside the visible frame. */
img[src*="/assets/images/generated/"] {
  display: block;
}
:where(.portrait-stack__photo, .content-card__media, .community-image, .image-container, figure):has(img[src*="/assets/images/generated/"]) {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  img[src*="/assets/images/generated/"] {
    animation: none !important;
    transform: none !important;
  }
}