/* ============================================================
   FONTS — Bevan (display wordmark) + Bricolage Grotesque (headings)
   Self-hosted woff2, served from /assets/fonts/ and preloaded in index.html.
   ============================================================ */
@font-face{
  font-family:'Bevan'; font-style:normal; font-weight:400; font-display:swap;
  src:url("/assets/fonts/bevan.woff2") format('woff2');
}
@font-face{
  font-family:'Bricolage Grotesque'; font-style:normal; font-weight:400 800;
  font-stretch:100%; font-display:swap;
  src:url("/assets/fonts/bricolage-grotesque.woff2") format('woff2');
}

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root{
  /* Brand palette (unchanged) */
  --cream:#fff7ea;
  --forest:#0d5832;
  --ember:#f58c19;
  --night:#06271a;
  --neon:#ff9d2f;
  --lime:#4dffa0;

  /* Derived ink */
  --ink:#06271a;                 /* body text on cream */
  --ink-soft:rgba(6,39,26,.74);  /* secondary text on cream */
  --ink-faint:rgba(6,39,26,.5);
  --ember-ink:#b35707;           /* AA-contrast ember for small TEXT on cream (4.6:1); brand --ember stays for fills */
  --cream-soft:rgba(255,247,234,.9);  /* body text on dark */
  --cream-faint:rgba(255,247,234,.62);
  --line:rgba(13,88,50,.18);     /* hairlines on cream */
  --line-dark:rgba(245,140,25,.22);

  --sans:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --display:'Bevan',Georgia,'Times New Roman',serif;
  --grotesque:'Bricolage Grotesque',system-ui,sans-serif;

  --nav:66px;
  --chip:60px;
  --maxw:1180px;
  --radius:18px;

  /* Embedded imagery (single reference, reused via var()) */
  --hero:url("/assets/images/interior.webp");
  --lqip:url("/assets/images/interior-lqip.jpg");

  --ease:cubic-bezier(.22,.7,.2,1);
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{display:block; max-width:100%}
a{color:inherit}
button{font-family:inherit}
h1,h2,h3,h4{margin:0; line-height:1.04; text-wrap:balance}
p{margin:0}
::selection{background:var(--ember); color:var(--night)}
:focus-visible{outline:3px solid var(--ember); outline-offset:3px; border-radius:4px}
.cream :focus-visible, .section.cream :focus-visible{outline-color:var(--forest)}  /* ember fails contrast on cream */
:root::-webkit-scrollbar{width:11px; height:11px}
:root::-webkit-scrollbar-thumb{background:rgba(245,140,25,.5); border-radius:10px}

/* ============================================================
   SHARED LAYOUT HELPERS
   ============================================================ */
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,5vw,56px)}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
.section{padding:clamp(64px,9vw,118px) 0}
.dark{background:var(--night); color:var(--cream)}
.cream{background:var(--cream); color:var(--ink)}

/* Kicker label: rule mark + tiny neon dot + uppercase grotesque */
.kicker{
  display:inline-flex; align-items:center; gap:11px;
  font-family:var(--grotesque); font-weight:700; font-size:12.5px;
  letter-spacing:.26em; text-transform:uppercase; color:var(--ember-ink);
  margin:0 0 18px;
}
.kicker::before{content:''; width:26px; height:2px; background:var(--ember-ink); border-radius:2px}
.kicker .dot{width:7px; height:7px; border-radius:50%; background:var(--lime); box-shadow:0 0 10px var(--lime)}
.dark .kicker{color:var(--neon)}
.dark .kicker::before{background:var(--neon)}
.kicker--center{justify-content:center}

.h2{font-family:var(--grotesque); font-weight:800; font-size:clamp(31px,5.2vw,56px); line-height:1.0; letter-spacing:-.012em}
.cream .h2{color:var(--forest)}
.dark .h2{color:var(--cream)}
.lead{font-size:clamp(16.5px,2vw,19px); color:var(--ink-soft); max-width:54ch}
.dark .lead{color:var(--cream-soft)}

