/* Inter — self-hosted. No third-party font requests. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-ext-600-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --ink: #14171a;
  --body: #2b3238;
  --muted: #6b7680;
  --accent: #002fa5;
  --accent-hover: #001f7a;
  --hairline: #e4e7ea;
  --page: #ffffff;

  /* One gutter and one vertical rhythm for the whole site. Section padding
     is applied to both edges, so adjacent sections sit at twice this value. */
  --map-reached: #93aad8;
  --map-base: #f2f4f6;

  --gutter: clamp(20px, 4vw, 40px);
  --section-pad: clamp(48px, 6vw, 72px);
}

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

html {
  scroll-padding-top: 120px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--page);
  color: var(--body);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.6;
}

[hidden] {
  display: none !important;
}

.skip-link {
  position: absolute;
  left: -9999px;
}

.skip-link:focus {
  position: static;
  display: inline-block;
  padding: 12px 24px;
  background: var(--accent);
  color: var(--page);
}

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
input,
select,
textarea,
fieldset {
  min-width: 0;
}

button,
select {
  cursor: pointer;
}

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--accent-hover);
}

/* currentColor made the focus ring white on the primary button, which sat
   invisibly on the white page. Fixed colours, flipped on dark ground. */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.section-dark :focus-visible,
.cta :focus-visible,
.site-footer :focus-visible {
  outline-color: #ffffff;
}

h1,
h2,
h3 {
  margin: 0;
  color: var(--ink);
  font-weight: 600;
}

h1 {
  max-width: min(1080px, 100%);
  font-size: clamp(34px, 4.8vw, 68px);
  line-height: 1.05;
  letter-spacing: -0.03em;
}

h2 {
  max-width: 24ch;
  font-size: clamp(26px, 2.6vw, 38px);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

h3 {
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: normal;
}

p,
ul,
ol {
  max-width: 680px;
  margin: 0;
}

p + p {
  margin-top: 24px;
}

strong,
b {
  font-weight: 600;
}

ul,
ol {
  padding-left: 24px;
}

li + li {
  margin-top: 12px;
}

li::marker {
  color: var(--accent);
  font-weight: 600;
}

address {
  font-style: normal;
}

.container {
  width: calc(100% - var(--gutter) * 2);
  max-width: 1280px;
  margin-inline: auto;
}

.text-block {
  max-width: 680px;
}

.section {
  padding-block: var(--section-pad);
}

/* Retained as a no-op: every container shares one measure so the page
   holds a single left edge from header to footer. */
.container--wide {
  width: calc(100% - var(--gutter) * 2);
  max-width: 1280px;
}

.section-heading {
  margin-bottom: 32px;
}

/* Split layout — heading rail left, body right */
.split {
  display: grid;
  column-gap: 80px;
  grid-template-columns: minmax(320px, 1fr) minmax(0, 620px);
  align-items: start;
}

.split-head .eyebrow {
  margin-bottom: 16px;
}

.split-head h2 {
  max-width: none;
}

.split-body {
  min-width: 0;
  max-width: 620px;
}

.split-body > * + * {
  margin-top: 24px;
}

.split-body > h3 {
  margin-top: 40px;
}

.split-body ul,
.split-body ol,
.split-body p {
  max-width: none;
}

@media (max-width: 899.98px) {
  .split {
    display: block;
  }

  .split-head {
    margin-bottom: 32px;
  }
}

.section-heading > * + * {
  margin-top: 24px;
}

.prose > * + * {
  margin-top: 24px;
}

.prose > h2:not(:first-child) {
  margin-top: 48px;
}

.prose > h3:not(:first-child) {
  margin-top: 32px;
}

.lede {
  max-width: 62ch;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: normal;
}

.eyebrow {
  display: table;
  max-width: 100%;
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--accent);
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.section-dark {
  background: var(--ink);
  color: var(--page);
}

.section-dark h1,
.section-dark h2,
.section-dark h3 {
  color: var(--page);
}

.section-dark .eyebrow {
  color: var(--page);
  border-bottom-color: var(--accent);
}

.section-dark a:not(.button) {
  color: var(--page);
}

.section-dark a:not(.button):hover {
  text-decoration-thickness: 2px;
}

.hero h1 + .lede,
.page-intro h1 + .lede,
.page-intro h1 + .prose {
  margin-top: 32px;
}

.hero .lede + p,
.page-intro .lede + .prose {
  margin-top: 24px;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 28px;
  margin-top: 32px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  padding: 14px 28px;
  border: 0;
  border-radius: 4px;
  background: var(--accent);
  color: var(--page);
  font: inherit;
  font-weight: 600;
  line-height: 1.6;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  cursor: pointer;
}

.button:hover {
  background: var(--accent-hover);
  color: var(--page);
}

.button:disabled {
  cursor: wait;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--hairline);
  background: var(--page);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 88px;
  padding-block: 16px;
}

