/* Replacer-Three */
/* ============================================================
   DELUXMED PRIMARY & BEHAVIORAL HEALTH SERVICES
   Global Stylesheet — styles.css
   Version: 3.0 | Roba Media | March 2026

   Built from:
   - PRD v3.1 — all 28 global rules
   - Lovable prototype visual reference (index.css + tailwind.config.ts)
   - Mobile + desktop screenshot analysis
   - 31-section CSS requirements specification

   SECTIONS:
   01. CSS Custom Properties (Design Tokens)
   02. Reset & Base
   03. Typography
   04. Layout & Container
   05. Utility Bar
   06. Header & Navigation
   07. Dropdown Menus
   08. Mobile Menu Overlay
   09. Skip Link (Accessibility)
   10. Hero — Homepage Split Layout
   11. Hero — Swiper Slides
   12. Trust Signals Strip
   13. Section Headers (shared pattern)
   14. Services Swiper Cards (3D shadow — Rule 1)
   15. Services Overview Pillars
   16. Video Section Placeholder
   17. Team Intro (Meet Our Team)
   18. Patient Reviews
   19. Why Choose Cards (standard shadow)
   20. Delivery Model Panels
   21. Page CTA Section (Final CTA)
   22. Pill / Tag Chips
   23. Diagonal Arrow CTA Buttons (Rule 2)
   24. Standard Buttons
   25. FAQ Accordion
   26. Footer (Zone 1 + Zone 2)
   27. HIPAA Modal
   28. Cookie Consent Banner
   29. Accessibility Widget
   30. Back to Top Button
   31. Slim Title Bar (service sub-pages)
   32. Provider Profile Split Hero
   33. Google Maps Embed
   34. High Contrast Mode
   35. Print Styles
   36. Responsive — Mobile First Breakpoints
   ============================================================ */


/* ============================================================
   01. CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   ============================================================ */

:root {
  /* Brand Colours — PRD locked */
  --green:        #1B4332;
  --green-mid:    #2D6A4F;
  --green-dark:   #0D2B1F;
  --gold:         #B8860B;
  --gold-light:   #C9960D;
  --gold-btn:     #C9960D;
  --white:        #F9FAF8;
  --cream:        #FAF8F3;
  --dark:         #0D1F17;
  --dark-mid:     #122618;
  --text:         #2D3136;
  --text-light:   #5A6370;
  --border:       #E4E8E3;

  /* Typography */
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body:    'Outfit', system-ui, sans-serif;

  /* Spacing Scale */
  --space-xs:   0.5rem;
  --space-sm:   0.75rem;
  --space-md:   1rem;
  --space-lg:   1.5rem;
  --space-xl:   2rem;
  --space-2xl:  3rem;
  --space-3xl:  4rem;
  --space-4xl:  6rem;

  /* Border Radius */
  --radius-sm:   0.375rem;
  --radius-md:   0.75rem;
  --radius-lg:   1rem;
  --radius-xl:   1.5rem;
  --radius-pill: 9999px;

  /* Shadows */
  --shadow-card:       0 2px 12px rgba(0,0,0,0.08);
  --shadow-card-hover: 0 8px 24px rgba(0,0,0,0.14);
  --shadow-3d:         0 20px 40px rgba(0,0,0,0.18), 0 8px 16px rgba(0,0,0,0.10), 0 2px 4px rgba(0,0,0,0.06);
  --shadow-header:     0 2px 16px rgba(0,0,0,0.08);
  --shadow-modal:      0 24px 64px rgba(0,0,0,0.30);
  --shadow-dropdown:   0 8px 32px rgba(0,0,0,0.12);

  /* Transitions */
  --transition:      0.3s ease;
  --transition-fast: 0.15s ease;
  --transition-slow: 0.5s ease;

  /* Layout */
  --container-max: 1200px;
  --header-height: 72px;
}


/* ============================================================
   02. RESET & BASE
   ============================================================ */

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
  background-color: var(--white);
  -webkit-tap-highlight-color: transparent; /* Rule 27 */
  overflow-x: hidden;
}

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

a {
  color: inherit;
  text-decoration: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

ul, ol { list-style: none; }
address { font-style: normal; }

/* Rule 27: Gold focus ring on all focusable elements */
*:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
*:focus:not(:focus-visible) {
  outline: none;
}


/* ============================================================
   03. TYPOGRAPHY — Rule 8
   ============================================================ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  line-height: 1.2;
  color: var(--green);
  font-weight: 700;
}

h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.625rem, 3.5vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.75rem); font-weight: 600; }

p { line-height: 1.65; color: var(--text); }

/* Colour utilities */
.text-gold        { color: var(--gold-light); }
.text-gold-italic { color: var(--gold-light); font-style: italic; }
.text-sm          { font-size: 0.875rem; color: var(--text-light); }
.text-muted       { color: var(--text-light); }

/* Eyebrow — small uppercase tracked gold label */
.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 0.75rem;
}

/* Eyebrow with horizontal rules both sides — CTA section style */
.section-eyebrow--ruled {
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: center;
}
.section-eyebrow--ruled::before,
.section-eyebrow--ruled::after {
  content: '';
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.35;
  max-width: 80px;
}

/* Eyebrow with left rule line — cream-bg sections */
.section-eyebrow--left-rule {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.section-eyebrow--left-rule::before {
  content: '';
  width: 32px;
  height: 2px;
  background: var(--gold-light);
  flex-shrink: 0;
}

/* Two-tone heading: white + gold italic on dark bg */
.heading-two-tone { color: #ffffff; }
.heading-two-tone .heading-two-tone__gold {
  color: var(--gold-light);
  font-style: italic;
  display: block;
}


/* ============================================================
   04. LAYOUT & CONTAINER
   ============================================================ */

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

@media (min-width: 768px) {
  .container { padding-inline: var(--space-xl); }
}

/* Problem 4 fix — reduced section padding to eliminate excessive gaps */
section { padding-block: var(--space-xl); }

@media (min-width: 768px) {
  section { padding-block: var(--space-2xl); }
}

@media (min-width: 1024px) {
  section { padding-block: var(--space-3xl); }
}

/* Section header — shared eyebrow + h2 + subtext pattern */
.section-header { margin-bottom: var(--space-2xl); }
.section-header--center { text-align: center; }
.section-header--center .section-eyebrow { justify-content: center; }

.section-subtext {
  font-size: 1.0625rem;
  color: var(--text-light);
  margin-top: var(--space-sm);
  max-width: 620px;
}
.section-header--center .section-subtext { margin-inline: auto; }

/* Dark section overrides */
.bg-dark h2, .bg-dark .section-header h2 { color: #ffffff; }
.bg-dark .section-subtext { color: rgba(255,255,255,0.65); }
.bg-dark .section-eyebrow { color: var(--gold-light); }


/* ============================================================
   05. UTILITY BAR
   ============================================================ */

.utility-bar {
  background-color: var(--green);
  color: rgba(255,255,255,0.88);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  padding-block: 0.5rem;
  position: relative;
  z-index: 200;
  overflow: hidden;
}

.utility-bar .container {
  display: flex;
  justify-content: center;
}

.utility-bar__track {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  justify-content: center;
}

.utility-bar__item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  white-space: nowrap;
}

.utility-bar__item svg,
.utility-bar__item [data-lucide] {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.utility-bar__item a {
  color: var(--gold-light);
  font-weight: 600;
  transition: opacity var(--transition-fast);
}
.utility-bar__item a:hover { opacity: 0.8; }

.utility-bar__dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .utility-bar__dot,
  .utility-bar__item:nth-child(n+3) { display: none; }
}


/* ============================================================
   06. HEADER & NAVIGATION — Rule 2
   ============================================================ */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  /* Always green on all viewports — Problem 2d fix */
  background-color: var(--green);
  box-shadow: none;
  transition: background-color var(--transition);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  height: var(--header-height);
  padding-inline: var(--space-md);
  max-width: var(--container-max);
  margin-inline: auto;
}

@media (min-width: 768px) {
  .header__inner { padding-inline: var(--space-lg); gap: var(--space-md); }
}

@media (min-width: 1024px) {
  .header__inner { padding-inline: var(--space-xl); gap: var(--space-sm); }
}

/* Logo — supports both HTML text wordmark and PNG fallback */
.header__logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  text-decoration: none;
  min-width: 0;
}

/* Icon image */
.header__logo-icon {
  height: 38px;
  width: auto;
  flex-shrink: 0;
}
@media (min-width: 768px) {
  .header__logo-icon { height: 42px; }
}

/* Text wordmark */
.header__logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  min-width: 0;
}

.header__logo-wordmark {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
}

.header__logo-wordmark span {
  color: var(--gold-light);
}