/* Buttons */
.btn{
  --halo:transparent;
  display:inline-flex; align-items:center; gap:10px; cursor:pointer;
  font-family:var(--grotesque); font-weight:700; font-size:clamp(15px,1.5vw,17px);
  text-decoration:none; border:0; border-radius:999px; padding:14px 26px;
  transition:transform .25s var(--ease), box-shadow .3s var(--ease), background .25s, color .25s;
}
.btn--ember{background:var(--ember); color:var(--night); box-shadow:0 14px 30px -14px rgba(245,140,25,.85)}
.btn--ember:hover{box-shadow:0 18px 40px -12px rgba(255,157,47,.95), 0 0 0 1px rgba(255,157,47,.4)}
.btn--ghost{background:rgba(255,247,234,.06); color:var(--cream); box-shadow:inset 0 0 0 1.5px rgba(255,247,234,.4)}
.btn--ghost:hover{background:rgba(255,247,234,.12); box-shadow:inset 0 0 0 1.5px var(--neon)}
.btn--lg{padding:16px 32px}

/* Chips (info pills) */
.pill{display:inline-flex; align-items:center; gap:9px; padding:9px 16px; border-radius:999px; font-family:var(--grotesque); font-weight:700; font-size:13.5px}
.pill .tick{width:7px; height:7px; border-radius:50%; background:var(--lime); box-shadow:0 0 8px var(--lime); flex:0 0 auto}
.cream .pill{background:var(--forest); color:var(--cream)}
.dark .pill{background:rgba(255,247,234,.07); color:var(--cream); border:1px solid rgba(255,247,234,.16)}

/* Reveal-on-scroll */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease); transition-delay:var(--d,0ms)}
.reveal.in{opacity:1; transform:none}

/* ============================================================
   LOADING SPLASH — branded CeyBites screen, fades out on load
   ============================================================ */
#splash{position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; background:var(--night); transition:opacity .6s var(--ease), visibility .6s var(--ease); animation:splashSafety .01s linear 3.5s forwards}
body.loaded #splash{opacity:0; visibility:hidden; pointer-events:none}
.splash__logo{display:flex; flex-direction:column; align-items:center; line-height:.9; animation:splashPulse 1.7s ease-in-out infinite}
.splash__kick{font-family:var(--grotesque); font-weight:700; font-size:11px; letter-spacing:.34em; text-transform:uppercase; color:var(--neon); margin-bottom:9px}
.splash__name{font-family:var(--display); font-size:clamp(40px,9vw,76px); letter-spacing:.01em; color:var(--cream); text-shadow:0 0 2px #fff7ea,0 0 16px var(--neon),0 0 44px var(--ember)}
@keyframes splashPulse{0%,100%{opacity:.82; transform:scale(1)}50%{opacity:1; transform:scale(1.035)}}
@keyframes splashSafety{to{opacity:0; visibility:hidden; pointer-events:none}}
@media(prefers-reduced-motion:reduce){.splash__logo{animation:none} #splash{transition:opacity .2s}}

/* ============================================================
   FIXED CHROME — progress bar, cursor lantern, skip link
   ============================================================ */
.skip{position:fixed; left:14px; top:-70px; z-index:300; background:var(--ember); color:var(--night); font-family:var(--grotesque); font-weight:800; padding:11px 18px; border-radius:999px; text-decoration:none; transition:top .25s var(--ease)}
.skip:focus{top:14px}

.progress{position:fixed; top:0; left:0; height:3px; width:0; z-index:210; background:linear-gradient(90deg,var(--ember),var(--neon)); box-shadow:0 0 12px var(--neon); transition:width .1s linear}

.lantern{position:fixed; top:0; left:0; width:520px; height:520px; margin:-260px 0 0 -260px; border-radius:50%; pointer-events:none; z-index:115; mix-blend-mode:screen; opacity:0; transition:opacity .45s; background:radial-gradient(circle,rgba(255,157,47,.18),rgba(255,157,47,.05) 40%,transparent 67%)}
.lantern.on{opacity:1}

/* ============================================================
   NAV
   ============================================================ */
.nav{position:fixed; top:0; left:0; right:0; height:var(--nav); z-index:200; display:flex; align-items:center; justify-content:space-between; padding-left:max(clamp(16px,4vw,40px),env(safe-area-inset-left)); padding-right:max(clamp(16px,4vw,40px),env(safe-area-inset-right))}
.nav__bg{position:absolute; inset:0; opacity:0; transition:opacity .35s var(--ease); background:rgba(6,39,26,.9); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--line-dark); box-shadow:0 12px 34px -22px rgba(0,0,0,.8)}
.nav.scrolled .nav__bg{opacity:1}

.lockup{position:relative; display:flex; flex-direction:column; line-height:.9; text-decoration:none; color:var(--cream)}
.lockup__kick{font-family:var(--grotesque); font-weight:700; font-size:8.5px; letter-spacing:.34em; text-transform:uppercase; color:var(--neon); margin-bottom:3px}
.lockup__name{font-family:var(--display); font-size:20px; letter-spacing:.01em; text-transform:uppercase; color:var(--cream); text-shadow:0 0 16px rgba(255,157,47,.5)}

.nav__center{display:flex; align-items:center; gap:4px}
.nav__link{position:relative; color:var(--cream); text-decoration:none; font-family:var(--grotesque); font-weight:600; font-size:15px; padding:10px 14px; border-radius:999px; transition:color .2s}
.nav__link::after{content:''; position:absolute; left:14px; right:14px; bottom:5px; height:2px; background:var(--neon); border-radius:2px; transform:scaleX(0); transform-origin:left; transition:transform .28s var(--ease)}
.nav__link:hover{color:var(--neon)}
.nav__link:hover::after{transform:scaleX(1)}

.nav__right{display:flex; align-items:center; gap:14px}

/* OPEN NOW status chip */
.open-chip{display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:999px; font-family:var(--grotesque); font-weight:700; font-size:12px; letter-spacing:.02em; background:rgba(255,247,234,.07); border:1px solid rgba(255,247,234,.16); color:var(--cream); white-space:nowrap}
.open-chip .led{width:8px; height:8px; border-radius:50%; flex:0 0 auto}
.open-chip.is-open .led{background:var(--lime); box-shadow:0 0 9px var(--lime); animation:pulse 2.4s var(--ease) infinite}
.open-chip.is-closed .led{background:var(--ember); box-shadow:0 0 8px rgba(245,140,25,.7)}
@keyframes pulse{0%,100%{transform:scale(1); opacity:1}50%{transform:scale(1.5); opacity:.5}}

.burger{display:none; position:relative; width:48px; height:48px; flex-direction:column; gap:5px; align-items:center; justify-content:center; background:rgba(6,39,26,.5); border:1px solid var(--line-dark); border-radius:14px; cursor:pointer; transition:background .25s var(--ease), border-color .25s var(--ease), transform .2s var(--ease)}
.burger:hover{background:rgba(245,140,25,.16); border-color:var(--ember)}
.burger:active{transform:scale(.93)}
.burger span{display:block; width:22px; height:2px; background:var(--cream); border-radius:2px; transition:transform .4s var(--ease), opacity .25s var(--ease), background .25s, width .25s}
.burger:hover span{background:var(--neon)}
.burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0; transform:scaleX(.2)}
.burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ============================================================
   MOBILE DRAWER — slide-in panel, animated burger->X, staggered links
   ============================================================ */
