/* =========================================================
   TASTE HOME
   LUXURY CAFÉ & RESTAURANT
   WHITE • CREAM • GOLD
========================================================= */

/* =========================================================
   MOBILE MENU — HIDDEN ON DESKTOP
========================================================= */

.mobile-menu-overlay {
    display: none;
}


/* =========================================================
   MOBILE MENU
========================================================= */

@media (max-width: 900px) {

    .mobile-menu-overlay {
        display: block;
        position: fixed;
        inset: 0;

        width: 100%;
        height: 100dvh;

        background:
            radial-gradient(
                circle at 85% 10%,
                rgba(201, 169, 110, 0.10),
                transparent 35%
            ),
            radial-gradient(
                circle at 15% 85%,
                rgba(201, 169, 110, 0.06),
                transparent 35%
            ),
            #0d0906;

        z-index: 3000;

        opacity: 0;
        visibility: hidden;

        transform: translateY(-20px);

        transition:
            opacity 0.45s ease,
            visibility 0.45s ease,
            transform 0.45s ease;

        overflow-y: auto;
    }

    .mobile-menu-overlay.mobile-menu-active {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

}
/* Hidden on desktop */
.mobile-menu-button {
    display: none;
}
@media (max-width: 900px) {

    .mobile-menu-button {
        display: flex;
    }

}

/* =========================================================
   VARIABLES
========================================================= */

:root {

    --white: #fffdf9;

    --cream: #f7f1e7;

    --cream-dark: #e8dcc9;

    --brown: #302218;

    --brown-light: #655346;

    --gold: #b28a45;

    --gold-light: #d8bb7c;

    --gold-pale: #ead7ad;

    --text: #342a22;

    --muted: #81756a;

    --serif: "Cormorant Garamond", serif;

    --sans: "DM Sans", sans-serif;
}


/* =========================================================
   RESET
========================================================= */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;
}


html {

    scroll-behavior: smooth;
}


body {

    background: var(--white);

    color: var(--text);

    font-family: var(--sans);

    overflow-x: hidden;
}


a {

    color: inherit;

    text-decoration: none;
}


/* =========================================================
   NAVIGATION
========================================================= */

.navbar {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    z-index: 100;

    padding: 22px 6%;
}


.nav-container {

    max-width: 1500px;

    margin: auto;

    display: flex;

    align-items: center;

    justify-content: space-between;
}


/* =========================================================
   LOGO
========================================================= */

.logo {

    display: flex;

    align-items: center;

    gap: 12px;

    color: var(--brown);
}


.logo-symbol {

    width: 42px;

    height: 42px;

    border: 1px solid var(--gold);

    border-radius: 50%;

    display: grid;

    place-items: center;

    color: var(--gold);

    font-size: 18px;

    transition: 0.5s;

    box-shadow:

        0 5px 20px rgba(178,138,69,0.12);
}


.logo:hover .logo-symbol {

    transform: rotate(90deg);

    box-shadow:

        0 0 30px rgba(178,138,69,0.35);
}


.logo-text {

    font-family: var(--serif);

    font-size: 25px;

    letter-spacing: 4px;

    line-height: 0.8;
}


.logo-text small {

    display: block;

    margin-top: 8px;

    font-family: var(--sans);

    font-size: 7px;

    letter-spacing: 2px;

    color: var(--gold);

    font-weight: 500;
}

/* =========================================================
   TASTE HOME — LUXURY NAVIGATION
========================================================= */

.nav-links {
    display: flex;
    align-items: center;
    gap: 34px;
    margin: 0;
    padding: 0;
}

.nav-links a {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 10px 2px;

    color: var(--brown-light);
    background: transparent;

    font-family: var(--sans);
    font-size: 11px;
    font-weight: 600;

    letter-spacing: 1.8px;
    text-transform: uppercase;
    text-decoration: none;

    border: none;
    outline: none;

    transition:
        color 0.35s ease,
        text-shadow 0.35s ease;
}

/* GOLD UNDERLINE */

.nav-links a::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 2px;

    width: 0;
    height: 1px;

    background: var(--gold);

    box-shadow:
        0 0 8px rgba(201, 169, 110, 0.7);

    transition: width 0.35s ease;
}

/* HOVER */

.nav-links a:hover {
    color: var(--gold);

    text-shadow:
        0 0 12px rgba(201, 169, 110, 0.35);
}

.nav-links a:hover::after {
    width: 100%;
}

/* ACTIVE / FOCUS */

.nav-links a:focus,
.nav-links a:active {
    color: var(--gold);
    outline: none;
}


/* =========================================================
   RESERVATION BUTTON
========================================================= */

.nav-button {

    position: relative;

    overflow: hidden;

    padding: 13px 22px;

    border: 1px solid var(--gold);

    color: var(--brown);

    font-size: 10px;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    transition: 0.4s;
}


.nav-button::before {

    content: "";

    position: absolute;

    top: 0;

    left: -120%;

    width: 100%;

    height: 100%;

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(255,255,255,0.8),

            transparent

        );

    transition: 0.6s;
}


.nav-button:hover::before {

    left: 120%;
}


.nav-button:hover {

    background: var(--gold);

    color: white;

    box-shadow:

        0 10px 30px rgba(178,138,69,0.25);
}


/* =========================================================
   HERO
========================================================= */

.hero {

    position: relative;

    min-height: 100vh;

    height: 100vh;

    overflow: hidden;

    background:

        radial-gradient(

            circle at 75% 35%,

            #fff8e9 0%,

            #f5ead8 25%,

            transparent 50%

        ),

        linear-gradient(

            120deg,

            #fffdf9,

            #f5eee3

        );
}


/* =========================================================
   HERO SCENE
========================================================= */

.hero-scene {

    position: absolute;

    inset: 0;

    overflow: hidden;
}


/* =========================================================
   GOLDEN LIGHT
========================================================= */

.hero-glow {

    position: absolute;

    width: 750px;

    height: 750px;

    right: 5%;

    top: -5%;

    border-radius: 50%;

    background:

        radial-gradient(

            circle,

            rgba(221,190,125,0.38),

            rgba(221,190,125,0.13) 35%,

            transparent 70%

        );

    filter: blur(5px);
}


/* =========================================================
   LUXURY WINDOW
========================================================= */

.window {

    position: absolute;

    right: 7%;

    top: 11%;

    width: 48%;

    height: 66%;

    border: 12px solid rgba(124,94,57,0.14);

    background:

        linear-gradient(

            135deg,

            rgba(255,255,255,0.85),

            rgba(232,213,180,0.35)

        );

    box-shadow:

        inset 0 0 80px rgba(177,137,67,0.15),

        0 30px 80px rgba(81,58,35,0.12);
}


.window::before {

    content: "";

    position: absolute;

    inset: 0;

    background:

        radial-gradient(

            circle at 70% 25%,

            rgba(255,221,158,0.65),

            transparent 45%

        );
}


.window-frame {

    position: absolute;

    background: rgba(121,91,55,0.18);

    box-shadow:

        0 0 12px rgba(178,138,69,0.1);
}


.window-frame.vertical {

    width: 6px;

    height: 100%;

    left: 50%;

    transform: translateX(-50%);
}


.window-frame.horizontal {

    width: 100%;

    height: 6px;

    top: 50%;

    transform: translateY(-50%);
}


.window-light {

    position: absolute;

    right: 0;

    top: 0;

    width: 50%;

    height: 100%;

    background:

        linear-gradient(

            120deg,

            transparent,

            rgba(255,226,173,0.4)

        );
}


/* =========================================================
   TABLE
========================================================= */

.table {

    position: absolute;

    left: 0;

    right: 0;

    bottom: -3%;

    height: 38%;
}


.table-top {

    position: absolute;

    width: 78%;

    height: 58px;

    left: 11%;

    top: 8%;

    border-radius: 50%;

    background:

        linear-gradient(

            90deg,

            #3b291c,

            #705039,

            #3b291c

        );

    box-shadow:

        0 -8px 25px rgba(70,48,30,0.18),

        inset 0 2px 8px rgba(255,230,190,0.18);
}


.table-top::after {

    content: "";

    position: absolute;

    left: 3%;

    right: 3%;

    top: 6px;

    height: 2px;

    border-radius: 50%;

    background: rgba(237,211,165,0.35);
}


/* =========================================================
   PLATE
========================================================= */

.plate {

    position: absolute;

    width: 250px;

    height: 250px;

    left: 35%;

    top: -8%;

    border-radius: 50%;

    background:

        radial-gradient(

            circle,

            #fffdf7 0 39%,

            #d2b982 40% 42%,

            #fffdf7 43% 69%,

            #c0a36c 70% 72%,

            #eee3cf 73%
        );

    box-shadow:

        0 15px 30px rgba(53,37,24,0.22);
}


.plate-shadow {

    position: absolute;

    width: 115px;

    height: 115px;

    left: 50%;

    top: 50%;

    transform: translate(-50%,-50%);

    border-radius: 50%;

    background:

        radial-gradient(

            circle,

            #8b5731,

            #4b2917
        );
}


.food {

    position: absolute;

    width: 95px;

    height: 38px;

    left: 50%;

    top: 50%;

    transform:

        translate(-50%,-50%)

        rotate(-8deg);

    border-radius: 50%;

    background:

        linear-gradient(

            90deg,

            #71391d,

            #c37d3d,

            #71391d

        );

    box-shadow:

        0 8px 12px rgba(0,0,0,0.18);
}


.food-highlight {

    position: absolute;

    width: 65px;

    height: 4px;

    left: 50%;

    top: 49%;

    transform: translate(-50%,-50%);

    border-radius: 50%;

    background:

        rgba(255,228,177,0.55);
}


/* =========================================================
   COFFEE CUP
========================================================= */

.coffee-cup {

    position: absolute;

    left: 53%;

    top: -6%;

    width: 100px;

    height: 80px;
}


.cup-body {

    position: absolute;

    width: 70px;

    height: 55px;

    left: 10px;

    bottom: 0;

    border-radius:

        8px 8px 25px 25px;

    background:

        linear-gradient(

            135deg,

            #fffaf0,

            #d8c7aa

        );

    box-shadow:

        0 10px 18px rgba(50,35,22,0.2);
}


.coffee {

    position: absolute;

    width: 62px;

    height: 14px;

    left: 14px;

    top: 4px;

    border-radius: 50%;

    background:

        radial-gradient(

            circle,

            #1c0d06,

            #573017
        );
}


.cup-handle {

    position: absolute;

    width: 30px;

    height: 32px;

    right: 2px;

    top: 13px;

    border:

        7px solid #d4c0a0;

    border-left: 0;

    border-radius:

        0 20px 20px 0;
}


/* =========================================================
   GLASS
========================================================= */

.wine-glass {

    position: absolute;

    right: 28%;

    top: -4%;

    width: 80px;

    height: 130px;
}


.glass-bowl {

    position: absolute;

    width: 60px;

    height: 70px;

    left: 10px;

    top: 0;

    border-radius:

        10px 10px 35px 35px;

    border:

        2px solid rgba(117,88,51,0.3);

    background:

        linear-gradient(

            135deg,

            rgba(255,255,255,0.75),

            rgba(231,205,162,0.22)

        );
}


.glass-bowl::after {

    content: "";

    position: absolute;

    width: 44px;

    height: 22px;

    left: 6px;

    bottom: 0;

    border-radius: 50%;

    background:

        linear-gradient(

            #762817,

            #431009
        );
}


.glass-stem {

    position: absolute;

    width: 2px;

    height: 48px;

    background: rgba(105,76,44,0.35);

    left: 39px;

    top: 65px;
}


.glass-base {

    position: absolute;

    width: 45px;

    height: 3px;

    left: 18px;

    bottom: 10px;

    border-radius: 50%;

    background:

        rgba(105,76,44,0.35);
}


/* =========================================================
   CANDLE
========================================================= */

.candle {

    position: absolute;

    left: 24%;

    top: -5%;

    width: 35px;

    height: 100px;
}


.candle-body {

    position: absolute;

    bottom: 0;

    width: 30px;

    height: 65px;

    border-radius: 4px;

    background:

        linear-gradient(

            90deg,

            #b39b77,

            #fff1d2,

            #ad9269
        );
}


.flame {

    position: absolute;

    width: 18px;

    height: 28px;

    top: -12px;

    left: 6px;

    border-radius: 50%;

    background:

        radial-gradient(

            circle at 50% 70%,

            #fffbe4 0 25%,

            #e7ad4c 40%,

            transparent 72%
        );

    filter: blur(1px);

    animation:

        flicker 1.3s infinite alternate;
}


@keyframes flicker {

    from {

        transform:

            scale(0.9)

            rotate(-3deg);
    }

    to {

        transform:

            scale(1.1)

            rotate(4deg);
    }
}


/* =========================================================
   CHAIRS
========================================================= */

.chair {

    position: absolute;

    bottom: -5%;

    width: 170px;

    height: 350px;

    border-radius:

        80px 80px 15px 15px;

    background:

        linear-gradient(

            90deg,

            #4b3321,

            #78563a,

            #3c291b
        );

    box-shadow:

        0 20px 50px rgba(57,39,24,0.22);
}


.chair-left {

    left: -2%;

    transform: rotate(8deg);
}


.chair-right {

    right: -2%;

    transform: rotate(-8deg);
}


/* =========================================================
   SCENE SHADOW
========================================================= */

.scene-shadow {

    position: absolute;

    left: -10%;

    right: -10%;

    bottom: -15%;

    height: 35%;

    background:

        radial-gradient(

            ellipse,

            rgba(57,39,24,0.2),

            transparent 70%
        );
}