.header__logo-sub {
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 400;
  color: rgba(255,255,255,0.6);
  letter-spacing: 0.03em;
  line-height: 1.3;
  margin-top: 2px;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .header__logo-wordmark { font-size: 1.25rem; }
  .header__logo-sub { font-size: 0.6875rem; }
}

/* PNG logo images fallback */
.header__logo img {
  height: 38px;
  width: auto;
  transition: opacity var(--transition);
}
@media (min-width: 768px) {
  .header__logo img { height: 42px; }
}

.header__logo-white {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
}

/* Scrolled state — green header */
.header--scrolled {
  background-color: var(--green);
  box-shadow: none;
}
.header--scrolled .header__logo-color { opacity: 0; pointer-events: none; }
.header--scrolled .header__logo-white { opacity: 1; pointer-events: auto; }
.header--scrolled .nav__link { color: rgba(255,255,255,0.88); }
.header--scrolled .nav__link:hover { color: #ffffff; }
.header--scrolled .header__phone { color: rgba(255,255,255,0.88); }
.header--scrolled .header__phone:hover { color: #ffffff; }
.header--scrolled .btn--secondary.header__book {
  background-color: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.4);
  color: #ffffff;
}
.header--scrolled .hamburger__line { background-color: #ffffff; }

/* Desktop nav */
.nav {
  display: none;
  align-items: center;
  flex: 1;
  justify-content: center;
}
@media (min-width: 1024px) {
  .nav { display: flex; }
}

.nav__item { position: relative; }

.nav__link {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.5rem 0.5rem;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgba(255,255,255,0.88);
  border-radius: var(--radius-sm);
  transition: color var(--transition), background-color var(--transition);
  white-space: nowrap;
}
.nav__link:hover { color: #ffffff; background-color: rgba(255,255,255,0.08); }
.nav__link--active { color: #ffffff; font-weight: 600; }

.nav__chevron {
  width: 14px;
  height: 14px;
  transition: transform var(--transition);
  flex-shrink: 0;
}
.nav__item:hover .nav__chevron,
.nav__item:focus-within .nav__chevron {
  transform: rotate(180deg);
}

/* Header actions — hidden on ALL viewports.
   Phone + Book Appointment removed from desktop header.
   Contacts accessible via footer, hero CTAs, and contact page.
   Mobile menu retains both — accessible via hamburger tap. */
.header__actions {
  display: none !important;
}

.header__phone {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
  transition: color var(--transition);
  white-space: nowrap;
}
.header__phone:hover { color: #ffffff; }
.header__phone svg,
.header__phone [data-lucide] { width: 14px; height: 14px; }

.header__book {
  font-size: 0.8125rem;
  padding: 0.5rem 0.875rem;
  background: rgba(255,255,255,0.15) !important;
  border-color: rgba(255,255,255,0.4) !important;
  color: #ffffff !important;
}
.header__book:hover {
  background: rgba(255,255,255,0.25) !important;
  border-color: rgba(255,255,255,0.7) !important;
}

/* Hamburger */
.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  transition: background-color var(--transition-fast);
}
.hamburger:hover { background-color: rgba(255,255,255,0.1); }
@media (min-width: 1024px) { .hamburger { display: none; } }

.hamburger__line {
  display: block;
  width: 22px;
  height: 2px;
  /* Always white — header always green */
  background-color: #ffffff;
  border-radius: 2px;
}

/* Remove old mobile override — no longer needed since header always green */
@media (max-width: 1023px) {
  .header { background-color: var(--green); box-shadow: none; }
}


/* ============================================================
   07. DROPDOWN MENUS
   opacity+visibility fix — no display toggle — smooth hover
   ============================================================ */

.nav__dropdown {
  position: absolute;
  top: calc(100% + 0px);
  left: 0;
  min-width: 240px;
  background-color: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-dropdown);
  padding: var(--space-sm) 0;
  z-index: 50;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity var(--transition), visibility var(--transition), transform var(--transition);
}

.nav__dropdown--wide { min-width: 300px; }

.nav__item:hover .nav__dropdown,
.nav__item:focus-within .nav__dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  transform: translateY(0);
}

.nav__dropdown-link {
  display: block;
  padding: 0.5rem 1.25rem;
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--text);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.nav__dropdown-link:hover {
  background-color: rgba(27,67,50,0.06);
  color: var(--green);
}

.nav__dropdown-link--group {
  font-weight: 600;
  color: var(--green);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding-top: 0.75rem;
}

.nav__dropdown-link--sub {
  padding-left: 1.75rem;
  font-size: 0.875rem;
  color: var(--text-light);
}
.nav__dropdown-link--sub:hover { color: var(--green); }


/* ============================================================
   08. MOBILE MENU OVERLAY — Rule 3
   ============================================================ */

.mobile-menu {
  position: fixed;
  inset: 0;
  background-color: var(--green);
  z-index: 999;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.mobile-menu.is-open { transform: translateX(0); }

.mobile-menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  flex-shrink: 0;
}
.mobile-menu__header img { height: 36px; width: auto; }

.mobile-menu__close {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  color: rgba(255,255,255,0.8);
  transition: background-color var(--transition-fast);
}
.mobile-menu__close:hover {
  background-color: rgba(255,255,255,0.1);
  color: #ffffff;
}
.mobile-menu__close svg,
.mobile-menu__close [data-lucide] { width: 22px; height: 22px; }

.mobile-menu nav {
  flex: 1;
  padding: var(--space-md) 0;
  overflow-y: auto;
}

.mobile-nav__link {
  display: block;
  padding: 0.75rem var(--space-lg);
  font-size: 0.9375rem;
  font-weight: 500;
  color: rgba(255,255,255,0.9);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.mobile-nav__link:hover {
  background-color: rgba(255,255,255,0.06);
  color: #ffffff;
}

.mobile-nav__sub .mobile-nav__link {
  padding-left: calc(var(--space-lg) + 1rem);
  font-size: 0.875rem;
  color: rgba(255,255,255,0.6);
  font-weight: 400;
}
.mobile-nav__sub .mobile-nav__link:hover { color: rgba(255,255,255,0.9); }

.mobile-menu__actions {
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  border-top: 1px solid rgba(255,255,255,0.1);
  flex-shrink: 0;
}

.mobile-menu__phone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--gold-light);
  padding: 0.75rem;
}
.mobile-menu__phone svg,
.mobile-menu__phone [data-lucide] { width: 18px; height: 18px; }

/* Rule 11a: high contrast — mobile menu stays dark, not inverted */
.high-contrast .mobile-menu { background-color: #0D1F17; }


/* ============================================================
   09. SKIP LINK — WCAG 2.4.1
   ============================================================ */

.skip-link {
  position: absolute;
  left: -9999px;
  top: var(--space-md);
  z-index: 9999;
  background: var(--gold);
  color: #ffffff;
  padding: 0.75rem var(--space-lg);
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
}
.skip-link:focus-visible {
  left: var(--space-md);
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}


/* ============================================================
   10. HERO — HOMEPAGE SPLIT LAYOUT
   ============================================================ */

.hero--home {
  position: relative;
  overflow: hidden;
  padding-block: 0;
  background: linear-gradient(135deg, var(--green) 0%, var(--green-dark) 60%, #070F0A 100%);
  min-height: 75vh;
}

.hero__split {
  display: flex;
  flex-direction: column;
  min-height: 75vh;
}
@media (min-width: 900px) {
  .hero__split {
    flex-direction: row;
    align-items: stretch;
  }
}

/* Left panel */
.hero__left {
  flex: 0 0 55%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-3xl) var(--space-lg);
  position: relative;
  z-index: 2;
}
@media (min-width: 768px) {
  .hero__left { padding: var(--space-4xl) var(--space-xl); }
}
@media (min-width: 1024px) {
  .hero__left {
    padding: var(--space-4xl) var(--space-3xl) var(--space-4xl)
      max(calc((100vw - var(--container-max)) / 2 + var(--space-xl)), var(--space-xl));
  }
}

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: var(--space-md);
}
.hero__eyebrow svg,
.hero__eyebrow [data-lucide] { width: 14px; height: 14px; flex-shrink: 0; }

.hero__heading {
  font-family: var(--font-heading);
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  font-weight: 700;
  line-height: 1.1;
  color: #ffffff;
  margin-bottom: var(--space-lg);
}
.hero__heading--accent {
  display: block;
  color: var(--gold-light);
  font-style: italic;
}

.hero__subtext {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: rgba(255,255,255,0.75);
  max-width: 500px;
  margin-bottom: var(--space-xl);
  border-left: 3px solid var(--gold);
  padding-left: var(--space-md);
}

.hero__ctas {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-width: 420px;
}

/* Right panel — carousel */
.hero__right {
  flex: 0 0 45%;
  position: relative;
  overflow: hidden;
  min-height: 320px;
  display: none;
}
@media (min-width: 900px) {
  .hero__right { display: block; }
}
.hero__right .hero-swiper { height: 100%; min-height: 500px; }

/* Mobile scroll arrow */
.hero__scroll-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: var(--space-lg) auto var(--space-md);
  color: rgba(255,255,255,0.55);
  animation: bounce 2s ease-in-out infinite;
}
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(6px); }
}
.hero__scroll-arrow svg,
.hero__scroll-arrow [data-lucide] { width: 24px; height: 24px; }
@media (min-width: 900px) { .hero__scroll-arrow { display: none; } }

