/* ===========================================================================
   psychotherapytoronto.us.com
   Grammar: filmic one-shot. Ten acts, no seams, no chapter marks, one
   continuous petrol-black world. The chrome is a trace rail across the foot of
   the viewport; the signature move is the consultation that plays in act 5.
   Sibling of cbttherapy.us.com by type and accent only: that page is chaptered
   editorial with a margin folio and hard cuts, this one has neither.
   The engine (engine/scrollcraft.css, engine/scrollcraft.js) is untouched.
   ========================================================================= */

/* ------------------------------------------------------------- faces ---- */
@font-face {
  font-family: "Fraunces";
  src: url("assets/fonts/fraunces-variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("assets/fonts/inter-variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
}

/* ------------------------------------------------------------ tokens ---- */
:root {
  /* six roles, one hue. Petrol-black ground, bone ink, one warm coral. */
  --sc-canvas:     #07171b;
  --sc-surface:    #0e262c;
  --sc-ink:        #efe9df;
  --sc-ink-soft:   #a8bcbd;
  --sc-accent:     #e0725e;
  --sc-accent-ink: #07171b;

  --sc-hairline:        rgba(239, 233, 223, 0.15);
  --sc-hairline-strong: rgba(239, 233, 223, 0.32);

  --sc-font-display: "Fraunces", Georgia, serif;
  --sc-font-text:    "Inter", system-ui, -apple-system, sans-serif;

  --focus:     #ffbf47;
  --focus-ink: #07171b;

  --t-title: clamp(1.95rem, 4.3vw, 3.5rem);
  --t-h2:    clamp(1.62rem, 3.1vw, 2.65rem);
  --t-h3:    clamp(1.04rem, 0.96rem + 0.48vw, 1.28rem);
  --t-body:  clamp(1rem, 0.965rem + 0.18vw, 1.09rem);
  --t-lede:  clamp(1.1rem, 1rem + 0.55vw, 1.38rem);
  --t-small: clamp(0.82rem, 0.79rem + 0.16vw, 0.9rem);
  --t-fine:  clamp(0.74rem, 0.72rem + 0.1vw, 0.8rem);

  --gutter: clamp(1rem, 4vw, 3.5rem);
  --measure: 62ch;
  --rail-h: 3.1rem;

  --ease: cubic-bezier(0.23, 1, 0.32, 1);
}

/* ------------------------------------------------------------- shell ---- */
html { background: #07171b; }
body {
  background: var(--sc-canvas);
  color: var(--sc-ink);
  font-family: var(--sc-font-text);
  font-size: var(--t-body);
  font-variation-settings: "wght" 420;
  line-height: 1.68;
  letter-spacing: 0.004em;
  overflow-x: clip;
  padding-bottom: 0;
}
::selection { background: var(--sc-accent); color: var(--sc-accent-ink); }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--focus-ink), 0 0 0 6px rgba(7, 23, 27, 0.5);
  border-radius: 2px;
}

.skip {
  position: absolute; left: var(--gutter); top: 0.5rem;
  z-index: 200;
  transform: translateY(-180%);
  background: var(--sc-ink); color: var(--sc-canvas);
  padding: 0.55rem 0.9rem;
  font-size: var(--t-small);
  text-decoration: none;
  transition: transform 180ms var(--ease);
}
.skip:focus-visible { transform: none; }

