/* =====================================================================
   Valiente Consulting — vc.css
   Design system, 2026 rebuild.

   Principles
   - Self-hosted fonts. No third-party CDN, no visitor IP leaked to Google.
   - Content is visible without JavaScript. Motion is an enhancement only.
   - Inline SVG icons. No 2.9 MB icon font for fourteen glyphs.
   - Compact vertical rhythm. Whitespace is deliberate, never accidental.
   ===================================================================== */

/* ---------- Fonts (self-hosted, variable, latin subset) ---------- */
@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/inter-tight-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens ---------- */
:root {
  /* Ink — carried forward from the original navy, deepened for contrast */
  --ink-950: #050d15;
  --ink-900: #08131f;
  --ink-850: #0b1a29;
  --ink-800: #0f2334;
  --ink-700: #16324a;

  /* Accent — the electric blue from the original palette, tuned for AA */
  --accent: #4da3ff;
  --accent-bright: #7ac0ff;
  --accent-deep: #1e6fd9;

  /* Light surfaces */
  --paper: #ffffff;
  --paper-tint: #f4f7fa;
  --paper-line: #e3eaf1;

  /* Text */
  --on-dark: #e8f0f7;
  --on-dark-mute: #93a9bf;
  --on-light: #0b1a29;
  --on-light-mute: #566a7e;

  --line-dark: rgba(255, 255, 255, 0.09);
  --line-dark-strong: rgba(255, 255, 255, 0.16);

  --font-display: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --maxw: 1180px;
  --gutter: clamp(20px, 4vw, 40px);
  --section-y: clamp(56px, 7vw, 92px);

  --r-sm: 8px;
  --r: 12px;
  --r-lg: 18px;

  --nav-h: 74px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--on-light);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.028em;
  margin: 0;
  text-wrap: balance;
}
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--section-y) 0; }
.section.tint { background: var(--paper-tint); }
.section.dark { background: var(--ink-900); color: var(--on-dark); }
.section.dark h2, .section.dark h3 { color: #fff; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--accent); color: var(--ink-950); padding: 12px 20px;
  font-weight: 600; border-radius: 0 0 var(--r-sm) 0;
}
.skip:focus { left: 0; }

/* ---------- Type helpers ---------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-deep);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.eyebrow::before {
  content: ""; width: 22px; height: 1px; background: currentColor; opacity: 0.6;
}
.dark .eyebrow, .hero .eyebrow { color: var(--accent); }

.h-xl { font-size: clamp(2.4rem, 5.6vw, 4rem); }
.h-lg { font-size: clamp(1.9rem, 3.6vw, 2.7rem); }
.h-md { font-size: clamp(1.25rem, 2vw, 1.45rem); }

.lead {
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  line-height: 1.6;
  color: var(--on-light-mute);
}
.dark .lead { color: var(--on-dark-mute); }

.section-head { max-width: 720px; margin-bottom: 44px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.center .eyebrow::before { display: none; }
.section-head p { margin-top: 16px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-body);
  font-weight: 550; font-size: 0.95rem; letter-spacing: -0.005em;
  padding: 12px 22px; border-radius: var(--r-sm);
  border: 1px solid transparent; cursor: pointer;
  transition: background 0.18s var(--ease), border-color 0.18s var(--ease),
              color 0.18s var(--ease), transform 0.18s var(--ease);
  white-space: nowrap;
}
.btn svg { width: 16px; height: 16px; flex: none; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--accent); color: var(--ink-950); }
.btn-primary:hover { background: var(--accent-bright); }
.btn-ghost { border-color: var(--line-dark-strong); color: var(--on-dark); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-outline { border-color: var(--paper-line); color: var(--on-light); background: var(--paper); }
.btn-outline:hover { border-color: var(--accent-deep); color: var(--accent-deep); }
.btn-lg { padding: 15px 28px; font-size: 1rem; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 550; font-size: 0.94rem; color: var(--accent-deep);
}
.link-arrow svg { width: 15px; height: 15px; transition: transform 0.18s var(--ease); }
.link-arrow:hover svg { transform: translateX(3px); }

/* ---------- Header ---------- */
.nav {
  position: sticky; top: 0; z-index: 100;
  height: var(--nav-h);
  background: rgba(8, 19, 31, 0.86);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid var(--line-dark);
}
.nav > .container { height: 100%; display: flex; align-items: center; gap: 26px; }
.nav-logo { flex: none; display: flex; align-items: center; }
.nav-logo img { height: 38px; width: auto; }

