/* ═══════════════════════════════════════════════════════════════
   THE CELLAR — app.css  v3.1
   A premium, warm, typographic restaurant design system.
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   § 00  DARK MODE THEME — Complete site-wide coverage
   ───────────────────────────────────────────────────────────── */

[data-theme="dark"] {
  --ink-900 : #F5EFE6;
  --ink-700 : #E8DFD3;
  --ink-500 : #B0A395;
  --ink-300 : #7A6E62;
  --ink-100 : #3A322A;

  --bg-base  : #121010;
  --bg-soft  : #1A1614;
  --bg-card  : #1E1A17;
  --bg-dark  : #0A0908;
  --bg-dark2 : #0E0C0A;

  --gold-lt  : #3D1A24;

  --border   : #2C2520;
  --border-dk: rgba(255,255,255,0.08);

  --sh-xs: 0 1px 2px rgba(0,0,0,.2);
  --sh-sm: 0 1px 3px rgba(0,0,0,.2), 0 4px 12px rgba(0,0,0,.25);
  --sh-md: 0 2px 6px rgba(0,0,0,.2), 0 8px 32px rgba(0,0,0,.3);
  --sh-lg: 0 4px 12px rgba(0,0,0,.2), 0 20px 60px rgba(0,0,0,.35);
  --sh-xl: 0 8px 20px rgba(0,0,0,.2), 0 32px 80px rgba(0,0,0,.4);

  color-scheme: dark;
}

/* ── Base ── */
[data-theme="dark"] body {
  background: var(--bg-base);
  color     : var(--ink-500);
}

[data-theme="dark"] img { opacity: 0.9; }

/* ── Navigation ── */
[data-theme="dark"] .topbar {
  background: var(--bg-dark);
  border-color: var(--border);
}

[data-theme="dark"] .nav {
  background: rgba(18,16,16,0.92);
  backdrop-filter: blur(28px) saturate(1.2);
}
[data-theme="dark"] .nav.--scrolled {
  background: rgba(18,16,16,0.98);
  border-color: var(--border);
  box-shadow: 0 2px 24px rgba(0,0,0,.3);
}

[data-theme="dark"] .nav__toggle {
  border-color: var(--border);
}
[data-theme="dark"] .nav__toggle span {
  background: var(--ink-500);
}

[data-theme="dark"] .nav__drawer {
  background: var(--bg-dark);
}
[data-theme="dark"] .nav__drawer-head {
  background: var(--bg-dark);
  border-color: var(--border);
}
[data-theme="dark"] .nav__drawer .nav__link {
  color: var(--ink-500);
  border-color: var(--border);
}
[data-theme="dark"] .nav__drawer .nav__link:hover { color: var(--gold); }
[data-theme="dark"] .nav__drawer .nav__cta { border-color: var(--border); }

[data-theme="dark"] .nav__backdrop {
  background: rgba(0,0,0,.7);
}

[data-theme="dark"] .nav__cart:hover {
  background: var(--bg-soft);
}

/* ── Menu nav tabs ── */
[data-theme="dark"] .menu-nav {
  background: var(--bg-base);
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
  border-color: var(--border);
}
[data-theme="dark"] .menu-tab {
  border-color: var(--border);
  color: var(--ink-300);
}
[data-theme="dark"] .menu-tab:hover {
  background: var(--bg-soft);
  color: var(--ink-700);
  border-color: var(--ink-300);
}
[data-theme="dark"] .menu-tab[aria-selected="true"] {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
}

/* ── Cards ── */
[data-theme="dark"] .card {
  background: var(--bg-card);
  border-color: var(--border);
}
[data-theme="dark"] .card:hover {
  box-shadow: 0 16px 48px rgba(0,0,0,.3);
  border-color: rgba(226,76,110,.25);
}
[data-theme="dark"] .card__img-wrap {
  background: var(--bg-soft);
}

/* ── Menu items ── */
[data-theme="dark"] .menu-item {
  background: var(--bg-card);
  border-color: var(--border);
}
[data-theme="dark"] .menu-item:hover {
  border-color: rgba(226,76,110,.25);
  box-shadow: var(--sh-md);
}
[data-theme="dark"] .menu-item__img-wrap {
  background: var(--bg-soft);
}

/* ── Spotlight ── */
[data-theme="dark"] .spotlight {
  background: var(--bg-card);
  border-color: var(--border);
}

/* ── Info strip ── */
[data-theme="dark"] .infostrip {
  background: var(--bg-card);
  border-color: var(--border);
}
[data-theme="dark"] .infostrip__icon {
  background: linear-gradient(135deg, var(--gold-lt), var(--bg-soft));
}

/* ── Stats ── */
[data-theme="dark"] .stat__num {
  color: var(--ink-700);
}

/* ── Testimonials ── */
[data-theme="dark"] .testimonial {
  background: var(--bg-card);
  border-color: var(--border);
}
[data-theme="dark"] .testimonial:hover {
  box-shadow: 0 12px 36px rgba(0,0,0,.25);
  border-color: rgba(226,76,110,.25);
}
[data-theme="dark"] .testimonial__avatar {
  background: var(--gold-lt);
}

/* ── Sections with bg-soft ── */
[data-theme="dark"] .bg-soft {
  background: var(--bg-soft);
}
[data-theme="dark"] .section.bg-soft,
[data-theme="dark"] .section--sm.bg-soft {
  background: linear-gradient(180deg, var(--bg-soft) 0%, var(--bg-base) 100%);
}

/* ── CTA band ── */
[data-theme="dark"] .cta-band {
  background: linear-gradient(135deg, #0E0C0A, #1A1614);
}

/* ── Subscribe section ── */
[data-theme="dark"] .subscribe-section {
  background: linear-gradient(180deg, var(--bg-base), var(--bg-soft));
}
[data-theme="dark"] .subscribe-card {
  background: var(--bg-card);
  border-color: var(--border);
}
[data-theme="dark"] .subscribe-card__icon {
  background: var(--gold-lt);
}

/* ── Forms ── */
[data-theme="dark"] .form-input,
[data-theme="dark"] .form-select,
[data-theme="dark"] .form-textarea {
  background: var(--bg-soft);
  border-color: var(--border);
  color: var(--ink-700);
}
[data-theme="dark"] .form-input::placeholder,
[data-theme="dark"] .form-textarea::placeholder {
  color: var(--ink-300);
}
[data-theme="dark"] .form-input:focus,
[data-theme="dark"] .form-select:focus,
[data-theme="dark"] .form-textarea:focus {
  background: var(--bg-card);
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(226,76,110,.15);
}
[data-theme="dark"] .form-label {
  color: var(--ink-500);
}
[data-theme="dark"] .form-notice--ok {
  background: rgba(31,166,81,.12);
  color: #4ade80;
  border-color: rgba(31,166,81,.25);
}
[data-theme="dark"] .form-notice--err {
  background: rgba(192,57,43,.12);
  color: #f87171;
  border-color: rgba(192,57,43,.25);
}

/* ── Info panel ── */
[data-theme="dark"] .info-panel {
  background: var(--bg-card);
  border-color: var(--border);
}
[data-theme="dark"] .info-row {
  border-color: var(--border);
}

/* ── Buttons ── */
[data-theme="dark"] .btn--outline {
  color: var(--ink-500);
  border-color: var(--border);
}
[data-theme="dark"] .btn--outline:hover {
  background: var(--bg-soft);
  border-color: var(--ink-300);
  color: var(--ink-700);
}
[data-theme="dark"] .btn--ghost {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.15);
}
[data-theme="dark"] .btn--ghost:hover {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.4);
}

/* ── Badges ── */
[data-theme="dark"] .badge {
  background: var(--bg-soft);
  border-color: var(--border);
  color: var(--ink-500);
}
[data-theme="dark"] .badge--gold {
  background: var(--gold-lt);
  color: var(--gold);
  border-color: rgba(226,76,110,.3);
}

/* ── FAQ accordion ── */
[data-theme="dark"] .faq-trigger {
  color: var(--ink-700);
}
[data-theme="dark"] .faq-item {
  border-color: var(--border);
}
[data-theme="dark"] .faq-trigger__icon {
  border-color: var(--border);
  color: var(--ink-300);
}
[data-theme="dark"] .faq-group__title {
  border-color: var(--border);
}

/* ── Gallery ── */
[data-theme="dark"] .gallery-filter {
  border-color: var(--border);
  color: var(--ink-300);
}
[data-theme="dark"] .gallery-filter:hover {
  background: var(--bg-soft);
  border-color: var(--ink-300);
  color: var(--ink-700);
}
[data-theme="dark"] .gallery-filter[aria-pressed="true"] {
  background: var(--ink-700);
  border-color: var(--ink-700);
  color: #fff;
}

/* ── Slider controls ── */
[data-theme="dark"] .slider-dot {
  background: var(--border);
}
[data-theme="dark"] .slider-btn {
  border-color: var(--border);
  color: var(--ink-300);
}
[data-theme="dark"] .slider-btn:hover {
  background: var(--bg-soft);
  border-color: var(--ink-300);
  color: var(--ink-700);
}

/* ── Catering cards ── */
[data-theme="dark"] .catering-card {
  background: var(--bg-card);
  border-color: var(--border);
}
[data-theme="dark"] .catering-card:hover {
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
  border-color: rgba(226,76,110,.3);
}
[data-theme="dark"] .catering-card__icon {
  background: var(--gold-lt);
}
[data-theme="dark"] .catering-card ul li {
  border-color: var(--border);
}

/* ── Cart drawer ── */
[data-theme="dark"] .cart-drawer {
  background: var(--bg-card);
}
[data-theme="dark"] .cart-drawer__head {
  border-color: var(--border);
}
[data-theme="dark"] .cart-drawer__foot {
  background: var(--bg-base);
  border-color: var(--border);
}
[data-theme="dark"] .cart-close {
  border-color: var(--border);
}
[data-theme="dark"] .cart-close:hover {
  background: var(--bg-soft);
}
[data-theme="dark"] .cart-item {
  border-color: var(--border);
}
[data-theme="dark"] .qty-btn {
  border-color: var(--border);
}
[data-theme="dark"] .cart-checkout .form-input {
  background: var(--bg-soft);
  border-color: var(--border);
  color: var(--ink-700);
}
[data-theme="dark"] .cart-success__icon {
  background: var(--gold-lt);
}

/* ── Mobile CTA bar ── */
[data-theme="dark"] .mobile-cta {
  background: rgba(18,16,16,0.95);
  backdrop-filter: blur(16px);
  border-color: var(--border);
  box-shadow: 0 -2px 16px rgba(0,0,0,.3);
}

/* ── Footer (already dark, ensure consistency) ── */
[data-theme="dark"] .footer {
  background: var(--bg-dark);
}

/* ── Language switcher ── */
[data-theme="dark"] .lang-switch__btn {
  background: rgba(255,255,255,0.06);
  border-color: var(--border);
  color: var(--ink-300);
}
[data-theme="dark"] .lang-switch__btn:hover {
  background: var(--gold-lt);
  border-color: var(--gold);
  color: var(--gold);
}
[data-theme="dark"] .lang-switch__current {
  color: var(--ink-500);
}
[data-theme="dark"] .topbar .lang-switch__btn {
  background: rgba(255,255,255,0.06);
  border-color: var(--border);
  color: var(--ink-300);
}

/* ── Nav drawer close button ── */
[data-theme="dark"] .nav__drawer-close {
  border-color: var(--border);
  color: var(--ink-300);
}
[data-theme="dark"] .nav__drawer-close:hover {
  background: var(--gold-lt);
}

/* ── Scrollbar ── */
[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--bg-base); }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(226,76,110,.35); }

/* ── Selection ── */
[data-theme="dark"] ::selection {
  background: rgba(226,76,110,.3);
  color: var(--ink-700);
}

/* ── Menu section header ── */
[data-theme="dark"] .menu-section-head {
  border-color: var(--border);
}

/* ── Lightbox ── */
[data-theme="dark"] .lightbox {
  background: rgba(0,0,0,.98);
}

/* ── Theme toggle button ── */
.theme-toggle {
  display         : flex;
  align-items     : center;
  justify-content : center;
  width           : 36px;
  height          : 36px;
  border-radius   : 50%;
  border          : 1.5px solid var(--border);
  background      : transparent;
  color           : var(--ink-500);
  cursor          : pointer;
  transition      : all 0.25s var(--ease-out);
  flex-shrink     : 0;
}

