/* Bravo 9 LLC — shared stylesheet
   Design system carried across from basira.bravo9.net: navy ground,
   serif headlines, gold accents, square-ish corners. Every page on the
   site loads this one file; page-specific rules live at the bottom. */

:root {
  --navy: #0F1B3D;
  --navy-deep: #0A1330;
  --navy-raise: #16244D;
  --navy-line: #25355F;
  --gold: #C9A227;
  --gold-soft: #E0C36A;
  --gold-ink: #7A6114;      /* gold for text on light backgrounds (AA contrast) */
  --white: #FFFFFF;
  --paper: #F5F3EE;
  --ink: #0F1B3D;
  --text-on-dark: #D7DCE8;
  --muted-on-dark: #9AA5BF;
  --muted-on-light: #4A5572;
  --rule-on-light: rgba(15, 27, 61, 0.15);

  /* Capability photography is duotoned in CSS, not baked into the files.
     Change these two and all three photographs move together. */
  --duo-shadow: #0F1B3D;        /* page navy carries the shadows */
  --duo-highlight: #A8CBE6;     /* cool light for the highlights */
  --duo-contrast: 1.22;         /* pushed up: structure has to survive the
                                   colour being stripped out */
  --mark-line: #5CC8E0;         /* analytical marks, matching the terrain graphic */
  --mark-key: var(--gold);      /* reserved for the one key mark per image */

  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;

  --wrap: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
  --section-y: clamp(72px, 10vw, 128px);
}

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

html { scroll-behavior: smooth; scroll-padding-top: 72px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--navy);
  color: var(--text-on-dark);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--serif);
  color: var(--white);
  font-weight: 600;
  line-height: 1.12;
  margin: 0;
  letter-spacing: -0.01em;
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }

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

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 8px;
  background: var(--gold);
  color: var(--navy);
  padding: 8px 14px;
  z-index: 100;
}
.skip:focus { left: 8px; }

/* Available to screen readers, out of the visual layout: for headings a
   section needs for its accessible name but that would read as
   duplication on screen. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Header (shared shell) ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10, 19, 48, 0.88);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--navy-line);
}

.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
/* White card behind the mark: its "B" is navy and would otherwise sit
   invisibly on the navy header. */
.wordmark-mark {
  display: inline-flex;
  align-items: center;
  padding: 5px 7px;
  background: var(--white);
  border: 1.5px solid var(--gold);
}
.wordmark-mark img {
  display: block;
  height: 24px;
  width: auto;
}
.wordmark-text {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 600;
  color: var(--white);
  letter-spacing: 0.01em;
}

.nav {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 14px;
  font-weight: 500;
}
.nav a {
  text-decoration: none;
  color: var(--muted-on-dark);
  transition: color 0.15s;
}
.nav a:hover { color: var(--white); }
.nav a[aria-current="page"] { color: var(--white); }
.nav .nav-cta {
  color: var(--gold);
  border: 1px solid var(--gold);
  padding: 7px 16px;
}
.nav .nav-cta:hover { background: var(--gold); color: var(--navy); }

/* ---------- Mobile navigation ----------

   The button only exists once JS has added .js-nav. Without it the list
   below simply wraps under the header and every link stays reachable. */

.nav-toggle { display: none; }

@media (max-width: 900px) {
  /* No-JS fallback: header grows and the links wrap beneath it. */
  .header-row {
    flex-wrap: wrap;
    height: auto;
    padding-top: 12px;
    padding-bottom: 12px;
    row-gap: 12px;
  }
  .nav { flex-wrap: wrap; gap: 12px 20px; }

  /* With JS: collapse into a panel behind a 44px button. */
  .js-nav .header-row {
    flex-wrap: nowrap;
    height: 64px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .js-nav .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: none;
    border: 1px solid var(--navy-line);
    color: var(--gold);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
  }
  .js-nav .nav-toggle:hover { border-color: var(--gold); }
  .js-nav .nav-toggle[aria-expanded="true"] {
    border-color: var(--gold);
    background: rgba(201, 162, 39, 0.12);
  }

  /* Three bars, becoming an X when open. */
  .nav-toggle-bars,
  .nav-toggle-bars::before,
  .nav-toggle-bars::after {
    display: block;
    width: 20px;
    height: 2px;
    background: currentColor;
    transition: transform 0.2s ease, opacity 0.15s ease;
  }
  .nav-toggle-bars { position: relative; }
  .nav-toggle-bars::before,
  .nav-toggle-bars::after {
    content: "";
    position: absolute;
    left: 0;
  }
  .nav-toggle-bars::before { top: -6px; }
  .nav-toggle-bars::after { top: 6px; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: translateY(6px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { transform: translateY(-6px) rotate(-45deg); }

  .js-nav .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--navy-deep);
    border-top: 2px solid var(--gold);
    border-bottom: 1px solid var(--navy-line);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
  }
  .js-nav .site-nav[data-open="true"] {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
  }
  .js-nav .site-nav .nav {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 6px var(--gutter) 20px;
  }
  .js-nav .site-nav .nav li { display: block; }
  .js-nav .site-nav .nav a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 0;
    font-size: 16px;
    border-bottom: 1px solid var(--navy-line);
  }
  .js-nav .site-nav .nav .nav-cta {
    justify-content: center;
    margin-top: 16px;
    padding: 12px 16px;
    border: 1px solid var(--gold);
  }
}

