.product-story{position:relative;background:#fff;margin-top:60px;--rope-progress:0}
.rope-sequence{position:relative;height:340svh}
.rope-stage{height:100svh;min-height:570px;position:sticky;top:0;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse at 50% 52%,#f5fbfe 0,white 65%)}
.rope-masthead{position:absolute;z-index:5;top:6%;left:6%;right:6%;display:flex;justify-content:space-between;align-items:center;gap:20px;pointer-events:none}
.rope-masthead p{margin:0;font-size:10px;letter-spacing:2.5px;color:#82939d}.rope-count{font-size:11px;letter-spacing:2px;color:#93a4ae}.rope-count b{font-weight:400;color:#368eb7}
.rope-panel{position:absolute;inset:0;opacity:0;visibility:hidden;pointer-events:none;--panel-x:0vw;--panel-y:0px;--panel-turn:0deg;--copy-y:0px;--copy-alpha:0}
.rope-panel.is-active{pointer-events:auto}.rope-panel.is-visible{visibility:visible}
.rope-visual{position:absolute;inset:12% 0 6%;transform:translate3d(var(--panel-x),var(--panel-y),0) rotate(var(--panel-turn));will-change:transform;pointer-events:none}
.rope-visual img{display:block;position:absolute;top:50%;left:32%;width:100%;height:100%;object-fit:contain;transform:translate(-50%,-50%);mask-image:linear-gradient(90deg,#000 93%,transparent 100%)}
.rope-panel:nth-of-type(2) .rope-visual img{left:68%;mask-image:linear-gradient(90deg,transparent,#000 7%)}
.rope-copy{position:absolute;left:61%;right:6%;top:50%;transform:translateY(calc(-50% + var(--copy-y)));opacity:var(--copy-alpha);z-index:2;max-width:470px;will-change:opacity,transform}
.rope-panel:nth-of-type(2) .rope-copy{left:8%;right:auto;width:31%}
.rope-kicker{font-size:10px;letter-spacing:2.4px;color:#389eca;margin:0 0 18px;text-transform:uppercase;line-height:1.8}
.rope-copy h3{font-family:Manrope,'DM Sans',sans-serif;font-size:clamp(35px,4.4vw,78px);font-weight:300;line-height:1.08;letter-spacing:-.055em;margin:0 0 20px;text-wrap:balance;color:#34454f}
.rope-description{font-size:clamp(13px,1.05vw,17px);line-height:1.8;color:#7d8e98;max-width:320px;margin:0 0 20px}
.rope-ingredients{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 23px}.rope-ingredients span{border:1px solid #dcecf4;border-radius:20px;padding:7px 11px;color:#678a9d;font-size:10px;letter-spacing:.2px;background:#ffffffd9}
.rope-discover{background:transparent;border:0;border-bottom:1px solid #9accdf;color:#328fb9;padding:10px 0;font-size:12px;display:inline-flex;gap:25px;align-items:center;cursor:pointer}.rope-discover:hover{color:#1d6b92;border-color:currentColor}.rope-discover:after{content:'↗';font-size:17px}
.rope-panel.is-final .rope-visual{inset:20% 0 10%}.rope-panel.is-final .rope-visual img{left:50%;width:100%;mask-image:none;object-fit:cover}
.rope-panel.is-final .rope-copy{left:6%;right:6%;top:10%;max-width:none;text-align:center;transform:translateY(var(--copy-y));pointer-events:none}
.rope-panel.is-final .rope-copy h3{font-size:clamp(34px,3.6vw,64px);margin:0}.rope-panel.is-final .rope-kicker{margin-bottom:9px}
.rope-final-detail{position:absolute;left:6%;bottom:11%;max-width:235px;opacity:var(--copy-alpha);z-index:3}.rope-final-detail .rope-description{font-size:12px;margin-bottom:12px}.rope-final-detail .rope-ingredients{margin-bottom:0}

.rope-bottom{position:absolute;bottom:4%;left:6%;right:6%;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:20px}
.rope-bottom>p{margin:0;color:#91a3ad;font-size:10px;letter-spacing:1px}.rope-chapters{display:flex;gap:9px}.rope-chapters button{border:0;padding:12px 0;background:transparent;width:32px;cursor:pointer}.rope-chapters button:before{content:'';display:block;height:2px;width:100%;background:#dce7ec;transition:background .3s}.rope-chapters button[aria-current=true]:before{background:#56bde9}.rope-progress{position:absolute;bottom:0;left:0;right:0;height:1px;background:#77c7ed;transform-origin:left;transform:scaleX(var(--rope-progress));z-index:5}
@media(min-width:1600px){.rope-visual img{width:105%;height:106%}.rope-panel.is-final .rope-visual img{width:100%;height:100%}.rope-copy{left:62%}.rope-final-detail{max-width:290px}.rope-final-detail .rope-description{font-size:15px}}
@media(max-width:700px){.product-story{margin-top:25px}.rope-stage{min-height:610px}.rope-masthead{top:4%;left:6%;right:6%}.rope-masthead p{font-size:8px;letter-spacing:1.5px}.rope-visual{inset:10% 0 42%}.rope-visual img,.rope-panel:nth-of-type(2) .rope-visual img{width:180%;height:100%;left:50%;mask-image:none;object-fit:contain}.rope-copy,.rope-panel:nth-of-type(2) .rope-copy{top:60%;left:7%;right:7%;width:auto;text-align:center;max-width:none;transform:translateY(var(--copy-y))}.rope-copy h3{font-size:clamp(29px,7.8vw,43px);margin-bottom:10px}.rope-kicker{margin-bottom:9px;font-size:9px;letter-spacing:1.8px}.rope-description{font-size:12px;line-height:1.65;max-width:350px;margin:0 auto 13px}.rope-ingredients{justify-content:center;margin-bottom:8px;gap:6px}.rope-ingredients span{font-size:9px;padding:5px 9px}.rope-discover{font-size:11px;padding:7px 0}.rope-bottom{bottom:2.5%}.rope-bottom>p{font-size:8px;letter-spacing:.4px}.rope-chapters{gap:6px}.rope-chapters button{width:24px}.rope-panel.is-final .rope-copy{top:10%}.rope-panel.is-final .rope-copy h3{font-size:32px}.rope-panel.is-final .rope-visual{inset:24% 0 27%}.rope-panel.is-final .rope-visual img{width:230%;height:100%;object-fit:contain}.rope-final-detail{left:8%;right:8%;bottom:12%;max-width:none;text-align:center}.rope-final-detail .rope-description{font-size:11px;max-width:310px}}
@media(max-height:680px) and (min-width:701px){.rope-masthead{top:4%}.rope-copy h3{font-size:38px}.rope-description{font-size:12px}.rope-panel.is-final .rope-copy{top:9%}.rope-panel.is-final .rope-copy h3{font-size:34px}}
@media(prefers-reduced-motion:reduce){.product-story{height:auto}.rope-stage{position:relative;height:auto;overflow:hidden}.rope-masthead{top:28px}.rope-panel{position:relative;height:100svh;min-height:670px;visibility:visible!important;opacity:1!important;pointer-events:auto}.rope-visual{transform:none!important;will-change:auto}.rope-copy{opacity:1!important;will-change:auto}.rope-final-detail,.rope-explore-more{opacity:1!important}.rope-bottom,.rope-count,.rope-progress{display:none}}

/* Keep rope cut edges away from the product copy. */
.rope-panel:not(.is-final) .rope-visual{mask-image:linear-gradient(90deg,#000 46%,transparent 61%)}
.rope-panel:nth-of-type(2) .rope-visual{mask-image:linear-gradient(90deg,transparent 39%,#000 54%)}
.rope-panel:not(.is-final) .rope-visual img{mask-image:linear-gradient(180deg,transparent,#000 3%,#000 98%,transparent)}
.rope-panel.is-final .rope-visual{inset:22% 0 9%}
.rope-panel.is-final .rope-visual img{width:auto;height:100%;max-width:none;object-fit:contain;mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
@media(max-width:700px){
 .rope-panel:not(.is-final) .rope-visual,.rope-panel:nth-of-type(2) .rope-visual{mask-image:none}
 .rope-panel.is-final .rope-visual{inset:24% 0 27%}
 .rope-panel.is-final .rope-visual img{height:100%;width:230%;mask-image:none}
}

/* Stretch only the outer rope tails; preserve the central product proportions. */
.rope-panel.is-final .rope-final-art{display:flex;align-items:stretch}
.rope-final-piece{position:relative;height:100%;overflow:hidden;flex:1;min-width:0}
.rope-final-piece.rope-final-middle{flex:0 0 auto;aspect-ratio:672 / 941}
.rope-panel.is-final .rope-final-piece img{position:absolute;top:0;left:0;width:334.4%;height:100%;max-width:none;object-fit:fill;transform:none;mask-image:none}
.rope-panel.is-final .rope-final-middle img{width:248.8095%;left:50%;transform:translateX(-50%)}
.rope-panel.is-final .rope-final-right img{left:auto;right:0}
.rope-stage{overflow:clip}
.rope-final-detail{top:46%;bottom:auto}
@media(max-width:700px){.rope-final-detail{top:auto;bottom:12%}}
@media(max-width:700px){
 .rope-final-left,.rope-final-right{display:none}
 .rope-final-piece.rope-final-middle{width:100%;aspect-ratio:auto;flex:1;overflow:visible}
 .rope-panel.is-final .rope-final-middle img{width:auto;height:100%;left:50%;transform:translateX(-50%);object-fit:contain}
}
.rope-panel.is-final .rope-final-art{mask-image:none}

.rope-final-detail .rope-ingredients{margin-bottom:14px}
.rope-outro{display:flex;justify-content:center;padding:clamp(24px,4svh,48px) 24px 24px;background:#fff}
.rope-explore-more{display:inline-flex;align-items:center;justify-content:center;gap:24px;min-height:48px;padding:13px 28px;border:1px solid #b5dcec;border-radius:28px;background:#fff;color:#328fb9;font-size:13px;white-space:nowrap;transition:background .25s,border-color .25s}
.rope-explore-more:hover{background:#edf9ff;border-color:#68bfe6}
@media(max-width:700px){.product-story{height:auto}.rope-sequence{height:330svh}.rope-panel.is-final .rope-visual{inset:24% 0 33%}.rope-final-detail{bottom:14%}.rope-final-detail .rope-ingredients{margin-bottom:8px}.rope-outro{padding:24px}.rope-explore-more{font-size:12px;padding:12px 24px;gap:18px}}
@media(prefers-reduced-motion:reduce){.rope-sequence{height:auto}}