/* ============================================================
   LAYOUT — chrome, landing arcs, story pin, menus,
   chef/CTA stage, footer. Desktop-first; mobile collapse
   at 760px mirrors the reference breakpoints.
   ============================================================ */

/* ============================================================
   1 · CHROME — fixed wordmark / logo / menu toggle
   ============================================================ */
.chrome{position:fixed;top:0;left:0;right:0;z-index:900;
  display:flex;align-items:flex-start;justify-content:space-between;
  padding:30px 40px 40px;pointer-events:none}
.chrome > *{pointer-events:auto}
.wordmark{font-family:var(--font-display);font-size:1.15rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--cream)}
.chrome-logo{width:50px;height:50px}
.chrome-logo svg{width:100%;height:auto}
.menu-toggle{width:52px;height:44px;display:flex;align-items:center;justify-content:center}
.menu-toggle .bars{position:relative;width:30px;height:2px;background:var(--cream);border-radius:2px;
  transition:transform .35s var(--ease-out), background-color .35s ease}
.menu-toggle .bars::before,.menu-toggle .bars::after{
  content:"";position:absolute;left:0;width:30px;height:2px;border-radius:2px;
  background:var(--cream);transition:transform .35s var(--ease-out)}
.menu-toggle .bars::before{top:-9px}
.menu-toggle .bars::after{top:9px}
.menu-toggle.is-open .bars{background:transparent}
.menu-toggle.is-open .bars::before{transform:translateY(9px) rotate(45deg)}
.menu-toggle.is-open .bars::after{transform:translateY(-9px) rotate(-45deg)}

/* ---------- full-screen nav overlay (popup) ---------- */
.nav-overlay{position:fixed;inset:0;z-index:800;background:rgba(19,11,8,.97);
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transition:opacity .45s ease, visibility .45s ease}
.nav-overlay.is-open{opacity:1;visibility:visible}
.nav-grid{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:clamp(2rem,6vw,6rem);
  width:min(1100px,90vw);align-items:center}
.nav-links{display:flex;flex-direction:column;gap:1.1rem}
.nav-links a{
  font-family:var(--font-display);font-size:clamp(1.7rem,3.2vw,2.8rem);
  color:var(--cream);opacity:0;transform:translateY(10px)}
.nav-overlay.is-open .nav-links a{
  opacity:1;transform:translateY(0);
  transition:opacity .56s cubic-bezier(.14,.85,.2,1), transform .56s cubic-bezier(.14,.85,.2,1)}
.nav-overlay.is-open .nav-links a:nth-child(1){transition-delay:.16s}
.nav-overlay.is-open .nav-links a:nth-child(2){transition-delay:.2s}
.nav-overlay.is-open .nav-links a:nth-child(3){transition-delay:.24s}
.nav-overlay.is-open .nav-links a:nth-child(4){transition-delay:.28s}
.nav-overlay.is-open .nav-links a:nth-child(5){transition-delay:.32s}
.nav-overlay.is-open .nav-links a:nth-child(6){transition-delay:.36s}
.nav-cols{display:flex;flex-direction:column;gap:1rem}
.nav-col .ph-card{opacity:0;transform:translateY(28px)}
.nav-overlay.is-open .nav-col .ph-card{
  opacity:1;transform:translateY(0);
  transition:opacity 1.9s cubic-bezier(.08,.94,.12,1), transform 1.9s cubic-bezier(.08,.94,.12,1)}
.nav-overlay.is-open .nav-col:nth-of-type(1) .ph-card{transition-delay:.32s}
.nav-overlay.is-open .nav-col:nth-of-type(2) .ph-card{transition-delay:.39s}
.nav-overlay.is-open .nav-col:nth-of-type(3) .ph-card{transition-delay:.46s}
.nav-col-label{margin-top:.5rem;text-align:center}
/* small placeholder card used in nav + menus */
.ph-card{position:relative;overflow:hidden;border-radius:8px;aspect-ratio:4/5}
.photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* landing background photo replaces the drawn scene */
.landing-bg .photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.landing-bg::after{content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 50% 78%, transparent 30%, rgba(19,11,8,.55) 100%)}
.chef-bg-photo{filter:brightness(.5) saturate(.9)}

