:root {
  /* Maison Caramelio — cream ground, light-caramel headings, deep-espresso
     accents. The site is predominantly light; caramel is reserved for
     headings and special marks, not for large fills. */
  --caramel: #ad6326;      /* light caramel — headings & special marks */
  --caramel-dark: #8a4d18;
  --caramel-light: #c27d3c;
  --gold: #a9853a;
  --gold-soft: #cfb573;
  --cream: #fdfaf3;
  --cream-2: #f7f1e4;
  --choc: #2a1a0d;         /* deep espresso — used sparingly as accent */
  --choc-2: #3c2914;
  --ink: #3d2e1e;
  --ink-soft: #837059;
  --white: #ffffff;
  --radius: 6px;
  --shadow: 0 6px 24px rgba(58, 39, 23, 0.06);
  --shadow-lg: 0 18px 44px rgba(58, 39, 23, 0.12);
  --font-head: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Jost', 'Helvetica Neue', sans-serif;
  --header-h: 0px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Branded text selection and keyboard focus, replacing the browser
   defaults (grey/blue) with the site's own caramel-gold accents. */
::selection {
  background: rgba(173, 99, 38, 0.22);
  color: var(--choc);
}

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Cross-document page transitions — a quiet crossfade between pages
   instead of the default hard cut. Purely a progressive enhancement:
   browsers without support simply keep the instant navigation they
   already have. */
@view-transition {
  navigation: auto;
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

.gold-rule {
  height: 2px;
  background: var(--gold);
}

.icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  vertical-align: -4px;
  color: currentColor;
}
.icon-xs { width: 13px; height: 13px; vertical-align: -2px; }

html { height: 100%; }
body:not(.dashboard-body) { height: 100%; overflow: hidden; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}

/* The header/tab bar are fixed chrome outside the document flow; all
   page content scrolls inside this single bounded container instead of the
   body itself. Unlike fixed-position compositing, a plain overflow:auto box
   can't "tear" and show stale content through the chrome during fast
   momentum scroll — it's clipped by ordinary CSS overflow, not a compositor
   race. See js/script.js for how --header-h is measured. */
.scroll-area {
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: rgba(169,133,58,0.5) transparent;
}
.scroll-area::-webkit-scrollbar { width: 9px; }
.scroll-area::-webkit-scrollbar-track { background: transparent; }
.scroll-area::-webkit-scrollbar-thumb {
  background: rgba(169,133,58,0.45);
  border-radius: 999px;
}
.scroll-area::-webkit-scrollbar-thumb:hover { background: rgba(169,133,58,0.7); }
@media (max-width: 760px) {
  .scroll-area { bottom: calc(62px + env(safe-area-inset-bottom)); }
}

a, button { touch-action: manipulation; }

/* Subtle paper grain for a tactile, premium feel */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2000;
  opacity: 0.025;
  mix-blend-mode: multiply;
  background-image:
    radial-gradient(#000 0.6px, transparent 0.6px),
    radial-gradient(#000 0.6px, transparent 0.6px);
  background-size: 3px 3px;
  background-position: 0 0, 1.5px 1.5px;
}

img { max-width: 100%; display: block; }

.container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

h1, h2, h3 { font-family: var(--font-head); font-weight: 600; color: var(--caramel); line-height: 1.12; letter-spacing: 0; }

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.3em;
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--gold);
  margin-bottom: 12px;
  display: block;
}
.eyebrow.center { text-align: center; }
.eyebrow-light { color: var(--gold-soft); }
.eyebrow-gold { color: var(--gold); }
h2.center { text-align: center; margin-bottom: 0; }
.section-sub {
  color: var(--ink-soft);
  max-width: 560px;
  margin: 0 auto 48px;
}
.section-sub.center { text-align: center; }

/* Divider ornament — a single hairline, as on the printed menu */
.divider {
  width: 72px;
  height: 1px;
  margin: 22px auto 30px;
  background: var(--gold);
}
.divider-left { margin: 22px 0 26px; }
.divider-gold { background: var(--gold-soft); }

/* Buttons — fully rounded pills, matching the hero rating chip. */
.btn {
  display: inline-block;
  padding: 15px 32px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.btn-primary {
  background: var(--caramel);
  color: var(--white);
  box-shadow: 0 8px 20px rgba(173, 99, 38, 0.24);
}
.btn-primary:hover { background: var(--caramel-dark); color: var(--white); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(173, 99, 38, 0.3); }
.btn-ghost {
  background: transparent;
  color: var(--caramel);
  border-color: rgba(173,99,38,0.45);
}
.btn-ghost:hover { background: rgba(173,99,38,0.06); border-color: var(--caramel); color: var(--caramel-dark); transform: translateY(-2px); }
.btn-outline {
  background: transparent;
  color: var(--ink);
  border-color: rgba(58,39,23,0.35);
}
.btn-outline:hover { border-color: var(--choc); background: var(--white); transform: translateY(-2px); }
.btn-gold {
  background: transparent;
  color: var(--gold);
  border-color: var(--gold);
}
.btn-gold:hover {
  background: var(--gold);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(169,133,58,0.3);
}
.btn:active { transform: scale(0.97); }

/* Thin gold bar across the very top of the viewport tracking scroll
   progress through the current page's .scroll-area. */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0%;
  background: var(--gold);
  z-index: 1200;
  pointer-events: none;
  transition: width 0.15s ease-out;
}

/* Hero entrance — staggered fade-up played once on load (see js/motion.js);
   each element's transition-delay is set inline for the stagger. */
