/* ===========================================================================
   Sigma Psychiatry — shared design system (site.css)
   Loaded by index.html and every interior page. One source of truth.
   =========================================================================== */

:root {
  --cream: #fbf7ef;
  --cream-soft: #f6efe1;
  --cream-deep: #ede1c9;
  --cream-light: #faf7ef;
  --white: #fffdf8;
  --gold: #c8a35b;
  --gold-deep: #a77f34;
  --gold-soft: #e8d9b8;
  --gold-text: #7a5816;
  --gold-strong: #785618;
  --ink: #211f1d;
  --ink-soft: #3f3b36;
  --ink-muted: #685f54;
  --navy: #1d2a44;
  --border: #e7d9ba;
  --shadow-soft: 0 18px 55px rgba(76, 54, 20, 0.08);
  --shadow-card: 0 12px 34px rgba(76, 54, 20, 0.09);
  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --fs-display: clamp(44px, 6.2vw, 74px);
  --fs-h2: clamp(30px, 4.2vw, 48px);
  --fs-h3-lg: clamp(23px, 2.4vw, 28px);
  --fs-h3: 21px;
  --fs-lead: 18px;
  --fs-body: 16px;
  --fs-sm: 15px;
  --fs-meta: 13px;
  --fs-micro: 12px;
  --max: 1240px;
  --pad: clamp(20px, 4vw, 56px);
  --radius: 12px;
  --radius-sm: 8px;
  --radius-pill: 999px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
/* Lenis smooth-scroll helpers (apply only once Lenis adds its classes; native scroll otherwise) */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto !important; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
body { margin: 0; background: var(--cream); color: var(--ink); font-family: var(--sans); font-size: var(--fs-body); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg { display: block; }
img { max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
html { -webkit-tap-highlight-color: transparent; } /* global: no tap-flash on any element (inherited) */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--gold-strong); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3, h4 { margin: 0; font-family: var(--serif); font-weight: 500; color: var(--ink); line-height: 1.08; }
p { margin: 0; }

.gold { color: var(--gold-text); font-style: italic; }

/* Accessibility skip link (visible only on keyboard focus) */
.skip-link { position: fixed; left: 10px; top: -56px; z-index: 100; padding: 10px 16px; background: var(--ink); color: var(--white); border-radius: var(--radius-sm); font-size: var(--fs-meta); font-weight: 600; transition: top 160ms ease; }
.skip-link:focus { top: 10px; outline: 2px solid var(--gold); outline-offset: 2px; }
.container { width: min(100%, var(--max)); margin: 0 auto; padding: 0 var(--pad); }
.container-narrow { width: min(100%, 880px); margin: 0 auto; padding: 0 var(--pad); }
.section { padding: clamp(58px, 6.4vw, 100px) 0; position: relative; }

.section-head { text-align: center; margin: 0 auto clamp(30px, 3.6vw, 50px); max-width: 760px; }
.section-head h2 { font-size: var(--fs-h2); letter-spacing: -0.3px; }
.section-head p { margin-top: 14px; color: var(--ink-muted); font-size: var(--fs-lead); line-height: 1.62; }

.eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px; color: var(--gold-text); font-size: var(--fs-micro); font-weight: 600; letter-spacing: 2.6px; text-transform: uppercase; }
.section-head .eyebrow { justify-content: center; }
.eyebrow::before, .eyebrow::after { content: ""; width: 22px; height: 1px; background: var(--gold); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 13px 26px; border-radius: var(--radius-sm); border: 1px solid transparent; font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.1px; cursor: pointer; transition: transform 180ms ease, background 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease; }
.btn svg { width: 16px; height: 16px; transition: transform 180ms ease; }
.btn:hover svg { transform: translateX(3px); }
.btn-primary { color: var(--ink); background: linear-gradient(180deg, #d4b164 0%, #c1953f 100%); border-color: rgba(120, 86, 24, 0.5); box-shadow: 0 9px 22px rgba(166, 127, 52, 0.22); }
.btn-primary:hover { transform: translateY(-2px); background: linear-gradient(180deg, #cfa953 0%, #b3872f 100%); box-shadow: 0 13px 28px rgba(166, 127, 52, 0.28); }
.btn-secondary { color: var(--ink); background: rgba(255, 253, 248, 0.6); border-color: var(--gold-strong); }
.btn-secondary:hover { color: var(--white); background: var(--ink); border-color: var(--ink); transform: translateY(-2px); }

/* ---------- Nav ---------- */
.site-nav { position: sticky; top: 0; z-index: 50; background: rgba(251, 247, 239, 0.9); border-bottom: 1px solid rgba(231, 217, 186, 0.7); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.nav-inner { width: min(100%, var(--max)); margin: 0 auto; padding: 14px var(--pad); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 12px; min-width: 168px; }
/* Logo: plain gold mark. It reads crisply on both the dark navy nav and the dark navy footer. */
.brand img { width: 48px; height: 60px; object-fit: contain; }
.brand-word { display: flex; flex-direction: column; line-height: 1; transform: translateY(1px); }
.brand-word strong { font-family: var(--serif); font-size: 18px; font-weight: 700; letter-spacing: 4px; }
.brand-word span { margin-top: 6px; color: var(--gold-text); font-size: 9px; font-weight: 700; letter-spacing: 3.2px; }
.nav-links { display: flex; align-items: center; justify-content: center; gap: clamp(14px, 1.8vw, 26px); color: var(--ink-soft); font-size: var(--fs-meta); font-weight: 500; }
.nav-links a { position: relative; padding: 8px 0; transition: color 180ms ease; }
.nav-links a:hover, .nav-links a.active { color: var(--gold-text); }
.nav-links a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 1px; height: 1px; background: var(--gold-text); }
.nav-actions { display: flex; align-items: center; gap: 12px; }
.nav-cta { min-height: 42px; padding: 11px 20px; }
.menu-btn { display: none; width: 44px; height: 44px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: rgba(255, 253, 248, 0.72); color: var(--ink); cursor: pointer; }
.menu-btn svg { width: 22px; height: 22px; margin: auto; }

/* ---------- Home hero ---------- */
.hero { position: relative; overflow: hidden; min-height: min(640px, calc(100vh - 74px)); display: flex; align-items: center; padding: clamp(44px, 6vw, 84px) 0; background: var(--cream); }
.hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-bg img, .hero-bg video { width: 100%; height: 116%; object-fit: cover; object-position: center; display: block; }
.hero-video { background: var(--cream-soft); }
.hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(96deg, var(--cream) 0%, var(--cream) 22%, rgba(251, 247, 239, 0.86) 42%, rgba(251, 247, 239, 0.34) 60%, rgba(251, 247, 239, 0) 80%); }
.hero-inner { width: min(100%, var(--max)); margin: 0 auto; padding: 0 var(--pad); position: relative; z-index: 2; }
.hero-copy { max-width: 660px; }
.hero-portrait-mobile { display: none; }
.hero-eyebrow { color: var(--gold-text); font-size: var(--fs-micro); font-weight: 600; letter-spacing: 4px; text-transform: uppercase; margin-bottom: 16px; }
.hero h1 { font-size: clamp(29px, 5.2vw, 48px); line-height: 1.14; letter-spacing: -0.5px; margin-bottom: 18px; }
.hero h1 .hero-line { display: block; white-space: nowrap; }
.hero h1 .gold { display: inline; }
.hero h1 .hw { display: inline-block; }
.hero-premium { color: var(--gold-text); }
/* Wavy script accent on "breeze" — light cream, with a soft dark glow so it reads over the bright room */
.breeze { font-family: "Great Vibes", "Snell Roundhand", "Apple Chancery", cursive; font-weight: 400; font-style: normal; color: #fdf6e6; font-size: 1.34em; line-height: 0.8; letter-spacing: 0.5px; padding: 0 0.06em; display: inline-block; vertical-align: -0.08em; text-shadow: 0 2px 5px rgba(33, 31, 29, 0.42), 0 5px 22px rgba(33, 31, 29, 0.5); }
.breeze .bl { display: inline-block; transform-origin: center bottom; will-change: transform; }
.hero-subtitle { max-width: 540px; color: var(--ink-soft); font-size: var(--fs-lead); line-height: 1.65; margin-bottom: 22px; }
.hero-buttons { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.hero-reassure { max-width: 520px; color: var(--ink-muted); font-size: var(--fs-meta); line-height: 1.5; margin-bottom: 26px; }
.trust-row { display: flex; gap: clamp(16px, 2vw, 30px); align-items: center; flex-wrap: wrap; padding-top: 20px; max-width: 640px; border-top: 1px solid rgba(199, 163, 92, 0.34); }
.trust-item { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 10px; color: var(--ink-soft); font-size: var(--fs-meta); font-weight: 500; line-height: 1.3; }
.trust-item svg { width: 28px; height: 28px; color: var(--gold-deep); stroke-width: 1.5; }

/* ---- Hero entrance choreography (plays once on load; the title rises in) ---- */
@media (prefers-reduced-motion: no-preference) {
  .hero-portrait-mobile,
  .hero-eyebrow,
  .hero-subtitle,
  .hero-buttons,
  .hero-reassure,
  .hero .trust-row {
    opacity: 0;
    animation: heroRise 1100ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .hero-portrait-mobile            { animation-delay: 60ms; }
  .hero-eyebrow                    { animation-delay: 150ms; }
  /* hero title reveals word by word, each fading in from the left */
  .hero h1 .hw { opacity: 0; animation: wordInLeft 760ms cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: calc(var(--i, 0) * 85ms + 320ms); }
  /* second line pauses, then fades UP together once breeze has done a full wave cycle */
  .hero h1 .hero-line:nth-child(2) .hw { animation: fadeUp 900ms cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: 2500ms; }
  /* the copy below the title rises 1.5s after the second line, then cascades just after */
  .hero-subtitle                   { animation-delay: 4000ms; }
  .hero-buttons                    { animation-delay: 4160ms; }
  .hero-reassure                   { animation-delay: 4300ms; }
  .hero .trust-row                 { animation-delay: 4440ms; }
  /* breeze: a sine wave travels through the letters like a flicked rope, always.
     Each letter runs the same vertical sine, phase-shifted by its position (--n)
     via a negative delay, so the crest rolls left to right. A staggered fade
     reveals the letters on entrance while the wave is already rolling. */
  .hero h1 .hw-breeze { animation: none; opacity: 1; }
  .breeze .bl {
    opacity: 0;
    animation:
      blFade 520ms ease calc(0.9s + var(--n, 0) * 0.08s) both,
      ropeWave 1.35s ease-in-out calc(0.9s + var(--n, 0) * 0.08s) 2 both,
      ropeWave 3.4s ease-in-out calc(3.6s + var(--n, 0) * 0.08s) infinite;
  }
}
@keyframes heroRise {
  from { opacity: 0; transform: translateY(30px); filter: blur(7px); }
  to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes wordInLeft {
  from { opacity: 0; transform: translateX(-28px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* A full vertical sine cycle. Each letter is phase-shifted (negative delay by --n),
   so the crest rolls along the word like a wave traveling down a flicked rope. */
@keyframes ropeWave {
  0%   { transform: translateY(0); }
  25%  { transform: translateY(-9px); }
  50%  { transform: translateY(0); }
  75%  { transform: translateY(9px); }
  100% { transform: translateY(0); }
}
@keyframes blFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---------- Interior page hero ---------- */
.page-hero { position: relative; overflow: hidden; padding: clamp(46px, 6.5vw, 88px) 0 clamp(38px, 5vw, 60px); background: linear-gradient(180deg, var(--cream-soft), var(--cream)); border-bottom: 1px solid var(--border); }
.page-hero .container { position: relative; z-index: 1; }
.breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; color: var(--ink-muted); font-size: var(--fs-meta); margin-bottom: 16px; }
.breadcrumb a:hover { color: var(--gold-text); }
.breadcrumb span { color: var(--gold-text); }
.page-hero h1 { font-size: clamp(34px, 5vw, 56px); max-width: 18ch; margin-bottom: 16px; letter-spacing: -0.4px; line-height: 1.06; }
.page-hero .lead { max-width: 64ch; color: var(--ink-soft); font-size: var(--fs-lead); line-height: 1.7; }
.page-hero .hero-buttons { margin-top: 26px; margin-bottom: 0; }
.page-hero .state-shape { width: clamp(58px, 7vw, 86px); color: var(--gold-deep); margin-bottom: 18px; }

/* ---------- State-border links ---------- */
.states { background: var(--cream-soft); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.states-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: 920px; margin: clamp(24px, 3vw, 36px) auto 0; }
.state-link { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 30px); padding: clamp(22px, 2.6vw, 30px); border: 1px solid var(--border); border-radius: var(--radius); background: var(--white); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset; transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease; }
.state-link:hover { transform: translateY(-5px); border-color: var(--gold-soft); box-shadow: var(--shadow-card); }
.state-shape { flex: 0 0 auto; width: clamp(64px, 8vw, 92px); color: var(--gold-deep); transition: color 220ms ease, transform 400ms cubic-bezier(.16,1,.3,1); }
.state-shape svg { width: 100%; height: auto; max-height: 116px; }
.state-link:hover .state-shape { color: var(--gold-text); transform: translateY(-2px) rotate(-2deg); }
.state-meta { min-width: 0; }
.state-meta .tag { display: inline-block; margin-bottom: 9px; padding: 4px 12px; border-radius: var(--radius-pill); background: var(--cream-deep); color: var(--gold-strong); font-size: 10.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; }
.state-meta h3 { font-size: var(--fs-h3-lg); margin-bottom: 6px; }
.state-meta p { color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.55; margin-bottom: 12px; }
.state-meta .go { display: inline-flex; align-items: center; gap: 7px; color: var(--gold-text); font-size: var(--fs-meta); font-weight: 600; }
.state-meta .go svg { width: 14px; height: 14px; transition: transform 180ms ease; }
.state-link:hover .go svg { transform: translateX(3px); }

/* ---------- Conditions / What We Treat ---------- */
.services { background: var(--cream); }
.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(208px, 1fr)); gap: 22px; }
.service-card { display: flex; flex-direction: column; min-height: 230px; padding: 30px 22px 26px; border: 1px solid var(--border); border-radius: var(--radius); background: linear-gradient(180deg, rgba(255, 253, 248, 0.96), rgba(255, 253, 248, 0.8)); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset; text-align: center; transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease; }
.service-card:hover { transform: translateY(-6px); border-color: var(--gold-soft); box-shadow: var(--shadow-card); }
.service-icon { width: 52px; height: 52px; margin: 0 auto 16px; color: var(--gold-deep); }
.service-icon svg { width: 100%; height: 100%; stroke-width: 1.5; }
.service-card h3 { font-size: var(--fs-h3); margin-bottom: 10px; }
.service-card p { color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.55; flex: 1; }
.service-card .more { margin-top: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: var(--gold-text); font-size: var(--fs-meta); font-weight: 600; }
.service-card .more svg { width: 13px; height: 13px; transition: transform 180ms ease; }
.service-card:hover .more svg { transform: translateX(3px); }

/* ---------- Who We Help (faded side portraits, opened up, 2-up) ---------- */
.audience { background: var(--cream-soft); }
.audience-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.audience-card { position: relative; display: grid; grid-template-columns: 0.88fr 1.12fr; min-height: 288px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--white); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset; transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease; }
/* a lone 5th card centers instead of sitting awkwardly to one side */
.audience-card:last-child:nth-child(odd) { grid-column: 1 / -1; max-width: 620px; margin-left: auto; margin-right: auto; }
.audience-card:hover { transform: translateY(-5px); border-color: var(--gold-soft); box-shadow: var(--shadow-card); }
.audience-copy { padding: 30px 12px 30px 30px; display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 2; }
.audience-copy svg.a-icon { width: 28px; height: 28px; margin-bottom: 13px; color: var(--gold-deep); stroke-width: 1.5; }
.audience-copy h3 { font-size: var(--fs-h3); margin-bottom: 9px; }
.audience-copy p { color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.55; }
.audience-copy a { margin-top: 14px; display: inline-flex; align-items: center; gap: 7px; width: fit-content; color: var(--gold-text); font-size: var(--fs-meta); font-weight: 600; }
.audience-copy a svg { width: 13px; height: 13px; transition: transform 180ms ease; }
.audience-copy a:hover svg { transform: translateX(3px); }
.audience-figure { position: relative; overflow: hidden; }
.audience-figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 58% 36%; filter: saturate(0.97); }
/* softer, narrower fade so most of the portrait stays clear */
.audience-figure::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, var(--white) 0%, rgba(255, 253, 248, 0.46) 8%, rgba(255, 253, 248, 0) 24%); }
.audience-figure::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 74%, rgba(33, 31, 29, 0.07)); }
.audience-card.children .audience-figure img { object-position: 60% 44%; }
.audience-card.teens   .audience-figure img { object-position: 58% 30%; }
.audience-card.college .audience-figure img { object-position: 64% 40%; }
.audience-card.adults  .audience-figure img { object-position: 58% 28%; }
.audience-card.parents .audience-figure img { object-position: 52% 22%; }

/* ---------- Pillars ---------- */
.pillars { background: var(--cream); }
.pillars-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.pillar { padding: 28px 24px; border-left: 2px solid var(--gold); border-radius: 0 var(--radius) var(--radius) 0; background: linear-gradient(180deg, rgba(255, 253, 248, 0.94), rgba(255, 253, 248, 0.62)); }
.pillar-num { color: var(--gold-text); font-family: var(--serif); font-style: italic; font-size: 30px; margin-bottom: 12px; }
.pillar h3 { font-size: var(--fs-h3); line-height: 1.16; margin-bottom: 10px; }
.pillar p { color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.6; }

/* ---------- Promise ("I got you") ---------- */
.promise { background: radial-gradient(circle at 50% -10%, rgba(199, 163, 92, 0.12), transparent 55%), var(--cream-soft); position: relative; overflow: clip; }
.promise::before { content: ""; position: absolute; width: min(760px, 92vw); height: min(760px, 92vw); left: 50%; top: 48%; border: 1px solid rgba(199, 163, 92, 0.2); border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.promise-inner { max-width: 880px; margin: 0 auto; text-align: center; position: relative; z-index: 1; }
.promise .eyebrow { justify-content: center; }
.promise h2 { font-size: clamp(30px, 4vw, 46px); line-height: 1.1; margin-bottom: 22px; }
.promise-lead { max-width: 660px; margin: 0 auto 38px; color: var(--ink-soft); font-size: var(--fs-lead); line-height: 1.72; }
.promise-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 36px; text-align: left; }
.promise-item { display: grid; grid-template-columns: 30px 1fr; gap: 13px; align-items: start; padding: 20px 22px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--white); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset; }
.promise-item svg { width: 26px; height: 26px; color: var(--gold-deep); stroke-width: 1.6; margin-top: 2px; }
.promise-item strong { display: block; color: var(--ink); font-family: var(--serif); font-size: 20px; font-weight: 500; margin-bottom: 4px; }
.promise-item span { color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.5; }
.promise-sign { margin: 0 0 30px; color: var(--gold-text); font-family: var(--serif); font-style: italic; font-size: 25px; }
.promise-fineprint { margin: 22px auto 0; max-width: 560px; color: var(--ink-muted); font-size: var(--fs-meta); line-height: 1.5; }