/* Mobile hero adjustments */
@media (max-width: 899px) {
  /* Mobile: background photo shows with lighter overlay so it breathes */
  .hero--home {
    min-height: auto;
    background-image: url('/images/hero-homepage-bg.webp');
    background-size: cover;
    background-position: center top;
  }
  /* Lighter overlay — photo reads clearly, builds human trust */
  .hero--home::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to bottom,
      rgba(13,31,23,0.52) 0%,
      rgba(13,31,23,0.85) 100%
    );
    z-index: 1;
  }
  .hero__split { position: relative; z-index: 2; }
  .hero__left {
    flex: none;
    padding: var(--space-3xl) var(--space-lg) var(--space-xl);
    align-items: flex-start;
    /* Cap height — CTAs and content below are partially visible on load */
    min-height: 70vh;
    max-height: 82vh;
  }
  .hero__heading { font-size: clamp(2.25rem, 8vw, 3rem); }
  .hero__subtext { font-size: 1rem; }
  .hero__ctas { max-width: 100%; }
}


/* ============================================================
   11. HERO SWIPER SLIDES
   ============================================================ */

.hero-swiper { width: 100%; height: 100%; }

.hero-swiper__slide {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: var(--space-xl);
}

.hero-swiper__slide--1 { background-image: url('/images/hero-homepage-bg.webp'); background-color: var(--green-mid); }
.hero-swiper__slide--2 { background-image: url('/images/hero-homepage-bg.webp'); background-color: var(--green); }
.hero-swiper__slide--3 { background-image: url('/images/hero-homepage-bg.webp'); background-color: var(--green-dark); }

.hero-swiper__slide::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(13,31,23,0.85) 0%, rgba(27,67,50,0.30) 100%);
  z-index: 1;
}

.hero-swiper__content { position: relative; z-index: 2; }

.hero-swiper__tag {
  display: inline-block;
  background: rgba(184,134,11,0.25);
  border: 1px solid var(--gold);
  color: var(--gold-light);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.35rem 0.875rem;
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-sm);
}

.hero-swiper__title {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  font-weight: 700;
  color: #ffffff;
  line-height: 1.2;
}

/* Pagination dots */
.hero-swiper__pagination {
  position: absolute;
  bottom: var(--space-lg);
  left: var(--space-xl);
  z-index: 10;
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.hero-swiper__pagination .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  opacity: 1;
  transition: all var(--transition);
}
.hero-swiper__pagination .swiper-pagination-bullet-active {
  background: #ffffff;
  width: 28px;
  border-radius: 4px;
}


/* ============================================================
   12. TRUST SIGNALS STRIP
   ============================================================ */

.trust-strip {
  background-color: var(--cream);
  padding-block: var(--space-2xl);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.trust-strip__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xl) var(--space-lg);
  align-items: start;
  max-width: 860px;
  margin-inline: auto;
}
@media (min-width: 640px) {
  .trust-strip__list { grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); }
}

.trust-strip__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-sm);
}

/* White rounded icon box */
.trust-strip__icon {
  width: 68px;
  height: 68px;
  background: #ffffff;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-card);
}
.trust-strip__icon svg,
.trust-strip__icon [data-lucide] {
  width: 28px;
  height: 28px;
  color: var(--gold);
}

.trust-strip__title {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}

.trust-strip__sub {
  font-size: 0.8125rem;
  color: var(--text-light);
  margin-top: 0.125rem;
}


/* ============================================================
   14. SERVICES SWIPER CARDS — Rule 1: 3D shadow ONLY here
   ============================================================ */

.services-swiper-section {
  background: linear-gradient(160deg, var(--green) 0%, var(--green-dark) 100%);
  padding-block: var(--space-3xl);
}
.services-swiper-section .section-header h2 { color: #ffffff; }
.services-swiper-section .section-eyebrow { color: var(--gold-light); }
.services-swiper-section .section-subtext { color: rgba(255,255,255,0.7); }

.services-swiper { padding-bottom: var(--space-2xl) !important; }

.service-card {
  background: var(--green-mid);
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255,255,255,0.1);
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  min-height: 260px;
  /* Rule 1: 3D ground shadow — ONLY on swiper cards */
  box-shadow: var(--shadow-3d);
  transition: transform var(--transition), box-shadow var(--transition);
  height: 100%;
}
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 48px rgba(0,0,0,0.22), 0 12px 20px rgba(0,0,0,0.12);
}

.service-card__icon {
  width: 52px;
  height: 52px;
  background: rgba(255,255,255,0.12);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: var(--space-xs);
}
.service-card__icon svg,
.service-card__icon [data-lucide] { width: 24px; height: 24px; color: var(--gold-light); }

.service-card__title {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.3;
}

.service-card__desc {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.72);
  line-height: 1.55;
  flex: 1;
}
/* Rule 22: line-clamp on mobile */
@media (max-width: 767px) {
  .service-card__desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }
}

/* Swiper controls */
.services-swiper__prev,
.services-swiper__next { color: rgba(255,255,255,0.7) !important; transition: color var(--transition); }
.services-swiper__prev:hover,
.services-swiper__next:hover { color: #ffffff !important; }

.services-swiper__pagination { bottom: 0 !important; }
.services-swiper__pagination .swiper-pagination-bullet {
  background: rgba(255,255,255,0.35); opacity: 1; transition: all var(--transition);
}
.services-swiper__pagination .swiper-pagination-bullet-active {
  background: var(--gold-light); width: 24px; border-radius: 4px;
}

.swiper-hint {
  text-align: center;
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.45);
  margin-top: var(--space-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
@media (min-width: 1024px) { .swiper-hint { display: none; } }


/* ============================================================
   15. SERVICES OVERVIEW PILLARS
   ============================================================ */

.services-overview {
  background-color: var(--cream);
  padding-block: var(--space-4xl);
}

.services-overview__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}
@media (min-width: 768px) {
  .services-overview__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-2xl); }
}

.services-overview__pillar {
  background: #ffffff;
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  box-shadow: var(--shadow-card); /* Rule 1: standard shadow */
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  transition: box-shadow var(--transition), transform var(--transition);
}
.services-overview__pillar:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-4px);
}

.services-overview__pillar-icon {
  width: 56px;
  height: 56px;
  background: var(--green);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.services-overview__pillar-icon svg,
.services-overview__pillar-icon [data-lucide] { width: 26px; height: 26px; color: #ffffff; }

.services-overview__pillar-title {
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--green);
}

.services-overview__pillar-text {
  font-size: 0.9625rem;
  color: var(--text-light);
  line-height: 1.65;
}

.services-overview__pillar-list {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.services-overview__pillar-list li {
  font-size: 0.9rem;
  color: var(--text);
  padding-left: 1rem;
  position: relative;
}
.services-overview__pillar-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
}


/* ============================================================
   16. VIDEO SECTION PLACEHOLDER
   ============================================================ */

.video-section { background-color: var(--white); padding-block: var(--space-4xl); }

.video-section__wrapper {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.video-placeholder {
  background: linear-gradient(135deg, var(--green) 0%, var(--green-dark) 100%);
  min-height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (min-width: 768px) { .video-placeholder { min-height: 460px; } }

.video-placeholder__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-3xl) var(--space-xl);
  text-align: center;
}

.video-placeholder__logo { height: 50px; width: auto; opacity: 0.9; }
.video-placeholder__label {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: #ffffff;
}
.video-placeholder__subtext {
  font-size: 0.9375rem;
  color: rgba(255,255,255,0.6);
  max-width: 380px;
}

/* Responsive iframe */
.video-section__iframe-wrap { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; }
.video-section__iframe-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-section__transcript-note { text-align: center; margin-top: var(--space-sm); font-size: 0.875rem; }
.video-section__transcript-note a { color: var(--green); text-decoration: underline; }


/* ============================================================
   17. TEAM INTRO — MEET OUR TEAM (HOMEPAGE)
   ============================================================ */

.team-intro { background-color: var(--white); padding-block: var(--space-4xl); }

.team-intro__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  align-items: center;
}
@media (min-width: 768px) {
  .team-intro__grid { grid-template-columns: 1fr 1fr; gap: var(--space-3xl); }
}