[data-hero-in] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.8s cubic-bezier(.2,.6,.2,1), transform 0.8s cubic-bezier(.2,.6,.2,1);
}
[data-hero-in].hero-in-visible { opacity: 1; transform: none; }

/* Header — fixed (not sticky); WebKit's sticky compositing can tear and ghost
   stale content above it during fast momentum scroll, which a permanently-
   composited fixed layer avoids. Fully opaque on purpose: a solid layer
   can't let anything show through it. */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--cream);
  border-bottom: 1px solid rgba(58,39,23,0.06);
  transition: box-shadow 0.25s ease;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: transform;
  isolation: isolate;
}
.site-header.scrolled {
  box-shadow: 0 8px 24px rgba(58,39,23,0.08);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  gap: 20px;
}
.logo {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.75rem;
  letter-spacing: 0.01em;
  color: var(--choc);
  text-decoration: none;
  flex-shrink: 0;
}
.logo-dot { color: var(--gold); }
.nav {
  display: flex;
  gap: 26px;
  margin: 0 auto;
}
.nav a {
  position: relative;
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  transition: color 0.15s ease;
  padding-bottom: 5px;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 1px;
  background: var(--gold);
  transition: right 0.25s ease;
}
.nav a:hover { color: var(--gold); }
.nav a:hover::after, .nav a.active::after { right: 0; }
.nav a.active { color: var(--choc); font-weight: 600; }
.nav a.nav-link-highlight { color: var(--caramel-dark); font-weight: 600; }
.nav-order-link { display: none; }
.header-cta { flex-shrink: 0; padding: 11px 22px; }
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}

/* Language toggle — small EN/FR pill, visible in the header at every breakpoint */
.lang-toggle {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
  background: transparent;
  border: 1px solid rgba(58,39,23,0.18);
  border-radius: 2px;
  padding: 2px;
  margin-left: 14px;
}
.lang-btn {
  border: none;
  background: transparent;
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 5px 11px;
  border-radius: 1px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.lang-btn:hover { color: var(--caramel); }
.lang-btn.active {
  background: var(--caramel);
  color: var(--white);
}
.nav-toggle span {
  width: 24px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease, background 0.15s ease;
}
.nav-toggle:hover span { background: var(--caramel); }
.site-header.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.site-header.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Hero — light, airy, cream ground with a caramel headline */
.hero {
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: var(--ink);
}
.hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 82% 12%, rgba(207,181,115,0.2), transparent 48%),
    radial-gradient(circle at 8% 92%, rgba(173,99,38,0.08), transparent 42%),
    linear-gradient(150deg, #fdfaf3 0%, #f7efdf 55%, #f1e6d1 100%);
  z-index: -2;
}
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(173,99,38,0.1) 1px, transparent 1px);
  background-size: 30px 30px;
  opacity: 0.5;
}
.hero-inner {
  padding-top: 60px;
  padding-bottom: 76px;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 56px;
  align-items: center;
  position: relative;
  z-index: 1;
}
@media (max-width: 900px) {
  .hero-inner { grid-template-columns: minmax(0, 1fr); }
  .hero-frame { display: none; }
}

/* The one anchor photo of the hero — an arch-shaped frame that reuses the
   site's existing photo-slot language instead of a stray floating badge. */
.hero-frame {
  aspect-ratio: 0.82;
  max-width: 420px;
  margin-left: auto;
  border-radius: 50% 50% 6px 6px / 62% 62% 6px 6px;
  box-shadow: var(--shadow-lg);
}
.hero-frame::before {
  content: "";
  position: absolute;
  inset: 20px;
  border: 1px solid rgba(169,133,58,0.3);
  border-radius: 50% 50% 6px 6px / 62% 62% 6px 6px;
  pointer-events: none;
}
.hero-frame .photo-slot-label strong { font-size: 0.85rem; }
.hero-frame .photo-slot-label span { font-size: 0.76rem; }

/* Trust chip — real, current rating (see reviews.html), linked straight
   through so the claim is a click away from being verified. */
