/* Scene 02: brand hold -> yellow cut -> ice -> paper -> copy -> reading hold. */
.our-story{height:auto;background:#fff}
.story-stage{--story-frame-width:min(100vw,1800px,100svh * 1.777);isolation:isolate;overflow:hidden;background:#fff}
.our-story.story-motion{height:260svh;background:#fff}
.story-motion .story-stage{position:sticky;top:0;height:100svh;display:flex;align-items:center;background:#fff}
.our-story .story-content-frame,.story-motion .story-content-frame{--u:calc(min(100vw,1800px,100svh * 1.777)/1024);--story-bleed:max(0px,calc((100vw - 1024 * var(--u))/2));max-width:calc(1024 * var(--u));height:calc(576.306 * var(--u));z-index:5;isolation:isolate}
.story-background{position:absolute;left:calc((100vw - var(--story-frame-width))/2 + var(--story-frame-width) * .06);top:50%;width:calc(var(--story-frame-width) * .43);height:calc(var(--story-frame-width) / 1.777 * .68);z-index:0;overflow:hidden;pointer-events:none;transform:translateY(-50%);border-radius:0;box-shadow:none}
.story-background img{display:block;width:100%;height:100%;object-fit:cover;object-position:24% center}
.story-motion .story-background{opacity:var(--photo-opacity,0);transform:translateY(-50%) translateX(var(--photo-x,-20px))}
.story-motion .story-background img{transform:scale(var(--photo-scale,1));transform-origin:26% 52%}
.story-dark-curtain,.story-yellow-seam{display:none;position:absolute;inset:0;pointer-events:none}
.story-motion .story-dark-curtain{display:block;background:#050706;z-index:3;clip-path:polygon(var(--wipe-top,-100px) 0,100% 0,100% 100%,var(--wipe-bottom,-100px) 100%)}
.story-motion .story-yellow-seam{display:block;background:#ffe100;z-index:6;opacity:var(--seam-opacity,0);clip-path:polygon(var(--wipe-top,-100px) 0,var(--seam-top-end,-97px) 0,var(--seam-bottom-end,-97px) 100%,var(--wipe-bottom,-100px) 100%)}
.story-slogan-background{z-index:4;mix-blend-mode:difference;clip-path:polygon(var(--brand-left-top,0px) 0,100% 0,100% 100%,var(--brand-left-bottom,0px) 100%)}
.story-brandline i{font-style:normal;opacity:var(--brand-prefix,1)}
.story-brandline b{font-weight:inherit}
.our-story .story-slide{display:block;position:absolute;left:calc(-1 * var(--story-bleed));top:0;bottom:0;width:100vw;background:rgb(255 255 255/.92);z-index:1;opacity:1;transform:none;pointer-events:none;clip-path:polygon(var(--panel-top,55vw) 0,100% 0,100% 100%,var(--panel-bottom,36vw) 100%)}
.our-story .story-copy{position:absolute;left:57%;top:21%;width:36%;z-index:3;opacity:1;transform:none;background:none}
.our-story .story-copy h2{font-size:calc(65 * var(--u));font-weight:700;line-height:.84;letter-spacing:-.01em}
.story-title-line{display:block;overflow:hidden;padding-top:.09em;margin-top:-.09em}
.story-title-line>span{display:block}
.story-motion .story-title-line:first-child>span{transform:translateY(var(--title-first,112%));opacity:var(--title-first-opacity,0)}
.story-motion .story-title-line:last-child>span{transform:translateY(var(--title-second,112%));opacity:var(--title-second-opacity,0)}
.our-story .story-copy .yellow-rule{width:calc(41 * var(--u));height:calc(3 * var(--u));margin:calc(20 * var(--u)) 0 calc(21 * var(--u));transform-origin:left}
.story-motion .story-copy .yellow-rule{transform:scaleX(var(--rule-progress,0))}
.our-story .story-copy .story-lead{font-size:clamp(18px,calc(18.4 * var(--u)),32px);line-height:1.3;letter-spacing:-.025em;color:#171918;font-weight:500;margin:0 0 calc(18 * var(--u))}
.our-story .story-copy .story-description{font-size:clamp(14px,calc(11.3 * var(--u)),20px);line-height:1.49;letter-spacing:-.015em;color:#303332;margin:0}
.story-motion .story-lead{opacity:var(--lead-opacity,0);transform:translateY(var(--lead-y,12px))}
.story-motion .story-description{opacity:var(--body-opacity,0);transform:translateY(var(--body-y,10px))}
.our-story:not(.story-motion) .story-slide{clip-path:polygon(55vw 0,100% 0,100% 100%,36vw 100%)}
@media(max-width:700px){
 .our-story{--story-photo-height:clamp(180px,30svh,310px);--story-photo-top:28px}
 .our-story .story-content-frame,.story-motion .story-content-frame{--u:1px;--story-bleed:0px;max-width:none;height:auto;padding-top:calc(var(--story-photo-height) + var(--story-photo-top));display:block}
 .story-motion .story-stage{height:100svh;display:block}
 .story-background{inset:var(--story-photo-top) 28px auto;width:auto;height:var(--story-photo-height);transform:none}
 .story-motion .story-background{transform:translateX(var(--photo-x,-20px))}
 .story-background img{object-position:22% center;transform-origin:26% 52%}
 .our-story .story-copy{position:relative;top:auto;left:auto;width:auto;padding:28px 28px 38px;background:none}
 .our-story .story-copy h2{font-size:clamp(50px,13vw,66px);line-height:.85}
 .our-story .story-copy .yellow-rule{width:44px;height:3px;margin:20px 0}
 .our-story .story-copy .story-lead{font-size:20px;line-height:1.35;margin-bottom:20px}
 .our-story .story-copy .story-description{font-size:14px;line-height:1.65}
 .our-story .story-slide{inset:calc(var(--story-photo-height) + var(--story-photo-top)) 0 auto;height:calc(100svh - var(--story-photo-height) - var(--story-photo-top));width:100%;opacity:1;background:rgb(255 255 255/.92)}
 .story-motion .story-slide{clip-path:polygon(var(--panel-top,100vw) 0,100% 0,100% 100%,var(--panel-bottom,100vw) 100%)}
 .our-story:not(.story-motion) .story-slide{inset:calc(var(--story-photo-height) + var(--story-photo-top)) 0 0;height:auto;clip-path:none}
 .our-story:not(.story-motion) .story-stage{background:#fff}
}
@media(max-width:700px) and (max-height:700px){
 .our-story .story-copy{padding:23px 25px 28px}
 .our-story .story-copy h2{font-size:50px}
 .our-story .story-copy .yellow-rule{margin:17px 0}
 .our-story .story-copy .story-lead{font-size:18px;margin-bottom:16px}
 .our-story .story-copy .story-description{font-size:13px}
}