/* ================================================
   Yemen Palace Restaurant — Main Stylesheet
   Warm earthy: espresso · gold · terracotta · cream
   ================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600&family=Inter:wght@300;400;500;600&display=swap');

/* ─── Demo Disclaimer Banner ─── */
.demo-banner {
  background: #1a1200;
  border-bottom: 1px solid rgba(200,144,26,.35);
  text-align: center;
  padding: 8px 16px;
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  color: #a09278;
  line-height: 1.5;
  position: relative;
  z-index: 10000;
}
.demo-banner a {
  color: #C8901A;
  text-decoration: none;
}
.demo-banner a:hover {
  text-decoration: underline;
}

/* ─── Design Tokens ─── */
:root {
  /* Backgrounds: very dark warm charcoal — consistent with card warmth */
  --bg-base:      #0c0a08;
  --bg-surface:   #141210;
  --bg-elevated:  #1e1a16;
  --bg-card:      #2c1608;

  --text-primary:   #f0e8d4;
  --text-secondary: #a09278;
  --text-muted:     #6e6560;

  --gold:            #C8901A;
  --gold-light:      #E0A830;
  --gold-dark:       #8A5C0C;
  --gold-muted:      rgba(200,144,26,.20);
  --gold-glow:       rgba(200,144,26,.45);

  --terracotta:      #b84a1a;
  --terracotta-light:#d45e28;

  --border:          rgba(200,144,26,.16);
  --border-strong:   rgba(200,144,26,.52);

  --shadow-sm:  0 2px 8px rgba(0,0,0,.55);
  --shadow-md:  0 4px 24px rgba(0,0,0,.70);
  --shadow-lg:  0 8px 48px rgba(0,0,0,.80);
  --glow-gold:  0 0 44px rgba(200,144,26,.35);

  --card-bg: linear-gradient(145deg,#3e2210 0%,#2a1608 55%,#361e0d 100%);

  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body:    'Inter', system-ui, sans-serif;

  --radius-sm:  8px;
  --radius-md:  14px;
  --radius-lg:  22px;
  --radius-xl:  32px;

  --container-max: 1280px;
  --section-pad:   96px;
}

/* ─── Reset ─── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
body {
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  overflow-x: hidden;
}
body.menu-open { overflow: hidden; }
img  { max-width:100%; display:block; }
a    { color:inherit; text-decoration:none; }
ul   { list-style:none; }
address { font-style:normal; }
button { font-family:inherit; }

/* ─── Typography ─── */
h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-heading);
  line-height: 1.1;
  color: var(--text-primary);
}
h1 { font-size: clamp(44px,7vw,88px); }
h2 { font-size: clamp(32px,4.5vw,56px); }
h3 { font-size: clamp(22px,3vw,32px); }
h4 { font-size: clamp(18px,2.5vw,22px); }
p  { color: var(--text-secondary); line-height: 1.8; }

.text-gold   { color: var(--gold); }
.text-cream  { color: var(--text-primary); }
.italic      { font-style: italic; }

/* ─── Layout ─── */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 28px;
}
.section      { padding: var(--section-pad) 0; }
.section-sm   { padding: 64px 0; }
.section-lg   { padding: 128px 0; }

.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:28px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }

/* ─── Section Header ─── */
.section-header { text-align:center; margin-bottom:60px; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}
.eyebrow::before,
.eyebrow::after {
  content:'';
  width: 36px; height: 1px;
  background: var(--gold);
  opacity: .5;
}
.section-title  { margin-bottom:12px; }
.section-desc   { max-width:580px; margin:0 auto; font-size:17px; }

/* Ornament divider */
.ornament {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; margin: 14px 0 48px;
}
.ornament::before,
.ornament::after {
  content:'';
  height: 1px; width: 72px;
  background: linear-gradient(to right, transparent, var(--border-strong));
}
.ornament::after { background: linear-gradient(to left, transparent, var(--border-strong)); }
.ornament-gem {
  width: 8px; height: 8px;
  background: var(--gold); transform: rotate(45deg); opacity:.75;
}

/* ─── Navigation ─── */
.navbar {
  position: fixed; top:0; left:0; right:0;
  z-index: 1000;
  padding: 22px 0;
  transition: padding .3s ease, background .4s ease, border-color .4s ease;
  border-bottom: 1px solid transparent;
}
.navbar.scrolled {
  padding: 13px 0;
  background: rgba(12,10,8,.97);
  border-bottom-color: var(--border);
}
.navbar .container { display:flex; align-items:center; justify-content:space-between; }

.brand { display:flex; align-items:center; gap:11px; }
.brand-icon svg { display:block; }
.brand-text { display:flex; flex-direction:column; line-height:1.1; }
.brand-name { font-family:var(--font-heading); font-size:18px; font-weight:700; color:var(--text-primary); letter-spacing:.02em; }
.brand-sub  { font-size:9px; font-weight:600; letter-spacing:.25em; text-transform:uppercase; color:var(--gold); }

.nav-links { display:flex; align-items:center; gap:4px; }
.nav-link {
  font-size:13.5px; font-weight:500;
  color: var(--text-secondary);
  padding: 9px 15px;
  border-radius: var(--radius-sm);
  transition: color .2s;
  position: relative;
}
.nav-link::after {
  content:''; position:absolute; bottom:3px; left:15px; right:15px;
  height:1px; background:var(--gold);
  transform:scaleX(0); transition:transform .25s;
}
.nav-link:hover,
.nav-link.active       { color:var(--text-primary); }
.nav-link:hover::after,
.nav-link.active::after { transform:scaleX(1); }

