/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root{
  --terracotta:#B5471E;
  --terracotta-deep:#8A3415;
  --ochre:#D9A441;
  --cream:#F4ECD8;
  --cream-soft:#FAF5E8;
  --charcoal:#1F1A14;
  --charcoal-soft:#3A332A;
  --ink:#0E0C09;
  --line:rgba(31,26,20,0.12);

  --serif:'DM Serif Display', 'Times New Roman', serif;
  --sans:'Manrope', system-ui, sans-serif;

  --max:1280px;
  --pad-x: clamp(20px, 5vw, 80px);

  /* mobile-first nav height for scroll offset */
  --nav-h: 72px;
  --topbar-h: 41px;
}

/* ============================================================
   2. RESET + BASE
   ============================================================ */
*{box-sizing:border-box; margin:0; padding:0}
*:focus-visible{
  outline:2px solid var(--terracotta);
  outline-offset:3px;
}
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--topbar-h) + var(--nav-h) + 16px)}
body{
  padding-top:calc(var(--topbar-h) + var(--nav-h));
  font-family:var(--sans);
  font-weight:400;
  color:var(--charcoal);
  background:var(--cream-soft);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  background-image:url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
}
img{max-width:100%; display:block; height:auto}
a{color:inherit; text-decoration:none}
button{font-family:inherit; cursor:pointer; border:none; background:none}

/* ============================================================
   3. TYPOGRAPHY (mobile-first, more conservative ceilings)
   ============================================================ */
.eyebrow{
  font-family:var(--sans);
  font-size:11px;
  font-weight:500;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--terracotta);
}
@media(min-width:768px){ .eyebrow{font-size:12px} }

h1,h2,h3{
  font-family:var(--serif);
  font-weight:400;
  line-height:1.08;
  letter-spacing:-0.01em;
  color:var(--ink);
  text-wrap:balance;
}
h1{font-size:clamp(40px, 7vw, 84px)}
h2{font-size:clamp(30px, 4.5vw, 56px)}
h3{font-size:clamp(20px, 2.2vw, 28px)}
.lead{
  font-size:clamp(16px, 1.3vw, 18px);
  line-height:1.65;
  color:var(--charcoal-soft);
  max-width:56ch;
}

/* ============================================================
   4. TOP BAR (hidden on small mobile to save space)
   ============================================================ */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:101;
  height:var(--topbar-h);
  background:var(--charcoal);
  color:var(--cream);
  font-size:12px;
  padding:8px var(--pad-x);
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-weight:300;
  letter-spacing:0.02em;
}
.topbar a{opacity:.85; transition:opacity .2s}
.topbar a:hover, .topbar a:focus-visible{opacity:1}
.topbar .right{display:flex; gap:18px; align-items:center}
.topbar .dot{
  width:6px; height:6px; background:var(--ochre); border-radius:50%;
  display:inline-block; margin-right:8px;
  animation:pulse 2s infinite;
}
@keyframes pulse{50%{opacity:.4}}
@media (prefers-reduced-motion: reduce){ .topbar .dot{animation:none} }
@media(max-width:560px){
  .topbar{font-size:11px; padding:7px var(--pad-x)}
  .topbar .hideMob{display:none}
  .topbar .right{gap:14px}
}
.lang-toggle{
  color:var(--cream); font-size:12px; font-weight:500;
  letter-spacing:0.06em; cursor:pointer;
  padding:4px 8px; border-radius:4px;
  transition:opacity .2s;
}
.lang-toggle:hover{opacity:.8}
.lang-toggle .lang-active{font-weight:700; color:var(--ochre)}

/* ============================================================
   5. NAVIGATION (mobile-first, slide-in drawer)
   ============================================================ */
.nav{
  position:fixed; top:var(--topbar-h); left:0; right:0; z-index:100;
  background:rgba(250,245,232,0.95);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  padding:14px var(--pad-x);
  display:flex; align-items:center; justify-content:space-between;
  height:var(--nav-h);
}
.brand{display:flex; align-items:center; gap:10px; min-width:0}
.brand-logo{
  width:38px; height:38px;
  object-fit:contain;
  flex-shrink:0;
}
.brand-text{min-width:0}
.brand-name{
  font-family:var(--serif);
  font-size:19px;
  line-height:1;
  letter-spacing:-0.01em;
}
.brand-sub{
  font-size:9px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--charcoal-soft);
  margin-top:3px;
}
@media(min-width:768px){
  .brand-logo{width:44px; height:44px}
  .brand-name{font-size:22px}
  .brand-sub{font-size:10px; letter-spacing:0.25em}
}

