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

:root {
    --plum: #6B4C6E;
    --plum-deep: #4A3450;
    --plum-light: #8B6A8E;
    --plum-pale: #F5F0F4;
    --amber: #C8952E;
    --amber-light: #E8C06A;
    --amber-pale: #FDF8EE;
    --cream: #FDFCFA;
    --warm-white: #FAF8F5;
    --text-primary: #2A1F2E;
    --text-secondary: #6B5E70;
    --text-muted: #9B8FA0;
    --line: rgba(107, 76, 110, 0.12);
    --line-strong: rgba(107, 76, 110, 0.25);
    
    --font-display: 'Cormorant Garamond', Georgia, serif;
    --font-body: 'Montserrat', 'Helvetica Neue', sans-serif;
    
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 2rem;
    --space-lg: 4rem;
    --space-xl: 6rem;
    --space-2xl: 8rem;
    
    --transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--font-body);
    font-weight: 300;
    color: var(--text-primary);
    background-color: var(--cream);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-md);
}

/* ─── NAVIGATION ─── */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(253, 252, 250, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--line);
    transition: var(--transition);
}

.nav.scrolled {
    background: rgba(253, 252, 250, 0.97);
    box-shadow: 0 1px 20px rgba(107, 76, 110, 0.06);
}

.nav-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-md);
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    color: var(--text-primary);
}

.nav-logo-mark {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 400;
    color: var(--plum);
    line-height: 1;
}

.nav-logo-text {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 400;
    letter-spacing: 0.02em;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 2.5rem;
}

.nav-link {
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-secondary);
    text-decoration: none;
    position: relative;
    transition: color var(--transition);
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--amber);
    transition: width var(--transition);
}

.nav-link:hover {
    color: var(--plum);
}

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

.nav-cta {
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--plum);
    text-decoration: none;
    border: 1px solid var(--plum);
    padding: 0.6rem 1.5rem;
    transition: all var(--transition);
}

.nav-cta:hover {
    background: var(--plum);
    color: white;
}

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
}

.nav-toggle-line {
    width: 22px;
    height: 1px;
    background: var(--text-primary);
    transition: all 0.3s ease;
}

/* ─── HERO ─── */
.hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 72px;
    background: var(--cream);
    position: relative;
    overflow: hidden;
}

.hero-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-xl) var(--space-md);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
    align-items: center;
    flex: 1;
}

.hero-eyebrow {
    font-size: 0.7rem;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--amber);
    margin-bottom: var(--space-md);
}

.hero-headline {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 4.5vw, 3.75rem);
    font-weight: 300;
    line-height: 1.15;
    color: var(--text-primary);
    margin-bottom: var(--space-md);
    max-width: 540px;
}

.hero-headline em {
    font-style: italic;
    color: var(--plum);
}

.hero-sub {
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.8;
    color: var(--text-secondary);
    margin-bottom: var(--space-lg);
    max-width: 440px;
}

.hero-actions {
    display: flex;
    gap: 1rem;
    margin-bottom: var(--space-lg);
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 1rem 2rem;
    transition: all var(--transition);
    cursor: pointer;
    border: none;
    background: none;
}

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

.btn-primary:hover {
    background: var(--plum-deep);
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(107, 76, 110, 0.25);
}

.btn-ghost {
    color: var(--plum);
    border: 1px solid var(--line-strong);
}

.btn-ghost:hover {
    border-color: var(--plum);
    background: var(--plum-pale);
}