.wrap {
  width: 100%;
  max-width: 62rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--wide { max-width: 78rem; }

/* --------------------------------------------------------------- type --- */
.display {
  font-family: var(--sc-font-display);
  font-variation-settings: "SOFT" 0, "WONK" 1, "opsz" 72, "wght" 400;
  line-height: 1.05;
  letter-spacing: -0.018em;
  text-wrap: balance;
  margin: 0;
}
.h2 { font-size: var(--t-h2); }
.h3 {
  font-family: var(--sc-font-display);
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 24, "wght" 500;
  font-size: var(--t-h3);
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0;
}
.h-gap { margin-top: clamp(2.8rem, 6vw, 5rem); }

.body {
  max-width: var(--measure);
  color: var(--sc-ink-soft);
  text-wrap: pretty;
  margin: 0;
}
.body + .body { margin-top: 0.95em; }
.body strong, .body b { color: var(--sc-ink); font-variation-settings: "wght" 600; }
.lede {
  max-width: 54ch;
  font-size: var(--t-lede);
  line-height: 1.5;
  color: var(--sc-ink);
  font-variation-settings: "wght" 380;
  margin: 0;
}
.byline { max-width: 60ch; font-size: var(--t-small); color: var(--sc-ink-soft); margin: 0 0 1.4rem; }
.fineprint { font-size: var(--t-fine); color: var(--sc-ink-soft); margin: 0; letter-spacing: 0.01em; }

.link {
  color: var(--sc-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: var(--sc-accent);
  overflow-wrap: anywhere;
  transition: color 150ms var(--ease);
}
.link--plain { text-decoration-color: var(--sc-hairline-strong); }
@media (hover: hover) and (pointer: fine) {
  .link:hover { color: var(--sc-accent); }
}

.btn {
  display: inline-block;
  background: var(--sc-accent);
  color: var(--sc-accent-ink);
  font-size: var(--t-small);
  font-variation-settings: "wght" 580;
  letter-spacing: 0.012em;
  text-decoration: none;
  padding: 0.72rem 1.25rem;
  border-radius: 2px;
  box-shadow: var(--sc-e1);
  transition: background 150ms var(--ease), transform 120ms var(--ease);
  white-space: nowrap;
}
.btn--lg { padding: 0.95rem 1.7rem; font-size: var(--t-body); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: #ef8570; }
}
.btn:active { transform: translateY(1px); }

/* ================================================== the bottom trace rail ==
   No bar. A thin line across the foot of the viewport with one marker per
   act. Markers stamp as the reader passes them, and they jump.           */
.trace {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 80;
  height: var(--rail-h);
  display: flex;
  align-items: center;
  gap: var(--gutter);
  padding-inline: var(--gutter);
  background: linear-gradient(to top, rgba(7, 23, 27, 0.96) 42%, rgba(7, 23, 27, 0.72) 76%, transparent);
  backdrop-filter: blur(3px);
}
.trace__line, .trace__played {
  position: absolute;
  left: 0; right: 0;
  top: 0.9rem;
  height: 1px;
}
.trace__line { background: var(--sc-hairline); }
.trace__played {
  right: auto; width: 0;
  background: var(--sc-accent);
  transition: width 120ms linear;
}
.trace__marks {
  list-style: none;
  margin: 0; padding: 0;
  flex: 1 1 auto;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
}
.trace__marks a {
  display: grid;
  justify-items: start;
  gap: 0.34rem;
  padding-top: 0.28rem;
  text-decoration: none;
  color: var(--sc-ink-soft);
  font-size: clamp(0.66rem, 0.52rem + 0.42vw, 0.78rem);
  letter-spacing: 0.012em;
  line-height: 1.1;
  padding-right: 0.6rem;
  transition: color 160ms var(--ease);
}
.trace__dot {
  width: 7px; height: 7px;
  margin-top: 0.28rem;
  border-radius: 50%;
  border: 1px solid var(--sc-hairline-strong);
  background: var(--sc-canvas);
  transition: background 200ms var(--ease), border-color 200ms var(--ease), transform 200ms var(--ease);
}
.trace__label { white-space: nowrap; }
/* stamped: the reader has passed it */
.trace__marks a[data-on] { color: var(--sc-ink); }
.trace__marks a[data-on] .trace__dot { background: var(--sc-accent); border-color: var(--sc-accent); }
.trace__marks a[aria-current="true"] { color: var(--sc-ink); }
.trace__marks a[aria-current="true"] .trace__dot { transform: scale(1.5); }
@media (hover: hover) and (pointer: fine) {
  .trace__marks a:hover { color: var(--sc-ink); }
  .trace__marks a:hover .trace__dot { border-color: var(--sc-accent); }
}
.trace__book {
  flex: 0 0 auto;
  font-size: var(--t-fine);
  color: var(--sc-ink);
  text-decoration: underline;
  text-decoration-color: var(--sc-accent);
  text-underline-offset: 0.24em;
  white-space: nowrap;
  padding-top: 0.5rem;
}

/* ===================================================== ACT 1 the hero =====
   Three planes, honest CSS, no alpha cutouts. The far plate is the bed. The
   near plate is the same hour with a tree and a shelter in its left third,
   masked to transparent by 44% of its own width so only the foreground
   region paints. The headline rides at 1x in normal document flow and goes
   behind the near plane on its way off the top.
   Rates: far -1.15 (115px of travel), near -1.45 (145px), a 26% difference
   between adjacent planes; copy 1x.                                      */
.hero { position: relative; }
.hero__stage { position: relative; height: 152svh; isolation: isolate; }

.hero__plane { position: absolute; inset: 0; pointer-events: none; }
.hero__plane--far   { z-index: 0; }
.hero__plane--near  { z-index: 2; }
.hero__plane--floor { z-index: 3; }

.hero__frame {
  position: sticky; top: 0;
  height: 100svh;
  overflow: clip;
}
.hero__frame picture { display: block; }

.hero__img { max-width: none; }
.hero__img--far {
  position: absolute;
  left: -3%; top: -9%;
  width: 106%; height: 118%;
  object-fit: cover;
  object-position: 54% 46%;
  /* Distance is softness and lower contrast, not only a slower rate. */
  filter: blur(1.2px) saturate(0.92) brightness(0.8);
}
.hero__img--near {
  position: absolute;
  left: -6%; top: -8%;
  width: 112%; height: auto;
  filter: saturate(1.04) contrast(1.02) brightness(0.86);
  /* horizontal: solid across the foreground, gone by 44% of the plate.
     vertical: released before the copy corner, so the lead corner is clean
     at rest and the headline meets the tree only once it has travelled. */
  -webkit-mask-image:
    linear-gradient(to right, #000 0 28%, rgba(0,0,0,0.6) 37%, transparent 44%),
    linear-gradient(to bottom, #000 0 40%, rgba(0,0,0,0.55) 50%, transparent 58%);
  mask-image:
    linear-gradient(to right, #000 0 28%, rgba(0,0,0,0.6) 37%, transparent 44%),
    linear-gradient(to bottom, #000 0 40%, rgba(0,0,0,0.55) 50%, transparent 58%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
/* Planes get clipped at the frame's floor. A gradient to the page ground over
   the last fifth of the frame hides that edge at every scroll position. */
.hero__floor {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    transparent 80%,
    color-mix(in oklab, var(--sc-canvas) 50%, transparent) 92%,
    var(--sc-canvas) 100%);
}

.hero__type {
  position: relative;
  z-index: 1;
  height: 100svh;
  display: flex;
  align-items: flex-end;
}
/* A corner of density, sized to the copy block, not a band across the frame.
   Sibling of the copy, never a child, so the verification pass can see it. */
.hero__scrim {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(112% 62% at 6% 88%,
      color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%,
      color-mix(in oklab, var(--sc-canvas) 74%, transparent) 46%,
      transparent 78%),
    linear-gradient(to top,
      color-mix(in oklab, var(--sc-canvas) 62%, transparent) 0%,
      color-mix(in oklab, var(--sc-canvas) 34%, transparent) 26%,
      transparent 52%);
}
.hero__copy {
  position: relative;
  width: 100%;
  max-width: 62rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-bottom: clamp(6.5rem, 18vh, 10rem);
}
.hero__h1 {
  font-variation-settings: "SOFT" 0, "WONK" 1, "opsz" 80, "wght" 430;
  font-size: var(--t-title);
  max-width: 19ch;
  line-height: 1.02;
  letter-spacing: -0.024em;
  margin: 0;
}
.hero__under { margin-top: clamp(1.1rem, 2.4vw, 1.8rem); }
.hero__creds {
  margin: 0;
  font-size: var(--t-small);
  color: var(--sc-ink);
  max-width: 44ch;
  letter-spacing: 0.01em;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem 1.6rem;
  margin: clamp(1.1rem, 2.2vw, 1.6rem) 0 0;
}

.hero__foot { padding-block: clamp(2.2rem, 5vw, 4rem) clamp(2.6rem, 6vw, 5rem); }
.hero__caption { margin-bottom: clamp(1.6rem, 3vw, 2.4rem); max-width: 60ch; }

/* ==================================================== acts and stages =====*/
.act { position: relative; }
.stage { display: flex; align-items: center; }
.act--after-pin { padding-block-start: clamp(2rem, 4vw, 3.4rem); }

/* ACT 2: one screen, held, nothing arriving after it. */
.hold { display: grid; gap: clamp(1.1rem, 2.2vw, 1.7rem); }
.hold .body { max-width: 58ch; }

/* ACT 3: the provider map. Roles carry the table semantics, because the rows
   have to be cue-able elements and because the same markup relays out as five
   labelled entries on a phone. */
.map { display: grid; gap: clamp(1.2rem, 2.6vw, 2rem); }
.map__head { display: grid; gap: 0.8rem; }
.map__head .body { max-width: 68ch; }
.ptable { display: grid; gap: 0; }
.ptable__row {
  display: grid;
  grid-template-columns: 1.05fr 1.15fr 1.35fr 1.7fr 1.25fr;
  gap: clamp(0.8rem, 1.6vw, 1.6rem);
  border-top: 1px solid var(--sc-hairline);
  padding-block: clamp(0.6rem, 1.1vw, 0.95rem);
  font-size: var(--t-fine);
  line-height: 1.5;
  color: var(--sc-ink-soft);
}
.ptable__row--head {
  color: var(--sc-ink);
  font-size: var(--t-fine);
  font-variation-settings: "wght" 620;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ptable__row:last-child { border-bottom: 1px solid var(--sc-hairline); }
.ptable__row > span:first-child { color: var(--sc-ink); font-variation-settings: "wght" 560; }
.ptable__k { display: none; }
.map__note { max-width: 78ch; font-size: var(--t-small); }

/* ACT 4: the ledger. Real attributed figures, laid out plainly, no counters. */
.ledger { margin: clamp(1.8rem, 3.4vw, 2.8rem) 0 0; display: grid; }
.ledger__row {
  display: grid;
  grid-template-columns: minmax(10rem, 15rem) 1fr;
  gap: 0.4rem clamp(1.5rem, 3vw, 3rem);
  padding-block: clamp(1.1rem, 2vw, 1.5rem);
  border-top: 1px solid var(--sc-hairline);
}
.ledger__row:last-child { border-bottom: 1px solid var(--sc-hairline); }
.ledger dt {
  font-family: var(--sc-font-display);
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 24, "wght" 500;
  font-size: var(--t-h3);
  line-height: 1.3;
  color: var(--sc-ink);
}
.ledger dd { margin: 0; }
.ledger dd.body { max-width: 66ch; }

.steps { list-style: none; margin: clamp(1.4rem, 2.6vw, 2rem) 0 0; padding: 0; display: grid; gap: clamp(0.9rem, 1.8vw, 1.4rem); }
.steps li { display: grid; grid-template-columns: 2rem 1fr; gap: 0 1rem; align-items: baseline; }
.steps__n {
  font-family: var(--sc-font-display);
  font-variation-settings: "opsz" 24, "wght" 500;
  font-size: var(--t-h3);
  color: var(--sc-accent);
  font-variant-numeric: tabular-nums;
}
.steps p { max-width: 62ch; }

/* ================================== ACT 5: the consultation that plays =====
   The peak. Seven questions arrive one per scroll stop as lines of a call,
   the good-answer line slides in beneath each one, the corner timer counts
   the real fifteen minutes down, and at the end only the closing line is on
   screen. page.js reads this act's --sc-p and sets the states below.     */
.act--call .stage { align-items: stretch; }
.call__frame {
  position: relative;
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding-block: clamp(3.4rem, 8vh, 6rem) calc(var(--rail-h) + clamp(1rem, 3vh, 2rem));
}
.call__head { display: grid; gap: 0.7rem; max-width: 46ch; }
.call__head .body { max-width: 52ch; }
.call__timer {
  position: absolute;
  top: clamp(3.4rem, 8vh, 6rem);
  right: var(--gutter);
  margin: 0;
  font-family: var(--sc-font-display);
  font-variation-settings: "opsz" 48, "wght" 400;
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  line-height: 1;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--sc-accent);
}
.call__script {
  position: relative;
  list-style: none;
  margin: 0; padding: 0;
  min-height: 0;
}
.call__line {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  gap: clamp(0.9rem, 2vw, 1.5rem);
  max-width: 44ch;
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 420ms var(--ease), transform 480ms var(--ease);
}
.call__line[data-state="live"] { opacity: 1; transform: none; }
.call__line[data-state="past"] { opacity: 0; transform: translateY(-26px); }
.call__q {
  margin: 0;
  font-family: var(--sc-font-display);
  font-variation-settings: "SOFT" 0, "WONK" 1, "opsz" 48, "wght" 420;
  font-size: clamp(1.45rem, 2.9vw, 2.35rem);
  line-height: 1.16;
  letter-spacing: -0.016em;
  color: var(--sc-ink);
  text-wrap: balance;
}
.call__a {
  margin: 0;
  max-width: 38ch;
  padding-left: clamp(0.9rem, 2vw, 1.4rem);
  border-left: 1px solid var(--sc-accent);
  color: var(--sc-ink-soft);
  font-size: var(--t-body);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 380ms var(--ease) 60ms, transform 420ms var(--ease) 60ms;
}
.call__line[data-answer="1"] .call__a { opacity: 1; transform: none; }
.call__verdict {
  margin: 0;
  max-width: 34ch;
  font-family: var(--sc-font-display);
  font-variation-settings: "SOFT" 0, "WONK" 1, "opsz" 60, "wght" 400;
  font-size: clamp(1.5rem, 3.1vw, 2.5rem);
  line-height: 1.14;
  letter-spacing: -0.018em;
  color: var(--sc-ink);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 520ms var(--ease), transform 560ms var(--ease);
}
.call__verdict[data-state="live"] { opacity: 1; transform: none; }
/* the closing beat: head and timer step back so the line is alone */
.call[data-phase="verdict"] .call__head,
.call[data-phase="verdict"] .call__timer { opacity: 0.22; transition: opacity 500ms var(--ease); }

/* ================================================= ACT 6: the split wipe ==*/
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: clamp(2.4rem, 5vw, 4rem);
}
.split__half { margin: 0; position: relative; }
.split__half img { width: 100%; height: clamp(16rem, 38vw, 30rem); object-fit: cover; }
.split__half figcaption {
  padding: 0.7rem var(--gutter) 0;
  font-size: var(--t-fine);
  color: var(--sc-ink-soft);
}
.split__half:first-child figcaption { padding-left: var(--gutter); }
.choose { margin-top: clamp(2.2rem, 4.5vw, 3.4rem); display: grid; }
.choose__block { padding-block: clamp(1.1rem, 2vw, 1.5rem); border-top: 1px solid var(--sc-hairline); }
.choose__block:last-child { border-bottom: 1px solid var(--sc-hairline); }
.choose__block .body { max-width: 72ch; }

/* ================================================== ACT 7 and 8: the rails */
.rail {
  list-style: none;
  margin: 0;
  padding-inline: var(--gutter);
  padding-block: 0 var(--rail-h);
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 2.6vw, 2.4rem);
  height: 100%;
  will-change: transform;
}
.rail > li { flex: 0 0 auto; }
.rail__lead { width: min(26rem, 74vw); }
.rail__lead .body { margin-top: 0.9rem; }
.rail__note { width: min(24rem, 74vw); }
.rail__note .body { border-left: 1px solid var(--sc-accent); padding-left: 1.1rem; }

.concern {
  width: min(17rem, 62vw);
  border-top: 1px solid var(--sc-hairline-strong);
  padding-top: 0.9rem;
}
.concern__k {
  display: block;
  font-family: var(--sc-font-display);
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 30, "wght" 500;
  font-size: clamp(1.1rem, 1.7vw, 1.42rem);
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--sc-ink);
}
.concern__t { display: block; margin-top: 0.5rem; font-size: var(--t-small); color: var(--sc-ink-soft); }

.rail--people { gap: clamp(1.4rem, 3vw, 2.8rem); align-items: stretch; }
.person { width: min(20rem, 76vw); display: grid; align-content: start; padding-block: clamp(1rem, 3vh, 2.4rem); }
.person__frame {
  width: 100%;
  margin-bottom: 1rem;
  overflow: hidden;
  /* an arch, cut once and held across the rail */
  border-radius: 50% 50% 3px 3px / 32% 32% 3px 3px;
  background: var(--sc-surface);
}
.person__frame img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 24%; }
.person__name {
  font-family: var(--sc-font-display);
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 28, "wght" 520;
  font-size: var(--t-h3);
  line-height: 1.26;
  letter-spacing: -0.012em;
  margin: 0 0 0.55rem;
  color: var(--sc-ink);
}
.person__name span { display: block; font-variation-settings: "opsz" 20, "wght" 380; font-size: var(--t-small); color: var(--sc-ink-soft); margin-top: 0.2rem; }
.person .body { font-size: var(--t-small); max-width: none; }
.person__url { margin: 0.7rem 0 0; font-size: var(--t-fine); }

/* the staggered settle: items arrive in sequence rather than sliding as a
   sheet. Item one is exempt, because a pan act needs its opening content
   already present. Floored at 0.55 so a waiting item reads as arriving. */
@media (prefers-reduced-motion: no-preference) {
  .rail > li + li {
    opacity: calc(0.55 + 0.45 * clamp(0, (var(--sc-p, 0) - var(--i, 0) * 0.055) * 9, 1));
    transform: translateY(calc(16px * (1 - clamp(0, (var(--sc-p, 0) - var(--i, 0) * 0.055) * 9, 1))));
  }
}

/* ================================================== ACT 9: the checklist ==*/
.check { list-style: none; margin: clamp(1.4rem, 2.6vw, 2rem) 0 clamp(1.8rem, 3vw, 2.4rem); padding: 0; display: grid; gap: 0.7rem; max-width: 56ch; }
.check li { position: relative; padding-left: 1.7rem; color: var(--sc-ink-soft); }
.check li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.72em;
  width: 0.7rem; height: 1px;
  background: var(--sc-accent);
}

/* ========================================================== the FAQ set ===*/
.faqs { margin-top: clamp(1.8rem, 3.4vw, 2.6rem); display: grid; }
.faqs details { border-top: 1px solid var(--sc-hairline); }
.faqs details:last-child { border-bottom: 1px solid var(--sc-hairline); }
.faqs summary {
  cursor: pointer;
  list-style: none;
  padding-block: clamp(0.85rem, 1.6vw, 1.15rem);
  padding-right: 2.2rem;
  position: relative;
}
.faqs summary::-webkit-details-marker { display: none; }
.faqs summary h3 {
  display: inline;
  font-family: var(--sc-font-display);
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 24, "wght" 480;
  font-size: var(--t-h3);
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--sc-ink);
}
.faqs summary::after {
  content: "";
  position: absolute;
  right: 0.4rem; top: 1.45em;
  width: 0.72rem; height: 1px;
  background: var(--sc-accent);
  box-shadow: 0 0 0 0 transparent;
}
.faqs summary::before {
  content: "";
  position: absolute;
  right: 0.74rem; top: 1.1em;
  width: 1px; height: 0.72rem;
  background: var(--sc-accent);
  transition: opacity 160ms var(--ease);
}
.faqs details[open] summary::before { opacity: 0; }
.faqs details > .body { padding-bottom: clamp(1rem, 2vw, 1.4rem); max-width: 70ch; }
@media (hover: hover) and (pointer: fine) {
  .faqs summary:hover h3 { color: var(--sc-accent); }
}