.nav-links{
  display:flex; gap:32px; list-style:none;
  align-items:center;
  flex-wrap:nowrap;
}
@media(max-width:1100px){
  .nav-links{gap:20px}
}
.nav-links a:not(.btn){
  font-size:14px;
  font-weight:500;
  letter-spacing:0.04em;
  position:relative;
  padding:6px 0;
  transition:color .2s;
}
.nav-links a:not(.btn)::after{
  content:''; position:absolute; left:0; bottom:0;
  width:0; height:1px; background:var(--terracotta);
  transition:width .3s ease;
}
.nav-links a:not(.btn):hover,
.nav-links a:not(.btn):focus-visible{color:var(--terracotta)}
.nav-links a:not(.btn):hover::after,
.nav-links a:not(.btn):focus-visible::after,
.nav-links a:not(.btn)[aria-current="page"]::after{width:100%}
.nav-links a:not(.btn)[aria-current="page"]{color:var(--terracotta)}

/* CTA button */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:13px 22px;
  background:var(--terracotta);
  color:var(--cream);
  font-size:13px; font-weight:600;
  letter-spacing:0.08em; text-transform:uppercase;
  border-radius:999px;
  transition:background .25s ease, transform .25s ease;
  min-height:44px;
  white-space:nowrap; flex-shrink:0;
}
.btn:hover, .btn:focus-visible{background:var(--terracotta-deep); transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.ghost{
  background:transparent;
  color:var(--ink);
  border:1px solid var(--ink);
}
.btn.ghost:hover, .btn.ghost:focus-visible{background:var(--ink); color:var(--cream)}
.btn .arrow{transition:transform .25s}
.btn:hover .arrow, .btn:focus-visible .arrow{transform:translateX(3px)}

/* Mobile menu — hide nav-links by default, show button */
.menu-toggle{
  display:flex; flex-direction:column; gap:5px;
  width:44px; height:44px;
  justify-content:center; align-items:center;
  background:transparent;
  border-radius:8px;
}
.menu-toggle span{
  width:22px; height:2px; background:var(--ink);
  transition:transform .3s ease, opacity .2s ease;
  transform-origin:center;
}
.nav.open .menu-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav.open .menu-toggle span:nth-child(2){opacity:0}
.nav.open .menu-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Mobile drawer */
@media(max-width:980px){
  .nav-links{
    display:flex;
    flex-direction:column;
    position:fixed;
    /* .nav has backdrop-filter → it is the containing block for this
       fixed drawer, so top is measured from the nav box, not the viewport */
    top:var(--nav-h);
    left:0; right:0;
    background:var(--cream-soft);
    padding:32px var(--pad-x) 40px;
    gap:24px;
    align-items:flex-start;
    border-bottom:1px solid var(--line);
    box-shadow:0 20px 30px -10px rgba(31,26,20,.15);
    transform:translateY(-110%);
    transition:transform .35s cubic-bezier(.4,0,.2,1);
    visibility:hidden;
    max-height:calc(100vh - var(--topbar-h) - var(--nav-h));
    overflow-y:auto;
  }
  .nav.open .nav-links{
    transform:translateY(0);
    visibility:visible;
  }
  .nav-links a{
    font-size:22px;
    font-family:var(--serif);
    font-weight:400;
    padding:8px 0;
  }
  .nav-links a:not(.btn)::after{display:none}
  .nav-links .btn{
    margin-top:12px;
    font-family:var(--sans);
    font-size:13px;
  }
  /* prevent scroll when drawer open */
  body.nav-open{overflow:hidden}
}
@media(min-width:981px){
  .menu-toggle{display:none}
  .nav-lang-item{display:none}
}
@media(max-width:980px){
  .nav-lang-item .lang-toggle{
    color:var(--charcoal); font-size:16px; font-family:var(--serif);
    padding:8px 0; letter-spacing:0.04em;
  }
  .nav-lang-item .lang-toggle .lang-active{color:var(--terracotta)}
}

/* ============================================================
   6. HERO SLIDER (Ken Burns)
   ============================================================ */
.hero{
  position:relative;
  height:calc(100svh - var(--topbar-h) - var(--nav-h));
  min-height:560px;
  max-height:880px;
  overflow:hidden;
  background:var(--charcoal); /* fallback while images load */
}
@media(min-width:768px){
  .hero{min-height:640px}
}

.slides{
  position:absolute; inset:0;
}
.slide{
  position:absolute; inset:0;
  opacity:0;
  transition:opacity 1.4s ease-in-out;
  will-change:opacity;
}
.slide.active{opacity:1; z-index:2}

/* image inside each slide */
.slide-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center;
  /* Ken Burns — applied only when slide is active */
  transform:scale(1);
  transition:none;
}
.slide.active .slide-img{
  animation:kenburns 6s ease-out forwards;
}
@keyframes kenburns{
  from{ transform:scale(1.0) translate(0,0); }
  to  { transform:scale(1.12) translate(-2%, -1.5%); }
}
/* alternate direction for variety */
.slide:nth-child(2).active .slide-img{animation-name:kenburns2}
.slide:nth-child(3).active .slide-img{animation-name:kenburns3}
@keyframes kenburns2{
  from{ transform:scale(1.05) translate(0,0); }
  to  { transform:scale(1.15) translate(2%, 1.5%); }
}
@keyframes kenburns3{
  from{ transform:scale(1.08) translate(1%, -1%); }
  to  { transform:scale(1.0) translate(-1%, 1%); }
}

