.work-scene{position:relative;isolation:isolate;height:clamp(280px,35vw,440px);margin-bottom:36px;overflow:hidden;background:#405e43;border-radius:5px}.work-scene>img{width:100%;height:100%;object-fit:cover;object-position:center 58%;display:block}.work-scene:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#17291fe0 0%,#17291f7a 35%,transparent 75%);z-index:1}.work-scene figcaption{position:absolute;left:5%;bottom:11%;max-width:540px;z-index:2;color:#fffef9}.work-scene .eyebrow{font-size:10px;color:#e2edcb}.work-scene figcaption p{font:400 clamp(1.9rem,3.4vw,3.6rem)/1.1 Georgia,serif;letter-spacing:-.035em;margin:15px 0 22px}.work-scene figcaption em{color:#d4e5a6}.work-scene small{font-size:10px;color:#e1e8da}.demo.section{display:block}.demo>.section-intro{display:grid;grid-template-columns:1fr 1fr;gap:0 10%;align-items:end}.demo>.section-intro>.eyebrow{grid-column:1/-1}.demo>.section-intro>p:not(.eyebrow){font-size:16px;line-height:1.7;padding-bottom:12px}.demo>.section-intro>.steps{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin:20px 0 40px}.demo>.section-intro>.steps li{padding-top:18px}.visual-story.demo-stage{display:grid;grid-template-columns:1.14fr .86fr;max-width:none;width:100%;padding:0;margin:0;background:#e4e8db;border:1px solid #c8d0be;border-radius:8px;overflow:hidden;align-items:stretch}.story-art{position:relative;min-width:0;min-height:580px;margin:0;isolation:isolate;background:#d8dccf}.story-photos{position:absolute;inset:0}.story-photos img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s ease;object-position:46% center}.story-photos img.is-active{opacity:1}.story-photos img:nth-child(2){object-position:58% center}.story-photos:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 38%,#15281fdb 100%)}.story-art figcaption{position:absolute;bottom:35px;left:36px;right:30px;color:#fffef9;z-index:1}.story-art figcaption .eyebrow{font-size:9px;margin-bottom:14px;color:#e0eacd}.story-art h3{font:400 clamp(2.1rem,3.5vw,3.5rem)/1.05 Georgia,serif;letter-spacing:-.035em;color:#fffef9;max-width:440px;margin:0 0 20px}.story-art small{font-size:10px;color:#e2e8dc}.story-phone-area{padding:42px 30px;display:flex;align-items:center;justify-content:center;min-width:0;background:radial-gradient(ellipse at 80% 20%,#f8f7ef,#e1e6d6)}.story-phone-area .phone{width:100%;max-width:325px;min-height:470px;box-shadow:12px 18px 35px #29372b20}.story-phone-area .bubble{animation:story-bubble .45s ease both}.story-toolbar{grid-column:1/-1;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:22px 28px;border-top:1px solid #c8d0be;background:#f3f4e9}.story-progress{display:flex;gap:7px}.story-progress button{width:38px;height:38px;border-radius:50%;border:1px solid #99aa8c;background:transparent;color:#405e43;font-size:11px;cursor:pointer}.story-progress button[aria-current=true]{background:#405e43;color:#fffef9}.story-toolbar .demo-controls{margin:0;gap:9px;flex-wrap:wrap}.story-toolbar .demo-controls button{font-size:11px;padding:10px 13px}.story-toolbar .demo-controls #demo-play{min-width:122px}@keyframes story-bubble{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:900px){.story-art{min-height:535px}.story-phone-area{padding:28px 20px}.story-art figcaption{left:26px;right:24px}.story-toolbar{padding:18px;gap:15px}.story-progress{gap:5px}.story-progress button{width:30px;height:30px}.story-toolbar .demo-controls button{font-size:10px;padding:9px 10px}.demo>.section-intro>.steps{gap:20px}}
@media(max-width:700px){.work-scene{height:350px;margin-bottom:24px}.work-scene>img{object-position:36% center}.work-scene:after{background:linear-gradient(180deg,transparent 10%,#17291fe3 100%)}.work-scene figcaption{left:24px;right:20px;bottom:25px}.work-scene figcaption p{font-size:2.1rem;margin:12px 0 16px}.work-scene .eyebrow{font-size:8px}.demo>.section-intro{display:block}.demo>.section-intro>p:not(.eyebrow){font-size:14px}.demo>.section-intro>.steps{display:block;margin:25px 0}.demo>.section-intro>.steps li{padding:15px 0}.visual-story.demo-stage{display:block}.story-art{min-height:0;height:360px}.story-art figcaption{left:24px;bottom:25px}.story-art h3{font-size:2.3rem;max-width:290px}.story-phone-area{padding:28px 22px}.story-phone-area .phone{min-height:390px;max-width:300px}.story-toolbar{display:flex;flex-direction:column;align-items:stretch;gap:18px;padding:20px 15px}.story-progress{justify-content:center;gap:12px}.story-toolbar .demo-controls{justify-content:center}.story-toolbar .demo-controls button{font-size:10px}.story-toolbar .demo-controls #demo-play{min-width:112px}}
@media(prefers-reduced-motion:reduce){.story-photos img{transition:none}.story-phone-area .bubble{animation:none}}