.hero-details {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.hero-detail {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.hero-detail a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color var(--transition);
}

.hero-detail a:hover {
    color: var(--plum);
}

.hero-icon {
    width: 16px;
    height: 16px;
    color: var(--amber);
    flex-shrink: 0;
}

.hero-right {
    position: relative;
}

.hero-image-wrapper {
    position: relative;
    overflow: hidden;
}

.hero-image-wrapper img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 3/4;
    object-fit: cover;
    filter: saturate(0.9) contrast(1.02);
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.hero-image-wrapper:hover img {
    transform: scale(1.03);
}

.hero-accent {
    position: absolute;
    bottom: -20px;
    left: -20px;
    width: 120px;
    height: 120px;
    border: 1px solid var(--amber);
    opacity: 0.4;
    pointer-events: none;
}

.hero-scroll {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-muted);
    font-size: 0.65rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.scroll-line {
    width: 1px;
    height: 40px;
    background: linear-gradient(to bottom, var(--plum-light), transparent);
    animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {
    0%, 100% { opacity: 0.3; transform: scaleY(0.7); }
    50% { opacity: 1; transform: scaleY(1); }
}

/* ─── SECTION COMMON ─── */
.section-eyebrow {
    font-size: 0.7rem;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--amber);
    margin-bottom: var(--space-sm);
}

.section-title {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3.5vw, 2.75rem);
    font-weight: 300;
    line-height: 1.2;
    color: var(--text-primary);
    margin-bottom: var(--space-md);
}

.section-body {
    font-size: 0.95rem;
    font-weight: 300;
    line-height: 1.85;
    color: var(--text-secondary);
    margin-bottom: var(--space-sm);
}

/* ─── HERITAGE ─── */
.hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 72px;
    background: var(--cream);
    position: relative;
    overflow: hidden;
}

.hero-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-xl) var(--space-md);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
    align-items: center;
    flex: 1;
}

.hero-eyebrow {
    font-size: 0.7rem;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--amber);
    margin-bottom: var(--space-md);
}

.hero-headline {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 4.5vw, 3.75rem);
    font-weight: 300;
    line-height: 1.15;
    color: var(--text-primary);
    margin-bottom: var(--space-md);
    max-width: 540px;
}

.hero-headline em {
    font-style: italic;
    color: var(--plum);
}

.hero-sub {
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.8;
    color: var(--text-secondary);
    margin-bottom: var(--space-lg);
    max-width: 440px;
}

.hero-actions {
    display: flex;
    gap: 1rem;
    margin-bottom: var(--space-lg);
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 1rem 2rem;
    transition: all var(--transition);
    cursor: pointer;
    border: none;
    background: none;
}

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

.btn-primary:hover {
    background: var(--plum-deep);
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(107, 76, 110, 0.25);
}

.btn-ghost {
    color: var(--plum);
    border: 1px solid var(--line-strong);
}

.btn-ghost:hover {
    border-color: var(--plum);
    background: var(--plum-pale);
}

.hero-details {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.hero-detail {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.hero-detail a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color var(--transition);
}

.hero-detail a:hover {
    color: var(--plum);
}

.hero-icon {
    width: 16px;
    height: 16px;
    color: var(--amber);
    flex-shrink: 0;
}

.hero-right {
    position: relative;
}

.hero-image-wrapper {
    position: relative;
    overflow: hidden;
}

.hero-image-wrapper img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 3/4;
    object-fit: cover;
    filter: saturate(0.9) contrast(1.02);
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.hero-image-wrapper:hover img {
    transform: scale(1.03);
}

.hero-accent {
    position: absolute;
    bottom: -20px;
    left: -20px;
    width: 120px;
    height: 120px;
    border: 1px solid var(--amber);
    opacity: 0.4;
    pointer-events: none;
}

.hero-scroll {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-muted);
    font-size: 0.65rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.scroll-line {
    width: 1px;
    height: 40px;
    background: linear-gradient(to bottom, var(--plum-light), transparent);
    animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {
    0%, 100% { opacity: 0.3; transform: scaleY(0.7); }
    50% { opacity: 1; transform: scaleY(1); }
}

/* ─── SECTION COMMON ─── */
.section-eyebrow {
    font-size: 0.7rem;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--amber);
    margin-bottom: var(--space-sm);
}

.section-title {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3.5vw, 2.75rem);
    font-weight: 300;
    line-height: 1.2;
    color: var(--text-primary);
    margin-bottom: var(--space-md);
}

.section-body {
    font-size: 0.95rem;
    font-weight: 300;
    line-height: 1.85;
    color: var(--text-secondary);
    margin-bottom: var(--space-sm);
}