@media (prefers-reduced-motion: reduce) {
  .js-nav .site-nav,
  .js-nav .site-nav[data-open="true"] { transition: none !important; }
  .nav-toggle-bars,
  .nav-toggle-bars::before,
  .nav-toggle-bars::after { transition: none !important; }
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  padding: 14px 26px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.btn-gold { background: var(--gold); color: var(--navy); border-color: var(--gold); }
.btn-gold:hover { background: var(--gold-soft); border-color: var(--gold-soft); }
.btn-ghost { color: var(--white); border-color: var(--navy-line); }
.btn-ghost:hover { border-color: var(--white); }

/* ---------- Shared section parts ---------- */

.section { padding: var(--section-y) 0; }

.section-num,
.eyebrow {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
}

.section h2 {
  font-size: clamp(32px, 4.4vw, 52px);
  max-width: 24ch;
  text-wrap: balance;
}

.section-head { margin-bottom: clamp(40px, 5vw, 64px); }

/* Two sections on the same ground would otherwise stack two full pads
   between them, reading as twice the gap of a section that ends at a colour
   change. These halve each side so every gap reads the same. */
.section.tight-top { padding-top: calc(var(--section-y) / 2); }
.section.tight-bottom { padding-bottom: calc(var(--section-y) / 2); }

/* ---------- Footer (shared shell) ---------- */

.site-footer {
  background: var(--navy-deep);
  border-top: 3px solid var(--gold);
  font-size: 15px;
  color: var(--muted-on-dark);
}

.footer-top {
  display: grid;
  grid-template-columns: 1.1fr 1.4fr;
  gap: clamp(32px, 5vw, 72px);
  padding-top: clamp(48px, 6vw, 72px);
  padding-bottom: clamp(36px, 4vw, 48px);
}

.footer-brand .wordmark { margin-bottom: 20px; }

.footer-address {
  font-style: normal;
  line-height: 1.7;
}
.footer-address a { color: var(--text-on-dark); text-decoration: none; }
.footer-address a:hover { color: var(--gold); }
.footer-company {
  font-family: var(--serif);
  font-size: 19px;
  color: var(--white);
  display: block;
  margin-bottom: 6px;
}

.footer-reg {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 32px;
  margin: 0;
}
.footer-reg > div { min-width: 0; }
.footer-reg dt {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 4px;
}
.footer-reg dd {
  margin: 0;
  color: var(--text-on-dark);
  overflow-wrap: anywhere;
}
.footer-reg .wide { grid-column: 1 / -1; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 28px;
  padding-top: 22px;
  padding-bottom: 28px;
  border-top: 1px solid var(--navy-line);
  font-size: 14px;
}
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
}
.footer-legal a {
  color: var(--text-on-dark);
  text-decoration: none;
  border-bottom: 1px solid var(--navy-line);
  transition: color 0.15s, border-color 0.15s;
}
.footer-legal a:hover { color: var(--gold); border-color: var(--gold); }
.footer-tag { font-family: var(--serif); font-style: italic; color: var(--gold); }

@media (max-width: 860px) {
  .footer-top { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .footer-reg { grid-template-columns: 1fr; }
}

/* ---------- Legal pages ---------- */

/* Long statutory text reads badly on the navy ground, so these pages put
   the document itself on the same paper tone used elsewhere in the system
   while the shell above and below stays navy. */
.legal {
  background: var(--paper);
  color: var(--ink);
  padding: clamp(48px, 7vw, 88px) 0 clamp(64px, 8vw, 104px);
}

.legal-wrap {
  max-width: 820px;
  margin: 0 auto;
}

.legal-head {
  padding-bottom: clamp(24px, 3vw, 32px);
  margin-bottom: clamp(32px, 4vw, 44px);
  border-bottom: 1px solid var(--rule-on-light);
}
.legal .eyebrow { color: var(--gold-ink); }
.legal h1 {
  color: var(--ink);
  font-size: clamp(30px, 4vw, 46px);
  text-wrap: balance;
}
.legal-meta {
  margin-top: 18px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--muted-on-light);
}
.legal-meta span { display: block; }

.legal-body {
  font-size: 17px;
  line-height: 1.75;
  color: var(--ink);
}
.legal-body > p + p { margin-top: 1.1em; }

.legal-body section { margin-top: clamp(32px, 4vw, 44px); }
.legal-body h2 {
  color: var(--ink);
  font-size: clamp(20px, 2.2vw, 25px);
  line-height: 1.3;
  margin-bottom: 14px;
}
.legal-body h2 .legal-num {
  font-family: var(--mono);
  font-size: 0.7em;
  font-weight: 500;
  color: var(--gold-ink);
  margin-right: 10px;
  letter-spacing: 0.04em;
}
.legal-body h3 {
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  margin: 1.4em 0 0.5em;
}
.legal-body section > p + p,
.legal-body section > p + ul,
.legal-body ul + p { margin-top: 1.1em; }

.legal-body ul {
  list-style: none;
  margin: 1em 0 0;
  padding: 0;
}
.legal-body li {
  position: relative;
  padding-left: 22px;
  margin-top: 0.6em;
}
.legal-body li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 9px;
  height: 1.5px;
  background: var(--gold);
}
.legal-body li ul { margin-top: 0.4em; }
.legal-body li li::before {
  width: 5px;
  height: 5px;
  top: 0.62em;
  background: var(--muted-on-light);
}

.legal-body strong { font-weight: 600; }
.legal-body a { color: var(--ink); text-decoration-color: var(--gold); }
.legal-body a:hover { color: var(--gold-ink); }


.legal-contact {
  margin-top: 1.1em;
  padding: 20px 24px;
  background: var(--white);
  border-left: 3px solid var(--gold);
  font-style: normal;
  line-height: 1.7;
}
.legal-contact a { color: var(--ink); }

/* ---------- Homepage ---------- */

