/* ============================================================================
   SWORT shared page shell
   ---------------------------------------------------------------------------
   Used by /team, /investors, /research-partnerships. These pages are content
   and form pages: no WebGL, no 3D, no scroll hijacking. They share the site's
   black navigation and footer and the warm-white reading surface from
   legal.css, so the surface system stays consistent across the whole site.
   ========================================================================= */

:root {
  --black:       #000000;
  --near-black:  #050505;
  --carbon:      #0c0c0d;
  --charcoal:    #191b1d;
  --white:       #ffffff;
  --gray-mid:    #888888;

  --paper:       #f2f2f2;
  --paper-ink:   #181818;
  --paper-muted: #55595f;
  --paper-rule:  #d8d8d8;
  --paper-tint:  #fafafa;
  --paper-sink:  #ebebeb;

  --focus-ring:  #ffffff;
  --max-width:   1200px;
  --measure:     760px;
  --section-pad: 96px;

  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --dur-micro:   0.16s;
  --dur-ctrl:    0.2s;
  --dur-sheet:   0.24s;
  --dur-reveal:  0.62s;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scrollbar-color: #333 #000; scrollbar-width: thin; }

body {
  background: var(--black);
  color: var(--white);
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 15px;
  line-height: 1.7;
  -webkit-text-size-adjust: 100%;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--white); color: var(--black);
  padding: 12px 20px; font-size: 13px; letter-spacing: 0.08em;
}
.skip-link:focus { left: 8px; top: 8px; }