.theme-toggle:hover {
  background  : var(--gold-lt);
  color       : var(--gold);
  border-color: var(--gold);
  transform   : rotate(15deg);
}

.theme-toggle svg { width: 16px; height: 16px; }

.theme-toggle__sun  { display: block; }
.theme-toggle__moon { display: none;  }

[data-theme="dark"] .theme-toggle__sun  { display: none;  }
[data-theme="dark"] .theme-toggle__moon { display: block; }

:root {
  /* ── Palette ── */
  --ink-900 : #151210;
  --ink-700 : #3A2F25;
  --ink-500 : #6B5A4E;
  --ink-300 : #A1917E;
  --ink-100 : #DDD5CC;

  --bg-base  : #FDFAF6;
  --bg-soft  : #F5EFE6;
  --bg-card  : #FFFFFF;
  --bg-dark  : #151210;
  --bg-dark2 : #1E1914;

  --gold     : #E24C6E;
  --gold-lt  : #FDE8ED;
  --gold-mid : #C93A58;

  --green    : #1FA651;
  --green-dk : #178A42;

  --border   : #EAE3D9;
  --border-dk: rgba(255,255,255,0.07);

  --white    : #FFFFFF;
  --error    : #C0392B;
  --success  : var(--green);

  /* ── Typography ── */
  --f-display: "Playfair Display", "Georgia", serif;
  --f-body   : "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  --f-mono   : "IBM Plex Mono", "Courier New", monospace;
  --f-hand   : "Dancing Script", cursive;

  /* ── Fluid Type Scale ── */
  --t-xs   : clamp(0.6875rem, 0.65rem + 0.19vw, 0.75rem);
  --t-sm   : clamp(0.8125rem, 0.77rem + 0.21vw, 0.875rem);
  --t-base : clamp(0.9375rem, 0.9rem  + 0.19vw, 1rem);
  --t-md   : clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --t-lg   : clamp(1.0625rem, 0.99rem + 0.37vw, 1.25rem);
  --t-xl   : clamp(1.25rem, 1.13rem + 0.6vw, 1.5rem);
  --t-2xl  : clamp(1.5rem, 1.25rem + 1.25vw, 2.125rem);
  --t-3xl  : clamp(1.875rem, 1.5rem + 1.88vw, 2.75rem);
  --t-4xl  : clamp(2.25rem, 1.7rem + 2.75vw, 3.5rem);
  --t-hero : clamp(2.75rem, 1.5rem + 6.25vw, 5.5rem);

  /* ── Spacing ── */
  --sp-1 : 0.25rem;
  --sp-2 : 0.5rem;
  --sp-3 : 0.75rem;
  --sp-4 : 1rem;
  --sp-5 : 1.25rem;
  --sp-6 : 1.5rem;
  --sp-8 : 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-32: 8rem;
  --section   : clamp(2rem, 3.5vw, 3.5rem);
  --section-sm: clamp(1.25rem, 2vw, 2rem);
  --sp-14: 3.5rem;

  /* ── Layout ── */
  --wrap     : 1260px;
  --wrap-md  : 940px;
  --wrap-sm  : 660px;
  --gutter   : clamp(1.25rem, 4vw, 2.5rem);
  --nav-h    : 72px;
  --topbar-h  : 40px;

  /* ── Radius ── */
  --r-sm : 8px;
  --r-md : 14px;
  --r-lg : 20px;
  --r-xl : 28px;
  --r-2xl: 40px;
  --r-pill: 9999px;

  /* ── Shadow (layered for depth) ── */
  --sh-xs: 0 1px 2px rgba(24,19,16,.05);
  --sh-sm: 0 1px 3px rgba(24,19,16,.04), 0 4px 12px rgba(24,19,16,.06);
  --sh-md: 0 2px 6px rgba(24,19,16,.04), 0 8px 32px rgba(24,19,16,.08);
  --sh-lg: 0 4px 12px rgba(24,19,16,.04), 0 20px 60px rgba(24,19,16,.1);
  --sh-xl: 0 8px 20px rgba(24,19,16,.04), 0 32px 80px rgba(24,19,16,.12);

  /* ── Easing ── */
  --ease-out   : cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Duration ── */
  --dt-fast : 150ms;
  --dt-base : 280ms;
  --dt-slow : 480ms;
  --dt-xl   : 700ms;
}

/* ─────────────────────────────────────────────────────────────
   § 02  BASE RESET
   ───────────────────────────────────────────────────────────── */

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

html {
  -webkit-font-smoothing : antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-size-adjust: 100%;
  scroll-behavior : smooth;
  scroll-padding-top: calc(var(--topbar-h) + var(--nav-h) + 1.5rem);
}

::selection {
  background: var(--gold-lt);
  color     : var(--ink-700);
}

body {
  background : var(--bg-base);
  color      : var(--ink-500);
  font-family: var(--f-body);
  font-size  : var(--t-base);
  line-height: 1.7;
  overflow-x : hidden;
}

body.--drawer-open { overflow: hidden; }

img, video, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; background: none; border: none; }

/* ─────────────────────────────────────────────────────────────
   § 03  TYPOGRAPHY
   ───────────────────────────────────────────────────────────── */

h1, h2, h3 {
  font-family   : var(--f-display);
  font-weight   : 700;
  line-height   : 1.08;
  letter-spacing: -0.02em;
  color         : var(--ink-700);
  text-wrap     : balance;
}

h4, h5, h6 {
  font-family: var(--f-body);
  font-weight: 600;
  line-height: 1.3;
  color      : var(--ink-700);
}

h1 { font-size: var(--t-4xl); }
h2 { font-size: var(--t-3xl); }
h3 { font-size: var(--t-xl); }
h4 { font-size: var(--t-md); }

p {
  color     : var(--ink-500);
  max-width : 64ch;
  line-height: 1.75;
}

p + p { margin-top: var(--sp-5); }

.label {
  display       : inline-flex;
  align-items   : center;
  gap           : var(--sp-3);
  font-family   : var(--f-mono);
  font-size     : 0.65rem;
  font-weight   : 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color         : var(--gold);
  margin-bottom : var(--sp-5);
}

.label::before,
.label::after {
  content   : '';
  display   : block;
  width     : 28px;
  height    : 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
  flex-shrink: 0;
}

.label::after {
  background: linear-gradient(270deg, var(--gold), transparent);
}

.price {
  font-family   : var(--f-display);
  font-size     : var(--t-xl);
  font-weight   : 700;
  color         : var(--gold);
  letter-spacing: -0.01em;
}

.lead {
  font-size  : var(--t-lg);
  color      : var(--ink-500);
  line-height: 1.65;
}

/* ─────────────────────────────────────────────────────────────
   § 04  LAYOUT PRIMITIVES
   ───────────────────────────────────────────────────────────── */

.wrap {
  width    : 100%;
  max-width: var(--wrap);
  margin   : 0 auto;
  padding  : 0 var(--gutter);
}
.wrap--md { max-width: var(--wrap-md); }
.wrap--sm { max-width: var(--wrap-sm); }

.section      { padding: var(--section) 0; }
.section--sm  { padding: var(--section-sm) 0; }
.section--lg  { padding: calc(var(--section) * 1.3) 0; }

.grid { display: grid; gap: var(--sp-6); }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
.auto-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.auto-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.auto-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }

.split {
  display    : grid;
  gap        : clamp(1.5rem, 3vw, 3rem);
  align-items: center;
}
.split--5050 { grid-template-columns: 1fr 1fr; }
.split--4060 { grid-template-columns: 3fr 2fr; }
.split--6040 { grid-template-columns: 3fr 2fr; }

.intro {
  text-align: center;
  max-width : 620px;
  margin    : 0 auto var(--sp-8);
}
.intro h2 { margin-bottom: var(--sp-5); }
.intro p  { margin: 0 auto; color: var(--ink-300); }

/* ─────────────────────────────────────────────────────────────
   § 05  NAVIGATION
   ───────────────────────────────────────────────────────────── */

/* Header wrapper is the sticky anchor — NOT the inner nav */
header {
  position: sticky;
  top     : var(--topbar-h);
  z-index : 900;
}

.nav {
  position  : relative;
  z-index   : 1;
  height    : var(--nav-h);
  background: rgba(253,250,246,0.92);
  backdrop-filter: blur(28px) saturate(1.3);
  -webkit-backdrop-filter: blur(28px) saturate(1.3);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dt-slow) var(--ease-smooth),
              background   var(--dt-slow) var(--ease-smooth),
              box-shadow   var(--dt-slow) var(--ease-smooth);
}

.nav.--scrolled {
  background  : rgba(253,250,246,0.98);
  border-color: var(--border);
  box-shadow  : 0 2px 24px rgba(61,50,41,.07);
}

.nav__inner {
  height     : 100%;
  display    : flex;
  align-items: center;
  gap        : var(--sp-10);
}

.nav__logo {
  display    : flex;
  align-items: center;
  flex-shrink: 0;
  line-height: 1;
  transition : opacity var(--dt-fast);
}
.nav__logo:hover { opacity: .8; }

.nav__logo-img {
  height    : 60px;
  width     : auto;
  display   : block;
  object-fit: contain;
}

.nav__links {
  display    : flex;
  align-items: center;
  gap        : var(--sp-8);
  margin-left: auto;
}

.nav__link {
  font-size     : 0.8125rem;
  font-weight   : 500;
  letter-spacing: 0.03em;
  color         : var(--ink-300);
  position      : relative;
  padding       : var(--sp-2) 0;
  transition    : color var(--dt-base) var(--ease-smooth);
}

.nav__link::after {
  content         : '';
  position        : absolute;
  bottom          : -2px;
  left            : 0;
  width           : 100%;
  height          : 2px;
  background      : linear-gradient(90deg, var(--gold), var(--gold-mid));
  border-radius   : 1px;
  transform       : scaleX(0);
  transform-origin: right;
  transition      : transform 0.35s var(--ease-out);
}

.nav__link:hover          { color: var(--ink-700); }
.nav__link[aria-current="page"] { color: var(--gold); font-weight: 600; }

.nav__link:hover::after,
.nav__link[aria-current="page"]::after {
  transform       : scaleX(1);
  transform-origin: left;
}

.nav__cta {
  display    : flex;
  align-items: center;
  gap        : var(--sp-3);
  margin-left: var(--sp-6);
  flex-shrink: 0;
}

.nav__toggle {
  display        : none;
  flex-direction : column;
  justify-content: center;
  align-items    : center;
  gap            : 5px;
  width          : 40px;
  height         : 40px;
  margin-left    : auto;
  border-radius  : var(--r-sm);
  border         : 1.5px solid var(--border);
  transition     : all var(--dt-fast);
}

.nav__toggle:hover {
  background  : var(--gold);
  border-color: var(--gold);
}
.nav__toggle:hover span { background: #fff; }

.nav__toggle span {
  width     : 18px;
  height    : 1.5px;
  background: var(--ink-700);
  border-radius: 1px;
  transition: transform var(--dt-base) var(--ease-out),
              opacity   var(--dt-fast),
              background var(--dt-fast);
  transform-origin: center;
}

.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg) translate(3.5px, 3.5px); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: rotate(-45deg) translate(3.5px, -3.5px); }

/* Backdrop overlay for drawer */
.nav__backdrop {
  display       : none;
  position      : fixed;
  inset         : 0;
  background    : rgba(21,18,16,.55);
  z-index       : 999;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  transition    : opacity var(--dt-slow) var(--ease-smooth);
}

.nav__backdrop.--open {
  display: block;
  animation: bkdropIn 0.35s var(--ease-smooth);
}

@keyframes bkdropIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Drawer — right-side panel */
.nav__drawer {
  display        : none;
  position       : fixed;
  top            : 0;
  right          : 0;
  bottom         : 0;
  width          : min(340px, 92vw);
  background     : var(--bg-card);
  z-index        : 1000;
  overflow-y     : auto;
  flex-direction : column;
  box-shadow     : -8px 0 40px rgba(21,18,16,.2);
}

.nav__drawer.--open {
  display  : flex;
  animation: drawerSlideIn var(--dt-slow) var(--ease-out);
}

