/* ==========================================================================
   THE INDIAN KITCHEN — stylesheet
   Palette: ink charcoal + warm cream + saffron gold + chili red + emerald
   Type: Fraunces (display serif) / Manrope (UI sans)
   ========================================================================== */

:root{
  --ink: #16130f;
  --ink-soft: #221c16;
  --cream: #f8efe0;
  --cream-soft: #f1e4cf;
  --paper: #fffaf2;
  --saffron: #e6a13a;
  --saffron-deep: #c07f1f;
  --chili: #c1272d;
  --chili-deep: #8f1a1f;
  --emerald: #3c7a5a;
  --emerald-deep: #285940;
  --gold-line: #d8b273;
  --ink-70: rgba(22,19,15,.7);
  --ink-45: rgba(22,19,15,.45);
  --cream-70: rgba(248,239,224,.7);
  --shadow-lg: 0 30px 60px -25px rgba(22,19,15,.45);
  --shadow-sm: 0 10px 24px -14px rgba(22,19,15,.35);
  --radius: 18px;
  --ease: cubic-bezier(.22,.9,.25,1);
  --dur: .7s;
  color-scheme: light;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:'Manrope',system-ui,-apple-system,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{ font-family:'Fraunces',Georgia,serif; margin:0; font-weight:600; letter-spacing:-.01em; }
p{ margin:0; }
button{ font-family:inherit; cursor:pointer; }
input,select,textarea{ font-family:inherit; font-size:1rem; }
section{ position:relative; }
::selection{ background:var(--chili); color:var(--cream); }

.eyebrow{
  display:flex; align-items:center; gap:10px;
  font-size:.78rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--chili); font-weight:700; margin:0 0 14px;
}
.eyebrow.center{ justify-content:center; }
.eyebrow-line{ width:28px; height:2px; background:var(--chili); display:inline-block; }

.section-head{ max-width:720px; margin:0 0 52px; padding:0 6vw; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head h2{ font-size:clamp(2rem,4vw,2.8rem); margin-bottom:14px; }
.section-head h2 em{ color:var(--chili); font-style:italic; }
.section-sub{ color:var(--ink-70); font-size:1.02rem; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 30px; border-radius:100px; border:1px solid transparent;
  font-weight:700; font-size:.95rem; letter-spacing:.01em;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .35s, color .35s, border-color .35s;
  white-space:nowrap;
}
.btn-primary{ background:var(--chili); color:var(--paper); box-shadow:0 14px 30px -12px rgba(193,39,45,.55); }
.btn-primary:hover{ transform:translateY(-3px); box-shadow:0 20px 36px -12px rgba(193,39,45,.6); background:var(--chili-deep); }
.btn-ghost{ border-color:rgba(248,239,224,.4); color:var(--cream); }
.btn-ghost:hover{ background:rgba(248,239,224,.1); transform:translateY(-3px); }
.btn-small{ padding:11px 22px; font-size:.85rem; }
.btn-block{ width:100%; }
.play-dot{ width:8px; height:8px; border-radius:50%; background:var(--saffron); box-shadow:0 0 0 0 rgba(230,161,58,.6); animation:pulseDot 1.8s infinite; }
@keyframes pulseDot{ 0%{box-shadow:0 0 0 0 rgba(230,161,58,.55);} 70%{box-shadow:0 0 0 10px rgba(230,161,58,0);} 100%{box-shadow:0 0 0 0 rgba(230,161,58,0);} }

/* ---------------------------------- utility: reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(36px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in-view{ opacity:1; transform:none; }
.reveal[data-reveal="left"]{ transform:translateX(-50px); }
.reveal[data-reveal="left"].in-view{ transform:none; }
.reveal[data-reveal="right"]{ transform:translateX(50px); }
.reveal[data-reveal="right"].in-view{ transform:none; }

.reveal-up{ opacity:0; transform:translateY(24px); animation:none; }
.reveal-line{ display:block; overflow:hidden; padding-bottom:.2em; margin-bottom:-.2em; }
.reveal-line span{ display:block; transform:translateY(110%); animation:lineUp .9s var(--ease) forwards; padding-right:.04em; }
.reveal-line:nth-child(1) span{ animation-delay:.15s; }
.reveal-line:nth-child(2) span{ animation-delay:.32s; }
.reveal-line:nth-child(3) span{ animation-delay:.49s; }
@keyframes lineUp{ to{ transform:translateY(0); } }
.hero .eyebrow.reveal-up{ animation:fadeUp .8s var(--ease) .05s forwards; }
.hero-sub.reveal-up{ animation:fadeUp .9s var(--ease) .7s forwards; }
.hero-cta.reveal-up{ animation:fadeUp .9s var(--ease) .9s forwards; }
.hero .service-badges.reveal-up{ animation:fadeUp .9s var(--ease) 1.05s forwards; }
.hero-stats.reveal-up{ animation:fadeUp .9s var(--ease) 1.25s forwards; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(22px);} to{ opacity:1; transform:none; } }

/* heading mask-reveal: headings slide up into place as their section scrolls in */
.mask-line{ display:block; overflow:hidden; padding-bottom:.22em; margin-bottom:-.22em; }
.mask-inner{ display:block; transform:translateY(105%); transition:transform .85s var(--ease); }
.reveal.in-view .mask-inner{ transform:translateY(0); }

/* shimmer sweep on accent words inside headings */
.hero-title em, .section-head h2 em{
  background:linear-gradient(90deg, var(--chili) 0%, var(--saffron) 35%, var(--chili) 70%, var(--saffron) 100%);
  background-size:250% 100%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  animation:shimmerText 7s linear infinite;
}
@keyframes shimmerText{ from{ background-position:0% 50%; } to{ background-position:250% 50%; } }
@media (prefers-reduced-motion: reduce){
  .hero-title em, .section-head h2 em{ animation:none; background-position:0 50%; }
}

/* ================================ PRELOADER ============================ */
#preloader{
  position:fixed; inset:0; z-index:9999; background:var(--ink);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .6s var(--ease), visibility .6s var(--ease);
}
#preloader.done{ opacity:0; visibility:hidden; pointer-events:none; }
.preloader-mark{ position:relative; width:120px; height:120px; display:flex; align-items:center; justify-content:center; }
.preloader-mark img{ width:82px; height:82px; border-radius:50%; object-fit:cover; }
.spice-spinner{ position:absolute; inset:0; width:120px; height:120px; animation:spin 1.6s linear infinite; }
.spinner-track{ fill:none; stroke:rgba(248,239,224,.15); stroke-width:2; }
.spinner-arc{ fill:none; stroke:var(--saffron); stroke-width:2; stroke-linecap:round; stroke-dasharray:70 220; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.grain-overlay{
  position:fixed; inset:0; pointer-events:none; z-index:9000; opacity:.035; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.cursor-dot,.cursor-ring{ position:fixed; top:0; left:0; pointer-events:none; z-index:9998; border-radius:50%; transform:translate(-50%,-50%); }
.cursor-dot{ width:6px; height:6px; background:var(--chili); }
.cursor-ring{ width:34px; height:34px; border:1.5px solid var(--chili); opacity:.55; transition:width .25s,height .25s,opacity .25s,border-color .25s; }
.cursor-ring.grow{ width:56px; height:56px; opacity:.9; border-color:var(--saffron); }
@media (hover:none), (pointer:coarse){ .cursor-dot,.cursor-ring{ display:none; } }

/* ================================= HEADER =============================== */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:500;
  padding:22px 0; transition:padding .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease);
}
.site-header.scrolled{ padding:12px 0; background:rgba(22,19,15,.82); backdrop-filter:blur(14px); box-shadow:0 12px 30px -18px rgba(0,0,0,.5); }
.nav-inner{ max-width:1320px; margin:0 auto; padding:0 6vw; display:flex; align-items:center; justify-content:space-between; gap:24px; }

