/* ==========================================================================
   Psychiatry Practice: home page (hero journey + below-fold sections)
   ========================================================================== */

/* ---------- the pinned hero ---------- */

.hero{position:relative;height:520vh;background:var(--deep)}
.hero-stage{
  position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}

/* scene */
.hero-scene{position:absolute;inset:0}
.hero-scene svg{position:absolute;inset:0;width:100%;height:100%}
.hero-scene .mark-dot{fill:var(--accent-bright);opacity:.34}
.hero-scene .thread-path{
  fill:none;stroke:var(--accent-bright);stroke-width:1.6;stroke-linecap:round;
  filter:drop-shadow(0 0 6px rgba(91,188,205,.55));
}
.hero-scene .mark-circle{fill:none;stroke:var(--gold);stroke-width:1.5;filter:drop-shadow(0 0 8px rgba(201,147,46,.4))}
.hero-vignette{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 120% 90% at 50% 45%,rgba(8,17,28,0) 30%,rgba(8,17,28,.66) 100%);
}

/* whisper particle field */
.hero-dust i{
  position:absolute;width:3px;height:3px;border-radius:50%;
  background:var(--accent-bright);opacity:.16;
}
body.motion-ok .hero-dust i{animation:dust 14s ease-in-out infinite alternate}
@keyframes dust{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(var(--dx,10px),var(--dy,-16px),0)}
}

/* caption bands */
.band{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:0 clamp(1.2rem,6vw,4rem);opacity:0;pointer-events:none;text-align:center;
}
.band::before{
  content:"";position:absolute;inset:-4%;pointer-events:none;
  opacity:calc(.25 + .75*var(--k,0));
  background:radial-gradient(ellipse 72% 56% at 50% 50%,rgba(6,13,22,.6) 0%,rgba(6,13,22,.4) 46%,rgba(6,13,22,0) 76%);
}
.band.on{pointer-events:auto}
.band-inner{position:relative;max-width:900px}
.band h2,.band p.band-line{
  font-family:var(--font-display);font-weight:500;color:var(--on-deep);
  font-size:clamp(1.9rem,4.6vw,3.4rem);line-height:1.18;letter-spacing:-.01em;
  text-shadow:var(--tshadow);margin:0;
}
.band .w{display:inline-block;white-space:pre}
.band .c{display:inline-block}

/* band 1: blur-to-sharp (two stacked copies) */
.band-focus .copy{position:relative}
.band-focus .soft{
  position:absolute;inset:0;filter:blur(10px);opacity:calc(1 - var(--k,0));
}
.band-focus .sharp{opacity:var(--k,0)}

/* band 2: drift-down per word */
.band-drift .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*-26px));
}

/* band 3: grid snap-align per character */
.band-snap .c{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);
  opacity:var(--kc);
  transform:translateX(calc((1 - var(--kc))*var(--jx,0px)));
}