/* dark overlay so text is readable */
.slide::after{
  content:'';
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(14,12,9,.25) 0%, rgba(14,12,9,.55) 60%, rgba(14,12,9,.75) 100%);
  z-index:1;
}

/* hero content sits above slides */
.hero-content{
  position:relative; z-index:3;
  max-width:var(--max);
  margin:0 auto;
  padding:0 var(--pad-x);
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding-bottom:clamp(40px, 8vh, 100px);
  color:var(--cream);
}
.hero-content .eyebrow{color:var(--ochre); margin-bottom:18px}
.hero-content h1{
  color:var(--cream);
  margin-bottom:20px;
  max-width:18ch;
}
.hero-content h1 em{
  font-style:italic;
  color:var(--ochre);
}
.hero-content .lead{
  color:rgba(244,236,216,.85);
  margin-bottom:28px;
  max-width:50ch;
}
.hero-cta{
  display:flex; gap:12px; flex-wrap:wrap;
}
.hero-cta .btn.ghost{
  color:var(--cream);
  border-color:var(--cream);
}
.hero-cta .btn.ghost:hover, .hero-cta .btn.ghost:focus-visible{
  background:var(--cream);
  color:var(--ink);
}

/* slide caption (small, top right) */
.slide-caption{
  position:absolute;
  top:24px; right:var(--pad-x);
  z-index:3;
  color:var(--cream);
  font-size:11px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  opacity:0;
  transition:opacity .8s ease .4s;
}
.slide.active .slide-caption{opacity:.7}
@media(max-width:560px){ .slide-caption{display:none} }

/* slider controls (dots) */
.slider-dots{
  position:absolute;
  bottom:24px;
  right:var(--pad-x);
  z-index:4;
  display:flex; gap:10px;
}
.slider-dot{
  width:32px; height:3px;
  background:rgba(244,236,216,.35);
  border:none;
  border-radius:2px;
  cursor:pointer;
  transition:background .3s, width .3s;
  padding:0;
  min-height:auto;
}
.slider-dot.active{background:var(--ochre); width:48px}
.slider-arrow{
  position:absolute; top:50%; z-index:5;
  transform:translateY(-50%);
  width:48px; height:48px;
  border-radius:50%;
  background:rgba(244,236,216,.12);
  border:1px solid rgba(244,236,216,.2);
  color:var(--cream);
  font-size:28px; font-family:var(--serif);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:background .25s, border-color .25s;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  padding:0; line-height:1;
}
.slider-arrow:hover, .slider-arrow:focus-visible{
  background:rgba(244,236,216,.25);
  border-color:rgba(244,236,216,.4);
}
.slider-prev{left:20px}
.slider-next{right:20px}
@media(max-width:640px){
  .slider-arrow{width:36px; height:36px; font-size:22px}
  .slider-prev{left:10px}
  .slider-next{right:10px}
}
.slider-dot:hover, .slider-dot:focus-visible{background:rgba(244,236,216,.7)}
.slider-dot.active:hover, .slider-dot.active:focus-visible{background:var(--ochre)}
@media(max-width:560px){
  .slider-dots{bottom:20px; left:var(--pad-x); right:auto}
  .slider-dot{width:24px}
  .slider-dot.active{width:36px}
}

