/* Three consecutive scenes with ordinary scrolling and local illustrations. */
.process-story{background:#e9fafb;overflow:clip;scroll-margin-top:28px}
.story-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;padding-top:58px;padding-bottom:27px}
.story-heading h2{font-size:clamp(30px,3.1vw,43px);letter-spacing:-.025em;margin-top:14px}
.story-heading>p{color:#4d686a;font-size:13px;line-height:1.8;padding-bottom:3px;text-align:right}
.process-story-list{margin:0;padding:0;list-style:none}
.story-panel{position:relative;margin:0;padding:0}
.story-panel-link{background:#e9fafb}
.story-panel-answer{background:#f4f3f3}
.story-panel-send{background:#fcfdfc}
.story-panel+.story-panel{border-top:1px solid #dbe6e5}
.story-panel-inner{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:56px;min-height:650px;min-height:clamp(600px,80svh,800px);padding-top:65px;padding-bottom:65px;scroll-margin-top:24px}
.story-copy{max-width:475px;padding-bottom:10px;position:relative;z-index:1}
.story-step-meta{display:flex;align-items:center;gap:24px;margin-bottom:27px}
.story-step-label{font-size:12px;letter-spacing:.08em;font-weight:650;text-transform:uppercase;white-space:nowrap;color:#105053}
.story-step-label>span:first-child{margin-left:8px}
.story-step-total{font-weight:400;color:#617d7e;letter-spacing:.02em}
.story-progress{display:flex;gap:5px;width:79px}
.story-progress i{display:block;height:3px;flex:1;background:#bfd1d0;border-radius:2px}
.story-progress i.is-complete{background:#74bcbd}
.story-progress i.is-current{background:#105053}
.story-copy h3{font:400 clamp(43px,4.6vw,65px)/1.08 Georgia,"Times New Roman",serif;color:#105053;letter-spacing:-.04em;margin:0 0 26px}
.story-description{max-width:450px;font-size:16px;line-height:1.85;color:#486365}
.story-description+.story-description{margin-top:15px}
.story-note{display:flex;align-items:flex-start;gap:12px;margin-top:25px;font-size:12px;line-height:1.85;color:#31595b;max-width:415px}
.story-note>span{display:block;flex:0 0 5px;width:5px;height:25px;margin-top:1px;border-radius:3px;background:#f09513}
/* The fixed stage is the scroll trigger. Only its children are transformed. */
.story-media{position:relative;isolation:isolate;width:100%;max-width:430px;aspect-ratio:1;margin:0;justify-self:center;overflow:visible}
.story-image-halo{position:absolute;z-index:-1;inset:1%;border-radius:50%;background:radial-gradient(ellipse at 50% 54%,#bce7e84d 0%,#d2eeee26 43%,#d2eeee00 72%);pointer-events:none}
.story-panel-answer .story-image-halo{background:radial-gradient(ellipse at 50% 54%,#cedfdd5c 0%,#e5eeec26 43%,#e5eeec00 72%)}
.story-panel-send .story-image-halo{background:radial-gradient(ellipse at 50% 54%,#d1ece74d 0%,#eaf7f426 43%,#eaf7f400 72%)}
.story-art{position:relative;width:100%;height:100%;transform-origin:50% 62%;transition:none}
.story-image{width:100%;height:100%;display:block;object-fit:contain;filter:drop-shadow(0 13px 16px #1050530b)}
/* No CSS timing: each pose belongs to the current scroll position. Without
   JavaScript, or with reduced motion, all images remain fully visible. */
.story-media.is-scroll-ready .story-art{will-change:transform,opacity}
@media(min-width:1600px){.story-panel-inner{min-height:720px}}
@media(max-width:1120px){.story-panel-inner{gap:28px;min-height:620px;min-height:clamp(580px,76svh,720px);padding-top:55px;padding-bottom:55px}.story-copy h3{font-size:clamp(40px,4.8vw,57px)}.story-description{font-size:15px}.story-note{font-size:12px}.story-media{max-width:390px}}
@media(max-width:760px){.story-heading{align-items:flex-start;padding-top:40px;padding-bottom:15px}.story-heading>p{display:none}.story-heading h2{font-size:34px}.story-panel-inner{grid-template-columns:1fr;gap:20px;min-height:0;padding-top:43px;padding-bottom:39px}.story-copy{padding-bottom:0;max-width:510px}.story-step-meta{margin-bottom:21px;gap:20px}.story-copy h3{font-size:44px;margin-bottom:19px}.story-copy h3 br{display:none}.story-description{font-size:15px;line-height:1.85;max-width:510px}.story-description+.story-description{margin-top:13px}.story-note{margin-top:20px;max-width:440px}.story-media{max-width:300px;width:min(100%,300px);margin-top:4px}}
@media(max-width:390px){.story-copy h3{font-size:39px}.story-heading h2{font-size:31px}.story-step-label{font-size:11px}.story-step-meta{gap:16px}.story-progress{width:65px}}
@media(prefers-reduced-motion:reduce){.story-media .story-art,.story-media .story-image-halo{opacity:1!important;transform:none!important;transition:none;will-change:auto}}
@media print{.process-story{overflow:visible;background:white}.story-heading{padding-top:24px}.story-panel{background:white}.story-panel-inner{min-height:0!important;grid-template-columns:1.2fr .8fr;gap:30px;padding:32px 0;break-inside:avoid}.story-copy h3{font-size:30px}.story-description{font-size:12px}.story-note{font-size:10px;margin-top:12px}.story-media .story-art{opacity:1!important;transform:none!important;transition:none;will-change:auto}.story-image-halo{display:none}}

/* 1.9.4: steps stay subordinate to their section heading at every breakpoint. */
.story-heading h2{font-size:var(--pcm-title-section);line-height:1.2;letter-spacing:-.02em;margin-top:12px;text-wrap:balance}
.story-heading>p{font-size:.9375rem;line-height:1.7}
.story-step-label{font-size:.875rem;line-height:1.45;letter-spacing:.06em}
.story-copy h3{font-size:var(--pcm-title-step);line-height:1.2;letter-spacing:-.02em;margin-bottom:22px;text-wrap:balance}
.story-description{font-size:1rem;line-height:1.8}
.story-note{font-size:.875rem;line-height:1.7}
.story-step-meta{margin-bottom:20px}
@media(max-width:760px){
  .story-copy h3{margin-bottom:18px}
  .story-description{font-size:1rem;line-height:1.75}
  .story-step-label{font-size:.8125rem}
}
@media print{
  .story-heading h2{font-size:1.875rem}
  .story-copy h3{font-size:1.5rem}
  .story-description{font-size:.8125rem}
  .story-note{font-size:.75rem}
}

/* 1.9.6: later-loaded story shorthand must not restore the old serif. */
.story-copy h3{font-family:"Inter",Arial,sans-serif;font-weight:400;font-style:normal}