/* ============================================================================
   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:hover, .p-nav-links a[aria-current="page"] { 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);
}
.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:hover, .p-btn-primary:focus-visible {
  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:hover, .p-btn-ghost:focus-visible {
  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:hover, .p-btn-ink:focus-visible {
  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:hover, .p-btn-ink-ghost:focus-visible {
  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);
}
.p-btn-full:hover:not(:disabled) { background: #000; }
/* 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'; }
.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;
}
.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);
}
.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.
   ========================================================================= */