.team-intro__image-wrap { position: relative; }

.team-intro__image {
  width: 100%;
  max-width: 420px;
  border-radius: var(--radius-xl);
  border: 3px solid var(--gold);
  object-fit: cover;
  display: block;
  margin-inline: auto;
}
@media (min-width: 768px) {
  .team-intro__image { max-width: 100%; margin-inline: 0; }
}

.team-intro__content { display: flex; flex-direction: column; gap: var(--space-sm); }

.team-intro__name-first {
  font-family: var(--font-heading);
  font-size: clamp(1.875rem, 4vw, 2.75rem);
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
  display: block;
}
.team-intro__name-last {
  font-family: var(--font-heading);
  font-size: clamp(1.875rem, 4vw, 2.75rem);
  font-weight: 700;
  color: var(--gold-light);
  font-style: italic;
  line-height: 1.1;
  display: block;
}
.team-intro__credentials {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-light);
  letter-spacing: 0.04em;
}
.team-intro__title-label {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--green);
  font-style: italic;
}
.team-intro__divider {
  width: 48px;
  height: 3px;
  background: var(--gold);
  border-radius: 2px;
  margin-block: var(--space-xs);
}
.team-intro__bio { font-size: 1rem; color: var(--text-light); line-height: 1.7; }


/* ============================================================
   18. PATIENT REVIEWS
   ============================================================ */

.reviews { background-color: var(--cream); padding-block: var(--space-4xl); }

.reviews__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}
@media (min-width: 640px) { .reviews__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .reviews__grid { grid-template-columns: repeat(3, 1fr); } }

.review-card {
  background: #ffffff;
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  box-shadow: var(--shadow-card); /* Rule 1: standard shadow */
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  transition: box-shadow var(--transition), transform var(--transition);
}
.review-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-3px); }

.review-card__stars { display: flex; gap: 3px; color: var(--gold-light); }
.review-card__stars svg,
.review-card__stars [data-lucide] { width: 18px; height: 18px; fill: currentColor; }

.review-card__quote { font-size: 0.9625rem; color: var(--text); line-height: 1.65; font-style: italic; flex: 1; }
.review-card__quote p { color: inherit; }

.review-card__name { font-size: 0.9375rem; font-weight: 700; color: var(--green); }
.review-card__location { font-size: 0.8125rem; color: var(--text-light); }
.reviews__disclaimer {
  font-size: 0.8125rem;
  color: var(--text-light);
  text-align: center;
  margin-top: var(--space-xl);
  font-style: italic;
}


/* ============================================================
   19. WHY CHOOSE — 4 CARDS — Rule 1: Standard shadow ONLY
   ============================================================ */

.why-choose { background-color: var(--white); padding-block: var(--space-4xl); }

.why-choose__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}
@media (min-width: 640px) { .why-choose__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .why-choose__grid { grid-template-columns: repeat(4, 1fr); } }

.why-card {
  background: #ffffff;
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  text-align: center;
  box-shadow: var(--shadow-card); /* Rule 1: standard shadow, NOT 3D */
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}
.why-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-4px);
  border-color: var(--gold);
}

.why-card__icon {
  width: 56px;
  height: 56px;
  background: rgba(27,67,50,0.08);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--green);
  transition: background-color var(--transition);
}
.why-card:hover .why-card__icon { background: rgba(27,67,50,0.14); }
.why-card__icon svg,
.why-card__icon [data-lucide] { width: 26px; height: 26px; }

.why-card__title { font-family: var(--font-heading); font-size: 1.125rem; font-weight: 700; color: var(--green); }
.why-card__text { font-size: 0.9rem; color: var(--text-light); line-height: 1.6; }


/* ============================================================
   20. DELIVERY MODEL PANELS
   ============================================================ */

.delivery-model { background-color: var(--cream); padding-block: var(--space-4xl); }

.delivery-model__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}
@media (min-width: 768px) {
  .delivery-model__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-xl); }
}

.delivery-card {
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
  box-shadow: var(--shadow-card); /* Rule 1: standard shadow */
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.delivery-card--telehealth { background: var(--green); color: #ffffff; }
.delivery-card--telehealth h3 { color: #ffffff; }
.delivery-card--telehealth .delivery-card__text,
.delivery-card--telehealth .delivery-card__address,
.delivery-card--telehealth li { color: rgba(255,255,255,0.78); }
.delivery-card--telehealth .delivery-card__icon { color: var(--gold-light); }

.delivery-card--inperson { background: #ffffff; border: 1px solid var(--border); }
.delivery-card--inperson h3 { color: var(--green); }
.delivery-card--inperson .delivery-card__icon { color: var(--green); }

.delivery-card__icon svg,
.delivery-card__icon [data-lucide] { width: 32px; height: 32px; }

.delivery-card__title { font-family: var(--font-heading); font-size: 1.375rem; font-weight: 700; line-height: 1.25; }
.delivery-card__text { font-size: 0.9625rem; line-height: 1.65; }
.delivery-card__address { font-size: 0.9375rem; font-weight: 500; line-height: 1.5; }

.delivery-card__list { display: flex; flex-direction: column; gap: 0.375rem; }
.delivery-card__list li {
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.delivery-card__list li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
}

.delivery-model__cta-link { text-align: center; }


/* ============================================================
   21. PAGE CTA SECTION — FINAL CTA
   ============================================================ */

.page-cta { padding-block: var(--space-4xl); }
.page-cta--home { background: linear-gradient(160deg, var(--green) 0%, var(--green-dark) 100%); }

.page-cta__inner {
  text-align: center;
  max-width: 700px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
}

.page-cta__eyebrow { color: var(--gold-light); }
.page-cta__heading {
  font-family: var(--font-heading);
  font-size: clamp(1.875rem, 4vw, 2.75rem);
  font-weight: 700;
  color: #ffffff;
  line-height: 1.2;
}
.page-cta__text { font-size: 1.0625rem; color: rgba(255,255,255,0.75); line-height: 1.65; max-width: 540px; }

.page-cta__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  width: 100%;
  max-width: 420px;
}
@media (min-width: 640px) {
  .page-cta__actions {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 100%;
  }
  .page-cta__btn { flex: 0 0 auto; }
}

.page-cta__note { font-size: 0.875rem; color: rgba(255,255,255,0.5); }


/* ============================================================
   22. PILL / TAG CHIPS
   ============================================================ */

.chip {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.875rem;
  border-radius: var(--radius-pill);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}
.chip--outline { border: 1px solid var(--border); color: var(--text); background: transparent; }
.chip--outline:hover { border-color: var(--green); color: var(--green); }
.chip--gold {
  background: rgba(184,134,11,0.15);
  border: 1px solid var(--gold);
  color: var(--gold);
  text-transform: uppercase;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  font-weight: 700;
}
.chip--green { background: var(--green); color: #ffffff; }

.chips-wrap { display: flex; flex-wrap: wrap; gap: var(--space-xs); }


/* ============================================================
   23. DIAGONAL ARROW CTA BUTTONS — Rule 2
   ============================================================ */

.btn-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
  transition: color var(--transition), gap var(--transition);
  min-height: 44px; /* WCAG 2.5.5 */
}
.btn-arrow:hover { color: var(--green); gap: calc(var(--space-sm) + 2px); }
.btn-arrow:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: var(--radius-sm); }

.btn-arrow__circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--green);
  color: #ffffff;
  flex-shrink: 0;
  transition: background-color var(--transition), transform var(--transition);
}
.btn-arrow__circle svg,
.btn-arrow__circle [data-lucide] { width: 16px; height: 16px; }
.btn-arrow:hover .btn-arrow__circle { background: var(--gold); transform: scale(1.08); }