/* ─── HERITAGE ─── */
.heritage {
    padding: var(--space-2xl) 0;
    background: var(--cream);
}

.heritage-grid {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: var(--space-xl);
    align-items: start;
}

.heritage-left {
    position: sticky;
    top: 120px;
}

.heritage-right {
    padding-top: var(--space-sm);
}

.heritage-divider {
    width: 60px;
    height: 1px;
    background: var(--amber);
    margin: var(--space-md) 0;
}

.heritage-stats {
    display: flex;
    gap: var(--space-lg);
    margin-top: var(--space-md);
}

.heritage-stat {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.stat-number {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--plum);
    line-height: 1;
}

.stat-label {
    font-size: 0.7rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* ─── MENU ─── */
.menu {
    padding: var(--space-2xl) 0;
    background: var(--warm-white);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.menu-header {
    text-align: center;
    max-width: 600px;
    margin: 0 auto var(--space-xl);
}

.menu-subtitle {
    font-size: 0.95rem;
    font-weight: 300;
    line-height: 1.8;
    color: var(--text-secondary);
}

.menu-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
}

.menu-category {
    padding: var(--space-lg);
    background: var(--cream);
    border: 1px solid var(--line);
    transition: all var(--transition);
}

.menu-category:hover {
    border-color: var(--line-strong);
    box-shadow: 0 8px 40px rgba(107, 76, 110, 0.06);
    transform: translateY(-4px);
}

.menu-category-icon {
    width: 40px;
    height: 40px;
    margin-bottom: var(--space-md);
    color: var(--amber);
}

.menu-category-icon svg {
    width: 100%;
    height: 100%;
}

.menu-category-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.menu-category-desc {
    font-size: 0.85rem;
    font-weight: 300;
    color: var(--text-muted);
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--line);
}

.menu-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.menu-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
}

.menu-item-name {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 400;
    color: var(--text-primary);
}

.menu-item-desc {
    font-size: 0.78rem;
    font-weight: 300;
    color: var(--text-muted);
    text-align: right;
    max-width: 200px;
}

.menu-note {
    text-align: center;
    font-size: 0.8rem;
    font-weight: 300;
    color: var(--text-muted);
    margin-top: var(--space-lg);
    font-style: italic;
}

/* ─── GALLERY ─── */
.gallery {
    padding: var(--space-2xl) 0;
    background: var(--cream);
}

.gallery-header {
    text-align: center;
    margin-bottom: var(--space-xl);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto;
    gap: 1rem;
}

.gallery-item {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

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

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    aspect-ratio: 3/2;
    filter: saturate(0.85);
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.6s ease;
}

.gallery-item:not(.gallery-item--large) img {
    aspect-ratio: 1;
}

.gallery-item:hover img {
    transform: scale(1.05);
    filter: saturate(1);
}

.gallery-item-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--space-md);
    background: linear-gradient(to top, rgba(42, 31, 46, 0.6), transparent);
    color: white;
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 400;
    font-style: italic;
    opacity: 0;
    transform: translateY(10px);
    transition: all var(--transition);
}

.gallery-item:hover .gallery-item-overlay {
    opacity: 1;
    transform: translateY(0);
}

/* ─── VISIT ─── */
.visit {
    padding: var(--space-2xl) 0;
    background: var(--plum-pale);
}

.visit-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
    align-items: start;
}

.visit-details {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin-top: var(--space-lg);
}

.visit-detail {
    display: flex;
    gap: var(--space-sm);
    align-items: flex-start;
}

.visit-icon {
    width: 20px;
    height: 20px;
    color: var(--amber);
    flex-shrink: 0;
    margin-top: 0.2rem;
}

.visit-detail-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
}

.visit-detail-value {
    font-size: 0.95rem;
    font-weight: 300;
    color: var(--text-primary);
    line-height: 1.6;
}

.visit-detail-value a {
    color: var(--text-primary);
    text-decoration: none;
    transition: color var(--transition);
}

.visit-detail-value a:hover {
    color: var(--plum);
}

