/* v2: the hero action is a separate, bottom-safe layer so it never sits on the plated food. */
.hero-action{position:absolute;z-index:4;left:7vw;bottom:max(76px,calc(28px + env(safe-area-inset-bottom)));opacity:0;visibility:hidden;transform:translateY(36px)}
.hero-action .button{margin:0;min-height:48px}
/* One unmasked, single-path WhatsApp mark: no pseudo-icon, shadow, stroke, or clipped paint. */
.whatsapp-button .whatsapp-icon{width:18px;height:18px;flex:0 0 18px;display:block;overflow:visible;fill:currentColor;stroke:none;filter:none;box-shadow:none}
.whatsapp-button .whatsapp-icon path{fill:currentColor;stroke:none;filter:none}
.whatsapp-button::before,.whatsapp-button::after{content:none!important;display:none!important}
.hero-action .whatsapp-button{box-shadow:none!important;background:#31452b!important;color:#fffaf0!important;border-color:#31452b!important}
.hero-action .whatsapp-button:hover{background:#263821!important;border-color:#263821!important}
.hero-action .whatsapp-button:focus-visible{outline:2px solid #31452b;outline-offset:4px}
.hero-action .whatsapp-button:hover{box-shadow:none!important}
@media(max-width:760px){
  .hero-action{left:22px;right:22px;bottom:max(76px,calc(28px + env(safe-area-inset-bottom)))}
  .hero-action .button{width:max-content;max-width:100%}
  .scroll-cue{bottom:max(26px,calc(12px + env(safe-area-inset-bottom)))}
}
/* Short mobile browser viewports retain a distinct 12px gap to the cue without entering the plate field. */
@media(max-width:760px) and (max-height:760px){
  /* At 360×740 the plate sits lower in the supplied art: reserve its final edge, then cue. */
  .hero-action{bottom:max(32px,calc(14px + env(safe-area-inset-bottom)))}
  .scroll-cue{bottom:max(4px,env(safe-area-inset-bottom))}
}
@media(prefers-reduced-motion:reduce){
  .hero-action{opacity:1!important;visibility:visible!important;transform:none!important}
}

/* Desktop/tablet three-up scenes; mobile preserves its existing pinned narrative below 761px. */
@media (min-width:761px){
  .motion-ready .documentation,.motion-ready .selection{width:min(92vw,1760px);height:auto;min-height:0;margin:clamp(34px,5vh,72px) auto;padding:0}
  .motion-ready .documentation .scene-frame,.motion-ready .selection .scene-frame{position:relative;top:auto;height:auto;overflow:visible;background:transparent;isolation:auto}
  .motion-ready .scene-frame>.heading,.motion-ready .selection .heading{position:relative;top:auto;left:auto;right:auto;z-index:auto;max-width:none;margin:0 0 clamp(18px,2.5vh,30px);color:var(--ink);pointer-events:auto;text-align:left}
  .motion-ready .selection .heading.centered{text-align:center}.motion-ready .selection .scene-frame>.heading{color:#fff}
  .motion-ready .scene-frame>.heading .kicker{color:#81703f;margin-bottom:8px}.motion-ready .scene-frame>.heading>span{margin:14px 0 0}.motion-ready .scene-frame>.heading h2{font-size:clamp(32px,4vw,58px);line-height:1.04;letter-spacing:-.06em}
  .motion-ready .stories,.motion-ready .selection-layout{position:relative;inset:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.55vw,28px);width:100%;height:clamp(350px,calc(100svh - 170px),680px);margin:0;overflow:visible}
  .motion-ready .story,.motion-ready .service,.motion-ready .service.buffet{position:relative;inset:auto;display:block;width:auto;height:auto;min-height:0;max-height:none;overflow:hidden;clip-path:none!important;background:#171614}
  .motion-ready .story img,.motion-ready .service img,.motion-ready .service:not(.buffet) img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;transform:none!important}
  .motion-ready .story:after,.motion-ready .service:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 48%,rgba(10,10,10,.80) 100%)}
  .motion-ready .story>div,.motion-ready .service>div{position:absolute;z-index:2;left:clamp(16px,1.7vw,28px);right:16px;bottom:clamp(16px,2vw,28px);max-width:none;padding:0;background:none;color:#fff}
  .motion-ready .story>div h3{font-size:clamp(17px,1.75vw,30px);line-height:1.08;letter-spacing:-.045em}.motion-ready .story>div p{font-size:10px;margin-top:7px}.motion-ready .service>div h3{font-size:clamp(30px,3.2vw,54px);line-height:1.02;margin:.04em 0}.motion-ready .service>div p{margin:0;color:var(--champagne);font-size:10px}
  .motion-ready .meal-box-service{background:#4f4439}.motion-ready .meal-box-service img{object-fit:contain;object-position:center}.motion-ready .scene-controls{display:none!important}.motion-ready .desktop-threeup-enter .story,.motion-ready .desktop-threeup-enter .service{will-change:opacity,transform}
}
@media (min-width:761px) and (max-height:700px){.motion-ready .documentation,.motion-ready .selection{margin:20px auto 34px}.motion-ready .scene-frame>.heading{margin-bottom:14px}.motion-ready .stories,.motion-ready .selection-layout{height:calc(100svh - 150px);min-height:330px}}
@media (prefers-reduced-motion:reduce) and (min-width:761px){.documentation,.selection{width:min(92vw,1760px);margin:clamp(34px,5vh,72px) auto}.documentation .scene-frame,.selection .scene-frame{position:relative;height:auto;overflow:visible}.documentation .scene-frame>.heading,.selection .scene-frame>.heading{position:relative;margin:0 0 24px;color:var(--ink);text-align:left}.selection .scene-frame>.heading.centered{text-align:center}.selection .scene-frame>.heading{color:#fff}.stories,.selection-layout{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.55vw,28px);height:clamp(350px,calc(100svh - 170px),680px);overflow:visible}.story,.service,.service.buffet{position:relative;min-height:0;height:auto;background:#171614;overflow:hidden}.story img,.service img{width:100%;height:100%;object-fit:contain;object-position:center}.meal-box-service{background:#4f4439}.story:after,.service:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 48%,rgba(10,10,10,.80) 100%)}.story>div,.service>div{left:clamp(16px,1.7vw,28px);right:16px;bottom:clamp(16px,2vw,28px);padding:0;background:none}}

@media (min-width:761px){.motion-ready .documentation,body:not(.motion-ready) .documentation{background:var(--paper)}.motion-ready .documentation .scene-frame,body:not(.motion-ready) .documentation .scene-frame{background:transparent;border:0}.motion-ready .documentation .scene-frame>.heading,body:not(.motion-ready) .documentation .scene-frame>.heading{max-width:none;padding:clamp(18px,2.6vh,30px) 0 0;margin:0 0 clamp(24px,3vh,34px);color:var(--ink)}.motion-ready .documentation .scene-frame>.heading .kicker,body:not(.motion-ready) .documentation .scene-frame>.heading .kicker{margin:0 0 9px;font-size:9px;letter-spacing:.18em;color:#81703f}.motion-ready .documentation .scene-frame>.heading h2,body:not(.motion-ready) .documentation .scene-frame>.heading h2{font-size:clamp(40px,3.55vw,54px);line-height:1.05;letter-spacing:-.055em}.motion-ready .documentation .scene-frame>.heading>span,body:not(.motion-ready) .documentation .scene-frame>.heading>span{display:none}}

/* Desktop-only Service Format editorial heading: aligns with approved Success Stories treatment; cards retain their existing framing. */
@media (min-width:761px){
  .motion-ready .selection,
  body:not(.motion-ready) .selection{background:var(--paper);color:var(--ink)}
  .motion-ready .selection .scene-frame,
  body:not(.motion-ready) .selection .scene-frame{background:transparent;border:0}
  .motion-ready .selection .scene-frame>.heading,
  body:not(.motion-ready) .selection .scene-frame>.heading{max-width:none;padding:clamp(18px,2.6vh,30px) 0 0;margin:0 0 clamp(24px,3vh,34px);color:var(--ink);text-align:left}
  .motion-ready .selection .scene-frame>.heading .kicker,
  body:not(.motion-ready) .selection .scene-frame>.heading .kicker{margin:0 0 9px;font-size:9px;letter-spacing:.18em;color:#81703f}
  .motion-ready .selection .scene-frame>.heading h2,
  body:not(.motion-ready) .selection .scene-frame>.heading h2{font-size:clamp(40px,3.55vw,54px);line-height:1.05;letter-spacing:-.055em}
  .motion-ready .selection .scene-frame>.heading>span,
  body:not(.motion-ready) .selection .scene-frame>.heading>span{display:none}
}