.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 60% at 85% 10%, rgba(201, 162, 39, 0.10), transparent 60%),
    linear-gradient(180deg, var(--navy-deep) 0%, var(--navy) 100%);
}
/* Faint coordinate grid: a plotting sheet, not a photo */
.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 90% 80% at 70% 30%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 70% 30%, #000 30%, transparent 80%);
  pointer-events: none;
}
.hero-inner {
  position: relative;
  padding-top: clamp(72px, 11vw, 132px);
  padding-bottom: clamp(56px, 7vw, 88px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}

/* Cognitive terrain framework graphic. Its node labels are small, so it is
   only shown at sizes where they stay legible -- see the width rules below. */
.hero-figure {
  position: relative;          /* anchors the Earth layer behind it */
  display: flex;
  justify-content: center;     /* centred in its column, not flush right */
  align-items: center;
  justify-self: center;
  width: 100%;
  line-height: 0;
  transition: filter 0.2s;
  isolation: auto;             /* let the Earth layer blend with the hero */
}
.hero-figure img {
  position: relative;
  z-index: 1;
  display: block;
  width: min(96%, 560px);      /* nearly fills the column, modest margin */
  aspect-ratio: 1 / 1;         /* stays perfectly round at every width */
  height: auto;
  object-fit: contain;
  border-radius: 50%;          /* clips only transparent corners; keeps glow
                                  and focus ring circular, not rectangular */
  transition: filter 0.25s ease, box-shadow 0.25s ease;
}

/* The effect goes on the image, never on .hero-figure: a filter on the
   ancestor would create an isolated group and stop the Earth layer's screen
   blend from seeing the hero behind it -- which is what drew a black
   rectangle on hover. */
.hero-figure:hover img {
  filter: brightness(1.06);
  box-shadow: 0 0 42px 8px rgba(201, 162, 39, 0.16);
}

/* Keyboard focus stays visible, but round rather than a rectangle round the
   link box. */
.hero-figure:focus-visible { outline: none; }
.hero-figure:focus-visible img {
  box-shadow: 0 0 0 3px var(--gold), 0 0 0 9px rgba(201, 162, 39, 0.28);
}

/* Earth crescent behind the framework graphic.

   screen blending drops the source's pure-black field entirely, so only the
   lit crescent shows against the navy -- lowering opacity alone would leave a
   dark grey rectangle. Scaled well past the terrain circle and pushed off
   centre so the crescent arcs out from behind one edge. */
.hero-earth {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(96%, 560px);
  aspect-ratio: 1 / 1;
  margin: -0.5px 0 0 -0.5px;
  /* The source is a full disc now, not a crescent: scaled well past the
     graphic and pushed up-right so only one limb arcs in behind it. */
  transform: translate(-50%, -50%) scale(2.4) translate(40%, -22%);
  background: url("earth-crescent.jpg") center / contain no-repeat;
  mix-blend-mode: screen;
  opacity: 0.35;   /* 1400px source; the softness cap is gone */
  pointer-events: none;
  z-index: 0;
}

@media (max-width: 1040px) {
  /* Too narrow for two columns: stack it under the copy, still large
     enough to read the node labels. */
  .hero-inner { grid-template-columns: 1fr; }
  .hero-figure img,
  .hero-earth { width: min(520px, 88vw); }
}

@media (max-width: 700px) {
  /* Below this the labels inside the graphic fall under ~7px and stop being
     readable, so the graphic is dropped rather than shown illegibly. */
  .hero-figure { display: none; }
}
.hero h1 {
  font-size: clamp(24px, 3.5vw, 46px);
  line-height: 1.12;
  max-width: none;   /* each line is its own span; the grid column sets the measure */
  text-wrap: balance;
}
.hero h1 .hero-line { display: block; }
.hero h1 .hero-line--gold { color: var(--gold); }
.hero-sub {
  margin-top: 30px;
  max-width: 62ch;
  font-size: clamp(17px, 1.6vw, 20px);
  color: var(--muted-on-dark);
}
.hero-tagline {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-top: 30px;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(20px, 2vw, 26px);
  color: var(--white);
}
.hero-tagline::before {
  content: "";
  flex: none;
  width: 40px;
  height: 1.5px;
  background: var(--gold);
  transform: translateY(-6px);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 40px;
}

/* Credentials strip */
.creds {
  background: var(--navy-raise);
  border-top: 1px solid var(--navy-line);
  border-bottom: 1px solid var(--navy-line);
}
.creds ul {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 0;
  padding: 18px 0;
}
.creds li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 clamp(16px, 2.4vw, 32px);
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-on-dark);
}
.creds li + li { border-left: 1px solid var(--navy-line); }
.creds li:first-child { padding-left: 0; }
.creds li::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  background: var(--gold);
  transform: rotate(45deg);
}
@media (max-width: 720px) {
  .creds li { flex: 1 1 100%; padding-left: 0; border-left: 0; }
}

/* Statistics */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--navy-line);
  border: 1px solid var(--navy-line);
}
.stat {
  background: var(--navy);
  padding: clamp(26px, 3vw, 38px) clamp(20px, 2.4vw, 30px);
}
.stat-value {
  display: block;
  font-family: var(--serif);
  font-size: clamp(38px, 4.6vw, 58px);
  font-weight: 700;
  line-height: 1;
  color: var(--gold);
  letter-spacing: -0.02em;
}
.stat-label {
  display: block;
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white);
}
.stat-note {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  color: var(--muted-on-dark);
}
@media (max-width: 860px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .stats-grid { grid-template-columns: 1fr; } }

/* Who we are (light band) */
.who {
  background: var(--paper);
  color: var(--ink);
}
.who h2, .who h3 { color: var(--ink); }
.who .section-num { color: var(--gold-ink); }
.who-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.who-body p {
  font-size: 18px;
  color: var(--muted-on-light);
}
.who-body p + p { margin-top: 1.1em; }
.who-body strong { color: var(--ink); font-weight: 600; }
@media (max-width: 900px) { .who-grid { grid-template-columns: 1fr; } }

