/* ============================================
   Hidden Gem Healing — Stylesheet
   Color Palette, Typography, Layout, Components
   ============================================ */

/* --- CSS Variables --- */
:root {
  --deep: #1E3A2F;
  --sage: #3D6B5A;
  --mid: #5E8E7A;
  --light: #A8C5B8;
  --pale: #D4E4DC;
  --cream: #FAF8F4;
  --warm: #F5F0E8;
  --gold: #B8924A;
  --gold-light: #D4B06A;
  --gold-text: #8C6B33;    /* AA-passing dark tan for .section-label (the lighter --gold fails AA on cream) */
  --text: #2A2A2A;
  --text-prose: #4A4A4A;    /* AAA-passing on cream; for paragraph copy */
  --text-light: #6B6B6B;    /* for secondary/tertiary UI text */
  --white: #FFFFFF;
  --earth: #6B5B3E;
  --earth-light: #F5F0E6;
}

/* --- Reset & Base --- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
#contact { scroll-margin-top: 100px; }
body {
  font-family: 'Outfit', sans-serif;
  color: var(--text);
  background: var(--cream);
  font-weight: 300;
  line-height: 1.7;
  overflow-x: hidden;
}
h1, h2, h3, h4, h5 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  line-height: 1.2;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; }

/* --- Container --- */
.container { max-width: 1200px; margin: 0 auto; padding-inline: clamp(20px, 5vw, 48px); }

/* --- Navigation --- */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: rgba(250,248,244,0.95);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(61,107,90,0.08);
  transition: all .4s;
}
nav.scrolled { box-shadow: 0 1px 0 rgba(30,58,47,0.08), 0 8px 24px rgba(30,58,47,0.04); }

.nav-inner {
  max-width: 1200px; margin: 0 auto;
  padding: 14px clamp(20px, 5vw, 48px);
  display: flex; align-items: center; justify-content: space-between;
}
.nav-logo {
  display: flex; align-items: center;
  text-decoration: none; color: var(--deep);
}
.nav-logo img { height: 44px; width: auto; }

.nav-links { display: flex; gap: 26px; align-items: center; }
.nav-links a {
  text-decoration: none; color: var(--text-light);
  font-size: 13px; font-weight: 500;
  letter-spacing: .5px; text-transform: uppercase;
  transition: color .3s; white-space: nowrap;
  position: relative; padding-bottom: 4px;
}
.nav-links a:not(.nav-cta)::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px; background: var(--sage);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .25s ease;
}
.nav-links a:not(.nav-cta):hover::after,
.nav-links a.active::after,
.nav-links .nav-dropdown.active > a::after {
  transform: scaleX(1);
}
.nav-links a:hover, .nav-links a.active { color: var(--sage); }

/* Nav dropdown (Services mega-menu) */
.nav-dropdown { position: relative; }
.nav-dropdown > a { cursor: pointer; }
.nav-dropdown > a::after {
  content: ' \25BE'; font-size: 10px; opacity: .6;
  display: inline-block; margin-left: 2px;
  transition: transform .25s ease;
}
.nav-dropdown:hover > a::after,
.nav-dropdown:focus-within > a::after { transform: rotate(180deg); }

.dropdown-menu {
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: var(--white); border-radius: 16px;
  box-shadow: 0 12px 40px rgba(30,58,47,0.14);
  border: 1px solid rgba(61,107,90,0.08);
  opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s, transform .2s;
  pointer-events: none;
}
/* Invisible bridge so mouse doesn't lose hover in the gap */
.dropdown-menu::before {
  content: ''; position: absolute; top: -16px; left: 0; right: 0; height: 16px;
}
.nav-dropdown:hover .dropdown-menu,
.nav-dropdown:focus-within .dropdown-menu {
  opacity: 1; visibility: visible; pointer-events: auto;
}

