/* ==========================================================================
   site-v4.css  |  Dan Ronken Therapy, v4 (Two A.M.)
   Site-wide stylesheet. Order: tokens, base, type, header, mobile menu,
   buttons, shared sections, footer, then HOMEPAGE-ONLY rules at the end.
   Media-query overrides always sit AFTER the base rules they override.
   ========================================================================== */

/* ---------- Fonts ---------- */
/* All fonts self-hosted, latin subsets from Google Fonts (SIL OFL). Source Serif 4 (roman + italic) and Martian Mono are variable files;
   Source Serif 4's optical-size axis gives headlines its display cut automatically. Bodoni Moda retired 10/12 (Dan): hairlines broke up on phones. */
@font-face {
  font-family: "Martian Mono";
  src: url("/fonts/MartianMono-Latin.woff2") format("woff2");
  font-weight: 300 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("/fonts/SourceSerif4-Latin.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("/fonts/SourceSerif4-Italic-Latin.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --night: #0B0F15;
  --night2: #121821;
  --lamp: #F2C48D;
  --text: #EDE6DC;
  --dim: #8D8A86;        /* >= 5:1 on night and night2; labels only, never body paragraphs */
  --dim-hi: #B3AEA7;     /* nav links over the hero photo */
  --rule: #2A313C;
  --display: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --mono: "Martian Mono", ui-monospace, Menlo, Consolas, monospace;
  --body: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --gutter: 44px;
  --header-h: 84px;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
/* html carries the iPhone bounce color: night at the top, the footer color at the bottom (script swaps it). */
html { background: var(--night); }
body {
  margin: 0;
  background: var(--night);
  color: var(--text);
  font-family: var(--body);
  font-size: 21px;
  line-height: 1.6;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
::selection { background: var(--lamp); color: var(--night); }
:focus-visible { outline: 2px solid var(--lamp); outline-offset: 3px; }
[id] { scroll-margin-top: calc(var(--header-h) - 8px); }
.skip {
  position: absolute; left: 16px; top: -80px; z-index: 100;
  background: var(--lamp); color: var(--night); padding: 12px 18px;
  font-family: var(--mono); font-size: 13px; text-decoration: none;
}
.skip:focus { top: 12px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Type ---------- */
h1, h2, h3 { font-family: var(--display); font-weight: 400; margin: 0; }
p { margin: 0; }
.label {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  line-height: 1.5;
  margin: 0;
  color: var(--dim);
}
.label.lamp { color: var(--lamp); }

/* ---------- Header ---------- */
.site-header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 30;
  display: flex; justify-content: space-between; align-items: center;
  gap: 24px;
  padding: 18px var(--gutter);
  min-height: var(--header-h);
  transition: background .35s ease, backdrop-filter .35s ease;
}
html.js .site-header { position: fixed; }
.site-header.scrolled {
  background: rgba(11,15,21,.9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.wordmark {
  display: flex; align-items: baseline; gap: 14px;
  text-decoration: none; color: var(--text);
  min-height: 44px;
}
.wordmark .name { font-family: var(--display); font-size: 24px; line-height: 1; letter-spacing: .005em; }
.wordmark .creds {
  font-family: var(--display); font-size: 17px; line-height: 1; letter-spacing: .04em;
  color: var(--text); white-space: nowrap;
}
.site-nav { display: flex; align-items: center; gap: 22px; }
.site-nav a.navlink {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--mono); font-size: 13px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--dim-hi); text-decoration: none;
  white-space: nowrap;
  transition: color .25s ease;
}
.site-nav a.navlink:hover, .site-nav a.navlink[aria-current="page"] { color: var(--lamp); }
.site-nav .nav-cta {
  display: inline-flex; align-items: center; min-height: 44px;
  margin-left: 6px; padding: 0 18px;
  border: 1px solid var(--lamp); color: var(--lamp);
  font-family: var(--mono); font-size: 13px; letter-spacing: .1em;
  text-transform: uppercase; text-decoration: none; white-space: nowrap;
  transition: background .25s ease, color .25s ease;
}
.site-nav .nav-cta:hover { background: var(--lamp); color: var(--night); }

.menu-btn {
  display: none;
  min-width: 44px; min-height: 44px; padding: 0;
  background: none; border: 0; cursor: pointer; color: var(--text);
  align-items: center; justify-content: center; flex-direction: column; gap: 7px;
}
.menu-btn span { display: block; width: 26px; height: 1px; background: currentColor; }

/* Compact Book a Free Call button, always visible outside the menu. Shown only when the full nav is hidden. */
.header-cta {
  display: none; align-items: center; min-height: 44px; margin-left: auto; padding: 0 14px;
  border: 1px solid var(--lamp); color: var(--lamp);
  font-family: var(--mono); font-size: 13px; letter-spacing: .08em;
  text-transform: uppercase; text-decoration: none; white-space: nowrap;
  transition: background .25s ease, color .25s ease;
}
.header-cta:hover { background: var(--lamp); color: var(--night); }

/* Switch to the menu button before the nav runs out of room. */
@media (max-width: 1300px) {
  .site-nav { display: none; }
  .header-cta { display: inline-flex; }
  .site-header { gap: 12px; }
  .menu-btn { display: flex; }
  html:not(.js) .menu-btn { display: none; }
  .wordmark { flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
  .wordmark .name { font-size: 22px; white-space: nowrap; }
  .wordmark .creds { font-family: var(--mono); font-size: 11px; line-height: 1.2; letter-spacing: 0; word-spacing: -.3em; text-transform: uppercase; color: var(--dim-hi); }
}
@media (max-width: 760px) {
  :root { --gutter: 16px; --header-h: 76px; }
  .site-header { padding-top: 12px; padding-bottom: 12px; gap: 8px; }
  .header-cta { padding: 0 10px; letter-spacing: .06em; }
}
@media (max-width: 420px) {
  .wordmark .name { font-size: 20px; }
  .wordmark .creds { font-size: 10px; }
}
@media (max-width: 380px) {
  .wordmark .name { font-size: 19px; }
  .header-cta { padding: 0 8px; font-size: 12px; letter-spacing: .02em; }
}
@media (max-width: 340px) {
  /* Very narrow phones: stack the button label on two lines so the name and credentials keep their room. */
  .header-cta { padding: 0 8px; font-size: 11px; line-height: 1.2; letter-spacing: .02em; white-space: normal; text-align: center; max-width: 92px; }
}

/* ---------- Mobile menu (full screen) ---------- */
.menu-overlay {
  position: fixed; inset: 0; z-index: 60;
  background: var(--night);
  display: flex; flex-direction: column; justify-content: center;
  padding: 80px var(--gutter) 40px;
  opacity: 0; visibility: hidden;
  transition: opacity .3s ease, visibility 0s linear .3s;
  overflow-y: auto;
}
.menu-overlay.open { opacity: 1; visibility: visible; transition: opacity .3s ease; }
.menu-overlay a {
  display: block; padding: 10px 0; min-height: 44px;
  font-family: var(--display); font-size: clamp(30px, 8vw, 44px); line-height: 1.15;
  color: var(--text); text-decoration: none;
}
.menu-overlay a:hover, .menu-overlay a[aria-current="page"] { color: var(--lamp); }
.menu-overlay a.menu-cta {
  align-self: flex-start; margin-top: 22px; padding: 0 22px;
  display: inline-flex; align-items: center;
  border: 1px solid var(--lamp); color: var(--lamp);
  font-family: var(--mono); font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
}
.menu-close {
  position: absolute; top: 14px; right: 8px;
  min-width: 48px; min-height: 48px; background: none; border: 0; cursor: pointer; color: var(--text);
}
.menu-close span { position: absolute; left: 11px; top: 23px; width: 26px; height: 1px; background: currentColor; }
.menu-close span:first-child { transform: rotate(45deg); }
.menu-close span:last-child { transform: rotate(-45deg); }
body.menu-open { overflow: hidden; }

/* ---------- Buttons and cues ---------- */
.btn {
  display: inline-flex; align-items: center; min-height: 48px;
  border: 1px solid var(--lamp); color: var(--lamp);
  padding: 0 24px;
  font-family: var(--mono); font-size: 13px; letter-spacing: .12em;
  text-transform: uppercase; text-decoration: none;
  transition: background .25s ease, color .25s ease;
}
.btn:hover { background: var(--lamp); color: var(--night); }
.cue {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  font-family: var(--mono); font-size: 14px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--lamp); text-decoration: none;
}
.cue .arrow { display: inline-block; transition: transform .3s ease; }
a:hover > .cue .arrow, a.cue:hover .arrow { transform: translateX(6px); }

/* ---------- Shared sections ---------- */
.section { padding: 112px var(--gutter); position: relative; }
.section.alt { background: var(--night2); }
.section.rule-top { border-top: 1px solid var(--rule); }
.wrap { max-width: 1352px; margin: 0 auto; }
.lead { font-size: clamp(22px, 2.2vw, 30px); line-height: 1.5; }
.prose p + p { margin-top: 1.1em; }
@media (max-width: 760px) {
  .section { padding: 64px var(--gutter); }
}

/* Scroll reveal: content is visible without JS and under reduced motion. */
html.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .9s ease, transform .9s ease; }
html.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--night);
  border-top: 1px solid var(--rule);
  padding: 56px var(--gutter) 48px;
}
.site-footer .wrap { display: flex; justify-content: center; text-align: center; }
.site-footer .fine { margin: 0; font-family: var(--mono); font-size: 14px; letter-spacing: .1em; line-height: 1.8; color: var(--dim); }
.site-footer .fine .copy-line { color: var(--text); display: block; }