/* stats row, anchored bottom-left within hero */
.hero-stats{
  position:absolute;
  bottom:80px; right:var(--pad-x);
  z-index:3;
  display:flex; gap:28px;
  padding:16px 22px;
  background:rgba(244,236,216,.08);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(244,236,216,.15);
  border-radius:10px;
}
.stat .num{
  font-family:var(--serif);
  font-size:28px; line-height:1;
  color:var(--ochre);
}
.stat .label{
  font-size:10px;
  letter-spacing:0.15em;
  text-transform:uppercase;
  color:rgba(244,236,216,.7);
  margin-top:6px;
  font-weight:500;
}
@media(max-width:900px){
  .hero-stats{display:none} /* keeps mobile hero clean */
}

@media (prefers-reduced-motion: reduce){
  .slide{transition:opacity .3s ease}
  .slide.active .slide-img,
  .slide:nth-child(2).active .slide-img,
  .slide:nth-child(3).active .slide-img{animation:none; transform:none}
}

/* ============================================================
   7. MARQUEE
   ============================================================ */
.marquee{
  background:var(--charcoal);
  color:var(--cream);
  overflow:hidden;
  padding:20px 0;
  border-top:1px solid rgba(244,236,216,.1);
  border-bottom:1px solid rgba(244,236,216,.1);
}
.marquee-track{
  display:flex; gap:48px;
  animation:scroll 30s linear infinite;
  white-space:nowrap;
  font-family:var(--serif);
  font-size:clamp(20px, 3vw, 34px);
  will-change:transform;
}
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track{animation-play-state:paused}
.marquee-track span{display:flex; align-items:center; gap:48px}
.marquee-track .sep{color:var(--ochre); font-size:0.6em}
@keyframes scroll{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){ .marquee-track{animation:none} }

/* ============================================================
   8. SECTIONS (shared)
   ============================================================ */
.section{
  padding:clamp(64px, 10vw, 120px) var(--pad-x);
  max-width:var(--max);
  margin:0 auto;
}

/* ============================================================
   9. STORY
   ============================================================ */
.story-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:40px;
  align-items:center;
}
@media(min-width:900px){
  .story-grid{
    grid-template-columns:1fr 1.2fr;
    gap:80px;
  }
}

.story-image{
  position:relative;
  aspect-ratio:4/5;
  border-radius:16px;
  overflow:hidden;
  background:linear-gradient(135deg, #8A3415 0%, #B5471E 60%, #D9A441 100%);
  box-shadow:0 20px 40px -20px rgba(31,26,20,.3);
}
.story-image img{
  width:100%; height:100%;
  object-fit:cover;
}
.story-image::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 50%, rgba(14,12,9,.6) 100%);
  z-index:1;
}
.story-image .label{
  position:absolute; bottom:24px; left:24px; right:24px;
  z-index:2;
  color:var(--cream);
  font-family:var(--serif); font-size:clamp(18px, 2vw, 22px); font-style:italic;
  line-height:1.3;
}
.story-image .label::before{
  content:''; display:block; width:40px; height:2px;
  background:var(--ochre); margin-bottom:14px;
}
.story-image .badge{
  position:absolute; top:20px; left:20px; z-index:2;
  background:var(--cream); color:var(--ink);
  padding:6px 14px; border-radius:999px;
  font-size:10px; letter-spacing:0.18em;
  text-transform:uppercase; font-weight:600;
}

.story-text .eyebrow{margin-bottom:18px}
.story-text h2{margin-bottom:24px}
.story-text p{
  margin-bottom:18px;
  font-size:16px;
  line-height:1.75;
  color:var(--charcoal-soft);
}
.story-quote{
  margin:32px 0;
  padding:22px 26px;
  border-left:3px solid var(--terracotta);
  background:var(--cream);
  font-family:var(--serif);
  font-size:clamp(18px, 2vw, 22px);
  font-style:italic;
  color:var(--ink);
  line-height:1.45;
}
.story-quote cite{
  display:block; margin-top:12px;
  font-family:var(--sans); font-style:normal;
  font-size:11px; letter-spacing:0.15em;
  text-transform:uppercase; color:var(--terracotta);
  font-weight:600;
}

