/* ── cutaway clinic: the procedure, relayed ─────────────────────────────
     Scroll-scrubbed: the scene sticks while the caption advances, and each
     zone lights in turn. The whole scene is 8KB of inline SVG — no GLTF, no
     WASM, no build step, and every caption stays real text in the DOM. */
  /* 4 screens of scroll = one screen per step. The sticky child needs a tall
     parent to travel through, or it never unsticks and the stage never moves. */
  .cut{position:relative;min-height:260vh;min-height:260svh}
  /* padding-top clears the 70px fixed nav — without it the pinned headline
     sits underneath it. overflow stays visible so the scene's glow isn't clipped. */
  .cutstick{position:sticky;top:0;min-height:100svh;display:flex;align-items:center;
    padding:72px 0 16px}
  .cutgrid{display:grid;grid-template-columns:.82fr 1.18fr;gap:40px;align-items:center;width:100%}
  /* Below 960 the scroll-scrub is dropped entirely: the scene shows once and
     every step reads as a plain list. Without resetting .cut's min-height the
     collapsed sticky would leave three empty screens of scroll behind it. */
  @media(max-width:960px){.cutgrid{grid-template-columns:1fr;gap:22px}
    .cut{min-height:auto}
    .cutstick{min-height:auto;position:relative;padding:64px 0}}
  /* Each sentinel owns one quarter of the section's scroll. */
  .cutsent{position:absolute;left:0;width:1px;height:25%;pointer-events:none}
  .cutsent[data-s="0"]{top:0}
  .cutsent[data-s="1"]{top:25%}
  .cutsent[data-s="2"]{top:50%}
  .cutsent[data-s="3"]{top:75%}
  @media(max-width:960px){.cutsent{display:none}}
  .cutart{position:relative}
  .clinic{width:100%;height:auto;display:block;overflow:visible}
  .clinic .z{transition:opacity .7s var(--ease),filter .7s var(--ease)}
  /* dim every zone that isn't the current step — the lantern only lights the
     room being talked about. The shell never dims; it's the building. */
  .cut[data-stage="0"] #z-reception,.cut[data-stage="0"] #z-office,.cut[data-stage="0"] #z-done,
  .cut[data-stage="1"] #z-entry,.cut[data-stage="1"] #z-office,.cut[data-stage="1"] #z-done,
  .cut[data-stage="2"] #z-entry,.cut[data-stage="2"] #z-reception,.cut[data-stage="2"] #z-done,
  .cut[data-stage="3"] #z-entry,.cut[data-stage="3"] #z-reception{opacity:.3;filter:saturate(.35)}
  .rl-track{stroke:rgba(157,180,255,.18);stroke-width:2;fill:none;stroke-linecap:round}
  .rl-live{stroke:url(#gGrad);stroke-width:2.6;fill:none;stroke-linecap:round;
    stroke-dasharray:0 100;stroke-dashoffset:0;transition:stroke-dasharray 1.1s var(--ease)}
  .cut[data-stage="0"] .rl-live{stroke-dasharray:14 100}
  .cut[data-stage="1"] .rl-live{stroke-dasharray:46 100}
  .cut[data-stage="2"] .rl-live{stroke-dasharray:76 100}
  .cut[data-stage="3"] .rl-live{stroke-dasharray:100 100}
  .rl-end{opacity:0;transform-box:fill-box;transform-origin:center;transition:.6s var(--ease)}
  .cut[data-stage="3"] .rl-end{opacity:1}
  .rl-ring{opacity:.45}
  .cut[data-stage="3"] .rl-ring{animation:cring 2.4s var(--ease) infinite}
  @keyframes cring{0%{transform:scale(1);opacity:.5}70%,100%{transform:scale(2);opacity:0}}

  .cutsteps{display:flex;flex-direction:column;gap:2px}
  .cutstep{padding:11px 0 11px 20px;border-left:2px solid var(--cardline);position:relative;
    opacity:.32;transition:opacity .55s var(--ease)}
  .cutstep.on{opacity:1}
  .cutstep:before{content:"";position:absolute;left:-2px;top:0;bottom:0;width:2px;
    background:var(--grad);transform:scaleY(0);transform-origin:top;transition:transform .55s var(--ease)}
  .cutstep.on:before{transform:scaleY(1)}
  .cutstep .k{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent2)}
  .cutstep h3{font-size:1.22rem;font-weight:500;margin:4px 0 3px}
  .cutstep p{font-size:14px;color:var(--mut);max-width:44ch;line-height:1.5}
  @media(max-width:960px){.cutstep{opacity:1}.cutstep:before{transform:scaleY(1)}}
  @media(prefers-reduced-motion:reduce){
    .clinic .z{opacity:1!important;filter:none!important}
    .cutstep{opacity:1}.cutstep:before{transform:scaleY(1)}
    .rl-live{stroke-dasharray:100 100!important;transition:none}
    .rl-end{opacity:1}.rl-ring{animation:none}}

  .mq{border-top:1px solid var(--cardline);border-bottom:1px solid var(--cardline);overflow:hidden;padding:16px 0;background:rgba(255,255,255,.012)}
  .mq .track{display:flex;width:max-content;animation:scroll 28s linear infinite;color:#5d6781;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase}
  .mq .track span{display:inline-flex;gap:42px;padding-right:42px}
  @keyframes scroll{to{transform:translateX(-50%)}}