/* ── Base & Reset ───────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { margin: 0; background: #ffffff; color: #0A1A38; }

/* ── Utility ─────────────────────────────────────── */
.bg-navy-50 { background-color: #F4F6FA; }
.bg-navy-100 { background-color: #E8ECF4; }

/* ── Animations ──────────────────────────────────── */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-up {
    animation: fadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ── Scroll Reveal (progressive enhancement) ────── */
@media (prefers-reduced-motion: no-preference) {
    .reveal-up,
    .reveal-left,
    .reveal-right {
        opacity: 0;
        transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
                    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .reveal-up   { transform: translateY(28px); }
    .reveal-left  { transform: translateX(-28px); }
    .reveal-right { transform: translateX(28px); }

    .reveal-up.revealed,
    .reveal-left.revealed,
    .reveal-right.revealed {
        opacity: 1;
        transform: translate(0, 0);
    }
}

/* Default visible state for reduced-motion / no-JS */
@media (prefers-reduced-motion: reduce) {
    .reveal-up,
    .reveal-left,
    .reveal-right {
        opacity: 1;
        transform: none;
    }
}

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

.mobile-link {
    transition: color 0.3s ease;
}

/* ── Header scroll state ────────────────────────── */
#site-header.scrolled {
    background: rgba(7, 16, 36, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 1px 0 rgba(255,255,255,0.05);
}

/* ── Form focus styles ───────────────────────────── */
input:focus, textarea:focus {
    outline: none;
}

/* ── Selection ───────────────────────────────────── */
::selection {
    background: rgba(201, 168, 76, 0.2);
    color: #0A1A38;
}