/* =========================================================
   HERO OVERLAY
========================================================= */

.hero-overlay {

    position: absolute;

    inset: 0;

    z-index: 2;

    background:

        linear-gradient(

            90deg,

            rgba(255,253,249,0.96) 0%,

            rgba(255,253,249,0.82) 35%,

            rgba(255,253,249,0.22) 70%,

            rgba(255,253,249,0.05) 100%
        );
}


/* =========================================================
   HERO CONTENT
========================================================= */

.hero-content {

    position: absolute;

    z-index: 5;

    left: 9%;

    top: 50%;

    transform: translateY(-50%);

    max-width: 650px;

    animation:

        heroReveal 1.2s ease forwards;
}


@keyframes heroReveal {

    from {

        opacity: 0;

        transform:

            translateY(-45%);
    }

    to {

        opacity: 1;

        transform:

            translateY(-50%);
    }
}


/* =========================================================
   EYEBROW
========================================================= */

.eyebrow {

    display: flex;

    align-items: center;

    gap: 12px;

    color: var(--gold);

    font-size: 10px;

    letter-spacing: 3px;

    margin-bottom: 25px;
}


.eyebrow span {

    width: 35px;

    height: 1px;

    background: var(--gold);
}


/* =========================================================
   HERO TITLE
========================================================= */

.hero h1 {

    font-family: var(--serif);

    font-weight: 500;

    font-size:

        clamp(

            65px,

            7vw,

            110px

        );

    line-height: 0.82;

    letter-spacing: -3px;

    color: var(--brown);

    margin-bottom: 35px;
}


.hero h1 em {

    color: var(--gold);

    font-weight: 400;
}


/* =========================================================
   HERO DESCRIPTION
========================================================= */

.hero-content p {

    max-width: 470px;

    color: var(--muted);

    font-size: 15px;

    line-height: 1.8;

    margin-bottom: 35px;
}


/* =========================================================
   HERO BUTTONS
========================================================= */

.hero-actions {

    display: flex;

    align-items: center;

    gap: 30px;
}


/* GOLD BUTTON */

.gold-button {

    display: flex;

    align-items: center;

    gap: 18px;

    padding: 17px 25px;

    color: white;

    font-size: 11px;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    background:

        linear-gradient(

            120deg,

            #96702f,

            #d8bb7c,

            #96702f
        );

    background-size: 200% 100%;

    transition: 0.5s;

    box-shadow:

        0 10px 30px rgba(178,138,69,0.2);
}


.gold-button span {

    font-size: 18px;

    transition: 0.3s;
}


.gold-button:hover {

    background-position: 100% 0;

    box-shadow:

        0 15px 40px rgba(178,138,69,0.38);

    transform: translateY(-3px);
}


.gold-button:hover span {

    transform:

        translate(3px,-3px);
}


/* TEXT BUTTON */

.text-button {

    color: var(--brown-light);

    font-size: 11px;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    padding-bottom: 8px;

    border-bottom:

        1px solid rgba(178,138,69,0.45);

    transition: 0.4s;
}


.text-button span {

    margin-left: 10px;

    color: var(--gold);
}


.text-button:hover {

    color: var(--gold);

    border-color: var(--gold);

    text-shadow:

        0 0 15px rgba(178,138,69,0.35);
}


/* =========================================================
   SCROLL INDICATOR
========================================================= */

.scroll-indicator {

    position: absolute;

    z-index: 6;

    bottom: 35px;

    left: 9%;

    display: flex;

    align-items: center;

    gap: 15px;

    color: var(--muted);

    font-size: 8px;

    letter-spacing: 2px;
}


.scroll-line {

    width: 50px;

    height: 1px;

    background: var(--gold);

    position: relative;

    overflow: hidden;
}


.scroll-line::after {

    content: "";

    position: absolute;

    left: -100%;

    width: 100%;

    height: 100%;

    background: white;

    animation:

        scrollLine 2s infinite;
}


@keyframes scrollLine {

    0% {

        left: -100%;
    }

    50% {

        left: 0;
    }

    100% {

        left: 100%;
    }
}


/* =========================================================
   SIDE LABEL
========================================================= */

.hero-side-label {

    position: absolute;

    z-index: 6;

    right: 25px;

    top: 50%;

    transform:

        translateY(-50%)

        rotate(90deg);

    color:

        rgba(48,34,24,0.3);

    font-size: 9px;

    letter-spacing: 5px;
}


/* =========================================================
   GENERAL SECTIONS
========================================================= */

.placeholder-section {

    min-height: 80vh;

    padding: 140px 10%;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    background: var(--white);
}


.cream-section {

    background: var(--cream);
}


.placeholder-section > span {

    color: var(--gold-dark);

    font-size: 10px;

    letter-spacing: 4px;

    margin-bottom: 25px;
}


.placeholder-section h2 {

    max-width: 800px;

    font-family: var(--serif);

    font-weight: 500;

    font-size:

        clamp(

            50px,

            7vw,

            100px

        );

    line-height: 0.9;
}


.placeholder-section h2 em {

    color: var(--gold);

    font-weight: 400;
}


/* =========================================================
   CONTACT
========================================================= */

.contact-links {

    display: flex;

    flex-direction: column;

    gap: 15px;

    margin-top: 50px;
}


.contact-links a {

    color: var(--gold);

    font-family: var(--serif);

    font-size: 25px;

    transition: 0.4s;
}


.contact-links a:hover {

    color: var(--gold-dark);

    text-shadow:

        0 0 20px rgba(178,138,69,0.3);

    transform: translateY(-2px);
}


/* =========================================================
   FOOTER
========================================================= */

footer {

    padding: 50px 8%;

    background: var(--brown);

    color: white;

    text-align: center;
}


.footer-logo {

    font-family: var(--serif);

    font-size: 30px;

    letter-spacing: 5px;

    color: var(--gold-light);
}


.footer-logo span {

    margin-right: 8px;
}


footer p {

    margin-top: 15px;

    font-size: 10px;

    letter-spacing: 1px;

    color:

        rgba(255,255,255,0.5);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .nav-links,

    .nav-button {

        display: none;
    }


.navbar
     {

        padding: 22px 6%;
     

        padding: 22px 6%;
    }


    .hero-content {

        left: 7%;

        right: 7%;
    }


    .hero h1 {

        font-size:

            clamp(

                58px,

                14vw,

                90px
            );
    }


    .window {

        right: -25%;

        width: 90%;

        opacity: 0.7;
    }


    .hero-overlay {

        background:

            linear-gradient(

                90deg,

                rgba(255,253,249,0.96),

                rgba(255,253,249,0.68)
            );
    }


    .plate {

        left: 25%;
    }


    .coffee-cup {

        left: 45%;
    }


    .wine-glass {

        right: 15%;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .hero {

        min-height: 650px;
    }


    .logo-text {

        font-size: 21px;
    }


    .hero-content {

        top: 48%;
    }


    .hero h1 {

        font-size: 62px;

        letter-spacing: -2px;
    }


    .hero-content p {

        font-size: 13px;
    }


    .hero-actions {

        flex-direction: column;

        align-items: flex-start;

        gap: 20px;
    }


    .scroll-indicator {

        display: none;
    }


    .hero-side-label {

        display: none;
    }


    .plate {

        width: 180px;

        height: 180px;

        left: 20%;
    }


    .window {

        opacity: 0.45;
    }
}
/* =========================================================
   TASTE HOME — LUXURY MENU
========================================================= */

.menu-section {

    position: relative;

    padding: 140px 7%;

    background:

        radial-gradient(
            circle at 10% 20%,
            rgba(220,190,130,0.12),
            transparent 35%
        ),

        var(--white);

    overflow: hidden;
}


/* =========================================================
   MENU HEADING
========================================================= */

.menu-heading {

    max-width: 750px;

    margin: 0 auto 55px;

    text-align: center;
}


.section-label {

    display: block;

    margin-bottom: 22px;

    color: var(--gold);

    font-size: 10px;

    letter-spacing: 4px;
}


.menu-heading h2 {

    font-family: var(--serif);

    font-size:

        clamp(
            50px,
            6vw,
            85px
        );

    line-height: .9;

    font-weight: 500;

    color: var(--brown);
}


.menu-heading h2 em {

    color: var(--gold);

    font-weight: 400;
}


.menu-heading p {

    max-width: 600px;

    margin: 28px auto 0;

    color: var(--muted);

    font-size: 14px;

    line-height: 1.8;
}


/* =========================================================
   FILTERS
========================================================= */

.menu-filters {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 10px;

    margin-bottom: 55px;
}


.menu-filter {

    padding: 12px 22px;

    border: 1px solid var(--cream-dark);

    background: transparent;

    color: var(--brown-light);

    font-family: var(--sans);

    font-size: 10px;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    cursor: pointer;

    transition: .4s;
}


.menu-filter:hover,

.menu-filter.active {

    border-color: var(--gold);

    background: var(--gold);

    color: white;

    box-shadow:

        0 8px 25px rgba(178,138,69,.18);
}


/* =========================================================
   MENU GRID
========================================================= */

.menu-grid {

    max-width: 1250px;

    margin: auto;

    display: grid;

    grid-template-columns:

        repeat(4, 1fr);

    gap: 25px;
}


/* =========================================================
   MENU CARD
========================================================= */

.menu-card {

    background: rgba(255,255,255,.75);

    border: 1px solid rgba(178,138,69,.16);

    box-shadow:

        0 12px 40px rgba(68,48,29,.07);

    transition:

        transform .5s,

        box-shadow .5s,

        border-color .5s;

    overflow: hidden;
}


.menu-card:hover {

    transform: translateY(-10px);

    border-color:

        rgba(178,138,69,.45);

    box-shadow:

        0 25px 60px rgba(68,48,29,.13);
}


/* =========================================================
   MENU IMAGE AREA
========================================================= */

.menu-image {

    position: relative;

    height: 250px;

    overflow: hidden;

    background:

        linear-gradient(
            135deg,
            #eee2cf,
            #faf5eb
        );
}


.menu-image::after {

    content: "";

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            120deg,
            transparent 30%,
            rgba(255,255,255,.35),
            transparent 65%
        );

    transform: translateX(-100%);

    transition: .8s;
}


.menu-card:hover
.menu-image::after {

    transform: translateX(100%);
}


/* =========================================================
   COFFEE VISUAL
========================================================= */

.coffee-visual {

    background:

        radial-gradient(
            circle at 50% 50%,
            #d9c4a1,
            #eee3d1 55%,
            #f8f3eb
        );
}


.coffee-cup-visual {

    position: absolute;

    width: 125px;

    height: 100px;

    left: 50%;

    top: 52%;

    transform: translate(-50%,-50%);

    border-radius:

        12px 12px 45px 45px;

    background:

        linear-gradient(
            135deg,
            #fffdf8,
            #d5c2a4
        );

    box-shadow:

        0 25px 30px rgba(65,44,25,.2);
}


.coffee-liquid {

    position: absolute;

    width: 105px;

    height: 24px;

    left: 10px;

    top: 6px;

    border-radius: 50%;

    background:

        radial-gradient(
            circle,
            #241008,
            #65351b
        );
}


.coffee-handle {

    position: absolute;

    right: -35px;

    top: 25px;

    width: 45px;

    height: 45px;

    border:

        10px solid #d4c1a1;

    border-left: 0;

    border-radius:

        0 30px 30px 0;
}


.coffee-steam {

    position: absolute;

    width: 8px;

    height: 60px;

    border-radius: 50%;

    border-left:

        2px solid rgba(255,255,255,.65);

    filter: blur(1px);

    animation:

        steam 3s infinite ease-in-out;
}


.steam-one {

    left: 47%;

    top: 18%;
}


.steam-two {

    left: 53%;

    top: 12%;

    animation-delay: 1s;
}


@keyframes steam {

    0% {

        opacity: 0;

        transform:
            translateY(15px);
    }

    50% {

        opacity: 1;
    }

    100% {

        opacity: 0;

        transform:
            translateY(-25px);
    }
}


/* =========================================================
   ESPRESSO
========================================================= */

.espresso-visual {

    background:

        radial-gradient(
            circle,
            #e7d7bc,
            #f7f1e8
        );
}


.espresso-cup {

    position: absolute;

    width: 105px;

    height: 70px;

    left: 50%;

    top: 50%;

    transform: translate(-50%,-50%);

    border-radius:

        8px 8px 35px 35px;

    background:

        linear-gradient(
            135deg,
            #fffdf7,
            #cdb995
        );

    box-shadow:

        0 20px 25px rgba(58,39,23,.2);
}


.espresso-liquid {

    position: absolute;

    width: 88px;

    height: 18px;

    top: 4px;

    left: 8px;

    border-radius: 50%;

    background:

        radial-gradient(
            circle,
            #1a0904,
            #6b3518
        );
}


.espresso-shadow {

    position: absolute;

    width: 180px;

    height: 30px;

    left: 50%;

    bottom: 25px;

    transform: translateX(-50%);

    border-radius: 50%;

    background:

        rgba(61,39,21,.12);
}


.coffee-beans {

    position: absolute;

    right: 22%;

    bottom: 28px;

    display: flex;

    gap: 5px;
}


.coffee-beans span {

    width: 20px;

    height: 12px;

    border-radius: 50%;

    background: #553018;

    transform: rotate(35deg);
}


/* =========================================================
   BREAKFAST
========================================================= */

.breakfast-visual {

    background:

        linear-gradient(
            135deg,
            #f4ead8,
            #fffaf1
        );
}