.brand{ display:flex; align-items:center; gap:12px; }
.brand-mark{
  width:46px; height:46px; border-radius:50%; object-fit:cover; flex:none;
  box-shadow:0 0 0 2px rgba(216,178,115,.6), var(--shadow-sm);
}
.brand-text{ font-family:'Fraunces',serif; font-size:1.15rem; color:var(--cream); letter-spacing:.01em; }
.brand-text em{ font-style:normal; color:var(--saffron); }

.main-nav{ display:flex; gap:8px; }
.nav-link{
  position:relative; padding:9px 14px; font-size:.9rem; font-weight:600; color:var(--cream-70);
  transition:color .3s;
}
.nav-link::after{
  content:""; position:absolute; left:14px; right:14px; bottom:4px; height:2px; background:var(--saffron);
  transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease);
}
.nav-link:hover, .nav-link.active{ color:var(--cream); }
.nav-link:hover::after, .nav-link.active::after{ transform:scaleX(1); }

.nav-actions{ display:flex; align-items:center; gap:16px; }
.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; padding:6px; }
.nav-toggle span{ width:22px; height:2px; background:var(--cream); transition:transform .3s,opacity .3s; }
.nav-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* =================================== HERO ================================ */
.hero{
  position:relative; min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:radial-gradient(120% 100% at 50% -10%,#2a2119 0%,var(--ink) 55%,#0f0d0a 100%);
  color:var(--cream); overflow:hidden; padding:140px 6vw 100px;
  clip-path:polygon(0 0,100% 0,100% 94%,0 100%);
}
.hero-bg{ position:absolute; inset:0; z-index:0; }
.hero-photo{
  position:absolute; inset:0;
  background:url("../assets/images/restaurant-storefront.jpg") center 62%/cover no-repeat;
  animation:heroZoom 26s ease-in-out infinite alternate;
  filter:brightness(.9) saturate(1.15) contrast(1.05);
}
@keyframes heroZoom{ from{ transform:scale(1); } to{ transform:scale(1.09); } }
.hero-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(15,13,10,.92) 0%, rgba(15,13,10,.65) 30%, rgba(22,19,15,.32) 55%, rgba(20,17,13,.68) 100%),
    radial-gradient(120% 100% at 50% -10%, rgba(42,33,25,.2) 0%, rgba(15,13,10,.5) 60%);
}
.hero-paisley{ position:absolute; width:340px; height:340px; color:var(--saffron); opacity:.09; }
.hero-paisley.p1{ top:-60px; right:-60px; animation:float1 22s ease-in-out infinite; }
.hero-paisley.p2{ bottom:-100px; left:-100px; transform:rotate(140deg); animation:float2 26s ease-in-out infinite; color:var(--chili); }
.hero-paisley.p3{ top:40%; left:60%; width:220px; height:220px; opacity:.06; animation:float1 18s ease-in-out infinite reverse; }
@keyframes float1{ 0%,100%{ transform:translateY(0) rotate(0deg);} 50%{ transform:translateY(30px) rotate(8deg);} }
@keyframes float2{ 0%,100%{ transform:translateY(0) rotate(140deg);} 50%{ transform:translateY(-24px) rotate(150deg);} }

.hero-steam{ position:absolute; bottom:0; width:2px; border-radius:2px; background:linear-gradient(to top,rgba(248,239,224,0),rgba(248,239,224,.18)); filter:blur(2px); animation:steamRise 6s ease-in infinite; }
.hero-steam.s1{ left:22%; height:220px; animation-delay:0s; }
.hero-steam.s2{ left:55%; height:280px; animation-delay:2s; }
.hero-steam.s3{ left:78%; height:180px; animation-delay:4s; }
@keyframes steamRise{ 0%{ transform:translateY(0) scaleX(1); opacity:0;} 15%{opacity:1;} 100%{ transform:translateY(-260px) scaleX(2.4); opacity:0;} }

.hero-content{ position:relative; z-index:2; max-width:900px; text-align:center; }
.hero-title{ font-size:clamp(2.6rem,7vw,5.4rem); line-height:1.1; font-weight:700; margin:0 0 22px; }
.hero-title em{ font-style:italic; color:var(--saffron); }
.hero-sub{ max-width:560px; margin:0 auto 34px; font-size:1.12rem; color:var(--cream-70); }
.hero-cta{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-bottom:56px; }

.hero-stats{ display:flex; gap:48px; justify-content:center; flex-wrap:wrap; }
.hero-stat{ display:flex; flex-direction:column; align-items:center; }
.hero-stat strong{ font-family:'Fraunces',serif; font-size:2.2rem; color:var(--saffron); }
.hero-stat span{ font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--cream-70); margin-top:4px; }

.scroll-cue{
  position:absolute; bottom:36px; left:50%; transform:translateX(-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:6px; color:var(--cream-70);
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; animation:bob 2.4s ease-in-out infinite;
}
.scroll-cue svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; }
@keyframes bob{ 0%,100%{ transform:translate(-50%,0);} 50%{ transform:translate(-50%,8px);} }