/* ======================================================= ACT 10: resolve ==*/
.close { position: relative; overflow: clip; }
.close__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(0.9rem, 2vw, 1.4rem);
  padding-block: clamp(2.4rem, 6vh, 4.5rem) calc(var(--rail-h) + clamp(1rem, 3vh, 2rem));
  align-content: center;
  height: 100%;
}
.close__lede { max-width: 52ch; color: var(--sc-ink); font-size: var(--t-lede); line-height: 1.5; }
.close [data-sc-magnet] { justify-self: start; }
/* the spotlight the pointer carries across the last frame */
.close[data-sc-spotlight]::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(38rem 30rem at calc(var(--sc-mx, 0.5) * 100%) calc(var(--sc-my, 0.5) * 100%),
    rgba(224, 114, 94, 0.14) 0%, rgba(224, 114, 94, 0.05) 34%, transparent 66%);
}

.colophon {
  margin-top: clamp(1.8rem, 4vh, 3rem);
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(1.4rem, 3vw, 3rem);
  padding-top: clamp(1.4rem, 3vh, 2.2rem);
  border-top: 1px solid var(--sc-hairline);
}
.mark { width: 9.5rem; height: auto; margin-bottom: 0.9rem; }
.address { margin: 0; display: grid; gap: 0.22rem; font-size: var(--t-fine); color: var(--sc-ink-soft); }
.crisis {
  margin: 0;
  font-size: var(--t-small);
  color: var(--sc-ink);
  border-left: 1px solid var(--sc-accent);
  padding-left: 0.9rem;
}
.colophon .fineprint { margin-top: 1rem; max-width: 46ch; }
.colophon__legal {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.3rem;
  font-size: var(--t-fine);
  padding-top: clamp(0.9rem, 2vh, 1.4rem);
  border-top: 1px solid var(--sc-hairline);
}
.colophon__legal a { color: var(--sc-ink-soft); text-decoration: underline; text-decoration-color: var(--sc-hairline-strong); text-underline-offset: 0.2em; }
@media (hover: hover) and (pointer: fine) {
  .colophon__legal a:hover { color: var(--sc-ink); text-decoration-color: var(--sc-accent); }
}