.nav-link.nav-cta {
  border: 1px solid var(--gold); color:var(--gold);
  padding: 9px 22px; font-weight:600;
  transition: all .25s;
}
.nav-link.nav-cta::after { display:none; }
.nav-link.nav-cta:hover  { background:var(--gold); color:var(--bg-base); }

.menu-toggle {
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; cursor:pointer; padding:8px;
}
.menu-toggle span {
  display:block; width:24px; height:2px;
  background:var(--text-primary); border-radius:2px;
  transition:all .25s;
}
.menu-toggle.active span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.menu-toggle.active span:nth-child(2) { opacity:0; }
.menu-toggle.active span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

.nav-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,.72); z-index:999;
  opacity:0; transition:opacity .3s;
  pointer-events:none;
}
.nav-overlay.active { opacity:1; pointer-events:auto; }

/* ─── Buttons ─── */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  padding: 14px 30px;
  border-radius: var(--radius-sm);
  font-size:13px; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase;
  cursor:pointer; border:none;
  transition:all .28s; text-decoration:none;
  position:relative; overflow:hidden;
}
.btn::after {
  content:''; position:absolute; top:0; left:-110%; width:60%; height:100%;
  background:linear-gradient(to right,transparent,rgba(255,255,255,.18),transparent);
  transition:left .55s;
  pointer-events:none;
}
.btn:hover::after { left:150%; }
.btn-primary {
  background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 45%, var(--gold-dark) 100%);
  color: #0d0906;
  box-shadow: 0 4px 22px var(--gold-glow);
  font-weight:700;
}
.btn-primary:hover { transform:translateY(-3px); box-shadow:0 8px 32px var(--gold-glow); }
.btn-primary:active { transform:translateY(-1px); }
.btn-ghost {
  background:transparent; color:var(--text-primary);
  border:1px solid var(--border-strong);
}
.btn-ghost:hover { border-color:var(--gold); color:var(--gold); transform:translateY(-3px); background:rgba(200,144,26,.06); }
.btn-ghost:active { transform:translateY(-1px); }
.btn-sm  { padding:10px 22px; font-size:12px; }
.btn-lg  { padding:18px 38px; font-size:14px; }

/* ─── Rice Canvas ─── */
#rice-canvas {
  position:fixed; inset:0;
  width:100%; height:100%;
  pointer-events:none; z-index:0;
}

/* ─── Hero ─── */
.hero {
  position:relative; min-height:100vh;
  display:flex; align-items:center;
  overflow:hidden; background:var(--bg-base);
}
.hero-overlay {
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(200,144,26,.1) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 80%, rgba(184,74,26,.07) 0%, transparent 50%);
}
.hero-dot-pattern {
  position:absolute; inset:0; pointer-events:none;
  background-image: radial-gradient(circle, rgba(200,144,26,.07) 1px, transparent 1px);
  background-size: 38px 38px;
}
.hero .container {
  position:relative; z-index:2;
  display:flex; align-items:center; justify-content:center;
  min-height:100vh; padding-top:100px; padding-bottom:60px;
}
.hero-content { text-align:center; max-width:820px; margin:0 auto; }
.hero-eyebrow {
  display:inline-flex; align-items:center; gap:12px;
  font-size:11px; font-weight:600; letter-spacing:.26em; text-transform:uppercase;
  color:var(--gold); margin-bottom:22px;
}
.hero-eyebrow::before,
.hero-eyebrow::after { content:'✦'; font-size:8px; opacity:.7; }

.hero-title {
  font-size:clamp(52px,9vw,108px);
  font-weight:700; line-height:.95;
  letter-spacing:-.025em;
  color:var(--text-primary); margin-bottom:8px;
}
.hero-title em {
  font-style:italic;
  color:var(--gold);
  display:block;
}
.hero-tagline {
  font-family:var(--font-heading);
  font-size:clamp(16px,2.2vw,22px);
  font-style:italic; font-weight:400;
  color:var(--text-secondary); margin-bottom:22px;
}
.hero-desc {
  font-size:16px; color:var(--text-secondary);
  max-width:540px; margin:0 auto 44px; line-height:1.85;
}
.hero-actions { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

.hero-scroll {
  position:absolute; bottom:40px; left:50%;
  transform:translateX(-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  animation:scrollBounce 2.5s ease-in-out infinite;
}
.hero-scroll span { font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--text-muted); }
.hero-scroll-line { width:1px; height:44px; background:linear-gradient(to bottom,var(--gold-muted),transparent); }

@keyframes scrollBounce {
  0%,100% { transform:translateX(-50%) translateY(0); }
  50%      { transform:translateX(-50%) translateY(8px); }
}

/* ─── Stats Bar ─── */
.stats-bar {
  background:var(--bg-surface);
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  padding:28px 0;
}
.stats-bar .container { display:flex; justify-content:space-around; align-items:center; gap:20px; flex-wrap:wrap; }
.stat-item { text-align:center; }
.stat-number {
  font-family:var(--font-heading);
  font-size:36px; font-weight:700; color:var(--gold); line-height:1; margin-bottom:4px;
}
.stat-label { font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--text-muted); }
.stat-sep { width:1px; height:40px; background:var(--border); }