.hero-trust-row {
  margin-top: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.hero-rating {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 18px;
  background: var(--white);
  border: 1px solid rgba(169,133,58,0.35);
  border-radius: 999px;
  text-decoration: none;
  box-shadow: var(--shadow);
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.hero-rating:hover { border-color: var(--caramel); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.hero-rating-stars { color: var(--gold); font-size: 0.85rem; letter-spacing: 1px; }
.hero-rating-text { font-size: 0.82rem; color: var(--ink); font-weight: 500; }
.hero-rating-text strong { font-family: var(--font-head); font-weight: 700; color: var(--caramel-dark); font-size: 0.98rem; margin-right: 4px; }

/* Live open/closed status, computed client-side from the real opening
   hours (6:45 AM - 11:00 PM daily, see location.html) rather than
   hardcoded, so it stays accurate on its own. */
.hero-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
}
.hero-status-dot {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #4a9b5e;
  box-shadow: 0 0 0 3px rgba(74,155,94,0.18);
}
.hero-status.is-closed .hero-status-dot {
  background: #b5482f;
  box-shadow: 0 0 0 3px rgba(181,72,47,0.16);
}
.hero-status-text-closed { display: none; }
.hero-status.is-closed .hero-status-text-open { display: none; }
.hero-status.is-closed .hero-status-text-closed { display: inline; }

/* Scroll cue — a quiet nudge to keep reading, hidden once the hero no longer fills the screen */
.hero-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  width: 26px;
  height: 42px;
  border: 1.5px solid rgba(58,39,23,0.28);
  border-radius: 14px;
  display: flex;
  justify-content: center;
  padding-top: 8px;
  z-index: 2;
  transition: border-color 0.2s ease;
}
.hero-scroll-cue:hover { border-color: var(--caramel); }
.hero-scroll-cue span {
  width: 4px;
  height: 8px;
  border-radius: 2px;
  background: var(--caramel);
  animation: heroScrollDot 1.8s ease infinite;
}
@keyframes heroScrollDot {
  0% { transform: translateY(0); opacity: 1; }
  70% { transform: translateY(14px); opacity: 0; }
  100% { transform: translateY(0); opacity: 0; }
}
@media (max-width: 760px) {
  .hero-scroll-cue { display: none; }
}
.hero .eyebrow { letter-spacing: 0.34em; color: var(--gold); }
.hero h1 {
  font-size: clamp(2.7rem, 6vw, 4.8rem);
  font-weight: 600;
  color: var(--caramel);
  max-width: 760px;
}
.hero-sub {
  margin-top: 22px;
  font-size: 1.12rem;
  max-width: 540px;
  color: var(--ink-soft);
}
.hero-actions {
  margin-top: 36px;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.hero-directions {
  display: inline-block;
  margin-top: 20px;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 500;
  border-bottom: 1px solid rgba(58,39,23,0.3);
  padding-bottom: 2px;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.hero-directions:hover { color: var(--caramel); border-color: var(--caramel); }
/* A fixed 3-column grid (not flex-wrap) so all three stats always stay on
   one row — flex-wrap let the third item drop to its own line on narrow
   screens while keeping its border-left (only :first-child had it removed),
   leaving a stray divider floating next to "100%" with nothing beside it. */
.hero-stats {
  margin-top: 58px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.hero-stats > div {
  padding: 0 24px;
  border-left: 1px solid rgba(58,39,23,0.16);
}
.hero-stats > div:first-child { padding-left: 0; border-left: none; }
@media (max-width: 480px) {
  .hero-stats > div { padding: 0 10px; }
}
.hero-stats strong {
  display: block;
  font-family: var(--font-head);
  font-size: 2.1rem;
  color: var(--caramel);
}
.hero-stats span {
  font-size: 0.82rem;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

/* Sections */
section { padding: 110px 0; }
.section-alt { background: var(--cream-2); }

/* Reveal-on-scroll */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s cubic-bezier(.2,.6,.2,1), transform 0.7s cubic-bezier(.2,.6,.2,1);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* Reservation */
.reserve { background: var(--cream-2); color: var(--ink); position: relative; overflow: hidden; }
.reserve::before {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(169,133,58,0.1), transparent 70%);
  bottom: -220px;
  left: -160px;
  pointer-events: none;
}
.reserve-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 64px;
  align-items: center;
  position: relative;
}
.reserve h2 { color: var(--caramel); font-size: clamp(1.9rem, 3vw, 2.5rem); }
.reserve-info > p { color: var(--ink-soft); max-width: 460px; }
.reserve-meta { margin-top: 30px; display: flex; flex-direction: column; gap: 18px; }
.reserve-meta-row { display: flex; gap: 16px; align-items: flex-start; }
.reserve-meta-row strong { color: var(--choc); font-size: 0.92rem; }
.reserve-meta-row div { color: var(--ink-soft); font-size: 0.92rem; }
.reserve-meta-row a { color: var(--caramel-dark); font-weight: 500; text-decoration: none; }
.reserve-meta-row a:hover { text-decoration: underline; }
.reserve-meta-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid rgba(169,133,58,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--caramel);
}
.reserve-meta-icon .icon { width: 18px; height: 18px; margin: 0; vertical-align: 0; }

.reserve-card {
  position: relative;
  background: var(--white);
  border: 1px solid rgba(58,39,23,0.08);
  border-radius: var(--radius);
  padding: 38px 36px;
  box-shadow: var(--shadow-lg);
}
.reserve-card::before, .reserve-card::after {
  content: "";
  position: absolute;
  width: 26px;
  height: 26px;
  border: 1px solid var(--gold);
  transform: skewX(-13deg);
  pointer-events: none;
}
.reserve-card::before { top: -10px; left: -10px; border-right: none; border-bottom: none; }
.reserve-card::after { bottom: -10px; right: -10px; border-left: none; border-top: none; }
.form-row { margin-bottom: 18px; }
.form-row.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-bottom: 18px; }
.form-row.two-col .form-row { margin-bottom: 0; }
.reserve-card label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 7px;
}
.reserve-card .optional { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--ink-soft); opacity: 0.75; }
.reserve-card input, .reserve-card textarea, .reserve-card select {
  width: 100%;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--white);
  border: 1.5px solid rgba(58,39,23,0.14);
  border-radius: 3px;
  padding: 12px 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.reserve-card input:focus, .reserve-card textarea:focus, .reserve-card select:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(169,133,58,0.18);
}
.reserve-card textarea { resize: vertical; min-height: 64px; }
.reserve-card select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e5c4c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
  padding-right: 40px;
  cursor: pointer;
}
.booking-closed-banner[hidden] { display: none; }
.booking-closed-banner {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: rgba(179,38,30,0.08);
  border: 1.5px solid rgba(179,38,30,0.3);
  border-radius: 3px;
  padding: 14px 16px;
  margin-bottom: 18px;
  font-size: 0.88rem;
}
.booking-closed-banner strong { color: #b3261e; font-size: 0.92rem; }
.booking-closed-banner span { color: var(--ink-soft); }
.reserve-submit { width: 100%; text-align: center; margin-top: 4px; }
.reserve-submit:disabled { opacity: 0.6; cursor: not-allowed; }
.reserve-hint { margin-top: 14px; font-size: 0.8rem; color: var(--ink-soft); text-align: center; }
.reserve-hint-success { color: var(--caramel-dark); font-weight: 600; }
.reserve-hint-error { color: #b3261e; font-weight: 600; }

/* About */
.about-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 64px;
  align-items: center;
}
.about-text p { color: var(--ink-soft); margin-bottom: 16px; }
.about-text h2 { font-size: clamp(1.9rem, 3vw, 2.5rem); }
.about-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--white);
  border: 1px solid rgba(169,133,58,0.35);
  color: var(--ink);
  padding: 9px 17px;
  border-radius: 2px;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  box-shadow: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.badge:hover { transform: translateY(-2px); border-color: var(--gold); box-shadow: var(--shadow); }
