/* ============================================================
   LAYOUT — chrome, landing arcs, story pin, menus, signature
   slider, 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:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:30px 40px 40px;pointer-events:none}
.chrome > *{pointer-events:auto}
.wordmark{justify-self:start;font-family:var(--font-display);font-size:1.15rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--cream)}
.chrome-logo{position:static;justify-self:center;transform:translateX(-20px);width:50px;height:50px}
.chrome-logo svg{width:100%;height:auto}
.menu-toggle{justify-self:end;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}

/* ============================================================
   2 · HERO — full-bleed photo slideshow
   ============================================================ */
.scroll-stage{position:relative;height:100vh;margin:0;background:var(--ink);line-height:0}
.landing{position:relative;height:100vh;margin:0;overflow:hidden;isolation:isolate;line-height:normal}
.hero-slider{position:absolute;inset:0;z-index:0}
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease}
.hero-slide.is-active{opacity:1}
.hero-slide img{width:100%;height:100%;object-fit:cover;object-position:center 54%;display:block}
.hero-slide::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(21,14,8,.55),rgba(21,14,8,.18) 42%,rgba(21,14,8,.66))}
.hero-inner{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.9rem;margin-inline:auto;padding:0 24px;
  text-align:center;color:var(--cream)}
.hero-inner > *{flex:0 0 auto}
.hero-inner > .hero-word{position:absolute;left:50%;top:50%;width:calc(100% - 48px);margin:0;
  text-align:center;transform:translate(-50%,-50%);z-index:1}
.hero-inner > .kicker{position:absolute;top:calc(50% - clamp(3.4rem,7vw,6.6rem));left:50%;
  transform:translateX(-50%);z-index:2}
.hero-inner > .hero-tag{position:absolute;top:calc(50% + clamp(3.5rem,7vw,6.6rem));left:50%;
  transform:translateX(-50%);z-index:2}
.hero-inner > .hero-visit{position:absolute;top:calc(50% + clamp(6.3rem,12.3vw,11.6rem));left:50%;
  transform:translateX(-50%);z-index:2}
@media (min-width:761px){
  .hero-inner > .kicker{top:calc(50% - clamp(3rem,8.28vw,7.544rem) - 46px)}
  .hero-inner > .hero-tag{top:calc(50% + clamp(3rem,8.28vw,7.544rem) + 16px)}
  .hero-inner > .hero-visit{top:calc(50% + clamp(3rem,8.28vw,7.544rem) + 60px)}
}
.hero-inner .kicker,.hero-tag{width:min(100%,52ch);margin-inline:auto}
.hero-visit{display:inline-flex;align-items:center;gap:.8rem;margin-top:.8rem;padding:.9rem 1.4rem;
  border:1px solid rgba(241,234,219,.72);border-radius:999px;font-family:var(--font-label);
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cream);
  transition:background-color .25s ease,color .25s ease}
.hero-visit:hover{background:var(--cream);color:var(--ink)}
.hero-visit span{font-size:1rem;line-height:1}
.hero-word{font-family:var(--font-display);font-weight:500;margin:0;
  font-size:clamp(3.2rem,9vw,8.2rem);line-height:.92;color:var(--cream);
  text-transform:uppercase;letter-spacing:.02em;text-shadow:0 2px 30px rgba(0,0,0,.45)}
.hero-tag{margin:0;max-width:52ch;color:var(--cream-dim)}
/* static mode (Reduce Motion): no autoplay, show slide one + text */
.motion-static .hero-slide{transition:none !important}
.motion-static .hero-slide:not(.is-active){opacity:0 !important}
.motion-static .hero-inner{opacity:1 !important;visibility:visible !important;
  transform:none !important;position:absolute;left:0;right:0;bottom:0 !important}

