/* =========================================================
   Marco Fufu — PREMIUM REBRAND Stylesheet
   Luxury restaurant: deep ember + molten gold palette,
   glassmorphism, mesh gradients, cinematic motion,
   noise textures, parallax, 3D-tilt cards.
   ========================================================= */

:root {
    /* ==== Palette: Terracotta + Antique Gold (warm, earthy, realistic) ==== */
    --ember-50:  #FBF1EA;
    --ember-100: #F3DCC9;
    --ember-200: #E6BB98;
    --ember-300: #D89A6C;
    --ember-400: #C97D48;
    --ember-500: #B5652F;
    --ember-600: #99511F;
    --ember-700: #7A3F18;
    --ember-800: #5C2F12;
    --ember-900: #3A1D0B;

    --gold-300: #E8C77A;
    --gold-400: #D4A94F;
    --gold-500: #BC8B33;
    --gold-600: #9A6F26;
    --gold-700: #785419;
    --gold-gradient: linear-gradient(135deg, #E8C77A 0%, #D4A94F 35%, #9A6F26 70%, #C9A25E 100%);
    --gold: var(--gold-500);
    --white: #ffffff;

    --forest-400: #3E7A54;
    --forest-500: #2F6144;
    --forest-600: #1F4A33;
    --forest-700: #163825;
    --forest-900: #0B1A12;

    --cream:   #F7EFE1;
    --cream-2: #EFE0C4;
    --ivory:   #FFFBF5;

    --ink-950: #140F0B;
    --ink-900: #1E1712;
    --ink-850: #241C16;
    --ink-800: #2C221A;
    --ink-700: #392C21;
    --ink-600: #4A3A2B;
    --ink-500: #6B5741;
    --ink-400: #9A8468;
    --ink-300: #C4B096;

    --plum-700: #3A2418;
    --wine-800: #4A2418;

    /* ==== Typography ==== */
    --font-display: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
    --font-body:    'Jost', 'Inter', 'Segoe UI', system-ui, sans-serif;

    /* ==== Radii ==== */
    --radius-sm: 10px;
    --radius:    18px;
    --radius-lg: 28px;
    --radius-xl: 40px;
    --radius-pill: 999px;

    /* ==== Shadows (3 layers: umbra + penumbra + ambient) ==== */
    --shadow-xs:  0 1px 2px rgba(20,15,11,0.10), 0 1px 3px rgba(20,15,11,0.06);
    --shadow-sm:  0 2px 6px rgba(20,15,11,0.10), 0 4px 16px rgba(20,15,11,0.08);
    --shadow-md:  0 6px 16px rgba(20,15,11,0.12), 0 18px 40px -10px rgba(20,15,11,0.22);
    --shadow-lg:  0 12px 32px rgba(20,15,11,0.18), 0 30px 70px -18px rgba(20,15,11,0.34);
    --shadow-xl:  0 24px 60px rgba(20,15,11,0.28), 0 60px 120px -30px rgba(181,101,47,0.18);
    --shadow-gold: 0 10px 40px -8px rgba(188,139,51,0.45), 0 2px 8px rgba(20,15,11,0.15);
    --shadow-ember: 0 14px 50px -10px rgba(181,101,47,0.55), 0 4px 14px rgba(20,15,11,0.2);

    /* ==== Motion ==== */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out-expo: cubic-bezier(0.87, 0, 0.13, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ==== Layout ==== */
    --max-w: 1240px;
}

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

html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
    font-family: var(--font-body);
    background: var(--cream);
    color: var(--ink-900);
    overflow-x: hidden;
    line-height: 1.65;
    font-weight: 400;
    letter-spacing: 0.01em;
    position: relative;
}

/* Noise grain overlay (global, subtle) */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.035;
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.7 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    background-size: 240px 240px;
    mix-blend-mode: multiply;
}

/* Gradient selection */
::selection {
    background: linear-gradient(135deg, var(--ember-500), var(--gold-500));
    color: var(--ivory);
    -webkit-text-fill-color: var(--ivory);
}

h1, h2, h3, h4, h5, h6, .display {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--ink-900);
    letter-spacing: -0.01em;
    line-height: 1.15;
}

a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
ul { list-style: none; }
button { font-family: inherit; }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ink-900); }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--ember-500), var(--gold-500));
    border-radius: var(--radius-pill);
    border: 2px solid var(--ink-900);
}
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--ember-400), var(--gold-400));
}

.container {
    width: 100%;
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 28px;
    position: relative;
    z-index: 2;
}

/* ===== Scroll progress bar ===== */
#scroll-progress {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    width: 0%;
    z-index: 10000;
    background: var(--gold-gradient);
    box-shadow: 0 0 12px rgba(212,169,79,0.7);
    transition: width 0.08s linear;
}

/* ===== Section labels + titles ===== */
.section-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-body);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 16px;
    position: relative;
}
.section-label::before {
    content: '';
    display: inline-block;
    width: 28px;
    height: 1px;
    background: currentColor;
    opacity: 0.6;
}
.section-label.dark  { color: var(--ember-600); }
.section-label.light { color: var(--gold-400); }