.badge .icon { width: 16px; height: 16px; margin: 0; vertical-align: 0; color: var(--gold); }
.about-visual {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.visual-card {
  aspect-ratio: 1;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow);
  color: var(--caramel-dark);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.visual-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.visual-card.arch { border-radius: 50% 50% 6px 6px / 62% 62% 6px 6px; }
.visual-card .icon {
  width: 40%;
  height: 40%;
  margin: 0;
  vertical-align: 0;
  stroke-width: 1.3;
}
/* Photo placeholder frames — swap the inner markup for a real <img> once photos are supplied */
.photo-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(169,133,58,0.4);
  background: repeating-linear-gradient(135deg, rgba(169,133,58,0.04) 0 12px, rgba(169,133,58,0.08) 12px 24px);
}
.photo-slot-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px;
  text-align: center;
}
.photo-slot-label .icon { width: 26px; height: 26px; margin: 0; vertical-align: 0; opacity: 0.75; }
.photo-slot-label strong { font-size: 0.8rem; font-weight: 600; color: var(--caramel-dark); }
.photo-slot-label span { font-size: 0.72rem; font-weight: 600; color: var(--ink-soft); line-height: 1.3; }

/* Menu category filter chips — the bar stays pinned under the header while
   scrolling a long menu, so jumping between categories never needs a
   scroll-back-to-top first. */
