/* =========================================================
   LUNA & OAK — PREMIUM CAFÉ WEBSITE
   MATCHED TO THE CURRENT HTML
========================================================= */


/* =========================================================
   1. ROOT VARIABLES
========================================================= */

:root {

    --cream: #f7f1e8;
    --cream-light: #fcfaf6;
    --cream-dark: #e7dbcc;

    --maroon: #641f2b;
    --maroon-dark: #45131d;
    --maroon-deep: #321017;
    --maroon-light: #7c3543;

    --coffee: #30231f;
    --coffee-light: #5b4840;

    --gold: #b99762;
    --gold-light: #d5bb8b;

    --white: #ffffff;
    --black: #171313;

    --gray: #756c67;
    --gray-light: #a59b94;

    --border: rgba(70, 38, 30, 0.12);

    --shadow-soft:
        0 12px 35px rgba(48, 35, 31, 0.08);

    --shadow-card:
        0 20px 50px rgba(48, 35, 31, 0.11);

    --shadow-heavy:
        0 30px 75px rgba(48, 35, 31, 0.18);

    --radius-small: 10px;
    --radius: 18px;
    --radius-large: 28px;

    --transition:
        all 0.45s cubic-bezier(0.22, 1, 0.36, 1);

}


/* =========================================================
   2. RESET
========================================================= */

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

html {
    scroll-behavior: smooth;
}

body {

    font-family:
        "Montserrat",
        Arial,
        sans-serif;

    background: var(--cream-light);

    color: var(--coffee);

    line-height: 1.7;

    overflow-x: hidden;

}

body.modal-open {
    overflow: hidden;
}

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

button,
input,
select,
textarea {
    font: inherit;
}

button {
    border: none;
}

a {
    color: inherit;
    text-decoration: none;
}

::selection {
    background: var(--maroon);
    color: var(--white);
}


/* =========================================================
   3. TYPOGRAPHY
========================================================= */

h1,
h2,
h3,
h4 {

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    color: var(--coffee);

    font-weight: 600;

    line-height: 1.02;

}

h1 em,
h2 em,
h3 em {

    color: var(--maroon);

    font-style: italic;

    font-weight: 500;

}

p {
    color: var(--gray);
}

.section {

    padding:
        120px
        0;

}

.section-container {

    width: min(
        1180px,
        calc(100% - 48px)
    );

    margin: 0 auto;

}

.section-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 18px;

    color: var(--maroon);

    font-size: 0.68rem;

    font-weight: 600;

    letter-spacing: 0.22em;

    text-transform: uppercase;

}

.section-eyebrow::before {

    content: "";

    width: 30px;

    height: 1px;

    background: var(--gold);

}

.section-heading {

    max-width: 680px;

    margin-bottom: 55px;

}

.section-heading.center {

    margin-left: auto;
    margin-right: auto;

    text-align: center;

}

.section-heading.center .section-eyebrow {

    justify-content: center;

}

.section-heading h2 {

    font-size: clamp(
        3rem,
        5vw,
        4.5rem
    );

    letter-spacing: -0.035em;

    margin-bottom: 22px;

}

.section-heading > p:last-child {

    max-width: 570px;

    font-size: 0.94rem;

    line-height: 1.9;

}

.section-heading.center > p:last-child {

    margin-left: auto;
    margin-right: auto;

}


/* =========================================================
   4. NAVBAR
========================================================= */

.navbar {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    z-index: 1000;

    background:
        rgba(252, 250, 246, 0.92);

    backdrop-filter: blur(18px);

    -webkit-backdrop-filter: blur(18px);

    border-bottom:
        1px solid
        rgba(70, 38, 30, 0.06);

    transition:
        box-shadow 0.35s ease,
        background 0.35s ease;

}

.nav-container {

    width: min(
        1280px,
        calc(100% - 48px)
    );

    height: 88px;

    margin: 0 auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

}

.logo {

    display: inline-flex;

    flex-direction: column;

    align-items: flex-start;

    line-height: 1;

}

.logo-main {

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: 2.55rem;

    font-weight: 600;

    letter-spacing: -0.035em;

    color: var(--maroon);

}

.logo-sub {

    margin-top: 7px;

    color: var(--coffee-light);

    font-size: 0.53rem;

    font-weight: 600;

    letter-spacing: 0.28em;

}

.nav-links {

    display: flex;

    align-items: center;

    gap: 31px;

}

.nav-links a {

    position: relative;

    color: var(--coffee);

    font-size: 0.74rem;

    font-weight: 500;

    letter-spacing: 0.06em;

    transition: var(--transition);

}

.nav-links a::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: -7px;

    width: 0;

    height: 1px;

    background: var(--maroon);

    transition: width 0.35s ease;

}

.nav-links a:hover {

    color: var(--maroon);

}

.nav-links a:hover::after {

    width: 100%;

}

.nav-reserve {

    padding: 13px 21px;

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

    border-radius: 999px;

    background: var(--maroon);

    color: var(--white);

    cursor: pointer;

    font-size: 0.68rem;

    font-weight: 600;

    letter-spacing: 0.08em;

    transition: var(--transition);

}

