/* ─── Modulify Design System ─────────────────────────────────────────────────
   Single source of truth for typography tokens.
   Loaded globally via _document.tsx on every page.
   ─────────────────────────────────────────────────────────────────────────── */

:root {
    /* H1 */
    --heading-h1-family: 'Neutral Sans', 'Neutralsans Medium', Arial, sans-serif;
    --heading-h1-weight: 500;
    --heading-h1-size: 60px;
    --heading-h1-line-height: 1.3;
    --heading-h1-letter-spacing: -0.01em;

    /* H2 */
    --heading-h2-family: 'Neutral Sans', 'Neutralsans Medium', Arial, sans-serif;
    --heading-h2-weight: 500;
    --heading-h2-size: 48px;
    --heading-h2-line-height: 1.2;
    --heading-h2-letter-spacing: 0em;

    /* H3 */
    --heading-h3-family: 'Neutral Sans', 'Neutralsans', Arial, sans-serif;
    --heading-h3-weight: 400;
    --heading-h3-size: 32px;
    --heading-h3-line-height: 1.2;
    --heading-h3-letter-spacing: 0em;
}

h1 {
    font-family: var(--heading-h1-family);
    font-style: normal;
    font-weight: var(--heading-h1-weight);
    font-size: var(--heading-h1-size);
    line-height: var(--heading-h1-line-height);
    letter-spacing: var(--heading-h1-letter-spacing);
}

h2 {
    font-family: var(--heading-h2-family);
    font-style: normal;
    font-weight: var(--heading-h2-weight);
    font-size: var(--heading-h2-size);
    line-height: var(--heading-h2-line-height);
    letter-spacing: var(--heading-h2-letter-spacing);
}

h3 {
    font-family: var(--heading-h3-family);
    font-style: normal;
    font-weight: var(--heading-h3-weight);
    font-size: var(--heading-h3-size);
    line-height: var(--heading-h3-line-height);
    letter-spacing: var(--heading-h3-letter-spacing);
}

/* ── Mobile: scale the heading tokens down ────────────────────────────────── */
@media (max-width: 767px) {
    :root {
        --heading-h1-size: 38px;
        --heading-h2-size: 30px;
        --heading-h3-size: 24px;
    }
}

/* ── Keep the navbar always visible (neutralize Webflow IX2 nav animations) ───
   The Webflow runtime (modulify-ai.js) is injected after React hydrates, then
   IX2 mutates the navbar — the "Nav Move In/Out" scroll interaction (a-11/a-12)
   translateY(-100%) and a load entrance animation. When the runtime hiccups or
   a trigger fails to re-fire, the navbar is left mid-animation (moved off-screen
   or at opacity 0) — "the navigation sometimes is not displayed".
   The nav is position: sticky, so it never needs these animations. Forcing the
   end state here beats the inline styles the runtime sets, so it's always shown.
   (Only the .nav element is pinned; dropdown children can still set their own
   visibility/opacity, so hover menus keep animating.) */
.nav {
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}