/* ======================================================= wide screens =====*/
@media (min-width: 1500px) {
  .hero__copy { max-width: 74rem; }
  .hero__h1 { max-width: 17ch; }
}

/* ======================================================= 1024 and under ===*/
@media (max-width: 1024px) {
  .ptable__row { grid-template-columns: 1fr 1fr 1.2fr 1.5fr 1.1fr; }
  .split__half img { height: clamp(13rem, 34vw, 22rem); }
}

/* ========================================================= 760 and under ==
   The pinned frames that hold a screenful of prose or a five column table
   cannot hold them at this width, so those two acts relay out as documents
   and keep their arrival order. The acts built for a held frame keep it.  */
@media (max-width: 760px) {
  #act-2, #act-3 { height: auto !important; }
  #act-2 .stage, #act-3 .stage {
    position: sticky; top: 0;
    height: auto;
    overflow: visible;
    align-items: flex-start;
    padding-block: clamp(3.5rem, 11vw, 6rem) clamp(3.5rem, 11vw, 6rem);
  }

  .ptable { gap: 0; background: none; border: 0; }
  .ptable__row { display: none; }
  .ptable__row:not(.ptable__row--head) {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
    border-top: 1px solid var(--sc-hairline);
    padding-block: 1.1rem;
    font-size: var(--t-small);
  }
  .ptable__row:last-child { border-bottom: 1px solid var(--sc-hairline); }
  .ptable__k {
    display: block;
    font-size: var(--t-fine);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sc-ink-soft);
    font-variation-settings: "wght" 600;
    margin-bottom: 0.15rem;
  }
  .ptable__row > span:first-child { font-size: var(--t-h3); font-family: var(--sc-font-display); font-variation-settings: "opsz" 24, "wght" 520; line-height: 1.25; }
  .ptable__row > span:first-child .ptable__k { font-family: var(--sc-font-text); }

  .split { grid-template-columns: 1fr; }
  .ledger__row { grid-template-columns: 1fr; }
  .colophon { grid-template-columns: 1fr; }

  /* the therapists become a vertical list: a phone reads people down, not
     across, and a 76vw card on a rail is a drag with no destination */
  #act-8 { height: auto !important; }
  #act-8 .stage { position: sticky; top: 0; height: auto; overflow: visible; padding-block: clamp(3.5rem, 11vw, 6rem); }
  .rail--people {
    flex-direction: column;
    align-items: stretch;
    transform: none !important;
    height: auto;
    padding-block: 0;
    gap: clamp(2rem, 7vw, 3rem);
  }
  .rail--people > li { width: 100%; }
  .person { max-width: 34rem; }
  .person__frame { max-width: 15rem; }
}

