/* ============================================================
   Cha PT — Page chrome (treatment page template)
   Shared shell extracted from Schroth.html
   ============================================================ */

/* Themes */
html[data-theme="sage"] {
  --bg-base:#EDE6D6;--bg-raised:#F5EFE2;--bg-paper:#FBF8F1;
  --fg:#231F1A;--fg-soft:#3B342C;--fg-muted:#6B6258;--fg-faint:#968B7E;
  --border:#D8CFBC;--border-soft:#E6DECB;--border-strong:#C7BBA6;
  --accent:#6B7A5A;--accent-strong:#4A5840;--accent-soft:#DDE2CF;--accent-on:#FBF8F1;
  --warm:#B8826B;--warm-strong:#8E5C42;--warm-soft:#EFD9C7;
  --bright:#D85A33;--bright-strong:#A8401F;--bright-soft:#F5D5C5;
}

/* Bright text utility — vivid persimmon for emphasis. Use sparingly, never as body. */
.txt-bright { color: var(--bright); }
.txt-bright-strong { color: var(--bright-strong); }
html[data-theme="ink"] {
  --bg-base:#F5EFE2;--bg-raised:#FBF8F1;--bg-paper:#FFFEFA;
  --fg:#1A1714;--fg-soft:#2C2620;--fg-muted:#5C544A;--fg-faint:#8A8175;
  --border:#DCD3BF;--border-soft:#ECE4D2;--border-strong:#B7AC95;
  --accent:#1A1714;--accent-strong:#000;--accent-soft:#ECE4D2;--accent-on:#FBF8F1;
  --warm:#A07A3E;--warm-strong:#6F5226;--warm-soft:#EFE3C9;
}
html[data-theme="clay"] {
  --bg-base:#F0E7D6;--bg-raised:#F8F0E0;--bg-paper:#FCF7EE;
  --fg:#2A2018;--fg-soft:#3F3128;--fg-muted:#6B574A;--fg-faint:#998677;
  --border:#DCCBB1;--border-soft:#ECDFC5;--border-strong:#C2A988;
  --accent:#B26A4F;--accent-strong:#7E4530;--accent-soft:#F0D7C6;--accent-on:#FCF7EE;
  --warm:#4A5840;--warm-strong:#2E3826;--warm-soft:#DDE2CF;
}
html[data-theme="slate"] {
  --bg-base:#ECE7DC;--bg-raised:#F4F0E6;--bg-paper:#FAF7EF;
  --fg:#1F1D1B;--fg-soft:#322F2B;--fg-muted:#5E5953;--fg-faint:#8B857C;
  --border:#D6CFC0;--border-soft:#E5DECE;--border-strong:#B6AE9E;
  --accent:#3F4A5C;--accent-strong:#232A36;--accent-soft:#D5DBE3;--accent-on:#FAF7EF;
  --warm:#9C7A66;--warm-strong:#6E513F;--warm-soft:#E8D9CC;
}
html[data-theme="olive"] {
  --bg-base:#EEE7D2;--bg-raised:#F5EFDB;--bg-paper:#FAF6E8;
  --fg:#221E18;--fg-soft:#36302A;--fg-muted:#635A4D;--fg-faint:#948A78;
  --border:#D9CFB6;--border-soft:#E8DEC5;--border-strong:#BCAE8E;
  --accent:#5C6442;--accent-strong:#383E29;--accent-soft:#D8DCC1;--accent-on:#FAF6E8;
  --warm:#C9A89A;--warm-strong:#93685A;--warm-soft:#F1DED5;
}

html, body { background: var(--bg-base); color: var(--fg); margin: 0; }
body { font-family: var(--font-sans); font-weight: 300; -webkit-font-smoothing: antialiased; transition: background-color 600ms var(--ease-out), color 600ms var(--ease-out); }

/* Nav */
.nav { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 18px 32px; background: color-mix(in oklab, var(--bg-base) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border-soft); }
.nav .brand { display: flex; align-items: center; }
.nav .brand img { height: 28px; width: auto; display: block; }
.nav ul { list-style: none; display: flex; gap: 36px; margin: 0; padding: 0; }
.nav ul a { font-size: 13px; color: var(--fg-soft); text-decoration: none; }
.nav ul a:hover { color: var(--fg); }
.nav ul a.active { color: var(--fg); border-bottom: 1px solid var(--accent); padding-bottom: 4px; }
.nav .cta { background: var(--accent); color: var(--accent-on); border: 0; border-radius: var(--radius-pill); padding: 10px 18px; font-size: 13px; letter-spacing: 0.04em; cursor: pointer; text-decoration: none; display: inline-block; }
.nav .cta:hover { background: var(--accent-strong); text-decoration: none; }
@media (max-width: 800px) { .nav ul { display: none; } }