/* Mega-menu: 5 service tiles in a row, each with photo + title + sub */
.mega-menu {
  width: 920px; max-width: calc(100vw - 32px);
  padding: 18px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.mega-item {
  display: flex !important; flex-direction: column;
  text-decoration: none !important; color: inherit !important;
  padding: 12px !important;
  border-radius: 12px;
  transition: background .2s, transform .2s;
  text-transform: none !important; letter-spacing: 0 !important;
  white-space: normal !important;
}
.mega-item:hover {
  background: rgba(61,107,90,0.05);
  transform: translateY(-2px);
}
.mega-item-icon {
  width: 64px; height: 64px; margin: 0 auto 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--cream);
  border-radius: 14px;
  color: var(--sage);
  transition: background .2s, color .2s;
}
.mega-item-icon svg { width: 32px; height: 32px; display: block; }
.mega-item:hover .mega-item-icon { background: var(--pale); color: var(--deep); }
.mega-item-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 17px; font-weight: 600;
  color: var(--deep);
  margin-bottom: 4px;
  text-transform: none; letter-spacing: 0;
}
.mega-item-sub {
  font-size: 11px; color: var(--text-light);
  line-height: 1.5;
  text-transform: none; letter-spacing: 0;
}
@media (max-width: 1100px) {
  .mega-menu { width: 720px; grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 800px) {
  .mega-menu { display: none; }
}

.nav-cta {
  background: var(--sage) !important; color: var(--white) !important;
  padding: 10px 22px !important; border-radius: 100px !important;
  font-weight: 500 !important; letter-spacing: 1px !important;
  font-size: 11px !important; transition: all .3s !important;
}
.nav-cta:hover { background: var(--deep) !important; }
.nav-phone, .nav-existing {
  display: inline-flex !important; align-items: center; gap: 6px;
  padding: 9px 16px !important;
  border: 1px solid var(--sage) !important;
  border-radius: 100px !important;
  color: var(--sage) !important;
  font-size: 11px !important; font-weight: 500 !important;
  letter-spacing: 1px !important; text-transform: uppercase !important;
  transition: all .3s !important;
}
.nav-phone:hover, .nav-existing:hover { background: var(--sage); color: var(--white) !important; }
.nav-phone .nav-phone-icon { font-size: 13px; line-height: 1; }
.nav-cta::after, .nav-phone::after, .nav-existing::after { display: none !important; }

/* Mobile hamburger */
.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; }
.hamburger span { width: 22px; height: 2px; background: var(--deep); transition: all .3s; }
.mobile-menu {
  display: none; position: absolute; top: 100%; left: 0; right: 0;
  background: var(--cream); padding: 20px 24px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.1);
}
.mobile-menu.open { display: flex; flex-direction: column; gap: 16px; }
.mobile-menu a {
  text-decoration: none; color: var(--text-light);
  font-size: 14px; font-weight: 400; letter-spacing: .5px;
  text-transform: uppercase; padding-bottom: 16px;
  border-bottom: 1px solid rgba(61,107,90,0.08);
}
.mobile-menu a:last-child { border-bottom: none; }
.mobile-menu a.mobile-sub {
  padding-left: 20px; font-size: 13px;
  color: var(--sage);
}

/* --- Buttons --- */
.btn-primary {
  background: var(--sage); color: var(--white);
  padding: 16px 36px; border-radius: 100px; border: none;
  font-family: 'Outfit', sans-serif; font-size: 14px; font-weight: 500;
  letter-spacing: 1px; text-transform: uppercase;
  cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
  transition: all .3s;
}
.btn-primary:hover {
  background: var(--deep); transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(30,58,47,0.2);
}
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-white:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 3px;
}
.btn-secondary {
  background: transparent; color: var(--sage);
  padding: 16px 36px; border-radius: 100px;
  border: 1.5px solid var(--sage);
  font-family: 'Outfit', sans-serif; font-size: 14px; font-weight: 500;
  letter-spacing: 1px; text-transform: uppercase;
  cursor: pointer; text-decoration: none; transition: all .3s;
}
.btn-secondary:hover { background: var(--sage); color: var(--white); }
.btn-white {
  background: var(--white); color: var(--deep);
  padding: 16px 36px; border-radius: 100px; border: none;
  font-family: 'Outfit', sans-serif; font-size: 14px; font-weight: 500;
  letter-spacing: 1px; text-transform: uppercase;
  cursor: pointer; text-decoration: none; transition: all .3s;
}
.btn-white:hover { background: var(--cream); transform: translateY(-2px); }

/* --- Section Defaults --- */
section { padding: 110px 0; }
.section-label {
  font-size: 12px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--gold-text); font-weight: 600; margin-bottom: 16px;
}
.section-title {
  font-size: clamp(30px, 4vw, 50px); color: var(--deep); margin-bottom: 20px;
}
.section-desc {
  font-size: 16px; color: var(--text-prose);
  max-width: 65ch; line-height: 1.8;
}

/* --- Tags & Badges --- */
.persona-tag {
  display: inline-block; background: rgba(61,107,90,0.06);
  color: var(--sage); font-size: 11px; padding: 5px 12px;
  border-radius: 100px; letter-spacing: .4px;
  text-transform: uppercase; font-weight: 500; margin: 0 4px 4px 0;
}
.cred {
  background: rgba(61,107,90,0.07); color: var(--sage);
  font-size: 11px; padding: 5px 12px; border-radius: 100px;
  font-weight: 500; letter-spacing: .3px;
  display: inline-block; margin: 0 4px 4px 0;
}