/* ---------- Body copy size: 19.5px under 700px (Source Serif 4's x-height runs large) ---------- */
@media (max-width: 700px) {
  body { font-size: 19.5px; }
  .lead { font-size: 19.5px; line-height: 1.6; }
}

/* ==========================================================================
   HOMEPAGE ONLY
   ========================================================================== */

/* Hero */
.hero { position: relative; height: 100vh; min-height: 640px; overflow: hidden; background: var(--night); }
.hero > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 65% 50%;
}
.hero::before { /* top scrim for header legibility, eased */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 170px; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(11,15,21,.62) 0, rgba(11,15,21,.52) 20%, rgba(11,15,21,.38) 40%,
    rgba(11,15,21,.22) 60%, rgba(11,15,21,.09) 80%, rgba(11,15,21,0) 100%);
}
.hero::after { /* left scrim behind the text, eased; bottom blend into the next section */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(11,15,21,.55) 0, rgba(11,15,21,.47) 14%, rgba(11,15,21,.33) 28%,
      rgba(11,15,21,.18) 42%, rgba(11,15,21,.07) 54%, rgba(11,15,21,0) 64%);
}
.glow {
  position: absolute; left: 72%; top: 18%; width: 60vw; height: 60vw; z-index: 1;
  transform: translate(-50%, -30%);
  background: radial-gradient(circle, rgba(242,196,141,.16), transparent 60%);
  animation: breathe 7s ease-in-out infinite; pointer-events: none;
}
@keyframes breathe { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .glow { animation: none; } }

