/* ============================================================
   Get Well Clinic — Homepage
   Palette: off-white #FAFAF7, deep navy #0F2A44, sage #9FB8A3, charcoal #1F2937
   Type: Manrope (headlines + body), Fraunces (pull-quote accent)
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  /* Type scale (fluid) */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.1vw, 2.125rem);
  --text-2xl: clamp(2.1rem, 1.4rem + 2.6vw, 3.4rem);
  --text-3xl: clamp(2.6rem, 1.4rem + 4vw, 4.5rem);

  /* Spacing (4px base) */
  --space-1: 0.25rem;  --space-2: 0.5rem;  --space-3: 0.75rem;
  --space-4: 1rem;     --space-5: 1.25rem; --space-6: 1.5rem;
  --space-8: 2rem;     --space-10: 2.5rem; --space-12: 3rem;
  --space-16: 4rem;    --space-20: 5rem;   --space-24: 6rem;
  --space-32: 8rem;

  /* Brand palette — LIGHT */
  --color-bg: #FCFCFC;
  --color-surface: #FFFFFF;
  --color-surface-offset: #F1F0EA;
  --color-border: #E4E2D9;
  --color-divider: #ECEAE2;

  --color-text: #1F2937;
  --color-text-muted: #5B6470;
  --color-text-faint: #9AA2AC;
  --color-text-inverse: #FAFAF7;

  --color-navy: #0F2A44;
  --color-navy-hover: #163958;
  --color-sage: #9FB8A3;
  --color-sage-deep: #6E8C75;
  --color-sage-tint: #EBF1EB;
  --color-cream-card: #F5F4EE;

  --color-good: #6E8C75;
  --color-meh: #B0837A;

  --radius-md: 0.625rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;

  --transition: 200ms cubic-bezier(0.16, 1, 0.3, 1);
  --shadow-sm: 0 1px 3px rgba(15, 42, 68, 0.06);
  --shadow-md: 0 6px 22px rgba(15, 42, 68, 0.08);
  --shadow-lg: 0 18px 48px rgba(15, 42, 68, 0.12);

  --content-narrow: 720px;
  --content-default: 1080px;
  --content-wide: 1220px;

  --font-body: 'Manrope', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  --font-display: 'Manrope', system-ui, sans-serif;
  --font-accent: 'Fraunces', Georgia, 'Times New Roman', serif;
}

[data-theme='dark'] {
  --color-bg: #0C1722;
  --color-surface: #122231;
  --color-surface-offset: #16293a;
  --color-border: #213545;
  --color-divider: #1b2c3c;

  --color-text: #E7ECF0;
  --color-text-muted: #9BA9B6;
  --color-text-faint: #65737f;
  --color-text-inverse: #0C1722;

  --color-navy: #2E5C82;
  --color-navy-hover: #3a6e98;
  --color-sage: #9FB8A3;
  --color-sage-deep: #B6CDBA;
  --color-sage-tint: #18302a;
  --color-cream-card: #16293a;

  --color-good: #9FB8A3;
  --color-meh: #C99B92;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 6px 22px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.5);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg: #0C1722; --color-surface: #122231; --color-surface-offset: #16293a;
    --color-border: #213545; --color-divider: #1b2c3c;
    --color-text: #E7ECF0; --color-text-muted: #9BA9B6; --color-text-faint: #65737f;
    --color-text-inverse: #0C1722;
    --color-navy: #2E5C82; --color-navy-hover: #3a6e98; --color-sage: #9FB8A3;
    --color-sage-deep: #B6CDBA; --color-sage-tint: #18302a; --color-cream-card: #16293a;
    --color-good: #9FB8A3; --color-meh: #C99B92;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.3); --shadow-md: 0 6px 22px rgba(0,0,0,0.4);
    --shadow-lg: 0 18px 48px rgba(0,0,0,0.5);
  }
}

