/* --- Global --- */
body {
    font-family: 'Inter', sans-serif;
    scroll-behavior: smooth;
    background-color: #fcfaf7;
    -webkit-font-smoothing: antialiased;
}

/* Fix for background locking on mobile */
body.no-scroll {
    overflow: hidden !important;
    height: 100vh;
}

h1, h2, h3, .font-serif {
    font-family: 'Playfair Display', serif;
}

/* --- Nav & Logo --- */
#hero-logo {
    display: block;
    max-width: 100px;
    height: 50px;
    width: auto;
    will-change: transform, opacity;
}

@media (min-width: 768px) { #hero-logo { height: 70px; } }

nav.scrolled {
    background-color: rgba(252, 250, 247, 0.85) !important;
    backdrop-filter: blur(12px) saturate(180%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

/* --- Mobile Menu Drawer --- */
#mobile-menu {
    height: 100vh;
    height: 100svh;
    width: 100vw;
    box-shadow: -10px 0 30px rgba(0,0,0,0.05);
    will-change: transform;
}

.mobile-link {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (max-width: 768px) {
    header { height: 100svh; }
}

/* --- Visual Effects --- */
.grayscale {
    filter: grayscale(1) contrast(0.9) opacity(0.7);
    transition: all 0.7s ease-in-out;
}

.group:hover .grayscale {
    filter: grayscale(0) contrast(1) opacity(1);
}

.rounded-full {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- Custom Scrollbar --- */
@media (min-width: 1024px) {
    ::-webkit-scrollbar { width: 6px; }
    ::-webkit-scrollbar-track { background: #fcfaf7; }
    ::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 3px; }
    ::-webkit-scrollbar-thumb:hover { background: #96a56e; }
}