/* ─── Dish Cards ─── */
.dish-card {
  background:var(--card-bg); border:1px solid var(--border);
  border-radius:var(--radius-lg); overflow:hidden;
  transition:transform .32s cubic-bezier(.2,0,.2,1), box-shadow .32s, border-color .32s;
  position:relative;
}
.dish-card::before {
  content:''; position:absolute; top:0; left:15%; right:15%; height:1px;
  background:linear-gradient(to right,transparent,rgba(200,144,26,.35),transparent);
  pointer-events:none;
}
.dish-card:hover {
  transform:translateY(-7px);
  box-shadow:0 16px 56px rgba(0,0,0,.7), 0 0 0 1px rgba(200,144,26,.45), 0 0 32px rgba(200,144,26,.14);
  border-color:rgba(200,144,26,.55);
}
.dish-img {
  width:100%; height:200px;
  display:flex; align-items:center; justify-content:center;
  font-size:52px; position:relative; overflow:hidden;
}
.dish-img::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top,rgba(13,9,6,.75) 0%,transparent 55%);
}
.dish-badge {
  position:absolute; top:12px; right:12px;
  background:rgba(13,9,6,.85); border:1px solid var(--gold-muted);
  border-radius:20px; padding:4px 12px;
  font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gold); backdrop-filter:blur(8px); z-index:1;
}
.dish-body { padding:22px; }
.dish-header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:10px; }
.dish-name { font-family:var(--font-heading); font-size:20px; color:var(--text-primary); line-height:1.2; }
.dish-arabic { font-size:13px; color:var(--gold); opacity:.8; display:block; margin-top:3px; }
.dish-price { font-family:var(--font-heading); font-size:22px; font-weight:700; color:var(--gold); white-space:nowrap; }
.dish-desc { font-size:14px; color:var(--text-secondary); line-height:1.7; margin-bottom:10px; }
.dish-origin { font-size:12px; color:var(--text-muted); font-style:italic; }
.spice-row { display:flex; align-items:center; gap:5px; margin-top:12px; }
.spice-label { font-size:11px; color:var(--text-muted); letter-spacing:.06em; text-transform:uppercase; margin-right:4px; }
.spice-dot { width:8px; height:8px; border-radius:50%; background:var(--border); }
.spice-dot.lit { background:var(--terracotta); }

/* ─── Feature Cards ─── */
.feature-card {
  background:var(--card-bg); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:32px;
  transition:border-color .3s, transform .32s cubic-bezier(.2,0,.2,1), box-shadow .3s;
  position:relative;
}
.feature-card::before {
  content:''; position:absolute; top:0; left:15%; right:15%; height:1px;
  background:linear-gradient(to right,transparent,rgba(200,144,26,.3),transparent);
  pointer-events:none;
}
.feature-card:hover {
  border-color:rgba(200,144,26,.5);
  transform:translateY(-5px);
  box-shadow:0 12px 40px rgba(0,0,0,.6), 0 0 24px rgba(200,144,26,.1);
}
.feature-icon {
  width:52px; height:52px; border-radius:var(--radius-sm);
  background:var(--gold-muted); border:1px solid rgba(200,144,26,.3);
  display:flex; align-items:center; justify-content:center;
  font-size:24px; margin-bottom:18px;
}
.feature-title { font-family:var(--font-heading); font-size:20px; color:var(--text-primary); margin-bottom:10px; }
.feature-desc  { font-size:14px; color:var(--text-secondary); line-height:1.75; }

/* ─── Category Cards ─── */
.cat-card {
  background:var(--card-bg); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:30px 26px;
  display:flex; flex-direction:column; gap:12px;
  transition:all .32s cubic-bezier(.2,0,.2,1); text-decoration:none; cursor:pointer;
  position:relative;
}
.cat-card::before {
  content:''; position:absolute; top:0; left:15%; right:15%; height:1px;
  background:linear-gradient(to right,transparent,rgba(200,144,26,.32),transparent);
  pointer-events:none;
}
.cat-card:hover {
  border-color:rgba(200,144,26,.55);
  transform:translateY(-5px);
  box-shadow:0 12px 40px rgba(0,0,0,.6), 0 0 28px rgba(200,144,26,.13);
}
.cat-emoji { font-size:40px; }
.cat-name  { font-family:var(--font-heading); font-size:22px; color:var(--text-primary); }
.cat-count { font-size:13px; color:var(--text-muted); }
.cat-link  { font-size:13px; color:var(--gold); font-weight:600; margin-top:4px; }

/* ─── Coffee Feature ─── */
.coffee-section {
  background:var(--bg-surface);
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  padding:var(--section-pad) 0;
}
.coffee-grid { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.coffee-visual {
  aspect-ratio:1; border-radius:var(--radius-xl);
  background:linear-gradient(135deg,#1a0d04 0%,#3d200a 40%,#2a1205 100%);
  border:1px solid var(--border-strong);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:16px; position:relative; overflow:hidden;
}
.coffee-visual::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 50% 50%, rgba(200,144,26,.12) 0%,transparent 60%);
}
.coffee-emoji { font-size:88px; position:relative; z-index:1; }
.coffee-label {
  font-family:var(--font-heading); font-size:22px; font-style:italic;
  color:var(--gold); position:relative; z-index:1;
}

