/* ============================================
   TOKENS
   ============================================ */
:root{
  --bg-0: #0A141F;
  --bg-1: #0D1B27;
  --bg-2: #0F1F2C;
  --panel: #12233408;
  --panel-solid: #12233A;
  --gold: #D9B65C;
  --gold-light: #F4E3A8;
  --gold-deep: #A9822F;
  --ivory: #F4EFE1;
  --muted: #93A4B3;
  --muted-2: #6C7C8C;
  --line: rgba(217,182,92,0.16);
  --radius: 4px;
  --radius-lg: 10px;
  --ease: cubic-bezier(.16,.84,.32,1);
  --font-display: "Cormorant Garamond", serif;
  --font-word: "Marcellus", serif;
  --font-body: "Poppins", sans-serif;
  --scene: var(--bg-0);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

body{
  margin:0;
  background: var(--bg-0);
  color: var(--ivory);
  font-family: var(--font-body);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
}

a{ color: inherit; text-decoration: none; }
button{ font-family: inherit; cursor: pointer; }

::selection{ background: var(--gold); color: var(--bg-0); }
:focus-visible{ outline: 1.5px solid var(--gold); outline-offset: 3px; }

/* ============================================
   LIVE BACKGROUND LAYERS
   ============================================ */
#emberCanvas{
  position: fixed;
  inset: 0;
  width: 100%; height: 100%;
  z-index: -3;
  pointer-events: none;
}

.bg-mesh{
  position: fixed;
  inset: 0;
  z-index: -4;
  background: var(--scene);
  transition: background 1.4s var(--ease);
  overflow: hidden;
}
.blob{
  position:absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .35;
  will-change: transform;
}
.blob--1{
  width: 46vw; height: 46vw;
  background: radial-gradient(circle, rgba(217,182,92,0.35), transparent 70%);
  top: -10%; left: -8%;
  animation: drift1 26s ease-in-out infinite;
}
.blob--2{
  width: 38vw; height: 38vw;
  background: radial-gradient(circle, rgba(126,94,32,0.4), transparent 70%);
  bottom: -12%; right: -6%;
  animation: drift2 32s ease-in-out infinite;
}
.blob--3{
  width: 30vw; height: 30vw;
  background: radial-gradient(circle, rgba(217,182,92,0.18), transparent 70%);
  top: 40%; left: 50%;
  animation: drift3 22s ease-in-out infinite;
}
@keyframes drift1{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(6vw, 8vh) scale(1.15); }
}
@keyframes drift2{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(-5vw, -6vh) scale(1.1); }
}
@keyframes drift3{
  0%,100%{ transform: translate(-50%,-50%) scale(1); }
  50%{ transform: translate(-46%,-54%) scale(1.2); }
}

.bg-grain{
  position: fixed;
  inset:0;
  z-index: -2;
  pointer-events:none;
  opacity: .05;
  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");
}

/* ============================================
   PRELOADER
   ============================================ */
.preloader{
  position: fixed; inset:0; z-index: 2000;
  background: var(--bg-0);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: 22px;
  transition: opacity .8s var(--ease), visibility .8s var(--ease);
}
.preloader.is-hidden{ opacity:0; visibility:hidden; }
.preloader__motif{
  width: 64px; height: 64px;
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: draw 1.6s var(--ease) forwards;
}
@keyframes draw{ to{ stroke-dashoffset: 0; } }
.preloader__word{
  font-family: var(--font-word);
  letter-spacing: .35em;
  font-size: 13px;
  color: var(--gold);
  opacity: 0;
  animation: fadein .8s ease forwards .6s;
}
@keyframes fadein{ to{ opacity: 1; } }

/* progress rail */
.progress-rail{ position: fixed; top:0; left:0; width:100%; height:2px; z-index: 999; }
.progress-fill{ height:100%; width:0%; background: linear-gradient(90deg, var(--gold-deep), var(--gold-light)); transition: width .1s linear; }

/* ============================================
   TYPE / UTILITIES
   ============================================ */
