/* Theme variables */
:root{
  /* Base palette */
  --bg:#0b0b0b;
  --fg:#f5f5f5;
  --muted:#a4a4a4;

  /* Accents */
  --accent-primary:#6B818C; /* Primary */
  --accent-secondary:#E1A948; /* Secondary */
  --accent: var(--accent-primary);

  /* Surfaces */
  --card:#141414;

  /* Layout tokens */
  --radius:18px;
  --max:1100px;
  --side-pad:22px;

  /* Component tokens */
  --price-color:#31E981;
  --accent-tint-12: rgba(107,129,140,.12);
  --accent-tint-15: rgba(107,129,140,.15);
  --accent-tint-35: rgba(107,129,140,.35);
  --accent-tint-50: rgba(107,129,140,.5);
}

/* Resets and base */
*{ box-sizing:border-box }
html, body{ height:100% }
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:radial-gradient(1200px 1200px at 80% -10%, #1d1d1d 0%, var(--bg) 38%) fixed, linear-gradient(0deg, #0f0f0f, #0f0f0f) fixed;
  color:var(--fg);
  line-height:1.55;
  letter-spacing:0.1px;
}
a{ color:var(--accent); text-decoration:none }
a:hover{ text-decoration:underline }
.wrap{ max-width:var(--max); margin-inline:auto; padding:0 var(--side-pad) }

