/* A3: static first; desktop, tablet and mobile share one semantic hero. */
.motion-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.animated-home main{overflow:visible}
.scroll-progress{position:fixed;inset:0 0 auto;height:3px;z-index:80;pointer-events:none}
.scroll-progress>span{display:block;width:100%;height:100%;background:#ed1828;transform:scaleX(0);transform-origin:left}
.story-hero{--story-copy-top:19svh;position:relative;background:#f5e4ca}
.story-stage{position:relative;isolation:isolate;min-height:850px;padding:155px 6% 110px;display:grid;grid-template-columns:43% 57%;align-items:center;overflow:clip}
.story-paper{position:absolute;inset:0;z-index:-2;background:#f5e4ca url('assets/paper.webp') center/cover}
.story-copy{position:relative;min-width:0;z-index:3}
.story-overline{font:400 clamp(29px,2.7vw,40px)/1.1 var(--display);text-transform:uppercase}
.story-choice{font:400 clamp(96px,10.5vw,154px)/.92 var(--display);text-transform:uppercase;letter-spacing:.01em;margin-top:9px}
.story-intro-tail{font:400 clamp(37px,4.1vw,61px)/1.1 var(--display);text-transform:uppercase;margin-top:8px}
.story-lead{font-size:17px;line-height:1.65;max-width:34ch;margin-top:25px}
.story-benefits{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;list-style:none;margin:29px 0 0;padding:0;max-width:530px}
.story-benefits li{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:14px;text-align:center;line-height:1.35}
.story-benefits svg{width:58px;height:58px;flex:none;overflow:hidden;transform-origin:50% 50%}
.story-visual{position:relative;height:510px;min-width:0;grid-column:2;grid-row:1/3}
.story-pack{position:absolute;width:92%;height:auto;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-9deg);filter:drop-shadow(0 18px 14px #4b230b22)}
.story-pack--cookies{top:23%;left:46%;transform:translate(-50%,-50%) rotate(7deg);z-index:1}
.story-pack--caramel{top:77%;left:53%;transform:translate(-50%,-50%) rotate(3deg);z-index:2}
.story-pack--brownie{z-index:3}
.story-flavour,.story-panel--occasion{display:none}
.story-actions{position:relative;display:flex;flex-wrap:wrap;gap:12px;margin-top:30px;grid-column:1;z-index:5}
.story-actions .button{margin:0;font-size:15px;padding:14px 23px;gap:23px;white-space:nowrap}
.story-actions .story-partner{background:#f9ecd8;color:#321a11;border:1px solid #76533e66}
.story-actions .story-partner:hover{background:#ffefda}
.story-navigation{display:none}
.motion-footer-actions{display:flex;flex-direction:column;align-items:flex-end;gap:14px}
.motion-footer-buttons{display:flex;gap:11px;flex-wrap:wrap;justify-content:flex-end}
.motion-footer-actions .replay-intro{background:#f7e5c9;color:#32190d}
.motion-footer-actions .replay-intro:hover{background:#ffefd9}
.motion-preference{display:flex;gap:8px;align-items:center;font-size:14px;color:#e9cfac;cursor:pointer}
.motion-preference input{accent-color:#ed1828;width:17px;height:17px;margin:0}
.is-parallax-active{will-change:transform}
html[data-user-reduced-motion]{scroll-behavior:auto}
/* No long scroll track exists before successful motion initialization. */
.motion-ready .story-hero{height:calc(var(--story-viewport,100svh)*var(--story-track-length,6))}
.motion-ready .story-stage{position:sticky;top:0;height:var(--story-viewport,100svh);min-height:0;padding:0;display:block}
.motion-ready .story-copy{position:absolute;left:6%;top:var(--story-copy-top);width:39%;height:52%}
.motion-ready .story-panel--intro{display:flex;position:absolute;inset:0;flex-direction:column;justify-content:center}
.motion-ready .story-intro-tail{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.motion-ready .story-visual{position:absolute;inset:0;width:100%;height:100%;margin:0}
.motion-ready .story-pack{left:50%;top:50%;width:min(44vw,680px,80svh)}
.motion-ready .story-benefits{position:absolute;left:0;top:calc(var(--story-viewport,100svh)*.54 - var(--story-copy-top));width:100%;margin:0}
.motion-ready .story-panel--occasion{display:flex;position:absolute;left:6%;top:12%;width:88%;flex-direction:column;align-items:center;text-align:center;z-index:4}
.motion-ready .story-panel--occasion h2{font:400 clamp(72px,min(9vw,13svh),130px)/.98 var(--display);text-transform:uppercase;color:#ed1828;margin-top:7px}
.motion-ready .story-flavour{display:flex;position:absolute;top:60%;width:24%;padding:0 8px;flex-direction:column;align-items:center;gap:8px;z-index:8;pointer-events:none}
.motion-ready .story-flavour--brownie{left:8.5%}.motion-ready .story-flavour--cookies{left:38%}.motion-ready .story-flavour--caramel{left:67.5%}
.motion-ready .story-taste{position:relative;width:100%;height:clamp(100px,14svh,160px);object-fit:contain}
.motion-ready .story-flavour figcaption{width:100%;font-size:18px;line-height:1.3;font-weight:400;text-align:center;color:#321a11}
.motion-ready .story-actions{position:absolute;left:6%;bottom:11%;max-width:88%;margin:0}
.motion-ready .story-navigation{position:absolute;bottom:25px;left:6%;right:6%;display:flex;align-items:center;justify-content:space-between;gap:30px;z-index:6}
.story-steps{display:flex;gap:8px;width:132px}
.story-steps button{display:grid;place-items:center;flex:1;min-width:38px;min-height:44px;padding:12px 0;background:transparent;border:0;border-radius:999px}
.story-steps button:before{content:'';display:block;height:3px;width:100%;background:#a9825e66;transition:background-color .2s}
.story-hero[data-story-step="1"] .story-steps button:nth-child(1):before,.story-hero[data-story-step="2"] .story-steps button:nth-child(2):before,.story-hero[data-story-step="3"] .story-steps button:nth-child(3):before{background:#ed1828}
.intro-skip{font-size:14px;display:flex;gap:16px;align-items:center;padding:8px 0}.intro-skip span{font-size:22px}
.motion-ready .flavour-name{padding-top:38px;min-height:96px}
/* Compact layouts: phones and tablets use the same vertical choreography. */
@media(max-width:1180px),(max-width:1400px) and (max-aspect-ratio:138/100){
 .story-stage{display:flex;flex-direction:column;min-height:0;padding:120px 24px 65px}
 .story-copy{width:100%;text-align:center}.story-overline{font-size:34px}.story-choice{font-size:124px}.story-intro-tail{font-size:48px}
 .story-lead{font-size:18px;line-height:1.55;margin:22px auto 0;max-width:36ch}
 .story-benefits{margin:29px auto 0;max-width:420px}
 .story-visual{width:min(100%,620px);height:400px;order:2;margin-top:38px;flex:none}
 .story-pack{width:82%;max-width:520px}.story-actions{order:3;justify-content:center;width:100%;margin-top:20px}
 .animated-home .header{height:90px;padding:0 30px;background:#faecd9ed}.animated-home .header .logo{width:190px}
 .animated-home .menu-toggle{display:flex;flex-direction:column;gap:6px;justify-content:center;align-items:center;width:46px;height:46px;border:1px solid var(--line);background:transparent}
 .animated-home .menu-toggle span{height:1.5px;background:var(--ink);width:21px;transition:transform .2s}
 .animated-home .menu-toggle[aria-expanded=true] span:first-child{transform:translateY(4px) rotate(45deg)}
 .animated-home .menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
 .animated-home .header nav{display:none;position:absolute;top:90px;left:0;right:0;background:#f9ead6;padding:20px 30px;gap:0;box-shadow:0 15px 20px #3b1e0718}
 .animated-home .header nav.open{display:flex;flex-direction:column;align-items:stretch}
 .animated-home .header nav>a{padding:16px 0;font-size:17px;border-bottom:1px solid var(--line)}
 .animated-home .header .nav-contact{margin:12px 0 0;padding:13px 20px;border:0;align-self:flex-start}
}
.motion-ready:is([data-story-layout=mobile],[data-story-layout=tablet]) .story-hero{--story-copy-top:96px}
.motion-ready:is([data-story-layout=mobile],[data-story-layout=tablet]) .story-copy{left:20px;right:20px;top:var(--story-copy-top);width:auto;height:34%;text-align:center}
.motion-ready:is([data-story-layout=mobile],[data-story-layout=tablet]) .story-pack{width:min(82%,410px)}
.motion-ready:is([data-story-layout=mobile],[data-story-layout=tablet]) .story-benefits{left:50%;top:calc(var(--story-viewport,100svh)*.31 - var(--story-copy-top));width:min(100%,312px);max-width:312px;transform:translateX(-50%);gap:2px}
.motion-ready:is([data-story-layout=mobile],[data-story-layout=tablet]) .story-panel--occasion{top:104px}
.motion-ready:is([data-story-layout=mobile],[data-story-layout=tablet]) .story-panel--occasion h2{font-size:clamp(64px,18vw,78px)}
.motion-ready:is([data-story-layout=mobile],[data-story-layout=tablet]) .story-flavour{top:calc(var(--story-viewport,100svh)*.59 - 28px);width:33.333%;padding:0 4px;gap:6px}
.motion-ready:is([data-story-layout=mobile],[data-story-layout=tablet]) .story-flavour--brownie{left:0}
.motion-ready:is([data-story-layout=mobile],[data-story-layout=tablet]) .story-flavour--cookies{left:33.333%}
.motion-ready:is([data-story-layout=mobile],[data-story-layout=tablet]) .story-flavour--caramel{left:66.666%}
.motion-ready:is([data-story-layout=mobile],[data-story-layout=tablet]) .story-taste{height:clamp(68px,11svh,96px)}
.motion-ready:is([data-story-layout=mobile],[data-story-layout=tablet]) .story-flavour figcaption{font-size:13px;line-height:1.25}
.motion-ready:is([data-story-layout=mobile],[data-story-layout=tablet]) .story-actions{left:20px;right:20px;bottom:67px;width:auto;max-width:none;justify-content:center}
.motion-ready:is([data-story-layout=mobile],[data-story-layout=tablet]) .story-navigation{left:22px;right:22px;bottom:13px}
/* Tablet artwork is larger than the phone version, with readable labels. */
.motion-ready[data-story-layout=tablet] .story-hero{--story-copy-top:120px}
.motion-ready[data-story-layout=tablet] .story-copy{left:48px;right:48px;height:30%}
.motion-ready[data-story-layout=tablet] .story-choice{font-size:140px}
.motion-ready[data-story-layout=tablet] .story-pack{width:min(70vw,50svh,520px)}
.motion-ready[data-story-layout=tablet] .story-benefits{width:min(100%,420px);max-width:420px;gap:5px}
.motion-ready[data-story-layout=tablet] .story-benefits li{font-size:15px}
.motion-ready[data-story-layout=tablet] .story-panel--occasion{top:120px}
.motion-ready[data-story-layout=tablet] .story-panel--occasion h2{font-size:96px}
.motion-ready[data-story-layout=tablet] .story-flavour{top:calc(var(--story-viewport,100svh)*.62 - 20px);padding-inline:14px}
.motion-ready[data-story-layout=tablet] .story-taste{height:clamp(90px,11svh,140px)}
.motion-ready[data-story-layout=tablet] .story-flavour figcaption{font-size:17px}
.motion-ready[data-story-layout=tablet] .story-actions{bottom:80px}
.motion-ready[data-story-layout=tablet] .story-actions .button{font-size:15px;min-height:51px}
@media(max-height:850px){
 .motion-ready[data-story-layout=tablet] .story-hero{--story-copy-top:96px}
 .motion-ready[data-story-layout=tablet] .story-choice{font-size:105px}
 .motion-ready[data-story-layout=tablet] .story-overline{font-size:30px}
 .motion-ready[data-story-layout=tablet] .story-lead{font-size:16px;margin-top:18px}
 .motion-ready[data-story-layout=tablet] .story-panel--occasion{top:96px}
 .motion-ready[data-story-layout=tablet] .story-panel--occasion h2{font-size:78px}
 .motion-ready[data-story-layout=tablet] .story-flavour{top:60%}
 .motion-ready[data-story-layout=tablet] .story-taste{height:11svh;min-height:68px}
}
@media(max-width:760px){
 .story-stage{padding:115px 20px 55px}.story-overline{font-size:30px}.story-choice{font-size:105px;margin-top:7px}
 .story-intro-tail{font-size:43px}.story-lead{font-size:16px;line-height:1.55;margin:18px auto 0;max-width:30ch}
 .story-benefits{margin:27px auto 0;max-width:312px;gap:2px}.story-benefits svg{width:48.1px;height:48.1px}.story-benefits li{font-size:13px}
 .story-visual{height:325px;margin-top:35px}.story-pack{max-width:410px}
 .story-actions{gap:10px;margin-top:15px}.story-actions .button{font-size:13px;padding:12px 14px;gap:12px;min-height:49px}
 .motion-footer-actions{align-items:flex-start}.motion-footer-buttons{justify-content:flex-start}
 .animated-home .header{height:76px;padding:0 20px}.animated-home .header .logo{width:177px}.animated-home .header nav{top:76px;padding:20px}
 .motion-ready .story-navigation{bottom:13px}.intro-skip{font-size:13px}.motion-ready .flavour-name{padding-top:33px;min-height:88px}
}
@media(max-width:360px){
 .story-choice{font-size:94px}.story-overline{font-size:27px}.story-intro-tail{font-size:37px}
 .story-benefits li{font-size:12px}.story-benefits svg{width:44.2px;height:44.2px}
 .motion-ready[data-story-layout=mobile] .story-hero{--story-copy-top:88px}
 .motion-ready[data-story-layout=mobile] .story-actions{bottom:59px;left:18px;right:18px}
 .motion-ready[data-story-layout=mobile] .story-flavour figcaption{font-size:12px}
}
@media(max-height:760px){
 .motion-ready[data-story-layout=mobile] .story-flavour{top:57%}
 .motion-ready[data-story-layout=mobile] .story-taste{height:8svh;min-height:48px}
}
@media(max-height:700px){
 .motion-ready[data-story-layout=mobile] .story-panel--occasion h2{font-size:64px}
 .motion-ready[data-story-layout=mobile] .story-panel--occasion .story-overline{font-size:25px}
 .motion-ready[data-story-layout=mobile] .story-actions{bottom:59px}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}.story-hero{height:auto!important}.story-stage{position:relative!important;height:auto!important}
 .story-pack,.story-taste,.product-shot,.flavour-cue,.next-image,.world-map,.box-sticker{will-change:auto!important}
 .story-steps button:before{transition:none}
}

/* A4: larger desktop resting icons; reference-shaped orange box banner. */
.motion-ready[data-story-layout=desktop] .story-benefits svg{width:72.5px;height:72.5px}
.animated-home #buy-a-box .buy-headline{min-height:clamp(300px,28vw,410px);padding:90px 28px 110px;gap:24px;text-align:center}
@media(max-width:760px){.animated-home #buy-a-box .buy-headline{min-height:265px;padding:68px 16px 82px;gap:16px}}