@font-face{font-family:'Kaushan Script';src:url('assets/kaushan-script.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:'Courgette';src:url('assets/courgette.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
:root{--display:'Kaushan Script',cursive;--body:'Courgette',cursive}
body{font-synthesis:none;line-height:1.7}
h1,h2,h3,.footer-statement,.brand-ribbon span{font-weight:400;letter-spacing:0;line-height:1.2;text-transform:none}
.eyebrow,.button,.header nav,.text-link,.story-top,.story-bottom,.scene-note,.stage-description,.process-side-note,.about-photo-caption{font-weight:400;letter-spacing:0;text-transform:none}
.eyebrow{font-size:14px}.button{font-size:15px}.button span,.featured-arrows button,.close-dialog,.about-close{font-family:Arial,sans-serif}
.header .logo{width:166px;height:56px}.header nav{font-size:15px}
.in-story .header{height:104px}.in-story .header>a{padding:8px 12px;transform:rotate(-3deg)}
.in-story .header .logo{width:186px;height:62px}.in-story .process-controls{font-size:13px}
.story-top,.stage-copy>.eyebrow{top:123px;font-size:12px}.process-side-note{font-size:10px}
.story-sticky .stage-copy h1,.story-sticky[data-process-stage="5"] #stage-heading{font-size:clamp(54px,7.6vw,126px);font-weight:400;line-height:1.16;letter-spacing:-.02em}
.story-sticky .stage-copy h1 span{overflow:visible;padding-bottom:.12em;margin-bottom:-.12em}
.story-sticky .stage-description{font-size:16px;line-height:1.6;font-weight:400;max-width:285px}
.story-sticky .scene-note{font-size:12px}.stage-progress button span{font:400 11px/1.4 var(--body);letter-spacing:0}
.story-bottom{font-size:12px}.scroll-cue span{font-size:11px}.stage-progress button{opacity:.35}.stage-progress button.active{opacity:1}
.story-sticky.light-scene .stage-copy h1,.story-sticky[data-process-stage="6"] #stage-heading,.story-sticky.delivery-scene .stage-copy h1{left:6%;width:40%;top:28%!important;font-size:clamp(38px,4.8vw,80px);line-height:1.2;text-align:left}
.story-sticky.light-scene .stage-description,.story-sticky.delivery-scene .stage-description{left:6%;bottom:31%;font-size:16px;max-width:32%}
.story-sticky.light-scene .hero-actions,.story-sticky.delivery-scene .hero-actions{left:6%;bottom:19%;max-width:40%;gap:20px;flex-wrap:wrap}
.finale-copy{top:auto;bottom:14%;right:6%;width:39%;text-align:center}
.finale-copy h2{font:400 clamp(21px,2.3vw,34px)/1.3 var(--display);letter-spacing:0;margin:0 0 6px}
.finale-copy p{font-size:13px;line-height:1.5;max-width:none}.light-scene .scene-note{bottom:16%}
.scene-fallback img{transform:none}.scene-ready.no-webgl .scene-fallback{display:block}.no-webgl #scene{visibility:hidden}
.story-sticky:is([data-process-stage="2"],[data-process-stage="3"],[data-process-stage="4"],[data-process-stage="5"]) .scene-fallback img{transform:rotate(-117deg)}
.light-scene .scene-fallback{left:70.5%;top:47%;width:min(48vw,58svh)}
.collection-heading h2{font-size:clamp(38px,4.8vw,72px);line-height:1.13}.collection-heading .eyebrow{font-size:13px}
.collection-heading>p:last-child{font-size:16px;line-height:1.6}.satellite span{font-size:13px;font-weight:400;text-transform:none}
.featured-bottom{font-size:14px}.collection-menu-link{font-size:13px}
.product-top h2{font-size:clamp(32px,3.8vw,53px);line-height:1.2}.product-top .eyebrow{font-size:13px}
.product-copy h3{font-size:clamp(36px,4.1vw,59px);line-height:1.1;margin:15px 0}
.product-copy p{font-size:15px;line-height:1.6;margin:16px 0}.product-copy .eyebrow{font-size:12px}.category-nav button{font-size:13px}
.brand-ribbon{padding:19px 0 22px}.brand-ribbon span{font-size:35px;line-height:1.2}
.about{position:relative;isolation:isolate;padding-block:100px}
.about-pattern{position:absolute;inset:-110px -40px;z-index:-2;pointer-events:none;opacity:.085;background-image:url('assets/like-heart-pattern.svg');background-size:112px 112px;transform:translate3d(0,calc(var(--about-pan,0px)*2),0);mask-image:linear-gradient(90deg,#000,rgba(0,0,0,.28) 48%,#000);-webkit-mask-image:linear-gradient(90deg,#000,rgba(0,0,0,.28) 48%,#000)}
.about-visual,.about-copy{position:relative}.about-copy{max-width:620px}
.about-heading{grid-template-columns:minmax(0,1fr) clamp(60px,5.5vw,88px);max-width:620px;gap:18px}
.about-heading h2{font-size:clamp(34px,3.5vw,53px);line-height:1.3;margin:20px 0}
.about-heading-line{overflow:visible;padding:0;margin:0}.about-heading-icon{transform:rotate(-7deg)}
.about-copy>p:not(.eyebrow){font-size:16px;line-height:1.85;margin:18px 0}.about-copy .eyebrow{font-size:15px}
.about-learn{margin-top:14px;background:var(--cream);color:var(--red);border-color:var(--cream);gap:38px}
.about-learn:hover{background:var(--orange);color:var(--cream);border-color:var(--orange)}
.about-dialog{max-width:720px;padding:48px;max-height:calc(100svh - 32px);overflow-y:auto}
.about-dialog h2{font-size:clamp(30px,4vw,46px);line-height:1.2;margin:18px 0 28px}.about-dialog h3{font-size:29px;color:var(--red);margin-bottom:12px}
.about-dialog .purpose-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}.about-dialog .purpose-grid section{border-top:1px solid var(--line);padding-top:24px}
.about-dialog .purpose-grid p{font:400 16px/1.7 'DM Sans',Arial,sans-serif;margin-bottom:28px}
.about-close{position:absolute;right:16px;top:12px;width:40px;height:40px;border:0;background:transparent;color:var(--red);font-size:32px;line-height:1}
.order{padding-block:90px 65px}.order h2{font-size:clamp(48px,6.7vw,94px);line-height:1.12;margin:22px 0 38px}
.order-composition{margin:0 auto 10px;height:345px;transform:translate3d(0,var(--order-y,0px),0) scale(var(--order-scale,1));opacity:var(--order-opacity,1);transform-origin:center;will-change:transform}
.order.is-in-view .order-bag{animation:bag-sway 7s ease-in-out infinite}.order.is-in-view .order-bucket{animation:bucket-sway 6s ease-in-out infinite}
.order h2{transform:translate3d(0,var(--order-title-y,0px),0);opacity:var(--order-title-opacity,1)}
.order .order-status{font-size:16px;margin-top:15px;color:var(--red)}
@keyframes bag-sway{0%,100%{transform:translateY(0) rotate(-10deg)}50%{transform:translateY(-12px) rotate(-7deg)}}
@keyframes bucket-sway{0%,100%{transform:translateY(-6px) rotate(8deg)}50%{transform:translateY(6px) rotate(5deg)}}
.footer-statement{font-size:clamp(36px,6.9vw,134px);line-height:1.35;text-transform:none;padding:10px 4% 24px}
.footer-top nav{font-size:15px}.footer-bottom{font-size:13px}dialog h2{font-size:42px;line-height:1.25}
@media(min-width:651px) and (max-width:1050px){.product-top{gap:16px}.product-top h2{font-size:35px}.product-top .eyebrow{max-width:145px}.product-copy h3{font-size:40px}.product-copy p{font-size:14px}.product-copy .button{padding:12px 19px;font-size:13px;gap:30px}.product-stage{top:205px;bottom:160px}.category-nav{bottom:20px}.about{gap:5%;padding-inline:5%}.about-heading{grid-template-columns:minmax(0,1fr) 60px;gap:12px}.about-heading h2{font-size:32px}.about-copy>p:not(.eyebrow){font-size:14px}.story-sticky.light-scene .hero-actions,.story-sticky.delivery-scene .hero-actions{bottom:17%!important}.story-sticky.light-scene .stage-description{font-size:14px}.hero-actions .button{font-size:13px;padding:14px 20px;gap:24px}.hero-actions .text-link{font-size:12px}}
@media(max-width:650px){
 .header .logo{width:126px;height:45px}.header nav{font-size:12px;gap:12px}.header .small{font-size:12px;padding:10px 14px;gap:14px}
 .in-story .header{height:94px;padding:13px 5%}.in-story .header .logo{width:154px;height:51px}.in-story .header>a{padding:7px 10px}
 .story-top,.stage-copy>.eyebrow{top:111px;font-size:10px}.process-side-note{display:none}
 .story-sticky .stage-copy h1,.story-sticky[data-process-stage="5"] #stage-heading{font-size:12.5vw;top:29%!important;line-height:1.2;left:4%;width:92%}
 .story-sticky .stage-description{font-size:12px;line-height:1.5;bottom:22%;max-width:47%}.story-sticky .scene-note{font-size:10px;bottom:22%;max-width:36%}
 .story-sticky.light-scene .stage-copy h1,.story-sticky[data-process-stage="6"] #stage-heading,.story-sticky.delivery-scene .stage-copy h1{top:17%!important;left:6%;width:88%;font-size:clamp(28px,9.5vw,48px);line-height:1.18;text-align:center}
 .story-sticky.light-scene .stage-description,.story-sticky.delivery-scene .stage-description{font-size:12px;max-width:42%;left:5%;bottom:23%}
 .story-sticky.light-scene .hero-actions,.story-sticky.delivery-scene .hero-actions{bottom:12%!important;left:5%;max-width:90%;gap:17px;flex-wrap:nowrap}
 .hero-actions .button{font-size:12px;min-height:42px;gap:22px}.hero-actions .text-link{font-size:12px}.finale-copy{right:5%;width:42%;bottom:22.5%}.finale-copy h2{font-size:19px;margin-bottom:5px}.finale-copy p{font-size:10px}
 .stage-progress button span{font-size:8px;letter-spacing:-.025em}.story-bottom{font-size:9px;gap:14px}.scroll-cue span{font-size:9px;max-width:100px}
 .light-scene .scene-fallback{left:50%;top:51%;width:min(92vw,62svh)}
 .collection-heading{top:102px;width:94%}.collection-heading h2{font-size:clamp(32px,8.5vw,46px);line-height:1.12}.collection-heading .eyebrow{font-size:11px}.collection-heading>p:last-child{font-size:13px}.satellite span{font-size:8px}.featured-bottom{font-size:11px}.collection-menu-link{font-size:12px}
 .product-sticky{min-height:790px;padding-top:99px}.product-top .eyebrow{font-size:11px}.product-top h2{font-size:clamp(27px,8.3vw,43px)}.product-stage{top:207px;bottom:158px}
 .product-copy h3{font-size:35px;line-height:1.1;margin:11px 0}.product-copy p{font-size:13px;margin:10px 0;max-width:240px}.product-copy .eyebrow{font-size:11px}.product-copy .button{font-size:12px;min-height:40px;bottom:-34px;gap:15px}
 .product-visual{height:220px;min-height:190px;max-height:240px;margin-top:22px}.category-nav button{font-size:11px;min-width:120px;min-height:110px}.category-nav button img{height:62px}
 .about{grid-template-columns:1fr;gap:42px;padding:65px 7%}.about-visual{width:95%;margin-inline:auto}.about-pattern{background-size:94px 94px;opacity:.085}.about-heading{grid-template-columns:minmax(0,1fr) 54px;gap:14px}.about-heading h2{font-size:clamp(29px,7.3vw,43px);line-height:1.35}.about-copy>p:not(.eyebrow){font-size:15px;line-height:1.85}.about-learn{font-size:14px;padding:14px 22px}.about-photo-caption{font-size:10px}
 .about-dialog{padding:35px 26px}.about-dialog .purpose-grid{grid-template-columns:1fr;gap:0}.about-dialog h2{font-size:33px}.about-dialog h3{font-size:28px}
 .brand-ribbon span{font-size:29px}.order{padding-block:68px 48px}.order .eyebrow{font-size:12px}.order h2{font-size:12vw;line-height:1.2;margin-bottom:34px}.order-composition{height:260px;width:94%;margin-bottom:4px}.order .button.cream{min-width:220px;font-size:15px;padding:17px 27px}.order .order-status{font-size:15px}
 .footer-statement{font-size:11.2vw;padding-bottom:22px;line-height:1.35}.footer-top nav{font-size:13px;gap:20px}.footer-bottom{font-size:11px}
}
@media(max-width:365px){.header .logo{width:110px}.header nav{gap:9px;font-size:11px}.header .small{font-size:11px;padding:9px 11px;gap:10px}.stage-progress button span{font-size:7px}.product-copy h3{font-size:32px}.about-heading{grid-template-columns:minmax(0,1fr) 45px;gap:10px}.order-composition{height:224px}.hero-actions .text-link{font-size:10px}}
@media(max-width:650px) and (max-height:760px){.product-sticky{min-height:660px}.product-stage{top:185px;bottom:128px}.product-top{padding-bottom:10px}.product-top h2{font-size:28px}.product-copy h3{font-size:30px;margin:8px 0}.product-copy p{font-size:12px;margin:8px 0}.product-copy .eyebrow{font-size:10px}.product-visual{height:180px;min-height:150px;margin-top:18px}.category-nav{bottom:12px}.category-nav button{min-height:94px;padding:6px 9px}.category-nav button img{height:50px}.story-top,.stage-copy>.eyebrow{top:103px}.story-sticky.light-scene .stage-copy h1,.story-sticky[data-process-stage="6"] #stage-heading,.story-sticky.delivery-scene .stage-copy h1{top:18%!important;font-size:clamp(26px,8.7vw,40px)}.finale-copy p{font-size:9px}.finale-copy h2{font-size:17px}.finale-copy{bottom:20.8%}.story-sticky.light-scene .stage-description,.story-sticky.delivery-scene .stage-description{bottom:21%}}
@media(prefers-reduced-motion:reduce){.order.is-in-view .order-bag,.order.is-in-view .order-bucket{animation:none}.order-composition,.order h2{transform:none;opacity:1;will-change:auto}.about-pattern{transform:none}.about-heading-icon{transform:none}.product-sticky{height:auto;min-height:0}.product-stage{inset:auto}.product{min-height:580px}.product-copy .button{position:static}.product-visual{height:290px;max-height:none}.category-nav{position:relative;inset:auto}.reduced-story h1{font-size:clamp(44px,9vw,92px);line-height:1.2}.reduced-story{padding-top:140px}}

/* Keep the entire opening preparation story in its original brand typography. */
#story,.reduced-story,.in-story .header{--display:'Barlow Condensed','Impact','Arial Narrow',sans-serif;--body:'DM Sans',Arial,sans-serif;font-family:var(--body);font-style:normal;line-height:1.5}
#story #stage-heading{font-family:var(--display);font-size:clamp(85px,10.5vw,170px);font-weight:900;font-style:normal;line-height:.9;letter-spacing:-.025em;text-transform:uppercase}
#story .story-sticky[data-process-stage="5"] #stage-heading{font-size:clamp(60px,10.5vw,165px)}
#story .light-scene #stage-heading{font-size:clamp(38px,5.3vw,84px);line-height:.98}
#story .stage-description{font-weight:600;line-height:1.4}
#story .light-scene .stage-description{font-weight:400}
#story .eyebrow,#story .story-top,#story .scene-note,#story .process-side-note,#story .scroll-cue span{font-weight:700;letter-spacing:.08em;text-transform:uppercase}
#story .story-bottom,#story .text-link,.in-story .process-controls{font-weight:600}
#story .stage-progress button span{font-family:var(--body);font-weight:600;letter-spacing:.025em;text-transform:uppercase}
#story .button,.reduced-story .button{font-family:var(--body);font-weight:700;text-transform:uppercase}
#story .finale-copy h2{font-family:var(--display);font-weight:800;line-height:1;letter-spacing:-.025em;text-transform:uppercase}
#story .finale-copy p{font-family:var(--body)}
.reduced-story h1{font-family:var(--display);font-weight:800;line-height:.95;letter-spacing:-.025em;text-transform:uppercase}
@media(max-width:650px){#story #stage-heading{font-size:18vw}#story .story-sticky[data-process-stage="5"] #stage-heading{font-size:14vw}#story .light-scene #stage-heading{font-size:clamp(32px,10vw,64px)}#story .stage-progress button span{letter-spacing:0}}
@media(max-width:650px) and (max-height:760px){#story .light-scene #stage-heading{font-size:clamp(28px,9.5vw,52px)}}

/* September 26: product spacing, continuous ribbon and the closing animations. */
.product[data-product="0"] .product-visual{display:grid;grid-template-columns:minmax(0,1fr) clamp(72px,7.5vw,112px);grid-template-rows:minmax(0,1fr);column-gap:clamp(44px,5vw,68px);padding-left:4%;align-items:start}
.product[data-product="0"] .main-product{grid-column:1;grid-row:1;width:100%;height:100%;min-width:0;min-height:0;max-height:100%;margin:0;object-position:right center;align-self:center}
.product[data-product="0"] .official-seal{position:relative;grid-column:2;grid-row:1;right:auto;top:auto;margin:18px 0 0;width:100%;height:auto;aspect-ratio:1;align-self:start}
.brand-ribbon{padding:18px 0 22px;overflow:hidden}
.ribbon-track{display:flex;width:max-content;animation:ribbon-loop var(--ribbon-duration,45s) linear infinite;will-change:transform}
.ribbon-group{display:flex;flex:none;width:max-content}
.brand-ribbon .ribbon-unit{display:block;flex:none;padding-right:28px;white-space:nowrap;animation:none;font:400 35px/1.35 var(--display)}
.ribbon-unit i{font-style:normal;display:inline-block;margin-inline:12px}
@keyframes ribbon-loop{to{transform:translateX(-50%)}}
.order{isolation:isolate}
.order-pattern{position:absolute;inset:-70px -35px;display:grid;grid-auto-rows:125px;place-items:center;overflow:hidden;pointer-events:none;opacity:.12;z-index:-1;transform:translate3d(0,var(--order-pattern-y,0px),0);mask-image:radial-gradient(ellipse at center,rgba(0,0,0,.24) 12%,#000 80%);-webkit-mask-image:radial-gradient(ellipse at center,rgba(0,0,0,.24) 12%,#000 80%)}
.order-pattern img{display:block;width:68px;height:68px;object-fit:contain;transform:rotate(-9deg)}
.order-pattern img:nth-child(3n+2){transform:rotate(12deg);width:62px;height:62px}
.order-pattern img:nth-child(3n){transform:rotate(-4deg);width:65px;height:65px}
.order-title-line{display:block}
.order-title-line:first-child{transform:translateX(calc(var(--order-spread,0px)*-.18))}
.order-title-line:last-child{transform:translateX(calc(var(--order-spread,0px)*.18))}
.order-composition{overflow:visible;perspective:1000px}
.order-bag-wrap{position:absolute;width:66%;left:-3%;top:4%;transform:translate3d(calc(var(--order-spread,0px)*-1 + var(--order-pointer-x,0px)*-.7),var(--order-pointer-y,0px),0) rotate(calc(var(--order-turn,0deg)*-1));transform-origin:70% 80%}
.order-bucket-wrap{position:absolute;width:49%;right:7%;top:-8%;transform:translate3d(calc(var(--order-spread,0px) + var(--order-pointer-x,0px)),calc(var(--order-pointer-y,0px)*-.8),35px) rotate(var(--order-turn,0deg));transform-origin:45% 85%}
.order-bag-wrap>.order-bag,.order-bucket-wrap>.order-bucket{position:relative;inset:auto;width:100%;height:auto;max-width:none}
.order.is-in-view .order-bag{animation:order-bag-drift 6.5s ease-in-out infinite}
.order.is-in-view .order-bucket{animation:order-bucket-drift 5.5s ease-in-out infinite}
.order .order-trigger{box-shadow:0 10px 28px #d71f3818;transition:transform .3s,background .3s,box-shadow .3s}
.order .order-trigger:hover{box-shadow:0 14px 32px #d71f3830;transform:translateY(-5px)}
.order .order-trigger span{display:inline-block;transition:transform .3s}
.order .order-trigger:hover span{transform:translate(3px,-3px)}
@keyframes order-bag-drift{0%,100%{transform:translate3d(-5px,3px,0) rotate(-8deg)}50%{transform:translate3d(5px,-16px,0) rotate(-3deg)}}
@keyframes order-bucket-drift{0%,100%{transform:translate3d(2px,-12px,0) rotate(7deg)}50%{transform:translate3d(-5px,9px,0) rotate(2deg)}}
.footer-statement{padding-bottom:35px}
.footer-statement>.footer-phrase{display:inline-block;position:relative;--write-delay:0s}
.footer-statement>.footer-phrase:nth-child(2){--write-delay:1.65s}
.footer-ink{display:block;padding-right:.04em}
.footer-underline{position:absolute;inset:auto 2% -12px;width:96%;height:20px;opacity:.7;pointer-events:none}
.footer-underline path{stroke-dasharray:1;stroke-dashoffset:0}
.footer-statement.draw-ready .footer-ink{clip-path:inset(-15% 100% -20% -2%)}
.footer-statement.draw-ready .footer-underline path{stroke-dashoffset:1}
.footer-statement.is-drawing .footer-ink{animation:footer-write 2.5s cubic-bezier(.25,.5,.45,1) var(--write-delay) both}
.footer-statement.is-drawing .footer-underline path{animation:footer-underline .85s ease calc(var(--write-delay) + 1.85s) both}
@keyframes footer-write{from{clip-path:inset(-15% 100% -20% -2%)}to{clip-path:inset(-15% -2% -20% -2%)}}
@keyframes footer-underline{to{stroke-dashoffset:0}}
.designer-credit{display:inline-flex;gap:.35em;align-items:baseline;flex-wrap:wrap}
.designer-credit>span{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
@media(max-width:650px){
 .product[data-product="0"] .product-visual{grid-template-columns:minmax(0,1fr) clamp(54px,16vw,72px);column-gap:32px;padding-left:0}
 .product[data-product="0"] .official-seal{margin-top:12px}
 .brand-ribbon .ribbon-unit{font-size:29px;padding-right:24px}.ribbon-unit i{margin-inline:8px}
 .order-pattern{opacity:.10}.order-pattern img{width:56px;height:56px}.order-pattern img:nth-child(3n+2){width:52px;height:52px}.order-pattern img:nth-child(3n){width:55px;height:55px}
 .order-bag-wrap{width:77%;left:-11%;top:17%}.order-bucket-wrap{width:62%;right:-1%;top:-8%}
 .footer-underline{bottom:-8px;height:12px}.footer-statement>.footer-phrase{margin-bottom:.18em}
 .footer-bottom{gap:16px;flex-wrap:wrap}.designer-credit{font-size:12px}
}
@media(prefers-reduced-motion:reduce){
 .ribbon-track{animation:none;will-change:auto}.order-pattern,.order-title-line:first-child,.order-title-line:last-child,.order-bag-wrap,.order-bucket-wrap{transform:none}
 .order.is-in-view .order-bag,.order.is-in-view .order-bucket{animation:none}
 .footer-statement.draw-ready .footer-ink,.footer-statement.is-drawing .footer-ink{clip-path:none;animation:none}
 .footer-statement.draw-ready .footer-underline path,.footer-statement.is-drawing .footer-underline path{stroke-dashoffset:0;animation:none}
}

/* Keep the opening free of imagery in loading and WebGL fallback views. */
.scene-fallback[hidden]{display:none!important}

/* Give the sandwich package and its clap icon separate layout space. */
.product[data-product="3"] .product-visual{display:grid;grid-template-columns:minmax(0,1fr) clamp(62px,6vw,88px);grid-template-rows:minmax(0,1fr);column-gap:clamp(36px,4vw,56px);padding-left:4%;align-items:center}
.product[data-product="3"] .main-product.sandwich{grid-column:1;grid-row:1;width:100%;height:100%;min-width:0;min-height:0;max-width:100%;max-height:100%;margin:0;object-fit:contain;object-position:center}
.product[data-product="3"] .product-brand-badge{position:relative;grid-column:2;grid-row:1;right:auto;top:auto;width:100%;height:auto;aspect-ratio:1;margin:14px 0 0;align-self:start}

/* Clear sans-serif supporting copy, with the existing display headings. */
.about-copy>p,.about-copy .about-learn,.footer-top nav,.footer-top nav a,.footer-top nav button,.footer-bottom{font-family:'DM Sans',Arial,sans-serif;font-style:normal;letter-spacing:0}
.about-copy>p:not(.eyebrow){font-size:16px;font-weight:400;line-height:1.7}
.about-copy>.eyebrow{font-size:14px;font-weight:600;letter-spacing:.035em}
.about-copy .about-learn{font-size:15px;font-weight:600}
.footer-top nav,.footer-top nav a,.footer-top nav button{font-size:15px;font-weight:500}
.footer-bottom{font-size:13px;font-weight:400;line-height:1.6}
@media(max-width:650px){
 .product[data-product="3"] .product-visual{grid-template-columns:minmax(0,1fr) 52px;column-gap:28px;padding-left:0}
 .product[data-product="3"] .product-brand-badge{margin-top:12px}
 .about-copy>p:not(.eyebrow){font-size:16px}.footer-top nav,.footer-top nav a,.footer-top nav button{font-size:14px}.footer-bottom,.footer-bottom .designer-credit{font-size:12px}
}

/* September 28 review: stacked brand mark and a shorter, more responsive scroll story. */
.header{height:90px;padding-block:8px}
.header .logo{width:74px;height:74px;object-fit:contain}
.in-story .header{height:194px;padding-block:14px}
.in-story .header>a{display:grid;place-items:center;width:160px;height:166px;padding:14px 18px;flex-shrink:0}
.in-story .header .logo{width:122px;height:138px}
footer .logo{width:108px;height:126px;padding:10px;flex-shrink:0}
.map-link{transition:background .2s,color .2s}
.map-link:hover{background:var(--cream);color:var(--orange)}
@media(prefers-reduced-motion:no-preference){
 .story{height:380vh}
 .collection{height:175vh}
 .products{height:340vh}
}
@media(max-width:650px){
 .header{height:84px;padding-block:7px}
 .header .logo{width:64px;height:68px}
 .in-story .header{height:146px;padding-block:10px}
 .in-story .header>a{width:112px;height:126px;padding:10px 12px}
 .in-story .header .logo{width:88px;height:106px}
 footer .logo{width:92px;height:108px;padding:8px}
}
@media(max-width:650px) and (prefers-reduced-motion:no-preference){
 .story{height:330vh}
 .collection{height:160vh}
 .products{height:310vh}
}

/* Keep the larger logo panel clear of the story copy on compact screens. */
@media(min-width:651px) and (max-height:650px){
 .in-story .header{height:154px;padding-block:10px}
 .in-story .header>a{width:132px;height:134px;padding:10px 13px}
 .in-story .header .logo{width:106px;height:114px}
}
@media(max-width:650px){
 #story .story-sticky.light-scene #stage-heading{top:max(20%,154px)!important}
}

/* Transparent product photography, with separate depth for food and brand artwork. */
.product-visual{transform-style:preserve-3d;overflow:visible}
.product-visual>.product-brand-shape{transform:translateZ(-35px)}
.product-visual>.main-product.product-cutout{position:relative;mix-blend-mode:normal;object-fit:contain;object-position:center;filter:drop-shadow(0 22px 18px rgba(92,27,17,.2));backface-visibility:hidden}
.product-visual>.main-product.burger{width:76%;height:94%;margin:0 0 0 9%}
.product-visual>.main-product.food{width:90%;height:96%;margin:0 0 0 5%}
.product-visual>.product-brand-badge{transform:translateZ(80px) rotate(9deg)}
.product[data-product="0"] .product-visual{grid-template-columns:minmax(0,1fr) 72px;column-gap:14px;padding-left:0}
.product[data-product="0"] .main-product.meal-cutout{width:100%;height:100%;margin:0;object-position:center}
.product[data-product="0"] .official-seal{margin-top:0}
.product[data-product="3"] .product-visual{grid-template-columns:minmax(0,1fr) 64px;column-gap:16px;padding-left:0}
.product[data-product="3"] .main-product.wrap{height:100%;width:100%;margin:0}
.featured-window{perspective:1000px;transform-style:preserve-3d}
.featured-window>img{mix-blend-mode:normal;filter:drop-shadow(0 15px 12px rgba(92,27,17,.18));will-change:transform}
.satellite>img{mix-blend-mode:normal;filter:drop-shadow(0 12px 9px rgba(65,9,19,.2));transition:transform .22s ease}
.satellite:hover>img,.satellite:focus-visible>img{transform:perspective(650px) translateY(-5px) rotateY(-7deg) scale(1.04)}
.category-nav button img{mix-blend-mode:normal;filter:drop-shadow(0 4px 4px rgba(92,27,17,.12))}
.scene-fallback img.bucket-meal-cutout,.reduced-story img.bucket-meal-cutout{height:auto;aspect-ratio:auto;object-fit:contain;object-position:center;border-radius:0;mix-blend-mode:normal;filter:drop-shadow(0 18px 15px rgba(92,27,17,.16))}
@media(max-width:650px){
 .product[data-product="0"] .product-visual{grid-template-columns:minmax(0,1fr) 52px;column-gap:10px}
 .product[data-product="3"] .product-visual{grid-template-columns:minmax(0,1fr) 48px;column-gap:12px}
 .product-visual>.main-product.burger{width:74%;height:94%;margin-left:6%}
 .product-visual>.main-product.product-cutout{filter:drop-shadow(0 13px 10px rgba(92,27,17,.18))}
}
@media(prefers-reduced-motion:reduce){
 .product-visual,.featured-window{transform-style:flat;perspective:none}
 .product-visual>.product-brand-shape,.product-visual>.product-brand-badge,.featured-window>img,.satellite>img{transform:none!important;will-change:auto;transition:none}
}

/* The greeting and brand mark repeat smoothly while the mascot is visible. */
.about-visual.about-mascot{width:100%;max-width:480px;aspect-ratio:1;max-height:none;margin-inline:auto;overflow:hidden;border:0;border-radius:0;background:transparent;box-shadow:none}
.about-mascot-art{display:block;width:100%;height:auto;overflow:hidden;transform:scale(1.25);transform-origin:50% 54%}
.mascot-character,.mascot-shadow{opacity:0}
.mascot-brand{opacity:1}
.mascot-character,.mascot-brand,.mascot-wing,.mascot-far-wing,.mascot-comb,.mascot-eyes,.mascot-shadow,.mascot-stamp{transform-box:view-box}
.mascot-character{transform-origin:300px 455px}
.mascot-brand{transform-origin:310px 324px}
.mascot-wing{transform-origin:292px 334px}
.mascot-far-wing{transform-origin:400px 337px}
.mascot-comb{transform-origin:337px 167px}
.mascot-eyes{transform-origin:337px 226px}
.mascot-shadow{transform-origin:300px 508px}
.mascot-stamp{transform-origin:222px 418px}
.mascot-ready .mascot-character,.mascot-ready .mascot-shadow{opacity:1}
.mascot-ready .mascot-brand{opacity:0}
.is-playing :is(.mascot-character,.mascot-brand,.mascot-wing,.mascot-far-wing,.mascot-comb,.mascot-eyes,.mascot-shadow,.mascot-stamp){animation-duration:7.2s;animation-timing-function:cubic-bezier(.4,0,.2,1);animation-fill-mode:both;animation-iteration-count:infinite;animation-play-state:var(--mascot-play-state,paused)}
.is-playing .mascot-character{animation-name:mascot-greeting}
.is-playing .mascot-brand{animation-name:mascot-finale}
.is-playing .mascot-wing{animation-name:mascot-wave}
.is-playing .mascot-far-wing{animation-name:mascot-far-wave}
.is-playing .mascot-comb{animation-name:mascot-comb-bounce}
.is-playing .mascot-eyes{animation-name:mascot-blink}
.is-playing .mascot-shadow{animation-name:mascot-ground}
.is-playing .mascot-stamp{animation-name:mascot-stamp-in}
@keyframes mascot-greeting{
 0%,8%{opacity:1;transform:translateY(0) rotate(0)}
 15%{transform:translateY(4px) scale(1.025,.975)}
 24%{transform:translateY(-14px) rotate(-3deg) scale(.985,1.015)}
 33%{transform:translateY(0) rotate(2deg) scale(1.02,.98)}
 42%{transform:translateY(-5px) rotate(-1deg) scale(1)}
 50%{opacity:1;transform:translateY(0) rotate(0) scale(1)}
 58%,90%{opacity:0;transform:translateY(4px) rotate(0) scale(.95)}
 100%{opacity:1;transform:translateY(0) rotate(0) scale(1)}
}
@keyframes mascot-wave{0%,8%,48%,100%{transform:rotate(0)}20%,36%{transform:rotate(17deg)}28%,44%{transform:rotate(-7deg)}}
@keyframes mascot-far-wave{0%,8%,48%,100%{transform:rotate(0)}20%,36%{transform:rotate(-20deg)}28%,44%{transform:rotate(8deg)}}
@keyframes mascot-comb-bounce{0%,12%,48%,100%{transform:rotate(0)}24%,39%{transform:rotate(-8deg)}31%,45%{transform:rotate(5deg)}}
@keyframes mascot-blink{0%,9%,15%,38%,44%,100%{transform:scaleY(1)}12%,41%{transform:scaleY(.12)}}
@keyframes mascot-ground{0%,8%,33%,48%,100%{opacity:.12;transform:scaleX(1)}24%,42%{opacity:.06;transform:scaleX(.82)}58%,90%{opacity:0;transform:scaleX(.9)}}
@keyframes mascot-finale{0%,52%,100%{opacity:0;transform:translateY(10px) scale(.91)}67%{opacity:1;transform:translateY(-3px) scale(1.018)}78%,90%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes mascot-stamp-in{0%,65%,100%{opacity:0;transform:scale(.82) rotate(-9deg)}80%,90%{opacity:1;transform:scale(1) rotate(0)}}
@media(max-width:650px){.about-visual.about-mascot{max-width:380px}}
@media(prefers-reduced-motion:reduce){
 .about-visual.about-mascot.reveal{opacity:1;transform:none;transition:none}
 .about-mascot-art *{animation:none!important}
 .about-mascot-art .mascot-character,.about-mascot-art .mascot-shadow{opacity:0}
 .about-mascot-art .mascot-brand,.about-mascot-art .mascot-stamp{opacity:1;transform:none}
}

/* Fillets join the six-category menu; beverages use the actual branded drinks. */
.category-nav{grid-template-columns:repeat(6,minmax(0,1fr))}
.category-nav button .category-drinks{display:flex;align-items:center;justify-content:center;gap:0;width:max-content;max-width:100%;height:66px;margin:0 auto 8px;opacity:1}
.category-nav .category-drinks svg{display:block;flex:none;width:auto;height:100%;max-width:50%;margin:0;filter:drop-shadow(0 4px 4px rgba(92,27,17,.12))}
.product[data-product="4"] .product-visual,.product[data-product="5"] .product-visual{display:grid;grid-template-columns:minmax(0,1fr) 64px;grid-template-rows:minmax(0,1fr);column-gap:16px;align-items:center}
.product[data-product="4"] .product-brand-badge,.product[data-product="5"] .product-brand-badge{position:relative;inset:auto;width:100%;height:auto;margin:0;align-self:start}
.product-visual>.main-product.fillets{width:100%;height:100%;max-height:100%;margin:0}
.product-visual>.main-product.drinks-pair{position:relative;display:flex;align-items:flex-end;justify-content:center;gap:0;width:100%;height:100%;margin:0;transform-style:preserve-3d;mix-blend-mode:normal}
.drinks-pair .drink-photo{display:block;width:52%;height:96%;max-width:none;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 16px 12px rgba(92,27,17,.18));backface-visibility:hidden}
.drinks-pair .citrus-drink{transform:translateZ(24px) rotate(-5deg);margin-right:-4%}
.drinks-pair .iced-coffee{height:87%;transform:translateZ(48px) rotate(5deg)}
#featured-image[hidden],.featured-drinks[hidden]{display:none}
.featured-drinks{position:relative;z-index:1;display:flex;align-items:flex-end;justify-content:center;width:82%;height:82%;margin-left:12%;padding:10px 0 42px;transform-style:preserve-3d}
.featured-drinks .drink-photo{display:block;width:50%;height:100%;filter:drop-shadow(0 12px 10px rgba(92,27,17,.16))}
@media(max-width:650px){
 .product[data-product="4"] .product-visual,.product[data-product="5"] .product-visual{grid-template-columns:minmax(0,1fr) 48px;column-gap:12px}
 .category-nav button .category-drinks{height:62px}
 .drinks-pair .drink-photo{filter:drop-shadow(0 10px 8px rgba(92,27,17,.16))}
 .featured-drinks{padding:0 0 62px}
}
@media(max-width:650px) and (max-height:760px){.category-nav button .category-drinks{height:50px}}
@media(prefers-reduced-motion:reduce){.drinks-pair .drink-photo,.featured-drinks{transform:none!important}}

.store-link-note{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Keep carousel controls centred within the cream artwork at every size. */
.featured-bottom{left:50%;right:auto;bottom:var(--feature-controls-bottom,14px);width:max-content;max-width:calc(100% - 16px);transform:translateX(-50%);justify-content:center;flex-wrap:nowrap;gap:12px}
.featured-arrows{flex:none;gap:8px}
.featured-arrows button{width:44px;height:44px;flex:none;font-size:24px}
.product-menu-order{display:none}

/* Client mobile order: heading, product photo, categories, copy, order link.
   The selected article's children share the surrounding flex layout. */
@media(max-width:650px), (max-width:950px) and (max-height:500px){
 .products{height:auto}
 .product-sticky{position:relative;top:auto;display:flex;flex-direction:column;gap:20px;height:auto;min-height:0;overflow:visible;padding:32px 5% max(24px,env(safe-area-inset-bottom))}
 .product-top{order:0;display:block;flex:none;padding-bottom:16px}
 .product-top h2{font-size:clamp(27px,7.5vw,36px);line-height:1.25}
 .product-top .eyebrow{font-size:12px;margin-bottom:8px}
 .category-nav{order:2;position:relative;inset:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;min-width:0;gap:10px 12px;padding:0;overflow:visible;scroll-snap-type:none}
 .category-nav button{width:100%;min-width:0;max-width:none;min-height:90px;padding:8px 4px 6px;font-size:14px;line-height:1.4;text-align:center;overflow-wrap:anywhere}
 .category-nav button img,.category-nav button .category-drinks{height:54px;max-width:90%;margin:0 auto 8px}
 .category-nav button:hover{transform:none}
 .product-stage{display:contents}
 .product{position:relative;inset:auto;display:none;flex-direction:column;align-items:stretch;min-width:0;min-height:0;gap:18px;margin:0}
 .product.active{display:contents}
 .product-copy{order:3;display:block;min-width:0;min-height:0}
 .product-copy .eyebrow{font-size:12px}
 .product-copy h3{max-width:100%;font-size:clamp(28px,8vw,36px);line-height:1.2;margin:8px 0}
 .product-copy h3 br{display:none}
 .product-copy>p:not(.eyebrow){max-width:none;font-size:14px;line-height:1.6;margin:0}
 .product-copy .button{display:none}
 .product[data-product] .product-visual{--product-badge-size:clamp(58px,16vw,70px);order:1;display:grid;grid-template-columns:minmax(0,1fr) var(--product-badge-size);grid-template-rows:minmax(0,1fr);column-gap:10px;align-items:center;align-self:stretch;flex:none;width:100%;min-width:0;height:clamp(230px,70vw,340px);min-height:0;max-height:none;padding:12px 4px;margin:0}
 .product[data-product] .product-visual>.main-product{grid-column:1;grid-row:1;width:100%;height:100%;max-width:100%;max-height:100%;min-width:0;min-height:0;margin:0;padding:0;object-fit:contain;object-position:center}
 .product[data-product] .product-visual>.product-brand-shape{left:0;top:0;width:calc(100% - var(--product-badge-size) - 10px);height:100%;transform:none}
 .product[data-product] .product-visual>.product-brand-badge{position:relative;inset:auto;grid-column:2;grid-row:1;align-self:start;width:100%;height:auto;max-width:var(--product-badge-size);margin:8px 0 0;transform:none}
 .product-menu-order{order:4;display:flex;align-self:stretch;justify-content:center;min-height:48px;font-size:16px;margin:0;gap:24px}
 .about{display:flex;flex-direction:column;align-items:stretch;gap:18px;padding:36px 7%}
 .about-copy{display:contents}
 .about-copy>.eyebrow{order:0;margin:0;width:100%}
 .about-heading{order:1;width:100%;max-width:none}
 .about-heading h2{margin:0}
 .about-visual.about-mascot{order:2;margin:8px auto}
 .about-copy>p:not(.eyebrow){order:3;width:100%;max-width:none;margin:0}
 .about-learn{order:4;align-self:flex-start;margin-top:6px}
 .about-reveal-text{opacity:1;transform:none}
 .about-visual.reveal{opacity:1;transform:none;transition:none}
 .about-visual.about-mascot{border:0;padding:12px}
 .collection{height:auto;scroll-margin-top:96px}
 .collection-sticky{position:relative;top:auto;height:auto;min-height:0;padding:32px 5% 28px;overflow:visible}
 .collection-heading{position:relative;inset:auto;width:100%;margin:0 0 20px}
 .collection-heading .eyebrow{font-size:12px;margin:0 0 8px}
 .collection-heading h2{font-size:clamp(30px,8.5vw,40px);line-height:1.2;margin:0}
 .collage{position:relative;inset:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 20px;align-items:center;perspective:none}
 .satellite{position:relative;inset:auto;justify-self:center;width:100%;height:auto;padding:0;min-width:0;will-change:auto}
 .sat-1{grid-column:1;grid-row:1}.sat-3{grid-column:2;grid-row:1}
 .sat-2{grid-column:1;grid-row:3}.sat-4{grid-column:2;grid-row:3}
 .satellite>img{display:block;width:100%;height:68px;max-width:100%;margin:auto}
 .satellite>span{font-size:14px;line-height:1.4;text-align:center;padding:6px 0 0;overflow-wrap:anywhere}
 .satellite:hover>img,.satellite:focus-visible>img{transform:none}
 .featured-window{grid-column:1/-1;grid-row:2;justify-self:center;position:relative;inset:auto;width:min(68vw,250px);height:auto;aspect-ratio:174/175;transform:none;transform-style:flat;perspective:none;will-change:auto}
 .featured-window>img,.featured-drinks{width:90%;height:90%;max-height:90%;margin-left:5%;padding:0 0 52px}
 .featured-window>img,.featured-drinks,.featured-drinks *{pointer-events:none}
 .featured-arrows button{width:44px;height:44px;touch-action:manipulation}
 .featured-bottom{font-size:14px}
 .collection-menu-link{display:block;position:relative;inset:auto;transform:none;width:100%;margin:18px 0 0;padding:10px 0;text-align:center;font-size:14px}
}
@media(prefers-reduced-motion:reduce) and (max-width:650px), (prefers-reduced-motion:reduce) and (max-width:950px) and (max-height:500px){
 .product:not(.active){display:none}
 .product.active{display:contents}
}

/* Mobile footer: logo, one navigation row, then social icons. */
@media(max-width:650px), (max-width:950px) and (max-height:500px){
 .footer-top{flex-direction:column;flex-wrap:nowrap;align-items:center;gap:20px}
 .footer-top nav{display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:8px;width:100%;max-width:380px;min-width:0}
 .footer-top nav a,.footer-top nav button{display:inline-flex;align-items:center;justify-content:center;flex:none;min-width:44px;min-height:44px;font-size:14px;white-space:nowrap}
 .footer-social{align-self:center;flex-wrap:nowrap;gap:12px}
}

/* Give the product ordering actions a larger, easy-to-tap target. */
.product-copy .button{min-width:220px;min-height:60px;padding:18px 28px;font-size:18px;line-height:1.3;gap:36px}
@media(max-width:650px), (max-width:950px) and (max-height:500px){
 .product-menu-order{min-height:60px;padding:18px 24px;font-size:18px;line-height:1.3;gap:28px}
}

/* Continuous mobile artwork motion, independent of scrolling or mouse input. */
@media(max-width:650px) and (prefers-reduced-motion:no-preference), (max-width:950px) and (max-height:500px) and (prefers-reduced-motion:no-preference){
 .featured-window>img,.featured-drinks,.product.active .main-product{animation:mobile-food-float 6.8s ease-in-out infinite;animation-play-state:var(--mobile-motion-state,paused);transform-origin:50% 65%;backface-visibility:hidden;will-change:transform}
 .satellite>img{animation:mobile-small-float 5.6s ease-in-out infinite;animation-play-state:var(--mobile-motion-state,paused);transition:none;will-change:transform}
 .sat-1>img{animation-delay:-.8s}.sat-2>img{animation-delay:-2.4s}.sat-3>img{animation-delay:-1.6s}.sat-4>img{animation-delay:-3.2s}
 .featured-brand-shape,.product.active .product-brand-shape{animation:mobile-mark-breathe 8s ease-in-out infinite;animation-play-state:var(--mobile-motion-state,paused);transform-origin:center}
 .product.active .product-brand-badge{animation:mobile-badge-sway 6.4s ease-in-out infinite;animation-play-state:var(--mobile-motion-state,paused);transform-origin:center}
 .product.active .main-product{animation-delay:-1.4s}
 .category-nav button.active>img,.category-nav button.active>.category-drinks{animation:mobile-category-select .55s cubic-bezier(.2,.75,.25,1) both}
}
@keyframes mobile-food-float{0%,100%{transform:perspective(850px) translate3d(-2px,4px,0) rotateX(2deg) rotateY(-6deg) rotateZ(-2deg) scale(.95)}35%{transform:perspective(850px) translate3d(3px,-10px,12px) rotateX(-2deg) rotateY(5deg) rotateZ(1deg) scale(.98)}70%{transform:perspective(850px) translate3d(-2px,-4px,6px) rotateX(1deg) rotateY(3deg) rotateZ(-.5deg) scale(.97)}}
@keyframes mobile-small-float{0%,100%{transform:translate3d(-1px,0,0) rotate(-2deg) scale(.97)}50%{transform:translate3d(2px,-7px,0) rotate(3deg) scale(1)}}
@keyframes mobile-mark-breathe{0%,100%{transform:translateY(3px) rotate(-2deg) scale(.95)}50%{transform:translateY(-3px) rotate(2deg) scale(.99)}}
@keyframes mobile-badge-sway{0%,100%{transform:translateY(0) rotate(-5deg) scale(.96)}50%{transform:translateY(-4px) rotate(5deg) scale(1)}}
@keyframes mobile-category-select{0%{transform:translateY(0) scale(.94)}65%{transform:translateY(-5px) scale(1.06)}100%{transform:translateY(-2px) scale(1)}}

/* A direct WhatsApp shortcut, with room for mobile safe areas. */
.whatsapp-float{position:fixed;right:max(24px,env(safe-area-inset-right));bottom:max(24px,env(safe-area-inset-bottom));z-index:70;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;max-width:calc(100vw - 32px);padding:13px 20px;border:1px solid rgba(255,255,255,.5);border-radius:999px;background:#087f42;color:#fff;box-shadow:0 6px 24px rgba(0,0,0,.2);font:600 16px/1.25 'DM Sans',Arial,sans-serif;text-decoration:none;white-space:nowrap;touch-action:manipulation;transition:background .2s,box-shadow .2s}
.whatsapp-float svg{flex:none;width:24px;height:24px}
.whatsapp-float:hover{background:#066934;box-shadow:0 8px 28px rgba(0,0,0,.25)}
.whatsapp-float:focus-visible{outline:3px solid var(--red);outline-offset:4px}
.contact-links{display:grid;gap:8px;margin:0 0 24px}
.contact-links a{display:flex;align-items:center;min-height:44px;font:500 16px/1.45 'DM Sans',Arial,sans-serif;text-decoration:underline;text-underline-offset:4px}
.contact-links a:focus-visible{outline:2px solid currentColor;outline-offset:3px}
footer .footer-bottom{padding-bottom:70px}
@media(max-width:650px),(max-width:950px) and (max-height:500px){
 .whatsapp-float{right:max(14px,env(safe-area-inset-right));bottom:calc(14px + env(safe-area-inset-bottom));min-height:50px;padding:12px 16px;font-size:14px;gap:8px}
 .whatsapp-float svg{width:23px;height:23px}
}
@media(prefers-reduced-motion:reduce){.whatsapp-float{transition:none}}