.breakfast-plate {

    position: absolute;

    width: 210px;

    height: 210px;

    left: 50%;

    top: 50%;

    transform: translate(-50%,-50%);

    border-radius: 50%;

    background:

        radial-gradient(
            circle,
            white 0 68%,
            #c6a76b 69% 71%,
            white 72%
        );

    box-shadow:

        0 20px 30px rgba(63,43,24,.15);
}


.toast {

    position: absolute;

    width: 75px;

    height: 60px;

    left: 25px;

    top: 50px;

    border-radius: 12px;

    background:

        linear-gradient(
            135deg,
            #9a5c2b,
            #d59755
        );

    transform: rotate(-12deg);
}


.egg {

    position: absolute;

    width: 75px;

    height: 55px;

    right: 30px;

    top: 42px;

    border-radius: 50%;

    background: #fffdf4;

    box-shadow:

        0 4px 8px rgba(0,0,0,.08);
}


.egg-yolk {

    position: absolute;

    width: 27px;

    height: 27px;

    left: 24px;

    top: 14px;

    border-radius: 50%;

    background:

        radial-gradient(
            circle at 35% 30%,
            #ffe9a1,
            #d99622
        );
}


.greens {

    position: absolute;

    width: 70px;

    height: 35px;

    left: 75px;

    bottom: 38px;

    border-radius: 50%;

    background:

        radial-gradient(
            circle,
            #74844d,
            #435c38
        );
}


.tomato {

    position: absolute;

    width: 25px;

    height: 25px;

    border-radius: 50%;

    background:

        radial-gradient(
            circle at 35% 30%,
            #f28c62,
            #ad3522
        );
}


.tomato-one {

    left: 40px;

    bottom: 40px;
}


.tomato-two {

    left: 60px;

    bottom: 30px;
}


/* =========================================================
   PASTA
========================================================= */

.pasta-visual {

    background:

        radial-gradient(
            circle,
            #e7d3ad,
            #faf5eb
        );
}


.pasta-plate {

    position: absolute;

    width: 215px;

    height: 215px;

    left: 50%;

    top: 50%;

    transform: translate(-50%,-50%);

    border-radius: 50%;

    background:

        radial-gradient(
            circle,
            #fffdf8 0 65%,
            #c4a76e 66% 68%,
            #f7eee0 69%
        );

    box-shadow:

        0 20px 30px rgba(65,43,22,.18);
}


.pasta {

    position: absolute;

    width: 125px;

    height: 80px;

    left: 45px;

    top: 60px;
}


.pasta span {

    position: absolute;

    width: 100px;

    height: 18px;

    border-radius: 50%;

    border:

        7px solid #d7a45d;

    border-left-color: transparent;

    transform: rotate(
        calc(var(--i) * 10deg)
    );
}


.pasta span:nth-child(1) {

    top: 5px;

    left: 5px;
}


.pasta span:nth-child(2) {

    top: 18px;

    left: 15px;
}


.pasta span:nth-child(3) {

    top: 30px;

    left: 5px;
}


.pasta span:nth-child(4) {

    top: 42px;

    left: 15px;
}


.pasta span:nth-child(5) {

    top: 54px;

    left: 5px;
}


.pasta span:nth-child(6) {

    top: 66px;

    left: 15px;
}


.pasta-sauce {

    position: absolute;

    width: 90px;

    height: 50px;

    left: 60px;

    top: 75px;

    border-radius: 50%;

    background:

        rgba(153,75,35,.4);
}


.basil {

    position: absolute;

    width: 25px;

    height: 12px;

    border-radius: 50%;

    background: #4e713b;

}


.basil-one {

    left: 45px;

    top: 60px;

    transform: rotate(-30deg);
}


.basil-two {

    right: 45px;

    bottom: 55px;

    transform: rotate(25deg);
}


/* =========================================================
   STEAK
========================================================= */

.steak-visual {

    background:

        radial-gradient(
            circle,
            #e3d2b3,
            #faf5ec
        );
}


.steak-plate {

    position: absolute;

    width: 220px;

    height: 220px;

    left: 50%;

    top: 50%;

    transform: translate(-50%,-50%);

    border-radius: 50%;

    background:

        radial-gradient(
            circle,
            #fffdf8 0 65%,
            #b99a60 66% 68%,
            white 69%
        );

    box-shadow:

        0 20px 30px rgba(62,41,21,.17);
}


.steak {

    position: absolute;

    width: 105px;

    height: 70px;

    left: 45px;

    top: 60px;

    border-radius:

        50% 40% 45% 50%;

    background:

        linear-gradient(
            135deg,
            #713b25,
            #a85e35,
            #71321f
        );

    transform: rotate(-10deg);
}


.steak-line {

    position: absolute;

    width: 80px;

    height: 2px;

    background:

        rgba(53,25,15,.5);

    transform: rotate(20deg);
}


.line-one {

    left: 10px;

    top: 20px;
}


.line-two {

    left: 15px;

    top: 40px;
}


.potatoes {

    position: absolute;

    right: 35px;

    bottom: 45px;

    display: flex;

    gap: 4px;
}


.potatoes span {

    width: 24px;

    height: 17px;

    border-radius: 6px;

    background:

        linear-gradient(
            135deg,
            #d69b4d,
            #a96827
        );

    transform: rotate(20deg);
}


.herbs span {

    position: absolute;

    width: 28px;

    height: 8px;

    border-radius: 50%;

    background: #54713e;
}


.herbs span:first-child {

    right: 55px;

    top: 55px;

    transform: rotate(-35deg);
}


.herbs span:last-child {

    right: 35px;

    top: 75px;

    transform: rotate(30deg);
}


/* =========================================================
   CHOCOLATE DESSERT
========================================================= */

.dessert-visual {

    background:

        radial-gradient(
            circle,
            #e6d2b1,
            #faf4e8
        );
}


.dessert-plate {

    position: absolute;

    width: 215px;

    height: 215px;

    left: 50%;

    top: 50%;

    transform: translate(-50%,-50%);

    border-radius: 50%;

    background:

        radial-gradient(
            circle,
            #fffdf9 0 66%,
            #c4a66d 67% 69%,
            white 70%
        );

    box-shadow:

        0 20px 30px rgba(60,39,21,.16);
}


.cake-layer {

    position: absolute;

    width: 90px;

    left: 62px;

    border-radius: 6px;
}


.layer-bottom {

    height: 25px;

    top: 125px;

    background: #4c2518;
}


.layer-middle {

    height: 25px;

    top: 102px;

    background: #6d3825;
}


.layer-top {

    height: 25px;

    top: 79px;

    background: #512517;
}


.cream-dot {

    position: absolute;

    width: 35px;

    height: 20px;

    left: 90px;

    top: 67px;

    border-radius: 50%;

    background: #f8efe0;
}


.berry {

    position: absolute;

    width: 17px;

    height: 17px;

    border-radius: 50%;

    background:

        radial-gradient(
            circle at 35% 30%,
            #df806a,
            #79251d
        );
}


.berry-one {

    left: 65px;

    top: 60px;
}


.berry-two {

    right: 55px;

    top: 70px;
}


/* =========================================================
   CHEESECAKE
========================================================= */

.cheesecake-visual {

    background:

        radial-gradient(
            circle,
            #e6d4b8,
            #faf5eb
        );
}


.cheesecake {

    position: absolute;

    width: 210px;

    height: 210px;

    left: 50%;

    top: 50%;

    transform: translate(-50%,-50%);

    border-radius: 50%;

    background:

        radial-gradient(
            circle,
            #fffdf8 0 67%,
            #c2a36a 68% 70%,
            white 71%
        );
}


.cheese-base {

    position: absolute;

    width: 105px;

    height: 55px;

    left: 53px;

    top: 90px;

    border-radius: 8px;

    background:

        linear-gradient(
            #a85f31,
            #77401f
        );
}


.cheese-top {

    position: absolute;

    width: 105px;

    height: 75px;

    left: 53px;

    top: 55px;

    border-radius:

        10px 10px 5px 5px;

    background:

        linear-gradient(
            #fff3d7,
            #dfc59a
        );
}


.cheese-cream {

    position: absolute;

    width: 90px;

    height: 14px;

    left: 60px;

    top: 55px;

    border-radius: 50%;

    background: white;
}


.berry-three {

    left: 73px;

    top: 45px;
}


.berry-four {

    right: 62px;

    top: 65px;
}


/* =========================================================
   CROISSANT
========================================================= */

.croissant-visual {

    background:

        radial-gradient(
            circle,
            #ead6b5,
            #fbf6ed
        );
}


.croissant {

    position: absolute;

    width: 175px;

    height: 95px;

    left: 50%;

    top: 50%;

    transform: translate(-50%,-50%);

    border-radius:

        50% 50% 45% 45%;

    background:

        linear-gradient(
            135deg,
            #f3bb63,
            #b96a25,
            #8d481c
        );

    box-shadow:

        0 18px 25px rgba(79,48,24,.18);
}


.croissant span {

    position: absolute;

    top: 15px;

    width: 3px;

    height: 65px;

    background:

        rgba(92,46,18,.4);

    border-radius: 50%;
}


.croissant span:nth-child(1) {

    left: 30px;

    transform: rotate(-12deg);
}


.croissant span:nth-child(2) {

    left: 65px;

    transform: rotate(-6deg);
}


.croissant span:nth-child(3) {

    left: 100px;

    transform: rotate(6deg);
}


.croissant span:nth-child(4) {

    left: 135px;

    transform: rotate(12deg);
}


.croissant-shadow {

    position: absolute;

    width: 200px;

    height: 25px;

    left: 50%;

    bottom: 30px;

    transform: translateX(-50%);

    border-radius: 50%;

    background:

        rgba(69,44,24,.1);
}


/* =========================================================
   CARD CONTENT
========================================================= */

.menu-card-content {

    padding: 24px;
}


.menu-title-row {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 15px;
}


.menu-title-row h3 {

    font-family: var(--serif);

    font-size: 25px;

    font-weight: 600;

    color: var(--brown);
}


.menu-title-row > span {

    color: var(--gold);

    font-size: 13px;

    font-weight: 600;

    white-space: nowrap;
}


.menu-card-content p {

    margin-top: 10px;

    color: var(--muted);

    font-size: 12px;

    line-height: 1.7;
}


.menu-tag {

    display: inline-block;

    margin-top: 18px;

    padding:

        5px 9px;

    border:

        1px solid rgba(178,138,69,.35);

    color: var(--gold);

    font-size: 7px;

    letter-spacing: 1.5px;
}


/* =========================================================
   MENU FOOTER
========================================================= */

.menu-footer {

    max-width: 1250px;

    margin: 65px auto 0;

    padding-top: 30px;

    border-top:

        1px solid var(--cream-dark);

    display: flex;

    align-items: center;

    justify-content: space-between;
}


.menu-footer p {

    color: var(--muted);

    font-size: 10px;

    letter-spacing: 1px;
}


.menu-footer a {

    color: var(--gold);

    font-family: var(--serif);

    font-size: 18px;

    transition: .35s;
}


.menu-footer a:hover {

    transform: translateX(6px);

    color: var(--gold-dark);
}


/* =========================================================
   RESPONSIVE MENU
========================================================= */

@media (max-width: 1100px) {

    .menu-grid {

        grid-template-columns:
            repeat(2, 1fr);
    }
}


@media (max-width: 600px) {

    .menu-section {

        padding:

            100px 6%;
    }


    .menu-grid {

        grid-template-columns: 1fr;
    }


    .menu-image {

        height: 280px;
    }


    .menu-footer {

        flex-direction: column;

        gap: 20px;

        text-align: center;
    }


    .menu-heading h2 {

        font-size: 55px;
    }
}
/* =========================================================
   TASTE HOME — CONTACT & RESERVATION
========================================================= */

.contact-section {

    position: relative;

    padding: 150px 7%;

    background:

        radial-gradient(
            circle at 80% 20%,
            rgba(218,188,125,.14),
            transparent 35%
        ),

        var(--cream);

    overflow: hidden;
}


/* =========================================================
   DECORATIVE BACKGROUND
========================================================= */

.contact-section::before {

    content: "";

    position: absolute;

    width: 500px;

    height: 500px;

    right: -180px;

    bottom: -220px;

    border-radius: 50%;

    border:

        1px solid rgba(178,138,69,.18);
}


.contact-section::after {

    content: "";

    position: absolute;

    width: 350px;

    height: 350px;

    right: -100px;

    bottom: -145px;

    border-radius: 50%;

    border:

        1px solid rgba(178,138,69,.12);
}


/* =========================================================
   CONTAINER
========================================================= */

.contact-container {

    position: relative;

    z-index: 2;

    max-width: 1250px;

    margin: auto;

    display: grid;

    grid-template-columns:

        1fr 1fr;

    gap: 100px;

    align-items: center;
}


/* =========================================================
   INTRO
========================================================= */

.contact-intro {

    padding-right: 30px;
}


.contact-intro .section-label {

    display: block;

    margin-bottom: 25px;

    color: var(--gold);

    font-size: 10px;

    letter-spacing: 4px;
}


.contact-intro h2 {

    font-family: var(--serif);

    font-size:

        clamp(
            65px,
            7vw,
            105px
        );

    font-weight: 500;

    line-height: .82;

    letter-spacing: -3px;

    color: var(--brown);
}


.contact-intro h2 em {

    color: var(--gold);

    font-weight: 400;
}


.contact-intro > p {

    max-width: 470px;

    margin-top: 35px;

    color: var(--muted);

    font-size: 14px;

    line-height: 1.9;
}


