/* Guadalajara — Cream & Gold 3D landing */
:root {
  --cream: #FAF1DD;
  --cream-2: #F4E9CE;
  --cream-3: #EEDFB6;
  --ink: #1A140C;
  --ink-soft: #3a2e20;
  --ink-muted: #6b5b46;
  --gold: #C8983A;
  --gold-light: #E8C275;
  --gold-bright: #F5D478;
  --gold-deep: #8A6418;
  --gold-grad: linear-gradient(135deg, #B98729 0%, #F0CB5C 45%, #C8983A 100%);
  --gold-grad-soft: linear-gradient(135deg, #8A6418 0%, #C8983A 50%, #E8C275 100%);
  --gold-shine: linear-gradient(110deg, transparent 30%, #F8E1A1 48%, #ffffff 50%, #F8E1A1 52%, transparent 70%);
  --shadow-soft: 0 30px 60px -20px rgba(80, 50, 10, 0.25), 0 12px 24px -10px rgba(60, 40, 8, 0.15);
  --shadow-card: 0 20px 40px -16px rgba(80, 50, 10, 0.22), 0 6px 14px -6px rgba(40, 25, 5, 0.18);
  --shadow-plate: 0 50px 80px -30px rgba(40, 25, 5, 0.5), 0 20px 40px -12px rgba(40, 25, 5, 0.35);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  background: var(--cream);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', 'Helvetica Neue', system-ui, sans-serif;
  overflow-x: hidden;
}
::selection { background: var(--gold); color: var(--cream); }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img { display: block; max-width: 100%; }

.serif { font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif; }
.display { font-family: 'Cinzel', 'Cormorant Garamond', serif; letter-spacing: 0.06em; }
.wordmark { font-family: 'IM Fell DW Pica', 'Cormorant Garamond', serif; }

.container { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 40px; }
@media (max-width: 760px) { .container { padding: 0 20px; } }

/* ─── GOLD TEXT ──────────────────────────────────────────────────────── */
.gold-text {
  background: linear-gradient(180deg, #E8C275 0%, #C8983A 60%, #8A6418 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ─── BUTTONS ────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  padding: 16px 30px;
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.32em; text-transform: uppercase;
  position: relative; overflow: hidden;
  transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s, background .4s, color .4s;
  white-space: nowrap; cursor: pointer;
  font-family: 'Inter', sans-serif;
}
.btn-dark {
  background: linear-gradient(180deg, #1F1812, #0D0905);
  color: var(--cream);
  border: 1px solid var(--gold);
  box-shadow: 0 0 0 1px rgba(200,152,58,0.2), inset 0 1px 0 rgba(245,212,120,0.18), 0 12px 30px -10px rgba(60,40,8,0.45);
}
.btn-dark::before {
  content: ''; position: absolute; inset: -2px;
  background: var(--gold-shine);
  transform: translateX(-130%); opacity: 0.85;
  transition: transform .9s ease;
}
.btn-dark:hover::before { transform: translateX(130%); }
.btn-dark:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(245,212,120,0.6), 0 0 30px rgba(232,194,117,0.45), 0 18px 36px -10px rgba(60,40,8,0.5);
}

.btn-gold {
  background: var(--gold-grad);
  color: #1A140C;
  border: 1px solid rgba(200,152,58,0.7);
  box-shadow: 0 8px 24px -8px rgba(200,152,58,0.6), inset 0 1px 0 rgba(255,236,168,0.6);
}
.btn-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -10px rgba(200,152,58,0.8), inset 0 1px 0 rgba(255,236,168,0.8), 0 0 28px rgba(245,212,120,0.5);
}

.btn-outline-gold {
  background: rgba(250, 241, 221, 0.4);
  color: var(--ink);
  border: 1px solid var(--gold);
  backdrop-filter: blur(8px);
}
.btn-outline-gold:hover {
  background: var(--gold-grad);
  color: #1A140C;
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -10px rgba(200,152,58,0.5);
}

/* ─── ORNAMENTS / DIVIDERS ───────────────────────────────────────────── */
.gold-rule {
  display: flex; align-items: center; gap: 12px;
  color: var(--gold);
}
.gold-rule .line {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.diamond {
  width: 6px; height: 6px;
  background: var(--gold-grad); transform: rotate(45deg);
  flex-shrink: 0;
}

/* corner brackets — page frame */
.page-corners {
  position: fixed; inset: 18px; pointer-events: none; z-index: 40;
}
.page-corners::before, .page-corners::after,
.page-corners > span:nth-child(1), .page-corners > span:nth-child(2) {
  content: ''; position: absolute;
  width: 36px; height: 36px;
}
.page-corners::before { top: 0; left: 0; border-top: 1px solid var(--gold); border-left: 1px solid var(--gold); }
.page-corners::after  { top: 0; right: 0; border-top: 1px solid var(--gold); border-right: 1px solid var(--gold); }
.page-corners > span:nth-child(1) { bottom: 0; left: 0; border-bottom: 1px solid var(--gold); border-left: 1px solid var(--gold); }
.page-corners > span:nth-child(2) { bottom: 0; right: 0; border-bottom: 1px solid var(--gold); border-right: 1px solid var(--gold); }

/* section eyebrow */
.eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.42em; text-transform: uppercase;
  color: var(--gold-deep);
}
.eyebrow::before, .eyebrow::after {
  content: ''; width: 36px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.eyebrow::after { background: linear-gradient(90deg, var(--gold), transparent); }

/* ─── NAV ────────────────────────────────────────────────────────────── */
.nav-shell {
  position: fixed; top: 18px; left: 50%; transform: translateX(-50%);
  z-index: 50;
  width: calc(100% - 80px); max-width: 1400px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 28px;
  background: rgba(250, 241, 221, 0.55);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid rgba(200,152,58,0.35);
  box-shadow: 0 12px 32px -16px rgba(60, 40, 8, 0.25);
  transition: all .4s cubic-bezier(.2,.8,.2,1);
}
.nav-shell.scrolled {
  background: rgba(250, 241, 221, 0.85);
  box-shadow: 0 18px 40px -16px rgba(60, 40, 8, 0.35);
}
.nav-link {
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--ink); padding: 8px 0;
  position: relative;
  transition: color .25s ease;
}
.nav-link.active { color: var(--gold-deep); }
.nav-link.active::after,
.nav-link:hover::after {
  content: ''; position: absolute; left: 50%; bottom: 0;
  width: 24px; height: 1px;
  background: var(--gold-grad);
  transform: translateX(-50%);
}
.nav-link:hover { color: var(--gold-deep); }

/* ─── HERO ───────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100vh;
  padding: 130px 0 80px;
  display: flex; align-items: center;
  perspective: 1400px;
  perspective-origin: 50% 30%;
  overflow: hidden;
  background:
    radial-gradient(circle at 80% 15%, rgba(255,236,180,0.6), transparent 50%),
    radial-gradient(circle at 20% 90%, rgba(232, 194, 117, 0.18), transparent 55%),
    linear-gradient(180deg, #FBF3DF 0%, #F6EBCE 100%);
}
.hero-stage {
  position: relative;
  width: 100%;
  transform-style: preserve-3d;
}

/* Marble texture corner — bottom right (under fish plate) */
.marble {
  position: absolute; right: -10%; bottom: -10%; width: 70%; height: 60%;
  background:
    radial-gradient(ellipse at center, rgba(255,255,255,0.7) 0%, transparent 60%),
    linear-gradient(135deg, rgba(255,255,255,0.45), rgba(240,228,200,0.3) 60%, transparent 80%);
  pointer-events: none; z-index: 1;
}

/* gold drape (bottom-right cloth hint) */
.drape {
  position: absolute; right: 2%; bottom: 4%; width: 28%; height: 22%;
  background:
    radial-gradient(ellipse at 30% 50%, rgba(200,152,58,0.65), transparent 70%),
    radial-gradient(ellipse at 70% 60%, rgba(232,194,117,0.55), transparent 75%);
  filter: blur(14px);
  pointer-events: none; z-index: 0;
}

/* hero spotlight from top-right */
.spotlight {
  position: absolute; right: -20%; top: -20%; width: 80%; height: 80%;
  background: radial-gradient(circle at 40% 40%, rgba(255,242,200,0.7), transparent 50%);
  filter: blur(40px);
  pointer-events: none; z-index: 0;
  animation: spotPulse 8s ease-in-out infinite;
}
@keyframes spotPulse {
  0%, 100% { opacity: 0.9; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}

/* logo + plates layer wrappers — parallax */
.layer { will-change: transform; transition: transform .25s cubic-bezier(.2,.8,.2,1); }

/* Plate floating */
@keyframes floatA {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(0, -14px, 0) rotate(0.4deg); }
}
@keyframes floatB {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(0, -10px, 0) rotate(-0.6deg); }
}
.float-a { animation: floatA 7s ease-in-out infinite; }
.float-b { animation: floatB 8.5s ease-in-out infinite 1s; }

/* plate cast shadow ellipse */
.plate-shadow {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(40,25,5,0.45) 0%, rgba(40,25,5,0.18) 50%, transparent 75%);
  filter: blur(20px);
  pointer-events: none;
  animation: shadowFloat 7s ease-in-out infinite;
}
@keyframes shadowFloat {
  0%, 100% { transform: scale(1) translateY(0); opacity: 0.85; }
  50% { transform: scale(0.92) translateY(6px); opacity: 0.6; }
}

/* steam over food */
.steam {
  position: absolute; pointer-events: none;
  width: 8px; height: 80px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.5), rgba(255,255,255,0.15), transparent);
  filter: blur(8px);
  border-radius: 50%;
  animation: steamRise 4s ease-in infinite;
  opacity: 0;
}
@keyframes steamRise {
  0% { transform: translateY(40px) scaleX(0.5); opacity: 0; }
  20% { opacity: 0.8; }
  100% { transform: translateY(-100px) scaleX(1.4); opacity: 0; }
}