/* --- Page Divider --- */
.page-divider { background: var(--deep); padding: 20px 0; text-align: center; }
.page-divider h2 {
  font-size: 14px; color: var(--gold-light); letter-spacing: 3px;
  text-transform: uppercase; font-family: 'Outfit', sans-serif; font-weight: 500;
}

/* ============================================
   HERO SECTION
   ============================================ */
.hero {
  min-height: 100vh; display: flex; align-items: center;
  background: linear-gradient(165deg, var(--cream) 0%, var(--warm) 40%, var(--pale) 100%);
  position: relative; overflow: hidden; padding-top: 80px;
}
.hero::before {
  content: ''; position: absolute; top: -20%; right: -10%;
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(61,107,90,0.06) 0%, transparent 70%);
  border-radius: 50%;
}
.hero::after {
  content: ''; position: absolute; bottom: -15%; left: 20%;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(184,146,74,0.04) 0%, transparent 70%);
  border-radius: 50%;
}
.hero-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 60px;
  align-items: center; padding: 60px 0; position: relative; z-index: 2;
}
/* Reusable status chip. Apply with .status-chip on any provider page
   hero or section. Variants: .status-chip--gold (default sage),
   .status-chip--quiet (no pulse dot, neutral coloring). */
.status-chip, .hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(61,107,90,0.08); padding: 8px 20px;
  border-radius: 100px; font-size: 12px; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--sage); font-weight: 500;
  margin-bottom: 24px;
}
.status-chip::before, .hero-badge::before {
  content: ''; width: 8px; height: 8px;
  background: var(--gold); border-radius: 50%;
  animation: pulse 2s infinite;
}
.status-chip--quiet::before { animation: none; opacity: 0.6; }
.status-chip--earth { color: var(--earth); background: rgba(107,91,62,0.08); }
.status-chip--earth::before { background: var(--earth); }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
.hero h1 { font-size: clamp(36px, 8vw, 60px); line-height: 1.05; color: var(--deep); margin-bottom: 24px; }
.hero h1 em, .ps-title em, .section-title em { font-style: italic; color: var(--sage); }
.hero-sub {
  font-size: 17px; color: var(--text-prose);
  max-width: 460px; margin-bottom: 36px; line-height: 1.8;
}
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-img {
  width: 100%; max-width: 720px;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 30px 80px rgba(30,58,47,0.15);
}
.hero-img::after {
  /* Soft tan-tinted top overlay that blends the photo into the cream */
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 30%;
  background: linear-gradient(180deg, rgba(184,146,74,0.10), transparent);
  pointer-events: none;
}
.hero-img img {
  width: 100%; height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* ============================================
   TRUST BAR
   ============================================ */
.trust { background: var(--deep); padding: 28px 0; }
.trust-inner { display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; }
.trust-item {
  display: flex; align-items: center; gap: 8px;
  color: rgba(255,255,255,0.6); font-size: 13px;
}
.trust-item strong { color: var(--gold-light); }

/* ============================================
   SPLIT CARDS (Two Paths)
   ============================================ */
.split-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px; margin-top: 60px;
}
.split-card {
  border-radius: 24px; overflow: hidden; transition: all .3s;
  text-decoration: none; color: var(--text);
}
.split-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 60px rgba(30,58,47,0.12);
}
.split-photo { width: 100%; height: 200px; overflow: hidden; }
.split-photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 25%;
  transition: transform .5s ease;
}
.split-card:hover .split-photo img { transform: scale(1.04); }
.split-body { padding: 36px; }
.split-tag {
  font-size: 12px; letter-spacing: 1.5px;
  text-transform: uppercase; font-weight: 500; margin-bottom: 8px;
}
.sc-sage { background: var(--cream); border: 1px solid rgba(61,107,90,0.08); }
.sc-sage .split-tag { color: var(--sage); }
.sc-earth { background: var(--earth-light); border: 1px solid rgba(107,91,62,0.08); }
.sc-earth .split-tag { color: var(--earth); }
.sc-pediatric { background: var(--warm); border: 1px solid rgba(184,146,74,0.12); }
.sc-pediatric .split-tag { color: var(--gold); }
.sc-aesthetic { background: var(--pale); border: 1px solid rgba(61,107,90,0.15); }
.sc-aesthetic .split-tag { color: var(--deep); }
.split-card h3 { font-size: 28px; color: var(--deep); margin-bottom: 6px; }
.split-card .provider { font-size: 13px; color: var(--gold); margin-bottom: 14px; font-weight: 500; }
.split-card p { font-size: 14px; color: var(--text-light); line-height: 1.7; margin-bottom: 16px; }
.split-link {
  font-size: 13px; font-weight: 500; letter-spacing: .5px;
  text-transform: uppercase; color: var(--sage);
  display: inline-flex; align-items: center; gap: 6px; transition: gap .3s;
}
.split-card:hover .split-link { gap: 12px; }