.nav-menu {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; gap: 4px;
  margin-left: auto;
}
.nav-link {
  display: block; padding: 8px 12px; border-radius: var(--r-sm);
  font-size: 0.9rem; font-weight: 480; color: var(--on-dark-mute);
  white-space: nowrap;
  transition: color 0.16s var(--ease), background 0.16s var(--ease);
}
.nav-link:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.nav-link.active { color: #fff; }
.nav-link.active::after {
  content: ""; display: block; height: 2px; margin: 5px 12px -8px;
  background: var(--accent); border-radius: 2px;
}
.nav-cta {
  /* Both an <a> (the account chip, and the noscript fallback) and a <button> (the sign-in
     opener) wear this class, so the button's own styling has to be reset away. */
  background: none; font-family: inherit; cursor: pointer; text-align: left;
  margin-left: 12px; flex: none;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: var(--r-sm);
  border: 1px solid var(--line-dark-strong);
  font-size: 0.88rem; font-weight: 550; color: var(--on-dark);
  white-space: nowrap;
  transition: border-color 0.16s var(--ease), color 0.16s var(--ease);
}
.nav-cta:hover { border-color: var(--accent); color: var(--accent); }
/* Signed in: a live dot rather than a padlock, so the header states the session at a glance. */
.nav-account > .nav-cta { cursor: pointer; }
.nav-account-menu { right: 0; left: auto; min-width: 220px; }
.nav-account-who {
  padding: 8px 12px 10px; margin-bottom: 4px;
  border-bottom: 1px solid var(--line-dark);
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.06em;
  color: var(--on-dark-mute); word-break: break-all;
}
.nav-account-out strong { color: #ff8f7d !important; }

.nav-cta-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #63c088;
  box-shadow: 0 0 0 3px rgba(99, 192, 136, 0.18); flex: none;
}
.nav-cta svg { width: 14px; height: 14px; }

/* Dropdown — CSS-only, works on hover and on keyboard focus */
.has-dropdown { position: relative; }
.has-dropdown > .nav-link { display: flex; align-items: center; gap: 5px; }
.caret { width: 12px; height: 12px; opacity: 0.7; }
.dropdown {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 10;
  min-width: 250px; list-style: none; margin: 0; padding: 7px;
  background: var(--ink-850); border: 1px solid var(--line-dark-strong);
  border-radius: var(--r); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.16s var(--ease), transform 0.16s var(--ease), visibility 0.16s;
}
.has-dropdown:hover > .dropdown,
.has-dropdown:focus-within > .dropdown,
.has-dropdown.open > .dropdown { opacity: 1; visibility: visible; transform: none; }
.dropdown a { display: block; padding: 9px 12px; border-radius: var(--r-sm); }
.dropdown a:hover { background: rgba(255, 255, 255, 0.06); }
.dropdown strong { display: block; font-size: 0.9rem; font-weight: 550; color: var(--on-dark); }
.dropdown small {
  display: block; font-family: var(--font-mono); font-size: 0.68rem;
  letter-spacing: 0.06em; color: var(--on-dark-mute); margin-top: 2px;
}

.nav-toggle {
  display: none; margin-left: auto;
  width: 40px; height: 40px; padding: 0;
  background: none; border: 1px solid var(--line-dark-strong);
  border-radius: var(--r-sm); cursor: pointer;
  align-items: center; justify-content: center;
}
.nav-toggle span {
  display: block; width: 17px; height: 1.5px; background: var(--on-dark);
  position: relative; transition: background 0.15s;
}
.nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 0; width: 17px; height: 1.5px;
  background: var(--on-dark); transition: transform 0.2s var(--ease);
}
.nav-toggle span::before { top: -5.5px; }
.nav-toggle span::after { top: 5.5px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(5.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-5.5px) rotate(-45deg); }


/* ---------- Header sign-in ----------
   The Login button opens a panel rather than a page: the Cyber Defence Center hand-off,
   then this site's own credentials, with the authenticator field revealed only once the
   password has been accepted. */
.nav-login-panel {
  right: 0; left: auto;
  min-width: 340px; padding: 14px;
  cursor: default;
}
.nav-login-cdc {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 13px; border-radius: var(--r-sm);
  border: 1px solid var(--line-dark-strong);
  transition: border-color 0.16s var(--ease), background 0.16s var(--ease);
}
.nav-login-cdc:hover { border-color: var(--accent); background: rgba(77, 163, 255, 0.06); }
.nav-login-cdc-label { flex: 1; min-width: 0; font-size: 0.9rem; font-weight: 550; color: var(--on-dark); }
.nav-login-cdc svg { width: 14px; height: 14px; margin-left: auto; flex: none; color: var(--on-dark-mute); }
.nav-login-cdc:hover svg { color: var(--accent); }