body.nav-open .nav{z-index:240}              /* lift nav (+ burger-as-X) above the scrim */
body.nav-open .nav__bg{opacity:1}             /* solid bar behind the X while open */
.scrim{position:fixed; inset:0; z-index:230; background:rgba(5,28,18,.7); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); opacity:0; visibility:hidden; transition:opacity .38s var(--ease), visibility .38s}
.scrim.open{opacity:1; visibility:visible}
.drawer{position:absolute; top:0; right:0; bottom:0; width:min(86vw,360px); background:linear-gradient(185deg,#0c4029,#06271a 62%); border-left:1px solid rgba(245,140,25,.3); padding:calc(var(--nav) + 26px) 26px max(26px,env(safe-area-inset-bottom)); padding-right:max(26px,env(safe-area-inset-right)); display:flex; flex-direction:column; box-shadow:-34px 0 80px -30px rgba(0,0,0,.92); transform:translateX(103%); transition:transform .46s var(--ease)}
.scrim.open .drawer{transform:none}
.drawer__glow{position:absolute; top:-12%; right:-30%; width:300px; height:300px; background:radial-gradient(circle,rgba(255,157,47,.2),transparent 64%); pointer-events:none}
.drawer__eyebrow{position:relative; font-family:var(--grotesque); font-weight:700; font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--neon); margin-bottom:14px; opacity:0; transform:translateX(20px); transition:opacity .4s var(--ease), transform .4s var(--ease)}
.drawer__nav{position:relative; display:flex; flex-direction:column}
.drawer__link{display:flex; align-items:center; justify-content:space-between; gap:12px; color:var(--cream); text-decoration:none; font-family:var(--grotesque); font-weight:700; font-size:26px; padding:17px 4px; border-bottom:1px solid rgba(255,247,234,.09); opacity:0; transform:translateX(24px); transition:opacity .5s var(--ease), transform .5s var(--ease), color .25s, padding-left .25s var(--ease)}
.drawer__link .arr{width:22px; height:22px; flex:0 0 auto; color:var(--neon); opacity:0; transform:translateX(-8px); transition:opacity .25s var(--ease), transform .25s var(--ease)}
.drawer__link:hover, .drawer__link:focus-visible{color:var(--neon); padding-left:12px}
.drawer__link:hover .arr, .drawer__link:focus-visible .arr{opacity:1; transform:none}
.drawer__foot{position:relative; margin-top:auto; padding-top:24px; display:flex; flex-direction:column; gap:8px; opacity:0; transform:translateY(16px); transition:opacity .5s var(--ease), transform .5s var(--ease)}
.drawer .open-chip{align-self:flex-start; margin-bottom:6px}
.drawer__order{margin-top:4px; text-align:center; justify-content:center}
.drawer__note{color:var(--cream-faint); font-size:13px; text-align:center; margin-top:8px}
/* staggered reveal — applies only while open, so closing is quick */
.scrim.open .drawer__eyebrow{opacity:1; transform:none; transition-delay:.12s}
.scrim.open .drawer__link{opacity:1; transform:none}
.scrim.open .drawer__nav a:nth-child(1){transition-delay:.16s}
.scrim.open .drawer__nav a:nth-child(2){transition-delay:.22s}
.scrim.open .drawer__nav a:nth-child(3){transition-delay:.28s}
.scrim.open .drawer__nav a:nth-child(4){transition-delay:.34s}
.scrim.open .drawer__foot{opacity:1; transform:none; transition-delay:.42s}

/* ============================================================
   HERO
   ============================================================ */
/* hero + the dish marquee together fill exactly one screen on EVERY size, so the
   marquee is always visible on first load (--marqH is the marquee height, measured in JS) */
.hero{position:relative; min-height:calc(100svh - var(--marqH, 56px)); display:flex; align-items:center; padding:calc(var(--nav) + 28px) 0 60px; overflow:hidden; background:var(--night)}
.hero__media{position:absolute; inset:0; background-image:var(--lqip); background-size:cover; background-position:center; transform:scale(1.12); will-change:transform}
.hero__photo{position:absolute; inset:0; background-image:var(--hero); background-size:cover; background-position:center 38%; opacity:0; transition:opacity 1s ease}
.hero__photo.loaded{opacity:1}
.hero__video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.hero__scrim{position:absolute; inset:0; background:
  linear-gradient(95deg,rgba(6,39,26,.92) 0%,rgba(6,39,26,.7) 34%,rgba(6,39,26,.32) 64%,rgba(6,39,26,.55) 100%),
  radial-gradient(125% 90% at 70% 30%,transparent 38%,rgba(6,39,26,.6) 100%),
  linear-gradient(0deg,var(--night) 2%,transparent 26%)}
.hero__grid{position:absolute; inset:0; opacity:.4; background-image:radial-gradient(rgba(255,247,234,.05) 1px,transparent 1.4px); background-size:20px 20px}
.hero .wrap{position:relative; z-index:3; width:100%}
.hero__col{max-width:660px}

.hero__title{font-family:var(--display); font-weight:400; font-size:clamp(34px,6.6vw,82px); line-height:1.0; letter-spacing:.004em; max-width:13ch; color:var(--cream); text-shadow:0 0 2px #fff7ea,0 0 12px var(--neon),0 0 26px var(--neon),0 0 56px var(--ember)}
.hero__title.flicker{animation:ignite 1.5s ease-out both}
@keyframes ignite{0%{opacity:1}2%{opacity:.12}5%{opacity:1}8%{opacity:.25}12%{opacity:1}16%{opacity:.5}19%{opacity:1}24%{opacity:.7}30%{opacity:1}100%{opacity:1}}

.hero__cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:32px}
.hero__follow{display:flex; align-items:center; gap:13px; margin-top:30px}
.hero__follow .lbl{font-family:var(--grotesque); font-weight:700; font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--cream-faint)}
.hero__follow .rule{width:24px; height:1px; background:rgba(255,247,234,.3)}