.crumb { padding: 28px 32px 0; font-family: var(--font-mono); font-size: 11px; color: var(--fg-faint); letter-spacing: 0.18em; text-transform: uppercase; }
.crumb a { color: var(--fg-faint); text-decoration: none; }
.crumb .sep { margin: 0 10px; opacity: 0.5; }
.crumb .here { color: var(--fg); }

main { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
section.s { padding: 96px 0; border-top: 1px solid var(--border-soft); }
section.s:first-of-type { border-top: 0; }
@media (max-width: 800px) { section.s { padding: 64px 0; } }

.eyebrow { font-family: var(--font-sans); font-weight: 400; font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--fg-muted); }
.eyebrow.accent { color: var(--accent-strong); }
.num { font-family: var(--font-mono); font-size: 11px; color: var(--fg-faint); letter-spacing: 0.2em; text-transform: uppercase; }
h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 400; letter-spacing: -0.01em; margin: 0; color: var(--fg); }
p { margin: 0; line-height: 1.65; color: var(--fg-muted); }
.lede { font-size: 21px; line-height: 1.55; color: var(--fg-soft); max-width: 56ch; }
.body { font-size: 17px; line-height: 1.65; color: var(--fg-muted); }
hr.thin { border: 0; border-top: 1px solid var(--border-soft); margin: 48px 0; }
hr.acc { border: 0; border-top: 1px solid var(--accent); width: 48px; margin: 0; }

/* Hero */
.hero-a { display: grid; grid-template-columns: 7fr 5fr; gap: 64px; align-items: end; padding: 80px 0 96px; }
@media (max-width: 900px) { .hero-a { grid-template-columns: 1fr; gap: 32px; } }
.hero-a .head { display: flex; flex-direction: column; gap: 24px; }
.hero-a .meta { display: flex; gap: 16px; align-items: center; }
.hero-a .meta .pill { padding: 6px 12px; border: 1px solid var(--border-strong); border-radius: 999px; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-soft); }
.hero-a h1 { font-size: clamp(56px, 7.5vw, 104px); line-height: 1.02; letter-spacing: -0.02em; max-width: 14ch; }
.hero-a h1 em { font-style: italic; color: var(--fg-soft); }
.hero-a .sub { font-size: 19px; line-height: 1.55; color: var(--fg-soft); max-width: 42ch; }
.hero-a .ctas { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.hero-a .img { aspect-ratio: 4/5; background: linear-gradient(180deg, transparent 60%, rgba(35,31,26,0.06)), repeating-linear-gradient(45deg, var(--border-soft) 0 18px, var(--bg-paper) 18px 36px); border-radius: 8px; display: flex; align-items: flex-end; padding: 18px; color: var(--fg-faint); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; }
.hero-a .quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding-top: 32px; border-top: 1px solid var(--border); margin-top: 24px; }
.hero-a .quick .k { font-family: var(--font-mono); font-size: 11px; color: var(--fg-faint); letter-spacing: 0.18em; text-transform: uppercase; }
.hero-a .quick .v { font-family: var(--font-serif); font-size: 22px; line-height: 1.2; color: var(--fg); margin-top: 6px; }

/* CTAs */
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border-radius: 999px; font-size: 14px; letter-spacing: 0.04em; cursor: pointer; border: 0; text-decoration: none; transition: background 320ms var(--ease-out), color 320ms var(--ease-out), border-color 320ms var(--ease-out); }
.btn.primary { background: var(--accent); color: var(--accent-on); }
.btn.primary:hover { background: var(--accent-strong); }
.btn.ghost { background: transparent; color: var(--fg); border: 1px solid var(--border-strong); }
.btn.ghost:hover { border-color: var(--fg); }
.btn.text { background: transparent; color: var(--fg); padding: 14px 0; border-bottom: 1px solid var(--border); border-radius: 0; }
.btn.text:hover { border-color: var(--fg); }
.btn .ico { width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.5; fill: none; }

