/* The hero is a native-scroll stage. Shopping controls remain available throughout. */
.hero-story{position:relative;margin:12px 14px 0;height:calc(100svh - 54px)}
.hero-story.motion-ready{height:250svh}
.hero-story .hero{position:sticky;top:10px;margin:0;min-height:640px;height:calc(100svh - 50px);max-height:1200px;isolation:isolate;--progress:0;--title-out:0;--landscape:0;--finale:0;--note-one:0;--note-two:0;--note-three:0;--note-four:0;background:#526c5e}
.hero-story .hero-sky,.hero-story .hero-scene,.hero-story .hero-mist,.hero-story .hero-shade{position:absolute;inset:0;pointer-events:none}
.hero-sky{z-index:-5;background:radial-gradient(ellipse at 73% 15%,#b3b69b 0%,#768a72 28%,#475f50 65%,#233d31 100%)}
.hero-story .hero-scene{z-index:-4;transform:translate3d(0,calc((1 - var(--landscape))*34%),0) scale(calc(1.08 - var(--landscape)*.08));transform-origin:50% 70%;mask-image:linear-gradient(transparent,#000 23%);will-change:transform}
.hero-story .hero-scene img{width:100%;height:100%;object-fit:cover;object-position:center 58%;filter:saturate(.85)}
.hero-story .hero-shade{z-index:-1;background:linear-gradient(180deg,rgba(12,30,23,.28),transparent 29%,transparent 65%,rgba(14,31,22,.52));opacity:.85}
.hero-mist{z-index:-3;opacity:.45;background:radial-gradient(ellipse at 74% 22%,#f0edda8a,transparent 19%),radial-gradient(ellipse at 85% 36%,#e8ead17a,transparent 20%),radial-gradient(ellipse at 23% 63%,#eff1db70,transparent 20%);filter:blur(18px);transform:translate3d(calc(var(--breeze,0)*14px),calc(var(--landscape)*-7%),0);will-change:transform}
.hero-mist.mist-two{opacity:.2;background:radial-gradient(ellipse at 10% 46%,#f1ead2,transparent 22%);transform:translate3d(calc(var(--breeze,0)*-18px),0,0)}
.hero-story .site-header{z-index:8}
.hero-story .hero-copy{z-index:1;top:16%;left:50%;right:auto;width:94%;opacity:calc(1 - var(--title-out));transform:translate(-50%,calc(var(--title-out)*-160px));pointer-events:none;will-change:transform,opacity}
.hero-story .hero-copy .hero-enter{animation:hero-intro .95s cubic-bezier(.22,1,.36,1) both}
.hero-story .hero-copy .eyebrow{animation-delay:80ms}
.hero-story .hero-copy h1{font-size:clamp(65px,8.8vw,142px);line-height:1.07;letter-spacing:-.035em;margin:17px 0 18px;animation-delay:180ms;text-shadow:0 3px 30px #183a2415}
.hero-story .hero-copy h1>span{display:inline-block;transform:translateY(calc(var(--title-out)*-48px)) rotate(calc(var(--title-out)*-7deg));transform-origin:50% 100%}
.hero-story .hero-copy h1>span+span{transform:translateY(calc(var(--title-out)*38px)) rotate(calc(var(--title-out)*8deg))}
[lang=ar] .hero-story .hero-copy h1{font-size:clamp(100px,11.5vw,184px);line-height:1.1;letter-spacing:0;white-space:nowrap;margin:8px 0 7px}
.hero-story .hero-copy .hero-subtitle{animation-delay:300ms;font-size:13px;color:#f3f1e6}
.hero-product{position:absolute;inset:0;z-index:2;pointer-events:none;--product-y:65%;--product-image-height:60svh;--product-float:0px;--product-intro-scale:1}
.hero-product-photo{position:absolute;left:50%;top:var(--product-y);height:var(--product-image-height);aspect-ratio:1061/1483;transform:translate(-50%,calc(-64.67% + var(--product-float))) scale(var(--product-intro-scale));transform-origin:50% 64.67%;opacity:1;will-change:transform}
.hero-product-fallback{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:contain;opacity:1}
.hero-product-canvas{position:absolute;inset:0;visibility:hidden}
.hero-product-canvas canvas{display:block;width:100%;height:100%;opacity:1}
.hero-product.is-3d .hero-product-canvas{visibility:visible}
.hero-product.is-3d .hero-product-photo{visibility:hidden}
.hero-callouts{position:absolute;inset:0;z-index:4;pointer-events:none}
.hero-story .hero-note{--note:0;position:absolute;display:flex;gap:8px;align-items:center;padding:0;border:0;border-radius:15px;min-height:58px;max-width:290px;min-width:0;width:22%;background:transparent;box-shadow:none;color:#fff;pointer-events:none;opacity:var(--note);transform:translateY(calc((1 - var(--note))*25px)) scale(calc(.94 + var(--note)*.06));text-align:start;animation:none;transition:filter .2s;will-change:transform,opacity}
.hero-story .hero-note.is-active{pointer-events:auto}
.hero-story .hero-note:hover{filter:brightness(1.1)}
.hero-story .hero-note .note-symbol{height:53px;width:53px;min-width:53px;display:grid;place-items:center;border-radius:14px;background:#142c23e6;border:1px solid #ffffff20;color:#f0e7cf;box-shadow:0 5px 20px #162a2018}
.hero-story .hero-note .note-symbol svg{width:20px;height:20px}
.hero-story .note-copy{padding:12px 15px;border-radius:13px;white-space:nowrap;overflow:hidden;background:#17382c40;border:1px solid #ffffff35;backdrop-filter:blur(19px);-webkit-backdrop-filter:blur(19px);box-shadow:inset 0 1px 0 #ffffff20,0 5px 25px #122b1710;clip-path:inset(0 calc((1 - var(--note))*100%) 0 0 round 13px);flex:1}
.hero-story .note-copy small{font-size:8px;font-weight:500;letter-spacing:1px;margin:0 0 6px;opacity:.85;color:#fff;display:block}
.hero-story .note-copy strong{display:block;font-size:12px;font-weight:500;line-height:1.5}
[lang=ar] .hero-story .note-copy small{letter-spacing:0;font-size:10px}
[lang=ar] .hero-story .note-copy strong{font-size:13px}
.hero-story .note-one{--note:var(--note-one);left:8%;right:auto;top:37%;flex-direction:row-reverse}
.hero-story .note-two{--note:var(--note-two);right:8%;left:auto;top:32%}
.hero-story .note-three{--note:var(--note-three);left:10%;right:auto;top:59%;flex-direction:row-reverse}
.hero-story .note-four{--note:var(--note-four);right:9%;left:auto;top:57%}
[dir=rtl] .hero-story .note-one,[dir=rtl] .hero-story .note-three{flex-direction:row}
[dir=rtl] .hero-story .note-two,[dir=rtl] .hero-story .note-four{flex-direction:row-reverse}
.hero-finale{position:absolute;top:72%;left:0;width:100%;z-index:3;pointer-events:none;text-align:center;color:#fff;opacity:var(--finale);transform:translateY(calc((1 - var(--finale))*90px));will-change:transform,opacity}
.hero-finale .eyebrow{font-size:9px;letter-spacing:2px;margin:0 0 10px;color:#fff}
.hero-finale h2{font-family:Georgia,serif;font-size:clamp(55px,6.4vw,100px);font-weight:400;line-height:1.08;margin:0}
.hero-finale h2 em{font-weight:400}
[lang=ar] .hero-finale h2{font-family:Lalezar,serif;font-size:clamp(80px,9vw,130px);line-height:1.1}
[lang=ar] .hero-finale .eyebrow{font-size:11px;letter-spacing:0;margin-bottom:4px}
.hero-story .hero-bottom{z-index:7;bottom:25px}
.hero-controls{display:flex;align-items:center;gap:16px}
.hero-story .hero-index{gap:10px;font-size:8px}
.hero-index b{font-weight:400;font-variant-numeric:tabular-nums}
.hero-motion-toggle{display:grid;place-items:center;flex:none;width:36px;height:36px;border:1px solid #ffffff50;border-radius:50%;background:#152c2930;color:#fff;backdrop-filter:blur(14px);cursor:pointer}
.hero-motion-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.hero-motion-toggle .play-mark,.hero-motion-toggle[aria-pressed=true] .pause-mark{display:none}
.hero-motion-toggle[aria-pressed=true] .play-mark{display:block}
.hero-story .scroll-cue{font-size:8px;gap:10px;letter-spacing:1px}
.hero-progress{position:absolute;bottom:0;left:0;right:0;height:2px;z-index:9;background:#ffffff15}
.hero-progress i{display:block;height:100%;background:#ebdfbd;transform:scaleX(var(--progress));transform-origin:left}
.hero-story :focus-visible{outline:2px solid #fff;outline-offset:5px}
@keyframes hero-intro{from{opacity:0;translate:0 25px}to{opacity:1;translate:0 0}}
@media(min-width:1600px){.hero-story .hero-copy{top:18%}.hero-story .hero-note{width:20%;max-width:330px}.hero-story .note-one{left:12%}.hero-story .note-two{right:12%}.hero-story .note-three{left:14%}.hero-story .note-four{right:13%}}
@media(max-width:1000px){.hero-story .hero-note{width:27%}.hero-story .note-one{left:3%}.hero-story .note-two{right:3%}.hero-story .note-three{left:4%}.hero-story .note-four{right:4%}.hero-story .note-copy{padding:11px}.hero-story .hero-index>span{display:none}.hero-story .hero-copy{top:19%}.hero-finale{top:73%}}
@media(max-width:600px){
 .hero-story{margin:8px 8px 0;height:calc(100svh - 43px)}
 .hero-story.motion-ready{height:210svh}
 .hero-story .hero{top:7px;height:calc(100svh - 48px);min-height:620px;border-radius:18px}
 .hero-story .hero-copy{top:19%;width:94%}
 .hero-story .hero-copy h1{font-size:clamp(46px,12.5vw,72px);line-height:1.1;margin:13px 0 16px}
 .hero-story .hero-copy h1>span{display:block}
 .hero-story .hero-copy h1 em{display:inline}
 [lang=ar] .hero-story .hero-copy h1{font-size:clamp(70px,21vw,120px);line-height:1.15;margin:12px 0 9px}
 [lang=ar] .hero-story .hero-copy h1>span{display:inline-block}
 .hero-story .hero-copy .eyebrow{font-size:7px;letter-spacing:1.2px}
 [lang=ar] .hero-story .hero-copy .eyebrow{font-size:10px;letter-spacing:0}
 .hero-story .hero-copy .hero-subtitle{font-size:10px;max-width:275px;line-height:1.9;margin-inline:auto}
 .hero-product{--product-y:65%;--product-image-height:55svh}
 .hero-story .hero-scene{transform:translate3d(0,calc((1 - var(--landscape))*30%),0) scale(1.02)}
 .hero-story .hero-scene img{object-position:54% 60%}
 .hero-story .hero-note{width:44%;max-width:none;gap:5px;min-height:44px;border-radius:10px}
 .hero-story .hero-note .note-symbol{width:32px;height:38px;min-width:32px;border-radius:10px}
 .hero-story .hero-note .note-symbol svg{width:15px;height:15px}
 .hero-story .note-copy{padding:9px 8px;border-radius:10px;clip-path:inset(0 calc((1 - var(--note))*100%) 0 0 round 10px)}
 .hero-story .note-copy small{font-size:6px;letter-spacing:.45px;line-height:1.5;margin-bottom:3px;white-space:normal}
 .hero-story .note-copy strong{font-size:9px;line-height:1.55;white-space:normal}
 [lang=ar] .hero-story .note-copy small{font-size:7px}
 [lang=ar] .hero-story .note-copy strong{font-size:10px}
 .hero-story .note-one{left:4%;top:22%;flex-direction:row}
 .hero-story .note-two{right:4%;top:22%;display:flex}
 .hero-story .note-three{left:4%;top:65%;flex-direction:row}
 .hero-story .note-four{right:4%;top:65%}
 [dir=rtl] .hero-story .note-one,[dir=rtl] .hero-story .note-three{flex-direction:row-reverse}
 .hero-finale{top:74%}
 .hero-finale .eyebrow{font-size:6px;letter-spacing:1px;margin:0 0 8px}
 .hero-finale h2{font-size:clamp(32px,9vw,48px)}
 [lang=ar] .hero-finale h2{font-size:clamp(53px,16vw,82px)}
 [lang=ar] .hero-finale .eyebrow{font-size:9px;margin-bottom:1px}
 .hero-story .hero-bottom{bottom:22px;left:20px;right:20px;display:flex;flex-wrap:wrap;justify-content:center;gap:13px}
 .hero-story .hero-bottom>.button{order:2;width:100%;min-height:51px;font-size:11px}
 .hero-controls{position:absolute;bottom:65px;left:0;gap:9px;direction:ltr}
 .hero-story .hero-index{display:flex;gap:7px;font-size:8px}
 .hero-story .hero-index i{width:22px}
 .hero-motion-toggle{width:30px;height:30px}
 .hero-story .scroll-cue{position:absolute;right:0;bottom:73px;display:flex;font-size:6px;letter-spacing:.7px;gap:6px}
 .hero-story .scroll-cue svg{width:13px;height:13px}
}
/* A complete, single-screen composition without scroll pinning. */
.hero-story.is-reduced{height:auto}
.hero-story.is-reduced .hero{position:relative;top:0;--landscape:1;--note-one:1;--note-two:1;--note-three:1;--note-four:1}
.hero-story.is-reduced .hero-scene{transform:none;will-change:auto}
.hero-story.is-reduced .hero-copy{top:16%;transform:translateX(-50%);opacity:1}
.hero-story.is-reduced .hero-copy h1>span{transform:none}
.hero-story.is-reduced .hero-copy .hero-subtitle{display:none}
.hero-story.is-reduced .hero-product{--product-y:58%;--product-tilt:0deg;--product-float:0px;--product-intro-scale:1}
.hero-story.is-reduced .hero-note{pointer-events:auto;transform:none;will-change:auto}
.hero-story.is-reduced .note-one,.hero-story.is-reduced .note-two{top:44%}
.hero-story.is-reduced .note-three,.hero-story.is-reduced .note-four{top:66%}
.hero-story.is-reduced .hero-finale,.hero-story.is-reduced .hero-progress,.hero-story.is-reduced .hero-motion-toggle{display:none}
.hero-story.is-reduced .hero-mist,.hero-story.is-reduced .hero-product-photo{will-change:auto}
@media(max-width:600px){.hero-story.is-reduced .hero-copy{top:14%}.hero-story.is-reduced .note-one,.hero-story.is-reduced .note-two{top:32%}.hero-story.is-reduced .note-three,.hero-story.is-reduced .note-four{top:70%}.hero-story.is-reduced .hero-copy h1{font-size:42px}.hero-story.is-reduced[dir=rtl] .hero-copy h1,[lang=ar] .hero-story.is-reduced .hero-copy h1{font-size:70px}}
@media(prefers-reduced-motion:reduce){.hero-story *{animation:none!important;transition:none!important;will-change:auto!important}.hero-story .hero-scene{transform:none}}
@media(max-height:700px){
 .hero-story .hero{height:calc(100svh - 48px);min-height:0}
 .hero-story .hero-copy{top:16%}
 .hero-story .hero-copy h1{font-size:clamp(34px,12vh,80px);margin:8px 0}
 [lang=ar] .hero-story .hero-copy h1{font-size:clamp(54px,15vh,96px)}
 .hero-story .hero-copy .hero-subtitle{display:none}
 .hero-story .hero-bottom{bottom:17px}
 .hero-story .hero-bottom>.button{min-height:44px}
 .hero-finale{top:73%}
 .hero-finale h2{font-size:clamp(28px,7vh,48px)}
 [lang=ar] .hero-finale h2{font-size:clamp(46px,10vh,68px)}
 .hero-finale .eyebrow{display:none}
 .hero-story .scroll-cue{display:none}
 .hero-story .hero-note .note-copy{padding-block:7px}
}
@media(max-height:500px) and (min-width:601px){
 .hero-story .site-header{padding:12px 24px}
 .hero-story .brand img{width:95px;height:auto}
 .hero-story .hero-copy{top:23%}
 .hero-story .hero-copy .eyebrow{display:none}
 .hero-story .hero-copy h1{margin:0}
 .hero-finale{top:65%}
 .hero-story .hero-index>span{display:none}
 .hero-story .hero-note{min-height:44px}
 .hero-story .hero-note .note-symbol{height:44px;width:40px;min-width:40px}
}
@media(max-height:700px) and (max-width:600px){
 .hero-story .hero-copy h1{font-size:clamp(32px,10.8vw,46px)}
 [lang=ar] .hero-story .hero-copy h1{font-size:clamp(58px,19vw,82px)}
 .hero-story .hero-copy .eyebrow{font-size:6px;letter-spacing:.7px}
 [lang=ar] .hero-story .hero-copy .eyebrow{font-size:9px;letter-spacing:0}
 .hero-story .note-one,.hero-story .note-two{top:21%}
 .hero-finale h2{font-size:clamp(26px,8.2vw,34px);letter-spacing:-1px}
 [lang=ar] .hero-finale h2{font-size:52px;letter-spacing:0}
 .hero-story .hero-note .note-copy{padding:6px}
 .hero-story .note-copy small{font-size:5px}
 .hero-story .note-copy strong{font-size:8px}
 .hero-story.is-reduced .note-one,.hero-story.is-reduced .note-two{top:35%}
 .hero-story.is-reduced .hero-copy h1{font-size:30px}
 [lang=ar] .hero-story.is-reduced .hero-copy h1{font-size:58px}
}