:root {
  --navy:#003380; --sky:#87AADE;
  --ground:#F3F6FA; --surface:#FFFFFF; --surface-2:#EAF0F8;
  --ink:#10161F; --ink-2:#3A4655; --ink-muted:#667384;
  --hairline:#D5DDE8; --hairline-2:#E5EBF3;
  --accent:#003380; --accent-ink:#FFFFFF; --accent-soft:#DCE7F6;
  --band:#003380; --band-ink:#FFFFFF; --band-ink-2:#C9D8F0;
  --logo-plate:transparent;
  --shadow:0 1px 2px rgba(16,22,31,.06), 0 10px 30px rgba(16,22,31,.08);
  --warn:#A8321C;
  --font-display:"IBM Plex Sans Condensed","Arial Narrow",system-ui,sans-serif;
  --font-body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-data:"IBM Plex Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
  --radius:6px;
  --header-h:68px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:#0B1017; --surface:#131B26; --surface-2:#182231;
    --ink:#E8EDF3; --ink-2:#B7C3D1; --ink-muted:#8B98A8;
    --hairline:#263243; --hairline-2:#1D2837;
    --accent:#87AADE; --accent-ink:#0B1017; --accent-soft:#1A2B45;
    --band:#0F2A57; --band-ink:#F2F6FC; --band-ink-2:#B9CBE8;
    --logo-plate:#FFFFFF;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 12px 32px rgba(0,0,0,.45);
    color-scheme:dark;
  }
}

*, *::before, *::after { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 16px); }
body { margin:0; background:var(--ground); color:var(--ink); font-family:var(--font-body);
  font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
img, svg { max-width:100%; }
a { color:var(--accent); text-underline-offset:3px; }
a:hover { text-decoration-thickness:2px; }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip { position:absolute; left:12px; top:-60px; z-index:100; background:var(--accent); color:var(--accent-ink);
  padding:10px 16px; border-radius:var(--radius); }
.skip:focus { top:12px; }
.container { width:min(1080px, 100% - 2*clamp(16px,4vw,32px)); margin-inline:auto; }

h1, h2, h3 { font-family:var(--font-display); font-weight:700; line-height:1.1; letter-spacing:-.01em;
  margin:0 0 .5em; text-wrap:balance; }
h1 { font-size:clamp(34px,5.4vw,58px); letter-spacing:-.015em; }
h2 { font-size:clamp(26px,3.6vw,38px); }
h3 { font-size:22px; }
p { margin:0 0 1em; }
.lede { font-size:clamp(17px,1.7vw,20px); color:var(--ink-2); max-width:62ch; }
.eyebrow { font-family:var(--font-display); font-weight:700; font-size:13px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-muted); margin:0 0 14px; }
.eyebrow::before { content:""; display:inline-block; width:22px; height:2px; background:var(--accent);
  vertical-align:middle; margin-right:10px; }
.mono { font-family:var(--font-data); }

.site-header { position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--ground) 88%, transparent);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-bottom:1px solid transparent;
  transition:border-color .2s, box-shadow .2s; }
.site-header.is-stuck { border-bottom-color:var(--hairline); box-shadow:0 4px 18px rgba(16,22,31,.05); }
.site-header .container { display:flex; align-items:center; justify-content:space-between; min-height:var(--header-h); }
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--ink); }
.brand img { display:block; height:52px; width:auto; background:var(--logo-plate); border-radius:6px; padding:2px; }
.nav { display:flex; align-items:center; gap:4px; list-style:none; margin:0; padding:0; }
.nav a { display:block; padding:9px 14px; color:var(--ink-2); text-decoration:none; border-radius:var(--radius);
  font-weight:500; font-size:15px; }
