/* =====================================================================
   CTFY · Midnight Theta · Psychotherapy (/programs/psychotherapy/) — page layer
   Spec: docs/redesign/pages/27-psychotherapy.md. Builds on css/site.css (foundation) and
   css/modules.css (M01–M33); only page composition lives here:
   the H6 "quiet reveal" photo (slit-to-open clip + warm light, one pass, no loop),
   the 6/5 split, tagged approach cards and the crisis note's spacing.
   Everything is finished without JS, with reduced motion and with the G4 toggle off.
   ===================================================================== */

#why,#approaches,#start{scroll-margin-top:96px}

/* ---------- 1 · H6 paper subhero + quiet-reveal photo ---------- */
.pt-hero{--pt-w:min(560px,42vw);overflow:visible;z-index:2}
.pt-hero__bg{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.pt-hero__bg .aurora{opacity:.7}
.pt-hero .hero__content{position:relative;z-index:2}
.pt-hero .hero__title{margin-top:18px}
/* the photo straddles the seam on the right (desktop); the text column stops before it */
.pt-photo{position:absolute;z-index:3;right:max(var(--gutter),(100% - var(--container))/2);bottom:-120px;width:var(--pt-w);aspect-ratio:16/10;margin:0;
  filter:drop-shadow(0 30px 40px rgba(17,19,26,.38))}
@media (min-width:1024px){.pt-hero .hero__content>*{max-width:calc(100% - var(--pt-w) - 48px)}.pt-hero .hero__content>.crumbs{max-width:none}}
.pt-photo__frame{position:relative;width:100%;height:100%;overflow:hidden;border-radius:var(--r-xl);background:var(--bg-2);clip-path:inset(0 round var(--r-xl))}
.pt-photo__frame img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 46%}
.pt-photo__light{position:absolute;inset:0;background:rgba(244,236,224,.4);opacity:0;pointer-events:none}
/* the reveal: from a vertical slit to full width while the image settles and the warm light fades (1.6s, once) */
.js [data-hero]:not(.is-in) .pt-photo__frame{clip-path:inset(0 44% 0 44% round var(--r-xl));animation:pt-open 0s linear 2.5s forwards}
.js [data-hero]:not(.is-in) .pt-photo__frame img{transform:scale(1.08);animation:pt-settle 0s linear 2.5s forwards}
.js [data-hero]:not(.is-in) .pt-photo__light{opacity:1;animation:pt-light 0s linear 2.5s forwards}
[data-hero].is-in .pt-photo__frame{transition:clip-path 1600ms var(--ease-in-out)}
[data-hero].is-in .pt-photo__frame img{transition:transform 1600ms var(--ease-in-out)}
[data-hero].is-in .pt-photo__light{transition:opacity 1600ms var(--ease-out)}
@keyframes pt-open{to{clip-path:inset(0 round var(--r-xl))}}
@keyframes pt-settle{to{transform:none}}
@keyframes pt-light{to{opacity:0}}
/* reduced / off: fully open, light layer 0 */
[data-motion="off"] .pt-photo__frame{clip-path:inset(0 round var(--r-xl))!important;transition:none!important;animation:none!important}
[data-motion="off"] .pt-photo__frame img{transform:none!important;transition:none!important;animation:none!important}
[data-motion="off"] .pt-photo__light{opacity:0!important;transition:none!important;animation:none!important}
@media (prefers-reduced-motion:reduce){
  .pt-photo__frame{clip-path:inset(0 round var(--r-xl))!important;transition:none!important;animation:none!important}
  .pt-photo__frame img{transform:none!important;transition:none!important;animation:none!important}
  .pt-photo__light{opacity:0!important;transition:none!important;animation:none!important}
}
@media (max-width:1023px){
  /* band (text, stacked CTAs), then the photo at full width 16:10, half over the seam */
  .pt-hero{--pt-w:min(var(--container),100vw - 2*var(--gutter));padding-bottom:0}
  .pt-photo{position:relative;right:auto;bottom:auto;width:var(--pt-w);margin:32px auto calc(var(--pt-w) * -.3125)}
  .pt-hero .hero__ctas>span,.pt-hero .hero__ctas .btn{width:100%}
}

/* ---------- 2 · What it is ---------- */
.pt-why.ch--paper{padding-top:calc(160px + var(--section-y-tight) + 40px);padding-bottom:var(--section-y)}
@media (min-width:1024px){.pt-why.ch--paper{padding-top:calc(160px + var(--section-y-tight))}}
.pt-split{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(40px,8vw,128px);align-items:start}
.pt-split .m-split__copy{align-content:start}
.pt-split .m-split__copy .t-lead{color:var(--fg-1)}
.pt-split .m-split__copy a{color:var(--fg-link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.pt-side{display:grid;gap:clamp(24px,3vw,40px)}
.pt-side .m-feel__card{background:var(--paper-1);border:1px solid var(--line-p);box-shadow:var(--lift-paper)}
.pt-side .m-feel__list li{font-size:calc(var(--t-title) * 1.2 * var(--k-display))}
.pt-side .m-feel__cta{margin-top:18px;justify-self:start}
.pt-room{aspect-ratio:16/10;border-radius:var(--r-l)}
.pt-room img{object-position:50% 52%}
/* mobile order is text, card, image (the shared split puts media first) */
@media (max-width:1023px){.pt-split{grid-template-columns:minmax(0,1fr);gap:32px}.pt-split .m-split__media{order:2}}
@media (max-width:599px){.pt-side .m-feel__cta{justify-self:stretch}}

/* ---------- 3 · Approaches ---------- */
.pt-approaches.ch--paper{background:var(--paper-1);padding-top:var(--section-y-tight);padding-bottom:var(--section-y-tight)}
.pt-pillars{--cols:3}
.pt-pillars .m-pillar{background:var(--paper-0)}
.m-pillar__tag{margin:0 0 4px}
.pt-pillars .m-pillar__tag .chip{min-height:26px;padding-inline:10px;font-size:var(--t-micro)}

/* ---------- 4 · Crisis note: the last text block before the bridge ---------- */
.pt-note.ch--paper{--seam-to:var(--bg-2);background:var(--paper-1);padding-top:0;padding-bottom:calc(120px + var(--section-y-tight))}
.pt-note .m-note{max-width:760px;background:var(--paper-0);font-size:calc(var(--t-small) * var(--k-text))}
@media (max-width:599px){.pt-note .m-note{padding:16px 18px;gap:12px}}