/* Capability cards */
.cap-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--navy-line);
  border: 1px solid var(--navy-line);
}
.cap-card {
  display: block;
  position: relative;
  background: var(--navy);
  padding: clamp(28px, 3vw, 40px);
  text-decoration: none;
  transition: background 0.15s;
}
.cap-card:hover { background: var(--navy-raise); }
.cap-num {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--gold);
}
.cap-card h3 {
  margin: 16px 0 12px;
  font-size: clamp(22px, 2.2vw, 27px);
  max-width: 24ch;
}
.cap-card p { color: var(--muted-on-dark); font-size: 16px; }

/* The wide block spans both columns, so its insides are laid out as two
   columns of their own: number and title on the left rail, description and
   link on the right. Stretching a normal card's single column across the
   full width would leave one very long line and a lot of dead space. */
.cap-card--wide { grid-column: 1 / -1; }
.cap-card-head { min-width: 0; }
.cap-card-body { min-width: 0; }
.cap-card--wide h3 { margin-top: 16px; max-width: 18ch; }
.cap-card--wide .cap-card-body p { color: var(--muted-on-dark); font-size: 16px; }
.cap-card--wide .cap-more { margin-top: 18px; }

@media (min-width: 801px) {
  .cap-card--wide {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(28px, 4vw, 64px);
    align-items: start;
  }
  .cap-card--wide h3 { margin-top: 12px; }
  .cap-card--wide .cap-card-body p { max-width: 62ch; }
}
.cap-naics {
  display: block;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--navy-line);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-on-dark);
}
.cap-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--gold);
}
.cap-card:hover .cap-more { color: var(--gold-soft); }
@media (max-width: 800px) { .cap-grid { grid-template-columns: 1fr; } }


/* Why choose */
.why-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 44px);
}
.why-list li {
  padding-top: 22px;
  border-top: 2px solid var(--gold);
  color: var(--muted-on-dark);
  font-size: 16px;
}
@media (max-width: 860px) { .why-list { grid-template-columns: 1fr; } }

/* Closing section */
.close {
  background: var(--navy-deep);
  border-top: 3px solid var(--gold);
}
.close-grid {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;   /* card takes the wider share so
                                            its text wraps less */
  gap: clamp(36px, 5vw, 80px);
  align-items: stretch;                   /* both columns run the same height */
}

/* The statement column was ending well short of the card, leaving a gap under
   it. Letting it fill the height and pushing the closing line to the bottom
   uses that space and lands the two columns level. */
.close-statement {
  display: flex;
  flex-direction: column;
}
.close-statement .decision-partner { margin-top: auto; padding-top: 1.1em; }
.close-statement h2 {
  font-size: clamp(28px, 3.2vw, 40px);
  max-width: 18ch;
  margin-bottom: 24px;
}
/* :not(.section-num) so the section label keeps the shared label styling
   -- this rule is more specific than .section-num and was overriding it. */
.close-statement p:not(.section-num) {
  font-size: clamp(18px, 1.8vw, 21px);
  color: var(--text-on-dark);
}
.close-statement p + p:not(.section-num) { margin-top: 1.1em; }
.close-statement .decision-partner {
  font-family: var(--serif);
  font-size: clamp(24px, 2.6vw, 32px);
  color: var(--white);
  line-height: 1.25;
}
.close-statement .decision-partner em { font-style: italic; color: var(--gold); }

.ask {
  padding: clamp(26px, 3vw, 36px);
  background: var(--navy-raise);
  border: 1px solid var(--navy-line);
}
.ask h3 {
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
}
.ask ol { display: grid; gap: 14px; }
.ask li {
  position: relative;
  padding-left: 26px;
  font-size: 16px;
  color: var(--text-on-dark);
}
.ask li::before {
  content: "\25B8";
  position: absolute;
  left: 0;
  top: -1px;
  color: var(--gold);
}
.ask-contact {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--navy-line);
  font-style: normal;
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted-on-dark);
}
.ask-contact .ask-name {
  display: block;
  font-family: var(--serif);
  font-size: 19px;
  color: var(--white);
}
.ask-contact a { color: var(--text-on-dark); text-decoration: none; }
.ask-contact a:hover { color: var(--gold); }
.ask .btn { margin-top: 26px; width: 100%; text-align: center; }
@media (max-width: 900px) { .close-grid { grid-template-columns: 1fr; } }

/* ---------- Interior page head ---------- */

.page-head {
  padding: clamp(56px, 7vw, 100px) 0 clamp(40px, 5vw, 60px);
  border-bottom: 1px solid var(--navy-line);
  background:
    radial-gradient(ellipse 70% 70% at 88% 0%, rgba(201, 162, 39, 0.10), transparent 62%),
    var(--navy-deep);
}
.page-head h1 {
  font-size: clamp(38px, 5.4vw, 66px);
  max-width: 16ch;
}

/* Two-column section: heading rail on the left, body on the right */
.split-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.split-body p { font-size: 18px; color: var(--muted-on-dark); }
.split-body p + p { margin-top: 1.1em; }
.split-body strong { color: var(--white); font-weight: 600; }
@media (max-width: 900px) { .split-grid { grid-template-columns: 1fr; } }

/* ---------- About: mission statement ---------- */

.mission {
  background: var(--paper);
  color: var(--ink);
}
.mission .section-num { color: var(--gold-ink); }
.mission-text {
  font-family: var(--serif);
  font-size: clamp(24px, 3vw, 38px);
  line-height: 1.3;
  color: var(--ink);
  max-width: 24ch;
  text-wrap: balance;
}
.mission-sub {
  margin-top: 26px;
  max-width: 62ch;
  font-size: 18px;
  color: var(--muted-on-light);
}