.nav-reserve:hover {

    background: transparent;

    color: var(--maroon);

    transform: translateY(-2px);

    box-shadow: var(--shadow-soft);

}

.mobile-menu {

    display: none;

    width: 44px;
    height: 44px;

    align-items: center;
    justify-content: center;

    flex-direction: column;

    gap: 5px;

    background: transparent;

    cursor: pointer;

}

.mobile-menu span {

    display: block;

    width: 23px;

    height: 1.5px;

    background: var(--coffee);

    transition: var(--transition);

}

.mobile-menu:hover span:nth-child(2) {

    width: 15px;

}


/* =========================================================
   5. BUTTONS
========================================================= */

.button {

    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 13px;

    min-height: 52px;

    padding:
        0 25px;

    border-radius: 999px;

    cursor: pointer;

    font-size: 0.68rem;

    font-weight: 600;

    letter-spacing: 0.1em;

    text-transform: uppercase;

    overflow: hidden;

    transition: var(--transition);

}

.button span {

    transition:
        transform 0.35s ease;

}

.button:hover span {

    transform: translateX(5px);

}

.button::before {

    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 80%;

    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,0.25),
            transparent
        );

    transform: skewX(-20deg);

    transition: left 0.7s ease;

}

.button:hover::before {

    left: 140%;

}

.button-primary {

    background: var(--white);

    color: var(--maroon);

    box-shadow:
        0 14px 35px rgba(0,0,0,0.12);

}

.button-primary:hover {

    transform: translateY(-4px);

    box-shadow:
        0 20px 40px rgba(0,0,0,0.18);

}

.button-outline {

    border:
        1px solid
        rgba(255,255,255,0.55);

    background:
        rgba(255,255,255,0.05);

    color: var(--white);

    backdrop-filter: blur(10px);

}

.button-outline:hover {

    background: var(--white);

    color: var(--maroon);

    border-color: var(--white);

    transform: translateY(-4px);

}

.button-maroon {

    background: var(--maroon);

    color: var(--white);

    box-shadow:
        0 12px 28px
        rgba(100,31,43,0.18);

}

.button-maroon:hover {

    background: var(--maroon-dark);

    transform: translateY(-4px);

    box-shadow:
        0 20px 40px
        rgba(100,31,43,0.25);

}

.button-light {

    background: var(--white);

    color: var(--maroon);

}

.button-light:hover {

    transform: translateY(-4px);

    box-shadow:
        0 18px 40px
        rgba(0,0,0,0.18);

}


/* =========================================================
   6. HERO
========================================================= */

.hero {

    position: relative;

    min-height: 100vh;

    display: flex;

    align-items: center;

    overflow: hidden;

    background: var(--maroon-deep);

}

.hero-background {

    position: absolute;

    inset: 0;

    z-index: 0;

}

.hero-background img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;

    transform:
        scale(1.04);

    animation:
        heroImageIn 1.8s
        cubic-bezier(.22,1,.36,1)
        forwards;

}

@keyframes heroImageIn {

    from {
        transform: scale(1.12);
    }

    to {
        transform: scale(1.04);
    }

}

.hero-overlay {

    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(34,13,17,0.88) 0%,
            rgba(34,13,17,0.64) 40%,
            rgba(34,13,17,0.25) 72%,
            rgba(34,13,17,0.38) 100%
        );

}

.hero-content {

    position: relative;

    z-index: 2;

    width: min(
        1180px,
        calc(100% - 48px)
    );

    margin: 0 auto;

    padding-top: 95px;

    color: var(--white);

}

.hero-eyebrow {

    margin-bottom: 22px;

    color:
        rgba(255,255,255,0.8);

    font-size: 0.68rem;

    font-weight: 600;

    letter-spacing: 0.25em;

    animation:
        heroTextIn 1s
        0.15s both;

}

.hero-eyebrow::before {

    content: "";

    display: inline-block;

    width: 35px;

    height: 1px;

    margin:
        0 13px 4px 0;

    background: var(--gold-light);

}

.hero h1 {

    max-width: 760px;

    color: var(--white);

    font-size: clamp(
        4rem,
        8vw,
        7rem
    );

    font-weight: 500;

    letter-spacing: -0.055em;

    animation:
        heroTextIn 1s
        0.3s both;

}

.hero h1 em {

    color: var(--gold-light);

}

.hero-description {

    max-width: 520px;

    margin:
        28px 0 34px;

    color:
        rgba(255,255,255,0.76);

    font-size: 0.94rem;

    line-height: 1.9;

    animation:
        heroTextIn 1s
        0.45s both;

}

.hero-buttons {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    animation:
        heroTextIn 1s
        0.6s both;

}

.hero-rating {

    display: flex;

    align-items: center;

    gap: 14px;

    margin-top: 28px;

    color:
        rgba(255,255,255,0.72);

    font-size: 0.67rem;

    letter-spacing: 0.04em;

    animation:
        heroTextIn 1s
        0.75s both;

}

.stars {

    color: var(--gold-light);

    letter-spacing: 0.15em;

}

.hero-scroll {

    position: absolute;

    z-index: 3;

    bottom: 30px;

    right: 48px;

    display: flex;

    align-items: center;

    gap: 15px;

    color:
        rgba(255,255,255,0.65);

    font-size: 0.58rem;

    letter-spacing: 0.2em;

    writing-mode: vertical-rl;

}