.section-title {
    font-size: clamp(34px, 4.6vw, 58px);
    margin-bottom: 18px;
    line-height: 1.08;
}
.section-title.text-gradient {
    background: linear-gradient(135deg, var(--ink-900) 0%, var(--ember-700) 50%, var(--gold-600) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.section-title.text-gradient-light {
    background: linear-gradient(135deg, var(--cream) 0%, var(--gold-300) 45%, var(--ember-300) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.section-sub {
    color: var(--ink-500);
    max-width: 580px;
    margin-bottom: 52px;
    font-size: 16px;
    line-height: 1.75;
}
.section-sub.light { color: rgba(251,242,226,0.7); }

/* ===== Premium Buttons (magnetic-ready) ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 30px;
    border-radius: var(--radius-pill);
    font-weight: 600;
    letter-spacing: 0.02em;
    border: none;
    cursor: pointer;
    transition:
        transform 0.5s var(--ease-spring),
        box-shadow 0.4s var(--ease-out-expo),
        background 0.4s var(--ease-out-expo),
        color 0.3s ease,
        border-color 0.3s ease;
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.1;
    position: relative;
    overflow: hidden;
    will-change: transform;
    -webkit-tap-highlight-color: transparent;
    min-height: 44px;
    box-sizing: border-box;
    text-decoration: none;
}

/* Sizing variants */
.btn-sm {
    padding: 9px 20px;
    font-size: 12.5px;
    min-height: 36px;
    gap: 6px;
}
.btn-lg {
    padding: 18px 42px;
    font-size: 15.5px;
    min-height: 56px;
}
.btn-block { width: 100%; }

/* Shine sweep overlay */
.btn::after {
    content: '';
    position: absolute;
    top: 0; left: -75%;
    width: 50%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent);
    transform: skewX(-20deg);
    transition: left 0.8s var(--ease-out-expo);
    pointer-events: none;
}
.btn:hover::after { left: 125%; }

.btn-primary {
    background: var(--gold-gradient);
    color: var(--ink-950);
    box-shadow: var(--shadow-gold);
    background-size: 200% 200%;
    animation: btnShimmer 6s ease-in-out infinite;
}
@keyframes btnShimmer {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 46px -10px rgba(188,139,51,0.6), 0 6px 18px rgba(20,15,11,0.16);
}
.btn-primary:active { transform: translateY(-1px) scale(0.992); }

.btn-outline {
    background: transparent;
    border: 1.5px solid rgba(251,242,226,0.45);
    color: var(--cream);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.btn-outline::before {
    content: '';
    position: absolute; inset: 0;
    background: rgba(251,242,226,0.06);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.btn-outline:hover {
    border-color: var(--gold-400);
    color: var(--gold-300);
    transform: translateY(-2px);
    box-shadow: 0 10px 30px -10px rgba(188,139,51,0.32);
}
.btn-outline:hover::before { opacity: 1; }

.btn-dark {
    background: var(--ink-900);
    color: var(--cream);
    box-shadow: var(--shadow-md);
}
.btn-dark:hover {
    background: var(--ember-700);
    transform: translateY(-2px);
    box-shadow: var(--shadow-ember);
}

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    min-height: 44px;
    padding: 0;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    color: inherit;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.3s var(--ease-out-expo);
}
.btn-icon:hover {
    background: var(--gold-500);
    color: var(--ink-950);
    transform: rotate(8deg) scale(1.08);
    border-color: var(--gold-400);
}

/* ===== Reveal-on-scroll: multiple variants ===== */
.reveal {
    opacity: 0;
    transform: translateY(48px);
    transition:
        opacity 1.1s var(--ease-out-expo),
        transform 1.1s var(--ease-out-expo),
        filter 1.1s var(--ease-out-expo);
    filter: blur(6px);
    will-change: transform, opacity, filter;
}
.reveal.in-view {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}
.reveal-left {
    opacity: 0;
    transform: translateX(-60px) rotateY(-8deg);
    transition:
        opacity 1s var(--ease-out-expo),
        transform 1s var(--ease-out-expo),
        filter 1s var(--ease-out-expo);
    filter: blur(6px);
    transform-origin: left center;
    perspective: 1000px;
}
.reveal-left.in-view { opacity: 1; transform: translateX(0) rotateY(0); filter: blur(0); }

.reveal-right {
    opacity: 0;
    transform: translateX(60px) rotateY(8deg);
    transition:
        opacity 1s var(--ease-out-expo),
        transform 1s var(--ease-out-expo),
        filter 1s var(--ease-out-expo);
    filter: blur(6px);
    transform-origin: right center;
    perspective: 1000px;
}
.reveal-right.in-view { opacity: 1; transform: translateX(0) rotateY(0); filter: blur(0); }

.reveal-scale {
    opacity: 0;
    transform: scale(0.92);
    transition:
        opacity 1s var(--ease-out-expo),
        transform 1s var(--ease-spring);
}
.reveal-scale.in-view { opacity: 1; transform: scale(1); }

.reveal-clip {
    clip-path: inset(0 0 100% 0);
    transition: clip-path 1.2s var(--ease-out-expo);
}
.reveal-clip.in-view { clip-path: inset(0 0 0 0); }

/* Stagger delay helpers */
.delay-1, .reveal-delay-1 { transition-delay: 0.08s !important; }
.delay-2, .reveal-delay-2 { transition-delay: 0.16s !important; }
.delay-3, .reveal-delay-3 { transition-delay: 0.24s !important; }
.delay-4, .reveal-delay-4 { transition-delay: 0.32s !important; }
.delay-5, .reveal-delay-5 { transition-delay: 0.40s !important; }
.delay-6, .reveal-delay-6 { transition-delay: 0.48s !important; }

/* ===== Text split: lines/words/chars ===== */
.split-line {
    display: block;
    overflow: hidden;
}
.split-line > .inner {
    display: block;
    transform: translateY(110%);
    opacity: 0;
    transition:
        transform 1.1s var(--ease-out-expo),
        opacity 1.1s var(--ease-out-expo);
}
.in-view .split-line > .inner,
.split-line.in-view > .inner {
    transform: translateY(0);
    opacity: 1;
}

/* ===== Magnetic hover (JS applies transform) ===== */
[data-magnetic] {
    will-change: transform;
    transition: transform 0.35s var(--ease-spring);
}

/* ===== 3D Tilt (JS) ===== */
[data-tilt] {
    transform-style: preserve-3d;
    transition: transform 0.2s var(--ease-out-expo), box-shadow 0.4s ease;
    will-change: transform;
}
[data-tilt] > * {
    transform: translateZ(var(--tz, 0px));
    transition: transform 0.2s var(--ease-out-expo);
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
    .reveal, .reveal-left, .reveal-right, .reveal-scale, .reveal-clip {
        opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important;
    }
    * { scroll-behavior: auto !important; animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* =========================================================
   Navbar — ultra-glass + morphing shadow
   ========================================================= */
.navbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 56px;
    background: linear-gradient(180deg, rgba(20,15,11,0.55) 0%, rgba(20,15,11,0) 100%);
    backdrop-filter: blur(0px) saturate(1);
    -webkit-backdrop-filter: blur(0px) saturate(1);
    transition:
        background 0.5s var(--ease-out-expo),
        padding 0.5s var(--ease-out-expo),
        box-shadow 0.5s var(--ease-out-expo),
        backdrop-filter 0.5s var(--ease-out-expo),
        border-color 0.5s ease;
    border-bottom: 1px solid transparent;
}
.navbar.scrolled {
    background: rgba(20,15,11,0.72);
    backdrop-filter: blur(22px) saturate(1.6);
    -webkit-backdrop-filter: blur(22px) saturate(1.6);
    padding: 14px 56px;
    border-bottom: 1px solid rgba(212,169,79,0.14);
    box-shadow:
        0 10px 40px -12px rgba(20,15,11,0.7),
        inset 0 -1px 0 rgba(255,255,255,0.04);
}
.navbar .logo {
    display: flex; align-items: center; gap: 12px;
    position: relative;
    z-index: 2;
}
.navbar .logo img {
    height: 44px; width: auto;
    border-radius: 10px;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.35));
    transition: transform 0.4s var(--ease-spring);
}
.navbar .logo:hover img { transform: scale(1.08) rotate(-2deg); }
.navbar .logo-text {
    font-family: var(--font-display);
    font-size: 23px;
    color: var(--cream);
    font-weight: 700;
    letter-spacing: 0.02em;
    background: linear-gradient(135deg, var(--cream) 0%, var(--gold-300) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
}
.navbar .logo-text::after {
    content: '';
    position: absolute;
    left: 0; bottom: -4px;
    width: 0; height: 2px;
    background: var(--gold-gradient);
    transition: width 0.5s var(--ease-out-expo);
}
.navbar .logo:hover .logo-text::after { width: 100%; }

.nav-links { display: flex; gap: 6px; align-items: center; }
.nav-links a {
    color: var(--cream);
    font-size: 14px;
    letter-spacing: 0.02em;
    position: relative;
    padding: 10px 16px;
    border-radius: var(--radius-pill);
    transition:
        color 0.3s ease,
        background 0.3s ease,
        transform 0.35s var(--ease-spring);
    font-weight: 500;
    opacity: 0.92;
}
.nav-links a::before {
    content: '';
    position: absolute;
    left: 50%; bottom: 4px;
    width: 0; height: 2px;
    background: var(--gold-gradient);
    transform: translateX(-50%);
    transition: width 0.4s var(--ease-out-expo);
    border-radius: 2px;
    box-shadow: 0 0 8px rgba(212,169,79,0.6);
}
.nav-links a:hover {
    color: var(--gold-300);
    background: rgba(212,169,79,0.08);
    transform: translateY(-2px);
    opacity: 1;
}
.nav-links a:hover::before { width: calc(100% - 32px); }

.nav-right { display: flex; align-items: center; gap: 18px; }
.lang-switch {
    display: flex; align-items: center; gap: 2px;
    padding: 4px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--radius-pill);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.lang-switch a {
    color: var(--cream);
    font-size: 12px;
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    opacity: 0.6;
    font-weight: 600;
    letter-spacing: 0.05em;
    transition: all 0.3s var(--ease-out-expo);
}
.lang-switch a.active {
    background: var(--gold-gradient);
    color: var(--ink-950);
    opacity: 1;
    box-shadow: 0 2px 10px -2px rgba(212,169,79,0.5);
}
.lang-switch a:not(.active):hover { opacity: 1; color: var(--gold-300); }

.nav-toggle {
    display: none;
    color: var(--cream);
    font-size: 28px;
    cursor: pointer;
    background: none;
    border: none;
    width: 44px; height: 44px;
    border-radius: 12px;
    transition: all 0.3s ease;
    align-items: center; justify-content: center;
}
.nav-toggle:hover { background: rgba(255,255,255,0.08); transform: rotate(90deg); }

@media (max-width: 940px) {
    .navbar { padding: 16px 22px; }
    .navbar.scrolled { padding: 12px 22px; }
    .nav-links {
        position: fixed; top: 0; right: -100%;
        height: 100vh; width: 300px;
        background:
            radial-gradient(ellipse at top, rgba(181,101,47,0.12), transparent 60%),
            linear-gradient(180deg, var(--ink-950) 0%, var(--ink-900) 100%);
        flex-direction: column;
        padding: 120px 28px 40px;
        gap: 6px;
        transition: right 0.6s var(--ease-out-expo);
        border-left: 1px solid rgba(212,169,79,0.14);
        box-shadow: -30px 0 80px rgba(0,0,0,0.6);
    }
    .nav-links.open { right: 0; }
    .nav-links a { width: 100%; text-align: left; padding: 14px 18px; font-size: 16px; border-radius: 12px; }
    .nav-links a::before { display: none; }
    .nav-toggle { display: inline-flex; }
}

/* =========================================================
   HERO — Cinematic with mesh gradient, parallax, depth
   ========================================================= */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--cream);
    text-align: center;
    background: var(--ink-950);
}

/* Mesh gradient background blobs */
.hero::before, .hero::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.28;
    z-index: 1;
    pointer-events: none;
    animation: blobFloat 26s ease-in-out infinite;
}
.hero::before {
    width: 60vw; height: 60vw;
    background: radial-gradient(circle, var(--ember-600), transparent 65%);
    top: -20vw; left: -10vw;
}
.hero::after {
    width: 50vw; height: 50vw;
    background: radial-gradient(circle, var(--gold-500), transparent 65%);
    bottom: -15vw; right: -10vw;
    animation-delay: -10s;
}
@keyframes blobFloat {
    0%, 100% { transform: translate(0,0) scale(1); }
    33%      { transform: translate(3vw, -2vw) scale(1.05); }
    66%      { transform: translate(-2vw, 3vw) scale(0.97); }
}

.hero-media { position: absolute; inset: 0; z-index: 2; }
.hero-media video,
.hero-media img {
    width: 100%; height: 100%; object-fit: cover;
    transform: scale(1.0);
    animation: heroKenBurns 28s ease-in-out infinite alternate;
    will-change: transform;
}
@keyframes heroKenBurns {
    0%   { transform: scale(1.0) translate(0,0); }
    50%  { transform: scale(1.035) translate(-1%, 0.6%); }
    100% { transform: scale(1.015) translate(0.6%, -0.6%); }
}

/* Layered overlays: dark + gradient + film grain */
.hero-overlay {
    position: absolute; inset: 0; z-index: 3;
    background:
        radial-gradient(ellipse 80% 60% at 50% 40%, transparent 0%, rgba(20,15,11,0.5) 60%, rgba(20,15,11,0.92) 100%),
        linear-gradient(180deg, rgba(20,15,11,0.35) 0%, rgba(20,15,11,0.15) 30%, rgba(20,15,11,0.75) 80%, rgba(20,15,11,0.96) 100%);
    mix-blend-mode: normal;
}
.hero-overlay::after {
    content: '';
    position: absolute; inset: 0;
    background:
        linear-gradient(110deg,
            transparent 0%,
            rgba(181,101,47,0.10) 25%,
            rgba(188,139,51,0.08) 50%,
            transparent 75%);
    mix-blend-mode: screen;
    animation: sheenMove 14s ease-in-out infinite alternate;
}
@keyframes sheenMove {
    0%   { transform: translateX(-20%); }
    100% { transform: translateX(20%); }
}

.hero-grain {
    position: absolute; inset: 0; z-index: 4;
    pointer-events: none;
    opacity: 0.06;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    background-size: 200px 200px;
}

.hero-content {
    position: relative;
    z-index: 5;
    max-width: 920px;
    padding: 0 28px;
    perspective: 1200px;
}

.hero-eyebrow {
    letter-spacing: 0.5em;
    text-transform: uppercase;
    font-size: 12px;
    color: var(--gold-300);
    margin-bottom: 28px;
    opacity: 0;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    animation: fadeUp 1.1s var(--ease-out-expo) forwards 0.25s;
}
.hero-eyebrow::before,
.hero-eyebrow::after {
    content: '';
    display: inline-block;
    width: 40px; height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold-400), transparent);
}

