:root {
    /* accent */
    --accent: #f6b33f;
    --on-accent: #3a2500;
    --accent-glow: rgba(246, 179, 63, .32);

    /* navy family */
    --navy-1: #123aa6;
    --navy-2: #0b2c7e;
    --navy-3: #092b82;
    --navy-4: #061d5d;

    /* neutrals */
    --cream: #faf7ef;
    --off-white: #fffdf8;
    --ink: #18213a;
    --muted: #66708c;
    --border: #e8e1d8;
    --divider: #eee7da;

    /* sage green */
    --sage: #6f927b;
    --sage-dark: #55755f;
    --sage-soft: #dfeadf;

    /* fonts */
    --font-display: 'Newsreader', serif;
    --font-body: 'Hanken Grotesk', system-ui, sans-serif;

    /* motion (Balanced preset) */
    --reveal-dist: 30px;
    --reveal-dur: .85s;

    /* shadows */
    --shadow-soft: 0 16px 40px rgba(9, 43, 130, .05);
    --shadow-med: 0 14px 34px rgba(9, 43, 130, .06);
    --shadow-strong: 0 30px 70px rgba(9, 43, 130, .12);
    --shadow-accent: 0 10px 26px rgba(246, 179, 63, .28);
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--cream);
}

body {
    font-family: var(--font-body);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
input, button, textarea, select { font-family: inherit; }
input[type=date], input[type=time] { -webkit-appearance: none; appearance: none; }

.mn-hscroll::-webkit-scrollbar { height: 0; display: none; }
.mn-hscroll { scrollbar-width: none; -ms-overflow-style: none; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 400; margin: 0; }

@keyframes mnScreenFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mnScreenSlide { from { transform: translateY(14px); } to { transform: translateY(0); } }
@keyframes mnPop { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: scale(1); } }
@keyframes mnFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes mnFloat2 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(10px); } }
@keyframes mnPulse { 0%, 100% { opacity: .5; transform: scale(1); } 50% { opacity: .9; transform: scale(1.06); } }
@keyframes mnSpin { to { transform: rotate(360deg); } }
@keyframes mnSpinR { to { transform: rotate(-360deg); } }
@keyframes mnDrift { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(7px, -9px); } }
@keyframes mnRing { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(180deg); } }
@keyframes mnSheet { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes mnFade { from { opacity: 0; } to { opacity: 1; } }

[data-reveal] {
    opacity: 0;
    transform: translateY(var(--reveal-dist, 30px));
    transition: opacity var(--reveal-dur, .85s) cubic-bezier(.16, 1, .3, 1),
                transform var(--reveal-dur, .85s) cubic-bezier(.16, 1, .3, 1);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

[data-fill-bar] { width: 0; transition: width 1.3s cubic-bezier(.16, 1, .3, 1); }

/* Split so only opacity's fill-mode persists after the animation ends -- a
   held transform (even both's identity translateY(0)) permanently creates a
   containing block for any position:fixed descendant, breaking fixed footers
   on any page wrapped in this class. Transform gets no fill-mode, so it
   reverts to the cascade default (literal none) once the intro finishes. */
.mn-screen-enter {
    animation: mnScreenFade .55s cubic-bezier(.16, 1, .3, 1) both,
               mnScreenSlide .55s cubic-bezier(.16, 1, .3, 1);
}

.mn-particle {
    position: absolute;
    border-radius: 50%;
    animation: mnDrift 8s ease-in-out infinite;
}