.hero-copy { position: absolute; z-index: 2; left: var(--gutter); top: 22vh; max-width: 44vw; }
.hero-time { font-family: var(--mono); font-weight: 400; font-size: 18px; letter-spacing: .06em; color: var(--lamp); margin: 0; }
.hero h1 {
  font-size: clamp(40px, 4.8vw, 80px);
  line-height: 1.05; letter-spacing: -.01em; margin: 24px 0 0;
}
.hero h1 em { display: block; font-style: italic; color: var(--lamp); }
.hero-aud {
  font-family: var(--mono); font-weight: 300; font-size: 16px; letter-spacing: .04em;
  line-height: 1.6; color: var(--text); max-width: 32ch; margin: 28px 0 24px;
}
@media (min-width: 861px) { .hero-aud { font-size: 17px; } }
@media (max-width: 760px) {
  .hero { height: 100svh; min-height: 600px; }
  .hero > img { object-position: 64% 50%; }
  .hero::after { /* phone: scrim rises under the text, eased */
    background: linear-gradient(180deg,
      rgba(11,15,21,0) 0, rgba(11,15,21,0) 30%, rgba(11,15,21,.08) 38%,
      rgba(11,15,21,.22) 46%, rgba(11,15,21,.42) 54%, rgba(11,15,21,.62) 62%,
      rgba(11,15,21,.78) 70%, rgba(11,15,21,.88) 80%, rgba(11,15,21,.92) 100%);
  }
  .hero-copy { left: var(--gutter); right: var(--gutter); top: auto; bottom: 32px; max-width: none; }
  .hero-time { font-size: 16px; }
  .hero h1 { font-size: 10.5vw; margin-top: 20px; }
}

/* ---- One calm story: one ground, one heading system, one column grid ---- */
/* Every homepage section carries .home-sec: continuous dark ground (the body's night),
   equal vertical rhythm, a hairline above every section after the first. */
.section.home-sec { padding-top: 104px; padding-bottom: 104px; }
.home-sec + .home-sec::before {
  content: ""; position: absolute; top: 0; height: 1px; background: var(--rule); pointer-events: none;
  left: max(var(--gutter), calc((100% - 1352px) / 2)); right: max(var(--gutter), calc((100% - 1352px) / 2));
}
.duo-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 64px; align-items: start; }
.duo h2 {
  font-style: italic; color: var(--lamp);
  font-size: clamp(48px, 6vw, 96px); line-height: 1;
}
.duo .lead { max-width: 34em; }
/* Medicine heading hyphen: brighter yellow, slightly heavier and wider so it reads as deliberate. Word joiner before it keeps the only line break after the hyphen. */
.medicine h2 .hy { color: #FFD24D; -webkit-text-stroke: .035em #FFD24D; font-style: normal; font-weight: 700; display: inline-block; transform: scaleX(1.25); margin: 0 .04em; }

/* Medicine-assisted: same grid and heading as Individuals and Couples */
.med-list { margin-top: 40px; max-width: 34em; }
.med-item { display: block; text-decoration: none; color: inherit; padding: 36px 0; }
.med-item:first-child { padding-top: 0; }
.med-item:last-child { padding-bottom: 0; }
.med-item + .med-item { border-top: 1px solid var(--rule); }
.med-item h3 { font-size: clamp(30px, 2.8vw, 40px); line-height: 1.15; margin-bottom: 14px; transition: color .3s ease; }
.med-item:hover h3 { color: var(--lamp); }
.med-item p { font-size: clamp(22px, 2.2vw, 30px); line-height: 1.5; margin-bottom: 8px; }
@media (max-width: 700px) { .med-item p { font-size: 19.5px; line-height: 1.6; } }

/* About: heading and portrait in the left column, text in the right, top-aligned with the heading.
   Portrait is shown at its native 2:3 so face, arms and clasped hands are all in frame; it is graded
   in CSS only (natural color, a faint warm tint) and dissolves into the page at the edges with
   eased multi-stop masks: bottom just below the hands, a gentle left dissolve on desktop. */
.about-grid { row-gap: 40px; }
.about-grid > h2 { grid-column: 1; grid-row: 1; }
.about-photo {
  grid-column: 1; grid-row: 2; position: relative; isolation: isolate; aspect-ratio: 1201 / 1800;
  -webkit-mask-image:
    linear-gradient(to right, rgba(0,0,0,0.000) 0.0%, rgba(0,0,0,0.043) 1.8%, rgba(0,0,0,0.156) 3.5%, rgba(0,0,0,0.316) 5.2%, rgba(0,0,0,0.500) 7.0%, rgba(0,0,0,0.684) 8.8%, rgba(0,0,0,0.844) 10.5%, rgba(0,0,0,0.957) 12.2%, rgba(0,0,0,1.000) 14.0%, rgba(0,0,0,1.000) 91.0%, rgba(0,0,0,0.957) 92.1%, rgba(0,0,0,0.844) 93.2%, rgba(0,0,0,0.684) 94.4%, rgba(0,0,0,0.500) 95.5%, rgba(0,0,0,0.316) 96.6%, rgba(0,0,0,0.156) 97.8%, rgba(0,0,0,0.043) 98.9%, rgba(0,0,0,0.000) 100.0%),
    linear-gradient(to bottom, rgba(0,0,0,0.000) 0.0%, rgba(0,0,0,0.043) 0.6%, rgba(0,0,0,0.156) 1.2%, rgba(0,0,0,0.316) 1.9%, rgba(0,0,0,0.500) 2.5%, rgba(0,0,0,0.684) 3.1%, rgba(0,0,0,0.844) 3.8%, rgba(0,0,0,0.957) 4.4%, rgba(0,0,0,1.000) 5.0%, rgba(0,0,0,1.000) 80.0%, rgba(0,0,0,0.957) 82.5%, rgba(0,0,0,0.844) 85.0%, rgba(0,0,0,0.684) 87.5%, rgba(0,0,0,0.500) 90.0%, rgba(0,0,0,0.316) 92.5%, rgba(0,0,0,0.156) 95.0%, rgba(0,0,0,0.043) 97.5%, rgba(0,0,0,0.000) 100.0%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, rgba(0,0,0,0.000) 0.0%, rgba(0,0,0,0.043) 1.8%, rgba(0,0,0,0.156) 3.5%, rgba(0,0,0,0.316) 5.2%, rgba(0,0,0,0.500) 7.0%, rgba(0,0,0,0.684) 8.8%, rgba(0,0,0,0.844) 10.5%, rgba(0,0,0,0.957) 12.2%, rgba(0,0,0,1.000) 14.0%, rgba(0,0,0,1.000) 91.0%, rgba(0,0,0,0.957) 92.1%, rgba(0,0,0,0.844) 93.2%, rgba(0,0,0,0.684) 94.4%, rgba(0,0,0,0.500) 95.5%, rgba(0,0,0,0.316) 96.6%, rgba(0,0,0,0.156) 97.8%, rgba(0,0,0,0.043) 98.9%, rgba(0,0,0,0.000) 100.0%),
    linear-gradient(to bottom, rgba(0,0,0,0.000) 0.0%, rgba(0,0,0,0.043) 0.6%, rgba(0,0,0,0.156) 1.2%, rgba(0,0,0,0.316) 1.9%, rgba(0,0,0,0.500) 2.5%, rgba(0,0,0,0.684) 3.1%, rgba(0,0,0,0.844) 3.8%, rgba(0,0,0,0.957) 4.4%, rgba(0,0,0,1.000) 5.0%, rgba(0,0,0,1.000) 80.0%, rgba(0,0,0,0.957) 82.5%, rgba(0,0,0,0.844) 85.0%, rgba(0,0,0,0.684) 87.5%, rgba(0,0,0,0.500) 90.0%, rgba(0,0,0,0.316) 92.5%, rgba(0,0,0,0.156) 95.0%, rgba(0,0,0,0.043) 97.5%, rgba(0,0,0,0.000) 100.0%);
  mask-composite: intersect;
}
.about-photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%;
  filter: saturate(.95) contrast(1.03) brightness(.9);
}
.about-photo::after { /* very faint lamp tint, normal blend, no pool */
  content: ""; position: absolute; inset: 0; pointer-events: none; background: rgba(242,196,141,.06);
}
.about-text { grid-column: 2; grid-row: 1 / span 2; align-self: start; padding-top: 14px; }
.about .cue, .individuals .cue, .couples .cue { margin-top: 28px; }