/* ---------- Approach ---------- */
.approach { background: var(--cream); }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px 22px; position: relative; }
.steps::before { content: ""; position: absolute; left: 12%; right: 12%; top: 41px; height: 1px; background-image: linear-gradient(90deg, var(--gold-soft) 42%, transparent 0); background-size: 12px 1px; }
.step { text-align: center; position: relative; z-index: 1; }
.step-icon { width: 82px; height: 82px; margin: 0 auto 16px; border: 1px solid var(--gold-soft); border-radius: 50%; background: var(--cream); color: var(--gold-deep); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 9px var(--cream-soft); }
.step-icon svg { width: 32px; height: 32px; stroke-width: 1.5; }
.step-num { color: var(--gold-text); font-family: var(--serif); font-size: 19px; font-weight: 600; margin-bottom: 6px; }
.step p { max-width: 220px; margin: 0 auto; color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.56; }

/* ---------- Identity ---------- */
.identity { background: var(--cream-soft); position: relative; overflow: hidden; }
.identity-inner { width: min(100%, 820px); margin: 0 auto; text-align: center; position: relative; z-index: 1; }
.identity-eyebrow { margin-bottom: 24px; color: var(--ink-soft); font-family: var(--serif); font-size: clamp(21px, 2.2vw, 30px); font-style: italic; line-height: 1.3; }
.identity-words { display: grid; gap: 4px; margin-bottom: 32px; }
.identity-words span { color: var(--gold-text); font-family: var(--serif); font-size: clamp(40px, 5vw, 64px); font-style: italic; line-height: 1.05; }
.identity-body { max-width: 620px; margin: 0 auto 28px; color: var(--ink-soft); font-size: var(--fs-lead); line-height: 1.7; }
.identity-link { display: inline-flex; align-items: center; gap: 8px; color: var(--gold-text); font-size: var(--fs-sm); font-weight: 600; }
.identity-link svg { width: 14px; height: 14px; transition: transform 180ms ease; }
.identity-link:hover svg { transform: translateX(3px); }