/* ---------- Base reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  -webkit-text-size-adjust: none; text-size-adjust: none;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility; scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}
body {
  min-height: 100dvh; line-height: 1.6;
  font-family: var(--font-body); font-size: var(--text-base);
  color: var(--color-text); background-color: var(--color-bg);
  transition: background-color var(--transition), color var(--transition);
}
img, svg, picture { display: block; max-width: 100%; height: auto; }
ul[role='list'] { list-style: none; }
button { cursor: pointer; background: none; border: none; font: inherit; color: inherit; }
a { color: inherit; }
table { border-collapse: collapse; width: 100%; }
h1, h2, h3, h4 { text-wrap: balance; line-height: 1.12; font-family: var(--font-display); letter-spacing: -0.02em; }
p { text-wrap: pretty; }
::selection { background: rgba(159, 184, 163, 0.4); color: var(--color-text); }
:focus-visible { outline: 2px solid var(--color-sage-deep); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

a, button { transition: color var(--transition), background var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- Layout helpers ---------- */
.wrap { width: 100%; max-width: var(--content-wide); margin-inline: auto; padding-inline: var(--space-6); }
.wrap--default { max-width: var(--content-default); }
.wrap--narrow { max-width: var(--content-narrow); }
section { padding-block: clamp(var(--space-16), 7vw, var(--space-32)); }
.section-tag {
  display: inline-block; font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-sage-deep);
  margin-bottom: var(--space-4);
}
.eyebrow-line { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); }
.eyebrow-line::after { content: ''; flex: 1; height: 1px; background: var(--color-border); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-sm); font-weight: 700; line-height: 1;
  padding: 0.95rem 1.6rem; border-radius: var(--radius-full);
  text-decoration: none; white-space: nowrap;
}
.btn--primary { background: var(--color-navy); color: #fff; box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--color-navy-hover); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn--outline { background: transparent; color: var(--color-navy); border: 1.5px solid var(--color-navy); }
[data-theme='dark'] .btn--outline, :root:not([data-theme]) .btn--outline { color: var(--color-text); border-color: var(--color-border); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .btn--outline { color: var(--color-text); border-color: var(--color-border); } }
.btn--outline:hover { background: var(--color-navy); color: #fff; transform: translateY(-2px); }
.btn--light { background: #fff; color: var(--color-navy); }
.btn--light:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn--ghost-light { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,0.5); }
.btn--ghost-light:hover { background: rgba(255,255,255,0.12); border-color: #fff; transform: translateY(-2px); }
.btn .arrow { transition: transform var(--transition); }
.btn:hover .arrow { transform: translateX(3px); }

/* ---------- Header ---------- */
.header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.header--scrolled { border-bottom-color: var(--color-divider); box-shadow: var(--shadow-sm); }
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); height: 4.5rem; }
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand__logo { width: auto; height: 38px; flex-shrink: 0; display: block; }
.brand--footer .brand__logo { height: 44px; }
/* Header logo: color wordmark in light mode, white wordmark in dark mode (no box) */
.brand__logo--white { display: none; }
[data-theme='dark'] .brand__logo--color { display: none; }
[data-theme='dark'] .brand__logo--white { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .brand__logo--color { display: none; }
  :root:not([data-theme]) .brand__logo--white { display: block; }
}
.nav { display: flex; align-items: center; gap: var(--space-8); }
.nav__links { display: flex; gap: var(--space-6); list-style: none; }
.nav__links a { font-size: var(--text-sm); font-weight: 600; color: var(--color-text-muted); text-decoration: none; }
.nav__links a:hover { color: var(--color-text); }
.header__actions { display: flex; align-items: center; gap: var(--space-3); }
.theme-toggle { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-full); color: var(--color-text-muted); border: 1px solid var(--color-border); }
.theme-toggle:hover { color: var(--color-text); border-color: var(--color-sage-deep); }
.menu-btn { display: none; width: 42px; height: 42px; place-items: center; border-radius: var(--radius-md); border: 1px solid var(--color-border); color: var(--color-text); }