.menu-filters-bar {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--cream);
  padding-top: 18px;
  padding-bottom: 18px;
  margin-bottom: 26px;
  border-bottom: 1px solid rgba(58,39,23,0.08);
}
.menu-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0;
}
.filter-chip {
  flex: 0 0 auto;
  background: transparent;
  border: 1px solid rgba(58,39,23,0.22);
  color: var(--ink-soft);
  padding: 10px 20px;
  border-radius: 2px;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.filter-chip:hover { border-color: var(--gold); color: var(--choc); transform: translateY(-2px); }
.filter-chip.active {
  background: var(--caramel);
  border-color: var(--caramel);
  color: var(--white);
  box-shadow: 0 8px 18px rgba(173,99,38,0.25);
}
[data-category].is-hidden,
[data-filter-group].is-hidden,
[data-filter-section].is-hidden {
  display: none !important;
}
.menu-empty-state {
  text-align: center;
  color: var(--ink-soft);
  padding: 12px 24px 80px;
}

/* One cover photo per menu category — not one per dish. Every category now
   gets the same full-width banner treatment (see below), so each section
   has room to breathe instead of being squeezed into a narrow column. */
.menu-category-cover {
  position: relative;
  overflow: hidden;
  align-items: flex-start;
  padding-top: 16px;
  border: none;
  background: linear-gradient(155deg, #ece2cc 0%, #c8a76b 55%, #85683a 100%);
}
/* Each category gets its own color mood instead of one identical gradient everywhere */
.menu-category-cover[data-theme="breakfast"], .highlight-card-photo[data-theme="breakfast"] { background: linear-gradient(155deg, #ece2cc 0%, #c8a76b 55%, #85683a 100%); }
.menu-category-cover[data-theme="lunch"], .highlight-card-photo[data-theme="lunch"] { background: linear-gradient(155deg, #e9dcc4 0%, #bd8b55 55%, #74471f 100%); }
.menu-category-cover[data-theme="snacks"], .highlight-card-photo[data-theme="snacks"] { background: linear-gradient(155deg, #e8d9cd 0%, #b58165 55%, #6e4230 100%); }
.menu-category-cover[data-theme="drinks"], .highlight-card-photo[data-theme="drinks"] { background: linear-gradient(155deg, #eee7d2 0%, #ccb279 55%, #8f7434 100%); }
.menu-category-cover[data-theme="extras"], .highlight-card-photo[data-theme="extras"] { background: linear-gradient(155deg, #e9e4d9 0%, #b3a78c 55%, #6c614d 100%); }
.menu-category-cover[data-theme="dinner"], .highlight-card-photo[data-theme="dinner"] { background: linear-gradient(155deg, #dccbb0 0%, #8a6a41 55%, #2d2011 100%); }
.menu-category-cover[data-theme="desserts"], .highlight-card-photo[data-theme="desserts"] { background: linear-gradient(155deg, #ecdcda 0%, #bb8d8d 55%, #63393f 100%); }

section[data-theme="breakfast"] { background: #f4efe3; }

/* Every category is its own full-width "menu card" — a white panel with a
   hairline border and soft shadow, stacked one below another rather than
   squeezed side by side, so a category with many items (Drinks, 64) never
   feels cramped next to a short one (Snacks, 8). */
.menu-panel {
  max-width: 840px;
  margin: 0 auto;
  background: var(--white);
  border: 1px solid rgba(58,39,23,0.08);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px 32px 32px;
}
.menu-category-cover .photo-slot-label {
  flex-direction: row;
  gap: 8px;
  background: rgba(250,243,230,0.6);
  border-radius: 999px;
  padding: 8px 16px;
  box-shadow: 0 2px 10px rgba(58,39,23,0.1);
}
.menu-category-cover .photo-slot-label .icon {
  width: 18px;
  height: 18px;
  opacity: 0.65;
}
.menu-category-cover .photo-slot-label span {
  font-size: 0.68rem;
}
.menu-category-cover {
  aspect-ratio: 21 / 6;
  border-radius: var(--radius);
  margin-bottom: 28px;
}
@media (max-width: 700px) {
  .menu-category-cover { aspect-ratio: 16 / 9; }
}

/* Text overlay on each category cover: title, timing, dish count */
.menu-category-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 6px;
  padding: 18px 20px;
  background: linear-gradient(180deg, rgba(58,39,23,0) 40%, rgba(58,39,23,0.72) 100%);
  pointer-events: none;
}
.menu-category-time {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(250,243,230,0.16);
  border: 1px solid rgba(250,243,230,0.4);
  color: var(--cream);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 4px 11px;
  border-radius: 999px;
}
.menu-category-time .icon { color: var(--gold-soft); }
.menu-category-overlay-title {
  color: var(--cream);
  font-size: 1.3rem;
  line-height: 1.1;
  text-shadow: 0 3px 14px rgba(0,0,0,0.4);
}
.menu-category-count {
  color: rgba(250,243,230,0.88);
  font-size: 0.8rem;
  font-weight: 600;
}
@media (max-width: 700px) {
  .menu-category-overlay-title { font-size: 1.15rem; }
}
/* Fine-dining "leader dot" row: the dish name gets a dotted rule that runs
   the rest of the line up to the price, exactly like a printed menu —
   achieved purely with CSS (a border-bottom on the flexed name span), so no
   markup changes were needed per dish. */
.dish-list li {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  padding: 14px 2px;
  border-radius: 4px;
  transition: background 0.15s ease;
  font-size: 0.92rem;
  color: var(--ink);
}
.dish-list li:not(:last-child) { border-bottom: 1px solid rgba(58,39,23,0.06); }
@media (hover: hover) {
  .dish-list li:hover { background: rgba(169,133,58,0.05); }
}
.dish-list li > span:first-of-type {
  flex: 1 1 auto;
  min-width: 40px;
  border-bottom: 1px dotted rgba(58,39,23,0.4);
  padding-bottom: 5px;
  font-family: var(--font-head);
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.25;
}
.dish-list em {
  padding-bottom: 5px;
}
.dish-desc {
  flex-basis: 100%;
  margin: 3px 0 0;
  font-size: 0.82rem;
  font-style: italic;
  color: var(--ink-soft);
  line-height: 1.55;
}
.dish-subhead {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 22px 0 4px;
  padding-top: 14px;
  border-top: 1px solid rgba(58,39,23,0.12);
}
.dish-subhead:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.dish-badge {
  display: inline-block;
  vertical-align: middle;
  margin-left: 6px;
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--gold);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 2px;
}

/* Home hub — light editorial cards linking to each page. Kept on the cream
   ground with hairline borders and a caramel heading, so the page stays
   predominantly light and caramel reads as an accent, not a fill. */
.hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 26px;
}
.hub-card {
  position: relative;
  display: block;
  background: var(--white);
  border-radius: var(--radius);
  padding: 40px 32px 34px;
  box-shadow: var(--shadow);
  text-decoration: none;
  color: var(--ink);
  border: 1px solid rgba(58,39,23,0.1);
  overflow: hidden;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.hub-card-index {
  position: absolute;
  top: 10px;
  right: 22px;
  font-family: var(--font-head);
  font-size: 2.8rem;
  font-weight: 700;
  color: rgba(173,99,38,0.14);
  line-height: 1;
  pointer-events: none;
}
.hub-card::before, .hub-card::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  border: 1px solid var(--gold);
  opacity: 0;
  transform: skewX(-13deg);
  transition: opacity 0.3s ease, width 0.3s ease, height 0.3s ease;
  pointer-events: none;
}
.hub-card::before { top: 8px; left: 8px; border-right: none; border-bottom: none; }
.hub-card::after { bottom: 8px; right: 8px; border-left: none; border-top: none; }
.hub-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(169,133,58,0.5);
}
.hub-card:hover::before, .hub-card:hover::after { opacity: 0.9; width: 26px; height: 26px; }
.hub-card-icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--cream-2);
  border: 1px solid rgba(169,133,58,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--caramel);
  margin-bottom: 22px;
  transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
}
.hub-card:hover .hub-card-icon { transform: scale(1.06); background: var(--caramel); color: var(--white); }
.hub-card-icon .icon { width: 24px; height: 24px; margin: 0; vertical-align: 0; }
.hub-card h3 { color: var(--caramel); font-size: 1.3rem; margin-bottom: 6px; }
.hub-card-divider { width: 30px; height: 1px; background: var(--gold); margin-bottom: 14px; }
.hub-card p { color: var(--ink-soft); font-size: 0.9rem; margin-bottom: 18px; }
.hub-card-link {
  color: var(--caramel-dark);
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap 0.2s ease, color 0.2s ease;
}
.hub-card:hover .hub-card-link { gap: 10px; color: var(--caramel); }

/* Home — menu highlights teaser */
.highlights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 22px;
  margin-top: 12px;
}
.highlight-card {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--white);
  border: 1px solid rgba(58,39,23,0.08);
  box-shadow: var(--shadow);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.highlight-card:hover { transform: translateY(-6px); border-color: rgba(169,133,58,0.5); box-shadow: var(--shadow-lg); }
.highlight-card-photo { position: relative; aspect-ratio: 4 / 3; }
.highlight-card-body { padding: 16px 18px 20px; text-align: center; }
.highlight-card-body h3 { font-size: 1.05rem; margin: 0; }
.highlights-cta { text-align: center; margin-top: 40px; }

/* Home — final reserve CTA banner, light with a caramel headline */
.home-cta { background: var(--cream-2); color: var(--ink); position: relative; overflow: hidden; text-align: center; }
.home-cta-glow {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(169,133,58,0.1), transparent 70%);
  top: -220px;
  right: -160px;
  pointer-events: none;
}
.home-cta-inner { position: relative; max-width: 640px; margin: 0 auto; }
.home-cta h2 { color: var(--caramel); font-size: clamp(1.9rem, 3vw, 2.6rem); margin-top: 4px; }
.home-cta-inner > p:not(.eyebrow) { color: var(--ink-soft); margin: 16px auto 30px; max-width: 480px; }
.home-cta-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* Page header — compact intro banner used on every inner page */
.page-header { padding: 64px 0 40px; text-align: center; }
.page-header h1 { font-size: clamp(2rem, 4vw, 3rem); }
.page-header p { color: var(--ink-soft); max-width: 560px; margin: 14px auto 0; }

/* Gallery */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px;
}
.gallery-item {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
}
.dish-list li small { color: var(--ink-soft); }
.dish-list em {
  font-style: normal;
  font-family: var(--font-head);
  color: var(--caramel-dark);
  font-weight: 600;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Bakery */
.bakery { background: var(--cream-2); color: var(--ink); position: relative; overflow: hidden; }
.bakery::before {
  content: "";
  position: absolute;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(169,133,58,0.1), transparent 70%);
  top: -180px;
  right: -140px;
  pointer-events: none;
}
.bakery-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 64px;
  align-items: center;
  position: relative;
}
.bakery h2 { color: var(--caramel); font-size: clamp(1.9rem, 3vw, 2.5rem); }
.bakery-text p { color: var(--ink-soft); margin-bottom: 20px; }
.check-list { margin-bottom: 30px; }
.check-list li {
  list-style: none;
  padding: 10px 0 10px 30px;
  position: relative;
  color: var(--ink);
  font-size: 0.95rem;
  border-bottom: 1px solid rgba(58,39,23,0.1);
}
.check-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--gold);
  font-weight: 700;
}
.bakery-visual {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.bakery-visual .visual-card:nth-child(2) { margin-top: 24px; }
.bakery .photo-slot {
  border-color: rgba(207,181,115,0.4);
  background: repeating-linear-gradient(135deg, rgba(207,181,115,0.05) 0 10px, rgba(207,181,115,0.1) 10px 20px);
}
.bakery .photo-slot-label strong { color: var(--caramel-dark); }
.bakery .photo-slot-label span { color: var(--ink-soft); }

/* Reviews */
.ratings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 20px;
  max-width: 760px;
  margin: 0 auto 20px;
}
.rating-card {
  display: block;
  text-align: center;
  background: var(--white);
  border: 1px solid rgba(169,133,58,0.3);
  border-radius: var(--radius);
  padding: 28px 20px;
  box-shadow: var(--shadow);
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.rating-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.rating-card-icon { width: 40px; height: 40px; margin: 0 auto 12px; display: block; border-radius: 9px; object-fit: cover; }
.rating-card-platform {
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  margin-bottom: 10px;
}
.rating-card-score { font-family: var(--font-head); font-size: 2rem; font-weight: 700; color: var(--choc); line-height: 1; }
.rating-card-stars { color: var(--gold); font-size: 1.05rem; letter-spacing: 2px; margin-top: 6px; }
.rating-card-caption { color: var(--ink-soft); font-size: 0.82rem; margin-top: 6px; }
.rating-card-link {
  display: inline-block;
  margin-top: 14px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--caramel-dark);
}

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}
.review-card {
  position: relative;
  background: var(--white);
  border: 1px solid rgba(58,39,23,0.08);
  border-radius: var(--radius);
  padding: 34px 30px 28px;
  box-shadow: var(--shadow);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.review-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.quote-icon { width: 30px; height: 30px; color: var(--gold-soft); margin-bottom: 8px; }
.review-stars { color: var(--gold); letter-spacing: 3px; font-size: 0.9rem; margin-bottom: 14px; }
.review-card p {
  font-family: var(--font-head);
  font-style: italic;
  font-weight: 500;
  font-size: 1.1rem;
  color: var(--ink);
  margin-bottom: 16px;
}
.review-card footer { color: var(--caramel-dark); font-weight: 600; font-size: 0.85rem; }

/* Location */
.location-inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 50px;
  align-items: stretch;
}
.location h2 { font-size: clamp(1.9rem, 3vw, 2.5rem); }
.info-rows { margin: 26px 0 30px; display: flex; flex-direction: column; gap: 20px; }
.info-row { display: flex; gap: 16px; align-items: flex-start; }
a[href^="tel:"] { white-space: nowrap; }
.info-icon {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--cream-2);
  border: 1px solid rgba(169,133,58,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--caramel-dark);
}
.info-icon .icon { width: 20px; height: 20px; margin: 0; vertical-align: 0; }
.info-row a { color: var(--caramel-dark); text-decoration: none; font-weight: 500; }
.info-row a:hover { text-decoration: underline; }
.order-links { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 24px; }
.social-links { display: flex; gap: 20px; }
.social-links a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.92rem;
}
.social-links a:hover { color: var(--caramel); }
.social-links .icon { margin: 0; vertical-align: 0; }
.location-map {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  min-height: 340px;
  border: 4px solid var(--white);
}
.location-map iframe { width: 100%; height: 100%; min-height: 340px; border: 0; }

/* WhatsApp floating button */
.whatsapp-float {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 26px rgba(37,211,102,0.45);
  z-index: 500;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px) scale(0.9);
  transition: transform 0.25s ease, box-shadow 0.2s ease, opacity 0.25s ease;
}
.whatsapp-float.visible { opacity: 1; pointer-events: auto; transform: none; }
.whatsapp-float svg { width: 28px; height: 28px; }
.whatsapp-float:hover { transform: translateY(-4px) scale(1.05); box-shadow: 0 14px 30px rgba(37,211,102,0.55); }

/* App-style bottom tab bar (mobile only) */
.app-tabbar { display: none; }

/* Footer */
.site-footer {
  background: var(--cream-2);
  color: var(--ink-soft);
  padding: 64px 0 0;
  border-top: 1px solid rgba(58,39,23,0.08);
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  padding-bottom: 46px;
  border-bottom: 1px solid rgba(58,39,23,0.1);
}
.footer-col h4 {
  font-family: var(--font-body);
  color: var(--caramel);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 16px;
}
.footer-col a {
  display: block;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.92rem;
  margin-bottom: 12px;
  transition: color 0.15s ease;
}
.footer-col a:hover { color: var(--caramel); }
.footer-brand {
  font-family: var(--font-head);
  font-size: 1.6rem;
  color: var(--caramel);
  margin-bottom: 14px;
}
.footer-tagline { font-size: 0.92rem; max-width: 320px; margin-bottom: 20px; color: var(--ink-soft); }
.footer-social { gap: 18px; }
.footer-social a { display: inline-block; margin-bottom: 0; }
.footer-bottom {
  padding: 22px 24px;
  text-align: center;
  font-size: 0.85rem;
  opacity: 0.6;
}

/* Responsive */
@media (max-width: 900px) {
  .about-inner, .bakery-inner, .location-inner, .reserve-inner { grid-template-columns: minmax(0, 1fr); }
  .bakery-visual { order: -1; max-width: 360px; margin: 0 auto; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-brand-col { grid-column: 1 / -1; }

  /* Desktop nav + gold CTA no longer fit the header at tablet widths — switch to the hamburger menu here too */
  .nav { display: none; }
  .header-cta { display: none; }
  .nav-toggle { display: flex; }
  .nav-order-link { display: block; margin-top: 8px; }
  .site-header.nav-open .nav {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--cream);
    padding: 20px 24px;
    gap: 16px;
    box-shadow: var(--shadow-lg);
    animation: navSlide 0.25s ease;
  }
  @keyframes navSlide {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: none; }
  }
}