/* nav overlay + mobile story photos (outside pinned flow) */
.story-mobile-photo{position:static;width:100%;height:auto;border-radius:14px;
  margin:1.4rem 0}

/* wordmark + logo */
.wordmark{font-family:var(--font-display);font-weight:600;line-height:1.05}
.chrome-logo{display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line-cream);border-radius:10px;
  width:48px;height:48px}
.logo-cjk{font-family:var(--font-display);font-size:1.15rem;font-weight:600;
  color:var(--cream);letter-spacing:.08em}

/* ============================================================
   2 · LANDING — 540vh stage, sticky 100vh scene
   ============================================================ */
.scroll-stage{position:relative;height:540vh;background:var(--ink)}
.landing{position:sticky;top:0;min-height:100vh;overflow:hidden;isolation:isolate}
.landing-bg{position:absolute;inset:0;z-index:-3;will-change:filter,transform;
  filter:blur(18px) saturate(.76);transform:scale(1.02)}
.landing-bg .scene{position:absolute;inset:0}
.landing-bg .scene-night{background:linear-gradient(#2a1409,#170c07 70%)}
.landing-bg .scene-night .scene-sun{width:60%;left:20%;top:16%;
  background:radial-gradient(circle, rgba(224,122,58,.35), rgba(224,122,58,0) 70%)}
.landing-bg .r1{bottom:-8%;height:44%;background:rgba(161,20,34,.12)}
.landing-bg .r2{bottom:-14%;height:34%;left:-16%;background:rgba(0,0,0,.5)}
.arc-stack{position:absolute;inset:0;z-index:3;display:flex;align-items:flex-end;
  justify-content:center;pointer-events:none}

/* swipe panel window: bottom-anchored, soft square top corners.
   GSAP scrubs scale .18 → cover; .arc-bg counter-scales 1/scale
   so the "photo" keeps its size while the window grows. */
.arc{position:absolute;left:50%;bottom:0;width:0;height:0;visibility:hidden}
.arc-window{position:absolute;left:50%;bottom:0;
  width:min(82vw,1180px);height:min(104vh,1080px);
  border-radius:18px 18px 0 0;overflow:hidden;
  clip-path:inset(0 round 18px 18px 0 0);
  transform:translate3d(-50%,0,0) scale(.18);transform-origin:50% 100%;
  will-change:transform;backface-visibility:hidden}
.arc-bg{position:absolute;left:50%;bottom:0;width:100vw;height:100vh;
  transform:translate3d(-50%,0,0) scale(5.5556);transform-origin:50% 100%;
  will-change:transform;backface-visibility:hidden}
.arc-bg .scene{position:absolute;inset:0}
.arc-inner{position:absolute;left:50%;bottom:0;width:100vw;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  padding-bottom:14vh;transform:translate3d(-50%,0,0);will-change:transform}
.arc-kicker{margin:0 0 1.4rem}
.arc-word{
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(3.4rem,9vw,8.6rem);line-height:.9;color:var(--cream);
  text-transform:uppercase;letter-spacing:.02em}

/* ============================================================
   3 · STORY — 520vh cream stage
   ============================================================ */
.story-stage{--cream-stage:var(--cream);position:relative;height:520vh;
  color:var(--ink-warm);background:var(--cream)}
.story-pin{position:sticky;top:0;min-height:100vh;overflow:hidden}
.story-title{position:absolute;left:50%;top:44%;transform:translateX(-50%);
  z-index:4;font-family:var(--font-display);font-size:clamp(2.6rem,5.6vw,5.4rem);
  color:var(--ink-warm);text-align:center;white-space:nowrap;will-change:transform,opacity}
.depth-word-wrap{position:absolute;left:50%;top:50%;transform:translateX(-50%);
  z-index:1;pointer-events:none;white-space:nowrap;will-change:transform}
.depth-word{
  position:relative;display:inline-block;margin:0;padding:0 .42em;
  color:var(--wm);font-family:var(--font-script);
  font-size:clamp(190px,24vw,460px);font-weight:400;line-height:1;white-space:nowrap}
.depth-icon{position:absolute;left:50%;top:62%;z-index:1;width:clamp(90px,10vw,150px);
  transform:translateX(-50%);will-change:transform;opacity:.5}
.depth-icon svg{width:100%;height:auto}
.arc-scene{position:absolute;left:50%;top:34%;transform:translate(-50%,0);
  z-index:3;width:min(24vw,360px);will-change:transform,opacity}
.arc-frame{position:relative;width:100%;aspect-ratio:4/5;overflow:hidden;
  border-radius:18px 18px 0 0;box-shadow:0 40px 80px rgba(19,11,8,.25)}
.arc-frame .scene{position:absolute;inset:0}
.arc-photo{position:absolute;inset:0;overflow:hidden;will-change:transform}
.arc-photo .scene{position:absolute;inset:0}
.story-copy{position:absolute;inset:0;z-index:4;pointer-events:none}
.story-paragraph{position:absolute;left:50%;top:82%;transform:translateX(-50%);
  width:min(46ch,86vw);font-size:clamp(1rem,1.35vw,1.3rem);line-height:1.6;
  color:var(--ink-warm);text-align:center;will-change:transform,opacity}
.story-beat{position:absolute;left:50%;top:58%;transform:translateX(-50%);
  z-index:4;text-align:center;will-change:transform,opacity;visibility:hidden}
.story-beat .english{
  font-family:var(--font-display);font-size:clamp(1.9rem,3.4vw,3.4rem);
  color:var(--ink-warm);display:block;will-change:transform,opacity}
.story-beat .italian{
  font-family:var(--font-script);font-size:clamp(2rem,3.6vw,3.6rem);
  color:rgba(44,23,17,.28);display:block;margin-top:.4rem;will-change:transform,opacity}

/* ============================================================
   4 · MENUS — normal 100vh two-column stage w/ photo parallax
   ============================================================ */
.menus-stage{position:relative;overflow:hidden;background:var(--ink);
  display:grid;grid-template-columns:minmax(380px,620px) minmax(520px,760px);
  grid-template-areas:"intro menus";align-content:center;align-items:center;
  justify-content:space-between;gap:clamp(42px,6vw,96px);
  min-height:100vh;padding:clamp(72px,8vw,130px) clamp(26px,5vw,82px)}
.menus-parallax{position:absolute;inset:-14% 0;z-index:0;will-change:transform;pointer-events:none}
.menus-parallax .scene{position:absolute;inset:0}
.menus-stage::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg, rgba(19,11,8,.92) 0 34%, rgba(19,11,8,.55) 55%, rgba(19,11,8,.92))}
.menus-intro{position:relative;z-index:2;grid-area:intro;display:flex;
  flex-direction:column;gap:1.6rem;align-items:flex-start}