.scroll-line {

    width: 1px;

    height: 65px;

    background:
        linear-gradient(
            to bottom,
            var(--gold-light),
            transparent
        );

    animation:
        scrollLine 1.8s
        ease-in-out
        infinite;

}

@keyframes scrollLine {

    0%,
    100% {
        transform: scaleY(0.65);
        transform-origin: top;
    }

    50% {
        transform: scaleY(1);
        transform-origin: top;
    }

}

@keyframes heroTextIn {

    from {

        opacity: 0;

        transform:
            translateY(25px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


/* =========================================================
   7. STORY
========================================================= */

.story-section {

    background: var(--cream-light);

}

.story-grid {

    display: grid;

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

    gap: 90px;

    align-items: center;

}

.story-image {

    position: relative;

    padding:
        0 25px 25px 0;

}

.image-frame {

    position: relative;

    overflow: hidden;

    border-radius:
        var(--radius-large);

    box-shadow:
        var(--shadow-heavy);

}

.image-frame::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.14),
            transparent 45%
        );

    pointer-events: none;

}

.story-image img {

    height: 570px;

    object-fit: cover;

    transition:
        transform 1s
        cubic-bezier(.22,1,.36,1);

}

.story-image:hover img {

    transform: scale(1.035);

}

.image-label {

    position: absolute;

    right: 0;
    bottom: 0;

    padding:
        17px 22px;

    background: var(--maroon);

    color: var(--white);

    font-size: 0.62rem;

    font-weight: 600;

    letter-spacing: 0.18em;

    box-shadow:
        0 12px 30px
        rgba(100,31,43,0.2);

}

.story-content {

    max-width: 520px;

}

.story-content h2 {

    margin-bottom: 28px;

    font-size: clamp(
        3.2rem,
        5vw,
        5rem
    );

    letter-spacing: -0.045em;

}

.story-content > p:not(.section-eyebrow) {

    margin-bottom: 17px;

    font-size: 0.91rem;

    line-height: 1.95;

}

.text-button {

    display: inline-flex;

    align-items: center;

    gap: 15px;

    margin-top: 18px;

    padding: 0;

    background: transparent;

    color: var(--maroon);

    cursor: pointer;

    font-size: 0.68rem;

    font-weight: 600;

    letter-spacing: 0.12em;

    text-transform: uppercase;

}

.text-button span {

    display: inline-block;

    transition:
        transform 0.35s ease;

}

.text-button:hover span {

    transform:
        translateX(7px);

}


/* =========================================================
   8. MENU
========================================================= */

.menu-section {

    position: relative;

    background: var(--cream);

}

.menu-section::before {

    content: "MENU";

    position: absolute;

    top: 40px;
    right: 4%;

    color:
        rgba(100,31,43,0.035);

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: 12rem;

    font-weight: 700;

    pointer-events: none;

}

.menu-grid {

    display: grid;

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

    gap: 25px;

}

.menu-card {

    position: relative;

    overflow: hidden;

    background: var(--cream-light);

    border:
        1px solid
        rgba(70,38,30,0.08);

    border-radius:
        var(--radius);

    box-shadow:
        0 8px 25px
        rgba(48,35,31,0.045);

    cursor: default;

    transition:
        transform 0.55s
        cubic-bezier(.22,1,.36,1),
        box-shadow 0.55s ease,
        border-color 0.55s ease;

}

.menu-card::before {

    content: "";

    position: absolute;

    z-index: 4;

    top: 0;
    left: -120%;

    width: 75%;
    height: 100%;

    background:
        linear-gradient(
            100deg,
            transparent,
            rgba(255,255,255,0.22),
            transparent
        );

    transform: skewX(-20deg);

    pointer-events: none;

    transition:
        left 0.8s ease;

}

.menu-card:hover::before {

    left: 145%;

}

.menu-card:hover {

    transform:
        translateY(-12px)
        rotateX(1deg)
        rotateY(-1deg);

    box-shadow:
        0 25px 55px
        rgba(48,35,31,0.15);

    border-color:
        rgba(100,31,43,0.18);

}

.menu-image {

    position: relative;

    height: 215px;

    overflow: hidden;

    background: var(--cream-dark);

}

.menu-image::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(25,12,12,0.25),
            transparent 45%
        );

    opacity: 0;

    transition:
        opacity 0.5s ease;

}

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

    opacity: 1;

}

.menu-image img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.9s
        cubic-bezier(.22,1,.36,1);

}

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

    transform:
        scale(1.06)
        rotate(0.6deg);

}

.menu-tag {

    position: absolute;

    top: 15px;
    left: 15px;

    z-index: 2;

    padding:
        7px 11px;

    border-radius: 999px;

    background:
        rgba(255,255,255,0.9);

    color: var(--maroon);

    font-size: 0.52rem;

    font-weight: 600;

    letter-spacing: 0.15em;

    backdrop-filter: blur(8px);

}