/* =========================================================
   DIVIDER
========================================================= */

.contact-divider {

    width: 70px;

    height: 1px;

    margin:

        40px 0 35px;

    background:

        linear-gradient(
            90deg,
            var(--gold),
            transparent
        );
}


/* =========================================================
   CONTACT DETAILS
========================================================= */

.contact-details {

    display: flex;

    flex-direction: column;

    gap: 22px;
}


.contact-detail {

    display: flex;

    align-items: center;

    gap: 17px;

    width: fit-content;

    color: var(--brown);

    font-family: var(--serif);

    font-size: 20px;

    transition: .4s;
}


.contact-detail:hover {

    color: var(--gold);

    transform: translateX(7px);
}


.contact-detail small {

    display: block;

    margin-bottom: 3px;

    color: var(--muted);

    font-family: var(--sans);

    font-size: 7px;

    letter-spacing: 2px;
}


.contact-icon {

    width: 43px;

    height: 43px;

    display: grid;

    place-items: center;

    border:

        1px solid rgba(178,138,69,.45);

    border-radius: 50%;

    color: var(--gold);

    font-size: 15px;

    transition: .4s;
}


.contact-detail:hover .contact-icon {

    background: var(--gold);

    color: white;

    box-shadow:

        0 8px 25px rgba(178,138,69,.25);
}


/* =========================================================
   RESERVATION CARD
========================================================= */

.reservation-card {

    position: relative;

    padding: 55px 50px;

    background:

        rgba(255,253,249,.85);

    border:

        1px solid rgba(178,138,69,.25);

    box-shadow:

        0 30px 80px rgba(65,45,25,.1);

    backdrop-filter: blur(12px);

    overflow: hidden;
}


.reservation-card::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 3px;

    background:

        linear-gradient(
            90deg,
            transparent,
            var(--gold),
            transparent
        );
}


/* =========================================================
   DECORATION
========================================================= */

.reservation-decoration {

    position: absolute;

    right: 35px;

    top: 25px;

    width: 60px;

    height: 60px;

    display: grid;

    place-items: center;

    border:

        1px solid rgba(178,138,69,.25);

    border-radius: 50%;

    color: var(--gold);

    font-size: 20px;

    opacity: .6;
}


/* =========================================================
   RESERVATION HEADING
========================================================= */

.reservation-label {

    display: block;

    margin-bottom: 18px;

    color: var(--gold);

    font-size: 9px;

    letter-spacing: 3px;
}


.reservation-card h3 {

    max-width: 430px;

    font-family: var(--serif);

    font-size: 52px;

    line-height: .9;

    font-weight: 500;

    color: var(--brown);
}


.reservation-card h3 em {

    color: var(--gold);

    font-weight: 400;
}


.reservation-card > p {

    margin:

        20px 0 35px;

    color: var(--muted);

    font-size: 12px;

    line-height: 1.7;
}


/* =========================================================
   FORM
========================================================= */

.reservation-form {

    display: flex;

    flex-direction: column;

    gap: 19px;
}


.form-group {

    display: flex;

    flex-direction: column;

    gap: 8px;
}


.form-group label {

    color: var(--muted);

    font-size: 7px;

    letter-spacing: 2px;
}


.form-group input,

.form-group select,

.form-group textarea {

    width: 100%;

    padding: 14px 15px;

    border:

        1px solid rgba(120,94,59,.2);

    outline: none;

    background:

        rgba(255,255,255,.7);

    color: var(--brown);

    font-family: var(--sans);

    font-size: 12px;

    transition: .35s;

    border-radius: 0;
}


.form-group textarea {

    resize: vertical;

    min-height: 80px;
}


.form-group input::placeholder,

.form-group textarea::placeholder {

    color:

        rgba(100,85,70,.45);
}


.form-group input:focus,

.form-group select:focus,

.form-group textarea:focus {

    border-color: var(--gold);

    box-shadow:

        0 0 0 3px rgba(178,138,69,.08);
}


/* =========================================================
   FORM ROW
========================================================= */

.form-row {

    display: grid;

    grid-template-columns:

        1fr 1fr;

    gap: 15px;
}


/* =========================================================
   RESERVATION BUTTON
========================================================= */

.reservation-button {

    position: relative;

    overflow: hidden;

    width: 100%;

    margin-top: 5px;

    padding: 17px 22px;

    border: none;

    cursor: pointer;

    background:

        linear-gradient(
            120deg,
            #95702f,
            #d7b976,
            #95702f
        );

    background-size: 200% 100%;

    color: white;

    font-family: var(--sans);

    font-size: 10px;

    letter-spacing: 1.7px;

    text-transform: uppercase;

    transition: .5s;

    box-shadow:

        0 10px 25px rgba(178,138,69,.2);
}


.reservation-button span {

    margin-left: 12px;

    font-size: 17px;

    transition: .3s;
}


.reservation-button:hover {

    background-position: 100% 0;

    transform: translateY(-2px);

    box-shadow:

        0 15px 35px rgba(178,138,69,.35);
}


.reservation-button:hover span {

    display: inline-block;

    transform:

        translate(4px,-3px);
}


/* =========================================================
   NOTE
========================================================= */

.reservation-note {

    text-align: center;

    margin-top: 13px;

    color:

        rgba(100,85,70,.6);

    font-size: 8px !important;

    line-height: 1.5 !important;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 950px) {

    .contact-container {

        grid-template-columns: 1fr;

        gap: 70px;

        max-width: 650px;
    }


    .contact-intro {

        padding-right: 0;

        text-align: center;
    }


    .contact-intro > p {

        margin-left: auto;

        margin-right: auto;
    }


    .contact-divider {

        margin-left: auto;

        margin-right: auto;
    }


    .contact-details {

        align-items: center;
    }
}


@media (max-width: 600px) {

    .contact-section {

        padding:

            100px 6%;
    }


    .contact-intro h2 {

        font-size: 65px;
    }


    .reservation-card {

        padding: 40px 25px;
    }


    .reservation-card h3 {

        font-size: 43px;
    }


    .form-row {

        grid-template-columns: 1fr;
    }


    .contact-detail {

        font-size: 17px;
    }
}
/* =========================================================
   TASTE HOME — OUR STORY
========================================================= */

.story-section {

    position: relative;

    padding: 160px 7%;

    background: var(--white);

    overflow: hidden;
}


/* =========================================================
   BACKGROUND DECORATION
========================================================= */

.story-section::before {

    content: "TASTE";

    position: absolute;

    left: -60px;

    bottom: -70px;

    font-family: var(--serif);

    font-size: 230px;

    color:

        rgba(178,138,69,.035);

    pointer-events: none;
}


/* =========================================================
   CONTAINER
========================================================= */

.story-container {

    max-width: 1250px;

    margin: auto;

    display: grid;

    grid-template-columns:

        1fr 1fr;

    gap: 110px;

    align-items: center;
}


/* =========================================================
   STORY VISUAL
========================================================= */

.story-visual {

    position: relative;

    height: 650px;

    min-height: 600px;
}


.story-wall {

    position: absolute;

    inset: 25px 25px 25px 0;

    overflow: hidden;

    background:

        linear-gradient(
            135deg,
            #eee2cf,
            #f9f3e8
        );

    box-shadow:

        0 35px 80px rgba(66,46,27,.14);
}


.wall-light {

    position: absolute;

    width: 500px;

    height: 500px;

    top: -100px;

    right: -100px;

    border-radius: 50%;

    background:

        radial-gradient(
            circle,
            rgba(255,224,169,.55),
            transparent 65%
        );

    filter: blur(10px);
}


/* =========================================================
   ARCH
========================================================= */

.wall-arch {

    position: absolute;

    left: 8%;

    top: 7%;

    width: 42%;

    height: 63%;

    border:

        18px solid rgba(126,94,56,.13);

    border-bottom: none;

    border-radius:

        180px 180px 0 0;

    overflow: hidden;
}


.arch-inside {

    position: absolute;

    inset: 20px;

    border:

        1px solid rgba(178,138,69,.25);

    border-bottom: none;

    border-radius:

        150px 150px 0 0;

    background:

        linear-gradient(
            180deg,
            rgba(255,248,232,.7),
            rgba(211,185,139,.18)
        );
}


/* =========================================================
   WINDOW
========================================================= */

.story-window {

    position: absolute;

    top: 11%;

    right: 9%;

    width: 39%;

    height: 43%;

    border:

        9px solid rgba(100,76,48,.15);

    background:

        linear-gradient(
            135deg,
            rgba(255,255,255,.7),
            rgba(215,185,132,.25)
        );

    box-shadow:

        inset 0 0 40px rgba(178,138,69,.13);
}


.window-glow {

    position: absolute;

    inset: 0;

    background:

        radial-gradient(
            circle at 70% 30%,
            rgba(255,219,156,.55),
            transparent 65%
        );
}


.window-cross {

    position: absolute;

    background:

        rgba(112,83,49,.16);
}


.window-cross.vertical {

    width: 5px;

    height: 100%;

    left: 50%;

    transform: translateX(-50%);
}


.window-cross.horizontal {

    width: 100%;

    height: 5px;

    top: 50%;

    transform: translateY(-50%);
}


/* =========================================================
   PLANT
========================================================= */

.plant {

    position: absolute;

    left: 8%;

    bottom: 8%;

    width: 150px;

    height: 250px;
}


.plant-pot {

    position: absolute;

    bottom: 0;

    left: 35px;

    width: 80px;

    height: 85px;

    border-radius:

        8px 8px 35px 35px;

    background:

        linear-gradient(
            90deg,
            #927254,
            #d0af80,
            #806044
        );

    box-shadow:

        0 15px 25px rgba(65,44,25,.15);
}


.plant::before {

    content: "";

    position: absolute;

    left: 73px;

    bottom: 70px;

    width: 6px;

    height: 130px;

    background: #65724b;
}


.leaf {

    position: absolute;

    width: 55px;

    height: 25px;

    border-radius:

        100% 0 100% 0;

    background:

        linear-gradient(
            135deg,
            #748454,
            #425532
        );
}


.leaf-1 {

    left: 10px;

    bottom: 160px;

    transform: rotate(-35deg);
}


.leaf-2 {

    left: 70px;

    bottom: 180px;

    transform: rotate(30deg);
}


.leaf-3 {

    left: 20px;

    bottom: 115px;

    transform: rotate(-15deg);
}


.leaf-4 {

    left: 70px;

    bottom: 130px;

    transform: rotate(45deg);
}


.leaf-5 {

    left: 50px;

    bottom: 205px;

    transform: rotate(5deg);
}


/* =========================================================
   TABLE
========================================================= */

.story-table {

    position: absolute;

    left: 35%;

    bottom: 18%;

    width: 58%;

    height: 150px;
}


.story-table-top {

    position: absolute;

    top: 0;

    width: 100%;

    height: 30px;

    border-radius: 50%;

    background:

        linear-gradient(
            90deg,
            #422d1d,
            #7a5839,
            #422d1d
        );

    box-shadow:

        0 15px 20px rgba(56,38,23,.18);
}


.story-table-leg {

    position: absolute;

    top: 20px;

    width: 10px;

    height: 130px;

    background:

        #49311f;
}


.story-table-leg.left {

    left: 25%;
}


.story-table-leg.right {

    right: 25%;
}


/* =========================================================
   WINE GLASS
========================================================= */

.story-wine {

    position: absolute;

    left: 42%;

    top: -65px;

    width: 60px;

    height: 105px;
}


.wine-bowl {

    width: 50px;

    height: 58px;

    border:

        2px solid rgba(100,75,47,.3);

    border-radius:

        8px 8px 25px 25px;

    background:

        rgba(255,255,255,.25);
}


.wine-bowl::after {

    content: "";

    position: absolute;

    width: 40px;

    height: 17px;

    left: 5px;

    top: 39px;

    border-radius: 50%;

    background:

        #762d20;
}


.wine-stem {

    position: absolute;

    width: 2px;

    height: 42px;

    left: 25px;

    top: 55px;

    background:

        rgba(100,75,47,.3);
}


.wine-base {

    position: absolute;

    width: 40px;

    height: 3px;

    left: 5px;

    bottom: 0;

    border-radius: 50%;

    background:

        rgba(100,75,47,.3);
}


/* =========================================================
   CANDLE
========================================================= */

.story-candle {

    position: absolute;

    right: 20%;

    top: -50px;

    width: 22px;

    height: 70px;

    background:

        linear-gradient(
            90deg,
            #a99067,
            #f0dfbd,
            #a1875c
        );

    border-radius: 3px;
}


.story-flame {

    position: absolute;

    width: 14px;

    height: 22px;

    left: 4px;

    top: -18px;

    border-radius: 50%;

    background:

        radial-gradient(
            circle,
            #fffbdc 20%,
            #e2a63f 50%,
            transparent 75%
        );

    animation:

        storyFlame 1.4s infinite alternate;
}


@keyframes storyFlame {

    from {

        transform:
            scale(.9)
            rotate(-3deg);
    }

    to {

        transform:
            scale(1.08)
            rotate(4deg);
    }
}


/* =========================================================
   CHAIR
========================================================= */

.story-chair {

    position: absolute;

    right: 3%;

    bottom: 6%;

    width: 130px;

    height: 260px;

    border-radius:

        65px 65px 15px 15px;

    background:

        linear-gradient(
            90deg,
            #3e2b1d,
            #755337,
            #3e2b1d
        );

    transform: rotate(-5deg);

    box-shadow:

        0 20px 40px rgba(50,33,20,.2);
}


