/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

/* ── Utility ── */
.eyebrow { letter-spacing: .18em; }

/* ── Navbar ── */
#site-header {
    background: rgba(254, 253, 248, 0);
    backdrop-filter: blur(0px);
    transition: background .3s, backdrop-filter .3s, box-shadow .3s;
}
#site-header.scrolled {
    background: rgba(254, 253, 248, 0.92);
    backdrop-filter: blur(12px);
    box-shadow: 0 1px 0 rgba(92, 58, 30, 0.08);
}

/* ── Mobile Menu ── */
#mobile-menu.open { opacity: 1 !important; pointer-events: auto !important; }

/* ── Hero Animations ── */
.hero-eyebrow {
    animation: fadeUp .8s ease both;
}
.hero-title {
    animation: fadeUp .8s .15s ease both;
}
.hero-sub {
    animation: fadeUp .8s .3s ease both;
}
.hero-ctas {
    animation: fadeUp .8s .45s ease both;
}
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Card Hover Tilt ── */
.group:hover .group-img { transform: scale(1.05); }

/* ── Form Focus ── */
input:focus, textarea:focus {
    box-shadow: 0 0 0 3px rgba(196, 80, 32, 0.12);
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #fdf8ea; }
::-webkit-scrollbar-thumb { background: #e5a33e; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #d48522; }