/* ============================================================
   10. MENU
   ============================================================ */
.menu-section{
  background:var(--cream);
  position:relative;
}
.menu-section::before{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(circle at 10% 0%, rgba(181,71,30,.06) 0%, transparent 50%),
    radial-gradient(circle at 90% 100%, rgba(217,164,65,.08) 0%, transparent 50%);
  pointer-events:none;
}
.menu-section .inner{
  max-width:var(--max); margin:0 auto;
  padding:clamp(20px, 6vw, 40px) var(--pad-x);
  position:relative;
}

.menu-head{
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
  margin-bottom:48px;
  align-items:end;
}
@media(min-width:768px){
  .menu-head{
    grid-template-columns:1fr auto;
    gap:40px;
    margin-bottom:56px;
  }
}
.menu-head h2{max-width:14ch}

.menu-tabs{
  display:flex; gap:8px; flex-wrap:nowrap;
  margin-bottom:40px;
  padding-bottom:24px;
  border-bottom:1px solid var(--line);
  /* mobile: horizontal scroll if needed */
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.menu-tabs::-webkit-scrollbar{display:none}
.menu-tab{
  padding:10px 18px;
  border-radius:999px;
  font-size:13px; font-weight:600;
  letter-spacing:0.04em;
  color:var(--charcoal-soft);
  border:1px solid var(--line);
  transition:background .2s, color .2s, border-color .2s;
  white-space:nowrap;
  min-height:44px;
  display:inline-flex; align-items:center;
}
.menu-tab.active,
.menu-tab:hover,
.menu-tab:focus-visible{
  background:var(--ink); color:var(--cream); border-color:var(--ink);
  transition:background .3s ease, color .3s ease, border-color .3s ease;
}

.menu-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
}
@media(min-width:768px){
  .menu-grid{grid-template-columns:1fr 1fr; gap:20px}
}

.dish{
  display:flex; align-items:flex-start; gap:18px;
  min-width:0;
  background:var(--cream-soft);
  border-radius:16px;
  padding:18px 20px;
  border:1px solid var(--line);
  transition:transform .3s, box-shadow .3s, border-color .3s;
}
.dish:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 32px -20px rgba(31,26,20,.2);
  border-color:var(--terracotta);
}

.dish-img{
  width:92px; height:92px; flex-shrink:0;
  border-radius:14px;
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg, #C99A3F 0%, #8A6420 100%);
}
.dish-img img{
  width:100%; height:100%;
  object-fit:cover;
}

.dish-body{ flex:1; min-width:0 }

.dish-row{
  display:flex; align-items:baseline; gap:8px;
  margin-bottom:7px;
}
.dish-row h3{
  font-size:clamp(17px, 1.6vw, 20px);
  line-height:1.2;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  flex-shrink:1; min-width:0;
}