/* =========================================================
   GOLD FRAME
========================================================= */

.story-frame {

    position: absolute;

    inset: 0 0 0 25px;

    border:

        1px solid rgba(178,138,69,.4);

    pointer-events: none;
}


/* =========================================================
   NUMBER
========================================================= */

.story-number {

    position: absolute;

    right: -8px;

    top: 45px;

    font-family: var(--serif);

    font-size: 80px;

    color: var(--gold);

    opacity: .7;
}


/* =========================================================
   STORY CONTENT
========================================================= */

.story-content {

    padding-bottom: 10px;
}


.story-content .section-label {

    display: block;

    margin-bottom: 25px;

    color: var(--gold);

    font-size: 10px;

    letter-spacing: 4px;
}


.story-content h2 {

    font-family: var(--serif);

    font-size:

        clamp(
            65px,
            7vw,
            105px
        );

    line-height: .82;

    letter-spacing: -3px;

    font-weight: 500;

    color: var(--brown);
}


.story-content h2 em {

    color: var(--gold);

    font-weight: 400;
}


/* =========================================================
   STORY LINE
========================================================= */

.story-line {

    width: 70px;

    height: 1px;

    margin:

        38px 0 30px;

    background:

        linear-gradient(
            90deg,
            var(--gold),
            transparent
        );
}


/* =========================================================
   STORY TEXT
========================================================= */

.story-content p {

    max-width: 520px;

    margin-bottom: 20px;

    color: var(--muted);

    font-size: 13px;

    line-height: 1.9;
}


.story-content .story-lead {

    font-family: var(--serif);

    font-size: 22px;

    line-height: 1.35;

    color: var(--brown);
}


.story-lead strong {

    color: var(--gold);

    font-weight: 500;
}


/* =========================================================
   SIGNATURE
========================================================= */

.story-signature {

    display: flex;

    align-items: center;

    gap: 15px;

    margin-top: 35px;
}


.signature-line {

    width: 45px;

    height: 1px;

    background: var(--gold);
}


.story-signature strong {

    display: block;

    font-family: var(--serif);

    font-size: 20px;

    letter-spacing: 2px;

    color: var(--brown);
}


.story-signature span {

    display: block;

    margin-top: 3px;

    font-size: 7px;

    letter-spacing: 2px;

    color: var(--gold);
}


/* =========================================================
   STORY BUTTON
========================================================= */

.story-button {

    display: inline-flex;

    align-items: center;

    gap: 15px;

    margin-top: 40px;

    padding: 15px 23px;

    border:

        1px solid var(--gold);

    color: var(--brown);

    font-size: 10px;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    transition: .4s;
}


.story-button span {

    color: var(--gold);

    font-size: 17px;

    transition: .3s;
}


.story-button:hover {

    background: var(--gold);

    color: white;

    box-shadow:

        0 12px 30px rgba(178,138,69,.25);
}


.story-button:hover span {

    color: white;

    transform:

        translate(4px,-3px);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 950px) {

    .story-container {

        grid-template-columns: 1fr;

        gap: 80px;

        max-width: 650px;
    }


    .story-content {

        text-align: center;
    }


    .story-content h2 {

        font-size: 70px;
    }


    .story-line {

        margin-left: auto;

        margin-right: auto;
    }


    .story-content p {

        margin-left: auto;

        margin-right: auto;
    }


    .story-signature {

        justify-content: center;
    }


    .story-button {

        margin-top: 30px;
    }
}


@media (max-width: 600px) {

    .story-section {

        padding: 100px 6%;
    }


    .story-visual {

        height: 480px;

        min-height: 480px;
    }


    .story-content h2 {

        font-size: 58px;

        letter-spacing: -2px;
    }


    .story-wall {

        inset: 15px;
    }


    .story-table {

        left: 25%;

        width: 70%;
    }


    .story-chair {

        transform:
            scale(.7)
            rotate(-5deg);

        right: -5%;
    }


    .story-number {

        font-size: 60px;
    }
}
/* =========================================================
   TASTE HOME — REAL LUXURY HERO
========================================================= */

.hero {
    position: relative;
    min-height: 100vh;
    height: 100svh;
    overflow: hidden;
    background: #17110b;
}


/* REAL PHOTOGRAPH */

.hero-photo {
    position: absolute;
    inset: 0;

    background-image:
        url("https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?auto=format&fit=crop&w=2200&q=90");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    transform: scale(1.03);

    animation: heroPhotoReveal 1.8s ease-out forwards;
}


@keyframes heroPhotoReveal {

    from {
        opacity: 0;
        transform: scale(1.08);
    }

    to {
        opacity: 1;
        transform: scale(1.03);
    }
}


/* DARK LUXURY OVERLAY */

.hero-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(20,12,7,.82) 0%,
            rgba(20,12,7,.55) 42%,
            rgba(20,12,7,.18) 75%,
            rgba(20,12,7,.38) 100%
        );

    z-index: 1;
}


/* EXTRA BOTTOM FADE */

.hero-overlay::after {
    content: "";

    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 30%;

    background:
        linear-gradient(
            transparent,
            rgba(10,7,4,.65)
        );
}


/* HERO CONTENT */

.hero-content {
    position: absolute;
    z-index: 3;

    left: 8%;
    top: 50%;

    transform: translateY(-50%);

    max-width: 720px;
}


/* =========================================================
   NEW DARK BUTTONS + GOLD SHINE
========================================================= */

.luxury-button {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 18px;

    min-width: 190px;

    padding: 16px 24px;

    overflow: hidden;

    background: #17110b;

    border: 1px solid rgba(210,176,105,.55);

    color: #fff;

    font-size: 10px;
    font-weight: 600;

    letter-spacing: 1.8px;
    text-transform: uppercase;

    text-decoration: none;

    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
}


/* GOLD SHINE */

.luxury-button::before {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;

    left: -120%;

    width: 55%;

    background:
        linear-gradient(
            110deg,
            transparent,
            rgba(255,235,174,.08),
            rgba(255,215,125,.85),
            rgba(255,235,174,.08),
            transparent
        );

    transform: skewX(-20deg);

    transition: left .75s ease;

    pointer-events: none;
}


.luxury-button:hover::before {
    left: 140%;
}


.luxury-button:hover {
    transform: translateY(-3px);

    border-color: #d8b66d;

    box-shadow:
        0 12px 35px rgba(201,169,110,.28),
        0 0 25px rgba(201,169,110,.12);
}


.luxury-button span {
    color: #d9b96e;

    font-size: 17px;

    transition: transform .3s ease;
}


.luxury-button:hover span {
    transform: translate(4px,-3px);
}

/* =========================================================
   TASTE HOME — REAL FOOD PHOTOGRAPHY
========================================================= */

.real-food-image {
    position: relative;

    width: 100%;
    height: 300px;

    overflow: hidden;

    background-size: cover;
    background-position: center;

    transition:
        transform .7s ease,
        filter .7s ease;
}


/* Elegant gold frame */

.real-food-image::after {
    content: "";

    position: absolute;

    inset: 12px;

    border: 1px solid rgba(255,255,255,.28);

    pointer-events: none;

    transition: .5s ease;
}


/* Soft luxury overlay */

.real-food-image::before {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            135deg,
            rgba(211,174,101,.16),
            transparent 45%,
            rgba(15,8,4,.25)
        );

    z-index: 1;

    pointer-events: none;
}


/* =========================================================
   COFFEE
========================================================= */

.golden-latte {
    background-image:
        url("https://images.unsplash.com/photo-1541167760496-1628856ab772?auto=format&fit=crop&w=1200&q=90");
}


.espresso {
    background-image:
        url("https://images.unsplash.com/photo-1510707577719-ae7c14805e64?auto=format&fit=crop&w=1200&q=90");
}


.caramel-macchiato {
    background-image:
        url("https://images.unsplash.com/photo-1485808191679-5f86510681a2?auto=format&fit=crop&w=1200&q=90");
}

.house-espresso {
    background-image:
        url("https://images.unsplash.com/photo-1510707577719-ae7c14805e9f?auto=format&fit=crop&w=1200&q=85");
}

.spanish-latte {
    background-image:
        url("https://images.unsplash.com/photo-1461023058943-07fcbe16d735?auto=format&fit=crop&w=1200&q=90");
}


.cappuccino {
    background-image:
        url("https://images.unsplash.com/photo-1509042239860-f550ce710b93?auto=format&fit=crop&w=1200&q=90");
}


/* =========================================================
   BREAKFAST
========================================================= */

.breakfast {
    background-image:
        url("https://images.unsplash.com/photo-1533089860892-a7c6f0a88666?auto=format&fit=crop&w=1200&q=90");
}


.croissant {
    background-image:
        url("https://images.unsplash.com/photo-1555507036-ab1f4038808a?auto=format&fit=crop&w=1200&q=90");
}


.eggs-benedict {
    background-image:
        url("https://images.unsplash.com/photo-1608039829572-78524f79c4c7?auto=format&fit=crop&w=1200&q=90");
}


.avocado-toast {
    background-image:
        url("https://images.unsplash.com/photo-1541519227354-08fa5d50c44d?auto=format&fit=crop&w=1200&q=90");
}


/* =========================================================
   MAIN COURSE
========================================================= */

.pasta {
    background-image:
        url("https://images.unsplash.com/photo-1473093295043-cdd812d0e601?auto=format&fit=crop&w=1200&q=90");
}


.steak {
    background-image:
        url("https://images.unsplash.com/photo-1544025162-d76694265947?auto=format&fit=crop&w=1200&q=90");
}


.creamy-chicken {
    background-image:
        url("https://images.unsplash.com/photo-1532550907401-a500c9a57435?auto=format&fit=crop&w=1200&q=90");
}


.salmon {
    background-image:
        url("https://images.unsplash.com/photo-1467003909585-2f8a72700288?auto=format&fit=crop&w=1200&q=90");
}


.risotto {
    background-image:
        url("https://images.unsplash.com/photo-1476124369491-e7addf5db371?auto=format&fit=crop&w=1200&q=90");
}


.chicken-alfredo {
    background-image:
        url("https://images.unsplash.com/photo-1555949258-eb67b1ef0ceb?auto=format&fit=crop&w=1200&q=90");
}


/* =========================================================
   DESSERT
========================================================= */

.chocolate {
    background-image:
        url("https://images.unsplash.com/photo-1578985545062-69928b1d9587?auto=format&fit=crop&w=1200&q=90");
}


.cheesecake {
    background-image:
        url("https://images.unsplash.com/photo-1565958011703-44f9829ba187?auto=format&fit=crop&w=1200&q=90");
}


.tiramisu {
    background-image:
        url("https://images.unsplash.com/photo-1571877227200-a0d98ea607e9?auto=format&fit=crop&w=1200&q=90");
}


.creme-brulee {
    background-image:
        url("https://images.unsplash.com/photo-1470324161839-ce2bb6fa6bc3?auto=format&fit=crop&w=1200&q=90");
}


.pavlova {
    background-image:
        url("https://images.unsplash.com/photo-1488477181946-6428a0291777?auto=format&fit=crop&w=1200&q=90");
}


/* =========================================================
   IMAGE HOVER
========================================================= */

.menu-card:hover .real-food-image {

    transform: scale(1.035);

    filter:
        saturate(1.08)
        contrast(1.03);
}


.menu-card:hover .real-food-image::after {

    inset: 8px;

    border-color:
        rgba(220,187,115,.75);

    box-shadow:
        0 0 18px rgba(220,187,115,.15);
}
/* =========================================================
   TASTE HOME — LUXURY GOLD SHINE BUTTON SYSTEM
========================================================= */

/* ---------------------------------------------------------
   MAIN BUTTON BASE
--------------------------------------------------------- */

.luxury-button,
.nav-button,
.gold-button,
.text-button,
.story-button,
.reservation-button,
.menu-footer a {
    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    overflow: hidden;

    background: #17110b;

    color: #f8f0df;

    border: 1px solid rgba(201, 169, 110, .65);

    text-decoration: none;

    cursor: pointer;

    transition:
        transform .35s ease,
        color .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;

    isolation: isolate;
}


/* ---------------------------------------------------------
   GOLD SHINE
--------------------------------------------------------- */

.luxury-button::before,
.nav-button::before,
.gold-button::before,
.text-button::before,
.story-button::before,
.reservation-button::before,
.menu-footer a::before {

    content: "";

    position: absolute;

    top: -20%;

    bottom: -20%;

    left: -120%;

    width: 55%;

    background:
        linear-gradient(
            105deg,
            transparent 0%,
            rgba(255,255,255,.05) 20%,
            rgba(255,225,155,.25) 40%,
            rgba(255,215,120,.95) 50%,
            rgba(255,225,155,.25) 60%,
            rgba(255,255,255,.05) 80%,
            transparent 100%
        );

    transform: skewX(-20deg);

    transition:
        left .8s cubic-bezier(.2,.7,.2,1);

    z-index: -1;

    pointer-events: none;
}


/* ---------------------------------------------------------
   SHINE ON HOVER
--------------------------------------------------------- */

.luxury-button:hover::before,
.nav-button:hover::before,
.gold-button:hover::before,
.text-button:hover::before,
.story-button:hover::before,
.reservation-button:hover::before,
.menu-footer a:hover::before {

    left: 140%;
}


/* ---------------------------------------------------------
   BUTTON HOVER
--------------------------------------------------------- */