/* ============================================
   TEAM SECTION
   ============================================ */
.team-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; margin-top: 60px; }
.t-card { text-align: center; }
.t-photo {
  width: 160px; height: 160px; border-radius: 50%;
  margin: 0 auto 16px; box-shadow: 0 6px 24px rgba(30,58,47,0.08);
  overflow: hidden;
}
.t-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.t-name {
  font-family: 'Cormorant Garamond', serif; font-size: 22px;
  font-weight: 600; color: var(--deep); margin-bottom: 4px;
}
.t-title {
  font-size: 12px; color: var(--gold); letter-spacing: 1px;
  text-transform: uppercase; font-weight: 500; margin-bottom: 10px;
}
.t-bio {
  font-size: 13px; color: var(--text-light);
  max-width: 300px; margin: 0 auto; line-height: 1.7;
}

/* ============================================
   HERD SECTION
   ============================================ */
.herd-row { display: flex; justify-content: center; gap: 36px; flex-wrap: wrap; margin-top: 48px; }
.h-card { text-align: center; }
.h-photo {
  width: 140px; height: 140px; border-radius: 50%;
  margin: 0 auto 10px; box-shadow: 0 4px 16px rgba(30,58,47,0.08);
  overflow: hidden; background: var(--pale);
}
.h-photo img { width: 100%; height: 100%; object-fit: cover; }
.h-name {
  font-family: 'Cormorant Garamond', serif; font-size: 18px;
  color: var(--deep); font-weight: 600;
}
.h-detail { font-size: 11px; color: var(--text-light); }

/* ============================================
   PERSONA SECTIONS (Sara & Abbey pages)
   ============================================ */
.ps-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center;
}
.ps-grid.reverse { direction: rtl; }
.ps-grid.reverse > * { direction: ltr; }
.ps-visual {
  border-radius: 20px; overflow: hidden;
  box-shadow: 0 10px 36px rgba(30,58,47,0.08);
}
.ps-visual img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/5; }
.ps-eyebrow {
  font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
  font-weight: 500; margin-bottom: 10px; color: var(--sage);
}
.ps-title { font-size: clamp(26px, 3vw, 38px); color: var(--deep); margin-bottom: 14px; }
.ps-body {
  font-size: 15px; color: var(--text-prose); line-height: 1.8; margin-bottom: 20px;
}
.ps-list { list-style: none; margin-bottom: 24px; }
.ps-list li {
  padding: 7px 0 7px 22px; position: relative;
  font-size: 14px; color: var(--text-light);
}
.ps-list li::before {
  content: ''; position: absolute; left: 0; top: 14px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--gold);
}

/* ============================================
   STEP CARDS (How EAP Works)
   ============================================ */
.steps-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 48px; }
.step-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px; padding: 32px 24px; transition: all .3s;
}
.step-card:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(184,146,74,0.3);
}
.step-num {
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(184,146,74,0.15);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cormorant Garamond', serif; font-size: 22px;
  font-weight: 600; color: var(--gold-light); margin-bottom: 16px;
}
.step-card h3 { font-size: 20px; color: var(--white); margin-bottom: 8px; }
.step-card p { font-size: 13px; color: rgba(255,255,255,0.5); line-height: 1.7; }

/* ============================================
   COMPARISON CARDS
   ============================================ */
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 48px; }
.compare-card { border-radius: 18px; padding: 36px 28px; }
.compare-card.them {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}
.compare-card.us {
  background: rgba(184,146,74,0.1);
  border: 1px solid rgba(184,146,74,0.2);
}
.compare-card h3 { font-size: 22px; margin-bottom: 16px; }
.compare-card.them h3 { color: rgba(255,255,255,0.4); }
.compare-card.us h3 { color: var(--gold-light); }
.cl { list-style: none; }
.cl li {
  padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: 14px; display: flex; align-items: flex-start; gap: 10px;
}
.compare-card.them .cl li { color: rgba(255,255,255,0.35); }
.compare-card.them .cl li::before { content: '\2715'; color: rgba(255,255,255,0.2); min-width: 16px; }
.compare-card.us .cl li { color: rgba(255,255,255,0.8); }
.compare-card.us .cl li::before { content: '\2713'; color: var(--gold-light); min-width: 16px; }

