/* Types of Therapy — pinned editorial stage (desktop and landscape tablets).
   Enabled only by homepage-therapy-pin.js, which sets [data-sv-pin=on] on the
   section when the viewport is landscape, ≥861px wide, ≥620px tall and motion
   is allowed.
   Without it (phones, short screens, reduced motion, no JS) the stacked
   two-section sequence from homepage-therapy-sequence.css stays in place.

   Composition: one large image stage holds still on the left while the two
   service texts scroll past on the right. The Couples image wipes up over the
   Individual image as its text arrives. Scrolling itself is never captured:
   the stage is CSS sticky and the script only writes a progress variable.

   Contract (written by the script):
   --pin-p  0→1  image swap progress (eased, held at both ends)
   --pin-q  0→1  progress through the pinned run (vertical index line)
   [data-sv-pin-active=1|2]  which service is in front */
.elementor-86 .sv-home.sv-home .sv-therapy.sv-therapy[data-sv-pin=on]{
  --pin-h:min(calc(100svh - 128px),54vw,820px);
  --pin-top:max(104px,calc((100svh - var(--pin-h)) / 2 + 40px));
  --pin-media:1/8;--pin-line:8/9;--pin-copy:9/13}
@media(max-width:1279px){
  .elementor-86 .sv-home.sv-home .sv-therapy.sv-therapy[data-sv-pin=on]{--pin-media:1/7;--pin-line:7/8;--pin-copy:8/13}
}

/* The two articles stay in the document for meaning and order; their children
   join one shared grid so both images can share the stage. */
.elementor-86 .sv-home.sv-home .sv-therapy.sv-therapy[data-sv-pin=on] .sv-service-panels{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--th-col-gap);
  grid-template-rows:minmax(var(--pin-h),auto) minmax(var(--pin-h),auto);position:relative}
.elementor-86 .sv-home.sv-home .sv-therapy.sv-therapy[data-sv-pin=on] .sv-service-panel.sv-service-panel{display:contents}

/* Vertical index line between stage and text; the gold part follows the run. */
.elementor-86 .sv-home.sv-home .sv-therapy.sv-therapy[data-sv-pin=on] .sv-service-panels::before{
  content:"";grid-column:var(--pin-line);grid-row:1/3;justify-self:center;width:var(--sv-line,1px);
  background:linear-gradient(to bottom,var(--sv-gold) 0 calc(var(--pin-q,0) * 100%),var(--th-rule) calc(var(--pin-q,0) * 100%) 100%);
  pointer-events:none}

/* Stage: both images in one sticky area; the second sits on top and is clipped. */
.elementor-86 .sv-home.sv-home .sv-therapy.sv-therapy[data-sv-pin=on] .sv-service-panel .sv-service-media{
  grid-column:var(--pin-media);grid-row:1/3;align-self:start;position:sticky;top:var(--pin-top);
  height:var(--pin-h);aspect-ratio:auto;max-height:none;border-radius:var(--th-radius)}
.elementor-86 .sv-home.sv-home .sv-therapy.sv-therapy[data-sv-pin=on] .sv-service-panel-2 .sv-service-media{
  z-index:1;clip-path:inset(calc((1 - var(--pin-p,0)) * 100%) 0 0 0 round var(--th-radius))}
.elementor-86 .sv-home.sv-home .sv-therapy.sv-therapy[data-sv-pin=on] .sv-service-panel .sv-service-image{will-change:transform;transform-origin:50% 55%}
.elementor-86 .sv-home.sv-home .sv-therapy.sv-therapy[data-sv-pin=on] .sv-service-panel-1 .sv-service-image{
  object-position:46% 40%;transform:scale(calc(1 + var(--pin-p,0) * .05))}
.elementor-86 .sv-home.sv-home .sv-therapy.sv-therapy[data-sv-pin=on] .sv-service-panel-2 .sv-service-image{
  object-position:50% 60%;transform:scale(calc(1.06 - var(--pin-p,0) * .06))}
/* The outgoing image settles back under a soft ink veil as the next one rises. */
.elementor-86 .sv-home.sv-home .sv-therapy.sv-therapy[data-sv-pin=on] .sv-service-panel-1 .sv-service-media::before{
  content:"";position:absolute;inset:0;z-index:1;background:var(--sv-ink);opacity:calc(var(--pin-p,0) * .4);pointer-events:none}
/* Text: one block per pinned frame, centred against the stage, opened by a rule. */
.elementor-86 .sv-home.sv-home .sv-therapy.sv-therapy[data-sv-pin=on] .sv-service-panel .sv-service-copy{
  grid-column:var(--pin-copy);align-self:center;padding:var(--th-rule-space) 0 0;
  border-top:var(--sv-line,1px) solid var(--th-rule)}
.elementor-86 .sv-home.sv-home .sv-therapy.sv-therapy[data-sv-pin=on] .sv-service-panel-1 .sv-service-copy{grid-row:1}
.elementor-86 .sv-home.sv-home .sv-therapy.sv-therapy[data-sv-pin=on] .sv-service-panel-2 .sv-service-copy{grid-row:2}