.scrollcue{position:absolute; bottom:18px; left:50%; transform:translateX(-50%); z-index:3; display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--cream-faint)}
.scrollcue span{font-family:var(--grotesque); font-size:11px; letter-spacing:.3em; text-transform:uppercase}
.scrollcue .bar{width:1px; height:34px; background:linear-gradient(var(--neon),transparent); animation:cue 2s var(--ease) infinite}
@keyframes cue{0%,100%{opacity:.4; transform:scaleY(.7)}50%{opacity:1; transform:scaleY(1)}}

/* Social icon buttons */
.socials{display:flex; gap:11px}
.social{display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; background:rgba(255,247,234,.07); border:1.5px solid rgba(255,247,234,.18); color:var(--cream); text-decoration:none; transition:transform .25s var(--ease), background .25s, border-color .25s, color .25s}
.social:hover{transform:translateY(-3px); background:var(--ember); border-color:var(--ember); color:var(--night)}
.social svg{width:19px; height:19px}
.cream .social{background:rgba(13,88,50,.07); border-color:rgba(13,88,50,.2); color:var(--forest)}
.cream .social:hover{background:var(--ember); border-color:var(--ember); color:var(--night)}

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee{position:relative; background:var(--night); border-top:1px solid var(--line-dark); border-bottom:1px solid var(--line-dark); padding:12px 0; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__track{display:flex; width:max-content; white-space:nowrap; animation:marq 36s linear infinite; will-change:transform}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__row{display:flex; align-items:center; font-family:var(--grotesque); font-weight:700; font-size:clamp(14px,1.8vw,20px); letter-spacing:.04em; text-transform:uppercase; color:var(--neon)}
.marquee__row .sep{color:var(--ember); padding:0 4px}
.marquee__row span.word{padding:0 16px}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============================================================
   MENU
   ============================================================ */
.menu__head{text-align:center; max-width:640px; margin:0 auto}
.menu__head .lead{margin:14px auto 0}

/* Sticky chip rail */
.rail{position:sticky; top:var(--nav); z-index:90; background:rgba(255,247,234,.92); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-top:34px}
.rail__inner{display:flex; gap:9px; overflow-x:auto; scroll-behavior:smooth; padding:8px clamp(20px,5vw,56px); max-width:var(--maxw); margin:0 auto; scrollbar-width:none}
.rail__inner::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto; display:inline-flex; align-items:center; gap:7px; min-height:42px; font-family:var(--grotesque); font-weight:700; font-size:14px; color:var(--forest); background:transparent; border:1.5px solid rgba(13,88,50,.28); border-radius:999px; padding:8px 16px; cursor:pointer; white-space:nowrap; transition:background .2s, color .2s, border-color .2s, box-shadow .25s; scroll-snap-align:center}
.chip .n{font-size:11px; opacity:.6; font-variant-numeric:tabular-nums}
.chip:hover{border-color:var(--ember); color:var(--ember-ink)}
.chip.active{background:var(--ember); color:var(--night); border-color:var(--ember); box-shadow:0 10px 22px -12px rgba(245,140,25,.85)}
.chip.active .n{opacity:.85}