.card-arrow {

    position: absolute;

    right: 15px;
    bottom: 15px;

    z-index: 3;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;

    border-radius: 50%;

    background:
        rgba(255,255,255,0.9);

    color: var(--maroon);

    font-size: 0.9rem;

    opacity: 0;

    transform:
        translateY(8px)
        rotate(-15deg);

    transition:
        opacity 0.4s ease,
        transform 0.45s
        cubic-bezier(.22,1,.36,1);

}

.menu-card:hover .card-arrow {

    opacity: 1;

    transform:
        translateY(0)
        rotate(0);

}

.menu-card-content {

    padding:
        24px 24px 26px;

}

.menu-title-row {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 15px;

}

.menu-title-row h3 {

    font-size: 1.55rem;

    line-height: 1.1;

    color: var(--coffee);

}

.price {

    flex-shrink: 0;

    color: var(--maroon);

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: 1.3rem;

    font-weight: 700;

}

.menu-card-content > p {

    margin-top: 11px;

    font-size: 0.77rem;

    line-height: 1.75;

    color: var(--gray);

}

.menu-action {

    display: flex;

    justify-content: center;

    margin-top: 48px;

}


/* =========================================================
   9. FEATURE
========================================================= */

.feature-section {

    position: relative;

    min-height: 610px;

    display: flex;

    align-items: center;

    overflow: hidden;

    background: var(--maroon-deep);

}

.feature-image {

    position: absolute;

    inset: 0;

}

.feature-image img {

    width: 100%;
    height: 100%;

    object-fit: cover;

}

.feature-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(43,11,18,0.92),
            rgba(43,11,18,0.72) 48%,
            rgba(43,11,18,0.3)
        );

}

.feature-content {

    position: relative;

    z-index: 2;

    width: min(
        1180px,
        calc(100% - 48px)
    );

    margin: 0 auto;

    max-width: 650px;

}

.feature-content .section-eyebrow {

    color:
        rgba(255,255,255,0.7);

}

.feature-content h2 {

    color: var(--white);

    font-size: clamp(
        3.2rem,
        5vw,
        5rem
    );

    letter-spacing: -0.04em;

    margin-bottom: 25px;

}

.feature-content h2 em {

    color: var(--gold-light);

}

.feature-content > p:not(.section-eyebrow) {

    max-width: 500px;

    margin-bottom: 30px;

    color:
        rgba(255,255,255,0.7);

    font-size: 0.9rem;

    line-height: 1.9;

}


/* =========================================================
   10. GALLERY
========================================================= */

.gallery-section {

    background: var(--cream-light);

}

.gallery-grid {

    display: grid;

    grid-template-columns:
        1.35fr
        0.8fr
        0.8fr;

    grid-auto-rows: 245px;

    gap: 18px;

}

.gallery-item {

    position: relative;

    overflow: hidden;

    border-radius:
        var(--radius);

    background: var(--cream-dark);

}

.gallery-item.gallery-large {

    grid-row:
        span 2;

}

.gallery-item img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.9s
        cubic-bezier(.22,1,.36,1),
        filter 0.7s ease;

}

.gallery-item::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(27,12,13,0.62),
            transparent 50%
        );

    opacity: 0;

    transition:
        opacity 0.45s ease;

}

.gallery-item:hover img {

    transform:
        scale(1.07)
        rotate(0.7deg);

    filter:
        saturate(1.08);

}

.gallery-item:hover::after {

    opacity: 1;

}

.gallery-caption {

    position: absolute;

    z-index: 2;

    left: 22px;
    bottom: 18px;

    color: var(--white);

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: 1.35rem;

    transform:
        translateY(10px);

    opacity: 0;

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

}

.gallery-item:hover .gallery-caption {

    opacity: 1;

    transform:
        translateY(0);

}


/* =========================================================
   11. REVIEWS
========================================================= */

.reviews-section {

    background: var(--cream);

}

.reviews-grid {

    display: grid;

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

    gap: 22px;

}

.review-card {

    position: relative;

    padding:
        40px 32px;

    background: var(--cream-light);

    border:
        1px solid
        rgba(70,38,30,0.08);

    border-radius:
        var(--radius);

    box-shadow:
        0 10px 30px
        rgba(48,35,31,0.04);

    overflow: hidden;

    transition: var(--transition);

}

.review-card::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 3px;

    background:
        linear-gradient(
            90deg,
            var(--maroon),
            var(--gold)
        );

    transform:
        scaleX(0);

    transform-origin: left;

    transition:
        transform 0.5s ease;

}

.review-card:hover {

    transform:
        translateY(-9px);

    box-shadow:
        var(--shadow-card);

}

.review-card:hover::before {

    transform:
        scaleX(1);

}

.quote-mark {

    position: absolute;

    top: 8px;
    right: 25px;

    color:
        rgba(100,31,43,0.08);

    font-family:
        Georgia,
        serif;

    font-size: 6rem;

    line-height: 1;

}

.review-stars {

    margin-bottom: 20px;

    color: var(--gold);

    font-size: 0.8rem;

    letter-spacing: 0.16em;

}

.review-card > p {

    position: relative;

    z-index: 1;

    min-height: 115px;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    color: var(--coffee);

    font-size: 1.25rem;

    line-height: 1.55;

}

.review-person {

    display: flex;

    flex-direction: column;

    margin-top: 25px;

}