/* ============================================================
   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(140px,16vw,240px);
  transform:translateX(-50%);will-change:transform;opacity:.5} .depth-icon img{width:100%;height:auto;display:block}
.arc-scene{position:absolute;left:50%;top:26%;transform:translate(-50%,0);
  z-index:3;width:min(32vw,470px);will-change:transform,opacity}
.arc-frame{position:relative;width:100%;height:auto;overflow:visible;
  border-radius:0;box-shadow:none}
.arc-frame .scene{position:static}
.arc-photo{position:relative;inset:auto;width:100%;height:auto;overflow:visible;will-change:transform}
.arc-photo .scene{position:static}
.arc-photo > img{display:block;position:relative;inset:auto;width:100%;height:auto;object-fit:contain}
.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(0,1fr);
  grid-template-areas:"intro" "menus";align-content:center;justify-items:center;
  gap:clamp(28px,4vh,48px);min-height:100vh;
  padding:clamp(72px,8vw,110px) 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(26,17,10,.92) 0 34%, rgba(26,17,10,.55) 55%, rgba(26,17,10,.92))}
.menus-intro{position:relative;z-index:2;grid-area:intro;display:flex;
  width:min(720px,100%);margin-inline:auto;flex-direction:column;gap:1.2rem;
  align-items:center;text-align:center}
.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:grid;
  width:min(1100px,100%);margin-inline:auto;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem}
.menu-item{position:relative;display:block;min-height:clamp(190px,18vw,250px);text-align:center;
  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)}

/* ============================================================
   5 · SIGNATURE — 700vh stage, pinned slider of 6 arch cards
   ============================================================ */
.signature-stage{--sig-card-w:min(27vw,420px);--sig-card-h:min(52vh,520px);
  --sig-quarter:min(13vh,130px);
  position:relative;height:700vh;overflow-x:clip;color:var(--ink-warm);background:var(--cream)}
.signature-pin{position:sticky;top:0;min-height:100vh;overflow:clip;isolation:isolate;
  background:
    linear-gradient(90deg, transparent 0 11%, rgba(44,23,17,.08) 11% calc(11% + 1px), transparent calc(11% + 1px) 31%, rgba(44,23,17,.08) 31% calc(31% + 1px), transparent calc(31% + 1px) 69%, rgba(44,23,17,.08) 69% calc(69% + 1px), transparent calc(69% + 1px) 89%, rgba(44,23,17,.08) 89% calc(89% + 1px), transparent calc(89% + 1px))}
.signature-intro{position:absolute;left:50%;top:44%;transform:translateX(-50%);
  z-index:5;text-align:center;will-change:transform,opacity}
.signature-eyebrow{margin-bottom:1rem}
.signature-intro-title{font-family:var(--font-display);
  font-size:clamp(2rem,4.4vw,4.2rem);color:var(--ink-warm);max-width:22ch}
.signature-slider{position:absolute;inset:0;z-index:2;overflow:clip;pointer-events:none}
.signature-slide{position:absolute;inset:0;visibility:hidden}
.signature-media{position:absolute;left:50%;top:46%;width:var(--sig-card-w);
  height:var(--sig-card-h);overflow:hidden;border-radius:0;
  clip-path:inset(0);
  will-change:transform;backface-visibility:hidden;z-index:80}
.signature-media .scene{position:absolute;inset:0}.signature-media-reveal{
  position:absolute;inset:0;z-index:2;
  clip-path:inset(0);will-change:transform}
.signature-slide-one .signature-media-reveal{clip-path:inset(0% 0 0 0)}

/* static fallback (reduced motion / no GSAP): one clean card.
   Slides 2 to 6 hidden; slide 1 laid out normally, no GSAP transforms. */
.signature-slider.is-static .signature-slide{visibility:hidden !important}
.signature-slider.is-static .signature-slide.signature-slide-one{
  visibility:visible !important}
.signature-slider.is-static .signature-slide.signature-slide-one .signature-title,
.signature-slider.is-static .signature-slide.signature-slide-one .signature-title-inverse,
.signature-slider.is-static .signature-slide.signature-slide-one .signature-meta{
  transform:translateX(-50%) !important;opacity:1 !important}
.signature-slider.is-static .signature-slide.signature-slide-one .signature-title-inverse{display:none}
.signature-slider.is-static .signature-slide.signature-slide-one .signature-title{position:absolute;left:50%;transform:translateX(-50%)}
.signature-slider.is-static .signature-slide.signature-slide-one .signature-meta{
  position:absolute;left:50%;transform:translateX(-50%);flex-wrap:wrap;justify-content:center}