/* Menu body: optional 2-pane with Contents TOC at >=1100px */
.menu__body{display:block; margin-top:8px}
.toc{display:none}

@media(min-width:1100px){
  .menu__body{display:grid; grid-template-columns:200px 1fr; gap:clamp(28px,4vw,56px); align-items:start}
  .toc{display:block; position:sticky; top:calc(var(--nav) + var(--chip) + 18px); align-self:start}
  .toc__label{font-family:var(--grotesque); font-weight:800; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft); margin:0 0 14px}
  .toc a{display:flex; gap:10px; align-items:baseline; text-decoration:none; color:var(--ink-soft); font-family:var(--grotesque); font-weight:600; font-size:14.5px; padding:6px 0; border-left:2px solid transparent; padding-left:12px; margin-left:-12px; transition:color .2s, border-color .2s}
  .toc a .n{font-size:11px; color:var(--ink-soft); font-variant-numeric:tabular-nums; min-width:18px}
  .toc a:hover{color:var(--ember-ink)}
  .toc a.active{color:var(--ember-ink); border-color:var(--ember)}
}

/* Department */
.dept{padding:clamp(40px,6vw,64px) 0 8px; scroll-margin-top:calc(var(--nav) + var(--chip) + 12px)}
.dept:first-child{padding-top:clamp(28px,4vw,40px)}
.dept__head{position:relative; display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:26px}
.dept__title{font-family:var(--display); font-weight:400; font-size:clamp(26px,3.6vw,42px); line-height:.95; color:var(--forest)}
.dept__note{margin-top:10px; font-size:15.5px; font-style:italic; color:var(--ink-soft); max-width:60ch}
.dept__count{display:inline-block; margin-top:10px; font-family:var(--grotesque); font-weight:700; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft)}
.menu__totop{text-align:center; margin-top:clamp(28px,5vw,44px)}
.menu__totop a{display:inline-flex; align-items:center; gap:7px; font-family:var(--grotesque); font-weight:700; font-size:14px; letter-spacing:.04em; color:var(--forest); text-decoration:none; padding:11px 20px; border:1.5px solid var(--line); border-radius:999px; transition:background .2s, border-color .2s, color .2s}
.menu__totop a:hover{background:rgba(245,140,25,.1); border-color:var(--ember); color:var(--ember-ink)}
.dept__folio{font-family:var(--grotesque); font-weight:800; font-size:clamp(46px,8vw,84px); line-height:1; color:transparent; -webkit-text-stroke:1.5px rgba(13,88,50,.22); flex:0 0 auto; letter-spacing:-.02em}