.luxury-button:hover,
.nav-button:hover,
.gold-button:hover,
.text-button:hover,
.story-button:hover,
.reservation-button:hover,
.menu-footer a:hover {

    transform: translateY(-3px);

    color: #ffffff;

    border-color: #e2c27c;

    box-shadow:
        0 10px 30px rgba(201,169,110,.22),
        0 0 22px rgba(201,169,110,.10);
}


/* ---------------------------------------------------------
   ARROWS / ICONS
--------------------------------------------------------- */

.luxury-button span,
.nav-button span,
.gold-button span,
.text-button span,
.story-button span,
.reservation-button span {

    color: #d8b66d;

    transition:
        transform .35s ease,
        color .35s ease;
}


.luxury-button:hover span,
.nav-button:hover span,
.gold-button:hover span,
.text-button:hover span,
.story-button:hover span,
.reservation-button:hover span {

    color: #fff1c8;

    transform:
        translate(4px, -3px);
}


/* =========================================================
   NAVIGATION BUTTON
========================================================= */

.nav-button {

    padding: 12px 20px;

    font-size: 9px;

    font-weight: 600;

    letter-spacing: 1.5px;

    text-transform: uppercase;
}


/* =========================================================
   HERO BUTTONS
========================================================= */

.gold-button,
.text-button {

    min-width: 190px;

    padding: 16px 23px;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 1.5px;

    text-transform: uppercase;
}


/* =========================================================
   STORY BUTTON
========================================================= */

.story-button {

    padding: 15px 24px;

    font-size: 10px;

    letter-spacing: 1.4px;

    text-transform: uppercase;
}


/* =========================================================
   RESERVATION BUTTON
========================================================= */

.reservation-button {

    width: 100%;

    padding: 17px 22px;

    font-family: inherit;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 1.7px;

    text-transform: uppercase;

    border-radius: 0;
}


/* =========================================================
   MENU FOOTER BUTTON
========================================================= */

.menu-footer a {

    padding: 13px 20px;

    font-size: 9px;

    letter-spacing: 1.4px;

    text-transform: uppercase;
}


/* =========================================================
   MENU FILTER BUTTONS
========================================================= */

.menu-filter {

    position: relative;

    overflow: hidden;

    padding: 11px 19px;

    background: #17110b;

    color: #d6c6ad;

    border: 1px solid rgba(201,169,110,.35);

    font-family: inherit;

    font-size: 9px;

    font-weight: 600;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    cursor: pointer;

    transition:
        color .35s ease,
        border-color .35s ease,
        transform .35s ease,
        box-shadow .35s ease;

    isolation: isolate;
}


/* FILTER SHINE */

.menu-filter::before {

    content: "";

    position: absolute;

    top: -30%;

    bottom: -30%;

    left: -130%;

    width: 60%;

    background:
        linear-gradient(
            105deg,
            transparent,
            rgba(255,225,155,.2),
            rgba(255,215,120,.9),
            rgba(255,225,155,.2),
            transparent
        );

    transform: skewX(-20deg);

    transition:
        left .75s ease;

    z-index: -1;
}


/* FILTER HOVER */

.menu-filter:hover::before {

    left: 140%;
}


.menu-filter:hover {

    color: #ffffff;

    border-color: #d8b66d;

    transform: translateY(-2px);

    box-shadow:
        0 8px 25px rgba(201,169,110,.18);
}


/* ACTIVE FILTER */

.menu-filter.active {

    background: #17110b;

    color: #e4c27d;

    border-color: #c9a96e;

    box-shadow:
        inset 0 0 18px rgba(201,169,110,.06),
        0 5px 18px rgba(201,169,110,.10);
}


/* ACTIVE FILTER SHINE */

.menu-filter.active::after {

    content: "";

    position: absolute;

    left: 12px;

    right: 12px;

    bottom: 4px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #d8b66d,
            transparent
        );

    opacity: .8;
}


/* =========================================================
   BUTTON PRESS EFFECT
========================================================= */

.luxury-button:active,
.nav-button:active,
.gold-button:active,
.text-button:active,
.story-button:active,
.reservation-button:active,
.menu-footer a:active,
.menu-filter:active {

    transform: translateY(0) scale(.98);

    box-shadow:
        0 3px 12px rgba(201,169,110,.15);
}


/* =========================================================
   ACCESSIBILITY
========================================================= */

.luxury-button:focus-visible,
.nav-button:focus-visible,
.gold-button:focus-visible,
.text-button:focus-visible,
.story-button:focus-visible,
.reservation-button:focus-visible,
.menu-footer a:focus-visible,
.menu-filter:focus-visible {

    outline: 1px solid #d8b66d;

    outline-offset: 4px;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .gold-button,
    .text-button {

        width: 100%;

        max-width: 300px;
    }

    .hero-actions {

        display: flex;

        flex-direction: column;

        align-items: flex-start;

        gap: 12px;
    }

    .menu-filter {

        padding: 10px 14px;
    }
}
/* =========================================================
   TASTE HOME — FULL SCREEN LUXURY HERO
========================================================= */

.hero {

    position: relative;

    width: 100%;

    min-height: 100vh;

    height: 100vh;

    overflow: hidden;

    background: #eee6d8;
}


/* =========================================================
   HERO PHOTOGRAPH
========================================================= */

.hero-image {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    background-image:
        url("https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?auto=format&fit=crop&w=2400&q=95");

    background-size: cover;

    background-position: center;

    transform: scale(1.03);

    animation:
        heroImageReveal 1.8s ease forwards;

}


/* =========================================================
   CINEMATIC OVERLAY
========================================================= */

.hero-overlay {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            90deg,
            rgba(12,8,5,.78) 0%,
            rgba(12,8,5,.48) 35%,
            rgba(12,8,5,.20) 70%,
            rgba(12,8,5,.38) 100%
        ),

        linear-gradient(
            0deg,
            rgba(10,6,3,.65) 0%,
            transparent 45%,
            rgba(10,6,3,.18) 100%
        );

    z-index: 1;
}


/* =========================================================
   HERO CONTENT
========================================================= */

.hero-content {

    position: relative;

    z-index: 2;

    min-height: 100%;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: flex-start;

    max-width: 700px;

    padding:
        120px
        8vw
        80px;
}


/* =========================================================
   EYEBROW
========================================================= */

.hero .eyebrow {

    display: flex;

    align-items: center;

    gap: 13px;

    margin-bottom: 24px;

    color: #dfc486;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 3px;

    animation:
        heroContent 1s ease .25s both;
}


.hero .eyebrow span {

    display: block;

    width: 32px;

    height: 1px;

    background: #d7b76e;

}


/* =========================================================
   HERO TITLE
========================================================= */

.hero h1 {

    margin: 0;

    color: #fffaf0;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        clamp(70px, 9vw, 145px);

    font-weight: 500;

    line-height: .82;

    letter-spacing: -4px;

    text-shadow:
        0 8px 35px rgba(0,0,0,.3);

    animation:
        heroContent 1s ease .4s both;
}


.hero h1 em {

    color: #dfc486;

    font-weight: 500;

}


/* =========================================================
   HERO DESCRIPTION
========================================================= */

.hero-content > p {

    max-width: 500px;

    margin:
        30px
        0
        35px;

    color: rgba(255,248,232,.82);

    font-size: 14px;

    line-height: 1.9;

    animation:
        heroContent 1s ease .55s both;
}


/* =========================================================
   HERO ACTIONS
========================================================= */

.hero-actions {

    display: flex;

    align-items: center;

    gap: 14px;

    animation:
        heroContent 1s ease .7s both;
}


/* =========================================================
   SCROLL INDICATOR
========================================================= */

.scroll-indicator {

    position: absolute;

    z-index: 3;

    right: 6vw;

    bottom: 45px;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 12px;

    color: rgba(255,245,225,.7);

    font-size: 8px;

    letter-spacing: 2px;
}


.scroll-line {

    width: 1px;

    height: 55px;

    background:
        linear-gradient(
            to bottom,
            #d9b96f,
            transparent
        );

    animation:
        scrollPulse 2s ease-in-out infinite;
}


/* =========================================================
   SIDE BRAND
========================================================= */

.hero-side-label {

    position: absolute;

    z-index: 3;

    left: 28px;

    top: 50%;

    transform:
        translateY(-50%)
        rotate(-90deg);

    color: rgba(255,245,225,.55);

    font-size: 8px;

    letter-spacing: 4px;
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes heroImageReveal {

    from {

        opacity: 0;

        transform: scale(1.1);

    }

    to {

        opacity: 1;

        transform: scale(1.03);

    }

}


@keyframes scrollPulse {

    0%,
    100% {

        opacity: .35;

        transform: scaleY(.75);

        transform-origin: top;

    }

    50% {

        opacity: 1;

        transform: scaleY(1);

    }

}


/* =========================================================
   MOBILE HERO
========================================================= */

@media (max-width: 700px) {

    .hero {

        min-height: 100svh;

        height: 100svh;
    }


    .hero-image {

        background-position: 62% center;
    }


    .hero-overlay {

        background:

            linear-gradient(
                90deg,
                rgba(10,7,4,.78),
                rgba(10,7,4,.42)
            ),

            linear-gradient(
                0deg,
                rgba(10,7,4,.7),
                transparent
            );
    }


    .hero-content {

        padding:
            110px
            28px
            80px;
    }


    .hero h1 {

        font-size: clamp(64px, 19vw, 100px);

        letter-spacing: -3px;
    }


    .hero-content > p {

        font-size: 13px;

        max-width: 370px;
    }


    .hero-actions {

        width: 100%;

        align-items: flex-start;

        flex-direction: column;
    }


    .hero-actions a {

        width: auto;
    }


    .scroll-indicator {

        display: none;
    }


    .hero-side-label {

        display: none;
    }

}
/* =========================================================
   TASTE HOME — LUXURY GALLERY
========================================================= */

.gallery-section {

    position: relative;

    padding: 140px 6vw;

    background: #eee6d8;

    color: #21140c;

    overflow: hidden;
}


/* =========================================================
   GALLERY HEADING
========================================================= */

.gallery-heading {

    max-width: 720px;

    margin: 0 auto 70px;

    text-align: center;
}


.gallery-heading .section-label {

    color: #9c7740;

    letter-spacing: 3px;
}


.gallery-heading h2 {

    margin: 20px 0;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        clamp(50px, 7vw, 90px);

    font-weight: 500;

    line-height: .95;

    letter-spacing: -2px;
}


.gallery-heading h2 em {

    color: #a27a3e;

    font-weight: 500;
}


.gallery-heading p {

    max-width: 520px;

    margin: auto;

    color: #756b5d;

    font-size: 14px;

    line-height: 1.9;
}


/* =========================================================
   GALLERY GRID
========================================================= */

.gallery-grid {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    grid-auto-rows: 260px;

    gap: 14px;

    max-width: 1500px;

    margin: auto;
}


/* =========================================================
   GALLERY ITEM
========================================================= */

.gallery-item {

    position: relative;

    overflow: hidden;

    display: block;

    min-height: 260px;

    background-color: #21140c;

    background-size: cover;

    background-position: center;

    text-decoration: none;

    border: 1px solid rgba(154,119,64,.18);

    transition:
        transform .6s cubic-bezier(.2,.7,.2,1),
        box-shadow .6s ease,
        border-color .5s ease;
}


/* LARGE IMAGE */

.gallery-large {

    grid-column: span 2;

    grid-row: span 2;
}


/* =========================================================
   GALLERY PHOTOGRAPHS
========================================================= */

.gallery-01 {

    background-image:
        url("https://images.unsplash.com/photo-1552566626-52f8b828add9?auto=format&fit=crop&w=1800&q=90");
}


.gallery-02 {

    background-image:
        url("https://images.unsplash.com/photo-1541544741938-0af808871cc0?auto=format&fit=crop&w=1400&q=90");
}


.gallery-03 {

    background-image:
        url("https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?auto=format&fit=crop&w=1400&q=90");
}


.gallery-04 {

    background-image:
        url("https://images.unsplash.com/photo-1515003197210-e0cd71810b5f?auto=format&fit=crop&w=1400&q=90");
}


.gallery-05 {

    background-image:
        url("https://images.unsplash.com/photo-1578985545062-69928b1d9587?auto=format&fit=crop&w=1400&q=90");
}


.gallery-06 {

    background-image:
        url("https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?auto=format&fit=crop&w=1400&q=90");
}


.gallery-07 {

    background-image:
        url("https://images.unsplash.com/photo-1521017432531-fbd92d768814?auto=format&fit=crop&w=1400&q=90");
}


.gallery-08 {

    background-image:
        url("https://images.unsplash.com/photo-1514933651103-005eec06c04b?auto=format&fit=crop&w=1400&q=90");
}


/* =========================================================
   DARK IMAGE OVERLAY
========================================================= */

.gallery-item::before {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(10,6,3,.05),
            rgba(10,6,3,.75)
        );

    opacity: .75;

    transition:
        opacity .5s ease;
}


/* =========================================================
   GOLD INNER FRAME
========================================================= */

.gallery-item::after {

    content: "";

    position: absolute;

    inset: 14px;

    border: 1px solid
        rgba(238,209,150,.35);

    pointer-events: none;

    transition:
        inset .5s ease,
        border-color .5s ease;
}


/* =========================================================
   GALLERY TEXT
========================================================= */

.gallery-overlay {

    position: absolute;

    z-index: 2;

    left: 30px;

    right: 30px;

    bottom: 28px;

    color: #fff8ea;

    transform:
        translateY(10px);

    opacity: .85;

    transition:
        transform .5s ease,
        opacity .5s ease;
}