.container { max-width: var(--max-width); margin: 0 auto; padding: 0 40px; }
section[id] { scroll-margin-top: 90px; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ── Navigation ─────────────────────────────────────────────────────────── */
.p-nav {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 16px 40px;
  background: rgba(5,5,5,0.94);
  border-bottom: 1px solid #1c1c1c;
  backdrop-filter: blur(8px);
}
.p-nav-logo {
  font-family: 'Bebas Neue', sans-serif; font-size: 26px;
  letter-spacing: 0.08em; color: var(--white);
}
.p-nav-links { display: flex; gap: 26px; list-style: none; }
.p-nav-links a {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #8a8a8a;
  transition: color var(--dur-ctrl) var(--ease-out);
}
.p-nav-links a[aria-current="page"] { color: var(--white); }
@media (hover: hover) and (pointer: fine) {
  .p-nav-links a:hover { color: var(--white); }
}
.p-nav-cta {
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 10px 18px; border: 1px solid var(--white); color: var(--white);
  transition: background var(--dur-ctrl) var(--ease-out), color var(--dur-ctrl) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .p-nav-cta:hover { background: var(--white); color: var(--black); }
}
@media (max-width: 900px) { .p-nav-links { display: none; } }

/* ── Formal company identity lockup (investor and government pages) ─────── */
.p-identity {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  padding: 18px 0 22px; margin-bottom: 30px;
  border-bottom: 1px solid #1c1c1c;
}
/* .p-identity-mark removed: the typed text mark was replaced by the extracted
   SWORT wordmark asset (.p-brandplate). Dead rule deleted rather than left to
   accumulate. */
.p-identity-rule { width: 1px; align-self: stretch; background: #2a2d31; }

/* Official supplied lockup on the two formal entity pages
   (/government-capabilities, /investors).

   Shown as its OWN block, not inline in the metadata strip. The asset is a
   brand CARD, not a bare glyph: hex emblem, SWORT wordmark with the trademark
   symbol, a constellation field, and the domain set very small in the corner.
   Squeezed into a 72px-tall identity chip the wordmark shrank to about 20px
   and the domain line became illegible noise, which wastes the asset. At
   160px tall the whole card reads as intended.

   Solid black background, no alpha, so it only ever sits on the dark hero.
   The hairline border makes it a deliberate plate rather than a seam against
   the slightly-lighter hero. */
.p-brandplate {
  display: block;
  width: fit-content;
  margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}
.p-brandplate picture { display: block; }
/* No border and no background fill. The asset is now a TRANSPARENT lockup, so
   framing it would put back the visible rectangle this change removed. The
   previous version used the flattened brand card, which carried its own opaque
   black field plus a constellation pattern and read as a boxed image. */
.p-brandplate img {
  display: block;
  height: clamp(64px, 8vw, 96px);
  width: auto;
  max-width: 100%;
}

/* With the lockup carrying the name above, the metadata strip no longer
   repeats the text mark, so its leading divider would dangle. */
.p-identity-nomark .p-identity-rule { display: none; }

.p-identity-meta {
  font-family: 'DM Mono', monospace; font-size: 10px; line-height: 1.75;
  letter-spacing: 0.10em; text-transform: uppercase; color: #8a8f96;
}
.p-identity-meta b { color: #d9d9d9; font-weight: 400; }
.s-paper .p-identity { border-bottom-color: var(--paper-rule); }
.s-paper .p-identity-rule { background: var(--paper-rule); }
.s-paper .p-identity-meta { color: var(--paper-muted); }
.s-paper .p-identity-meta b { color: var(--paper-ink); }
@media (max-width: 620px) {
  .p-identity-rule { display: none; }
  .p-identity { gap: 12px; }
}

/* ── Black hero ─────────────────────────────────────────────────────────── */
.p-hero { background: var(--near-black); padding: 84px 0 72px; border-bottom: 1px solid #1c1c1c; }
.p-hero-inner { max-width: 900px; }
.p-eyebrow {
  font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase;
  color: #7a7a7a; margin-bottom: 18px;
}
.p-title {
  font-family: 'Bebas Neue', sans-serif; font-weight: 400;
  font-size: clamp(38px, 5.6vw, 68px); line-height: 1.0;
  letter-spacing: 0.02em; color: var(--white); margin-bottom: 22px;
}
.p-hero-body {
  font-size: 14px; line-height: 1.85; color: var(--gray-mid);
  max-width: 620px; margin-bottom: 32px;
}
.p-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.p-btn {
  font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; padding: 15px 28px; min-height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid; cursor: pointer;
  transition: background var(--dur-ctrl) var(--ease-out),
              color var(--dur-ctrl) var(--ease-out),
              border-color var(--dur-ctrl) var(--ease-out);
}
/* Every variant declares colour, background, AND border for each state, so no
   state can inherit half its appearance from another rule. Active states move
   and shift tone; they never fade the whole element, because reducing opacity
   on a button reduces the contrast of its label at the same time. */
.p-btn-primary {
  background: var(--swort-white); color: var(--swort-black); border-color: var(--swort-white);
}
.p-btn-primary:focus-visible {
  background: transparent; color: var(--swort-white); border-color: var(--swort-white);
}
@media (hover: hover) and (pointer: fine) {
  .p-btn-primary:hover {
  background: transparent; color: var(--swort-white); border-color: var(--swort-white);
}
}
.p-btn-primary:active {
  background: var(--swort-silver); color: var(--swort-black); border-color: var(--swort-silver);
  transform: translateY(1px);
}

/* Border is --swort-gray, not --swort-gray-dark. gray-dark measured 2.71:1
   against the black surface, below the 3:1 WCAG 1.4.11 floor for a non-text UI
   component boundary, which left this button with no visible edge at rest.
   gray is 6.49:1. */
.p-btn-ghost {
  background: transparent; color: var(--swort-white-soft); border-color: var(--swort-gray);
}
.p-btn-ghost:focus-visible {
  color: var(--swort-white); border-color: var(--swort-white); background: rgba(255, 255, 255, 0.06);
}
@media (hover: hover) and (pointer: fine) {
  .p-btn-ghost:hover {
  color: var(--swort-white); border-color: var(--swort-white); background: rgba(255, 255, 255, 0.06);
}
}
.p-btn-ghost:active {
  color: var(--swort-black); background: var(--swort-white); border-color: var(--swort-white);
  transform: translateY(1px);
}

.p-btn-ink {
  background: var(--swort-graphite); color: var(--swort-white); border-color: var(--swort-graphite);
}
.p-btn-ink:focus-visible {
  background: var(--swort-black); color: var(--swort-white); border-color: var(--swort-black);
}
@media (hover: hover) and (pointer: fine) {
  .p-btn-ink:hover {
  background: var(--swort-black); color: var(--swort-white); border-color: var(--swort-black);
}
}
.p-btn-ink:active {
  background: var(--swort-graphite-light); color: var(--swort-white);
  border-color: var(--swort-graphite-light); transform: translateY(1px);
}

.p-btn-ink-ghost {
  background: transparent; color: var(--swort-graphite); border-color: var(--swort-graphite);
}
.p-btn-ink-ghost:focus-visible {
  background: var(--swort-graphite); color: var(--swort-white); border-color: var(--swort-graphite);
}
@media (hover: hover) and (pointer: fine) {
  .p-btn-ink-ghost:hover {
  background: var(--swort-graphite); color: var(--swort-white); border-color: var(--swort-graphite);
}
}
.p-btn-ink-ghost:active {
  background: var(--swort-black); color: var(--swort-white); border-color: var(--swort-black);
  transform: translateY(1px);
}

/* ── Surfaces ───────────────────────────────────────────────────────────── */
.s-paper {
  background: var(--paper); color: var(--paper-ink);
  padding: var(--section-pad) 0; border-top: 1px solid var(--paper-rule);
}
.s-charcoal {
  background: var(--charcoal); color: var(--white);
  padding: var(--section-pad) 0; border-top: 1px solid #26282c;
}
.s-black {
  background: var(--near-black); color: var(--white);
  padding: var(--section-pad) 0; border-top: 1px solid #1c1c1c;
}

.s-label {
  font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--paper-muted); margin-bottom: 16px;
}
.s-black .s-label, .s-charcoal .s-label { color: #7a7a7a; }
.s-head {
  font-family: 'Bebas Neue', sans-serif; font-weight: 400;
  font-size: clamp(30px, 4.2vw, 50px); line-height: 1.03;
  letter-spacing: 0.02em; margin-bottom: 18px;
}
.s-lede { font-size: 14px; line-height: 1.85; color: var(--paper-muted); max-width: 640px; }
.s-black .s-lede, .s-charcoal .s-lede { color: var(--gray-mid); }

/* ── Generic technical grid ─────────────────────────────────────────────── */
.p-grid { display: grid; gap: 1px; background: var(--paper-rule); border: 1px solid var(--paper-rule); margin-top: 40px; }
.p-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.p-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.p-cell { background: var(--paper-tint); padding: 30px 28px; }
.p-cell-num { font-size: 10px; letter-spacing: 0.2em; color: #6c6c6c; display: block; margin-bottom: 12px; }
.p-cell-title { font-size: 14px; font-weight: 500; margin-bottom: 10px; }
.p-cell-body { font-size: 13px; line-height: 1.8; color: var(--paper-muted); }

.s-black .p-grid, .s-charcoal .p-grid { background: #212121; border-color: #212121; }
.s-black .p-cell, .s-charcoal .p-cell { background: #0b0b0b; }
.s-black .p-cell-body, .s-charcoal .p-cell-body { color: #9a9a9a; }
.s-black .p-cell-num, .s-charcoal .p-cell-num { color: #5a5a5a; }

/* ── Definition rows ────────────────────────────────────────────────────── */
.p-rows { border-top: 1px solid var(--paper-rule); margin-top: 36px; }
.p-row {
  display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: 28px; padding: 22px 0; border-bottom: 1px solid var(--paper-rule);
}
.p-row-k { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--paper-muted); }
.p-row-v { font-size: 13.5px; line-height: 1.8; }

/* ── Callout ────────────────────────────────────────────────────────────── */
.p-callout {
  border-left: 3px solid var(--paper-ink); background: var(--paper-sink);
  padding: 18px 22px; margin: 26px 0; font-size: 13px; line-height: 1.8;
  color: var(--paper-muted);
}
.p-callout strong { color: var(--paper-ink); font-weight: 500; }
.s-black .p-callout, .s-charcoal .p-callout {
  border-left-color: #6a6a6a; background: #0d0d0f; color: #b0b0b0;
}
.s-black .p-callout strong, .s-charcoal .p-callout strong { color: #e2e2e2; }

/* ── Status tags ────────────────────────────────────────────────────────── */
.p-tag {
  display: inline-block; font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; padding: 4px 10px; border: 1px solid #c5c5c5;
  color: var(--paper-muted); background: #fff; white-space: nowrap;
}
.p-tag-done { color: var(--paper-ink); border-color: var(--paper-ink); }
.p-tag-now  { color: var(--paper-ink); background: var(--paper-ink); border-color: var(--paper-ink); }
.p-tag-now  { color: var(--paper); }

/* ── Forms on warm white ────────────────────────────────────────────────── */
.p-form-surface {
  background: var(--paper-tint); border: 1px solid var(--paper-rule);
  padding: 40px 40px 36px; margin-top: 40px;
}
.p-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
.p-field { margin-bottom: 26px; position: relative; }
.p-field.full { grid-column: 1 / -1; }
.p-field label {
  display: block; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--paper-muted); margin-bottom: 8px;
}
.p-req { color: #a33; }
.p-opt { color: #6c6c6c; letter-spacing: 0.08em; }
.p-field input, .p-field select, .p-field textarea {
  width: 100%; background: transparent; border: none;
  border-bottom: 1px solid #c5c5c5; color: var(--paper-ink);
  font-family: 'DM Mono', monospace; font-size: 14px; padding: 9px 2px;
  transition: border-color var(--dur-ctrl) var(--ease-out);
}
.p-field textarea { background: #fff; border: 1px solid #d0d0d0; padding: 10px 12px; min-height: 110px; resize: vertical; }
.p-field select { cursor: pointer; }
.p-field select option { background: #fff; color: var(--paper-ink); }
.p-field input:focus, .p-field select:focus, .p-field textarea:focus { border-color: var(--paper-ink); }
.p-field input::placeholder, .p-field textarea::placeholder { color: #6c6c6c; }
.p-field .p-err { display: none; font-size: 11px; color: #8a2b2b; margin-top: 5px; }
.p-field.has-error input, .p-field.has-error select, .p-field.has-error textarea { border-color: #a33; }
.p-field.has-error .p-err { display: block; }

.p-btn-full {
  width: 100%; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 17px 32px; min-height: 52px; cursor: pointer;
  background: var(--paper-ink); color: var(--paper); border: 1px solid var(--paper-ink);
  transition: background var(--dur-ctrl) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  /* A real inversion, not a shade. This went from #181818 to #000, a change of
     24 levels on a dark button: technically a hover state, visually nothing,
     which is why the Request Investor Materials control read as having no
     animation at all. It now inverts to the paper surface the way every other
     filled button on the site does. */
  .p-btn-full:hover:not(:disabled) {
    background: var(--paper);
    color: var(--paper-ink);
    border-color: var(--paper-ink);
  }
  .p-btn-full:active:not(:disabled) {
    background: #e2e2e2;
    color: var(--paper-ink);
    border-color: #e2e2e2;
  }
}
/* Disabled: recolour rather than fade. opacity:0.55 dropped the label's
   contrast to roughly 2.4:1 and made it unreadable. */
.p-btn-full:disabled {
  background: var(--swort-gray-dark); color: var(--swort-white-muted);
  border-color: var(--swort-gray-dark); cursor: default;
}

.p-legal-note { font-size: 11px; line-height: 1.7; color: var(--paper-muted); margin-top: 12px; text-align: center; }
.p-legal-note a { color: var(--paper-ink); text-decoration: underline; text-underline-offset: 3px; }

.p-form-error { display: none; font-size: 12px; color: #8a2b2b; padding: 12px 0; }
.p-form-success {
  display: none; border: 1px solid var(--paper-rule); background: var(--paper-sink);
  padding: 26px 24px; margin-top: 8px;
}
.p-form-success h3 { font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 12px; }
.p-form-success p { font-size: 13px; line-height: 1.85; color: var(--paper-muted); margin-bottom: 10px; }
.p-form-success p:last-child { margin-bottom: 0; }

/* Progressive disclosure */
.p-more { border: 1px solid var(--paper-rule); background: var(--paper-tint); margin: 6px 0 20px; }
.p-more > summary {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--paper-muted); padding: 15px 18px; cursor: pointer; list-style: none;
  min-height: 44px; display: flex; align-items: center;
  transition: color var(--dur-ctrl) var(--ease-out);
}
.p-more > summary::-webkit-details-marker { display: none; }
.p-more > summary::before { content: '+'; width: 18px; color: #6c6c6c; }
.p-more[open] > summary::before { content: '\2212'; }
@media (hover: hover) and (pointer: fine) {
  .p-more > summary:hover { color: var(--paper-ink); }
}
.p-more-inner { padding: 4px 18px 8px; }

/* ── Footer ───────────────────────────────────────────────────────────────
   MOVED OUT. Every footer rule now lives in assets/css/footer.css, which is the
   single source of truth for both footer markup families.

   Why the rules were deleted rather than left and overridden: this block
   declared `.p-foot-top { display: flex; flex-wrap: wrap }` and
   `.p-foot-cols { display: flex; gap: 56px; flex-wrap: wrap }`. With four
   columns plus the brand block there was never room, so the columns wrapped
   one per row and the desktop footer ran 1965px tall, 2.18x the viewport.

   footer.css replaced that with a grid, but page.css loads AFTER footer.css, so
   on equal specificity these declarations kept winning and the footer stayed
   broken. Reordering the links or adding !important would both have been a race
   rather than a fix. The duplicate is gone instead.

   This block also set the footer link font-size to a hard 12px while footer.css
   sets var(--type-caption), which is 12.48px at desktop, so one link rendered a
   different size from its neighbours. One owner, one value. */

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .p-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  :root { --section-pad: 64px; }
  .container { padding: 0 20px; }
  .p-nav { padding: 14px 20px; }
  .p-hero { padding: 56px 0 48px; }
  .p-grid-2, .p-grid-3 { grid-template-columns: 1fr; }
  .p-row { grid-template-columns: 1fr; gap: 8px; }
  .p-form-grid { grid-template-columns: 1fr; }
  .p-form-surface { padding: 26px 20px 24px; }
  .p-btn { width: 100%; }
  .p-foot-cols { gap: 32px; }
}

/* ── Motion language ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .p-nav, .p-foot, .skip-link, .p-form-surface { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ── Founder links ─────────────────────────────────────────────────────────
   Neutral, never browser-default blue. Affordance comes from the underline and
   the offset arrow, not from colour, and the link is deliberately the same size
   as body copy so it does not outweigh the founder's actual role line above it.
   No social icon badge. */
.t-links { margin-top: var(--space-md); }
.t-link {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4em;
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: var(--type-label);
  line-height: 1.5;
  color: var(--paper-text);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  /* 44px target without inflating the visible text */
  padding-block: 0.55rem;
}
@media (hover: hover) and (pointer: fine) {
  .t-link:hover { color: var(--swort-black); text-decoration-thickness: 2px; }
}
.t-link:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-paper);
  outline-offset: 3px;
}
.t-link-ext {
  font-size: 0.9em;
  transition: transform var(--dur-ctrl) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .t-link:hover .t-link-ext { transform: translate(2px, -2px); }
}

/* Compact usage caption for the 3D viewer. Deliberately not a heading: it is an
   instruction, and it sits at caption scale so it cannot compete with the one
   page title above it. */
.hw-usage {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: var(--type-caption);
  line-height: var(--leading-body);
  color: var(--swort-gray);
  margin: 0 0 var(--space-sm);
  max-inline-size: 60ch;
}

/* ── Image compositions live in media.css ─────────────────────────────────
   .p-hero-split / .ssil-split / .t-founder-media moved to assets/css/media.css.
   They were shared with index.html, which does not load this file, so the SSIL
   photograph rendered unstyled at full container width. See media.css for the
   measurements and for why page.css was not simply added to index.html.
   ========================================================================= */

/* ── Founder contact routing ──────────────────────────────────────────────
   Two channels shown as a definition list, because that is what this is: a
   purpose paired with the address that serves it. Deliberately restrained, and
   deliberately NOT a button pair: the company intake must stay the dominant
   route, so this reads as reference information rather than a competing CTA.
   Uses the existing paper-surface link colour, so no new colour is introduced
   and no browser-default blue appears. */
.t-founder-contact {
  margin: clamp(1.5rem, 2.6vw, 2rem) 0 0;
  padding-top: clamp(1.1rem, 2vw, 1.5rem);
  border-top: 1px solid var(--paper-rule);
  display: grid;
  gap: 0.9rem;
}
.t-contact-row { margin: 0; }
.t-founder-contact dt {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--paper-muted); margin: 0 0 0.3rem;
}
.t-founder-contact dd {
  margin: 0;
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 13px; line-height: 1.6;
}
.t-founder-contact a {
  color: var(--paper-ink);
  text-decoration: underline; text-underline-offset: 3px;
}
@media (hover: hover) and (pointer: fine) {
  .t-founder-contact a:hover { color: #000; }
}
.t-founder-contact a:focus-visible { outline: 2px solid var(--paper-ink); outline-offset: 2px; }

/* Executive contact line on the investor access section. Same size and colour
   as the surrounding lede so it reads as a note, not a second CTA. */
.inv-exec-contact { margin-top: 0.9rem; }
.inv-exec-contact a {
  color: inherit; text-decoration: underline; text-underline-offset: 3px;
}
@media (hover: hover) and (pointer: fine) {
  .inv-exec-contact a:hover { color: var(--swort-white); }
}

/* ── Investor evidence: metrics and charts ────────────────────────────────
   Drawn with ordinary elements and no charting library, per the constraint
   that this page must not pull in a dependency to draw two bars. The visual
   language is the site's: neutral greys, square corners, one-pixel rules, no
   gradient, no glow, no accent hue. */
.inv-metrics {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; background: var(--p-rule, #2a2a2a);
  border: 1px solid var(--p-rule, #2a2a2a);
  margin: 44px 0 0;
}
.inv-metric { background: #0d0d0d; padding: 26px 24px 22px; }
.inv-metric-fig {
  font-family: 'Bebas Neue', sans-serif; font-size: clamp(40px, 4.4vw, 60px);
  line-height: 0.94; letter-spacing: 0.01em; color: #f4f4f4;
  font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: 4px;
}
.inv-metric-fig .inv-unit {
  font-family: 'DM Mono', monospace; font-size: 15px; color: #9a9a9a; letter-spacing: 0;
}
.inv-metric-label {
  font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: #d2d2d2; margin-top: 14px;
}
.inv-metric-sub {
  font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 0.06em;
  color: #838383; margin-top: 6px; line-height: 1.6;
}

.inv-charts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px; background: var(--p-rule, #2a2a2a);
  border: 1px solid var(--p-rule, #2a2a2a); border-top: 0;
}
.inv-chart { background: #0d0d0d; padding: 26px 24px 24px; margin: 0; }
.inv-chart-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; padding-bottom: 16px; border-bottom: 1px solid #242424; flex-wrap: wrap;
}
.inv-chart-title {
  font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: #ededed;
}
.inv-chart-meta {
  font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 0.08em; color: #8a8a8a;
}
.inv-chart-note {
  font-family: 'DM Mono', monospace; font-size: 10px; line-height: 1.75;
  color: #838383; margin: 18px 0 0; max-inline-size: none;
}
.inv-chart-note strong { color: #d8d8d8; font-weight: 400; }

.inv-bars { margin-top: 20px; display: flex; flex-direction: column; gap: 16px; }
.inv-bar-row {
  display: grid; grid-template-columns: 148px minmax(0, 1fr) 34px;
  align-items: center; gap: 14px;
}
.inv-bar-key {
  font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: #a6a6a6;
}
.inv-bar-track { display: block; height: 10px; background: #1c1c1c; position: relative; }
.inv-bar-fill {
  display: block; height: 100%; width: 0; background: #e6e6e6;
  transition: width 900ms cubic-bezier(.2,.8,.2,1);
}
.inv-bar-row + .inv-bar-row .inv-bar-fill { background: #6f6f6f; }
.inv-bar-val {
  font-family: 'DM Mono', monospace; font-size: 12px; color: #f0f0f0;
  text-align: right; font-variant-numeric: tabular-nums;
}

.inv-range { margin-top: 22px; }
.inv-range-scale {
  display: flex; justify-content: space-between;
  font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: 0.08em;
  color: #6f6f6f; margin-bottom: 7px;
}
.inv-range-track { height: 10px; background: #1c1c1c; position: relative; }
.inv-range-band {
  position: absolute; top: 0; bottom: 0; left: 0; width: 0; background: #e6e6e6;
  transition: left 700ms cubic-bezier(.2,.8,.2,1), width 900ms cubic-bezier(.2,.8,.2,1);
}
.inv-range-read {
  font-family: 'Bebas Neue', sans-serif; font-size: 34px; color: #f4f4f4;
  margin-top: 16px; letter-spacing: 0.02em; font-variant-numeric: tabular-nums;
}
.inv-range-read .inv-unit {
  font-family: 'DM Mono', monospace; font-size: 11px; color: #9a9a9a;
  letter-spacing: 0.1em; margin-left: 8px;
}

@media (max-width: 900px) {
  .inv-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inv-charts  { grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--p-rule, #2a2a2a); }
  .inv-bar-row { grid-template-columns: 116px minmax(0, 1fr) 30px; gap: 10px; }
}
@media (max-width: 520px) {
  .inv-metrics { grid-template-columns: minmax(0, 1fr); }
}
/* Reduced motion: the values are present immediately, nothing counts or grows. */
@media (prefers-reduced-motion: reduce) {
  .inv-bar-fill, .inv-range-band { transition: none; }
}

/* ── Investor flight-data charts ──────────────────────────────────────────
   Three figures, drawn as plain SVG. The palette is monochrome by enforced
   rule, so every segment is directly labelled: with no hue to carry identity,
   the key is doing the work the colour cannot. */
.inv-figs {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px; background: var(--p-rule, #2a2a2a);
  border: 1px solid var(--p-rule, #2a2a2a); border-bottom: 0;
  margin-top: 44px;
}
.inv-fig { background: #0d0d0d; padding: 26px 24px 24px; margin: 0; }
.inv-fig-wide { grid-column: 1 / -1; }
.inv-fig-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; padding-bottom: 16px; border-bottom: 1px solid #242424; flex-wrap: wrap;
}
.inv-plot { margin-top: 18px; }
.inv-svg { display: block; width: 100%; height: auto; max-width: 320px; margin: 0 auto; }
.inv-svg-area { max-width: none; }
.inv-svg-center {
  font-family: 'Bebas Neue', sans-serif; font-size: 30px; fill: #f4f4f4; letter-spacing: 0.02em;
}
.inv-svg-centersub {
  font-family: 'DM Mono', monospace; font-size: 9px; fill: #8a8a8a; letter-spacing: 0.14em;
  text-transform: uppercase;
}
.inv-svg-tick, .inv-svg-endlabel {
  font-family: 'DM Mono', monospace; font-size: 9px; fill: #7e7e7e; letter-spacing: 0.06em;
}
.inv-svg-endlabel { fill: #e8e8e8; font-size: 10px; }

.inv-key { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.inv-key li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.inv-key-swatch { width: 10px; height: 10px; display: block; }
.inv-key-name {
  font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 0.08em;
  color: #b0b0b0; text-transform: uppercase;
}
.inv-key-val {
  font-family: 'DM Mono', monospace; font-size: 12px; color: #f0f0f0;
  font-variant-numeric: tabular-nums;
}
/* The numbers stay reachable when the SVG is not. */
.inv-sr-table { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 900px) {
  .inv-figs { grid-template-columns: minmax(0, 1fr); }
}