/* Three editorial scenes, inspired by the ARISTO purpose section. */
#problems.work-stories{padding:76px 0 50px;position:relative;background:transparent}
.work-stories-intro .section-top{margin-bottom:24px}
.work-story-track{position:relative}
.work-story-stage{position:relative;isolation:isolate;overflow:clip}
.work-story-oval{position:absolute;inset:2% -12%;border-radius:50%;background:#fff;z-index:-1;pointer-events:none}
.work-story-scenes{width:min(1320px,92%);margin:auto;position:relative}
.work-scene{position:relative;min-height:610px;display:grid;grid-template-columns:34% 36% 30%;grid-template-rows:auto 1fr;align-items:center;padding:72px 38px 80px 0;column-gap:0}
.work-scene-heading{grid-column:1/-1;display:flex;align-items:baseline;gap:18px;padding-bottom:38px}
.work-scene-heading p{font-size:clamp(38px,4.5vw,68px);font-weight:700;line-height:1.15;margin:0;letter-spacing:.025em}
.work-scene-number{color:#ff6500;font:600 15px var(--font-en,sans-serif)}
.work-scene-copy{position:relative;z-index:2}
.work-scene-copy:before{content:"";position:absolute;width:calc(100% + max(4vw,(100vw - 1320px)/2) + 105px);aspect-ratio:750/240;background:url("assets/work-heading-brush.svg") center/100% 100% no-repeat;left:calc(-1 * max(4vw,(100vw - 1320px)/2) - 45px);top:-60px;z-index:-1;pointer-events:none}
.work-scene-copy h3{font-size:clamp(22px,2.2vw,33px);line-height:1.7;margin:0 0 48px;letter-spacing:.025em}
.work-scene-copy .btn{min-width:240px;max-width:100%;font-size:14px}
.work-scene-art{margin:0;width:100%;align-self:center}
.work-scene-art img{display:block;width:100%;height:auto;object-fit:contain;mix-blend-mode:multiply}
.work-scene-detail{padding-left:28px;padding-right:18px;font-size:17px;line-height:2}
.work-scene-detail p{margin:0 0 18px}
.work-scene-detail strong{font-size:inherit;display:block;font-weight:700}
.work-story-progress{display:none}
.work-stories-outro{padding-top:28px}
/* Keep every scene accessible if JS is disabled or reduced motion is requested. */
.work-stories.is-scroll-story .work-story-track{height:400svh}
.work-stories.is-scroll-story .work-story-stage{position:sticky;top:var(--work-header,94px);height:calc(100svh - var(--work-header,94px));min-height:520px;overflow:clip}
.work-stories.is-scroll-story .work-story-scenes{height:100%}
.work-stories.is-scroll-story .work-scene{position:absolute;inset:0;min-height:0;height:100%;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .45s ease,visibility .45s ease;grid-template-rows:30% 70%;padding-top:30px;padding-bottom:80px}
.work-stories.is-scroll-story .work-scene.is-active{opacity:1;visibility:visible;pointer-events:auto}
.work-stories.is-scroll-story .work-scene-art img{transform:scale(.76);transition:transform .7s cubic-bezier(.22,1,.36,1)}
.work-stories.is-scroll-story .work-scene.is-active .work-scene-art img{transform:scale(1)}
.work-stories.is-scroll-story .work-story-progress{display:flex;position:absolute;right:2.2%;top:50%;transform:translateY(-50%);align-items:center;gap:12px;flex-direction:column;font:600 13px var(--font-en,sans-serif);color:#657479}
.work-story-current{color:#ff6500}
.work-story-line{height:130px;width:1px;background:#293e4540;position:relative}
.work-story-line i{position:absolute;inset:0;background:#ff6500;transform-origin:top;transform:scaleY(var(--work-progress,.333));transition:transform .45s ease}
@media(max-width:900px){
.work-scene{grid-template-columns:1fr 1fr;padding-right:12px;min-height:640px}
.work-scene-heading{padding-bottom:12px}
.work-scene-copy h3{font-size:25px}.work-scene-copy .btn{min-width:0}
.work-scene-art{grid-column:2;grid-row:2 / 4}
.work-scene-detail{grid-column:1;padding:20px 15px 0 0;font-size:15px}
.work-stories.is-scroll-story .work-scene{grid-template-rows:22% 48% 30%;padding-bottom:30px}
}
@media(max-width:600px){
#problems.work-stories{padding-top:54px}.work-stories-intro .section-top{display:block}.work-stories-intro .section-side{margin-top:22px}
.work-story-scenes{width:calc(100% - 40px)}
.work-scene,.work-stories.is-scroll-story .work-scene{display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr auto auto;padding:22px 14px 22px 0;min-height:580px;gap:12px}
.work-scene-heading{grid-column:1;gap:10px;padding:0}.work-scene-heading p{font-size:34px}
.work-scene-art{grid-column:1;grid-row:2;justify-self:center;width:min(64%,230px);align-self:center}
.work-scene-copy{grid-row:3}.work-scene-copy h3{font-size:23px;line-height:1.55;margin-bottom:18px}.work-scene-copy .btn{width:100%;font-size:13px;min-height:46px}
.work-scene-detail{grid-row:4;font-size:13px;line-height:1.8;padding:0}.work-scene-detail p{margin-bottom:3px}
.work-stories.is-scroll-story .work-story-stage{min-height:580px}
.work-stories.is-scroll-story .work-story-progress{right:12px;top:32%}.work-story-line{height:90px}
.work-story-oval{inset:1% -45%;border-radius:50%}
}
@media(prefers-reduced-motion:reduce){.work-scene,.work-scene-art img{transition:none!important}}
/* Matched before/after illustrations: change once, one second after entering view. */
.work-art-pair{position:relative;aspect-ratio:1}
.work-art-pair img{position:absolute;inset:0;height:100%;mix-blend-mode:normal}
.work-scene-art .work-art-before{opacity:1}
.work-scene-art .work-art-after{opacity:0}
.work-scene-art[data-phase="after"] .work-art-before{opacity:0}
.work-scene-art[data-phase="after"] .work-art-after{opacity:1}
.work-scene-art figcaption{display:grid;text-align:center;font-size:12px;font-weight:700;letter-spacing:.12em;margin-top:10px;color:#5c6b70}
.work-scene-art figcaption span{grid-area:1/1;transition:opacity .3s ease}
.work-phase-after{opacity:0;color:#ff6500}
.work-scene-art[data-phase="after"] .work-phase-before{opacity:0}
.work-scene-art[data-phase="after"] .work-phase-after{opacity:1}
.work-stories .work-scene-art img,.work-stories.is-scroll-story .work-scene-art img{transition:opacity .35s ease,transform .7s cubic-bezier(.22,1,.36,1)}
.work-scene-detail p,.work-scene-detail strong{transition:color .35s ease,opacity .35s ease}
.work-scene[data-phase="before"] .work-scene-detail strong{opacity:.45}
.work-scene[data-phase="after"] .work-scene-detail p{opacity:.5}
.work-scene[data-phase="after"] .work-scene-detail strong{opacity:1;color:#ff6500}
@media(prefers-reduced-motion:reduce){.work-stories .work-scene-art img,.work-scene-art figcaption span,.work-scene-detail p,.work-scene-detail strong{transition:none!important}}

@media(max-width:600px){.work-scene-copy:before{width:calc(100% + 75px);left:-65px;top:-30px}}
/* Keep the introduction together as one reading sequence. */
#problems .work-stories-intro .section-top{display:block}
#problems .work-stories-intro .section-side{width:auto;max-width:none;margin:28px 0 0;padding:0;text-align:left}
#problems .work-stories-intro .section-side p{margin:0}
@media(max-width:600px){#problems .work-stories-intro .section-side{margin-top:24px}}