body {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
}

/* Quiet background atmosphere. Transform only. */
.atmosphere {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

.atmosphere span {
    position: absolute;
    border-radius: 9999px;
    filter: blur(28px);
}

.atmosphere .orb-a {
    width: 34rem;
    height: 34rem;
    top: -8rem;
    right: -6rem;
    background: radial-gradient(circle, rgba(0, 86, 157, 0.16) 0%, rgba(0, 86, 157, 0) 68%);
    animation: drift 32s ease-in-out infinite;
}

.atmosphere .orb-b {
    width: 26rem;
    height: 26rem;
    bottom: 8%;
    left: -8rem;
    background: radial-gradient(circle, rgba(224, 242, 254, 0.95) 0%, rgba(224, 242, 254, 0) 70%);
    animation: drift 38s ease-in-out infinite reverse;
}

@keyframes drift {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(-32px, 20px, 0); }
}

/* Brand colours in plain CSS. The Tailwind CDN does not keep custom
   colours from a config file loaded before it, which left white type
   on a blank background. */
.bg-primary { background-color: #0f172a !important; }
.bg-brand { background-color: #00569d !important; }
.bg-brandDark { background-color: #003f75 !important; }
.bg-brandLight { background-color: #e0f2fe !important; }
.text-brand { color: #00569d !important; }
.text-brandDark { color: #003f75 !important; }
.border-brand { border-color: #00569d !important; }
.accent-brand { accent-color: #00569d; }

.hover\:bg-brand:hover { background-color: #00569d !important; }
.hover\:bg-brandDark:hover { background-color: #003f75 !important; }
.hover\:text-brand:hover { color: #00569d !important; }
.hover\:text-brandDark:hover { color: #003f75 !important; }
.hover\:text-white:hover { color: #ffffff !important; }
.hover\:border-brand:hover { border-color: #00569d !important; }

a[aria-current="page"] {
    background-color: #00569d !important;
    border-color: #00569d !important;
    color: #ffffff !important;
}

.bg-primary,
.bg-primary h1,
.bg-primary h2,
.bg-primary p {
    color: #ffffff;
}

[data-anim] {
    opacity: 1;
    transform: none;
    animation: none;
}

@media (prefers-reduced-motion: reduce) {
    .atmosphere span,
    [data-anim] {
        animation: none;
        opacity: 1;
        transform: none;
    }
}