/* ========================================================= 700 and under ==
   The hero is art-directed, not shrunk: the near plane comes out, the plate
   is cropped to a portrait-friendly band, and the type sits above it rather
   than inside it, so nothing overflows and the headline is never covered. */
@media (max-width: 700px) {
  .hero__stage { height: auto; display: flex; flex-direction: column; }
  .hero__plane { position: static; }
  .hero__plane--near, .hero__plane--floor { display: none; }
  .hero__frame { position: static; height: auto; }
  .hero__plane--far { order: 2; overflow: clip; height: 46svh; }
  .hero__img--far {
    position: static;
    left: auto; top: auto;
    width: 100%; height: 58svh;
    margin-top: -6svh;
    object-position: 62% 52%;
    filter: saturate(0.96) brightness(0.88);
  }
  .hero__type { order: 1; height: auto; padding-block: clamp(2.6rem, 9vw, 4rem) clamp(1.8rem, 6vw, 3rem); }
  .hero__scrim { display: none; }
  .hero__copy { padding-bottom: 0; }
  .hero__h1 { font-size: clamp(1.85rem, 8.4vw, 2.5rem); max-width: 16ch; }
  .hero__foot { padding-top: clamp(1.8rem, 6vw, 2.6rem); }

  .trace { --rail-h: 2.7rem; }
  .trace__label { display: none; }
  .trace__marks a { justify-items: center; padding-top: 0.1rem; }
  .trace__marks a::after { content: ""; position: absolute; }
  .trace__marks li { position: relative; }
  .trace__marks a { min-height: 2.2rem; align-content: start; }
  .trace__book { font-size: var(--t-fine); }

  .concern { width: min(15rem, 68vw); }
  .rail__lead, .rail__note { width: min(19rem, 76vw); }
  .steps li { grid-template-columns: 1.4rem 1fr; gap: 0 0.7rem; }
  .call__timer { font-size: 1.35rem; top: clamp(2.4rem, 6vh, 3.4rem); }
  .call__frame { padding-block: clamp(2.4rem, 6vh, 3.4rem) calc(var(--rail-h) + 1rem); }
  .call__q { font-size: clamp(1.25rem, 5.6vw, 1.7rem); }
  .call__line { max-width: none; }
}