.hero-title {
    font-size: clamp(48px, 9.5vw, 118px);
    line-height: 0.95;
    margin-bottom: 28px;
    font-weight: 800;
    letter-spacing: -0.025em;
    background: linear-gradient(180deg, #FFFBF2 0%, var(--gold-300) 40%, var(--ember-300) 75%, var(--ember-500) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 4px 20px rgba(181,101,47,0.35));
}
.hero-title .letter {
    display: inline-block;
    opacity: 0;
    transform: translateY(60px) rotateX(-40deg) scale(0.8);
    animation: letterCinematic 0.9s var(--ease-spring) forwards;
    transform-origin: center bottom;
    /* background/background-clip don't inherit from .hero-title, so each
       letter needs its own copy or it renders fully transparent */
    background: linear-gradient(180deg, #FFFBF2 0%, var(--gold-300) 40%, var(--ember-300) 75%, var(--ember-500) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
@keyframes letterCinematic {
    0% { opacity: 0; transform: translateY(60px) rotateX(-40deg) scale(0.8); }
    60% { opacity: 1; }
    100% {
        opacity: 1;
        transform: translateY(0) rotateX(0) scale(1);
    }
}

.hero-sub {
    font-size: clamp(16px, 1.8vw, 20px);
    color: rgba(251,242,226,0.82);
    max-width: 600px;
    margin: 0 auto 44px;
    opacity: 0;
    font-weight: 300;
    letter-spacing: 0.02em;
    line-height: 1.8;
    animation: fadeUp 1.1s var(--ease-out-expo) forwards 1.6s;
}
.hero-buttons {
    display: flex;
    gap: 18px;
    justify-content: center;
    flex-wrap: wrap;
    opacity: 0;
    animation: fadeUp 1.1s var(--ease-out-expo) forwards 1.9s;
}
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(32px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Scroll indicator */
.hero-scroll {
    position: absolute;
    bottom: 42px; left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    color: var(--cream);
    font-size: 11px;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    opacity: 0.85;
    animation: fadeUp 1.2s ease forwards 2.4s;
    opacity: 0;
}
.hero-scroll .line-wrap {
    width: 1px;
    height: 60px;
    position: relative;
    overflow: hidden;
    background: rgba(251,242,226,0.15);
}
.hero-scroll .line {
    position: absolute;
    left: 0; top: 0;
    width: 100%;
    height: 40%;
    background: linear-gradient(180deg, transparent, var(--gold-400));
    box-shadow: 0 0 10px var(--gold-400);
    animation: scrollLine 2.6s var(--ease-in-out-expo) infinite;
}
@keyframes scrollLine {
    0%   { transform: translateY(-100%); }
    50%  { transform: translateY(150%); }
    100% { transform: translateY(-100%); }
}

/* Floating meal photos — small circular polaroid badges + gentle parallax */
.float-el {
    position: absolute;
    z-index: 5;
    pointer-events: none;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    padding: 4px;
    background: var(--gold-gradient);
    box-shadow:
        0 14px 28px rgba(0,0,0,0.4),
        0 0 0 1px rgba(255,255,255,0.08);
    animation: floatLux 8s ease-in-out infinite;
    will-change: transform;
    opacity: 0.94;
}
.float-el img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    filter: saturate(0.92) sepia(0.12) contrast(1.03);
    border: 2px solid rgba(20,15,11,0.5);
}
@keyframes floatLux {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(-3deg); }
    25%      { transform: translate3d(6px, -14px, 0) rotate(2deg); }
    50%      { transform: translate3d(-3px, -22px, 0) rotate(3deg); }
    75%      { transform: translate3d(-7px, -9px, 0) rotate(-1deg); }
}
.float-el.f1 { top: 16%; left: 6%;  animation-duration: 9s; }
.float-el.f2 { top: 68%; left: 10%; animation-duration: 7s;   animation-delay: -1.5s; width: 58px; height: 58px; }
.float-el.f3 { top: 18%; right: 7%; animation-duration: 8.5s; animation-delay: -3s;   width: 68px; height: 68px; }
.float-el.f4 { top: 70%; right: 11%;animation-duration: 7.6s; animation-delay: -0.8s; width: 52px; height: 52px; }
@media (max-width: 860px) { .float-el { display: none; } }

/* Steam particles — volumetric */
.steam {
    position: absolute; bottom: 0; left: 0; right: 0;
    width: 100%;
    height: 300px;
    z-index: 4;
    pointer-events: none;
}
.steam span {
    position: absolute;
    bottom: 0;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,250,240,0.6), rgba(255,250,240,0));
    filter: blur(10px);
    animation: steamVolumetric 6s ease-out infinite;
    will-change: transform, opacity;
}
@keyframes steamVolumetric {
    0%   { transform: translate3d(0, 0, 0) scale(0.6); opacity: 0; }
    10%  { opacity: 0.7; }
    50%  { transform: translate3d(var(--sx, 10px), -140px, 0) scale(1.8); opacity: 0.35; }
    100% { transform: translate3d(calc(var(--sx, 10px) * 2), -280px, 0) scale(3.2); opacity: 0; }
}

/* =========================================================
   About / Story — split with reveal image frame
   ========================================================= */
.about {
    padding: 160px 0;
    background:
        radial-gradient(ellipse 60% 40% at 80% 20%, rgba(212,169,79,0.06), transparent 70%),
        radial-gradient(ellipse 50% 40% at 10% 80%, rgba(181,101,47,0.05), transparent 70%),
        var(--cream);
    position: relative;
}
.about-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 80px;
    align-items: center;
}

.about-image {
    position: relative;
    aspect-ratio: 4/5;
    transform-style: preserve-3d;
}
.about-image::before {
    content: '';
    position: absolute;
    inset: 20px -20px -20px 20px;
    border-radius: var(--radius-lg);
    background: var(--gold-gradient);
    opacity: 0.35;
    z-index: 0;
    filter: blur(30px);
}
.about-image::after {
    content: '';
    position: absolute;
    inset: -14px;
    border: 1px solid rgba(188,139,51,0.3);
    border-radius: var(--radius-lg);
    z-index: 2;
    pointer-events: none;
}
.about-image .frame-inner {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
    z-index: 1;
}
.about-image img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 1.4s var(--ease-out-expo), filter 1s ease;
    filter: saturate(1.05) contrast(1.02);
}
.about-image:hover img {
    transform: scale(1.08);
    filter: saturate(1.15) contrast(1.05);
}
.about-badge {
    position: absolute;
    bottom: -28px; right: -28px;
    width: 140px; height: 140px;
    border-radius: 50%;
    background: var(--ink-900);
    color: var(--gold-400);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: var(--shadow-lg);
    z-index: 3;
    border: 1px solid rgba(212,169,79,0.25);
    animation: badgeFloat 5s ease-in-out infinite;
}
.about-badge strong {
    font-family: var(--font-display);
    font-size: 44px;
    font-weight: 800;
    line-height: 1;
    background: var(--gold-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.about-badge span {
    font-size: 10px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--cream);
    margin-top: 4px;
    opacity: 0.75;
}
@keyframes badgeFloat {
    0%, 100% { transform: translateY(0) rotate(-3deg); }
    50%      { transform: translateY(-10px) rotate(3deg); }
}

.about-lines p {
    font-size: clamp(20px, 2.5vw, 30px);
    font-family: var(--font-display);
    color: var(--ink-800);
    margin-bottom: 18px;
    line-height: 1.4;
    font-weight: 500;
    letter-spacing: -0.01em;
}
.about-lines p:last-child {
    background: linear-gradient(135deg, var(--ember-600), var(--gold-600));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
    font-size: clamp(24px, 3vw, 36px);
}
@media (max-width: 900px) {
    .about { padding: 100px 0; }
    .about-grid { grid-template-columns: 1fr; gap: 60px; }
    .about-badge { width: 110px; height: 110px; bottom: -22px; right: -14px; }
    .about-badge strong { font-size: 34px; }
}

/* =========================================================
   Dishes — dramatic dark section with glow cards
   ========================================================= */
.dishes {
    padding: 160px 0;
    background:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(181,101,47,0.12), transparent 60%),
        radial-gradient(ellipse 60% 40% at 10% 90%, rgba(188,139,51,0.08), transparent 60%),
        linear-gradient(180deg, var(--ink-950) 0%, var(--ink-900) 50%, var(--ink-950) 100%);
    color: var(--cream);
    position: relative;
    overflow: hidden;
}
.dishes::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 0.8 0 0 0 0 0.4 0 0 0 0.04 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    pointer-events: none;
    z-index: 1;
    opacity: 0.8;
}
.dishes .section-sub { color: rgba(251,242,226,0.65); }

.dish-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 28px;
    position: relative;
    z-index: 2;
}

.dish-card {
    background:
        linear-gradient(160deg, rgba(47,36,28,0.85) 0%, rgba(28,21,16,0.95) 100%);
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(212,169,79,0.12);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transform-style: preserve-3d;
    transition:
        transform 0.5s var(--ease-spring),
        box-shadow 0.5s var(--ease-out-expo),
        border-color 0.4s ease;
    will-change: transform;
}
.dish-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, transparent, rgba(212,169,79,0.4), transparent 50%, rgba(181,101,47,0.3), transparent);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 1;
    pointer-events: none;
}
.dish-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at var(--mx, 50%) var(--my, 0%), rgba(212,169,79,0.14), transparent 40%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: 1;
}
.dish-card:hover {
    transform: translateY(-14px);
    box-shadow:
        0 30px 70px -20px rgba(181,101,47,0.35),
        0 50px 120px -30px rgba(20,15,11,0.8),
        inset 0 1px 0 rgba(255,255,255,0.06);
    border-color: rgba(212,169,79,0.3);
}
.dish-card:hover::before,
.dish-card:hover::after { opacity: 1; }

.dish-img {
    position: relative;
    height: 240px;
    overflow: hidden;
    z-index: 2;
}
.dish-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(20,15,11,0.6) 100%);
    z-index: 2;
    pointer-events: none;
}
.dish-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 1s var(--ease-out-expo), filter 0.6s ease;
    filter: saturate(1.05);
    transform: translateZ(20px);
}
.dish-card:hover .dish-img img {
    transform: scale(1.14);
    filter: saturate(1.2) brightness(1.05);
}