.review-person strong {

    color: var(--maroon);

    font-size: 0.7rem;

    letter-spacing: 0.08em;

    text-transform: uppercase;

}

.review-person span {

    margin-top: 3px;

    color: var(--gray-light);

    font-size: 0.66rem;

}


/* =========================================================
   12. RESERVATION
========================================================= */

.reservation-section {

    background: var(--cream-light);

}

.reservation-grid {

    display: grid;

    grid-template-columns:
        0.82fr
        1.18fr;

    gap: 75px;

    align-items: center;

}

.reservation-info h2 {

    margin-bottom: 25px;

    font-size: clamp(
        3.3rem,
        5vw,
        5rem
    );

    letter-spacing: -0.045em;

}

.reservation-info > p:not(.section-eyebrow) {

    max-width: 490px;

    margin-bottom: 35px;

    font-size: 0.9rem;

    line-height: 1.9;

}

.contact-details {

    display: flex;

    flex-direction: column;

    gap: 23px;

}

.contact-detail {

    display: flex;

    gap: 15px;

    align-items: flex-start;

}

.detail-icon {

    display: flex;

    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    flex-shrink: 0;

    border-radius: 50%;

    background:
        rgba(100,31,43,0.07);

    font-size: 0.95rem;

}

.contact-detail strong {

    display: block;

    margin-bottom: 3px;

    color: var(--coffee);

    font-size: 0.68rem;

    font-weight: 600;

    letter-spacing: 0.08em;

    text-transform: uppercase;

}

.contact-detail p {

    font-size: 0.76rem;

    line-height: 1.7;

}

.reservation-card {

    padding:
        48px;

    background:
        linear-gradient(
            145deg,
            var(--maroon),
            var(--maroon-dark)
        );

    border-radius:
        var(--radius-large);

    box-shadow:
        var(--shadow-heavy);

}

.reservation-heading {

    margin-bottom: 28px;

}

.reservation-heading .section-eyebrow {

    color:
        rgba(255,255,255,0.65);

}

.reservation-heading h3 {

    margin-bottom: 7px;

    color: var(--white);

    font-size: 2.45rem;

}

.reservation-heading p:last-child {

    color:
        rgba(255,255,255,0.62);

    font-size: 0.76rem;

}

.form-row {

    display: grid;

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

    gap: 15px;

}

.form-group {

    margin-bottom: 17px;

}

.form-group label {

    display: block;

    margin-bottom: 8px;

    color:
        rgba(255,255,255,0.78);

    font-size: 0.61rem;

    font-weight: 500;

    letter-spacing: 0.12em;

    text-transform: uppercase;

}

.form-group input,
.form-group select,
.form-group textarea {

    width: 100%;

    border:
        1px solid
        rgba(255,255,255,0.16);

    border-radius:
        10px;

    outline: none;

    background:
        rgba(255,255,255,0.08);

    color: var(--white);

    padding:
        13px 14px;

    font-size: 0.76rem;

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

}

.form-group input::placeholder,
.form-group textarea::placeholder {

    color:
        rgba(255,255,255,0.4);

}

.form-group select option {

    color: var(--coffee);

    background: var(--white);

}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {

    border-color:
        rgba(213,187,139,0.8);

    background:
        rgba(255,255,255,0.12);

    box-shadow:
        0 0 0 3px
        rgba(213,187,139,0.08);

}

.form-group textarea {

    resize: vertical;

    min-height: 100px;

}

.form-submit {

    width: 100%;

    margin-top: 5px;

    background: var(--white);

    color: var(--maroon);

}

.form-submit:hover {

    background: var(--gold-light);

    color: var(--maroon-dark);

}

.form-message {

    min-height: 20px;

    margin-top: 12px;

    color: var(--gold-light);

    font-size: 0.72rem;

}


/* =========================================================
   13. LOCATION
========================================================= */

.location-section {

    display: grid;

    grid-template-columns:
        1.25fr
        0.75fr;

    min-height: 500px;

    background: var(--maroon-deep);

}

.location-map {

    min-height: 500px;

}

.location-map iframe {

    width: 100%;
    height: 100%;

    min-height: 500px;

    display: block;

    border: 0;

    filter:
        grayscale(0.8)
        contrast(0.95);

}

.location-content {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    justify-content: center;

    padding:
        70px;

    background:
        linear-gradient(
            145deg,
            var(--maroon),
            var(--maroon-dark)
        );

}

.location-content .section-eyebrow {

    color:
        rgba(255,255,255,0.65);

}

.location-content h2 {

    margin-bottom: 28px;

    color: var(--white);

    font-size: clamp(
        3rem,
        4vw,
        4.3rem
    );

}

.location-content h2 em {

    color: var(--gold-light);

}

.location-content > p:not(.section-eyebrow) {

    margin-bottom: 13px;

    color:
        rgba(255,255,255,0.65);

    font-size: 0.8rem;

    line-height: 1.8;

}

.location-content .button {

    margin-top: 18px;

}


/* =========================================================
   14. CONTACT
========================================================= */

.contact-section {

    background: var(--cream-light);

}

.contact-main {

    max-width: 850px;

    margin: 0 auto;

    text-align: center;

}

.contact-main .section-eyebrow {

    justify-content: center;

}