/* ─── CTA Banner ─── */
.cta-banner {
  position:relative; overflow:hidden;
  background:linear-gradient(135deg,var(--bg-surface),var(--bg-elevated) 50%,var(--bg-surface));
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  padding:var(--section-pad) 0;
}
.cta-banner::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at center,rgba(200,144,26,.08) 0%,transparent 60%);
}
.cta-banner .container { position:relative; z-index:1; text-align:center; }
.cta-banner h2 { margin-bottom:14px; }
.cta-banner p  { max-width:520px; margin:0 auto 36px; font-size:17px; }

/* ─── Location Preview ─── */
.location-grid { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start; }
.map-box {
  border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid var(--border); position:relative;
}
.map-box iframe { display:block; width:100%; height:320px; filter:saturate(0) opacity(.85); }

.info-block {
  background:var(--bg-surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:32px;
}
.info-item { display:flex; gap:16px; margin-bottom:26px; }
.info-item:last-child { margin-bottom:0; }
.info-icon {
  width:44px; height:44px; border-radius:var(--radius-sm);
  background:var(--gold-muted); border:1px solid rgba(200,144,26,.3);
  display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0;
}
.info-label { font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin-bottom:4px; }
.info-value { font-size:15px; color:var(--text-primary); line-height:1.55; }
.info-value a { color:var(--gold); transition:opacity .2s; }
.info-value a:hover { opacity:.8; }

/* ─── Hours Table ─── */
.hours-table { width:100%; border-collapse:collapse; margin-top:8px; }
.hours-table tr { border-bottom:1px solid var(--border); }
.hours-table tr:last-child { border-bottom:none; }
.hours-table td { padding:11px 0; font-size:14px; }
.hours-table td:first-child { color:var(--text-secondary); }
.hours-table td:last-child  { color:var(--text-primary); font-weight:500; text-align:right; }
.hours-table tr.today td { color:var(--gold); }

/* ─── Page Hero ─── */
.page-hero {
  position:relative; padding:160px 0 80px; text-align:center; overflow:hidden;
}
.page-hero::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at top center,rgba(200,144,26,.1) 0%,transparent 55%);
}
.page-hero-dots {
  position:absolute; inset:0;
  background-image:radial-gradient(circle,rgba(200,144,26,.06) 1px,transparent 1px);
  background-size:36px 36px;
}
.page-hero .container { position:relative; z-index:1; }
.page-title { font-size:clamp(40px,6vw,72px); letter-spacing:-.02em; margin-bottom:14px; }
.page-subtitle { font-size:18px; color:var(--text-secondary); max-width:560px; margin:0 auto; }

/* ─── Menu Page Tabs ─── */
.menu-tabs {
  display:flex; justify-content:center; gap:8px;
  flex-wrap:wrap; margin-bottom:56px;
}
.tab-btn {
  padding:10px 26px; border-radius:40px;
  font-size:12.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  cursor:pointer; background:var(--bg-surface);
  color:var(--text-muted); border:1px solid var(--border);
  transition:all .25s;
}
.tab-btn:hover,
.tab-btn.active { background:var(--gold-muted); border-color:var(--gold); color:var(--gold); }

.menu-category { display:none; }
.menu-category.active { display:block; }
.menu-category-header { margin-bottom:36px; }
.menu-category-title { font-family:var(--font-heading); font-size:34px; color:var(--text-primary); margin-bottom:8px; }
.menu-category-desc  { color:var(--text-secondary); font-size:15px; max-width:520px; }

/* ─── Gallery ─── */
.gallery-filters { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:40px; }

.gallery-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:16px;
}
.gallery-item {
  border-radius:var(--radius-md); overflow:hidden;
  position:relative; cursor:pointer;
  transition:transform .3s, box-shadow .3s;
}
.gallery-item:hover { transform:scale(1.02); box-shadow:var(--shadow-lg); }
.gallery-item.tall   { grid-row:span 2; }
.gallery-item.wide   { grid-column:span 2; }
.gallery-placeholder {
  width:100%; min-height:220px; height:100%;
  display:flex; align-items:center; justify-content:center;
  font-size:56px; position:relative;
}
.gallery-tall .gallery-placeholder { min-height:460px; }
.gallery-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top,rgba(13,9,6,.85) 0%,transparent 55%);
  display:flex; align-items:flex-end; padding:20px;
  opacity:0; transition:opacity .3s;
}
.gallery-item:hover .gallery-overlay { opacity:1; }
.gallery-overlay-text { font-family:var(--font-heading); font-size:17px; color:var(--text-primary); }
.gallery-overlay-sub  { font-size:12px; color:var(--gold); margin-top:2px; }

/* ─── About Page ─── */
.culture-card {
  background:var(--bg-surface); border:1px solid var(--border);
  border-left:3px solid var(--gold);
  border-radius:0 var(--radius-md) var(--radius-md) 0;
  padding:28px 32px;
}
.quote-block {
  border-left:3px solid var(--gold);
  padding:18px 28px;
  background:var(--gold-muted);
  border-radius:0 var(--radius-md) var(--radius-md) 0;
  font-family:var(--font-heading); font-size:18px; font-style:italic;
  color:var(--text-primary); line-height:1.6; margin:32px 0;
}
.timeline { position:relative; padding-left:40px; }
.timeline::before {
  content:''; position:absolute; left:15px; top:0; bottom:0;
  width:1px; background:linear-gradient(to bottom,var(--gold-muted),transparent);
}
.timeline-item { position:relative; padding-bottom:40px; }
.timeline-dot {
  position:absolute; left:-33px; top:4px;
  width:18px; height:18px; border-radius:50%;
  background:var(--bg-base); border:2px solid var(--gold);
  display:flex; align-items:center; justify-content:center;
  font-size:8px; color:var(--gold);
}
.timeline-title { font-family:var(--font-heading); font-size:20px; color:var(--text-primary); margin-bottom:8px; }
.timeline-text  { font-size:15px; color:var(--text-secondary); line-height:1.75; }

