:root {
            --gold: #c9a84c;
            --gold-light: #e8c97a;
            --gold-dark: #9a7a2e;
            --deep-red: #8b1a1a;
            --crimson: #6d0f0f;
            --black: #020202;
            --dark: #0a0808;
            --dark-2: #110d0d;
            --dark-3: #1a1212;
            --white: #f5efe6;
            --cream: #e8dcc8;
            --text-muted: #9a8f80;
            --glow-gold: rgba(201,168,76,0.3);
        }

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

        html { scroll-behavior: smooth; overflow-x: hidden; }

        body {
            background-color: var(--black);
            color: var(--white);
            font-family: 'Montserrat', sans-serif;
            font-weight: 300;
            overflow-x: hidden;
        }

        ::-webkit-scrollbar { width: 4px; }
        ::-webkit-scrollbar-track { background: var(--black); }
        ::-webkit-scrollbar-thumb { background: var(--gold-dark); border-radius: 2px; }

        /* ── UTILITIES ── */
        .section-label {
            font-size: 0.62rem;
            font-weight: 400;
            letter-spacing: 0.45em;
            text-transform: uppercase;
            color: var(--gold);
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 1.4rem;
        }
        .section-label::before, .section-label::after {
            content: '';
            height: 1px;
            width: 36px;
            background: linear-gradient(90deg, transparent, var(--gold));
        }
        .section-label::after { background: linear-gradient(90deg, var(--gold), transparent); }

        .section-title {
            font-family: 'Cormorant Garamond', serif;
            font-size: clamp(2rem, 5vw, 3.8rem);
            font-weight: 300;
            line-height: 1.1;
            color: var(--cream);
        }
        .section-title em { font-style: italic; color: var(--gold); }

        .gold-line {
            width: 55px; height: 1px;
            background: linear-gradient(90deg, var(--gold), transparent);
            margin: 1.4rem 0;
        }

        .btn-gold {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            background: linear-gradient(135deg, var(--gold), var(--gold-dark));
            color: var(--black);
            text-decoration: none;
            font-size: 0.68rem;
            font-weight: 500;
            letter-spacing: 0.25em;
            text-transform: uppercase;
            padding: 15px 34px;
            border: none;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            transition: all 0.4s ease;
        }
        .btn-gold::before {
            content: '';
            position: absolute;
            top: 0; left: -100%;
            width: 100%; height: 100%;
            background: linear-gradient(135deg, var(--gold-light), var(--gold));
            transition: left 0.4s ease;
        }
        .btn-gold:hover::before { left: 0; }
        .btn-gold span { position: relative; z-index: 1; }
        .btn-gold:hover { box-shadow: 0 0 28px var(--glow-gold); transform: translateY(-2px); }

        .btn-outline {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            background: transparent;
            color: var(--gold);
            text-decoration: none;
            font-size: 0.68rem;
            font-weight: 400;
            letter-spacing: 0.25em;
            text-transform: uppercase;
            padding: 14px 32px;
            border: 1px solid var(--gold-dark);
            cursor: pointer;
            transition: all 0.4s ease;
        }
        .btn-outline:hover {
            background: rgba(201,168,76,0.07);
            border-color: var(--gold);
            box-shadow: 0 0 20px var(--glow-gold);
        }

        .reveal {
            opacity: 0;
            transform: translateY(38px);
            transition: opacity 0.85s cubic-bezier(0.16,1,0.3,1), transform 0.85s cubic-bezier(0.16,1,0.3,1);
        }
        .reveal.visible { opacity: 1; transform: translateY(0); }
        .reveal-d1 { transition-delay: 0.1s; }
        .reveal-d2 { transition-delay: 0.2s; }
        .reveal-d3 { transition-delay: 0.3s; }
        .reveal-d4 { transition-delay: 0.4s; }

        /* ── ANNOUNCEMENT BANNER ── */
        .banner {
            background: linear-gradient(90deg, var(--crimson), var(--deep-red), var(--crimson));
            background-size: 200% 100%;
            animation: bannerMove 6s ease infinite;
            padding: 9px 20px;
            text-align: center;
            position: relative;
            z-index: 100;
        }
        @keyframes bannerMove {
            0%,100% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
        }
        .banner p {
            font-size: 0.62rem;
            letter-spacing: 0.22em;
            text-transform: uppercase;
            color: var(--cream);
        }
        .banner strong { color: var(--gold-light); }
        .banner-dot {
            display: inline-block;
            width: 4px; height: 4px;
            background: var(--gold);
            border-radius: 50%;
            margin: 0 12px;
            vertical-align: middle;
            animation: dot 2s ease infinite;
        }
        @keyframes dot { 0%,100%{opacity:1}50%{opacity:0.3} }

        /* ── NAV ── */
        nav {
            position: fixed;
            top: 0; left: 0; right: 0;
            z-index: 999;
            padding: 22px 60px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: all 0.5s ease;
        }
        nav.scrolled {
            background: rgba(2,2,2,0.96);
            backdrop-filter: blur(18px);
            padding: 14px 60px;
            border-bottom: 1px solid rgba(201,168,76,0.1);
        }
        .nav-logo {
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    pointer-events: none;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.4rem;
    font-weight: 300;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-light);
    text-decoration: none;
}
nav.scrolled .nav-logo {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
        .nav-logo span { color: var(--gold); font-style: italic; }

        .nav-links {
            display: flex;
            list-style: none;
            gap: 38px;
            align-items: center;
        }
        .nav-links a {
            font-size: 0.62rem;
            font-weight: 400;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: var(--text-muted);
            text-decoration: none;
            transition: color 0.3s;
            position: relative;
        }
        .nav-links a::after {
            content: '';
            position: absolute;
            bottom: -4px; left: 0;
            width: 0; height: 1px;
            background: var(--gold);
            transition: width 0.3s;
        }
        .nav-links a:hover { color: var(--gold); }
        .nav-links a:hover::after { width: 100%; }

        .nav-wa {
            color: var(--gold) !important;
            border: 1px solid rgba(201,168,76,0.35) !important;
            padding: 7px 18px !important;
        }
        .nav-wa::after { display: none !important; }
        .nav-wa:hover { background: rgba(201,168,76,0.08) !important; }

        .hamburger {
            display: none;
            flex-direction: column;
            gap: 5px;
            cursor: pointer;
            padding: 4px;
            background: none;
            border: none;
        }
        .hamburger span {
            display: block;
            width: 24px; height: 1px;
            background: var(--gold);
            transition: all 0.3s;
        }

        /* Mobile menu */
        .mob-menu {
            position: fixed;
            inset: 0;
            background: rgba(2,2,2,0.98);
            z-index: 9999;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 36px;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.4s;
        }
        .mob-menu.open { opacity: 1; pointer-events: all; }
        .mob-close {
            position: absolute;
            top: 28px; right: 28px;
            background: none; border: none;
            color: var(--gold);
            font-size: 1.6rem;
            cursor: pointer;
            line-height: 1;
        }
        .mob-menu a {
            font-family: 'Cormorant Garamond', serif;
            font-size: 2.4rem;
            font-weight: 300;
            color: var(--cream);
            text-decoration: none;
            transition: color 0.3s;
        }
        .mob-menu a:hover { color: var(--gold); }

        /* ── HERO ── */
        #hero {
            position: relative;
            height: 100vh;
            min-height: 680px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        .hero-bg {
            position: absolute;
            inset: 0;
            background: #060303;
            z-index: 0;
        }

        /* Animated ambient glows */
        .glow {
            position: absolute;
            border-radius: 50%;
            filter: blur(90px);
            animation: glowPulse 5s ease-in-out infinite;
        }
        .g1 { width:420px;height:420px; background:rgba(109,15,15,0.45); bottom:-80px; left:5%; animation-delay:0s; }
        .g2 { width:280px;height:280px; background:rgba(201,168,76,0.12); top:15%; right:8%; animation-delay:2s; }
        .g3 { width:320px;height:320px; background:rgba(139,26,26,0.25); top:35%; left:38%; animation-delay:1s; }
        .g4 { width:200px;height:200px; background:rgba(201,168,76,0.08); bottom:10%; right:25%; animation-delay:3s; }

        @keyframes glowPulse {
            0%,100%{opacity:0.6;transform:scale(1);}
            50%{opacity:1;transform:scale(1.12);}
        }

        /* Particle stars */
        .particles { position:absolute; inset:0; z-index:1; overflow:hidden; }
        .p {
            position:absolute;
            background:var(--gold-light);
            border-radius:50%;
            animation: floatUp linear infinite;
            box-shadow: 0 0 4px 1px rgba(232,201,122,0.5);
        }
        @keyframes floatUp {
            0%{transform:translateY(100vh) scale(0);opacity:0;}
            10%{opacity:1;}
            90%{opacity:0.4;}
            100%{transform:translateY(-30px) scale(1);opacity:0;}
        }

        /* Decorative arch/window SVG */
        .hero-arch {
            position: absolute;
            inset: 0;
            z-index: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            pointer-events: none;
        }

        /* dark vignette overlay */
        .hero-vignette {
            position: absolute;
            inset: 0;
            z-index: 2;
            background:
                radial-gradient(ellipse at 50% 50%, transparent 30%, rgba(2,2,2,0.7) 100%),
                linear-gradient(180deg, rgba(2,2,2,0.5) 0%, transparent 30%, transparent 60%, rgba(2,2,2,0.8) 100%);
        }

        .hero-content {
            position: relative;
            z-index: 3;
            text-align: center;
            padding: 0 24px;
            max-width: 820px;
        }

        .hero-eyebrow {
            font-size: 0.6rem;
            letter-spacing: 0.55em;
            text-transform: uppercase;
            color: var(--gold);
            margin-bottom: 1.4rem;
            opacity: 0;
            animation: fadeUp 1s ease 0.5s forwards;
        }

        .hero-title {
            font-family: 'Cormorant Garamond', serif;
            font-size: clamp(3rem, 9vw, 7.5rem);
            font-weight: 300;
            line-height: 1.02;
            color: var(--cream);
            margin-bottom: 1.2rem;
            opacity: 0;
            animation: fadeUp 1.2s ease 0.8s forwards;
        }
        .hero-title em { font-style: italic; color: var(--gold); display: block; }

        .hero-sub {
            font-size: 0.7rem;
            letter-spacing: 0.35em;
            text-transform: uppercase;
            color: var(--text-muted);
            margin-bottom: 2.8rem;
            opacity: 0;
            animation: fadeUp 1s ease 1.1s forwards;
        }

        .hero-btns {
            display: flex;
            gap: 14px;
            justify-content: center;
            flex-wrap: wrap;
            opacity: 0;
            animation: fadeUp 1s ease 1.4s forwards;
        }

        .hero-scroll {
            position: absolute;
            bottom: 36px; left: 50%;
            transform: translateX(-50%);
            z-index: 3;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            opacity: 0;
            animation: fadeUp 1s ease 2s forwards;
        }
        .hero-scroll span {
            font-size: 0.52rem;
            letter-spacing: 0.35em;
            text-transform: uppercase;
            color: var(--text-muted);
        }
        .scroll-bar {
            width: 1px; height: 48px;
            background: linear-gradient(180deg, var(--gold), transparent);
            animation: scrollAnim 2s ease infinite;
        }
        @keyframes scrollAnim { 0%,100%{opacity:0.4;transform:scaleY(1);} 50%{opacity:1;transform:scaleY(0.6);} }

        @keyframes fadeUp {
            from { opacity:0; transform:translateY(28px); }
            to   { opacity:1; transform:translateY(0); }
        }

        /* Ornament corners */
        .orn { position:absolute; z-index:3; opacity:0.18; pointer-events:none; }
        .orn-tl { top:90px; left:50px; }
        .orn-br { bottom:90px; right:50px; transform:rotate(180deg); }

        /* ── ABOUT ── */
#about {
    padding: 110px 60px;
    position: relative;
    overflow: hidden;
    background: #0d0d0d;
}