.contact-main h2 {

    margin-bottom: 25px;

    font-size: clamp(
        3.5rem,
        6vw,
        5.7rem
    );

    letter-spacing: -0.05em;

}

.contact-main > p:not(.section-eyebrow) {

    max-width: 500px;

    margin:
        0 auto 32px;

    font-size: 0.9rem;

    line-height: 1.9;

}

.contact-actions {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 12px;

}

.contact-link {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding:
        13px 19px;

    border:
        1px solid
        rgba(70,38,30,0.1);

    border-radius: 999px;

    background: var(--white);

    color: var(--coffee);

    font-size: 0.7rem;

    transition: var(--transition);

}

.contact-link:hover {

    transform:
        translateY(-4px);

    border-color:
        rgba(100,31,43,0.22);

    color: var(--maroon);

    box-shadow:
        var(--shadow-soft);

}


/* =========================================================
   15. FOOTER
========================================================= */

.footer {

    background: var(--maroon-deep);

    color: var(--white);

}

.footer-container {

    width: min(
        1180px,
        calc(100% - 48px)
    );

    margin: 0 auto;

    padding:
        70px 0 55px;

    display: grid;

    grid-template-columns:
        1.7fr
        0.8fr
        0.9fr
        1fr;

    gap: 45px;

}

.footer-logo .logo-main {

    color: var(--white);

}

.footer-logo .logo-sub {

    color:
        rgba(255,255,255,0.48);

}

.footer-brand p {

    max-width: 280px;

    margin-top: 18px;

    color:
        rgba(255,255,255,0.52);

    font-size: 0.75rem;

    line-height: 1.8;

}

.footer-column {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 10px;

}

.footer-column h4 {

    margin-bottom: 8px;

    color: var(--gold-light);

    font-family:
        "Montserrat",
        Arial,
        sans-serif;

    font-size: 0.62rem;

    font-weight: 600;

    letter-spacing: 0.14em;

    text-transform: uppercase;

}

.footer-column a,
.footer-column span {

    color:
        rgba(255,255,255,0.56);

    font-size: 0.69rem;

    transition:
        color 0.3s ease;

}

.footer-column a:hover {

    color: var(--white);

}

.footer-bottom {

    width: min(
        1180px,
        calc(100% - 48px)
    );

    margin: 0 auto;

    padding:
        20px 0 25px;

    border-top:
        1px solid
        rgba(255,255,255,0.08);

    display: flex;

    justify-content: space-between;

    gap: 20px;

}

.footer-bottom p {

    color:
        rgba(255,255,255,0.35);

    font-size: 0.59rem;

}


/* =========================================================
   16. MODALS
========================================================= */

.modal {

    position: fixed;

    inset: 0;

    z-index: 2000;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 25px;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
        opacity 0.35s ease,
        visibility 0.35s ease;

}

.modal.active {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

}

.modal-backdrop {

    position: absolute;

    inset: 0;

    background:
        rgba(25,10,13,0.75);

    backdrop-filter:
        blur(8px);

}

.modal-content {

    position: relative;

    z-index: 2;

    width: min(
        1000px,
        100%
    );

    max-height:
        calc(100vh - 50px);

    overflow-y: auto;

    padding:
        50px;

    border-radius:
        var(--radius-large);

    background: var(--cream-light);

    box-shadow:
        0 35px 100px
        rgba(0,0,0,0.3);

    transform:
        translateY(30px)
        scale(0.97);

    transition:
        transform 0.45s
        cubic-bezier(.22,1,.36,1);

}

.modal.active .modal-content {

    transform:
        translateY(0)
        scale(1);

}

.modal-close {

    position: absolute;

    top: 18px;
    right: 20px;

    width: 42px;
    height: 42px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        rgba(100,31,43,0.07);

    color: var(--maroon);

    cursor: pointer;

    font-size: 1.6rem;

    line-height: 1;

    transition: var(--transition);

}

.modal-close:hover {

    background: var(--maroon);

    color: var(--white);

    transform:
        rotate(90deg);

}

.modal-header {

    text-align: center;

    margin-bottom: 40px;

}

.modal-header .section-eyebrow {

    justify-content: center;

}

.modal-header h2 {

    margin-bottom: 10px;

    font-size: 3.8rem;

}

.modal-header p:last-child {

    font-size: 0.8rem;

}

.full-menu-grid {

    display: grid;

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

    gap: 30px;

}

.full-menu-category {

    padding:
        25px;

    border:
        1px solid
        rgba(70,38,30,0.08);

    border-radius:
        var(--radius);

    background: var(--white);

}

.full-menu-category h3 {

    margin-bottom: 18px;

    color: var(--maroon);

    font-size: 1.45rem;

}

.full-menu-item {

    display: flex;

    justify-content: space-between;

    gap: 15px;

    padding:
        15px 0;

    border-top:
        1px solid
        rgba(70,38,30,0.07);

}

.full-menu-item div {

    display: flex;

    flex-direction: column;

}

.full-menu-item strong {

    color: var(--coffee);

    font-size: 0.74rem;

}

.full-menu-item span {

    margin-top: 3px;

    color: var(--gray);

    font-size: 0.65rem;

}