.menus-note{font-family:var(--font-script);font-size:1.6rem;color:var(--cream-dim)}
.menus-title{font-family:var(--font-display);font-size:clamp(2.2rem,4vw,3.8rem);
  color:var(--cream);line-height:1.02}
.menus-list{position:relative;z-index:2;grid-area:menus;display:flex;
  flex-direction:column;gap:1rem}
.menu-item{position:relative;display:block;min-height:clamp(180px,22vw,280px);
  padding:clamp(24px,3vw,40px) clamp(20px,2.5vw,32px) 70px;overflow:hidden;
  color:rgba(255,255,255,.94);border:1px solid var(--line-cream);border-radius:7px;
  background:linear-gradient(135deg, transparent 0 18px, rgba(244,233,210,.05) 18px);
  transition:border-color .3s ease, transform .3s var(--ease-out)}
.menu-item:hover{border-color:rgba(237,232,220,.55);transform:translateY(-3px)}
.menu-item::after{content:"+";position:absolute;right:22px;bottom:14px;
  font-family:var(--font-display);font-size:1.6rem;color:var(--cream-dim);
  transition:transform .3s var(--ease-out)}
.menu-item:hover::after{transform:rotate(90deg)}
.menu-name{font-family:var(--font-display);font-size:clamp(1.6rem,2.4vw,2.4rem);
  color:var(--cream);margin-bottom:.5rem}