/* band 4: staged settle */
.band-settle .headline .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*30px));
}
.band-settle .settle-sub{
  --ks:clamp(0,(var(--k,0) - .55)*3.4,1);
  opacity:var(--ks);
  transform:translateY(calc((1 - var(--ks))*18px));
  font-family:var(--font-body);font-size:clamp(1.05rem,1.7vw,1.3rem);
  color:var(--on-deep-soft);max-width:52ch;margin:1.3rem auto 0;line-height:1.6;
  text-shadow:0 1px 3px rgba(5,10,16,.8);
}
.band-settle .settle-cta{
  --kb:clamp(0,(var(--k,0) - .74)*4.5,1);
  opacity:var(--kb);
  transform:translateY(calc((1 - var(--kb))*14px));
  display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap;margin-top:2rem;
}
.band-settle .btn{text-shadow:none}
.hero .btn-ghost{border-color:rgba(255,255,255,.34);color:var(--on-deep)}
.hero .btn-ghost:hover{border-color:var(--accent-bright);color:var(--accent-bright)}
.band-settle h1{
  font-size:clamp(2.5rem,6vw,4.4rem);color:var(--on-deep);margin:0;
  text-shadow:var(--tshadow);
}
.band-settle h1 em{font-style:italic}
.band-settle h1 .b-psy{color:#8ab6e8}
.band-settle h1 .b-prac{color:#6fd49a}
.band-settle .settle-logo{
  --kl:clamp(0,var(--k,0)*2.4,1);
  width:clamp(104px,14vw,150px);margin:0 auto 1.5rem;
  opacity:var(--kl);
  transform:translateY(calc((1 - var(--kl))*22px));
}
.settle-logo svg,.static-logo svg{width:100%;height:auto;display:block}

/* scroll cue */
.hero-cue{
  position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);
  color:var(--on-deep-soft);font-family:var(--font-mono);font-size:.68rem;
  letter-spacing:.28em;text-transform:uppercase;display:flex;flex-direction:column;
  align-items:center;gap:.6rem;opacity:calc(1 - var(--cue-fade,0));
  transition:opacity .6s var(--ease-soft);
}
.hero-cue::after{
  content:"";width:1px;height:38px;
  background:linear-gradient(var(--on-deep-soft),transparent);
}
body.motion-ok .hero-cue::after{animation:cuepulse 2.6s var(--ease-soft) -1s infinite}
@keyframes cuepulse{0%,100%{opacity:.4}50%{opacity:1}}

/* static hero (the five gates; identical queries live in home.js) */
.hero-static{display:none}
@media (max-width:720px),
       (orientation:portrait) and (max-width:1024px),
       (orientation:portrait) and (pointer:coarse),
       (orientation:landscape) and (pointer:coarse) and (max-height:560px),
       (prefers-reduced-motion:reduce){
  .hero{height:auto;min-height:100svh}
  .hero-stage{position:relative;height:auto;min-height:100svh;padding:7rem 0 4.5rem}
  .hero-scene,.hero-cue,.band{display:none}
  .hero-static{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-align:center;position:relative;padding:0 clamp(1.2rem,6vw,3rem);
  }
  .hero-static .static-logo{width:min(190px,48vw);margin-bottom:2.2rem}
  .hero-static h1{font-size:clamp(2.3rem,9vw,3.4rem);color:var(--on-deep);margin-bottom:.8rem}
  .hero-static h1 em{font-style:italic;color:var(--accent-bright)}
  .hero-static p{color:var(--on-deep-soft);max-width:46ch;font-size:1.08rem;margin:0 auto 1.8rem}
  .hero-static .settle-cta{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap}
}
@media (max-height:560px){.hero-cue{display:none}}

/* ---------- routes section ---------- */

.routes-grid{
  display:grid;grid-template-columns:repeat(12,1fr);gap:1.2rem;margin-top:2.4rem;
}
.route-card{grid-column:span 6;display:flex;flex-direction:column;min-height:220px}
.route-card.wide{grid-column:span 7}
.route-card.slim{grid-column:span 5}
.route-card .route-index{
  font-family:var(--font-mono);font-size:.72rem;color:var(--ink-soft);letter-spacing:.16em;
}
.route-card h3{margin-top:1rem;font-size:1.5rem}
.route-card .card-summary{flex:1}
.route-card.casc-card{border-left:3px solid var(--gold)}
.route-card.casc-card .card-link-cue{color:var(--gold-ink)}
.route-card.book-card{background:var(--deep);border-color:var(--deep-edge);color:var(--on-deep)}
.route-card.book-card h3{color:var(--on-deep)}
.route-card.book-card .card-summary{color:var(--on-deep-soft)}
.route-card.book-card .route-index{color:var(--on-deep-soft)}
.route-card.book-card .card-link-cue{color:var(--accent-bright)}
@media (max-width:860px){
  .route-card,.route-card.wide,.route-card.slim{grid-column:span 12;min-height:0}
}

/* ---------- hold-to-listen (the one interactive moment) ---------- */

.listen{background:linear-gradient(rgba(31,122,140,.05),transparent 70%)}
.listen-stage{max-width:900px;margin:2.6rem auto 0}
.listen-center{text-align:center}

.listen-voice{
  min-height:3.2em;margin:1.8rem auto .6rem;max-width:46ch;text-align:center;
  font-family:var(--font-display);font-style:italic;font-size:clamp(1.1rem,2vw,1.35rem);
  color:var(--ink-soft);
}
.listen-voice span{opacity:0;display:inline;transition:opacity .5s var(--ease-soft)}
.listen-voice span.heard{opacity:1}

.fourps{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:2.2rem}
.fourp{
  border:1px solid var(--panel-edge);border-radius:14px;padding:1.1rem 1.2rem;
  background:var(--panel);opacity:.45;transform:translateY(10px);
  transition:opacity .7s var(--ease-soft),transform .7s var(--ease-out),border-color .7s var(--ease-soft);
}
.fourp h4{font-family:var(--font-mono);font-size:.7rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:.7rem}
.fourp ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem;font-size:.92rem;color:var(--ink-soft)}
.fourp li{opacity:0;transform:translateY(6px);transition:opacity .6s var(--ease-soft),transform .6s var(--ease-out)}
.fourps.lit .fourp{opacity:1;transform:none;border-color:rgba(31,122,140,.4)}
.fourps.lit .fourp li{opacity:1;transform:none}
.fourps.lit .fourp li{transition-delay:calc(var(--i,0)*140ms)}
.fourps.lit.done .fourp li{transition-delay:0s}
@media (max-width:860px){.fourps{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.fourps{grid-template-columns:1fr}}

/* ---------- notes preview ---------- */

.note-preview-card{
  background:var(--panel);border:1px solid var(--panel-edge);border-radius:18px;
  box-shadow:var(--shadow-2);padding:1.9rem 2rem;position:relative;overflow:hidden;
}
.note-preview-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--accent),var(--accent-bright));
}
.note-preview-card .np-meta{display:flex;gap:.5rem;margin-bottom:1rem}
.note-preview-card h3{font-size:1.35rem}
.note-preview-card .blocks{font-size:.94rem}
.note-preview-card .blocks h3{font-size:1.02rem;margin-top:1.2em}
.note-preview-fade{
  position:absolute;left:0;right:0;bottom:0;height:110px;
  background:linear-gradient(rgba(255,253,249,0),var(--panel) 78%);
  display:flex;align-items:flex-end;justify-content:center;padding-bottom:1.2rem;
}