.brand {
  display: block;
  flex: 0 0 auto;
  max-width: 45%;
}

.brand img {
  width: auto;
  height: 28px;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
}

.site-nav {
  min-width: 0;
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 12px 20px;
  max-width: none;
  padding: 0;
  list-style: none;
}

.site-nav li + li {
  margin-top: 0;
}

.site-nav a {
  display: block;
  padding-block: 8px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: uppercase;
}

.site-nav a:hover {
  color: var(--accent-hover);
}

.site-nav a[aria-current="page"] {
  color: var(--accent);
}

.menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  padding: 10px;
  border: 1px solid var(--hairline);
  border-radius: 4px;
  background: var(--page);
  color: var(--ink);
}

.menu-toggle svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.card-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.card {
  min-width: 0;
  padding: 32px;
  border: 1px solid var(--hairline);
  border-radius: 4px;
  background: var(--page);
  text-align: left;
}

.card h3 + p {
  margin-top: 16px;
}

.card p + a {
  display: inline-block;
  margin-top: 24px;
}

.card-link {
  display: block;
  height: 100%;
  color: var(--body);
  text-decoration: none;
}

.card-link h3 {
  color: var(--accent);
}

.card-link:hover {
  color: var(--body);
}

.card-link:hover h3 {
  color: var(--accent-hover);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.points {
  display: grid;
  gap: 32px;
  max-width: 760px;
}

.points strong {
  display: block;
  margin-bottom: 8px;
  color: var(--ink);
}

.steps {
  display: grid;
  gap: 32px;
  max-width: 760px;
  padding-left: 28px;
}

.steps > li {
  padding-left: 8px;
}

.steps > li + li {
  margin-top: 0;
}

.steps h3 + p {
  margin-top: 16px;
}

/* Numbers are reserved for a progression the reader must not reorder — the
   enablement ladder. Everything else is a set of things we do, and uses this. */
.content-blocks {
  display: grid;
  gap: 40px;
  max-width: 760px;
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.content-blocks > li + li {
  margin-top: 0;
}

.content-blocks h3 + p {
  margin-top: 16px;
}

.leadership-grid {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  align-items: start;
  gap: 48px;
}

.leadership-grid > * {
  min-width: 0;
}

.leadership-portrait {
  width: 100%;
  height: auto;
}

/* Screen-reader-only text. Used to say a link opens in a new tab without
   putting that on screen. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* The logos link out, but a logo does not look clickable. This is the visible
   affordance underneath each description. */
.vendor-link {
  margin-top: 20px;
  font-size: 15px;
  font-weight: 600;
}

.vendor-link a {
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

.vendor-link a:hover {
  border-bottom-color: transparent;
}

.vendor-list {
  display: grid;
  gap: 32px;
}

.vendor-block {
  padding-bottom: 32px;
  border-bottom: 1px solid var(--hairline);
}

.vendor-block:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.vendor-block h3 + p {
  margin-top: 16px;
}

.vendor-note {
  margin-top: 16px;
  padding-left: 16px;
  border-left: 2px solid var(--accent);
  color: var(--page);
  font-size: 16px;
}

.vendor-logo {
  width: auto;
  height: 40px;
  margin-block: 24px;
  object-fit: contain;
  object-position: left center;
}

.vendor-logo--zeronetworks {
  height: 54px;
}

.vendor-block > a {
  display: inline-block;
  text-decoration: none;
}

.vendor-block > a:hover .vendor-logo {
  opacity: 0.8;
}

.section-dark .vendor-block {
  border-bottom-color: rgba(255, 255, 255, 0.15);
}

.section-outro {
  margin-top: 48px;
}

/* A closing line short enough to hold one line gets one line. Measure governs
   the eye's return sweep across multiple lines, so it does not bind here. The
   680px body measure still applies to any outro that will wrap. */
.section-outro--oneline,
.section-outro--oneline > p {
  max-width: min(100%, 960px);
}

/* Portfolio arc — connected control points */
.arc {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  max-width: none;
  margin: 0;
  padding: 0;
  list-style: none;
}

.arc > li + li {
  margin-top: 0;
}

.arc > li {
  display: flex;
}

.arc-step {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  padding: 32px;
  border: 1px solid var(--hairline);
  border-top: 3px solid var(--accent);
  border-radius: 4px;
  background: var(--page);
}

.arc-step::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -19px;
  width: 12px;
  height: 12px;
  border-top: 2px solid var(--accent);
  border-right: 2px solid var(--accent);
  transform: translateY(-50%) rotate(45deg);
}

.arc > li:last-child .arc-step::after {
  content: none;
}

.arc-stage {
  max-width: none;
  margin: 0 0 8px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.arc-step h3 + p {
  margin-top: 16px;
  margin-bottom: 24px;
}

.arc-vendor {
  max-width: none;
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
  color: var(--ink);
  font-weight: 600;
}

/* Portfolio arc, four control points (D59). Four across from 1180px,
   two by two from 900px (arrows hidden, rows read Find then Control),
   one column below 900px via the existing .arc rule. */
.arc--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.arc-step--extending {
  border-top-style: dashed;
}

.arc-step--extending .arc-vendor {
  color: var(--muted);
  font-weight: 400;
}

@media (max-width: 1179.98px) and (min-width: 900px) {
  .arc--four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .arc--four .arc-step::after {
    content: none;
  }
}

/* v37 (D62-D64): status labels on the portfolio arc, hero vendor logos,
   four-up evidence cards, contact routes. */
.arc-status {
  display: block;
  width: fit-content;
  margin-top: 8px;
  padding: 2px 8px;
  border: 1px solid var(--accent);
  border-radius: 2px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.5;
}

.arc-status--planned {
  border-style: dashed;
  border-color: var(--muted);
  color: var(--muted);
}

.hero-vendors {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.hero-vendors p {
  margin: 0 0 16px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hero-vendors ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px 48px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hero-vendors li + li {
  margin-top: 0;
}

.hero-vendors img {
  display: block;
  width: auto;
  height: 28px;
}

.hero-vendors img.hero-vendors__zn {
  height: 38px;
}

.evidence-grid {
  max-width: none;
  margin: 0;
  padding: 0;
  list-style: none;
}

.evidence-grid > li + li {
  margin-top: 0;
}

.card-grid--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1179.98px) {
  .card-grid--four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 639.98px) {
  .card-grid--four {
    grid-template-columns: minmax(0, 1fr);
  }
}

.arc-next {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}

.split-body .text-block + .content-blocks {
  margin-top: 40px;
}

.contact-routes {
  margin-top: 24px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 15px;
}

/* Market blocks — factual, scannable */
.market-list {
  display: grid;
  gap: 48px;
  max-width: none;
}

.market-block {
  padding-bottom: 48px;
  border-bottom: 1px solid var(--hairline);
}

.market-list > .market-block:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.market-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 24px;
}

.market-status {
  max-width: none;
  margin: 0;
  padding: 4px 12px;
  border: 1px solid var(--accent);
  border-radius: 100px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.market-status--target {
  border-color: var(--muted);
  color: var(--muted);
}

/* Verifiable facts, directly under the hero. Deliberately plain: a vendor
   should be able to check every value on this row. */
.facts-band {
  padding-block: 32px;
  border-bottom: 1px solid var(--hairline);
}

.facts-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  margin: 0;
}

.facts-row dt {
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.facts-row dd {
  margin: 10px 0 0;
  color: var(--ink);
  font-weight: 600;
  line-height: 1.5;
}

@media (max-width: 899.98px) {
  .facts-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 32px;
  }
}

@media (max-width: 479.98px) {
  .facts-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Vendor logos link out; give them a hover affordance and drop the underline. */
.vendor-block > a {
  display: inline-block;
  text-decoration: none;
}

.vendor-block > a .vendor-logo {
  transition: opacity 0.15s ease;
}

.vendor-block > a:hover .vendor-logo,
.vendor-block > a:focus-visible .vendor-logo {
  opacity: 0.7;
}

.section-dark .vendor-block {
  border-bottom-color: rgba(255, 255, 255, 0.15);
}

/* Legal and policy text reads as one continuous column, with headings set
   closer to the body so a long notice reads as a document rather than as a
   run of landing-page sections. */
.legal-column {
  max-width: 720px;
}

.legal-column h2 {
  max-width: 100%;
  font-size: clamp(21px, 1.9vw, 26px);
  letter-spacing: -0.01em;
}

.legal-column > h2:not(:first-child) {
  margin-top: 56px;
}

/* ---- Market map -------------------------------------------------------
   One hue, three steps, plus a hatch for the target market so status is never
   carried by colour alone. Validated for CVD separation: the reached tint and
   the neutral base sit 23.9 dE apart (normal vision), 22.7 (protanopia).
   Western Sahara is drawn as part of Morocco, without a dividing stroke. */
.map-container {
  margin-top: 56px;
}

.market-map {
  display: grid;
  grid-template-columns: minmax(0, 620px) minmax(240px, 340px);
  gap: 72px;
  align-items: start;
  margin: 0;
}

.africa-map {
  display: block;
  width: 100%;
  height: auto;
}

.map-countries path {
  stroke: var(--page);
  stroke-width: 1.6;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.map-countries .is-base {
  fill: var(--map-base);
}

/* Western Sahara: drawn with Morocco's fill and its own colour as the stroke,
   so no dividing line appears and the two read as a single territory. */
.map-countries .is-active-merged {
  fill: var(--accent);
  stroke: var(--accent);
  stroke-width: 3;
}

.map-countries .is-reached {
  fill: var(--map-reached);
}

.map-countries .is-active {
  fill: var(--accent);
}

.map-countries .is-target {
  fill: url(#gh-target-hatch);
  stroke: var(--accent);
  stroke-width: 2.4;
}

.map-labels text {
  fill: var(--ink);
  font-size: 26px;
  font-weight: 600;
  paint-order: stroke;
  stroke: var(--page);
  stroke-width: 5px;
  stroke-linejoin: round;
}

.map-key {
  display: grid;
  gap: 16px;
  margin: 0 0 24px;
  padding-left: 0;
  list-style: none;
}

.map-key > li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  font-size: 15px;
  line-height: 1.5;
}

.map-key > li + li {
  margin-top: 0;
}

.map-key b {
  display: block;
  color: var(--ink);
  font-weight: 600;
}

.map-swatch {
  width: 22px;
  height: 22px;
  margin-top: 2px;
  border: 1px solid rgba(20, 23, 26, 0.12);
  border-radius: 3px;
}

.map-swatch--active {
  background: var(--accent);
}

.map-swatch--target {
  border-color: var(--accent);
  background: repeating-linear-gradient(45deg, #ffffff 0 3px, var(--accent) 3px 6px);
}

.map-swatch--reached {
  background: var(--map-reached);
}

.market-map figcaption {
  max-width: 340px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

@media (max-width: 899.98px) {
  .market-map {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .africa-map {
    max-width: 460px;
    margin-inline: auto;
  }

  .market-map figcaption {
    max-width: 680px;
  }
}

.market-facts {
  display: grid;
  gap: 16px;
  margin: 0;
  max-width: 860px;
}

.market-facts > div {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 24px;
}

.market-facts dt {
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.6;
}

.market-facts dd {
  margin: 0;
  max-width: 640px;
}

@media (max-width: 639.98px) {
  .market-facts > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }
}

.cta {
  padding-block: var(--section-pad);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  background: var(--ink);
  color: var(--page);
}

.cta > .container {
  display: grid;
  justify-items: center;
  text-align: center;
}

.cta h2 {
  max-width: 24ch;
  color: var(--page);
}

.cta .actions {
  justify-content: center;
}

.contact-blocks {
  display: grid;
  gap: 32px;
  max-width: 760px;
  overflow-wrap: break-word;
}

.contact-blocks h3 + p {
  margin-top: 12px;
}

.contact-form {
  max-width: 760px;
  margin-top: 32px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.form-field {
  min-width: 0;
}

.form-field-full {
  grid-column: 1 / -1;
}

.form-field label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
}

.form-field label span {
  font-weight: 400;
}

.form-field input,
.form-field select,
.form-field textarea {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--muted);
  border-radius: 4px;
  background: var(--page);
  color: var(--body);
  line-height: 1.6;
}

.form-field input {
  overflow-wrap: break-word;
}

.form-field textarea {
  min-height: 180px;
  resize: vertical;
}

.form-consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 24px;
}

.form-consent input {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin: 4px 0 0;
}

.form-consent label {
  min-width: 0;
}

.form-submit {
  margin-top: 24px;
}

.form-status {
  max-width: 760px;
  margin-top: 24px;
  padding: 24px;
  border: 1px solid var(--hairline);
  border-radius: 4px;
}

.site-footer {
  padding-block: 64px 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  background: var(--ink);
  color: var(--page);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  overflow-wrap: break-word;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px;
}

.footer-grid > * {
  min-width: 0;
}

.footer-heading {
  margin: 0 0 16px;
  color: var(--page);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: normal;
}

.site-footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer li + li {
  margin-top: 8px;
}

.site-footer a {
  color: var(--page);
  text-decoration: none;
}

.site-footer a:hover {
  text-decoration: underline;
}

.footer-bottom {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.footer-bottom p + p {
  margin-top: 12px;
}

/* The navigation collapses before the layout does: the wordmark plus seven
   nav items need about 1110px to sit comfortably on one line. */
/* The horizontal nav needs 1140px to fit its seven items beside the wordmark,
   measured. Collapsing at 1179.98px leaves ~40px of slack so a font fallback
   cannot push it onto a second row. assets/nav.js reads this decision back off
   the computed style of .menu-toggle rather than repeating the number. */
@media (max-width: 1179.98px) {
  .header-inner {
    flex-wrap: wrap;
    min-height: 76px;
  }

  .brand img {
    height: 24px;
  }

  .menu-toggle {
    display: inline-flex;
    margin-left: auto;
  }

  .site-nav {
    flex-basis: 100%;
    width: 100%;
    max-height: calc(100vh - 100px);
    max-height: calc(100dvh - 100px);
    overflow-y: auto;
  }

  .site-nav[data-open="false"] {
    display: none;
  }

  .site-nav ul {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding-bottom: 8px;
  }

  .site-nav a {
    padding-block: 12px;
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: 0.04em;
  }
}

@media (max-width: 899.98px) {
  .brand img {
    height: 22px;
  }

  body {
    font-size: 16px;
    line-height: 1.6;
  }

  h3 {
    font-size: 18px;
    line-height: 1.3;
  }

  .lede {
    font-size: 18px;
    line-height: 1.55;
  }

  .card-grid--three {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .arc {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .arc-step::after {
    top: auto;
    right: auto;
    bottom: -26px;
    left: 32px;
    transform: rotate(135deg);
  }

  .leadership-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .leadership-portrait {
    max-width: 320px;
  }

  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .site-footer {
    padding-block: 56px 32px;
    font-size: 14px;
    line-height: 1.6;
  }
}

@media (max-width: 639.98px) {
  .card-grid,
  .card-grid--three,
  .form-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* v39 — engagement stages and related-page links */
.stage-list {
  display: grid;
  gap: 12px;
  margin-top: 16px;
  padding: 0;
  list-style: none;
}

.stage-list > li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
}

.stage-list > li + li {
  margin-top: 0;
}

.stage {
  flex: none;
  padding: 2px 10px;
  border: 1px solid var(--accent);
  border-radius: 100px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.content-blocks .stage-list + p {
  margin-top: 16px;
}

.link-list {
  padding-left: 0;
  list-style: none;
}

.link-list a {
  font-weight: 600;
}

.page-intro .eyebrow {
  margin-bottom: 24px;
}

@media (max-width: 1179.98px) and (min-width: 900px) {
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 639.98px) {
  .stage-list > li {
    flex-direction: column;
    align-items: flex-start;
  }
}