/* ===========================================================================
   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: 560px; color: var(--ink-soft); font-size: var(--fs-lead); line-height: 1.65; margin-bottom: 22px; }
.hero-subtitle strong { color: var(--ink); font-weight: 650; }
.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 fades UP together right as the first line settles */
  .hero h1 .hero-line:nth-child(2) .hw { animation: fadeUp 900ms cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: 1450ms; }
  /* the copy cascades in close behind, so the primary CTA is actionable by ~2.5s
     (it used to wait ~4.2s, too long to hide the main conversion path) */
  .hero-subtitle                   { animation-delay: 2350ms; }
  .hero-buttons                    { animation-delay: 2500ms; }
  .hero-reassure                   { animation-delay: 2650ms; }
  .hero .trust-row                 { animation-delay: 2800ms; }
  /* 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, .audience-copy .more { 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, .audience-copy .more svg { width: 13px; height: 13px; transition: transform 180ms ease; }
.audience-copy a:hover svg, .audience-card:hover .audience-copy .more 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-avatar--photo { overflow: hidden; padding: 0; box-shadow: 0 8px 22px rgba(76, 54, 20, 0.14); }
.clinician-avatar--photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; }
.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;
  align-content: 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;
  /* flex-direction/justify-content/height are harmless before display becomes
     flex; the actual "display: flex" is set per-view below (see .view-ramy /
     .show-kat .view-kat), at the same specificity the visibility toggle
     already uses, so it can never outrank the show/hide rules. */
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding-left: clamp(30px, 4vw, 46px);
  padding-right: 0;
}
.founder-card .founder-copy.view-ramy { display: flex; }
.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 cue still invites the first scroll in the hero; JS retires it once
   the visitor leaves the hero and the sticky Book bar slides up to own the bottom. */

/* ===========================================================================
   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; }

/* 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); }

/* ===========================================================================
   PREMIUM GLASS PASS: 2026-07-02 (glassmorphism + conversion)
   Glass tokens & panels, pointer-tracked glints, card tilt, credential proof
   band, the Investment pricing section, the free-intro-first form, and site
   chrome refinements (glass nav, button sheen, footer, FAQ motion).
   Self-contained; remove this block to revert the pass.
   =========================================================================== */
:root {
  --glass-bg: rgba(255, 253, 248, 0.58);
  --glass-bg-strong: rgba(255, 253, 248, 0.78);
  --glass-dark-bg: rgba(29, 42, 68, 0.52);
  --glass-dark-strong: rgba(22, 34, 58, 0.78);
  --glass-border: rgba(200, 163, 91, 0.38);
  --glass-border-bright: rgba(236, 208, 131, 0.55);
  --glass-blur: 16px;
  --shadow-glass: 0 18px 48px rgba(22, 34, 58, 0.16);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Glass panels (fallback-first: opaque enough to stay legible) ---------- */
.glass-panel {
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  background: var(--glass-bg-strong);
  box-shadow: var(--shadow-glass), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.glass-panel--dark {
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  background: var(--glass-dark-strong);
  box-shadow: var(--shadow-glass), inset 0 1px 0 rgba(236, 208, 131, 0.14);
  color: rgba(244, 238, 224, 0.88);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass-panel {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.35);
    backdrop-filter: blur(var(--glass-blur)) saturate(1.35);
  }
  .glass-panel--dark {
    background: var(--glass-dark-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.35);
    backdrop-filter: blur(var(--glass-blur)) saturate(1.35);
  }
}

/* ---------- Hero trust chips ---------- */
.glass-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-pill);
  background: var(--glass-bg-strong);
  color: var(--ink-soft);
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: 0.2px;
  box-shadow: 0 6px 18px rgba(76, 54, 20, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.glass-chip svg { width: 15px; height: 15px; color: var(--gold-deep); stroke-width: 1.7; flex: none; }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass-chip {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(12px) saturate(1.3);
    backdrop-filter: blur(12px) saturate(1.3);
  }
}
/* Chips replace the old bordered trust row; keep its hero entrance timing */
.trust-row { border-top: 0; padding-top: 8px; gap: 10px; max-width: none; }