/* ---------- Hero ---------- */
.hero { padding-top: clamp(var(--space-12), 6vw, var(--space-24)); padding-bottom: clamp(var(--space-12), 6vw, var(--space-24)); position: relative; overflow: hidden; }
.hero__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(var(--space-8), 5vw, var(--space-20)); align-items: center; }
.hero__pill {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: var(--color-sage-tint); color: var(--color-sage-deep);
  font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.04em;
  padding: 0.4rem 0.9rem; border-radius: var(--radius-full); margin-bottom: var(--space-6);
}
.hero__pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-sage-deep); }
.hero h1 { font-size: var(--text-3xl); font-weight: 800; margin-bottom: var(--space-6); color: var(--color-navy); }
[data-theme='dark'] .hero h1, :root:not([data-theme]) .hero h1 { color: var(--color-text); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .hero h1 { color: var(--color-text); } }
.hero h1 em { font-family: var(--font-accent); font-style: italic; font-weight: 500; color: var(--color-sage-deep); }
.hero__lead { font-size: var(--text-lg); color: var(--color-text-muted); max-width: 36ch; margin-bottom: var(--space-8); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-8); }
.hero__price-note { font-size: var(--text-sm); color: var(--color-text-muted); padding-top: var(--space-6); border-top: 1px solid var(--color-divider); }
.hero__price-note strong { color: var(--color-text); font-weight: 700; }

/* Hero visual */
.hero__visual { position: relative; }
.hero__img {
  width: 100%; aspect-ratio: 4/5; object-fit: cover;
  border-radius: var(--radius-xl); box-shadow: var(--shadow-lg);
}
.hero__badge {
  position: absolute; bottom: -18px; left: -18px;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-md); display: flex; align-items: center; gap: var(--space-3);
  max-width: 250px;
}
.hero__badge .icon { width: 42px; height: 42px; flex-shrink: 0; border-radius: var(--radius-md); background: var(--color-sage-tint); display: grid; place-items: center; color: var(--color-sage-deep); }
.hero__badge p { font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.4; }
.hero__badge strong { display: block; font-size: var(--text-sm); color: var(--color-text); font-weight: 800; }

/* ---------- Value props (three-up) ---------- */
.valueprops { background: var(--color-surface-offset); }
.valueprops__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.vp-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-8); transition: transform var(--transition), box-shadow var(--transition); }
.vp-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.vp-card__icon { width: 52px; height: 52px; border-radius: var(--radius-md); background: var(--color-sage-tint); color: var(--color-sage-deep); display: grid; place-items: center; margin-bottom: var(--space-5); }
.vp-card h3 { font-size: var(--text-lg); font-weight: 800; margin-bottom: var(--space-3); }
.vp-card p { font-size: var(--text-sm); color: var(--color-text-muted); }

/* ---------- Section headers ---------- */
.sec-head { max-width: 56ch; margin-bottom: clamp(var(--space-10), 4vw, var(--space-16)); }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head h2 { font-size: var(--text-2xl); font-weight: 800; color: var(--color-navy); margin-bottom: var(--space-4); }
[data-theme='dark'] .sec-head h2, :root:not([data-theme]) .sec-head h2 { color: var(--color-text); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .sec-head h2 { color: var(--color-text); } }
.sec-head h2 em { font-family: var(--font-accent); font-style: italic; font-weight: 500; color: var(--color-sage-deep); }
.sec-head p { font-size: var(--text-lg); color: var(--color-text-muted); }