#about::before {
    content: '';
    position: absolute;
    width: 80%;
    height: 80%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-image: url('logo2.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.04;
    pointer-events: none;
}

.about-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 1;
}

.about-label {
    font-family: 'Cormorant Garamond', serif;
    font-size: 0.75rem;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: #c9a84c;
    display: block;
    margin-bottom: 14px;
}

.about-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2.2rem, 5vw, 3.5rem);
    font-weight: 600;
    color: #f5efe6;
    line-height: 1.2;
    margin-bottom: 20px;
}

.about-line {
    width: 60px;
    height: 1px;
    background: #c9a84c;
    margin: 0 auto 40px auto;
}

.about-text {
    font-family: 'Lato', sans-serif;
    font-size: 1rem;
    color: #f5efe6;
    line-height: 2;
    margin-bottom: 20px;
    max-width: 660px;
}

/* ── RESERVE BUTTON ── */
.about-cta {
    display: inline-block;
    margin-top: 40px;
    padding: 15px 44px;
    border: 1px solid #c9a84c;
    color: #c9a84c;
    font-family: 'Cormorant Garamond', serif;
    font-size: 0.95rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: color 0.4s ease;
    background: transparent;
}

.about-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #c9a84c;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
    z-index: 0;
}

.about-cta:hover::before {
    transform: scaleX(1);
}

