/* ==========================================================================
   ADDICTION TREATMENT SERVICES - Premium Design System
   Color Scheme: Black / Red / Gold / White
   ========================================================================== */

/* ---------- Google Fonts ----------
   Loaded via <link> in each page's <head> (see build.py). A CSS @import here
   would chain an extra render-blocking request behind this stylesheet. */

/* ---------- CSS Custom Properties ---------- */
:root {
  /* Brand Colors */
  --red: #bf4a2c;
  --red-dark: #a53d22;
  --red-light: #f8efe8;
  --red-glow: rgba(191, 74, 44, 0.12);

  /* Accent - Warm Gold for luxury feel */
  --gold: #c3a980;
  --gold-dark: #a9855a;
  --gold-light: #f4eee2;
  --gold-glow: rgba(169, 133, 90, 0.15);

  /* Neutrals */
  --black: #211d18;
  --dark: #2b2620;
  --charcoal: #38312a;
  --gray-900: #333333;
  --gray-700: #555555;
  --gray-600: #666666;
  --gray-500: #888888;
  --gray-400: #AAAAAA;
  --gray-300: #CCCCCC;
  --gray-200: #E5E5E5;
  --gray-100: #F3F3F3;
  --gray-50: #F9F9F9;
  --white: #FFFFFF;
  --cream: #FAF8F5;

  /* Functional */
  --success: #22C55E;
  --warning: #F59E0B;
  --info: #3B82F6;

  /* Typography */
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Fraunces', var(--font-body);

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;

  /* Borders & Radius */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-full: 9999px;
  --border: 1px solid var(--gray-200);

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
  --shadow: 0 4px 16px rgba(0,0,0,0.08);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.1);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.12);
  --shadow-xl: 0 20px 60px rgba(0,0,0,0.15);
  --shadow-red: 0 8px 30px rgba(191, 74, 44, 0.3);

  /* Transitions */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --transition: 0.3s var(--ease);
  --transition-fast: 0.15s var(--ease);
  --transition-slow: 0.5s var(--ease);

  /* Layout */
  --container: 1280px;
  --container-sm: 800px;
  --container-lg: 1400px;
  --header-height: 80px;
}

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

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 16px;
}

body {
  font-family: var(--font-body);
  color: var(--gray-900);
  background: var(--white);
  line-height: 1.6;
  /* `clip` prevents horizontal scroll without turning body into a scroll
     container (which breaks position: sticky sidebars). */
  overflow-x: clip;
}

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

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

ul, ol { list-style: none; }

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  border: none;
  outline: none;
  background: none;
}

button { cursor: pointer; }

/* ---------- Typography ---------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
  color: var(--black);
}

h1 { font-size: clamp(2rem, 5vw, 3.25rem); }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.75rem); }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.1rem; }
h6 { font-size: 1rem; }

p {
  color: var(--gray-600);
  line-height: 1.7;
  margin-bottom: 1rem;
}

p:last-child { margin-bottom: 0; }

.text-red { color: var(--red); }
.text-white { color: var(--white); }
.text-muted { color: var(--gray-500); }
.text-center { text-align: center; }
.text-sm { font-size: 0.875rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }

.section-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--gold-dark);
  margin-bottom: var(--space-md);
}

.section-label::before {
  content: '';
  width: 32px;
  height: 2px;
  background: var(--gold);
}

.section-label--red {
  color: var(--red);
}

.section-label--red::before {
  background: var(--red);
}

.section-title {
  margin-bottom: var(--space-md);
}

.section-subtitle {
  font-size: 1.1rem;
  color: var(--gray-600);
  max-width: 640px;
  line-height: 1.7;
}

.section-subtitle.centered {
  margin: 0 auto;
}

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

.container-sm { max-width: var(--container-sm); }
.container-lg { max-width: var(--container-lg); }

section {
  padding: var(--space-4xl) 0;
}

.section-alt {
  background: var(--gray-50);
}

.section-dark {
  background: var(--black);
  color: var(--white);
}

.section-dark h2,
.section-dark h3,
.section-dark h4 {
  color: var(--white);
}

.section-dark p {
  color: var(--gray-400);
}

.section-red {
  background: var(--red);
  color: var(--white);
}

.section-red h2,
.section-red h3 {
  color: var(--white);
}

.section-red p {
  color: rgba(255,255,255,0.85);
}

.section-cream {
  background: var(--cream);
}

.section-gold-border {
  border-top: 3px solid var(--gold);
}

/* Gold accent utilities */
.text-gold { color: var(--gold); }
.bg-gold-light { background: var(--gold-light); }
.border-gold { border-color: var(--gold); }

/* Luxury divider */
.divider-gold {
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold), var(--gold-dark));
  margin: var(--space-lg) auto;
  border-radius: 2px;
}

.grid {
  display: grid;
  gap: var(--space-lg);
}

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

.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.gap-xl { gap: var(--space-xl); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: var(--radius);
  transition: all var(--transition);
  white-space: nowrap;
  line-height: 1;
}

.btn-primary {
  background: var(--red);
  color: var(--white);
  box-shadow: var(--shadow-xs);
}

.btn-primary:hover {
  background: var(--red-dark);
  box-shadow: var(--shadow-red);
  transform: translateY(-2px);
  color: var(--white);
}

.btn-dark {
  background: var(--black);
  color: var(--white);
}

.btn-dark:hover {
  background: var(--charcoal);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  color: var(--white);
}

.btn-outline {
  border: 2px solid var(--gray-200);
  color: var(--gray-900);
  background: var(--white);
}

.btn-outline:hover {
  border-color: var(--red);
  color: var(--red);
  transform: translateY(-2px);
}

.btn-outline-white {
  border: 2px solid rgba(255,255,255,0.4);
  color: var(--white);
}

.btn-outline-white:hover {
  border-color: var(--white);
  background: var(--white);
  color: var(--black);
}

.btn-white {
  background: var(--white);
  color: var(--black);
}

.btn-white:hover {
  background: var(--gray-50);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  color: var(--black);
}

.btn-ghost {
  color: var(--gray-700);
  padding: 10px 16px;
}

.btn-ghost:hover {
  color: var(--red);
  background: var(--red-light);
}

.btn-sm {
  padding: 10px 20px;
  font-size: 0.85rem;
}

.btn-lg {
  padding: 18px 36px;
  font-size: 1.05rem;
  border-radius: var(--radius-lg);
}

.btn-pill {
  border-radius: var(--radius-full);
}

.btn-icon {
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: var(--radius-full);
}

.btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* ---------- Header ---------- */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--white);
  transition: all var(--transition);
  height: var(--header-height);
}

.header.scrolled {
  box-shadow: var(--shadow);
  height: 72px;
}

/* Transparent header over hero (homepage) */
.header.header-transparent {
  background: transparent;
}

.header.header-transparent .logo-text {
  color: var(--white);
}

.header.header-transparent .logo-text span {
  color: rgba(255,255,255,0.6);
}

.header.header-transparent .nav-link {
  color: rgba(255,255,255,0.9);
}

.header.header-transparent .nav-link:hover {
  color: var(--white);
}

.header.header-transparent .hotline {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.2);
}

.header.header-transparent .hotline-text strong {
  color: var(--white);
}

.header.header-transparent .hotline-icon svg {
  color: var(--white);
}

.header.header-transparent .hotline-text small {
  color: rgba(255,255,255,0.7);
}

.header.header-transparent .chevron {
  color: rgba(255,255,255,0.7);
}

/* Mobile toggle bars white on transparent header */
.header.header-transparent .mobile-toggle span {
  background: var(--white);
}

/* When scrolled, revert to solid white */
.header.header-transparent.scrolled {
  background: var(--white);
}

.header.header-transparent.scrolled .logo-text {
  color: var(--red);
}

.header.header-transparent.scrolled .logo-text span {
  color: var(--gray-500);
}

.header.header-transparent.scrolled .nav-link {
  color: var(--gray-700);
}

.header.header-transparent.scrolled .nav-link:hover {
  color: var(--red);
}

.header.header-transparent.scrolled .chevron {
  color: var(--gray-700);
}

.header.header-transparent.scrolled .hotline {
  background: var(--red-light);
  border: none;
}

.header.header-transparent.scrolled .hotline-text strong {
  color: var(--red);
}

.header.header-transparent.scrolled .hotline-icon svg {
  color: var(--red);
}

.header.header-transparent.scrolled .hotline-text small {
  color: var(--gray-500);
}

.header.header-transparent.scrolled .mobile-toggle span {
  background: var(--black);
}

.header .container {
  max-width: var(--container-lg);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Logo */
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.logo-icon {
  width: 44px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 10px;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
  overflow: hidden;
  background: var(--red);
  box-shadow: 0 2px 8px rgba(191, 74, 44, 0.3);
}

.logo:hover .logo-icon {
  background: var(--red-dark);
  box-shadow: 0 4px 14px rgba(191, 74, 44, 0.4);
  transform: translateY(-1px);
}

.logo-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.logo-icon svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.header.scrolled .logo-icon {
  width: 38px;
  height: 36px;
  padding: 3px;
}

/* Footer: same red badge works on dark bg */
.footer .logo-icon {
  background: var(--red);
}

.footer .logo:hover .logo-icon {
  background: var(--red-dark);
}

/* Logo text: "Addiction Treatment" on line 1, "Services" on line 2 */
.logo-text {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--red);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.logo-text span {
  display: block;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--gray-500);
  margin-top: 2px;
}


.footer .logo-text {
  color: var(--white);
}

.footer .logo-text span {
  color: rgba(255,255,255,0.5);
}

/* Desktop Nav */
.nav {
  display: flex;
  align-items: center;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 0;
}

.nav-item {
  position: relative;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 16px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--gray-700);
  transition: color var(--transition-fast);
  white-space: nowrap;
}

.nav-link:hover,
.nav-item.active .nav-link {
  color: var(--red);
}

.nav-link .chevron {
  width: 14px;
  height: 14px;
  transition: transform var(--transition-fast);
}

.nav-item:hover .chevron {
  transform: rotate(180deg);
}

/* Dropdown */
.dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border: var(--border);
  padding: var(--space-lg);
  min-width: 240px;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition);
  z-index: 100;
}

.nav-item:hover .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.dropdown-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  color: var(--gray-700);
  transition: all var(--transition-fast);
}

.dropdown-link:hover {
  background: var(--gray-50);
  color: var(--red);
}

.dropdown-link svg {
  width: 18px;
  height: 18px;
  color: var(--gray-400);
  flex-shrink: 0;
}

.dropdown-link:hover svg {
  color: var(--red);
}

/* Mega Dropdown — Premium Luxury Menu
   ========================================================================== */

/* Entrance keyframes */
@keyframes megaSlideIn {
  from {
    opacity: 0;
    transform: translateX(0) translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateX(0) translateY(0);
  }
}

@keyframes megaSlideInCenter {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes megaContentFade {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.mega-dropdown {
  min-width: 740px;
  left: 0;
  transform: translateX(0) translateY(18px);
  padding: 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow:
    0 25px 60px -12px rgba(0, 0, 0, 0.18),
    0 12px 28px -8px rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(0, 0, 0, 0.04),
    0 0 0 0.5px rgba(169, 133, 90, 0.15);
  border: 1px solid rgba(169, 133, 90, 0.12);
}

.nav-item:hover .mega-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(0) translateY(0);
  animation: megaSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Full-width mega variant */
.mega-dropdown.mega-full {
  position: fixed;
  top: calc(var(--header-height) - 4px);
  left: 50%;
  transform: translateX(-50%) translateY(18px);
  min-width: min(1140px, 92vw);
  max-width: 92vw;
}

.header.scrolled .mega-dropdown.mega-full {
  top: 68px;
}

.nav-item:hover .mega-dropdown.mega-full {
  transform: translateX(-50%) translateY(0);
  animation: megaSlideInCenter 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Content stagger animation on open */
.nav-item:hover .mega-dropdown .mega-body {
  animation: megaContentFade 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.06s both;
}

.nav-item:hover .mega-dropdown .mega-footer {
  animation: megaContentFade 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.12s both;
}

/* ---- Mega Header Bar ---- */
.mega-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 32px;
  background: linear-gradient(135deg, var(--cream) 0%, var(--gold-light) 100%);
  border-bottom: 1px solid rgba(169, 133, 90, 0.2);
  position: relative;
}

/* Subtle gold shimmer line at top */
.mega-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 32px;
  right: 32px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.5;
  border-radius: 2px;
}

.mega-header-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  color: var(--black);
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Small gold diamond accent before the title */
.mega-header-title::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--gold);
  transform: rotate(45deg);
  border-radius: 1px;
  flex-shrink: 0;
}

.mega-header-link {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--red);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  background: rgba(191, 74, 44, 0.06);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.mega-header-link:hover {
  color: var(--white);
  background: var(--red);
  transform: translateX(2px);
}

/* ---- Mega Body ---- */
.mega-body {
  padding: 28px 32px 24px;
  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(250,248,245,0.5) 100%);
}

/* ---- Grid Layouts ---- */
.mega-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xl) var(--space-2xl);
}

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

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

.mega-grid-4 + .mega-grid-4 {
  margin-top: var(--space-xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--gray-100);
  position: relative;
}

/* Decorative gold dot at center of grid divider */
.mega-grid-4 + .mega-grid-4::before {
  content: '';
  position: absolute;
  top: -3px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  background: var(--gold);
  border-radius: 50%;
  opacity: 0.5;
}

/* ---- Section Titles ---- */
.mega-section-title {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  color: var(--gold-dark);
  padding: 0 0 10px 0;
  margin-bottom: 6px;
  border-bottom: none;
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Gold underline with fade */
.mega-section-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: linear-gradient(90deg, var(--gold), transparent);
  border-radius: 2px;
}

/* ---- Columns ---- */
.mega-col {
  display: flex;
  flex-direction: column;
}

.mega-col-span-2 {
  grid-column: span 2;
}

/* ---- Premium Search Bar ---- */
.mega-search {
  margin-bottom: 24px;
}

.mega-search form {
  display: flex;
  gap: 0;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow:
    0 2px 12px rgba(0, 0, 0, 0.06),
    0 0 0 1px rgba(169, 133, 90, 0.18);
  overflow: hidden;
  transition: box-shadow 0.3s var(--ease);
}

.mega-search form:focus-within {
  box-shadow:
    0 4px 20px rgba(169, 133, 90, 0.15),
    0 0 0 2px var(--gold),
    0 0 0 4px var(--gold-glow);
}

.mega-search input {
  flex: 1;
  padding: 14px 20px;
  border: none;
  border-radius: 0;
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--black);
  background: transparent;
  transition: all var(--transition);
  outline: none;
  letter-spacing: 0.01em;
}

.mega-search input::placeholder {
  color: var(--gray-400);
  font-weight: 400;
}

.mega-search input:focus {
  border-color: transparent;
}

.mega-search button,
.mega-search .btn {
  padding: 14px 28px;
  font-size: 0.85rem;
  background: linear-gradient(135deg, var(--red) 0%, var(--red-dark) 100%);
  color: var(--white);
  border: none;
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s var(--ease);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-size: 0.78rem;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}

.mega-search button::after,
.mega-search .btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 0%, rgba(255,255,255,0.1) 100%);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}

.mega-search button:hover,
.mega-search .btn:hover {
  background: linear-gradient(135deg, var(--red-dark) 0%, #8f3117 100%);
  transform: none;
  box-shadow: 0 4px 16px rgba(191, 74, 44, 0.3);
}

.mega-search button:hover::after,
.mega-search .btn:hover::after {
  opacity: 1;
}

/* ---- Mega Link Items ---- */
.mega-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 450;
  color: var(--gray-700);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  border-left: 2px solid transparent;
  margin-left: -2px;
}

.mega-link:hover {
  background: linear-gradient(135deg, var(--gold-light) 0%, rgba(245, 239, 227, 0.5) 100%);
  color: var(--black);
  border-left-color: var(--gold);
  padding-left: 14px;
}

.mega-link svg {
  width: 14px;
  height: 14px;
  color: var(--gray-400);
  flex-shrink: 0;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.mega-link:hover svg {
  color: var(--gold-dark);
  transform: scale(1.1);
}

/* ---- State Letter Browser ---- */
.mega-state-letters {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 18px;
}

.mega-state-letters a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--gray-600);
  border: 1px solid var(--gray-200);
  background: var(--white);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.mega-state-letters a:hover,
.mega-state-letters a.active {
  background: linear-gradient(135deg, var(--red) 0%, var(--red-dark) 100%);
  color: var(--white);
  border-color: var(--red);
  box-shadow: 0 3px 12px rgba(191, 74, 44, 0.25);
  transform: translateY(-1px);
}

/* ---- Popular Cities Grid ---- */
.mega-cities {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}

/* ---- Mega Footer — Premium CTA Bar ---- */
.mega-footer {
  padding: 16px 32px;
  background: linear-gradient(135deg, var(--dark) 0%, var(--charcoal) 100%);
  border-top: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}

/* Subtle gold accent line at top of footer */
.mega-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), var(--gold-dark), var(--gold));
  opacity: 0.4;
}

/* Decorative glow in footer background */
.mega-footer::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 120px;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(191, 74, 44, 0.08) 0%, transparent 70%);
  transform: translateY(-50%);
  pointer-events: none;
}

.mega-footer-text {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 400;
  letter-spacing: 0.01em;
}

.mega-footer-cta {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--white);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 22px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--red) 0%, var(--red-dark) 100%);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  z-index: 1;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 10px rgba(191, 74, 44, 0.3);
}

.mega-footer-cta:hover {
  color: var(--white);
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(191, 74, 44, 0.45);
  background: linear-gradient(135deg, #f04038 0%, var(--red) 100%);
}

/* ---- Insurance Mega Dropdown ---- */
.mega-dropdown-insurance {
  min-width: 620px;
}

.insurance-logo-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}

.insurance-logo-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 10px 12px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
}

.insurance-logo-card:hover {
  border-color: var(--gold);
  background: var(--gold-light);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(169, 133, 90, 0.15);
}

.insurance-logo-card img {
  width: 80px;
  height: 40px;
  object-fit: contain;
  filter: grayscale(30%);
  transition: filter 0.3s ease;
}

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

.insurance-logo-card span {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--gray-600);
  text-align: center;
  letter-spacing: 0.02em;
  transition: color 0.3s ease;
}

.insurance-logo-card:hover span {
  color: var(--black);
}

.insurance-view-all {
  display: block;
  text-align: center;
  margin-top: 16px;
  padding: 10px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--red);
  border: 1px dashed var(--gray-300);
  border-radius: var(--radius);
  transition: all 0.3s ease;
}

.insurance-view-all:hover {
  background: var(--red-light);
  border-color: var(--red);
  border-style: solid;
  color: var(--red-dark);
}

/* Hotline */
.hotline {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: var(--red-light);
  border-radius: var(--radius-full);
  transition: all var(--transition);
  margin-left: var(--space-md);
  flex-shrink: 0;
}

.hotline:hover {
  background: var(--red);
  color: var(--white);
}

.hotline:hover .hotline-text small {
  color: rgba(255,255,255,0.8);
}

.hotline:hover .hotline-text strong {
  color: var(--white);
}

.hotline-icon {
  font-size: 1.1rem;
}

.hotline-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.hotline-text small {
  font-size: 0.65rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gray-500);
  transition: color var(--transition-fast);
}

.hotline-text strong {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--red);
  transition: color var(--transition-fast);
}

/* Mobile Toggle */
.mobile-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 32px;
  padding: 4px;
  cursor: pointer;
  z-index: 1001;
}

.mobile-toggle span {
  display: block;
  width: 100%;
  height: 2.5px;
  background: var(--black);
  border-radius: 2px;
  transition: all var(--transition);
}

.mobile-toggle.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.mobile-toggle.active span:nth-child(2) {
  opacity: 0;
}

.mobile-toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: calc(var(--header-height) + 80px) 0 100px;
  background: var(--black);
  color: var(--white);
  overflow: hidden;
  min-height: 85vh;
  display: flex;
  align-items: center;
}

/* Hero background image - breathtaking sunrise */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../images/hero-bg.jpg') center center / cover no-repeat;
  opacity: 0.75;
}

/* Luxury gradient overlay for text readability */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(17,17,17,0.4) 0%, rgba(17,17,17,0.2) 35%, rgba(17,17,17,0.4) 65%, rgba(17,17,17,0.8) 100%),
    radial-gradient(ellipse 60% 50% at 50% 50%, transparent 20%, rgba(17,17,17,0.25) 100%);
}

.hero .container {
  position: relative;
  z-index: 2;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-content {
  max-width: 800px;
  margin: 0 auto;
}

.hero h1 {
  color: var(--white);
  font-size: clamp(2.5rem, 5.5vw, 4rem);
  margin-bottom: var(--space-lg);
  line-height: 1.08;
  font-weight: 800;
}

.hero h1 .highlight {
  color: var(--red);
}

.hero h1 .gold {
  color: var(--gold);
}

.hero-subtitle {
  font-size: 1.2rem;
  color: rgba(255,255,255,0.7);
  margin-bottom: var(--space-2xl);
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.7;
}

.hero-divider {
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold), var(--gold-dark));
  margin: 0 auto var(--space-2xl);
  border-radius: 2px;
}