/* Variants */
.btn-arrow--white { color: rgba(255,255,255,0.88); }
.btn-arrow--white:hover { color: #ffffff; }

.btn-arrow--pill {
  background: var(--green);
  color: #ffffff;
  padding: 0.625rem 1.25rem;
  border-radius: var(--radius-pill);
  min-height: 44px;
}
.btn-arrow--pill .btn-arrow__circle { background: rgba(255,255,255,0.2); width: 28px; height: 28px; }
.btn-arrow--pill:hover { background: var(--green-mid); color: #ffffff; }

.btn-arrow--gold-pill {
  background: var(--gold-btn);
  color: #ffffff;
  padding: 0.875rem 1.5rem;
  border-radius: var(--radius-pill);
  min-height: 52px;
  width: 100%;
  justify-content: space-between;
  font-size: 1rem;
}
.btn-arrow--gold-pill .btn-arrow__circle { background: rgba(255,255,255,0.25); }
.btn-arrow--gold-pill:hover { background: #B07800; color: #ffffff; }


/* ============================================================
   24. STANDARD BUTTONS — Rule 9
   All min 44px height and 44px width (WCAG 2.5.5)
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  padding: 0.75rem 1.5rem;
  min-height: 44px;
  min-width: 44px;
  border: 2px solid transparent;
  text-decoration: none;
  transition: background-color var(--transition), color var(--transition),
              border-color var(--transition), transform var(--transition-fast);
  white-space: nowrap;
  cursor: pointer;
}
.btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.btn:active { transform: scale(0.98); }
.btn svg, .btn [data-lucide] { width: 18px; height: 18px; flex-shrink: 0; }

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

.btn--secondary { background-color: var(--green); color: #ffffff; border-color: var(--green); }
.btn--secondary:hover { background-color: var(--green-mid); border-color: var(--green-mid); color: #ffffff; }

.btn--outline { background-color: transparent; color: var(--green); border-color: var(--green); }
.btn--outline:hover { background-color: var(--green); color: #ffffff; }

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

.btn--full { width: 100%; }


/* ============================================================
   25. FAQ ACCORDION
   ============================================================ */

.faq-list { display: flex; flex-direction: column; gap: var(--space-sm); max-width: 800px; margin-inline: auto; }

.faq-item {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.faq-item.is-open { border-color: var(--gold); box-shadow: var(--shadow-card-hover); }

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  width: 100%;
  padding: var(--space-lg);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--green);
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--transition-fast);
  min-height: 44px;
}
.faq-question:hover { background-color: rgba(27,67,50,0.04); }
.faq-question:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }

.faq-question__icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1rem;
  color: var(--green);
  transition: transform var(--transition), background-color var(--transition);
}
.faq-item.is-open .faq-question__icon { transform: rotate(45deg); background: var(--green); color: #ffffff; }

.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; padding-inline: var(--space-lg); }
.faq-item.is-open .faq-answer { max-height: 600px; padding-bottom: var(--space-lg); }
.faq-answer p { font-size: 0.9625rem; color: var(--text-light); line-height: 1.7; }


/* ============================================================
   26. FOOTER — Rules 5 & 15
   Zone 1: homepage only | Zone 2: all pages
   ============================================================ */

/* Rule 15: Zone 1 hidden on all non-homepage pages — ONE rule covers 44 pages */
body:not(.page--home) .footer__zone1 { display: none; }

.footer { font-family: var(--font-body); }

/* Zone 1 */
.footer__zone1 { background-color: var(--dark); padding-block: var(--space-3xl); }

.footer__zone1-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
}
@media (min-width: 640px) { .footer__zone1-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .footer__zone1-grid { grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: var(--space-3xl); } }

.footer__logo { height: 40px; width: auto; margin-bottom: var(--space-md); }
.footer__tagline { font-size: 0.9375rem; font-weight: 600; color: rgba(255,255,255,0.85); margin-bottom: var(--space-xs); }
.footer__brand-desc { font-size: 0.875rem; color: rgba(255,255,255,0.5); line-height: 1.6; margin-bottom: var(--space-md); }

.footer__social { display: flex; gap: var(--space-sm); flex-wrap: wrap; }
.footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  color: var(--gold-light);
  transition: background-color var(--transition), color var(--transition);
}
.footer__social-link:hover { background-color: rgba(255,255,255,0.15); color: #ffffff; }
.footer__social-link svg,
.footer__social-link [data-lucide] { width: 18px; height: 18px; }

.footer__col-heading { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(255,255,255,0.9); margin-bottom: var(--space-md); }
.footer__nav-list { display: flex; flex-direction: column; gap: 0.5rem; }
.footer__nav-link { font-size: 0.875rem; color: rgba(255,255,255,0.55); transition: color var(--transition-fast); line-height: 1.4; }
.footer__nav-link:hover { color: rgba(255,255,255,0.9); }

/* NAP column */
.footer__col--nap { display: flex; flex-direction: column; gap: var(--space-md); }
.footer__nap-item { display: flex; gap: var(--space-sm); align-items: flex-start; }
.footer__nap-item > svg,
.footer__nap-item > [data-lucide] { width: 16px; height: 16px; color: var(--gold-light); flex-shrink: 0; margin-top: 2px; }
.footer__nap-item p,
.footer__nap-item div { font-size: 0.875rem; color: rgba(255,255,255,0.6); line-height: 1.55; }

.footer__phone-link { color: rgba(255,255,255,0.88); font-weight: 600; transition: color var(--transition-fast); }
.footer__phone-link:hover { color: var(--gold-light); }
.footer__phone-label { font-size: 0.8rem; color: rgba(255,255,255,0.45); font-weight: 400; }
.footer__fax { font-size: 0.8125rem; color: rgba(255,255,255,0.4); display: block; margin-top: 0.25rem; }
.footer__email-link { color: rgba(255,255,255,0.75); word-break: break-all; font-size: 0.875rem; transition: color var(--transition-fast); }
.footer__email-link:hover { color: var(--gold-light); }

.footer__hours { display: flex; gap: var(--space-sm); align-items: flex-start; }
.footer__hours > svg,
.footer__hours > [data-lucide] { width: 16px; height: 16px; color: var(--gold-light); flex-shrink: 0; margin-top: 2px; }
.footer__hours div { display: flex; flex-direction: column; gap: 0.25rem; }
.footer__hours p { font-size: 0.8125rem; color: rgba(255,255,255,0.55); line-height: 1.4; }

.footer__virtual-note {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--gold-light) !important;
  font-weight: 600;
  margin-top: 0.25rem;
}
.footer__virtual-note svg,
.footer__virtual-note [data-lucide] { width: 14px; height: 14px; color: var(--gold-light); }

/* Zone 2 */
.footer__zone2 { background-color: var(--dark-mid); padding-block: var(--space-lg); border-top: 1px solid rgba(255,255,255,0.06); }
.footer__zone2-inner { display: flex; flex-direction: column; gap: var(--space-sm); text-align: center; }
@media (min-width: 768px) {
  .footer__zone2-inner { flex-direction: row; align-items: center; justify-content: space-between; text-align: left; flex-wrap: wrap; gap: var(--space-md); }
}

.footer__copyright { font-size: 0.8125rem; color: rgba(255,255,255,0.45); line-height: 1.5; }
.footer__legal-links { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; justify-content: center; }
.footer__legal-link { font-size: 0.8125rem; color: rgba(255,255,255,0.45); transition: color var(--transition-fast); }
.footer__legal-link:hover { color: rgba(255,255,255,0.8); }
.footer__disclaimer { font-size: 0.75rem; color: rgba(255,255,255,0.3); line-height: 1.55; font-style: italic; width: 100%; text-align: center; }


/* ============================================================
   27. HIPAA MODAL — Rule 4
   ============================================================ */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition), visibility var(--transition);
}
.modal-overlay.is-open { opacity: 1; visibility: visible; pointer-events: all; }

.modal {
  background: #ffffff;
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
  max-width: 480px;
  width: 100%;
  box-shadow: var(--shadow-modal);
  text-align: center;
  transform: scale(0.96) translateY(8px);
  transition: transform var(--transition);
}
.modal-overlay.is-open .modal { transform: scale(1) translateY(0); }

.modal__icon {
  width: 56px;
  height: 56px;
  background: rgba(27,67,50,0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-md);
  color: var(--green);
}
.modal__icon svg,
.modal__icon [data-lucide] { width: 28px; height: 28px; }

.modal__title { font-family: var(--font-heading); font-size: 1.375rem; font-weight: 700; color: var(--green); margin-bottom: var(--space-sm); }
.modal__body { font-size: 0.9625rem; color: var(--text-light); line-height: 1.65; margin-bottom: var(--space-xl); }
.modal__actions { display: flex; flex-direction: column; gap: var(--space-sm); }
@media (min-width: 400px) {
  .modal__actions { flex-direction: row; }
  .modal__actions .btn { flex: 1; }
}


/* ============================================================
   28. COOKIE CONSENT BANNER — Rule 12
   ============================================================ */

.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--green);
  border-top: 3px solid var(--gold);
  z-index: 800;
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  box-shadow: 0 -4px 32px rgba(0,0,0,0.15);
}
.cookie-banner.is-visible { transform: translateY(0); }

.cookie-banner__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-lg);
  max-width: var(--container-max);
  margin-inline: auto;
}
@media (min-width: 768px) {
  .cookie-banner__inner { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-xl); }
}

.cookie-banner__text { font-size: 0.9rem; color: rgba(255,255,255,0.85); line-height: 1.55; flex: 1; }
.cookie-banner__text a { color: var(--gold-light); text-decoration: underline; }
.cookie-banner__actions { display: flex; gap: var(--space-sm); flex-shrink: 0; flex-wrap: wrap; }

.cookie-panel { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; background: rgba(0,0,0,0.15); }
.cookie-panel.is-open { max-height: 400px; }
.cookie-panel .container { padding-block: var(--space-lg); }