@keyframes drawerSlideIn {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

/* Drawer header row */
.nav__drawer-head {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  padding        : var(--sp-5) var(--sp-6);
  border-bottom  : 1px solid var(--border);
  flex-shrink    : 0;
  position       : sticky;
  top            : 0;
  background     : var(--bg-card);
  z-index        : 2;
}

.nav__drawer-close {
  width        : 36px;
  height       : 36px;
  border-radius: 50%;
  border       : 1.5px solid var(--border);
  display      : flex;
  align-items  : center;
  justify-content: center;
  font-size    : 0.8rem;
  color        : var(--ink-300);
  transition   : all var(--dt-fast);
}
.nav__drawer-close:hover {
  border-color: var(--gold);
  color       : var(--gold);
  background  : var(--gold-lt);
}

/* Drawer links area */
.nav__drawer-links {
  padding : var(--sp-4) var(--sp-6);
  flex    : 1;
  display : flex;
  flex-direction: column;
}

.nav__drawer .nav__link {
  font-size  : var(--t-base);
  font-weight: 500;
  padding    : var(--sp-4) var(--sp-2);
  border-bottom: 1px solid var(--border);
  display    : flex;
  align-items: center;
  justify-content: space-between;
  color      : var(--ink-700);
  letter-spacing: 0.01em;
}

.nav__drawer .nav__link::before {
  content: none;
}

.nav__drawer .nav__link::after {
  content    : '›';
  display    : block;
  font-size  : 1.1rem;
  color      : var(--ink-300);
  transition : transform var(--dt-fast), color var(--dt-fast);
  font-weight: 300;
}

.nav__drawer .nav__link:hover {
  color: var(--gold);
}

.nav__drawer .nav__link:hover::after {
  transform: translateX(4px);
  color    : var(--gold);
}

.nav__drawer .nav__link[aria-current="page"] {
  color      : var(--gold);
  font-weight: 600;
}

.nav__drawer .nav__link[aria-current="page"]::after {
  content: '●';
  font-size: 0.45rem;
  color  : var(--gold);
}

/* Drawer CTA area */
.nav__drawer .nav__cta {
  margin-left   : 0;
  margin-top    : auto;
  padding       : var(--sp-6);
  flex-direction: column;
  gap           : var(--sp-3);
  border-top    : 1px solid var(--border);
}

.nav__drawer .nav__cta .btn { width: 100%; justify-content: center; }

/* Drawer footer info */
.nav__drawer-info {
  padding     : 0 var(--sp-6) var(--sp-6);
  font-size   : var(--t-xs);
  color       : var(--ink-300);
  line-height : 1.7;
  font-family : var(--f-mono);
  letter-spacing: .04em;
}

/* ─────────────────────────────────────────────────────────────
   § 06  HERO
   ───────────────────────────────────────────────────────────── */

.hero {
  position   : relative;
  min-height : calc(100svh - var(--topbar-h) - var(--nav-h));
  display    : flex;
  align-items: center;
  justify-content: center;
  background : var(--ink-900);
  overflow   : hidden;
}

.hero__media {
  position: absolute;
  inset   : 0;
  z-index : 0;
}

.hero__media img {
  width     : 100%;
  height    : 100%;
  object-fit: cover;
  object-position: center center;
  opacity   : 0.45;
  transition: transform 16s cubic-bezier(0.1,0,0.1,1);
  transform : scale(1.06);
}

.hero.--loaded .hero__media img { transform: scale(1); }

.hero__media::after {
  content   : '';
  position  : absolute;
  inset     : 0;
  background:
    linear-gradient(0deg, rgba(21,18,16,0.6) 0%, transparent 50%),
    radial-gradient(ellipse at 25% 50%, transparent 40%, rgba(21,18,16,0.3) 100%);
}

.hero__body {
  position  : relative;
  z-index   : 1;
  padding   : var(--sp-24) 0 clamp(2.5rem, 6vh, 5rem);
  max-width : 720px;
  text-align: center;
  margin    : 0 auto;
}

.hero__eyebrow {
  display       : inline-flex;
  align-items   : center;
  gap           : var(--sp-3);
  font-family   : var(--f-mono);
  font-size     : var(--t-xs);
  font-weight   : 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color         : rgba(255,255,255,0.45);
  margin-bottom : var(--sp-6);
}

.hero__eyebrow::before,
.hero__eyebrow::after {
  content   : '';
  display   : block;
  width     : 28px;
  height    : 1px;
  background: var(--gold);
}

.hero__title {
  font-size    : var(--t-hero);
  font-weight  : 700;
  color        : #fff;
  line-height  : 1.02;
  margin-bottom: var(--sp-8);
  letter-spacing: -0.03em;
}

.hero__title em {
  font-style: italic;
  color     : var(--gold-mid);
}

.hero__sub {
  font-size    : var(--t-lg);
  color        : rgba(255,255,255,0.6);
  line-height  : 1.65;
  margin-bottom: var(--sp-10);
  max-width    : 42ch;
  margin-left  : auto;
  margin-right : auto;
}

.hero__actions {
  display        : flex;
  gap            : var(--sp-4);
  flex-wrap      : wrap;
  justify-content: center;
}

.hero--page {
  text-align : center;
  min-height : 40vh;
  align-items: flex-end;
  padding-bottom: var(--sp-16);
}

.hero--page .hero__media img { opacity: 0.35; object-position: center 30%; }

.hero--page .hero__body {
  padding  : 0;
  max-width: 100%;
}

.hero--page .hero__title {
  font-size    : var(--t-4xl);
  margin-bottom: var(--sp-3);
}

.hero--page .hero__sub { margin-bottom: 0; }

/* ─────────────────────────────────────────────────────────────
   § 07  BUTTONS
   ───────────────────────────────────────────────────────────── */

.btn {
  display        : inline-flex;
  align-items    : center;
  justify-content: center;
  gap            : var(--sp-2);
  padding        : 0.8125rem 1.875rem;
  font-size      : var(--t-sm);
  font-weight    : 600;
  letter-spacing : 0.02em;
  line-height    : 1;
  border-radius  : var(--r-pill);
  border         : 1.5px solid transparent;
  white-space    : nowrap;
  cursor         : pointer;
  position       : relative;
  transition     : all var(--dt-base) var(--ease-out);
}

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

.btn:active { transform: scale(0.97); }

.btn--primary {
  background  : var(--green);
  color       : #fff;
  border-color: var(--green);
}
.btn--primary:hover {
  background  : var(--green-dk);
  border-color: var(--green-dk);
  box-shadow  : 0 4px 16px rgba(31,166,81,.3);
  transform   : translateY(-2px);
}

.btn--gold {
  background  : var(--gold);
  color       : #fff;
  border-color: var(--gold);
}
.btn--gold:hover {
  background  : var(--gold-mid);
  border-color: var(--gold-mid);
  box-shadow  : 0 4px 20px rgba(226,76,110,.3);
  transform   : translateY(-2px);
}

.btn--outline {
  background  : transparent;
  color       : var(--ink-700);
  border-color: var(--border);
}
.btn--outline:hover {
  border-color: var(--ink-300);
  background  : var(--bg-soft);
  transform   : translateY(-1px);
}

.btn--ghost {
  background  : rgba(255,255,255,0.06);
  color       : #fff;
  border-color: rgba(255,255,255,0.2);
}
.btn--ghost:hover {
  background  : rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.5);
  transform   : translateY(-1px);
}

.btn--sm { padding: 0.5625rem 1.25rem; font-size: var(--t-xs); }
.btn--lg { padding: 1rem 2.25rem; font-size: var(--t-base); letter-spacing: 0.03em; }

/* ─────────────────────────────────────────────────────────────
   § 08  BADGES
   ───────────────────────────────────────────────────────────── */

.badge {
  display       : inline-flex;
  align-items   : center;
  padding       : 0.25rem 0.6875rem;
  font-family   : var(--f-mono);
  font-size     : var(--t-xs);
  font-weight   : 500;
  letter-spacing: 0.04em;
  border-radius : var(--r-pill);
  white-space   : nowrap;
  background    : var(--bg-soft);
  color         : var(--ink-500);
  border        : 1px solid var(--border);
}

.badge--gold  { background: var(--gold-lt); color: var(--gold); border-color: #f0b8c6; }
.badge--dark  { background: var(--ink-700); color: #fff; border-color: transparent; }

/* ─────────────────────────────────────────────────────────────
   § 09  CARDS
   ───────────────────────────────────────────────────────────── */

.card {
  background   : var(--bg-card);
  border-radius: var(--r-lg);
  border       : 1px solid var(--border);
  overflow     : hidden;
  display      : flex;
  flex-direction: column;
  transition   : transform var(--dt-slow) var(--ease-out),
                 box-shadow var(--dt-xl) var(--ease-out),
                 border-color var(--dt-slow) var(--ease-out);
  position     : relative;
}

.card::after {
  content  : '';
  position : absolute;
  bottom   : 0;
  left     : var(--sp-6);
  right    : var(--sp-6);
  height   : 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-mid));
  border-radius: 1px;
  transform: scaleX(0);
  transition: transform 0.4s var(--ease-out);
  transform-origin: center;
}

.card:hover {
  transform   : translateY(-5px);
  box-shadow  : 0 16px 48px rgba(61,50,41,.12);
  border-color: rgba(226,76,110,.18);
}

.card:hover::after { transform: scaleX(1); }

.card__img-wrap {
  overflow    : hidden;
  aspect-ratio: 3 / 2;
  background  : var(--bg-soft);
  flex-shrink : 0;
  position    : relative;
}

.card__img {
  position  : absolute;
  inset     : 0;
  width     : 100%;
  height    : 100%;
  object-fit: cover;
  object-position: center center;
  transition: transform var(--dt-xl) var(--ease-out);
}

.card:hover .card__img { transform: scale(1.04); }

.card__body {
  padding: var(--sp-6) var(--sp-6) var(--sp-5);
  flex   : 1;
  display: flex;
  flex-direction: column;
}

.card__meta {
  display    : flex;
  gap        : var(--sp-2);
  flex-wrap  : wrap;
  margin-bottom: var(--sp-4);
}

.card__title {
  font-size    : var(--t-xl);
  margin-bottom: var(--sp-3);
  color        : var(--ink-700);
  line-height  : 1.2;
}

.card__text {
  font-size : var(--t-sm);
  color     : var(--ink-500);
  max-width : 100%;
  line-height: 1.7;
  flex      : 1;
}

.card__footer {
  display        : flex;
  justify-content: space-between;
  align-items    : center;
  margin-top     : auto;
  padding-top    : var(--sp-5);
  gap            : var(--sp-3);
}

/* ─────────────────────────────────────────────────────────────
   § 10  MENU SYSTEM
   ───────────────────────────────────────────────────────────── */

.menu-nav {
  position   : sticky;
  top        : calc(var(--topbar-h) + var(--nav-h));
  z-index    : 700;
  background : var(--bg-base);
  border-bottom: 1px solid var(--border);
  box-shadow : 0 2px 8px rgba(61,50,41,.06);
}

.menu-nav__inner {
  display     : flex;
  gap         : var(--sp-2);
  overflow-x  : auto;
  scrollbar-width: none;
  padding     : var(--sp-4) 0;
  -webkit-overflow-scrolling: touch;
}

.menu-nav__inner::-webkit-scrollbar { display: none; }

.menu-tab {
  flex-shrink : 0;
  display     : flex;
  align-items : center;
  gap         : var(--sp-2);
  padding     : 0.625rem 1.25rem;
  font-size   : var(--t-sm);
  font-weight : 500;
  color       : var(--ink-300);
  background  : transparent;
  border      : 1.5px solid var(--border);
  border-radius: var(--r-pill);
  transition  : all var(--dt-base) var(--ease-out);
  white-space : nowrap;
}

.menu-tab:hover {
  color       : var(--ink-700);
  border-color: var(--ink-300);
  background  : var(--bg-soft);
}

.menu-tab[aria-selected="true"] {
  color       : #fff;
  background  : var(--ink-700);
  border-color: var(--ink-700);
  box-shadow  : 0 2px 8px rgba(58,47,37,.2);
}