/* ============================================
   SERVICE CARDS (Abbey)
   ============================================ */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; }
.svc-card {
  background: var(--cream); border-radius: 18px; padding: 32px 24px;
  border: 1px solid rgba(61,107,90,0.06); transition: all .3s;
}
.svc-card:hover {
  box-shadow: 0 10px 32px rgba(30,58,47,0.06);
  transform: translateY(-3px);
}
.svc-icon { font-size: 26px; margin-bottom: 14px; }
.svc-card h3 { font-size: 18px; color: var(--deep); margin-bottom: 6px; }
.svc-card p { font-size: 13px; color: var(--text-light); line-height: 1.7; }

/* ============================================
   TABS (Specialties on abbey.html)
   ============================================ */
.tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
        margin-top: 48px; border-bottom: 1px solid rgba(61,107,90,0.12); padding-bottom: 0; }
.tabs-tab { background: transparent; border: none; padding: 14px 22px;
            font-family: 'Outfit', sans-serif; font-size: 13px; letter-spacing: .5px;
            text-transform: uppercase; color: var(--text-light); cursor: pointer;
            border-bottom: 2px solid transparent; transition: all .25s; margin-bottom: -1px; }
.tabs-tab:hover { color: var(--sage); }
.tabs-tab.is-active { color: var(--deep); border-bottom-color: var(--gold); font-weight: 500; }
.tabs-tab:focus-visible { outline: 2px solid var(--sage); outline-offset: 4px; border-radius: 4px; }
.tabs-panels { margin-top: 36px; }
.tabs-panel { display: none; max-width: 720px; margin: 0 auto; text-align: center; }
.tabs-panel.is-active { display: block; }
.tabs-panel h3 { font-size: 28px; color: var(--deep); margin-bottom: 16px; }
.tabs-panel p { font-size: 15px; color: var(--text-light); line-height: 1.8; margin-bottom: 28px; }
@media (max-width: 720px) {
  .tabs-tab { padding: 12px 14px; font-size: 12px; }
}

/* ============================================
   PRICING
   ============================================ */
.pricing-flex { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; max-width: 760px; margin: 48px auto 0; }
.price-card {
  background: var(--white); border-radius: 16px; padding: 32px 28px;
  border: 1px solid rgba(61,107,90,0.08);
  box-shadow: 0 1px 2px rgba(30,58,47,0.06), 0 8px 24px rgba(30,58,47,0.04);
  position: relative;
}
/* Featured pricing variant. Apply with .price-card.is-featured to mark
   the most-booked service; renders a sage-tinted border + a tiny
   "MOST BOOKED" chip in the top-right corner. */
.price-card.is-featured {
  border: 1.5px solid rgba(61,107,90,0.30);
  box-shadow: 0 2px 4px rgba(30,58,47,0.08), 0 16px 36px rgba(30,58,47,0.06);
}
.price-card.is-featured::before {
  content: 'Most booked'; position: absolute; top: -10px; right: 20px;
  background: var(--sage); color: var(--white);
  font-size: 10px; font-weight: 600; letter-spacing: 1.2px;
  text-transform: uppercase; padding: 4px 10px; border-radius: 100px;
  box-shadow: 0 2px 6px rgba(30,58,47,0.18);
}
.price-card h3 {
  font-family: 'Cormorant Garamond', serif; font-size: 22px;
  color: var(--deep); margin-bottom: 4px;
}
.price-provider { font-size: 12px; color: var(--gold); margin-bottom: 16px; font-weight: 500; }
.price-item {
  display: flex; justify-content: space-between;
  padding: 9px 0; border-bottom: 1px solid rgba(0,0,0,0.04); font-size: 13px;
}
.price-item span:last-child { font-weight: 500; color: var(--deep); font-variant-numeric: tabular-nums; }
.price-note {
  margin-top: 16px; font-size: 12px;
  color: var(--text-light); text-align: center;
}

/* ============================================
   FAQ ACCORDION
   ============================================ */