/* Hero Search */
.hero-search {
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: 8px;
  display: flex;
  align-items: center;
  max-width: 640px;
  margin: 0 auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}

.hero-search .search-input-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  padding: 8px 16px;
}

.hero-search .search-input-group svg {
  width: 20px;
  height: 20px;
  color: var(--gray-400);
  flex-shrink: 0;
}

.hero-search input {
  flex: 1;
  padding: 8px 0;
  font-size: 1rem;
  color: var(--black);
  min-width: 0;
}

.hero-search input::placeholder {
  color: var(--gray-400);
}

.hero-search select {
  padding: 8px 32px 8px 12px;
  border-left: 1px solid var(--gray-200);
  color: var(--gray-600);
  font-size: 0.9rem;
  font-weight: 500;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  cursor: pointer;
}

.hero-search .btn {
  border-radius: var(--radius-lg);
  padding: 14px 28px;
  flex-shrink: 0;
}

/* Hero Quick Links - replacing stats */
.hero-quick-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: var(--space-2xl);
}

.hero-quick-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--radius-full);
  color: rgba(255,255,255,0.8);
  font-size: 0.85rem;
  font-weight: 500;
  transition: all var(--transition);
  backdrop-filter: blur(4px);
  background: rgba(255,255,255,0.05);
}

.hero-quick-link:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(169, 133, 90, 0.1);
}

.hero-quick-link svg {
  width: 14px;
  height: 14px;
}

/* Hero helpline */
.hero-helpline {
  margin-top: var(--space-xl);
  font-size: 0.9rem;
  color: rgba(255,255,255,0.5);
}

.hero-helpline a {
  color: var(--white);
  font-weight: 700;
  border-bottom: 1px solid var(--gold);
}

.hero-helpline a:hover {
  color: var(--gold);
}

/* Legacy stats - hidden */
.hero-stats {
  display: none;
}

/* Page Hero (interior pages) */
.page-hero {
  position: relative;
  padding: calc(var(--header-height) + 48px) 0 48px;
  background: var(--black);
  color: var(--white);
}

.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 80% 30%, rgba(191, 74, 44, 0.12) 0%, transparent 60%);
}

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

.page-hero h1 {
  color: var(--white);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  margin-bottom: var(--space-sm);
}

.page-hero p {
  color: rgba(255,255,255,0.6);
  font-size: 1.05rem;
}

/* ---------- Breadcrumbs ---------- */
.breadcrumbs {
  background: var(--gray-50);
  padding: 14px 0;
  border-bottom: var(--border);
}

.breadcrumb-list {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 0.85rem;
}

.breadcrumb-list a {
  color: var(--gray-500);
  transition: color var(--transition-fast);
}

.breadcrumb-list a:hover {
  color: var(--red);
}

.breadcrumb-sep {
  color: var(--gray-300);
  font-size: 0.75rem;
}

.breadcrumb-current {
  color: var(--gray-900);
  font-weight: 500;
}

/* ---------- Cards ---------- */
.card {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: var(--border);
  overflow: hidden;
  transition: all var(--transition);
}

.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
  border-color: var(--gray-300);
}

.card-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  background: var(--gray-100);
}

.card-body {
  padding: var(--space-lg);
}

.card-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--red);
  margin-bottom: var(--space-sm);
}

.card-title {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: var(--space-sm);
  line-height: 1.3;
}

.card-title a:hover { color: var(--red); }

.card-text {
  font-size: 0.9rem;
  color: var(--gray-600);
  line-height: 1.6;
  margin-bottom: var(--space-md);
}

.card-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.8rem;
  color: var(--gray-500);
}

.card-meta svg {
  width: 14px;
  height: 14px;
}

/* Listing Card (treatment center) */
.listing-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: var(--border);
  overflow: hidden;
  transition: all var(--transition);
}

.listing-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
  border-color: var(--gray-300);
}

.listing-card-img {
  position: relative;
  height: 180px;
  background: var(--gray-100);
  overflow: hidden;
}

.listing-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.listing-card-badges {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.listing-card-body {
  padding: var(--space-lg);
}

.listing-card-name {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 6px;
  line-height: 1.3;
}

.listing-card-name a:hover { color: var(--red); }

.listing-card-location {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--gray-500);
  margin-bottom: var(--space-md);
}

.listing-card-location svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.listing-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--space-md);
}

.listing-card-footer {
  display: flex;
  gap: 8px;
  padding-top: var(--space-md);
  border-top: var(--border);
}

.listing-card-footer .btn {
  flex: 1;
  padding: 10px;
  font-size: 0.85rem;
}

/* Feature Card */
.feature-card {
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  border: var(--border);
  text-align: center;
  transition: all var(--transition);
  background: var(--white);
}

.feature-card:hover {
  border-color: var(--red);
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

.feature-card-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  background: var(--red-light);
  color: var(--red);
}

.feature-card-icon svg {
  width: 28px;
  height: 28px;
}

.feature-card h4 {
  margin-bottom: var(--space-sm);
}

.feature-card p {
  font-size: 0.9rem;
}

/* State Card */
.state-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--gray-700);
  transition: all var(--transition-fast);
}

.state-link:hover {
  background: var(--red-light);
  color: var(--red);
}

.state-link svg {
  width: 14px;
  height: 14px;
  color: var(--gray-400);
  flex-shrink: 0;
}

.state-link:hover svg {
  color: var(--red);
}

/* Stat Card */
.stat-card {
  text-align: center;
  padding: var(--space-xl);
}

.stat-number {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--red);
  line-height: 1;
  margin-bottom: var(--space-sm);
}

.stat-label {
  font-size: 0.85rem;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Insurance Card */
.insurance-card {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl);
  background: var(--white);
  border: var(--border);
  border-radius: var(--radius-lg);
  transition: all var(--transition);
  min-height: 100px;
}

.insurance-card:hover {
  box-shadow: var(--shadow);
  border-color: var(--red);
  transform: translateY(-2px);
}

.insurance-card img {
  max-height: 40px;
  max-width: 140px;
  object-fit: contain;
}

/* ---------- Badges ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.badge-red {
  background: var(--red-light);
  color: var(--red);
}

.badge-dark {
  background: var(--charcoal);
  color: var(--white);
}

.badge-outline {
  border: 1px solid var(--gray-200);
  color: var(--gray-600);
}

.badge-success {
  background: #DCFCE7;
  color: #166534;
}

.badge-info {
  background: #DBEAFE;
  color: #1E40AF;
}

/* Tag */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  font-size: 0.8rem;
  font-weight: 500;
  background: var(--gray-100);
  color: var(--gray-700);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.tag:hover {
  background: var(--red-light);
  color: var(--red);
}

/* ---------- Accordion / FAQ ---------- */
.accordion {
  max-width: 800px;
}

.accordion-item {
  border-bottom: var(--border);
}

.accordion-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 20px 0;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--black);
  text-align: left;
  cursor: pointer;
  transition: color var(--transition-fast);
}

.accordion-trigger:hover {
  color: var(--red);
}

.accordion-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  transition: transform var(--transition);
  color: var(--gray-400);
}

.accordion-item.active .accordion-icon {
  transform: rotate(45deg);
  color: var(--red);
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-slow);
}

.accordion-item.active .accordion-content {
  max-height: 500px;
}

.accordion-body {
  padding-bottom: 20px;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--gray-600);
}

/* ---------- Tabs ---------- */
.tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--gray-200);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.tabs::-webkit-scrollbar { display: none; }

.tab-btn {
  padding: 14px 24px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--gray-500);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  white-space: nowrap;
  transition: all var(--transition-fast);
  cursor: pointer;
}

.tab-btn:hover {
  color: var(--gray-900);
}

.tab-btn.active {
  color: var(--red);
  border-bottom-color: var(--red);
}

.tab-panel {
  display: none;
  padding: var(--space-xl) 0;
  animation: fadeIn 0.3s ease;
}

.tab-panel.active {
  display: block;
}

/* Sticky Tabs */
.tabs-sticky {
  position: sticky;
  top: var(--header-height);
  background: var(--white);
  z-index: 50;
  padding: 0 var(--space-lg);
  box-shadow: var(--shadow-xs);
}

/* ---------- Forms ---------- */
.form-group {
  margin-bottom: var(--space-lg);
}

.form-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gray-700);
  margin-bottom: 6px;
}

.form-input,
.form-select,
.form-textarea {
  display: block;
  width: 100%;
  padding: 12px 16px;
  font-size: 0.95rem;
  color: var(--gray-900);
  background: var(--white);
  border: 2px solid var(--gray-200);
  border-radius: var(--radius);
  transition: all var(--transition-fast);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 3px var(--red-glow);
}

.form-input::placeholder {
  color: var(--gray-400);
}

.form-textarea {
  min-height: 140px;
  resize: vertical;
}

/* AJAX submit feedback — the confirmation / error line the form bridge shows. */
.form-status {
  margin: var(--space-lg) 0 0;
  padding: 14px 18px;
  border-radius: var(--radius);
  font-size: 0.92rem;
  line-height: 1.5;
}

.form-status.is-success {
  background: #ecfdf3;
  border: 1px solid #abefc6;
  color: #067647;
}

.form-status.is-error {
  background: #fef3f2;
  border: 1px solid #fecdca;
  color: #b42318;
}

.form-status p:last-child { margin-bottom: 0; }

/* Submit button while a request is in flight. */
button.is-loading,
.btn.is-loading {
  opacity: 0.7;
  cursor: progress;
}

.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
  cursor: pointer;
}

.form-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--gray-600);
  cursor: pointer;
}

.form-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--red);
  cursor: pointer;
}

/* Search Box */
.search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--white);
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-full);
  transition: all var(--transition-fast);
}

.search-box:focus-within {
  border-color: var(--red);
  box-shadow: 0 0 0 3px var(--red-glow);
}

.search-box svg {
  width: 18px;
  height: 18px;
  color: var(--gray-400);
  flex-shrink: 0;
}

.search-box input {
  flex: 1;
  padding: 4px 0;
  color: var(--gray-900);
}

.search-box input::placeholder {
  color: var(--gray-400);
}

/* Filter Sidebar */
.filter-sidebar {
  background: var(--white);
  border: var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  position: sticky;
  top: calc(var(--header-height) + 24px);
}

.filter-group {
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom: var(--border);
}

.filter-group:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.filter-group-title {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--gray-500);
  margin-bottom: var(--space-md);
}

/* ---------- Pagination ---------- */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: var(--space-2xl);
}

.page-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--gray-600);
  transition: all var(--transition-fast);
}

.page-btn:hover {
  background: var(--gray-100);
  color: var(--black);
}

.page-btn.active {
  background: var(--red);
  color: var(--white);
}

.page-btn.disabled {
  color: var(--gray-300);
  pointer-events: none;
}

.page-btn svg {
  width: 16px;
  height: 16px;
}

/* ---------- Footer ---------- */
.footer {
  background: var(--black);
  color: var(--white);
}

.footer-main {
  padding: var(--space-4xl) 0 var(--space-2xl);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
  gap: var(--space-2xl);
}

.footer-brand p {
  font-size: 0.9rem;
  color: var(--gray-500);
  margin-top: var(--space-md);
  line-height: 1.7;
}

.footer-social {
  display: flex;
  gap: 12px;
  margin-top: var(--space-lg);
}

.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--charcoal);
  color: var(--gray-400);
  transition: all var(--transition);
}

.footer-social a:hover {
  background: var(--red);
  color: var(--white);
  transform: translateY(-2px);
}

.footer-social svg {
  width: 18px;
  height: 18px;
}

.footer-heading {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--gray-400);
  margin-bottom: var(--space-lg);
}

.footer-links-list li {
  margin-bottom: 10px;
}

.footer-links-list a {
  font-size: 0.9rem;
  color: var(--gray-400);
  transition: all var(--transition-fast);
}

.footer-links-list a:hover {
  color: var(--white);
  padding-left: 4px;
}

.footer-phone {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--red);
  border-radius: var(--radius);
  color: var(--white);
  font-weight: 700;
  margin-bottom: var(--space-md);
  transition: all var(--transition);
}

.footer-phone:hover {
  background: var(--red-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-red);
  color: var(--white);
}

.footer-phone svg {
  width: 18px;
  height: 18px;
}

.footer-newsletter {
  margin-top: var(--space-lg);
}

.footer-newsletter form {
  display: flex;
  gap: 8px;
  margin-top: var(--space-sm);
}

.footer-newsletter input {
  flex: 1;
  padding: 10px 14px;
  background: var(--charcoal);
  border: 1px solid var(--gray-700);
  border-radius: var(--radius-sm);
  color: var(--white);
  font-size: 0.9rem;
}

.footer-newsletter input::placeholder {
  color: var(--gray-500);
}

.footer-newsletter input:focus {
  border-color: var(--red);
}

.footer-newsletter button {
  padding: 10px 18px;
  background: var(--red);
  color: var(--white);
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.85rem;
  transition: all var(--transition);
}

.footer-newsletter button:hover {
  background: var(--red-dark);
}

.footer-partners {
  border-top: 1px solid var(--charcoal);
  border-bottom: 1px solid var(--charcoal);
  padding: var(--space-xl) 0;
}

.footer-partners .container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xl);
  flex-wrap: wrap;
}

.footer-partners img {
  height: 36px;
  opacity: 0.4;
  transition: opacity var(--transition);
  filter: grayscale(1) brightness(2);
}

.footer-partners img:hover {
  opacity: 0.8;
}

.footer-bottom {
  padding: var(--space-lg) 0;
}

.footer-bottom .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.footer-bottom p {
  font-size: 0.8rem;
  color: var(--gray-600);
}

.footer-bottom nav {
  display: flex;
  gap: var(--space-lg);
}

.footer-bottom nav a {
  font-size: 0.8rem;
  color: var(--gray-600);
  transition: color var(--transition-fast);
}

.footer-bottom nav a:hover {
  color: var(--white);
}

/* ---------- Floating CTA ---------- */
/* The pill + the "?" disclosure button travel together, fixed to the corner. */
.floating-cta-group {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 900;
  display: flex;
  align-items: center;
  gap: 10px;
  /* Promote to its own compositor layer so it stays rock-steady over the
     animated hero and while scrolling. Without this the fixed pill repainted
     against moving content beneath it and visibly flickered. */
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.floating-cta {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  background: var(--red);
  color: var(--white);
  border-radius: var(--radius-full);
  /* Static shadow. An animated box-shadow (the old pulseGlow) repaints the
     fixed layer every frame and reads as flashing on macOS — removed. */
  box-shadow: 0 6px 22px rgba(191, 74, 44, 0.32);
  font-weight: 700;
  font-size: 0.9rem;
  /* Transition only compositor-friendly properties, never `all` (which would
     also animate layout/shadow and jank). */
  transition: transform var(--transition), box-shadow var(--transition);
}

/* Round "?" button — the compliance disclosure trigger, mirroring the old site. */
.cta-help {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--gray-900);
  color: var(--white);
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
}

.cta-help svg { width: 20px; height: 20px; }
.cta-help:hover { background: #000; transform: scale(1.06); }
.cta-help:focus-visible { outline: 3px solid var(--red-light); outline-offset: 2px; }

/* Disclosure modal */
.cta-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.cta-modal[hidden] { display: none; }

.cta-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 15, 20, 0.55);
  backdrop-filter: blur(2px);
}

.cta-modal-card {
  position: relative;
  z-index: 1;
  max-width: 560px;
  width: 100%;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl, 0 24px 60px rgba(0,0,0,0.3));
  padding: 32px 32px 34px;
  animation: ctaModalIn 0.22s ease;
}

@keyframes ctaModalIn {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

.cta-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: var(--gray-100);
  color: var(--gray-700);
  cursor: pointer;
  transition: background var(--transition);
}
.cta-modal-close:hover { background: var(--gray-200); }
.cta-modal-close svg { width: 18px; height: 18px; }

.cta-modal-title {
  color: var(--red);
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 12px;
  padding-right: 28px;
}

.cta-modal-body {
  margin: 0;
  color: var(--gray-700);
  font-size: 0.98rem;
  line-height: 1.65;
}

@media (max-width: 768px) {
  .cta-modal { align-items: flex-start; padding-top: 80px; }
  .cta-modal-title { font-size: 1.3rem; }
}

.floating-cta:hover {
  background: var(--red-dark);
  box-shadow: var(--shadow-red);
  transform: scale(1.05);
  color: var(--white);
}

.floating-cta svg {
  width: 20px;
  height: 20px;
  transform-origin: center;
  /* Ring briefly, then rest — a calm 7s cycle rather than a constant shake. */
  animation: phoneRing 7s ease-in-out infinite;
}

@keyframes phoneRing {
  0%   { transform: rotate(0deg); }
  3%   { transform: rotate(12deg); }
  6%   { transform: rotate(-9deg); }
  9%   { transform: rotate(7deg); }
  12%  { transform: rotate(-5deg); }
  15%  { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}

/* Respect reduced-motion: hold everything still. */
@media (prefers-reduced-motion: reduce) {
  .floating-cta svg { animation: none; }
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 4px 20px rgba(191, 74, 44, 0.3); }
  50% { box-shadow: 0 4px 30px rgba(191, 74, 44, 0.5); }
}

/* ---------- Back to Top ---------- */
.back-to-top {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 900;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  border: var(--border);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow);
  color: var(--gray-600);
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition);
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
}

.back-to-top:hover {
  background: var(--black);
  color: var(--white);
  border-color: var(--black);
  transform: translateY(-3px);
}

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

/* ---------- How It Works ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2xl);
  counter-reset: step;
}

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

.step::before {
  counter-increment: step;
  content: counter(step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto var(--space-lg);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--white);
  background: var(--red);
  border-radius: var(--radius-full);
}

.step h4 {
  margin-bottom: var(--space-sm);
}

.step p {
  font-size: 0.9rem;
}

.step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 28px;
  left: calc(50% + 40px);
  width: calc(100% - 80px);
  height: 2px;
  background: var(--gray-200);
}

/* ---------- Quote Section ---------- */
.quote-section {
  padding: var(--space-4xl) 0;
  text-align: center;
  background: var(--gray-50);
}

.quote-text {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 500;
  font-style: italic;
  line-height: 1.5;
  color: var(--gray-700);
  max-width: 800px;
  margin: 0 auto var(--space-lg);
}

.quote-author {
  font-size: 1rem;
  font-weight: 600;
  color: var(--red);
}

/* ---------- As Seen On ---------- */
.media-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xl);
  flex-wrap: wrap;
}

.media-logos img {
  height: 32px;
  opacity: 0.3;
  filter: grayscale(1);
  transition: all var(--transition);
}

.media-logos img:hover {
  opacity: 0.7;
  filter: grayscale(0);
}

/* ---------- CTA Banner ---------- */
.cta-banner {
  padding: var(--space-3xl) 0;
  text-align: center;
}

.cta-banner h2 {
  margin-bottom: var(--space-md);
}

.cta-banner p {
  max-width: 600px;
  margin: 0 auto var(--space-xl);
}

.cta-banner .btn-group {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  flex-wrap: wrap;
}

/* CTA Split */
.cta-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 450px;
}

.cta-split-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-3xl);
}

.cta-split-image {
  position: relative;
  overflow: hidden;
  background: var(--gray-100);
}

.cta-split-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Newsletter Section ---------- */
.newsletter-form {
  display: flex;
  gap: 10px;
  max-width: 480px;
}

.newsletter-form input {
  flex: 1;
  padding: 14px 20px;
  border: 2px solid var(--gray-200);
  border-radius: var(--radius);
  font-size: 0.95rem;
}

.newsletter-form input:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 3px var(--red-glow);
}

.newsletter-form .btn {
  flex-shrink: 0;
}

/* ---------- Listing Detail Page ---------- */
.listing-hero {
  padding: calc(var(--header-height) + 32px) 0 32px;
  background: var(--black);
}

.listing-hero .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: center;
}

.listing-hero-info h1 {
  color: var(--white);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  margin-bottom: var(--space-md);
}

.listing-hero-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: var(--space-lg);
}

.listing-hero-meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  color: rgba(255,255,255,0.7);
}

.listing-hero-meta-item svg {
  width: 16px;
  height: 16px;
  color: var(--red);
  flex-shrink: 0;
}

.listing-hero-actions {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.listing-hero-image {
  border-radius: var(--radius-lg);
  overflow: hidden;
  max-height: 350px;
}

.listing-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Gallery */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}

.gallery-item {
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4/3;
  cursor: pointer;
  transition: all var(--transition);
}

.gallery-item:hover {
  transform: scale(1.02);
  box-shadow: var(--shadow-md);
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-item:first-child {
  grid-column: span 2;
  grid-row: span 2;
}

/* ---------- Map ---------- */
.map-placeholder {
  background: var(--gray-100);
  border-radius: var(--radius-lg);
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--space-md);
  color: var(--gray-500);
  border: var(--border);
}

.map-placeholder svg {
  width: 48px;
  height: 48px;
  color: var(--gray-300);
}