.nav a:hover { background:var(--surface-2); color:var(--ink); }
.nav a[aria-current="page"] { color:var(--accent); box-shadow:inset 0 -2px 0 var(--accent); border-radius:0; }
.nav .nav__cta { background:var(--accent); color:var(--accent-ink); margin-left:8px; }
.nav .nav__cta:hover { background:var(--accent); color:var(--accent-ink); filter:brightness(1.12); }
.js .site-header--fade .brand img { opacity:0; transition:opacity .6s; }
.js .site-header--fade.is-collapsed .brand img { opacity:1; }
.js .site-header--fade:not(.is-collapsed) .brand { pointer-events:none; }
.nav-toggle { display:none; background:none; border:1px solid var(--hairline); border-radius:var(--radius);
  width:44px; height:44px; padding:0; color:var(--ink); cursor:pointer; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { display:block; width:20px; height:2px;
  background:currentColor; margin:auto; position:relative; transition:transform .2s, top .2s; }
.nav-toggle span::before, .nav-toggle span::after { content:""; position:absolute; left:0; }
.nav-toggle span::before { top:-6px; } .nav-toggle span::after { top:6px; }
@media (max-width:760px) {
  .nav-toggle { display:block; }
  .js .nav { display:none; position:absolute; left:0; right:0; top:var(--header-h); flex-direction:column;
    align-items:stretch; gap:0; padding:8px clamp(16px,4vw,32px) 16px; background:var(--surface);
    border-bottom:1px solid var(--hairline); box-shadow:var(--shadow); }
  .js .nav.is-open { display:flex; }
  .nav a { padding:13px 8px; border-bottom:1px solid var(--hairline-2); border-radius:0; }
  .nav .nav__cta { margin:12px 0 0; text-align:center; border-radius:var(--radius); border:0; }
  .nav a[aria-current="page"] { box-shadow:none; }
  .no-js .site-header .container { flex-wrap:wrap; padding-block:8px; }
}

.btn { display:inline-block; padding:13px 22px; border-radius:var(--radius); font-weight:600; font-size:15px;
  text-decoration:none; border:1px solid transparent; transition:filter .15s, background .15s, transform .15s; }
.btn--primary { background:var(--accent); color:var(--accent-ink); }
.btn--primary:hover { filter:brightness(1.14); }
.btn--ghost { border-color:var(--hairline); color:var(--ink); background:var(--surface); }
.btn--ghost:hover { border-color:var(--accent); }
.on-band .btn--primary { background:#fff; color:var(--navy); }
.on-band .btn--ghost { background:transparent; color:#fff; border-color:rgba(255,255,255,.4); }
.on-band .btn--ghost:hover { border-color:#fff; }
.actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }

.section { padding-block:clamp(56px,8vw,104px); }
.section--alt { background:var(--surface); border-block:1px solid var(--hairline); }
.section__head { max-width:70ch; margin-bottom:clamp(28px,4vw,48px); }
.on-band { background:var(--band); color:var(--band-ink); }
.on-band .eyebrow { color:var(--band-ink-2); }
.on-band .eyebrow::before { background:var(--sky); }
.on-band .lede, .on-band p { color:var(--band-ink-2); }
.on-band h2, .on-band h3, .on-band b { color:var(--band-ink); }
.on-band a { color:#fff; }

.hero { padding-block:clamp(40px,7vw,96px) clamp(48px,7vw,88px); overflow:hidden; }
.hero .container { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:clamp(24px,5vw,64px);
  align-items:center; }
.hero__logo { display:block; width:clamp(150px,20vw,220px); height:auto; margin:0 0 28px; background:var(--logo-plate); border-radius:10px; padding:6px; }
.hero h1 { margin-bottom:.4em; }
.hero__art { position:relative; }
.hero__art svg { display:block; width:100%; height:auto; }
@media (max-width:860px) { .hero .container { grid-template-columns:1fr; } .hero__art { max-width:440px; } }

.net-link { stroke:var(--hairline); stroke-width:2; fill:none; }
.net-link--on { stroke:var(--accent); stroke-width:2.5; }
.net-range { fill:var(--accent-soft); opacity:.55; }
.net-node { fill:var(--surface); stroke:var(--accent); stroke-width:2.5; }
.net-node--hub { fill:var(--accent); }
.net-node--sky { fill:var(--sky); stroke:var(--sky); }
.net-route { stroke:var(--sky); stroke-width:3; fill:none; stroke-linecap:round; stroke-dasharray:2 14;
  animation:route 2.2s linear infinite; }
@keyframes route { to { stroke-dashoffset:-32; } }
.net-pulse { fill:none; stroke:var(--accent); stroke-width:2; transform-box:fill-box; transform-origin:center;
  animation:pulse 3.2s ease-out infinite; }
@keyframes pulse { 0% { transform:scale(.4); opacity:.9; } 100% { transform:scale(3.2); opacity:0; } }
@media (prefers-reduced-motion: reduce) {
  .net-route, .net-pulse { animation:none; } .net-pulse { opacity:0; }
  html { scroll-behavior:auto; } * { transition:none !important; }
}

.grid { display:grid; gap:20px; }
.grid--2 { grid-template-columns:repeat(2, minmax(0,1fr)); }
.grid--3 { grid-template-columns:repeat(3, minmax(0,1fr)); }
@media (max-width:860px) { .grid--3 { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:620px) { .grid--2, .grid--3 { grid-template-columns:1fr; } }
.card { background:var(--surface); border:1px solid var(--hairline); border-radius:var(--radius); padding:26px 26px 14px;
  border-top:3px solid var(--accent); }
.section--alt .card { background:var(--ground); }
.card h3 { margin-bottom:.45em; }
.card p { color:var(--ink-2); font-size:15.5px; }
.card .tag { display:inline-block; font-family:var(--font-data); font-size:12px; color:var(--ink-muted);
  margin-bottom:10px; }

.split { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,5vw,64px); align-items:center; }
.split--rev > :first-child { order:2; }
@media (max-width:860px) { .split { grid-template-columns:1fr; } .split--rev > :first-child { order:0; } }
.photo { margin:0; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); aspect-ratio:16/10; background:var(--surface-2); }
.photo img { display:block; width:100%; height:100%; object-fit:cover; }

.callout { border-left:4px solid var(--accent); background:var(--surface); border-radius:0 var(--radius) var(--radius) 0;
  padding:18px 22px; margin:0 0 16px; color:var(--ink-2); }
.callout b { color:var(--ink); }
.section--alt .callout { background:var(--ground); }

.figs { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1px; background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.18); border-radius:var(--radius); overflow:hidden; margin:28px 0 8px; }
.fig { background:var(--band); padding:22px 20px; }
.fig b { display:block; font-family:var(--font-data); font-weight:600; font-size:clamp(26px,3.4vw,38px); line-height:1.1;
  font-variant-numeric:tabular-nums; }
.fig span { display:block; margin-top:6px; font-size:14px; color:var(--band-ink-2); }
@media (max-width:620px) { .figs { grid-template-columns:1fr; } }
.figs--light { background:var(--hairline); border-color:var(--hairline); }
.figs--light .fig { background:var(--surface); }
.figs--light .fig b { color:var(--accent); }
.figs--light .fig span { color:var(--ink-2); }
.figs--rows { grid-template-columns:1fr; }
.figs--rows .fig { display:flex; align-items:baseline; gap:18px; padding:16px 20px; }
.figs--rows .fig b { flex:0 0 8.6ch; font-size:clamp(24px,2.6vw,30px); white-space:nowrap; }
.figs--rows .fig span { margin:0; }
.figs--4 { grid-template-columns:repeat(4, minmax(0,1fr)); }
@media (max-width:860px) { .figs--4 { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:420px) { .figs--4 { grid-template-columns:1fr; } }

.contact { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:20px; }
@media (max-width:760px) { .contact { grid-template-columns:1fr; } }
.contact__box { background:var(--surface); border:1px solid var(--hairline); border-radius:var(--radius); padding:28px; }
.contact dl { margin:0; display:grid; grid-template-columns:auto 1fr; gap:10px 20px; }
.contact dt { font-family:var(--font-display); font-weight:700; font-size:13px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-muted); padding-top:4px; }
.contact dd { margin:0; font-size:18px; }
.contact address { font-style:normal; }

.site-footer { padding-block:36px; border-top:1px solid var(--hairline); color:var(--ink-muted); font-size:14px; }
.site-footer .container { display:flex; flex-wrap:wrap; gap:8px 28px; justify-content:space-between; }
.site-footer a { color:var(--ink-2); }

.page-hero { padding-block:clamp(40px,6vw,80px) clamp(28px,4vw,48px); }
.page-hero h1 { max-width:20ch; }
.layout { display:grid; grid-template-columns:200px minmax(0,1fr); gap:clamp(24px,5vw,72px); align-items:start; }
@media (max-width:960px) { .layout { grid-template-columns:minmax(0,1fr); } .toc { display:none; } }
.toc { position:sticky; top:calc(var(--header-h) + 24px); font-size:14px; }
.toc b { display:block; font-family:var(--font-display); font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-muted); margin-bottom:10px; }
.toc ol { list-style:none; margin:0; padding:0; border-left:1px solid var(--hairline); }
.toc a { display:block; padding:6px 14px; margin-left:-1px; border-left:2px solid transparent; color:var(--ink-2); text-decoration:none; }
.toc a:hover { color:var(--ink); }
.toc a.is-active { border-left-color:var(--accent); color:var(--accent); font-weight:600; }
.prose { max-width:70ch; }
.prose section { padding-block:0 clamp(40px,6vw,72px); }
.prose h2 { margin-top:0; padding-top:4px; }
.prose h3 { margin-top:1.6em; font-size:20px; }
.prose p, .prose li { color:var(--ink-2); }
.prose ul { padding-left:1.2em; margin:0 0 1em; }
.prose li { margin-bottom:.4em; }
.prose strong, .prose b { color:var(--ink); }

.prose .figs b { font-size:clamp(20px,2.5vw,26px); }
.prose .figs .fig { padding:18px 16px; }
.prose .figs .fig span { font-size:13.5px; line-height:1.45; }
.prose .figs--4 { grid-template-columns:repeat(2, minmax(0,1fr)); }
@media (max-width:420px) { .prose .figs--4 { grid-template-columns:1fr; } }