.about-cta:hover {
    color: #0d0d0d;
}

.about-cta span {
    position: relative;
    z-index: 1;
}


        /* ── MENU ── */
        #menu {
            padding: 110px 60px;
            background: var(--dark);
            position: relative;
        }
        #menu::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--gold-dark), transparent);
        }
        #menu::after {
            content: '';
            position: absolute;
            bottom: 0; left: 0; right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--gold-dark), transparent);
        }

        .menu-header {
            text-align: center;
            margin-bottom: 3.5rem;
        }
        .menu-header .section-label { justify-content: center; }

        .menu-tabs {
            display: flex;
            justify-content: center;
            gap: 0;
            margin-bottom: 3rem;
            border: 1px solid rgba(201,168,76,0.15);
            width: fit-content;
            margin-left: auto;
            margin-right: auto;
        }
        .tab-btn {
            font-size: 0.62rem;
            font-weight: 400;
            letter-spacing: 0.22em;
            text-transform: uppercase;
            color: var(--text-muted);
            background: transparent;
            border: none;
            padding: 12px 28px;
            cursor: pointer;
            transition: all 0.3s;
            border-right: 1px solid rgba(201,168,76,0.15);
            font-family: 'Montserrat', sans-serif;
        }
        .tab-btn:last-child { border-right: none; }
        .tab-btn.active {
            background: rgba(201,168,76,0.1);
            color: var(--gold);
        }
        .tab-btn:hover { color: var(--gold); }

        .menu-panel { display: none; }
        .menu-panel.active { display: block; }

        .menu-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2px;
            max-width: 1100px;
            margin: 0 auto;
        }

        .menu-card {
            background: rgba(10,8,8,0.8);
            border: 1px solid rgba(201,168,76,0.07);
            padding: 30px;
            transition: all 0.4s ease;
            position: relative;
            overflow: hidden;
        }
        .menu-card::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 2px;
            background: linear-gradient(90deg, transparent, var(--gold), transparent);
            transform: scaleX(0);
            transition: transform 0.4s ease;
        }
        .menu-card:hover::before { transform: scaleX(1); }
        .menu-card:hover {
            background: rgba(20,12,12,0.95);
            border-color: rgba(201,168,76,0.18);
        }
        .menu-card:hover { transform: translateY(-4px); }

        .card-tag {
            font-size: 0.55rem;
            letter-spacing: 0.3em;
            text-transform: uppercase;
            color: var(--gold);
            margin-bottom: 10px;
        }
        .card-name {
            font-family: 'Cormorant Garamond', serif;
            font-size: 1.3rem;
            font-weight: 400;
            color: var(--cream);
            margin-bottom: 8px;
        }
        .card-desc {
            font-size: 0.7rem;
            line-height: 1.75;
            color: var(--text-muted);
            margin-bottom: 16px;
        }
        .card-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-top: 1px solid rgba(201,168,76,0.08);
            padding-top: 14px;
        }
        .card-price {
            font-family: 'Cormorant Garamond', serif;
            font-size: 1.4rem;
            color: var(--gold);
        }
        .card-badge {
            font-size: 0.55rem;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            color: var(--deep-red);
            border: 1px solid var(--deep-red);
            padding: 3px 8px;
        }

        /* ── EXPERIENCE ── */
        #experience {
            padding: 110px 60px;
            position: relative;
            overflow: hidden;
        }

        .exp-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 90px;
            align-items: center;
            max-width: 1180px;
            margin: 0 auto;
        }

        .exp-text .section-label { justify-content: flex-start; }

        .exp-features {
            margin-top: 2.5rem;
            display: flex;
            flex-direction: column;
            gap: 0;
        }
        .exp-item {
            display: flex;
            gap: 20px;
            padding: 22px 0;
            border-bottom: 1px solid rgba(201,168,76,0.07);
            transition: all 0.3s;
        }
        .exp-item:hover { padding-left: 8px; }
        .exp-item:last-child { border-bottom: none; }

        .exp-icon {
            font-size: 1.4rem;
            min-width: 48px;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(201,168,76,0.05);
            border: 1px solid rgba(201,168,76,0.12);
            flex-shrink: 0;
        }
        .exp-item-title {
            font-family: 'Cormorant Garamond', serif;
            font-size: 1.1rem;
            color: var(--cream);
            margin-bottom: 5px;
        }
        .exp-item-desc {
            font-size: 0.7rem;
            line-height: 1.7;
            color: var(--text-muted);
        }

        .exp-visual {
            position: relative;
        }

        .exp-main-box {
            width: 100%;
            aspect-ratio: 4/5;
            background:
                radial-gradient(ellipse at 50% 20%, rgba(201,168,76,0.15) 0%, transparent 50%),
                radial-gradient(ellipse at 30% 80%, rgba(139,26,26,0.4) 0%, transparent 55%),
                linear-gradient(160deg, #130b0b, #0a0505);
            border: 1px solid rgba(201,168,76,0.08);
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            position: relative;
        }

        /* animated equalizer bars */
        .equalizer {
            display: flex;
            align-items: flex-end;
            gap: 5px;
            height: 70px;
        }
        .eq-bar {
            width: 6px;
            background: linear-gradient(180deg, var(--gold-light), var(--gold-dark));
            border-radius: 3px 3px 0 0;
            animation: eqAnim linear infinite;
        }
        @keyframes eqAnim {
            0%,100%{height:20%;}
            50%{height:100%;}
        }

        .exp-float-card {
            position: absolute;
            background: rgba(5,3,3,0.92);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(201,168,76,0.18);
            padding: 18px 22px;
            min-width: 170px;
        }
        .exp-float-1 { bottom: 40px; left: -40px; }
        .exp-float-2 { top: 50px; right: -40px; }

        .float-label {
            font-size: 0.55rem;
            letter-spacing: 0.25em;
            text-transform: uppercase;
            color: var(--text-muted);
            margin-bottom: 5px;
        }
        .float-value {
            font-family: 'Cormorant Garamond', serif;
            font-size: 1.5rem;
            color: var(--gold);
            line-height: 1;
        }

        /* ── GALLERY ── */
        #gallery {
            padding: 110px 60px;
            background: var(--dark);
            position: relative;
        }
        #gallery::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--gold-dark), transparent);
        }

        .gallery-header {
            text-align: center;
            margin-bottom: 3rem;
        }
        .gallery-header .section-label { justify-content: center; }

        .gallery-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-template-rows: 260px 260px;
            gap: 3px;
            max-width: 1200px;
            margin: 0 auto;
        }

        .g-item {
            position: relative;
            overflow: hidden;
            cursor: pointer;
        }
        .g-item:nth-child(1) { grid-column: 1 / 3; }
        .g-item:nth-child(4) { grid-column: 3 / 5; grid-row: 2 / 3; }

        .g-bg {
            width: 100%; height: 100%;
            transition: transform 0.6s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 3.5rem;
            filter: drop-shadow(0 0 18px rgba(201,168,76,0.3));
        }
        .g-item:hover .g-bg { transform: scale(1.07); }

        /* gallery bg colours */
        .gb1 { background: radial-gradient(ellipse at 40% 40%, rgba(201,168,76,0.25) 0%, transparent 55%), linear-gradient(135deg,#1a0e0e,#0a0505); }
        .gb2 { background: radial-gradient(ellipse at 60% 70%, rgba(139,26,26,0.45) 0%, transparent 55%), linear-gradient(135deg,#120a0a,#0d0707); }
        .gb3 { background: radial-gradient(ellipse at 50% 30%, rgba(201,168,76,0.2) 0%, transparent 50%), linear-gradient(135deg,#160c0c,#0a0505); }
        .gb4 { background: radial-gradient(ellipse at 30% 60%, rgba(109,15,15,0.5) 0%, transparent 55%), linear-gradient(135deg,#0f0808,#180e0e); }
        .gb5 { background: radial-gradient(ellipse at 70% 40%, rgba(201,168,76,0.18) 0%, transparent 45%), linear-gradient(135deg,#130b0b,#0a0505); }
        .gb6 { background: radial-gradient(ellipse at 50% 80%, rgba(139,26,26,0.35) 0%, transparent 50%), linear-gradient(135deg,#0d0707,#160c0c); }

        .g-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(transparent 40%, rgba(2,2,2,0.75) 100%);
            opacity: 0;
            transition: opacity 0.4s;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 22px;
        }
        .g-item:hover .g-overlay { opacity: 1; }
        .g-label {
            font-family: 'Cormorant Garamond', serif;
            font-size: 1.05rem;
            color: var(--cream);
        }
        .g-sub {
            font-size: 0.58rem;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: var(--gold);
            margin-top: 3px;
        }

        /* ── RESERVATION ── */
        #reservation {
            padding: 120px 60px;
            position: relative;
            overflow: hidden;
            text-align: center;
        }
        #reservation::before {
            content: '';
            position: absolute; inset: 0;
            background:
                radial-gradient(ellipse at 50% 0%, rgba(139,26,26,0.22) 0%, transparent 55%),
                radial-gradient(ellipse at 80% 100%, rgba(201,168,76,0.08) 0%, transparent 40%);
            pointer-events: none;
        }
        .res-bg-text {
            position: absolute;
            font-family: 'Cormorant Garamond', serif;
            font-size: 26vw;
            font-weight: 700;
            color: transparent;
            -webkit-text-stroke: 1px rgba(201,168,76,0.03);
            top: 50%; left: 50%;
            transform: translate(-50%,-50%);
            white-space: nowrap;
            pointer-events: none;
        }

        .res-content {
            position: relative;
            z-index: 1;
            max-width: 680px;
            margin: 0 auto;
        }
        .res-content .section-label { justify-content: center; }

        .res-title {
            font-family: 'Cormorant Garamond', serif;
            font-size: clamp(2.4rem, 6vw, 4.8rem);
            font-weight: 300;
            line-height: 1.1;
            color: var(--cream);
            margin-bottom: 1.2rem;
        }
        .res-title em { font-style: italic; color: var(--gold); }

        .res-text {
            font-size: 0.78rem;
            line-height: 1.95;
            color: var(--text-muted);
            margin-bottom: 2.5rem;
        }

        .wa-box {
            background: rgba(8,5,5,0.85);
            border: 1px solid rgba(201,168,76,0.14);
            padding: 38px 40px;
            margin-bottom: 1.5rem;
            position: relative;
        }
        .wa-box::before {
            content: '';
            position: absolute;
            top: -1px; left: 25%; right: 25%;
            height: 2px;
            background: linear-gradient(90deg, transparent, var(--gold), transparent);
        }

        .wa-preview {
            background: rgba(201,168,76,0.04);
            border: 1px solid rgba(201,168,76,0.1);
            border-radius: 0 10px 10px 10px;
            padding: 14px 18px;
            font-size: 0.72rem;
            color: var(--text-muted);
            line-height: 1.85;
            margin-bottom: 26px;
            text-align: left;
            font-style: italic;
            position: relative;
        }
        .wa-preview::before {
            content: '💬 Message Preview';
            position: absolute;
            top: -22px; left: -1px;
            font-size: 0.58rem;
            font-style: normal;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: var(--gold);
            background: rgba(201,168,76,0.08);
            padding: 3px 10px;
        }
        .wa-preview span { color: var(--gold); }

        .btn-wa {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            background: linear-gradient(135deg, #25d366, #128c5e);
            color: #fff;
            text-decoration: none;
            font-size: 0.72rem;
            font-weight: 500;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            padding: 18px 48px;
            border: none;
            cursor: pointer;
            transition: all 0.4s ease;
            position: relative;
            overflow: hidden;
            font-family: 'Montserrat', sans-serif;
        }
        .btn-wa::before {
            content: '';
            position: absolute;
            top: 0; left: -100%;
            width: 100%; height: 100%;
            background: linear-gradient(135deg, #2eea74, #25d366);
            transition: left 0.4s ease;
        }
        .btn-wa:hover::before { left: 0; }
        .btn-wa span, .btn-wa .wa-ico { position: relative; z-index: 1; }
        .btn-wa .wa-ico { font-size: 1.15rem; }
        .btn-wa:hover {
            box-shadow: 0 0 36px rgba(37,211,102,0.38);
            transform: translateY(-3px);
        }

        .res-note {
            font-size: 0.62rem;
            letter-spacing: 0.1em;
            color: rgba(154,143,128,0.6);
            margin-top: 1rem;
        }

        /* ── CONTACT ── */
        #contact {
            padding: 110px 60px;
            background: var(--dark-2);
            position: relative;
        }
        #contact::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--gold-dark), transparent);
        }

        .contact-wrap {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 80px;
            max-width: 1100px;
            margin: 0 auto;
        }

        .contact-items {
            display: flex;
            flex-direction: column;
            gap: 28px;
            margin: 2rem 0;
        }
        .c-item {
            display: flex;
            gap: 18px;
            align-items: flex-start;
        }
        .c-icon {
            font-size: 1rem;
            min-width: 42px; height: 42px;
            display: flex; align-items: center; justify-content: center;
            background: rgba(201,168,76,0.05);
            border: 1px solid rgba(201,168,76,0.14);
            flex-shrink: 0;
        }
        .c-label {
            font-family: 'Cormorant Garamond', serif;
            font-size: 0.95rem;
            color: var(--cream);
            margin-bottom: 4px;
        }
        .c-val {
            font-size: 0.7rem;
            color: var(--text-muted);
            line-height: 1.7;
            text-decoration: none;
            transition: color 0.3s;
        }
        a.c-val:hover { color: var(--gold); }

        .hours-table { margin-top: 5px; }
        .h-row {
            display: flex;
            justify-content: space-between;
            font-size: 0.66rem;
            color: var(--text-muted);
            padding: 4px 0;
            border-bottom: 1px solid rgba(201,168,76,0.05);
        }
        .h-row span:last-child { color: var(--gold-light); }

        .socials {
            display: flex;
            gap: 10px;
            margin-top: 1.8rem;
        }
        .soc-link {
            width: 42px; height: 42px;
            display: flex; align-items: center; justify-content: center;
            border: 1px solid rgba(201,168,76,0.18);
            color: var(--text-muted);
            text-decoration: none;
            font-size: 0.95rem;
            transition: all 0.3s;
        }
        .soc-link:hover {
            border-color: var(--gold);
            color: var(--gold);
            background: rgba(201,168,76,0.05);
            box-shadow: 0 0 14px var(--glow-gold);
        }

        .map-box {
            position: relative;
        }
        .map-frame {
            width: 100%; height: 380px;
            border: 1px solid rgba(201,168,76,0.12);
            overflow: hidden;
            position: relative;
        }
        .map-frame iframe {
            width: 100%; height: 100%;
            border: none;
            filter: grayscale(100%) invert(85%) contrast(0.85);
            opacity: 0.65;
        }
        .map-card {
            position: absolute;
            bottom: 0; left: 0;
            background: rgba(4,2,2,0.96);
            border: 1px solid rgba(201,168,76,0.18);
            border-bottom: none; border-left: none;
            padding: 16px 22px;
        }
        .map-name {
            font-family: 'Cormorant Garamond', serif;
            font-size: 1.05rem;
            color: var(--cream);
        }
        .map-addr {
            font-size: 0.62rem;
            letter-spacing: 0.1em;
            color: var(--text-muted);
            margin-top: 2px;
        }

        /* ── FOOTER ── */
        footer {
            padding: 55px 60px 28px;
            border-top: 1px solid rgba(201,168,76,0.07);
        }
        .footer-wrap {
            display: grid;
            grid-template-columns: 2fr 1fr 1fr;
            gap: 55px;
            max-width: 1180px;
            margin: 0 auto 50px;
        }
        .f-logo {
            font-family: 'Cormorant Garamond', serif;
            font-size: 1.85rem;
            font-weight: 300;
            color: var(--cream);
            margin-bottom: 0.9rem;
        }
        .f-logo span { color: var(--gold); font-style: italic; }
        .f-desc {
            font-size: 0.7rem;
            line-height: 1.85;
            color: var(--text-muted);
            max-width: 270px;
        }
        .f-col h4 {
            font-size: 0.58rem;
            font-weight: 500;
            letter-spacing: 0.3em;
            text-transform: uppercase;
            color: var(--gold);
            margin-bottom: 18px;
        }
        .f-links { list-style: none; display: flex; flex-direction: column; gap: 9px; }
        .f-links a {
            font-size: 0.7rem;
            color: var(--text-muted);
            text-decoration: none;
            transition: color 0.3s;
        }
        .f-links a:hover { color: var(--cream); }

        .footer-bottom {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 28px;
            border-top: 1px solid rgba(201,168,76,0.06);
            max-width: 1180px;
            margin: 0 auto;
        }
        .f-copy {
            font-size: 0.6rem;
            letter-spacing: 0.08em;
            color: rgba(154,143,128,0.45);
        }
        .f-copy span { color: var(--gold-dark); }

        /* ── STICKY WA ── */
        .sticky-wa {
            position: fixed;
            bottom: 28px; right: 28px;
            z-index: 1000;
            width: 54px; height: 54px;
            background: linear-gradient(135deg, #25d366, #128c5e);
            border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            text-decoration: none;
            font-size: 1.45rem;
            box-shadow: 0 4px 18px rgba(37,211,102,0.38);
            animation: waPop 2.5s ease infinite;
            transition: transform 0.3s;
        }
        .sticky-wa:hover {
            transform: scale(1.1);
            animation: none;
            box-shadow: 0 6px 28px rgba(37,211,102,0.55);
        }
        @keyframes waPop {
            0%,100%{box-shadow:0 4px 18px rgba(37,211,102,0.38);}
            50%{box-shadow:0 4px 28px rgba(37,211,102,0.65), 0 0 0 7px rgba(37,211,102,0.08);}
        }
        .wa-tip {
            position: absolute;
            right: 62px;
            background: rgba(4,2,2,0.96);
            border: 1px solid rgba(201,168,76,0.2);
            color: var(--cream);
            font-size: 0.62rem;
            letter-spacing: 0.12em;
            white-space: nowrap;
            padding: 7px 13px;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s;
        }
        .sticky-wa:hover .wa-tip { opacity: 1; }

        /* ── RESPONSIVE ── */
        @media (max-width: 1024px) {
            nav { padding: 18px 28px; }
            nav.scrolled { padding: 13px 28px; }
            .nav-links { display: none; }
            .hamburger { display: flex; }

            #about, #menu, #experience, #gallery, #reservation, #contact { padding: 75px 28px; }
            footer { padding: 50px 28px 24px; }

            .about-grid { grid-template-columns: 1fr; gap: 50px; }
            .about-accent-box { bottom: -18px; right: -10px; }
            .exp-grid { grid-template-columns: 1fr; gap: 50px; }
            .exp-visual { order: -1; }
            .exp-float-1 { left: 0; }
            .exp-float-2 { right: 0; }
            .menu-grid { grid-template-columns: 1fr 1fr; }
            .gallery-grid {
                grid-template-columns: 1fr 1fr;
                grid-template-rows: repeat(3, 200px);
            }
            .g-item:nth-child(1) { grid-column: 1 / 3; }
            .g-item:nth-child(4) { grid-column: 1 / 3; grid-row: auto; }
            .contact-wrap { grid-template-columns: 1fr; gap: 50px; }
            .footer-wrap { grid-template-columns: 1fr; gap: 35px; }
            .footer-bottom { flex-direction: column; gap: 14px; text-align: center; }
            .orn-tl, .orn-br { display: none; }
        }

        @media (max-width: 640px) {
            .hero-title { font-size: clamp(2.4rem, 12vw, 4rem); }
            .menu-grid { grid-template-columns: 1fr; }
            .gallery-grid {
                grid-template-columns: 1fr;
                grid-template-rows: repeat(6, 180px);
            }
            .g-item:nth-child(1) { grid-column: 1; }
            .g-item:nth-child(4) { grid-column: 1; }
            .wa-box { padding: 26px 20px; }
            .menu-tabs { flex-wrap: wrap; }
        }
        /* ── CONTACT ── */
#contact {
    background: #0a0a0a;
    padding: 120px 40px;
    display: flex;
    justify-content: center;
}

.contact-wrapper {
    max-width: 1100px;
    width: 100%;
}

.contact-header {
    text-align: center;
    margin-bottom: 60px;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.contact-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.contact-icon {
    font-size: 1.4rem;
    margin-top: 2px;
}

.contact-item h4 {
    color: #c9a84c;
    font-size: 0.75rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.contact-item p,
.contact-item a {
    color: #aaa;
    font-size: 0.95rem;
    line-height: 1.6;
    text-decoration: none;
    transition: color 0.3s;
}

.contact-item a:hover {
    color: #c9a84c;
}

.contact-map {
    height: 450px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #2a2a2a;
}

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
    .contact-grid {
        grid-template-columns: 1fr;
    }

    .contact-map {
        height: 300px;
    }
}
/* ══════════════════════════════════
   GALLERY
══════════════════════════════════ */
#gallery {
    background: #0d0d0d;
    padding: 120px 40px;
    display: flex;
    justify-content: center;
}

.gallery-wrapper {
    max-width: 1100px;
    width: 100%;
}

.gallery-header {
    text-align: center;
    margin-bottom: 60px;
}

.gallery-sub {
    color: #666;
    font-size: 0.9rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-top: 16px;
}

/* ── GRID ── */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 260px;
    gap: 12px;
}

/* Spanning classes */
.gallery-item.large {
    grid-column: span 2;
    grid-row: span 2;
}

.gallery-item.wide {
    grid-column: span 2;
}

/* ── ITEM ── */
.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    cursor: pointer;
    background: #1a1a1a;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease, filter 0.6s ease;
    filter: brightness(0.85);
}

.gallery-item:hover img {
    transform: scale(1.07);
    filter: brightness(0.5);
}

/* ── OVERLAY ── */
.gallery-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.4s ease;
}

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

.gallery-overlay span {
    color: #c9a84c;
    font-size: 0.85rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    border: 1px solid #c9a84c;
    padding: 10px 24px;
    border-radius: 2px;
}

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
    .gallery-grid {
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: 180px;
    }

    .gallery-item.large {
        grid-column: span 2;
        grid-row: span 1;
    }

    .gallery-item.wide {
        grid-column: span 2;
    }
}

@media (max-width: 480px) {
    .gallery-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: 220px;
    }

    .gallery-item.large,
    .gallery-item.wide {
        grid-column: span 1;
    }
}