/* ================================= MARQUEE =============================== */
.marquee{ background:var(--chili); color:var(--paper); overflow:hidden; padding:16px 0; position:relative; z-index:2; }
.marquee-track{ display:flex; gap:22px; white-space:nowrap; width:max-content; animation:marquee 26s linear infinite; font-family:'Fraunces',serif; font-size:1.15rem; font-style:italic; }
.marquee-track span{ padding:0 4px; }
.marquee-track i{ color:var(--saffron); font-style:normal; }
@keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ================================ CHEF PICKS =============================== */
.picks{ padding:100px 0; background:var(--ink); color:var(--cream); }
.picks .eyebrow{ color:var(--saffron); }
.picks h2{ color:var(--cream); }
.picks-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; max-width:1320px; margin:0 auto; padding:0 6vw; }
.pick-card{
  position:relative; background:var(--ink-soft); border-radius:22px; padding:0 0 28px; overflow:hidden;
  border:1px solid rgba(248,239,224,.08); transition:transform .5s var(--ease), border-color .5s;
}
.pick-card:hover{ transform:translateY(-8px); border-color:rgba(230,161,58,.4); }
.pick-card:hover .pick-photo{ transform:scale(1.08); }
.pick-ribbon{
  position:absolute; top:18px; right:-34px; z-index:2; background:var(--chili); color:var(--paper); font-size:.68rem;
  letter-spacing:.14em; text-transform:uppercase; font-weight:700; padding:5px 40px; transform:rotate(38deg);
}
.pick-photo{
  width:100%; height:180px; background-size:cover; background-position:center;
  transition:transform .6s var(--ease);
}
.pick-content{ padding:24px 26px 0; }
.pick-icon{ width:58px; height:58px; border-radius:16px; background:linear-gradient(145deg,var(--saffron),var(--chili)); display:flex; align-items:center; justify-content:center; font-size:1.6rem; margin-bottom:22px; }
.pick-card h3{ font-size:1.3rem; margin-bottom:8px; color:var(--cream); }
.pick-card .pick-cat{ font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--saffron); margin-bottom:10px; display:block; }
.pick-card p{ color:var(--cream-70); font-size:.92rem; margin-bottom:20px; }
.pick-price{ font-family:'Fraunces',serif; font-size:1.3rem; color:var(--saffron); }

/* ================================= MENU ==================================== */
.menu-section{ padding:110px 0 60px; max-width:1320px; margin:0 auto; }

/* ---- Menu highlights: category showcase + order-online CTA ---- */
.highlight-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
  padding:0 6vw; margin-bottom:48px;
}
.highlight-card{
  position:relative; text-align:left; border:1px solid rgba(216,178,115,.5);
  border-radius:14px; padding:0; overflow:hidden; cursor:pointer; font-family:inherit;
  aspect-ratio:3/4; display:block; box-shadow:var(--shadow-sm);
  --tiltX:0deg; --tiltY:0deg;
  transform:perspective(800px) rotateX(0) rotateY(0) translateY(0);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.highlight-card.tilting{ transform:perspective(800px) rotateX(var(--tiltX)) rotateY(var(--tiltY)) translateY(-6px); }
.highlight-card:hover{ box-shadow:var(--shadow-lg); }
.highlight-icon{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:3rem; opacity:.9;
}
.highlight-scrim{
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(10,9,7,.92) 0%, rgba(10,9,7,.55) 32%, rgba(10,9,7,0) 62%);
  transition:background .35s var(--ease);
}
.highlight-card:hover .highlight-scrim{ background:linear-gradient(to top, rgba(10,9,7,.95) 0%, rgba(10,9,7,.72) 46%, rgba(10,9,7,.1) 78%); }
.highlight-body{
  position:absolute; left:0; right:0; bottom:0; padding:18px 18px 20px; color:var(--paper);
}
.highlight-card h3{
  font-size:1.05rem; color:var(--paper); text-transform:uppercase; letter-spacing:.03em;
  font-family:'Fraunces',serif; line-height:1.25;
}
.highlight-card p{
  font-size:.82rem; color:rgba(248,239,224,.85); line-height:1.5; margin-top:8px;
  max-height:0; opacity:0; overflow:hidden; transition:max-height .4s var(--ease), opacity .3s var(--ease), margin-top .4s var(--ease);
}
.highlight-card:hover p{ max-height:5em; opacity:1; margin-top:8px; }
.highlight-link{
  display:inline-flex; align-items:center; gap:6px; margin-top:10px; font-size:.72rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--saffron);
  max-height:0; opacity:0; overflow:hidden; transition:max-height .4s var(--ease) .05s, opacity .3s var(--ease) .05s;
}
.highlight-card:hover .highlight-link{ max-height:2em; opacity:1; }
.highlight-link i{ font-style:normal; transition:transform .3s var(--ease); }
.highlight-card:hover .highlight-link i{ transform:translateX(4px); }

.highlight-cta{ text-align:center; margin-bottom:56px; }
.btn-large{ padding:18px 38px; font-size:1.02rem; }
.btn-arrow{ transition:transform .3s var(--ease); display:inline-block; }
.btn-large:hover .btn-arrow{ transform:translateX(5px); }
.highlight-cta-note{ margin-top:12px; font-size:.82rem; color:var(--ink-45); }
/* `margin:0 auto` on a max-content flex child resolves to a NEGATIVE margin once
   the tabs are wider than the screen, which breaks the scroll extent and makes
   the rail feel stuck. `justify-content:safe center` centres it only while it
   fits and falls back to start-aligned when it overflows. */
.menu-tabs-wrap{
  position:relative; display:flex; justify-content:safe center;
  overflow-x:auto; overscroll-behavior-x:contain; scroll-behavior:smooth;
  padding:0 6vw 4px; margin-bottom:20px; scrollbar-width:thin;
  -webkit-overflow-scrolling:touch;
}
.menu-tabs{ display:flex; gap:10px; width:max-content; flex:none; }
.menu-tab{ scroll-snap-align:center; }
/* arrows: without them there is no hint on a desktop that the rail scrolls */
.tabs-nav{
  position:absolute; top:0; bottom:8px; width:44px; border:none; cursor:pointer; z-index:3;
  display:none; align-items:center; justify-content:center; font-size:1.1rem; color:var(--ink);
  background:linear-gradient(90deg,var(--paper) 55%,rgba(255,250,242,0));
}
.tabs-nav.next{ right:0; background:linear-gradient(270deg,var(--paper) 55%,rgba(255,250,242,0)); }
.tabs-nav.prev{ left:0; }
.tabs-nav[hidden]{ display:none !important; }
.menu-tabs-wrap.scrollable .tabs-nav{ display:flex; }
@media (hover:none){ .menu-tabs-wrap.scrollable .tabs-nav{ display:none; } }
.menu-tab{
  display:flex; align-items:center; gap:9px; padding:12px 20px; border-radius:100px; border:1.5px solid var(--gold-line);
  background:var(--paper); color:var(--ink); font-weight:700; font-size:.9rem; white-space:nowrap;
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s, transform .3s;
}
.menu-tab svg{ width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.8; }
.menu-tab:hover{ transform:translateY(-2px); }
.menu-tab.active{ background:var(--chili); border-color:var(--chili); color:var(--paper); box-shadow:0 12px 22px -12px rgba(193,39,45,.55); }