/* ---------- Founder ---------- */
.founder { background: var(--cream); }
.founder-card { display: grid; grid-template-columns: 1.05fr 1.4fr 0.85fr; gap: clamp(24px, 4vw, 48px); align-items: center; border: 1px solid var(--border); border-radius: var(--radius); background: linear-gradient(90deg, rgba(255, 255, 255, 0.74), rgba(255, 253, 248, 0.94)), var(--white); box-shadow: var(--shadow-soft); overflow: hidden; }
.founder-photo { min-height: 380px; height: 100%; overflow: hidden; position: relative; }
.founder-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 60%, rgba(255, 253, 248, 0.9) 100%); }
.founder-photo img { width: 100%; height: 112%; object-fit: cover; object-position: center 16%; will-change: transform; }
.founder-copy { padding: clamp(30px, 4vw, 46px) 0; }
.founder-copy .eyebrow { margin-bottom: 10px; }
.founder-copy .eyebrow::before, .founder-copy .eyebrow::after { display: none; }
.founder-copy h2 { font-size: var(--fs-h3-lg); margin-bottom: 6px; }
.founder-title { color: var(--gold-text); font-family: var(--serif); font-size: 22px; font-style: italic; margin-bottom: 16px; }
.founder-copy p { color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.7; margin-bottom: 12px; }
.signature { margin-top: 18px; color: var(--gold-text); font-family: var(--serif); font-style: italic; font-size: 30px; width: fit-content; }
.founder-trust { display: flex; flex-direction: column; gap: 18px; padding: clamp(26px, 3vw, 38px) clamp(22px, 3vw, 34px) clamp(26px, 3vw, 38px) 0; }
.founder-principle { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 13px; align-items: center; color: var(--ink-soft); font-size: var(--fs-meta); font-weight: 500; line-height: 1.4; }
.founder-principle span { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--gold-soft); border-radius: 50%; color: var(--gold-deep); background: var(--cream); }
.founder-principle svg { width: 20px; height: 20px; stroke-width: 1.5; }

/* ---------- Care team ---------- */
.care-team { background: var(--cream-soft); }
.clinician-card { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: clamp(20px, 3vw, 36px); align-items: start; max-width: 920px; margin: 0 auto; padding: clamp(26px, 3vw, 40px); border: 1px solid var(--border); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-card); }
.clinician-avatar { width: 112px; height: 112px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 38px; font-weight: 600; letter-spacing: 1px; color: var(--gold-text); background: linear-gradient(180deg, var(--cream-soft), var(--cream-deep)); border: 1px solid var(--gold-soft); }
.clinician-body h3 { font-size: var(--fs-h3-lg); margin-bottom: 6px; }
.clinician-title { color: var(--gold-text); font-size: var(--fs-meta); font-weight: 600; letter-spacing: 0.2px; margin-bottom: 16px; }
.clinician-body p { color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.7; margin-bottom: 11px; }
.clinician-body p:last-child { margin-bottom: 0; }

/* ---------- Fees ---------- */
.fees { background: var(--cream); }
.fees-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: 1000px; margin: 0 auto; }
.fees-card { padding: clamp(28px, 3vw, 38px); border: 1px solid var(--border); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-card); scroll-margin-top: 96px; transition: border-color 200ms ease, box-shadow 200ms ease; }
.fees-card.is-highlight { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold-soft), var(--shadow-card); }
.fees-head { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; }
.fees-head .state-shape { width: 56px; color: var(--gold-deep); }
.fees-card h2, .fees-card h3 { font-size: var(--fs-h3-lg); }
.fees-tag { display: inline-block; margin-bottom: 18px; padding: 5px 14px; border-radius: var(--radius-pill); background: var(--cream-deep); color: var(--gold-strong); font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; }
.fees-list { list-style: none; margin: 0 0 16px; padding: 0; }
.fees-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--border); color: var(--ink-soft); font-size: var(--fs-sm); }
.fees-list li:last-child { border-bottom: none; }
.fees-list li strong { font-family: var(--serif); font-size: 24px; color: var(--ink); white-space: nowrap; }
.fees-note, .fees-body { color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.66; }
.fees-body p + p { margin-top: 12px; }

/* ---------- FAQ ---------- */
.faq { background: linear-gradient(180deg, var(--cream-soft) 0%, var(--cream) 100%); }
.faq-list { max-width: 900px; margin: 0 auto; border-top: 1px solid var(--border); }
.faq-row { border-bottom: 1px solid var(--border); }
.faq-row summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 6px; cursor: pointer; color: var(--ink); font-family: var(--serif); font-size: clamp(20px, 1.6rem, 26px); line-height: 1.24; list-style: none; transition: color 180ms ease; }
.faq-row summary::-webkit-details-marker { display: none; }
.faq-row summary::marker { content: ""; }
.faq-row summary:hover, .faq-row[open] summary { color: var(--gold-text); }
.faq-icon { width: 34px; height: 34px; border: 1px solid var(--gold-soft); border-radius: 50%; flex: 0 0 auto; position: relative; transition: border-color 180ms ease, background 180ms ease, transform 220ms ease; }
.faq-icon::before, .faq-icon::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--gold-strong); transform: translate(-50%, -50%); }
.faq-icon::before { width: 13px; height: 1.5px; }
.faq-icon::after { width: 1.5px; height: 13px; transition: opacity 180ms ease; }
.faq-row[open] .faq-icon { background: var(--cream); border-color: var(--gold); transform: rotate(90deg); }
.faq-row[open] .faq-icon::after { opacity: 0; }
.faq-answer { max-width: 760px; padding: 0 6px 28px; }
.faq-answer p { color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.74; }
.faq-answer p + p { margin-top: 12px; }
.faq-answer strong { color: var(--ink); font-weight: 600; }

/* ---------- Credibility ---------- */
.credibility { background: var(--cream); }
.cred-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.cred-card { padding: 28px 24px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--white); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset; }
.cred-icon { width: 40px; height: 40px; margin-bottom: 16px; color: var(--gold-deep); }
.cred-icon svg { width: 100%; height: 100%; stroke-width: 1.5; }
.cred-card h3 { font-size: var(--fs-h3); margin-bottom: 9px; }
.cred-card p { color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.62; }

/* ---------- Prose / condition content ---------- */
.prose { max-width: 740px; margin: 0 auto; }
.prose > p { color: var(--ink-soft); font-size: var(--fs-body); line-height: 1.75; margin-bottom: 18px; }
.prose h2 { font-size: clamp(24px, 2.8vw, 30px); margin: 28px 0 12px; }
.prose h3 { font-size: var(--fs-h3); margin: 24px 0 10px; }
.prose ul { margin: 0 0 20px; padding: 0; list-style: none; display: grid; gap: 11px; }
.prose ul li { position: relative; padding-left: 30px; color: var(--ink-soft); font-size: var(--fs-body); line-height: 1.6; }
.prose ul li::before { content: ""; position: absolute; left: 7px; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.prose a { color: var(--gold-text); font-weight: 600; }
.prose a:hover { text-decoration: underline; }

.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.feature-card { padding: 28px 26px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--white); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset; }
.feature-card .fc-icon { width: 42px; height: 42px; color: var(--gold-deep); margin-bottom: 14px; }
.feature-card .fc-icon svg { width: 100%; height: 100%; stroke-width: 1.5; }
.feature-card h3 { font-size: var(--fs-h3); margin-bottom: 9px; }
.feature-card p { color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.62; }
/* Compact feature-card variant (e.g. California page): tighter cards so substance is reached faster */
.feature-grid.is-compact { gap: 16px; }
.feature-grid.is-compact .feature-card { padding: 18px 20px; }
.feature-grid.is-compact .fc-icon { width: 30px; height: 30px; margin-bottom: 8px; }
.feature-grid.is-compact .feature-card h3 { margin-bottom: 5px; }
.feature-grid.is-compact .feature-card p { font-size: var(--fs-meta); line-height: 1.5; }

.callout { max-width: 880px; margin: 0 auto; padding: 24px 28px; border: 1px solid var(--gold-soft); border-radius: var(--radius); background: var(--cream-light); display: grid; grid-template-columns: 26px 1fr; gap: 16px; align-items: start; }
.callout svg { width: 24px; height: 24px; color: var(--gold-text); stroke-width: 1.6; margin-top: 1px; }
.callout p { color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.66; }
.callout p + p { margin-top: 10px; }
.callout strong { color: var(--ink); }