.cookie-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-sm);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.cookie-toggle:last-of-type { border-bottom: none; }
.cookie-toggle__label { font-size: 0.9375rem; font-weight: 600; color: rgba(255,255,255,0.9); }
.cookie-toggle__note { font-size: 0.8125rem; color: rgba(255,255,255,0.5); line-height: 1.4; margin-top: 0.25rem; }

/* Toggle switch */
.toggle-switch { position: relative; display: inline-flex; flex-shrink: 0; cursor: pointer; }
.toggle-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle-track {
  display: block;
  width: 48px;
  height: 26px;
  border-radius: 13px;
  background: rgba(255,255,255,0.2);
  position: relative;
  transition: background-color var(--transition);
}
.toggle-track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ffffff;
  transition: transform var(--transition);
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.toggle-switch input:checked + .toggle-track { background: var(--gold); }
.toggle-switch input:checked + .toggle-track::after { transform: translateX(22px); }
.toggle-switch--locked { opacity: 0.5; cursor: not-allowed; }


/* ============================================================
   29. ACCESSIBILITY WIDGET — Rule 11a
   Fixed bottom-right always. Above back-to-top button.
   Position locked with !important — nothing can override.
   ============================================================ */

.a11y-widget {
  position: fixed !important;
  right: 1rem !important;
  bottom: calc(1rem + 52px + 0.75rem) !important;
  top: auto !important;
  left: auto !important;
  z-index: 700;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-xs);
}

.a11y-trigger {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--green);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  transition: background-color var(--transition), transform var(--transition-fast);
}
.a11y-trigger:hover { background: var(--green-mid); transform: scale(1.06); }
.a11y-trigger svg,
.a11y-trigger [data-lucide] { width: 24px; height: 24px; }

.a11y-panel {
  background: #ffffff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-dropdown);
  padding: var(--space-lg);
  width: 220px;
  border: 1px solid var(--border);
  opacity: 0;
  visibility: hidden;
  transform: translateX(8px) scale(0.96);
  transition: opacity var(--transition), visibility var(--transition), transform var(--transition);
  transform-origin: bottom right;
}
.a11y-panel.is-open { opacity: 1; visibility: visible; transform: translateX(0) scale(1); }

.a11y-panel__title { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-light); margin-bottom: var(--space-sm); }

.a11y-control {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding-block: var(--space-sm);
  border-bottom: 1px solid var(--border);
}
.a11y-control:last-child { border-bottom: none; }
.a11y-control__label { font-size: 0.8125rem; font-weight: 600; color: var(--text); display: flex; justify-content: space-between; align-items: center; }
#a11y-font-size-label { font-weight: 400; color: var(--text-light); }

.a11y-resize { display: flex; gap: var(--space-xs); }
.a11y-btn {
  flex: 1;
  min-height: 36px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--cream);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}
.a11y-btn:hover { background: var(--green); color: #ffffff; border-color: var(--green); }

.a11y-contrast-btn,
.a11y-translate-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 36px;
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--cream);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: background-color var(--transition-fast);
}
.a11y-contrast-btn:hover,
.a11y-translate-btn:hover { background: rgba(27,67,50,0.08); border-color: var(--green); color: var(--green); }
.a11y-contrast-btn[aria-pressed="true"] { background: var(--green); color: #ffffff; border-color: var(--green); }


/* ============================================================
   30. BACK TO TOP — Rule 28
   ============================================================ */

.back-to-top {
  position: fixed;
  right: var(--space-md);
  bottom: var(--space-md);
  z-index: 600;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--gold-light);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity var(--transition), visibility var(--transition), transform var(--transition), background-color var(--transition-fast);
}
.back-to-top.is-visible { opacity: 1; visibility: visible; pointer-events: all; transform: translateY(0); }
.back-to-top:hover { background: var(--gold); transform: translateY(-3px) scale(1.06); }
.back-to-top svg,
.back-to-top [data-lucide] { width: 22px; height: 22px; }


/* ============================================================
   31. SLIM TITLE BAR — service sub-pages — Rule 24
   ============================================================ */

.slim-title {
  background: var(--green);
  padding-block: var(--space-2xl) var(--space-xl);
  text-align: center;
}
.slim-title h1 { color: #ffffff; font-size: clamp(1.625rem, 4vw, 2.5rem); }
.slim-title__breadcrumb { font-size: 0.8125rem; color: rgba(255,255,255,0.55); margin-top: var(--space-sm); }
.slim-title__breadcrumb a { color: var(--gold-light); transition: color var(--transition-fast); }
.slim-title__breadcrumb a:hover { color: #ffffff; }


/* ============================================================
   32. PROVIDER PROFILE SPLIT HERO
   ============================================================ */

.profile-hero { display: grid; grid-template-columns: 1fr; min-height: 60vh; }
@media (min-width: 768px) { .profile-hero { grid-template-columns: 1fr 1fr; } }

.profile-hero__image-panel { position: relative; min-height: 400px; }
@media (min-width: 768px) { .profile-hero__image-panel { min-height: 600px; } }

.profile-hero__photo { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }

.profile-hero__content {
  background: var(--green);
  padding: var(--space-2xl) var(--space-xl);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-md);
}
@media (min-width: 1024px) { .profile-hero__content { padding: var(--space-4xl) var(--space-3xl); } }

.profile-hero__name-first { font-family: var(--font-heading); font-size: clamp(2rem, 5vw, 3rem); font-weight: 700; color: #ffffff; line-height: 1.1; display: block; }
.profile-hero__name-last { font-family: var(--font-heading); font-size: clamp(2rem, 5vw, 3rem); font-weight: 700; color: var(--gold-light); font-style: italic; line-height: 1.1; display: block; }
.profile-hero__credentials-string { font-size: 0.875rem; color: rgba(255,255,255,0.65); letter-spacing: 0.04em; margin-top: var(--space-xs); }

.profile-hero__chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-sm); }
.profile-hero__chip {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.875rem;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: var(--radius-pill);
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.85);
  background: transparent;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}
.profile-hero__chip:hover { border-color: var(--gold); background: rgba(184,134,11,0.15); color: var(--gold-light); }

.profile-hero__title-label { font-size: 0.9375rem; font-weight: 600; color: var(--gold-light); font-style: italic; }
.profile-hero__linkedin { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: rgba(255,255,255,0.7); transition: color var(--transition-fast); }
.profile-hero__linkedin:hover { color: var(--gold-light); }
.profile-hero__linkedin svg,
.profile-hero__linkedin [data-lucide] { width: 18px; height: 18px; }


/* ============================================================
   33. GOOGLE MAPS EMBED
   ============================================================ */

.map-embed { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); border: 1px solid var(--border); }
.map-embed iframe { display: block; width: 100%; height: 400px; border: 0; }
@media (max-width: 767px) { .map-embed iframe { height: 300px; } }


/* ============================================================
   34. HIGH CONTRAST MODE — Rule 11a
   ============================================================ */