.gallery-overlay span {

    display: block;

    margin-bottom: 8px;

    color: #dfc486;

    font-size: 8px;

    font-weight: 600;

    letter-spacing: 2.5px;
}


.gallery-overlay strong {

    display: block;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 25px;

    font-weight: 500;

    line-height: 1.05;
}


.gallery-overlay em {

    color: #e2c27c;

    font-weight: 500;
}


/* =========================================================
   HOVER
========================================================= */

.gallery-item:hover {

    transform:
        translateY(-5px);

    border-color:
        rgba(201,169,110,.65);

    box-shadow:
        0 20px 50px rgba(46,31,18,.22);
}


.gallery-item:hover::before {

    opacity: .55;
}


.gallery-item:hover::after {

    inset: 9px;

    border-color:
        rgba(230,196,125,.8);
}


.gallery-item:hover .gallery-overlay {

    transform:
        translateY(0);

    opacity: 1;
}


/* =========================================================
   GALLERY FOOTER
========================================================= */

.gallery-footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    max-width: 1500px;

    margin: 40px auto 0;

    padding-top: 25px;

    border-top:
        1px solid rgba(120,93,54,.25);

    color: #8d7c65;

    font-size: 9px;

    letter-spacing: 2px;

    text-transform: uppercase;
}


.gallery-footer a {

    position: relative;

    display: inline-flex;

    gap: 10px;

    color: #382719;

    text-decoration: none;

    font-weight: 600;

    transition:
        color .3s ease;
}


.gallery-footer a span {

    color: #a37b3e;

    transition:
        transform .3s ease;
}


.gallery-footer a:hover {

    color: #9a7137;
}


.gallery-footer a:hover span {

    transform:
        translate(3px,-3px);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 900px) {

    .gallery-grid {

        grid-template-columns:
            repeat(2, 1fr);

        grid-auto-rows: 250px;
    }

}


@media (max-width: 600px) {

    .gallery-section {

        padding: 100px 22px;
    }


    .gallery-heading {

        margin-bottom: 45px;
    }


    .gallery-grid {

        grid-template-columns: 1fr;

        grid-auto-rows: 300px;

        gap: 10px;
    }


    .gallery-large {

        grid-column: span 1;

        grid-row: span 1;
    }


    .gallery-overlay {

        left: 24px;

        right: 24px;

        bottom: 24px;
    }


    .gallery-footer {

        flex-direction: column;

        align-items: flex-start;

        gap: 18px;
    }

}
/* =========================================================
   TASTE HOME — LUXURY LOGO
========================================================= */

.logo {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    color: #f4ead7;

    text-decoration: none;

    transition:
        transform .35s ease;
}


.logo-symbol {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 34px;

    height: 34px;

    color: #d8b66d;

    font-size: 24px;

    border: 1px solid
        rgba(216,182,109,.55);

    transform: rotate(45deg);

    transition:
        transform .5s ease,
        box-shadow .5s ease,
        color .5s ease;
}


.logo-symbol::first-letter {

    display: block;
}


.logo-text {

    display: flex;

    flex-direction: column;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 22px;

    font-weight: 600;

    letter-spacing: 2px;

    line-height: 1;
}


.logo-text small {

    margin-top: 5px;

    color: #b99a64;

    font-family:
        "DM Sans",
        sans-serif;

    font-size: 6px;

    font-weight: 600;

    letter-spacing: 2px;
}


.logo:hover {

    transform:
        translateY(-1px);
}


.logo:hover .logo-symbol {

    color: #fff0c8;

    transform:
        rotate(135deg);

    box-shadow:
        0 0 18px
        rgba(216,182,109,.35);
}
/* =========================================================
   TASTE HOME — LUXURY FOOTER
========================================================= */

.luxury-footer {

    position: relative;

    background:
        linear-gradient(
            145deg,
            #120b07,
            #21140c 55%,
            #0d0805
        );

    color: #eee4d2;

    overflow: hidden;
}


/* =========================================================
   GOLD TOP LINE
========================================================= */

.footer-gold-line {

    width: 100%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #c9a96e 25%,
            #f0d18b 50%,
            #c9a96e 75%,
            transparent
        );

    box-shadow:
        0 0 18px
        rgba(201,169,110,.25);
}


/* =========================================================
   FOOTER CONTAINER
========================================================= */

.footer-container {

    display: grid;

    grid-template-columns:
        1.5fr
        .7fr
        1fr
        1.1fr;

    gap: 70px;

    max-width: 1450px;

    margin: auto;

    padding:
        90px
        6vw
        70px;
}


/* =========================================================
   BRAND
========================================================= */

.footer-brand {

    max-width: 360px;
}


.footer-logo {

    display: inline-flex;

    align-items: center;

    gap: 14px;

    color: #f4ead7;

    text-decoration: none;

    transition:
        transform .35s ease;
}


.footer-logo-symbol {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 42px;

    height: 42px;

    border: 1px solid
        rgba(201,169,110,.65);

    color: #d8b66d;

    font-size: 25px;

    transform: rotate(45deg);

    transition:
        transform .5s ease,
        box-shadow .5s ease;
}


.footer-logo-text {

    display: flex;

    flex-direction: column;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 25px;

    font-weight: 600;

    letter-spacing: 2px;

    line-height: 1;
}


.footer-logo-text small {

    margin-top: 6px;

    color: #a78a5c;

    font-family:
        "DM Sans",
        sans-serif;

    font-size: 6px;

    letter-spacing: 2px;
}


.footer-logo:hover
.footer-logo-symbol {

    transform:
        rotate(135deg);

    box-shadow:
        0 0 22px
        rgba(201,169,110,.3);
}


/* =========================================================
   BRAND DESCRIPTION
========================================================= */

.footer-brand p {

    margin:
        28px
        0;

    color: #a99a87;

    font-size: 13px;

    line-height: 1.9;
}


/* =========================================================
   FOOTER RESERVE BUTTON
========================================================= */

.footer-reserve {

    position: relative;

    display: inline-flex;

    align-items: center;

    gap: 13px;

    padding: 14px 20px;

    background: #17100a;

    border: 1px solid
        rgba(201,169,110,.55);

    color: #ead7b1;

    text-decoration: none;

    font-size: 9px;

    font-weight: 600;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    overflow: hidden;

    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
}


.footer-reserve::before {

    content: "";

    position: absolute;

    top: -30%;

    bottom: -30%;

    left: -120%;

    width: 50%;

    background:
        linear-gradient(
            105deg,
            transparent,
            rgba(255,225,155,.25),
            #e4c27d,
            rgba(255,225,155,.25),
            transparent
        );

    transform: skewX(-20deg);

    transition:
        left .8s ease;
}


.footer-reserve:hover::before {

    left: 140%;
}


.footer-reserve:hover {

    transform:
        translateY(-3px);

    border-color:
        #e1c17a;

    box-shadow:
        0 10px 30px
        rgba(201,169,110,.15);
}


.footer-reserve span {

    color: #d8b66d;

    transition:
        transform .3s ease;
}


.footer-reserve:hover span {

    transform:
        translate(3px,-3px);
}


/* =========================================================
   FOOTER COLUMNS
========================================================= */

.footer-column {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 13px;
}


.footer-heading {

    margin-bottom: 10px;

    color: #d8b66d;

    font-size: 8px;

    font-weight: 600;

    letter-spacing: 2.5px;
}


.footer-column > a {

    position: relative;

    color: #a99a87;

    text-decoration: none;

    font-size: 12px;

    transition:
        color .3s ease,
        transform .3s ease;
}


.footer-column > a:hover {

    color: #f1dfbd;

    transform:
        translateX(4px);
}


/* =========================================================
   HOURS
========================================================= */

.footer-hours {

    display: flex;

    flex-direction: column;

    gap: 4px;

    margin-bottom: 8px;
}


.footer-hours span {

    color: #8e806f;

    font-size: 9px;

    letter-spacing: .5px;
}


.footer-hours strong {

    color: #cfc0a9;

    font-size: 11px;

    font-weight: 500;
}


/* =========================================================
   FOOTER BOTTOM
========================================================= */

.footer-bottom {

    display: flex;

    align-items: center;

    justify-content: space-between;

    max-width: 1450px;

    margin: auto;

    padding:
        22px
        6vw
        25px;

    border-top:
        1px solid
        rgba(201,169,110,.15);

    color: #766a5d;

    font-size: 8px;

    letter-spacing: 1.5px;

    text-transform: uppercase;
}


.footer-made b {

    margin: 0 4px;

    color: #c9a96e;

    font-size: 11px;
}


/* =========================================================
   BACK TO TOP
========================================================= */

.back-top {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    color: #a99168;

    text-decoration: none;

    font-size: 8px;

    letter-spacing: 2px;

    transition:
        color .3s ease;
}


.back-top span {

    color: #d8b66d;

    font-size: 14px;

    transition:
        transform .3s ease;
}


.back-top:hover {

    color: #f0d9a8;
}


.back-top:hover span {

    transform:
        translateY(-3px);
}


/* =========================================================
   RESPONSIVE FOOTER
========================================================= */

@media (max-width: 1000px) {

    .footer-container {

        grid-template-columns:
            1fr 1fr;

        gap: 55px;
    }

}


@media (max-width: 600px) {

    .footer-container {

        grid-template-columns: 1fr;

        gap: 45px;

        padding:
            70px 25px
            50px;
    }


    .footer-bottom {

        flex-direction: column;

        align-items: flex-start;

        gap: 18px;

        padding:
            22px 25px
            28px;
    }

}
/* =========================================================
   TASTE HOME — RESTORE LUXURY MENU CARD GRID
   Real images + original card layout
========================================================= */

.menu-grid {

    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 22px;

    width: 100%;

    max-width: 1400px;

    margin: 50px auto 0;
}


/* =========================================================
   MENU CARD
========================================================= */

.menu-card {

    display: flex;

    flex-direction: column;

    min-width: 0;

    height: auto;

    background: #fffdf8;

    border: 1px solid rgba(111, 83, 43, 0.12);

    overflow: hidden;

    box-shadow:
        0 8px 25px rgba(54, 37, 20, 0.04);

    transition:
        transform .45s ease,
        box-shadow .45s ease,
        border-color .45s ease;
}


.menu-card:hover {

    transform: translateY(-7px);

    border-color:
        rgba(194, 153, 79, .5);

    box-shadow:
        0 18px 40px rgba(54, 37, 20, .12);
}


/* =========================================================
   IMAGE
========================================================= */

.menu-image {

    order: 1;

    position: relative;

    width: 100%;

    height: 250px;

    min-height: 250px;

    flex-shrink: 0;

    overflow: hidden;

    background-color: #e8dfd1;

    background-size: cover;

    background-position: center;

    isolation: isolate;
}


/* Make sure visual backgrounds fill the image */

.menu-image::before {

    content: "";

    position: absolute;

    inset: 0;

    background: inherit;

    background-size: cover;

    background-position: center;

    z-index: -1;

}


/* =========================================================
   IMAGE HOVER
========================================================= */

.menu-card:hover .menu-image {

    transform: scale(1.01);
}


.menu-image {

    transition:
        transform .6s ease;
}


/* =========================================================
   CARD CONTENT
========================================================= */

.menu-card-content {

    order: 2;

    position: relative;

    padding: 23px 22px 24px;

    background: #fffdf8;

    flex: 0 0 auto;
}


/* =========================================================
   TITLE + PRICE
========================================================= */

.menu-title-row {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 15px;

    margin-bottom: 10px;
}


.menu-title-row h3 {

    margin: 0;

    color: #291b11;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 25px;

    font-weight: 600;

    line-height: 1.1;
}


.menu-title-row > span {

    flex-shrink: 0;

    color: #b8863b;

    font-family:
        "DM Sans",
        sans-serif;

    font-size: 12px;

    font-weight: 600;

    white-space: nowrap;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.menu-card-content > p {

    margin: 0 0 17px;

    color: #776d61;

    font-family:
        "DM Sans",
        sans-serif;

    font-size: 11px;

    line-height: 1.7;
}


/* =========================================================
   GOLD TAG
========================================================= */

.menu-tag {

    display: inline-block;

    padding: 5px 9px;

    border: 1px solid
        rgba(180, 137, 68, .35);

    color: #a67a35;

    font-family:
        "DM Sans",
        sans-serif;

    font-size: 7px;

    font-weight: 600;

    letter-spacing: 1.5px;

    line-height: 1;

    background:
        rgba(198, 163, 103, .025);
}


/* =========================================================
   REAL IMAGE VISUALS
========================================================= */

.coffee-visual,
.espresso-visual,
.breakfast-visual,
.pasta-visual,
.steak-visual,
.dessert-visual,
.cheesecake-visual,
.croissant-visual {

    background-size: cover;

    background-position: center;
}


/* =========================================================
   4 COLUMN DESKTOP
========================================================= */

@media (max-width: 1200px) {

    .menu-grid {

        grid-template-columns:
            repeat(3, minmax(0, 1fr));

    }

}


/* =========================================================
   2 COLUMN TABLET
========================================================= */

@media (max-width: 800px) {

    .menu-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 16px;

    }


    .menu-image {

        height: 230px;

        min-height: 230px;

    }

}


/* =========================================================
   1 COLUMN MOBILE
========================================================= */

@media (max-width: 550px) {

    .menu-grid {

        grid-template-columns: 1fr;

        gap: 18px;

    }


    .menu-image {

        height: 260px;

        min-height: 260px;

    }


    .menu-card-content {

        padding: 22px 20px;

    }


    .menu-title-row h3 {

        font-size: 27px;

    }

}
/* =========================================================
   TASTE HOME — FORCE MENU BACK TO ORIGINAL CARD GRID
========================================================= */

