/* A shared pinned frame keeps heading, image, caption and controls on one timeline. */
.motion-ready .documentation,.motion-ready .selection{padding:0;margin:120px auto;width:90%;min-height:0;height:300svh;position:relative}
.motion-ready .scene-frame{position:sticky;top:76px;height:calc(100svh - 96px);overflow:hidden;background:#171614;isolation:isolate}
.motion-ready .scene-frame>.heading{position:absolute;top:35px;left:40px;right:30px;z-index:5;pointer-events:none;margin:0;text-align:left;color:#fff;max-width:50%}
.motion-ready .scene-frame>.heading h2{font-size:clamp(32px,4.1vw,62px);letter-spacing:-.06em;line-height:1.05}
.motion-ready .scene-frame>.heading .kicker{color:var(--champagne);margin-bottom:12px}
.motion-ready .scene-frame>.heading>span{margin:22px 0 0}
.motion-ready .stories,.motion-ready .selection-layout{position:absolute;inset:0;top:0;height:100%;width:100%;margin:0;display:block;overflow:hidden}
.motion-ready .story,.motion-ready .service,.motion-ready .service.buffet{position:absolute;inset:0;height:100%;min-height:0;max-height:none;width:100%;background:#171614}
.motion-ready .story img{position:absolute;right:0;top:0;width:62%;height:100%;object-fit:contain;object-position:center}
.motion-ready .story:after{background:linear-gradient(90deg,#171614 0%,#17161433 40%,transparent 65%)}
.motion-ready .story>div{left:40px;right:auto;bottom:13%;padding:0;max-width:38%;background:none}
.motion-ready .story>div h3{font-size:clamp(25px,3.4vw,48px);line-height:1.08;letter-spacing:-.045em}
.motion-ready .story>div p{font-size:11px;margin-top:15px}
.motion-ready .selection .heading{max-width:70%}
.motion-ready .service:not(.buffet) img{right:0;left:auto;width:65%;object-fit:contain}
/* Meal Box: preserve the supplied complete-box framing at every scene ratio. */
.motion-ready .meal-box-service{background:#4f4439}
.motion-ready .meal-box-service img{object-fit:contain;object-position:center}
.motion-ready .service:after{background:linear-gradient(90deg,#0a0a0ac9,transparent 80%),linear-gradient(180deg,#0a0a0a88,transparent 40%,#0a0a0a33)}
.motion-ready .service>div{left:40px;bottom:13%}
.scene-controls{display:none}.motion-ready .scene-controls{position:absolute;display:flex;gap:7px;right:28px;bottom:25px;z-index:8}
.scene-controls button{min-width:44px;min-height:44px;padding:9px;border:1px solid #ffffff55;border-radius:50%;color:white;background:#17161499;font-size:11px;cursor:pointer;transition:background .2s,border-color .2s}
.scene-controls button[aria-current="true"]{background:var(--gold);color:var(--dark);border-color:var(--gold)}
.scene-controls button:hover{border-color:var(--gold)}
.logo-wall{background:transparent;gap:0}.logo-wall>div{border-right:1px solid var(--line);border-bottom:1px solid var(--line);will-change:auto}.logo-wall img{will-change:transform,opacity;transition:none}
.brand img,.halal img{animation:brand-enter .85s cubic-bezier(.22,1,.36,1) both}.halal img{animation-delay:.12s}@keyframes brand-enter{from{opacity:0;transform:translateY(7px) scale(.9)}to{opacity:1;transform:none}}
body:not(.motion-ready) .kitchen-wrap{clip-path:none;min-height:400px}body:not(.motion-ready) .scene-frame{height:auto;overflow:visible}body:not(.motion-ready) .story>div,body:not(.motion-ready) .service>div{opacity:1!important;transform:none!important}
@media(max-width:760px){.motion-ready .documentation,.motion-ready .selection{width:100%;margin:70px auto;height:275svh}.motion-ready .scene-frame{top:68px;height:calc(100svh - 68px)}.motion-ready .scene-frame>.heading{top:27px;left:24px;right:24px;max-width:none}.motion-ready .scene-frame>.heading h2{font-size:clamp(32px,9vw,44px)}.motion-ready .scene-frame>.heading .kicker{font-size:9px}.motion-ready .story img,.motion-ready .service:not(.buffet) img{width:100%;height:100%;object-fit:cover;object-position:center}.motion-ready .story:after{background:linear-gradient(180deg,#0a0a0aba,transparent 38%,#0a0a0a22 55%,#0a0a0adb)}.motion-ready .story>div,.motion-ready .service>div{left:24px;right:24px;max-width:none;bottom:105px}.motion-ready .story>div h3{font-size:35px;max-width:300px}.motion-ready .scene-controls{bottom:25px;left:24px;right:auto}.motion-ready .service>div h3{font-size:56px}.motion-ready .service:after{background:linear-gradient(180deg,#0a0a0aa8,transparent 40%,#0a0a0acc)}body:not(.motion-ready) .stories,body:not(.motion-ready) .selection-layout{grid-template-columns:1fr}body:not(.motion-ready) .story,body:not(.motion-ready) .service{height:540px;min-height:0}.hero-photo img{mask-image:linear-gradient(to bottom,transparent,black 18%,black 84%,transparent);-webkit-mask-image:linear-gradient(to bottom,transparent,black 18%,black 84%,transparent)}}
@media(prefers-reduced-motion:reduce){.brand img,.halal img{animation:none}.scene-controls{display:none!important}.logo-wall img{transform:none!important;opacity:1!important}}
/* The generic phone scenes use cover; this specific product scene must retain its full box. */
@media(max-width:760px){.motion-ready .selection-layout .meal-box-service img{width:100%;height:100%;object-fit:contain;object-position:center}}