/* ---------- Sidebar ---------- */
.content-with-sidebar {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--space-xl);
  align-items: start;
}

.content-with-sidebar-right {
  grid-template-columns: 1fr 300px;
}

/* ---------- A-Z City Listing ---------- */
.alpha-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: var(--space-xl);
}

.alpha-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gray-600);
  border: var(--border);
  transition: all var(--transition-fast);
}

.alpha-btn:hover,
.alpha-btn.active {
  background: var(--red);
  color: var(--white);
  border-color: var(--red);
}

.alpha-btn.disabled {
  color: var(--gray-300);
  pointer-events: none;
}

.city-list {
  columns: 4;
  column-gap: var(--space-xl);
}

.city-list a {
  display: block;
  padding: 6px 0;
  font-size: 0.9rem;
  color: var(--gray-600);
  border-bottom: 1px solid var(--gray-100);
  transition: all var(--transition-fast);
}

.city-list a:hover {
  color: var(--red);
  padding-left: 8px;
}

/* ---------- Blog ---------- */
.blog-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: var(--border);
  overflow: hidden;
  transition: all var(--transition);
}

.blog-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
  border-color: var(--gray-300);
}

.blog-card-img {
  height: 220px;
  overflow: hidden;
}

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

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

.blog-card-body {
  padding: var(--space-lg);
}

.blog-card-date {
  font-size: 0.8rem;
  color: var(--gray-500);
  margin-bottom: var(--space-sm);
}

.blog-card-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: var(--space-sm);
  line-height: 1.4;
}

.blog-card-title a:hover { color: var(--red); }

.blog-card-excerpt {
  font-size: 0.9rem;
  color: var(--gray-600);
  line-height: 1.6;
  margin-bottom: var(--space-md);
}

.blog-card-read-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--red);
}

.blog-card-read-more svg {
  width: 14px;
  height: 14px;
  transition: transform var(--transition-fast);
}

.blog-card-read-more:hover svg {
  transform: translateX(4px);
}

/* Article */
.article-content {
  max-width: 720px;
  margin: 0 auto;
  font-size: 1.05rem;
  line-height: 1.8;
}

.article-content h2 {
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-md);
}

.article-content h3 {
  margin-top: var(--space-xl);
  margin-bottom: var(--space-md);
}

.article-content p {
  margin-bottom: var(--space-md);
  color: var(--gray-700);
}

.article-content ul,
.article-content ol {
  margin-bottom: var(--space-md);
  padding-left: var(--space-lg);
}

.article-content li {
  margin-bottom: var(--space-sm);
  list-style: disc;
  color: var(--gray-700);
}

.article-content ol li {
  list-style: decimal;
}

.article-content blockquote {
  border-left: 4px solid var(--red);
  padding: var(--space-md) var(--space-lg);
  margin: var(--space-xl) 0;
  background: var(--gray-50);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-style: italic;
  color: var(--gray-700);
}

.article-meta {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  padding-bottom: var(--space-xl);
  margin-bottom: var(--space-xl);
  border-bottom: var(--border);
  font-size: 0.9rem;
  color: var(--gray-500);
}

.article-meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.article-meta-item svg {
  width: 16px;
  height: 16px;
}

/* Share */
.share-bar {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-lg) 0;
  border-top: var(--border);
  margin-top: var(--space-xl);
}

.share-bar span {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gray-500);
}

.share-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--gray-100);
  color: var(--gray-600);
  transition: all var(--transition);
}

.share-btn:hover {
  background: var(--red);
  color: var(--white);
  transform: translateY(-2px);
}

.share-btn svg {
  width: 16px;
  height: 16px;
}

/* ---------- Contact ---------- */
.contact-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  margin-bottom: var(--space-2xl);
}

.contact-card {
  padding: var(--space-xl);
  background: var(--white);
  border: var(--border);
  border-radius: var(--radius-lg);
  text-align: center;
  transition: all var(--transition);
}

.contact-card:hover {
  border-color: var(--red);
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}

.contact-card-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--space-md);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--red-light);
  color: var(--red);
}

.contact-card-icon svg {
  width: 24px;
  height: 24px;
}

.contact-card h4 {
  margin-bottom: var(--space-xs);
}

.contact-card p {
  font-size: 0.9rem;
}

.contact-card a {
  color: var(--red);
  font-weight: 600;
}

/* ---------- Resource Grid ---------- */
.resource-category {
  margin-bottom: var(--space-3xl);
}

.resource-category-title {
  font-size: 1.5rem;
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 2px solid var(--gray-200);
}

.resource-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--radius);
  border: var(--border);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--gray-700);
  transition: all var(--transition);
}

.resource-link:hover {
  border-color: var(--red);
  background: var(--red-light);
  color: var(--red);
  transform: translateY(-2px);
}

.resource-link svg {
  width: 18px;
  height: 18px;
  color: var(--gray-400);
  flex-shrink: 0;
}

.resource-link:hover svg {
  color: var(--red);
}

/* ---------- Staff Cards ---------- */
.staff-card {
  text-align: center;
  padding: var(--space-lg);
}

.staff-card-avatar {
  width: 100px;
  height: 100px;
  border-radius: var(--radius-full);
  margin: 0 auto var(--space-md);
  overflow: hidden;
  background: var(--gray-100);
}

.staff-card-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.staff-card h4 {
  font-size: 1rem;
  margin-bottom: 4px;
}

.staff-card p {
  font-size: 0.85rem;
  color: var(--gray-500);
}

/* ---------- Accreditation ---------- */
.accreditation-list {
  display: flex;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

.accreditation-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  background: var(--white);
  border: var(--border);
  border-radius: var(--radius);
  min-width: 120px;
  min-height: 80px;
}

.accreditation-item img {
  max-height: 50px;
  max-width: 100px;
  object-fit: contain;
}

/* ---------- Helpline Notice ---------- */
.helpline-bar {
  background: var(--red-light);
  padding: 12px 0;
  text-align: center;
  font-size: 0.9rem;
}

.helpline-bar a {
  color: var(--red);
  font-weight: 700;
}

.helpline-bar a:hover {
  text-decoration: underline;
}

/* ---------- Nearby Centers ---------- */
.nearby-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

/* ---------- Animations ---------- */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: all 0.6s var(--ease);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* ---------- Utilities ---------- */
.mt-xs { margin-top: var(--space-xs); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mt-2xl { margin-top: var(--space-2xl); }
.mt-3xl { margin-top: var(--space-3xl); }

.mb-xs { margin-bottom: var(--space-xs); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }
.mb-2xl { margin-bottom: var(--space-2xl); }
.mb-3xl { margin-bottom: var(--space-3xl); }

.pt-0 { padding-top: 0; }
.pb-0 { padding-bottom: 0; }
.p-lg { padding: var(--space-lg); }
.p-xl { padding: var(--space-xl); }

.hidden { display: none; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- Category Filter Pills ---------- */
.filter-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: var(--space-xl);
}

.filter-pill {
  padding: 8px 18px;
  border-radius: var(--radius-full);
  font-size: 0.85rem;
  font-weight: 500;
  border: var(--border);
  color: var(--gray-600);
  transition: all var(--transition-fast);
  cursor: pointer;
}

.filter-pill:hover {
  color: var(--red);
  border-color: rgba(191,74,44,.45);
  background: rgba(191,74,44,.06);
}

.filter-pill.active {
  background: var(--red);
  color: var(--white);
  border-color: var(--red);
}

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
  .nav-link {
    padding: 10px 10px;
    font-size: 0.85rem;
  }

  .hotline {
    display: none;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
  }
}

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

  .cta-split {
    grid-template-columns: 1fr;
  }

  .cta-split-image {
    min-height: 300px;
  }

  .listing-hero .container {
    grid-template-columns: 1fr;
  }

  .content-with-sidebar,
  .content-with-sidebar-right {
    grid-template-columns: 1fr;
  }

  .filter-sidebar {
    position: static;
  }

  .city-list {
    columns: 3;
  }

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

  .steps {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .step:not(:last-child)::after {
    display: none;
  }

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

@media (max-width: 768px) {
  :root {
    --space-4xl: 64px;
  }

  .nav {
    display: none;
  }

  .mobile-toggle {
    display: flex;
  }

  /* Mobile Nav Overlay */
  .nav.mobile-open {
    display: flex;
    position: fixed;
    inset: 0;
    background: var(--white);
    z-index: 999;
    flex-direction: column;
    padding: calc(var(--header-height) + 16px) var(--space-lg) var(--space-lg);
    overflow-y: auto;
  }

  .nav.mobile-open .nav-menu {
    flex-direction: column;
    width: 100%;
    gap: 0;
  }

  .nav.mobile-open .nav-link {
    padding: 14px 0;
    font-size: 1.1rem;
    border-bottom: var(--border);
    width: 100%;
  }

  .nav.mobile-open .dropdown {
    display: none;
  }

  .hotline {
    display: none;
  }

  .mobile-hotline {
    display: flex;
  }

  .grid-2,
  .grid-3 {
    grid-template-columns: 1fr;
  }

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

  .hero {
    min-height: auto;
    padding: calc(var(--header-height) + 48px) 0 48px;
  }

  .hero h1 {
    font-size: 2rem;
  }

  .hero-search {
    flex-direction: column;
    padding: 12px;
  }

  .hero-search .search-input-group {
    width: 100%;
  }

  .hero-search select {
    width: 100%;
    border-left: none;
    border-top: 1px solid var(--gray-200);
    padding: 12px;
  }

  .hero-search .btn {
    width: 100%;
  }

  .hero-stats {
    gap: var(--space-xl);
  }

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

  .contact-cards {
    grid-template-columns: 1fr;
  }

  .city-list {
    columns: 2;
  }

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

  .gallery-item:first-child {
    grid-column: span 2;
  }

  .mega-dropdown {
    min-width: 100%;
    left: 0;
    transform: translateY(8px);
  }

  .mega-dropdown.mega-full {
    position: absolute;
    left: 0;
    transform: translateY(8px);
    min-width: 100%;
    max-width: 100%;
  }

  .nav-item:hover .mega-dropdown.mega-full {
    transform: translateY(0);
  }

  .mega-grid-3 {
    grid-template-columns: 1fr 1fr;
  }

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

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

  .mega-dropdown-insurance {
    min-width: 100%;
  }

  .alpha-nav {
    gap: 2px;
  }

  .alpha-btn {
    width: 30px;
    height: 30px;
    font-size: 0.75rem;
  }

  .floating-cta-group {
    bottom: 16px;
    right: 16px;
  }

  .floating-cta {
    padding: 12px 16px;
    font-size: 0.85rem;
  }

  .floating-cta .cta-text {
    display: none;
  }

  .back-to-top {
    left: 16px;
    bottom: 16px;
  }

  .newsletter-form {
    flex-direction: column;
    max-width: 100%;
  }

  .footer-bottom .container {
    flex-direction: column;
    text-align: center;
  }

  .listing-hero-actions {
    flex-direction: column;
  }

  .listing-hero-actions .btn {
    width: 100%;
  }

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

  .tabs-sticky {
    padding: 0 var(--space-md);
  }
}

@media (max-width: 480px) {
  .hero-stats {
    flex-direction: column;
    gap: var(--space-md);
  }

  .grid-5,
  .grid-6 {
    grid-template-columns: 1fr;
  }

  .city-list {
    columns: 1;
  }

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

  .gallery-item:first-child {
    grid-column: span 1;
    grid-row: span 1;
  }
}

/* ---------- Print ---------- */
@media print {
  .header,
  .footer,
  .floating-cta-group,
  .cta-modal,
  .back-to-top,
  .mobile-toggle {
    display: none !important;
  }

  body {
    color: #000;
    background: #fff;
  }

  section {
    padding: 20px 0;
  }
}

/* ===== BEGIN MERGED PAGE CSS — generated by merge-css.py, do not edit ===== */

/* ---------- partials/css/404.css ---------- */
/* ==========================================================================
   404 / Page Not Found
   Used by: 404.html
   ========================================================================== */

.error-hero {
  min-height: calc(100vh - var(--header-height));
  display: flex;
  align-items: center;
  padding: calc(var(--header-height) + var(--space-3xl)) 0 var(--space-3xl);
  text-align: center;
}

.error-hero::before {
  background:
    radial-gradient(ellipse at 50% 0%, var(--red-glow) 0%, transparent 60%),
    radial-gradient(ellipse at 15% 90%, rgba(169, 133, 90, 0.10) 0%, transparent 55%);
}

.error-hero-inner {
  max-width: 760px;
  margin: 0 auto;
}

.error-code {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(5rem, 18vw, 10rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
  margin-bottom: var(--space-lg);
  background: linear-gradient(135deg, var(--red) 0%, var(--gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.error-hero .error-lede {
  color: rgba(255, 255, 255, 0.72);
  font-size: 1.05rem;
  max-width: 620px;
  margin: 0 auto var(--space-md);
}

.error-search {
  margin: var(--space-2xl) auto var(--space-xl);
}

.error-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  justify-content: center;
}

/* Card headings sit at h3 for correct document outline — keep the visual
   weight of the h4 the shared card components were designed around. */
.feature-card h3,
.contact-card h3 {
  font-size: 1.25rem;
  margin-bottom: var(--space-sm);
}

/* Split teaser panel */
.error-teaser {
  border: var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--white);
}

@media (max-width: 768px) {
  .error-hero {
    min-height: 0;
  }

  .error-search {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-sm);
  }

  .error-search .btn {
    width: 100%;
  }
}

/* ---------- partials/css/accreditations.css ---------- */
/* ==========================================================================
   accreditations.html — Accreditation, licensing & verification index
   Only what styles.css does not already provide.
   ========================================================================== */

/* ---------- Accrediting-body card ---------- */
.accred-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-xl);
  background: var(--white);
  border: var(--border);
  border-top: 3px solid var(--gold);
  border-radius: var(--radius-lg);
  transition: box-shadow var(--transition), transform var(--transition);
}

.accred-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.accred-card--required {
  border-top-color: var(--red);
}

.accred-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.accred-card h3 {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.3;
}

.accred-card-sub {
  margin: 0 0 var(--space-md);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--gray-500);
}

.accred-card > p {
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--gray-600);
}

/* ---------- Count chip ---------- */
.accred-count {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  background: var(--gold-light);
  color: var(--gold-dark);
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---------- Fact rows inside a card ---------- */
.accred-facts {
  margin: 0 0 var(--space-lg);
  padding: var(--space-md) 0 0;
  border-top: var(--border);
  font-size: 0.87rem;
  line-height: 1.6;
}

.accred-facts div {
  display: flex;
  gap: var(--space-sm);
  padding: 6px 0;
}

.accred-facts dt {
  flex: 0 0 8.5rem;
  font-weight: 700;
  color: var(--gray-800);
}

.accred-facts dd {
  margin: 0;
  color: var(--gray-600);
}

/* ---------- Card footer links ---------- */
.accred-card-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  margin-top: auto;
  padding-top: var(--space-md);
  border-top: var(--border);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.accred-card-foot a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--red);
}

.accred-card-foot a:hover {
  color: var(--red-dark);
}

.accred-card-foot svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

/* ---------- Red-flag checklist ---------- */
.redflag-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.redflag-list li {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  border-bottom: var(--border);
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--gray-700);
}

.redflag-list li:last-child {
  border-bottom: 0;
}

.redflag-list svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--red);
}

.redflag-list strong {
  color: var(--black);
}

/* ---------- Licensure vs accreditation split ---------- */
.lic-split {
  padding: var(--space-xl);
  background: var(--white);
  border: var(--border);
  border-radius: var(--radius-lg);
  height: 100%;
}

.lic-split h3 {
  font-size: 1.2rem;
  margin-bottom: var(--space-xs);
}

.lic-split .lic-split-kicker {
  margin-bottom: var(--space-md);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--red);
}

.lic-split ul {
  margin: 0;
  padding-left: 1.15rem;
  font-size: 0.92rem;
  line-height: 1.75;
  color: var(--gray-600);
}

.lic-split li + li {
  margin-top: var(--space-sm);
}

@media (max-width: 640px) {
  .accred-facts div {
    flex-direction: column;
    gap: 0;
  }

  .accred-facts dt {
    flex: none;
  }
}

/* ---------- partials/css/amenities.css ---------- */
/* ==========================================================================
   amenities.html — Rehab amenities & facility settings index
   Only what styles.css does not already provide.
   ========================================================================== */

/* ---------- Live listing-count chip inside a term card ---------- */
.amenity-count {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-bottom: var(--space-sm);
  padding: 3px 10px;
  border-radius: var(--radius-full);
  background: var(--gray-100);
  color: var(--gray-600);
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.amenity-count svg {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
}

.term-card:hover .amenity-count {
  background: var(--red-light);
  color: var(--red);
}

/* ---------- Amenity group heading ---------- */
.amenity-group {
  margin-bottom: var(--space-3xl);
}

.amenity-group:last-child {
  margin-bottom: 0;
}

.amenity-group-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-lg);
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 2px solid var(--gray-200);
}

.amenity-group-head h3 {
  margin: 0;
  font-size: 1.35rem;
}

.amenity-group-head p {
  margin: 0;
  max-width: 52ch;
  font-size: 0.85rem;
  color: var(--gray-500);
}

/* ---------- Outcome-predictor cards (whole card is a link) ---------- */
a.feature-card {
  display: block;
  color: inherit;
}

a.feature-card h4 {
  transition: color var(--transition-fast);
}

a.feature-card:hover h4 {
  color: var(--red);
}

/* ---------- partials/css/clinical-services.css ---------- */
/* ==========================================================================
   clinical-services.html — clinical services & therapies index
   Only what styles.css / taxonomy-index.css do not already provide.
   ========================================================================== */

/* ---------- Tier block: a labelled group of term cards ---------- */
.cs-tier + .cs-tier {
  margin-top: var(--space-4xl);
}

.cs-tier-head {
  max-width: 820px;
  margin-bottom: var(--space-xl);
  padding-left: var(--space-lg);
  border-left: 3px solid var(--gold);
}

.cs-tier-head h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.25;
  margin-bottom: var(--space-sm);
}

.cs-tier-head p {
  color: var(--gray-600);
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: 0;
}

.cs-tier-head .badge {
  margin-bottom: var(--space-sm);
}

/* ---------- Listing count on a term card ---------- */
.term-card-count {
  display: block;
  margin-bottom: var(--space-sm);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gray-500);
}

.term-card-count strong {
  font-weight: 800;
  color: var(--red);
}

/* ---------- Level-of-care combination cards ---------- */
.cs-stage {
  padding: var(--space-lg);
  background: var(--white);
  border: var(--border);
  border-radius: var(--radius-lg);
  height: 100%;
}

.cs-stage h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: var(--space-xs);
}

.cs-stage h3 a {
  color: inherit;
}

.cs-stage h3 a:hover {
  color: var(--red);
}

.cs-stage p {
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--gray-600);
  margin-bottom: var(--space-md);
}

.cs-stage-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* ---------- partials/css/editorial.css ---------- */
/* ==========================================================================
   EDITORIAL COMPONENTS
   For the long-form SEO sections on the directory, taxonomy and location
   templates. That copy is genuinely good but it was rendering as one narrow
   column of unbroken prose — a 13,700px page that read like a blog post and
   left the right half of the viewport empty.

   These components break the same content into scannable structure without
   cutting a word of it: numbered decision cards, signal-vs-noise comparisons,
   callouts, and a red-flag panel.
   ========================================================================== */

.editorial {
  --ed-gap: var(--space-2xl);
}

/* Opening paragraph carries more weight than body copy. */
.ed-lede {
  font-size: 1.12rem;
  line-height: 1.7;
  color: var(--gray-700);
  max-width: 72ch;
}

/* Cards size to their own content instead of stretching to the tallest in the
   row — a short card next to a long one should not inherit 400px of dead space. */
.ed-step { height: auto; }

/* ---------- Numbered decision cards ---------- */

.ed-steps {
  display: grid;
  /* 460px forces two columns inside the 1280 container rather than three.
     At three, each card is ~395px wide and the longer entries run 900px tall;
     at two they are ~600px, which is both a better measure for this much copy
     and materially shorter overall. */
  /* min() is load-bearing: a bare 460px track cannot shrink below its floor, so
     on a 342px mobile container the cards overflowed and were clipped by the
     page's overflow-x guard. min(460px, 100%) lets the track collapse to the
     container on narrow screens while still forcing two columns on desktop. */
  grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr));
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
  align-items: start;
}

.ed-step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--space-xl);
  background: var(--white);
  border: var(--border);
  border-radius: var(--radius-lg);
  transition: box-shadow var(--transition), border-color var(--transition);
}

.ed-step:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--gray-300);
}

.ed-step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius);
  background: var(--red);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1;
  box-shadow: var(--shadow-red);
}

.ed-step h3 {
  font-size: 1.15rem;
  line-height: 1.35;
  margin: 0;
}

.ed-step p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--gray-600);
}

/* The one question to actually ask a program. Pulled out of the paragraph so
   it survives skim-reading, which is how these pages are read. */
