.home-hero{height:clamp(650px,calc(100svh - 160px),840px);position:relative;isolation:isolate;overflow:clip;background:var(--ink)}
body.home-scroll-scene .site-header{position:sticky;top:0}
body.home-scroll-scene.home-scene-released .site-header{z-index:90}
.hero-stage{position:absolute;inset:0}
.hero-sauce-field{position:absolute;inset:0;background:var(--red);clip-path:inset(100% 0% 0% 0%);pointer-events:none}
.hero-type{position:absolute;inset:0;pointer-events:none}
.hero-type h1{height:100%;width:100%;font-size:clamp(190px,26vw,430px);line-height:.91;letter-spacing:-.035em;text-wrap:nowrap}
.hero-word{position:absolute;left:7%;top:5%;transform:rotate(-5deg) skewX(-7deg);white-space:nowrap;z-index:4}
.hero-word-yellow{left:auto;right:13%;top:auto;bottom:11%;font-size:.91em;color:var(--yellow);transform:rotate(-5deg) skewX(-7deg);z-index:6}
.word-ink{display:block}
.hero-brush{position:absolute;left:6%;top:0;width:68%;height:85px;object-fit:fill;transform:rotate(-4deg);z-index:1;pointer-events:none}
.hero-tray{position:absolute;left:35%;top:4%;width:65%;height:76%;z-index:3;pointer-events:none}
.food-tilt{height:100%;width:100%;transform:rotate(-11deg);perspective:1000px}
.hero-tray img{height:100%;object-fit:contain;filter:drop-shadow(12px 32px 30px #0008)}
.hero-wings{position:absolute;left:-2%;top:36%;width:34%;height:43%;transform:rotate(14deg);z-index:5;pointer-events:none}
.hero-wings img{height:100%;object-fit:contain;filter:drop-shadow(8px 20px 22px #0008)}
.hero-sticker{position:absolute;right:1%;bottom:1%;width:clamp(170px,18vw,270px);transform:rotate(9deg);z-index:5;pointer-events:none}
.mascot-takeover{position:fixed;inset:0;display:grid;place-items:center;z-index:80;pointer-events:none;visibility:hidden;opacity:0;overflow:clip}
.mascot-takeover img{width:min(58vw,72vh,720px);height:auto;filter:drop-shadow(14px 30px 24px #0005)}
body.nav-open .mascot-takeover{display:none}
.hero-bottom{position:absolute;left:var(--space);right:var(--space);bottom:35px;display:flex;justify-content:space-between;align-items:flex-end;gap:30px;z-index:10}
.hero-copy p{font-size:16px;line-height:1.6;max-width:260px;margin-bottom:20px}
.hero-buttons{display:flex;align-items:center;gap:25px}
.hero-buttons .button-yellow:hover{background:var(--cream);color:var(--ink)}
.hero-location{position:absolute;right:var(--space);top:36px;font-size:12px;font-weight:700;letter-spacing:.06em}
.hero-location a{display:inline-flex;align-items:center;gap:10px;min-height:44px}
.hero-location svg{width:17px;height:17px}
@media(min-width:1600px){.hero-tray{left:34%;width:62%}.hero-word-yellow{right:15%;bottom:10%}.hero-wings{left:0;width:33%}}
@media(max-width:1100px) and (min-width:781px){.hero-type h1{font-size:27vw}.hero-word-yellow{right:15%;bottom:17%}.hero-tray{left:31%;width:69%;top:8%;height:67%}.hero-sticker{width:190px;bottom:8%}.hero-wings{top:33%;width:37%;height:42%}.hero-copy p{font-size:15px}}
@media(max-width:780px){
  .home-hero{height:auto;min-height:0;padding:0 24px 36px;overflow:clip}
  .hero-stage{position:relative;margin:0 -24px;width:calc(100% + 48px);height:clamp(440px,132vw,620px)}
  .hero-type h1{font-size:28vw;line-height:.94}
  .hero-word{left:7%;top:6%;transform:rotate(-5deg) skewX(-7deg)}
  .hero-word-yellow{left:auto;right:7%;top:auto;bottom:9%;font-size:1.06em;transform:rotate(-5deg) skewX(-7deg)}
  .hero-brush{left:24px;top:0;width:76%;height:38px}
  .hero-tray{left:8%;top:15%;width:96%;height:62%}
  .hero-wings{left:-7%;top:48%;width:41%;height:32%;transform:rotate(14deg)}
  .hero-sticker{right:0;bottom:0;width:28%;max-width:155px;transform:rotate(9deg)}
  .hero-bottom{position:relative;left:auto;right:auto;bottom:auto;display:block;margin-top:5px}
  .hero-copy p{font-size:15px;line-height:1.6;margin-bottom:18px}
  .hero-buttons{gap:18px;flex-wrap:wrap}
  .hero-buttons .button{padding:17px 21px;min-height:55px;gap:20px}
  .hero-buttons .text-link{gap:10px;font-size:12px}
  .hero-location{display:none}
  /* Reserve the header and persistent order bar, then pin a complete poster.
     The unanimated / reduced-motion layout keeps its normal content flow. */
  body.home-scroll-scene .home-hero{height:calc(100svh - 157px - env(safe-area-inset-bottom));min-height:410px;padding:0}
  body.home-scroll-scene .hero-stage{position:absolute;inset:0 0 150px;margin:0;width:100%;height:auto}
  body.home-scroll-scene .hero-tray{left:13%;top:12%;width:94%;height:76%}
  body.home-scroll-scene .hero-wings{left:-8%;top:calc(6% + 25vw);width:40%;height:36%}
  body.home-scroll-scene .hero-word-yellow{bottom:4%;right:7%}
  body.home-scroll-scene .hero-bottom{position:absolute;left:24px;right:24px;bottom:22px;margin:0}
  body.home-scroll-scene .hero-copy p{margin-bottom:14px}
  .mascot-takeover img{width:min(88vw,64svh,420px)}
}
@media(max-width:350px){.hero-stage{height:440px}.hero-type h1{font-size:28vw}.hero-word-yellow{bottom:12%}.hero-wings{width:35%;left:-5%}.hero-sticker{width:30%}.hero-buttons{gap:12px}.hero-buttons .button{padding:17px 18px;gap:16px}}
@media(max-width:350px){body.home-scroll-scene .site-header{gap:8px}body.home-scroll-scene .site-header .button{padding:12px 8px;gap:6px;white-space:nowrap}body.home-scroll-scene .hero-stage{bottom:202px}}
@media(max-width:780px) and (max-height:500px) and (orientation:landscape){
  body.home-scroll-scene .home-hero{height:calc(100svh - 82px);min-height:270px}
  body.home-scroll-scene .hero-stage{right:40%;bottom:75px;width:60%}
  body.home-scroll-scene .hero-type h1{font-size:min(18vw,25svh)}
  body.home-scroll-scene .hero-wings{top:18%}
  body.home-scroll-scene .hero-bottom{left:63%;right:18px;bottom:92px}
  body.home-scroll-scene .hero-copy p{font-size:13px;line-height:1.4;margin-bottom:10px}
  body.home-scroll-scene .hero-buttons{gap:4px}
  body.home-scroll-scene .hero-buttons .button{padding:12px 16px;min-height:44px}
  .mascot-takeover img{width:min(60vw,62svh)}
}
@media(prefers-reduced-motion:reduce){.hero-sauce-field{clip-path:inset(100% 0% 0% 0%)}.food-tilt{transform:rotate(-11deg)}}