.dish-tag{
  background:var(--ink); color:var(--cream);
  font-size:10px; letter-spacing:0.12em;
  text-transform:uppercase; font-weight:600;
  padding:4px 9px; border-radius:999px;
  white-space:nowrap; flex-shrink:0;
}
.dish-tag.vegan{background:#3A4218}
.dish-tag.spicy{background:#C0211B}

.dish-dots{
  flex:1; min-width:14px;
  border-bottom:2px dotted rgba(31,26,20,.18);
  margin-bottom:4px;
}
.dish .price{
  font-family:var(--serif); font-size:20px; color:var(--terracotta);
  white-space:nowrap; flex-shrink:0;
}
.dish .desc{
  font-size:13px; line-height:1.6;
  color:var(--charcoal-soft);
  margin:0 0 8px;
}
@media(max-width:767px){
  .dish-row{ flex-wrap:wrap; gap:6px 8px }
  .dish-row h3{ white-space:normal; overflow:visible; text-overflow:clip; flex:0 1 auto }
  .dish-dots{ display:none }
  .dish .price{ margin-left:auto }
}

/* empty state when filter matches nothing */
.menu-empty{
  display:none;
  text-align:center;
  padding:40px 20px;
  color:var(--charcoal-soft);
  font-family:var(--serif);
  font-style:italic;
  font-size:18px;
}
.menu-empty.show{display:block}

/* ============================================================
   11. EXPERIENCE
   ============================================================ */
.exp{
  background:var(--ink);
  color:var(--cream);
  padding:clamp(64px, 10vw, 120px) var(--pad-x);
}
.exp-inner{max-width:var(--max); margin:0 auto}
.exp .eyebrow{color:var(--ochre); margin-bottom:20px}
.exp h2{
  color:var(--cream);
  margin-bottom:48px;
  max-width:18ch;
}
@media(min-width:768px){
  .exp h2{margin-bottom:60px}
}
.exp h2 em{font-style:italic; color:var(--ochre)}

.exp-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:36px 28px;
}
@media(min-width:768px){
  .exp-grid{gap:48px 32px}
}
.exp-item .num{
  font-family:var(--serif); font-size:14px; color:var(--ochre);
  letter-spacing:0.15em; margin-bottom:16px;
  display:flex; align-items:center; gap:12px;
}
.exp-item .num::after{
  content:''; flex:1; height:1px;
  background:rgba(217,164,65,.25);
  min-width:24px;
}
.exp-item h3{
  color:var(--cream);
  font-size:clamp(20px, 2vw, 24px);
  margin-bottom:12px;
}
.exp-item p{
  font-size:14px; line-height:1.7;
  color:rgba(244,236,216,.7);
}

/* ============================================================
   12. REVIEWS
   ============================================================ */
.reviews{
  padding:clamp(64px, 10vw, 100px) var(--pad-x);
  max-width:var(--max); margin:0 auto;
}
.reviews-head{
  text-align:center;
  margin-bottom:48px;
}
.reviews-head .eyebrow{margin-bottom:16px}
.reviews-head h2{max-width:16ch; margin:0 auto}

.reviews-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:20px;
}
@media(min-width:768px){
  .reviews-grid{grid-template-columns:repeat(auto-fit, minmax(280px, 1fr))}
}
.review-card{
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:16px;
  padding:28px 24px;
  display:flex; flex-direction:column;
}
.review-stars{
  color:var(--ochre);
  font-size:16px; letter-spacing:2px;
  margin-bottom:16px;
}
.review-card blockquote{
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(15px, 1.2vw, 17px);
  line-height:1.55;
  color:var(--ink);
  flex:1;
  margin-bottom:18px;
}
.review-card blockquote::before{content:'\201C'}
.review-card blockquote::after{content:'\201D'}
.review-card .reviewer{
  font-size:13px; font-weight:600;
  color:var(--charcoal);
}
.review-card .platform{
  font-size:10px; letter-spacing:0.15em;
  text-transform:uppercase;
  color:var(--terracotta);
  font-weight:500;
  margin-top:3px;
}

/* ============================================================
   13. VISIT
   ============================================================ */
.visit{background:var(--cream-soft)}
.visit-grid{
  max-width:var(--max); margin:0 auto;
  padding:clamp(64px, 10vw, 120px) var(--pad-x);
  display:grid;
  grid-template-columns:1fr;
  gap:48px;
  align-items:center;
}
@media(min-width:900px){
  .visit-grid{
    grid-template-columns:1fr 1fr;
    gap:80px;
  }
}

.visit-text .eyebrow{margin-bottom:18px}
.visit-text h2{margin-bottom:28px}
.visit-list{list-style:none; margin:32px 0}
.visit-list li{
  display:grid;
  grid-template-columns:42px 1fr;
  gap:18px;
  align-items:start;
  padding:18px 0;
  border-bottom:1px solid var(--line);
}
.visit-list .icon{
  width:42px; height:42px;
  border-radius:50%;
  background:var(--cream);
  border:1px solid var(--line);
  display:grid; place-items:center;
  font-family:var(--serif); font-style:italic;
  color:var(--terracotta); font-size:18px;
}
.visit-list .label{
  font-size:10px; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--terracotta);
  font-weight:600; margin-bottom:4px;
}
.visit-list .val{
  font-family:var(--serif);
  font-size:clamp(17px, 1.6vw, 20px);
  color:var(--ink); line-height:1.3;
}
.visit-list .val a{color:inherit}
.visit-list .val a:hover{color:var(--terracotta)}
.visit-list .sub{
  font-size:13px; color:var(--charcoal-soft);
  margin-top:4px; line-height:1.5;
}
.visit-cta{
  display:flex; gap:12px; flex-wrap:wrap;
  margin-top:32px;
}

