@import url('https://fonts.googleapis.com/css2?family=Cabinet+Grotesk:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

:root {
    --blue: #005aa9;
    --blue-dark: #003d73;
    --green: #00833e;
    --ink: #172433;
    --muted: #5d6b7a;
    --line: #cbd5e1;
    --paper: #ffffff;
    --bg: #f6f8fb;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    color: var(--ink);
    background: var(--bg);
}

a { color: inherit; }

.site-header {
    position: absolute;
    inset: 0 0 auto;
    z-index: 20;
    height: 5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 3rem;
    color: white;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
    font-family: 'Cabinet Grotesk', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
}

.brand img {
    width: 9rem;
    max-height: 2.75rem;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.public-nav {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    font-size: .9rem;
    font-weight: 600;
}

.public-nav a { text-decoration: none; opacity: .9; }
.public-nav a:hover { opacity: 1; }

.nav-cta {
    border: 1px solid rgba(255,255,255,.75);
    padding: .7rem 1rem;
}

.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--blue-dark);
    color: white;
}

.hero-image, .hero-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.hero-image { object-fit: cover; }
.hero-overlay { background: linear-gradient(90deg, rgba(0,61,115,.88), rgba(0,90,169,.72), rgba(0,0,0,.18)); }

.hero-content {
    position: relative;
    z-index: 2;
    width: min(72rem, 100%);
    padding: 8rem 3rem 5rem;
}

.eyebrow, .section-kicker {
    margin: 0 0 1rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

h1, h2, h3 {
    font-family: 'Cabinet Grotesk', sans-serif;
    margin: 0;
    line-height: 1.05;
}

h1 {
    max-width: 58rem;
    font-size: clamp(2.6rem, 7vw, 6.75rem);
    letter-spacing: -.04em;
}

.hero-copy {
    max-width: 42rem;
    margin: 1.5rem 0 0;
    font-size: 1.2rem;
    line-height: 1.7;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2rem;
}

.primary-action, .secondary-action {
    display: inline-flex;
    align-items: center;
    min-height: 3rem;
    padding: 0 1.35rem;
    text-decoration: none;
    font-weight: 700;
}

.primary-action { background: white; color: var(--blue-dark); }
.secondary-action { border: 1px solid rgba(255,255,255,.75); color: white; }

.section {
    padding: 5rem 3rem;
    border-bottom: 1px solid var(--line);
}

.split-section {
    display: grid;
    grid-template-columns: minmax(16rem, 24rem) minmax(0, 1fr);
    gap: 4rem;
    background: white;
}

h2 { font-size: clamp(2rem, 4vw, 3.8rem); letter-spacing: -.03em; }
h3 { font-size: 1.25rem; }

.text-block p, .security-band p {
    margin: 0;
    max-width: 52rem;
    color: var(--muted);
    font-size: 1.05rem;
    line-height: 1.75;
}

.facts-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    margin: 2rem 0 0;
    border: 1px solid var(--line);
}

.facts-grid div { padding: 1.25rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.facts-grid dt { font-size: .75rem; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.facts-grid dd { margin: .35rem 0 0; font-weight: 700; }

.process-section { background: var(--bg); }
.process-section h2 { max-width: 54rem; }

.process-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    margin-top: 2.5rem;
    background: var(--line);
    border: 1px solid var(--line);
}

.process-grid article { background: white; padding: 1.5rem; min-height: 16rem; }
.process-grid span { display: block; color: var(--blue); font-weight: 800; margin-bottom: 3rem; }
.process-grid p { color: var(--muted); line-height: 1.65; }

.security-band {
    display: grid;
    grid-template-columns: minmax(16rem, 34rem) minmax(0, 1fr);
    gap: 4rem;
    background: var(--blue-dark);
    color: white;
}

.security-band p { color: rgba(255,255,255,.82); }

.footer {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.5rem 3rem;
    background: #071827;
    color: white;
    font-size: .9rem;
}

@media (max-width: 860px) {
    .site-header { position: fixed; padding: 0 1rem; background: rgba(0,61,115,.92); }
    .public-nav a:not(.nav-cta) { display: none; }
    .brand img { width: 7rem; }
    .hero-content, .section { padding-left: 1.25rem; padding-right: 1.25rem; }
    .split-section, .security-band { grid-template-columns: 1fr; gap: 2rem; }
    .process-grid, .facts-grid { grid-template-columns: 1fr; }
    .footer { flex-direction: column; padding: 1.25rem; }
}