.nav-login-rule {
  display: flex; align-items: center; gap: 10px;
  margin: 14px 2px 12px;
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: #6f8399;
}
.nav-login-rule::before, .nav-login-rule::after {
  content: ""; flex: 1; height: 1px; background: var(--line-dark);
}

.nav-login-form { display: block; padding: 0 2px; }
.nav-login-label {
  display: block; margin: 0 0 5px;
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--on-dark-mute);
}
.nav-login-form input {
  width: 100%; box-sizing: border-box; margin-bottom: 11px;
  padding: 10px 12px; border-radius: var(--r-sm);
  border: 1px solid var(--line-dark-strong);
  background: rgba(255, 255, 255, 0.04); color: var(--on-dark);
  font-family: var(--font-body); font-size: 0.92rem;
}
.nav-login-form input::placeholder { color: #5d708a; }
.nav-login-form input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(77, 163, 255, 0.18);
}

/* The authenticator field is not hidden and revealed - it grows, so the panel does not
   jump and it is obvious that a second step was added rather than the first replaced. */
.nav-login-mfa {
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height 0.28s var(--ease), opacity 0.2s var(--ease);
}
/* Accepted, so it steps aside: an empty box above the one being asked for reads as
   something still outstanding. */
.nav-login-pass {
  max-height: 120px; opacity: 1; overflow: hidden;
  transition: max-height 0.28s var(--ease), opacity 0.2s var(--ease);
}
.nav-login-pass.done { max-height: 0; opacity: 0; }
.nav-login-mfa.open { max-height: 120px; opacity: 1; }

.nav-login-error {
  display: none; margin: 0 0 10px;
  font-size: 0.82rem; line-height: 1.45; color: #ff8f7d;
}
.nav-login-submit { width: 100%; justify-content: center; margin-top: 2px; }
.nav-login-submit:disabled { opacity: 0.7; cursor: default; transform: none; }

@media (prefers-reduced-motion: reduce) { .nav-login-mfa { transition: none; } }

@media (max-width: 900px) {
  /* In the mobile sheet the panel is already inline, so it needs no width of its own. */
  .nav-login-panel { min-width: 0; padding: 4px 0 12px; }
  .nav-login-cdc { border-color: var(--line-dark); }
}

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  background: var(--ink-950); color: var(--on-dark);
  padding: clamp(72px, 11vw, 132px) 0 clamp(56px, 8vw, 96px);
}
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.3; }
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(90% 70% at 12% 0%, rgba(77, 163, 255, 0.16), transparent 60%),
    linear-gradient(180deg, rgba(5, 13, 21, 0.72) 0%, rgba(5, 13, 21, 0.9) 62%, var(--ink-950) 100%);
}
.hero-inner { position: relative; z-index: 1; max-width: 860px; }