.map-card{
  position:relative;
  aspect-ratio:4/5;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 30px 60px -30px rgba(31,26,20,.4);
  background:var(--cream);
}
.map-card iframe{
  position:absolute; inset:0;
  width:100%; height:100%;
  border:0;
  filter:grayscale(20%);
}
.map-overlay{
  position:absolute;
  bottom:20px; left:20px; right:20px;
  background:rgba(244,236,216,.96);
  padding:18px 20px;
  border-radius:12px;
  backdrop-filter:blur(8px);
  z-index:1;
  pointer-events:none;
}
.map-overlay .place{
  font-family:var(--serif); font-size:20px;
  line-height:1.2; margin-bottom:4px;
}
.map-overlay .addr{font-size:13px; color:var(--charcoal-soft)}
.map-overlay .metro{
  display:inline-flex; align-items:center; gap:6px;
  margin-top:10px; padding:5px 11px;
  background:var(--ochre); color:var(--ink);
  border-radius:999px;
  font-size:11px; font-weight:700; letter-spacing:0.1em;
}
.map-overlay .directions{
  display:inline-flex; align-items:center; gap:4px;
  margin-top:8px;
  font-size:12px; font-weight:600;
  color:var(--terracotta);
  pointer-events:auto;
}

/* ============================================================
   14. FOOTER
   ============================================================ */
#site-footer > footer{
  background:var(--ink);
  color:rgba(244,236,216,.7);
  padding:64px var(--pad-x) 32px;
}
.footer-inner{max-width:var(--max); margin:0 auto}
.footer-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:36px;
  padding-bottom:48px;
  border-bottom:1px solid rgba(244,236,216,.1);
}
@media(min-width:560px){
  .footer-grid{grid-template-columns:1fr 1fr; gap:36px}
}
@media(min-width:900px){
  .footer-grid{grid-template-columns:2fr 1fr 1fr 1fr; gap:48px}
}

.footer-brand h3{
  color:var(--cream);
  font-size:clamp(28px, 4vw, 34px);
  margin-bottom:14px; line-height:1.1;
}
.footer-brand p{font-size:14px; line-height:1.7; max-width:34ch; margin-bottom:20px}
.footer-col h4{
  font-family:var(--sans);
  font-size:11px; letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--ochre); margin-bottom:18px;
  font-weight:600;
}
.footer-col ul{list-style:none}
.footer-col li{margin-bottom:10px; font-size:14px}
.footer-col a:hover, .footer-col a:focus-visible{color:var(--cream)}

.footer-bottom{
  padding-top:28px;
  display:flex; flex-direction:column;
  gap:12px;
  font-size:12px; color:rgba(244,236,216,.55);
}
@media(min-width:560px){
  .footer-bottom{
    flex-direction:row;
    justify-content:space-between;
    align-items:center;
  }
}
.socials{display:flex; gap:10px}
.socials a{
  width:40px; height:40px; border-radius:50%;
  border:1px solid rgba(244,236,216,.2);
  display:grid; place-items:center;
  font-family:var(--serif); font-style:italic; font-size:14px;
  color:rgba(244,236,216,.8);
  transition:background .2s, border-color .2s, color .2s;
}
.socials a:hover, .socials a:focus-visible{
  background:var(--terracotta); border-color:var(--terracotta); color:var(--cream);
}

/* ============================================================
   15. FLOATING WHATSAPP BUTTON
   ============================================================ */
.whatsapp-float{
  position:fixed; bottom:100px; right:20px; z-index:80;
  width:56px; height:56px; border-radius:50%;
  background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 24px rgba(37,211,102,.35);
  transition:transform .25s ease, box-shadow .25s ease;
}
.whatsapp-float:hover, .whatsapp-float:focus-visible{
  transform:scale(1.1);
  box-shadow:0 8px 32px rgba(37,211,102,.45);
}
.whatsapp-float svg{width:28px; height:28px}
.whatsapp-float .tooltip{
  position:absolute; bottom:100%; right:0; margin-bottom:10px;
  background:var(--ink); color:var(--cream);
  font-size:12px; padding:8px 14px; border-radius:8px;
  white-space:nowrap; opacity:0; pointer-events:none;
  transition:opacity .2s;
}
.whatsapp-float:hover .tooltip,
.whatsapp-float:focus-visible .tooltip{opacity:1}
@media(max-width:720px){
  .whatsapp-float{display:none}
}