/* ---------- Pointer-tracked gold glint (JS sets --mx/--my; desktop fine-pointer only) ---------- */
.glint { position: relative; isolation: isolate; }
.glint::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 248, 224, 0.16), transparent 60%);
  transition: opacity 240ms ease;
}
html.has-pointer-fx .glint:hover::after { opacity: 1; }

/* ---------- Card tilt (JS drives an inline transform; disable the CSS lift so they never fight) ---------- */
.tilt { will-change: transform; }
html.has-pointer-fx .tilt:hover { transform: none; }

/* ---------- Credential stats ---------- */
.stat-number {
  font-family: var(--serif);
  font-size: clamp(34px, 3.6vw, 46px);
  font-weight: 600;
  line-height: 1;
  color: var(--gold-text);
}
.stat-label {
  margin-top: 7px;
  color: var(--ink-muted);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}

/* ---------- Proof band (credential social proof under the hero) ---------- */
.proof-band {
  position: relative;
  padding: clamp(30px, 3.6vw, 46px) 0;
  border-top: 1px solid rgba(200, 163, 91, 0.30);
  border-bottom: 1px solid rgba(200, 163, 91, 0.30);
  background: linear-gradient(180deg, var(--cream-soft), var(--cream));
}
.proof-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(18px, 2.6vw, 40px);
  text-align: center;
}
.proof-item { padding: 6px 4px; }
.proof-cred {
  margin-top: clamp(20px, 2.4vw, 30px);
  padding-top: 18px;
  border-top: 1px solid rgba(200, 163, 91, 0.22);
  text-align: center;
  color: var(--ink-muted);
  font-size: var(--fs-meta);
  line-height: 1.7;
}
@media (max-width: 900px) { .proof-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Conditions band: scan what we help with in one glance, no reading required ----------
   Label sits above a real horizontally-scrollable strip of condition pills (never a row
   sibling of it, so the strip can never overlap the label). The set is duplicated once in
   the DOM; JS drives a gentle auto-advance via real scrollLeft with seamless wraparound, and
   the same container is directly mouse-draggable and natively touch-swipeable. Hover, focus,
   or any interaction pauses the auto-advance. */
.conditions-band {
  position: relative;
  padding: 16px 0 18px;
  border-bottom: 1px solid rgba(200, 163, 91, 0.24);
  background: var(--cream);
}
.conditions-band__label {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 0 var(--pad) 10px;
  color: var(--gold-text);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  white-space: nowrap;
}
.conditions-band__scroll {
  display: flex;
  align-items: center;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  /* Vertical padding gives the pill room to lift on hover (translateY(-1px))
     without its top being clipped by overflow-y: hidden. */
  padding: 5px var(--pad) 6px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--pad), #000 calc(100% - var(--pad)), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 var(--pad), #000 calc(100% - var(--pad)), transparent 100%);
}
.conditions-band__hint {
  /* Absolutely placed inside the band's existing bottom padding so the cue
     reads just under the pills without pushing the band any taller. */
  position: absolute;
  left: 0;
  bottom: 3px;
  padding: 0 var(--pad);
  color: var(--ink-soft);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.4px;
  opacity: 0.5;
}
.conditions-band__scroll::-webkit-scrollbar { display: none; }
.conditions-band__scroll.is-dragging { cursor: grabbing; user-select: none; }
.conditions-band__set { display: flex; align-items: center; gap: 10px; padding-right: 10px; }
.conditions-band__pill {
  flex: none;
  padding: 7px 15px;
  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;
  white-space: nowrap;
  -webkit-user-drag: none;
  user-select: none;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease, transform 160ms ease;
}
.conditions-band__pill:hover, .conditions-band__pill:focus-visible {
  color: var(--gold-text);
  border-color: var(--gold);
  background: var(--cream-soft);
  transform: translateY(-1px);
}