.dish-price-tag {
    position: absolute;
    top: 18px; right: 18px;
    z-index: 4;
    background: var(--gold-gradient);
    color: var(--ink-950);
    font-weight: 800;
    padding: 8px 16px;
    border-radius: var(--radius-pill);
    font-size: 13.5px;
    letter-spacing: 0.01em;
    box-shadow: 0 6px 20px -4px rgba(212,169,79,0.6);
    transform: translateZ(30px);
    font-family: var(--font-body);
}

.dish-body {
    padding: 26px 26px 30px;
    position: relative;
    z-index: 2;
    transform: translateZ(20px);
}
.dish-body h3 {
    font-size: 22px;
    margin-bottom: 10px;
    color: var(--cream);
    font-weight: 700;
    transition: color 0.3s ease;
}
.dish-card:hover .dish-body h3 {
    background: linear-gradient(135deg, var(--cream), var(--gold-300));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.dish-body p {
    font-size: 14.5px;
    color: rgba(251,242,226,0.6);
    margin-bottom: 20px;
    min-height: 46px;
    line-height: 1.7;
}
.dish-order {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--gold-400);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.02em;
    padding-bottom: 2px;
    border-bottom: 1px solid rgba(212,169,79,0.25);
    transition: all 0.35s var(--ease-spring);
    position: relative;
}
.dish-order::after {
    content: '→';
    transition: transform 0.3s var(--ease-spring);
    display: inline-block;
}
.dish-order:hover {
    color: var(--gold-300);
    border-color: var(--gold-400);
    padding-right: 4px;
}
.dish-order:hover::after { transform: translateX(6px); }

.dishes-cta {
    text-align: center;
    margin-top: 64px;
    position: relative;
    z-index: 2;
}

/* =========================================================
   Experience — flip cards with premium 3D
   ========================================================= */
.experience {
    padding: 160px 0;
    background:
        radial-gradient(ellipse 50% 40% at 0% 50%, rgba(181,101,47,0.05), transparent 70%),
        var(--ivory);
    position: relative;
    overflow: hidden;
}
.experience::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(22,16,12,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(22,16,12,0.03) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
    pointer-events: none;
}

.exp-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    position: relative;
    z-index: 2;
}
.exp-card {
    perspective: 1400px;
    height: 300px;
}
.exp-inner {
    position: relative;
    width: 100%; height: 100%;
    transition: transform 0.9s var(--ease-in-out-expo);
    transform-style: preserve-3d;
    cursor: pointer;
}
.exp-card:hover .exp-inner,
.exp-card.is-flipped .exp-inner {
    transform: rotateY(180deg);
}
.exp-face {
    position: absolute; inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 36px 30px;
    overflow: hidden;
}
.exp-front {
    background: var(--white, #fff);
    box-shadow: var(--shadow-md);
    border: 1px solid rgba(20,15,11,0.06);
    transition: box-shadow 0.4s ease;
}
.exp-card:hover .exp-front { box-shadow: var(--shadow-xl); }
.exp-front::before {
    content: '';
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: radial-gradient(circle, rgba(212,169,79,0.1), transparent 40%);
    opacity: 0;
    transition: opacity 0.5s ease;
}
.exp-card:hover .exp-front::before { opacity: 1; }
.exp-front .icon {
    font-size: 56px;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 6px 16px rgba(181,101,47,0.25));
    transition: transform 0.5s var(--ease-spring);
}
.exp-card:hover .exp-front .icon { transform: scale(1.15) rotate(-8deg); }
.exp-front h3 {
    font-size: 22px;
    position: relative;
    z-index: 1;
    background: linear-gradient(135deg, var(--ink-900), var(--ember-700));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.exp-front .flip-hint {
    position: absolute;
    bottom: 16px;
    font-size: 10px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--ink-400);
    opacity: 0;
    transform: translateY(8px);
    transition: all 0.4s ease;
}
.exp-card:hover .flip-hint { opacity: 0.8; transform: translateY(0); }

.exp-back {
    background:
        radial-gradient(ellipse at top left, rgba(230,187,152,0.25), transparent 60%),
        linear-gradient(145deg, var(--ember-600) 0%, var(--ember-800) 50%, var(--plum-700) 100%);
    color: var(--cream);
    transform: rotateY(180deg);
    box-shadow: var(--shadow-xl);
}
.exp-back::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 0.9 0 0 0 0 0.6 0 0 0 0.05 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    opacity: 0.6;
}
.exp-back p {
    font-size: 15.5px;
    line-height: 1.8;
    position: relative;
    z-index: 1;
    max-width: 260px;
    color: rgba(255,245,236,0.92);
    font-weight: 300;
}
.exp-back p::before,
.exp-back p::after {
    content: '"';
    font-family: var(--font-display);
    color: var(--gold-400);
    font-size: 28px;
    opacity: 0.6;
    line-height: 0;
    vertical-align: -0.4em;
    margin: 0 2px;
}
@media (max-width: 860px) { .exp-grid { grid-template-columns: 1fr; } .exp-card { height: 260px; } }

/* =========================================================
   Ingredients — infinite marquee + gradient cards
   ========================================================= */
.ingredients {
    padding: 140px 0;
    background:
        radial-gradient(ellipse 70% 60% at 50% 100%, rgba(181,101,47,0.15), transparent 60%),
        linear-gradient(180deg, var(--forest-700) 0%, var(--forest-900) 100%);
    color: var(--cream);
    overflow: hidden;
    position: relative;
}
.ingredients::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0.2 0 0 0 0 0.1 0 0 0 0.04 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    pointer-events: none;
    opacity: 0.7;
}
.ingredients .section-label { color: var(--gold-400); }

.ing-marquee {
    position: relative;
    overflow: hidden;
    padding: 16px 0 32px;
    z-index: 2;
    mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}
.ing-marquee-track {
    display: flex;
    gap: 24px;
    width: max-content;
    will-change: transform;
    animation: marqueeRun 40s linear infinite;
}
.ing-marquee:hover .ing-marquee-track { animation-play-state: paused; }
@keyframes marqueeRun {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
.ing-scroll {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    padding: 10px 24px 24px;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
}
.ing-scroll::-webkit-scrollbar { height: 6px; }
.ing-scroll::-webkit-scrollbar-track { background: rgba(251,242,226,0.06); border-radius: 10px; }
.ing-scroll::-webkit-scrollbar-thumb { background: var(--gold-gradient); border-radius: 10px; }

.ing-card {
    min-width: 200px;
    flex-shrink: 0;
    scroll-snap-align: start;
    background:
        linear-gradient(160deg, rgba(251,242,226,0.05), rgba(20,15,11,0.2));
    border: 1px solid rgba(212,169,79,0.18);
    border-radius: var(--radius-lg);
    padding: 32px 22px;
    text-align: center;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition:
        transform 0.45s var(--ease-spring),
        border-color 0.3s ease,
        box-shadow 0.45s ease,
        background 0.4s ease;
    transform-style: preserve-3d;
}
.ing-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(212,169,79,0.18), transparent 55%);
    opacity: 0;
    transition: opacity 0.4s ease;
}
.ing-card:hover {
    transform: translateY(-10px) scale(1.03);
    border-color: var(--gold-400);
    background: linear-gradient(160deg, rgba(212,169,79,0.10), rgba(181,101,47,0.06));
    box-shadow: 0 20px 50px -15px rgba(20,15,11,0.5), 0 0 0 1px rgba(212,169,79,0.3);
}
.ing-card:hover::before { opacity: 1; }
.ing-card .ing-icon {
    font-size: 48px;
    margin-bottom: 18px;
    filter: drop-shadow(0 6px 14px rgba(212,169,79,0.35));
    transition: transform 0.5s var(--ease-spring);
    position: relative;
    z-index: 1;
}
.ing-card:hover .ing-icon { transform: scale(1.2) rotate(-6deg) translateY(-4px); }
.ing-card h4 {
    color: var(--cream);
    font-size: 17px;
    margin-bottom: 8px;
    position: relative;
    z-index: 1;
}
.ing-note {
    font-size: 12.5px;
    color: var(--gold-300);
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.4s var(--ease-out-expo);
    line-height: 1.6;
    position: relative;
    z-index: 1;
    letter-spacing: 0.02em;
}
.ing-card:hover .ing-note { opacity: 1; transform: translateY(0); }

/* =========================================================
   Video Story — cinematic with parallax play button
   ========================================================= */
.video-story {
    position: relative;
    min-height: 82vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.video-story .hero-media,
.video-story .hero-overlay { position: absolute; inset: 0; }
.video-story .hero-media img,
.video-story .hero-media video {
    width: 100%; height: 100%; object-fit: cover;
}
.video-story .hero-overlay {
    background:
        radial-gradient(ellipse at center, rgba(20,15,11,0.35), rgba(20,15,11,0.85) 75%),
        linear-gradient(180deg, rgba(20,15,11,0.4), rgba(20,15,11,0.8));
}
.video-story::before {
    content: '';
    position: absolute; inset: 0;
    background:
        linear-gradient(45deg,
            rgba(181,101,47,0.1) 0%,
            transparent 30%,
            transparent 70%,
            rgba(188,139,51,0.1) 100%);
    z-index: 2;
    mix-blend-mode: screen;
    pointer-events: none;
}

.play-btn {
    position: relative;
    z-index: 3;
    width: 120px; height: 120px;
    border-radius: 50%;
    background: rgba(251,242,226,0.1);
    border: 1.5px solid rgba(251,242,226,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: all 0.45s var(--ease-spring);
    box-shadow: 0 10px 40px rgba(0,0,0,0.4);
}
.play-btn::before {
    content: '';
    width: 100%; height: 100%;
    position: absolute; inset: 0;
    border-radius: 50%;
    background: var(--gold-gradient);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 0;
}
.play-btn::after {
    content: '';
    border-style: solid;
    border-width: 16px 0 16px 26px;
    border-color: transparent transparent transparent var(--cream);
    margin-left: 8px;
    z-index: 1;
    transition: border-color 0.4s ease, transform 0.4s var(--ease-spring);
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.3));
}
.play-btn::before,
.play-btn::after { /* placeholder for pulse rings */ }
.play-btn-wrap {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
}
.play-btn-wrap::before,
.play-btn-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid var(--gold-400);
    opacity: 0;
    animation: pulseRing 2.8s ease-out infinite;
    pointer-events: none;
}
.play-btn-wrap::after { animation-delay: 1.4s; }
@keyframes pulseRing {
    0%   { transform: scale(1);   opacity: 0.8; }
    100% { transform: scale(2.2); opacity: 0;   }
}
.play-btn:hover {
    transform: scale(1.1);
    border-color: var(--gold-400);
    box-shadow: 0 20px 60px -10px rgba(212,169,79,0.5);
}
.play-btn:hover::before { opacity: 1; }
.play-btn:hover::after { border-color: transparent transparent transparent var(--ink-950); }