.full-menu-item b {

    flex-shrink: 0;

    color: var(--maroon);

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: 1.1rem;

}

.modal-footer {

    margin-top: 30px;

    padding-top: 20px;

    border-top:
        1px solid
        rgba(70,38,30,0.08);

    text-align: center;

    color: var(--gray);

    font-size: 0.65rem;

    letter-spacing: 0.08em;

}

.success-modal-content {

    position: relative;

    z-index: 2;

    width: min(
        470px,
        100%
    );

    padding:
        55px 45px;

    border-radius:
        var(--radius-large);

    background:
        var(--cream-light);

    text-align: center;

    box-shadow:
        0 35px 100px
        rgba(0,0,0,0.3);

    transform:
        translateY(30px)
        scale(0.96);

    transition:
        transform 0.45s
        cubic-bezier(.22,1,.36,1);

}

.modal.active .success-modal-content {

    transform:
        translateY(0)
        scale(1);

}

.success-icon {

    width: 65px;
    height: 65px;

    margin:
        0 auto 20px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: var(--maroon);

    color: var(--white);

    font-size: 1.7rem;

    box-shadow:
        0 12px 30px
        rgba(100,31,43,0.2);

    animation:
        successPulse 2s
        ease-in-out
        infinite;

}

@keyframes successPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.06);
    }

}

.success-modal-content .section-eyebrow {

    justify-content: center;

}

.success-modal-content h2 {

    margin-bottom: 15px;

    font-size: 3.3rem;

}

.success-modal-content > p:not(.section-eyebrow) {

    margin-bottom: 28px;

    font-size: 0.82rem;

    line-height: 1.8;

}


/* =========================================================
   17. SCROLL REVEAL
========================================================= */

.reveal {

    opacity: 0;

    transform:
        translateY(35px);

    transition:
        opacity 0.8s ease,
        transform 0.8s
        cubic-bezier(.22,1,.36,1);

}

.reveal.visible {

    opacity: 1;

    transform:
        translateY(0);

}


/* =========================================================
   18. STAGGERED CARD ANIMATION
========================================================= */

.menu-grid .menu-card:nth-child(1) {
    transition-delay: 0.02s;
}

.menu-grid .menu-card:nth-child(2) {
    transition-delay: 0.09s;
}

.menu-grid .menu-card:nth-child(3) {
    transition-delay: 0.16s;
}

.menu-grid .menu-card:nth-child(4) {
    transition-delay: 0.23s;
}

.menu-grid .menu-card:nth-child(5) {
    transition-delay: 0.30s;
}

.menu-grid .menu-card:nth-child(6) {
    transition-delay: 0.37s;
}

.reviews-grid .review-card:nth-child(1) {
    transition-delay: 0.05s;
}

.reviews-grid .review-card:nth-child(2) {
    transition-delay: 0.14s;
}

.reviews-grid .review-card:nth-child(3) {
    transition-delay: 0.23s;
}


/* =========================================================
   19. IMAGE LOADING POLISH
========================================================= */

img {

    opacity: 0;

    transition:
        opacity 0.55s ease;

}

img.image-loaded {

    opacity: 1;

}


/* =========================================================
   20. SCROLLBAR
========================================================= */

::-webkit-scrollbar {

    width: 8px;

}

::-webkit-scrollbar-track {

    background: var(--cream);

}

::-webkit-scrollbar-thumb {

    background:
        rgba(100,31,43,0.45);

    border-radius: 999px;

}

::-webkit-scrollbar-thumb:hover {

    background: var(--maroon);

}


/* =========================================================
   21. RESPONSIVE — TABLET
========================================================= */

@media (max-width: 1050px) {

    .nav-links {

        gap: 19px;

    }

    .nav-links a {

        font-size: 0.67rem;

    }

    .menu-grid {

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

    }

    .story-grid {

        gap: 50px;

    }

    .gallery-grid {

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

    }

    .gallery-item.gallery-large {

        grid-row:
            span 2;

    }

    .reviews-grid {

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

    }

    .reviews-grid .review-card:last-child {

        grid-column:
            1 / -1;

        max-width: 500px;

        width: 100%;

        margin: 0 auto;

    }

}


/* =========================================================
   22. RESPONSIVE — MOBILE NAV
========================================================= */

@media (max-width: 850px) {

    .nav-container {

        height: 76px;

    }

    .logo-main {

        font-size: 2.15rem;

    }

    .mobile-menu {

        display: flex;

    }

    .nav-links {

        position: absolute;

        top: 76px;
        left: 0;

        width: 100%;

        padding:
            25px;

        display: flex;

        flex-direction: column;

        align-items: stretch;

        gap: 0;

        background:
            rgba(252,250,246,0.98);

        backdrop-filter:
            blur(18px);

        border-bottom:
            1px solid
            rgba(70,38,30,0.08);

        box-shadow:
            0 20px 35px
            rgba(48,35,31,0.08);

        opacity: 0;

        visibility: hidden;

        transform:
            translateY(-10px);

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

    }

    .nav-links.active {

        opacity: 1;

        visibility: visible;

        transform:
            translateY(0);

    }

    .nav-links a {

        padding:
            13px 5px;

        border-bottom:
            1px solid
            rgba(70,38,30,0.06);

    }

    .nav-links a::after {

        display: none;

    }

    .nav-reserve {

        margin-top: 15px;

        width: 100%;

    }

    .mobile-menu.active span:nth-child(1) {

        transform:
            translateY(6.5px)
            rotate(45deg);

    }

    .mobile-menu.active span:nth-child(2) {

        opacity: 0;

    }

    .mobile-menu.active span:nth-child(3) {

        transform:
            translateY(-6.5px)
            rotate(-45deg);

    }

}