.hero-badge {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent);
  border: 1px solid rgba(77, 163, 255, 0.3);
  background: rgba(77, 163, 255, 0.07);
  padding: 7px 14px; border-radius: 100px; margin-bottom: 26px;
}
.hero-badge .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 4px rgba(77, 163, 255, 0.16);
}
.hero h1 { color: #fff; margin-bottom: 22px; }
.hero h1 .grad {
  background: linear-gradient(96deg, var(--accent) 8%, var(--accent-bright) 92%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-sub { font-size: clamp(1.05rem, 1.6vw, 1.22rem); line-height: 1.6; color: var(--on-dark-mute); max-width: 640px; margin-bottom: 32px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }

/* Framework rail under the hero */
.rail {
  position: relative; z-index: 1;
  border-top: 1px solid var(--line-dark);
  margin-top: clamp(48px, 6vw, 76px); padding-top: 22px;
}
.rail-label {
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: #6f8399; margin-bottom: 14px;
}
.rail-items { display: flex; flex-wrap: wrap; gap: 8px 26px; }
.rail-items span {
  font-family: var(--font-mono); font-size: 0.82rem; font-weight: 500;
  color: var(--on-dark-mute); letter-spacing: 0.01em;
}

/* ---------- Split ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 68px); align-items: center; }
.split.reverse > *:first-child { order: 2; }
.split-narrow { grid-template-columns: 1.05fr 0.95fr; align-items: start; }
.split-narrow > *:first-child { position: sticky; top: calc(var(--nav-h) + 32px); }
@media (max-width: 900px) { .split-narrow > *:first-child { position: static; } }

/* ---------- Capability cards ---------- */
.grid { display: grid; gap: 20px; }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--paper); border: 1px solid var(--paper-line);
  border-radius: var(--r); padding: 26px 24px 28px;
  display: flex; flex-direction: column;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}
.card:hover {
  border-color: rgba(77, 163, 255, 0.5);
  box-shadow: 0 10px 34px rgba(11, 26, 41, 0.09);
  transform: translateY(-2px);
}
.card-icon {
  width: 40px; height: 40px; border-radius: 10px; margin-bottom: 18px;
  display: grid; place-items: center; flex: none;
  background: linear-gradient(150deg, rgba(77, 163, 255, 0.15), rgba(30, 111, 217, 0.09));
  color: var(--accent-deep);
}
.card-icon svg { width: 20px; height: 20px; }
.card h3 { font-size: 1.08rem; margin-bottom: 9px; text-wrap: pretty; }
.card p { font-size: 0.94rem; line-height: 1.6; color: var(--on-light-mute); }
.card .link-arrow { margin-top: auto; padding-top: 16px; }

/* ---------- Stats ---------- */
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line-dark); border-radius: var(--r-lg); overflow: hidden;
}
.stat { padding: 30px 26px; border-right: 1px solid var(--line-dark); }
.stat:last-child { border-right: 0; }
.stat .num {
  font-family: var(--font-display); font-size: clamp(2rem, 3.4vw, 2.7rem);
  font-weight: 650; letter-spacing: -0.04em; color: #fff; line-height: 1;
  margin-bottom: 8px;
}
.stat .num em { font-style: normal; color: var(--accent); }
.stat .lbl {
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--on-dark-mute); line-height: 1.5;
}

/* ---------- Numbered steps ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--paper-line); border-radius: var(--r); overflow: hidden; }
.step { background: var(--paper); padding: 28px 26px 30px; }
.step .n {
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.12em; color: var(--accent-deep); margin-bottom: 14px;
}
.step h3 { font-size: 1.05rem; margin-bottom: 8px; }
.step p { font-size: 0.93rem; color: var(--on-light-mute); line-height: 1.6; }

/* ---------- Person ---------- */
.person { display: grid; grid-template-columns: auto 1fr; gap: clamp(24px, 4vw, 44px); align-items: start; }
.person-photo {
  width: 132px; height: 132px; border-radius: var(--r); overflow: hidden; flex: none;
  border: 1px solid var(--line-dark);
}
.person-photo img { width: 100%; height: 100%; object-fit: cover; }
.person blockquote {
  margin: 0 0 20px; font-family: var(--font-display); font-weight: 450;
  font-size: clamp(1.2rem, 2.2vw, 1.6rem); line-height: 1.4; letter-spacing: -0.02em;
  color: #fff; text-wrap: balance;
}
.person .who { font-size: 0.92rem; color: var(--on-dark-mute); }
.person .who strong { color: var(--on-dark); font-weight: 600; display: block; }