.ed-ask {
  margin-top: auto;
  padding: 12px 16px;
  border-left: 3px solid var(--gold);
  background: var(--gold-light);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--charcoal);
}

.ed-ask strong {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--gold-dark);
  margin-bottom: 3px;
}

/* ---------- Signal vs noise ---------- */

.ed-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}

.ed-col {
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  border: var(--border);
}

.ed-col-yes {
  background: rgba(34, 197, 94, 0.05);
  border-color: rgba(34, 197, 94, 0.25);
}

.ed-col-no {
  background: var(--gray-50);
}

.ed-col h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  margin: 0 0 var(--space-md);
}

.ed-col-yes h3 { color: #15803D; }
.ed-col-no h3  { color: var(--gray-600); }

.ed-col ul {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ed-col li {
  position: relative;
  padding-left: 24px;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--gray-700);
}

.ed-col-yes li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 6px;
  width: 12px;
  height: 7px;
  border-left: 2px solid var(--success);
  border-bottom: 2px solid var(--success);
  transform: rotate(-45deg);
}

.ed-col-no li::before {
  content: "×";
  position: absolute;
  left: 4px;
  top: -1px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--gray-400);
}

/* ---------- Callout ---------- */

.ed-callout {
  display: flex;
  gap: 14px;
  margin: var(--space-xl) 0;
  padding: var(--space-lg) var(--space-xl);
  border-radius: var(--radius-lg);
  background: var(--cream);
  border: 1px solid var(--gold-glow);
  border-left: 4px solid var(--gold);
}

.ed-callout-red {
  background: var(--red-light);
  border-color: var(--red-glow);
  border-left-color: var(--red);
}

.ed-callout svg {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  color: var(--gold-dark);
}

.ed-callout-red svg { color: var(--red); }

.ed-callout p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--charcoal);
}

.ed-callout p + p { margin-top: 8px; }

/* ---------- Red flags ---------- */

.ed-flags {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 12px;
  margin-top: var(--space-xl);
}

.ed-flag {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: var(--space-md) var(--space-lg);
  background: var(--white);
  border: 1px solid var(--red-glow);
  border-radius: var(--radius);
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--gray-700);
}

.ed-flag::before {
  content: "!";
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 21px;
  height: 21px;
  margin-top: 1px;
  border-radius: var(--radius-full);
  background: var(--red);
  color: var(--white);
  font-size: 0.78rem;
  font-weight: 800;
}

/* ---------- Fact strip ---------- */

.ed-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-xl);
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  background: var(--charcoal);
}

.ed-fact strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--white);
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.ed-fact span {
  display: block;
  margin-top: 3px;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--gray-400);
}

/* ---------- Two-column prose, for the longer explanatory passages ---------- */

.ed-cols {
  column-count: 2;
  column-gap: var(--space-3xl);
  margin-top: var(--space-lg);
}

.ed-cols p {
  margin: 0 0 var(--space-md);
  break-inside: avoid;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--gray-600);
}

@media (max-width: 900px) {
  .ed-cols { column-count: 1; }
  .ed-facts { padding: var(--space-lg); }
}

/* ==========================================================================
   TERM TILE
   The homepage browse grid. Replaced identical boxes that repeated one chart
   glyph and the subtitle "Levels of Care" on every card — eight tiles that
   looked the same and said nothing. Each now carries its own icon, the live
   listing count and a one-line summary from the term description.
   ========================================================================== */

.term-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-xl);
  background: var(--white);
  border: var(--border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

/* Accent wash that grows on hover — gives the tile somewhere to go without
   moving any text. */
.term-tile::after {
  content: "";
  position: absolute;
  inset: auto auto -60% -30%;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--gold-glow), transparent 70%);
  opacity: 0;
  transition: opacity var(--transition), transform var(--transition);
  pointer-events: none;
}

.term-tile-red::after { background: radial-gradient(circle, var(--red-glow), transparent 70%); }

.term-tile:hover,
.term-tile:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: var(--gray-300);
}

.term-tile:hover::after,
.term-tile:focus-visible::after {
  opacity: 1;
  transform: scale(1.15);
}

.term-tile-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  background: var(--gold-light);
  color: var(--gold-dark);
  transition: background var(--transition), color var(--transition);
}

.term-tile-red .term-tile-icon {
  background: var(--red-light);
  color: var(--red);
}

.term-tile:hover .term-tile-icon {
  background: var(--gold);
  color: var(--white);
}

.term-tile-red:hover .term-tile-icon {
  background: var(--red);
  color: var(--white);
}

.term-tile-body {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
}

.term-tile-name {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--black);
}

.term-tile-desc {
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--gray-600);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.term-tile-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--gray-100);
}

.term-tile-count {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--gray-500);
  font-variant-numeric: tabular-nums;
}

.term-tile-arrow {
  display: flex;
  align-items: center;
  color: var(--gray-300);
  transition: color var(--transition), transform var(--transition);
}

.term-tile:hover .term-tile-arrow {
  color: var(--red);
  transform: translateX(3px);
}

.term-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: var(--space-md);
}

/* ==========================================================================
   FEATURE CARD — modern treatment
   Drops the 3px gold rule across the top. That "coloured pillar on a white
   box" is a dated pattern and it was the only thing giving these cards a
   colour identity, so the fix is to move the accent into the icon and the
   hover state instead of a bar.
   ========================================================================== */

.feature-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-2xl) var(--space-xl);
  border: var(--border);
  border-top: var(--border);          /* override the inline 3px gold rule */
  border-radius: var(--radius-xl);
  background: var(--white);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

/* A hairline that draws across the top on hover — the accent arrives on
   interaction rather than sitting there permanently. */
.feature-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--red), var(--gold));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}

.feature-card:hover::before,
.feature-card:focus-within::before {
  transform: scaleX(1);
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--gray-200);
}

.feature-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg);
  background: var(--gray-50);
  border: 1px solid var(--gray-100);
  color: var(--red) !important;
  transition: background var(--transition), color var(--transition), transform var(--transition);
}

.feature-card:hover .feature-card-icon {
  background: var(--red);
  color: var(--white) !important;
  transform: scale(1.04);
}

/* ==========================================================================
   RESOURCE CARD — compact header band
   Replaced a 200px slab of near-black with a single small gold glyph adrift in
   it. The dark area carried no information and broke the page's rhythm; this
   keeps a dark band but sizes it to the content it actually holds.
   ========================================================================== */

.resource-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  text-decoration: none;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.resource-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
  border-color: var(--gray-300);
}

.resource-card-head {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-lg) var(--space-xl);
  /* Red is the brand primary; gold is the secondary accent. The first pass had
     these headers reading gold-on-black, which belongs to a different palette. */
  background:
    radial-gradient(120% 140% at 85% 0%, rgba(191, 74, 44, 0.28), transparent 62%),
    linear-gradient(135deg, var(--dark), var(--charcoal));
}

.resource-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: var(--radius);
  background: rgba(191, 74, 44, 0.16);
  border: 1px solid rgba(191, 74, 44, 0.3);
  color: #FF7A70;
  transition: background var(--transition), color var(--transition), transform var(--transition);
}

.resource-card:hover .resource-card-icon {
  background: var(--red);
  color: var(--white);
  transform: scale(1.05);
}

.resource-card-eyebrow {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #FF9089;
}

.resource-card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: var(--space-xl);
  flex: 1;
}

.resource-card-title {
  font-family: var(--font-display);
  font-size: 1.18rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--black);
  margin: 0;
}

.resource-card-text {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--gray-600);
  flex: 1;
}

.resource-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: var(--space-sm);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--red);
}

.resource-card-cta svg {
  width: 15px;
  height: 15px;
  transition: transform var(--transition);
}

.resource-card:hover .resource-card-cta svg {
  transform: translateX(4px);
}

/* ==========================================================================
   VERIFY FOOTNOTE — one line
   ========================================================================== */

.verify-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md);
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--gray-100);
  font-size: 0.85rem;
  text-align: left;
}

.verify-foot .verify-note {
  max-width: none;
  margin: 0;
  text-align: left;
  font-size: 0.72rem;
  color: var(--gray-400);
}

.verify-foot .verify-sep {
  width: 1px;
  height: 14px;
  background: var(--gray-200);
}

@media (max-width: 820px) {
  .verify-foot { flex-direction: column; text-align: center; gap: 8px; }
  .verify-foot .verify-note { text-align: center; }
  .verify-foot .verify-sep { display: none; }
}

/* ==========================================================================
   FEATURE CARD — icon column beside an aligned content column
   Icon sits in a left column; the title, body and CTA share the content
   column's left edge, so the heading no longer hangs indented past the
   paragraph beneath it. Icon top-aligns with the first line of the title.
   ========================================================================== */

.feature-card:has(> .feature-card-content) {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  text-align: left;
}

.feature-card:has(> .feature-card-content) > .feature-card-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
}

.feature-card-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.feature-card-content h3 {
  margin: 0;
  font-size: 1.12rem;
  line-height: 1.3;
}

.feature-card-content p {
  margin: 0;
  text-align: left;
}

.feature-card-content > a:last-child,
.feature-card-content > .btn:last-child {
  align-self: flex-start;
  margin-top: auto;
}

/* ==========================================================================
   TERM TILE GROUPS
   Nineteen tiles ran together as one field — the levels of care flowed into
   the substances with nothing but a colour change to mark the boundary. Each
   group now gets its own labelled header and its own row rhythm.
   ========================================================================== */

.tile-group + .tile-group {
  margin-top: var(--space-3xl);
}

.tile-group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--gray-200);
}

.tile-group-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--black);
}

.tile-group-count {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--gray-500);
  font-variant-numeric: tabular-nums;
}

.tile-group-link {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--red);
  text-decoration: none;
  white-space: nowrap;
}

.tile-group-link:hover { text-decoration: underline; text-underline-offset: 0.2em; }

/* ==========================================================================
   BEFORE / AFTER REVEAL
   The mission image was a single diptych — two halves of one JPEG, always both
   visible. Split into two frames and stacked, so dragging the handle actually
   moves between the withdrawn family and the reunited one. The transformation
   is the point of the image, so let the visitor perform it.

   Progressive enhancement: with no JS the "after" frame sits at 50% via the
   default clip, and the range input still drives it because the clip is bound
   to a custom property the input updates natively on modern browsers.
   ========================================================================== */

.ba {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  --ba-pos: 50%;
  touch-action: pan-y;
  user-select: none;
}

.ba-frame {
  position: absolute;
  inset: 0;
}

.ba-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

/* The "after" frame is revealed from the left edge to the handle. */
.ba-after {
  clip-path: inset(0 0 0 var(--ba-pos));
}

.ba-label {
  position: absolute;
  top: var(--space-md);
  padding: 5px 12px;
  border-radius: var(--radius-full);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: none;
  transition: opacity var(--transition);
}

.ba-label-before {
  left: var(--space-md);
  background: rgba(17, 17, 17, 0.55);
  color: rgba(255, 255, 255, 0.92);
}

.ba-label-after {
  right: var(--space-md);
  background: rgba(255, 255, 255, 0.82);
  color: var(--charcoal);
}

/* Divider + handle */
.ba-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--ba-pos);
  width: 2px;
  margin-left: -1px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

.ba-handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3);
  color: var(--charcoal);
  transition: transform var(--transition), box-shadow var(--transition);
}

.ba:hover .ba-handle { transform: translate(-50%, -50%) scale(1.06); }

.ba-handle svg { width: 15px; height: 15px; }

/* The real control: a range input laid over the whole frame. Keyboard and
   screen readers get a normal slider; pointer users just drag the image. */
.ba-range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  appearance: none;
  background: transparent;
}

.ba-range::-webkit-slider-thumb {
  appearance: none;
  width: 48px;
  height: 100%;
  cursor: ew-resize;
}

.ba-range::-moz-range-thumb {
  width: 48px;
  height: 100%;
  border: 0;
  background: transparent;
  cursor: ew-resize;
}

.ba-range:focus-visible { outline: none; }

.ba:has(.ba-range:focus-visible) {
  outline: 3px solid var(--red);
  outline-offset: 3px;
}

.ba-hint {
  position: absolute;
  left: 50%;
  bottom: var(--space-md);
  transform: translateX(-50%);
  padding: 5px 14px;
  border-radius: var(--radius-full);
  background: rgba(17, 17, 17, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  pointer-events: none;
  transition: opacity var(--transition);
}

.ba.is-touched .ba-hint { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .ba-handle, .ba:hover .ba-handle { transition: none; }
}

/* ==========================================================================
   LISTING HERO MAP
   When a listing has no photo but has coordinates, the hero shows a dark,
   monochrome map of the exact location — a distinct premium visual, not a
   duplicate of the interactive map further down the page.
   ========================================================================== */

.listing-hero-map {
  position: relative;
  width: 100%;
  height: 350px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--charcoal);
}

.listing-hero-map-frame {
  position: absolute;
  inset: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  border: 0;
  /* Dark monochrome treatment so it reads as a designed hero rather than a raw
     Google map: desaturate, lift contrast, invert to a night-map, then hue-spin
     back so water/land tones sit in the brand's warm-neutral range. */
  filter: grayscale(1) contrast(1.05) invert(0.92) hue-rotate(180deg) brightness(0.95);
  pointer-events: none;
}

/* A vignette + brand wash so the overlaid text stays legible over any map area. */
.listing-hero-map::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 42%, transparent 38%, rgba(17, 17, 17, 0.6) 100%),
    linear-gradient(180deg, rgba(17, 17, 17, 0.18), rgba(17, 17, 17, 0.62)),
    radial-gradient(60% 70% at 8% 100%, rgba(17,17,17,0.85), transparent 55%),
    radial-gradient(80% 80% at 85% 8%, var(--red-glow), transparent 60%);
  pointer-events: none;
}

.listing-hero-map-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  padding: var(--space-xl);
  pointer-events: none;
}

.listing-hero-map-pin {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 4px;
  border-radius: var(--radius-full);
  background: var(--red);
  color: var(--white);
  box-shadow: 0 6px 22px rgba(191, 74, 44, 0.5);
}

.listing-hero-map-pin svg { width: 24px; height: 24px; }

.listing-hero-map-name {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--white);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
  max-width: 30ch;
}

.listing-hero-map-loc {
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}

/* Location strip — address + directions, shown when the hero already carries
   the location's map (no-photo listings) so the map is not repeated. */
.location-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  flex-wrap: wrap;
  padding: var(--space-xl);
  background: var(--white);
  border: var(--border);
  border-radius: var(--radius-lg);
}

.location-strip-address {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 4px;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--black);
}

.location-strip-address svg { width: 18px; height: 18px; color: var(--red); flex-shrink: 0; }
.location-strip-city { margin: 0; color: var(--gray-600); padding-left: 26px; }

/* ---------- partials/css/hero-stage.css ---------- */
/* ==========================================================================
   HERO STAGE
   Six cinematic frames cross-fading behind the headline, each drifting slowly
   under a Ken Burns move so the hero feels like a camera looking across a
   scene rather than a static photograph.

   Timing: 6 frames on a 54s loop — 9s per frame, of which 2s is the cross-fade.
   Slow enough to read as atmosphere rather than a carousel.

   Cost control: only the first frame is in the markup as a real background.
   The other five are attached by partials/scripts.html after window load, so
   the LCP image is one 112KB file rather than six.
   ========================================================================== */

.hero-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}

.hero-slide {
  position: absolute;
  inset: -2%;                 /* bleed, so the Ken Burns move never shows an edge */
  background-position: center 42%;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  will-change: opacity, transform;
  /* Force a stable GPU layer. Without this, animating transform:scale on a
     background-image re-rasterizes the bitmap every frame and shimmers on the
     image detail and the text edges above it. translateZ promotes it to a
     composited layer so the scale is a cheap GPU transform of one raster. */
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Frame 1 is painted immediately and stays up until the sequence starts. */
.hero-slide:first-child { opacity: 1; }

/* Only animate once the remaining frames have actually loaded — otherwise the
   sequence cross-fades to empty boxes on a slow connection. */
.hero-stage.is-ready .hero-slide {
  animation:
    heroFade var(--hero-loop, 54s) infinite,
    heroDrift var(--hero-loop, 54s) infinite;
}

.hero-stage.is-ready .hero-slide:nth-child(1) { animation-delay: 0s,   0s; }
.hero-stage.is-ready .hero-slide:nth-child(2) { animation-delay: -45s, -45s; }
.hero-stage.is-ready .hero-slide:nth-child(3) { animation-delay: -36s, -36s; }
.hero-stage.is-ready .hero-slide:nth-child(4) { animation-delay: -27s, -27s; }
.hero-stage.is-ready .hero-slide:nth-child(5) { animation-delay: -18s, -18s; }
.hero-stage.is-ready .hero-slide:nth-child(6) { animation-delay: -9s,  -9s; }

/* Visible for 1/6 of the loop with a soft handover either side. */
@keyframes heroFade {
  0%     { opacity: 0; }
  2.5%   { opacity: 1; }
  16.6%  { opacity: 1; }
  19.5%  { opacity: 0; }
  100%   { opacity: 0; }
}

/* The camera move. Scale and pan run across the whole loop so the drift
   continues under the cross-fade instead of snapping back mid-view. */
@keyframes heroDrift {
  0%   { transform: scale(1.05) translate3d(0, 0, 0); }
  50%  { transform: scale(1.10) translate3d(-1.1%, -0.7%, 0); }
  100% { transform: scale(1.05) translate3d(0, 0, 0); }
}

/* Alternate frames drift the other way, so consecutive shots do not all slide
   in the same direction. */
.hero-stage.is-ready .hero-slide:nth-child(even) {
  animation-name: heroFade, heroDriftAlt;
}

@keyframes heroDriftAlt {
  0%   { transform: scale(1.10) translate3d(0, 0, 0); }
  50%  { transform: scale(1.04) translate3d(1.0%, 0.6%, 0); }
  100% { transform: scale(1.10) translate3d(0, 0, 0); }
}

/* The existing .hero::before painted a single static background; the stage
   replaces it. ::after keeps the gradient that makes the headline readable. */
.hero.has-stage::before { display: none; }

.hero.has-stage > .container { position: relative; z-index: 2; }
.hero.has-stage::after { z-index: 1; }

/* Motion preference: hold the first frame, no fade, no drift. */
@media (prefers-reduced-motion: reduce) {
  .hero-stage.is-ready .hero-slide { animation: none; }
  .hero-stage .hero-slide { opacity: 0; }
  .hero-stage .hero-slide:first-child { opacity: 1; }
}

/* ---------- partials/css/insurance-provider.css ---------- */
/* ==========================================================================
   insurance-provider.html — single insurance carrier page
   Only what styles.css does not already provide.
   ========================================================================== */

/* ---------- Carrier hero ---------- */
.carrier-hero-inner {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  flex-wrap: wrap;
}

.carrier-hero-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 132px;
  height: 92px;
  padding: var(--space-md);
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  flex-shrink: 0;
}

.carrier-hero-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.carrier-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

.carrier-hero-note {
  margin-top: var(--space-md);
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.5);
}

/* ---------- Coverage table ---------- */
.coverage-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: var(--border);
  border-radius: var(--radius-lg);
  background: var(--white);
}

.coverage-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.coverage-table caption {
  padding: var(--space-md) var(--space-lg);
  font-size: 0.85rem;
  color: var(--gray-500);
  text-align: left;
}

.coverage-table th,
.coverage-table td {
  padding: 14px var(--space-lg);
  text-align: left;
  vertical-align: top;
  border-bottom: var(--border);
}

.coverage-table thead th {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--gray-600);
  background: var(--gray-50);
  white-space: nowrap;
}

.coverage-table tbody th {
  font-weight: 700;
  color: var(--black);
}

.coverage-table tbody tr:last-child th,
.coverage-table tbody tr:last-child td {
  border-bottom: 0;
}

.coverage-table tbody tr:hover {
  background: var(--red-light);
}

/* ---------- Coverage disclaimer call-out ---------- */
.carrier-callout {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-lg);
  margin: var(--space-xl) 0;
  background: var(--gold-light);
  border-left: 4px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.carrier-callout svg {
  flex-shrink: 0;
  color: var(--gold-dark);
}

.carrier-callout p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--gray-900);
}

/* ---------- Verify benefits form card ---------- */
.verify-card {
  padding: var(--space-2xl);
  background: var(--white);
  border: var(--border);
  border-top: 4px solid var(--red);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

.verify-card-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: var(--space-md);
  font-size: 0.8rem;
  color: var(--gray-500);
  text-align: center;
}

/* ---------- Carrier link cloud logo chip ---------- */
.carrier-chip {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  background: var(--white);
  border: var(--border);
  border-radius: var(--radius-lg);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--gray-900);
  transition: all var(--transition-fast);
}

.carrier-chip:hover {
  border-color: var(--red);
  color: var(--red);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}

.carrier-chip img {
  width: 56px;
  height: 28px;
  object-fit: contain;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .carrier-hero-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .verify-card {
    padding: var(--space-lg);
  }
}

/* ---------- partials/css/page.css ---------- */
/* ==========================================================================
   Generic content page shell (WordPress index.php fallback)
   Used by: page.html — sticky table of contents, meta line, reviewer card
   ========================================================================== */