/* Header */
header{ position:fixed; top:0; left:0; right:0; z-index:20; background:transparent }
/* Keep header content aligned with the main content edge; add notch padding only on mobile */
.nav.wrap{ padding-left:calc(var(--side-pad) + env(safe-area-inset-left, 0px)); padding-right:calc(var(--side-pad) + env(safe-area-inset-right, 0px)) }
.nav{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0 }
.nav-actions{ display:flex; align-items:center; gap:12px; margin-left:auto }
.nav-cta{ display:none }
@media(min-width:768px){
  .nav-cta{ display:inline-flex }
}
.brand{ display:flex; align-items:center; gap:14px; font-weight:800; letter-spacing:1px }
.brand img{ width:44px; height:44px; border-radius:10px; object-fit:cover }
nav a{ padding:8px 12px; border-radius:10px; color:var(--fg) }
nav a:hover{ background:#171717 }

/* Burger menu */
.burger{ position:relative; z-index:1100; display:inline-flex; flex-direction:column; gap:6px; align-items:center; justify-content:center; width:44px; height:44px; border-radius:10px; border:1px solid #1c1c1c; background:#131313; color:#fff; cursor:pointer; line-height:0 }
.burger span{ display:block; width:20px; height:2px; background:#eaeaea; transition:transform .18s ease, opacity .18s ease }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(8px) rotate(45deg) }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0 }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-8px) rotate(-45deg) }
.burger:hover{ border-color:var(--accent-primary) }
.menu-panel{ position:fixed; top:64px; right:max(calc(var(--side-pad) + env(safe-area-inset-right, 0px)), calc((100vw - var(--max))/2 + var(--side-pad) + env(safe-area-inset-right, 0px))); z-index:1099; width:220px; background:var(--card); border:1px solid #1a1a1a; border-radius:14px; padding:8px; box-shadow:0 12px 32px rgba(0,0,0,.5) }
.menu-panel a{ display:block; padding:10px 12px; border-radius:10px; color:var(--fg) }
.menu-panel a:hover{ background:var(--accent-tint-12) }
.menu-panel a[aria-current="page"]{ background:var(--accent-tint-12); color:var(--accent) }

/* Hero */
.hero{ padding:0 0 24px }
.hero .wrap{ max-width:none; padding:0 }
.hero-video{ border-radius:0; border-left:0; border-right:0 }
.hero-video{ position:relative; background:#0f0f0f; border:0; border-radius:0; overflow:hidden; width:100%; aspect-ratio:var(--hero-aspect, 16 / 9) }
.hero-video-el, .hero-image-el{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; transition:opacity .6s ease }
.hero-image-el--contain{ object-fit:contain; object-position:center; background:#050505 }
.hero-image-el{ opacity:0 }
.hero-dots{ display:flex; gap:8px; justify-content:center; padding:16px 0 0 }
.hero-dot{ width:12px; height:12px; border-radius:50%; border:1px solid rgba(255,255,255,.5); background:transparent; cursor:pointer; padding:0; line-height:0; transition:background .2s ease, transform .2s ease }
.hero-dot.active{ background:var(--accent); border-color:var(--accent); transform:scale(1.05) }
.hero-dot:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }

/* Buttons */
.btn{ display:inline-flex; align-items:center; gap:10px; padding:12px 16px; border-radius:12px; border:1px solid #1c1c1c; background:#131313; color:var(--fg); font-weight:600; transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .12s ease }
.btn:hover{ background:#161616; border-color:var(--accent-tint-50); box-shadow:0 6px 16px rgba(0,0,0,.35), 0 0 0 1px var(--accent-tint-15); transform:translateY(-1px) }
.btn:active{ transform:translateY(0); box-shadow:0 3px 8px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.04) }
.btn:focus-visible{ outline:2px solid var(--accent-primary); outline-offset:2px }
.btn.accent{ background:var(--accent); color:#0b0b0b; border-color:transparent }
.btn.accent:hover{ filter:brightness(1.05); box-shadow:0 8px 22px var(--accent-tint-35), 0 0 0 1px var(--accent-tint-15) }
.btn.small{ padding:8px 12px; font-size:14px; border-radius:10px }

/* Sections, cards, grid */
section{ padding:70px 0 }
h2{ font-size:clamp(26px, 3.4vw, 34px); margin:0 0 16px }
.card{ background:var(--card); border:1px solid #1a1a1a; border-radius:var(--radius); padding:24px }
.grid{ display:grid; gap:18px }
@media(min-width:780px){ .grid.cols-2{ grid-template-columns:1fr 1fr } }
@media(min-width:980px){ .grid.cols-3{ grid-template-columns:repeat(3, 1fr) } }

/* Booking form */
.booking-form{ display:grid; gap:18px }
.form-grid{ display:grid; gap:14px }
@media(min-width:640px){ .form-grid{ grid-template-columns:repeat(2, minmax(0,1fr)) } }
.form-grid .field.full{ grid-column:1/-1 }
.field{ display:flex; flex-direction:column; gap:6px; font-size:14px; color:#e0e0e0 }
.field-label{ font-size:13px; text-transform:uppercase; letter-spacing:1px; color:var(--muted) }
.field input,
.field select,
.field textarea{ width:100%; padding:12px 14px; border-radius:12px; border:1px solid #2a2a2a; background:#121212; color:#f1f1f1; font-size:15px; font-family:inherit }
.field input:focus,
.field select:focus,
.field textarea:focus{ outline:2px solid var(--accent-tint-35); border-color:var(--accent) }
.field textarea{ resize:vertical; min-height:120px }
.booking-form .btn{ justify-content:center; width:100% }
.form-feedback{ font-size:14px; min-height:18px; color:var(--muted) }
.form-feedback.error{ color:#f87171 }
.form-feedback.success{ color:#34d399 }
.booking-card{ display:flex; flex-direction:column; gap:16px }
.booking-points{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px }
.booking-points li{ position:relative; padding-left:18px; color:#d4d4d4 }
.booking-points li::before{ content:'•'; position:absolute; left:0; top:0; color:var(--accent-secondary) }
.cta-row{ display:flex; flex-wrap:wrap; gap:12px }
.cta-row .btn{ flex:1 1 180px; justify-content:center }

/* Menu list */
.menu-item{ display:flex; justify-content:space-between; gap:16px; padding:16px 0; border-bottom:1px dashed #262626 }
.menu-item:last-child{ border-bottom:none }
.price{ color:var(--price-color); font-weight:700 }
.tag{ display:inline-block; padding:2px 8px; border:1px solid #2a2a2a; border-radius:999px; font-size:12px; color:#cfcfcf }
.item-left{ display:flex; flex-direction:column; gap:6px }
.desc{ color:var(--muted); font-size:14px; line-height:1.4 }

/* Menu sheet layout */
.menu-sheet{ max-width:860px; margin:0 auto }
.menu-header{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px }
.menu-title{ font-size:clamp(30px,4.5vw,42px); text-align:left; letter-spacing:3px; font-weight:800; text-transform:uppercase; margin:0; flex:1 1 auto }
.menu-header .btn{ flex:0 0 auto }
.menu-note{ color:#bcbcbc; text-align:left; font-size:14px; margin:0 0 24px }
.menu-section{ margin:10px 0 26px }
.menu-section h3{ margin:8px 0 8px; text-transform:uppercase; letter-spacing:2px; font-size:18px; color:#e9e9e9 }
.menu-divider{ height:1px; background:#1a1a1a; margin:16px 0 }

/* Filters */
.filters{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin:6px 0 18px }
.filter-btn{ cursor:pointer; padding:6px 10px; background:transparent; border:none; border-bottom:2px solid transparent; color:#eaeaea; font-weight:600; font-size:14px }
.filter-btn:hover{ border-bottom-color:var(--accent-tint-50) }
.filter-btn.active{ border-bottom-color:var(--accent); color:var(--fg) }

/* Grid cards + thumbnails */
.menu-grid{ display:grid; gap:16px; grid-template-columns:repeat(2,minmax(0,1fr)) }
@media(max-width:360px){ .menu-grid{ gap:12px } }
/* Tablets and up: 4-wide */
@media(min-width:768px){ .menu-grid{ grid-template-columns:repeat(4,1fr) } }
@media(min-width:1180px){ .menu-grid{ grid-template-columns:repeat(4,1fr) } }
.menu-grid .menu-item{ display:grid; grid-template-rows:auto 1fr auto; align-items:start; gap:10px; padding:0; border:1px solid #1a1a1a; border-radius:14px; background:#121212; border-bottom:none; min-width:0; overflow:hidden }
.item-head{ display:flex; flex-direction:column; gap:8px; align-items:stretch; position:relative }
.thumb{ width:100%; aspect-ratio:1/1; height:auto; border-radius:0; object-fit:cover; border:none; background:#111; cursor:pointer; display:block }
.thumb.is-fallback{ width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; background:#000; display:block }
.item-cta{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:6px }
.menu-grid .desc{ display:none }

/* Full-bleed image inside grid cards; pad only the text and footer */
.menu-grid .menu-item .item-left{ gap:0 }
.menu-grid .menu-item .item-head .title-chip{
  position:absolute;
  left:0;
  bottom:0;
  right:0;
  padding:12px;
  background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.9) 55%, rgba(0,0,0,1));
  border-radius:0;
  font-size:12px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:#fff;
  z-index:2;
  display:flex;
  align-items:center;
  gap:8px;
}
.menu-grid .menu-item .desc{ padding:4px 12px 0 }
.menu-grid .menu-item .item-cta{ padding:10px 12px 12px }

/* Modal */
.modal{ position:fixed; inset:0; background:rgba(0,0,0,.6); backdrop-filter:blur(2px); display:none; align-items:center; justify-content:center; z-index:1000; overflow:auto; padding:24px 0 }
.modal.open{ display:flex }
.modal-card{ position:relative; width:min(92vw, 520px); background:#111; border:1px solid #1b1b1b; border-radius:16px; overflow:hidden; display:flex; flex-direction:column }
.modal-media{ position:relative; background:#0f0f0f; padding:0; overflow:hidden; border-radius:16px 16px 0 0 }
.modal-img{ width:100%; aspect-ratio:1/1; height:auto; object-fit:cover; background:#0f0f0f; display:none; margin:0 }
.modal-close{ position:absolute; top:10px; right:10px; width:36px; height:36px; border-radius:50%; border:1px solid #1c1c1c; background:rgba(0,0,0,.55); color:#eee; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; z-index:2; line-height:0; font-size:20px }
.modal-close:hover{ background:rgba(0,0,0,.7); border-color:#2a2a2a }
.modal-close:focus-visible{ outline:2px solid var(--accent-primary); outline-offset:2px }
.modal-title{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  margin:0;
  padding:14px 16px;
  font-size:14px;
  letter-spacing:1px;
  text-transform:uppercase;
  background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.9) 55%, rgba(0,0,0,1));
  color:#fff;
  z-index:1;
}
.modal-body{ padding:16px; display:grid; gap:10px; flex:1 1 auto }
.modal-desc{ color:#c9c9c9; margin:0 }
.modal-footer{ position:relative; display:flex; align-items:flex-start; gap:12px; flex-wrap:wrap; padding:20px 16px 16px; border-top:1px solid #1f1f1f; background:#101010; flex:0 0 auto }
.modal-footer-label{ position:absolute; top:-10px; left:20px; font-size:11px; letter-spacing:1px; text-transform:uppercase; color:var(--muted); background:#111; padding:0 8px }
.price-wrap{ display:flex; flex-direction:column; gap:2px; order:2; margin-left:auto; text-align:right }
.price-label{ font-size:11px; letter-spacing:1px; text-transform:uppercase; color:var(--muted) }
/* Place the order button on the left and price on the right */
.modal-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-left:0; flex:1 1 100%; order:1 }
.modal-actions .btn{ flex:1 1 150px; justify-content:center; padding:8px 14px }
.modal-footer .price{ margin-left:auto }

/* Misc */
.map{ border:0; width:100%; height:320px; border-radius:16px; filter:saturate(0.8) contrast(1.05) }
footer{ padding:60px 0 80px; color:#bdbdbd }
.tiny{ color:#8b8b8b; font-size:13px }
.muted{ color:var(--muted) }
.center{ text-align:center }
.spaced{ display:flex; align-items:center; justify-content:space-between }
.pill{ padding:6px 10px; background:#141414; border:1px solid #232323; border-radius:999px }