.high-contrast {
  --green:      #1a1a1a;
  --green-mid:  #2a2a2a;
  --green-dark: #000000;
  --gold:       #ffd700;
  --gold-light: #ffd700;
  --gold-btn:   #c8a000;
  --white:      #000000;
  --cream:      #0a0a0a;
  --dark:       #000000;
  --text:       #ffffff;
  --text-light: #e0e0e0;
  --border:     #555555;
}
.high-contrast img { filter: contrast(1.15); }
.high-contrast a, .high-contrast button { outline-offset: 2px; }
.high-contrast .mobile-menu { background-color: #0D1F17; }


/* ============================================================
   35. PRINT STYLES
   ============================================================ */

@media print {
  .utility-bar, .header, .mobile-menu, .footer,
  .cookie-banner, .a11y-widget, .back-to-top,
  .modal-overlay, .hero__ctas, .page-cta { display: none !important; }
  body { font-size: 12pt; color: #000000; background: #ffffff; }
  h1, h2, h3 { color: #1B4332; page-break-after: avoid; }
  a::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #555; }
  a[href^="tel"]::after, a[href^="mailto"]::after { content: ""; }
}


/* ============================================================
   36. RESPONSIVE — BREAKPOINT SUMMARY
   ============================================================ */

@media (min-width: 480px) {
  .trust-strip__list { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 640px) {
  .trust-strip__list { grid-template-columns: repeat(4, 1fr); }
  .page-cta__actions { flex-direction: row; justify-content: center; }
}

@media (min-width: 768px) {
  section { padding-block: var(--space-4xl); }
  .footer__zone2-inner { flex-direction: row; text-align: left; }
  .modal__actions { flex-direction: row; }
  .delivery-model__grid { grid-template-columns: repeat(2, 1fr); }
  .services-overview__grid { grid-template-columns: repeat(2, 1fr); }
  .team-intro__grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 900px) {
  .hero__right { display: block; }
  .hero__scroll-arrow { display: none; }
}

@media (min-width: 1024px) {
  /* Header stays green — no white restoration needed */
  .nav { display: flex; }
  /* header__actions stays hidden — phone/book removed from desktop header */
  .hamburger { display: none; }
  .why-choose__grid { grid-template-columns: repeat(4, 1fr); }
  .reviews__grid { grid-template-columns: repeat(3, 1fr); }
  .footer__zone1-grid { grid-template-columns: 2fr 1fr 1fr 1.5fr; }
  .profile-hero { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1280px) {
  h1 { font-size: 3.5rem; }
  h2 { font-size: 2.5rem; }
  .hero__heading { font-size: 3.75rem; }
}


/* ============================================================
   37. STANDARD PAGE HERO — HUB PAGES
   Rule 24: Hero images on all parent hub pages at launch.

   DESIGN SYSTEM (LOCKED):

   MOBILE — ALL HUB PAGES:
   Two stacked blocks. Photo sits at top, full-width, NO overlay
   darkening — the image breathes fully so the human element
   reads clearly and builds trust instantly. Below it: solid deep
   forest green panel with H1 + subtext in white. Hero is kept
   intentionally short so page content peeks below the fold,
   signalling to visitors that there is more to read. Animated
   down arrow reinforces this.

   DESKTOP — ALL HUB PAGES (Option B — Side by Side):
   Left 45% = deep forest green content panel (H1 + subtext +
   down arrow). Right 55% = full photo, no overlay, image shows
   completely clearly. Both panels equal height. Total hero is
   capped at max 70vh so content below the hero is already
   partially visible on landing — visitors always know there is
   more. Animated down arrow at bottom of green panel.

   HTML USAGE:
   <section class="page-hero" aria-label="Page hero">
     <div class="page-hero__photo" aria-hidden="true"></div>
     <div class="page-hero__panel">
       <div class="page-hero__panel-inner">
         <p class="page-hero__eyebrow section-eyebrow--left-rule">Label</p>
         <h1 class="page-hero__heading">
           Heading Text
           <span class="page-hero__heading-accent">Gold Italic Line</span>
         </h1>
         <p class="page-hero__sub">Subtext paragraph here.</p>
         <a href="#main-content" class="page-hero__arrow" aria-label="Scroll to content">
           <i data-lucide="chevron-down" aria-hidden="true"></i>
         </a>
       </div>
     </div>
   </section>

   BODY CLASS HOOKS control the photo per page.
   Add body class in each HTML file — photo loads automatically.
   ============================================================ */

/* ── OUTER WRAPPER ── */
/* Problem 6 fix: zero margin/padding so hero starts immediately after header */
.page-hero {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Override global section padding for hero — it must have none */
section.page-hero {
  padding-block: 0 !important;
}

@media (min-width: 900px) {
  .page-hero {
    flex-direction: row;
    /* Explicit height required so photo panel's height:100% has something to fill */
    height: min(70vh, 520px);
    min-height: 420px;
    max-height: 520px;
  }
}

/* ── PHOTO PANEL — right 55% on desktop, full-width top on mobile ── */
.page-hero__photo {
  width: 100%;
  /* Mobile: short enough so green panel and first content section peek below */
  height: 52vw;
  min-height: 200px;
  max-height: 320px;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-color: var(--green-mid);
  flex-shrink: 0;
  order: 1; /* Photo on top on mobile */
}

@media (min-width: 900px) {
  .page-hero__photo {
    order: 2;           /* Photo on right on desktop */
    width: 55%;
    height: 100%;       /* Fills full hero height */
    min-height: unset;
    max-height: unset;
    flex-shrink: 0;
    flex-grow: 1;
    align-self: stretch;
  }
}

/* ── GREEN CONTENT PANEL — below photo on mobile, left 45% desktop ── */
.page-hero__panel {
  background-color: var(--green);
  display: flex;
  align-items: center;
  flex-shrink: 0;
  width: 100%;
  order: 2; /* Panel below photo on mobile */
}

@media (min-width: 900px) {
  .page-hero__panel {
    order: 1;           /* Panel on left on desktop */
    width: 45%;
    align-self: stretch;
    align-items: center;
    /* Ensure panel always fills the full hero height */
    min-height: 100%;
  }
}

.page-hero__panel-inner {
  padding: var(--space-xl) var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  width: 100%;
}

@media (min-width: 900px) {
  .page-hero__panel-inner {
    padding: var(--space-3xl) var(--space-2xl);
    /* Left-align content within panel */
    justify-content: center;
    min-height: 100%;
  }
}

@media (min-width: 1200px) {
  .page-hero__panel-inner {
    /* On large screens push panel content right to maintain
       visual proximity to the max-width container edge */
    padding-left: max(
      calc((100vw - var(--container-max)) / 2 + var(--space-xl)),
      var(--space-2xl)
    );
  }
}

/* Eyebrow */
.page-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-light);
}

.page-hero__eyebrow::before {
  content: '';
  width: 28px;
  height: 2px;
  background: var(--gold-light);
  flex-shrink: 0;
}

/* H1 */
.page-hero__heading {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 4vw, 2.875rem);
  font-weight: 700;
  color: #ffffff;
  line-height: 1.15;
}

/* Gold italic accent — second line of H1 */
.page-hero__heading-accent {
  display: block;
  color: var(--gold-light);
  font-style: italic;
  line-height: 1.15;
}

/* Subtext */
.page-hero__sub {
  font-size: 1rem;
  color: rgba(255,255,255,0.78);
  line-height: 1.65;
  max-width: 480px;
  border-left: 3px solid var(--gold);
  padding-left: var(--space-md);
  margin-top: var(--space-xs);
}

/* ── DOWN ARROW — animated, signals more content below ── */
.page-hero__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-top: var(--space-md);
  color: rgba(255,255,255,0.55);
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.2);
  transition: border-color var(--transition), color var(--transition);
  animation: hero-bounce 2.2s ease-in-out infinite;
  align-self: flex-start;
}

.page-hero__arrow:hover {
  border-color: var(--gold);
  color: var(--gold-light);
}

.page-hero__arrow svg,
.page-hero__arrow [data-lucide] {
  width: 22px;
  height: 22px;
}

@keyframes hero-bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(5px); }
}

/* ── SLIM VARIANT — Contact, Find Us, Book Appointment ── */
/* These pages use a shorter side-by-side on desktop,
   and a shorter photo on mobile */

.page-hero--slim .page-hero__photo {
  height: 36vw;
  min-height: 180px;
  max-height: 260px;
}

@media (min-width: 900px) {
  .page-hero--slim {
    max-height: 50vh;
    min-height: 300px;
  }
  .page-hero--slim .page-hero__photo {
    height: auto;
    min-height: unset;
    max-height: unset;
  }
}

/* ── BODY CLASS HOOKS — one per hub page ── */
/* Each photo file maps to its page via a body class.
   Drop the image into /images/ — it appears automatically.
   No CSS edits needed per page. */

body.page--about    .page-hero__photo { background-image: url('/images/hero-about-bg.webp'); }
body.page--services .page-hero__photo { background-image: url('/images/hero-services-bg.webp'); }
body.page--approach .page-hero__photo { background-image: url('/images/hero-approach-bg.webp'); }
body.page--insurance .page-hero__photo { background-image: url('/images/hero-insurance-bg.webp'); }
body.page--resources .page-hero__photo { background-image: url('/images/hero-resources-bg.webp'); }
body.page--contact  .page-hero__photo { background-image: url('/images/hero-contact-bg.webp'); }
body.page--findus   .page-hero__photo { background-image: url('/images/hero-findus-bg.webp'); }
body.page--book     .page-hero__photo { background-image: url('/images/hero-book-bg.webp'); }

/* ── NEW PATIENT PORTAL ── */
/* No hero image at launch — uses slim title bar (.slim-title) */


/* ============================================================
   38. HOMEPAGE HERO — ROTATING SLIDES + STATIC CTAs
   Desktop: full bg image, left gradient panel, right Doreen photo
   Mobile: bg photo + lighter overlay, slides + CTAs stacked
   ============================================================ */

/* ── ROTATING HEADLINES — pure CSS crossfade ──────────────────
   No JavaScript. No Swiper. Cloudflare cannot interfere.
   Three headlines rotate on an 18-second total cycle (6s each).
   Each headline: fades in → holds → fades out → next begins.
   ─────────────────────────────────────────────────────────── */

.hero-headlines {
  position: relative;
  /* Tall enough for the longest headline at any screen width.
     Headlines are absolutely positioned inside this box.
     CTAs below sit outside this box and are never touched. */
  min-height: 280px;
  margin-bottom: var(--space-lg);
}