/* ---------- Sticky table of contents ---------- */
.toc-sidebar {
  background: var(--white);
  border: var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  position: sticky;
  top: calc(var(--header-height) + 24px);
}

.toc-title {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--gray-500);
  margin-bottom: var(--space-md);
}

.toc-list a {
  display: block;
  padding: 8px 0 8px 12px;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--gray-600);
  border-left: 2px solid var(--gray-200);
  transition: color var(--transition-fast), border-color var(--transition-fast), padding-left var(--transition-fast);
}

.toc-list a:hover,
.toc-list a:focus-visible {
  color: var(--red);
  border-left-color: var(--red);
  padding-left: 16px;
}

.toc-helpline {
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: var(--border);
}

.toc-helpline p {
  font-size: 0.85rem;
  margin-bottom: var(--space-sm);
}

/* Anchor targets must clear the fixed header */
.article-content h2[id],
.article-content h3[id] {
  scroll-margin-top: calc(var(--header-height) + 24px);
}

/* ---------- "Last reviewed" meta line ---------- */
.page-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: var(--space-lg);
  margin-bottom: var(--space-lg);
  border-bottom: var(--border);
  font-size: 0.85rem;
  color: var(--gray-500);
}

.page-meta svg {
  color: var(--red);
  flex-shrink: 0;
}

.page-meta a {
  color: var(--gray-700);
  font-weight: 600;
}

.page-meta a:hover {
  color: var(--red);
}

/* ---------- Reviewer card ---------- */
.reviewer-card {
  background: var(--gray-50);
  border: var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  margin: var(--space-xl) 0;
  text-align: left;
}

.reviewer-card .staff-card-avatar {
  width: 72px;
  height: 72px;
  margin: 0 0 var(--space-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--red-light);
  color: var(--red);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0.02em;
}

.reviewer-card h3 {
  font-size: 1.15rem;
  margin: 0 0 var(--space-xs);
}

.reviewer-card .reviewer-role {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--red);
  margin-bottom: var(--space-md);
}

.reviewer-card p:last-child {
  font-size: 0.95rem;
  color: var(--gray-700);
  margin-bottom: 0;
}

@media (max-width: 1024px) {
  .toc-sidebar {
    position: static;
  }
}

/* ---------- partials/css/payment-options.css ---------- */
/* ==========================================================================
   payment-options.html — how to pay for treatment (taxonomy hub)
   Only what styles.css does not already provide. Hero stats, comparison
   tables, med-note and term-card come from the shared/merged sheets.
   ========================================================================== */

/* ---------- Payment method cards (page centrepiece) ---------- */
.pay-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-lg);
}

.pay-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-xl);
  background: var(--white);
  border: var(--border);
  border-radius: var(--radius-lg);
  transition: all var(--transition);
}

.pay-card:hover {
  border-color: var(--red);
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

.pay-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.pay-card-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.3;
  color: var(--black);
  margin: 0;
}

.pay-card:hover .pay-card-title {
  color: var(--red);
}

.pay-card-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  background: var(--red-light);
  color: var(--red);
}

.pay-card-icon svg {
  width: 22px;
  height: 22px;
}

.pay-count {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: var(--space-md);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--gray-500);
}

.pay-count strong {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
  color: var(--red);
}

.pay-facts {
  flex: 1 1 auto;
  margin: 0 0 var(--space-lg);
}

.pay-facts dt {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gray-400);
}

.pay-facts dd {
  margin: 4px 0 var(--space-md);
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--gray-600);
}

.pay-facts dd:last-child {
  margin-bottom: 0;
}

.pay-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--red);
}

.pay-card-cta svg {
  width: 14px;
  height: 14px;
  transition: transform var(--transition-fast);
}

.pay-card:hover .pay-card-cta svg {
  transform: translateX(4px);
}

/* ---------- Long-tail term chips ---------- */
.pay-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.pay-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: var(--border);
  border-radius: var(--radius-full);
  background: var(--white);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gray-700);
  transition: all var(--transition-fast);
}

.pay-chip span {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--gray-400);
}

.pay-chip:hover {
  border-color: var(--red);
  background: var(--red-light);
  color: var(--red);
}

.pay-chip:hover span {
  color: var(--red);
}

/* ---------- "Can't afford treatment" numbered path ---------- */
.pay-path {
  display: grid;
  gap: var(--space-lg);
  counter-reset: paystep;
  list-style: none;
  padding: 0;
  margin: 0;
}

.pay-path > li {
  position: relative;
  padding: var(--space-lg) var(--space-lg) var(--space-lg) 76px;
  background: var(--white);
  border: var(--border);
  border-radius: var(--radius-lg);
}

.pay-path > li::before {
  counter-increment: paystep;
  content: counter(paystep);
  position: absolute;
  top: var(--space-lg);
  left: var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  color: var(--white);
  background: var(--red);
  border-radius: var(--radius-full);
}

.pay-path h3 {
  font-size: 1.1rem;
  margin-bottom: var(--space-sm);
}

.pay-path p {
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--gray-600);
  margin-bottom: 0;
}

.pay-path p + p {
  margin-top: var(--space-sm);
}

@media (max-width: 640px) {
  .pay-path > li {
    padding: 64px var(--space-lg) var(--space-lg);
  }
}

/* ---------- Helpline call-out ---------- */
.pay-helpline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  background: var(--gold-light);
  border-left: 4px solid var(--gold);
}

.pay-helpline svg {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  color: var(--gold-dark);
}

.pay-helpline div {
  flex: 1 1 320px;
}

.pay-helpline p {
  margin-bottom: 0;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--gray-900);
}

.pay-helpline strong {
  font-family: var(--font-display);
  font-size: 1.15rem;
}

/* ---------- Questions-to-ask checklist ---------- */
.pay-checklist {
  display: grid;
  gap: var(--space-md);
  list-style: none;
  padding: 0;
  margin: 0;
}

.pay-checklist li {
  position: relative;
  padding: var(--space-lg) var(--space-lg) var(--space-lg) 60px;
  background: var(--white);
  border: var(--border);
  border-radius: var(--radius);
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--gray-600);
}

.pay-checklist li::before {
  content: '';
  position: absolute;
  top: 22px;
  left: var(--space-lg);
  width: 22px;
  height: 22px;
  border: 2px solid var(--red);
  border-radius: var(--radius-sm);
  background:
    linear-gradient(45deg, transparent 44%, var(--red) 44%, var(--red) 56%, transparent 56%) no-repeat 50% 62% / 12px 3px,
    linear-gradient(-45deg, transparent 44%, var(--red) 44%, var(--red) 56%, transparent 56%) no-repeat 62% 50% / 3px 12px;
}

.pay-checklist strong {
  display: block;
  margin-bottom: 2px;
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--black);
}

/* ---------- Cost table emphasis ---------- */
.compare-table .pay-price {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--gray-900);
  font-weight: 600;
}

/* ---------- partials/css/sitemap.css ---------- */
/* ==========================================================================
   Sitemap page — link-group cards
   Used by: sitemap.html
   ========================================================================== */

.sitemap-group {
  background: var(--white);
  border: var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.sitemap-group:hover {
  border-color: var(--gray-300);
  box-shadow: var(--shadow-sm);
}

.sitemap-group-title {
  font-size: 1rem;
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 2px solid var(--red);
}

.sitemap-list a {
  display: block;
  padding: 7px 0;
  font-size: 0.9rem;
  color: var(--gray-600);
  border-bottom: 1px solid var(--gray-100);
  transition: color var(--transition-fast), padding-left var(--transition-fast);
}

.sitemap-list a:hover,
.sitemap-list a:focus-visible {
  color: var(--red);
  padding-left: 8px;
}

.sitemap-list li:last-child a {
  border-bottom: none;
  padding-bottom: 0;
}

/* ---------- partials/css/sober-living-listing.css ---------- */
/* ==========================================================================
   sober-living-listing.html — single recovery residence detail page
   Only what styles.css does not already provide.
   ========================================================================== */

/* ---------- Badge row inside the listing hero ---------- */
.sl-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

/* ---------- Quick facts strip (Overview tab) ---------- */
.sl-facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
  padding: var(--space-lg);
  margin: var(--space-xl) 0;
  background: var(--gray-50);
  border: var(--border);
  border-radius: var(--radius-lg);
}

.sl-fact strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.25;
  color: var(--black);
}

.sl-fact span {
  display: block;
  margin-top: var(--space-xs);
  font-size: 0.75rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gray-500);
}

/* ---------- House rules list ---------- */
.sl-rules {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: sl-rule;
}

.sl-rules li {
  position: relative;
  counter-increment: sl-rule;
  padding: var(--space-md) 0 var(--space-md) 44px;
  border-bottom: var(--border);
  font-size: 0.97rem;
  line-height: 1.7;
  color: var(--gray-800);
}

.sl-rules li:last-child {
  border-bottom: 0;
}

.sl-rules li::before {
  content: counter(sl-rule);
  position: absolute;
  left: 0;
  top: 14px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--red-light);
  color: var(--red);
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 800;
}

.sl-rules li strong {
  color: var(--black);
}

/* ---------- Amenity chips ---------- */
.sl-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.sl-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 10px 16px;
  background: var(--white);
  border: var(--border);
  border-radius: var(--radius-full);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--gray-800);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.sl-chip:hover {
  border-color: var(--gold);
  box-shadow: var(--shadow-xs);
}

.sl-chip svg {
  flex-shrink: 0;
  color: var(--success);
}

/* ---------- Pricing table ---------- */
.sl-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: var(--border);
  border-radius: var(--radius-lg);
  background: var(--white);
}

.sl-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.sl-table caption {
  padding: var(--space-md) var(--space-lg);
  font-size: 0.85rem;
  color: var(--gray-500);
  text-align: left;
}

.sl-table th,
.sl-table td {
  padding: 14px var(--space-lg);
  text-align: left;
  vertical-align: top;
  border-bottom: var(--border);
}

.sl-table thead th {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--gray-600);
  background: var(--gray-50);
  white-space: nowrap;
}

.sl-table tbody th {
  font-weight: 700;
  color: var(--black);
}

.sl-table tbody tr:last-child th,
.sl-table tbody tr:last-child td {
  border-bottom: 0;
}

/* ---------- Included / not included columns ---------- */
.sl-incl {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sl-incl li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 0;
  font-size: 0.93rem;
  line-height: 1.6;
  color: var(--gray-800);
}

.sl-incl svg {
  flex-shrink: 0;
  margin-top: 3px;
}

.sl-incl-yes svg { color: var(--success); }
.sl-incl-no svg  { color: var(--gray-400); }

/* ---------- Call-out (fair housing / not a treatment facility) ---------- */
.sl-callout {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-lg);
  margin: var(--space-xl) 0;
  background: var(--gold-light);
  border-left: 4px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.sl-callout svg {
  flex-shrink: 0;
  color: var(--gold-dark);
}

.sl-callout p {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.75;
  color: var(--gray-900);
}

.sl-callout p + p {
  margin-top: var(--space-sm);
}

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

@media (max-width: 768px) {
  .listing-hero .sl-badge-row {
    gap: var(--space-xs);
  }
}

/* ---------- partials/css/sober-living.css ---------- */
/* ===== Sober Living pages (sober-living, sober-living-listing) ===== */

/* Hero stat strip used on the sober living directory hero */
.sl-hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xl);
  margin-top: var(--space-xl);
}

.sl-hero-stat-number {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--gold);
  line-height: 1;
}

.sl-hero-stat-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.6);
  margin-top: var(--space-xs);
}

/* Price + gender line inside a sober living listing card */
.sl-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--gray-500);
  margin-bottom: var(--space-md);
}

.sl-price strong {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--black);
}

.sl-price .sl-price-dot {
  color: var(--gray-300);
}

/* NARR level cards — numbered variant of the feature card */
.sl-level-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: var(--gold-light);
  color: var(--gold-dark);
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  margin-bottom: var(--space-md);
}

/* Simple data table (pricing) — no table styles exist in the base sheet */
.sl-table-wrap {
  overflow-x: auto;
  border: var(--border);
  border-radius: var(--radius-lg);
  background: var(--white);
}

.sl-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  min-width: 520px;
}

.sl-table th,
.sl-table td {
  padding: 14px var(--space-md);
  text-align: left;
  border-bottom: var(--border);
  vertical-align: top;
}

.sl-table thead th {
  font-family: var(--font-display);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--gray-500);
  background: var(--gray-50);
}

.sl-table tbody th {
  font-weight: 600;
  color: var(--gray-900);
  white-space: nowrap;
}

.sl-table tbody tr:last-child th,
.sl-table tbody tr:last-child td {
  border-bottom: none;
}

.sl-table td strong {
  color: var(--red);
}

/* ---------- partials/css/taxonomy-index.css ---------- */
/* ==========================================================================
   Taxonomy index pages
   care-levels / therapies / substances / programs / dual-diagnosis / mat
   ========================================================================== */

/* ---------- Term card (whole card is a link) ---------- */
.term-card {
  display: block;
  height: 100%;
}

.term-card .card-body {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.term-card .card-text {
  flex: 1 1 auto;
}

.term-card:hover .card-title {
  color: var(--red);
}

.term-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--red);
}

.term-card-cta svg {
  width: 14px;
  height: 14px;
  transition: transform var(--transition-fast);
}

.term-card:hover .term-card-cta svg {
  transform: translateX(4px);
}

/* ---------- Comparison table ---------- */
.compare-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.compare-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  background: var(--white);
  border: var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  font-size: 0.9rem;
}

.compare-table caption {
  caption-side: bottom;
  padding-top: var(--space-md);
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--gray-500);
  text-align: left;
}

.compare-table th,
.compare-table td {
  padding: 14px 16px;
  text-align: left;
  vertical-align: top;
  line-height: 1.55;
  border-bottom: 1px solid var(--gray-200);
}

.compare-table thead th {
  background: var(--gray-50);
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--gray-700);
}

.compare-table tbody th {
  font-weight: 600;
  color: var(--gray-900);
}

.compare-table tbody td {
  color: var(--gray-600);
}

.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td {
  border-bottom: 0;
}

.compare-table tbody tr:hover {
  background: var(--gray-50);
}

/* ---------- FAQ accordion ----------
   Longer editorial answers need more headroom than the 500px default,
   especially at narrow viewports. Scoped so no other page is affected. */
.faq-accordion.accordion .accordion-item.active .accordion-content {
  max-height: 1400px;
}

/* ---------- Safety / editorial callout ---------- */
.med-note {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-lg);
  background: var(--red-light);
  border-left: 3px solid var(--red);
  border-radius: var(--radius);
  color: var(--gray-900);
  font-size: 0.95rem;
  line-height: 1.7;
}

.med-note svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--red);
}

.med-note p:last-child {
  margin-bottom: 0;
}

@media (max-width: 640px) {
  .med-note {
    flex-direction: column;
    gap: var(--space-sm);
  }
}

/* ---------- partials/css/treatment-type.css ---------- */
/* ==========================================================================
   treatment-type.html — single taxonomy term page
   Only what styles.css does not already provide.
   ========================================================================== */

/* ---------- Term hero: stat row + action buttons inside .page-hero ---------- */
.term-hero-meta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.term-hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xl);
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.term-hero-stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--white);
}

.term-hero-stat span {
  display: block;
  margin-top: var(--space-xs);
  font-size: 0.78rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.term-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

/* ---------- Comparison / timeline tables ---------- */
.compare-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: var(--border);
  border-radius: var(--radius-lg);
  background: var(--white);
}

.compare-table {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.compare-table caption {
  padding: var(--space-md) var(--space-lg);
  font-size: 0.85rem;
  color: var(--gray-500);
  text-align: left;
}

.compare-table th,
.compare-table td {
  padding: 14px var(--space-lg);
  text-align: left;
  vertical-align: top;
  border-bottom: var(--border);
}

.compare-table thead th {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--gray-600);
  background: var(--gray-50);
  white-space: nowrap;
}

.compare-table tbody th {
  font-weight: 700;
  color: var(--black);
  white-space: nowrap;
}

.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td {
  border-bottom: 0;
}

.compare-table tbody tr:hover {
  background: var(--red-light);
}

/* ---------- Clinical call-out ---------- */
.term-callout {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-lg);
  margin: var(--space-xl) 0;
  background: var(--red-light);
  border-left: 4px solid var(--red);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.term-callout svg {
  flex-shrink: 0;
  color: var(--red);
}

.term-callout p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--gray-900);
}

@media (max-width: 768px) {
  .term-hero-stats {
    gap: var(--space-lg);
  }

  .term-hero-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ---------- partials/css/verify-strip.css ---------- */
/* ==========================================================================
   VERIFICATION STRIP
   Replaces the old "As Seen On" media logo row.

   Logos are used nominatively — to identify the accrediting bodies each listing
   is checked against — with an explicit non-affiliation note in the markup.
   Assets are the real ones from the production media library, sized so they
   stay sharp on 2x displays rather than the upscaled art they replaced.
   ========================================================================== */

.verify-strip {
  padding: var(--space-2xl) 0 var(--space-xl);
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
}

.verify-strip-label {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-weight: 700;
  font-size: 0.72rem;
  color: var(--gray-500);
  margin-bottom: var(--space-xl);
}

.verify-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-md);
  max-width: 1080px;
  margin-inline: auto;
}

.verify-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--space-md) var(--space-sm);
  border-radius: var(--radius-lg);
  border: 1px solid transparent;
  text-align: center;
  transition: all var(--transition);
}

a.verify-item {
  text-decoration: none;
}

a.verify-item:hover {
  border-color: var(--gray-200);
  background: var(--gray-50);
  transform: translateY(-2px);
}

.verify-count {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--black);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.verify-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1.25;
}

.verify-desc {
  font-size: 0.75rem;
  color: var(--gray-500);
  line-height: 1.35;
}

/* The link and the disclaimer are one footnote, not two blocks. Quieter than
   the logo row above so it reads as a closing note rather than competing with
   the credentials themselves. */
.verify-foot {
  text-align: center;
  margin-top: var(--space-xl);
  font-size: 0.88rem;
}

.verify-foot a {
  color: var(--red);
  font-weight: 600;
  text-decoration: none;
  /* Underline drawn from a gradient so it can animate in from the left. */
  background-image: linear-gradient(var(--red), var(--red));
  background-size: 0 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 2px;
  transition: background-size var(--transition);
}

.verify-foot a:hover,
.verify-foot a:focus-visible {
  background-size: 100% 1px;
}

.verify-foot a .verify-arrow {
  display: inline-block;
  transition: transform var(--transition);
}

.verify-foot a:hover .verify-arrow {
  transform: translateX(3px);
}

.verify-note {
  max-width: 68ch;
  margin: 10px auto 0;
  text-align: center;
  font-size: 0.7rem;
  line-height: 1.5;
  color: var(--gray-400);
}

@media (max-width: 600px) {
  .verify-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
  }

  .verify-count {
    font-size: 1.25rem;
  }
}

/* Logos. Sized to a common optical height rather than a common box, so a
   circular seal and a wide wordmark read as the same visual weight. */
.verify-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 54px;
  margin-bottom: var(--space-xs);
}

.verify-logo img {
  max-height: 100%;
  max-width: 132px;
  width: auto;
  height: auto;
  object-fit: contain;
  /* Lightly muted so the row reads as one band, full colour on hover. Not
     faded into illegibility — these are the page's main trust signal. */
  filter: grayscale(1) contrast(1.05);
  opacity: 0.8;
  transition: filter var(--transition), opacity var(--transition);
}

a.verify-item:hover .verify-logo img,
a.verify-item:focus-visible .verify-logo img {
  filter: grayscale(0);
  opacity: 1;
}

/* The one asset we only have at 64px. Held at its native size so it is never
   upscaled — soft is better than blurry. */
.verify-item img[src$="carf.png"] {
  max-height: 48px;
}


@media (max-width: 600px) {
  .verify-logo { height: 42px; }
  .verify-logo img { max-width: 92px; }
}

/* SAMHSA and NAATP are wide wordmarks — capping on width alone would leave them
   optically smaller than the circular seals beside them. */
.verify-item img[src$="samhsa.png"] { max-width: 150px; }
.verify-item img[src$="naatp.png"]  { max-height: 50px; }

/* ==========================================================================
   CARRIER GRID  (insurance hub)
   Replaces twelve hard-coded text cards with the real logos held on each
   `insurance` term. 309 of 310 carriers have one.
   ========================================================================== */

.carrier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-md);
}

.carrier-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-xs);
  padding: var(--space-lg) var(--space-md);
  background: var(--white);
  border: var(--border);
  border-radius: var(--radius-lg);
  text-align: center;
  text-decoration: none;
  transition: all var(--transition);
}

.carrier-card:hover {
  border-color: var(--gray-300);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

/* Fixed optical height so wildly different logo aspect ratios still line up. */
.carrier-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  width: 100%;
  margin-bottom: var(--space-xs);
}

.carrier-logo img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.carrier-name {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1.25;
}

.carrier-count {
  font-size: 0.72rem;
  color: var(--gray-500);
  font-variant-numeric: tabular-nums;
}