/* Section heads */
.sechead { display: grid; grid-template-columns: 1fr 2fr; gap: 64px; align-items: end; padding-bottom: 48px; margin-bottom: 48px; border-bottom: 1px solid var(--border-soft); }
.sechead.center { grid-template-columns: 1fr; text-align: center; padding-bottom: 32px; }
.sechead.center .meta { align-items: center; }
.sechead .meta { display: flex; flex-direction: column; gap: 12px; }
.sechead h2 { font-size: clamp(40px, 4.5vw, 60px); line-height: 1.06; }
.sechead h2 em { font-style: italic; color: var(--fg-soft); }
.sechead .lede { margin-top: 16px; }
@media (max-width: 800px) { .sechead { grid-template-columns: 1fr; gap: 16px; } }

/* What is */
.what-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
@media (max-width: 900px) { .what-grid { grid-template-columns: 1fr; } }
.what-grid .img { aspect-ratio: 4/5; background: repeating-linear-gradient(45deg, var(--border-soft) 0 16px, var(--bg-paper) 16px 32px); border-radius: 8px; border: 1px solid var(--border-soft); padding: 16px; color: var(--fg-faint); font-family: var(--font-mono); font-size: 11px; display: flex; align-items: flex-end; }
.what-text { display: flex; flex-direction: column; gap: 24px; }
.what-text .pull { font-family: var(--font-serif); font-style: italic; font-size: 28px; line-height: 1.35; color: var(--fg-soft); border-left: 1px solid var(--accent); padding: 8px 0 8px 24px; }
.what-text h3 { font-size: 28px; line-height: 1.25; }
.principles { display: grid; gap: 24px; padding-top: 16px; border-top: 1px solid var(--border-soft); margin-top: 8px; }
.principles .row { display: grid; grid-template-columns: 56px 1fr; gap: 20px; align-items: start; }
.principles .n { font-family: var(--font-mono); font-size: 12px; color: var(--accent); letter-spacing: 0.18em; padding-top: 6px; }
.principles h4 { font-size: 20px; line-height: 1.3; }
.principles p { margin-top: 6px; font-size: 15px; }

/* Conditions grid */
.conds-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .conds-grid { grid-template-columns: 1fr; } }
.cond { background: var(--bg-paper); border: 1px solid var(--border); border-radius: 14px; padding: 28px; display: flex; flex-direction: column; gap: 14px; transition: border-color 320ms var(--ease-out); }
.cond:hover { border-color: var(--border-strong); }
.cond .cnum { font-family: var(--font-mono); font-size: 11px; color: var(--accent); letter-spacing: 0.2em; }
.cond h4 { font-size: 24px; line-height: 1.2; }
.cond p { font-size: 14px; line-height: 1.6; }
.cond .meta { font-family: var(--font-mono); font-size: 11px; color: var(--fg-faint); letter-spacing: 0.06em; padding-top: 14px; border-top: 1px solid var(--border-soft); margin-top: auto; display: flex; justify-content: space-between; }

/* Timeline */
.timeline { display: grid; grid-template-columns: 200px 1fr; gap: 64px; align-items: start; }
@media (max-width: 900px) { .timeline { grid-template-columns: 1fr; gap: 24px; } }
.timeline .stick { position: sticky; top: 100px; }
.timeline .stick .num { display: block; }
.timeline .stick h3 { margin-top: 8px; font-size: 22px; line-height: 1.25; }
.steps { display: flex; flex-direction: column; }
.step { display: grid; grid-template-columns: 100px 1fr; gap: 32px; padding: 32px 0; border-top: 1px solid var(--border-soft); }
.step:first-child { border-top: 1px solid var(--border); }
.step:last-child { border-bottom: 1px solid var(--border); }
.step .when { font-family: var(--font-mono); font-size: 12px; color: var(--fg-faint); letter-spacing: 0.06em; padding-top: 6px; }
.step h4 { font-size: 26px; line-height: 1.2; }
.step p { font-size: 15px; margin-top: 8px; max-width: 56ch; }

/* Evidence */
.ev-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
@media (max-width: 900px) { .ev-row { grid-template-columns: 1fr; } }
.ev { padding: 32px 0; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 12px; }
.ev .stat { font-family: var(--font-serif); font-size: 64px; line-height: 1; letter-spacing: -0.02em; color: var(--fg); }
.ev .stat sup { font-size: 24px; vertical-align: super; color: var(--accent); }
.ev .label { font-size: 14px; line-height: 1.55; color: var(--fg-soft); }
.ev .source { font-family: var(--font-mono); font-size: 11px; color: var(--fg-faint); letter-spacing: 0.04em; margin-top: auto; }
.ev-note { margin-top: 32px; font-size: 13px; line-height: 1.6; color: var(--fg-faint); max-width: 70ch; }