@media (max-width: 760px) {
  .section.home-sec { padding-top: 64px; padding-bottom: 64px; }
  .duo-grid { grid-template-columns: 1fr; gap: 24px; }
  .med-list { margin-top: 28px; }
  .med-item { padding: 28px 0; }
  .about-grid { row-gap: 24px; }
  .about-grid > h2, .about-photo, .about-text { grid-column: 1; grid-row: auto; }
  .about-text { padding-top: 0; }
  .about-photo {
    -webkit-mask-image:
      linear-gradient(to right, rgba(0,0,0,0.000) 0.0%, rgba(0,0,0,0.043) 0.9%, rgba(0,0,0,0.156) 1.8%, rgba(0,0,0,0.316) 2.6%, rgba(0,0,0,0.500) 3.5%, rgba(0,0,0,0.684) 4.4%, rgba(0,0,0,0.844) 5.2%, rgba(0,0,0,0.957) 6.1%, rgba(0,0,0,1.000) 7.0%, rgba(0,0,0,1.000) 93.0%, rgba(0,0,0,0.957) 93.9%, rgba(0,0,0,0.844) 94.8%, rgba(0,0,0,0.684) 95.6%, rgba(0,0,0,0.500) 96.5%, rgba(0,0,0,0.316) 97.4%, rgba(0,0,0,0.156) 98.2%, rgba(0,0,0,0.043) 99.1%, rgba(0,0,0,0.000) 100.0%),
    linear-gradient(to bottom, rgba(0,0,0,0.000) 0.0%, rgba(0,0,0,0.043) 0.5%, rgba(0,0,0,0.156) 1.0%, rgba(0,0,0,0.316) 1.5%, rgba(0,0,0,0.500) 2.0%, rgba(0,0,0,0.684) 2.5%, rgba(0,0,0,0.844) 3.0%, rgba(0,0,0,0.957) 3.5%, rgba(0,0,0,1.000) 4.0%, rgba(0,0,0,1.000) 80.0%, rgba(0,0,0,0.957) 82.5%, rgba(0,0,0,0.844) 85.0%, rgba(0,0,0,0.684) 87.5%, rgba(0,0,0,0.500) 90.0%, rgba(0,0,0,0.316) 92.5%, rgba(0,0,0,0.156) 95.0%, rgba(0,0,0,0.043) 97.5%, rgba(0,0,0,0.000) 100.0%);
    mask-image:
      linear-gradient(to right, rgba(0,0,0,0.000) 0.0%, rgba(0,0,0,0.043) 0.9%, rgba(0,0,0,0.156) 1.8%, rgba(0,0,0,0.316) 2.6%, rgba(0,0,0,0.500) 3.5%, rgba(0,0,0,0.684) 4.4%, rgba(0,0,0,0.844) 5.2%, rgba(0,0,0,0.957) 6.1%, rgba(0,0,0,1.000) 7.0%, rgba(0,0,0,1.000) 93.0%, rgba(0,0,0,0.957) 93.9%, rgba(0,0,0,0.844) 94.8%, rgba(0,0,0,0.684) 95.6%, rgba(0,0,0,0.500) 96.5%, rgba(0,0,0,0.316) 97.4%, rgba(0,0,0,0.156) 98.2%, rgba(0,0,0,0.043) 99.1%, rgba(0,0,0,0.000) 100.0%),
    linear-gradient(to bottom, rgba(0,0,0,0.000) 0.0%, rgba(0,0,0,0.043) 0.5%, rgba(0,0,0,0.156) 1.0%, rgba(0,0,0,0.316) 1.5%, rgba(0,0,0,0.500) 2.0%, rgba(0,0,0,0.684) 2.5%, rgba(0,0,0,0.844) 3.0%, rgba(0,0,0,0.957) 3.5%, rgba(0,0,0,1.000) 4.0%, rgba(0,0,0,1.000) 80.0%, rgba(0,0,0,0.957) 82.5%, rgba(0,0,0,0.844) 85.0%, rgba(0,0,0,0.684) 87.5%, rgba(0,0,0,0.500) 90.0%, rgba(0,0,0,0.316) 92.5%, rgba(0,0,0,0.156) 95.0%, rgba(0,0,0,0.043) 97.5%, rgba(0,0,0,0.000) 100.0%);
  }
}