.carrier-note {
  max-width: 62ch;
  margin: var(--space-xl) auto 0;
  text-align: center;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--gray-400);
}

/* ---------- Carrier grid: refinement ---------- */

.carrier-card {
  position: relative;
  min-height: 132px;
  justify-content: center;
}

/* Denser variant for the accepted-insurance block on a listing page. */
.carrier-grid-compact {
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
}

.carrier-grid-compact .carrier-card {
  min-height: 104px;
  padding: var(--space-md) var(--space-sm);
}

.carrier-grid-compact .carrier-logo {
  height: 36px;
}

/* Logos arrive at wildly different crops and colour weights. Muting them at
   rest makes the grid read as one field rather than a ransom note; hover
   restores the brand. */
.carrier-logo img {
  filter: saturate(0.9);
  transition: transform var(--transition), filter var(--transition);
}

.carrier-card:hover .carrier-logo img {
  transform: scale(1.06);
  filter: saturate(1);
}

/* Fallback tile for the one carrier with no image. */
.carrier-monogram {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  background: var(--red-light);
  color: var(--red-dark);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.5px;
}

/* ---------- Filter ---------- */

.carrier-filter {
  max-width: 520px;
  margin: 0 auto var(--space-xl);
}

.carrier-search {
  position: relative;
  display: flex;
  align-items: center;
}

.carrier-search svg {
  position: absolute;
  left: 16px;
  width: 18px;
  height: 18px;
  color: var(--gray-400);
  pointer-events: none;
}

.carrier-search input {
  width: 100%;
  padding: 14px 18px 14px 46px;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--gray-900);
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-xs);
  transition: all var(--transition-fast);
}

.carrier-search input:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 4px var(--red-glow);
}

.carrier-search input::-webkit-search-cancel-button {
  cursor: pointer;
}

.carrier-filter-status {
  margin-top: var(--space-sm);
  text-align: center;
  font-size: 0.8rem;
  color: var(--gray-500);
  min-height: 1.2em;
}

.carrier-empty {
  text-align: center;
  padding: var(--space-2xl) var(--space-md);
  color: var(--gray-600);
}

.carrier-empty a {
  color: var(--red);
  font-weight: 700;
}

@media (max-width: 600px) {
  .carrier-grid {
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: var(--space-sm);
  }

  .carrier-card { min-height: 116px; }
}

/* ---------- Footer partner marks ----------
   A full-bleed light band at the very top of the footer, not a white card
   floating in black. Earlier passes kept dimming a panel to make it sit into
   the dark footer, which was the wrong problem to solve: colour marks need a
   light ground, so the band itself becomes the transition between the light
   page and the dark footer. Logos then run at full strength with nothing
   framing them. */
.footer-partners {
  padding: var(--space-2xl) 0;
  background: var(--cream);
  border-top: 1px solid var(--gray-200);
  border-bottom: 0;
}

.footer-partners .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
}

.footer-partners-label {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--gray-500);
}

.footer-partner-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(var(--space-xl), 5vw, var(--space-4xl));
}

.footer-partner {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  opacity: 0.9;
  transition: opacity var(--transition), transform var(--transition);
}

.footer-partner:hover,
.footer-partner:focus-visible {
  opacity: 1;
  transform: translateY(-2px);
}

.footer-partner img {
  max-height: 100%;
  max-width: 120px;
  width: auto;
  height: auto;
  object-fit: contain;
  /* The base sheet bleaches `.footer-partners img` for the old dark bar. */
  filter: none;
  opacity: 1;
}

.footer-partners img:hover { opacity: 1; }

/* Circular seals read smaller than wordmarks at a shared height. */
.footer-partner img[src$="carf.png"]             { max-height: 40px; }
.footer-partner img[src$="joint-commission.png"] { max-height: 42px; }
.footer-partner img[src$="naatp.png"]            { max-height: 42px; }
.footer-partner img[src$="samhsa.png"]           { max-width: 116px; }

@media (max-width: 700px) {
  .footer-partners { padding: var(--space-xl) 0; }
  .footer-partner-row { gap: var(--space-xl); }
  .footer-partner { height: 32px; }
  .footer-partner img { max-width: 88px; }
}

/* ---------- partials/css/zz-refinements.css ---------- */
/* ==========================================================================
   REFINEMENT LAYER
   Merged last, so everything here intentionally sits on top of the base
   system. Additive polish only — no layout is restructured.

   Covers: accessibility gaps (reduced motion, focus, skip link, contrast),
   typographic finish, material depth, micro-interaction, and paint cost.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Motion preference — WCAG 2.3.3
   The site leans on scroll reveals, mega-menu slides and hover lifts. All of
   it must collapse for anyone who asks the OS for less movement, without
   leaving `.reveal` content stuck at opacity 0.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  html { scroll-behavior: auto; }

  .reveal,
  .reveal-delay-1,
  .reveal-delay-2,
  .reveal-delay-3,
  .reveal-delay-4 {
    opacity: 1 !important;
    transform: none !important;
  }

  .card:hover,
  .listing-card:hover,
  .blog-card:hover,
  .feature-card:hover {
    transform: none !important;
  }
}

/* --------------------------------------------------------------------------
   2. Skip link — WCAG 2.4.1
   The header carries five mega-menus; a keyboard or screen-reader user must
   be able to jump past them. Markup lives in partials/header.html.
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -110%);
  z-index: 2000;
  padding: 12px 24px;
  background: var(--red);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow-lg);
  transition: transform var(--transition-fast);
}

.skip-link:focus {
  transform: translate(-50%, 0);
  outline: 3px solid var(--white);
  outline-offset: -6px;
}

/* Landing target for the skip link should not sit under the fixed header. */
#main-content { scroll-margin-top: calc(var(--header-height) + var(--space-md)); }

/* --------------------------------------------------------------------------
   3. Focus — one designed ring, everywhere
   A visible, high-contrast focus indicator that reads as part of the design
   rather than a browser default. Keyboard-only, so it never fires on click.
   -------------------------------------------------------------------------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* On red and dark surfaces the red ring disappears — invert it there. */
:where(.section-red, .section-dark, .footer, .cta-banner, .hero)
  :where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline-color: var(--white);
}

/* Never suppress the ring without replacing it. */
:where(a, button):focus:not(:focus-visible) { outline: none; }

/* --------------------------------------------------------------------------
   4. Typographic finish
   Balanced headings, no orphaned last words in body copy, and tighter
   optical tracking on display sizes.
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.section-title, .hero h1, .page-hero h1 {
  text-wrap: balance;
  letter-spacing: -0.02em;
}

h1, .page-hero h1 { letter-spacing: -0.03em; }

p, .card-text, .section-subtitle, .hero-subtitle, li {
  text-wrap: pretty;
}

/* Long-form reading measure. Constrain and centre the whole article block
   rather than only its paragraphs — capping paragraph width alone left the
   headings full-bleed and the column visibly lopsided. Pages that already
   place the article in a sidebar layout are narrow enough that this is a
   no-op for them. */
/* A readable measure for long-form copy.

   Left-aligned, not centred. These blocks sit under a full-width
   `.section-title`, so centring the prose alone pushed it into the middle of
   the container while the heading stayed at the left edge — the two stopped
   lining up and it read as a layout bug. Sharing the container's left edge
   keeps heading and body on the same axis; the heading simply runs wider. */
.article-content,
.prose {
  max-width: 74ch;
  margin-inline: 0;
}

/* An article with no heading above it (a standalone content page) has nothing
   to align to, so centring is right there. */
.container-sm .article-content,
.container-sm .prose {
  margin-inline: auto;
}

.prose > :last-child {
  margin-bottom: 0;
}

.content-with-sidebar .article-content,
.content-with-sidebar-right .article-content {
  max-width: none;
  margin-inline: 0;
}

/* Numeric alignment in tables and stat rows. */
.compare-table, .coverage-table, .sl-table,
.hero-stats, .stat-card, .term-hero-stats {
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   5. Material depth
   The sticky header sits over content on every page; give it real glass
   rather than a flat white bar, where the browser supports it.
   -------------------------------------------------------------------------- */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .header.scrolled {
    background: color-mix(in srgb, var(--white) 82%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
  }
}

/* A hairline instead of a hard border — reads as depth, not a rule. */
.header.scrolled {
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.06),
    0 8px 24px rgba(0, 0, 0, 0.06);
}

/* --------------------------------------------------------------------------
   6. Micro-interaction
   Cards lift and their image gains a little scale; the two are timed
   differently so the motion feels layered rather than uniform.
   -------------------------------------------------------------------------- */
.card, .listing-card, .blog-card, .feature-card {
  transition:
    transform 0.35s var(--ease),
    box-shadow 0.35s var(--ease),
    border-color 0.35s var(--ease);
  will-change: transform;
}

.card-img, .listing-card-img, .blog-card-img {
  overflow: hidden;
}

.card-img img, .listing-card-img img, .blog-card-img img {
  transition: transform 0.6s var(--ease);
}

.card:hover .card-img img,
.listing-card:hover .listing-card-img img,
.blog-card:hover .blog-card-img img {
  transform: scale(1.04);
}

/* Buttons acknowledge the press. */
.btn { transition: all var(--transition-fast); }
.btn:active { transform: translateY(1px) scale(0.99); }

/* Inline links in long-form copy get an underline that draws in on hover. */
.article-content a:not(.btn) {
  color: var(--red);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: color-mix(in srgb, var(--red) 35%, transparent);
  transition: text-decoration-color var(--transition-fast);
}

.article-content a:not(.btn):hover {
  text-decoration-color: var(--red);
}

/* --------------------------------------------------------------------------
   7. Selection and scrollbar — small surfaces, but they read as care.
   -------------------------------------------------------------------------- */
::selection {
  background: var(--red);
  color: var(--white);
}

@supports (scrollbar-color: red white) {
  html { scrollbar-color: var(--gray-300) transparent; }
}

/* --------------------------------------------------------------------------
   8. High-contrast preference
   -------------------------------------------------------------------------- */
@media (prefers-contrast: more) {
  :root {
    --gray-600: #4A4A4A;
    --gray-500: #5C5C5C;
    --gray-400: #6E6E6E;
    --border: 1px solid var(--gray-500);
  }

  .btn { border-width: 2px; }
  .badge, .tag, .filter-pill { border: 1px solid currentColor; }
}

/* --------------------------------------------------------------------------
   9. Paint cost
   These pages are long — several run past 1,000 elements. Letting the browser
   skip layout and paint for off-screen sections measurably improves the first
   render. contain-intrinsic-size keeps the scrollbar from jumping.
   -------------------------------------------------------------------------- */
.footer-partners,
.media-logos,
.footer-main {
  content-visibility: auto;
  contain-intrinsic-size: auto 320px;
}

/* Anchored sections must clear the fixed header. */
:target { scroll-margin-top: calc(var(--header-height) + var(--space-lg)); }
section[id], h2[id], h3[id] {
  scroll-margin-top: calc(var(--header-height) + var(--space-lg));
}

/* --------------------------------------------------------------------------
   10. Print
   People print treatment options and insurance details to take to an
   appointment or hand to a family member. Make that page useful.
   -------------------------------------------------------------------------- */
@media print {
  .header, .footer-newsletter, .floating-cta-group, .cta-modal, .back-to-top,
  .helpline-bar, .filter-sidebar, .tabs, .skip-link, .breadcrumbs,
  .cta-banner, .section-red { display: none !important; }

  body { color: #000; background: #fff; font-size: 11pt; }

  .container, .container-sm, .container-lg { max-width: 100%; padding: 0; }

  /* Reveal animations must not hide printed content. */
  .reveal, [class*="reveal-delay"] { opacity: 1 !important; transform: none !important; }

  /* Panels are hidden behind tabs on screen; print them all. */
  .tab-panel { display: block !important; }

  /* Spell out destinations, since a printed link is useless otherwise. */
  .article-content a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }

  h1, h2, h3 { break-after: avoid; }
  table, figure, .card { break-inside: avoid; }
}

/* --------------------------------------------------------------------------
   11. Narrow-viewport overflow
   Caught by the Playwright pass at 390px on /city, /insurance-provider,
   /clinical-services, /amenities, /sober-living-listing and /resources.
   Five distinct causes, all systemic rather than page-specific.
   -------------------------------------------------------------------------- */

/* (a) A scroll container cannot shrink below its content inside a flex or grid
       parent unless min-width is cleared. Without this the `overflow-x: auto`
       on the table wrappers never engages and the table pushes the page wide. */
.compare-table-wrap,
.coverage-table-wrap,
.sl-table-wrap,
.tabs,
.tabs-sticky,
.filter-pills,
.alpha-nav {
  min-width: 0;
  max-width: 100%;
}

/* Grid and flex children default to min-width:auto, which is what propagates
   the overflow upward in the first place. */
.grid > *,
.content-with-sidebar > *,
.content-with-sidebar-right > * {
  min-width: 0;
}

/* (b) Buttons and badges are nowrap by design, which is right for short
       labels and wrong for the long ones on the hub pages. Let them wrap
       once there is no room, rather than overflowing the viewport. */
@media (max-width: 720px) {
  .btn {
    white-space: normal;
    line-height: 1.25;
    text-align: center;
    max-width: 100%;
  }

  .badge,
  .tag {
    white-space: normal;
    text-align: left;
    max-width: 100%;
  }

  /* A full-width CTA reads better than a ragged wrapped pill on mobile. */
  .btn-lg {
    width: 100%;
  }
}

/* (c) Any table that escaped a wrapper still must not widen the page. */
table {
  max-width: 100%;
}

/* (d) The filter sidebar overshot by its own padding. */
.filter-sidebar {
  box-sizing: border-box;
  max-width: 100%;
}

/* (e) Safety net. `clip` rather than `hidden` because `hidden` on a scroll
       container silently breaks position: sticky, which the header and the
       listing tab bar both rely on. */
html {
  overflow-x: clip;
}

/* --------------------------------------------------------------------------
   12. Mega menu — fit the viewport
   The "Treatment Types" panel is 753px tall and opens at y=76, so it runs off
   the bottom of anything shorter than ~830px: a 1280x720 laptop loses the whole
   Dual Diagnosis / MAT / Cost & Quality row, and those links become unclickable.
   (They stay crawlable — they are in the DOM either way — but nobody can use them.)

   Cap the height against the viewport and let the panel scroll internally, then
   tighten the vertical rhythm on short screens so scrolling is rarely needed.
   -------------------------------------------------------------------------- */
.dropdown.mega-dropdown {
  max-height: calc(100vh - var(--header-height) - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* The panel already sets overflow:hidden for its rounded corners; scrolling
   needs that relaxed on the vertical axis only. */
.mega-dropdown {
  overflow-x: hidden;
}

/* A scrollbar that belongs to the design rather than the OS. */
.mega-dropdown::-webkit-scrollbar {
  width: 10px;
}

.mega-dropdown::-webkit-scrollbar-track {
  background: transparent;
}

.mega-dropdown::-webkit-scrollbar-thumb {
  background: var(--gray-300);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: var(--radius-full);
}

.mega-dropdown::-webkit-scrollbar-thumb:hover {
  background: var(--gray-500);
  border: 3px solid transparent;
  background-clip: content-box;
}

@supports (scrollbar-color: red white) {
  .mega-dropdown {
    scrollbar-width: thin;
    scrollbar-color: var(--gray-300) transparent;
  }
}

/* Short viewports: compress the rhythm before falling back to scrolling.
   Keeps the roomy feel on large screens, which is the point of the design. */
@media (max-height: 900px) {
  .mega-body {
    padding: 20px 32px 18px;
  }

  .mega-grid-4,
  .mega-grid-3 {
    gap: var(--space-md) var(--space-2xl);
  }

  .mega-link {
    padding-top: 5px;
    padding-bottom: 5px;
  }

  .mega-section-title {
    margin-bottom: 8px;
  }
}

@media (max-height: 780px) {
  .mega-header,
  .mega-footer {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .mega-body {
    padding: 14px 32px 14px;
  }

  .mega-link {
    padding-top: 3px;
    padding-bottom: 3px;
    font-size: 0.92rem;
  }
}

/* --------------------------------------------------------------------------
   13. Card media wrappers must be block-level
   The WordPress template parts wrap card images in an <a> so the whole thumb is
   clickable. An <a> is inline by default, so the fixed height on
   .listing-card-img / .blog-card-img was silently ignored and every card
   rendered at the image's natural height — the directory archive looked like a
   photo gallery with the card body pushed out of view.
   -------------------------------------------------------------------------- */
a.listing-card-img,
a.blog-card-img,
a.card-img,
a.carrier-logo {
  display: block;
}

a.listing-card-img { height: 180px; }
a.blog-card-img    { height: 200px; }

/* --------------------------------------------------------------------------
   14. Listing card — data-led layout
   Only 1 of 819 listings has a photo, so the card leads with the identity
   monogram, name and location instead of a stock image slot.
   -------------------------------------------------------------------------- */
.listing-card {
  display: flex;
  flex-direction: column;
}

.listing-card-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--space-lg);
  flex: 1;
}

.listing-card-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

/* Identity tile. Stands in for a facility photo without pretending to be one. */
.listing-card-mark {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  background: linear-gradient(140deg, var(--red-light), var(--gold-light));
  color: var(--red-dark);
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1;
}

.listing-card-headings { min-width: 0; }

.listing-card-name {
  font-size: 1.05rem;
  line-height: 1.3;
  margin: 0 0 2px;
}

.listing-card-name a {
  color: var(--black);
  text-decoration: none;
}

.listing-card:hover .listing-card-name a { color: var(--red); }

.listing-card-location {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  font-size: 0.85rem;
  color: var(--gray-600);
}

.listing-card-location svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--gray-400);
}

.listing-card-distance {
  margin-left: 4px;
  padding: 1px 7px;
  border-radius: var(--radius-full);
  background: var(--gray-100);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--gray-700);
  font-variant-numeric: tabular-nums;
}

.listing-card-accred {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--success);
}

.listing-card-accred svg { width: 14px; height: 14px; flex-shrink: 0; }

.listing-card-text {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--gray-600);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.listing-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.listing-card-tags .tag {
  font-size: 0.72rem;
  padding: 3px 9px;
}

.tag-more {
  background: var(--gray-100);
  color: var(--gray-600);
  font-weight: 700;
}

.listing-card-pay {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 0.78rem;
  color: var(--gray-500);
}

.listing-card-pay svg { width: 14px; height: 14px; flex-shrink: 0; }

.listing-card-footer {
  display: flex;
  gap: 8px;
  margin-top: auto;
  padding-top: var(--space-sm);
}

.listing-card-footer .btn { flex: 1; }

/* Listing hero placeholder — shown when a facility has no photo on record,
   which is nearly all of them. Better than a stock image, and it never
   misrepresents what the facility looks like. */
.listing-hero-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 350px;
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  text-align: center;
  background:
    radial-gradient(120% 120% at 20% 0%, rgba(191, 74, 44, 0.16), transparent 60%),
    radial-gradient(120% 120% at 90% 100%, rgba(169, 133, 90, 0.18), transparent 60%),
    var(--charcoal);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.listing-hero-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
}

.listing-hero-placeholder-name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--white);
  max-width: 26ch;
}

.listing-hero-placeholder-loc {
  font-size: 0.88rem;
  color: var(--gray-400);
}

/* --------------------------------------------------------------------------
   15. Floating CTA vs the footer
   The fixed "Get Help Now" pill overlapped the footer's legal nav, so Privacy
   Policy and Terms could not be clicked. It retires itself once the footer
   scrolls in — see the IntersectionObserver in partials/scripts.html.
   -------------------------------------------------------------------------- */
.floating-cta-group {
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}

.floating-cta-group.is-hidden {
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(0.96);
  pointer-events: none;
}

/* Belt and braces: keep the legal row clear of the pill even before the
   observer fires, and on browsers without IntersectionObserver. */
.footer-bottom .container {
  padding-bottom: 8px;
}

@media (max-width: 720px) {
  .footer-bottom {
    padding-bottom: calc(var(--space-lg) + 64px);
  }
}

/* --------------------------------------------------------------------------
   16. Pagination — symmetrical, polished
   The base .page-btn forced every item into a 40x40 box, so numbers looked
   like bare text and "Next ->" wrapped inside the square. This gives the
   numbers equal bordered chips, makes prev/next auto-width pills, and styles
   the ellipsis as a non-interactive gap.
   -------------------------------------------------------------------------- */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--space-3xl);
}

/* Every item is the same height and reads as a control. */
.pagination .page-btn {
  width: auto;
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  background: var(--white);
  font-size: 0.95rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--gray-700);
  box-shadow: var(--shadow-xs);
  transition: all var(--transition-fast);
}

.pagination .page-btn:hover {
  border-color: var(--red);
  color: var(--red);
  background: var(--red-light);
  transform: translateY(-1px);
}

.pagination .page-btn.active {
  border-color: var(--red);
  background: var(--red);
  color: var(--white);
  box-shadow: var(--shadow-red);
  cursor: default;
}

.pagination .page-btn.active:hover {
  transform: none;
  background: var(--red);
  color: var(--white);
}