.faq-list { max-width: 720px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid rgba(61,107,90,0.1); padding: 20px 0; }
.faq-q {
  font-family: 'Cormorant Garamond', serif; font-size: 20px;
  color: var(--deep); cursor: pointer; display: flex;
  justify-content: space-between; align-items: center; font-weight: 600;
}
.faq-q::after {
  content: '+'; font-size: 22px; color: var(--sage);
  transition: transform .3s; font-family: 'Outfit', sans-serif; font-weight: 300;
}
.faq-item.open .faq-q::after { transform: rotate(45deg); }
.faq-a {
  max-height: 0; overflow: hidden;
  transition: max-height .4s ease, padding .4s;
  font-size: 14px; color: var(--text-light); line-height: 1.8;
}
.faq-item.open .faq-a { max-height: 300px; padding-top: 12px; }

/* ============================================
   BOOKING FORM
   ============================================ */
.book-form {
  background: var(--white); border-radius: 20px; padding: 40px;
  box-shadow: 0 8px 36px rgba(0,0,0,0.04);
  max-width: 600px; margin: 0 auto; text-align: left;
}
.fg { margin-bottom: 16px; }
.fg label {
  display: block; font-size: 12px; font-weight: 500;
  color: var(--text); margin-bottom: 5px;
  text-transform: uppercase; letter-spacing: .5px;
}
/* Base rule so unstyled inputs (e.g. Netlify honeypot, future fields)
   inherit the brand fonts and don't fall back to browser defaults.
   Exclude radio/checkbox -- their visual size shouldn't scale with font. */
input:not([type="radio"]):not([type="checkbox"]), select, textarea, button {
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
}

/* Text-like form controls (text, email, tel, select, textarea) get the
   full-width pill treatment. Radios/checkboxes are explicitly excluded
   here so they don't render as huge oversized full-width pills on mobile
   (was previously inheriting the .fg input rule and overlapping their
   labels). */
.fg input:not([type="radio"]):not([type="checkbox"]),
.fg select,
.fg textarea {
  width: 100%; min-height: 48px; padding: 12px 16px;
  border: 1px solid rgba(61,107,90,0.15); border-radius: 10px;
  font-family: 'Outfit', sans-serif; font-size: 16px;
  background: var(--cream); color: var(--text);
  outline: none; transition: border-color .25s, box-shadow .25s;
}
.fg input:not([type="radio"]):not([type="checkbox"]):focus,
.fg select:focus,
.fg textarea:focus {
  border-color: var(--sage);
  box-shadow: 0 0 0 3px rgba(61,107,90,.15);
}
.fg textarea { resize: vertical; min-height: 96px; }
.fg input[type="radio"], .fg input[type="checkbox"] {
  width: 18px; height: 18px; min-height: 0; padding: 0;
  flex-shrink: 0; margin: 0;
  accent-color: var(--sage);
}
.fr { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* ============================================
   WHY PRIVATE PAY
   ============================================ */
.why-benefits { list-style: none; }
.why-benefits li {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 0; border-bottom: 1px solid rgba(0,0,0,0.04);
  font-size: 14px; color: var(--text-light);
}
.why-check {
  width: 26px; height: 26px; min-width: 26px;
  border-radius: 50%; background: rgba(61,107,90,0.08);
  display: flex; align-items: center; justify-content: center;
  color: var(--sage); font-size: 13px; margin-top: 2px;
}
.why-quote {
  background: var(--white); border-left: 3px solid var(--gold);
  padding: 28px; border-radius: 0 14px 14px 0;
  box-shadow: 0 6px 24px rgba(0,0,0,0.04);
}
.why-quote p {
  font-family: 'Cormorant Garamond', serif; font-size: 20px;
  font-style: italic; color: var(--text); line-height: 1.5;
}
.why-quote cite {
  display: block; margin-top: 10px;
  font-size: 12px; color: var(--gold); font-style: normal;
}

/* ============================================
   TESTIMONIALS ("What Clients Say")
   ============================================ */
.testimonials { background: var(--warm); padding: 100px 0; }
.testimonials-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 28px; margin-top: 48px;
}
.testimonial-card {
  background: var(--cream); border-radius: 20px; padding: 28px;
  border: 1px solid rgba(61,107,90,0.08); border-left: 4px solid var(--gold);
}
.testimonial-card blockquote {
  font-family: 'Cormorant Garamond', serif; font-size: 19px;
  font-style: italic; color: var(--text); line-height: 1.55;
  margin: 0 0 16px;
}
.testimonial-card cite {
  font-family: 'Outfit', sans-serif; font-size: 14px;
  color: var(--sage); font-style: normal; display: block;
}
.testimonials-footnote {
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: 14px; color: var(--text-light);
  text-align: center; margin-top: 28px;
}
@media (max-width: 720px) {
  .testimonials-grid { grid-template-columns: 1fr; }
}

/* ============================================
   CTA BAR
   ============================================ */