.signature-slider.is-static .signature-media-reveal{clip-path:inset(0% 0 0 0) !important}

/* pre-JS flash guard: hide slides until GSAP wires them up.
   main.js swaps this for .is-static in the fallback path, or removes
   it in the animated path, so nothing ever flashes stacked. */
.signature-slider:not(.is-ready):not(.is-static){visibility:hidden}
.signature-title-mask{position:absolute;left:50%;top:46%;width:100%;height:0;z-index:95}
.signature-title{
  position:absolute;left:50%;top:calc(50% - min(27vh,290px));width:140vw;margin:0;
  color:var(--ink-soft);font-family:var(--font-display);
  font-size:clamp(58px,7vw,132px);font-weight:500;line-height:.82;
  text-align:center;text-transform:uppercase;will-change:transform,opacity;
  transform:translate3d(-50%,58vh,0)}
.signature-title-clip{position:absolute;left:50%;top:0;width:100vw;height:100vh;
  overflow:hidden;z-index:100;pointer-events:none;
  clip-path:inset(0)}
.signature-title-inverse{position:absolute;left:50%;width:140vw;margin:0;
  color:var(--cream);font-family:var(--font-display);
  font-size:clamp(58px,7vw,132px);font-weight:500;line-height:.82;
  text-align:center;text-transform:uppercase;will-change:transform,opacity;
  transform:translate3d(-50%,58vh,0)}
.signature-wipe-line{position:absolute;left:50%;top:calc(46% - 36px);width:calc(var(--sig-card-w) + 80px);
  height:1px;background:rgba(44,23,17,.55);z-index:120;opacity:0;
  transform:translate(-50%,-50%)}
.signature-meta{position:absolute;left:50%;top:calc(50% + min(27vh,290px));
  z-index:105;display:flex;gap:1.4rem;align-items:baseline;
  font-family:var(--font-label);font-size:.78rem;letter-spacing:.24em;
  text-transform:uppercase;color:rgba(44,23,17,.7);will-change:transform,opacity;
  transform:translateX(-50%)}
.signature-count{position:absolute;left:50%;bottom:4.5vh;transform:translateX(-50%);
  z-index:110;display:flex;gap:1.1rem;
  font-family:var(--font-label);font-size:.8rem;letter-spacing:.2em;color:rgba(44,23,17,.35)}
.signature-count span.active{color:var(--ink-warm)}
.signature-deco-icon{position:absolute;width:clamp(210px,24vw,340px);opacity:0;z-index:1;display:block;height:auto}
.deco-1{left:6%;top:12%}
.deco-2{right:6%;bottom:14%}