.split-grid { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.split-grid.reverse .split-text { order:2; }
.split-grid.reverse .split-visual { order:1; }

.visual-card {
  border-radius:var(--radius-xl); overflow:hidden;
  border:1px solid var(--border-strong);
  aspect-ratio:4/3;
  display:flex; align-items:center; justify-content:center;
  font-size:80px;
  position:relative;
}
.visual-card::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 50% 50%,rgba(200,144,26,.1) 0%,transparent 60%);
}

/* ─── Forms ─── */
.form-card {
  background:var(--card-bg); border:1px solid var(--border-strong);
  border-radius:var(--radius-xl); padding:44px;
  position:relative; overflow:hidden;
}
.form-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(to right, transparent, var(--gold), transparent);
  opacity:.7;
}
.form-group { margin-bottom:20px; }
.form-label {
  display:block; font-size:11.5px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--gold); margin-bottom:8px; opacity:.9;
}
.form-input,
.form-select,
.form-textarea {
  width:100%; background:rgba(12,10,8,.65);
  border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:14px 18px; font-size:15px; font-family:var(--font-body);
  color:var(--text-primary); transition:border-color .22s, box-shadow .22s, background .22s;
  appearance:none;
}
.form-input:hover,
.form-select:hover,
.form-textarea:hover { border-color:rgba(200,144,26,.4); }
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline:none; border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(200,144,26,.12), 0 0 16px rgba(200,144,26,.08);
  background:rgba(12,10,8,.85);
}
.form-input::placeholder,
.form-textarea::placeholder { color:var(--text-muted); }
.form-textarea { resize:vertical; min-height:120px; }
.form-select {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238b5e14' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center; padding-right:42px;
}
.form-select option { background:var(--bg-surface); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-note { font-size:13px; color:var(--text-muted); margin-top:16px; }

/* ─── Reservation Sidebar ─── */
.res-layout { display:grid; grid-template-columns:1fr 360px; gap:36px; align-items:start; }
.res-sidebar {
  background:var(--card-bg); border:1px solid var(--border-strong);
  border-radius:var(--radius-xl); padding:32px;
  position:sticky; top:100px; overflow:hidden;
}
.res-sidebar::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(to right, transparent, var(--gold), transparent);
  opacity:.6;
}
.res-sidebar h3 { font-family:var(--font-heading); font-size:22px; margin-bottom:20px; color:var(--gold); }
.res-tip {
  display:flex; gap:12px; padding:13px 0;
  border-bottom:1px solid var(--border);
}
.res-tip:last-child { border-bottom:none; }
.res-tip-icon { font-size:20px; flex-shrink:0; }
.res-tip-text { font-size:13.5px; color:var(--text-secondary); line-height:1.6; }

/* ─── Contact Layout ─── */
.contact-layout { display:grid; grid-template-columns:1fr 420px; gap:48px; align-items:start; }
.contact-info { display:flex; flex-direction:column; gap:28px; }
.contact-block {
  background:var(--card-bg); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:28px;
  position:relative; overflow:hidden;
}
.contact-block::before {
  content:''; position:absolute; top:0; left:10%; right:10%; height:1px;
  background:linear-gradient(to right,transparent,rgba(200,144,26,.3),transparent);
  pointer-events:none;
}
.contact-block h3 { font-family:var(--font-heading); font-size:20px; margin-bottom:20px; }

.c-item { display:flex; gap:14px; margin-bottom:20px; }
.c-item:last-child { margin-bottom:0; }
.c-icon {
  width:42px; height:42px; border-radius:var(--radius-sm);
  background:var(--gold-muted); border:1px solid rgba(200,144,26,.3);
  display:flex; align-items:center; justify-content:center;
  font-size:17px; flex-shrink:0;
}
.c-label { font-size:11px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--gold); margin-bottom:3px; }
.c-value { font-size:15px; color:var(--text-primary); line-height:1.55; }
.c-value a { color:var(--text-primary); transition:color .2s; }
.c-value a:hover { color:var(--gold); }

/* ─── Badge ─── */
.badge {
  display:inline-flex; align-items:center;
  padding:3px 12px; border-radius:20px;
  font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
}
.badge-gold { background:rgba(200,144,26,.15); border:1px solid rgba(200,144,26,.3); color:var(--gold); }
.badge-terra { background:rgba(184,74,26,.15); border:1px solid rgba(184,74,26,.3); color:var(--terracotta-light); }