/* =========================================================
   23. RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 700px) {

    .section {

        padding:
            85px 0;

    }

    .section-container {

        width:
            calc(100% - 34px);

    }

    .hero-content {

        width:
            calc(100% - 34px);

        padding-top: 70px;

    }

    .hero-overlay {

        background:
            linear-gradient(
                90deg,
                rgba(34,13,17,0.86),
                rgba(34,13,17,0.48)
            );

    }

    .hero h1 {

        font-size:
            clamp(3.3rem, 15vw, 5rem);

    }

    .hero-description {

        font-size: 0.82rem;

    }

    .hero-buttons {

        flex-direction: column;

        align-items: stretch;

        max-width: 290px;

    }

    .button {

        min-height: 49px;

    }

    .hero-rating {

        flex-wrap: wrap;

        gap: 8px;

    }

    .hero-scroll {

        display: none;

    }

    .story-grid {

        grid-template-columns: 1fr;

        gap: 50px;

    }

    .story-image {

        padding:
            0 13px 13px 0;

    }

    .story-image img {

        height: 430px;

    }

    .story-content {

        max-width: none;

    }

    .story-content h2 {

        font-size: 3.5rem;

    }

    .menu-grid {

        grid-template-columns: 1fr;

        gap: 18px;

    }

    .menu-image {

        height: 225px;

    }

    .menu-section::before {

        display: none;

    }

    .feature-section {

        min-height: 580px;

    }

    .feature-content {

        width:
            calc(100% - 34px);

    }

    .feature-overlay {

        background:
            linear-gradient(
                90deg,
                rgba(43,11,18,0.9),
                rgba(43,11,18,0.55)
            );

    }

    .gallery-grid {

        grid-template-columns: 1fr 1fr;

        grid-auto-rows: 200px;

    }

    .gallery-item.gallery-large {

        grid-column:
            1 / -1;

        grid-row:
            span 1;

    }

    .gallery-item.gallery-large {

        height: 270px;

    }

    .gallery-caption {

        opacity: 1;

        transform: translateY(0);

        font-size: 1.05rem;

    }

    .gallery-item::after {

        opacity: 1;

    }

    .reviews-grid {

        grid-template-columns: 1fr;

    }

    .reviews-grid .review-card:last-child {

        grid-column: auto;

        max-width: none;

    }

    .reservation-grid {

        grid-template-columns: 1fr;

        gap: 50px;

    }

    .reservation-card {

        padding:
            30px 22px;

        border-radius:
            22px;

    }

    .form-row {

        grid-template-columns: 1fr;

        gap: 0;

    }

    .location-section {

        grid-template-columns: 1fr;

    }

    .location-map,
    .location-map iframe {

        min-height: 350px;

    }

    .location-content {

        padding:
            65px 25px;

    }

    .contact-main h2 {

        font-size: 3.7rem;

    }

    .contact-actions {

        flex-direction: column;

        align-items: stretch;

    }

    .contact-link {

        justify-content: center;

    }

    .footer-container {

        grid-template-columns:
            1fr 1fr;

        gap: 40px 25px;

    }

    .footer-brand {

        grid-column:
            1 / -1;

    }

    .footer-bottom {

        flex-direction: column;

        align-items: center;

        text-align: center;

    }

    .modal {

        padding:
            12px;

    }

    .modal-content {

        padding:
            40px 20px;

        max-height:
            calc(100vh - 24px);

        border-radius:
            20px;

    }

    .modal-header h2 {

        font-size: 3rem;

    }

    .full-menu-grid {

        grid-template-columns: 1fr;

        gap: 15px;

    }

    .success-modal-content {

        padding:
            45px 25px;

    }

    .success-modal-content h2 {

        font-size: 2.8rem;

    }

}


/* =========================================================
   24. VERY SMALL PHONES
========================================================= */

@media (max-width: 420px) {

    .nav-container {

        width:
            calc(100% - 30px);

    }

    .logo-main {

        font-size: 1.95rem;

    }

    .logo-sub {

        font-size: 0.45rem;

    }

    .hero h1 {

        font-size: 3.15rem;

    }

    .section-heading h2 {

        font-size: 2.9rem;

    }

    .story-content h2,
    .reservation-info h2 {

        font-size: 3rem;

    }

    .feature-content h2 {

        font-size: 3rem;

    }

    .menu-image {

        height: 205px;

    }

    .menu-card-content {

        padding:
            21px;

    }

    .menu-title-row h3 {

        font-size: 1.4rem;

    }

    .gallery-grid {

        grid-auto-rows: 175px;

    }

}


/* =========================================================
   25. REDUCED MOTION ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;

        scroll-behavior:
            auto !important;

    }

}