/* Brand palette: raw values. Pages use the role tokens below, which swap per theme. */
:root {
  --navy: #111D2D;
  --ink: #2B3A4D;
  --slate: #526982;
  --mist: #A9B6C4;
  --cloud: #E8EDF2;
  --frost: #F5F7FA;
  --white: #FFFFFF;
  --signal: #2F66E0;
  --signal-light: #7FA7FF;

  --font-head: "Outfit", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;

  /* Light theme roles */
  --bg: var(--white);
  --surface: var(--frost);
  --band-bg: var(--navy);
  --band-edge: var(--navy);
  --heading: var(--navy);
  --text: var(--ink);
  --muted: var(--slate);
  --line: var(--cloud);
  --accent: var(--signal);
  --header-bg: rgba(255, 255, 255, 0.92);
  --logo-filter: none;
  --bars-opacity: 0.08;
  color-scheme: light;
}

/* Dark theme roles: system preference, unless the visitor picked light */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0A121D;
    --surface: var(--navy);
    --band-bg: var(--navy);
    --band-edge: #1E2D42;
    --heading: var(--frost);
    --text: var(--mist);
    --muted: #8294AA;
    --line: #1E2D42;
    --accent: var(--signal-light);
    --header-bg: rgba(10, 18, 29, 0.9);
    --logo-filter: brightness(0) invert(1);
    --bars-opacity: 0.05;
    color-scheme: dark;
  }
}

/* Dark theme roles: visitor picked dark */
:root[data-theme="dark"] {
  --bg: #0A121D;
  --surface: var(--navy);
  --band-bg: var(--navy);
  --band-edge: #1E2D42;
  --heading: var(--frost);
  --text: var(--mist);
  --muted: #8294AA;
  --line: #1E2D42;
  --accent: var(--signal-light);
  --header-bg: rgba(10, 18, 29, 0.9);
  --logo-filter: brightness(0) invert(1);
  --bars-opacity: 0.05;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }

body {
  margin: 0;
  font-family: var(--font-body);
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--accent); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
p { margin: 0 0 1rem; }

h1, h2, h3 {
  font-family: var(--font-head);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--heading);
  margin: 0 0 0.75rem;
  line-height: 1.12;
  text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 7vw, 5rem); font-weight: 600; letter-spacing: -0.04em; max-width: 11em; }
h2 { font-size: clamp(1.7rem, 3.5vw, 2.4rem); }
h3 { font-size: 1.25rem; }

.wrap { width: min(1080px, 100% - 3rem); margin-inline: auto; }
.mono { font-family: var(--font-mono); }

.eyebrow {
  font: 400 0.78rem var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin: 0 0 0.75rem;
}

/* Logos are navy artwork; the dark theme flips them to white */
.brand img, .foot img, .bars { filter: var(--logo-filter); }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 5;
  background: var(--header-bg);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.85rem 0; }
.brand img { height: 34px; width: auto; }
.right { display: flex; align-items: center; gap: 1.75rem; }
nav { display: flex; gap: 1.75rem; }
nav a { font: 500 1rem var(--font-head); color: var(--text); text-decoration: none; }
nav a:hover { color: var(--accent); }

.theme-toggle {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.theme-toggle:hover { color: var(--accent); border-color: var(--accent); }
.theme-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Show the icon for the theme the click switches to */
.theme-toggle .sun { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .moon { display: none; }
}
:root[data-theme="dark"] .theme-toggle .sun { display: block; }
:root[data-theme="dark"] .theme-toggle .moon { display: none; }

/* Hero */
.hero { position: relative; overflow: hidden; padding: clamp(4rem, 10vw, 7rem) 0 clamp(4.5rem, 11vw, 8rem); }
.hero .wrap { position: relative; }
.bars {
  --w: min(560px, 62vw);
  /* The symbol file has ~14% empty margin on its right, so pull it out
     so the visible bars end at the content column's right edge. */
  position: absolute; right: calc(var(--w) * -0.145); top: 50%;
  transform: translateY(-50%);
  width: var(--w);
  opacity: var(--bars-opacity);
  pointer-events: none;
}
.lead { font-size: 1.25rem; color: var(--muted); max-width: 32rem; margin: 0 0 2rem; }

/* About */
.about { padding: clamp(3.5rem, 8vw, 6rem) 0; }
.two { display: grid; grid-template-columns: 1fr; gap: 2rem; }
.two p { font-size: 1.1rem; }
@media (min-width: 800px) { .two { grid-template-columns: 1fr 1.2fr; gap: 4rem; } }

/* Approach: a navy band in both themes */
.band { background: var(--band-bg); border-block: 1px solid var(--band-edge); padding: clamp(3.5rem, 8vw, 5rem) 0; }
.band .eyebrow { color: var(--signal-light); }
.band h2, .band h3 { color: var(--white); }
.band p { color: var(--mist); margin: 0; }
.g3 { display: grid; grid-template-columns: 1fr; gap: 2.5rem; margin-top: 2rem; }
@media (min-width: 800px) { .g3 { grid-template-columns: repeat(3, 1fr); } }
.band h3 { display: flex; align-items: center; gap: 0.8rem; }
.band h3::before { content: ""; width: 34px; height: 7px; border-radius: 4px; background: var(--signal-light); flex: none; }
.band h3.short::before { width: 22px; }

/* Footer */
.site-footer { background: var(--surface); border-top: 1px solid var(--line); padding: 2rem 0; }
.foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; color: var(--muted); font-size: 0.875rem; }
.foot img { height: 28px; width: auto; }
.foot p { margin: 0; }
.foot a { color: var(--muted); text-decoration: none; }
.foot a:hover { color: var(--accent); text-decoration: underline; }

@media (max-width: 560px) {
  .brand img { height: 26px; }
  .right, nav { gap: 1rem; }
  nav a { font-size: 0.95rem; }
  .theme-toggle { width: 34px; height: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}