/* ─── Footer ─── */
.footer {
  background:var(--bg-surface); border-top:1px solid var(--border);
  padding-top:80px; position:relative; overflow:hidden;
}
.footer-pattern {
  position:absolute; inset:0;
  background-image:radial-gradient(circle,rgba(200,144,26,.04) 1px,transparent 1px);
  background-size:40px 40px; pointer-events:none;
}
.footer-grid {
  display:grid; grid-template-columns:2fr 1fr 1.5fr 1.5fr;
  gap:48px; padding-bottom:56px;
  border-bottom:1px solid var(--border); position:relative;
}
.footer-brand .brand { margin-bottom:16px; display:inline-flex; }
.footer-tagline { font-size:14px; color:var(--text-muted); line-height:1.75; margin-bottom:24px; max-width:250px; }
.footer-social { display:flex; gap:10px; }
.social-btn {
  width:36px; height:36px; border-radius:50%;
  background:var(--bg-elevated); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; color:var(--text-muted);
  transition:all .25s;
}
.social-btn:hover { border-color:var(--gold); color:var(--gold); }
.footer-heading { font-family:var(--font-heading); font-size:17px; color:var(--text-primary); margin-bottom:18px; font-weight:600; }
.footer-nav ul  { display:grid; grid-template-columns:1fr 1fr; gap:8px 16px; }
.footer-nav a   { font-size:14px; color:var(--text-muted); transition:color .2s; }
.footer-nav a:hover { color:var(--gold); }
.footer-hours .hours-table td { padding:9px 0; font-size:13px; }
.footer-contact address p { font-size:14px; color:var(--text-muted); line-height:1.7; }
.footer-contact-links { display:flex; flex-direction:column; gap:6px; margin-top:14px; }
.footer-contact-links a { font-size:14px; color:var(--text-secondary); transition:color .2s; }
.footer-contact-links a:hover { color:var(--gold); }
.footer-bottom {
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 0; position:relative;
}
.footer-bottom p { font-size:13px; color:var(--text-muted); }
.footer-bottom-links { display:flex; gap:22px; }
.footer-bottom-links a { font-size:13px; color:var(--text-muted); transition:color .2s; }
.footer-bottom-links a:hover { color:var(--gold); }

/* ─── Scroll Reveal ─── */
.reveal {
  opacity:0; transform:translateY(36px);
  transition:opacity .75s cubic-bezier(.16,1,.3,1), transform .75s cubic-bezier(.16,1,.3,1);
}
.reveal.revealed { opacity:1; transform:translateY(0); }
.reveal-left  { opacity:0; transform:translateX(-44px); transition:opacity .75s cubic-bezier(.16,1,.3,1),transform .75s cubic-bezier(.16,1,.3,1); }
.reveal-left.revealed  { opacity:1; transform:translateX(0); }
.reveal-right { opacity:0; transform:translateX(44px);  transition:opacity .75s cubic-bezier(.16,1,.3,1),transform .75s cubic-bezier(.16,1,.3,1); }
.reveal-right.revealed { opacity:1; transform:translateX(0); }
.reveal-scale { opacity:0; transform:scale(.9);           transition:opacity .65s ease,transform .65s ease; }
.reveal-scale.revealed { opacity:1; transform:scale(1); }

.d1 { transition-delay:.1s!important; }
.d2 { transition-delay:.2s!important; }
.d3 { transition-delay:.3s!important; }
.d4 { transition-delay:.4s!important; }
.d5 { transition-delay:.5s!important; }

/* ─── Menu Book ─── */
.book-nav-tabs {
  display: flex; 
  justify-content: center; 
  gap: 12px;
  flex-wrap: wrap; 
  margin-bottom: 40px;
}
.book-tab {
  padding: 12px 26px; 
  border-radius: 40px;
  font-size: 13px; 
  font-weight: 600; 
  letter-spacing: .1em; 
  text-transform: uppercase;
  cursor: pointer; 
  background: var(--bg-surface);
  color: var(--text-muted); 
  border: 1px solid var(--border);
  transition: all .25s;
}
.book-tab:hover,
.book-tab.active { 
  background: var(--gold-muted); 
  border-color: var(--gold); 
  color: var(--gold); 
}

.book-controls {
  display: flex;
  gap: 20px;
  justify-content: center;
  order: 2; /* Ensures it stays below the viewport */
}

.book-arrow {
  width: 60px; /* Slightly larger buttons */
  height: 60px; 
  border-radius: 50%;
  background: var(--bg-surface); 
  border: 1px solid var(--border-strong);
  color: var(--gold); 
  font-size: 32px; 
  line-height: 1;
  cursor: pointer; 
  flex-shrink: 0;
  display: flex; 
  align-items: center; 
  justify-content: center;
  transition: all .25s; 
  padding-bottom: 2px;
}

.book-arrow:hover { 
  background: var(--gold); 
  color: #fff; 
  border-color: var(--gold); 
  transform: scale(1.1); 
}

.book-arrow:disabled { 
  opacity: .2; 
  cursor: not-allowed; 
  transform: none; 
}

.book-viewport { 
  width: 100%; 
  overflow: hidden; 
  border-radius: var(--radius-lg); 
  touch-action: pan-y;
  box-shadow: 0 30px 60px rgba(0,0,0,0.4); /* Stronger shadow for the bigger book */
}

.book-track {
  display: flex;
  transition: transform .52s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}

.book-page { 
  min-width: 100%; 
  padding: 4px; 
}