/* ---------- Blog / library ---------- */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.blog-card { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius); background: var(--white); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset; padding: 26px 24px; transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease; }
.blog-card:hover { transform: translateY(-5px); border-color: var(--gold-soft); box-shadow: var(--shadow-card); }
.blog-card .cat { display: inline-block; align-self: flex-start; margin-bottom: 13px; padding: 4px 11px; border-radius: var(--radius-pill); background: var(--cream-deep); color: var(--gold-strong); font-size: 10.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; }
.blog-card h3 { font-size: 21px; line-height: 1.22; margin-bottom: 9px; }
.blog-card p { color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.55; flex: 1; }
.blog-card .read { margin-top: 15px; display: inline-flex; align-items: center; gap: 7px; color: var(--gold-text); font-size: var(--fs-meta); font-weight: 600; }
.blog-card .read svg { width: 13px; height: 13px; transition: transform 180ms ease; }
.blog-card:hover .read svg { transform: translateX(3px); }
.blog-cat-head { margin: clamp(34px, 4vw, 52px) 0 18px; display: flex; align-items: baseline; gap: 12px; }
.blog-cat-head h2 { font-size: var(--fs-h3-lg); }
.blog-cat-head span { color: var(--ink-muted); font-size: var(--fs-meta); }

/* Article (post) layout */
.post .container-narrow { max-width: 760px; }
.post-cat { display: inline-block; margin-bottom: 14px; padding: 4px 12px; border-radius: var(--radius-pill); background: var(--cream-deep); color: var(--gold-strong); font-size: 11px; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase; }
.post h1 { font-size: clamp(30px, 3.8vw, 42px); line-height: 1.12; margin-bottom: 12px; }
.post-meta { color: var(--ink-muted); font-size: var(--fs-meta); margin-bottom: 26px; }
.post-sources { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border); color: var(--ink-muted); font-size: var(--fs-meta); line-height: 1.65; }
.post-sources a { color: var(--gold-text); }
.post-related { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px; }
.post-related a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--gold-soft); border-radius: var(--radius-pill); color: var(--gold-text); font-size: var(--fs-meta); font-weight: 600; transition: background 180ms ease, color 180ms ease; }
.post-related a:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }
.post-disclaimer { max-width: 760px; margin: 26px auto 0; padding: 16px 20px; border: 1px solid var(--gold-soft); border-radius: var(--radius); background: var(--cream-light); color: var(--ink-muted); font-size: var(--fs-meta); line-height: 1.6; }
.post-disclaimer strong { color: var(--ink); }
.key-takeaway { max-width: 760px; margin: 22px auto; background: var(--cream-soft); }
.key-takeaway strong { color: var(--ink); }
/* Psychology-Today-style "Key points" box near the top of an article */
.key-points { margin: 0 0 28px; padding: 20px 24px; background: var(--cream-soft); border: 1px solid var(--gold-soft); border-left: 3px solid var(--gold); border-radius: var(--radius); }
.key-points .kp-label { display: block; font-size: var(--fs-micro); font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--gold-text); margin-bottom: 11px; }
.key-points ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.key-points li { position: relative; padding-left: 22px; color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.5; }
.key-points li::before { content: ""; position: absolute; left: 6px; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
/* Journal: filterable, everything-on-screen layout */
.blog-toolbar { position: sticky; top: var(--navh, 74px); z-index: 20; background: rgba(251, 247, 239, 0.93); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 13px 0; margin-bottom: clamp(26px, 3vw, 40px); }
.blog-filters { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; }
.blog-chip { padding: 8px 16px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--white); color: var(--ink-soft); font-size: var(--fs-meta); font-weight: 600; cursor: pointer; transition: background 160ms ease, color 160ms ease, border-color 160ms ease; white-space: nowrap; }
.blog-chip:hover { border-color: var(--gold-strong); color: var(--ink); }
.blog-chip.is-active { background: var(--ink); color: var(--white); border-color: var(--ink); }
.blog-card.is-hidden { display: none; }
.blog-count { text-align: center; color: var(--ink-muted); font-size: var(--fs-meta); margin-bottom: 18px; }
.post-meta a, .post-author { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--gold-soft); text-underline-offset: 3px; }
.post-meta a:hover { text-decoration-color: var(--gold-strong); }
.blog-grid { grid-template-columns: repeat(auto-fill, minmax(288px, 1fr)); }
@media (max-width: 700px) { .blog-grid { grid-template-columns: 1fr; } .blog-chip { padding: 7px 13px; } }

/* ---------- Reusable CTA band / contact ---------- */
.contact, .cta-band { background: linear-gradient(180deg, var(--cream) 0%, var(--cream-soft) 100%); scroll-margin-top: 80px; }
.cta-band-inner { max-width: 760px; margin: 0 auto; text-align: center; }
.cta-band-inner h2 { font-size: var(--fs-h2); margin-bottom: 14px; }
.cta-band-inner > p { color: var(--ink-soft); font-size: var(--fs-lead); line-height: 1.6; margin: 0 auto 24px; max-width: 60ch; }
.cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

.contact-card { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: center; max-width: 1040px; margin: 0 auto; padding: clamp(30px, 4vw, 50px); border: 1px solid var(--gold-soft); border-radius: var(--radius); background: linear-gradient(100deg, rgba(255, 253, 248, 0.95), rgba(255, 248, 235, 0.98)); box-shadow: var(--shadow-soft); }
.contact-main h2 { font-size: var(--fs-h2); margin-bottom: 14px; }
.contact-main > p { color: var(--ink-soft); font-size: var(--fs-lead); line-height: 1.6; margin-bottom: 22px; max-width: 460px; }
.contact-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 16px; }
.contact-reassure { color: var(--ink-muted); font-size: var(--fs-meta); line-height: 1.5; max-width: 460px; }
.contact-side { display: grid; gap: 14px; align-content: center; }
.contact-side .contact-line, .contact-note { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 11px; align-items: start; color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.5; }
.contact-side a.contact-line { font-weight: 500; }
.contact-side a.contact-line:hover { color: var(--gold-text); }
.contact-side .contact-line svg, .contact-note svg { width: 20px; height: 20px; color: var(--gold-text); margin-top: 1px; stroke-width: 1.6; }
.contact-note { margin-top: 6px; padding-top: 16px; border-top: 1px solid var(--border); color: var(--ink-muted); font-size: var(--fs-meta); }
.contact-note strong { color: var(--ink); }