.menu-legend{ display:flex; justify-content:center; gap:26px; padding:0 6vw; margin-bottom:34px; font-size:.85rem; color:var(--ink-70); font-weight:600; }
.menu-legend .dot{ width:10px; height:10px; border-radius:50%; display:inline-block; margin-right:6px; vertical-align:middle; }
.dot.veg{ background:var(--emerald); box-shadow:0 0 0 2px #fff,0 0 0 3px var(--emerald); }
.dot.nonveg{ background:var(--chili); box-shadow:0 0 0 2px #fff,0 0 0 3px var(--chili); }

.menu-panel{ padding:0 6vw; min-height:300px; }
.menu-cat-sub{ text-align:center; color:var(--ink-45); font-size:.85rem; text-transform:uppercase; letter-spacing:.14em; margin-bottom:30px; }
.menu-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px 34px; }
.menu-group + .menu-group{ margin-top:38px; }
.menu-group-title{ font-family:'Fraunces',serif; font-size:1.2rem; color:var(--chili); margin-bottom:16px; padding-bottom:8px; border-bottom:1px dashed var(--gold-line); }

.menu-item{
  display:flex; gap:14px; align-items:flex-start; padding:16px 18px; border-radius:14px; background:var(--paper);
  border-left:3px solid transparent; box-shadow:var(--shadow-sm); opacity:0; transform:translateY(14px);
  animation:itemIn .55s var(--ease) forwards;
}
@keyframes itemIn{ to{ opacity:1; transform:none; } }
.menu-item{ transition:border-left-color .3s var(--ease), padding-left .3s var(--ease), box-shadow .3s var(--ease); }
.menu-item:hover{ border-left-color:var(--saffron); padding-left:24px; box-shadow:0 16px 30px -18px rgba(22,19,15,.4); }
/* brief highlight so a jump from the Dilli cards shows which dish it meant */
.menu-item.dish-flash{
  animation:dishFlash 2.4s var(--ease);
  border-left-color:var(--saffron);
}
@keyframes dishFlash{
  0%,12%{ background:#fff3d6; box-shadow:0 0 0 3px rgba(230,161,58,.45); }
  100%{ background:var(--paper); box-shadow:var(--shadow-sm); }
}
@media (prefers-reduced-motion: reduce){ .menu-item.dish-flash{ animation:none; background:#fff3d6; } }
.item-dot{ margin-top:7px; width:10px; height:10px; border-radius:50%; flex:none; }
.item-dot.veg{ background:var(--emerald); box-shadow:0 0 0 2px #fff,0 0 0 3px var(--emerald); }
.item-dot.nonveg{ background:var(--chili); box-shadow:0 0 0 2px #fff,0 0 0 3px var(--chili); }
.item-body{ flex:1; display:flex; justify-content:space-between; gap:14px; }
.item-text h4{ font-size:1.02rem; margin-bottom:4px; }
.item-text p{ font-size:.85rem; color:var(--ink-70); }
.item-price{ font-family:'Fraunces',serif; font-weight:700; color:var(--chili); white-space:nowrap; font-size:1.02rem; }

/* ================================= INSTAGRAM =============================== */
.gallery{ padding:110px 0; max-width:1320px; margin:0 auto; }
.ig-wrap{
  display:grid; grid-template-columns:minmax(0,380px) minmax(0,1fr); gap:44px;
  align-items:center; max-width:1000px; margin:0 auto; padding:0 6vw;
}
/* Instagram's own embed. Its card reflows with width, so an approximate aspect
   ratio keeps it from leaving a gap at any breakpoint. */
.ig-reel{
  position:relative; width:100%; aspect-ratio:420 / 760; border-radius:18px;
  overflow:hidden; background:var(--paper); box-shadow:var(--shadow-lg);
}
.ig-reel iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.ig-side h3{ font-size:1.4rem; margin-bottom:10px; }
.ig-handle{
  display:inline-flex; align-items:center; gap:11px; text-decoration:none;
  font-family:'Fraunces',serif; font-size:1.25rem; margin-bottom:14px;
}
.ig-badge{
  width:40px; height:40px; border-radius:12px; display:grid; place-items:center; flex:none;
  background:linear-gradient(45deg,#f09433,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888); color:#fff;
}
.ig-badge svg{ width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.9; }
.ig-badge .ig-dot{ fill:currentColor; stroke:none; }
.ig-handle:hover .ig-badge{ transform:scale(1.06); }
.ig-badge{ transition:transform .3s var(--ease); }
.ig-copy{ color:var(--ink-70); margin:0 0 22px; max-width:46ch; }
.ig-watch{
  display:inline-block; margin-top:14px; font-size:.88rem; font-weight:700;
  color:var(--chili); text-decoration:none; border-bottom:1px solid rgba(193,39,45,.3);
}
.ig-watch:hover{ border-bottom-color:var(--chili); }

/* =============================== TESTIMONIALS =============================== */
.reviews{ padding:110px 0; background:var(--ink); color:var(--cream); }
.reviews .eyebrow{ color:var(--saffron); }
.reviews h2{ color:var(--cream); }
/* Side breathing room comes from the width, NOT padding: overflow clips at the
   padding box, so a horizontal padding here would leave the neighbouring
   review visible in the gutter, sliced mid-word. */
.reviews-slider{ width:min(760px, 100% - 12vw); margin:0 auto; position:relative; overflow:hidden; }
.reviews-track{ display:flex; transition:transform .6s var(--ease); }
.review-card{ flex:0 0 100%; text-align:center; padding:10px 20px 0; }
.review-stars{ color:var(--saffron); font-size:1.1rem; margin-bottom:18px; letter-spacing:2px; }
.review-quote{ font-family:'Fraunces',serif; font-style:italic; font-size:1.4rem; line-height:1.5; margin-bottom:22px; }
.review-name{ font-weight:700; }
.review-role{ font-size:.82rem; color:var(--cream-70); }
.reviews-dots{ display:flex; justify-content:center; gap:9px; margin-top:32px; }
.rdot{ width:9px; height:9px; border-radius:50%; background:rgba(248,239,224,.25); border:none; padding:0; transition:background .3s,transform .3s; }
.rdot.active{ background:var(--saffron); transform:scale(1.3); }

/* ================================== RESERVE ================================= */
.reserve{ padding:110px 0; }
.reserve-inner{ max-width:1200px; margin:0 auto; padding:0 6vw; display:grid; grid-template-columns:.85fr 1.15fr; gap:60px; align-items:center; }
.reserve-copy h2{ font-size:clamp(2rem,4vw,2.6rem); margin-bottom:16px; }
.reserve-copy p{ color:var(--ink-70); margin-bottom:26px; }
.reserve-alt{ display:flex; flex-direction:column; gap:12px; }
.alt-link{ display:inline-flex; align-items:center; gap:10px; font-weight:700; padding:12px 18px; border-radius:12px; background:var(--paper); box-shadow:var(--shadow-sm); width:fit-content; transition:transform .3s; }
.alt-link:hover{ transform:translateX(4px); }

.reserve-form{ background:var(--paper); border-radius:24px; padding:34px; box-shadow:var(--shadow-lg); }
.form-row{ display:flex; gap:16px; margin-bottom:16px; }
.field{ flex:1; display:flex; flex-direction:column; gap:6px; }
.field.small{ flex:.6; }
.field label{ font-size:.8rem; font-weight:700; color:var(--ink-70); }
.field label span{ font-weight:400; color:var(--ink-45); }
.field input, .field select, .field textarea{
  border:1.5px solid var(--cream-soft); background:var(--cream); border-radius:10px; padding:11px 13px;
  transition:border-color .3s, background .3s; resize:vertical;
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--saffron); background:var(--paper); }
.reserve-form .field{ margin-bottom:16px; }
.reserve-form .btn-block{ margin-top:6px; position:relative; }
.btn-loading{ display:none; width:16px; height:16px; border-radius:50%; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; animation:spin .7s linear infinite; }
.reserve-form.sending .btn-label{ opacity:0; }
.reserve-form.sending .btn-loading{ display:block; position:absolute; }
.form-hint{ font-size:.76rem; color:var(--ink-45); margin-top:14px; text-align:center; }
.form-success{ display:none; text-align:center; padding:30px 10px; }
.form-success.show{ display:block; }
.form-success .tick{ width:56px; height:56px; border-radius:50%; background:var(--emerald); color:#fff; display:flex; align-items:center; justify-content:center; margin:0 auto 16px; font-size:1.6rem; animation:popIn .5s var(--ease); }
@keyframes popIn{ from{ transform:scale(0);} to{ transform:scale(1);} }

/* ================================== CONTACT ================================= */
.contact{ padding:110px 0; background:var(--cream-soft); }
.contact-grid{ max-width:1320px; margin:0 auto; padding:0 6vw; display:grid; grid-template-columns:0.65fr 1.35fr; gap:40px; align-items:center; }
.contact h2{ font-size:clamp(2rem,4vw,2.6rem); margin-bottom:26px; }
.info-list{ display:flex; flex-direction:column; gap:22px; margin-bottom:30px; }
.info-list li{ display:flex; gap:16px; align-items:flex-start; }
.info-icon{ font-size:1.3rem; }
.info-list strong{ display:block; font-family:'Fraunces',serif; margin-bottom:3px; }
.info-list p{ color:var(--ink-70); font-size:.94rem; }
.info-list a{ color:var(--chili); font-weight:700; }
.hours-table{ margin-top:6px; border-collapse:collapse; font-size:.92rem; }
.hours-table td{ padding:2px 14px 2px 0; color:var(--ink-70); }
.hours-table td:first-child{ font-weight:700; color:var(--ink); }
.social-row{ display:flex; gap:10px; }
.social-btn{ width:42px; height:42px; border-radius:50%; background:var(--paper); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.78rem; box-shadow:var(--shadow-sm); transition:transform .3s,background .3s,color .3s; }
.social-btn:hover{ background:var(--chili); color:var(--paper); transform:translateY(-3px); }
.contact-map{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  border-radius:24px; overflow:hidden; box-shadow:var(--shadow-lg); height:420px; background:var(--cream-soft);
  text-align:center; transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.contact-map:hover{ transform:translateY(-4px); box-shadow:0 36px 60px -24px rgba(22,19,15,.5); }
.map-grid{
  position:absolute; inset:0; opacity:.5;
  background-image:
    linear-gradient(var(--gold-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--gold-line) 1px, transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(circle at 50% 45%, #000 0%, transparent 72%);
  mask-image:radial-gradient(circle at 50% 45%, #000 0%, transparent 72%);
}
.map-pin{
  position:relative; font-size:2.4rem; margin-bottom:6px; filter:drop-shadow(0 10px 14px rgba(22,19,15,.3));
  animation:pinDrop 2.6s ease-in-out infinite;
}
@keyframes pinDrop{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-8px);} }
.contact-map strong{ position:relative; font-family:'Fraunces',serif; font-size:1.25rem; color:var(--ink); }
.contact-map span{ position:relative; color:var(--ink-70); font-size:.92rem; }
.map-cta{
  position:relative; display:inline-flex; align-items:center; gap:6px; margin-top:16px; padding:12px 22px;
  border-radius:100px; background:var(--chili); color:var(--paper) !important; font-weight:700; font-size:.85rem;
  box-shadow:0 14px 26px -12px rgba(193,39,45,.5); transition:transform .3s var(--ease), background .3s;
}
.map-cta i{ font-style:normal; transition:transform .3s var(--ease); }
.contact-map:hover .map-cta{ background:var(--chili-deep); }
.contact-map:hover .map-cta i{ transform:translateX(4px); }

/* --- "Visit the Kitchen": location card floating over the video -----------
   Three knobs drive the overlap:
     --video-w    : the video's width, as a % of this column
     --overlap    : how much of the VIDEO's own width the card covers, %
     --card-bleed : how far the card may sit outside the column, to the right
   The card's width is derived from all three, so the lap stays exactly
   --overlap of the video whichever number you change. Card sits on top. */
.contact-visual{
  --video-w: 76;
  --overlap: 10;
  --card-bleed: 56px;
  position:relative; display:flex; align-items:center; min-height:470px;
}
.contact-video{
  position:relative; z-index:1;
  width:calc(var(--video-w) * 1%);
  aspect-ratio:16 / 9;
  border-radius:24px; overflow:hidden; background:var(--ink);
  box-shadow:0 34px 62px -28px rgba(22,19,15,.5);
}
.contact-video video{ display:block; width:100%; height:100%; object-fit:cover; }
/* Tap target shown over the poster until the clip is loaded. Sits under the
   hairline ::after overlay, so it needs its own stacking context. */
.video-play{
  position:absolute; z-index:2; left:50%; top:50%; transform:translate(-50%,-50%);
  width:64px; height:64px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(22,19,15,.62); color:var(--cream); font-size:1.4rem; line-height:1;
  padding-left:4px; backdrop-filter:blur(3px);
  box-shadow:0 8px 24px -8px rgba(0,0,0,.6); transition:transform .2s, background .2s;
}
.video-play:hover{ background:var(--chili); transform:translate(-50%,-50%) scale(1.07); }
.video-play[hidden]{ display:none; }

/* hairline edge so the video reads as a plate under the card */
.contact-video::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(248,239,224,.16);
}
.contact-visual .contact-map{
  position:absolute; z-index:3;
  right:calc(-1 * var(--card-bleed)); top:50%; transform:translateY(-50%);
  width:calc((100 - var(--video-w) + var(--video-w) * var(--overlap) / 100) * 1% + var(--card-bleed));
  height:78%; padding:0 18px;
  background:var(--paper);
  box-shadow:0 44px 74px -22px rgba(22,19,15,.6);
}
.contact-visual .contact-map:hover{ transform:translateY(-50%) translateY(-5px); }

/* =================================== FOOTER ================================= */
.site-footer{ position:relative; background:var(--ink); color:var(--cream-70); padding:80px 0 0; overflow:hidden; }
.footer-photo{
  position:absolute; inset:0;
  background:url("../assets/images/restaurant-storefront.jpg") center 25%/cover no-repeat;
  filter:brightness(.85) saturate(1.1);
}
.footer-scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,9,7,.55) 0%, rgba(10,9,7,.35) 30%, rgba(10,9,7,.65) 65%, var(--ink) 100%);
}
.footer-top{ position:relative; max-width:1320px; margin:0 auto; padding:0 6vw; display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:60px; border-bottom:1px solid rgba(248,239,224,.15); }
.footer-brand{ display:flex; flex-direction:column; gap:14px; }
.footer-brand .brand-mark{ margin-bottom:4px; }
.footer-brand .brand-text{ font-size:1.2rem; }
.footer-brand p{ font-size:.88rem; max-width:280px; }

.service-badges{ display:flex; flex-wrap:wrap; gap:10px; }
.service-badges span{
  display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border-radius:100px;
  background:rgba(248,239,224,.08); border:1px solid rgba(248,239,224,.2); font-size:.82rem; font-weight:600;
  color:var(--cream);
}
.hero .service-badges{ justify-content:center; margin-bottom:36px; }
.footer-col h4{ color:var(--cream); font-family:'Fraunces',serif; font-size:1rem; margin-bottom:16px; }
.footer-col{ display:flex; flex-direction:column; gap:10px; font-size:.9rem; }
.footer-col a:hover{ color:var(--saffron); }
.footer-addr{ font-style:normal; font-size:.86rem; line-height:1.6; color:var(--cream-70); margin:4px 0 0; }
.footer-hours{ font-size:.82rem; line-height:1.7; color:var(--cream-70); margin:10px 0 0; }
.footer-hours b{ color:var(--saffron); font-weight:700; }
.closed-row td{ color:var(--chili); font-weight:700; }
.footer-col p{ font-size:.85rem; margin-bottom:6px; }
.newsletter-form{ display:flex; border:1px solid rgba(248,239,224,.25); border-radius:100px; overflow:hidden; }
.newsletter-form input{ flex:1; background:transparent; border:none; padding:11px 16px; color:var(--cream); font-size:.85rem; }
.newsletter-form input::placeholder{ color:var(--cream-70); }
.newsletter-form input:focus{ outline:none; }
.newsletter-form button{ background:var(--saffron); border:none; width:42px; color:var(--ink); font-weight:800; }
.footer-bottom{ position:relative; max-width:1320px; margin:0 auto; padding:24px 6vw; display:flex; justify-content:center; flex-wrap:wrap; gap:10px; font-size:.8rem; }

.photo-credits{ position:relative; max-width:1320px; margin:0 auto; padding:0 6vw 28px; font-size:.78rem; color:var(--cream-70); opacity:.7; }
.photo-credits summary{ cursor:pointer; font-weight:700; }
.photo-credits p{ margin:10px 0 8px; }
.photo-credits ul{ list-style:disc; padding-left:1.2em; display:grid; gap:4px; }
.photo-credits a{ color:var(--saffron); text-decoration:underline; }

.back-to-top{
  position:fixed; bottom:98px; right:26px; width:48px; height:48px; border-radius:50%; background:var(--chili); color:#fff;
  display:flex; align-items:center; justify-content:center; z-index:400; box-shadow:var(--shadow-lg);
  opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity .35s,visibility .35s,transform .35s;
}
.back-to-top.show{ opacity:1; visibility:visible; transform:none; }
.back-to-top svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; }
.back-to-top:hover{ background:var(--chili-deep); }

/* ================================== FAQ CHATBOT =============================== */
/* The closed panel is visibility:hidden, which still takes up layout space, so
   this container stays roughly 350x550px. Anchored bottom-right at z-index 500
   that is an invisible tap-blocker covering most of a phone screen — it was
   swallowing taps on the hero buttons. The container is click-through; only the
   bubble and the opened panel take pointer events. */
.faq-bot{ position:fixed; bottom:26px; right:26px; z-index:500; display:flex; flex-direction:column; align-items:flex-end; gap:14px; pointer-events:none; }
.faq-toggle{ pointer-events:auto; }
.faq-toggle{
  position:relative; width:60px; height:60px; border-radius:50%; border:none; cursor:pointer;
  background:linear-gradient(145deg,var(--saffron),var(--chili)); box-shadow:0 16px 32px -12px rgba(193,39,45,.55);
  display:flex; align-items:center; justify-content:center; transition:transform .3s var(--ease);
}
.faq-toggle:hover{ transform:scale(1.07); }
.faq-toggle-icon{ position:absolute; font-size:1.6rem; transition:opacity .25s var(--ease), transform .25s var(--ease); }
.faq-icon-close{ opacity:0; transform:scale(.5) rotate(-45deg); color:#fff; font-size:1.3rem; }
.faq-icon-chat{ opacity:1; transform:scale(1) rotate(0); }
.faq-bot.open .faq-icon-chat{ opacity:0; transform:scale(.5) rotate(45deg); }
.faq-bot.open .faq-icon-close{ opacity:1; transform:scale(1) rotate(0); }
.faq-ping{
  position:absolute; inset:-4px; border-radius:50%; border:2px solid var(--saffron);
  animation:faqPing 2.4s ease-out infinite;
}
.faq-bot.open .faq-ping{ display:none; }
@keyframes faqPing{ 0%{ transform:scale(.85); opacity:.8; } 100%{ transform:scale(1.35); opacity:0; } }

.faq-panel{
  width:min(354px, calc(100vw - 40px)); height:min(480px, calc(100vh - 140px)); background:var(--paper);
  border-radius:20px; box-shadow:var(--shadow-lg); display:flex; flex-direction:column; overflow:hidden;
  transform-origin:bottom right; transform:scale(.9) translateY(12px); opacity:0; visibility:hidden; pointer-events:none;
  transition:transform .3s var(--ease), opacity .3s var(--ease), visibility .3s;
}
.faq-bot.open .faq-panel{ transform:scale(1) translateY(0); opacity:1; visibility:visible; pointer-events:auto; }

.faq-header{ display:flex; align-items:center; gap:12px; padding:16px 16px; background:var(--ink); color:var(--cream); flex:none; }
.faq-avatar{ width:38px; height:38px; border-radius:50%; background:linear-gradient(145deg,var(--saffron),var(--chili)); display:flex; align-items:center; justify-content:center; font-size:1.15rem; flex:none; }
.faq-header-text{ display:flex; flex-direction:column; flex:1; min-width:0; }
.faq-header-text strong{ font-family:'Fraunces',serif; font-size:.98rem; }
.faq-header-text span{ font-size:.74rem; color:var(--cream-70); }
.faq-close{ background:none; border:none; color:var(--cream-70); font-size:1rem; cursor:pointer; padding:6px; flex:none; transition:color .2s; }
.faq-close:hover{ color:var(--cream); }

.faq-messages{ flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px; background:var(--cream); }
.faq-msg{ max-width:82%; padding:10px 14px; border-radius:14px; font-size:.86rem; line-height:1.45; animation:msgIn .3s var(--ease); }
@keyframes msgIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
.faq-msg.bot{ align-self:flex-start; background:var(--paper); border-bottom-left-radius:4px; box-shadow:var(--shadow-sm); }
.faq-msg.user{ align-self:flex-end; background:var(--chili); color:var(--paper); border-bottom-right-radius:4px; }
.faq-msg a{ color:var(--chili); font-weight:700; text-decoration:underline; }
.faq-msg.user a{ color:var(--cream); }
.faq-typing{ align-self:flex-start; display:flex; gap:4px; padding:12px 14px; background:var(--paper); border-radius:14px; border-bottom-left-radius:4px; box-shadow:var(--shadow-sm); }
.faq-typing span{ width:6px; height:6px; border-radius:50%; background:var(--ink-45); animation:faqTyping 1.1s ease-in-out infinite; }
.faq-typing span:nth-child(2){ animation-delay:.15s; }
.faq-typing span:nth-child(3){ animation-delay:.3s; }
@keyframes faqTyping{ 0%,60%,100%{ transform:translateY(0); opacity:.5; } 30%{ transform:translateY(-4px); opacity:1; } }

/* Capped so a long run of suggestions can never squeeze the transcript out of
   view; it scrolls internally instead. */
.faq-chips{ display:flex; flex-wrap:wrap; gap:8px; padding:0 16px 12px; flex:none; background:var(--cream); max-height:34%; overflow-y:auto; }
.faq-chips:not(:empty){ padding-top:10px; box-shadow:0 -8px 12px -10px rgba(22,19,15,.35); }
.faq-chip{
  border:1.5px solid var(--gold-line); background:var(--paper); color:var(--ink); border-radius:100px;
  padding:7px 13px; font-size:.78rem; font-weight:600; cursor:pointer; transition:background .25s,color .25s,border-color .25s;
}
.faq-chip:hover{ background:var(--chili); border-color:var(--chili); color:var(--paper); }

.faq-input-row{ display:flex; gap:8px; padding:12px; border-top:1px solid var(--cream-soft); background:var(--paper); flex:none; }
.faq-input-row input{ flex:1; border:1.5px solid var(--cream-soft); background:var(--cream); border-radius:100px; padding:10px 16px; font-size:.85rem; }
.faq-input-row input:focus{ outline:none; border-color:var(--saffron); }
.faq-input-row button{ width:38px; height:38px; border-radius:50%; border:none; background:var(--chili); color:#fff; flex:none; cursor:pointer; transition:background .2s; }
.faq-input-row button:hover{ background:var(--chili-deep); }

@media (max-width: 480px){
  .faq-bot{ right:16px; bottom:16px; }
  .back-to-top{ right:16px; }
  .faq-panel{ width:calc(100vw - 32px); }
}

/* ============================ MOTION & POLISH ==============================
   Small, cheap micro-interactions. Everything here is transition-based, so the
   global prefers-reduced-motion rule at the bottom of the file switches it all
   off in one go. */

/* reading progress across the very top of the page */
.scroll-progress{
  position:fixed; top:0; left:0; z-index:1000; width:100%; height:3px;
  transform:scaleX(0); transform-origin:0 50%; pointer-events:none;
  background:linear-gradient(90deg,var(--saffron),var(--chili));
}

/* language toggle — the pill slides between DE and EN */
.lang-switch{
  position:relative; display:flex; align-items:center; flex:none; padding:3px;
  border-radius:100px; border:1px solid rgba(248,239,224,.28); background:rgba(248,239,224,.08);
}
.lang-thumb{
  position:absolute; top:3px; left:3px; width:calc(50% - 3px); height:calc(100% - 6px);
  border-radius:100px; background:var(--saffron); transition:transform .38s var(--ease);
}
.lang-switch[data-active="en"] .lang-thumb{ transform:translateX(100%); }
.lang-opt{
  position:relative; z-index:1; border:none; background:none; cursor:pointer; font:inherit;
  font-size:.74rem; font-weight:800; letter-spacing:.06em; color:var(--cream-70);
  padding:6px 13px; border-radius:100px; transition:color .3s var(--ease);
}
.lang-opt:hover{ color:var(--cream); }
.lang-opt.active, .lang-opt.active:hover{ color:var(--ink); }

/* a light sweeps across primary buttons on hover */
.btn-primary{ position:relative; overflow:hidden; }
.btn-primary::after{
  content:""; position:absolute; top:0; left:-150%; width:55%; height:100%; pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.3), transparent);
  transform:skewX(-18deg); transition:left .7s var(--ease);
}
.btn-primary:hover::after{ left:165%; }

/* staggered reveals delay the heading mask to match its own card */
.reveal .mask-inner{ transition-delay:inherit; }

/* let the marquee rest while it is being read */
.marquee:hover .marquee-track{ animation-play-state:paused; }

.highlight-link i{ display:inline-block; transition:transform .3s var(--ease); }
.highlight-card:hover .highlight-link i{ transform:translateX(5px); }

.brand-mark{ transition:transform .5s var(--ease); }
.brand:hover .brand-mark{ transform:rotate(8deg) scale(1.06); }

.footer-col a{ display:inline-block; transition:color .25s var(--ease), transform .25s var(--ease); }
.footer-col a:hover{ transform:translateX(4px); }

.service-badges span{ transition:transform .3s var(--ease); }
.service-badges span:hover{ transform:translateY(-3px); }


/* real brand marks in the social row, tinted to each brand on hover */
.social-btn svg{ width:19px; height:19px; display:block; }
.social-ig svg{ fill:none; stroke:currentColor; stroke-width:1.9; }
.social-ig .ig-dot{ fill:currentColor; stroke:none; }
.social-fb svg{ fill:currentColor; }
.social-ig:hover{ background:linear-gradient(45deg,#f09433,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888); color:#fff; }
.social-fb:hover{ background:#1877f2; color:#fff; }
.social-tt svg{ fill:currentColor; }
.social-tt:hover{ background:#000; color:#fff; }

/* two ordering routes side by side: our own checkout, and the allO page */
.cta-pair{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:14px}
.cta-pair.single .btn-large{min-width:260px}
.btn-outline{border-color:var(--gold-line);color:var(--ink);background:var(--paper)}
.btn-outline:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);transform:translateY(-3px)}

/* ================================== RESPONSIVE =============================== */
@media (max-width: 980px){
  .picks-row{ grid-template-columns:1fr; }
  .menu-grid{ grid-template-columns:1fr; }
  .reserve-inner{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; }
  .contact-visual{ flex-direction:column; gap:24px; min-height:0; }
  .contact-video{ width:100%; }
  .contact-visual .contact-map{ position:static; transform:none; width:100%; height:360px; padding:0 18px; }
  .contact-visual .contact-map:hover{ transform:translateY(-4px); }
  .footer-top{ grid-template-columns:1fr 1fr; }
  .ig-wrap{ grid-template-columns:1fr; gap:28px; justify-items:center; text-align:center; }
  .ig-reel{ max-width:380px; }
  .ig-copy{ margin-inline:auto; }
  .highlight-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 760px){
  .main-nav{
    position:fixed; top:0; right:0; height:100vh; width:min(78vw,320px); background:var(--ink);
    flex-direction:column; padding:110px 30px 30px; gap:6px; transform:translateX(100%); transition:transform .45s var(--ease);
    z-index:400;
  }
  .main-nav.open{ transform:translateX(0); }
  .nav-toggle{ display:flex; }
  .nav-actions .btn-small{ display:none; }
  .nav-actions{ gap:10px; }
  .footer-top{ grid-template-columns:1fr; }
  .form-row{ flex-direction:column; }
  .hero-stats{ gap:28px; }
  .highlight-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

/* ------------------------- mobile order call-to-action -------------------
   Desktop reaches ordering from the header nav, which is always visible there.
   On a phone that nav is behind the hamburger, so the hero carries its own
   order button. Desktop layout is unchanged. */
.hero-order{ display:none }
@media (max-width:760px){
  .hero-order{ display:inline-flex; align-items:center; gap:8px }
  /* the order button leads; browsing the menu becomes the secondary action */
  .hero-cta .btn[href="#menu"]{
    background:transparent; color:var(--cream);
    border:1px solid rgba(216,178,115,.55);
  }
}

/* ================================ FILM REEL ================================
   Dark bento grid of short muted loops, continuing the picks band above. */
.reel{ padding:40px 0 110px; background:var(--ink); color:var(--cream); }
.reel .eyebrow{ color:var(--saffron); }
.reel h2{ color:var(--cream); }
.reel .hi-label{ color:var(--saffron); }
.reel-grid{
  display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:clamp(200px,20vw,290px);
  gap:18px; max-width:1320px; margin:0 auto; padding:0 6vw;
}
.reel-tile{
  position:relative; margin:0; overflow:hidden; border-radius:22px; background:var(--ink-soft);
  border:1px solid rgba(248,239,224,.08); isolation:isolate;
  transition:opacity .9s var(--ease), transform .9s var(--ease), border-color .5s var(--ease);
}
.reel-tall{ grid-row:span 2; }
.reel-wide{ grid-column:span 2; }
.reel-video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(1.02); transition:transform 1.2s var(--ease);
}
.reel-tile::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to top, rgba(22,19,15,.82) 0%, rgba(22,19,15,.25) 38%, transparent 62%);
}
.reel-tile:hover{ border-color:rgba(230,161,58,.45); }
.reel-tile:hover .reel-video{ transform:scale(1.08); }
.reel-tile figcaption{
  position:absolute; left:22px; right:22px; bottom:18px; z-index:2;
  display:flex; flex-direction:column; gap:2px; text-shadow:0 2px 12px rgba(0,0,0,.5);
}
.reel-tile figcaption span{ font-family:var(--hi-display,'Fraunces',serif); color:var(--saffron); font-size:clamp(1.05rem,1.6vw,1.35rem); line-height:1.4; }
.reel-tile figcaption b{ font-family:'Fraunces',serif; font-weight:600; font-size:clamp(.95rem,1.3vw,1.15rem); color:var(--cream); }
.reel-grid .reel-tile:nth-child(2){ transition-delay:.08s; }
.reel-grid .reel-tile:nth-child(3){ transition-delay:.16s; }
.reel-grid .reel-tile:nth-child(4){ transition-delay:.24s; }
.reel-grid .reel-tile:nth-child(5){ transition-delay:.32s; }
.reel-cta{ display:flex; justify-content:center; margin-top:44px; }

@media (max-width: 980px){
  .reel-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:clamp(170px,34vw,260px); gap:14px; }
  .reel-wide{ grid-column:span 1; }
}
@media (max-width: 480px){
  .reel-grid{ padding:0 16px; gap:10px; grid-auto-rows:150px; }
  .reel-tile{ border-radius:16px; }
  .reel-tile figcaption{ left:14px; right:14px; bottom:12px; }
}