/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: 'Nunito Sans', system-ui, sans-serif;
    color: #5a4a36;
    background: #fdfbf7;
    line-height: 1.6;
    overflow-x: hidden;
}
img { max-width: 100%; height: auto; }

/* ── Navbar ── */
.nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(253, 251, 247, 0.92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(237, 220, 180, 0.4);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; }
.nav-links { list-style: none; gap: 2rem; }
.nav-toggle { background: none; border: none; cursor: pointer; padding: 0.25rem; }
.mobile-menu { position: absolute; top: 100%; left: 0; right: 0; }
.mobile-link { display: block; padding: 0.5rem 0; }

/* ── Hero ── */
.hero {
    position: relative;
    min-height: 92vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        linear-gradient(135deg,
            rgba(212, 82, 54, 0.88) 0%,
            rgba(196, 63, 42, 0.82) 30%,
            rgba(163, 50, 36, 0.78) 60%,
            rgba(131, 44, 36, 0.85) 100%
        ),
        url('https://images.pexels.com/photos/2349992/pexels-photo-2349992.jpeg?auto=compress&cs=tinysrgb&fit=crop&w=1920&h=1080') center/cover no-repeat;
    text-align: center;
    overflow: hidden;
}
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 50%, rgba(253, 208, 166, 0.25) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 20%, rgba(253, 240, 235, 0.15) 0%, transparent 50%);
    pointer-events: none;
}
.hero-content { position: relative; z-index: 2; }
.hero-scroll {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    animation: bounce 2s infinite;
    opacity: 0.7;
}
@keyframes bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(8px); }
}

/* ── Section spacing ── */
section { position: relative; }

/* ── Reveal (progressive enhancement, only when JS runs & motion preferred) ── */
@media (prefers-reduced-motion: no-preference) {
    .reveal {
        opacity: 0;
        transform: translateY(24px);
        transition: opacity 0.7s ease, transform 0.7s ease;
    }
    .reveal.visible {
        opacity: 1;
        transform: translateY(0);
    }
}
/* Ensure content is visible even without JS */
.reveal { opacity: 1; transform: none; }

/* ── Mobile menu ── */
@media (max-width: 767px) {
    .nav-links { display: none; }
}
@media (min-width: 768px) {
    .mobile-menu { display: none !important; }
}

/* ── Menu list ── */
#menu ul li {
    list-style: none;
}

/* ── Smooth focus outlines ── */
a:focus-visible, button:focus-visible {
    outline: 2px solid #d45236;
    outline-offset: 2px;
    border-radius: 4px;
}