/* Version 2 product film. The approved aroma animations are independent. */
.box-page .site-header{position:sticky;top:0;z-index:18;background:var(--paper);margin:0;padding-inline:5.4vw;border-bottom:1px solid #deddd733}
.box-story{position:relative;height:390svh;background:var(--paper)}
.box-stage{position:sticky;top:87px;height:calc(100svh - 87px);min-height:480px;overflow:hidden;isolation:isolate;background:var(--paper)}
.box-stage::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 68% 47%,#eee3d6 0,transparent 66%);z-index:-1}
.box-intro{position:absolute;top:17%;left:5.4vw;z-index:3;width:31%;pointer-events:none}
.box-kicker{font-size:12px;letter-spacing:.19em;text-transform:uppercase;margin-bottom:25px;display:flex;gap:10px;align-items:center}
.box-kicker::before{content:"";width:7px;height:7px;background:var(--red);border-radius:50%}
.box-intro h1{font-size:clamp(66px,7.7vw,120px);line-height:.94;letter-spacing:-.065em;font-weight:600}
.box-intro h1 span{display:block}
.box-intro p.box-description{max-width:250px;margin-top:29px;font-size:18px;line-height:1.45;letter-spacing:0}
.box-film{position:absolute;left:27%;right:-3%;top:2%;height:91%;z-index:1;transform-origin:60% 55%;mask-image:radial-gradient(ellipse 63% 60% at 52% 52%,#000 54%,transparent 92%);-webkit-mask-image:radial-gradient(ellipse 63% 60% at 52% 52%,#000 54%,transparent 92%)}
.box-poster,.box-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.box-poster{transition:opacity .25s}
.box-video video,.box-video canvas{width:100%!important;height:100%!important;object-fit:contain;display:block}
.box-video{opacity:0;transition:opacity .2s}
.box-story[data-ready=true] .box-video{opacity:1}
.box-story[data-ready=true] .box-poster{opacity:0}
.box-footer{position:absolute;left:5.4vw;right:5.4vw;bottom:34px;z-index:4;display:flex;align-items:center;justify-content:space-between;gap:24px}
.box-scroll-cue{display:flex;align-items:center;gap:13px;font-size:13px;letter-spacing:.01em}
.box-scroll-cue>span:first-child{display:grid;place-items:center;width:35px;height:35px;border:1px solid #bbb8b1;border-radius:50%;font-size:17px}
.box-scroll-cue small{display:block;font-size:11px;color:#79766f;margin-top:2px}
.box-explore{display:flex;align-items:center;gap:26px;min-height:47px;background:var(--ink);color:white;border-radius:28px;padding:13px 23px;font-size:14px;text-decoration:none;white-space:nowrap}
.box-explore:hover{background:var(--red)}
.box-progress{position:absolute;left:5.4vw;right:5.4vw;bottom:12px;height:2px;background:#dad8d0;transform-origin:left}
.box-progress span{display:block;height:100%;background:var(--red);transform:scaleX(0);transform-origin:left}
.box-phase{position:absolute;z-index:3;right:5.4vw;top:36px;text-align:right;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#737068}
.box-phase strong{font-weight:400;color:var(--ink);display:block;font-size:15px;letter-spacing:.01em;text-transform:none;margin-top:8px}
.box-pause{width:38px;height:38px;min-width:38px;border:1px solid #bbb8b1;border-radius:50%;display:grid;place-items:center;font-size:15px}
.box-actions{display:flex;align-items:center;gap:12px}
.box-collection-intro{padding:60px 4.7vw 2px;display:flex;align-items:flex-end;justify-content:space-between;gap:20px;scroll-margin-top:110px}
.box-collection-intro h2{font-size:clamp(38px,4.3vw,64px);font-weight:500;letter-spacing:-.055em}
.box-collection-intro p{font-size:16px;max-width:280px;margin:0}
.box-page [data-collection]{scroll-margin-top:110px}
.box-story.is-static{height:auto}
.box-story.is-static .box-stage{position:relative;top:auto}
.box-story.is-static .box-scroll-cue,.box-story.is-static .box-progress,.box-story.is-static .box-pause{display:none}
@media(min-width:1700px){.box-page{max-width:none}.box-stage{max-width:1900px;margin-inline:auto}}
@media(max-width:1000px) and (min-width:761px){.box-intro{width:33%;top:22%}.box-intro h1{font-size:78px}.box-intro p.box-description{font-size:16px;max-width:210px}.box-film{left:29%;right:-9%;height:85%;top:8%}}
@media(max-width:760px){.box-page .site-header{height:76px;padding-inline:22px}.box-story{height:320svh}.box-stage{top:76px;height:calc(100svh - 76px);min-height:540px}.box-intro{top:35px;left:22px;width:calc(100% - 44px)}.box-kicker{font-size:10px;margin-bottom:16px;letter-spacing:.15em}.box-intro h1{font-size:clamp(52px,14vw,80px);letter-spacing:-.065em;line-height:1}.box-intro h1 span{display:inline}.box-intro h1 span+span::before{content:" "}.box-intro p.box-description{max-width:250px;margin-top:17px;font-size:15px}.box-film{left:-12%;right:-12%;top:23%;height:65%;mask-image:radial-gradient(ellipse 66% 56% at 50% 52%,#000 58%,transparent 98%);-webkit-mask-image:radial-gradient(ellipse 66% 56% at 50% 52%,#000 58%,transparent 98%)}.box-phase{top:auto;bottom:115px;right:24px;font-size:10px}.box-phase strong{font-size:13px;margin-top:4px}.box-footer{left:22px;right:22px;bottom:53px;gap:12px}.box-scroll-cue{font-size:11px;gap:9px}.box-scroll-cue small{font-size:10px}.box-scroll-cue>span:first-child{width:29px;height:29px;flex:none}.box-explore{font-size:12px;padding:12px 17px;gap:16px;min-height:44px}.box-pause{width:32px;height:32px;min-width:32px}.box-actions{gap:8px}.box-progress{left:22px;right:22px;bottom:33px}.box-collection-intro{padding:37px 22px 0;align-items:start;flex-direction:column;gap:15px}.box-collection-intro h2{font-size:39px}.box-collection-intro p{font-size:15px}.box-page [data-collection]{scroll-margin-top:98px}}
@media(max-width:370px){.box-pause{display:none}.box-explore{padding-inline:13px}.box-scroll-cue small{display:none}}
@media(prefers-reduced-motion:reduce){.box-story{height:auto}.box-stage{position:relative;top:auto}.box-scroll-cue,.box-progress,.box-pause{display:none}.box-intro,.box-film{transform:none!important;opacity:1!important}}
/* Apply the edge fade to the film's actual aspect ratio, including on mobile. */
.box-film{top:48%;height:auto;aspect-ratio:16/9;transform:translateY(-50%);mask-image:linear-gradient(to right,transparent,#000 9%,#000 93%,transparent),linear-gradient(to bottom,transparent,#000 15%,#000 85%,transparent);mask-composite:intersect;-webkit-mask-image:linear-gradient(to right,transparent,#000 9%,#000 93%,transparent),linear-gradient(to bottom,transparent,#000 15%,#000 85%,transparent);-webkit-mask-composite:source-in}
.box-footer{bottom:84px}.box-progress{bottom:64px}
@media(max-width:1000px) and (min-width:761px){.box-film{top:50%;height:auto}}
@media(max-width:760px){.box-film{left:0;right:0;top:55%;height:auto}.box-footer{bottom:85px}.box-progress{bottom:65px}.box-phase{bottom:145px}}

.box-intro,.box-film{will-change:transform,opacity}