/* Full lockup filling the mission column. It sits straight on the paper
   band -- the wordmark is navy, so no card is needed here. Width is capped
   short of the column so it never crowds the statement beside it. */
.mission-logo {
  display: block;
  width: min(100%, 360px);
  height: auto;
  margin-top: clamp(20px, 3vw, 34px);
}

@media (max-width: 900px) {
  /* Stacked: the logo sits above the statement, so it gets smaller to keep
     the mission text near the top of the screen. */
  .mission-logo { width: min(52%, 220px); }
}
@media (max-width: 480px) {
  .mission-logo { width: min(46%, 170px); margin-top: 16px; }
}

/* ---------- About: leadership ---------- */

.leader-grid {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: clamp(28px, 4vw, 60px);
  align-items: start;
}
.leader-photo {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--navy-line);
  border-top: 3px solid var(--gold);
}
.leader-name {
  font-family: var(--serif);
  font-size: clamp(24px, 2.6vw, 30px);
  color: var(--white);
  margin-bottom: 6px;
}
.leader-role {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 22px;
}
.leader-body p { color: var(--muted-on-dark); }
.leader-body p + p { margin-top: 1.1em; }

.cap-exp-head {
  margin: clamp(36px, 4vw, 52px) 0 20px;
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}
.cap-exp {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 40px;
}
.cap-exp li {
  padding-top: 16px;
  border-top: 1px solid var(--navy-line);
  font-size: 15px;
  color: var(--muted-on-dark);
}
.cap-exp strong {
  display: block;
  margin-bottom: 4px;
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--white);
}
@media (max-width: 760px) {
  .leader-grid { grid-template-columns: 1fr; }
  .leader-photo { max-width: 280px; }
  .cap-exp { grid-template-columns: 1fr; }
}

/* ---------- Capability pages ---------- */

.cap-meta {
  margin-top: 22px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-on-dark);
}

/* "In plain terms:" — the page's one-sentence claim, carried at the top */
.cap-lead {
  max-width: 900px;
  margin: 0 auto;
  padding: clamp(28px, 3.4vw, 44px) 0 0;
  border-top: 3px solid var(--gold);
  font-family: var(--serif);
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.35;
  color: var(--white);
}
.cap-lead .cap-lead-label { color: var(--gold); }

/* A single landscape photograph can drop in here later: drop an
   <img class="cap-figure"> (or a <figure class="cap-figure">) directly
   after the lead or between body sections; nothing else needs to change. */
/* Capability photograph: duotone via two blended layers over a greyscale
   image, with the analytical marks as an SVG on top.
   Layer order: image (0) -> shadow screen (1) -> highlight multiply (2)
   -> marks (3). "screen" with a dark colour lifts the blacks to navy;
   "multiply" with a light colour pulls the whites down to the highlight. */
.cap-figure {
  position: relative;
  isolation: isolate;
  display: block;
  width: 100%;
  max-width: 900px;
  margin: clamp(36px, 4.5vw, 56px) auto 0;
  line-height: 0;
}
.cap-figure img {
  display: block;
  width: 100%;
  height: auto;
  filter: grayscale(1) contrast(var(--duo-contrast)) brightness(0.94);
}
.cap-figure::before,
.cap-figure::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.cap-figure::before {
  background: var(--duo-shadow);
  mix-blend-mode: screen;
  z-index: 1;
}
.cap-figure::after {
  background: var(--duo-highlight);
  mix-blend-mode: multiply;
  z-index: 2;
}

/* Sparse analytical overlay. Marks sit on real features in each photograph;
   coordinates are in the image's own pixel space via viewBox. */
.cap-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
}
.cap-overlay .mark-node {
  fill: none;
  stroke: var(--mark-line);
  stroke-width: 2.5;
  opacity: 0.82;
}
.cap-overlay .mark-link {
  fill: none;
  stroke: var(--mark-line);
  stroke-width: 2;
  stroke-dasharray: 10 9;
  opacity: 0.45;
}
.cap-overlay .mark-route {
  fill: none;
  stroke: var(--mark-line);
  stroke-width: 2.5;
  stroke-linecap: round;
  opacity: 0.7;
}
.cap-overlay .mark-tick {
  stroke: var(--mark-line);
  stroke-width: 3.5;
  stroke-linecap: round;
  opacity: 0.85;
}
.cap-overlay .mark-key {
  stroke: var(--mark-key);
  opacity: 0.95;
  stroke-width: 3;
}


/* The satellite frame duotones much flatter than the others -- little tonal
   range to begin with -- so it gets its own contrast, and its network gets
   heavier strokes. Scoped to this figure so the other three are untouched. */
.cap-figure--network img {
  filter: grayscale(1) contrast(2.05) brightness(0.76);
}
/* Density surface: soft intensity fields, irregular isolines, fine survey
   graticule. The fields are blurred and overlap, so they read as one
   continuous surface rather than separate blobs. */
.cap-overlay .dens-line {
  fill: none;
  stroke: var(--mark-line);
  stroke-width: 1.6;
  stroke-linejoin: round;
}
.cap-overlay .dens-line--key {
  stroke: var(--mark-key);
  stroke-width: 1.9;
}
.cap-overlay .grat {
  stroke: var(--mark-line);
  stroke-width: 0.8;
  opacity: 0.09;
}


/* Slow fade-in with the section that holds it; without JS or with reduced
   motion the marks are simply present. */
.js-motion .cap-overlay {
  opacity: 0;
  transition: opacity 1100ms ease 250ms;
}
.js-motion .reveal.is-visible .cap-overlay { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .js-motion .cap-overlay { opacity: 1 !important; transition: none !important; }
}

