:root {
    --gold: #b38b59;
    --gold-dark: #8c6a42;
    --gold-text: #6b4c20; /* Added for WCAG text contrast compliance */
    --dark: #121212;
    --white: #ffffff;
    --cream: #f8f6f3;
    --transition-smooth: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    --header-height: 80px;
}

/* Base Reset */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { 
    background: var(--cream); 
    color: var(--dark); 
    font-family: 'Montserrat', sans-serif; 
    line-height: 1.8; 
    padding-top: var(--header-height);
    overflow-x: hidden;
}

.container { width: 92%; max-width: 1200px; margin: auto; }
.skip-link { position: absolute; top: -100px; left: 0; background: var(--gold); color: white; padding: 10px; z-index: 3000; }
.skip-link:focus { top: 0; }

/* Utilities */
.section { padding: 120px 0; }
.section--white { background: var(--white); }
.center { text-align: center; }
.hidden { display: none !important; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 80px; align-items: center; }

/* Header */
.header {
    position: fixed; top: 0; width: 100%; height: var(--header-height);
    background: rgba(255, 255, 255, 0.97); backdrop-filter: blur(15px);
    z-index: 2000; border-bottom: 1px solid rgba(0,0,0,0.04);
}
.header__wrapper { display: flex; justify-content: space-between; align-items: center; height: 100%; }

.logo { font-family: 'Playfair Display', serif; font-size: 26px; font-weight: 700; text-decoration: none; color: var(--dark); letter-spacing: 1px; }
.logo span { color: var(--gold); }

.nav__list { display: flex; list-style: none; gap: 35px; }
.nav__link { 
    text-decoration: none; color: var(--dark); font-size: 11px; font-weight: 700; 
    text-transform: uppercase; letter-spacing: 2px; transition: 0.3s;
    position: relative;
}
.nav__link:hover { color: var(--gold); }

/* BUTTON REFINEMENT */
.btn { 
    display: inline-block; padding: 18px 45px; border: 1px solid transparent; cursor: pointer; 
    font-weight: 700; text-transform: uppercase; letter-spacing: 2px; transition: var(--transition-smooth);
    text-decoration: none; font-size: 11px; position: relative;
    will-change: transform, background-color;
}

.btn--primary { background: var(--dark); color: white; border-color: var(--dark); }

.btn--primary:hover { 
    background: var(--gold); 
    border-color: var(--gold);
    transform: translateY(-4px); 
    box-shadow: 0 12px 24px rgba(179, 139, 89, 0.25);
}

.btn--link { padding: 0; background: none; color: var(--gold-dark); font-size: 14px; text-transform: none; border: none; }
.btn--link .arrow { transition: transform 0.3s ease; display: inline-block; }
.btn--link:hover .arrow { transform: translateX(6px); }

/* Hero */
.hero {
    position: relative;
    height: calc(100vh - var(--header-height));
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--white);
    overflow: hidden;
    background: linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45));
}

/* hero image element (fills the area, behind content) */
.hero__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}
.hero__tagline { display: block; letter-spacing: 6px; font-size: 10px; font-weight: 700; margin-bottom: 20px; text-shadow: 0 2px 4px rgba(0,0,0,0.3); }
.hero__title { font-family: 'Playfair Display', serif; font-size: clamp(45px, 8vw, 85px); line-height: 1.1; margin-bottom: 15px; }
.hero__title em { color: var(--gold); font-style: italic; font-weight: 400; }

/* About & Sections */
.about__img-wrapper { position: relative; }
.about__img {
    width: 100%;
    height: auto;
    /* This matches the 600x750 attributes exactly */
    aspect-ratio: 600 / 750; 
    object-fit: cover;
    display: block;
    border-radius: 4px; /* Optional: matches luxury aesthetic */
}
.about__image-container {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}
.about__badge {
    position: absolute; top: -15px; right: -15px; background: var(--dark); color: white;
    padding: 25px 15px; font-weight: 700; font-size: 10px; writing-mode: vertical-rl;
    box-shadow: 8px 8px 0 var(--gold);
}
.section__accent { display: block; font-size: 14px; letter-spacing: 4px; color: var(--gold-text); margin-bottom: 20px; font-weight: 600; text-transform: uppercase; }
.section__title { font-family: 'Playfair Display', serif; font-size: clamp(35px, 5vw, 55px); margin: 15px 0 25px; line-height: 1.2; }
.section__title.white { color: white; }

/* Menu Grid */
.menu-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 50px; }
.menu-item__img-box { height: 300px; overflow: hidden; margin-bottom: 25px; background: #eee; }
.menu-item__img-box img { width: 100%; height: 100%; object-fit: cover; transition: 1.5s cubic-bezier(0.16, 1, 0.3, 1); }
.menu-item:hover img { transform: scale(1.1); }
.menu-item h3 { font-family: 'Playfair Display', serif; font-size: 24px; }
.price { color: var(--gold-text); font-size: 20px; font-weight: 600; }

/* Contact Form */
.contact { background: var(--dark); color: white; text-align: center; }
.contact__box { max-width: 600px; margin: 0 auto; }
.reserve-form { margin-top: 50px; display: flex; flex-direction: column; gap: 20px; }
.reserve-form input { 
    padding: 22px; background: transparent; border: 1px solid rgba(255,255,255,0.1); 
    color: white; outline: none; transition: 0.3s; font-size: 14px;
}
.reserve-form input:focus { border-color: var(--gold); background: rgba(255,255,255,0.03); }

/* Footer */
.footer { padding: 80px 0; text-align: center; background: var(--white); }
.footer p { font-size: 10px; letter-spacing: 2px; margin-top: 20px; color: rgba(0,0,0,0.65); text-transform: uppercase; }

/* Animations */
.reveal { opacity: 0; transform: translateY(30px); transition: var(--transition-smooth); will-change: transform, opacity; }
.active { opacity: 1; transform: translateY(0); }

/* MOBILE REFINEMENT */
@media (max-width: 768px) {
    .menu-toggle { display: flex; flex-direction: column; gap: 6px; background: none; border: none; cursor: pointer; padding: 5px; }
    .menu-toggle__bar { width: 26px; height: 2px; background: var(--dark); transition: 0.4s; transform-origin: center; }
    
    .nav {
        position: fixed; top: 0; right: -100%; width: 100%; height: 100vh;
        background: var(--white); display: flex; align-items: center; justify-content: center;
        transition: 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .nav--open { right: 0; }
    .nav__list { flex-direction: column; text-align: center; gap: 35px; }
    .nav__link { font-size: 22px; letter-spacing: 4px; }

    /* Cross animation for toggle */
    .menu-toggle.active .menu-toggle__bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .menu-toggle.active .menu-toggle__bar:nth-child(2) { opacity: 0; }
    .menu-toggle.active .menu-toggle__bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
}

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

/* Force Hero Visibility Immediately */
.hero {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
}

/* Performance Overrides */
#home.hero {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

#home .hero__content {
    opacity: 1 !important;
    transform: none !important;
}