/* Prev / next: wider pills with the arrow inline, never wrapping. */
.pagination .page-btn.prev,
.pagination .page-btn.next {
  gap: 6px;
  padding: 0 18px;
  white-space: nowrap;
  font-weight: 700;
}

/* The ellipsis is a gap, not a button. */
.pagination .page-btn.dots {
  min-width: 0;
  width: auto;
  padding: 0 4px;
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--gray-400);
  pointer-events: none;
  letter-spacing: 1px;
}

.pagination .page-btn.dots:hover { transform: none; }

.pagination .page-btn svg {
  width: 15px;
  height: 15px;
}

@media (max-width: 480px) {
  .pagination { gap: 6px; }
  .pagination .page-btn { min-width: 40px; height: 40px; padding: 0 9px; font-size: 0.88rem; }
  .pagination .page-btn.prev,
  .pagination .page-btn.next { padding: 0 14px; }
}

/* ===== END MERGED PAGE CSS ===== */

/* ==========================================================================
   E-E-A-T BYLINE — "Written by … / Medically reviewed by …"
   Two credential pill-cards + a last-updated stamp. Signals expertise and
   trust on health content, and links each person to their profile page.
   ========================================================================== */
.ats-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 12px;
  margin: 0 0 var(--space-2xl);
  padding: 0 0 var(--space-lg);
  border-bottom: 1px solid var(--gray-200);
}