/* logo shimmer */
.logo-shine {
  position: relative; display: inline-block;
}
.logo-shine::after {
  content: ''; position: absolute; inset: 0;
  background: var(--gold-shine);
  mix-blend-mode: overlay;
  opacity: 0.9;
  transform: translateX(-130%);
  animation: shimmer 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes shimmer {
  0% { transform: translateX(-130%); }
  60% { transform: translateX(130%); }
  100% { transform: translateX(130%); }
}

/* hero text big */
.hero-pretitle {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 11px; letter-spacing: 0.42em; text-transform: uppercase;
  color: var(--gold-deep); font-weight: 600;
}

.hero-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(40px, 4.6vw, 64px);
  line-height: 1.04; font-weight: 500;
  letter-spacing: 0.01em;
  margin: 20px 0 20px;
  color: var(--ink);
}
.hero-title em {
  font-style: italic;
  background: linear-gradient(180deg, #E8C275 0%, #C8983A 70%, #8A6418 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

.hero-sub {
  font-size: 16px; line-height: 1.65;
  color: var(--ink-soft);
  max-width: 480px;
  margin-bottom: 32px;
}

/* ─── SECTIONS ───────────────────────────────────────────────────────── */
section { position: relative; }

/* MENU */
.menu-section { padding: 140px 0 120px; background: linear-gradient(180deg, #FAF1DD 0%, #F4E9CE 100%); }
.menu-grid {
  display: grid; gap: 26px;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}
.menu-card {
  position: relative;
  background: linear-gradient(180deg, #FCF6E6, #F6ECCF);
  border: 1px solid rgba(200,152,58,0.4);
  padding: 0;
  overflow: hidden;
  transform-style: preserve-3d;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s;
  box-shadow: var(--shadow-card);
  cursor: default;
}
.menu-card::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(245,212,120,0.18), transparent 40%, rgba(200,152,58,0.1));
  opacity: 0; transition: opacity .4s ease;
  pointer-events: none;
}
.menu-card:hover { border-color: var(--gold-light); box-shadow: 0 30px 60px -22px rgba(80,50,10,0.35), 0 0 0 1px var(--gold-light); }
.menu-card:hover::before { opacity: 1; }
.menu-card-art {
  position: relative;
  aspect-ratio: 5/4;
  background: linear-gradient(135deg, #F4E9CE 0%, #EEDFB6 100%);
  overflow: hidden;
}
.menu-card-art::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 80%, rgba(40,25,5,0.18), transparent 60%);
  pointer-events: none;
}
.menu-card-body { padding: 26px 26px 24px; }
.menu-card-title { font-family: 'Cormorant Garamond', serif; font-size: 26px; font-weight: 500; margin-bottom: 8px; }
.menu-card-desc  { font-size: 14px; color: var(--ink-muted); line-height: 1.55; margin-bottom: 18px; min-height: 44px; }
.menu-card-foot  { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.menu-card-price { font-family: 'Cinzel', serif; font-size: 15px; color: var(--gold-deep); letter-spacing: 0.05em; }
.view-item {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; font-weight: 600;
  color: var(--ink); padding: 10px 16px;
  border: 1px solid var(--gold); background: transparent;
  transition: all .3s;
}
.view-item:hover { background: var(--gold-grad); color: var(--ink); }

/* ABOUT */
.about-section { padding: 140px 0 130px; background: linear-gradient(180deg, #F4E9CE 0%, #FAF1DD 100%); }

/* DRINKS (dark) */
.drinks-section {
  padding: 140px 0;
  background:
    radial-gradient(ellipse at 80% 20%, rgba(245,212,120,0.12), transparent 60%),
    radial-gradient(ellipse at 20% 90%, rgba(200,152,58,0.08), transparent 60%),
    linear-gradient(180deg, #1A140C 0%, #0A0703 100%);
  color: var(--cream);
}
.drinks-section .eyebrow { color: var(--gold-light); }
.drink-card {
  position: relative;
  padding: 36px 28px;
  background: linear-gradient(180deg, rgba(40, 28, 12, 0.95), rgba(20, 14, 6, 0.95));
  border: 1px solid rgba(200,152,58,0.4);
  overflow: hidden;
  transition: transform .4s cubic-bezier(.2,.8,.2,1), border-color .4s, box-shadow .4s;
  cursor: default;
}
.drink-card::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(245,212,120,0.2), transparent 60%);
  opacity: 0; transition: opacity .4s; pointer-events: none;
}
.drink-card:hover {
  border-color: var(--gold-light);
  box-shadow: 0 30px 50px -20px rgba(0,0,0,0.6), 0 0 0 1px var(--gold-light), 0 0 40px rgba(245,212,120,0.25);
}
.drink-card:hover::before { opacity: 1; }
.drink-card .corner {
  position: absolute; width: 22px; height: 22px;
  border: 1px solid rgba(245,212,120,0.7);
}
.drink-card .corner.tl { top: 10px; left: 10px; border-right: 0; border-bottom: 0; }
.drink-card .corner.tr { top: 10px; right: 10px; border-left: 0; border-bottom: 0; }
.drink-card .corner.bl { bottom: 10px; left: 10px; border-right: 0; border-top: 0; }
.drink-card .corner.br { bottom: 10px; right: 10px; border-left: 0; border-top: 0; }

/* drink glass illustration art container */
.drink-art {
  aspect-ratio: 4/5;
  display: grid; place-items: center;
  margin-bottom: 22px;
  position: relative;
}

/* GALLERY */
.gallery-section { padding: 140px 0 130px; background: linear-gradient(180deg, #FAF1DD 0%, #F4E9CE 100%); }
.gallery-grid {
  display: grid; gap: 18px;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
}
.g-tile {
  position: relative; overflow: hidden;
  border: 1px solid rgba(200,152,58,0.5);
  background: linear-gradient(135deg, #F4E9CE, #EEDFB6);
  transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s, border-color .5s;
  transform-style: preserve-3d;
}
.g-tile::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(26,20,12,0.65) 100%);
  pointer-events: none;
}
.g-tile:hover {
  border-color: var(--gold-light);
  box-shadow: 0 30px 60px -20px rgba(60, 40, 8, 0.4);
  z-index: 2;
}
.g-tile .label {
  position: absolute; left: 16px; bottom: 14px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px; color: var(--cream);
  font-style: italic;
  z-index: 1;
}
.g-tile.span-2 { grid-column: span 2; }
.g-tile.span-2-rows { grid-row: span 2; }
@media (max-width: 900px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .g-tile.span-2 { grid-column: span 2; }
  .g-tile.span-2-rows { grid-row: span 1; }
}

/* RESERVATIONS */
.res-section { padding: 140px 0 130px; background: linear-gradient(180deg, #F4E9CE 0%, #FAF1DD 100%); }
.res-card {
  position: relative;
  background: linear-gradient(180deg, #FCF6E6, #F4E9CE);
  border: 1px solid rgba(200,152,58,0.5);
  padding: 56px 56px 48px;
  box-shadow: var(--shadow-soft);
  transform-style: preserve-3d;
}
@media (max-width: 760px) { .res-card { padding: 36px 24px; } }
.res-card .corner-orn {
  position: absolute; width: 36px; height: 36px;
  border: 1px solid var(--gold);
}
.res-card .corner-orn.tl { top: 14px; left: 14px; border-right: 0; border-bottom: 0; }
.res-card .corner-orn.tr { top: 14px; right: 14px; border-left: 0; border-bottom: 0; }
.res-card .corner-orn.bl { bottom: 14px; left: 14px; border-right: 0; border-top: 0; }
.res-card .corner-orn.br { bottom: 14px; right: 14px; border-left: 0; border-top: 0; }

.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 10px; letter-spacing: 0.34em; text-transform: uppercase; color: var(--gold-deep); font-weight: 600; }
.field input, .field select, .field textarea {
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(200,152,58,0.45);
  padding: 14px 16px;
  color: var(--ink); font-family: inherit; font-size: 15px;
  outline: none;
  transition: border-color .25s, box-shadow .25s, background .25s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--gold);
  background: rgba(255,255,255,0.92);
  box-shadow: 0 0 0 3px rgba(232,194,117,0.25);
}

/* ORDER ONLINE banner (dark) */
.order-section {
  padding: 120px 0;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(245,212,120,0.16), transparent 60%),
    linear-gradient(180deg, #1A140C 0%, #0A0703 100%);
  color: var(--cream);
  text-align: center;
  overflow: hidden;
  position: relative;
}
.order-section .eyebrow { color: var(--gold-light); }

/* FOOTER */
.footer {
  background: linear-gradient(180deg, #0A0703 0%, #1A140C 100%);
  color: var(--cream); padding: 70px 0 36px;
  border-top: 1px solid rgba(200,152,58,0.3);
}
.footer .nav-link { color: rgba(250,241,221,0.75); }
.footer .nav-link:hover { color: var(--gold-light); }

/* ─── REVEAL ANIMATIONS ──────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(36px); transition: opacity .95s cubic-bezier(.2,.8,.2,1), transform .95s cubic-bezier(.2,.8,.2,1); }
.reveal.in { opacity: 1; transform: none; }

/* ─── MOBILE NAV ─────────────────────────────────────────────────────── */
.nav-mobile-btn { display: none; color: var(--ink); }
@media (max-width: 1080px) {
  .nav-desk { display: none !important; }
  .nav-mobile-btn { display: inline-flex !important; }
}

/* ─── RESPONSIVE HERO ────────────────────────────────────────────────── */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 40px;
  align-items: center;
  position: relative; z-index: 2;
}
@media (max-width: 1000px) {
  .hero-grid { grid-template-columns: 1fr; gap: 60px; }
  .hero-stage .marble, .hero-stage .drape { display: none; }
}

/* small util */
.txt-center { text-align: center; }


/* ════════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — append-only
   Breakpoints: 1024 (tablet), 768 (phone), 480 (small phone)
   ════════════════════════════════════════════════════════════════════ */

html, body { overflow-x: hidden; }
img, svg, video { max-width: 100%; height: auto; }

/* ─── TABLET (≤1024) ───────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .container { padding: 0 28px; }
  .hero { padding: 120px 0 60px; }
  .hero-grid { gap: 48px; }
  .hero-title { font-size: clamp(34px, 5.6vw, 56px) !important; }
  .hero-plates { min-height: 520px !important; }
  .hero-orn-tl { left: 28px !important; }
  .menu-section, .about-section, .drinks-section,
  .gallery-section, .res-section, .order-section { padding: 100px 0 90px; }
  .res-card { padding: 40px 36px 36px; }
  .nav-shell { padding: 12px 20px; width: calc(100% - 40px); }
}

/* ─── PHONE (≤768) ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .container { padding: 24px 18px; }

  /* page corner brackets — smaller on mobile, inside the safe area */
  .page-corners { inset: 10px; }
  .page-corners::before, .page-corners::after,
  .page-corners > span { width: 22px; height: 22px; }

  /* NAV — tight glass bar; hide pill on phones */
  .nav-shell {
    top: 12px;
    left: 12px; right: 12px;
    width: auto; transform: none;
    padding: 10px 14px;
    border-radius: 0;
  }
  .nav-shell .display { font-size: 12px !important; letter-spacing: 0.18em !important; }
  .nav-shell a[href="#order"] { padding: 8px 14px !important; font-size: 10px !important; }

  /* HERO — stack, plates become soft background */
  .hero {
    min-height: 100svh;
    padding: 100px 18px 64px;
    align-items: stretch;
    background:
      radial-gradient(circle at 80% 20%, rgba(255,236,180,0.55), transparent 55%),
      radial-gradient(circle at 20% 95%, rgba(232,194,117,0.22), transparent 60%),
      linear-gradient(180deg, #FBF3DF 0%, #F6EBCE 100%);
  }
  .hero-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    text-align: center;
    align-items: start;
    position: relative;
    z-index: 3;
  }
  .hero-grid > div:first-child { display: flex; flex-direction: column; align-items: center; }
  .hero-grid .logo-shine { max-width: 100% !important; margin-left: 0 !important; }
  .hero-grid .logo-shine img { width: 100% !important; max-width: 420px; }
  .hero-title {
    font-size: clamp(30px, 8vw, 44px) !important;
    margin: 8px 0 14px !important;
  }
  .hero-sub {
    font-size: 15px !important;
    line-height: 1.6 !important;
    margin: 0 auto 26px !important;
    max-width: 92%;
  }
  /* the italic "address" line in hero — center it */
  .hero-grid .serif {
    text-align: center;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* The "Now Opening" pill — center */
  .hero-grid > div:first-child > .reveal > div[style*="Now Opening"],
  .hero-grid > div:first-child .reveal > div:first-child {
    margin-left: auto !important; margin-right: auto !important;
  }

  /* CTA buttons full-width-ish, tappable */
  .btn { padding: 14px 24px; min-height: 48px; font-size: 11px; letter-spacing: 0.28em; }
  .hero-grid .btn { flex: 1 1 auto; min-width: 150px; }
  .hero-grid > div:first-child > .reveal:last-child > div {
    justify-content: center;
  }

  /* PLATES → soft background behind/below text */
  .hero-plates {
    min-height: 0 !important;
    width: 100%;
    position: absolute !important;
    inset: 0;
    z-index: 1 !important;
    pointer-events: none;
    overflow: hidden;
  }
  .hero-steak {
    top: auto !important;
    bottom: -8% !important;
    right: -22% !important;
    left: auto !important;
    width: 90% !important;
    opacity: 0.16;
    filter: blur(1px);
    transform: none !important;
  }
  .hero-fish {
    bottom: -18% !important;
    right: -28% !important;
    width: 110% !important;
    opacity: 0.14;
    filter: blur(1px);
    transform: none !important;
  }
  .hero-steak .float-a, .hero-fish .float-b { animation: none !important; }
  .hero-steak .steam, .hero-fish .steam { display: none; }

  /* hide crowding decor on phones */
  .hero-orn-tl, .hero-orn-bc { display: none; }
  .hero-cathedral { opacity: 0.45; left: 50% !important; top: 12% !important; transform: translateX(-50%) !important; width: 70% !important; }
  .hero-agave { width: 130px !important; height: 220px !important; opacity: 0.4; }
  .marble, .drape { display: none !important; }

  /* SECTIONS */
  .menu-section, .about-section, .drinks-section,
  .gallery-section, .res-section, .order-section { padding: 72px 0 64px; }

  /* About — single col, smaller logo emblem */
  .about-grid { grid-template-columns: 1fr !important; gap: 48px !important; text-align: center; }
  .about-grid .gold-text { font-size: 30px !important; }
  .about-grid > div:first-child { display: flex; flex-direction: column; align-items: center; }
  .about-grid p { text-align: left; }

  /* Menu cards */
  .menu-grid { grid-template-columns: 1fr !important; gap: 18px; }
  .menu-card-title { font-size: 22px; }
  .menu-card-desc { min-height: 0; }

  /* Gallery — 2 columns */
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-auto-rows: 150px !important;
    gap: 12px;
  }
  .g-tile .label { font-size: 14px; left: 10px; bottom: 8px; }

  /* Reservations */
  .res-card { padding: 32px 22px; }
  .res-row { grid-template-columns: 1fr !important; gap: 14px !important; }
  .field input, .field select { padding: 14px; min-height: 48px; font-size: 16px; }
  .field label { font-size: 9.5px; }

  /* Drinks — single col, scale glasses */
  .drinks-section > .container > div:last-child {
    grid-template-columns: 1fr 1fr !important;
    gap: 14px;
  }
  .drink-card { padding: 24px 18px; }
  .drink-card h3 { font-size: 20px !important; }
  .drink-card p { font-size: 12.5px !important; }
  .drink-art { margin-bottom: 14px; }
  .drink-art svg { width: 110px !important; height: 140px !important; }

  /* Order CTA */
  .order-section { padding: 88px 0; }

  /* Footer */
  .footer { padding: 56px 0 28px; }
  .foot-grid { grid-template-columns: 1fr !important; gap: 36px !important; }
}

/* ─── SMALL PHONE (≤480) ───────────────────────────────────────────── */
@media (max-width: 480px) {
  .container { padding: 20px 14px; }
  .nav-shell { padding: 8px 12px; }
  .nav-shell img { height: 32px !important; width: 32px !important; }
  .nav-shell .display { font-size: 11px !important; letter-spacing: 0.14em !important; }
  .nav-shell a[href="#order"] { padding: 7px 11px !important; font-size: 9px !important; letter-spacing: 0.22em !important; gap: 6px !important; }

  .hero { padding: 92px 14px 56px; }
  .hero-grid .logo-shine img { max-width: 340px; }
  .hero-title { font-size: clamp(26px, 9vw, 36px) !important; }
  .hero-grid .serif { font-size: 18px !important; }
  .hero-sub { font-size: 14px !important; }

  .btn { padding: 13px 18px; min-height: 46px; font-size: 10.5px; letter-spacing: 0.24em; }
  .hero-grid > div:first-child > .reveal:last-child > div { flex-direction: column; width: 100%; }
  .hero-grid > div:first-child > .reveal:last-child > div .btn { width: 100%; }

  /* Section type scaling */
  .menu-section h2, .about-section h2, .drinks-section h2,
  .gallery-section h2, .res-section h2, .order-section h2 {
    font-size: clamp(28px, 8vw, 42px) !important;
  }
  .eyebrow { font-size: 10px; letter-spacing: 0.36em; }
  .eyebrow::before, .eyebrow::after { width: 22px; }

  /* Drinks → single col on tiny screens */
  .drinks-section > .container > div:last-child {
    grid-template-columns: 1fr !important;
  }

  /* Gallery — single col, no span */
  .gallery-grid {
    grid-template-columns: 1fr !important;
    grid-auto-rows: 180px !important;
  }
  .g-tile.span-2, .g-tile.span-2-rows {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
  }

  .res-card { padding: 26px 16px; }
  .res-card .corner-orn { width: 22px; height: 22px; top: 10px !important; bottom: 10px !important; left: 10px !important; right: 10px !important; }
}

/* Avoid double mobile nav showing */
@media (max-width: 1080px) {
  .nav-mobile-btn { display: inline-flex !important; }
}
@media (min-width: 769px) and (max-width: 1080px) {
  /* tablet: keep desktop nav-links visible too */
  .nav-desk { display: flex !important; gap: 18px !important; }
  .nav-desk .nav-link { font-size: 10px !important; letter-spacing: 0.22em !important; }
  .nav-mobile-btn { display: none !important; }
}
@media (max-width: 768px) {
  .nav-desk { display: none !important; }
}