/* ── Base & Reset ─────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body { margin: 0; }
    img, svg { display: block; max-width: 100%; }
    input, textarea, button { font-family: inherit; }

    /* ── Scroll Reveal ────────────────────────────────────── */
    .reveal {
        opacity: 0;
        transform: translateY(32px);
        transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                    transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    .reveal.visible {
        opacity: 1;
        transform: translateY(0);
    }
    .reveal-delay-1 { transition-delay: 0.1s; }
    .reveal-delay-2 { transition-delay: 0.2s; }
    .reveal-delay-3 { transition-delay: 0.3s; }
    .reveal-delay-4 { transition-delay: 0.4s; }

    /* ── Custom Selection ─────────────────────────────────── */
    ::selection {
        background: color-mix(in srgb, currentColor 15%, transparent);
    }

    /* ── Header Scroll State ─────────────────────────────── */
    #site-header.scrolled #nav-bg {
        opacity: 1;
    }

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

    /* ── Form Focus Styles ────────────────────────────────── */
    input:focus, textarea:focus {
        border-color: rgb(47, 80, 41) !important;
    }

    /* ── Smooth Image Loading ─────────────────────────────── */
    img {
        background-color: rgb(227, 235, 224);
    }

    /* ── Print ────────────────────────────────────────────── */
    @media print {
        #site-header, #mobile-menu { display: none; }
        body { background: white; color: black; }
    }