.ats-byline__person {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px 10px 10px;
  background: var(--gray-50, #fafafa);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-full);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.ats-byline__person:hover {
  border-color: var(--gray-300);
  box-shadow: 0 6px 18px rgba(15, 15, 20, 0.08);
  transform: translateY(-1px);
}

.ats-byline__person--review {
  background: #f0fdf4;
  border-color: #bbf7d0;
}
.ats-byline__person--review:hover { border-color: #86efac; }

.ats-byline__img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  flex-shrink: 0;
  background: var(--gray-100);
}

.ats-byline__text { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }

.ats-byline__label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray-500);
}
.ats-byline__person--review .ats-byline__label { color: #067647; }
.ats-byline__label svg { width: 13px; height: 13px; }

.ats-byline__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--gray-900);
}
.ats-byline__person:hover .ats-byline__name { color: var(--red); }
.ats-byline__person--review:hover .ats-byline__name { color: #067647; }

.ats-byline__role { font-size: 0.78rem; color: var(--gray-500); }

.ats-byline__updated {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  align-self: center;
  font-size: 0.8rem;
  color: var(--gray-500);
}
.ats-byline__updated svg { width: 15px; height: 15px; }

@media (max-width: 640px) {
  .ats-byline { gap: 10px; }
  .ats-byline__person { width: 100%; }
  .ats-byline__updated { margin-left: 0; }
}

/* ==========================================================================
   AUTHOR / CLINICIAN PROFILE PAGE
   ========================================================================== */
.author-hero {
  background: #faf8f5;
  border-bottom: 1px solid rgba(20,18,16,.06);
  padding: var(--space-3xl) 0;
  color: var(--ink, #2b2620);
}

.author-hero-card {
  display: flex;
  align-items: center;
  gap: 36px;
  flex-wrap: wrap;
}

.author-hero-avatar { position: relative; flex-shrink: 0; }
.author-hero-avatar img {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  border: 4px solid #fff;
  box-shadow: 0 14px 40px rgba(0,0,0,0.12);
}
.author-hero-verify {
  position: absolute;
  bottom: 6px;
  right: 6px;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #16a34a;
  color: #fff;
  border-radius: 50%;
  border: 3px solid #faf8f5;
}
.author-hero-verify svg { width: 22px; height: 22px; }

.author-hero-info { min-width: 0; flex: 1; }
.author-hero-crumbs { font-size: 0.82rem; color: var(--muted, #7a7168); margin-bottom: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.author-hero-crumbs a { color: var(--muted, #7a7168); text-decoration: none; }
.author-hero-crumbs a:hover { color: var(--brick, #bf4a2c); }

.author-hero-name {
  color: var(--ink, #2b2620);
  margin: 0 0 6px;
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  line-height: 1.1;
}
.author-hero-cred {
  display: inline-block;
  margin-left: 12px;
  font-size: 0.5em;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--brick, #bf4a2c);
  vertical-align: middle;
  white-space: nowrap;
}
.author-hero-role { color: var(--gray-600, #57534e); font-size: 1.1rem; margin: 0 0 18px; }

.author-hero-badges { display: flex; flex-wrap: wrap; gap: 10px; }
.author-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  background: #fff;
  border: 1px solid var(--gray-200, #e7e2db);
  border-radius: var(--radius-full);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink, #2b2620);
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.author-badge svg { width: 15px; height: 15px; color: var(--gray-500, #7a7168); }
.author-badge--rev { background: #ecfdf3; border-color: #b7ebc6; color: #15803d; }
.author-badge--rev svg { color: #16a34a; }

/* body: article + sidebar */
.author-body {
  display: grid;
  grid-template-columns: minmax(0,1fr) 320px;
  gap: 48px;
  align-items: start;
}
.author-body-main h2 { margin-bottom: 16px; }
.author-body-main p { color: var(--gray-700); line-height: 1.75; margin-bottom: 16px; }
.author-focus { font-size: 1rem; }
.author-disclosure {
  margin-top: 24px;
  padding: 16px 18px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-left: 3px solid var(--gray-300);
  border-radius: var(--radius);
  font-size: 0.88rem !important;
  color: var(--gray-500) !important;
}

.author-panel {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 20px;
}
.author-panel h3 { font-size: 1.05rem; margin: 0 0 14px; }
.author-panel--cta { background: linear-gradient(160deg, #fff, var(--red-light)); border-color: #fcd9d6; }
.author-panel--cta p { color: var(--gray-600); font-size: 0.9rem; margin-bottom: 14px; }

.author-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.author-tags li {
  padding: 6px 12px;
  background: var(--gray-100);
  border-radius: var(--radius-full);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--gray-700);
}
.author-degrees { font-size: 0.9rem; color: var(--gray-600); line-height: 1.7; margin: 0; }

@media (max-width: 900px) {
  .author-body { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 640px) {
  .author-hero-card { gap: 22px; }
  .author-hero-avatar img { width: 120px; height: 120px; }
}

/* ==========================================================================
   TEAM GRID (About page)
   ========================================================================== */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 24px;
  max-width: 1120px;
  margin: 0 auto;
}
.team-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.team-card:hover {
  border-color: var(--gray-300);
  box-shadow: 0 16px 40px rgba(15,15,20,0.10);
  transform: translateY(-3px);
}
.team-card-link { display: block; padding: 28px 22px; text-align: center; text-decoration: none; color: inherit; }
.team-card-avatar { position: relative; width: 120px; height: 120px; margin: 0 auto 16px; }
.team-card-avatar img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  background: var(--gray-100);
}
.team-card-verify {
  position: absolute;
  bottom: 2px;
  right: 6px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #16a34a;
  color: #fff;
  border-radius: 50%;
  border: 3px solid var(--white);
}
.team-card-verify svg { width: 17px; height: 17px; }
.team-card-name {
  font-size: 1.1rem;
  margin: 0 0 3px;
  line-height: 1.25;
}
.team-card-cred {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--red);
  letter-spacing: 0.03em;
  margin-top: 3px;
}
.team-card-role { font-size: 0.85rem; color: var(--gray-500); margin: 0 0 12px; font-weight: 600; }
.team-card-bio { font-size: 0.85rem; color: var(--gray-600); line-height: 1.6; margin: 0 0 16px; }
.team-card-more {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--gray-700);
}
.team-card:hover .team-card-more { color: var(--red); }

/* ==========================================================================
   ARTICLE SOURCES + MEDICAL DISCLAIMER
   ========================================================================== */
.article-sources {
  margin: var(--space-2xl) 0 var(--space-lg);
  padding: 26px 28px;
  background: var(--gray-50, #fafafa);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
}
.article-sources-title {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 1.15rem;
  margin: 0 0 8px;
}
.article-sources-title svg { width: 20px; height: 20px; color: var(--gray-500); }
.article-sources-lede { font-size: 0.88rem; color: var(--gray-500); margin: 0 0 16px; }
.article-sources-list {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 8px;
}
.article-sources-list li { font-size: 0.9rem; color: var(--gray-700); line-height: 1.5; }
.article-sources-list a { color: var(--gray-800); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--gray-300); }
.article-sources-list a:hover { color: var(--red); text-decoration-color: var(--red); }

.article-disclaimer {
  display: flex;
  gap: 12px;
  margin: 0 0 var(--space-xl);
  padding: 16px 18px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: var(--radius);
}
.article-disclaimer svg { width: 20px; height: 20px; color: #b45309; flex-shrink: 0; margin-top: 2px; }
.article-disclaimer p { margin: 0; font-size: 0.86rem; line-height: 1.6; color: #713f12; }
.article-disclaimer a { color: #b45309; font-weight: 700; }

/* ============================================================ WARM EDITORIAL RESTYLE POLISH */
/* Warm the info badges (used for care-level/accreditation pills) */
.badge-info { background: var(--gold-light); color: var(--gold-dark); }
.listing-hero .badge, .listing-hero .badge-info {
  background: rgba(195,169,128,.14); color: var(--gold-soft);
  border: 1px solid rgba(195,169,128,.42); border-radius: 999px; padding: 6px 14px; letter-spacing: .04em;
}
/* Pill-shape tags to match the editorial look */
.tag { border-radius: 999px; }
/* Non-heading card titles pick up the Fraunces display face */
.listing-card-name, .listing-card-name a, .blog-card-title, .blog-card-title a, .card-title { font-family: var(--font-display); }
/* Fraunces reads better with slightly looser tracking than the old sans display */
h1, h2, h3, h4, h5, h6, .section-title, .page-hero h1 { letter-spacing: -0.008em; }

/* ============================================================ ROUNDED WARM PAGE BANNER */
.page-hero {
  position: relative;
  width: min(1216px, calc(100% - 64px));
  margin: 8px auto 0;
  padding: 0;
  border-radius: 24px;
  overflow: hidden;
  color: #fff;
  background-color: var(--ink);
  background-image:
    linear-gradient(100deg, rgba(28,20,14,.94) 0%, rgba(46,29,19,.72) 40%, rgba(120,60,35,.28) 70%, rgba(150,80,45,.06) 100%),
    var(--ats-banner, linear-gradient(120deg, #2a201a, #7a3f26));
  background-size: cover, cover;
  background-position: center, center right;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  min-height: 360px;
}
.page-hero::before { display: none; }
.page-hero .container { position: relative; z-index: 2; padding-top: 46px; padding-bottom: 46px; }
.page-hero h1 { font-family: var(--font-display); color: #fff; letter-spacing: -0.01em; }
.page-hero p { color: rgba(255,255,255,0.85); }
/* eyebrow / section label sitting on the banner reads as warm cream */
.page-hero .section-label { color: var(--gold-soft); }
.page-hero .section-label::before { background: var(--gold-soft); }
@media (max-width: 640px) {
  .page-hero { width: calc(100% - 32px); min-height: 300px; border-radius: 18px; }
  .page-hero .container { padding-top: 34px; padding-bottom: 34px; }
}

/* ============================================================ INNER CONTENT + BREADCRUMB POLISH */
/* Breadcrumb: clean white bar, tan separators, home icon */
.breadcrumbs { background: #fff; border-bottom: 1px solid var(--line); padding: 15px 0; }
.breadcrumb-list { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; list-style: none; margin: 0; padding: 0; font-size: 0.86rem; }
.breadcrumb-list a { color: var(--muted); transition: color .15s; }
.breadcrumb-list a:hover { color: var(--brick); }
.breadcrumb-sep { color: var(--gold); }
.breadcrumb-current { color: var(--ink); font-weight: 600; }
.breadcrumb-list li:first-child a::before {
  content: ""; display: inline-block; width: 17px; height: 15px; margin-right: 8px; vertical-align: -2px;
  background: url("../images/network/ats-mark.png") no-repeat center/contain;
}

/* Editorial lede: only the explicit intro paragraph reads large + serif */
.ed-lede {
  font-family: var(--font-display); font-weight: 400; font-size: 1.4rem; line-height: 1.5; color: var(--ink);
}
/* Comfortable reading measure for long-form content */
.article-content, .prose { max-width: 70ch; }
.article-content p, .prose p { color: var(--gray-900); }
/* Custom warm bullets */
.article-content ul, .prose ul { list-style: none; padding-left: 0; }
.article-content ul li, .prose ul li { position: relative; list-style: none; padding-left: 30px; margin-bottom: 12px; }
.article-content ul li::before, .prose ul li::before {
  content: ""; position: absolute; left: 4px; top: 11px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--brick);
}
.article-content ul li::after, .prose ul li::after { content: none; }
/* Editorial pull-quote */
.article-content blockquote, .prose blockquote {
  border-left: 3px solid var(--brick); background: none; border-radius: 0;
  padding: 6px 0 6px 26px; margin: 32px 0;
  font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 1.4rem; line-height: 1.4; color: var(--ink);
}

/* Sibling sub-nav (horizontal term switcher) */
.sibling-nav { border-bottom: 1px solid var(--line); position: sticky; top: 63px; z-index: 15; background: rgba(255,255,255,.94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.sibling-nav .container { overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; }
.sibling-nav .container::-webkit-scrollbar { display: none; }
.sibling-nav ol { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; }
.sibling-nav a { display: block; white-space: nowrap; padding: 15px 2px; font-size: 0.92rem; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; transition: color .15s, border-color .15s; }
.sibling-nav a.on { color: var(--brick); border-color: var(--brick); }
.sibling-nav a:hover { color: var(--ink); }

/* Hero trust line (sparse archive heroes) — icons + text, wraps cleanly, no separators to dangle */
.page-hero .hero-trustline { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; margin: 20px 0 0; padding: 0; color: rgba(255,255,255,.9); font-size: 0.9rem; font-weight: 500; }
.page-hero .hero-trustline li { display: inline-flex; align-items: center; gap: 8px; }
.page-hero .hero-trustline svg { width: 16px; height: 16px; color: var(--gold-soft); flex-shrink: 0; }

/* ============================================================
   BLOG INDEX — world-class resources landing (warm editorial)
   ============================================================ */
.blog-intro { padding: clamp(36px,5vw,64px) 0 0; }
.blog-intro-grid {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px,5vw,72px);
  align-items: end;
}
.blog-intro .section-label { margin-bottom: 16px; }
.blog-intro-lede {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.5rem,2.6vw,2.1rem); line-height: 1.22; color: var(--black);
  margin: 0;
}
.blog-intro-sub { color: var(--gray-600); font-size: 1.05rem; line-height: 1.75; margin: 0; }

.blog-filter { padding: clamp(24px,3.5vw,40px) 0 4px; }
.blog-filter .filter-pills { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-start; margin-bottom: 0; }

@media (max-width: 800px){
  .blog-intro-grid { grid-template-columns: 1fr; gap: 16px; align-items: start; }
}

.blog-grid-section { padding: clamp(26px,4vw,48px) 0 clamp(48px,7vw,88px); }

/* Featured article */
.blog-featured {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 0;
  align-items: stretch; margin-bottom: clamp(36px,5vw,60px);
  background: #fff; border: var(--border); border-radius: var(--radius-2xl);
  overflow: hidden; box-shadow: var(--shadow);
  transition: box-shadow var(--transition), transform var(--transition);
}
.blog-featured:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.blog-featured-media {
  min-height: 320px; background-size: cover; background-position: center;
  background-image: linear-gradient(135deg,#2a201a,#7a3f26);
}
.blog-featured-body { display: flex; flex-direction: column; gap: 14px; padding: clamp(26px,3.5vw,48px); }
.blog-featured-tag {
  align-self: flex-start; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--red); background: rgba(191,74,44,.08); padding: 6px 12px; border-radius: var(--radius-full);
}
.blog-featured-title { font-family: var(--font-display); font-size: clamp(1.6rem,2.6vw,2.15rem); line-height: 1.15; color: var(--black); }
.blog-featured-excerpt { color: var(--gray-600); font-size: 1rem; line-height: 1.7; }
.blog-featured-meta { font-size: .85rem; color: var(--gray-600); }
.blog-featured .text-link { margin-top: auto; font-weight: 600; color: var(--red); display: inline-flex; align-items: center; gap: 6px; }
.blog-featured .text-link svg { width: 18px; height: 18px; transition: transform var(--transition-fast); }
.blog-featured:hover .text-link svg { transform: translateX(4px); }

/* Browse by topic */
.topic-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(16px,2vw,24px); }
.topic-card {
  display: flex; flex-direction: column; gap: 10px; padding: clamp(22px,2.6vw,30px);
  background: #fff; border: var(--border); border-radius: var(--radius-xl);
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}
.topic-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); border-color: rgba(191,74,44,.35); }
.topic-ic {
  width: 52px; height: 52px; display: grid; place-items: center; border-radius: var(--radius-lg);
  background: linear-gradient(140deg, rgba(191,74,44,.10), rgba(195,169,128,.18)); color: var(--red);
}
.topic-ic svg { width: 26px; height: 26px; }
.topic-name { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; color: var(--black); }
.topic-desc { color: var(--gray-600); font-size: .95rem; line-height: 1.6; flex: 1; }
.topic-more { font-weight: 600; font-size: .9rem; color: var(--red); display: inline-flex; align-items: center; gap: 6px; }
.topic-more svg { width: 16px; height: 16px; transition: transform var(--transition-fast); }
.topic-card:hover .topic-more svg { transform: translateX(4px); }

/* Blog FAQ */
.blog-faq { padding: clamp(48px,7vw,88px) 0; }
.blog-faq .accordion-item.active .accordion-content { max-height: 900px; }

@media (max-width: 860px){
  .blog-featured { grid-template-columns: 1fr; }
  .blog-featured-media { min-height: 220px; }
  .topic-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .topic-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   FAQ PAGE — world-class answer hub
   ============================================================ */
.faq-intro { padding: clamp(40px,6vw,72px) 0 clamp(6px,2vw,18px); }
.faq-intro-grid { display: grid; grid-template-columns: 1fr 0.9fr; gap: clamp(28px,5vw,64px); align-items: center; }
.faq-intro-grid--solo { grid-template-columns: 1fr; max-width: 820px; }
.faq-intro-title { font-family: var(--font-display); font-size: clamp(1.6rem,3vw,2.3rem); line-height: 1.15; color: var(--black); margin: 14px 0 18px; }
.faq-intro-copy .ed-lede { margin-bottom: 16px; }
.faq-intro-copy p { color: var(--gray-600); line-height: 1.75; }
.faq-intro-copy a { color: var(--red); font-weight: 600; }
.faq-intro-media { margin: 0; }
.faq-intro-media img { width: 100%; aspect-ratio: 3/2; object-fit: cover; border-radius: var(--radius-2xl); box-shadow: var(--shadow-md); display: block; }

.faq-controls { padding: clamp(18px,3vw,30px) 0 0; }
.faq-search { position: relative; max-width: 640px; margin: 0 auto 20px; }
.faq-search svg { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--gray-400); }
.faq-search input { width: 100%; padding: 15px 18px 15px 48px; border: var(--border); border-radius: var(--radius-full); font-size: 1rem; background: #fff; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); }
.faq-search input:focus { outline: none; border-color: rgba(191,74,44,.5); box-shadow: 0 0 0 4px rgba(191,74,44,.10); }
.faq-filter { justify-content: center; }

.faq-groups { padding: clamp(28px,4vw,48px) 0 clamp(48px,7vw,80px); }
.faq-groups .container { max-width: 880px; }
.faq-group { margin-bottom: clamp(30px,5vw,54px); }
.faq-group[hidden] { display: none; }
.faq-group-title { display: flex; align-items: center; gap: 14px; font-family: var(--font-display); font-size: clamp(1.3rem,2.2vw,1.7rem); color: var(--black); margin: 0 0 6px; padding-bottom: 14px; border-bottom: 2px solid rgba(191,74,44,.16); }
.faq-group-ic { width: 42px; height: 42px; flex-shrink: 0; display: grid; place-items: center; border-radius: var(--radius-lg); background: linear-gradient(140deg, rgba(191,74,44,.10), rgba(195,169,128,.18)); color: var(--red); }
.faq-group-ic svg { width: 22px; height: 22px; }
.faq-groups .faq-lead { color: var(--black); font-weight: 600; }
.faq-groups .accordion-item[hidden] { display: none; }
.faq-groups .accordion-item.active .accordion-content { max-height: 1200px; }
.faq-noresults { text-align: center; color: var(--gray-600); font-size: 1.05rem; padding: 30px 0; }
.faq-noresults a { color: var(--red); font-weight: 600; }

@media (max-width: 860px){
  .faq-intro-grid { grid-template-columns: 1fr; }
  .faq-intro-media { order: -1; }
}

/* ============================================================
   INSURANCE CARRIER HERO — logo-forward, branded gradient
   (no reused photo; unique per carrier via the logo)
   ============================================================ */
.carrier-hero {
  position: relative;
  width: min(1216px, calc(100% - 64px));
  margin: 8px auto 0;
  border-radius: 24px;
  overflow: hidden;
  color: #fff;
  background-color: var(--ink);
  background-image:
    radial-gradient(130% 130% at 82% 12%, rgba(191,74,44,.55) 0%, transparent 55%),
    radial-gradient(120% 120% at 2% 100%, rgba(195,169,128,.30) 0%, transparent 52%),
    linear-gradient(120deg, #241811 0%, #4a2a1a 45%, #7a3f26 100%);
}
.carrier-hero::after {
  content: ""; position: absolute; top: -46px; right: -24px; width: 340px; height: 340px; opacity: .05; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M9 2h6v7h7v6h-7v7H9v-7H2V9h7z'/%3E%3C/svg%3E") no-repeat center/contain;
}
.carrier-hero .container { position: relative; z-index: 2; padding-top: clamp(38px,5vw,58px); padding-bottom: clamp(38px,5vw,58px); }
.carrier-hero .carrier-hero-logo { width: 150px; height: 104px; }
.carrier-hero h1 { font-family: var(--font-display); color: #fff; font-size: clamp(1.7rem,3.4vw,2.55rem); line-height: 1.12; letter-spacing: -0.01em; margin: 12px 0 14px; }
.carrier-hero .badge-red { background: rgba(255,255,255,.15); color: #fff; }
.carrier-hero p { color: rgba(255,255,255,.9); font-size: 1.05rem; line-height: 1.6; max-width: 680px; margin: 0; }
@media (max-width: 640px){
  .carrier-hero { width: calc(100% - 32px); border-radius: 18px; }
}

/* ============================================================
   LISTING PAGE — warmer hero + one-page sticky anchor nav
   ============================================================ */
/* Warm the too-dark hero (espresso -> terracotta, keeps white text legible) */
.listing-hero {
  background:
    radial-gradient(120% 130% at 85% 8%, rgba(191,74,44,.42) 0%, transparent 55%),
    radial-gradient(120% 120% at 0% 100%, rgba(195,169,128,.16) 0%, transparent 50%),
    linear-gradient(120deg, #241811 0%, #43281a 50%, #6d3a24 100%);
}

/* Sticky in-page section nav (replaces hidden tabs) */
.listing-nav {
  position: sticky; top: var(--header-height); z-index: 50;
  background: rgba(255,255,255,.94); backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line);
}
.listing-nav .container { display: flex; gap: 2px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.listing-nav .container::-webkit-scrollbar { display: none; }
.listing-nav-link {
  padding: 15px 18px; font-size: .9rem; font-weight: 600; color: var(--gray-600);
  white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .15s, border-color .15s;
}
.listing-nav-link:hover { color: var(--ink); }
.listing-nav-link.active { color: var(--red); border-bottom-color: var(--red); }

.listing-body { padding: clamp(32px,5vw,52px) 0 clamp(40px,6vw,64px); }
.listing-section { padding: 0; scroll-margin-top: calc(var(--header-height) + 64px); }
.listing-section + .listing-section { margin-top: clamp(30px,4vw,46px); padding-top: clamp(30px,4vw,46px); border-top: 1px solid var(--line); }
.listing-section > h2 { font-family: var(--font-display); font-size: clamp(1.4rem,2.4vw,1.95rem); color: var(--black); margin: 0 0 22px; }

@media (prefers-reduced-motion: no-preference){ html { scroll-behavior: smooth; } }

/* ============================================================
   CARRIER HERO — LIGHT medical-luxury override (replaces the dark block)
   ============================================================ */
.carrier-hero {
  background: linear-gradient(180deg, var(--cream) 0%, #ffffff 100%);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.carrier-hero::after { display: none; }
.carrier-hero .container { position: relative; z-index: 2; padding-top: clamp(30px,4vw,46px); padding-bottom: clamp(30px,4vw,46px); }
.carrier-hero-inner { align-items: center; gap: clamp(20px,3vw,36px); }
.carrier-hero .carrier-hero-logo {
  width: 128px; height: 88px; background: #fff;
  border: 1px solid var(--line); box-shadow: var(--shadow); border-radius: var(--radius-lg);
}
.carrier-hero h1 {
  color: var(--ink); font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.55rem,3vw,2.25rem); line-height: 1.14; letter-spacing: -0.01em; margin: 12px 0 12px;
}
.carrier-hero p { color: var(--gray-600); font-size: 1.02rem; line-height: 1.65; max-width: 720px; margin: 0; }
.carrier-hero .badge-red { background: rgba(191,74,44,.09); color: var(--red); border: none; }
.carrier-hero-actions { margin-top: 24px; }
.carrier-hero-note { color: var(--muted); margin-top: 16px; font-size: 0.85rem; }

/* Carrier hero — DEFINITIVE light band (resets the earlier floating-card geometry) */
.carrier-hero {
  width: auto; max-width: none; margin: 0; border-radius: 0; overflow: visible;
  min-height: 0; display: block;
  background: linear-gradient(180deg, var(--cream) 0%, #ffffff 100%);
  color: var(--ink); border-bottom: 1px solid var(--line);
}
.carrier-hero .container { padding-top: clamp(30px,4vw,44px); padding-bottom: clamp(30px,4vw,44px); }
.carrier-hero-inner { display: flex; align-items: flex-start; gap: clamp(20px,3vw,34px); flex-wrap: wrap; }
.carrier-hero .carrier-hero-logo { flex: 0 0 auto; width: 120px; height: 84px; margin-top: 4px; }
.carrier-hero-inner > div:last-child { flex: 1 1 460px; min-width: 0; }
.carrier-hero { padding: 0; }   /* neutralize global section padding (was inflating the band) */

/* ============================================================
   LISTING HERO — match homepage dark section (clean warm near-black)
   (revert the muddy brown gradient; fix double header offset gap)
   ============================================================ */
.listing-hero {
  background-color: var(--ink);
  background-image: radial-gradient(120% 130% at 82% 12%, rgba(191,74,44,.14) 0%, transparent 58%);
  padding-top: 48px;   /* #main already offsets the fixed header (76px); don't double it */
  padding-bottom: 48px;
}
.listing-hero-info h1 { font-family: var(--font-display); color: #fff; letter-spacing: -0.01em; }

/* Carrier hero disclaimer — refined note (icon + left accent, muted) */
.carrier-hero-note {
  display: inline-flex; align-items: flex-start; gap: 9px;
  margin-top: 22px; padding: 10px 16px;
  background: rgba(33,29,24,.035); border: 1px solid var(--line);
  border-radius: 12px; color: var(--muted); font-size: 0.82rem; line-height: 1.5; max-width: 640px;
}
.carrier-hero-note svg { width: 15px; height: 15px; color: var(--gold); flex-shrink: 0; margin-top: 1px; }

/* ============================================================
   LISTING HERO — LIGHT band (image-less hero → white like insurance)
   ============================================================ */
.listing-hero {
  background: linear-gradient(180deg, var(--cream) 0%, #ffffff 100%);
  border-bottom: 1px solid var(--line);
}
.listing-hero-info h1 { color: var(--ink); }
.listing-hero-meta-item { color: var(--muted); }
.listing-hero-meta-item a { color: var(--ink); }
.listing-hero-meta-item a:hover { color: var(--brick); }
.listing-hero-meta-item svg { color: var(--brick); }
.listing-hero .badge-info { background: rgba(191,74,44,.09); color: var(--brick); border: none; }

/* Carrier disclaimer — clear separation from the buttons above (real fix: spacing) */
/* Higher specificity than `.carrier-hero p { margin:0 }` so the gap actually applies. */
.carrier-hero .carrier-hero-note { margin-top: 30px; }
.listing-hero-subtitle { color: var(--muted); }
.listing-hero .badge-outline { border-color: var(--line); color: var(--ink); background: transparent; }

/* ============================================================
   LIGHT HERO for directory views (taxonomy terms + CPT archives)
   Flat light band (not a rounded pill), dark text — no shared photo.
   ============================================================ */
.ats-lighthero .page-hero {
  width: auto; max-width: none; margin: 0; border-radius: 0; overflow: visible;
  min-height: 0; display: block; padding: 0;
  background: linear-gradient(180deg, var(--cream) 0%, #ffffff 100%);
  color: var(--ink); border-bottom: 1px solid var(--line);
}
.ats-lighthero .page-hero::before { display: none; }
.ats-lighthero .page-hero .container { position: relative; z-index: 2; padding-top: clamp(30px,4vw,48px); padding-bottom: clamp(30px,4vw,48px); }
.ats-lighthero .page-hero h1 { color: var(--ink); }
.ats-lighthero .page-hero p { color: var(--gray-600); }
.ats-lighthero .page-hero .section-label { color: var(--brick); }
.ats-lighthero .page-hero .section-label::before { background: var(--gold); }
.ats-lighthero .page-hero .hero-trustline { color: var(--muted); }
.ats-lighthero .page-hero .hero-trustline svg { color: var(--gold); }
.ats-lighthero .page-hero .badge,
.ats-lighthero .page-hero .badge-red { background: rgba(191,74,44,.09); color: var(--brick); border: none; }
/* Light taxonomy hero: outline pill, stats readable on light */
.ats-lighthero .page-hero .badge-outline { background: transparent; color: var(--muted); border: 1px solid var(--line); }
.ats-lighthero .term-hero-stat strong { color: var(--ink); }
.ats-lighthero .term-hero-stat span { color: var(--muted); }
.ats-lighthero .term-hero-stats { border-color: var(--line); }

/* ============================================================
   PHOTO GALLERY LIGHTBOX
   ============================================================ */
.gallery-grid .gallery-item { border: none; padding: 0; background: none; display: block; width: 100%; font: inherit; }

.lightbox {
  position: fixed; inset: 0; z-index: 2000; display: none;
  align-items: center; justify-content: center;
  background: rgba(20,15,12,.93); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .25s ease;
}
.lightbox.is-open { display: flex; opacity: 1; }
.lightbox-figure { margin: 0; max-width: min(1100px, 92vw); display: flex; flex-direction: column; align-items: center; }
.lightbox-img { max-width: 92vw; max-height: 82vh; object-fit: contain; border-radius: 10px; box-shadow: 0 30px 90px rgba(0,0,0,.55); user-select: none; -webkit-user-drag: none; }
.lightbox-counter { margin-top: 14px; color: rgba(255,255,255,.72); font-size: .9rem; letter-spacing: .03em; }
.lightbox-btn, .lightbox-close {
  position: absolute; border: none; border-radius: 50%; color: #fff;
  background: rgba(255,255,255,.12); display: grid; place-items: center; cursor: pointer;
  transition: background .2s ease;
}
.lightbox-btn:hover, .lightbox-close:hover { background: rgba(255,255,255,.26); }
.lightbox-btn { top: 50%; transform: translateY(-50%); width: 54px; height: 54px; }
.lightbox-btn svg { width: 24px; height: 24px; }
.lightbox-prev { left: 22px; }
.lightbox-next { right: 22px; }
.lightbox-close { top: 22px; right: 22px; width: 46px; height: 46px; }
.lightbox-close svg { width: 22px; height: 22px; }
@media (max-width: 600px) {
  .lightbox-btn { width: 44px; height: 44px; }
  .lightbox-prev { left: 8px; } .lightbox-next { right: 8px; }
  .lightbox-close { top: 12px; right: 12px; }
}

/* Byline polish: kill the long-form link underline on the byline (it's an <a> inside
   .article-content); keep "Last updated" left, on its own line */
.article-content .ats-byline a,
.article-content .ats-byline a:hover,
.ats-byline__person * { text-decoration: none; border-bottom: 0; box-shadow: none; }
.ats-byline__updated { margin-left: 0; flex-basis: 100%; margin-top: 4px; align-self: flex-start; }
@media (min-width: 641px){ .ats-byline__updated { justify-content: flex-start; } }

/* ============================================================
   SINGLE POST — two-column layout with sticky sidebar
   ============================================================ */
.article-layout { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: clamp(32px,5vw,64px); align-items: start; }
.article-layout .article-content { max-width: none; }
.article-sidebar-inner { position: sticky; top: calc(var(--header-height) + 20px); display: flex; flex-direction: column; gap: 18px; }
.sb-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px; }
.sb-card--cta { background: var(--ink); color: #fff; }
.sb-title { display: block; font-family: var(--font-display); font-size: 1.1rem; margin: 0 0 14px; color: var(--ink); }
.sb-card--cta .sb-title { color: #fff; margin-bottom: 8px; }
.sb-card--cta p { color: var(--cream-mute); font-size: 0.9rem; margin: 0 0 16px; line-height: 1.5; }
.sb-cats { list-style: none; margin: 0; padding: 0; }
.sb-cats a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0; color: var(--text); border-bottom: 1px solid var(--line); font-size: 0.92rem; font-weight: 500; }
.sb-cats li:last-child a { border-bottom: none; }
.sb-cats a:hover { color: var(--brick); }
.sb-cats a span { color: var(--muted); font-size: 0.78rem; font-weight: 400; }
.sb-recent { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.sb-recent a { color: var(--text); font-weight: 600; font-size: 0.9rem; line-height: 1.35; }
.sb-recent a:hover { color: var(--brick); }
.sb-recent time { display: block; color: var(--muted); font-size: 0.76rem; font-weight: 400; margin-top: 4px; }
@media (max-width: 900px) {
  .article-layout { grid-template-columns: 1fr; }
  .article-sidebar-inner { position: static; }
}

/* FOOTER — Ask AI row: styles live in shell.css (footer is site-wide; main.css
   is dequeued on the homepage). */

/* ============================================================
   FAQ GUIDES (faq CPT cards) — FAQ page + /faq/ archive
   ============================================================ */
.faq-archive { padding: clamp(40px,6vw,72px) 0; }
.faq-guides { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px,2vw,22px); }
.faq-guide { display: flex; flex-direction: column; gap: 10px; padding: clamp(22px,2.6vw,28px); background: #fff; border: var(--border); border-radius: var(--radius-xl); transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition); }
.faq-guide:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: rgba(191,74,44,.35); }
.faq-guide-q { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; color: var(--black); line-height: 1.25; }
.faq-guide-ex { color: var(--gray-600); font-size: .95rem; line-height: 1.6; flex: 1; }
.faq-guide-more { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .9rem; color: var(--red); }
.faq-guide-more svg { width: 16px; height: 16px; transition: transform var(--transition-fast); }
.faq-guide:hover .faq-guide-more svg { transform: translateX(4px); }
@media (max-width: 700px){ .faq-guides { grid-template-columns: 1fr; } }

/* ============================================================
   LISTING — directory disclaimer bar + contact card
   ============================================================ */
.listing-disclaimer { background: rgba(191,74,44,.07); border-top: 1px solid rgba(191,74,44,.14); border-bottom: 1px solid rgba(191,74,44,.14); }
.listing-disclaimer .container { display: flex; align-items: flex-start; gap: 12px; padding-top: 14px; padding-bottom: 14px; }
.listing-disclaimer svg { width: 19px; height: 19px; flex-shrink: 0; margin-top: 1px; color: var(--red); }
.listing-disclaimer p { margin: 0; font-size: 0.86rem; line-height: 1.55; color: var(--muted); }

/* Two-column listing body: content + sticky contact sidebar */
.listing-layout { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: clamp(28px,4vw,52px); align-items: start; }
.listing-main { min-width: 0; }
/* Stretch the column so the sticky card has room to travel as the page scrolls. */
.listing-aside { align-self: stretch; }
.listing-aside-inner { position: sticky; top: calc(var(--header-height) + 74px); }
.listing-cta-card {
  background: linear-gradient(180deg, var(--cream) 0%, #ffffff 100%);
  border: 1px solid var(--line); border-radius: var(--radius-xl); padding: 24px; box-shadow: var(--shadow);
}
.listing-cta-eyebrow { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--red); margin-bottom: 10px; }
.listing-cta-title { font-family: var(--font-display); font-size: 1.35rem; color: var(--black); margin: 0 0 10px; line-height: 1.2; }
.listing-cta-card p { color: var(--gray-600); font-size: .92rem; line-height: 1.6; margin: 0 0 18px; }
.listing-cta-card .btn { width: 100%; justify-content: center; }
.listing-cta-card .btn + .btn { margin-top: 10px; }
@media (max-width: 900px) {
  .listing-layout { grid-template-columns: 1fr; }
  .listing-aside { order: -1; }              /* CTA first on mobile */
  .listing-aside-inner { position: static; }
}
/* Article fills the main column when a listing/contact sidebar is present */
.listing-main .article-content { max-width: none; }

/* ============================================================
   MENTAL HEALTH HUB (page-mental-health.php)
   ============================================================ */
.mh-split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.mh-split .mh-copy > .section-label { margin-bottom: 10px; }
.mh-figure { margin: 0; }
.mh-figure img { width: 100%; aspect-ratio: 3/2; object-fit: cover; border-radius: var(--radius-2xl); box-shadow: var(--shadow-lg); display: block; }
.mh-split--reverse .mh-figure { order: -1; }
@media (max-width: 860px) {
  .mh-split { grid-template-columns: 1fr; gap: 28px; }
  .mh-split--reverse .mh-figure, .mh-figure { order: -1; }
}

/* Crisis / 988 callout — high-trust safety band for a YMYL page */
.mh-crisis { display: flex; gap: 18px; align-items: flex-start; max-width: 900px; margin: 0 auto;
  background: linear-gradient(135deg, #fff, var(--gold-light)); border: 1px solid rgba(169,133,90,.35);
  border-left: 5px solid var(--brick); border-radius: var(--radius-xl); padding: clamp(22px,3vw,32px); box-shadow: var(--shadow-md); }
.mh-crisis svg { flex: 0 0 auto; color: var(--brick); margin-top: 2px; }
.mh-crisis h3 { margin: 0 0 6px; font-size: 1.18rem; }
.mh-crisis p { margin: 0 0 10px; color: var(--ink, #33302c); }
.mh-crisis p:last-child { margin-bottom: 0; }
.mh-crisis a { color: var(--brick-dark); font-weight: 700; }
.mh-crisis .mh-crisis-lines { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 8px; }
.mh-crisis .mh-crisis-lines li { padding-left: 18px; position: relative; }
.mh-crisis .mh-crisis-lines li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--brick); }

/* Signs / checklist — snippet-friendly two-column check list */
.mh-checklist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 32px; max-width: 900px; }
.mh-checklist li { position: relative; padding-left: 34px; line-height: 1.55; }
.mh-checklist li::before { content: ""; position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: var(--radius-full);
  background: var(--brick); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/16px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/16px no-repeat;
  box-shadow: 0 2px 6px rgba(191,74,44,.28); }
@media (max-width: 620px) { .mh-checklist { grid-template-columns: 1fr; } }

/* ============================================================
   E-E-A-T review line on clinical hub pages (after breadcrumbs)
   ============================================================ */
.ats-review-band { background: transparent; }
.ats-review-line {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 4px 0 2px; color: var(--muted, #7a7168); font-size: 0.9rem;
}
.ats-review-line svg { width: 17px; height: 17px; color: var(--brick); flex-shrink: 0; }
.ats-review-line a { color: var(--ink, #2b2620); font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(191,74,44,.3); }
.ats-review-line a:hover { color: var(--brick-dark); border-bottom-color: var(--brick); }
.ats-review-line__sep { color: rgba(20,18,16,.3); }

/* ============================================================
   AUTHOR PAGE — "Meet the rest of the team" grid
   ============================================================ */
.author-team { padding: var(--space-4xl) 0; }
.author-team-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px;
}
.author-team-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 28px 20px; background: #fff; border: 1px solid var(--gray-200, #e7e2db);
  border-radius: var(--radius-xl, 20px); text-decoration: none; color: inherit;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.author-team-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,.10); border-color: rgba(191,74,44,.35); }
.author-team-avatar { position: relative; margin-bottom: 16px; }
.author-team-avatar img { width: 92px; height: 92px; border-radius: 50%; object-fit: cover; object-position: center top; border: 3px solid #fff; box-shadow: 0 6px 18px rgba(0,0,0,.10); }
.author-team-verify {
  position: absolute; bottom: 0; right: 0; width: 26px; height: 26px; display: grid; place-items: center;
  background: #16a34a; color: #fff; border-radius: 50%; border: 2px solid #fff;
}
.author-team-verify svg { width: 14px; height: 14px; }
.author-team-name { font-family: var(--serif, Georgia, serif); font-weight: 600; font-size: 1.05rem; color: var(--ink, #2b2620); line-height: 1.25; }
.author-team-name small { display: block; font-family: var(--sans, sans-serif); font-weight: 700; font-size: 0.72rem; letter-spacing: .03em; color: var(--brick, #bf4a2c); margin-top: 4px; }
.author-team-role { font-size: 0.86rem; color: var(--gray-600, #57534e); margin-top: 6px; line-height: 1.4; }
.author-team-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-size: 0.85rem; font-weight: 700; color: var(--brick, #bf4a2c); }
.author-team-link svg { width: 15px; height: 15px; transition: transform .2s var(--ease); }
.author-team-card:hover .author-team-link svg { transform: translateX(3px); }
@media (max-width: 980px) { .author-team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .author-team-grid { grid-template-columns: 1fr; } }