/* Sessions and fees */
.fees .fees-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 64px; align-items: start; }
.fees p + p { margin-top: .9em; }
.fees .fees-text { max-width: 34em; }
@media (max-width: 760px) {
  .fees .fees-grid { grid-template-columns: 1fr; gap: 16px; }
}

/* Closing */
.closing { text-align: left; padding: 140px var(--gutter) 150px; overflow: hidden; }
.closing .glow-soft {
  position: absolute; left: 50%; top: 50%; width: 70vw; height: 70vw; max-width: 1100px; max-height: 1100px;
  transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(circle, rgba(242,196,141,.07), transparent 62%);
  animation: breathe 7s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .closing .glow-soft { animation: none; } }
.closing .wrap { position: relative; }
.closing h2 {
  font-size: clamp(34px, 4.4vw, 68px); line-height: 1.12; letter-spacing: -.01em;
  max-width: 20em; margin-bottom: 44px;
}
@media (max-width: 760px) {
  .closing { padding: 80px var(--gutter) 88px; }
  .closing h2 { font-size: 34px; margin-bottom: 32px; }
}

/* Closing on the homepage */
.section.closing.home-sec { padding-top: 128px; padding-bottom: 136px; }
@media (max-width: 760px) {
  .section.closing.home-sec { padding-top: 80px; padding-bottom: 88px; }
}

/* ==========================================================================
   INNER PAGES (shared by Depth, About, Contact)
   ========================================================================== */
.page-hero {
  position: relative; overflow: hidden;
  background: var(--night2); border-bottom: 1px solid var(--rule);
  padding: calc(var(--header-h) + 88px) max(var(--gutter), calc((100% - 1352px) / 2)) 96px;
}
.page-hero::after { /* quiet lamp glow, no animation */
  content: ""; position: absolute; right: -10vw; top: 50%; width: 60vw; height: 60vw; max-width: 900px; max-height: 900px;
  transform: translateY(-50%); pointer-events: none;
  background: radial-gradient(circle, rgba(242,196,141,.09), transparent 62%);
}
.page-hero > * { position: relative; z-index: 1; }
.page-hero h1 {
  font-size: clamp(44px, 5.6vw, 88px); line-height: 1.05; letter-spacing: -.01em;
}
.page-hero .label { margin-top: 28px; color: var(--dim-hi); }
.page-hero .lead { margin-top: 28px; }
.split { display: grid; grid-template-columns: 1fr 1.4fr; gap: 64px; align-items: start; }
.split > .label { padding-top: 10px; }
.split .prose p { max-width: 34em; }
.page-title { font-size: clamp(48px, 6vw, 96px); line-height: 1; letter-spacing: -.01em; }
@media (max-width: 760px) {
  .page-hero { padding: calc(var(--header-h) + 40px) var(--gutter) 56px; }
  .page-hero .label { margin-top: 20px; }
  .split { grid-template-columns: 1fr; gap: 20px; }
  .split > .label { padding-top: 0; }
}

/* ==========================================================================
   DEPTH PSYCHOTHERAPY PAGE
   ========================================================================== */
.intro .wrap > .lead { max-width: 30em; }
.intro .wrap > .lead + .lead { margin-top: 1em; }
.fees .fees-text.prose p { max-width: none; }

/* ==========================================================================
   ABOUT PAGE
   Photo blends into the page: eased multi-stop mask fade at the bottom,
   eased top scrim for the header. No two-stop gradients, so no visible line.
   ========================================================================== */