/* ---------- Comparison table ---------- */
.compare { background: var(--color-navy); color: #fff; }
.compare .sec-head h2 { color: #fff; }
.compare .sec-head p { color: rgba(255,255,255,0.7); }
.compare .section-tag { color: var(--color-sage); }
.compare-table { width: 100%; max-width: 920px; margin-inline: auto; border-radius: var(--radius-lg); overflow: hidden; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); }
.compare-table table { table-layout: fixed; }
.compare-table th, .compare-table td { padding: var(--space-4) var(--space-5); text-align: left; font-size: var(--text-sm); border-bottom: 1px solid rgba(255,255,255,0.1); vertical-align: middle; }
.compare-table thead th { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.6); font-weight: 700; }
.compare-table thead th.col-us { color: var(--color-sage); }
.compare-table tbody tr:last-child td { border-bottom: none; }
.compare-table .row-label { color: rgba(255,255,255,0.85); font-weight: 600; }
.compare-table .cell-us { color: #fff; font-weight: 700; background: rgba(159,184,163,0.1); }
.compare-table .cell-them { color: rgba(255,255,255,0.65); }
.compare-table .ic { display: inline-flex; vertical-align: -2px; margin-right: 6px; }
.compare-table .ic.good { color: var(--color-sage); }
.compare-table .ic.bad { color: #C99B92; }
.compare-table thead .col-us-wrap { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- How it works ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.step { position: relative; padding-top: var(--space-8); }
.step__num { font-family: var(--font-accent); font-size: 3rem; font-weight: 600; line-height: 1; color: var(--color-sage); margin-bottom: var(--space-3); }
.step h3 { font-size: var(--text-lg); font-weight: 800; margin-bottom: var(--space-3); }
.step p { font-size: var(--text-sm); color: var(--color-text-muted); }
.step__split { margin-top: var(--space-4); display: grid; gap: var(--space-3); }
.step__option { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); font-size: var(--text-sm); }
.step__option strong { display: block; color: var(--color-navy); margin-bottom: var(--space-1); }
[data-theme='dark'] .step__option strong, :root:not([data-theme]) .step__option strong { color: var(--color-sage-deep); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .step__option strong { color: var(--color-sage-deep); } }
.step__or { text-align: center; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.1em; color: var(--color-text-faint); text-transform: uppercase; }

/* ---------- Pricing ---------- */
.pricing { background: var(--color-surface-offset); }
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); align-items: stretch; }
.price-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-8); display: flex; flex-direction: column; }
.price-card--feature { border-color: var(--color-sage-deep); border-width: 2px; box-shadow: var(--shadow-md); }
.price-card h3 { font-size: var(--text-lg); font-weight: 800; margin-bottom: var(--space-2); }
.price-card .amount { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 800; color: var(--color-navy); line-height: 1; margin-bottom: var(--space-1); }
[data-theme='dark'] .price-card .amount, :root:not([data-theme]) .price-card .amount { color: var(--color-text); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .price-card .amount { color: var(--color-text); } }
.price-card .unit { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-5); }
.price-card ul { list-style: none; display: grid; gap: var(--space-3); margin-top: auto; }
.price-card li { font-size: var(--text-sm); color: var(--color-text-muted); display: flex; gap: var(--space-2); align-items: flex-start; }
.price-card li svg { color: var(--color-sage-deep); flex-shrink: 0; margin-top: 3px; }
.price-note { max-width: 60ch; margin: var(--space-10) auto 0; text-align: center; font-size: var(--text-sm); color: var(--color-text-muted); font-style: italic; }

/* ---------- Autonomy section ---------- */
.autonomy { background: var(--color-sage-tint); }
.autonomy__inner { max-width: 760px; margin-inline: auto; text-align: center; }
.autonomy h2 { font-size: var(--text-2xl); font-weight: 800; color: var(--color-navy); margin-bottom: var(--space-6); }
[data-theme='dark'] .autonomy h2, :root:not([data-theme]) .autonomy h2 { color: var(--color-text); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .autonomy h2 { color: var(--color-text); } }
.autonomy p { font-size: var(--text-lg); color: var(--color-text-muted); margin-bottom: var(--space-5); }
.autonomy p:last-child { margin-bottom: 0; }
.autonomy .lead { font-family: var(--font-accent); font-style: italic; font-size: var(--text-xl); color: var(--color-sage-deep); }

/* ---------- Why clinic (two-col) ---------- */
.whyclinic__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(var(--space-8), 5vw, var(--space-20)); align-items: center; }
.whyclinic__img { border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); width: 100%; aspect-ratio: 5/6; object-fit: cover; }
.whyclinic h2 { font-size: var(--text-2xl); font-weight: 800; color: var(--color-navy); margin-bottom: var(--space-5); }
[data-theme='dark'] .whyclinic h2, :root:not([data-theme]) .whyclinic h2 { color: var(--color-text); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .whyclinic h2 { color: var(--color-text); } }
.whyclinic > .wrap > .whyclinic__grid p.intro { font-size: var(--text-lg); color: var(--color-text-muted); margin-bottom: var(--space-6); }
.check-list { list-style: none; display: grid; gap: var(--space-4); }
.check-list li { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--text-base); }
.check-list li .chk { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--color-sage-tint); color: var(--color-sage-deep); display: grid; place-items: center; margin-top: 2px; }
.whyclinic__foot { margin-top: var(--space-8); font-family: var(--font-accent); font-style: italic; font-size: var(--text-xl); color: var(--color-sage-deep); }