/* ============================================================
   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: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:0;bottom:0;
  width:100%;height:min(104vh,1080px);overflow:hidden;
  border-radius:0;clip-path:none;
  background:linear-gradient(180deg,#8a5a28,var(--caramel) 58%,var(--caramel-deep));
  opacity:0;visibility:hidden;transform:translateY(100%);
  will-change:transform}
.cta-inner{position:absolute;left:0;bottom:0;width:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  padding-bottom:16vh;transform:none;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:clamp(2.4rem,6vw,5rem);justify-content:center;align-items:center;margin-top:2.6rem}
.cta-icon{width:clamp(84px,9vw,132px);height:clamp(84px,9vw,132px);display:flex;align-items:center;justify-content:center;opacity:0;transition:none}
.cta-icon img{max-width:100%;max-height:100%;width:auto;height:auto;display:block;filter:drop-shadow(0 4px 14px rgba(0,0,0,.25))}
.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{grid-template-columns:1fr auto 1fr;padding:22px 20px}
  .wordmark{font-size:.9rem}
  .chrome-logo{width:40px}

  /* Use a single viewport for the mobile hero; the tall scroll pin is desktop-only. */
  .scroll-stage{height:100svh;min-height:100vh;margin:0;line-height:0}
  .landing{position:relative;top:auto;min-height:100vh;min-height:100svh;line-height:normal}
  .hero-inner{padding:0 22px;gap:.8rem}
  .hero-inner > .hero-word{width:calc(100% - 44px);font-size:clamp(3rem,15vw,5rem);line-height:.9;z-index:1}
  .hero-inner > .kicker{top:calc(50% - 6.5rem);width:calc(100% - 40px);z-index:2}
  .hero-inner > .hero-tag{top:calc(50% + 3.8rem);max-width:34ch;font-size:.95rem;z-index:2}
  .hero-inner > .hero-visit{top:calc(50% + 6.8rem);padding:.8rem 1.2rem;z-index:2}

  .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;width:100%;text-align:center}
  .story-mobile-inner{width:min(100%,560px);margin-inline:auto;text-align:center}
  .story-mobile .kicker{margin-bottom:.8rem}
  .story-mobile-title{margin-inline:auto}
  .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.2rem;padding:4rem 20px;min-height:100vh}
  .menus-stage::after{background:rgba(26,17,10,.88)}
  .menus-intro{width:100%;align-items:center;text-align:center}
  .menus-list{width:100%;grid-template-columns:1fr}
  .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:50%;bottom:10px;transform:translateX(-50%)}

  .signature-stage{height:auto;overflow:visible}
  .signature-pin{position:relative;top:auto;min-height:0;overflow:visible}
  .signature-slider{display:none}
  .signature-mobile{display:block;position:relative;z-index:5;
    padding:5.5rem 0 4rem}
  .signature-mobile .kicker{padding:0 20px}
  .sig-m-title{padding:0 20px;font-family:var(--font-display);
    font-size:clamp(1.9rem,8.5vw,2.4rem);color:var(--ink-warm);margin:.6rem 0 .4rem}
  .sig-m-lead{padding:0 20px;font-size:.95rem;color:rgba(44,23,17,.75);
    margin-bottom:1.6rem}
  .sig-m-shell{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
    padding:0 20px 1.2rem;scrollbar-width:none}
  .sig-m-shell::-webkit-scrollbar{display:none}
  .sig-m-card{flex:0 0 78vw;scroll-snap-align:start;border-radius:12px;
    overflow:hidden;position:relative;aspect-ratio:4/5}
  .sig-m-card .scene{position:absolute;inset:0}
  .sig-m-card-body{position:absolute;left:0;right:0;bottom:0;z-index:2;
    padding:16px;background:linear-gradient(transparent, rgba(26,17,10,.75))}
  .sig-m-card-title{font-family:var(--font-display);font-size:1.5rem;color:#fff}
  .sig-m-card-text{font-size:.8rem;color:rgba(255,255,255,.8)}
  .sig-m-remote{display:flex;align-items:center;gap:14px;padding:0 20px}
  .sig-m-count{font-family:var(--font-label);font-size:.8rem;
    letter-spacing:.2em;color:var(--ink-warm)}
  .sig-m-progress{flex:1;height:2px;background:rgba(44,23,17,.15);border-radius:2px;overflow:hidden}
  .sig-m-bar{height:100%;width:20%;background:var(--ink-warm);transition:width .3s ease}
  .sig-m-status{font-family:var(--font-label);font-size:.7rem;letter-spacing:.24em;
    text-transform:uppercase;color:var(--ink-warm)}

  .chef-stage{height:auto;min-height:0}
  .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{position:relative;top:auto;min-height:0;overflow:visible}

  .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: plain hero slideshow with text. Story: beat 1 only.
   CTA: full-size window. */
.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(72vw,560px)}
.motion-static .story-paragraph{width:min(46ch,86vw);text-align:center}
.motion-static .signature-media{transform:translate(-50%,-50%) !important}
.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:translateY(0) !important;
  opacity:1 !important;visibility:visible !important;
  width:100%}
.motion-static .cta-inner{transform:none !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 .signature-stage{height:100vh}
.motion-static .signature-intro{top:13vh}
.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 */
@media (min-width:761px){
  .story-mobile,.signature-mobile,.chef-mobile{display:none}
}

/* ============================================================
   8 · AL-SHAM — real photo integration + added stages
   ============================================================ */
.hero-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.signature-media-reveal img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);will-change:transform}
.ph-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.menus-parallax img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.chef-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.chef-portrait img{width:100%;height:100%;object-fit:cover}