@media (max-width: 520px) {
  .form-row.two-col { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  section { padding: 68px 0; }
  .hero { min-height: auto; padding: 44px 0; }
  .hero-stats { gap: 0; }
  .hero-arch { display: none; }
  .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }

  /* The bottom app tab bar is the primary nav on true mobile widths, so the
     top hamburger (still needed at tablet widths, where there's no tab bar)
     is redundant here and removed for a cleaner app-like header. */
  .nav-toggle { display: none; }
  .lang-toggle { margin-left: auto; }

  /* The tab bar no longer includes a Chat item, so the floating WhatsApp
     button stays as the mobile quick-action — just lifted clear of the
     fixed tab bar instead of sitting behind it. */
  .whatsapp-float { bottom: calc(62px + 14px + env(safe-area-inset-bottom)); }
  .app-tabbar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    background: var(--cream);
    border-top: 1px solid rgba(58,39,23,0.08);
    box-shadow: 0 -8px 24px rgba(58,39,23,0.07);
    padding: 7px 6px calc(7px + env(safe-area-inset-bottom));
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    isolation: isolate;
    will-change: transform;
  }
  .tab-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    text-decoration: none;
    color: var(--ink-soft);
    font-size: 0.65rem;
    font-weight: 600;
    padding: 6px 2px;
    border-radius: 12px;
    transition: color 0.15s ease, background 0.15s ease;
  }
  .tab-item .icon { width: 21px; height: 21px; margin: 0; vertical-align: 0; }
  .tab-item:not(.active):hover { color: var(--caramel); background: rgba(169,133,58,0.06); }
  .tab-item.active { color: var(--choc); background: rgba(169,133,58,0.12); }

  /* Swipeable card carousels, app-style */
  .menu-filters-bar { padding-top: 14px; padding-bottom: 14px; margin-bottom: 20px; }
  .menu-filters {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -24px;
    padding: 0 24px;
  }
  .menu-filters::-webkit-scrollbar { display: none; }

  .reviews-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 16px;
    padding-bottom: 6px;
    margin: 0 -24px;
    padding-left: 24px;
    padding-right: 24px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .reviews-grid::-webkit-scrollbar { display: none; }
  .reviews-grid .review-card { flex: 0 0 82%; scroll-snap-align: start; }

  .gallery-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 16px;
    padding-bottom: 6px;
    margin: 0 -24px;
    padding-left: 24px;
    padding-right: 24px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .gallery-grid::-webkit-scrollbar { display: none; }
  .gallery-item { flex: 0 0 78%; scroll-snap-align: start; aspect-ratio: 4 / 3; }

  .hub-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 16px;
    margin: 0 -24px;
    padding: 4px 24px 14px;
  }
  .hub-grid::-webkit-scrollbar { display: none; }
  .hub-card { flex: 0 0 82%; scroll-snap-align: start; }
}