/* ---------- Investment (pricing transparency) ---------- */
.invest .section-head p { color: rgba(244, 238, 224, 0.72); }
.invest-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 26px);
  align-items: stretch;
  max-width: 1080px;
  margin: 0 auto;
}
.invest-card {
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 2.6vw, 34px) clamp(20px, 2.2vw, 28px);
  text-align: left;
}
.invest-card.is-featured {
  border-color: var(--glass-border-bright);
  box-shadow: var(--shadow-glass), 0 0 0 1px rgba(236, 208, 131, 0.35), inset 0 1px 0 rgba(236, 208, 131, 0.2);
}
.invest .invest-tag {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 14px;
  padding: 5px 12px;
  border: 1px solid rgba(236, 208, 131, 0.4);
  border-radius: var(--radius-pill);
  color: #ecd083;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  background: rgba(236, 208, 131, 0.08);
}
.invest-card h3 { color: #fff; font-size: var(--fs-h3-lg); margin-bottom: 6px; }
.invest-price { display: flex; align-items: baseline; gap: 7px; margin: 6px 0 14px; }
.invest-price .stat-number { color: #ecd083; }
.invest-price em { font-style: normal; color: rgba(244, 238, 224, 0.62); font-size: var(--fs-meta); }
.invest-list { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 9px; }
.invest-list li { display: flex; gap: 10px; align-items: flex-start; color: rgba(244, 238, 224, 0.85); font-size: var(--fs-sm); line-height: 1.5; }
.invest-list li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 7px; border-radius: 50%; background: #e3c77f; box-shadow: 0 0 8px rgba(227, 199, 127, 0.5); }
.invest-card .btn { margin-top: auto; width: 100%; }
.invest-note {
  max-width: 860px;
  margin: clamp(22px, 2.6vw, 32px) auto 0;
  text-align: center;
  color: rgba(244, 238, 224, 0.66);
  font-size: var(--fs-meta);
  line-height: 1.7;
}
.invest-note strong { color: rgba(244, 238, 224, 0.9); }
.invest-links { display: flex; justify-content: center; gap: 26px; flex-wrap: wrap; margin-top: 14px; }
.invest-links a { display: inline-flex; align-items: center; gap: 7px; color: #ecd083; font-size: var(--fs-meta); font-weight: 600; }
.invest-links a:hover { color: #fff3cf; }
.invest .cta-actions { justify-content: center; margin-top: clamp(26px, 3vw, 38px); }
.invest-bridge { margin: clamp(30px, 3.4vw, 44px) auto 0; text-align: center; color: rgba(244, 238, 224, 0.85); font-size: var(--fs-lead); }
@media (max-width: 900px) { .invest-grid { grid-template-columns: 1fr; max-width: 520px; } }

/* ---------- Primary button sheen sweep ---------- */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::before {
  content: "";
  position: absolute;
  top: -60%;
  bottom: -60%;
  left: -30%;
  width: 34%;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transform: skewX(-18deg) translateX(-180%);
  transition: none;
}
.btn-primary:hover::before { transition: transform 700ms var(--ease-out); transform: skewX(-18deg) translateX(560%); }
.btn-primary > * { position: relative; }

/* Secondary buttons: quiet glass fill */
.btn-secondary { background: var(--glass-bg-strong); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .btn-secondary { background: var(--glass-bg); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
}
.anchor-dark .btn-secondary { color: var(--cream); background: rgba(255, 255, 255, 0.07); border-color: rgba(236, 208, 131, 0.45); }
.anchor-dark .btn-secondary:hover { color: var(--ink); background: var(--cream); border-color: var(--cream); }

/* ---------- Nav: rich navy glass (color/blur only; geometry untouched) ----------
   Deep navy from the moment the page loads (no pale at-top state); the blur is a
   subtle depth cue behind a strong tint, never a wash. */
.site-nav { background: linear-gradient(180deg, #1c2840 0%, #16223a 100%); }
.site-nav.is-scrolled { border-bottom-color: var(--glass-border-bright); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  /* At the top the bar is a SOLID navy COLOR (not a gradient): the scrolled
     state is a translucent navy color, so this keeps both states the same type
     and the transition interpolates cleanly. A gradient-image -> color swap
     would blink out mid-transition (the flash on first scroll). */
  .site-nav { background: #18233a; -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.35); backdrop-filter: blur(var(--glass-blur)) saturate(1.35); }
  .site-nav.is-scrolled { background: rgba(19, 30, 52, 0.88); }
}
@media (max-width: 900px) {
  .nav-links { background: var(--glass-bg-strong); border-color: var(--glass-border); box-shadow: var(--shadow-glass); }
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .nav-links { background: rgba(255, 253, 248, 0.86); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.3); backdrop-filter: blur(var(--glass-blur)) saturate(1.3); }
  }
}

/* ---------- Cards: deeper resting presence (hover stays the v3 gold-kissed lift) ---------- */
.service-card, .audience-card, .state-link, .blog-card {
  box-shadow: 0 3px 14px rgba(76, 54, 20, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.75);
}
.service-card .service-icon {
  border: 1px solid var(--glass-border);
  background: linear-gradient(180deg, rgba(255, 253, 248, 0.9), rgba(246, 239, 225, 0.85));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 4px 12px rgba(76, 54, 20, 0.07);
}
.audience-card:hover .audience-figure img { transform: scale(1.04); }
.audience-figure img { transition: transform 600ms var(--ease-out); }

/* ---------- Footer refinements ---------- */
footer { border-top: 1px solid transparent; border-image: linear-gradient(90deg, transparent, rgba(200, 163, 91, 0.55), transparent) 1; }
.footer-col a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(236, 208, 131, 0.6); }
.footer-bottom, .footer-bottom a { color: rgba(244, 238, 224, 0.6); }

/* ---------- FAQ: animated open/close where supported (Chrome/Edge); instant elsewhere ---------- */
.faq-row { interpolate-size: allow-keywords; }
.faq-row::details-content {
  block-size: 0;
  overflow: clip;
  transition: block-size 450ms var(--ease-out), content-visibility 450ms allow-discrete;
}
.faq-row[open]::details-content { block-size: auto; }
.faq-row summary { transition: color 180ms ease, background 180ms ease; border-radius: var(--radius-sm); }
.faq-row summary:hover { background: rgba(255, 253, 248, 0.75); }


/* ---------- Founder portrait: living gold orbit ----------
   A slow conic shimmer travels the rim, a single gold mote rides with it, and
   the portrait breathes a soft gold glow. Desktop pointers get a gentle photo
   parallax (JS). The wrapper exists because .founder-photo clips (overflow:
   hidden), so the ring/mote live on .founder-orbit outside the clip. */
.founder-card.premium-dark .founder-orbit {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  position: relative;
  width: clamp(240px, 24vw, 340px);
  height: clamp(240px, 24vw, 340px);
  margin: 0 auto;
  border-radius: 50%;
}
.founder-card.premium-dark .founder-orbit .founder-photo {
  width: 100%;
  height: 100%;
  margin: 0;
}
.founder-orbit::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  pointer-events: none;
  background: conic-gradient(from 0deg,
    rgba(230, 197, 120, 0) 0%, rgba(246, 227, 171, 0.95) 10%, rgba(230, 197, 120, 0) 24%,
    rgba(230, 197, 120, 0) 52%, rgba(227, 199, 127, 0.55) 64%, rgba(230, 197, 120, 0) 78%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 2.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 2.5px));
  animation: sigmaOrbit 14s linear infinite;
  transition: filter 240ms ease;
}
.founder-orbit::after {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle 4.5px at 50% 5px, #f6e3ab 92%, transparent 100%);
  filter: drop-shadow(0 0 7px rgba(236, 208, 131, 0.9));
  animation: sigmaOrbit 14s linear infinite;
}
html.has-pointer-fx .founder-orbit:hover::before { filter: brightness(1.4); }
@keyframes sigmaOrbit { to { transform: rotate(360deg); } }
.founder-card.premium-dark .founder-photo { animation: portraitBreathe 6s ease-in-out infinite; }
@keyframes portraitBreathe {
  0%, 100% { box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06), 0 0 22px rgba(230, 197, 120, 0.16); }
  50%      { box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06), 0 0 46px rgba(230, 197, 120, 0.38); }
}
@media (max-width: 1080px) {
  .founder-card.premium-dark .founder-orbit { grid-column: 1 / -1; grid-row: 1 / 2; margin: 0 auto 20px; }
}

/* ---------- Sigma Letter: slim band (lead capture at a fraction of the height) ---------- */
.section.letter { padding: clamp(34px, 4vw, 56px) 0; }
.letter-card { padding: clamp(22px, 3vw, 34px) clamp(22px, 3.4vw, 42px); }
.letter-card h2 { font-size: clamp(22px, 2.6vw, 32px); margin-bottom: 10px; }
.letter-card > p { font-size: var(--fs-sm); margin-bottom: 18px; }
.letter-fineprint { margin-top: 11px; }


/* ---------- Meet Katherine: card view toggle ----------
   The founder card holds two views (Dr. Ramy / Katherine) in the same grid
   slots; .show-kat swaps them and re-skins the card to a cream/sage palette
   that matches Katherine's portrait. */
.founder-card .view-kat { display: none; }
.founder-card.show-kat .view-ramy { display: none; }
.founder-card.show-kat .founder-copy.view-kat { display: flex; }
.founder-card.show-kat .founder-orbit.view-kat { display: block; }
.founder-card.show-kat .meet-toggle.view-kat { display: inline-flex; }
/* JS adds these during the clinician switch so the copy, portrait, and small
   toggle each arrive with a softer handoff instead of snapping into place. */
.founder-card .view-enter { animation: viewEnter 560ms cubic-bezier(0.22, 1, 0.36, 1) 90ms both; }
@keyframes viewEnter {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.founder-card .portrait-enter { animation: portraitEnter 520ms cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes portraitEnter {
  from { opacity: 0; transform: scale(0.985); filter: blur(2px); }
  to   { opacity: 1; transform: scale(1); filter: blur(0); }
}
.founder-card .bubble-enter { animation: bubbleEnter 460ms cubic-bezier(0.16, 1, 0.3, 1) 70ms both; }
@keyframes bubbleEnter {
  0%   { opacity: 0; transform: translateY(8px) scale(0.88); filter: blur(2px); }
  72%  { opacity: 1; transform: translateY(0) scale(1.025); filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
/* silent measuring pass for the constant card height (site.js toggles views
   for one layout read; nothing may animate or transition during it) */
.founder-measuring, .founder-measuring * { transition: none !important; animation: none !important; }

.founder-card.premium-dark.show-kat {
  border-color: rgba(125, 143, 109, 0.5);
  box-shadow: 0 30px 60px rgba(60, 70, 50, 0.28);
  transition: border-color 560ms ease, box-shadow 560ms ease;
}
.founder-card.show-kat .eyebrow { color: #5f7050; }
.founder-card.show-kat .eyebrow::before, .founder-card.show-kat .eyebrow::after { background: #8a9a7b; }
.founder-card.show-kat h2 { color: #2c3423; }
.kat-accent { color: #6d7f5c; font-style: italic; }
.founder-card.show-kat .founder-title { color: #55644a; }
.founder-card.show-kat .founder-sub { color: #6d7f5c; }
.founder-card.show-kat .founder-copy p { color: #46523a; }
.founder-card.show-kat .bio-link { color: #5f7050; }
.founder-card.show-kat .signature { color: #6d7f5c; }
.founder-card.premium-dark.show-kat .founder-photo {
  border-color: rgba(125, 143, 109, 0.6);
  box-shadow: 0 15px 40px rgba(60, 70, 50, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.35);
  animation: none;
}
.founder-card.premium-dark .founder-photo--kat img { transform: none; object-position: center 22%; }


/* Palette morph layer: the sage skin fades in under the content, so the card
   appears to transform rather than snap. Views stack above it. */
.founder-card.premium-dark { position: relative; }
.founder-skin {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: linear-gradient(140deg, #f7f8f0 0%, #e9edda 55%, #dde4cc 100%);
  opacity: 0;
  transition: opacity 560ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.founder-card.show-kat .founder-skin { opacity: 1; }
/* flight-time helpers: the skin starts morphing the moment the portraits lift off */
.founder-card.skin-preview .founder-skin { opacity: 1; }
.founder-card.skin-out .founder-skin { opacity: 0; }
.founder-card.premium-dark.show-kat { background: radial-gradient(120% 90% at 50% 0%, var(--navy-soft) 0%, var(--navy) 42%, var(--navy-deep) 100%); }
.founder-card > .founder-orbit, .founder-card > .founder-copy, .founder-card > .meet-toggle { position: relative; z-index: 1; }
.founder-card .view-exit { animation: viewExit 280ms cubic-bezier(0.22, 1, 0.36, 1) both; }
/* The outgoing flyers stay only as aligned crossfade layers during handoff. */
.founder-card .founder-orbit.handoff-linger { display: block !important; pointer-events: none; }
.founder-card .meet-toggle.handoff-linger { display: inline-flex !important; pointer-events: none; }
@keyframes viewExit {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(10px); }
}

/* ---------- Floating clinician toggle (the "floating head") ---------- */
.meet-toggle {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  justify-self: center;
  align-self: start;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  padding: 6px;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: rgba(244, 238, 224, 0.85);
  font: inherit;
}
.meet-toggle-photo {
  position: relative;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(236, 208, 131, 0.55);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4), 0 0 18px rgba(230, 197, 120, 0.22);
  animation: floatBob 4s ease-in-out infinite;
  transition: box-shadow 240ms ease, border-color 240ms ease;
}
.meet-toggle-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; }
.meet-toggle-photo .meet-photo-ramy { transform: scale(2.7); transform-origin: 52% 27%; }
.meet-toggle:hover .meet-toggle-photo {
  border-color: rgba(246, 227, 171, 0.9);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45), 0 0 26px rgba(230, 197, 120, 0.45);
}
.meet-toggle:focus-visible .meet-toggle-photo { outline: 2px solid var(--gold-strong); outline-offset: 3px; }
.meet-toggle-label { font-size: var(--fs-meta); font-weight: 600; letter-spacing: 0.4px; }
.founder-card.show-kat .meet-toggle { color: #46523a; }
.founder-card.show-kat .meet-toggle-label { color: #46523a; }
.founder-card.show-kat .kat-accent { color: #6d7f5c; }
.founder-card.show-kat .founder-copy span { color: inherit; }
.founder-card.show-kat .meet-toggle-photo { border-color: rgba(125, 143, 109, 0.6); box-shadow: 0 10px 24px rgba(60, 70, 50, 0.3); }
@keyframes floatBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

/* Monogram fallback until assets/katherine.jpg exists */
.meet-monogram {
  display: none;
  position: absolute;
  inset: 0;
  place-items: center;
  background: linear-gradient(140deg, #a9b795, #7d8f6d);
  color: #f7f8f0;
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 1px;
}
.meet-monogram--big { font-size: clamp(48px, 6vw, 74px); }
.img-missing img { display: none; }
.img-missing .meet-monogram { display: grid; }

@media (max-width: 1080px) {
  .meet-toggle { grid-column: 1 / -1; grid-row: 3 / 4; margin-top: 4px; }
}


/* ---------- "Choose what applies to you" selector ----------
   A three-step guided fit-finder on the dark stage: stage of life (photo cards)
   -> concerns (multi-select) -> location (CA/NJ) -> a personalized summary that
   ends in the free-intro CTA. All steps exist in the DOM (browsable without JS);
   site.js adds .fit-js and drives the show/hide choreography. */
.fit-head { text-align: center; margin-bottom: clamp(20px, 2.6vw, 34px); }
.fit-head h2 { font-size: var(--fs-h2); }
.fit-progress { display: flex; justify-content: center; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.fit-dot {
  padding: 6px 13px;
  border: 1px solid rgba(236, 208, 131, 0.28);
  border-radius: var(--radius-pill);
  color: rgba(244, 238, 224, 0.55);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  transition: color 240ms ease, border-color 240ms ease, background 240ms ease;
}
.fit-dot.is-on { color: #16223a; background: #e3c77f; border-color: #e3c77f; }
.fit-dot.is-done { color: #ecd083; border-color: rgba(236, 208, 131, 0.55); }

.fit-tray { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: clamp(16px, 2vw, 24px); }
.fit-tray:empty { display: none; }
.fit-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 6px;
  border: 1px solid rgba(236, 208, 131, 0.4);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.06);
  color: #f3ead4;
  font-size: var(--fs-meta);
  font-weight: 600;
  cursor: pointer;
}
.fit-chip:hover { border-color: rgba(236, 208, 131, 0.8); background: rgba(236, 208, 131, 0.12); }
.fit-chip img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.fit-chip .fit-chip-ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(236, 208, 131, 0.14); color: #ecd083; font-size: 13px; }

.fit-q { text-align: center; color: #fff; font-size: var(--fs-h3-lg); margin-bottom: clamp(16px, 2vw, 26px); }
.fit-q em { font-style: normal; color: rgba(244, 238, 224, 0.6); font-size: var(--fs-sm); }

.fit-cards--stage { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; max-width: 1080px; margin: 0 auto; }
.fit-stage {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 0 14px;
  border: 1px solid rgba(236, 208, 131, 0.28);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.05);
  color: #f3ead4;
  font: inherit;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1), border-color 240ms ease, box-shadow 240ms ease;
}
.fit-stage:hover { transform: translateY(-6px); border-color: rgba(236, 208, 131, 0.7); box-shadow: 0 20px 44px rgba(0, 0, 0, 0.35); }
.fit-stage:focus-visible { outline: 2px solid #ecd083; outline-offset: 3px; }
.fit-stage-img { display: block; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; margin-bottom: 10px; }
.fit-stage-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1); }
.fit-stage:hover .fit-stage-img img { transform: scale(1.05); }
.fit-stage-name { font-family: var(--serif); font-size: 20px; color: #fff; }
.fit-stage-sub { color: rgba(244, 238, 224, 0.62); font-size: var(--fs-micro); padding: 0 10px; }

.fit-cards--concern { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; max-width: 1020px; margin: 0 auto; }
.fit-concern {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 18px 12px 15px;
  border: 1px solid rgba(236, 208, 131, 0.28);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.05);
  color: #f3ead4;
  font: inherit;
  font-size: var(--fs-meta);
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), border-color 220ms ease, background 220ms ease, box-shadow 220ms ease;
}
.fit-concern svg { width: 26px; height: 26px; color: #e6c578; stroke-width: 1.5; }
.fit-concern:hover { transform: translateY(-4px); border-color: rgba(236, 208, 131, 0.65); }
.fit-concern:focus-visible { outline: 2px solid #ecd083; outline-offset: 3px; }
.fit-concern.is-picked {
  border-color: #e3c77f;
  background: rgba(227, 199, 127, 0.13);
  box-shadow: 0 0 0 1px rgba(227, 199, 127, 0.5), 0 10px 26px rgba(0, 0, 0, 0.3);
}
.fit-concern.is-picked::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 8px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #e3c77f url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%2316223a" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"><path d="m5 13 4 4 10-12"/></svg>') center / 11px no-repeat;
}
.fit-actions { display: flex; justify-content: center; margin-top: clamp(18px, 2.2vw, 26px); }
.fit-actions .btn[disabled] { opacity: 0.45; pointer-events: none; }

.fit-cards--state { display: grid; grid-template-columns: repeat(2, minmax(220px, 320px)); justify-content: center; gap: 16px; }
.fit-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px 18px 20px;
  border: 1px solid rgba(236, 208, 131, 0.28);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.05);
  color: #f3ead4;
  font: inherit;
  text-align: center;
  cursor: pointer;
  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1), border-color 240ms ease, box-shadow 240ms ease;
}
.fit-state:hover { transform: translateY(-5px); border-color: rgba(236, 208, 131, 0.7); box-shadow: 0 20px 44px rgba(0, 0, 0, 0.35); }
.fit-state:focus-visible { outline: 2px solid #ecd083; outline-offset: 3px; }
.fit-state-shape svg { width: 54px; height: 62px; color: #e6c578; opacity: 0.9; }
.fit-state strong { font-family: var(--serif); font-size: 22px; font-weight: 600; color: #fff; }
.fit-state em { font-style: normal; color: rgba(244, 238, 224, 0.66); font-size: var(--fs-micro); line-height: 1.5; }

.fit-result { max-width: 760px; margin: 0 auto; padding: clamp(24px, 3vw, 38px); text-align: center; }
.fit-result h3 { color: #fff; font-size: var(--fs-h3-lg); margin-bottom: 10px; }
.fit-result p { color: rgba(244, 238, 224, 0.85); font-size: var(--fs-body); line-height: 1.65; }
.fit-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.fit-links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid rgba(236, 208, 131, 0.4);
  border-radius: var(--radius-pill);
  color: #ecd083;
  font-size: var(--fs-meta);
  font-weight: 600;
}
.fit-links a:hover { background: rgba(236, 208, 131, 0.12); border-color: rgba(236, 208, 131, 0.75); }
.fit-result .cta-actions { justify-content: center; margin-top: 20px; }
.btn[hidden] { display: none !important; } /* .btn's display would otherwise defeat the hidden attribute */
.fit-fineprint { margin-top: 16px; color: rgba(244, 238, 224, 0.55); font-size: var(--fs-micro); }
.fit-browse { text-align: center; margin-top: clamp(20px, 2.6vw, 30px); color: rgba(244, 238, 224, 0.6); font-size: var(--fs-meta); }
.fit-browse a { color: #ecd083; font-weight: 600; }
.fit-browse a:hover { color: #fff3cf; }

/* Step choreography (JS adds .fit-js; steps slide through) */
.fit-js .fit-step, .fit-js .fit-result { display: none; }
.fit-js .fit-step.is-in, .fit-js .fit-result.is-in { display: block; }
.fit-js .fit-step.is-in .fit-cards > * {
  opacity: 0;
  transform: translateX(46px);
  animation: fitSlideIn 560ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}
.fit-js .fit-result.is-in { animation: fadeUp 520ms cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes fitSlideIn {
  from { opacity: 0; transform: translateX(46px); }
  to   { opacity: 1; transform: translateX(0); }
}
.duo-real .promise-inner { display: block; }

@media (max-width: 760px) {
  .fit-cards--stage { grid-template-columns: repeat(2, 1fr); }
  .fit-cards--concern { grid-template-columns: repeat(2, 1fr); }
  .fit-cards--state { grid-template-columns: 1fr; }
}


/* ---------- Portrait physics: drag affordances + the handwritten hint ---------- */
.founder-orbit img, .meet-toggle-photo img { -webkit-user-drag: none; user-select: none; }
.orbit-hint {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  align-self: start;
  justify-self: center;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 5px;
  transform: translate(-128px, 34px) rotate(-5deg);
  color: #ecd083;
  pointer-events: none;
  white-space: nowrap;
}
.orbit-hint svg { width: 44px; height: 26px; flex: none; margin-top: 8px; }
.orbit-hint span { font-family: "Great Vibes", cursive; font-size: 22px; line-height: 1; }
.founder-card.show-kat .orbit-hint { color: #6d7f5c; }
.founder-card.show-kat .orbit-hint span { color: #6d7f5c; }
@media (max-width: 1080px) {
  .orbit-hint { grid-column: 1 / -1; grid-row: 3 / 4; justify-self: center; transform: translate(-140px, 30px) rotate(-5deg); }
}
@media (max-width: 900px) {
  .orbit-hint { display: none; } /* drag is a fine-pointer desktop toy */
}
@media (prefers-reduced-motion: reduce) {
  .orbit-hint { display: none; }
}

/* ---------- Motion safety ---------- */
@media (prefers-reduced-motion: reduce) {
  .glint::after { display: none; }
  .btn-primary::before { display: none; }
  .faq-row::details-content { transition: none; }
  .founder-orbit::before { animation: none; }
  .founder-orbit::after { display: none; }
  .founder-card.premium-dark .founder-photo { animation: none; }
  .meet-toggle-photo { animation: none; }
}