.video-caption {
    position: absolute;
    bottom: 56px; left: 0; right: 0;
    text-align: center;
    z-index: 3;
    color: var(--cream);
    font-family: var(--font-display);
    font-size: clamp(22px, 3.2vw, 38px);
    letter-spacing: -0.01em;
    background: linear-gradient(135deg, var(--cream), var(--gold-300));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}

/* =========================================================
   Stats — countup with glow numbers
   ========================================================= */
.stats {
    padding: 120px 0;
    background:
        radial-gradient(ellipse 60% 40% at 50% 0%, rgba(212,169,79,0.08), transparent 60%),
        var(--cream);
    position: relative;
}
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    text-align: center;
    position: relative;
    z-index: 2;
}
.stats-grid > div {
    padding: 40px 24px;
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, rgba(255,255,255,0.8), rgba(255,255,255,0.4));
    border: 1px solid rgba(20,15,11,0.06);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: transform 0.45s var(--ease-spring), box-shadow 0.45s ease;
    position: relative;
    overflow: hidden;
}
.stats-grid > div::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(212,169,79,0.1), transparent 40%);
    opacity: 0;
    transition: opacity 0.4s ease;
}
.stats-grid > div:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
}
.stats-grid > div:hover::before { opacity: 1; }

.stat-num {
    font-family: var(--font-display);
    font-size: clamp(42px, 5.5vw, 68px);
    font-weight: 800;
    line-height: 1;
    margin-bottom: 12px;
    background: linear-gradient(135deg, var(--ember-600) 0%, var(--gold-600) 50%, var(--ember-700) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.02em;
    position: relative;
    z-index: 1;
}
.stat-num + .stat-label {
    font-size: 12.5px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--ink-500);
    font-weight: 600;
    position: relative;
    z-index: 1;
}
@media (max-width: 760px) { .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } .stats-grid > div { padding: 30px 16px; } }

/* =========================================================
   Gallery — masonry with cinematic zoom + lightbox
   ========================================================= */
.gallery {
    padding: 160px 0;
    background:
        radial-gradient(ellipse 80% 50% at 50% 100%, rgba(42,138,92,0.1), transparent 60%),
        linear-gradient(180deg, var(--ink-900) 0%, var(--ink-950) 100%);
    position: relative;
    overflow: hidden;
}
.gallery::before {
    content: '';
    position: absolute; inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 0.85 0 0 0 0 0.55 0 0 0 0.03 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    pointer-events: none;
    opacity: 0.5;
}
.gallery .section-label { color: var(--gold-400); }

.masonry {
    columns: 4 240px;
    column-gap: 18px;
    position: relative;
    z-index: 2;
}
.masonry-item {
    break-inside: avoid;
    margin-bottom: 18px;
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
    display: block;
    box-shadow: var(--shadow-md);
    transition: transform 0.5s var(--ease-spring), box-shadow 0.5s ease;
}
.masonry-item img,
.masonry-item video {
    width: 100%;
    display: block;
    transition: transform 1s var(--ease-out-expo), filter 0.6s ease;
    filter: saturate(1.02) contrast(1.02);
    background: var(--ink-950);
}
.masonry-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(20,15,11,0.85) 100%);
    opacity: 0;
    transition: opacity 0.45s ease;
    z-index: 1;
    pointer-events: none;
}
.masonry-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.45s ease, transform 0.45s ease;
    transform: translateY(12px);
    z-index: 2;
    pointer-events: none;
}
.masonry-overlay span {
    color: var(--cream);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.01em;
    font-family: var(--font-display);
    max-width: 80%;
}
.masonry-overlay .zoom-icon {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--gold-gradient);
    color: var(--ink-950);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 800;
    box-shadow: var(--shadow-gold);
    flex-shrink: 0;
    transition: transform 0.4s var(--ease-spring);
}
.masonry-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 60px -16px rgba(0,0,0,0.75);
}
.masonry-item:hover img,
.masonry-item:hover video {
    transform: scale(1.14);
    filter: saturate(1.2) contrast(1.08) brightness(1.05);
}
.masonry-item:hover::before { opacity: 1; }
.masonry-item:hover .masonry-overlay { opacity: 1; transform: translateY(0); }
.masonry-item:hover .masonry-overlay .zoom-icon { transform: scale(1.1) rotate(8deg); }

/* Lightbox premium */
.lightbox {
    position: fixed; inset: 0;
    background: rgba(6,4,3,0.94);
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 40px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
.lightbox::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at center, rgba(181,101,47,0.1), transparent 60%);
    pointer-events: none;
}
.lightbox.open {
    display: flex;
    animation: lbIn 0.5s var(--ease-out-expo);
}
@keyframes lbIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.lightbox img,
.lightbox video {
    max-width: 92vw;
    max-height: 86vh;
    border-radius: var(--radius);
    box-shadow: 0 40px 120px rgba(0,0,0,0.8), 0 0 0 1px rgba(212,169,79,0.2);
    animation: lbImgIn 0.6s var(--ease-spring);
    position: relative;
    z-index: 1;
}
.lightbox video { display: none; background: #000; }
@keyframes lbImgIn {
    from { opacity: 0; transform: scale(0.9) translateY(20px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
.lightbox-close {
    position: absolute;
    top: 28px; right: 34px;
    color: var(--cream);
    font-size: 28px;
    cursor: pointer;
    width: 48px; height: 48px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.35s var(--ease-spring);
    z-index: 2;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.lightbox-close:hover {
    background: var(--ember-600);
    transform: rotate(90deg) scale(1.1);
    border-color: var(--ember-400);
}

/* =========================================================
   Testimonials — horizontal track + card gradients
   ========================================================= */
.testimonials {
    padding: 160px 0;
    background:
        radial-gradient(ellipse 70% 50% at 0% 50%, rgba(181,101,47,0.1), transparent 60%),
        radial-gradient(ellipse 60% 40% at 100% 80%, rgba(188,139,51,0.08), transparent 60%),
        linear-gradient(180deg, #2C1A12 0%, #1E120C 100%);
    color: var(--cream);
    position: relative;
    overflow: hidden;
}
.testimonials::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 0.8 0 0 0 0 0.5 0 0 0 0.04 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    pointer-events: none;
    opacity: 0.6;
}
.testimonials .section-label { color: var(--gold-400); }

.testi-marquee {
    position: relative;
    z-index: 2;
    overflow: hidden;
    padding: 12px 0 20px;
    mask-image: linear-gradient(90deg, transparent, black 4%, black 96%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, black 4%, black 96%, transparent);
}
.testi-track {
    display: flex;
    gap: 24px;
    width: max-content;
    will-change: transform;
    animation: marqueeRun 46s linear infinite;
}
.testi-marquee:hover .testi-track { animation-play-state: paused; }
@media (max-width: 760px) {
    .testi-track { animation-duration: 32s; }
}

.testi-card {
    min-width: 340px;
    max-width: 380px;
    flex-shrink: 0;
    scroll-snap-align: start;
    background:
        radial-gradient(ellipse at top left, rgba(212,169,79,0.12), transparent 55%),
        linear-gradient(160deg, rgba(47,36,28,0.7), rgba(28,21,16,0.85));
    border: 1px solid rgba(212,169,79,0.18);
    border-radius: var(--radius-lg);
    padding: 36px 32px;
    position: relative;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: transform 0.45s var(--ease-spring), box-shadow 0.45s ease, border-color 0.3s ease;
}
.testi-card::before {
    content: '\201C';
    position: absolute;
    top: 8px; left: 20px;
    font-family: var(--font-display);
    font-size: 110px;
    line-height: 1;
    background: linear-gradient(180deg, var(--gold-400), transparent);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: 0.35;
    pointer-events: none;
}
.testi-card:hover {
    transform: translateY(-8px);
    border-color: rgba(212,169,79,0.4);
    box-shadow: 0 30px 70px -20px rgba(0,0,0,0.7), 0 0 0 1px rgba(212,169,79,0.15);
}
.testi-stars {
    color: var(--gold-400);
    margin-bottom: 20px;
    letter-spacing: 3px;
    font-size: 16px;
    filter: drop-shadow(0 0 6px rgba(212,169,79,0.4));
    position: relative;
    z-index: 1;
}
.testi-quote {
    font-style: italic;
    margin-bottom: 26px;
    line-height: 1.8;
    font-size: 15.5px;
    color: rgba(251,242,226,0.88);
    position: relative;
    z-index: 1;
    font-weight: 300;
}
.testi-person {
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
    z-index: 1;
}
.testi-person img {
    width: 52px; height: 52px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid transparent;
    background: var(--gold-gradient);
    padding: 2px;
    box-shadow: 0 4px 14px rgba(212,169,79,0.3);
    transition: transform 0.4s var(--ease-spring);
}
.testi-card:hover .testi-person img { transform: scale(1.1) rotate(-6deg); }
.testi-person span {
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--cream);
    font-size: 15px;
}
.testi-person small {
    display: block;
    font-weight: 400;
    color: var(--gold-400);
    opacity: 0.85;
    font-size: 12px;
    letter-spacing: 0.05em;
    margin-top: 2px;
}

/* =========================================================
   Reservation — split panel with gradient border
   ========================================================= */
.reservation {
    padding: 160px 0;
    background:
        radial-gradient(ellipse 60% 40% at 100% 0%, rgba(212,169,79,0.08), transparent 60%),
        var(--cream);
    position: relative;
}

.res-wrap {
    position: relative;
    border-radius: var(--radius-xl);
    padding: 4px;
    background: linear-gradient(135deg, var(--gold-400), var(--ember-500), var(--plum-700), var(--gold-400));
    background-size: 300% 300%;
    animation: borderShimmer 10s ease-in-out infinite;
    box-shadow: var(--shadow-xl);
}
@keyframes borderShimmer {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}
.res-inner {
    background: linear-gradient(160deg, var(--white) 0%, var(--ivory) 100%);
    border-radius: calc(var(--radius-xl) - 4px);
    padding: 64px 60px;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 60px;
    position: relative;
    overflow: hidden;
}
.res-inner::before {
    content: '';
    position: absolute;
    top: -50%; right: -20%;
    width: 70%; height: 100%;
    background: radial-gradient(circle, rgba(212,169,79,0.1), transparent 60%);
    pointer-events: none;
}

.res-info h2 { margin-bottom: 20px; font-size: clamp(32px, 4vw, 46px); }
.res-info p { color: var(--ink-500); margin-bottom: 32px; line-height: 1.8; }
.res-info .ri-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 18px;
    font-size: 15px;
    color: var(--ink-700);
    transition: transform 0.3s var(--ease-spring);
}
.res-info .ri-item:hover { transform: translateX(6px); }
.res-info .ri-item > div:first-child {
    width: 40px; height: 40px;
    flex-shrink: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(212,169,79,0.15), rgba(181,101,47,0.1));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}
.res-info .ri-item strong {
    display: block;
    margin-bottom: 2px;
    color: var(--ink-900);
    font-size: 14px;
    letter-spacing: 0.02em;
}

.res-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    position: relative;
    z-index: 1;
}
.res-form .full { grid-column: 1 / -1; }
.res-form label {
    display: block;
    font-size: 12px;
    margin-bottom: 8px;
    color: var(--ink-500);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.res-form .field {
    position: relative;
}
.res-form input,
.res-form textarea,
.res-form select {
    width: 100%;
    padding: 14px 16px 14px 44px;
    border-radius: var(--radius);
    border: 1.5px solid rgba(20,15,11,0.08);
    background: rgba(255,255,255,0.8);
    font-family: var(--font-body);
    font-size: 14.5px;
    color: var(--ink-900);
    transition:
        border-color 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease,
        transform 0.3s var(--ease-spring);
}
.res-form .field::before {
    content: var(--icon, '');
    position: absolute;
    left: 16px;
    top: auto;
    bottom: 16px;
    font-size: 15px;
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.res-form textarea { padding: 14px 16px 14px 44px; min-height: 120px; resize: vertical; }
.res-form .field:focus-within::before { opacity: 1; transform: scale(1.15); }
.res-form input:focus,
.res-form textarea:focus,
.res-form select:focus {
    outline: none;
    border-color: var(--ember-500);
    background: var(--white);
    box-shadow: 0 0 0 5px rgba(181,101,47,0.12), var(--shadow-sm);
}
.res-form input:hover,
.res-form textarea:hover,
.res-form select:hover {
    border-color: rgba(181,101,47,0.35);
}

.res-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 0;
    min-height: 52px;
    width: 100%;
    border-radius: var(--radius-pill);
    font-weight: 600;
    font-family: var(--font-body);
    font-size: 14.5px;
    letter-spacing: 0.02em;
    line-height: 1.1;
    background: var(--gold-gradient);
    color: var(--ink-950);
    border: none;
    cursor: pointer;
    background-size: 200% 200%;
    animation: btnShimmer 6s ease-in-out infinite;
    box-shadow: var(--shadow-gold);
    transition: transform 0.4s var(--ease-spring), box-shadow 0.4s ease;
    will-change: transform;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}
.res-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 46px -10px rgba(188,139,51,0.6), 0 6px 18px rgba(20,15,11,0.16);
}
.res-submit:active { transform: translateY(-1px) scale(0.995); }
.res-submit:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none !important;
}