/* Updated: Frame Padding and Scale */
.book-frame {
  position: relative;
  background: linear-gradient(160deg, #28180a 0%, #321c0c 50%, #241508 100%);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 44px 64px 40px;
  min-height: 520px;
  box-shadow: 0 0 0 1px rgba(200,144,26,.08), inset 0 1px 0 rgba(200,144,26,.12);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.book-inner-border {
  position: absolute; inset: 16px;
  border: 1px solid rgba(200,144,26,.15);
  border-radius: calc(var(--radius-lg) - 4px);
  pointer-events: none;
}

/* Decorations stay consistent but adjust to larger frame */
.book-corner { position: absolute; width: 28px; height: 28px; pointer-events: none; }
.book-corner::before, .book-corner::after { content:''; position:absolute; background:var(--gold); opacity:.5; }
.book-corner::before { width: 1.5px; height: 100%; left: 50%; transform: translateX(-50%); }
.book-corner::after  { height: 1.5px; width: 100%; top: 50%; transform: translateY(-50%); }
.book-corner.tl { top: 14px; left: 14px; }
.book-corner.tr { top: 14px; right: 14px; }
.book-corner.bl { bottom: 14px; left: 14px; }
.book-corner.br { bottom: 14px; right: 14px; }

.book-page-header { text-align:center; margin-bottom:28px; }
.book-chapter { font-size:9px; letter-spacing:.38em; text-transform:uppercase; color:var(--gold); opacity:.7; margin-bottom:10px; }
.book-title {
  font-family: var(--font-heading);
  font-size: clamp(32px, 5vw, 48px); /* Larger font range */
  color: var(--text-primary); 
  margin-bottom: 8px; 
  line-height: 1.1;
  text-align: center;
}

.book-title-ar { font-size:15px; color:var(--gold); opacity:.75; margin-bottom:16px; }
.book-rule {
  display:flex; align-items:center; justify-content:center;
  gap:10px; margin:0 auto 14px;
}
.book-rule::before,
.book-rule::after { content:''; height:1px; width:50px; background:linear-gradient(to right,transparent,rgba(200,144,26,.4)); }
.book-rule::after  { background:linear-gradient(to left,transparent,rgba(200,144,26,.4)); }
.book-rule span { width:5px; height:5px; background:var(--gold); transform:rotate(45deg); opacity:.6; display:block; }
.book-intro { font-size:13.5px; color:var(--text-muted); line-height:1.65; max-width:520px; margin:0 auto; font-style:italic; }

.book-dish-list { display:flex; flex-direction:column; }
.book-dish { padding:12px 0; border-bottom:1px solid rgba(200,144,26,.1); }
.book-dish:first-child { border-top:1px solid rgba(200,144,26,.1); }
.book-dish-row { display:flex; align-items:baseline; gap:8px; }
.book-dish-name {
  font-family:var(--font-heading); font-size:18px;
  color:var(--text-primary); flex-shrink:0;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.book-sig {
  font-family:var(--font-body);
  font-size:9px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gold); background:var(--gold-muted);
  border:1px solid rgba(200,144,26,.3); border-radius:20px;
  padding:2px 8px; flex-shrink:0;
}
.book-leader { flex:1; border-bottom:1px dotted rgba(200,144,26,.2); margin-bottom:4px; min-width:12px; }
.book-dish-price {
  font-family: var(--font-heading); 
  font-size: 20px; /* Increased from 17px */
  color: var(--gold); 
  font-weight: 600;
}

.book-dish { padding: 11px 0; }

.book-dish-price small { font-size:11px; font-weight:400; color:var(--text-muted); font-family:var(--font-body); }
.book-dish-ar { font-size:13px; color:var(--gold); opacity:.65; margin-top:3px; }
.book-dish-ing { font-size:13px; color:var(--text-muted); margin-top:5px; line-height:1.55; }
.book-dish-note { font-size:11px; color:var(--text-muted); font-style:italic; margin-top:3px; opacity:.75; }

.book-footer-row {
  display:flex; align-items:center; justify-content:space-between;
  margin-top:18px; padding:0 4px; flex-wrap:wrap; gap:10px;
}
.book-page-counter { font-size:12px; color:var(--text-muted); letter-spacing:.15em; }
.book-page-counter span { color:var(--gold); }
.book-swipe-hint { font-size:11px; color:var(--text-muted); opacity:.6; }

/* ─── Responsive ─── */
/* ─── Responsive Adjustments ─── */
@media(max-width: 768px) {
  .book-frame {
    padding: 40px 24px; /* Tighter padding on mobile */
    min-height: 500px;
  }
  .book-outer { gap: 24px; }
  .book-arrow { width: 50px; height: 50px; font-size: 24px; }
  .book-dish-name { font-size: 18px; }
}
@media(max-width:900px) {
  .grid-3   { grid-template-columns:repeat(2,1fr); }
  .grid-4   { grid-template-columns:repeat(2,1fr); }
  .location-grid { grid-template-columns:1fr; }
  .contact-layout { grid-template-columns:1fr; }
  .res-layout { grid-template-columns:1fr; }
  .res-sidebar { position:static; }
  .coffee-grid { grid-template-columns:1fr; }
  .split-grid  { grid-template-columns:1fr; }
  .split-grid.reverse .split-text  { order:1; }
  .split-grid.reverse .split-visual { order:2; }
  .gallery-grid { grid-template-columns:repeat(2,1fr); }
  .gallery-item.wide { grid-column:span 1; }
}
@media(max-width:768px) {
  :root { --section-pad:52px; }
  /* ── Mobile nav ── */
  .nav-links {
    position:fixed; top:0; right:0; height:100vh; width:300px;
    background:var(--bg-surface); border-left:1px solid var(--border);
    flex-direction:column; align-items:stretch;
    padding:88px 24px 48px; gap:0;
    transform:translateX(100%); transition:transform .35s cubic-bezier(.4,0,.2,1);
    z-index:1000; overflow-y:auto;
  }
  .nav-links.open { transform:translateX(0); }
  .nav-link {
    width:100%; padding:17px 20px; font-size:16px;
    border-radius:var(--radius-sm);
    border-bottom:1px solid var(--border); display:block;
  }
  .nav-links li:last-child .nav-link { border-bottom:none; }
  .nav-link.nav-cta { margin-top:20px; text-align:center; border:1px solid var(--gold) !important; border-radius:var(--radius-sm); }
  .menu-toggle { display:flex; }
  .nav-overlay { display:block; }

  /* ── Grids — full width on phone ── */
  .grid-2  { grid-template-columns:1fr; gap:16px; }
  .grid-3  { grid-template-columns:1fr; gap:16px; }
  .grid-4  { grid-template-columns:1fr; gap:14px; }
  .form-row { grid-template-columns:1fr; }

  /* ── Footer: stacked 1-col on mobile ── */
  .footer-grid  { grid-template-columns:1fr; gap:28px; }
  .footer-tagline { max-width:100%; }
  .footer-bottom { flex-direction:column; gap:10px; text-align:center; }

  /* ── Hero ── */
  .hero-actions { flex-direction:column; align-items:center; }

  /* ── Stats bar — 2×2 wrap ── */
  .stats-bar .container { gap:0; flex-wrap:wrap; }
  .stat-item { width:50%; padding:14px 0; text-align:center; }
  .stat-sep  { display:none; }

  /* ── Dish cards — shorter image, compact body ── */
  .dish-img        { height:160px; font-size:44px; }
  .dish-body       { padding:16px 18px; }
  .dish-header     { margin-bottom:8px; }
  .dish-name       { font-size:18px; }
  .dish-arabic     { font-size:12px; }
  .dish-price      { font-size:19px; }
  .dish-desc       { font-size:13px; line-height:1.55; margin-bottom:8px; }
  .dish-origin     { font-size:11px; }
  .spice-row       { margin-top:8px; }

  /* ── Feature cards — vertical full-width ── */
  .feature-card    { padding:24px 20px; }
  .feature-icon    { width:44px; height:44px; font-size:20px; margin-bottom:14px; }
  .feature-title   { font-size:18px; margin-bottom:8px; }
  .feature-desc    { font-size:14px; line-height:1.7; }

  /* ── Category cards ── */
  .cat-card        { padding:20px 18px; gap:10px; }
  .cat-emoji       { font-size:34px; }
  .cat-name        { font-size:18px; }
  .cat-count       { font-size:12px; }
  .cat-link        { font-size:13px; }

  /* ── Book ── */
  .book-frame   { padding:28px 22px 24px; }
  .book-arrow   { width:40px; height:40px; font-size:22px; }
  .book-outer   { gap:8px; }
  .book-dish-name  { font-size:15px; }
  .book-dish-price { font-size:15px; }
}
@media(max-width:520px) {
  :root { --section-pad:40px; }
  .container { padding:0 16px; }

  /* 1 column on small phones */
  .grid-2 { grid-template-columns:1fr; gap:12px; }
  .grid-3 { grid-template-columns:1fr; gap:12px; }
  .grid-4 { grid-template-columns:1fr; gap:10px; }

  /* Compact cards */
  .dish-img        { height:140px; font-size:38px; }
  .dish-body       { padding:14px 16px; }
  .dish-name       { font-size:17px; }
  .dish-price      { font-size:18px; }
  .dish-origin     { display:none; }
  .feature-card    { padding:20px 16px; }
  .feature-icon    { width:38px; height:38px; font-size:18px; margin-bottom:12px; }
  .feature-title   { font-size:16px; }
  .feature-desc    { font-size:13px; }
  .cat-card        { padding:18px 16px; gap:8px; }
  .cat-emoji       { font-size:30px; }
  .cat-name        { font-size:16px; }

  /* Footer: stacked 1-col, compact */
  .footer-grid     { grid-template-columns:1fr; gap:24px; }
  .footer-tagline  { font-size:13px; max-width:100%; margin-bottom:14px; }
  .footer-heading  { font-size:15px; margin-bottom:10px; }
  .footer-nav a, .footer-contact address p,
  .footer-contact-links a { font-size:13px; }
  .footer-hours .hours-table td { font-size:12px; padding:8px 0; }

  /* Gallery 1-col */
  .gallery-grid { grid-template-columns:1fr; }
  .gallery-item.tall,.gallery-item.wide { grid-row:auto; grid-column:auto; }
  .gallery-tall .gallery-placeholder { min-height:220px; }

  .form-card    { padding:24px 16px; }
  .res-sidebar  { padding:22px 16px; }
  .contact-block { padding:20px 16px; }
  .info-block   { padding:20px 16px; }

  .stat-number  { font-size:28px; }

  .book-frame   { padding:20px 12px 16px; }
  .book-arrow   { width:44px; height:44px; font-size:22px; }
  .book-outer   { gap:4px; }
  .book-dish-name  { font-size:14px; }
  .book-dish-price { font-size:14px; }
  .book-dish-ing   { font-size:12px; }
  .book-tab     { padding:8px 12px; font-size:11px; }
  .book-swipe-hint { display:none; }
  .book-sig     { display:none; }

  .page-title   { font-size:clamp(32px,10vw,72px); }
  .hero-title   { font-size:clamp(38px,11vw,88px); }
}