/* ---------- Testimonials ---------- */
.testi__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.testi-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-8); display: flex; flex-direction: column; }
.testi-card .quote-mark { font-family: var(--font-accent); font-size: 3rem; line-height: 0.6; color: var(--color-sage); margin-bottom: var(--space-4); }
.testi-card blockquote { font-size: var(--text-base); color: var(--color-text); margin-bottom: var(--space-6); flex: 1; }
.testi-card .who { display: flex; align-items: center; gap: var(--space-3); }
.testi-card .avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--color-navy); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: var(--text-sm); }
.testi-card .who strong { display: block; font-size: var(--text-sm); }
.testi-card .who span { font-size: var(--text-xs); color: var(--color-text-muted); }

/* ---------- FAQ ---------- */
.faq { background: var(--color-surface-offset); }
.faq__list { max-width: 800px; margin-inline: auto; }
.faq-item { border-bottom: 1px solid var(--color-border); }
.faq-item summary { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-5) 0; font-size: var(--text-lg); font-weight: 700; cursor: pointer; list-style: none; color: var(--color-text); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .plus { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--color-border); display: grid; place-items: center; color: var(--color-sage-deep); transition: transform var(--transition), background var(--transition); }
.faq-item[open] summary .plus { transform: rotate(45deg); background: var(--color-sage-tint); }
.faq-item p { padding-bottom: var(--space-5); color: var(--color-text-muted); font-size: var(--text-base); max-width: 70ch; }

/* ---------- Footer CTA ---------- */
.footer-cta { background: var(--color-navy); color: #fff; text-align: center; }
.footer-cta h2 { font-size: var(--text-2xl); font-weight: 800; margin-bottom: var(--space-4); }
.footer-cta p { font-size: var(--text-lg); color: rgba(255,255,255,0.75); margin: 0 auto var(--space-8); max-width: 40ch; }
.footer-cta .hero__cta { justify-content: center; }

/* ---------- Footer ---------- */
.footer { background: var(--color-bg); border-top: 1px solid var(--color-divider); padding-block: var(--space-16) var(--space-10); }
.footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--space-8); margin-bottom: var(--space-12); }
.footer__brand p { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-4); max-width: 34ch; }
.footer__col h4 { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-text-faint); margin-bottom: var(--space-4); font-weight: 700; }
.footer__col ul { list-style: none; display: grid; gap: var(--space-3); }
.footer__col a { font-size: var(--text-sm); color: var(--color-text-muted); text-decoration: none; }
.footer__col a:hover { color: var(--color-text); }
.footer__partner { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); margin-top: var(--space-3); }
.footer__partner .pico { width: 38px; height: 38px; border-radius: var(--radius-md); background: var(--color-sage-tint); color: var(--color-sage-deep); display: grid; place-items: center; flex-shrink: 0; }
.footer__partner p { font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.4; }
.footer__partner strong { color: var(--color-text); }
.footer__bottom { padding-top: var(--space-8); border-top: 1px solid var(--color-divider); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4); }
.footer__bottom p { font-size: var(--text-xs); color: var(--color-text-faint); max-width: 70ch; }
.footer__legal { display: flex; gap: var(--space-5); }
.footer__legal a { font-size: var(--text-xs); color: var(--color-text-faint); text-decoration: none; }
.footer__legal a:hover { color: var(--color-text-muted); }
.footer__disclaimer { font-size: var(--text-xs); color: var(--color-text-faint); margin-top: var(--space-4); line-height: 1.5; }