.form-msg {
    grid-column: 1/-1;
    padding: 14px 18px;
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 500;
    animation: fadeUp 0.4s var(--ease-out-expo);
}
.form-msg.success {
    background: linear-gradient(135deg, rgba(30,107,70,0.1), rgba(42,138,92,0.06));
    color: var(--forest-600);
    border: 1px solid rgba(30,107,70,0.2);
}
.form-msg.error {
    background: linear-gradient(135deg, rgba(153,81,31,0.1), rgba(122,63,24,0.05));
    color: var(--ember-700);
    border: 1px solid rgba(153,81,31,0.25);
}

@media (max-width: 940px) {
    .res-inner { grid-template-columns: 1fr; padding: 40px 28px; }
    .res-form { grid-template-columns: 1fr; }
}

/* =========================================================
   Location — map + contact card
   ========================================================= */
.location {
    padding: 160px 0;
    background:
        radial-gradient(ellipse 50% 40% at 0% 100%, rgba(42,138,92,0.06), transparent 60%),
        var(--ivory);
    position: relative;
}
.loc-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 40px;
    align-items: stretch;
    position: relative;
    z-index: 2;
}
.loc-map {
    border-radius: var(--radius-xl);
    overflow: hidden;
    min-height: 440px;
    box-shadow: var(--shadow-xl);
    position: relative;
    border: 1px solid rgba(20,15,11,0.06);
}
.loc-map::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 60px rgba(20,15,11,0.2);
    pointer-events: none;
}
.loc-map iframe { width: 100%; height: 100%; min-height: 440px; border: 0; }

.loc-card {
    background:
        radial-gradient(ellipse at top right, rgba(212,169,79,0.14), transparent 60%),
        linear-gradient(180deg, var(--ink-900) 0%, var(--ink-950) 100%);
    border-radius: var(--radius-xl);
    padding: 52px 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
    color: var(--cream);
    box-shadow: var(--shadow-xl);
    border: 1px solid rgba(212,169,79,0.15);
}
.loc-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 0.85 0 0 0 0 0.55 0 0 0 0.03 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    opacity: 0.4;
    pointer-events: none;
}
.loc-card .li-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 26px;
    position: relative;
    z-index: 1;
}
.loc-card .li-item > div:first-child {
    width: 46px; height: 46px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(212,169,79,0.15), rgba(181,101,47,0.12));
    border: 1px solid rgba(212,169,79,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
    transition: transform 0.4s var(--ease-spring), background 0.3s ease;
}
.loc-card .li-item:hover > div:first-child {
    transform: scale(1.1) rotate(-5deg);
    background: var(--gold-gradient);
    color: var(--ink-950);
}
.loc-card .li-item strong {
    display: block;
    margin-bottom: 4px;
    font-size: 12.5px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold-400);
    font-weight: 600;
}
.loc-card .li-item div:last-child {
    font-size: 15.5px;
    line-height: 1.6;
    color: rgba(251,242,226,0.9);
}
.loc-card a.btn {
    margin-top: 10px;
    width: fit-content;
    position: relative;
    z-index: 1;
}
@media (max-width: 900px) {
    .loc-grid { grid-template-columns: 1fr; }
    .loc-card { padding: 40px 30px; }
}

/* =========================================================
   Footer — luxury dark with lantern + newsletter
   ========================================================= */
footer {
    background:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(181,101,47,0.12), transparent 60%),
        linear-gradient(180deg, var(--ink-950) 0%, #050302 100%);
    color: var(--cream);
    padding: 120px 0 36px;
    position: relative;
    overflow: hidden;
}
footer::before {
    content: '';
    position: absolute; inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 0.85 0 0 0 0 0.55 0 0 0 0.03 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    pointer-events: none;
    opacity: 0.35;
}
footer::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212,169,79,0.4), transparent);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.4fr;
    gap: 56px;
    margin-bottom: 80px;
    position: relative;
    z-index: 2;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}
.footer-logo img {
    height: 44px;
    border-radius: 10px;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5));
}
.footer-logo span {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    background: linear-gradient(135deg, var(--cream), var(--gold-300));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.footer-about p {
    font-size: 14.5px;
    color: rgba(251,242,226,0.62);
    margin-bottom: 26px;
    line-height: 1.8;
    max-width: 340px;
}
.footer-social { display: flex; gap: 12px; }
.footer-social a {
    width: 44px; height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(212,169,79,0.25);
    background: rgba(255,255,255,0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 14px;
    color: var(--gold-400);
    transition: all 0.4s var(--ease-spring);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    letter-spacing: 0.02em;
}
.footer-social a:hover {
    background: var(--gold-gradient);
    border-color: var(--gold-400);
    color: var(--ink-950);
    transform: translateY(-5px) rotate(-5deg) scale(1.08);
    box-shadow: 0 10px 28px -6px rgba(212,169,79,0.6);
}

footer h4 {
    font-size: 13px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold-400);
    margin-bottom: 24px;
    font-weight: 700;
    font-family: var(--font-body);
}
footer .quick-links li { margin-bottom: 14px; }
footer .quick-links a {
    font-size: 14.5px;
    color: rgba(251,242,226,0.65);
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    position: relative;
}
footer .quick-links a::before {
    content: '';
    width: 0; height: 1px;
    background: var(--gold-gradient);
    transition: width 0.3s var(--ease-out-expo);
}
footer .quick-links a:hover {
    color: var(--gold-300);
    transform: translateX(4px);
}
footer .quick-links a:hover::before { width: 14px; }

.footer-newsletter p {
    font-size: 14px;
    color: rgba(251,242,226,0.6);
    margin-bottom: 18px;
    line-height: 1.7;
}
.footer-newsletter .nl-field {
    position: relative;
    margin-bottom: 12px;
}
.footer-newsletter input {
    width: 100%;
    padding: 14px 140px 14px 18px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04);
    color: var(--cream);
    font-family: var(--font-body);
    font-size: 14px;
    transition: all 0.3s ease;
}
.footer-newsletter input::placeholder { color: rgba(251,242,226,0.35); }
.footer-newsletter input:focus {
    outline: none;
    border-color: var(--gold-500);
    background: rgba(255,255,255,0.07);
    box-shadow: 0 0 0 4px rgba(212,169,79,0.1);
}
.footer-newsletter button {
    position: absolute;
    top: 4px; right: 4px;
    bottom: 4px;
    padding: 0 22px;
    border-radius: var(--radius-pill);
    border: none;
    background: var(--gold-gradient);
    color: var(--ink-950);
    font-weight: 700;
    cursor: pointer;
    font-size: 13px;
    letter-spacing: 0.02em;
    transition: all 0.35s var(--ease-spring);
    background-size: 200% 200%;
    animation: btnShimmer 6s ease-in-out infinite;
    box-shadow: 0 4px 14px -4px rgba(212,169,79,0.6);
}
.footer-newsletter button:hover {
    transform: scale(1.04);
    box-shadow: 0 8px 22px -6px rgba(212,169,79,0.7);
}