/* Therapist */
.ther-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; align-items: center; }
@media (max-width: 900px) { .ther-grid { grid-template-columns: 1fr; gap: 24px; } }
.ther-grid .photo { aspect-ratio: 4/5; background: repeating-linear-gradient(45deg, var(--border) 0 18px, var(--bg-paper) 18px 36px); border-radius: 8px; border: 1px solid var(--border-soft); display: flex; align-items: flex-end; padding: 16px; color: var(--fg-faint); font-family: var(--font-mono); font-size: 11px; }
.ther-grid .body { display: flex; flex-direction: column; gap: 20px; }
.ther-grid h3 { font-size: 40px; line-height: 1.1; }
.ther-grid h3 em { font-style: italic; color: var(--fg-soft); }
.ther-grid .role { font-size: 14px; color: var(--fg-muted); letter-spacing: 0.06em; }
.creds { display: grid; gap: 0; padding-top: 16px; border-top: 1px solid var(--border-soft); margin-top: 8px; }
.creds .row { display: grid; grid-template-columns: 200px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--border-soft); font-size: 14px; }
.creds .row:last-child { border-bottom: 0; }
.creds .k { color: var(--fg-faint); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; }
.creds .v { color: var(--fg); }

/* Testimonial */
.testimonial-band { background: var(--bg-raised); border: 1px solid var(--border); border-radius: 14px; padding: 64px; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; }
@media (max-width: 900px) { .testimonial-band { padding: 32px; grid-template-columns: 1fr; } }
.testimonial-band .q { font-family: var(--font-serif); font-style: italic; font-size: 32px; line-height: 1.3; color: var(--fg); }
.testimonial-band .meta { display: flex; flex-direction: column; gap: 16px; }
.testimonial-band .who { display: flex; align-items: center; gap: 14px; padding-top: 16px; border-top: 1px solid var(--border); }
.testimonial-band .av { width: 48px; height: 48px; border-radius: 50%; background: var(--border-strong); }
.testimonial-band .name { font-size: 15px; color: var(--fg); }
.testimonial-band .det { font-size: 12px; color: var(--fg-faint); margin-top: 2px; font-family: var(--font-mono); letter-spacing: 0.04em; }
.testimonial-band .small { font-family: var(--font-serif); font-style: italic; font-size: 18px; line-height: 1.45; color: var(--fg-soft); border-left: 1px solid var(--accent); padding-left: 20px; }

/* Pricing */
.ins-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
@media (max-width: 900px) { .ins-grid { grid-template-columns: 1fr; } }
.ins-card { background: var(--bg-paper); border: 1px solid var(--border); border-radius: 14px; padding: 32px; display: flex; flex-direction: column; gap: 16px; }
.ins-card h4 { font-size: 24px; line-height: 1.2; }
.ins-card .price { font-family: var(--font-serif); font-size: 36px; line-height: 1; color: var(--fg); }
.ins-card .price small { font-family: var(--font-sans); font-weight: 300; font-size: 14px; color: var(--fg-muted); margin-left: 8px; letter-spacing: 0.04em; }
.ins-card ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.ins-card li { display: grid; grid-template-columns: 16px 1fr; gap: 12px; align-items: start; font-size: 14px; line-height: 1.55; color: var(--fg-soft); }
.ins-card li svg { width: 14px; height: 14px; stroke: var(--accent); stroke-width: 1.5; fill: none; margin-top: 4px; }

/* FAQ */
.faq { display: grid; gap: 0; max-width: 900px; margin: 0 auto; }
.faq details { padding: 24px 0; border-top: 1px solid var(--border-soft); }
.faq details:first-child { border-top: 1px solid var(--border); }
.faq details:last-child { border-bottom: 1px solid var(--border); }
.faq summary { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; cursor: pointer; list-style: none; font-family: var(--font-serif); font-size: 24px; line-height: 1.25; color: var(--fg); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-mono); font-size: 24px; color: var(--fg-faint); transition: transform 320ms var(--ease-out); }
.faq details[open] summary::after { content: "−"; }
.faq p { margin-top: 14px; max-width: 70ch; font-size: 15px; line-height: 1.65; }