/* ---------- encounters band ---------- */

.encounters-band{overflow:hidden}
.encounters-band .grid-2{align-items:start}

/* ---------- casc strip ---------- */

.casc-strip{
  border-top:1px solid var(--panel-edge);border-bottom:1px solid var(--panel-edge);
  background:linear-gradient(90deg,var(--gold-muted),transparent 55%);
}
.casc-strip .section-tight{display:block}

/* ---------- booking close ---------- */

.book-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin:2.4rem 0}
.book-step{border-top:2px solid var(--accent);padding-top:1rem}
.book-step .step-n{font-family:var(--font-mono);font-size:.72rem;color:var(--accent-ink);letter-spacing:.16em}
.book-step h4{margin:.5rem 0 .3rem}
.book-step p{font-size:.95rem;color:var(--ink-soft);margin:0}
@media (max-width:720px){.book-steps{grid-template-columns:1fr}}
/* The Tutor introduction uses type and space beside a short exchange. */
.home-tutor-exchange{max-width:46rem;margin:2rem 0;padding-left:1.25rem;border-left:2px solid var(--accent)}
.home-tutor-exchange p{font-family:var(--font-display);font-size:1.25rem;line-height:1.55;margin:1.3rem 0}
.home-tutor-speaker{display:block;font-family:var(--font-body);font-size:.8rem;font-weight:600;color:var(--ink-soft);margin-bottom:.35rem}
.home-tutor-details{display:grid;grid-template-columns:1fr 1fr;gap:0 2.5rem;max-width:58rem;margin:1.5rem 0}
.home-tutor-details p{max-width:54ch}
.home-tutor-note{font-size:.9rem;color:var(--ink-soft);max-width:58ch}
#home-tutor-open{min-height:44px}
@media(max-width:720px){.home-tutor-details{grid-template-columns:1fr}.home-tutor-exchange{padding-left:1rem}}