.footer-bottom {
    border-top: 1px solid rgba(251,242,226,0.08);
    padding-top: 30px;
    text-align: center;
    font-size: 13px;
    color: rgba(251,242,226,0.45);
    position: relative;
    z-index: 2;
    letter-spacing: 0.03em;
}
.footer-bottom strong {
    background: linear-gradient(135deg, var(--gold-400), var(--ember-400));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 600;
}

.lantern {
    position: absolute;
    bottom: 60px; right: 80px;
    font-size: 56px;
    animation: lanternGlow 3s ease-in-out infinite;
    z-index: 1;
    filter: drop-shadow(0 0 20px rgba(212,169,79,0.5));
}
@keyframes lanternGlow {
    0%, 100% {
        filter: drop-shadow(0 0 12px rgba(212,169,79,0.55)) drop-shadow(0 0 24px rgba(181,101,47,0.3));
        transform: translateY(0) rotate(-3deg);
    }
    50% {
        filter: drop-shadow(0 0 30px rgba(212,169,79,0.9)) drop-shadow(0 0 50px rgba(181,101,47,0.5));
        transform: translateY(-10px) rotate(3deg);
    }
}

@media (max-width: 940px) {
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
    footer { padding: 80px 0 30px; }
}
@media (max-width: 560px) {
    .footer-grid { grid-template-columns: 1fr; }
    .lantern { display: none; }
}

/* =========================================================
   Cursor glow — dual-layer with parallax
   ========================================================= */
#cursor-glow {
    position: fixed;
    width: 420px; height: 420px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    background:
        radial-gradient(circle, rgba(212,169,79,0.16) 0%, rgba(181,101,47,0.08) 35%, transparent 70%);
    transform: translate(-50%, -50%);
    transition: opacity 0.4s ease;
    opacity: 0;
    mix-blend-mode: screen;
    will-change: transform, left, top;
}
#cursor-glow-2 {
    position: fixed;
    width: 22px; height: 22px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    background: radial-gradient(circle, var(--gold-400), rgba(212,169,79,0.3));
    transform: translate(-50%, -50%);
    transition: opacity 0.4s ease, width 0.3s var(--ease-spring), height 0.3s var(--ease-spring), background 0.3s ease;
    opacity: 0;
    box-shadow: 0 0 14px rgba(212,169,79,0.6), 0 0 28px rgba(181,101,47,0.3);
    will-change: transform;
    border: 1px solid rgba(251,242,226,0.4);
    backdrop-filter: blur(2px);
}
#cursor-glow-2.is-hover {
    width: 58px; height: 58px;
    background: rgba(212,169,79,0.12);
    border-color: var(--gold-400);
}
@media (max-width: 900px), (hover: none) {
    #cursor-glow, #cursor-glow-2 { display: none !important; }
}

/* =========================================================
   UNIFIED RESPONSIVE BREAKPOINTS (mobile-first overrides)
   ========================================================= */

/* ---- Tablet: ≤ 940px ---- */
@media (max-width: 940px) {
    .container { padding: 0 24px; }

    /* Section vertical padding */
    .about, .dishes, .experience, .ingredients, .stats,
    .gallery, .testimonials, .reservation, .location { padding: 120px 0; }
    footer { padding: 80px 0 30px; }

    /* Hero */
    .hero-title { letter-spacing: -0.015em; }
    .hero-content { padding: 0 24px; }

    /* Nav adjustments */
    .navbar { padding: 18px 22px; }
    .navbar.scrolled { padding: 12px 22px; }
    .navbar .logo-text { font-size: 20px; }
    .lang-switch { padding: 3px; }
    .lang-switch a { font-size: 11.5px; padding: 5px 10px; }

    /* Buttons — slightly tighter */
    .btn { padding: 13px 26px; font-size: 13.5px; min-height: 42px; }
    .btn-lg { padding: 16px 36px; font-size: 15px; min-height: 54px; }
    .btn-sm { padding: 8px 18px; font-size: 12px; min-height: 34px; }

    /* Dishes */
    .dish-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 22px; }
    .dish-img { height: 220px; }

    /* Stats */
    .stat-num { font-size: clamp(36px, 5vw, 56px); }

    /* Reservation card */
    .res-wrap { padding: 3px; }
    .res-inner { padding: 48px 40px; }

    /* Footer */
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}

/* ---- Small Tablet / Large Phone: ≤ 760px ---- */
@media (max-width: 760px) {
    .container { padding: 0 20px; }

    .about, .dishes, .experience, .ingredients, .stats,
    .gallery, .testimonials, .reservation, .location { padding: 96px 0; }
    footer { padding: 72px 0 28px; }

    /* Headings scale */
    .section-title { font-size: clamp(26px, 5.5vw, 40px); }
    .section-sub { font-size: 15px; }

    /* Hero adjustments */
    .hero-eyebrow { letter-spacing: 0.3em; font-size: 11px; gap: 10px; margin-bottom: 20px; }
    .hero-eyebrow::before, .hero-eyebrow::after { width: 26px; }
    .hero-title { font-size: clamp(40px, 12vw, 86px); margin-bottom: 22px; }
    .hero-sub { font-size: 15px; margin-bottom: 36px; line-height: 1.7; }
    .hero-buttons { gap: 14px; }

    /* Buttons smaller */
    .btn { padding: 12px 22px; font-size: 13px; min-height: 40px; }
    .btn-lg { padding: 14px 30px; font-size: 14.5px; min-height: 50px; }
    .btn-sm { padding: 8px 16px; font-size: 11.5px; min-height: 34px; }
    .res-submit { padding: 12px 0; min-height: 48px; font-size: 14px; }

    /* Navbar hide lang-switch labels on small (keep reserve only) */
    .navbar .logo img { height: 38px; }
    .nav-right { gap: 10px; }
    .lang-switch a { padding: 5px 8px; font-size: 11px; }

    /* Stats: ensure 2-col */
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .stats-grid > div { padding: 28px 14px; }
    .stat-num { font-size: clamp(30px, 7vw, 48px); }
    .stat-label { font-size: 11.5px; }

    /* Gallery masonry to 2 columns */
    .masonry { columns: 2 160px; column-gap: 14px; }
    .masonry-item { margin-bottom: 14px; }
    .masonry-overlay { padding: 14px; }
    .masonry-overlay span { font-size: 13.5px; }
    .masonry-overlay .zoom-icon { width: 34px; height: 34px; font-size: 15px; }

    /* Testimonials */
    .testi-track { gap: 14px; padding-bottom: 16px; }
    .testi-card { min-width: 280px; max-width: 320px; padding: 30px 24px; }
    .testi-quote { font-size: 15px; }

    /* Reservation */
    .res-inner { padding: 40px 28px; }
    .res-info h2 { font-size: clamp(28px, 6vw, 38px); margin-bottom: 14px; }
    .res-info p { margin-bottom: 24px; font-size: 14.5px; }
    .res-info .ri-item { margin-bottom: 14px; font-size: 14px; }
    .res-info .ri-item > div:first-child { width: 36px; height: 36px; font-size: 16px; }
    .res-form { gap: 16px; }
    .res-form label { font-size: 11px; margin-bottom: 6px; }
    .res-form input, .res-form textarea, .res-form select { padding: 12px 14px 12px 42px; font-size: 14px; border-radius: 16px; }
    .res-form textarea { padding: 12px 14px 12px 42px; min-height: 100px; }
    .res-form .field::before { font-size: 14px; bottom: 14px; left: 14px; }
    .form-msg { padding: 12px 14px; font-size: 13.5px; }

    /* Location */
    .loc-card { padding: 40px 30px; }
    .loc-card h2 { font-size: clamp(26px, 5.5vw, 36px); }
    .loc-card .li-item { margin-bottom: 16px; font-size: 14.5px; }
    .loc-card .li-item > div:first-child { width: 42px; height: 42px; font-size: 18px; }
    .loc-map { min-height: 360px; }
    .loc-map iframe { min-height: 360px; }

    /* Footer */
    .footer-grid { margin-bottom: 60px; gap: 36px; }
    .footer-logo { font-size: 20px; }
    footer h4 { font-size: 15px; margin-bottom: 18px; }
    .footer-newsletter input { font-size: 13.5px; }
    .footer-newsletter button { font-size: 12.5px; padding: 0 18px; }
    .footer-bottom { font-size: 12.5px; }
}