/* ---------- Dual pillars ---------- */
.pillars__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.pillar { position: relative; border-radius: var(--radius-xl); overflow: hidden; min-height: 420px; display: flex; align-items: flex-end; color: #fff; box-shadow: var(--shadow-md); }
.pillar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pillar::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(15,42,68,0.92) 0%, rgba(15,42,68,0.55) 45%, rgba(15,42,68,0.12) 100%); }
.pillar__body { position: relative; z-index: 1; padding: var(--space-8); }
.pillar__tag { display: inline-block; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-sage); margin-bottom: var(--space-3); }
.pillar h3 { font-size: var(--text-xl); font-weight: 800; margin-bottom: var(--space-3); color: #fff; }
.pillar p { font-size: var(--text-base); color: rgba(255,255,255,0.85); margin-bottom: var(--space-5); max-width: 42ch; }
.pillar .btn { background: #fff; color: var(--color-navy); }
.pillar .btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* ---------- Services grid ---------- */
.services__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.svc-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); display: flex; gap: var(--space-4); align-items: flex-start; transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); }
.svc-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--color-sage); }
.svc-card__icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--color-sage-tint); color: var(--color-sage-deep); display: grid; place-items: center; }
.svc-card h3 { font-size: var(--text-base); font-weight: 800; margin-bottom: var(--space-1); }
.svc-card p { font-size: var(--text-sm); color: var(--color-text-muted); }
.svc-card .price-chip { display: inline-block; margin-top: var(--space-2); font-size: var(--text-xs); font-weight: 700; color: var(--color-navy); background: var(--color-sage-tint); padding: 0.2rem 0.6rem; border-radius: var(--radius-full); }
[data-theme='dark'] .svc-card .price-chip, :root:not([data-theme]) .svc-card .price-chip { color: var(--color-sage-deep); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .svc-card .price-chip { color: var(--color-sage-deep); } }

/* ---------- Price list (two groups) ---------- */
.pricelist { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); max-width: 1000px; margin-inline: auto; }
.pricelist__group { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-8); }
.pricelist__group h3 { font-size: var(--text-lg); font-weight: 800; margin-bottom: var(--space-1); }
.pricelist__group .sub { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-5); }
.pricelist__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px dashed var(--color-divider); }
.pricelist__row:last-child { border-bottom: none; }
.pricelist__row .label { font-size: var(--text-sm); color: var(--color-text); }
.pricelist__row .label small { display: block; color: var(--color-text-muted); font-size: var(--text-xs); }
.pricelist__row .amt { font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); color: var(--color-navy); white-space: nowrap; }
[data-theme='dark'] .pricelist__row .amt, :root:not([data-theme]) .pricelist__row .amt { color: var(--color-sage-deep); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .pricelist__row .amt { color: var(--color-sage-deep); } }

/* ---------- Telehealth banner ---------- */
.telehealth { background: var(--color-sage-tint); }
.telehealth__inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(var(--space-8), 5vw, var(--space-16)); align-items: center; }
.telehealth h2 { font-size: var(--text-2xl); font-weight: 800; color: var(--color-navy); margin-bottom: var(--space-4); }
[data-theme='dark'] .telehealth h2, :root:not([data-theme]) .telehealth h2 { color: var(--color-text); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .telehealth h2 { color: var(--color-text); } }
.telehealth p { font-size: var(--text-lg); color: var(--color-text-muted); margin-bottom: var(--space-5); }
.telehealth__highlight { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); display: flex; gap: var(--space-4); align-items: flex-start; }
.telehealth__highlight .ic { flex-shrink: 0; width: 48px; height: 48px; border-radius: var(--radius-md); background: var(--color-navy); color: #fff; display: grid; place-items: center; }
.telehealth__highlight strong { display: block; font-size: var(--text-base); font-weight: 800; margin-bottom: var(--space-1); }
.telehealth__highlight p { font-size: var(--text-sm); margin: 0; }

/* ---------- Button: small variant ---------- */
.btn--sm { padding: 0.6rem 1rem; font-size: var(--text-xs); }

/* ---------- Connect (Portal / Book / Pay / Intake) ---------- */
.connect__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); max-width: 1100px; margin: 0 auto; }
.connect-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-8) var(--space-6); display: flex; flex-direction: column; align-items: flex-start; transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); }
.connect-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--color-sage); }
.connect-card--feature { border-color: var(--color-sage-deep); border-width: 2px; box-shadow: var(--shadow-sm); }
.connect-card__icon { width: 52px; height: 52px; border-radius: var(--radius-md); background: var(--color-sage-tint); color: var(--color-sage-deep); display: grid; place-items: center; margin-bottom: var(--space-5); }
.connect-card h3 { font-size: var(--text-lg); font-weight: 800; margin-bottom: var(--space-3); }
.connect-card p { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-6); flex: 1; }
.connect-card .btn { width: 100%; justify-content: center; }