.menu-desc{font-size:.92rem;color:rgba(237,232,220,.72);max-width:40ch}
.menu-num{position:absolute;left:22px;bottom:12px;font-family:var(--font-label);
  font-size:.72rem;letter-spacing:.28em;color:var(--cream-dim)}


/* ============================================================
   6 · CHEF + CTA — 540vh red stage
   ============================================================ */
.chef-stage{--chef-card-w:min(24vw,390px);--chef-card-h:min(30.9vw,502px);
  --chef-top:30vh;position:relative;height:540vh;color:var(--cream);background:var(--red)}
.chef-pin{position:sticky;top:0;min-height:100vh;overflow:hidden;isolation:isolate;
  background:var(--red)}
.chef-bg{position:absolute;inset:0;z-index:0;will-change:transform,opacity}
.chef-bg .scene{position:absolute;inset:0}
.chef-intro{position:absolute;left:50%;top:15vh;transform:translateX(-50%);
  z-index:3;text-align:center;will-change:transform,opacity}
.chef-intro .kicker{color:rgba(237,232,220,.65)}
.chef-portrait{position:absolute;left:50%;top:var(--chef-top);
  transform:translateX(-50%);z-index:2;width:var(--chef-card-w);
  aspect-ratio:4/5;overflow:hidden;border-radius:18px 18px 0 0;
  will-change:transform,opacity;visibility:hidden}
.chef-portrait .scene{position:absolute;inset:0}
.chef-quote{position:absolute;left:0;right:0;top:38vh;z-index:3;display:flex;
  justify-content:space-between;gap:clamp(14px,2.6vw,34px);
  padding:0 clamp(20px,4vw,60px);pointer-events:none}
.chef-quote-left,.chef-quote-right{
  font-family:var(--font-display);font-size:clamp(1.3rem,2.2vw,2.1rem);
  color:var(--cream);max-width:16ch;will-change:transform,opacity;opacity:0}
.chef-quote-right{text-align:right}
.chef-note{position:absolute;left:50%;top:70vh;transform:translateX(-50%);
  z-index:3;width:min(60ch,86vw);text-align:center;will-change:transform,opacity}