.eyebrow{
  font-family: var(--font-body);
  font-size: 11.5px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 18px;
}
.section-title{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(30px, 4.6vw, 54px);
  line-height: 1.1;
  color: var(--ivory);
  margin: 0;
}
section{ padding: 140px 8vw; position: relative; }
.section-head{ max-width: 620px; margin-bottom: 70px; }
.section-head--center{ margin-left:auto; margin-right:auto; text-align:center; }

/* buttons */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding: 16px 30px;
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius: 2px;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), background .4s ease, color .4s ease;
  border: 1px solid transparent;
}
.btn:hover{ transform: translateY(-2px); }
.btn--gold{
  background: linear-gradient(120deg, var(--gold-deep), var(--gold-light));
  color: #1A1305;
  font-weight: 500;
}
.btn--gold:hover{ box-shadow: 0 12px 30px -8px rgba(217,182,92,.55); }
.btn--line{
  border-color: rgba(244,239,225,0.3);
  color: var(--ivory);
}
.btn--line:hover{ border-color: var(--gold); color: var(--gold); }
.btn--wide{ width:100%; justify-content:center; }

/* reveal animations */
.reveal-up{ opacity:0; transform: translateY(30px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal-up.is-visible{ opacity:1; transform: translateY(0); }
.reveal-line{ opacity:0; transform: translateY(10px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal-line.is-visible{ opacity:1; transform: translateY(0); }

.reveal-word{
  display:inline-block;
  font-family: var(--font-word);
  font-size: clamp(52px, 11vw, 148px);
  letter-spacing: .04em;
  color: transparent;
  -webkit-text-stroke: 1px var(--gold);
  background: linear-gradient(120deg, var(--gold-deep), var(--gold-light), var(--gold-deep));
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0;
  transform: translateY(24px);
  animation: word-in 1.3s var(--ease) forwards .25s, shimmer 7s linear infinite 1.6s;
}
@keyframes word-in{ to{ opacity:1; transform: translateY(0); } }
@keyframes shimmer{
  0%{ background-position: 0% 0; }
  100%{ background-position: 220% 0; }
}

.menu__grid .dish:nth-child(1){ transition-delay: .02s; }
.menu__grid .dish:nth-child(2){ transition-delay: .08s; }
.menu__grid .dish:nth-child(3){ transition-delay: .14s; }
.menu__grid .dish:nth-child(4){ transition-delay: .20s; }
.menu__grid .dish:nth-child(5){ transition-delay: .26s; }
.menu__grid .dish:nth-child(6){ transition-delay: .32s; }
.gallery__grid .gallery__item:nth-child(1){ transition-delay: .02s; }
.gallery__grid .gallery__item:nth-child(2){ transition-delay: .1s; }
.gallery__grid .gallery__item:nth-child(3){ transition-delay: .18s; }
.gallery__grid .gallery__item:nth-child(4){ transition-delay: .26s; }
.gallery__grid .gallery__item:nth-child(5){ transition-delay: .34s; }

/* ============================================
   NAV
   ============================================ */
.nav{
  position: fixed; top:0; left:0; right:0; z-index: 500;
  display:flex; align-items:center; justify-content:space-between;
  padding: 26px 8vw;
  transition: padding .4s ease, background .4s ease, border-color .4s ease;
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled{
  padding: 15px 8vw;
  background: rgba(10,20,31,0.78);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}
.nav__mark{
  display:flex; align-items:center; gap: 10px;
  font-family: var(--font-word);
  font-size: 19px;
  letter-spacing: .1em;
  color: var(--gold-light);
}
.nav__logo{ width: 34px; height: 34px; flex-shrink:0; }
.logo-wrap{ position: relative; width: 34px; height: 34px; flex-shrink: 0; display:block; }
.logo-wrap .nav__logo{ position:absolute; inset:0; }
.logo-photo{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit: contain; border-radius: 50%;
}
.nav__links{ display:flex; gap: 38px; }
.nav__links a{
  font-size: 12.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  position: relative;
  padding: 4px 0;
  transition: color .3s ease;
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:1px;
  background: var(--gold); transition: width .35s var(--ease);
}
.nav__links a:hover{ color: var(--ivory); }
.nav__links a:hover::after{ width:100%; }
.nav__cta{
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  padding: 11px 22px; border: 1px solid var(--gold); color: var(--gold-light);
  transition: background .35s ease, color .35s ease;
}
.nav__cta:hover{ background: var(--gold); color: #1A1305; }
.nav__burger{ display:none; flex-direction:column; gap:5px; background:none; border:none; padding:8px; }
.nav__burger span{ width:22px; height:1.4px; background: var(--ivory); transition: transform .3s ease; }
.nav__burger.is-open span:nth-child(1){ transform: translateY(3.2px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2){ transform: translateY(-3.2px) rotate(-45deg); }

.mobile-menu{
  position: fixed; top:0; right:0; height:100vh; width: min(80vw,340px);
  background: var(--bg-1); border-left: 1px solid var(--line);
  z-index: 450; display:flex; flex-direction:column; gap:30px;
  padding: 120px 40px;
  transform: translateX(100%);
  transition: transform .55s var(--ease);
}
.mobile-menu.is-open{ transform: translateX(0); }
.mobile-menu a{ font-family: var(--font-display); font-size: 24px; color: var(--ivory); }

/* ============================================
   HERO
   ============================================ */
.hero{
  min-height: 100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding-top: 100px;
}
.hero__eyebrow{
  font-size: 12px; letter-spacing: .35em; color: var(--muted); margin-bottom: 28px;
}
.hero__title{ margin: 0 0 20px; line-height: 1; }
.hero__tagline{
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(17px, 2vw, 22px);
  color: var(--ivory);
  opacity: .85;
  margin: 0 0 44px;
}
.alpona{ width: min(300px, 60vw); height: auto; margin-bottom: 46px; }
#alponaPath{
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  animation: draw-alpona 2.4s var(--ease) forwards 1.1s;
}
@keyframes draw-alpona{ to{ stroke-dashoffset: 0; } }

.hero__actions{ display:flex; gap:18px; flex-wrap:wrap; justify-content:center; margin-bottom: 90px; }

.hero__scrollcue{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.hero__scrollcue span{
  width:1px; height: 44px;
  background: linear-gradient(var(--gold), transparent);
  animation: scrollcue 2s ease-in-out infinite;
}
@keyframes scrollcue{
  0%{ transform: scaleY(0); transform-origin: top; }
  50%{ transform: scaleY(1); transform-origin: top; }
  50.01%{ transform-origin: bottom; }
  100%{ transform: scaleY(0); transform-origin: bottom; }
}
.hero__scrollcue p{
  font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--muted-2); margin:0;
}

/* ============================================
   MARQUEE STRIP
   ============================================ */
.strip{
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 24px 0;
  overflow: hidden;
  white-space: nowrap;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.strip__track{
  display:inline-flex; gap: 26px; align-items:center;
  font-family: var(--font-display); font-style: italic;
  font-size: 19px; color: var(--gold-light);
  animation: marquee 30s linear infinite;
  width: max-content;
}
.sep{ color: var(--gold-deep); font-size: 12px; }
@keyframes marquee{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }

/* ============================================
   STORY
   ============================================ */
.story{
  display:grid; grid-template-columns: .9fr 1.1fr; gap: 80px; align-items:center;
  border-top: 1px solid var(--line);
}
.story__frame{
  position: relative;
  aspect-ratio: 4/5;
  border-radius: var(--radius-lg);
  background: linear-gradient(150deg, #1c2c3c, #0c1620 60%);
  border: 1px solid var(--line);
  overflow:hidden;
}
.story__glow{
  position:absolute; inset:0; z-index: 0;
  background: radial-gradient(circle at 30% 20%, rgba(217,182,92,.28), transparent 60%);
}
.story__icon{
  position:absolute; top:50%; left:50%; z-index: 0;
  transform: translate(-50%,-50%);
  width: 140px; height: 140px;
  opacity: .85;
}
.story__photo{
  position:absolute; inset:0; z-index: 1;
  width:100%; height:100%; object-fit: cover;
}
.story__num{
  position:absolute; bottom: 24px; right: 28px; z-index: 2;
  font-family: var(--font-display); font-size: 60px; color: rgba(244,239,225,.18);
}
.story__text{ font-size: 16px; line-height: 1.85; color: var(--muted); max-width: 54ch; margin: 0 0 20px; }
.story__stats{ display:flex; gap: 46px; margin-top: 40px; flex-wrap: wrap; }
.story__stats .num{ display:block; font-family: var(--font-display); font-size: 40px; color: var(--gold-light); }
.story__stats label{ font-size: 12px; color: var(--muted-2); letter-spacing: .04em; }

/* ============================================
   MENU
   ============================================ */
.menu{ border-top: 1px solid var(--line); }
.menu__grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 30px; }
.dish{
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,0.015), transparent);
  transition: transform .5s var(--ease), border-color .5s ease, box-shadow .5s var(--ease);
}
.dish:hover{
  transform: translateY(-8px);
  border-color: rgba(217,182,92,.5);
  box-shadow: 0 30px 60px -25px rgba(0,0,0,.6);
}
.dish__media{ height: 210px; position: relative; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.dish__icon{
  width: 78px; height: 78px;
  opacity: .8;
  transform: scale(1);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  z-index: 0;
}
.dish:hover .dish__icon{ opacity: 1; transform: scale(1.08); }
.dish__photo{
  position:absolute; inset:0; z-index: 1;
  width:100%; height:100%; object-fit: cover;
  transition: transform .6s var(--ease);
}
.dish:hover .dish__photo{ transform: scale(1.06); }
.dish__media--1{ background: radial-gradient(circle at 30% 30%, #3a2b18, #14202b 70%); }
.dish__media--2{ background: radial-gradient(circle at 60% 40%, #2c1c14, #14202b 70%); }
.dish__media--3{ background: radial-gradient(circle at 40% 60%, #3d2f14, #14202b 70%); }
.dish__media--4{ background: radial-gradient(circle at 50% 30%, #253a2c, #14202b 70%); }
.dish__media--5{ background: radial-gradient(circle at 30% 50%, #33301a, #14202b 70%); }
.dish__media--6{ background: radial-gradient(circle at 60% 60%, #3a2418, #14202b 70%); }
.dish__body{ padding: 24px 26px 28px; }
.dish__row{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom: 8px; }
.dish__row h3{ font-family: var(--font-display); font-size: 22px; font-weight: 500; margin:0; color: var(--ivory); }
.price{ font-family: var(--font-display); font-style: italic; color: var(--gold-light); font-size: 16px; white-space:nowrap; }
.dish p{ font-size: 13.5px; color: var(--muted); line-height: 1.6; margin:0; }

.menu__more{
  display:flex; align-items:center; gap:8px;
  margin-top: 60px;
  font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold-light);
  width: fit-content;
  border-bottom: 1px solid var(--gold-deep);
  padding-bottom: 4px;
}
.menu__more svg{ transition: transform .3s var(--ease); }
.menu__more:hover svg{ transform: translateX(4px); }

/* ============================================
   GALLERY
   ============================================ */
.gallery{ border-top: 1px solid var(--line); }
.gallery__grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 160px;
  gap: 18px;
}
.gallery__item{
  border-radius: var(--radius);
  border: 1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  transition: transform .6s var(--ease), filter .6s ease;
  position: relative; overflow: hidden;
}
.gallery__item:hover{ transform: scale(1.02); filter: brightness(1.15); }
.gallery__icon{
  width: 56px; height: 56px;
  opacity: .7;
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  z-index: 0;
}
.gallery__photo{
  position:absolute; inset:0; z-index: 1;
  width:100%; height:100%; object-fit: cover;
  transition: transform .6s var(--ease);
}
.gallery__item:hover .gallery__photo{ transform: scale(1.08); }
.gallery__item--1 .gallery__icon, .gallery__item--4 .gallery__icon{ width: 72px; height: 72px; }
.gallery__item:hover .gallery__icon{ opacity: 1; transform: scale(1.1); }
.gallery__item--1{ grid-column: span 2; grid-row: span 2; background: radial-gradient(circle at 30% 30%, #2d2415, #101c27 75%); }
.gallery__item--2{ grid-column: span 2; background: radial-gradient(circle at 60% 40%, #1c2c22, #101c27 75%); }
.gallery__item--3{ grid-column: span 2; background: radial-gradient(circle at 40% 60%, #26201a, #101c27 75%); }
.gallery__item--4{ grid-column: span 2; grid-row: span 2; background: radial-gradient(circle at 50% 30%, #2c1c1c, #101c27 75%); }
.gallery__item--5{ grid-column: span 2; background: radial-gradient(circle at 40% 40%, #29241a, #101c27 75%); }

/* ============================================
   TESTIMONIALS
   ============================================ */
.testimonials{ border-top: 1px solid var(--line); overflow: hidden; }
.testi__track{
  display:flex; gap: 26px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 10px; scrollbar-width: none;
}
.testi__track::-webkit-scrollbar{ display:none; }
.testi-card{
  scroll-snap-align: start;
  flex: 0 0 min(460px, 84vw);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 36px;
  background: linear-gradient(180deg, rgba(255,255,255,.02), transparent);
}
.stars{ color: var(--gold); letter-spacing: 3px; margin-bottom: 16px; font-size: 13px; }
.testi-card p{ font-family: var(--font-display); font-size: 19px; font-style: italic; line-height: 1.55; margin:0 0 20px; color: var(--ivory); }
.testi-card span{ font-size: 12.5px; color: var(--muted-2); letter-spacing: .05em; text-transform: uppercase; }

/* ============================================
   RESERVE
   ============================================ */
.reserve{
  border-top: 1px solid var(--line);
  display:grid; grid-template-columns: 1fr 1fr; gap: 90px; align-items:start;
}
.reserve__text{ font-size: 15.5px; line-height: 1.8; color: var(--muted); max-width: 48ch; margin: 22px 0 40px; }
.reserve__hours{ display:flex; flex-direction:column; gap: 14px; }
.reserve__hours div{ display:flex; justify-content:space-between; max-width: 380px; padding-bottom: 12px; border-bottom: 1px solid var(--line); font-size: 14px; }
.reserve__hours span:first-child{ color: var(--ivory); }
.reserve__hours span:last-child{ color: var(--muted-2); }

.reserve__form{ display:flex; flex-direction:column; gap: 26px; }
.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.form-field{ position:relative; }
.form-field input, .form-field textarea, .form-field select{
  width:100%; background: transparent; border:none;
  border-bottom: 1px solid var(--line);
  padding: 14px 2px 12px;
  font-family: var(--font-body); font-size: 15.5px; color: var(--ivory);
  transition: border-color .3s ease;
  appearance: none; -webkit-appearance:none;
  border-radius: 0;
}
.form-field select{ color-scheme: dark; }
.form-field select option{ background: var(--bg-1); color: var(--ivory); }
.form-field input:focus, .form-field textarea:focus, .form-field select:focus{ border-color: var(--gold); outline:none; }
.form-field label{
  position:absolute; left:2px; top:14px;
  font-size: 15px; color: var(--muted-2); pointer-events:none;
  transition: transform .25s var(--ease), font-size .25s var(--ease), color .25s ease;
}
.form-field input:focus + label,
.form-field input:not(:placeholder-shown) + label,
.form-field textarea:focus + label,
.form-field textarea:not(:placeholder-shown) + label{
  transform: translateY(-20px); font-size: 11.5px; color: var(--gold);
}
.form-field .label-select{ transform: translateY(-20px); font-size: 11.5px; color: var(--gold); }

/* ============================================
   FOOTER / CONTACT
   ============================================ */
.contact{ border-top: 1px solid var(--line); padding: 90px 8vw 40px; }
.contact__top{
  display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 50px;
  padding-bottom: 60px; border-bottom: 1px solid var(--line);
}
.footer__logo{ width: 44px; height: 44px; }
.logo-wrap--footer{ width: 44px; height: 44px; margin-bottom: 16px; }
.logo-wrap--footer .footer__logo{ position:absolute; inset:0; width:100%; height:100%; }
.contact__brand h3{ font-family: var(--font-word); font-size: 24px; color: var(--gold-light); margin: 0 0 14px; }
.contact__brand p{ font-size: 14px; color: var(--muted); line-height: 1.7; margin:0; }
.contact__col h4{ font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted-2); margin: 0 0 18px; }
.contact__col a{ display:block; font-size: 14.5px; color: var(--muted); margin-bottom: 10px; transition: color .3s ease; }
.contact__col a:hover{ color: var(--gold-light); }
.contact__bottom{
  display:flex; justify-content:space-between; align-items:center;
  padding-top: 30px; font-size: 12.5px; color: var(--muted-2);
}
.footer__top{ transition: color .3s ease; }
.footer__top:hover{ color: var(--gold-light); }

/* ============================================
   RESPONSIVE
   Breakpoints: 1600 (ultra-wide), 1200 (small laptop),
   1024 (tablet landscape), 860 (tablet portrait),
   640 (large phone), 480 (phone), 380 (small phone)
   ============================================ */

/* ---- Ultra-wide desktop: stop content stretching edge to edge ---- */
@media (min-width: 1601px){
  section{ padding-left: 13vw; padding-right: 13vw; }
  .nav{ padding-left: 13vw; padding-right: 13vw; }
  .nav.is-scrolled{ padding-left: 13vw; padding-right: 13vw; }
}

/* ---- Small laptop / large tablet landscape ---- */
@media (max-width: 1200px){
  .menu__grid{ gap: 22px; }
  .gallery__grid{ gap: 14px; }
  .story{ gap: 56px; }
  .reserve{ gap: 60px; }
}

/* ---- Tablet landscape ---- */
@media (max-width: 1024px){
  section{ padding: 110px 6vw; }
  .nav, .nav.is-scrolled{ padding-left: 6vw; padding-right: 6vw; }
  .story{ grid-template-columns: 1fr; gap: 50px; }
  .story__frame{ max-width: 460px; margin: 0 auto; aspect-ratio: 4/3; }
  .menu__grid{ grid-template-columns: 1fr 1fr; }
  .gallery__grid{ grid-template-columns: repeat(2,1fr); grid-auto-rows: 160px; }
  .gallery__item--1, .gallery__item--4{ grid-column: span 2; }
  .reserve{ grid-template-columns: 1fr; gap: 56px; }
  .contact__top{ grid-template-columns: 1fr 1fr; gap: 36px 24px; }
  .contact__brand{ grid-column: span 2; }
  .nav__links, .nav__cta{ display:none; }
  .nav__burger{ display:flex; }
}

/* ---- Tablet portrait ---- */
@media (max-width: 860px){
  section{ padding: 96px 6vw; }
  .section-head{ margin-bottom: 50px; }
  .hero{ padding-top: 90px; }
  .hero__actions{ margin-bottom: 70px; }
  .story__stats{ gap: 32px; row-gap: 20px; }
  .dish__media{ height: 190px; }
  .form-row{ grid-template-columns: 1fr 1fr; gap: 18px; }
}

/* ---- Large phone / small tablet ---- */
@media (max-width: 640px){
  .nav{ padding: 20px 5vw; }
  .nav.is-scrolled{ padding: 13px 5vw; }
  .nav__mark span{ font-size: 16px; }
  section{ padding: 80px 5.5vw; }
  .eyebrow{ font-size: 11px; letter-spacing: .22em; }
  .section-title{ font-size: clamp(26px, 7.5vw, 40px); }
  .hero{ min-height: 92vh; padding-top: 84px; }
  .hero__eyebrow{ font-size: 10.5px; letter-spacing: .28em; margin-bottom: 20px; }
  .hero__tagline{ padding: 0 4vw; margin-bottom: 34px; }
  .alpona{ margin-bottom: 34px; }
  .hero__actions{ flex-direction: column; align-items: stretch; gap: 14px; margin-bottom: 60px; width: 100%; }
  .hero__actions .btn{ justify-content: center; }
  .strip__track{ font-size: 15px; gap: 18px; }
  .story{ gap: 40px; }
  .story__frame{ aspect-ratio: 4/3.2; }
  .story__text{ font-size: 15px; max-width: 100%; }
  .story__stats{ gap: 24px; margin-top: 32px; }
  .story__stats .num{ font-size: 32px; }
  .menu__grid{ grid-template-columns: 1fr; gap: 20px; }
  .dish__media{ height: 200px; }
  .menu__more{ margin-top: 44px; }
  .gallery__grid{ grid-template-columns: 1fr 1fr; grid-auto-rows: 140px; gap: 12px; }
  .testi-card{ padding: 26px; flex-basis: 88vw; }
  .testi-card p{ font-size: 17px; }
  .reserve{ gap: 44px; }
  .reserve__hours div{ max-width: 100%; }
  .form-row{ grid-template-columns: 1fr; gap: 22px; }
  .contact{ padding: 70px 5.5vw 32px; }
  .contact__top{ grid-template-columns: 1fr; gap: 40px; padding-bottom: 44px; }
  .contact__brand{ grid-column: auto; }
  .contact__bottom{ flex-direction: column; gap: 14px; text-align:center; }
  .mobile-menu{ padding: 110px 32px; width: min(84vw, 320px); }
}

/* ---- Phone ---- */
@media (max-width: 480px){
  section{ padding: 70px 6vw; }
  .btn{ padding: 15px 24px; font-size: 12.5px; }
  .hero__title{ margin-bottom: 16px; }
  .reveal-word{ font-size: clamp(42px, 15vw, 80px); }
  .alpona{ width: min(240px, 72vw); }
  .dish__media{ height: 180px; }
  .dish__body{ padding: 20px 20px 24px; }
  .dish__row h3{ font-size: 20px; }
  .gallery__grid{ grid-template-columns: 1fr; grid-auto-rows: 200px; gap: 12px; }
  .gallery__item--1, .gallery__item--2, .gallery__item--3, .gallery__item--4, .gallery__item--5{ grid-column: span 1; grid-row: span 1; }
  .testi-card{ flex-basis: 90vw; padding: 22px; }
  .story__num{ font-size: 46px; bottom: 16px; right: 20px; }
  .contact__brand p{ font-size: 13.5px; }
}

/* ---- Small phone ---- */
@media (max-width: 380px){
  .nav__mark span{ font-size: 14px; }
  .logo-wrap{ width: 28px; height: 28px; }
  .hero__eyebrow{ letter-spacing: .2em; }
  .btn{ padding: 14px 20px; font-size: 12px; }
  .section-title{ font-size: clamp(23px, 8vw, 34px); }
  .story__stats{ gap: 18px; }
  .story__stats .num{ font-size: 28px; }
  .dish__media{ height: 160px; }
}

/* ---- Short / landscape phones ---- */
@media (max-height: 480px) and (orientation: landscape){
  .hero{ min-height: auto; padding-top: 110px; padding-bottom: 60px; }
  .hero__scrollcue{ display: none; }
  .alpona{ margin-bottom: 26px; }
}

/* ---- Touch devices: kill hover-only tilt/lift so first tap works normally ---- */
@media (hover: none){
  .dish:hover, .gallery__item:hover{ transform: none; }
}