/* Design tokens — solid blue */
:root {
    --primary: #003399;
    --primary-deep: #001a4d;
    --accent: #003399;
    --steel: #6d8fa5;
    --mist: #aadddd;
    --nav-bg: #003399;
    --nav-header-1-bg: #ffffff;
    --nav-header-2-bg: #c8e6c9;
    --ink: #e8eef6;
    --ink-muted: #9aafc0;
    --bg: #050a14;
    --bg-elevated: #0a1424;
    --bg-card: #0d1a2e;
    --border: rgba(109, 143, 165, 0.25);
    --font: 'Calibri', 'Segoe UI', system-ui, sans-serif;
    --glow: 0 0 40px rgba(0, 51, 153, 0.35);
    --radius: 6px;
    --max: 1120px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font);
    color: var(--ink);
    background: var(--bg);
    line-height: 1.65;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--mist); transition: color .2s ease; }
a:hover { color: #fff; }

/* --- nav ------------------------------------------------------------- */
header.nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--nav-bg);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    min-height: 56px;
    flex-wrap: nowrap;
    border-bottom: none;
}

header.nav .nav-header-1 {
    background: var(--nav-header-1-bg);
    min-height: 28px;
    padding: 9px 28px;
}

header.nav .nav-header-2 {
    background: var(--nav-header-2-bg);
    min-height: 28px;
    padding: 9px 28px;
}

/* --- main ------------------------------------------------------------ */
main { flex: 1; }

/* --- sections -------------------------------------------------------- */
.section {
    max-width: var(--max);
    margin: 0 auto;
    padding: 64px 24px;
}

.section-narrow {
    max-width: 760px;
}

.section h1 {
    margin: 0 0 1.25rem;
    font-size: clamp(1.8rem, 4vw, 2.4rem);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #fff;
    font-weight: 700;
}

.section h2 {
    margin: 0 0 1.25rem;
    font-size: clamp(1.5rem, 3vw, 2rem);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #fff;
    font-weight: 700;
}

/* --- utility --------------------------------------------------------- */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

.text-center { text-align: center; }

@media (max-width: 600px) {
    .section { padding: 48px 20px; }
}