.cap-body {
  max-width: 900px;
  margin: clamp(30px, 3.4vw, 44px) auto 0;
  font-size: 17.5px;
  line-height: 1.75;
}
.cap-body > p { color: var(--muted-on-dark); }
.cap-body > p + p { margin-top: 1.2em; }
.cap-body h2 {
  margin: clamp(40px, 4.6vw, 64px) 0 20px;
  font-size: clamp(24px, 2.6vw, 32px);
  max-width: 26ch;
  color: var(--white);
  text-wrap: balance;
}
.cap-body strong { color: var(--text-on-dark); font-weight: 600; }

/* "What you receive" — the conversion point, so it gets the weight */
.receive {
  max-width: 900px;
  margin: clamp(48px, 6vw, 80px) auto 0;
  padding: clamp(28px, 3.4vw, 44px);
  background: var(--paper);
  color: var(--ink);
  border-left: 4px solid var(--gold);
}
.receive h2 {
  margin: 0 0 16px;
  color: var(--ink);
  font-size: clamp(22px, 2.4vw, 28px);
}
.receive p {
  font-size: clamp(17px, 1.7vw, 19px);
  line-height: 1.65;
  color: var(--ink);
}
.receive .btn { margin-top: 26px; }

.cap-close {
  max-width: 900px;
  margin: clamp(32px, 4vw, 48px) auto 0;
  color: var(--muted-on-dark);
}

/* Cross-links to the other three capabilities */
.related {
  border-top: 1px solid var(--navy-line);
  background: var(--navy-deep);
}
.related h2 {
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 28px;
}
.related-grid {
  display: grid;
  /* Four sibling capabilities now, so the track count follows the width
     rather than being pinned at three. */
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px;
  background: var(--navy-line);
  border: 1px solid var(--navy-line);
}
.related-card {
  display: block;
  background: var(--navy-deep);
  padding: clamp(22px, 2.4vw, 30px);
  text-decoration: none;
  transition: background 0.15s;
}
.related-card:hover { background: var(--navy); }
.related-card h3 {
  font-size: 19px;
  line-height: 1.25;
  margin-bottom: 12px;
}
.related-card span {
  font-size: 14px;
  font-weight: 600;
  color: var(--gold);
}
@media (max-width: 800px) { .related-grid { grid-template-columns: 1fr; } }

/* ---------- Contact page ---------- */

.contact-grid {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: clamp(36px, 5vw, 80px);
  align-items: start;
}
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-intro {
  margin-top: 24px;
  max-width: 56ch;
  font-size: 19px;
  color: var(--muted-on-dark);
}

/* Form */
.form-note {
  margin-bottom: 28px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-on-dark);
}
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }

.field { margin-bottom: 22px; }
.field label,
.fieldset-legend {
  display: block;
  margin-bottom: 8px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-on-dark);
}
.field .req { color: var(--gold); }
.field .optional { color: var(--muted-on-dark); }

.field input[type="text"],
.field input[type="email"],
.field textarea {
  width: 100%;
  padding: 13px 14px;
  background: var(--navy-raise);
  border: 1px solid var(--navy-line);
  color: var(--white);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  transition: border-color 0.15s, background 0.15s;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input::placeholder,
.field textarea::placeholder { color: rgba(154, 165, 191, 0.7); }
.field input:hover,
.field textarea:hover { border-color: var(--muted-on-dark); }
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--gold);
  background: var(--navy);
}

fieldset {
  margin: 0 0 22px;
  padding: 0;
  border: 0;
}
.service-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 24px;
  margin-top: 4px;
}
@media (max-width: 680px) { .service-list { grid-template-columns: 1fr; } }

.check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15.5px;
  color: var(--text-on-dark);
  cursor: pointer;
}
.check input[type="checkbox"] {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  accent-color: var(--gold);
}

.subscribe {
  margin: 4px 0 26px;
  padding-top: 22px;
  border-top: 1px solid var(--navy-line);
}

.form-submit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  margin-top: 4px;
}
.form-submit button {
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.02em;
  padding: 14px 30px;
}
.form-submit .form-required-note {
  font-size: 14px;
  color: var(--muted-on-dark);
}

/* Netlify honeypot: hidden from people, visible to bots */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Direct contact card */
.contact-direct {
  padding: clamp(26px, 3vw, 36px);
  background: var(--navy-raise);
  border: 1px solid var(--navy-line);
  border-top: 3px solid var(--gold);
}
.contact-direct h2 {
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
  max-width: none;
}
.contact-direct dl { margin: 0; }
.contact-direct dt {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-on-dark);
  margin-bottom: 4px;
}
.contact-direct dd {
  margin: 0 0 20px;
  font-size: 17px;
  color: var(--white);
  overflow-wrap: anywhere;
}
.contact-direct dd:last-child { margin-bottom: 0; }
.contact-direct a { color: var(--white); text-decoration: none; border-bottom: 1px solid var(--navy-line); }
.contact-direct a:hover { color: var(--gold); border-color: var(--gold); }
.contact-direct .direct-note {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--navy-line);
  font-size: 15px;
  color: var(--muted-on-dark);
}

/* ---------- Partners page ---------- */

.partner-group + .partner-group { margin-top: clamp(56px, 7vw, 96px); }
.partner-group-head {
  padding-bottom: 18px;
  margin-bottom: clamp(28px, 3.4vw, 40px);
  border-bottom: 1px solid var(--navy-line);
}
.partner-group-head h2 {
  font-size: clamp(26px, 3vw, 36px);
  max-width: none;
}

/* Partner cards: text only -- name, location, description. */
.partner-card {
  padding: clamp(24px, 2.8vw, 36px);
  background: var(--navy-raise);
  border: 1px solid var(--navy-line);
  border-left: 3px solid var(--gold);
}
.partner-card + .partner-card { margin-top: 20px; }
.partner-card h3 {
  font-size: clamp(22px, 2.2vw, 27px);
  margin-bottom: 8px;
}
.partner-meta {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
}
.partner-card p { color: var(--text-on-dark); }
.partner-card p + p { margin-top: 1em; }