.ab-hero { position: relative; height: 78vh; height: 78svh; min-height: 480px; overflow: hidden; background: var(--night); }
.ab-hero img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 58% 42%;
  filter: brightness(.8) saturate(.9) contrast(1.02);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1.000) 0%, rgba(0,0,0,1.000) 62.0%, rgba(0,0,0,0.972) 65.8%, rgba(0,0,0,0.896) 69.6%, rgba(0,0,0,0.784) 73.4%, rgba(0,0,0,0.648) 77.2%, rgba(0,0,0,0.500) 81.0%, rgba(0,0,0,0.352) 84.8%, rgba(0,0,0,0.216) 88.6%, rgba(0,0,0,0.104) 92.4%, rgba(0,0,0,0.028) 96.2%, rgba(0,0,0,0.000) 100.0%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1.000) 0%, rgba(0,0,0,1.000) 62.0%, rgba(0,0,0,0.972) 65.8%, rgba(0,0,0,0.896) 69.6%, rgba(0,0,0,0.784) 73.4%, rgba(0,0,0,0.648) 77.2%, rgba(0,0,0,0.500) 81.0%, rgba(0,0,0,0.352) 84.8%, rgba(0,0,0,0.216) 88.6%, rgba(0,0,0,0.104) 92.4%, rgba(0,0,0,0.028) 96.2%, rgba(0,0,0,0.000) 100.0%);
}
.ab-hero::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 200px; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(11,15,21,0.744) 0px, rgba(11,15,21,0.724) 20px, rgba(11,15,21,0.667) 40px, rgba(11,15,21,0.583) 60px, rgba(11,15,21,0.482) 80px, rgba(11,15,21,0.372) 100px, rgba(11,15,21,0.262) 120px, rgba(11,15,21,0.161) 140px, rgba(11,15,21,0.077) 160px, rgba(11,15,21,0.020) 180px, rgba(11,15,21,0.000) 200px);
}
.ab-first { padding-top: 24px; }
.creds { list-style: none; margin: 0; padding: 0; max-width: 40em; }
.creds li { padding: 16px 0; border-bottom: 1px solid var(--rule); }
.creds li:first-child { border-top: 1px solid var(--rule); }
.creds-note { margin-top: 1.6em; }
/* Explanatory note tucked under its credential: same ruled row, subordinate by color, not size. */
.creds-sub { margin: 10px 0 0; color: var(--dim-hi); line-height: 1.6; }
@media (max-width: 760px) {
  .ab-hero { height: 62vh; height: 62svh; min-height: 420px; }
  .ab-hero img { object-position: 66% 40%; }
  .ab-first { padding-top: 8px; }
}

/* ==========================================================================
   CONTACT PAGE
   Form is restyled only; markup and attributes are untouched.
   Field borders use --dim (>= 5:1 on night); focus ring is lamp.
   ========================================================================== */
.contact-hero { padding-bottom: 80px; }
.contact-hero .lead { max-width: 30em; }
.formwrap .wrap { max-width: 860px; margin-left: 0; }
#contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 28px; }
#contact-form .hp { position: absolute; left: -9999px; opacity: 0; margin: 0; }
#contact-form .field:nth-of-type(n+3) { grid-column: 1 / -1; }
#contact-form .btn, #contact-form .formnote { grid-column: 1 / -1; }
#contact-form .btn { justify-self: start; cursor: pointer; min-height: 52px; }
#contact-form .btn:hover { background: var(--lamp); color: var(--night); }
#contact-form .btn:disabled { opacity: .5; cursor: default; }
.field label {
  display: block; margin-bottom: 10px;
  font-family: var(--body); font-size: 21px; line-height: 1.4; color: var(--text);
}
.field label .req {
  margin-left: 10px; font-family: var(--mono); font-size: 14px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--dim-hi);
}
.field .helper { color: var(--dim-hi); font-size: 21px; line-height: 1.55; margin: -2px 0 14px; }
.field input, .field textarea {
  display: block; width: 100%; min-height: 52px;
  padding: 12px 14px;
  background: rgba(237,230,220,.04); color: var(--text);
  border: 1px solid var(--dim); border-radius: 0;
  font-family: var(--body); font-size: 21px; line-height: 1.5;
  transition: border-color .2s ease, background .2s ease;
}
.field textarea { min-height: 180px; resize: vertical; }
.field input:hover, .field textarea:hover { border-color: var(--dim-hi); }
.field input:focus, .field textarea:focus {
  outline: 2px solid var(--lamp); outline-offset: 2px; border-color: var(--lamp); background: rgba(237,230,220,.07);
}
.formnote { font-size: 21px; line-height: 1.6; }
.formnote.error { color: var(--lamp); }
.thanks { font-family: var(--display); font-size: clamp(28px, 3vw, 40px); line-height: 1.3; padding: 8px 0; }
[hidden] { display: none !important; }
.details .lines { font-size: 21px; line-height: 1.8; }
.details .lines a { color: var(--lamp); text-decoration: underline; text-underline-offset: 4px; }
.details .lines a:hover { text-decoration-thickness: 2px; }
@media (max-width: 760px) {
  .contact-hero { padding-bottom: 48px; }
  #contact-form { grid-template-columns: 1fr; gap: 26px; }
  #contact-form .field:nth-of-type(n+3) { grid-column: auto; }
}
@media (max-width: 700px) {
  .field label, .field .helper, .field input, .field textarea, .formnote, .details .lines { font-size: 19.5px; }
  .field label .req { font-size: 14px; }
}

/* ==========================================================================
   KETAMINE PAGE (rules shared with the psilocybin page)
   The old ember arc-and-node thread, rebuilt in lamp: a hairline that runs
   down through the stages with a ring node at each one. Used twice: unboxed
   for the three parts, and inside the package panel. Node fill matches the
   surface it sits on (--node-bg) so the ring reads as a hole in the line.
   ========================================================================== */