@media (max-width: 400px) {
  :root { --gutter: 1rem; }
}

/* ===================================================== reduced motion =====
   Fewer and gentler, not zero. The hero keeps its layered composition and
   loses its travel; the consultation is printed in full with the timer
   already at zero, because a script nobody can advance has to be readable
   as a script.                                                           */
@media (prefers-reduced-motion: reduce) {
  .hero__stage { height: 100svh; }
  .trace__played { transition: none; }

  #act-5 { height: auto !important; }
  .act--call .stage { position: sticky; top: 0; height: auto; overflow: visible; align-items: flex-start; }
  .call__frame { display: grid; grid-template-rows: none; height: auto; padding-block: clamp(3.5rem, 10vw, 6rem); }
  .call__timer { position: static; margin: 1.6rem 0 0; }
  .call__script { display: grid; gap: clamp(1.6rem, 4vw, 2.6rem); margin-top: clamp(1.8rem, 4vw, 2.8rem); }
  .call__line {
    position: static;
    inset: auto;
    opacity: 1;
    transform: none;
    transition: none;
    max-width: 52ch;
    gap: 0.7rem;
  }
  .call__a { opacity: 1; transform: none; transition: none; }
  .call__q { font-size: clamp(1.2rem, 2.2vw, 1.55rem); }
  .call__verdict { opacity: 1; transform: none; transition: none; margin-top: clamp(1.8rem, 4vw, 2.8rem); }
  .call[data-phase] .call__head, .call[data-phase] .call__timer { opacity: 1; }

  .rail { flex-wrap: nowrap; }
  .close[data-sc-spotlight]::after { display: none; }
}