/* Reservations dashboard */
.dashboard-body { min-height: 100vh; display: flex; flex-direction: column; }
.dash-header {
  background: var(--white);
  border-bottom: 1px solid rgba(58,39,23,0.1);
}
.dash-header-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dash-logo {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--caramel);
}
.dash-logo small {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  margin-left: 8px;
  vertical-align: middle;
}
.dash-logout {
  background: none;
  border: 1px solid rgba(58,39,23,0.25);
  color: var(--ink);
  padding: 8px 16px;
  border-radius: 2px;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.dash-logout:hover { background: var(--cream-2); border-color: var(--caramel); }

.dash-main { flex: 1; background: var(--cream); padding: 48px 24px; }

.dash-login { display: flex; justify-content: center; padding-top: 40px; }
.dash-login[hidden] { display: none; }
.dash-login-card {
  width: 100%;
  max-width: 360px;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 36px 32px;
  text-align: center;
}
.dash-login-card h1 { font-size: 1.6rem; margin-bottom: 8px; }
.dash-login-card p { color: var(--ink-soft); font-size: 0.9rem; margin-bottom: 20px; }
.dash-login-card input {
  width: 100%;
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 12px 14px;
  border: 1.5px solid rgba(58,39,23,0.14);
  border-radius: 3px;
  margin-bottom: 16px;
}
.dash-login-card input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(169,133,58,0.18); }
.dash-login-card .btn { width: 100%; }
.dash-login-error { color: #b3261e; font-size: 0.85rem; margin-top: 14px; min-height: 1.2em; }

.dash-content { max-width: 900px; margin: 0 auto; }

/* Booking availability toggle */
.dash-availability {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 22px;
  margin-bottom: 20px;
  border-left: 3px solid var(--caramel);
  transition: border-color 0.2s ease;
}
.dash-availability.is-closed { border-left-color: #b3261e; }
.dash-availability-row { display: flex; align-items: center; gap: 14px; }
.dash-toggle { position: relative; flex-shrink: 0; cursor: pointer; }
.dash-toggle input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.dash-toggle-track {
  display: block;
  width: 46px;
  height: 26px;
  border-radius: 999px;
  background: #b3261e;
  transition: background 0.2s ease;
}
.dash-toggle-thumb {
  display: block;
  width: 20px;
  height: 20px;
  margin: 3px;
  border-radius: 50%;
  background: var(--white);
  transition: transform 0.2s ease;
}
.dash-toggle input:checked ~ .dash-toggle-track { background: #2e7d4f; }
.dash-toggle input:checked ~ .dash-toggle-track .dash-toggle-thumb { transform: translateX(20px); }
.dash-toggle input:focus-visible ~ .dash-toggle-track { box-shadow: 0 0 0 3px rgba(169,133,58,0.35); }
.dash-availability-text { display: flex; flex-direction: column; gap: 2px; }
.dash-availability-text strong { font-family: var(--font-head); font-size: 1.02rem; color: var(--choc); }
.dash-availability-text span { font-size: 0.84rem; color: var(--ink-soft); }
.dash-availability-reason { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.dash-availability-reason input {
  flex: 1;
  min-width: 200px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  padding: 10px 14px;
  border: 1.5px solid rgba(58,39,23,0.14);
  border-radius: 3px;
}
.dash-availability-reason input:focus { outline: none; border-color: var(--gold); }
.dash-availability-saved { font-size: 0.78rem; color: var(--caramel-dark); font-weight: 600; margin-top: 8px; min-height: 1.1em; }

/* Today's summary stat tiles */
.dash-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; }
.dash-stat-tile {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 20px;
  text-align: center;
}
.dash-stat-value { display: block; font-family: var(--font-head); font-size: 2rem; font-weight: 700; color: var(--caramel-dark); line-height: 1; }
.dash-stat-label { display: block; margin-top: 6px; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); }

.dash-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.dash-today-toggle { display: flex; align-items: center; gap: 7px; font-size: 0.88rem; color: var(--ink-soft); cursor: pointer; white-space: nowrap; }
.dash-today-toggle input { accent-color: var(--caramel); width: 16px; height: 16px; cursor: pointer; }
.dash-filter {
  flex: 1;
  min-width: 200px;
  font-family: var(--font-body);
  font-size: 0.92rem;
  padding: 11px 16px;
  border: 1.5px solid rgba(58,39,23,0.14);
  border-radius: 999px;
  background: var(--white);
}
.dash-filter:focus { outline: none; border-color: var(--gold); }
.dash-status { color: var(--ink-soft); font-size: 0.85rem; margin-bottom: 20px; }

.dash-list { display: flex; flex-direction: column; gap: 14px; }
.dash-empty { color: var(--ink-soft); text-align: center; padding: 40px 0; }
.dash-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px 24px;
  border-left: 3px solid var(--gold);
}
.dash-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.dash-card-head strong { font-family: var(--font-head); font-size: 1.15rem; color: var(--choc); }
.dash-card-guests { color: var(--caramel-dark); font-weight: 600; font-size: 0.85rem; white-space: nowrap; }
.dash-card-meta { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 6px; font-size: 0.9rem; color: var(--ink-soft); }
.dash-card-meta a { color: var(--caramel-dark); text-decoration: none; font-weight: 500; }
.dash-card-meta a:hover { text-decoration: underline; }
.dash-card-notes { margin-top: 10px; font-size: 0.88rem; color: var(--ink); background: var(--cream-2); border-radius: 8px; padding: 10px 12px; }
.dash-card-submitted { display: block; margin-top: 10px; font-size: 0.76rem; color: var(--ink-soft); opacity: 0.8; }

@media (max-width: 520px) {
  .dash-card-head { flex-direction: column; gap: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, [data-hero-in] { opacity: 1; transform: none; transition: none; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}