/* ---------- from the gram slideshow ---------- */
.ig-stage{background:var(--ink);padding:clamp(80px,10vw,140px) clamp(24px,5vw,80px)}
.ig-inner{max-width:1100px;margin:0 auto;display:flex;flex-direction:column;
  gap:1.6rem;align-items:center;text-align:center}
.ig-title{font-family:var(--font-display);font-size:clamp(2.2rem,4vw,3.8rem);
  color:var(--cream);line-height:1.02}
.ig-slider{position:relative;width:100%;aspect-ratio:16/10;border-radius:8px;
  overflow:hidden;border:1px solid var(--line-cream);background:#0d0906}
.ig-slide{position:absolute;inset:0;opacity:0;visibility:hidden;
  transition:opacity .8s ease, visibility .8s ease}
.ig-slide.is-active{opacity:1;visibility:visible}
.ig-slide img{width:100%;height:100%;object-fit:cover}
.ig-remote{display:flex;align-items:center;gap:1.2rem;width:100%}
.ig-btn{width:44px;height:44px;border:1px solid var(--line-cream);border-radius:999px;
  color:var(--cream);font-size:1.1rem;display:flex;align-items:center;justify-content:center;
  transition:background-color .3s ease,color .3s ease}
.ig-btn:hover{background:var(--cream);color:var(--ink)}
.ig-count{font-family:var(--font-label);font-size:.78rem;letter-spacing:.24em;
  color:var(--cream-dim)}
.ig-follow{margin-left:auto;font-family:var(--font-label);font-size:.72rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--cream-dim);
  border-bottom:1px solid var(--line-cream);padding-bottom:2px}
.ig-follow:hover{color:var(--cream);border-color:var(--cream)}

/* ---------- order online strip ---------- */
.order-strip{margin-top:1.4rem;display:flex;flex-direction:column;gap:1rem;
  align-items:center}
.order-btns{display:flex;gap:.8rem;flex-wrap:wrap;justify-content:center}
.order-btn{border:1px solid rgba(237,232,220,.5);border-radius:999px;
  padding:.7rem 1.8rem;font-family:var(--font-label);font-size:.74rem;
  letter-spacing:.26em;text-transform:uppercase;color:var(--cream);
  transition:background-color .3s ease,color .3s ease}
.order-btn:hover{background:var(--cream);color:var(--ink)}

/* ---------- reel stage ---------- */
.reel-stage{position:relative;background:var(--ink);
  padding:clamp(80px,10vw,140px) clamp(24px,5vw,80px)}
.reel-inner{max-width:1100px;margin:0 auto;display:flex;flex-direction:column;
  gap:1.6rem;align-items:center;text-align:center}
.reel-title{font-family:var(--font-display);font-size:clamp(2.2rem,4vw,3.8rem);
  color:var(--cream);line-height:1.02}
.reel-frame{width:min(460px,100%);overflow:hidden;border-radius:8px;
  border:1px solid var(--line-cream)}
.reel-frame iframe{display:block;width:100%;height:640px;border:0}
.reel-frame img{display:block;width:100%;height:auto;border:0}
.reel-more{font-family:var(--font-label);font-size:.78rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--cream-dim)}
.reel-more a{border-bottom:1px solid var(--line-cream);padding-bottom:2px}
.reel-more a:hover{color:var(--cream);border-color:var(--cream)}

/* ---------- map stage ---------- */
.map-stage{position:relative;background:var(--ink);
  padding:0 clamp(24px,5vw,80px) clamp(80px,10vw,140px)}
.map-inner{max-width:1100px;margin:0 auto;display:flex;flex-direction:column;
  gap:1.6rem;align-items:center;text-align:center}
.map-title{font-family:var(--font-display);font-size:clamp(2.2rem,4vw,3.8rem);
  color:var(--cream);line-height:1.02}
.map-frame{width:100%;aspect-ratio:16/7;overflow:hidden;border-radius:8px;
  border:1px solid var(--line-cream)}
.map-frame iframe{display:block;width:100%;height:100%;border:0}

@media (max-width:760px){
  .reel-frame iframe{height:540px}
  .map-frame{aspect-ratio:4/3}
  .ig-slider{aspect-ratio:4/5}
  .ig-follow{margin-left:0}
}