.visit-map {
    height: 450px;
    border: 1px solid var(--line);
    overflow: hidden;
    filter: saturate(0.6) contrast(1.05);
    transition: filter var(--transition);
}

.visit-map:hover {
    filter: saturate(0.9) contrast(1.05);
}

/* ─── FOOTER ─── */
.footer {
    padding: var(--space-xl) 0 var(--space-md);
    background: var(--text-primary);
    color: rgba(255, 255, 255, 0.6);
}

.footer-inner {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--space-lg);
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-brand {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.footer-brand .nav-logo-mark {
    color: var(--amber-light);
    font-size: 2rem;
}

.footer-brand .nav-logo-text {
    color: white;
    font-size: 1.5rem;
}

.footer-tagline {
    font-size: 0.8rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 0.05em;
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.footer-links a {
    font-size: 0.8rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    transition: color var(--transition);
}

.footer-links a:hover {
    color: var(--amber-light);
}

.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 300;
}

.footer-contact a {
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    transition: color var(--transition);
}

.footer-contact a:hover {
    color: var(--amber-light);
}

.footer-bottom {
    padding-top: var(--space-md);
    text-align: center;
}

.footer-bottom p {
    font-size: 0.75rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.3);
}

/* ─── ANIMATIONS ─── */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ─── RESPONSIVE ─── */
@media (max-width: 1024px) {
    .hero-inner {
        grid-template-columns: 1fr;
        text-align: center;
        gap: var(--space-lg);
    }

    .hero-headline {
        max-width: 100%;
    }

    .hero-sub {
        max-width: 100%;
    }

    .hero-actions {
        justify-content: center;
    }

    .hero-details {
        align-items: center;
    }

    .hero-right {
        max-width: 500px;
        margin: 0 auto;
    }

    .heritage-grid {
        grid-template-columns: 1fr;
    }

    .heritage-left {
        position: static;
        text-align: center;
    }

    .heritage-divider {
        margin: var(--space-md) 0;
    }

    .heritage-stats {
        justify-content: center;
    }

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

    .visit-grid {
        grid-template-columns: 1fr;
    }

    .visit-map {
        height: 350px;
    }
}