.cta-bar {
  background: linear-gradient(135deg, var(--sage), var(--deep));
  padding: 70px 0; text-align: center; color: var(--white);
}
.cta-bar h2 { font-size: clamp(28px, 3.5vw, 44px); color: var(--white); margin-bottom: 14px; }
.cta-bar p {
  font-size: 16px; color: rgba(255,255,255,0.65);
  margin-bottom: 28px; max-width: 560px;
  margin-left: auto; margin-right: auto;
}
.cta-actions { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }

/* ============================================
   FOOTER
   ============================================ */
footer { background: var(--deep); color: rgba(255,255,255,0.7); padding: 50px 0 24px; }
.footer-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px; margin-bottom: 40px;
}
.footer-brand p { margin-top: 12px; font-size: 13px; line-height: 1.7; max-width: 260px; }
.footer-col h4 {
  color: var(--white); font-size: 13px; text-transform: uppercase;
  letter-spacing: 1px; font-family: 'Outfit', sans-serif;
  font-weight: 500; margin-bottom: 16px;
}
.footer-col a {
  display: block; color: rgba(255,255,255,0.7);
  font-size: 13px; margin-bottom: 10px; transition: color .3s;
}
.footer-col a:hover { color: var(--gold-light); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 24px; display: flex;
  justify-content: space-between; align-items: center;
  font-size: 12px; flex-wrap: wrap; gap: 12px;
}
.footer-bottom a { color: rgba(255,255,255,0.65); transition: color .3s; }
.footer-bottom a:hover { color: var(--gold-light); }
.gfe {
  text-align: center; margin-top: 16px; font-size: 11px;
  color: rgba(255,255,255,0.25);
}
.emergency {
  text-align: center; margin-top: 12px; font-size: 10px;
  color: rgba(255,255,255,0.3); text-transform: uppercase;
  letter-spacing: .5px; background: rgba(255,255,255,0.03);
  padding: 10px; border-radius: 6px;
}

/* ============================================
   PAGE HERO (Lightweight — for inner pages)
   ============================================ */
.page-hero {
  background: var(--warm); padding: 140px 0 80px; text-align: center;
}
.page-hero .section-title { margin-bottom: 12px; }
.page-hero .section-desc { margin: 0 auto; }

/* ============================================
   CROSS-LINK BANNER
   ============================================ */
.cross-link-banner {
  background: var(--pale); padding: 48px 0; text-align: center;
}
.cross-link-banner p {
  font-size: 16px; color: var(--text-light); margin-bottom: 16px;
  max-width: 560px; margin-left: auto; margin-right: auto; line-height: 1.7;
}

/* ============================================
   PRICING GRID (3-column for About page)
   ============================================ */
.pricing-grid-3 {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 28px; max-width: 960px; margin: 48px auto 0;
}

/* ============================================
   FORM SUCCESS STATE
   ============================================ */
.form-success {
  text-align: center; padding: 48px 24px;
}
.form-success .success-icon {
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(61,107,90,0.1); color: var(--sage);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; margin: 0 auto 20px;
}
.form-success h3 {
  font-size: 28px; color: var(--deep); margin-bottom: 12px;
}
.form-success p {
  font-size: 15px; color: var(--text-light); line-height: 1.7;
}

/* ============================================
   SCROLL REVEAL ANIMATIONS
   ============================================ */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.visible { opacity: 1; transform: none; transition: none; }
  .btn-primary:hover, .btn-white:hover { transform: none; }
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.d1 { transition-delay: .08s; }
.d2 { transition-delay: .16s; }
.d3 { transition-delay: .24s; }
.d4 { transition-delay: .32s; }

/* ============================================
   RESPONSIVE — MOBILE (<=968px)
   ============================================ */
@media (max-width: 968px) {
  .nav-links { display: none; }
  .hamburger { display: flex; }

  .hero-grid,
  .split-grid,
  .team-row,
  .ps-grid,
  .ps-grid.reverse,
  .compare-grid,
  .steps-row,
  .svc-grid,
  .pricing-flex,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .ps-grid.reverse { direction: ltr; }

  .hero { min-height: auto; padding: 120px 0 60px; }
  .hero-grid { gap: 40px; }
  .hero-img { max-width: 280px; margin: 0 auto; order: -1; }
  .hero-grid > div:first-child { text-align: center; }
  .hero-sub { margin-left: auto; margin-right: auto; }
  .hero-actions { justify-content: center; }

  section { padding: 70px 0; }
  .trust-inner { gap: 20px; }

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

  .footer-grid { gap: 24px; }
  .footer-bottom { justify-content: center; text-align: center; }

  .pricing-flex { max-width: 100%; }
  .pricing-grid-3 { grid-template-columns: 1fr; max-width: 100%; }

  .nav-dropdown .dropdown-menu { display: none; }

  .two-col { grid-template-columns: 1fr !important; }

  .page-hero { padding: 120px 0 60px; }
}