.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr)); gap:18px}

/* Dish card */
.card{position:relative; display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s}
@media(hover:hover) and (pointer:fine){
  .card:hover{transform:translateY(-4px); border-color:rgba(255,157,47,.55); box-shadow:0 24px 44px -26px rgba(6,39,26,.45)}
  .card:hover .card__photo i{transform:scale(1.06)}
  .card:hover .card__photo img{transform:scale(1.06)}
}
.card:active{transform:translateY(-1px)}
.card__photo{position:relative; aspect-ratio:4/3; overflow:hidden; background:linear-gradient(150deg,#0e4a2e,#06271a)}
.card__photo::after{content:''; position:absolute; inset:0; background:radial-gradient(120% 90% at 80% 10%,rgba(255,157,47,.14),transparent 60%); pointer-events:none}
.card__photo i{position:absolute; inset:0; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:rgba(255,247,234,.7); transition:transform .4s var(--ease)}
.card__photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .4s var(--ease)}
.card__photo .ph{font-family:var(--grotesque); font-weight:700; font-size:11px; letter-spacing:.22em}
.card__photo svg{width:30px; height:30px; opacity:.8}
.spicy{position:absolute; top:11px; left:11px; z-index:2; display:inline-flex; align-items:center; gap:5px; background:var(--ember); color:var(--night); font-family:var(--grotesque); font-weight:800; font-size:10.5px; letter-spacing:.12em; padding:5px 10px 5px 8px; border-radius:999px; box-shadow:0 8px 18px -8px rgba(245,140,25,.9)}
.spicy svg{width:12px; height:12px}
.spicy.flare{animation:flare .9s var(--ease)}
@keyframes flare{0%{transform:scale(1)}30%{transform:scale(1.18)}60%{transform:scale(.96)}100%{transform:scale(1)}}
.card__body{display:flex; flex-direction:column; gap:8px; padding:18px 18px 20px; flex:1}
.card__name{font-family:var(--grotesque); font-weight:700; font-size:18.5px; color:var(--ink); line-height:1.15}
.card__desc{font-size:14.5px; color:var(--ink-soft); line-height:1.5}
.card__foot{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; padding-top:6px}
.tags{display:flex; flex-wrap:wrap; gap:6px}
.tag{font-family:var(--grotesque); font-weight:700; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--forest); background:rgba(13,88,50,.08); padding:4px 9px; border-radius:999px}
.price-soon{font-family:var(--grotesque); font-weight:800; font-size:13px; color:var(--ember-ink); letter-spacing:.02em; display:inline-flex; align-items:center; gap:7px}
.price-soon::before{content:''; width:16px; height:2px; background:var(--neon); border-radius:2px; box-shadow:0 0 8px rgba(255,157,47,.8)}