.thread { position: relative; padding-left: 44px; --node-bg: var(--night2); }
.thread::before {
  content: ""; position: absolute; left: 5px; top: 12px; bottom: 12px; width: 1px;
  background: linear-gradient(180deg,
    rgba(242,196,141,.18) 0, rgba(242,196,141,.45) 30%, rgba(242,196,141,.62) 62%,
    rgba(242,196,141,.40) 82%, rgba(242,196,141,.16) 94%, rgba(242,196,141,0) 100%);
}
.thread .step { position: relative; }
.thread .step + .step { margin-top: 44px; }
.thread .step::before {
  content: ""; position: absolute; left: -44px; top: 7px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--node-bg); border: 1px solid var(--lamp);
}
.thread .count {
  display: block; margin-bottom: 8px;
  font-family: var(--mono); font-size: 14px; letter-spacing: .2em; text-transform: uppercase;
  line-height: 1.5; color: var(--lamp);
}
.thread h3 { font-size: clamp(28px, 2.6vw, 38px); line-height: 1.15; letter-spacing: -.005em; margin-bottom: 14px; }
.thread-parts { margin-top: 56px; }
.thread-parts .step p { max-width: 34em; }

.panel {
  margin-top: 40px; max-width: 34em;
  background: var(--night2); border: 1px solid rgba(242,196,141,.32);
  padding: 44px 44px 40px;
}
.panel .thread .step + .step { margin-top: 32px; }
.panel .thread h3 { margin-bottom: 6px; font-size: clamp(26px, 2.2vw, 32px); }
.panel .meta { color: var(--dim-hi); font-size: 21px; line-height: 1.5; }
.panel-rule {
  height: 1px; margin: 40px 0 28px;
  background: linear-gradient(90deg, rgba(242,196,141,.55), rgba(242,196,141,.06));
}
.total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; }
.total .what { font-family: var(--mono); font-size: 14px; letter-spacing: .2em; text-transform: uppercase; color: var(--dim-hi); }
.total .amount { font-family: var(--display); font-size: clamp(46px, 5vw, 64px); line-height: 1; color: var(--lamp); letter-spacing: -.01em; }
.panel .note { margin-top: 28px; color: var(--text); font-size: 21px; line-height: 1.55; }
.section.fees .wrap.split > div > .prose p { max-width: 34em; }
.closing .lead { max-width: 28em; margin-bottom: 44px; }
@media (max-width: 760px) {
  .thread { padding-left: 34px; }
  .thread .step::before { left: -34px; }
  .thread .step + .step { margin-top: 36px; }
  .thread-parts { margin-top: 40px; }
  .panel { margin-top: 28px; padding: 32px 22px 30px; }
  .panel-rule { margin: 32px 0 24px; }
  .closing .lead { margin-bottom: 32px; }
}
@media (max-width: 700px) {
  .panel .meta, .panel .note { font-size: 19.5px; }
}

/* ==========================================================================
   PSILOCYBIN PAGE
   Reuses every rule in the KETAMINE PAGE section above (thread, panel, total).
   Only difference in structure: no note under the price, and the intro has
   two lead paragraphs, which the Depth-page .intro rule already spaces.
   No page-specific rules are needed.
   ========================================================================== */

/* ==========================================================================
   FAQ PAGE
   Chips filter eight category groups (all 34 questions stay in the DOM).
   Answers are always visible: the live page has no expand/collapse, and
   this rebuild is restyle-only.
   ========================================================================== */
.faq-hero { padding-bottom: 72px; }
.chooser-wrap { padding: 40px var(--gutter) 8px; }
.chooser { max-width: 1352px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
  font-family: var(--mono); font-size: 14px; letter-spacing: .1em; text-transform: uppercase; line-height: 1.2;
  color: var(--dim-hi); background: none; cursor: pointer;
  border: 1px solid var(--dim); border-radius: 0;
  transition: color .25s ease, border-color .25s ease, background .25s ease;
}
.chip:hover { color: var(--text); border-color: var(--dim-hi); }
.chip[aria-pressed="true"] { color: var(--lamp); border-color: var(--lamp); background: rgba(242,196,141,.08); }
.chip:focus-visible, .grouptop:focus-visible { outline: 2px solid var(--lamp); outline-offset: 3px; }

.qa-group { padding: 80px var(--gutter) 72px; }
.qa-group + .qa-group { border-top: 1px solid var(--rule); }
.qa-group .split > .label { position: sticky; top: calc(var(--header-h) + 16px); align-self: start; }
.qa-list { max-width: 40em; }
.qa { padding: 36px 0; border-top: 1px solid var(--rule); }
.qa:first-child { padding-top: 0; border-top: 0; }
.qa h3 { font-size: clamp(25px, 2.3vw, 32px); line-height: 1.25; letter-spacing: -.005em; margin-bottom: 18px; text-wrap: pretty; }
.qa p + p { margin-top: 1.1em; }
.qa .cite { color: var(--dim-hi); font-size: .92em; }
.qa a { color: var(--lamp); text-decoration: underline; text-underline-offset: 4px; }
.grouptop {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 24px; padding: 0;
  font-family: var(--mono); font-size: 14px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--lamp); background: none; border: 0; cursor: pointer;
}
.grouptop:hover { text-decoration: underline; text-underline-offset: 5px; }
body.showing-all .grouptop { display: none; }
@media (max-width: 760px) {
  .faq-hero { padding-bottom: 40px; }
  .chooser-wrap { padding-top: 28px; }
  .chip { padding: 0 14px; letter-spacing: .06em; }
  .qa-group { padding: 56px var(--gutter) 48px; }
  .qa-group .split > .label { position: static; }
  .qa { padding: 28px 0; }
  .qa h3 { font-size: 25px; margin-bottom: 14px; }
}

/* ---------- Book a Free Call (Dan, 10/11) ----------
   Solid lamp, one line, no glow. Page buttons carry "15 minutes · free" as a quiet note underneath. */