.partner-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.partner-cols .partner-card + .partner-card { margin-top: 0; }
@media (max-width: 840px) { .partner-cols { grid-template-columns: 1fr; } }

/* Válka-Mír credential list — theirs, stated as theirs */
.credential-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 36px;
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid var(--navy-line);
}
.credential-list li { font-size: 15.5px; color: var(--muted-on-dark); }
.credential-list strong {
  display: block;
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 2px;
}
/* The region list is long enough to want the full width of the card. */
.credential-list .wide { grid-column: 1 / -1; }

@media (max-width: 680px) { .credential-list { grid-template-columns: 1fr; } }

/* Who brings what */
.combo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin-top: 24px;
  background: var(--navy-line);
  border: 1px solid var(--navy-line);
}
.combo-grid > div { background: var(--navy); padding: clamp(22px, 2.4vw, 30px); }
.combo-grid h4 {
  margin: 0 0 14px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
}
.combo-grid li {
  position: relative;
  padding-left: 18px;
  margin-top: 8px;
  font-size: 16px;
  color: var(--text-on-dark);
}
.combo-grid li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 7px;
  height: 1.5px;
  background: var(--gold);
}
@media (max-width: 680px) { .combo-grid { grid-template-columns: 1fr; } }

/* What the combination provides */
.value-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 32px);
  margin-top: clamp(28px, 3.4vw, 40px);
}
.value-grid li {
  padding-top: 20px;
  border-top: 2px solid var(--gold);
}
.value-grid h4 {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 600;
  color: var(--white);
}
.value-grid p { font-size: 15.5px; color: var(--muted-on-dark); }
@media (max-width: 760px) { .value-grid { grid-template-columns: 1fr; } }

/* ---------- Homepage partners strip ---------- */

.partners-strip {
  padding: clamp(26px, 3vw, 38px) clamp(24px, 3vw, 40px);
  background: var(--navy-raise);
  border: 1px solid var(--navy-line);
  border-left: 3px solid var(--gold);
}
.partners-names {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 18px;
  margin-bottom: 14px;
}
.partners-names li {
  font-family: var(--serif);
  font-size: clamp(19px, 2vw, 24px);
  color: var(--white);
}
.partners-names li + li::before {
  content: "\00B7";
  color: var(--gold);
  margin-right: 18px;
}
.partners-strip p { color: var(--muted-on-dark); max-width: 70ch; }
.partners-strip .cap-more { margin-top: 16px; display: inline-flex; gap: 8px; font-size: 15px; font-weight: 600; color: var(--gold); text-decoration: none; }
.partners-strip .cap-more:hover { color: var(--gold-soft); }

/* ---------- Motion ----------

   Everything here is gated on the .js-motion class, which a small inline
   script in each page's <head> adds ONLY when JavaScript runs and the
   visitor has not asked for reduced motion. Nothing is hidden by default:
   with JS off, or with reduced motion on, the class is never added and the
   page renders in its finished state. The media queries below are a second
   line of defence if the OS setting changes after load.

   Legal pages (privacy policy, terms, CTIP) load neither the inline script
   nor motion.js, so they never animate. */

.js-motion .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 400ms ease-out, transform 400ms ease-out;
  transition-delay: var(--reveal-delay, 0ms);
}
.js-motion .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Slow drift on the hero graphic: one cycle is 28s, scaling ~2% — visible
   only to someone who stops and watches. CSS-only and inside a
   no-preference query, so reduced motion never starts it. */
@media (prefers-reduced-motion: no-preference) {
  .hero-figure img {
    animation: hero-drift 28s ease-in-out infinite alternate;
    will-change: transform;
  }
  /* Same direction, nearly twice the cycle: the rate difference is what
     reads as depth. */
  .hero-earth {
    animation: earth-drift 52s ease-in-out infinite alternate;
    will-change: transform;
  }
}
@keyframes hero-drift {
  from { transform: scale(1) translateY(0); }
  to   { transform: scale(1.02) translateY(-6px); }
}
@keyframes earth-drift {
  from { transform: translate(-50%, -50%) scale(2.40) translate(40%, -21%); }
  to   { transform: translate(-50%, -50%) scale(2.48) translate(40%, -24%); }
}

/* Card lift. Pointer-capable devices only, so touch never gets a stuck
   hover state. */
@media (hover: hover) and (pointer: fine) {
  .cap-card,
  .partner-card,
  .related-card {
    transition: background 0.15s ease, transform 0.2s ease,
                box-shadow 0.2s ease, border-color 0.1s ease;
  }
  .cap-card:hover,
  .related-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 28px -18px rgba(0, 0, 0, 0.9);
  }
  .partner-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 28px -18px rgba(0, 0, 0, 0.9);
    border-color: var(--muted-on-dark);
    border-left-color: var(--gold);
  }
}

@media (prefers-reduced-motion: reduce) {
  .js-motion .reveal,
  .js-motion .reveal.is-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .hero-figure img,
  .hero-earth { animation: none !important; }
  .cap-card, .partner-card, .related-card {
    transition: background 0.15s ease !important;
  }
  .cap-card:hover, .partner-card:hover, .related-card:hover {
    transform: none !important;
    box-shadow: none !important;
  }
}

/* Work-with-us card: lead-in line and bolded item openers */
.ask-intro {
  margin-bottom: 22px;
  font-size: 16px;
  color: var(--text-on-dark);
}
.ask li strong {
  color: var(--white);
  font-weight: 600;
}

/* ---------- Registration form additions ---------- */