/* Combo cards (dark variant on cream page) */
.combo-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr)); gap:18px}
.combo{position:relative; background:linear-gradient(165deg,#0a3725,#06271a); color:var(--cream); border:1px solid rgba(255,157,47,.28); border-radius:var(--radius); padding:24px 22px; overflow:hidden; transition:transform .3s var(--ease), box-shadow .3s var(--ease)}
@media(hover:hover) and (pointer:fine){.combo:hover{transform:translateY(-4px); box-shadow:0 26px 50px -26px rgba(6,39,26,.7)}}
.combo__ribbon{display:inline-block; font-family:var(--grotesque); font-weight:800; font-size:10.5px; letter-spacing:.2em; color:var(--neon); background:rgba(255,157,47,.12); border:1px solid rgba(255,157,47,.45); box-shadow:0 0 14px rgba(255,157,47,.3); padding:5px 12px; border-radius:999px; margin-bottom:14px}
.combo__name{font-family:var(--grotesque); font-weight:800; font-size:23px; color:var(--cream); margin-bottom:14px}
.combo ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px}
.combo li{display:flex; align-items:flex-start; gap:10px; font-size:15px; color:var(--cream-soft)}
.combo li svg{width:16px; height:16px; flex:0 0 auto; margin-top:3px; color:rgba(255,247,234,.55)}
.combo__foot{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:18px; padding-top:16px; border-top:1px solid rgba(255,247,234,.12)}
.combo__mojito{font-family:var(--grotesque); font-weight:800; font-size:15px; color:var(--lime); text-shadow:0 0 14px rgba(77,255,160,.4)}


/* ============================================================
   ORDER YOUR WAY — featured Keeta delivery + pickup/dine-in
   ============================================================ */
.order__head{text-align:center; max-width:620px; margin:0 auto 44px}
.order-layout{display:grid; grid-template-columns:1.3fr 1fr; gap:18px; align-items:stretch}

/* Featured delivery card (dark, glowing) */
.order-feature{position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:flex-start; background:linear-gradient(150deg,#0f4f31,#06271a 70%); color:var(--cream); border:1px solid rgba(255,157,47,.3); border-radius:24px; padding:clamp(28px,4vw,46px); box-shadow:0 34px 80px -44px rgba(6,39,26,.8); transition:transform .35s var(--ease), box-shadow .35s var(--ease)}
.order-feature__glow{position:absolute; top:-28%; right:-16%; width:420px; height:420px; background:radial-gradient(circle,rgba(255,157,47,.24),transparent 62%); pointer-events:none}
.order-feature__ic{position:relative; display:inline-flex; align-items:center; justify-content:center; width:62px; height:62px; border-radius:17px; background:var(--ember); color:var(--night); box-shadow:0 0 32px -4px rgba(255,157,47,.75); margin-bottom:22px}
.order-feature__ic svg{width:31px; height:31px}
.order-feature__tag{position:relative; font-family:var(--grotesque); font-weight:800; font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--neon); margin-bottom:11px}
.order-feature__title{position:relative; font-family:var(--grotesque); font-weight:800; font-size:clamp(26px,3.4vw,40px); line-height:1.0; color:var(--cream); margin-bottom:13px}
.order-feature__desc{position:relative; font-size:clamp(15px,1.7vw,17.5px); color:var(--cream-soft); max-width:40ch; margin-bottom:28px}
.order-feature .btn{position:relative; margin-top:auto}

/* Pickup / dine-in mini cards */
.order-side{display:flex; flex-direction:column; gap:18px}
.order-mini{display:flex; gap:18px; align-items:flex-start; flex:1; background:#fff; border:1px solid var(--line); border-radius:20px; padding:24px; box-shadow:0 18px 40px -34px rgba(6,39,26,.4); transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s}
@media(hover:hover) and (pointer:fine){
  .order-feature:hover{transform:translateY(-5px); box-shadow:0 40px 90px -44px rgba(6,39,26,.85)}
  .order-mini:hover{transform:translateY(-4px); border-color:rgba(245,140,25,.4); box-shadow:0 26px 50px -32px rgba(6,39,26,.5)}
}
.order-mini__ic{display:inline-flex; align-items:center; justify-content:center; width:50px; height:50px; flex:0 0 auto; border-radius:15px; background:rgba(13,88,50,.08); color:var(--forest)}
.order-mini__ic svg{width:25px; height:25px}
.order-mini__body{flex:1}
.order-mini__title{font-family:var(--grotesque); font-weight:800; font-size:20px; color:var(--forest); margin-bottom:5px}
.order-mini__desc{font-size:14.5px; color:var(--ink-soft); line-height:1.5; margin-bottom:11px}
.order-mini__links{display:flex; flex-direction:column; gap:8px; align-items:flex-start}
.order-mini__link{font-family:var(--grotesque); font-weight:700; font-size:14.5px; color:var(--ember-ink); text-decoration:none; transition:color .2s}
.order-mini__link:hover{color:var(--forest)}

/* ============================================================
   THE SPACE
   ============================================================ */
.space{position:relative; min-height:78vh; display:flex; align-items:flex-end; overflow:hidden; background:var(--night)}
.space__img{position:absolute; inset:0; background-image:var(--hero); background-size:cover; background-position:center}
.space__scrim{position:absolute; inset:0; background:linear-gradient(95deg,rgba(6,39,26,.97) 0%,rgba(6,39,26,.9) 42%,rgba(6,39,26,.62) 72%,rgba(6,39,26,.45) 100%),linear-gradient(0deg,rgba(6,39,26,.96) 0%,transparent 58%)}
.space .h2{text-shadow:0 2px 22px rgba(0,0,0,.6)}
.space .lead{text-shadow:0 1px 16px rgba(0,0,0,.55)}
.space .wrap{position:relative; z-index:2; padding-top:90px; padding-bottom:70px}
.space__col{max-width:560px}

/* ============================================================
   VISIT
   ============================================================ */
.visit__head{text-align:center; margin-bottom:44px}
.visit__grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,4vw,48px); align-items:stretch}
.infocard{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:clamp(24px,3vw,36px); display:flex; flex-direction:column; gap:26px; box-shadow:0 24px 50px -34px rgba(6,39,26,.4)}
.infocard h3{font-family:var(--grotesque); font-weight:800; font-size:14px; letter-spacing:.16em; text-transform:uppercase; color:var(--ember-ink); margin-bottom:14px}
.hours-row{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:11px 0; border-bottom:1px dashed var(--line)}
.hours-row:last-child{border-bottom:0}
.hours-row .d{font-family:var(--grotesque); font-weight:700; color:var(--forest)}
.hours-row .t{font-variant-numeric:tabular-nums; color:var(--ink-soft)}
.contact-links{display:flex; flex-direction:column; gap:12px}
.contact-link{display:flex; align-items:center; gap:13px; text-decoration:none; color:var(--ink); font-family:var(--grotesque); font-weight:700; font-size:16px; padding:13px 16px; border-radius:13px; background:rgba(13,88,50,.05); border:1px solid var(--line); transition:background .2s, transform .2s, border-color .2s}
.contact-link:hover{background:rgba(245,140,25,.1); border-color:var(--ember); transform:translateX(3px)}
.contact-link .ic{display:inline-flex; width:34px; height:34px; border-radius:10px; background:var(--forest); color:var(--cream); align-items:center; justify-content:center; flex:0 0 auto}
.contact-link .ic svg{width:17px; height:17px}
.contact-foot{margin-top:4px}
.contact-foot .lbl{font-family:var(--grotesque); font-weight:700; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); display:block; margin-bottom:12px}
.mapcard{position:relative; display:flex; flex-direction:column}
.mapframe{position:relative; flex:1; min-height:340px; border-radius:var(--radius); overflow:hidden; box-shadow:0 0 0 1.5px rgba(255,157,47,.4), 0 24px 50px -30px rgba(6,39,26,.5)}
.mapframe iframe{position:absolute; inset:0; width:100%; height:100%; border:0; filter:saturate(1.05)}
.mapcard .btn{margin-top:16px; align-self:flex-start}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{position:relative; background:var(--night); color:var(--cream); padding:clamp(56px,7vw,84px) 0 34px; overflow:hidden}
.footer__top{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:clamp(28px,5vw,56px)}
.footer__brand .lockup__kick{font-size:9px}
.footer__brand .lockup__name{font-size:30px}
.footer__brand p{margin:16px 0 20px; color:var(--cream-faint); font-size:15px; max-width:34ch}
.footer__col h2{font-family:var(--grotesque); font-weight:800; font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:var(--neon); margin:0 0 16px}
.footer__col a{display:block; color:var(--cream-soft); text-decoration:none; font-size:15px; padding:6px 0; transition:color .2s, padding-left .2s}
.footer__col a:hover{color:var(--neon); padding-left:5px}
.footer__bar{display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:center; margin-top:42px; padding-top:22px; border-top:1px solid var(--line-dark); color:var(--cream-faint); font-size:13.5px}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:980px){
  .order-layout{grid-template-columns:1fr}
  .visit__grid{grid-template-columns:1fr}
  .footer__top{grid-template-columns:1fr 1fr}
  .footer__brand{grid-column:1 / -1}
}
@media(max-width:860px){
  .nav__center, .nav__right .btn, .nav__right .open-chip{display:none}
  .burger{display:flex}
  .hero__col{max-width:100%}
  .dept__head{flex-direction:column}
  .dept__folio{font-size:54px}
}
@media(max-width:560px){
  body{font-size:16px}
  .footer__top{grid-template-columns:1fr}
  .footer__bar{justify-content:center; text-align:center}
  .scrollcue{display:none}
}
@media(max-width:720px){
  .scrollcue{display:none}
  .hero{padding-bottom:22px}
}

/* ============================================================
   REDUCED MOTION — strip ambient motion, keep instant reveals
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  .reveal{opacity:1 !important; transform:none !important}
  .marquee__track{animation:none !important}
  .hero__media{transform:none !important}
}