.chef-cta{position:absolute;inset:0;z-index:4;visibility:hidden}
.cta-red-wash{position:absolute;inset:0;background:var(--red);opacity:0}
.cta-arc{position:absolute;inset:0}
.cta-arc-window{position:absolute;left:50%;bottom:0;
  width:min(82vw,1180px);height:min(104vh,1080px);overflow:hidden;
  border-radius:18px 18px 0 0;clip-path:inset(0 round 18px 18px 0 0);
  background:linear-gradient(180deg,#c96a3e,var(--red) 58%,var(--red-deep));
  opacity:0;visibility:hidden;transform:translate3d(-50%,0,0) scale(.06);
  transform-origin:50% 100%;will-change:transform}
.cta-inner{position:absolute;left:50%;bottom:0;width:100vw;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  padding-bottom:16vh;transform:translate3d(-50%,0,0);will-change:transform}
.cta-copy{position:relative;z-index:2;text-align:center;opacity:0;
  transform:translateY(12vh);will-change:transform,opacity}
.cta-copy .big{
  font-family:var(--font-display);font-size:clamp(2.6rem,6vw,6rem);
  color:var(--cream);text-transform:uppercase;letter-spacing:.04em;line-height:1}
.cta-copy .sub{margin-top:1.2rem}
.cta-icons{display:flex;gap:2.6rem;justify-content:center;margin-top:2.6rem}
.cta-icon{width:clamp(52px,6vw,78px);opacity:0;transition:none}
.cta-icon svg{width:100%;height:auto;color:rgba(237,232,220,.5)}
.cta-actions{margin-top:2.8rem;display:flex;gap:1rem;justify-content:center}
.cta-btn{border:1px solid rgba(237,232,220,.5);border-radius:999px;
  padding:.9rem 2.2rem;font-family:var(--font-label);font-size:.78rem;
  letter-spacing:.28em;text-transform:uppercase;color:var(--cream);
  transition:background-color .3s ease,color .3s ease}
.cta-btn:hover{background:var(--cream);color:var(--red-deep)}

/* ============================================================
   7 · FOOTER — dark, giant wordmark, dropdown topics
   ============================================================ */
.footer{position:relative;background:var(--ink);color:var(--cream);
  padding:clamp(80px,10vw,140px) clamp(24px,5vw,80px) 40px}
.footer-top{display:flex;flex-direction:column;align-items:center;gap:2rem;
  text-align:center;margin-bottom:5rem}
.footer-title{font-family:var(--font-display);
  font-size:clamp(2.4rem,6vw,5.6rem);line-height:1;color:var(--cream)}
.footer-sub{max-width:60ch;margin:0 auto}
.footer-enquire{display:inline-block;margin-top:1.4rem;border:1px solid var(--line-cream);
  border-radius:999px;padding:1rem 2.6rem;font-family:var(--font-label);
  font-size:.8rem;letter-spacing:.3em;text-transform:uppercase;
  transition:background-color .3s ease,color .3s ease}
.footer-enquire:hover{background:var(--cream);color:var(--ink)}
.footer-mid{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line-cream)}
.footer-topic{border-bottom:1px solid var(--line-cream)}
.footer-topic-head{width:100%;display:flex;justify-content:space-between;align-items:center;
  padding:1.4rem .2rem;font-family:var(--font-display);
  font-size:clamp(1.2rem,2vw,1.8rem);color:var(--cream);text-align:left}
.footer-topic-head .sign{font-family:var(--font-body);font-weight:300;
  font-size:1.4rem;color:var(--cream-dim);transition:transform .3s var(--ease-out)}
.footer-topic.is-open .sign{transform:rotate(45deg)}
.footer-topic-body{max-height:0;overflow:hidden;
  transition:max-height .45s var(--ease-out)}
.footer-topic.is-open .footer-topic-body{max-height:220px}
.footer-topic-body p{padding:0 .2rem 1.6rem;max-width:70ch}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:1rem;margin-top:3.4rem;
  font-family:var(--font-label);font-size:.72rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--cream-dim)}
.footer-social{display:flex;gap:1.4rem}
.footer-social a{opacity:.7}
.footer-social a:hover{opacity:1}
.footer-social svg{width:18px;height:18px}

/* ============================================================
   reveal helpers (non-pinned bits)
   ============================================================ */
.rv{opacity:0;transform:translateY(24px);
  transition:opacity .8s ease,transform .9s var(--ease-out)}
.rv.in{opacity:1;transform:translateY(0)}

/* ============================================================
   MOBILE — ≤760px (mirrors reference collapse)
   ============================================================ */