.btn {
  min-height: 56px; padding: 0 28px;
  border: 0; border-radius: 8px;
  background: var(--lamp); color: var(--night);
  font-size: 14px; letter-spacing: .14em;
  transition: background .25s ease;
}
.btn:hover { background: #F7D3A6; color: var(--night); }
.cta { display: inline-flex; flex-direction: column; align-items: center; gap: 12px; }
.cta .btn { justify-content: center; min-width: 300px; box-sizing: border-box; }
.cta-note {
  margin: 0; font-family: var(--mono); font-weight: 400; font-size: 12px; line-height: 1.4;
  letter-spacing: .16em; text-transform: uppercase; color: var(--dim-hi);
}
@media (max-width: 760px) {
  .cta { display: flex; width: 100%; }
  .cta .btn { width: 100%; min-width: 0; }
}

.site-nav .nav-cta, .header-cta {
  border: 0; border-radius: 6px;
  background: var(--lamp); color: var(--night);
  transition: background .25s ease;
}
.site-nav .nav-cta:hover, .header-cta:hover { background: #F7D3A6; color: var(--night); }
.header-cta { position: relative; min-height: 38px; }
.header-cta::before { content: ""; position: absolute; left: 0; right: 0; top: -3px; bottom: -3px; } /* keeps a 44px tap area */
.menu-overlay a.menu-cta {
  min-height: 56px; border: 0; border-radius: 8px;
  background: var(--lamp); color: var(--night);
}

/* Header balance on phones and tablets: wordmark centered on the button's line,
   menu lines sit on the same 16px gutter as the wordmark. */
@media (max-width: 1300px) {
  .wordmark { justify-content: center; }
  .menu-btn { margin-right: -9px; }
}

/* Phone header button about 20% smaller (Dan, 10/11). The tap area stays 44px. */
@media (max-width: 760px) {
  .header-cta { min-height: 32px; padding: 0 10px; font-size: 10.5px; letter-spacing: .03em; }
  .header-cta::before { top: -6px; bottom: -6px; }
}

/* ---------- Long Dawn: the homepage gets lighter as you scroll (Dan, 10/11) ----------
   Static backgrounds, nothing moves, no script. Each section's ground continues from the last,
   night warming evenly to a deep umber, then an eased dawn into warm sand above the closing.
   Sand, not white (Dan: cream felt too white and too abrupt). Seam stops are warmed through
   the middle so they never go gray. No text sits on the seam. Gold fails on sand,
   so the sand zone uses ink text and a dark button.
   Seam shortened and the headline now starts 80% into it, where ink on the ramp is already about 8.5:1 (Dan, 10/12: gap about half as tall). */
.dawn {
  --sand: #DFCAB1;
  --seam: 340px;
}
/* One continuous ramp under Individuals through About, so the lightening starts as soon as you
   scroll and moves at an even pace. It stops at a deep umber where cream and gold text still
   pass AA (8.2:1 and 6.4:1); the dawn seam above the closing finishes the job. */
.dawn .dawn-run {
  --dim: #B3AEA7;     /* 4.6:1 or better along the ramp */
  --rule: #3A3430;
  background: linear-gradient(180deg, var(--run-start, #0B0F15) 0%, #17181B 6%, #232120 22%, #2F2A26 45%, #3C342E 70%, #4A3F37 100%); /* front-loaded: dark steps read smaller, so the first change is visible within Individuals */
}
.dawn .closing {
  --text: #1B1F26;    /* 10.4:1 on sand */
  --dim: #4E4A46;     /* 5.5:1 */
  --dim-hi: #3F3B37;
  --lamp: #7A3E0E;    /* ember for any accent text on sand */
  --rule: #C9B49A;
  color: var(--text);
  background: linear-gradient(180deg,
    #4A3F37 0,
    #4F4339 calc(var(--seam) * .125),
    #5E503F calc(var(--seam) * .25),
    #776449 calc(var(--seam) * .375),
    #937C5E calc(var(--seam) * .5),
    #AE977A calc(var(--seam) * .625),
    #C6B095 calc(var(--seam) * .75),
    #D8C3AA calc(var(--seam) * .875),
    var(--sand) var(--seam));
}
.dawn .section.closing { padding-top: calc(var(--seam) * .8); }
.dawn .dawn-run > .section:last-child { padding-bottom: 48px; }
.dawn .home-sec.closing::before { display: none; }
.dawn .closing .glow-soft { display: none; }
.dawn .closing .btn { background: #1B1F26; color: #F2C48D; }
.dawn .closing .btn:hover { background: #2A303A; color: #F2C48D; }
.dawn .site-footer {
  --text: #1B1F26; --dim: #4E4A46;
  background: var(--sand); border-top-color: #C9B49A;
}
@media (max-width: 760px) {
  .dawn { --seam: 240px; }
  .dawn .section.closing { padding-top: calc(var(--seam) * .8); }
  .dawn .dawn-run > .section:last-child { padding-bottom: 24px; }
}

/* Long Dawn on the inner pages (Dan, 10/11). Same ramp and sand ending; alternating bands and
   panels become translucent so they ride the ramp instead of painting night over it. */
.page-hero + .dawn-run { --run-start: #121821; }
.dawn .dawn-run .section.alt { background: rgba(237,230,220,.03); }
.dawn .dawn-run .panel { background: rgba(11,15,21,.32); }
/* Contact has no closing invitation: the ramp ends in deep umber and the footer continues it. */
.dawn.no-close .site-footer {
  --text: #EDE6DC; --dim: #B3AEA7;
  background: #4A3F37; border-top-color: #5A4E45;
}