/* ---------- CTA band ---------- */
.cta-band {
  background: linear-gradient(135deg, var(--ink-800) 0%, var(--ink-700) 55%, #1c4a72 100%);
  border-radius: var(--r-lg); padding: clamp(38px, 5vw, 60px);
  display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: center;
}
.cta-band h2 { color: #fff; font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin-bottom: 10px; }
.cta-band p { color: var(--on-dark-mute); font-size: 1rem; max-width: 520px; }

/* ---------- Footer ---------- */
.footer { background: var(--ink-950); color: var(--on-dark-mute); padding: 60px 0 28px; font-size: 0.92rem; }
.footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 40px; }
.footer h4 {
  font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.13em; text-transform: uppercase; color: #7f93a8;
  margin-bottom: 16px;
}
.footer a { display: block; padding: 5px 0; color: var(--on-dark-mute); transition: color 0.15s; }
.footer a:hover { color: var(--accent); }
.f-logo { height: 32px; width: auto; margin-bottom: 16px; }
.f-about { max-width: 320px; line-height: 1.65; }
.f-social { display: flex; gap: 10px; margin-top: 18px; }
.f-social a {
  width: 36px; height: 36px; border: 1px solid var(--line-dark); border-radius: 9px;
  display: grid; place-items: center; padding: 0;
}
.f-social a:hover { border-color: var(--accent); }
.f-social svg { width: 16px; height: 16px; }
.footer-bottom {
  border-top: 1px solid var(--line-dark); padding-top: 22px;
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between;
  font-size: 0.82rem; color: #6b7f94;
}
.footer-bottom .fw { font-family: var(--font-mono); letter-spacing: 0.04em; }

/* =====================================================================
   Page-level components — the parts the sub-pages are built from.
   Same rules as the rest of the system: no icon font, no JS dependency,
   visible before the stylesheet finishes doing anything clever.
   ===================================================================== */

/* ---------- Sub-page hero ---------- */
.page-hero {
  position: relative; overflow: hidden;
  background: var(--ink-950); color: var(--on-dark);
  padding: clamp(46px, 6vw, 74px) 0 clamp(40px, 5vw, 62px);
  border-bottom: 1px solid var(--line-dark);
}
.page-hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(80% 110% at 100% 0%, rgba(77, 163, 255, 0.15), transparent 62%),
    linear-gradient(180deg, var(--ink-900) 0%, var(--ink-950) 100%);
}
.page-hero > .container { position: relative; z-index: 1; }
.page-hero h1 { color: #fff; font-size: clamp(2rem, 4.4vw, 3.05rem); margin-bottom: 16px; max-width: 20ch; }
.page-hero .lead { color: var(--on-dark-mute); max-width: 660px; }
.page-hero .art {
  position: absolute; right: -2%; bottom: -12%; z-index: 0;
  width: min(38%, 420px); opacity: 0.5;
  /* Fades out on every side so the artwork dissolves into the hero rather
     than sitting in a visible box. */
  -webkit-mask-image: radial-gradient(closest-side at 58% 46%, #000 38%, transparent 100%);
  mask-image: radial-gradient(closest-side at 58% 46%, #000 38%, transparent 100%);
  pointer-events: none;
}

.breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: #6f8399; margin-bottom: 20px;
}
.breadcrumb a { color: var(--on-dark-mute); transition: color 0.15s var(--ease); }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb .sep { opacity: 0.45; }
.breadcrumb .here { color: var(--on-dark); }

/* ---------- Narrow reading column ---------- */
.container.narrow { max-width: 820px; }

/* ---------- Tick lists ---------- */
.ticks { list-style: none; margin: 16px 0 0; padding: 0; }
.ticks li {
  position: relative; padding-left: 25px; margin-bottom: 9px;
  font-size: 0.93rem; line-height: 1.55; color: var(--on-light-mute);
}
.ticks li:last-child { margin-bottom: 0; }
.ticks li::before {
  content: ""; position: absolute; left: 3px; top: 0.42em;
  width: 6px; height: 10px; border: solid var(--accent-deep);
  border-width: 0 1.8px 1.8px 0; transform: rotate(42deg);
}
.dark .ticks li { color: var(--on-dark-mute); }
.dark .ticks li::before { border-color: var(--accent); }

/* ---------- Chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  font-family: var(--font-mono); font-size: 0.76rem; font-weight: 500;
  letter-spacing: 0.04em; padding: 8px 15px; border-radius: 100px;
  border: 1px solid var(--paper-line); background: var(--paper);
  color: var(--on-light-mute);
}
.dark .chip {
  border-color: var(--line-dark-strong); background: rgba(255, 255, 255, 0.03);
  color: var(--on-dark-mute);
}

/* ---------- Image gallery tiles ---------- */
.gallery { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }
.gtile {
  position: relative; margin: 0; grid-column: span 2;
  border-radius: var(--r); overflow: hidden; background: var(--ink-900);
  aspect-ratio: 4 / 3;
}
.gallery .gtile:nth-child(n + 4) { grid-column: span 3; }
.gtile img {
  width: 100%; height: 100%; object-fit: cover; opacity: 0.85;
  transition: transform 0.5s var(--ease), opacity 0.3s var(--ease);
}
.gtile:hover img { transform: scale(1.035); opacity: 1; }
.gtile figcaption {
  position: absolute; inset: auto 0 0 0; padding: 46px 22px 20px;
  background: linear-gradient(180deg, transparent, rgba(5, 13, 21, 0.9) 58%);
  color: #fff;
}
.gtile b {
  display: block; font-family: var(--font-display); font-weight: 600;
  font-size: 1.02rem; letter-spacing: -0.02em; margin-bottom: 3px;
}
.gtile span {
  display: block; font-family: var(--font-mono); font-size: 0.68rem;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--on-dark-mute);
}

/* ---------- Tool cards ---------- */
.tool-card {
  position: relative; background: var(--paper); border: 1px solid var(--paper-line);
  border-radius: var(--r); padding: 26px 24px 24px;
  display: flex; flex-direction: column;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}
a.tool-card:hover {
  border-color: rgba(77, 163, 255, 0.5);
  box-shadow: 0 10px 34px rgba(11, 26, 41, 0.09);
  transform: translateY(-2px);
}
.t-icon {
  width: 40px; height: 40px; border-radius: 10px; margin-bottom: 18px;
  display: grid; place-items: center; flex: none;
  background: linear-gradient(150deg, rgba(77, 163, 255, 0.15), rgba(30, 111, 217, 0.09));
  color: var(--accent-deep);
}
.t-icon svg { width: 20px; height: 20px; }
.tool-card h3 { font-size: 1.05rem; margin-bottom: 9px; }
.tool-card p { font-size: 0.93rem; line-height: 1.6; color: var(--on-light-mute); }
.t-link {
  display: inline-flex; align-items: center; gap: 7px; margin-top: auto; padding-top: 16px;
  font-weight: 550; font-size: 0.92rem; color: var(--accent-deep);
}
.t-link svg { width: 15px; height: 15px; transition: transform 0.18s var(--ease); }
a.tool-card:hover .t-link svg { transform: translateX(3px); }

.tool-card.soon { background: var(--paper-tint); border-style: dashed; }
.tool-card.soon .t-icon { background: rgba(86, 106, 126, 0.1); color: var(--on-light-mute); }
.tool-card.soon h3 { color: var(--on-light-mute); }
.tool-card.soon .t-link { color: var(--on-light-mute); }
.badge-soon {
  position: absolute; top: 16px; right: 16px;
  font-family: var(--font-mono); font-size: 0.62rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--on-light-mute); border: 1px solid var(--paper-line);
  background: var(--paper); padding: 4px 9px; border-radius: 100px;
}