@media (max-width:760px){
  .chrome{padding:22px 20px}
  .wordmark{font-size:.9rem}
  .chrome-logo{width:40px}

  .scroll-stage{height:470vh}
  .arc-window{width:min(150vw,680px);height:min(94vh,780px);
    clip-path:inset(0 round 14px 14px 0 0)}
  .arc-bg{height:100vh}
  .arc-inner{padding-bottom:10vh;width:calc(100vw - 40px)}
  .arc-kicker{margin-bottom:16px}

  .story-stage{height:auto;min-height:0}
  .story-pin{position:relative;min-height:0;display:flex;flex-direction:column;
    justify-content:center;gap:1.4rem;padding:5rem 20px 6rem}
  .story-title,.depth-word-wrap,.depth-icon,.arc-scene,.story-copy,
  .story-paragraph,.story-beat{display:none}
  .story-mobile{display:block}
  .story-mobile .kicker{margin-bottom:.8rem}
  .story-mobile-title{font-family:var(--font-display);
    font-size:clamp(2rem,9vw,2.6rem);color:var(--ink-warm);margin-bottom:1rem}
  .story-mobile-copy{font-size:.98rem;line-height:1.65;color:rgba(44,23,17,.8)}

  .menus-stage{display:flex;flex-direction:column;justify-content:center;
    gap:2.4rem;padding:4rem 20px;min-height:100vh}
  .menus-stage::after{background:rgba(19,11,8,.88)}
  .menu-item{min-height:0;padding:20px 18px 52px}
  .menu-item::after{right:16px;bottom:10px;font-size:1.3rem}
  .menu-name{font-size:1.5rem}
  .menu-num{left:18px;bottom:10px}

  .chef-stage{height:480vh}
  .chef-intro,.chef-portrait,.chef-quote,.chef-note{display:none}
  .chef-mobile{display:block;position:relative;z-index:5;padding:5rem 20px 3rem}
  .chef-mobile .kicker{color:rgba(237,232,220,.65);margin-bottom:.8rem}
  .chef-mobile-title{font-family:var(--font-display);
    font-size:clamp(2.2rem,10vw,3rem);color:var(--cream);margin-bottom:1rem}
  .chef-mobile-quote{font-family:var(--font-script);font-size:1.5rem;
    color:var(--cream);opacity:.9;margin-bottom:1.2rem}
  .chef-mobile-copy{font-size:.95rem;line-height:1.65;color:rgba(237,232,220,.8)}
  .chef-pin{min-height:100vh}

  .nav-grid{grid-template-columns:1fr;gap:2.2rem}
  .nav-cols{flex-direction:row;gap:1rem}
  .nav-col{flex:1}
}

/* static mode: un-do GSAP initial states so every stage reads cleanly.
   Landing: full-size arch (top arc only), no blur. Story: beat 1 only.
   CTA: full-size window. */
.motion-static .landing-bg{filter:none !important;transform:none !important}
.motion-static .arc-one,.motion-static .arc-two{visibility:hidden !important}
.motion-static .arc-window{transform:translate3d(-50%,0,0) scale(1) !important;
  clip-path:none !important;
  width:min(82vw,1180px);height:100vh}
.motion-static .arc-bg{transform:translate3d(-50%,0,0) scale(1) !important}
.motion-static .arc-inner{transform:translate3d(-50%,0,0) !important}
.motion-static .story-pin{display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:1.6rem;padding:6rem 20px}
.motion-static .story-copy{position:static;pointer-events:auto}
.motion-static .story-title,.motion-static .arc-scene,.motion-static .story-paragraph{
  position:static;transform:none !important;opacity:1 !important;width:auto}
.motion-static .story-title{white-space:normal}
.motion-static .arc-scene{width:min(58vw,430px)}
.motion-static .story-paragraph{width:min(46ch,86vw);text-align:center}
.motion-static .story-beat{visibility:hidden !important}
.motion-static .depth-word-wrap,.motion-static .depth-icon{visibility:hidden !important}
.motion-static .cta-red-wash{opacity:0 !important}
.motion-static .cta-arc-window{transform:translate3d(-50%,0,0) scale(1) !important;
  opacity:1 !important;visibility:visible !important;
  width:min(82vw,1180px)}
.motion-static .cta-inner{transform:translate3d(-50%,0,0) !important}
.motion-static .cta-copy{opacity:1 !important;transform:none !important}
.motion-static .cta-icon{opacity:1 !important}

/* static mode: collapse tall pinned stages to natural height */
.motion-static .scroll-stage{height:100vh}
.motion-static .landing{height:100vh}
.motion-static .story-stage{height:auto;min-height:100vh}
.motion-static .chef-stage{height:auto;min-height:100vh}
.motion-static .chef-pin{min-height:100vh}
.motion-static .chef-intro,.motion-static .chef-portrait,
.motion-static .chef-quote,.motion-static .chef-note{display:none}

/* desktop-only bits hidden on mobile */
.story-mobile,.chef-mobile{display:none}

/* fix: base hide rule above wins the cascade on phones, so re-show
   the simplified mobile blocks inside the mobile breakpoint */
@media (max-width:760px){
  .story-mobile,.chef-mobile{display:block}
}