.menu-panel { display: none; }
.menu-panel[aria-hidden="false"] {
  display  : block;
  animation: panelReveal var(--dt-slow) var(--ease-out) both;
}

@keyframes panelReveal {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.menu-section-head {
  padding      : var(--sp-16) 0 var(--sp-8);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--sp-10);
  max-width    : 560px;
}

.menu-section-head h2 { margin-bottom: var(--sp-3); font-size: var(--t-3xl); }
.menu-section-head p  { color: var(--ink-300); }

.menu-item {
  background   : var(--bg-card);
  border       : 1px solid var(--border);
  border-radius: var(--r-md);
  overflow     : hidden;
  display      : flex;
  flex-direction: column;
  transition   : transform var(--dt-slow) var(--ease-out),
                 box-shadow var(--dt-xl) var(--ease-out),
                 border-color var(--dt-slow);
}

.menu-item:hover {
  transform   : translateY(-3px);
  box-shadow  : var(--sh-md);
  border-color: rgba(234,227,217,.3);
}

.menu-item__img-wrap {
  overflow    : hidden;
  aspect-ratio: 16 / 9;
  background  : var(--bg-soft);
  flex-shrink : 0;
  position    : relative;
}

.menu-item__img {
  width       : 100%;
  aspect-ratio: 16 / 9;
  object-fit  : cover;
  object-position: center center;
  transition  : transform var(--dt-xl) var(--ease-out);
  display     : block;
}

.menu-item:hover .menu-item__img { transform: scale(1.03); }

.menu-item__body { padding: var(--sp-5) var(--sp-5) var(--sp-4); flex: 1; display: flex; flex-direction: column; }

.menu-item__row {
  display        : flex;
  justify-content: space-between;
  align-items    : flex-start;
  gap            : var(--sp-4);
  margin-bottom  : var(--sp-2);
}

.menu-item__name {
  font-family: var(--f-display);
  font-size  : var(--t-xl);
  font-weight: 700;
  color      : var(--ink-700);
  line-height: 1.2;
}

.menu-item__price {
  font-family: var(--f-display);
  font-size  : var(--t-xl);
  font-weight: 700;
  color      : var(--gold);
  flex-shrink: 0;
  line-height: 1.2;
}

.menu-item__desc {
  font-size  : var(--t-base);
  color      : var(--ink-300);
  line-height: 1.65;
  flex       : 1;
  margin-bottom: var(--sp-4);
}

.menu-item__tags { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* ─────────────────────────────────────────────────────────────
   § 11  FAQ ACCORDION
   ───────────────────────────────────────────────────────────── */

.faq-group { margin-bottom: var(--sp-12); }

.faq-group__title {
  font-size    : var(--t-xs);
  font-family  : var(--f-mono);
  font-weight  : 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color        : var(--gold);
  margin-bottom: var(--sp-6);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--border);
}

.faq-item {
  border-bottom: 1px solid var(--border);
}

.faq-item:first-child { border-top: 1px solid var(--border); }

.faq-trigger {
  display        : flex;
  justify-content: space-between;
  align-items    : center;
  gap            : var(--sp-8);
  width          : 100%;
  padding        : var(--sp-6) 0;
  text-align     : left;
  font-size      : var(--t-md);
  font-weight    : 600;
  color          : var(--ink-700);
  transition     : color var(--dt-base) var(--ease-smooth);
}

.faq-trigger:hover { color: var(--gold); }

.faq-trigger__icon {
  flex-shrink : 0;
  width       : 32px;
  height      : 32px;
  border-radius: 50%;
  border      : 1.5px solid var(--border);
  display     : flex;
  align-items : center;
  justify-content: center;
  font-size   : 1.1rem;
  color       : var(--ink-300);
  transition  : all var(--dt-slow) var(--ease-out);
  font-weight : 300;
  line-height : 1;
}

.faq-trigger:hover .faq-trigger__icon {
  border-color: var(--ink-300);
}

.faq-trigger[aria-expanded="true"] .faq-trigger__icon {
  background  : var(--gold);
  border-color: var(--gold);
  color       : #fff;
  transform   : rotate(45deg);
}

.faq-body {
  overflow: hidden;
  height  : 0;
  transition: height var(--dt-slow) var(--ease-out);
}

.faq-body[aria-hidden="false"] { height: auto; }

.faq-body__inner {
  padding-bottom: var(--sp-8);
  font-size     : var(--t-base);
  color         : var(--ink-500);
  max-width     : 60ch;
  line-height   : 1.8;
}

/* ─────────────────────────────────────────────────────────────
   § 12  GALLERY
   ───────────────────────────────────────────────────────────── */

.gallery-filters {
  display  : flex;
  gap      : var(--sp-2);
  flex-wrap: wrap;
  margin-bottom: var(--sp-12);
}

.gallery-filter {
  padding     : 0.5rem 1.25rem;
  font-size   : var(--t-sm);
  font-weight : 500;
  border-radius: var(--r-pill);
  border      : 1.5px solid var(--border);
  color       : var(--ink-300);
  transition  : all var(--dt-base) var(--ease-out);
}

.gallery-filter:hover { color: var(--ink-700); border-color: var(--ink-300); background: var(--bg-soft); }

.gallery-filter[aria-pressed="true"] {
  background  : var(--ink-700);
  border-color: var(--ink-700);
  color       : #fff;
  box-shadow  : 0 2px 8px rgba(58,47,37,.2);
}

.gallery-grid {
  columns    : 3 280px;
  gap        : var(--sp-5);
}

.gallery-item {
  break-inside  : avoid;
  margin-bottom : var(--sp-5);
  border-radius : var(--r-lg);
  overflow      : hidden;
  cursor        : pointer;
  position      : relative;
}

.gallery-item img {
  width     : 100%;
  display   : block;
  transition: transform var(--dt-xl) var(--ease-out);
}

.gallery-item:hover img { transform: scale(1.03); }

.gallery-item__overlay {
  position  : absolute;
  inset     : 0;
  background: linear-gradient(0deg, rgba(21,18,16,0.5) 0%, transparent 60%);
  display   : flex;
  align-items: flex-end;
  justify-content: center;
  padding   : var(--sp-6);
  opacity   : 0;
  transition: opacity var(--dt-slow) var(--ease-out);
}

.gallery-item:hover .gallery-item__overlay { opacity: 1; }

.lightbox {
  position  : fixed;
  inset     : 0;
  z-index   : 1000;
  background: rgba(21,18,16,0.96);
  display   : flex;
  align-items: center;
  justify-content: center;
  padding   : var(--sp-8);
  opacity   : 0;
  pointer-events: none;
  transition: opacity var(--dt-slow) var(--ease-out);
}

.lightbox.--open {
  opacity       : 1;
  pointer-events: all;
}

.lightbox__img {
  max-width : 88vw;
  max-height: 85vh;
  object-fit: contain;
  border-radius: var(--r-lg);
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
}

.lightbox__close {
  position  : absolute;
  top       : var(--sp-6);
  right     : var(--sp-6);
  width     : 48px;
  height    : 48px;
  border-radius: 50%;
  border    : 1.5px solid rgba(255,255,255,0.2);
  color     : #fff;
  font-size : 1.25rem;
  display   : flex;
  align-items: center;
  justify-content: center;
  transition: all var(--dt-base) var(--ease-out);
}

.lightbox__close:hover {
  background  : rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.5);
  transform   : rotate(90deg);
}

/* ─────────────────────────────────────────────────────────────
   § 13  FORMS
   ───────────────────────────────────────────────────────────── */

.form-group {
  display       : flex;
  flex-direction: column;
  gap           : var(--sp-2);
}

.form-label {
  font-size  : var(--t-sm);
  font-weight: 600;
  color      : var(--ink-700);
}

.form-label .req { color: var(--gold); margin-left: 2px; }

.form-input,
.form-select,
.form-textarea {
  width        : 100%;
  padding      : 0.875rem var(--sp-5);
  background   : var(--bg-base);
  border       : 1.5px solid var(--border);
  border-radius: var(--r-md);
  color        : var(--ink-700);
  font-size    : var(--t-base);
  line-height  : 1.5;
  -webkit-appearance: none;
  appearance   : none;
  transition   : border-color var(--dt-base) var(--ease-smooth),
                 box-shadow   var(--dt-base) var(--ease-smooth),
                 background   var(--dt-fast);
}

.form-input::placeholder,
.form-textarea::placeholder { color: var(--ink-100); }

.form-input:hover,
.form-select:hover,
.form-textarea:hover {
  border-color: var(--ink-300);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline     : none;
  border-color: var(--gold);
  box-shadow  : 0 0 0 4px rgba(226,76,110,.1);
  background  : var(--bg-card);
}

.form-textarea { resize: vertical; min-height: 140px; }

.form-grid { display: grid; gap: var(--sp-5); }
.form-2col { grid-template-columns: 1fr 1fr; }