/* ---------- Locations ---------- */
.locations { background: var(--color-surface-offset); }
.locations .sec-head p .loc-master-tel { color: var(--color-navy); font-weight: 800; text-decoration: none; border-bottom: 2px solid var(--color-sage); }
[data-theme='dark'] .locations .sec-head p .loc-master-tel, :root:not([data-theme]) .locations .sec-head p .loc-master-tel { color: var(--color-text); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .locations .sec-head p .loc-master-tel { color: var(--color-text); } }
.locations__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.loc-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; transition: transform var(--transition), box-shadow var(--transition); }
.loc-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.loc-card__map { aspect-ratio: 16/10; background: var(--color-surface-offset); position: relative; }
.loc-card__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.loc-card__body { padding: var(--space-6); display: flex; flex-direction: column; flex: 1; }
.loc-card__body h3 { font-size: var(--text-lg); font-weight: 800; margin-bottom: var(--space-2); color: var(--color-navy); }
[data-theme='dark'] .loc-card__body h3, :root:not([data-theme]) .loc-card__body h3 { color: var(--color-text); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .loc-card__body h3 { color: var(--color-text); } }
.loc-addr { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-4); line-height: 1.5; }
.loc-note { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-5); }
.loc-flag { font-size: var(--text-xs); font-weight: 700; padding: 0.25rem 0.65rem; border-radius: var(--radius-full); line-height: 1.3; }
.loc-flag--walk { background: var(--color-sage-tint); color: var(--color-sage-deep); }
.loc-flag--appt { background: rgba(176,131,122,0.16); color: var(--color-meh); }
.loc-flag--ins { background: var(--color-surface-offset); color: var(--color-text-muted); border: 1px solid var(--color-border); }
.loc-card__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: auto; }
.loc-dir { background: var(--color-navy); color: #fff; }
.loc-dir:hover { background: var(--color-navy-hover); transform: translateY(-2px); }
.loc-card--cta { background: var(--color-sage-tint); border-color: var(--color-sage); justify-content: center; }
.loc-card__body--cta { text-align: center; align-items: center; justify-content: center; gap: var(--space-2); }
.loc-card__body--cta h3 { color: var(--color-navy); }
[data-theme='dark'] .loc-card__body--cta h3, :root:not([data-theme]) .loc-card__body--cta h3 { color: var(--color-text); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .loc-card__body--cta h3 { color: var(--color-text); } }
.loc-card__body--cta p { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-4); max-width: 32ch; }

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .hero__grid { grid-template-columns: 1fr; gap: var(--space-12); }
  .hero__visual { max-width: 460px; margin-inline: auto; order: -1; }
  .valueprops__grid, .steps, .price-grid, .testi__grid { grid-template-columns: 1fr; }
  .pillars__grid { grid-template-columns: 1fr; }
  .services__grid { grid-template-columns: 1fr 1fr; }
  .connect__grid { grid-template-columns: 1fr 1fr; }
  .locations__grid { grid-template-columns: 1fr 1fr; }
  .pricelist { grid-template-columns: 1fr; gap: var(--space-6); }
  .telehealth__inner { grid-template-columns: 1fr; gap: var(--space-8); }
  .whyclinic__grid { grid-template-columns: 1fr; }
  .whyclinic__img { max-width: 420px; margin-inline: auto; order: -1; }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .nav__links { display: none; }
  .menu-btn { display: grid; }
  .nav { gap: var(--space-3); }
}
@media (max-width: 560px) {
  .footer__top { grid-template-columns: 1fr; }
  .compare-table th, .compare-table td { padding: var(--space-3); font-size: var(--text-xs); }
  .hero__badge { left: 50%; transform: translateX(-50%); bottom: -22px; max-width: 220px; }
  .hero__cta .btn { flex: 1; justify-content: center; }
  .services__grid { grid-template-columns: 1fr; }
  .connect__grid { grid-template-columns: 1fr; }
  .locations__grid { grid-template-columns: 1fr; }
  .pillar { min-height: 340px; }
  /* Tighten header on small screens */
  .header__inner { gap: var(--space-3); height: 4rem; }
  .brand__logo { height: 30px; }
  .brand--footer .brand__logo { height: 36px; }
  .header .btn--primary { padding: 0.7rem 1.1rem; }
  .theme-toggle { width: 36px; height: 36px; }
  .menu-btn { width: 38px; height: 38px; }
}