@media (min-width: 600px) {
  .hero-headlines { min-height: 240px; }
}

@media (min-width: 900px) {
  .hero-headlines { min-height: 260px; }
}

@media (min-width: 1200px) {
  .hero-headlines { min-height: 220px; }
}

/* All headlines stacked in same position */
.hero-headline {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  /* Prevent hidden headlines from being clicked or tab-focused */
  pointer-events: none;
}

/* Active headline is fully visible and interactive */
.hero-headline[aria-live="polite"] {
  pointer-events: auto;
}

/* ── ANIMATION KEYFRAMES ── */
/* Each cycle = 18s total (3 slides × 6s each)
   Fade in: 0–8%    (~1.4s)
   Hold:    8–67%   (~10.5s visible but only 6s shown, rest is wait)
   Fade out: 67–75% (~1.4s)
   Hidden:  75–100% (~4.5s waiting for next cycle) */

@keyframes headline-cycle {
  0%        { opacity: 0; pointer-events: none; }
  5%        { opacity: 1; pointer-events: auto; }
  33%       { opacity: 1; pointer-events: auto; }
  38%       { opacity: 0; pointer-events: none; }
  100%      { opacity: 0; pointer-events: none; }
}

/* Each headline starts its cycle at a different delay */
.hero-headline--1 {
  animation: headline-cycle 18s ease-in-out infinite;
  animation-delay: 0s;
}

.hero-headline--2 {
  animation: headline-cycle 18s ease-in-out infinite;
  animation-delay: 6s;
}

.hero-headline--3 {
  animation: headline-cycle 18s ease-in-out infinite;
  animation-delay: 12s;
}

/* Respect user preference for reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hero-headline--1 { opacity: 1; animation: none; position: relative; }
  .hero-headline--2,
  .hero-headline--3 { display: none; }
  .hero-headlines { min-height: auto; }
}

/* ── PROGRESS DOTS ── */
.hero-dots {
  position: absolute;
  left: 0;
  bottom: calc(-1 * var(--space-sm));
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.hero-dot {
  display: block;
  height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,0.3);
  transition: width var(--transition);
}

/* Each dot expands and brightens when its headline is active */
@keyframes dot-active {
  0%   { width: 8px;  background: rgba(255,255,255,0.3); }
  5%   { width: 28px; background: rgba(255,255,255,0.9); }
  33%  { width: 28px; background: rgba(255,255,255,0.9); }
  38%  { width: 8px;  background: rgba(255,255,255,0.3); }
  100% { width: 8px;  background: rgba(255,255,255,0.3); }
}

.hero-dot--1 {
  animation: dot-active 18s ease-in-out infinite;
  animation-delay: 0s;
  width: 28px;
  background: rgba(255,255,255,0.9);
}

.hero-dot--2 {
  animation: dot-active 18s ease-in-out infinite;
  animation-delay: 6s;
  width: 8px;
}

.hero-dot--3 {
  animation: dot-active 18s ease-in-out infinite;
  animation-delay: 12s;
  width: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .hero-dot--1,
  .hero-dot--2,
  .hero-dot--3 { animation: none; }
}

.hero__slide-tag {
  display: inline-flex;
  align-items: center;
  background: rgba(184,134,11,0.2);
  border: 1px solid rgba(184,134,11,0.5);
  color: var(--gold-light);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.35rem 0.875rem;
  border-radius: var(--radius-pill);
  margin-top: var(--space-sm);
}

/* Swiper pagination dots — sits between slides and CTAs */
/* ── Desktop: left gradient panel floats over full bg image ── */
/* Gradient goes solid green left → transparent right.
   Background photo shows clearly on the right side. */
@media (min-width: 900px) {
  .hero--home {
    background-image: url('/images/hero-homepage-bg.webp');
    background-size: cover;
    background-position: center;
    min-height: 75vh;
    max-height: 88vh;
    position: relative;
    /* Remove any background overlay — photo must show clean on right */
    background-color: var(--green);
  }

  /* Remove the old ::before overlay on desktop — gradient is on left panel only */
  .hero--home::before {
    display: none;
  }

  /* Left panel: solid green → transparent, text sits on solid green side */
  .hero__left {
    position: relative;
    z-index: 2;
    background: linear-gradient(
      to right,
      rgba(13,31,23,1.0)  0%,
      rgba(13,31,23,0.98) 45%,
      rgba(13,31,23,0.75) 70%,
      rgba(13,31,23,0.0)  100%
    );
    flex: 0 0 58%;
    min-height: 75vh;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-3xl) var(--space-3xl) var(--space-3xl)
      max(calc((100vw - var(--container-max)) / 2 + var(--space-xl)), var(--space-xl));
  }

}


/* ============================================================
   39. ABOUT PAGE — MISSION/VISION/VALUES, PROVIDER CARDS,
       BRAND PILLARS
   Used on: about.html and team pages
   ============================================================ */

/* ── Mission / Vision / Values grid ── */
.mvv-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

@media (min-width: 768px) {
  .mvv-grid { grid-template-columns: repeat(3, 1fr); }
}

.mvv-card {
  background: #ffffff;
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  transition: box-shadow var(--transition), transform var(--transition);
}

.mvv-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-4px);
}

.mvv-card__icon {
  width: 52px;
  height: 52px;
  background: rgba(27,67,50,0.08);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--green);
  flex-shrink: 0;
}

.mvv-card__icon svg,
.mvv-card__icon [data-lucide] { width: 26px; height: 26px; }

.mvv-card__title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--green);
}

.mvv-card__text {
  font-size: 0.9625rem;
  color: var(--text-light);
  line-height: 1.7;
}

/* Values list inside the third MVV card */
.mvv-card__values-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: var(--space-xs);
}

.mvv-card__values-list li {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.9625rem;
  color: var(--text);
  font-weight: 500;
}

.mvv-card__values-list li svg,
.mvv-card__values-list li [data-lucide] {
  width: 16px;
  height: 16px;
  color: var(--gold);
  flex-shrink: 0;
}

/* About section background alternation */
.about-mvv {
  background-color: var(--cream);
  padding-block: var(--space-4xl);
}

.about-team {
  background-color: var(--white);
  padding-block: var(--space-4xl);
}

/* ── Provider Cards grid ── */
.provider-cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

@media (min-width: 640px) {
  .provider-cards-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .provider-cards-grid { grid-template-columns: repeat(3, 1fr); }
}

.provider-card {
  background: #ffffff;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border);
  transition: box-shadow var(--transition), transform var(--transition);
  display: flex;
  flex-direction: column;
}

.provider-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-5px);
}

/* Photo area */
.provider-card__image-wrap {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--cream);
  flex-shrink: 0;
}

.provider-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform 0.4s ease;
}

.provider-card:hover .provider-card__image {
  transform: scale(1.03);
}

/* Placeholder when headshot is not yet available */
.provider-card__image-wrap--placeholder {
  background: linear-gradient(135deg, var(--green) 0%, var(--green-mid) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.provider-card__image-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.provider-card__image-placeholder svg,
.provider-card__image-placeholder [data-lucide] {
  width: 80px;
  height: 80px;
  color: rgba(255,255,255,0.3);
}

/* Card content */
.provider-card__content {
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  flex: 1;
}

.provider-card__name {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--green);
  line-height: 1.2;
}

.provider-card__credentials {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--gold);
  letter-spacing: 0.04em;
}

.provider-card__title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
  font-style: italic;
}

.provider-card__specialty {
  font-size: 0.875rem;
  color: var(--text-light);
  margin-bottom: var(--space-sm);
}

/* ── Brand Pillars ── */
.brand-pillars {
  background: var(--cream);
  padding-block: var(--space-4xl);
}

.pillars-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

@media (min-width: 640px) {
  .pillars-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .pillars-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Fifth pillar spans full width on 3-col layout to centre it */
@media (min-width: 1024px) {
  .pillars-grid .pillar-card:nth-child(4) { grid-column: 1; }
  .pillars-grid .pillar-card:nth-child(5) { grid-column: 2; }
}

.pillar-card {
  background: #ffffff;
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}

.pillar-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-4px);
  border-color: var(--gold);
}

.pillar-card__icon {
  width: 52px;
  height: 52px;
  background: rgba(27,67,50,0.08);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--green);
  flex-shrink: 0;
  transition: background-color var(--transition);
}

.pillar-card:hover .pillar-card__icon {
  background: rgba(27,67,50,0.14);
}

.pillar-card__icon svg,
.pillar-card__icon [data-lucide] { width: 24px; height: 24px; }

.pillar-card__title {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--green);
  line-height: 1.3;
}

.pillar-card__text {
  font-size: 0.9rem;
  color: var(--text-light);
  line-height: 1.65;
}