@media (max-width: 640px) {
  .form-grid[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
}

.form-notice {
  font-size    : var(--t-sm);
  border-radius: var(--r-md);
  padding      : var(--sp-4) var(--sp-5);
  font-weight  : 500;
  margin-bottom: var(--sp-5);
}

.form-notice--ok  { background: #ebf8ef; color: #1a6934; border: 1px solid #c3e6cb; }
.form-notice--err { background: #fdecea; color: #9b2323; border: 1px solid #f5c6cb; }

body.--drawer-open { overflow: hidden; }

/* ─────────────────────────────────────────────────────────────
   § 14  SECTION PATTERNS
   ───────────────────────────────────────────────────────────── */

/* ── Quick-info strip ── */
.infostrip {
  background  : var(--bg-card);
  border-bottom: 1px solid var(--border);
  padding     : var(--sp-6) 0;
}

.infostrip__inner {
  display    : flex;
  align-items: center;
  gap        : var(--sp-10);
  flex-wrap  : wrap;
  justify-content: center;
}

.infostrip__item {
  display    : flex;
  align-items: center;
  gap        : var(--sp-3);
}

.infostrip__icon {
  font-size  : 1rem;
  flex-shrink: 0;
  opacity    : 0.5;
}

.infostrip__text {
  font-size: var(--t-sm);
  color    : var(--ink-500);
  line-height: 1.35;
}

.infostrip__text strong { color: var(--ink-700); display: block; font-weight: 600; }

/* ── Stat block ── */
.stats {
  display  : flex;
  gap      : var(--sp-16);
  flex-wrap: wrap;
  justify-content: center;
}

.stat { text-align: center; }

.stat__num {
  font-family   : var(--f-display);
  font-size     : var(--t-4xl);
  font-weight   : 700;
  color         : var(--gold);
  line-height   : 1;
  letter-spacing: -0.02em;
  display       : block;
}

.stat__lbl {
  font-size  : var(--t-sm);
  color      : var(--ink-300);
  margin-top : var(--sp-2);
  display    : block;
}

/* ── Spotlight ── */
.spotlight {
  display      : grid;
  grid-template-columns: 1fr 1fr;
  border-radius: var(--r-xl);
  overflow     : hidden;
  background   : var(--bg-card);
  box-shadow   : var(--sh-lg);
  border       : 1px solid var(--border);
}

.spotlight__img-wrap {
  overflow  : hidden;
  position  : relative;
  min-height: 460px;
}

.spotlight__img {
  width     : 100%;
  height    : 100%;
  min-height: 460px;
  object-fit: cover;
  object-position: center center;
  position  : absolute;
  inset     : 0;
  transition: transform var(--dt-xl) var(--ease-out);
}

.spotlight:hover .spotlight__img { transform: scale(1.03); }

.spotlight__body {
  padding: clamp(2rem, 4vw, 4rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.spotlight__body h2 { margin-bottom: var(--sp-5); }
.spotlight__body p  { margin-bottom: 0; max-width: 100%; color: var(--ink-500); }

/* ── CTA band ── */
.cta-band {
  background: var(--bg-dark);
  color     : #fff;
  padding   : clamp(4rem, 8vw, 7rem) 0;
  text-align: center;
  position  : relative;
  overflow  : hidden;
}

.cta-band::before {
  content   : '';
  position  : absolute;
  top       : -100px;
  left      : 50%;
  width     : 600px;
  height    : 600px;
  background: radial-gradient(circle, rgba(226,76,110,.08), transparent 70%);
  transform : translateX(-50%);
  pointer-events: none;
}

.cta-band h2 { color: #fff; font-size: var(--t-4xl); margin-bottom: var(--sp-5); }
.cta-band p  { color: rgba(255,255,255,.5); margin: 0 auto var(--sp-12); max-width: 48ch; }

.cta-band__btns {
  display        : flex;
  gap            : var(--sp-4);
  justify-content: center;
  flex-wrap      : wrap;
}

/* ── Info panel ── */
.info-panel {
  background   : var(--bg-card);
  border       : 1px solid var(--border);
  border-radius: var(--r-lg);
  padding      : var(--sp-8);
}

.info-panel__head {
  font-size     : var(--t-xs);
  font-family   : var(--f-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color         : var(--gold);
  margin-bottom : var(--sp-6);
  padding-bottom: var(--sp-4);
  border-bottom : 1px solid var(--border);
  display       : block;
}

.info-row {
  display      : flex;
  gap          : var(--sp-4);
  padding      : var(--sp-4) 0;
  border-bottom: 1px solid var(--border);
  font-size    : var(--t-sm);
}

.info-row:last-child { border-bottom: none; }
.info-row strong { color: var(--ink-700); min-width: 130px; flex-shrink: 0; font-weight: 600; }

/* ── Sticky mobile CTA ── */
.mobile-cta {
  position  : fixed;
  bottom    : 0;
  left      : 0;
  right     : 0;
  z-index   : 500;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--border);
  padding   : var(--sp-3) var(--gutter);
  box-shadow: 0 -2px 16px rgba(24,19,16,.06);
  transform : translateY(100%);
  transition: transform var(--dt-slow) var(--ease-out);
}

.mobile-cta.--visible { transform: translateY(0); }

.mobile-cta__row {
  display: flex;
  gap    : var(--sp-3);
}

.mobile-cta__row .btn { flex: 1; justify-content: center; }

/* ─────────────────────────────────────────────────────────────
   § 15  TESTIMONIALS
   ───────────────────────────────────────────────────────────── */

.testimonial {
  background   : var(--bg-card);
  border       : 1px solid var(--border);
  border-radius: var(--r-lg);
  padding      : var(--sp-8) var(--sp-8) var(--sp-6);
  display      : flex;
  flex-direction: column;
  transition   : all var(--dt-slow) var(--ease-out);
  position     : relative;
}

.testimonial::before {
  content    : '"';
  position   : absolute;
  top        : var(--sp-5);
  right      : var(--sp-6);
  font-family: var(--f-display);
  font-size  : 4rem;
  line-height: 1;
  color      : var(--gold-lt);
  pointer-events: none;
}

.testimonial:hover {
  border-color: rgba(226,76,110,.3);
  box-shadow  : var(--sh-md);
  transform   : translateY(-2px);
}

.testimonial__stars {
  color        : var(--gold);
  font-size    : 0.8rem;
  letter-spacing: 2px;
  margin-bottom: var(--sp-5);
}

.testimonial__text {
  font-family  : var(--f-display);
  font-size    : var(--t-lg);
  font-style   : italic;
  line-height  : 1.6;
  color        : var(--ink-700);
  flex         : 1;
  margin-bottom: var(--sp-8);
}

.testimonial__author {
  display    : flex;
  align-items: center;
  gap        : var(--sp-3);
  padding-top: var(--sp-5);
  border-top : 1px solid var(--border);
}

.testimonial__avatar {
  width        : 40px;
  height       : 40px;
  border-radius: 50%;
  background   : var(--gold-lt);
  display      : flex;
  align-items  : center;
  justify-content: center;
  font-size    : var(--t-xs);
  font-weight  : 700;
  color        : var(--gold);
  flex-shrink  : 0;
}

.testimonial__name {
  font-weight: 600;
  font-size  : var(--t-sm);
  color      : var(--ink-700);
  display    : block;
}

.testimonial__role {
  font-size: var(--t-xs);
  color    : var(--ink-300);
  display  : block;
}

/* ─────────────────────────────────────────────────────────────
   § 16  FOOTER
   ───────────────────────────────────────────────────────────── */

.footer {
  background    : var(--bg-dark);
  padding       : clamp(4rem, 8vw, 6rem) 0 var(--sp-10);
  padding-bottom: calc(var(--sp-10) + env(safe-area-inset-bottom, 0px));
}

.footer__grid {
  display              : grid;
  grid-template-columns: repeat(4, 1fr);
  gap                  : var(--sp-8);
  padding-bottom       : var(--sp-8);
  border-bottom        : 1px solid var(--border-dk);
  align-items          : start;
}

.footer__brand {
  display      : inline-block;
  margin-bottom: var(--sp-6);
}

.footer__logo-img {
  height    : 64px;
  width     : auto;
  display   : block;
  object-fit: contain;
  filter    : brightness(0) invert(1);
  opacity   : .9;
}

.footer__tagline {
  font-size    : var(--t-sm);
  color        : rgba(255,255,255,.35);
  margin-bottom: var(--sp-6);
  max-width    : 28ch;
  line-height  : 1.7;
}

.footer__contact a {
  display    : block;
  font-size  : var(--t-sm);
  color      : rgba(255,255,255,.5);
  transition : color var(--dt-base) var(--ease-smooth);
  margin-top : var(--sp-2);
}

.footer__contact a:hover { color: var(--gold); }

.footer__col-label {
  font-family   : var(--f-mono);
  font-size     : var(--t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color         : rgba(255,255,255,.25);
  margin-bottom : var(--sp-6);
  display       : block;
}

.footer__links {
  display       : flex;
  flex-direction: column;
  gap           : var(--sp-3);
}

.footer__link {
  font-size : var(--t-sm);
  color     : rgba(255,255,255,.45);
  transition: color var(--dt-base) var(--ease-smooth);
}

.footer__link:hover { color: #fff; }

.footer__hours { display: flex; flex-direction: column; gap: var(--sp-3); }

.footer__hour-row {
  display    : flex;
  font-size  : var(--t-sm);
  color      : rgba(255,255,255,.45);
}

.footer__hour-row strong { color: rgba(255,255,255,.7); min-width: 120px; font-weight: 500; }

.footer__bottom {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  flex-wrap      : wrap;
  gap            : var(--sp-4);
  padding-top    : var(--sp-2);
}

.footer__copy {
  font-size: var(--t-xs);
  color    : rgba(255,255,255,.2);
}

.footer__socials {
  display: flex;
  gap    : var(--sp-6);
}

.footer__social {
  font-family   : var(--f-mono);
  font-size     : var(--t-xs);
  font-weight   : 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color         : rgba(255,255,255,.25);
  transition    : color var(--dt-base) var(--ease-smooth);
}

.footer__social:hover { color: var(--gold); }

/* ─────────────────────────────────────────────────────────────
   § 16b  HANDWRITING ACCENTS
   ───────────────────────────────────────────────────────────── */

.hand {
  font-family   : var(--f-hand);
  font-size     : 1.15em;
  font-weight   : 600;
  color         : var(--gold);
  letter-spacing: 0.01em;
  line-height   : 1;
  display       : inline-block;
}

.hand--lg {
  font-size : 1.45em;
  font-weight: 700;
}

.hand--light { color: rgba(255,255,255,.75); }

/* ─────────────────────────────────────────────────────────────
   § 17  UTILITIES
   ───────────────────────────────────────────────────────────── */

.text-center   { text-align: center; }
.text-right    { text-align: right; }
.text-gold     { color: var(--gold); }
.text-muted    { color: var(--ink-300); }
.text-white    { color: #fff; }
.text-display  { font-family: var(--f-display); }
.text-mono     { font-family: var(--f-mono); }

.bg-soft       { background: var(--bg-soft); }
.bg-card       { background: var(--bg-card); }
.bg-dark       { background: var(--bg-dark); color: #fff; }

.mt-4  { margin-top: var(--sp-4); }
.mt-6  { margin-top: var(--sp-6); }
.mt-8  { margin-top: var(--sp-8); }
.mt-10 { margin-top: var(--sp-10); }
.mt-12 { margin-top: var(--sp-12); }
.mb-4  { margin-bottom: var(--sp-4); }
.mb-6  { margin-bottom: var(--sp-6); }
.mb-8  { margin-bottom: var(--sp-8); }
.mb-12 { margin-bottom: var(--sp-12); }
.mb-16 { margin-bottom: var(--sp-16); }

.flex         { display: flex; }
.flex-wrap    { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); }
.gap-6 { gap: var(--sp-6); }

.w-full       { width: 100%; }
.max-w-sm     { max-width: var(--wrap-sm); margin-inline: auto; }
.overflow-h   { overflow: hidden; }
.rounded-lg   { border-radius: var(--r-lg); }
.rounded-xl   { border-radius: var(--r-xl); }
.object-cover { object-fit: cover; width: 100%; height: 100%; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ─────────────────────────────────────────────────────────────
   § 18  MOTION & REVEAL
   ───────────────────────────────────────────────────────────── */

.reveal {
  opacity  : 0;
  transform: translateY(24px);
  transition: opacity   var(--dt-xl) var(--ease-out),
              transform var(--dt-xl) var(--ease-out);
}

.reveal.in-view {
  opacity  : 1;
  transform: none;
}

.reveal-group .reveal { transition-delay: 0ms; }
.reveal-group .reveal:nth-child(2) { transition-delay: 100ms; }
.reveal-group .reveal:nth-child(3) { transition-delay: 200ms; }
.reveal-group .reveal:nth-child(4) { transition-delay: 300ms; }
.reveal-group .reveal:nth-child(5) { transition-delay: 400ms; }
.reveal-group .reveal:nth-child(6) { transition-delay: 500ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ─────────────────────────────────────────────────────────────
   § 19  RESPONSIVE
   ───────────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-10); }
  .spotlight    { grid-template-columns: 1fr; }
  .spotlight__img-wrap { min-height: 340px; }
  .spotlight__img { min-height: 340px; }
}

@media (max-width: 900px) {
  .nav__links,
  .nav__cta    { display: none; }
  .nav__toggle { display: flex; }

  .split--5050,
  .split--4060,
  .split--6040 { grid-template-columns: 1fr; }

  .cols-2      { grid-template-columns: 1fr 1fr; }
  .cols-3,
  .cols-4      { grid-template-columns: 1fr 1fr; }

  .form-2col   { grid-template-columns: 1fr; }

  .gallery-grid { columns: 2 240px; }

  .spotlight__img-wrap { min-height: 280px; }

  .infostrip__inner { gap: var(--sp-6); }
}

@media (max-width: 640px) {
  :root { --nav-h: 64px; }

  h1 { font-size: var(--t-3xl); }
  h2 { font-size: var(--t-2xl); }

  .hero { min-height: 85svh; }
  .hero__body  { padding: var(--sp-20) 0 var(--sp-12); }
  .hero__title { max-width: 100%; }
  .hero__sub   { font-size: var(--t-base); }
  .hero__actions { flex-direction: column; gap: var(--sp-3); }
  .hero__actions .btn { width: 100%; justify-content: center; }

  .hero--page { min-height: 36vh; }

  .infostrip__inner { gap: var(--sp-5); flex-direction: column; align-items: flex-start; }

  .spotlight__body { padding: var(--sp-6); }
  .spotlight__img-wrap { min-height: 220px; }

  .cols-2,
  .cols-3,
  .cols-4 { grid-template-columns: 1fr; }

  .footer__grid { grid-template-columns: 1fr; gap: var(--sp-8); }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
  .footer__logo-img { height: 52px; }

  .cta-band h2 { font-size: var(--t-3xl); }
  .cta-band__btns { flex-direction: column; align-items: stretch; }
  .cta-band__btns .btn { width: 100%; max-width: 340px; margin: 0 auto; }

  .gallery-grid { columns: 2 150px; gap: var(--sp-3); }
  .gallery-item { margin-bottom: var(--sp-3); border-radius: var(--r-md); }

  .stats { gap: var(--sp-8); }

  .nav__logo-img { height: 38px; }

  .testimonial { padding: var(--sp-6); }
  .testimonial__text { font-size: var(--t-base); }
  .testimonial::before { font-size: 3rem; }

  .card__body { padding: var(--sp-5); }

  .info-panel { padding: var(--sp-6); }

  .mobile-cta { padding: var(--sp-3) var(--gutter); }

  .menu-nav__inner { gap: var(--sp-2); padding: var(--sp-3) 0; }
  .menu-tab { padding: 0.5rem 1rem; font-size: var(--t-xs); }

  .section { padding: clamp(3rem, 6vw, 5rem) 0; }
}

@media (max-width: 400px) {
  .hero__eyebrow { font-size: 0.625rem; }
  .stats { flex-direction: column; gap: var(--sp-6); align-items: center; }
  .gallery-grid { columns: 1; }
}

/* ─────────────────────────────────────────────────────────────
   § 20  TOP BAR
   ───────────────────────────────────────────────────────────── */

.topbar {
  position   : sticky;
  top        : 0;
  z-index    : 950;
  height     : var(--topbar-h);
  background : var(--ink-900);
  font-size  : var(--t-xs);
  letter-spacing: 0.01em;
}

.topbar__inner {
  height    : 100%;
  display   : flex;
  align-items: center;
  justify-content: space-between;
  gap       : var(--sp-4);
}

.topbar__msg {
  color: rgba(255,255,255,.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.topbar__msg em {
  font-style: normal;
  font-family: var(--f-mono);
  font-size: 0.6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid rgba(226,76,110,.4);
  border-radius: var(--r-pill);
  padding: 1px 8px;
}

.topbar__right {
  display    : flex;
  align-items: center;
  gap        : var(--sp-6);
  flex-shrink: 0;
}

.topbar__link {
  color: rgba(255,255,255,.45);
  transition: color var(--dt-fast);
  font-weight: 400;
}
.topbar__link:hover { color: #fff; }

.topbar__link--gold {
  color: var(--gold);
  font-weight: 600;
}
.topbar__link--gold:hover { color: var(--gold-mid); }

/* ─────────────────────────────────────────────────────────────
   § 21  HERO SLIDER
   ───────────────────────────────────────────────────────────── */

.hero-slider {
  position  : relative;
  min-height: calc(100svh - var(--topbar-h) - var(--nav-h));
  background: var(--ink-900);
  overflow  : hidden;
}

.hero-slider .hero__body { z-index: 2; position: relative; }

.hero-slider__slides {
  position: absolute;
  inset   : 0;
  z-index : 0;
}

.hs-slide {
  position  : absolute;
  inset     : 0;
  opacity   : 0;
  transition: opacity 1.4s var(--ease-smooth);
  pointer-events: none;
}

.hs-slide.--active {
  opacity: 1;
  pointer-events: auto;
}

.hs-slide__media {
  position: absolute;
  inset   : 0;
}

.hs-slide__media img {
  width     : 100%;
  height    : 100%;
  object-fit: cover;
  opacity   : 0.45;
  display   : block;
}

.hs-slide__text {
  position: absolute;
  inset   : 0;
  display : flex;
  align-items: flex-end;
  z-index : 2;
}

.hs-slide__text .hero__title,
.hs-slide__text .hero__sub {
  opacity  : 0;
  transform: translateY(16px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}

.hs-slide__text .hero__sub {
  transition-delay: 0.12s;
}

.hs-slide.--active .hs-slide__text .hero__title,
.hs-slide.--active .hs-slide__text .hero__sub {
  opacity  : 1;
  transform: none;
}

/* Hero slider placeholder (sets section height) */
.hero-slider__sizer {
  min-height: calc(100svh - var(--topbar-h) - var(--nav-h));
  display   : flex;
  align-items: flex-end;
  pointer-events: none;
  visibility: hidden;
}

/* Dots */
.hero-slider__dots {
  position : absolute;
  bottom   : clamp(1.5rem, 3vw, 2.5rem);
  left     : 50%;
  transform: translateX(-50%);
  z-index  : 10;
  display  : flex;
  align-items: center;
  gap      : 8px;
}

.hero-dot {
  width        : 8px;
  height       : 8px;
  border-radius: 4px;
  background   : rgba(255,255,255,.3);
  border       : none;
  cursor       : pointer;
  padding      : 0;
  transition   : all 0.45s var(--ease-out);
}

.hero-dot.--active {
  background: var(--gold);
  width     : 28px;
}

/* Prev/Next arrows */
.hero-arrow {
  position : absolute;
  top      : 50%;
  transform: translateY(-50%);
  z-index  : 10;
  width    : 44px;
  height   : 44px;
  border-radius: 50%;
  border   : 1.5px solid rgba(255,255,255,.2);
  background: rgba(0,0,0,.25);
  color    : rgba(255,255,255,.7);
  font-size: 1.1rem;
  display  : flex;
  align-items: center;
  justify-content: center;
  transition: all var(--dt-base) var(--ease-out);
  backdrop-filter: blur(8px);
}

.hero-arrow:hover {
  border-color: rgba(255,255,255,.6);
  color: #fff;
  background: rgba(0,0,0,.45);
}

.hero-arrow--prev { left: clamp(1rem, 3vw, 2.5rem); }
.hero-arrow--next { right: clamp(1rem, 3vw, 2.5rem); }

/* ─────────────────────────────────────────────────────────────
   § 22  AUTO SLIDER CONTROLS (testimonials, events)
   ───────────────────────────────────────────────────────────── */

.slider-wrap {
  position: relative;
  overflow: hidden;
}

.slider-track {
  display   : flex;
  gap       : var(--sp-6);
  transition: transform 0.7s var(--ease-out);
  will-change: transform;
}

.slider-track > * {
  flex      : 0 0 calc((100% - 2 * var(--sp-6)) / 3);
  min-width : 0;
}

.slider-nav {
  display        : flex;
  align-items    : center;
  justify-content: center;
  gap            : var(--sp-4);
  margin-top     : var(--sp-10);
}

.slider-dots {
  display    : flex;
  align-items: center;
  gap        : 6px;
}

.slider-dot {
  width        : 7px;
  height       : 7px;
  border-radius: 50%;
  background   : var(--border);
  border       : none;
  cursor       : pointer;
  padding      : 0;
  transition   : all 0.35s var(--ease-out);
}

.slider-dot.--active {
  background   : var(--gold);
  width        : 20px;
  border-radius: 4px;
}

.slider-btn {
  width        : 40px;
  height       : 40px;
  border-radius: 50%;
  border       : 1.5px solid var(--border);
  display      : flex;
  align-items  : center;
  justify-content: center;
  color        : var(--ink-300);
  font-size    : 0.9rem;
  transition   : all var(--dt-base) var(--ease-out);
}

.slider-btn:hover {
  border-color: var(--ink-500);
  color       : var(--ink-700);
  background  : var(--bg-soft);
}

@media (max-width: 900px) {
  .slider-track > * {
    flex: 0 0 calc((100% - var(--sp-6)) / 2);
  }
}

@media (max-width: 600px) {
  .slider-track > * {
    flex: 0 0 100%;
  }
  .slider-btn { display: none; }
}

/* ─────────────────────────────────────────────────────────────
   § 23  CART DRAWER
   ───────────────────────────────────────────────────────────── */

.cart-overlay {
  position      : fixed;
  inset         : 0;
  background    : rgba(21,18,16,0.5);
  z-index       : 980;
  opacity       : 0;
  pointer-events: none;
  transition    : opacity var(--dt-slow) var(--ease-smooth);
  backdrop-filter: blur(2px);
}

.cart-overlay.--open {
  opacity       : 1;
  pointer-events: auto;
}

.cart-drawer {
  position : fixed;
  top      : 0;
  right    : 0;
  bottom   : 0;
  width    : 420px;
  max-width: 100vw;
  background: var(--bg-card);
  z-index  : 990;
  transform: translateX(100%);
  transition: transform var(--dt-slow) var(--ease-out);
  display  : flex;
  flex-direction: column;
  box-shadow: var(--sh-xl);
}

.cart-drawer.--open { transform: translateX(0); }

.cart-drawer__head {
  padding    : var(--sp-5) var(--sp-8);
  border-bottom: 1px solid var(--border);
  display    : flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  gap        : var(--sp-4);
}

.cart-drawer__title {
  font-family: var(--f-display);
  font-size  : var(--t-xl);
  font-weight: 700;
  color      : var(--ink-700);
  line-height: 1;
}

.cart-drawer__subtitle {
  font-size : var(--t-xs);
  color     : var(--ink-300);
  font-family: var(--f-mono);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-top: var(--sp-1);
}

.cart-close {
  width        : 36px;
  height       : 36px;
  border-radius: 50%;
  border       : 1.5px solid var(--border);
  display      : flex;
  align-items  : center;
  justify-content: center;
  color        : var(--ink-300);
  font-size    : 1rem;
  flex-shrink  : 0;
  transition   : all var(--dt-base) var(--ease-out);
}

.cart-close:hover {
  border-color: var(--ink-300);
  color: var(--ink-700);
  background: var(--bg-soft);
}

.cart-drawer__body {
  flex      : 1;
  overflow-y: auto;
  padding   : var(--sp-6) var(--sp-8);
}

.cart-empty {
  display       : flex;
  flex-direction: column;
  align-items   : center;
  justify-content: center;
  min-height    : 240px;
  text-align    : center;
  gap           : var(--sp-4);
}

.cart-empty__icon {
  font-size: 2.8rem;
  opacity  : 0.25;
  line-height: 1;
}

.cart-empty p {
  color    : var(--ink-300);
  font-size: var(--t-sm);
  margin   : 0;
  max-width: 100%;
  line-height: 1.6;
}

.cart-items {
  display       : flex;
  flex-direction: column;
}

.cart-item {
  display      : flex;
  gap          : var(--sp-4);
  padding      : var(--sp-5) 0;
  border-bottom: 1px solid var(--border);
  align-items  : flex-start;
}

.cart-item:last-child { border-bottom: none; }

.cart-item__info {
  flex     : 1;
  min-width: 0;
}

.cart-item__name {
  font-size  : var(--t-sm);
  font-weight: 600;
  color      : var(--ink-700);
  line-height: 1.3;
  margin-bottom: var(--sp-1);
}

.cart-item__cat {
  font-size     : var(--t-xs);
  color         : var(--ink-300);
  font-family   : var(--f-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cart-item__qty {
  display    : flex;
  align-items: center;
  gap        : var(--sp-3);
  margin-top : var(--sp-3);
}

.qty-btn {
  width        : 28px;
  height       : 28px;
  border-radius: 50%;
  border       : 1.5px solid var(--border);
  display      : flex;
  align-items  : center;
  justify-content: center;
  font-size    : 1rem;
  line-height  : 1;
  color        : var(--ink-500);
  transition   : all var(--dt-fast);
}

.qty-btn:hover {
  border-color: var(--gold);
  color       : var(--gold);
}

.qty-num {
  font-size  : var(--t-sm);
  font-weight: 600;
  color      : var(--ink-700);
  min-width  : 20px;
  text-align : center;
}

.cart-item__right {
  display       : flex;
  flex-direction: column;
  align-items   : flex-end;
  gap           : var(--sp-3);
  flex-shrink   : 0;
}

.cart-item__price {
  font-family: var(--f-display);
  font-size  : var(--t-md);
  font-weight: 700;
  color      : var(--gold);
  white-space: nowrap;
}

.cart-item__remove {
  font-size: var(--t-xs);
  color    : var(--ink-300);
  transition: color var(--dt-fast);
  text-decoration: underline;
}
.cart-item__remove:hover { color: var(--error); }

.cart-drawer__foot {
  padding     : var(--sp-6) var(--sp-8);
  border-top  : 1px solid var(--border);
  flex-shrink : 0;
  background  : var(--bg-base);
}

.cart-note {
  font-size  : var(--t-xs);
  color      : var(--ink-300);
  text-align : center;
  margin-bottom: var(--sp-4);
  line-height: 1.5;
}

.cart-total-row {
  display        : flex;
  justify-content: space-between;
  align-items    : baseline;
  margin-bottom  : var(--sp-5);
}

.cart-total-label {
  font-size     : var(--t-xs);
  color         : var(--ink-300);
  font-family   : var(--f-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.cart-total-amount {
  font-family: var(--f-display);
  font-size  : var(--t-2xl);
  font-weight: 700;
  color      : var(--ink-700);
}

/* Cart nav button */
.nav__cart {
  position     : relative;
  width        : 40px;
  height       : 40px;
  display      : flex;
  align-items  : center;
  justify-content: center;
  border-radius: var(--r-sm);
  color        : var(--ink-500);
  font-size    : 1.1rem;
  transition   : all var(--dt-base) var(--ease-out);
  flex-shrink  : 0;
}

.nav__cart:hover {
  background: var(--bg-soft);
  color     : var(--ink-700);
}

.nav__cart-count {
  position     : absolute;
  top          : 3px;
  right        : 3px;
  min-width    : 17px;
  height       : 17px;
  background   : var(--gold);
  color        : #fff;
  border-radius: var(--r-pill);
  font-size    : 10px;
  font-weight  : 700;
  font-family  : var(--f-body);
  display      : flex;
  align-items  : center;
  justify-content: center;
  padding      : 0 3px;
  opacity      : 0;
  transform    : scale(0.5);
  transition   : all var(--dt-base) var(--ease-spring);
}

.nav__cart-count.--has-items {
  opacity  : 1;
  transform: scale(1);
}

/* Add-to-cart button variant */
.btn--cart {
  background  : transparent;
  color       : var(--gold);
  border      : 1.5px solid var(--gold);
  border-radius: var(--r-pill);
}

.btn--cart:hover {
  background: var(--gold);
  color     : #fff;
  transform : translateY(-1px);
  box-shadow: 0 4px 16px rgba(226,76,110,.3);
}

.btn--cart:disabled {
  opacity: 0.6;
  cursor : not-allowed;
  transform: none;
}

/* ─────────────────────────────────────────────────────────────
   § 24  CATERING SECTION
   ───────────────────────────────────────────────────────────── */

.catering-grid {
  display              : grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
  gap                  : var(--sp-6);
  margin-top           : var(--sp-12);
}

.catering-card {
  background   : var(--bg-card);
  border       : 1px solid var(--border);
  border-radius: var(--r-lg);
  padding      : var(--sp-8);
  display      : flex;
  flex-direction: column;
  transition   : all var(--dt-slow) var(--ease-out);
  position     : relative;
  overflow     : hidden;
}

.catering-card::before {
  content   : '';
  position  : absolute;
  top       : 0;
  left      : 0;
  right     : 0;
  height    : 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-mid));
  transform : scaleX(0);
  transform-origin: left;
  transition: transform var(--dt-slow) var(--ease-out);
}

.catering-card:hover {
  transform : translateY(-4px);
  box-shadow: var(--sh-md);
  border-color: rgba(226,76,110,.2);
}

.catering-card:hover::before { transform: scaleX(1); }

.catering-card__icon {
  font-size    : 2rem;
  line-height  : 1;
  margin-bottom: var(--sp-5);
}

.catering-card__cap {
  font-family   : var(--f-mono);
  font-size     : var(--t-xs);
  color         : var(--gold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight   : 500;
  margin-bottom : var(--sp-3);
}

.catering-card__title {
  font-family  : var(--f-display);
  font-size    : var(--t-xl);
  font-weight  : 700;
  color        : var(--ink-700);
  line-height  : 1.2;
  margin-bottom: var(--sp-4);
}

.catering-card__text {
  font-size  : var(--t-sm);
  color      : var(--ink-500);
  line-height: 1.75;
  flex       : 1;
  max-width  : 100%;
  margin-bottom: var(--sp-6);
}

/* ─────────────────────────────────────────────────────────────
   § 25  TOPBAR RESPONSIVE
   ───────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .topbar__msg { display: none; }
  .topbar { height: 36px; }
  :root { --topbar-h: 36px; }
  .hero-arrow { display: none; }
}

/* ─────────────────────────────────────────────────────────────
   § 26  PREMIUM DESIGN DETAILS
   ───────────────────────────────────────────────────────────── */

/* Section with warm soft background */
.section.bg-soft,
.section--sm.bg-soft {
  background: linear-gradient(180deg, #F8F3EE 0%, var(--bg-soft) 100%);
}

/* Gold grain texture on dark sections */
.cta-band {
  position  : relative;
  overflow  : hidden;
}

.cta-band::before {
  content  : '';
  position : absolute;
  inset    : 0;
  background: radial-gradient(ellipse at 60% 50%, rgba(226,76,110,.18) 0%, transparent 70%),
              radial-gradient(ellipse at 20% 80%, rgba(226,76,110,.1) 0%, transparent 60%);
  pointer-events: none;
}

/* Richer hero gradient overlay */
.hero__media::after,
.hs-slide__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(21,18,16,.82) 0%,
    rgba(21,18,16,.35) 50%,
    rgba(21,18,16,.1) 100%
  );
}

/* Section h2 with subtle italic em accent */
.section h2 em,
.hero__title em {
  font-style: italic;
  color      : var(--gold);
  font-weight: 400;
}

/* Better spotlight design */
.spotlight {
  position: relative;
}

.spotlight::before {
  content  : '';
  position : absolute;
  top      : -2px;
  left     : 0;
  right    : 0;
  height   : 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity  : 0.4;
}

/* Menu item card subtle left accent on hover */
.menu-item:hover {
  border-left-color: var(--gold);
  border-left-width: 3px;
}

/* Testimonial: cleaner, more elegant */
.testimonial {
  padding      : var(--sp-8);
  background   : var(--bg-card);
  border       : 1px solid var(--border);
  border-radius: var(--r-lg);
  transition   : all var(--dt-slow) var(--ease-out);
  position     : relative;
}

.testimonial::before {
  content      : '\201C';
  position     : absolute;
  top          : var(--sp-4);
  right        : var(--sp-6);
  font-family  : var(--f-display);
  font-size    : 4rem;
  line-height  : 1;
  color        : var(--gold);
  opacity      : 0.12;
  pointer-events: none;
}

.testimonial:hover {
  transform  : translateY(-3px);
  box-shadow : 0 12px 36px rgba(61,50,41,.1);
  border-color: rgba(226,76,110,.2);
}

/* Nav scrolled: thin gold top border — see §05 for base rule */

/* Better section divider between light and dark sections */
.cta-band + .section,
.section + .cta-band {
  margin-top: 0;
}

/* Infostrip gold accent */
.infostrip__icon {
  background: linear-gradient(135deg, var(--gold-lt), var(--bg-soft));
}

/* Premium button glow on primary */
.btn--primary:hover {
  box-shadow: 0 6px 24px rgba(31,166,81,.3), 0 2px 8px rgba(31,166,81,.15);
}

.btn--gold:hover {
  box-shadow: 0 6px 24px rgba(226,76,110,.35);
}

/* Form focus ring more visible */
.form-input:focus {
  box-shadow: 0 0 0 3px rgba(226,76,110,.15);
}

/* ─────────────────────────────────────────────────────────────
   § 27  TYPEWRITER EFFECT
   ───────────────────────────────────────────────────────────── */

.tw-cursor {
  display      : inline-block;
  width        : 1.5px;
  height       : 0.85em;
  background   : var(--gold);
  margin-left  : 1px;
  vertical-align: text-bottom;
  border-radius: 1px;
  animation    : tw-blink 0.65s step-end infinite;
}

@keyframes tw-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

[data-typewriter] {
  min-height: 1.2em;
}

/* ─────────────────────────────────────────────────────────────
   § 28  SCROLL PROGRESS BAR
   ───────────────────────────────────────────────────────────── */

.scroll-progress {
  position  : fixed;
  top       : calc(var(--topbar-h) + var(--nav-h));
  left      : 0;
  height    : 2px;
  width     : 0%;
  background: linear-gradient(90deg, var(--gold), var(--gold-mid), #E87590);
  z-index   : 995;
  pointer-events: none;
  transition: width 0.08s linear;
}

/* ─────────────────────────────────────────────────────────────
   § 29  DIRECTIONS BUTTON
   ───────────────────────────────────────────────────────────── */

.btn--dir {
  background  : var(--green);
  color       : #fff;
  border      : 1.5px solid var(--green);
  display     : flex;
  align-items : center;
  gap         : 0.4em;
}

.btn--dir:hover {
  background  : var(--green-dk);
  border-color: var(--green-dk);
  transform   : translateY(-1px);
  box-shadow  : 0 6px 20px rgba(31,166,81,.3);
}

.btn--dir:active { transform: translateY(0); }

/* ─────────────────────────────────────────────────────────────
   § 30  CUSTOM SCROLLBAR
   ───────────────────────────────────────────────────────────── */

::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-soft); }
::-webkit-scrollbar-thumb {
  background   : rgba(226,76,110,.4);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(226,76,110,.4) var(--bg-soft);
}

/* ─────────────────────────────────────────────────────────────
   § 31  FOCUS / INTERACTION IMPROVEMENTS
   ───────────────────────────────────────────────────────────── */

/* Visible keyboard focus ring */
*:focus-visible {
  outline       : 2px solid var(--gold);
  outline-offset: 3px;
  border-radius : 4px;
}

/* Smooth link transitions */
a, button { transition-duration: var(--dt-base); }

/* Active press states */
.btn:active { transform: scale(0.97) translateY(1px); }

/* scroll-behavior and scroll-padding-top are set in §02 base — no duplicate needed */

/* Mobile CTA row equal spacing */
.mobile-cta__row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--sp-2);
}

.mobile-cta__row .btn {
  justify-content: center;
  text-align     : center;
  padding-left   : var(--sp-3);
  padding-right  : var(--sp-3);
  font-size      : 0.8125rem;
  letter-spacing : 0.03em;
}

@media (max-width: 400px) {
  .mobile-cta__row { gap: var(--sp-1); }
  .mobile-cta__row .btn { font-size: 0.75rem; padding: 0.7rem var(--sp-2); }
}

/* ─────────────────────────────────────────────────────────────
   § 33  FLOATING WIDGETS (WhatsApp + Call)
   ───────────────────────────────────────────────────────────── */

.float-widgets {
  position      : fixed;
  bottom        : 2rem;
  right         : 1.5rem;
  z-index       : 800;
  display       : flex;
  flex-direction: column;
  gap           : 0.75rem;
  align-items   : flex-end;
}

@media (max-width: 900px) {
  .float-widgets { bottom: 5.5rem; } /* above mobile CTA bar */
}

.float-btn {
  width          : 52px;
  height         : 52px;
  border-radius  : 50%;
  display        : flex;
  align-items    : center;
  justify-content: center;
  box-shadow     : 0 4px 20px rgba(0,0,0,.22), 0 1px 4px rgba(0,0,0,.12);
  transition     : transform 0.3s var(--ease-spring), box-shadow 0.3s;
  animation      : floatBounce 2.4s ease-in-out infinite;
  color          : #fff;
  text-decoration: none;
  flex-shrink    : 0;
}

.float-btn--wa   { background: #25D366; animation-delay: 0s; }
.float-btn--call { background: var(--gold); animation-delay: 0.4s; }

.float-btn:hover {
  transform                : scale(1.18);
  box-shadow               : 0 8px 28px rgba(0,0,0,.3);
  animation-play-state     : paused;
}

@keyframes floatBounce {
  0%, 100% { transform: translateY(0);    }
  50%       { transform: translateY(-7px); }
}

/* ─────────────────────────────────────────────────────────────
   § 34  MENU PANEL SCROLL MARGIN (prevents sticky nav overlap)
   ───────────────────────────────────────────────────────────── */

.menu-panel {
  scroll-margin-top: calc(var(--topbar-h) + var(--nav-h) + 56px);
}

/* ─────────────────────────────────────────────────────────────
   § 35  CATERING CARD PREMIUM REDESIGN
   ───────────────────────────────────────────────────────────── */

.catering-grid {
  display              : grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap                  : var(--sp-6);
}

.catering-card {
  background   : var(--bg-card);
  border       : 1px solid var(--border);
  border-radius: var(--r-xl);
  padding      : var(--sp-8) var(--sp-8) var(--sp-8);
  display      : flex;
  flex-direction: column;
  position     : relative;
  overflow     : hidden;
  transition   : transform 0.45s var(--ease-out),
                 box-shadow 0.45s var(--ease-out),
                 border-color 0.35s;
}

.catering-card::before {
  content   : '';
  position  : absolute;
  top       : 0;
  left      : 0;
  right     : 0;
  height    : 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-mid), transparent);
  opacity   : 0;
  transition: opacity 0.35s;
}

.catering-card:hover {
  transform   : translateY(-6px);
  box-shadow  : 0 20px 60px rgba(21,18,16,.1);
  border-color: rgba(226,76,110,.3);
}

.catering-card:hover::before { opacity: 1; }

.catering-card__icon {
  width          : 56px;
  height         : 56px;
  border-radius  : var(--r-md);
  background     : var(--gold-lt);
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-size      : 1.5rem;
  margin-bottom  : var(--sp-6);
  flex-shrink    : 0;
  transition     : background 0.3s, transform 0.3s var(--ease-spring);
}

.catering-card:hover .catering-card__icon {
  background : var(--gold);
  transform  : scale(1.1) rotate(-4deg);
  filter     : brightness(1.1);
}

.catering-card__cap {
  font-family   : var(--f-mono);
  font-size     : var(--t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color         : var(--gold);
  margin-bottom : var(--sp-2);
}

.catering-card__title {
  font-family  : var(--f-display);
  font-size    : var(--t-xl);
  font-weight  : 700;
  color        : var(--ink-700);
  line-height  : 1.15;
  margin-bottom: var(--sp-4);
}

.catering-card__text {
  font-size  : var(--t-sm);
  color      : var(--ink-500);
  line-height: 1.7;
  flex       : 1;
  margin-bottom: var(--sp-5);
  max-width  : 100%;
}

.catering-card ul {
  list-style   : none;
  padding      : 0;
  margin-bottom: var(--sp-6);
}

.catering-card ul li {
  font-size    : var(--t-sm);
  color        : var(--ink-500);
  line-height  : 1;
  padding      : 0.45rem 0;
  border-bottom: 1px solid var(--border);
  display      : flex;
  align-items  : center;
  gap          : var(--sp-2);
}

.catering-card ul li:last-child { border-bottom: none; }

.catering-card ul li::before {
  content         : '';
  display         : inline-block;
  width           : 6px;
  height          : 6px;
  border-radius   : 50%;
  background      : var(--gold);
  flex-shrink     : 0;
}

/* Mobile footer extra padding (covers fixed CTA bar) */
@media (max-width: 900px) {
  .footer { padding-bottom: 5.5rem; }
}

/* ─────────────────────────────────────────────────────────────
   § 36  SUBSCRIBE / NEWSLETTER
   ───────────────────────────────────────────────────────────── */

.subscribe-section {
  background: linear-gradient(180deg, var(--bg-base) 0%, var(--bg-soft) 100%);
}

.subscribe-card {
  text-align    : center;
  background    : var(--bg-card);
  border        : 1px solid var(--border);
  border-radius : var(--r-lg);
  padding       : var(--sp-8) var(--sp-6);
  position      : relative;
  overflow      : hidden;
  box-shadow    : var(--sh-sm);
}

.subscribe-card::before {
  content   : '';
  position  : absolute;
  top       : 0;
  left      : 0;
  right     : 0;
  height    : 3px;
  background: linear-gradient(90deg, var(--green), var(--gold), var(--green));
}

.subscribe-card__icon {
  display        : inline-flex;
  align-items    : center;
  justify-content: center;
  width          : 60px;
  height         : 60px;
  border-radius  : 50%;
  background     : var(--gold-lt);
  color          : var(--gold);
  margin         : 0 auto var(--sp-5);
}

.subscribe-card__title {
  font-family  : var(--f-display);
  font-size    : var(--t-3xl);
  font-weight  : 700;
  color        : var(--ink-700);
  margin-bottom: var(--sp-4);
  line-height  : 1.15;
}

.subscribe-card__desc {
  font-size    : var(--t-sm);
  color        : var(--ink-300);
  line-height  : 1.7;
  max-width    : 44ch;
  margin       : 0 auto var(--sp-8);
}

.subscribe-form__row {
  display   : flex;
  gap       : var(--sp-3);
  max-width : 460px;
  margin    : 0 auto;
}

.subscribe-form__input {
  flex: 1;
}

.subscribe-form__btn {
  flex-shrink : 0;
  white-space : nowrap;
}

.subscribe-form__note {
  font-size  : var(--t-xs);
  color      : var(--ink-300);
  margin-top : var(--sp-4);
  text-align : center;
}

@media (max-width: 520px) {
  .subscribe-form__row {
    flex-direction: column;
  }
  .subscribe-card {
    padding: var(--sp-8) var(--sp-5);
  }
}

/* ─────────────────────────────────────────────────────────────
   § 37  LANGUAGE SWITCHER
   ───────────────────────────────────────────────────────────── */

.lang-switch {
  display    : flex;
  align-items: center;
  gap        : var(--sp-2);
  margin-left: var(--sp-3);
}

.lang-switch__current,
.lang-switch__btn {
  display        : inline-flex;
  align-items    : center;
  gap            : 4px;
  font-family    : var(--f-mono);
  font-size      : 0.6875rem;
  letter-spacing : 0.06em;
  font-weight    : 600;
  text-decoration: none;
  padding        : 2px 8px;
  border-radius  : var(--r-pill);
  transition     : all 0.2s var(--ease-out);
  line-height    : 1;
}

.lang-switch__current {
  color     : var(--ink-700);
  background: transparent;
}

.lang-switch__btn {
  color       : var(--ink-300);
  background  : rgba(0,0,0,.04);
  border      : 1px solid var(--border);
}

.lang-switch__btn:hover {
  color       : var(--ink-700);
  background  : var(--gold-lt);
  border-color: var(--gold);
  transform   : translateY(-1px);
}

.lang-flag {
  display       : inline-block;
  vertical-align: middle;
  border-radius : 1px;
  flex-shrink   : 0;
}

/* Topbar: lighter colors on default topbar */
.topbar .lang-switch__current { color: var(--ink-500); }
.topbar .lang-switch__btn     { color: var(--ink-300); background: rgba(0,0,0,.02); border-color: var(--border); }
.topbar .lang-switch__btn:hover { color: var(--gold); background: var(--gold-lt); border-color: var(--gold); }

@media (max-width: 900px) {
  .lang-switch { margin-left: 0; }
}

/* ─────────────────────────────────────────────────────────────
   § 32  EXPERT HOVER & INTERACTION STYLES
   ───────────────────────────────────────────────────────────── */

/* ── Link sweep underline (non-btn) ── */
.footer__link,
.nav__drawer .nav__link {
  position: relative;
  overflow: hidden;
}

.footer__link::before {
  content         : '';
  position        : absolute;
  bottom          : -1px;
  left            : 0;
  width           : 100%;
  height          : 1px;
  background      : var(--gold);
  transform       : scaleX(0);
  transform-origin: right;
  transition      : transform 0.32s var(--ease-out);
}

.footer__link:hover { color: #fff; }
.footer__link:hover::before {
  transform       : scaleX(1);
  transform-origin: left;
}

/* ── Card image zoom on hover ── */
.card__img-wrap { overflow: hidden; }
.card__img {
  transition: transform 0.7s var(--ease-out);
}
.card:hover .card__img { transform: scale(1.06); }

/* ── Spotlight image lift ── */
.spotlight__img {
  transition: transform 1s var(--ease-out);
}
.spotlight:hover .spotlight__img { transform: scale(1.04); }

/* ── Gallery image hover ── */
.gallery-item img {
  transition: transform 0.6s var(--ease-out), filter 0.5s;
}
.gallery-item:hover img {
  transform: scale(1.07);
  filter   : brightness(1.08) contrast(1.02);
}

/* ── Menu item card accent on hover (left border only, no padding conflict) ── */

/* ── Bold section title weight boost ── */
.section h2,
.section--sm h2,
.section--lg h2 {
  font-weight: 800;
  letter-spacing: -0.03em;
}

/* ── Handwriting label accent in section intros ── */
.intro .label + h2 span.hand,
.section .label + h2 span.hand {
  display: block;
  font-size: 0.6em;
  margin-top: 0.15em;
}

/* ── CTA band bold text ── */
.cta-band h2 {
  font-size  : var(--t-4xl);
  font-weight: 800;
}

/* ── Stat numbers bolder ── */
.stat__num {
  font-size  : clamp(2.5rem, 5vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.04em;
}

/* ── Mouse parallax container ── */
.parallax-scene {
  transform-style: preserve-3d;
  perspective    : 1000px;
}

.parallax-layer {
  transition: transform 0.12s linear;
  will-change: transform;
}

/* ── Magnetic button base ── */
.btn--magnetic {
  transition: transform 0.2s var(--ease-spring),
              box-shadow 0.2s var(--ease-smooth);
}

/* ── Reveal stagger ── */
.reveal {
  opacity  : 0;
  transform: translateY(20px);
  transition: opacity 0.7s var(--ease-out),
              transform 0.7s var(--ease-out);
}

.reveal.in-view { opacity: 1; transform: none; }

/* ── Slide-from-left variant ── */
.reveal-left {
  opacity  : 0;
  transform: translateX(-28px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.reveal-left.in-view { opacity: 1; transform: none; }

/* ── Slide-from-right variant ── */
.reveal-right {
  opacity  : 0;
  transform: translateX(28px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.reveal-right.in-view { opacity: 1; transform: none; }

/* ── Scale-in variant ── */
.reveal-scale {
  opacity  : 0;
  transform: scale(0.93);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
.reveal-scale.in-view { opacity: 1; transform: none; }

/* ── Hero slide text ── */
.hs-slide__text .hero__body {
  text-align: center;
}

/* ── Page hero centering ── */
.hero--page {
  align-items    : center;
  padding-bottom : 0;
}

.hero--page .hero__body {
  text-align: center;
  padding   : var(--sp-24) 0 var(--sp-12);
  max-width : 700px;
}

/* ── Footer bottom bar ── */
.footer__bottom {
  padding-top: var(--sp-6);
}

.footer__devlink {
  font-family   : var(--f-hand);
  font-size     : 0.95rem;
  color         : var(--gold);
  font-weight   : 600;
  transition    : all 0.25s;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
}
.footer__devlink:hover {
  text-decoration-color: var(--gold);
  opacity: 0.8;
}

/* ── Cart checkout step ── */
.cart-checkout {
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.cart-checkout__title {
  font-family: var(--f-display);
  font-size  : var(--t-xl);
  font-weight: 700;
  color      : var(--ink-700);
  margin-bottom: var(--sp-2);
}

.cart-checkout .form-group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.cart-checkout label {
  font-size  : var(--t-sm);
  font-weight: 600;
  color      : var(--ink-500);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.cart-checkout .form-input {
  padding      : var(--sp-4);
  border-radius: var(--r-md);
  border       : 1.5px solid var(--border);
  font-size    : var(--t-base);
  background   : var(--bg-base);
  transition   : border-color 0.2s, box-shadow 0.2s;
  width        : 100%;
}

.cart-checkout .form-input:focus {
  border-color: var(--gold);
  box-shadow  : 0 0 0 3px rgba(226,76,110,.12);
  outline     : none;
}

.cart-checkout-back {
  background: none;
  border    : none;
  color     : var(--ink-300);
  font-size : var(--t-sm);
  cursor    : pointer;
  display   : flex;
  align-items: center;
  gap       : var(--sp-2);
  padding   : 0;
  transition: color 0.2s;
}

.cart-checkout-back:hover { color: var(--ink-700); }

.cart-success {
  text-align : center;
  padding    : var(--sp-12) var(--sp-6);
  display    : flex;
  flex-direction: column;
  align-items: center;
  gap        : var(--sp-4);
}

.cart-success__icon {
  width        : 60px;
  height       : 60px;
  background   : var(--gold-lt);
  border-radius: 50%;
  display      : flex;
  align-items  : center;
  justify-content: center;
  font-size    : 1.5rem;
}

.cart-success__title {
  font-family: var(--f-display);
  font-size  : var(--t-2xl);
  font-weight: 700;
  color      : var(--ink-700);
}

/* ── Mouse cursor highlight ── */
.cursor-glow {
  position      : fixed;
  width         : 320px;
  height        : 320px;
  border-radius : 50%;
  background    : radial-gradient(circle, rgba(255,255,255,.08) 0%, transparent 70%);
  pointer-events: none;
  z-index       : 9999;
  transform     : translate(-50%, -50%);
  transition    : opacity 0.4s;
  opacity       : 0;
}