/* ---------- Contact ---------- */
.contact-grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(28px, 4vw, 56px); align-items: start;
}
.contact-list { margin-top: 26px; display: grid; gap: 12px; }
.contact-item {
  display: flex; align-items: center; gap: 15px;
  padding: 16px 18px; border: 1px solid var(--paper-line);
  border-radius: var(--r); background: var(--paper);
  transition: border-color 0.18s var(--ease), transform 0.18s var(--ease);
}
.contact-item:hover { border-color: rgba(77, 163, 255, 0.55); transform: translateY(-1px); }
.ci-ic {
  width: 42px; height: 42px; border-radius: 11px; flex: none;
  display: grid; place-items: center;
  background: linear-gradient(150deg, rgba(77, 163, 255, 0.15), rgba(30, 111, 217, 0.09));
  color: var(--accent-deep);
}
.ci-ic svg { width: 19px; height: 19px; }
.ci-t b { display: block; font-weight: 600; font-size: 0.98rem; }
.ci-t span { display: block; font-size: 0.88rem; color: var(--on-light-mute); }

.founder-card {
  background: var(--ink-900); color: var(--on-dark-mute);
  border: 1px solid var(--line-dark); border-radius: var(--r-lg);
  padding: 30px 28px 32px;
}
.founder-card img {
  width: 96px; height: 96px; border-radius: var(--r); object-fit: cover;
  margin-bottom: 20px; border: 1px solid var(--line-dark);
}
.founder-card h3 { color: #fff; font-size: 1.25rem; margin-bottom: 4px; }
.founder-card .role {
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 16px;
}
.founder-card p { font-size: 0.94rem; line-height: 1.65; }
.founder-card .btn { margin-top: 22px; }

/* ---------- Media cards (briefings) ---------- */
.card.flush { padding: 0; overflow: hidden; }
.card-media { aspect-ratio: 800 / 420; overflow: hidden; background: var(--ink-850); }
.card-media img { width: 100%; height: 100%; object-fit: cover; }
.card-body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }

.tag {
  display: inline-block; font-family: var(--font-mono); font-size: 0.64rem;
  font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 100px; border: 1px solid currentColor;
}
.tag-news { color: var(--accent-deep); }
.tag-critical { color: #b3372a; }
.tag-high { color: #a8600f; }
.tag-medium { color: #7d6413; }
.meta {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em;
  color: var(--on-light-mute);
}
/* On the dark hero the light-surface tag colours fall below AA, so lift them. */
.page-hero .tag-news, .dark .tag-news { color: var(--accent); }
.page-hero .tag-critical, .dark .tag-critical { color: #ff8f7d; }
.page-hero .tag-high, .dark .tag-high { color: #f5b26b; }
.page-hero .tag-medium, .dark .tag-medium { color: #e8cf7a; }
.dark .meta, .page-hero .meta { color: var(--on-dark-mute); }
.card-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }

/* ---------- Long-form article body ---------- */
.prose { font-size: 1.05rem; line-height: 1.75; }
.prose > *:first-child { margin-top: 0; }
.prose h2 { font-size: clamp(1.35rem, 2.4vw, 1.65rem); margin: 38px 0 12px; }
.prose h3 { font-size: 1.15rem; margin: 28px 0 8px; }
.prose p, .prose ul, .prose ol { color: #35485c; margin-bottom: 1.15em; }
.prose ul, .prose ol { padding-left: 22px; }
.prose li { margin-bottom: 0.45em; }
.prose a { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 3px; }
.prose strong { color: var(--on-light); font-weight: 600; }
.prose blockquote {
  margin: 26px 0; padding: 4px 0 4px 20px;
  border-left: 3px solid var(--accent); color: var(--on-light-mute);
}
.prose code {
  font-family: var(--font-mono); font-size: 0.88em;
  background: var(--paper-tint); border: 1px solid var(--paper-line);
  padding: 1px 6px; border-radius: 5px;
}
.prose pre {
  background: var(--ink-900); color: var(--on-dark); border-radius: var(--r);
  padding: 18px 20px; overflow-x: auto; font-size: 0.88rem; line-height: 1.6;
}
.prose pre code { background: none; border: 0; padding: 0; color: inherit; }
.prose img { border-radius: var(--r); margin: 26px 0; }
.prose hr { border: 0; border-top: 1px solid var(--paper-line); margin: 34px 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: 0.94rem; margin-bottom: 1.3em; }
.prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--paper-line); }
.prose th { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-light-mute); }

.article-foot {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 42px; padding-top: 26px; border-top: 1px solid var(--paper-line);
}

/* ---------- Split media ---------- */
.split-media { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line-dark); }
.split-media img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Notice ---------- */
.notice {
  border: 1px solid var(--paper-line); border-left: 3px solid var(--accent);
  background: var(--paper-tint); border-radius: var(--r-sm);
  padding: 16px 20px; font-size: 0.94rem; color: var(--on-light-mute);
}

/* ---------- Responsive (page-level components) ---------- */
@media (max-width: 900px) {
  .page-hero .art { display: none; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .gtile, .gallery .gtile:nth-child(n + 4) { grid-column: span 1; }
  .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .gallery { grid-template-columns: 1fr; }
  .page-hero h1 { max-width: none; }
}


/* ---------- Tool locks and the tool overlay ---------- */
.t-lock {
  display: inline-flex; vertical-align: baseline; margin-left: 6px;
  color: var(--on-light-mute);
}
.t-lock svg { width: 13px; height: 13px; }
.t-lock-open { color: var(--accent-deep); }
.t-lock-click { cursor: pointer; }
.tool-card.locked:hover .t-lock-click { color: var(--accent-deep); }
.tool-card.locked { cursor: pointer; }

/* A tool the visitor may not open: legible, obviously unavailable, still describes itself
   so the catalogue is useful even where access is not granted. */
.tool-card.locked { background: var(--paper-tint); border-style: dashed; }
.tool-card.locked h3, .tool-card.locked .t-link { color: var(--on-light-mute); }
.tool-card.locked .t-icon { background: rgba(86, 106, 126, 0.1); color: var(--on-light-mute); }
.tool-card.locked:hover { border-color: var(--paper-line); box-shadow: none; transform: none; }

/* The overlay. A tool opens inside the site rather than navigating away from it, so the
   visitor keeps the header, the context and the back-out. Without JavaScript the card is a
   plain link and the tool opens as an ordinary page - nothing is lost. */
.tool-overlay {
  position: fixed; inset: 0; z-index: 500;
  display: flex; flex-direction: column;
  background: rgba(5, 13, 21, 0.72);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s var(--ease);
}
.tool-overlay.open { opacity: 1; pointer-events: auto; }
.tool-overlay-bar {
  flex: none; height: 56px; display: flex; align-items: center; gap: 14px;
  padding: 0 clamp(14px, 3vw, 26px);
  background: var(--ink-900); border-bottom: 1px solid var(--line-dark); color: var(--on-dark);
}
.tool-overlay-title {
  font-family: var(--font-display); font-weight: 600; font-size: 1.02rem;
  letter-spacing: -0.02em; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tool-overlay-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.tool-overlay-actions a, .tool-overlay-actions button {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: var(--r-sm);
  border: 1px solid var(--line-dark-strong); background: none;
  font-family: var(--font-body); font-size: 0.86rem; font-weight: 500;
  color: var(--on-dark); cursor: pointer;
  transition: border-color 0.15s var(--ease), color 0.15s var(--ease);
}
.tool-overlay-actions a:hover, .tool-overlay-actions button:hover { border-color: var(--accent); color: var(--accent); }
.tool-overlay-frame { flex: 1; width: 100%; border: 0; background: var(--paper); }
body.tool-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) { .tool-overlay { transition: none; } }

/* ---------- Motion (progressive enhancement only) ----------
   .reveal is only hidden when JS has confirmed it can reveal it again.
   Without JS, or with reduced motion, everything renders fully visible. */
.js .reveal { opacity: 0; transform: translateY(18px); }
.js .reveal.in {
  opacity: 1; transform: none;
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}
.js .reveal.d2.in { transition-delay: 0.07s; }
.js .reveal.d3.in { transition-delay: 0.14s; }
.js .reveal.d4.in { transition-delay: 0.21s; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .reveal.in { opacity: 1; transform: none; transition: none; }
  .btn:hover, .card:hover { transform: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .cols-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: 1.6fr 1fr 1fr; }
  .footer-top > div:nth-child(4) { grid-column: 2 / -1; }
}
@media (max-width: 1100px) {
  .nav-toggle { display: inline-flex; }
  .nav > .container { gap: 14px; }
  .nav-menu {
    position: fixed; inset: var(--nav-h) 0 auto; flex-direction: column;
    align-items: stretch; gap: 0; padding: 12px var(--gutter) 22px;
    background: var(--ink-900); border-bottom: 1px solid var(--line-dark);
    transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: opacity 0.18s var(--ease), transform 0.18s var(--ease);
    /* The menu is taller than a phone. Without this it is a fixed block whose lower half -
       the Login button, and the sign-in form under it - is simply off the bottom of the
       screen with no way to reach it. dvh first, because the address bar on iOS eats into
       vh and the last item is exactly what gets eaten. */
    max-height: calc(100vh - var(--nav-h));
    max-height: calc(100dvh - var(--nav-h));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .nav-menu.open { opacity: 1; transform: none; pointer-events: auto; }
  .nav-link { padding: 13px 4px; font-size: 1rem; border-bottom: 1px solid var(--line-dark); }
  .nav-link.active::after { display: none; }
  .nav-link.active { color: var(--accent); }
  .nav-cta { margin: 16px 0 0; justify-content: center; padding: 13px; }
  .dropdown {
    position: static; opacity: 1; visibility: visible; transform: none;
    background: none; border: 0; box-shadow: none;
    padding: 4px 0 10px 14px; min-width: 0;
    border-bottom: 1px solid var(--line-dark);
  }

  /* The sign-in panel is the exception: laid out flat it is most of the menu's height, and
     on a touch screen there is no hover to reveal it with. Closed until the button is
     pressed - which also gives that button something to do on a phone. */
  .nav-login > .dropdown { display: none; }
  .nav-login.open > .dropdown { display: block; }
  .nav-login.open > .nav-cta { border-color: var(--accent); }
  .caret { display: none; }
  .split, .split-narrow { grid-template-columns: 1fr; }
  .split.reverse > *:first-child { order: 0; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2) { border-right: 0; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid var(--line-dark); }
  .steps { grid-template-columns: 1fr; }
  .cta-band { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .cols-4, .cols-3, .cols-2 { grid-template-columns: 1fr; }
  .person { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-top > div:first-child { grid-column: 1 / -1; }
  .footer-top > div:nth-child(4) { grid-column: 1 / -1; }
}

/* ---------- Print ---------- */
@media print {
  .nav, .hero-bg, .cta-band, .footer { background: none !important; color: #000 !important; }
  .js .reveal { opacity: 1 !important; transform: none !important; }
}

/* The way out of the sign-in panel for somebody who cannot get in. */
.nav-login-forgot {
  display: block; margin-top: 12px; text-align: center;
  font-size: 0.82rem; color: var(--on-dark-mute);
}
.nav-login-forgot:hover { color: var(--accent); }

/* Sign out is a form, so the button inside it has to look like the links around it. */
.nav-account-outform { margin: 0; }
button.nav-account-out {
  display: block; width: 100%; text-align: left;
  background: none; border: 0; padding: 9px 12px; border-radius: var(--r-sm);
  font: inherit; color: inherit; cursor: pointer;
}
button.nav-account-out:hover { background: rgba(255, 255, 255, 0.06); }