/* ---------- Weight loss treatments (product education) ---------- */
.treat__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  max-width: 1000px;
  margin-inline: auto;
}
.treat-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.treat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--color-sage); }
.treat-card__tag {
  display: inline-block;
  align-self: flex-start;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-navy);
  background: var(--color-sage-tint);
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-full);
  margin-bottom: var(--space-4);
}
[data-theme='dark'] .treat-card__tag, :root:not([data-theme]) .treat-card__tag { color: var(--color-sage-deep); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .treat-card__tag { color: var(--color-sage-deep); } }
.treat-card h3 { font-size: var(--text-xl); font-weight: 800; margin-bottom: var(--space-3); }
.treat-card__what { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-5); line-height: 1.6; }
.treat-card__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.treat-card__list li { font-size: var(--text-sm); color: var(--color-text); line-height: 1.55; padding-left: var(--space-5); position: relative; }
.treat-card__list li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.5em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--color-sage-deep);
}
.treat-card__list li strong { color: var(--color-text); font-weight: 700; }
.treat__cta { text-align: center; margin-top: var(--space-10); }
.treat__disclaimer {
  max-width: 820px;
  margin: var(--space-8) auto 0;
  text-align: center;
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--color-text-faint);
}
@media (max-width: 720px) {
  .treat__grid { grid-template-columns: 1fr; }
}

/* ---------- Header portal login link ---------- */
.portal-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  text-decoration: none;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  transition: color var(--transition), border-color var(--transition), background var(--transition);
  white-space: nowrap;
}
.portal-link:hover { color: var(--color-navy); border-color: var(--color-sage-deep); background: var(--color-sage-tint); }
[data-theme='dark'] .portal-link:hover, :root:not([data-theme]) .portal-link:hover { color: var(--color-sage-deep); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .portal-link:hover { color: var(--color-sage-deep); } }
.portal-link svg { flex-shrink: 0; }
/* Show portal in the desktop header bar; hide the duplicate mobile-menu item on desktop */
.nav__portal-mobile { display: none; }
@media (max-width: 900px) {
  /* On mobile the header portal pill hides and it lives in the slide-out menu instead */
  .portal-link { display: none; }
  .nav__links .nav__portal-mobile { display: list-item; }
}

/* ---------- Pricing asterisk fine-print ---------- */
.price-note--asterisk { font-size: var(--text-xs); color: var(--color-text-faint); margin-top: var(--space-2); }
.price-note--asterisk sup { color: var(--color-sage-deep); font-weight: 700; }
.pricelist__row .label sup { color: var(--color-sage-deep); font-weight: 700; font-size: 0.7em; }

/* ---------- Legal pages (Privacy / Terms / HIPAA) ---------- */
.legal { padding: var(--space-16) 0 var(--space-20); }
.legal__wrap { max-width: 820px; }
.legal__eyebrow { font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-sage-deep); margin: 0 0 var(--space-2); }
.legal__title { font-size: var(--text-2xl); line-height: 1.1; color: var(--color-text); margin: 0 0 var(--space-3); }
.legal__meta { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0 0 var(--space-8); padding-bottom: var(--space-6); border-bottom: 1px solid var(--color-divider); }
.legal__lead { font-size: var(--text-lg); line-height: 1.6; color: var(--color-text); margin: 0 0 var(--space-6); }
.legal h2 { font-size: var(--text-lg); color: var(--color-text); margin: var(--space-10) 0 var(--space-3); }
.legal p { font-size: var(--text-base); line-height: 1.7; color: var(--color-text-muted); margin: 0 0 var(--space-4); }
.legal ul { margin: 0 0 var(--space-5); padding-left: var(--space-6); }
.legal li { font-size: var(--text-base); line-height: 1.7; color: var(--color-text-muted); margin-bottom: var(--space-2); }
.legal a { color: var(--color-navy); text-decoration: underline; text-underline-offset: 2px; }
.legal a:hover { color: var(--color-navy-hover); }
.legal strong { color: var(--color-text); }
.legal__contact { background: var(--color-cream-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5) var(--space-6); line-height: 1.8; color: var(--color-text); }
.legal__contact a { color: var(--color-navy); }
.legal__note { font-size: var(--text-sm); color: var(--color-text-faint); margin-top: var(--space-6); }
.legal__back { margin-top: var(--space-12); }
.legal__back .btn { display: inline-flex; }