.menu-grid {
    display: grid !important;

    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;

    gap: 22px !important;

    width: 100% !important;

    max-width: 1400px !important;

    margin: 50px auto 0 !important;
}


/* Every menu item becomes a normal vertical card */

.menu-grid .menu-card {
    display: flex !important;

    flex-direction: column !important;

    grid-column: auto !important;

    grid-row: auto !important;

    width: auto !important;

    min-width: 0 !important;

    height: auto !important;

    margin: 0 !important;

    padding: 0 !important;

    overflow: hidden !important;

    background: #fffdf8 !important;

    border: 1px solid rgba(111, 83, 43, 0.12) !important;

    box-sizing: border-box !important;
}


/* IMAGE */

.menu-grid .menu-image {
    position: relative !important;

    display: block !important;

    width: 100% !important;

    height: 250px !important;

    min-height: 250px !important;

    max-height: 250px !important;

    flex: 0 0 250px !important;

    overflow: hidden !important;

    box-sizing: border-box !important;

    background-size: cover !important;

    background-position: center !important;
}


/* CONTENT */

.menu-grid .menu-card-content {
    display: block !important;

    width: 100% !important;

    height: auto !important;

    min-height: 0 !important;

    flex: 0 0 auto !important;

    box-sizing: border-box !important;

    padding: 22px !important;

    background: #fffdf8 !important;
}


/* TITLE + PRICE */

.menu-grid .menu-title-row {
    display: flex !important;

    flex-direction: row !important;

    align-items: flex-start !important;

    justify-content: space-between !important;

    width: 100% !important;

    gap: 12px !important;

    margin: 0 0 10px !important;
}


.menu-grid .menu-title-row h3 {
    margin: 0 !important;

    font-family: "Cormorant Garamond", serif !important;

    font-size: 25px !important;

    line-height: 1.1 !important;

    font-weight: 600 !important;

    color: #291b11 !important;
}


.menu-grid .menu-title-row > span {
    flex-shrink: 0 !important;

    margin: 0 !important;

    color: #b8863b !important;

    white-space: nowrap !important;
}


/* DESCRIPTION */

.menu-grid .menu-card-content > p {
    margin: 0 0 16px !important;

    color: #776d61 !important;

    font-family: "DM Sans", sans-serif !important;

    font-size: 11px !important;

    line-height: 1.7 !important;
}


/* TAG */

.menu-grid .menu-tag {
    display: inline-block !important;

    width: auto !important;

    height: auto !important;

    padding: 5px 9px !important;

    border: 1px solid rgba(180, 137, 68, .35) !important;

    color: #a67a35 !important;

    font-size: 7px !important;

    letter-spacing: 1.5px !important;
}


/* HOVER */

.menu-grid .menu-card:hover {
    transform: translateY(-7px) !important;

    box-shadow:
        0 18px 40px rgba(54, 37, 20, 0.12) !important;

    border-color:
        rgba(194, 153, 79, .5) !important;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1200px) {

    .menu-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;
    }

}


/* =========================================================
   SMALL TABLET
========================================================= */

@media (max-width: 850px) {

    .menu-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }

}


/* =========================================================
   PHONE
========================================================= */

@media (max-width: 560px) {

    .menu-grid {
        grid-template-columns:
            1fr !important;
    }

}
/* =========================================================
   TASTE HOME — NAVIGATION BUTTONS
========================================================= */


/* DESKTOP NAV LINKS */

.nav-links a {

    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 10px 16px;

    color: #2b2119;

    text-decoration: none;

    font-size: 13px;

    font-weight: 600;

    letter-spacing: 1.5px;

    border: 1px solid rgba(184, 145, 72, 0.35);

    background: rgba(255, 252, 245, 0.72);

    transition:
        color 0.3s ease,
        background 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease,
        transform 0.3s ease;

}


/* GOLD SHINE */

.nav-links a::before {

    content: "";

    position: absolute;

    top: 0;

    left: -120%;

    width: 80%;

    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(212, 175, 96, 0.45),
            transparent
        );

    transform: skewX(-20deg);

    transition: left 0.6s ease;

}


/* HOVER */

.nav-links a:hover {

    color: #8c682c;

    border-color: #c9a96e;

    background: #fffaf0;

    box-shadow:
        0 0 18px rgba(201, 169, 110, 0.22);

    transform: translateY(-2px);

}


.nav-links a:hover::before {

    left: 140%;

}


/* =========================================================
   RESERVE BUTTON
========================================================= */

.nav-button {

    position: relative;

    overflow: hidden;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 12px 22px;

    background: #17120e;

    color: #d9b86f !important;

    border: 1px solid #c9a96e;

    text-decoration: none;

    letter-spacing: 1px;

    font-size: 12px;

    font-weight: 600;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;

}


.nav-button::before {

    content: "";

    position: absolute;

    top: 0;

    left: -130%;

    width: 70%;

    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 231, 170, 0.7),
            transparent
        );

    transform: skewX(-20deg);

    animation: goldButtonShine 3s infinite;

}


@keyframes goldButtonShine {

    0% {
        left: -130%;
    }

    45% {
        left: 140%;
    }

    100% {
        left: 140%;
    }

}


.nav-button:hover {

    transform: translateY(-2px);

    box-shadow:
        0 0 22px rgba(201, 169, 110, 0.35);

}


/* =========================================================
   MOBILE MENU BUTTON
========================================================= */

.mobile-menu-button {

    display: none;

    width: 46px;

    height: 46px;

    padding: 10px;

    border: 1px solid #c9a96e;

    background: #17120e;

    cursor: pointer;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 5px;

}


.mobile-menu-button span {

    display: block;

    width: 21px;

    height: 2px;

    background: #d9b86f;

    transition:
        transform 0.3s ease,
        opacity 0.3s ease;

}

/* =========================================================
   LUXURY MOBILE MENU
========================================================= */

@media (max-width: 900px) {

    .nav-container {
        position: relative;
    }


    /* HAMBURGER */

    .mobile-menu-button {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-end;
        gap: 6px;

        width: 46px;
        height: 46px;

        margin-left: auto;

        background: transparent;
        border: 1px solid rgba(201, 169, 110, 0.45);

        cursor: pointer;

        position: relative;
        z-index: 3001;

        padding: 0 12px;

        transition:
            border-color 0.3s ease,
            background 0.3s ease;
    }


    .mobile-menu-button:hover {
        border-color: var(--gold);
        background: rgba(201, 169, 110, 0.08);
    }


    .mobile-menu-button span {
        display: block;

        width: 20px;
        height: 1px;

        background: var(--gold);

        transition:
            transform 0.3s ease,
            opacity 0.3s ease;
    }


    /* FULL SCREEN OVERLAY */

    .mobile-menu-overlay {
        position: fixed;
        inset: 0;

        width: 100%;
        height: 100dvh;

        background:
            radial-gradient(
                circle at 85% 10%,
                rgba(201, 169, 110, 0.10),
                transparent 35%
            ),
            radial-gradient(
                circle at 15% 85%,
                rgba(201, 169, 110, 0.06),
                transparent 35%
            ),
            #0d0906;

        z-index: 3000;

        opacity: 0;
        visibility: hidden;

        transform: translateY(-20px);

        transition:
            opacity 0.45s ease,
            visibility 0.45s ease,
            transform 0.45s ease;

        overflow-y: auto;
    }


    .mobile-menu-overlay.mobile-menu-active {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }


    /* INNER */

    .mobile-menu-inner {
        min-height: 100dvh;

        padding:
            28px
            clamp(24px, 7vw, 50px)
            32px;

        display: flex;
        flex-direction: column;

        box-sizing: border-box;
    }


    /* TOP */

    .mobile-menu-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }


    .mobile-menu-brand {
        display: flex;
        align-items: center;
        gap: 13px;
    }


    .mobile-menu-symbol {
        color: var(--gold);
        font-size: 24px;
    }


    .mobile-menu-brand strong {
        display: block;

        color: var(--cream);

        font-family: var(--serif);

        font-size: 18px;
        letter-spacing: 2px;
    }


    .mobile-menu-brand small {
        display: block;

        margin-top: 3px;

        color: var(--cream-muted);

        font-family: var(--sans);

        font-size: 7px;
        letter-spacing: 2px;
    }


    /* CLOSE BUTTON */

    .mobile-menu-close {
        width: 46px;
        height: 46px;

        border: 1px solid rgba(201, 169, 110, 0.45);

        background: transparent;

        color: var(--gold);

        font-size: 30px;
        font-weight: 200;

        line-height: 1;

        cursor: pointer;

        transition:
            background 0.3s ease,
            border-color 0.3s ease,
            transform 0.3s ease;
    }


    .mobile-menu-close:hover {
        background: rgba(201, 169, 110, 0.08);
        border-color: var(--gold);
        transform: rotate(90deg);
    }


    /* DIVIDER */

    .mobile-menu-divider {
        width: 100%;
        height: 1px;

        margin-top: 28px;

        background:
            linear-gradient(
                90deg,
                transparent,
                rgba(201, 169, 110, 0.45),
                transparent
            );
    }


    /* LINKS */

    .mobile-menu-links {
        display: flex;
        flex-direction: column;

        margin-top: clamp(45px, 10vh, 90px);

        gap: 8px;
    }


    .mobile-menu-links a {
        display: flex;
        align-items: center;

        gap: 20px;

        padding: 14px 0;

        text-decoration: none;

        border-bottom: 1px solid rgba(255, 255, 255, 0.06);

        transition:
            padding-left 0.3s ease,
            border-color 0.3s ease;
    }


    .mobile-menu-links a span {
        width: 25px;

        color: var(--gold);

        font-family: var(--sans);

        font-size: 10px;

        letter-spacing: 1px;
    }


    .mobile-menu-links a strong {
        color: var(--cream);

        font-family: var(--serif);

        font-size: clamp(27px, 8vw, 42px);

        font-weight: 500;

        letter-spacing: 0.5px;

        transition: color 0.3s ease;
    }


    .mobile-menu-links a:hover {
        padding-left: 10px;

        border-color:
            rgba(201, 169, 110, 0.35);
    }


    .mobile-menu-links a:hover strong {
        color: var(--gold);
    }


    /* BOTTOM */

    .mobile-menu-bottom {
        margin-top: auto;

        padding-top: 45px;
    }


    .mobile-reserve-button {
        display: flex;
        align-items: center;
        justify-content: space-between;

        width: 100%;

        box-sizing: border-box;

        padding: 17px 20px;

        color: var(--espresso);

        background: var(--gold);

        text-decoration: none;

        font-family: var(--sans);

        font-size: 12px;
        font-weight: 600;

        letter-spacing: 2px;
        text-transform: uppercase;

        transition:
            background 0.3s ease,
            transform 0.3s ease;
    }


    .mobile-reserve-button span {
        font-size: 20px;
        line-height: 1;
    }


    .mobile-reserve-button:hover {
        background: var(--gold-light);
        transform: translateY(-2px);
    }


    .mobile-menu-bottom p {
        margin: 18px 0 0;

        text-align: center;

        color: var(--cream-muted);

        font-family: var(--sans);

        font-size: 8px;

        letter-spacing: 3px;
    }


    /* HIDE DESKTOP RESERVATION */

    .nav-button {
        display: none;
    }

}

/* =========================================================
   TASTE HOME — MENU FILTER BUTTONS
========================================================= */

.menu-filters {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 45px auto 50px;
}

.menu-filter {
    position: relative;
    overflow: hidden;

    appearance: none;
    -webkit-appearance: none;

    border: 1px solid rgba(201, 169, 110, 0.55);

    background: #17120e;

    color: #d8bd82;

    padding: 12px 22px;

    min-width: 90px;

    font-family: "DM Sans", sans-serif;

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 1.4px;

    text-transform: uppercase;

    cursor: pointer;

    outline: none;

    transition:
        color 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease,
        transform 0.3s ease;
}


/* GOLD SHINE */

.menu-filter::before {
    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 70%;
    height: 100%;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 230, 170, 0.7),
        transparent
    );

    transform: skewX(-25deg);

    transition: left 0.6s ease;

    pointer-events: none;
}


/* HOVER */

.menu-filter:hover {
    color: #fff1c9;

    border-color: #d8b86b;

    box-shadow:
        0 0 18px rgba(201, 169, 110, 0.28);

    transform: translateY(-2px);
}

.menu-filter:hover::before {
    left: 140%;
}


/* ACTIVE */

.menu-filter.active {
    color: #17120e;

    background: linear-gradient(
        135deg,
        #b58b45,
        #ead39a,
        #b58b45
    );

    border-color: #d8b86b;

    box-shadow:
        0 0 22px rgba(201, 169, 110, 0.3);

}


/* CLICK */

.menu-filter:active {
    transform: translateY(0) scale(0.97);
}


/* MENU CARD ANIMATION */

.menu-card {
    transition:
        opacity 0.35s ease,
        transform 0.35s ease;
}

.menu-card.hide {
    display: none !important;
}

.menu-card.show {
    display: block;
    opacity: 1;
    transform: translateY(0);
}


/* MOBILE */

@media (max-width: 600px) {

    .menu-filters {
        gap: 8px;

        margin-top: 30px;
        margin-bottom: 35px;

        padding: 0 15px;
    }

    .menu-filter {
        padding: 10px 15px;

        min-width: auto;

        font-size: 10px;

        letter-spacing: 1px;
    }

}