/* ============================================
   BETA CARE-FIT QUIZ
   ============================================ */
.quiz { background: var(--warm); }
.quiz-card {
  max-width: 720px; margin: 0 auto;
  background: var(--white); border-radius: 20px;
  padding: 36px 32px;
  border: 1px solid rgba(61,107,90,0.08);
  box-shadow: 0 1px 2px rgba(30,58,47,0.06), 0 12px 36px rgba(30,58,47,0.06);
}
.quiz-progress {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 28px;
}
.quiz-progress-bar {
  flex: 1; height: 6px; background: rgba(61,107,90,0.10);
  border-radius: 100px; overflow: hidden;
}
.quiz-progress-fill {
  height: 100%; background: var(--sage);
  transition: width .4s ease;
}
.quiz-progress-text {
  font-size: 12px; color: var(--text-light);
  letter-spacing: .4px; white-space: nowrap;
}
.quiz-step { display: none; }
.quiz-step.is-active { display: block; animation: quizFade .35s ease; }
@keyframes quizFade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.quiz-q {
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px; color: var(--deep); font-weight: 600;
  margin-bottom: 20px; line-height: 1.25;
}
.quiz-options {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-bottom: 28px;
}
.quiz-option {
  position: relative; cursor: pointer;
  user-select: none;
}
.quiz-option input { position: absolute; opacity: 0; pointer-events: none; }
.quiz-option > span {
  display: inline-block; padding: 10px 18px;
  border-radius: 100px;
  background: var(--cream);
  border: 1px solid rgba(61,107,90,0.15);
  font-size: 14px; color: var(--text);
  transition: background .2s, border-color .2s, color .2s;
}
.quiz-option:hover > span { border-color: var(--sage); }
.quiz-option input:checked + span {
  background: var(--sage); border-color: var(--sage); color: var(--white);
}
.quiz-option input:focus-visible + span {
  outline: 2px solid var(--gold); outline-offset: 3px;
}
.quiz-nav {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px;
}
.quiz-nav .quiz-back {
  background: none; border: none; cursor: pointer;
  color: var(--text-light); font-size: 13px; letter-spacing: .5px;
  text-transform: uppercase; padding: 8px 0;
}
.quiz-nav .quiz-back:hover { color: var(--sage); }
.quiz-nav .quiz-back:disabled { opacity: 0.35; cursor: default; }
.quiz-disclaimer {
  font-size: 12px; color: var(--text-light); font-style: italic;
  margin-bottom: 20px; line-height: 1.6;
}
.quiz-results {
  display: flex; flex-direction: column; gap: 14px;
  margin-bottom: 24px;
}
.quiz-result-card {
  background: var(--cream);
  border-left: 3px solid var(--sage);
  border-radius: 0 12px 12px 0;
  padding: 18px 22px;
}
.quiz-result-card.is-comingsoon { border-left-color: var(--gold); }
.quiz-result-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px; color: var(--deep); font-weight: 600;
  margin-bottom: 2px;
}
.quiz-result-provider {
  font-size: 12px; color: var(--gold-text);
  letter-spacing: 1px; text-transform: uppercase; font-weight: 500;
  margin-bottom: 10px;
}
.quiz-result-fit {
  font-size: 14px; color: var(--text-prose); line-height: 1.7;
  margin-bottom: 14px;
}
.quiz-result-cta {
  display: inline-block;
  font-size: 12px; color: var(--sage); font-weight: 500;
  letter-spacing: .8px; text-transform: uppercase;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: color .2s;
}
.quiz-result-cta:hover { color: var(--deep); }
.quiz-beta-tag {
  display: inline-block; padding: 2px 8px;
  background: var(--gold); color: var(--white);
  font-size: 10px; letter-spacing: 1px; font-weight: 600;
  text-transform: uppercase; border-radius: 100px;
  margin-right: 6px; vertical-align: middle;
}
@media (max-width: 720px) {
  .quiz-card { padding: 28px 22px; border-radius: 16px; }
  .quiz-q { font-size: 22px; }
  .quiz-options { flex-direction: column; gap: 8px; }
  .quiz-option > span { display: block; text-align: center; }
  .quiz-progress-text { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .quiz-step.is-active { animation: none; }
  .quiz-progress-fill { transition: none; }
}