.scroll-story{position:relative;height:320vh;height:320svh;background:#251c24;color:#fff;isolation:isolate}
.scroll-story-stage{position:sticky;top:0;height:100vh;height:100svh;min-height:480px;overflow:hidden}
.scroll-story-video,.scroll-story-shade{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.scroll-story-shade{background:linear-gradient(90deg,rgba(20,12,20,.68),rgba(20,12,20,.16) 65%,rgba(20,12,20,.06)),linear-gradient(0deg,rgba(20,12,20,.4),transparent 35%);pointer-events:none}
.scroll-story-label{position:absolute;top:112px;left:6vw;font-size:11px;letter-spacing:.18em;font-weight:600}
.scroll-story-captions{position:absolute;left:6vw;top:45%;width:min(440px,46vw);min-height:210px}
.scroll-story-caption{position:absolute;inset:0;display:flex;align-items:flex-start;gap:18px;opacity:0;transform:translateY(24px);transition:opacity .5s ease,transform .65s cubic-bezier(.2,.7,.2,1);pointer-events:none;visibility:hidden}
.scroll-story-caption.is-current{opacity:1;transform:none;pointer-events:auto;visibility:visible}
.scroll-story-number{display:grid;place-items:center;flex:0 0 38px;height:38px;border:1px solid #ffffff85;border-radius:50%;font-size:11px;margin-top:7px}
.scroll-story-caption h2{font-family:inherit;text-transform:none;font-size:clamp(30px,3.2vw,54px);font-weight:500;line-height:1.08;letter-spacing:-.035em;margin:0 0 18px;color:#fff}
.scroll-story-caption p{font-size:15px;line-height:1.6;max-width:330px;color:#fff;margin:0}
.scroll-story-link{display:inline-flex;gap:32px;margin-top:24px;padding-bottom:8px;border-bottom:1px solid #ffffff9c;color:#fff;font-size:14px;text-decoration:none}
.scroll-story-bottom{position:absolute;bottom:34px;left:6vw;right:6vw;display:flex;align-items:center;gap:24px;font-size:10px;letter-spacing:.12em}
.scroll-story-bottom>span:first-child{flex:1}.scroll-story-progress{height:2px;width:110px;background:#ffffff45;overflow:hidden}.scroll-story-progress i{display:block;width:100%;height:100%;background:#fff;transform:scaleX(var(--story-progress,0));transform-origin:left}
@media(max-width:700px){.scroll-story-stage{min-height:460px}.scroll-story-label{left:24px;top:92px;font-size:9px}.scroll-story-video{object-position:65% center}.scroll-story-shade{background:linear-gradient(0deg,rgba(20,12,20,.82),rgba(20,12,20,.1) 85%)}.scroll-story-captions{left:24px;right:24px;top:auto;bottom:110px;width:auto;min-height:180px}.scroll-story-caption{gap:12px}.scroll-story-caption h2{font-size:34px;max-width:280px;margin-bottom:14px}.scroll-story-caption p{font-size:13px;max-width:280px}.scroll-story-number{flex-basis:30px;height:30px;font-size:9px}.scroll-story-bottom{left:24px;right:24px;bottom:28px;gap:16px;font-size:8px}.scroll-story-progress{width:60px}}
@media(prefers-reduced-motion:reduce){.scroll-story{height:auto}.scroll-story-stage{position:relative;height:auto;min-height:700px}.scroll-story-captions{position:relative;top:auto;bottom:auto;left:auto;margin:0;padding:160px 6vw 100px;width:auto}.scroll-story-caption{position:relative;opacity:1;visibility:visible;transform:none;transition:none;margin-bottom:35px;pointer-events:auto}.scroll-story-label{top:90px}.scroll-story-caption h2{font-size:30px}.scroll-story-bottom>span:first-child{font-size:0}.scroll-story-bottom>span:first-child:after{content:'DOTEFO MICROFIBER';font-size:9px}}