@media (max-width: 768px) {
    .nav-links {
        position: fixed;
        top: 72px;
        left: 0;
        right: 0;
        background: rgba(253, 252, 250, 0.98);
        backdrop-filter: blur(20px);
        flex-direction: column;
        padding: var(--space-lg);
        gap: 1.5rem;
        border-bottom: 1px solid var(--line);
        transform: translateY(-120%);
        transition: transform var(--transition);
    }

    .nav-links.open {
        transform: translateY(0);
    }

    .nav-toggle {
        display: flex;
    }

    .nav-toggle.active .nav-toggle-line:first-child {
        transform: rotate(45deg) translate(4px, 4px);
    }

    .nav-toggle.active .nav-toggle-line:last-child {
        transform: rotate(-45deg) translate(4px, -4px);
    }

    .hero {
        min-height: auto;
        padding-top: 100px;
        padding-bottom: var(--space-lg);
    }

    .hero-scroll {
        display: none;
    }

    .hero-actions {
        flex-direction: column;
        align-items: center;
    }

    .btn {
        width: 100%;
        justify-content: center;
        max-width: 280px;
    }

    .gallery-grid {
        grid-template-columns: 1fr;
    }

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

    .footer-inner {
        grid-template-columns: 1fr;
        text-align: center;
        gap: var(--space-md);
    }

    .menu-category {
        padding: var(--space-md);
    }

    .menu-item {
        flex-direction: column;
        gap: 0.25rem;
    }

    .menu-item-desc {
        text-align: left;
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    :root {
        --space-md: 1.25rem;
        --space-lg: 2.5rem;
        --space-xl: 4rem;
        --space-2xl: 5rem;
    }

    .heritage-stats {
        flex-direction: column;
        gap: var(--space-sm);
        align-items: center;
    }
}
</style>
</head>
<body>
    <nav class="nav" id="nav">
        <div class="nav-inner">
            <a href="#hero" class="nav-logo">
                <span class="nav-logo-mark">O</span>
                <span class="nav-logo-text">Odalys</span>
            </a>
            <button class="nav-toggle" id="navToggle" aria-label="Toggle menu">
                <span class="nav-toggle-line"></span>
                <span class="nav-toggle-line"></span>
            </button>
            <div class="nav-links" id="navLinks">
                <a href="#heritage" class="nav-link">Our Story</a>
                <a href="#menu" class="nav-link">Menu</a>
                <a href="#gallery" class="nav-link">Gallery</a>
                <a href="#visit" class="nav-link">Visit</a>
                <a href="#visit" class="nav-cta">Visit Us</a>
            </div>
        </div>
    </nav>

    <section class="hero" id="hero">
        <div class="hero-inner">
            <div class="hero-left">
                <p class="hero-eyebrow">Greensboro's Artisan Bakery</p>
                <h1 class="hero-headline">
                    Every loaf carries the warmth of tradition, every pastry tells a story of devotion.
                </h1>
                <p class="hero-sub">
                    At Odalys Panadería y Pastelería, we knead flour with memory and bake with heart — crafting the flavors that bring families together, one generation at a time.
                </p>
                <div class="hero-actions">
                    <a href="#menu" class="btn btn-primary">Explore Our Menu</a>
                    <a href="#heritage" class="btn btn-ghost">Our Story</a>
                </div>
                <div class="hero-details">
                    <div class="hero-detail">
                        <svg class="hero-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                            <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
                            <circle cx="12" cy="10" r="3"/>
                        </svg>
                        <span>3735 Farmington Dr, Greensboro</span>
                    </div>
                    <div class="hero-detail">
                        <svg class="hero-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                            <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 12 19.79 19.79 0 0 1 1.62 3.42 2 2 0 0 1 3.61 1.22h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L7.91 8.89a16 16 0 0 0 6.18 6.18l1.03-1.03a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>
                        </svg>
                        <a href="tel:+13363559544">(336) 355-9544</a>
                    </div>
                </div>
            </div>
            <div class="hero-right">
                <div class="hero-image-wrapper">
                    <img src="https://images.pexels.com/photos/2293369/pexels-photo-2293369.jpeg?auto=compress&cs=tinysrgb&fit=crop&w=600&h=800" alt="Artisan bread and pastries displayed on a rustic bakery counter" width="600" height="800" loading="eager">
                </div>
                <div class="hero-accent"></div>
            </div>
        </div>
        <div class="hero-scroll">
            <span>Scroll</span>
            <div class="scroll-line"></div>
        </div>
    </section>

    <section class="heritage" id="heritage">
        <div class="container">
            <div class="heritage-grid">
                <div class="heritage-left">
                    <p class="section-eyebrow">Our Heritage</p>
                    <h2 class="section-title">A Family Legacy,<br>Baked Fresh Daily</h2>
                </div>
                <div class="heritage-right">
                    <p class="section-body">
                        Odalys Panadería y Pastelería was born from a simple conviction: that the best bread begins with patience, the finest pastries with love, and every recipe with a story worth preserving.
                    </p>
                    <p class="section-body">
                        For years, our family has carried forward the baking traditions of our ancestors — recipes passed down through generations, techniques refined over decades, and a deep respect for the ingredients that make each creation unique.
                    </p>
                    <p class="section-body">
                        Today, every morning at our Greensboro bakery, the ovens fire at dawn. Our artisans shape each loaf by hand, glaze each pastry with care, and bake with the same devotion that started it all. This is not just a bakery — it is a place where community rises, one batch at a time.
                    </p>
                    <div class="heritage-divider"></div>
                    <div class="heritage-stats">
                        <div class="heritage-stat">
                            <span class="stat-number">Artisan</span>
                            <span class="stat-label">Handcrafted Daily</span>
                        </div>
                        <div class="heritage-stat">
                            <span class="stat-number">Family</span>
                            <span class="stat-label">Owned & Operated</span>
                        </div>
                        <div class="heritage-stat">
                            <span class="stat-number">Traditional</span>
                            <span class="stat-label">Recipes & Techniques</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="menu" id="menu">
        <div class="container">
            <div class="menu-header">
                <p class="section-eyebrow">Our Menu</p>
                <h2 class="section-title">From Our Oven to Your Table</h2>
                <p class="section-subtitle">Every item is crafted fresh each morning using time-honored techniques and the finest ingredients.</p>
            </div>
            <div class="menu-grid">
                <div class="menu-category">
                    <div class="menu-category-icon">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2">
                            <ellipse cx="12" cy="12" rx="9" ry="6"/>
                            <path d="M3 12h18"/>
                            <path d="M12 6v12"/>
                        </svg>
                    </div>
                    <h3 class="menu-category-title">Pan Dulce</h3>
                    <p class="menu-category-desc">Traditional Mexican sweet breads, baked golden every morning.</p>
                    <ul class="menu-list">
                        <li>
                            <span class="menu-item-name">Conchas</span>
                            <span class="menu-item-desc">Classic shell-shaped sweet rolls, sugar-crusted</span>
                        </li>
                        <li>
                            <span class="menu-item-name">Cuernos</span>
                            <span class="menu-item-desc">Flaky croissant-style pastries</span>
                        </li>
                        <li>
                            <span class="menu-item-name">Maintanos</span>
                            <span class="menu-item-desc">Cinnamon-dusted twisted bread</span>
                        </li>
                        <li>
                            <span class="menu-item-name">Besos</span>
                            <span class="menu-item-desc">Chocolate-topped sweet rolls</span>
                        </li>
                        <li>
                            <span class="menu-item-name">Cuadradas</span>
                            <span class="menu-item-desc">Square-shaped sweet bread with sugar glaze</span>
                        </li>
                    </ul>
                </div>
                <div class="menu-category">
                    <div class="menu-category-icon">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2">
                            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z"/>
                            <path d="M8 12c0-2.21 1.79-4 4-4s4 1.79 4 4-1.79 4-4 4-4-1.79-4-4z"/>
                        </svg>
                    </div>
                    <h3 class="menu-category-title">Pan de Mesa</h3>
                    <p class="menu-category-desc">Everyday breads made with care, from crust to crumb.</p>
                    <ul class="menu-list">
                        <li>
                            <span class="menu-item-name">Bolillo</span>
                            <span class="menu-item-desc">Crispy crust, soft interior — the staple</span>
                        </li>
                        <li>
                            <span class="menu-item-name">Telera</span>
                            <span class="menu-item-desc">Soft, round rolls perfect for tortas</span>
                        </li>
                        <li>
                            <span class="menu-item-name">Cable</span>
                            <span class="menu-item-desc">Long, rope-style bread with a chewy crust</span>
                        </li>
                        <li>
                            <span class="menu-item-name">Bolillo Integral</span>
                            <span class="menu-item-desc">Whole wheat version of the classic</span>
                        </li>
                        <li>
                            <span class="menu-item-name">Espanola</span>
                            <span class="menu-item-desc">Olive-topped rustic loaf</span>
                        </li>
                    </ul>
                </div>
                <div class="menu-category">
                    <div class="menu-category-icon">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2">
                            <path d="M12 2L2 7l10 5 10-5-10-5z"/>
                            <path d="M2 17l10 5 10-5"/>
                            <path d="M2 12l10 5 10-5"/>
                        </svg>
                    </div>
                    <h3 class="menu-category-title">Pastelería</h3>
                    <p class="menu-category-desc">Layered cakes, tarts, and celebratory sweets for every occasion.</p>
                    <ul class="menu-list">
                        <li>
                            <span class="menu-item-name">Tres Leches</span>
                            <span class="menu-item-desc">Sponge cake soaked in three milks, whipped cream</span>
                        </li>
                        <li>
                            <span class="menu-item-name">Pastel de Chocolate</span>
                            <span class="menu-item-desc">Rich chocolate layer cake</span>
                        </li>
                        <li>
                            <span class="menu-item-name">Pastel de Vainilla</span>
                            <span class="menu-item-desc">Classic vanilla sponge with buttercream</span>
                        </li>
                        <li>
                            <span class="menu-item-name">Pie de Manzana</span>
                            <span class="menu-item-desc">Homemade apple pie with flaky crust</span>
                        </li>
                        <li>
                            <span class="menu-item-name">Custom Cakes</span>
                            <span class="menu-item-desc">Birthdays, weddings, and celebrations — order ahead</span>
                        </li>
                    </ul>
                </div>
                <div class="menu-category">
                    <div class="menu-category-icon">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2">
                            <path d="M18 8h1a4 4 0 0 1 0 8h-1"/>
                            <path d="M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z"/>
                            <line x1="6" y1="1" x2="6" y2="4"/>
                            <line x1="10" y1="1" x2="10" y2="4"/>
                            <line x1="14" y1="1" x2="14" y2="4"/>
                        </svg>
                    </div>
                    <h3 class="menu-category-title">Café & Bebidas</h3>
                    <p class="menu-category-desc">Warm drinks to complement your favorite pastry.</p>
                    <ul class="menu-list">
                        <li>
                            <span class="menu-item-name">Café con Leche</span>
                            <span class="menu-item-desc">Espresso with steamed milk</span>
                        </li>
                        <li>
                            <span class="menu-item-name">Café de Olla</span>
                            <span class="menu-item-desc">Traditional pot-brewed coffee with cinnamon</span>
                        </li>
                        <li>
                            <span class="menu-item-name">Chocolate Caliente</span>
                            <span class="menu-item-desc">Thick, rich Mexican hot chocolate</span>
                        </li>
                        <li>
                            <span class="menu-item-name">Atole</span>
                            <span class="menu-item-desc">Warm corn-based drink, velvety and comforting</span>
                        </li>
                        <li>
                            <span class="menu-item-name">Jugo Natural</span>
                            <span class="menu-item-desc">Fresh-squeezed seasonal juices</span>
                        </li>
                    </ul>
                </div>
            </div>
            <p class="menu-note">Menu items vary by availability. Please ask our staff for daily offerings and custom cake orders.</p>
        </div>
    </section>

    <section class="gallery" id="gallery">
        <div class="container">
            <div class="gallery-header">
                <p class="section-eyebrow">From the Bakery</p>
                <h2 class="section-title">Crafted with Care</h2>
            </div>
            <div class="gallery-grid">
                <div class="gallery-item gallery-item--large">
                    <img src="https://images.pexels.com/photos/39141868/pexels-photo-39141868.jpeg?auto=compress&cs=tinysrgb&fit=crop&w=600&h=400" alt="Freshly baked artisan bread loaves cooling on a wooden rack" width="600" height="400" loading="lazy">
                    <div class="gallery-item-overlay">
                        <span>Morning Loaves</span>
                    </div>
                </div>
                <div class="gallery-item">
                    <img src="https://images.pexels.com/photos/9379240/pexels-photo-9379240.jpeg?auto=compress&cs=tinysrgb&fit=crop&w=400&h=400" alt="Colorful conchas and sweet pastries arranged on a display counter" width="400" height="400" loading="lazy">
                    <div class="gallery-item-overlay">
                        <span>Conchas</span>
                    </div>
                </div>
                <div class="gallery-item">
                    <img src="https://images.pexels.com/photos/7025687/pexels-photo-7025687.jpeg?auto=compress&cs=tinysrgb&fit=crop&w=400&h=400" alt="Layered tres leches cake dusted with cinnamon" width="400" height="400" loading="lazy">
                    <div class="gallery-item-overlay">
                        <span>Tres Leches</span>
                    </div>
                </div>
                <div class="gallery-item gallery-item--large">
                    <img src="https://images.pexels.com/photos/31907940/pexels-photo-31907940.jpeg?auto=compress&cs=tinysrgb&fit=crop&w=600&h=400" alt="Traditional bakery oven with golden bread inside" width="600" height="400" loading="lazy">
                    <div class="gallery-item-overlay">
                        <span>From the Oven</span>
                    </div>
                </div>
                <div class="gallery-item">
                    <img src="https://images.pexels.com/photos/34386530/pexels-photo-34386530.jpeg?auto=compress&cs=tinysrgb&fit=crop&w=400&h=400" alt="Cup of café con leche beside a pastel croissant" width="400" height="400" loading="lazy">
                    <div class="gallery-item-overlay">
                        <span>Café & Pastry</span>
                    </div>
                </div>
                <div class="gallery-item">
                    <img src="https://images.pexels.com/photos/34387170/pexels-photo-34387170.jpeg?auto=compress&cs=tinysrgb&fit=crop&w=400&h=400" alt="Bakery display case filled with assorted pastries and cakes" width="400" height="400" loading="lazy">
                    <div class="gallery-item-overlay">
                        <span>Daily Selection</span>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="visit" id="visit">
        <div class="container">
            <div class="visit-grid">
                <div class="visit-info">
                    <p class="section-eyebrow">Visit Us</p>
                    <h2 class="section-title">Come Share the Table</h2>
                    <p class="section-body">
                        We welcome you to step into our bakery, breathe in the warmth of fresh bread, and discover why our neighbors keep coming back.
                    </p>
                    <div class="visit-details">
                        <div class="visit-detail">
                            <svg class="visit-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                                <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
                                <circle cx="12" cy="10" r="3"/>
                            </svg>
                            <div>
                                <span class="visit-detail-label">Address</span>
                                <span class="visit-detail-value">3735 Farmington Dr<br>Greensboro, NC 27407</span>
                            </div>
                        </div>
                        <div class="visit-detail">
                            <svg class="visit-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                                <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 12 19.79 19.79 0 0 1 1.62 3.42 2 2 0 0 1 3.61 1.22h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L7.91 8.89a16 16 0 0 0 6.18 6.18l1.03-1.03a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>
                            </svg>
                            <div>
                                <span class="visit-detail-label">Phone</span>
                                <a href="tel:+13363559544" class="visit-detail-value">(336) 355-9544</a>
                            </div>
                        </div>
                        <div class="visit-detail">
                            <svg class="visit-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                                <circle cx="12" cy="12" r="10"/>
                                <polyline points="12 6 12 12 16 14"/>
                            </svg>
                            <div>
                                <span class="visit-detail-label">Hours</span>
                                <span class="visit-detail-value">Mon – Sat: 7:00 AM – 8:00 PM<br>Sunday: 8:00 AM – 4:00 PM</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="visit-map">
                    <iframe 
                        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3144.5!2d-79.85!3d36.08!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMzbCsDA0JzAwLjAiTiA3N8KwNTEnMDAuMCJX!5e0!3m2!1sen!2sus!4v1"
                        width="100%" 
                        height="100%" 
                        style="border:0;" 
                        allowfullscreen="" 
                        loading="lazy" 
                        referrerpolicy="no-referrer-when-downgrade"
                        title="Odalys Panadería y Pastelería location map">
                    </iframe>
                </div>
            </div>
        </div>
    </section>

    <footer class="footer">
        <div class="container">
            <div class="footer-inner">
                <div class="footer-brand">
                    <span class="nav-logo-mark">O</span>
                    <span class="nav-logo-text">Odalys</span>
                    <p class="footer-tagline">Panadería y Pastelería</p>
                </div>
                <div class="footer-links">
                    <a href="#hero">Home</a>
                    <a href="#heritage">Our Story</a>
                    <a href="#menu">Menu</a>
                    <a href="#gallery">Gallery</a>
                    <a href="#visit">Visit</a>
                </div>
                <div class="footer-contact">
                    <p>3735 Farmington Dr, Greensboro, NC 27407</p>
                    <a href="tel:+13363559544">(336) 355-9544</a>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2026 Odalys Panadería y Pastelería. All rights reserved.</p>
            </div>
        </div>
    </footer>

    <script src="./script.js"></script>
</body>
</html>