/* Final CTA */
.final { background: var(--accent); color: var(--bg-paper); border-radius: 14px; padding: 96px 64px; text-align: center; display: flex; flex-direction: column; gap: 24px; align-items: center; }
@media (max-width: 800px) { .final { padding: 56px 24px; } }
.final .eyebrow { color: rgba(255,254,250,0.6); }
.final h2 { font-size: clamp(40px, 5vw, 72px); line-height: 1.05; color: var(--bg-paper); max-width: 18ch; }
.final h2 em { font-style: italic; color: rgba(255,254,250,0.78); }
.final p { color: rgba(255,254,250,0.85); max-width: 56ch; font-size: 17px; }
.final hr { width: 48px; border: 0; border-top: 1px solid rgba(255,254,250,0.4); margin: 0; }
.final .ctas { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; margin-top: 16px; }
.final .btn.primary { background: var(--bg-paper); color: var(--accent); border-color: var(--bg-paper); }
.final .btn.primary:hover { background: var(--bg-base); color: var(--accent); }
.final .btn.ghost { color: var(--bg-paper); border-color: rgba(255,254,250,0.5); }
.final .btn.ghost:hover { border-color: var(--bg-paper); }
.final .meta { display: flex; gap: 32px; flex-wrap: wrap; justify-content: center; padding-top: 32px; margin-top: 16px; border-top: 1px solid rgba(255,254,250,0.2); width: 100%; }
.final .meta .item { display: flex; flex-direction: column; gap: 6px; }
.final .meta .k { font-family: var(--font-mono); font-size: 11px; color: rgba(255,254,250,0.5); letter-spacing: 0.18em; text-transform: uppercase; }
.final .meta .v { font-family: var(--font-serif); font-size: 18px; color: var(--bg-paper); }

/* Testimonials band — paired-quote layout used on / and /pricing */
.testimonials-band { padding: 96px 32px; max-width: 1280px; margin: 0 auto; }
.testimonials-band .t-eyebrow { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); margin-bottom: 18px; }
.testimonials-band h2 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(36px, 4.5vw, 60px); line-height: 1.05; letter-spacing: -0.02em; color: var(--fg); margin: 0 0 56px; max-width: 24ch; }
.testimonials-band h2 em { font-style: italic; color: var(--warm); }
.t-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
@media (max-width: 900px) { .t-grid { grid-template-columns: 1fr; gap: 24px; } }
.t-card { background: var(--bg-paper); padding: 48px 40px; border-radius: 6px; box-shadow: 0 1px 0 rgba(35,31,26,0.04), 0 16px 36px -20px rgba(35,31,26,0.18); display: flex; flex-direction: column; gap: 28px; }
.t-quote { font-family: var(--font-serif); font-style: italic; font-size: clamp(20px, 2vw, 26px); line-height: 1.4; color: var(--fg); margin: 0; }
.t-attrib { padding-top: 20px; border-top: 1px solid var(--border-soft); }
.t-name { font-family: var(--font-serif); font-size: 16px; color: var(--fg); margin-bottom: 4px; }
.t-det { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-faint); }

/* Footer */
footer.foot { background: var(--bg-raised); margin-top: 96px; padding: 64px 32px 32px; border-top: 1px solid var(--border); }
footer.foot .inner { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 48px; border-bottom: 1px solid var(--border-soft); }
@media (max-width: 800px) { footer.foot .inner { grid-template-columns: 1fr 1fr; } }
footer .lockup-img { height: 36px; width: auto; display: block; }
footer .tag { font-size: 14px; line-height: 1.55; color: var(--fg-muted); margin-top: 20px; max-width: 32ch; }
footer h6 { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-faint); margin: 0 0 14px; font-weight: 500; }
footer ul { list-style: none; padding: 0; margin: 0; }
footer li { padding: 4px 0; font-size: 14px; color: var(--fg-soft); }
footer .legal { max-width: 1280px; margin: 24px auto 0; display: flex; justify-content: space-between; font-size: 12px; color: var(--fg-faint); }

/* Note banner */
.note-banner { background: var(--accent-soft); color: var(--accent-strong); border-radius: 14px; padding: 24px 32px; display: flex; align-items: center; gap: 16px; font-size: 14px; line-height: 1.5; }
.note-banner svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.5; fill: none; flex-shrink: 0; }
.note-banner a { color: inherit; text-decoration: underline; }