/* ---- Phone: ≤ 640px ---- */
@media (max-width: 640px) {
    .container { padding: 0 18px; }

    .about, .dishes, .experience, .ingredients, .stats,
    .gallery, .testimonials, .reservation, .location { padding: 84px 0; }
    footer { padding: 64px 0 24px; }

    /* Navbar compact */
    .navbar { padding: 14px 16px; }
    .navbar.scrolled { padding: 10px 16px; }
    .navbar .logo img { height: 36px; }
    .navbar .logo-text { font-size: 18px; }
    .nav-right { gap: 8px; }
    .lang-switch { padding: 2px; gap: 0; }
    .lang-switch a { padding: 4px 7px; font-size: 10.5px; }
    .nav-toggle { width: 40px; height: 40px; font-size: 24px; }

    /* Hero */
    .hero { min-height: 92vh; }
    .hero-eyebrow { letter-spacing: 0.22em; font-size: 10.5px; gap: 8px; margin-bottom: 18px; }
    .hero-eyebrow::before, .hero-eyebrow::after { width: 20px; }
    .hero-title { margin-bottom: 18px; font-size: clamp(36px, 14vw, 72px); }
    .hero-sub { font-size: 14.5px; margin-bottom: 32px; }
    .hero-buttons { gap: 12px; }
    .hero-buttons .btn { flex: 1 1 180px; }
    .hero-scroll { bottom: 28px; gap: 10px; font-size: 10px; letter-spacing: 0.35em; }
    .hero-scroll .line-wrap { height: 50px; }

    /* Steam less prominent on mobile */
    .steam { height: 200px; }

    /* Buttons — even more compact */
    .btn { padding: 11px 20px; font-size: 12.5px; min-height: 40px; gap: 6px; }
    .btn-lg { padding: 13px 26px; font-size: 14px; min-height: 48px; }
    .btn-sm { padding: 7px 14px; font-size: 11px; min-height: 32px; }
    .btn-icon { width: 40px; height: 40px; min-height: 40px; font-size: 15px; }
    .res-submit { padding: 11px 0; min-height: 46px; font-size: 13.5px; }

    /* Section label shrink */
    .section-label { font-size: 11px; letter-spacing: 0.25em; margin-bottom: 10px; }
    .section-title { font-size: clamp(24px, 6.5vw, 36px); margin-bottom: 12px; }
    .section-sub { font-size: 14px; line-height: 1.7; }

    /* Dish card adjustments */
    .dish-grid { grid-template-columns: 1fr; gap: 20px; }
    .dish-img { height: 210px; }
    .dish-card { border-radius: 22px; }
    .dish-body { padding: 22px 22px 26px; }
    .dish-body h3 { font-size: 20px; }
    .dish-body p { font-size: 13.5px; }
    .dish-price-tag { padding: 7px 14px; font-size: 13px; top: 12px; right: 12px; }
    .dish-order { font-size: 13px; }
    .dishes-cta { margin-top: 48px; }

    /* Experience flip cards */
    .exp-grid { grid-template-columns: 1fr; gap: 18px; }
    .exp-card { height: 240px; }

    /* Ingredients horizontal scroll */
    .ing-scroll { gap: 14px; padding: 12px 18px 28px; }
    .ing-card { min-width: 180px; padding: 28px 18px; }
    .ing-icon { font-size: 42px; margin-bottom: 14px; }

    /* Video story play button */
    .video-story { min-height: 60vh; }
    .play-btn { width: 96px; height: 96px; }
    .play-btn::after { border-width: 13px 0 13px 22px; margin-left: 5px; }
    .play-btn-wrap::before, .play-btn-wrap::after { width: 180px; height: 180px; margin-left: -90px; margin-top: -90px; }
    .video-caption { font-size: clamp(18px, 4vw, 28px); bottom: 32px; }

    /* Stats card padding */
    .stats-grid > div { padding: 24px 12px; border-radius: 18px; }
    .stat-num { font-size: clamp(28px, 8vw, 44px); }
    .stat-label { font-size: 11px; letter-spacing: 0.05em; }

    /* Gallery: 2 cols, slightly smaller */
    .masonry { columns: 2 140px; column-gap: 12px; }
    .masonry-item { margin-bottom: 12px; border-radius: 14px; }
    .masonry-overlay { padding: 12px; }
    .masonry-overlay span { font-size: 13px; }
    .masonry-overlay .zoom-icon { width: 32px; height: 32px; font-size: 14px; }
    .lightbox { padding: 20px; }
    .lightbox img { max-width: 96vw; max-height: 86vh; }
    .lightbox-close { top: 14px; right: 14px; width: 42px; height: 42px; font-size: 24px; }

    /* Testimonials */
    .testi-track { gap: 12px; padding: 8px 4px 16px; }
    .testi-card { min-width: 260px; padding: 28px 22px; border-radius: 22px; }
    .testi-card::before { font-size: 80px; top: -20px; left: 16px; }
    .testi-stars { font-size: 14px; margin-bottom: 12px; }
    .testi-quote { font-size: 14.5px; line-height: 1.7; margin-bottom: 18px; }
    .testi-person img { width: 48px; height: 48px; border-width: 1.5px; }
    .testi-person span { font-size: 14px; }

    /* Reservation wrap tighter */
    .res-inner { grid-template-columns: 1fr; padding: 36px 22px; border-radius: 22px; }
    .res-form { grid-template-columns: 1fr; gap: 14px; }
    .res-info h2 { font-size: clamp(26px, 7vw, 34px); margin-bottom: 12px; }
    .res-info p { margin-bottom: 22px; }
    .res-info .ri-item { gap: 12px; margin-bottom: 14px; }
    .res-info .ri-item > div:first-child { width: 36px; height: 36px; border-radius: 10px; font-size: 15px; }
    .res-info .ri-item strong { font-size: 12px; }

    /* Location */
    .loc-grid { grid-template-columns: 1fr; gap: 28px; }
    .loc-map { min-height: 300px; border-radius: 22px; }
    .loc-map iframe { min-height: 300px; }
    .loc-card { padding: 34px 24px; border-radius: 22px; }
    .loc-card .li-item { gap: 12px; margin-bottom: 16px; }
    .loc-card .li-item > div:first-child { width: 40px; height: 40px; border-radius: 10px; font-size: 17px; }
    .loc-card .li-item strong { font-size: 11.5px; }
    .loc-card a.btn { margin-top: 10px !important; }

    /* Footer to 1 column, newsletter responsive */
    .footer-grid { grid-template-columns: 1fr; gap: 32px; margin-bottom: 48px; }
    .footer-about p { max-width: 100%; font-size: 14px; }
    footer h4 { font-size: 14px; margin-bottom: 16px; }
    .footer-social { gap: 10px; margin-top: 18px; }
    .footer-social a { width: 40px; height: 40px; font-size: 13px; }
    .footer-newsletter input { padding: 12px 110px 12px 16px; font-size: 13px; }
    .footer-newsletter button { padding: 0 16px; font-size: 12px; top: 3px; right: 3px; bottom: 3px; }
    .footer-bottom { padding-top: 24px; padding-left: 8px; padding-right: 8px; font-size: 12px; line-height: 1.7; }
}

/* ---- Small Phone: ≤ 500px ---- */
@media (max-width: 500px) {
    .container { padding: 0 16px; }

    .about, .dishes, .experience, .ingredients, .stats,
    .gallery, .testimonials, .reservation, .location { padding: 72px 0; }
    footer { padding: 56px 0 22px; }

    /* Navbar - tighter, drop small lang-switch padding further */
    .navbar { padding: 12px 14px; }
    .navbar.scrolled { padding: 9px 14px; }
    .navbar .logo { gap: 8px; }
    .navbar .logo img { height: 34px; }
    .navbar .logo-text { font-size: 17px; }
    .nav-right { gap: 6px; }
    .lang-switch a { padding: 4px 6px; font-size: 10px; }
    .nav-toggle { width: 38px; height: 38px; font-size: 22px; border-radius: 10px; }

    /* Hero */
    .hero-eyebrow { letter-spacing: 0.18em; font-size: 10px; gap: 6px; }
    .hero-eyebrow::before, .hero-eyebrow::after { width: 16px; }
    .hero-title { font-size: clamp(32px, 15vw, 62px); }
    .hero-sub { font-size: 14px; }
    .hero-buttons { flex-direction: column; gap: 10px; }
    .hero-buttons .btn { width: 100%; flex: none; }

    /* Buttons: consistent compact mobile size */
    .btn { padding: 12px 22px; font-size: 13px; min-height: 44px; }
    .btn-lg { padding: 14px 24px; font-size: 14px; min-height: 50px; }
    .btn-sm { padding: 9px 16px; font-size: 11.5px; min-height: 36px; }
    .btn-icon { width: 40px; height: 40px; min-height: 40px; }
    .res-submit { padding: 12px 0; min-height: 48px; font-size: 14px; }

    /* Stats still 2-col, but smaller numbers */
    .stats-grid { gap: 12px; }
    .stats-grid > div { padding: 22px 10px; border-radius: 16px; }
    .stat-num { font-size: clamp(26px, 8.5vw, 40px); }

    /* Gallery masonry 2 cols */
    .masonry { columns: 2 120px; column-gap: 10px; }
    .masonry-item { margin-bottom: 10px; }

    /* Dish image height smaller to fit */
    .dish-img { height: 200px; }

    /* Footer newsletter: stack button BELOW input on tiny screens (no absolute) */
    .footer-newsletter .nl-field { position: static; margin-bottom: 10px; }
    .footer-newsletter input {
        position: relative;
        padding: 12px 16px;
        width: 100%;
        border-radius: 999px;
        margin-bottom: 10px;
    }
    .footer-newsletter button {
        position: relative !important;
        top: auto !important; right: auto !important; bottom: auto !important;
        width: 100%;
        min-height: 44px;
        padding: 10px 20px;
        font-size: 13px;
        border-radius: 999px;
    }
}

/* ---- Tiny Phone: ≤ 380px ---- */
@media (max-width: 380px) {
    .container { padding: 0 14px; }
    .about, .dishes, .experience, .ingredients, .stats,
    .gallery, .testimonials, .reservation, .location { padding: 64px 0; }

    .btn { padding: 11px 20px; font-size: 12.5px; min-height: 42px; }
    .btn-sm { padding: 8px 14px; font-size: 11px; }
    .hero-scroll { display: none; }
    .dish-img { height: 180px; }
    .res-inner { padding: 28px 18px; }
    .loc-card { padding: 28px 20px; }
    .masonry { columns: 1; }
}

/* Touch devices: remove hover-only effects, add tap-active feedback */
@media (hover: none) {
    .btn:hover, .btn-primary:hover, .btn-outline:hover,
    .btn-dark:hover, .btn-icon:hover, .dish-card:hover,
    .exp-card:hover, .ing-card:hover, .testi-card:hover,
    .masonry-item:hover, .dish-order:hover,
    .res-submit:hover, .stats-grid > div:hover,
    .loc-card .li-item:hover, .res-info .ri-item:hover,
    .footer-newsletter button:hover {
        transform: none !important;
        box-shadow: none !important;
    }
    .btn:active, .btn-primary:active, .btn-outline:active,
    .btn-dark:active, .btn-icon:active,
    .dish-card:active, .dish-order:active, .res-submit:active,
    .footer-newsletter button:active {
        transform: scale(0.97) !important;
    }
    .dish-card:active::before, .dish-card:active::after { opacity: 1; }
}

/* =========================================================
   Utility helpers
   ========================================================= */
.center  { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }
.w-full  { width: 100%; }
.text-center { text-align: center; }

/* Ornamental divider */
.ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 20px 0 36px;
}
.ornament::before, .ornament::after {
    content: '';
    flex: 1;
    max-width: 80px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold-500), transparent);
}
.ornament span {
    color: var(--gold-500);
    font-size: 18px;
    letter-spacing: 0.4em;
}