.field select {
  width: 100%;
  padding: 13px 14px;
  background: var(--navy-raise);
  border: 1px solid var(--navy-line);
  color: var(--white);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%),
                    linear-gradient(135deg, var(--gold) 50%, transparent 50%);
  background-position: calc(100% - 20px) center, calc(100% - 14px) center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  transition: border-color 0.15s, background-color 0.15s;
}
.field select:hover { border-color: var(--muted-on-dark); }
.field select:focus { outline: none; border-color: var(--gold); background-color: var(--navy); }
.field select option { background: var(--navy-deep); color: var(--white); }

.field input[type="file"] {
  width: 100%;
  padding: 11px 14px;
  background: var(--navy-raise);
  border: 1px dashed var(--navy-line);
  color: var(--text-on-dark);
  font-family: var(--sans);
  font-size: 15px;
}
.field input[type="file"]::file-selector-button {
  margin-right: 14px;
  padding: 8px 14px;
  background: none;
  border: 1px solid var(--gold);
  color: var(--gold);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.field input[type="file"]::file-selector-button:hover { background: rgba(201, 162, 39, 0.12); }
.field input[type="file"]:focus { outline: none; border-color: var(--gold); }

/* Guidance under the clearance fields: what not to send. */
.field-hint {
  margin: -6px 0 24px;
  padding-left: 12px;
  border-left: 2px solid var(--gold);
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted-on-dark);
}

.form-privacy {
  margin-top: 18px;
  font-size: 14px;
  color: var(--muted-on-dark);
}
.form-privacy a { color: var(--text-on-dark); text-decoration-color: var(--gold); }
.form-privacy a:hover { color: var(--gold); }

.register-wrap { max-width: 820px; }

/* Vetting standard list */
.standard-list { margin-top: 26px; }
.standard-list li {
  padding: 18px 0;
  border-top: 1px solid var(--navy-line);
  font-size: 16px;
  color: var(--muted-on-dark);
}
.standard-list strong {
  display: block;
  margin-bottom: 4px;
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 600;
  color: var(--white);
}

/* ---------- Confirmation pages ---------- */
/* thank-you.html and thank-you-network.html. One centred block at a reading
   width, with room around it instead of the dark page-head band the interior
   pages use: these pages have a single job and should not read as a dead end.
   Headline keeps the interior H1 treatment, sized down for the narrower
   measure so it does not run to five lines. */

.confirm-page { padding: clamp(88px, 12vw, 168px) 0; }
.confirm-page .wrap { max-width: 640px; }

.confirm-page h1 {
  font-size: clamp(34px, 4.6vw, 46px);
  max-width: 20ch;
}
.confirm-page p {
  font-size: 18px;
  color: var(--text-on-dark);
  margin-top: 1.15em;
}
.confirm-page p:first-of-type { margin-top: 28px; }
.confirm-page p a {
  color: var(--white);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-underline-offset: 3px;
}

/* Quiet row of ways onward, ruled off from the message itself. */
.confirm-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 32px;
  margin-top: 44px;
  padding-top: 28px;
  border-top: 1px solid var(--navy-line);
}
.confirm-links a {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
}
.confirm-links a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Bravo 9 lockup filling the empty left column of "What we look for" on
   practitioner-network.html. A graphic element inside the existing column,
   not a card: left edge flush with the headline above it, held back at 0.85
   so it sits below the headline in the hierarchy. Hidden at the 900px
   breakpoint where .split-grid stacks, since the space it fills is gone. */
.standard-mark {
  display: block;
  width: min(100%, 300px);
  height: auto;
  margin-top: clamp(64px, 7vw, 88px);
  opacity: 0.85;
}
@media (max-width: 900px) {
  .standard-mark { display: none; }
}

/* The gold multiplication sign between the two names in the "Bravo 9 x
   Valka-Mir" partnership heading. Replaces an inline style. Scoped to the
   heading that actually carries it: the old .partner h2 .x rule required a
   .partner ancestor that partners.html never used, so it could never match. */
.partner-group-head h2 .x { color: var(--gold); }

/* SBA SDVOSB certification mark, in the footer under the phone number. It is
   an official certification mark, so it appears exactly as issued: no
   recolour, no filter, no opacity change, and no border, plate or container
   behind it. Clear space is held above and below. It is not decorative -- it
   carries real alt text -- and it is deliberately not wrapped in a link. No
   breakpoint hides it. */
.footer-sba {
  display: block;
  width: 130px;
  height: auto;
  margin: 28px 0;
}

/* Capability page heads: the reversed lockup in the space beside the title.
   Strictly a modifier -- .page-head itself is shared by all 16 pages and is
   not touched, so every other page renders exactly as before. The selectors
   below are all gated on .page-head--mark, .page-head-text or
   .page-head-mark, none of which appear on any other page.

   Two columns. The text keeps its own column so the H1 still resolves its
   16ch cap rather than being squeezed by the track beside it; the mark sits
   in a fixed 240px column, aligned to the wrap's right edge so it lines up
   with the content edge the rest of the page uses. The ground here is
   --navy-deep, so the reversed file is the correct one -- the navy lockup
   would be invisible. */
.page-head--mark .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  column-gap: clamp(24px, 4vw, 64px);
  align-items: center;
}

.page-head-mark {
  justify-self: end;
  width: min(100%, 240px);
  height: auto;
  opacity: 0.8;
}

/* The site header sits directly above and already carries the mark, so under
   this modifier the head gets more room at the top -- enough that the two
   read as separate elements rather than one stacked cluster. Base is
   clamp(56px, 7vw, 100px); this is clamp(80px, 9vw, 132px). */
.page-head--mark { padding-top: clamp(80px, 9vw, 132px); }

@media (max-width: 900px) {
  /* Stacked: there is no empty space left to fill, and the mark would only
     add scroll. */
  .page-head--mark .wrap { display: block; }
  .page-head-mark { display: none; }
}