/* ============================================================
   16. REVEAL ANIMATIONS
   ============================================================ */
.reveal{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .8s ease, transform .8s ease;
}
.reveal.on{opacity:1; transform:none}
.reveal-child{opacity:0; transform:translateY(16px); transition:opacity .7s ease, transform .7s ease}
.reveal.on .reveal-child{opacity:1; transform:none}
.reveal.on .reveal-child:nth-child(1){transition-delay:.05s}
.reveal.on .reveal-child:nth-child(2){transition-delay:.15s}
.reveal.on .reveal-child:nth-child(3){transition-delay:.25s}
.reveal.on .reveal-child:nth-child(4){transition-delay:.35s}
.reveal.on .reveal-child:nth-child(5){transition-delay:.45s}
.reveal.on .reveal-child:nth-child(6){transition-delay:.55s}
@media (prefers-reduced-motion: reduce){
  .reveal, .reveal-child{opacity:1; transform:none; transition:none}
}

/* ============================================================
   17. FULL MENU PAGE — two-column structure
   ============================================================ */
.menu-section .menu-notice{
  background:#FEF7E8;
  border-left:4px solid var(--ochre);
  color:var(--charcoal-soft);
  margin-bottom:20px;
  padding:16px 20px;
  border-radius:6px;
  font-size:13px; line-height:1.7;
}

/* Ornamental category divider */
.cat-ornament{
  display:flex; align-items:center; justify-content:center;
  gap:10px; margin:8px 0 28px;
}
.cat-ornament-line{
  width:50px; height:1px; flex-shrink:0;
}
.cat-ornament-line.left{ background:linear-gradient(to right, transparent, var(--terracotta)) }
.cat-ornament-line.right{ background:linear-gradient(to left, transparent, var(--terracotta)) }
.cat-ornament-sym{
  font-family:var(--serif);
  letter-spacing:0.2em; color:var(--terracotta);
  font-size:12px; opacity:.8;
}

/* Two-column dish grid */
.mdgrid{
  display:grid;
  grid-template-columns:1fr;
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 4px 20px rgba(0,0,0,.06);
}
@media(min-width:680px){
  .mdgrid{ grid-template-columns:1fr 1fr }
  .mdgrid .mdish:nth-child(odd){ border-right:1px solid var(--line) }
  .mdgrid .mdish:nth-last-child(-n+2){ border-bottom:0 }
  .mdgrid .mdish:last-child:nth-child(odd){ grid-column:1/-1 }
}
@media(max-width:679px){
  .mdgrid .mdish:last-child{ border-bottom:0 }
}

.mdish{
  display:flex; align-items:flex-start;
  gap:14px; padding:18px 24px;
  border-bottom:1px solid var(--line);
  transition:background .2s;
}
.mdish:hover{ background:var(--cream-soft) }

.mdish-marker{
  width:7px; height:7px; border-radius:50%;
  background:var(--terracotta); opacity:.7;
  margin-top:9px; flex-shrink:0;
}

.mdish-body{ flex:1; min-width:0 }

.mdish-row{
  display:flex; align-items:baseline;
  gap:6px; margin-bottom:5px;
}
.mdish-name{
  font-family:var(--serif);
  font-size:clamp(16px,1.5vw,18px);
  color:var(--ink); line-height:1.2;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  flex-shrink:1; min-width:0;
}
.mdish-dots{
  flex:1; min-width:12px;
  border-bottom:2px dotted rgba(31,26,20,.18);
  margin-bottom:3px; flex-shrink:1;
}
.mdish-price{
  font-family:var(--serif);
  font-size:clamp(16px,1.5vw,18px);
  color:var(--terracotta); white-space:nowrap; flex-shrink:0;
}
.mdish-note{
  display:block; font-size:10px; font-style:italic;
  color:var(--charcoal-soft);
  margin-top:1px; margin-bottom:4px;
}
.mdish-desc{
  font-size:13px; line-height:1.6;
  color:var(--charcoal-soft);
}