/* ---------- Footer ---------- */
footer { background: linear-gradient(180deg, #1c2840 0%, #16223a 100%); border-top: 1px solid rgba(200, 163, 91, 0.28); padding: 48px 0 24px; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 0.85fr 0.95fr 1.1fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
.footer-brand .brand { margin-bottom: 16px; }
footer .brand-word strong { color: #fdf8ee; }
footer .brand-word span { color: #e0c081; }
.footer-brand p { max-width: 250px; color: rgba(244, 238, 224, 0.74); font-size: var(--fs-meta); line-height: 1.65; margin-bottom: 14px; }
.footer-tagline { color: #e0c081; font-family: var(--serif); font-size: 17px; font-style: italic; margin-bottom: 18px; }
.socials { display: flex; gap: 12px; }
.socials a { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: #e0c081; border: 1px solid rgba(200, 163, 91, 0.28); border-radius: 50%; transition: background 180ms ease, color 180ms ease, transform 180ms ease; }
.socials a:hover { color: #16223a; background: #e0c081; border-color: #e0c081; transform: translateY(-2px); }
.socials svg { width: 16px; height: 16px; }
.footer-col h3 { color: #fdf8ee; font-family: var(--serif); font-size: 19px; margin-bottom: 14px; }
.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.footer-col a, .footer-col li, .contact-line { color: rgba(244, 238, 224, 0.7); font-size: var(--fs-meta); line-height: 1.55; }
.footer-col a:hover { color: #f0d68d; }
.contact-list { display: grid; gap: 12px; }
.footer-col .contact-line { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; }
.footer-col .contact-line svg { width: 16px; height: 16px; color: #e0c081; margin-top: 2px; stroke-width: 1.5; }
.footer-bottom { width: min(100%, var(--max)); margin: 36px auto 0; padding: 22px var(--pad) 0; border-top: 1px solid rgba(200, 163, 91, 0.18); display: flex; align-items: center; justify-content: space-between; gap: 18px; color: rgba(244, 238, 224, 0.45); font-size: var(--fs-micro); }
.footer-bottom nav { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-bottom a { color: rgba(244, 238, 224, 0.45); transition: color 180ms ease; }
.footer-bottom a:hover { color: #f0d68d; }

/* ---------- Sticky mobile Book bar ---------- */
.mobile-book { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60; display: none; box-shadow: 0 12px 30px rgba(76, 54, 20, 0.3); transform: translateY(160%); transition: transform 280ms ease; }
.mobile-book.is-visible { transform: translateY(0); }

/* ===========================================================================
   Motion: varied scroll reveals + parallax (intimate, never scroll-jacking)
   data-reveal (default = up) | "rise" | "left" | "right" | "zoom"
   data-stagger="<ms>" on a container staggers its direct [data-reveal] children
   =========================================================================== */
[data-reveal] { opacity: 1; transform: none; }
html.reveal-ready [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1), transform 750ms cubic-bezier(0.22, 1, 0.36, 1); }
html.reveal-ready [data-reveal="rise"] { transform: translateY(30px); }
html.reveal-ready [data-reveal="left"] { transform: translateX(32px); }
html.reveal-ready [data-reveal="right"] { transform: translateX(-32px); }
html.reveal-ready [data-reveal="zoom"] { transform: scale(0.94); }
html.reveal-ready [data-reveal].is-visible { opacity: 1; transform: none; }
[data-parallax] { will-change: transform; }

/* Icons + accents "pop" in once their card/section is revealed (springy, slight overshoot) */
html.reveal-ready [data-reveal] .service-icon,
html.reveal-ready [data-reveal] .step-icon,
html.reveal-ready [data-reveal] .fc-icon,
html.reveal-ready [data-reveal] .cred-icon,
html.reveal-ready [data-reveal] .a-icon,
html.reveal-ready [data-reveal] .pillar-num,
html.reveal-ready [data-reveal].promise-item svg {
  opacity: 0;
  transform: scale(0.78);
  transition: opacity 650ms ease, transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: 120ms;
}
html.reveal-ready [data-reveal].is-visible .service-icon,
html.reveal-ready [data-reveal].is-visible .step-icon,
html.reveal-ready [data-reveal].is-visible .fc-icon,
html.reveal-ready [data-reveal].is-visible .cred-icon,
html.reveal-ready [data-reveal].is-visible .a-icon,
html.reveal-ready [data-reveal].is-visible .pillar-num,
html.reveal-ready [data-reveal].promise-item.is-visible svg {
  opacity: 1;
  transform: scale(1);
}

/* ===========================================================================
   Sticky pin-and-reveal: each pinned section holds centered while its parts
   animate in, then releases to the next. Native CSS sticky (no scroll
   interception), desktop + motion only. Sections too tall to pin fall back
   to normal flow via .snap-tall (set in site.js) so nothing is cut off.
   =========================================================================== */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  /* Track is taller than the viewport (via min-height, NOT padding) so the
     sticky inner has real content-box room to hold. --hold (set per section in
     site.js, in viewport fractions) scales the hold to the number of elements
     that section reveals one-by-one. */
  .snap { padding-top: 0; padding-bottom: 0; min-height: calc(100vh - var(--navh, 74px) + (var(--hold, 0.34) * 100vh)); }
  .snap > .snap-inner {
    position: sticky;
    top: var(--navh, 74px);
    min-height: calc(100vh - var(--navh, 74px));
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: clamp(18px, 2.4vh, 38px);
    padding-bottom: clamp(18px, 2.4vh, 38px);
  }
  .snap.snap-tall { min-height: 0; padding-top: clamp(56px, 6.5vw, 92px); padding-bottom: clamp(56px, 6.5vw, 92px); }
  .snap.snap-tall > .snap-inner { position: static; min-height: 0; padding: 0; display: block; }

  /* Real Talk (.promise) carries the most content of any pinned section. Tighten its
     vertical rhythm — only while pinning is active — and give it a slim pinned padding so
     it fits the screen under the nav and sticks like its neighbors instead of dropping to
     a non-pinned scroll. */
  .promise.snap > .snap-inner { padding-top: 6px; padding-bottom: 6px; }
  .promise h2 { margin-bottom: 10px; }
  .promise-lead { margin-bottom: 14px; line-height: 1.52; }
  .promise-grid { margin-bottom: 12px; }
  .promise-item { padding: 11px 20px; }
  .promise-item span { line-height: 1.43; }
  .promise-sign { margin-bottom: 10px; }
  .promise-fineprint { margin-top: 10px; }
}

/* ===========================================================================
   Responsive
   =========================================================================== */
@media (max-width: 1080px) {
  .nav-links { gap: 14px; font-size: var(--fs-micro); }
  .pillars-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 22px; }
  .cred-grid { grid-template-columns: repeat(2, 1fr); }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .audience-grid { grid-template-columns: repeat(2, 1fr); }
  .founder-card { grid-template-columns: 1fr; }
  .founder-photo { min-height: 440px; }
  .founder-photo::after { background: linear-gradient(180deg, transparent 56%, rgba(255, 253, 248, 0.92) 100%); }
  .founder-copy { padding: 0 clamp(28px, 5vw, 52px); }
  .founder-trust { padding: 0 clamp(28px, 5vw, 52px) clamp(30px, 5vw, 44px); display: grid; grid-template-columns: repeat(2, 1fr); }
  .promise-grid { grid-template-columns: 1fr; max-width: 560px; margin-left: auto; margin-right: auto; }
}

@media (max-width: 900px) {
  .nav-links { position: absolute; top: calc(100% + 8px); right: var(--pad); display: none; width: min(300px, calc(100vw - 40px)); padding: 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-soft); flex-direction: column; align-items: stretch; font-size: var(--fs-sm); }
  .nav-links.is-open { display: flex; }
  .nav-links a { padding: 10px 4px; }
  .nav-actions .nav-cta { display: none; }
  .menu-btn { display: flex; }
  .steps { grid-template-columns: repeat(2, 1fr); gap: 40px 20px; }
  .steps::before { display: none; }
  .states-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .hero { min-height: 0; text-align: left; }
  .hero-bg img, .hero-bg video { object-position: center; }
  .hero::after { background: linear-gradient(180deg, rgba(251, 247, 239, 0.82) 0%, rgba(251, 247, 239, 0.9) 60%, rgba(251, 247, 239, 0.96) 100%); }
  .hero-portrait-mobile { display: block; width: 120px; height: 120px; border-radius: 50%; overflow: hidden; border: 3px solid var(--white); box-shadow: var(--shadow-card); margin-bottom: 22px; }
  .hero-portrait-mobile img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
  .hero-buttons { align-items: stretch; flex-direction: column; }
  .hero-buttons .btn { width: 100%; }
  .audience-grid { grid-template-columns: 1fr; }
  .audience-card:last-child:nth-child(odd) { grid-column: auto; max-width: none; margin: 0; }
  .feature-grid { grid-template-columns: 1fr; }
  .fees-grid { grid-template-columns: 1fr; }
  .contact-card { grid-template-columns: 1fr; }
  .contact-actions .btn, .cta-actions .btn { width: 100%; }
  .mobile-book { display: flex; }
}

@media (max-width: 600px) {
  .nav-inner { padding-top: 10px; padding-bottom: 10px; }
  .brand { min-width: 0; }
  .brand img { width: 38px; height: 48px; }
  .brand-word strong { font-size: 15px; letter-spacing: 3px; }
  .brand-word span { font-size: 8px; letter-spacing: 2.4px; }
  .hero h1 { letter-spacing: -0.3px; }
  .hero-subtitle { font-size: var(--fs-body); }
  .pillars-grid { grid-template-columns: 1fr; }
  .cred-grid { grid-template-columns: 1fr; }
  .clinician-card { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .steps { grid-template-columns: 1fr; }
  .founder-trust { grid-template-columns: 1fr; }
  .founder-photo { min-height: 320px; }
  .faq-row summary { padding: 22px 2px; gap: 16px; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .footer-bottom nav { justify-content: center; }
  /* Audience cards stack: portrait on top, copy below; subject stays framed */
  .audience-card { grid-template-columns: 1fr; min-height: 0; }
  .audience-figure { position: relative; height: auto; aspect-ratio: 4 / 3; order: -1; }
  .audience-figure img { position: absolute; }
  .audience-figure::before { background: linear-gradient(180deg, transparent 58%, rgba(255, 253, 248, 0.45)); }
  .audience-copy { padding: 22px 24px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  html.reveal-ready [data-reveal] { opacity: 1; transform: none; }
  [data-parallax] { transform: none !important; }
}

/* ===========================================================================
   PREMIUM ELEVATION — 2026-05-30 (conversion + luxury pass)
   New components: gold-foil CTA, gilt frames, dark "anchor" section,
   oversized identity, reassurance strip, path chooser w/ fees + selectivity,
   the "Begin" intake form, the Sigma Letter capture, concierge tiers,
   and fee packages. Self-contained; remove this block to revert the pass.
   =========================================================================== */
:root { --navy-deep: #16223a; --navy: #1d2a44; --navy-soft: #243353; --gold-foil-lo: #b3862f; --gold-foil-hi: #ecd083; }

/* ---- Refined gold-FOIL primary button (3-stop sheen + faux-bevel top edge) ---- */
.btn-primary {
  color: #2b2008;
  background: linear-gradient(176deg, var(--gold-foil-hi) 0%, #d4ad57 44%, var(--gold-foil-lo) 100%);
  border-color: rgba(120, 86, 24, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 248, 224, 0.75), 0 9px 22px rgba(166, 127, 52, 0.24);
}
.btn-primary:hover {
  background: linear-gradient(176deg, #f0d68d 0%, #cea551 46%, #ac8029 100%);
  box-shadow: inset 0 1px 0 rgba(255, 248, 224, 0.8), 0 14px 30px rgba(166, 127, 52, 0.32);
  transform: translateY(-2px);
}

/* ---- Gilt hairline inner frame (for founder + intake cards) ---- */
.gilt { position: relative; }
.gilt::after { content: ""; position: absolute; inset: 9px; border: 1px solid rgba(200, 163, 91, 0.42); border-radius: calc(var(--radius) - 3px); pointer-events: none; z-index: 3; }

/* ---- Dark "anchor" section: ink/navy ground, cream + gold type ---- */
.anchor-dark { background: radial-gradient(120% 90% at 50% -8%, var(--navy-soft) 0%, var(--navy) 42%, var(--navy-deep) 100%); color: var(--cream); border-top: 1px solid rgba(200, 163, 91, 0.22); border-bottom: 1px solid rgba(200, 163, 91, 0.22); }
.anchor-dark h1, .anchor-dark h2, .anchor-dark h3 { color: #fff; }
.anchor-dark p, .anchor-dark li, .anchor-dark span { color: rgba(244, 238, 224, 0.84); }
.anchor-dark .gold { color: #e6c578; }
.anchor-dark .eyebrow { color: #ddbc7c; }
.anchor-dark .eyebrow::before, .anchor-dark .eyebrow::after { background: #c2a05a; }
.anchor-dark .btn-secondary { color: var(--cream); border-color: rgba(230, 197, 120, 0.6); background: rgba(255, 255, 255, 0.04); }
.anchor-dark .btn-secondary:hover { color: var(--navy-deep); background: var(--cream); border-color: var(--cream); }
/* Promise as the dark anchor: re-skin its inner cards + decorative ring for dark ground */
.promise.anchor-dark { background: radial-gradient(120% 90% at 50% -6%, var(--navy-soft) 0%, var(--navy) 46%, var(--navy-deep) 100%); }
.promise.anchor-dark::before { border-color: rgba(230, 197, 120, 0.18); }
.promise.anchor-dark .promise-item { background: rgba(255, 255, 255, 0.045); border-color: rgba(230, 197, 120, 0.22); box-shadow: none; }
.promise.anchor-dark .promise-item strong { color: #fff; }
.promise.anchor-dark .promise-item span { color: rgba(244, 238, 224, 0.78); }
.promise.anchor-dark .promise-item svg { color: #e6c578; }
.promise.anchor-dark .promise-sign { color: #ecd083; }
.promise.anchor-dark .promise-fineprint { color: rgba(244, 238, 224, 0.6); }

/* ---- Oversized identity: the single image-free luxury moment (type + space) ---- */
.identity-words span { font-size: clamp(46px, 8vw, 96px); line-height: 1.02; letter-spacing: -0.5px; }
.identity { padding-top: clamp(64px, 8vw, 110px); padding-bottom: clamp(64px, 8vw, 110px); }
.identity-eyebrow { font-size: clamp(20px, 2vw, 26px); }

/* ---- Reassurance strip (sits right under the hero; answers the top objections) ---- */
.reassure { background: var(--cream-soft); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.reassure .container { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 3vw, 38px); padding-top: clamp(22px, 2.6vw, 30px); padding-bottom: clamp(22px, 2.6vw, 30px); }
.reassure-item { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 13px; align-items: start; }
.reassure-item svg { width: 30px; height: 30px; color: var(--gold-deep); stroke-width: 1.5; }
.reassure-item strong { display: block; font-family: var(--serif); font-size: 19px; font-weight: 600; color: var(--ink); margin-bottom: 2px; line-height: 1.2; }
.reassure-item span { color: var(--ink-soft); font-size: var(--fs-meta); line-height: 1.45; }
@media (max-width: 760px) { .reassure .container { grid-template-columns: 1fr; gap: 16px; } }

/* ---- Path chooser: fee transparency + honest selectivity on the state cards ---- */
.state-fee { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin: 2px 0 10px; }
.state-fee b { font-family: var(--serif); font-size: 21px; font-weight: 600; color: var(--ink); }
.state-fee em { font-style: normal; color: var(--ink-muted); font-size: var(--fs-meta); }
.scarcity { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; color: var(--gold-strong); font-size: var(--fs-meta); font-weight: 600; line-height: 1.4; }
.scarcity svg { width: 15px; height: 15px; flex: 0 0 auto; stroke-width: 1.7; }

/* ---- "Begin" intake form ---- */
.start { background: linear-gradient(180deg, var(--cream) 0%, var(--cream-soft) 100%); scroll-margin-top: 88px; }
.start-card { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(28px, 4vw, 54px); align-items: start; max-width: 1040px; margin: 0 auto; padding: clamp(28px, 4vw, 48px); border: 1px solid var(--gold-soft); border-radius: var(--radius); background: linear-gradient(100deg, rgba(255, 253, 248, 0.96), rgba(255, 248, 235, 0.99)); box-shadow: var(--shadow-soft); }
.start-intro h2 { font-size: var(--fs-h2); margin-bottom: 12px; }
.start-intro > p { color: var(--ink-soft); font-size: var(--fs-lead); line-height: 1.6; margin-bottom: 22px; max-width: 42ch; }
.start-contact { display: grid; gap: 13px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--border); }
.start-contact .contact-line, .start-contact .contact-note { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 11px; align-items: start; color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.5; }
.start-contact a.contact-line { font-weight: 500; }
.start-contact a.contact-line:hover { color: var(--gold-text); }
.start-contact svg { width: 20px; height: 20px; color: var(--gold-text); margin-top: 1px; stroke-width: 1.6; }
.start-contact .contact-note { color: var(--ink-muted); font-size: var(--fs-meta); }
.start-contact .contact-note strong { color: var(--ink); }
.intake { display: grid; gap: 14px; }
.intake .field { display: grid; gap: 6px; }
.intake .field label { font-size: var(--fs-meta); font-weight: 600; color: var(--ink-soft); letter-spacing: 0.2px; }
.intake .field .req { color: var(--gold-strong); }
.intake input, .intake textarea, .intake select { width: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--white); color: var(--ink); font: inherit; font-size: var(--fs-sm); transition: border-color 160ms ease, box-shadow 160ms ease; }
.intake input::placeholder, .intake textarea::placeholder { color: #a99e8d; }
.intake input:focus, .intake textarea:focus, .intake select:focus { border-color: var(--gold-deep); box-shadow: 0 0 0 3px var(--gold-soft); outline: none; }
.intake textarea { min-height: 80px; resize: vertical; }
.field-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.choice-row { display: flex; flex-wrap: wrap; gap: 9px; }
.choice { position: relative; }
.choice input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.choice span { display: inline-flex; align-items: center; padding: 9px 16px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--white); color: var(--ink-soft); font-size: var(--fs-meta); font-weight: 600; transition: background 150ms ease, color 150ms ease, border-color 150ms ease; }
.choice input:hover + span { border-color: var(--gold-strong); }
.choice input:checked + span { background: var(--ink); color: var(--white); border-color: var(--ink); }
.choice input:focus-visible + span { outline: 2px solid var(--gold-strong); outline-offset: 2px; }
.form-fineprint { color: var(--ink-muted); font-size: var(--fs-micro); line-height: 1.5; }
.intake .btn-primary { width: 100%; }
.form-done { display: none; padding: 8px 2px; }
.start.is-done .intake { display: none; }
.start.is-done .form-done { display: block; }
.form-done h3 { font-size: var(--fs-h3-lg); margin-bottom: 8px; }
.form-done p { color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.6; }
.form-done .tick { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--gold-soft); color: var(--gold-deep); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.form-done .tick svg { width: 24px; height: 24px; stroke-width: 1.8; }
@media (max-width: 760px) { .start-card { grid-template-columns: 1fr; } .field-2 { grid-template-columns: 1fr; } }

/* ---- The Sigma Letter capture (homepage lead magnet) ---- */
.letter { background: var(--cream); }
.letter-card { max-width: 880px; margin: 0 auto; text-align: center; padding: clamp(30px, 4vw, 46px); border: 1px solid var(--gold-soft); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-card); }
.letter-card .eyebrow { justify-content: center; }
.letter-card h2 { font-size: var(--fs-h2); margin-bottom: 12px; }
.letter-card > p { color: var(--ink-soft); font-size: var(--fs-lead); line-height: 1.6; max-width: 56ch; margin: 0 auto 24px; }
.letter-form { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; max-width: 520px; margin: 0 auto; }
.letter-form input { flex: 1 1 240px; padding: 13px 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--white); color: var(--ink); font: inherit; font-size: var(--fs-sm); }
.letter-form input:focus { border-color: var(--gold-deep); box-shadow: 0 0 0 3px var(--gold-soft); outline: none; }
.letter-fineprint { color: var(--ink-muted); font-size: var(--fs-micro); margin-top: 14px; }
.letter.is-done .letter-form, .letter.is-done .letter-fineprint { display: none; }
.letter-done { display: none; color: var(--gold-text); font-family: var(--serif); font-style: italic; font-size: 22px; }
.letter.is-done .letter-done { display: block; }

/* ---- Concierge tiers / membership (membership page) ---- */
.tiers-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1160px; margin: 0 auto; }
.tier { display: flex; flex-direction: column; padding: clamp(26px, 3vw, 38px); border: 1px solid var(--border); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-card); }
.tier.is-featured { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold-soft), var(--shadow-card); }
.tier .tier-tag { display: inline-block; align-self: flex-start; margin-bottom: 14px; padding: 5px 14px; border-radius: var(--radius-pill); background: var(--cream-deep); color: var(--gold-strong); font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; }
.tier h3 { font-size: var(--fs-h3-lg); margin-bottom: 8px; }
.tier .tier-price { font-family: var(--serif); font-size: 30px; color: var(--ink); margin-bottom: 4px; }
.tier .tier-price em { font-style: normal; font-size: 14px; color: var(--ink-muted); font-family: var(--sans); }
.tier > p { color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.6; margin-bottom: 16px; }
.tier ul { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 11px; }
.tier li { position: relative; padding-left: 28px; color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.5; }
.tier li svg { position: absolute; left: 0; top: 2px; width: 18px; height: 18px; color: var(--gold-deep); stroke-width: 1.8; }
.tier .btn { margin-top: auto; }
@media (max-width: 1000px) { .tiers-grid { grid-template-columns: 1fr; max-width: 600px; } }

/* ---- Fee packages (fees page add-on) ---- */
.pkg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; max-width: 1000px; margin: 0 auto; }
.pkg { padding: 28px 24px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--white); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset; }
.pkg h3 { font-size: var(--fs-h3); margin-bottom: 6px; }
.pkg .pkg-price { font-family: var(--serif); font-size: 26px; color: var(--ink); margin-bottom: 10px; }
.pkg p { color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.6; }
@media (max-width: 900px) { .pkg-grid { grid-template-columns: 1fr; } }

/* ---- Journal cross-link cluster on condition pages ---- */
.journal-rail { max-width: 980px; margin: 0 auto; }
.journal-rail .blog-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 820px) { .journal-rail .blog-grid { grid-template-columns: 1fr; } }

/* ---- Reflection prompt (non-diagnostic) on condition pages ---- */
.reflect { max-width: 760px; margin: 0 auto; padding: clamp(24px, 3vw, 34px); border: 1px solid var(--gold-soft); border-left: 3px solid var(--gold); border-radius: var(--radius); background: var(--cream-soft); }
.reflect .eyebrow { margin-bottom: 12px; }
.reflect ul { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; }
.reflect li { position: relative; padding-left: 26px; color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.55; }
.reflect li::before { content: ""; position: absolute; left: 6px; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.reflect .reflect-note { color: var(--ink-muted); font-size: var(--fs-meta); line-height: 1.55; }

/* ---- Polish: mobile nav tap targets, hero line wrap on small screens ---- */
@media (max-width: 900px) { .nav-links a { padding: 12px 4px; min-height: 44px; display: flex; align-items: center; } }
@media (max-width: 760px) { .hero h1 .hero-line { white-space: normal; } }

/* ===========================================================================
   PREMIUM ELEVATION v2 — 2026-05-30 (Curry-informed: restraint, air, scale)
   Lesson from premium reference sites: the luxury comes from whitespace,
   dramatic type, and one quiet accent, not from added ornament. This block
   adds breathing room and editorial scale on top of the v1 components.
   =========================================================================== */
/* Hero: more presence and a crisper scrim so the headline reads clean over video */
.hero { min-height: min(684px, calc(100vh - 74px)); }
.hero-copy { max-width: 684px; }
.hero-eyebrow { letter-spacing: 4.5px; margin-bottom: 18px; }
.hero-subtitle { font-size: 19px; line-height: 1.68; }
.hero::after { background: linear-gradient(96deg, var(--cream) 0%, var(--cream) 26%, rgba(251, 247, 239, 0.9) 45%, rgba(251, 247, 239, 0.4) 63%, rgba(251, 247, 239, 0) 84%); }

/* Eyebrow refinement (slightly longer, calmer rules) */
.eyebrow { letter-spacing: 3px; }
.eyebrow::before, .eyebrow::after { width: 26px; }

/* Dark anchor: a top highlight hairline for material depth */
.anchor-dark { box-shadow: inset 0 1px 0 rgba(230, 197, 120, 0.22); }

/* Reassurance strip: a little more air */
.reassure .container { padding-top: clamp(26px, 3vw, 38px); padding-bottom: clamp(26px, 3vw, 38px); }

/* The signature type moment: maximum drama and breathing room */
.identity-words span { font-size: clamp(48px, 8.5vw, 104px); }
.identity-body { font-size: 19px; }

/* Cards: a hair more padding so the grid breathes like the reference */
.service-card { padding: 34px 24px 28px; }
.audience-copy { padding: 34px 14px 34px 32px; }

/* Section-head lead a touch wider for confident single-line intros */
.section-head { max-width: 780px; }

/* ===========================================================================
   PREMIUM ELEVATION v3 — 2026-05-30 (logo badge support + depth + tactility)
   =========================================================================== */
/* Sticky nav reads as a refined floating bar, gaining a soft shadow on scroll */
.site-nav { transition: background 280ms ease, box-shadow 280ms ease, border-color 280ms ease; }
.site-nav.is-scrolled { background: rgba(251, 247, 239, 0.97); box-shadow: 0 10px 34px rgba(76, 54, 20, 0.10); border-bottom-color: rgba(200, 163, 91, 0.32); }

/* Wordmark refinement beside the new badge */
.brand-word strong { letter-spacing: 4.5px; }
.brand-word span { color: var(--gold-text); letter-spacing: 3.6px; }

/* Eyebrow rules fade like engraving instead of hard ticks */
.eyebrow::before { background: linear-gradient(90deg, transparent, var(--gold)); }
.eyebrow::after { background: linear-gradient(90deg, var(--gold), transparent); }

/* Cards: deeper, gold-kissed hover for tactile, expensive feedback */
.service-card, .audience-card, .state-link, .blog-card { transition: transform 240ms cubic-bezier(.16, 1, .3, 1), box-shadow 240ms ease, border-color 240ms ease; }
.service-card:hover, .audience-card:hover, .state-link:hover, .blog-card:hover {
  transform: translateY(-7px);
  border-color: var(--gold);
  box-shadow: 0 22px 48px rgba(76, 54, 20, 0.14), inset 0 0 0 1px rgba(200, 163, 91, 0.22);
}

/* Dark anchor: a soft edge vignette for depth (plus the existing top highlight) */
.anchor-dark { box-shadow: inset 0 1px 0 rgba(230, 197, 120, 0.22), inset 0 0 150px rgba(0, 0, 0, 0.30); }

/* Gilt frames: a slightly warmer, more present gold hairline */
.gilt::after { border-color: rgba(200, 163, 91, 0.5); }

/* ===========================================================================
   NAVY NAV — 2026-05-30: dark header so the gold logo reads on its own (no badge).
   Dark bookend up top, cream body below, gold accents throughout.
   =========================================================================== */
.site-nav { background: linear-gradient(180deg, #1c2840 0%, #16223a 100%); border-bottom: 1px solid rgba(200, 163, 91, 0.28); -webkit-backdrop-filter: none; backdrop-filter: none; }
.site-nav.is-scrolled { background: linear-gradient(180deg, #1b2740 0%, #131e34 100%); box-shadow: 0 10px 30px rgba(13, 20, 38, 0.34); border-bottom-color: rgba(200, 163, 91, 0.42); }
.site-nav .brand-word strong { color: #fdf8ee; }
.site-nav .brand-word span { color: #e0c081; }
.site-nav .menu-btn { border-color: rgba(230, 197, 120, 0.45); background: rgba(255, 255, 255, 0.06); color: var(--cream); }
/* Light links only on the desktop bar; the mobile dropdown is a light panel, so it keeps dark links */
@media (min-width: 901px) {
  .site-nav .nav-links { color: rgba(244, 238, 224, 0.84); }
  .site-nav .nav-links a:hover, .site-nav .nav-links a.active { color: #f0d68d; }
  .site-nav .nav-links a.active::after { background: #f0d68d; }
}

/* ===========================================================================
   PREMIUM FOUNDER SECTION UPDATE
   =========================================================================== */
.founder-card.premium-dark {
  background: radial-gradient(120% 90% at 50% 0%, var(--navy-soft) 0%, var(--navy) 42%, var(--navy-deep) 100%);
  color: var(--cream);
  border: 1px solid rgba(230, 197, 120, 0.28);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35), inset 0 0 120px rgba(0, 0, 0, 0.2);
  grid-template-columns: 1.35fr 1fr;
  align-items: center;
  padding: clamp(30px, 4vw, 50px) 0;
  gap: clamp(10px, 2vw, 30px);
}
.founder-card.premium-dark .founder-copy {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
  padding-left: clamp(30px, 4vw, 46px);
  padding-right: 0;
}
.founder-card.premium-dark .founder-photo {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  width: clamp(240px, 24vw, 340px);
  height: clamp(240px, 24vw, 340px);
  min-height: unset;
  border-radius: 50%;
  border: 3px solid rgba(230, 197, 120, 0.5);
  box-shadow: 0 15px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06);
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}
.founder-card.premium-dark .founder-photo::after {
  display: none;
}
.founder-card.premium-dark .founder-photo img {
  object-position: center top;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(3.0);
  transform-origin: 52% 30%;
}
.founder-card.premium-dark .founder-trust {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  padding-right: clamp(30px, 4vw, 46px);
  padding-left: 0;
  margin: 0 auto;
}
@media (max-width: 1080px) {
  .founder-card.premium-dark {
    grid-template-columns: 1fr;
  }
  .founder-card.premium-dark .founder-copy {
    grid-column: 1 / -1;
    grid-row: 2 / 3;
    padding-left: clamp(28px, 5vw, 52px);
    padding-right: clamp(28px, 5vw, 52px);
  }
  .founder-card.premium-dark .founder-photo {
    grid-column: 1 / -1;
    grid-row: 1 / 2;
    margin: 0 auto 20px;
  }
  .founder-card.premium-dark .founder-trust {
    grid-column: 1 / -1;
    grid-row: 3 / 4;
    padding-left: clamp(28px, 5vw, 52px);
    padding-right: clamp(28px, 5vw, 52px);
  }
}
.founder-card.premium-dark h2#founder-title {
  color: #fff;
  font-size: clamp(36px, 4.5vw, 52px);
  margin-bottom: 8px;
  line-height: 1.1;
}
.founder-card.premium-dark .founder-title {
  color: #ecd083;
}
.founder-card.premium-dark p {
  color: rgba(244, 238, 224, 0.88);
}
.founder-card.premium-dark .eyebrow {
  color: #ddbc7c;
}
.founder-card.premium-dark .signature {
  color: #ecd083;
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.founder-card.premium-dark .founder-principle span {
  border-color: rgba(230, 197, 120, 0.3);
  background: rgba(255, 255, 255, 0.05);
  color: #ecd083;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.founder-card.premium-dark .founder-principle {
  color: rgba(244, 238, 224, 0.9);
}
.founder-logo-e {
  height: 0.88em;
  display: inline-block;
  vertical-align: baseline;
  transform: translateY(2px);
  margin-right: 0px;
  filter: brightness(0) saturate(100%) invert(83%) sepia(35%) saturate(543%) hue-rotate(356deg) brightness(99%) contrast(93%);
}

/* ===========================================================================
   HERO STABILITY — 2026-05-30: fixed hero size (no viewport jitter), the room
   video fills it consistently at all widths, and the curtains stay visible on
   mobile. Mobile founder portrait removed.
   =========================================================================== */
.hero { min-height: 600px; }
.hero-bg img, .hero-bg video { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-portrait-mobile { display: none !important; }
/* Lighter wash on wide screens too, so the sunlit curtains read through behind the copy.
   The headline sits over the light part of the room, so a soft halo keeps it legible. */
.hero::after { background: linear-gradient(99deg, rgba(251, 247, 239, 0.58) 0%, rgba(251, 247, 239, 0.34) 32%, rgba(251, 247, 239, 0.10) 56%, rgba(251, 247, 239, 0) 78%); }
.hero-copy { text-shadow: 0 1px 1px rgba(255, 253, 248, 0.7), 0 2px 18px rgba(251, 247, 239, 0.72); }
@media (max-width: 760px) {
  .hero { min-height: 540px; text-align: left; }
  /* favor the left of the frame so the sunlit curtains stay in view on narrow screens */
  .hero-bg img, .hero-bg video { object-position: 15% center; }
  /* lighter wash so the room and curtains read through, with a touch more at the bottom for the buttons */
  .hero::after { background: linear-gradient(180deg, rgba(251, 247, 239, 0.5) 0%, rgba(251, 247, 239, 0.34) 42%, rgba(251, 247, 239, 0.74) 100%); }
}

/* ===========================================================================
   "AND MORE" rotating card in the What We Treat grid (2026-05-30)
   Fallback (no JS / reduced motion) = a readable wrapped list of links.
   Enhanced (.is-rotating, added by site.js) = one serif line cycling in turn.
   =========================================================================== */
/* .service-card--more is a link to the full conditions page; inherits card hover */
.svc-rotator { flex: 1; width: 100%; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; justify-content: center; }
.svc-rot-item { color: var(--gold-text); font-weight: 600; font-size: var(--fs-meta); text-decoration: none; }
.svc-rot-item:hover { text-decoration: underline; text-underline-offset: 3px; }
.svc-rotator.is-rotating { display: block; position: relative; min-height: 58px; }
.svc-rotator.is-rotating .svc-rot-item { position: absolute; left: 0; right: 0; top: 50%; opacity: 0; transform: translate(0, calc(-50% + 9px)); font-family: var(--serif); font-weight: 500; font-size: 20px; line-height: 1.22; transition: opacity 440ms ease, transform 440ms ease; pointer-events: none; }
.svc-rotator.is-rotating .svc-rot-item.is-active { opacity: 1; transform: translate(0, -50%); pointer-events: auto; }

/* ===========================================================================
   "Keep scrolling" cue in the hero (fades in once the title settles, gently
   bounces, and disappears the moment the visitor scrolls).
   =========================================================================== */
.scroll-cue { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 60; display: inline-flex; flex-direction: row; align-items: center; gap: 6px; padding: 6px 15px; border-radius: 999px; background: linear-gradient(180deg, #243353, #16223a); border: 1px solid rgba(200, 163, 91, 0.5); box-shadow: 0 6px 16px rgba(22, 34, 58, 0.28); color: #f3ead4; font-size: 8px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; text-decoration: none; opacity: 1; transition: opacity 400ms ease, transform 400ms ease; }
.scroll-cue svg { width: 14px; height: 14px; color: #e6c578; }
.scroll-cue.is-gone { opacity: 0; pointer-events: none; transform: translate(-50%, 12px); }
@media (prefers-reduced-motion: no-preference) {
  .scroll-cue svg { animation: cueBounce 1.6s ease-in-out infinite; }
}
@keyframes cueBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
/* on phones the sticky Book bar owns the bottom, so the cue would collide; hide it there */
@media (max-width: 760px) { .scroll-cue { display: none; } }

/* ===========================================================================
   WHO WE HELP page — alternating stage rows (image + recognition list)
   =========================================================================== */
.who.alt { background: var(--cream-soft); }
.who-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4.5vw, 60px); align-items: center; max-width: 1060px; margin: 0 auto; }
.who-figure { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; box-shadow: var(--shadow-card); border: 1px solid var(--border); }
.who-figure img { width: 100%; height: 100%; object-fit: cover; }
.who-copy .eyebrow { margin-bottom: 10px; }
.who-copy h2 { font-size: var(--fs-h2); line-height: 1.12; margin-bottom: 12px; }
.who-lead { color: var(--ink-soft); font-size: var(--fs-lead); line-height: 1.6; margin-bottom: 18px; }
.who-list { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 11px; }
.who-list li { position: relative; padding-left: 28px; color: var(--ink-soft); font-size: var(--fs-body); line-height: 1.5; }
.who-list li::before { content: ""; position: absolute; left: 7px; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.who-cta { display: inline-flex; align-items: center; gap: 8px; color: var(--gold-text); font-size: var(--fs-sm); font-weight: 600; }
.who-cta svg { width: 15px; height: 15px; transition: transform 180ms ease; }
.who-cta:hover svg { transform: translateX(3px); }
@media (min-width: 821px) { .who-row.flip .who-figure { order: 2; } }
@media (max-width: 820px) { .who-row { grid-template-columns: 1fr; gap: 24px; } .who-figure { order: -1; } }

/* Prominent "read the full bio" link in the homepage founder section */
.bio-link { display: inline-flex; align-items: center; gap: 7px; margin-top: 8px; color: var(--gold-text); font-weight: 700; font-size: var(--fs-sm); text-decoration: underline; text-decoration-color: var(--gold-soft); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.bio-link:hover { text-decoration-color: var(--gold-strong); }
.bio-link svg { width: 15px; height: 15px; transition: transform 180ms ease; }
.bio-link:hover svg { transform: translateX(3px); }

/* On the dark founder card, the bio link needs bright gold to read (matches its other accents) */
.founder-card.premium-dark .bio-link { color: #ecd083; text-decoration-color: rgba(236, 208, 131, 0.5); }
.founder-card.premium-dark .bio-link:hover { color: #f3ead4; text-decoration-color: #ecd083; }

/* About-page founder card: photo + copy only (the badge column is removed there) */
.founder-card.bio-card { grid-template-columns: 1fr 1.3fr; }
@media (max-width: 1080px) { .founder-card.bio-card { grid-template-columns: 1fr; } }

/* ===========================================================================
   "Our Care Team" landing: clinician choice cards (Dr. Ramy + Katherine)
   =========================================================================== */
.team-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: 920px; margin: 0 auto; }
.team-card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: clamp(28px, 3.5vw, 44px) clamp(22px, 3vw, 34px); border: 1px solid var(--border); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-card); transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease; }
.team-card:hover { transform: translateY(-5px); border-color: var(--gold); box-shadow: var(--shadow-soft); }
.team-media { width: 134px; height: 134px; border-radius: 50%; overflow: hidden; margin-bottom: 18px; border: 1px solid var(--gold-soft); box-shadow: 0 8px 22px rgba(76, 54, 20, 0.14); }
.team-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; }
.team-monogram { display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 46px; font-weight: 600; letter-spacing: 1px; color: var(--gold-text); background: linear-gradient(180deg, var(--cream-soft), var(--cream-deep)); }
.team-card h3 { font-size: var(--fs-h3-lg); margin-bottom: 4px; }
.team-card .team-title { color: var(--gold-text); font-size: var(--fs-meta); font-weight: 600; margin-bottom: 14px; }
.team-card p { color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.6; margin-bottom: 20px; flex: 1; }
.team-card .btn { width: 100%; }
@media (max-width: 700px) { .team-grid { grid-template-columns: 1fr; } }

/* Subheadings inside the founder card (What I believe / My goal for your care) */
.founder-sub { font-family: var(--serif); font-weight: 600; font-size: clamp(20px, 2vw, 23px); color: var(--gold-text); line-height: 1.2; margin: 18px 0 6px; }
.founder-card.premium-dark .founder-sub { color: #ecd083; }

/* ===========================================================================
   MEET THE FOUNDER + REAL TALK — combined section with a cinematic pinned
   cross-fade (desktop + motion). Founder fades in and holds, then cross-fades
   out as Real Talk fades in to replace it in the same frame. Without the pin
   (mobile / reduced-motion / no-JS, or screens too short for the card) the two
   panels simply stack as one dark section, fully visible.
   =========================================================================== */
.founder-duo { position: relative; }
/* a deeper, flatter field so the navy founder card reads as a card on the stage */
.founder-duo.anchor-dark { background: radial-gradient(125% 100% at 50% -12%, #1f2e4b 0%, var(--navy-deep) 58%, #0e1626 100%); }
.founder-duo .duo-panel { padding-block: clamp(54px, 6vw, 92px); }
.founder-duo .duo-panel > .container { width: 100%; }
.founder-duo .duo-real.promise { overflow: hidden; }
.founder-duo .duo-real.promise::before { opacity: 0.7; }

@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .founder-duo.is-duo-pin { padding: 0; min-height: calc(100vh - var(--navh, 74px) + (var(--duo-hold, 0.85) * 100vh)); }
  .founder-duo.is-duo-pin .duo-stage {
    position: sticky;
    top: var(--navh, 74px);
    height: calc(100vh - var(--navh, 74px));
    overflow: hidden;
  }
  .founder-duo.is-duo-pin .duo-panel {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; justify-content: center;
    padding-block: clamp(12px, 2.2vh, 34px);
    will-change: opacity, transform;
  }
  /* Committed cross-fade: opacity/transform/visibility live in CSS and transition
     on the .duo-in / .duo-out classes that updateDuo() toggles at scroll thresholds.
     Once a class flips, the fade ALWAYS runs to completion (it never rests half-faded),
     mirroring the site's [data-reveal] -> .is-visible committed-reveal model. visibility
     follows the fade so the hidden panel also leaves the focus order / a11y tree. */
  .founder-duo.is-duo-pin .duo-panel {
    opacity: 0;
    visibility: hidden;
    transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1),
                transform 650ms cubic-bezier(0.22, 1, 0.36, 1),
                visibility 0s linear 600ms;
  }
  .founder-duo.is-duo-pin .duo-founder { transform: translateY(-22px); }   /* enters easing down, exits lifting up */
  .founder-duo.is-duo-pin .duo-real { transform: translateY(30px); }       /* rises in from below */
  .founder-duo.is-duo-pin .duo-panel.duo-in {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1),
                transform 650ms cubic-bezier(0.22, 1, 0.36, 1),
                visibility 0s linear 0s;
  }
  .founder-duo.is-duo-pin .duo-panel:not(.duo-in) { pointer-events: none; }
  /* condense the founder card so it fits one screen cleanly for the swap */
  .founder-duo.is-duo-pin .founder-card.premium-dark { padding: clamp(16px, 2.2vw, 32px) 0; }
  .founder-duo.is-duo-pin .founder-copy p { margin-bottom: 8px; }
  .founder-duo.is-duo-pin .founder-sub { margin: 9px 0 4px; }
  .founder-duo.is-duo-pin .signature { margin-top: 10px; font-size: 26px; }
  .founder-duo.is-duo-pin .promise-lead { margin-bottom: 14px; }
  .founder-duo.is-duo-pin .steps { margin-bottom: clamp(14px, 2vh, 22px); }
  .founder-duo.is-duo-pin .promise-item { padding: 12px 20px; }
  .founder-duo.is-duo-pin .promise-sign { margin-top: clamp(2px, 0.9vh, 8px); margin-bottom: clamp(12px, 1.7vh, 16px); }
}

/* Real Talk now uses the "Our Approach" steps on the dark navy stage: recolor the
   cream-on-cream step visuals to gold-on-navy, drop the cream connector line, and
   trim the icon so the four steps still fit the pinned panel on one screen. */
.founder-duo .steps { margin-bottom: clamp(20px, 2.6vw, 30px); }
.founder-duo .steps::before { display: none; }
.founder-duo .step-icon {
  width: 66px; height: 66px; margin-bottom: 13px;
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(230, 197, 120, 0.34);
  color: #e6c578;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}
.founder-duo .step-icon svg { width: 27px; height: 27px; }
.founder-duo .step-num { color: #ecd083; }
.founder-duo .step p { color: rgba(244, 238, 224, 0.82); }