/* ===========================================================================
   SELF-HOSTED TYPEFACES
   Served from our own origin — no third-party request on page load, which
   matters for a site whose argument is that data stays inside the perimeter.
   Manrope and Syne are variable fonts; one file covers their whole range.
   =========================================================================== */

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/manrope-400-700-latin-ext.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: "Manrope";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/manrope-400-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Syne";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("/assets/fonts/syne-500-700-latin-ext.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: "Syne";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("/assets/fonts/syne-500-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "DM Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/dmmono-400-latin-ext.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: "DM Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/dmmono-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "DM Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/dmmono-500-latin-ext.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: "DM Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/dmmono-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/instrumentserif-400-latin-ext.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: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/instrumentserif-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: dark;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

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

html {
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  font-family: "Manrope", sans-serif;
  margin: 0;
  overflow-x: hidden;
  background: #05070a;
}

button,
input,
select {
  font: inherit;
}

button {
  border: 0;
}

button,
a {
  color: inherit;
}

a {
  text-decoration: none;
}

svg {
  width: 1.1em;
  height: 1.1em;
}

::selection {
  color: #03101a;
  background: #73d9ff;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 12px;
  left: 88px;
  padding: 10px 14px;
  color: #07101c;
  background: white;
  transform: translateY(-160%);
  transition: transform 160ms ease;
}

.skip-link:focus {
  transform: translateY(0);
}

.v3-page {
  min-height: 100vh;
  overflow: clip;
}

.v3-load > :first-child {
  animation: page-enter 720ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes page-enter {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.site-header {
  position: relative;
  z-index: 20;
  display: grid;
  min-height: 86px;
  align-items: center;
  padding: 0 clamp(24px, 5vw, 82px);
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(24px, 4vw, 68px);
}

.site-header > button:not(.mobile-menu) {
  justify-self: end;
}

.site-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.brand-sigil {
  display: grid;
  width: 28px;
  gap: 4px;
  transform: skewX(-24deg);
}

.brand-sigil i {
  display: block;
  height: 5px;
  background: currentColor;
}

.brand-sigil i:nth-child(2) {
  width: 76%;
}

.brand-sigil i:nth-child(3) {
  width: 46%;
}

.brand-word {
  display: grid;
  gap: 4px;
}

.brand-word b {
  font: 700 13px/1 "Syne", sans-serif;
  letter-spacing: 0.16em;
}

.brand-word small {
  opacity: 0.55;
  font: 500 6px/1 "DM Mono", monospace;
  letter-spacing: 0.22em;
}

.header-links {
  display: flex;
  align-items: center;
  gap: clamp(24px, 3vw, 46px);
}

.header-links a {
  position: relative;
  font: 500 13.5px/1 "Manrope", sans-serif;
  letter-spacing: 0.005em;
}

.header-links a::after {
  position: absolute;
  right: 0;
  bottom: -9px;
  left: 0;
  height: 1px;
  content: "";
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 180ms ease;
}

.header-links a:hover::after {
  transform: scaleX(1);
}

.header-action,
.primary-action {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 0 22px;
  border-radius: 5px;
  cursor: pointer;
  font: 600 12.5px/1 "Manrope", sans-serif;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease;
}

.header-action:hover,
.primary-action:hover {
  transform: translateY(-2px);
}

.header-action svg,
.primary-action svg {
  transition: transform 180ms ease;
}

.header-action:hover svg,
.primary-action:hover svg {
  transform: translateX(3px);
}

.mobile-menu {
  display: none;
  width: 44px;
  height: 44px;
  place-items: center;
  color: currentColor;
  background: transparent;
}

.mobile-menu svg {
  width: 24px;
  height: 24px;
}

.menu-close {
  display: none;
}

.menu-visible .menu-open {
  display: none;
}

.menu-visible .menu-close {
  display: inline;
}

.proof-strip {
  display: grid;
  min-height: 148px;
  padding: 0 clamp(28px, 6vw, 100px);
  grid-template-columns: repeat(5, 1fr);
}

.proof-strip > div {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
}

.proof-strip svg {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
}

.proof-strip span {
  display: grid;
  gap: 5px;
}

.proof-strip b {
  font-size: 10px;
  line-height: 1;
}

.proof-strip small {
  font: 500 7px/1 "DM Mono", monospace;
}

.site-footer {
  display: grid;
  min-height: 250px;
  align-items: center;
  padding: 50px clamp(28px, 7vw, 120px);
  grid-template-columns: 1fr 1fr 1fr;
  gap: 30px;
}

.site-footer p {
  margin: 0;
  text-align: center;
  font-size: 11px;
}

.site-footer > button {
  justify-self: end;
  color: inherit;
  background: transparent;
  cursor: pointer;
  font: 500 8px/1 "DM Mono", monospace;
}

.site-footer > button svg {
  margin-left: 10px;
}

/* 01 — CLIENT VISION */

body.theme-obsidian {
  color-scheme: dark;
  color: #f5f8ff;
  background: var(--o-bg);
}

/* ---------------------------------------------------------------------------
   Obsidian surface ramp. Every background, hairline and hero shade stop on
   this page reads from these tokens, so a background variant is a token swap
   — the hero imagery, layout and type stay exactly as they are.
   --------------------------------------------------------------------------- */
body.theme-obsidian,
body.theme-obsidian .obsidian {
  --o-bg: #0f172a;
  --o-bg-2: #091323;
  --o-bg-hero: #070f1e;
  --o-bg-close: #07101e;
  --o-bg-footer: #060d18;
  --o-card: #0d192c;
  --o-card-glow: rgba(36, 80, 144, 0.11);
  --o-card-line: rgba(139, 190, 255, 0.16);
  --o-line: rgba(150, 196, 255, 0.13);
  --o-line-2: rgba(150, 196, 255, 0.15);
  --o-header-bg: rgba(6, 14, 28, 0.72);
  --o-shade-core: rgba(15, 23, 42, 0.12);
  --o-shade-mid: rgba(5, 11, 23, 0.2);
  --o-shade-edge: rgba(5, 11, 23, 0.72);
  --o-shade-top: rgba(6, 14, 28, 0.3);
  --o-shade-a: rgba(7, 15, 30, 0.06);
  --o-shade-b: rgba(7, 15, 30, 0.2);
  --o-node: #101f36;
  --o-hero-wash:
    radial-gradient(circle at 50% 38%, var(--o-shade-core), var(--o-shade-mid) 45%, var(--o-shade-edge) 100%),
    linear-gradient(180deg, var(--o-shade-top), var(--o-shade-a) 55%, var(--o-shade-b));
}

.obsidian {
  color: #f6f9ff;
  background: var(--o-bg);
  font-family: "Manrope", sans-serif;
}

.o-hero {
  position: relative;
  min-height: 1020px;
  overflow: hidden;
  background: var(--o-bg-hero);
}

.o-header {
  border-bottom: 1px solid rgba(154, 198, 255, 0.15);
  background: var(--o-header-bg);
  backdrop-filter: blur(22px);
}

.o-header .brand-sigil {
  color: #0ea5e9;
}

.o-header .header-links {
  color: #bdc9da;
}

.o-header .header-action,
.o-primary {
  color: white;
  background: #106ff9;
  box-shadow: 0 16px 40px rgba(17, 104, 255, 0.24);
}

.o-header .header-action:hover,
.o-primary:hover {
  background: #1fa9ed;
}

.o-hero-image {
  position: absolute;
  inset: 86px 0 0;
  width: 100%;
  height: calc(100% - 86px);
  object-fit: cover;
  object-position: center bottom;
  opacity: 0.9;
}

.o-hero-shade {
  position: absolute;
  inset: 86px 0 0;
  background: var(--o-hero-wash);
}

/* The top ~55% of the hero photograph is empty near-black. This layer adds
   light *into* that void — `screen` can only lighten, so the glowing city in
   the lower third is left untouched. Variants supply `--o-hero-glow`. */
.o-hero-shade::after {
  position: absolute;
  inset: 0;
  content: "";
  background: var(--o-hero-glow, none);
  mix-blend-mode: screen;
  pointer-events: none;
}

.o-hero-copy {
  position: relative;
  z-index: 5;
  max-width: 1040px;
  margin: 0 auto;
  padding: clamp(115px, 11vw, 160px) 28px 300px;
  text-align: center;
}

.o-hero-copy > p {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 0 26px;
  color: #62c9ff;
  font: 500 8px/1 "DM Mono", monospace;
  letter-spacing: 0.13em;
}

.o-hero-copy > p i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #0ea5e9;
  box-shadow: 0 0 15px #0ea5e9;
}

.o-hero-copy h1 {
  margin: 0;
  font: 500 clamp(63px, 7.2vw, 112px)/0.88 "Manrope", sans-serif;
  letter-spacing: -0.068em;
}

.o-hero-copy h1 em {
  color: #8dccff;
  font-style: normal;
}

.o-hero-copy > span {
  display: block;
  max-width: 780px;
  margin: 33px auto 0;
  color: #bdc9da;
  font-size: 14px;
  line-height: 1.7;
}

.o-hero-copy > div {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  margin-top: 37px;
}

.o-hero-copy a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #dce7f4;
  font: 500 8px/1 "DM Mono", monospace;
}

.o-telemetry {
  position: absolute;
  z-index: 5;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: space-evenly;
  border-top: 1px solid rgba(134, 190, 255, 0.18);
  color: #8195ad;
  background: rgba(5, 12, 24, 0.64);
  font: 500 7px/1 "DM Mono", monospace;
  backdrop-filter: blur(16px);
}

.o-telemetry span:first-child {
  color: #c5d5e7;
}

.o-telemetry i {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 8px;
  border-radius: 50%;
  background: #16c784;
  box-shadow: 0 0 13px #16c784;
}

.o-proof {
  border-bottom: 1px solid rgba(150, 196, 255, 0.14);
  background: #0c1628;
}

.o-proof > div {
  border-right: 1px solid rgba(150, 196, 255, 0.12);
}

.o-proof > div:last-child {
  border-right: 0;
}

.o-proof svg {
  color: #8ba0ba;
}

.o-proof small {
  color: #31b8f4;
}

.o-intro {
  min-height: 790px;
  padding: clamp(110px, 13vw, 190px) clamp(30px, 8vw, 140px);
  background:
    radial-gradient(circle at 78% 28%, rgba(14, 165, 233, 0.08), transparent 29%),
    var(--o-bg);
}

.section-kicker {
  color: #32baf7;
  font: 500 10px/1 "DM Mono", monospace;
  letter-spacing: 0.16em;
}

.o-intro > div:nth-child(2) {
  display: grid;
  max-width: 1320px;
  align-items: end;
  margin-top: 65px;
  grid-template-columns: 1.25fr 0.55fr;
  gap: 80px;
}

.o-intro h2 {
  margin: 0;
  font: 500 clamp(64px, 7vw, 112px)/0.9 "Manrope", sans-serif;
  letter-spacing: -0.068em;
}

.o-intro h2 em {
  color: #73839a;
  font-style: normal;
}

.o-intro > div:nth-child(2) p {
  max-width: 34ch;
  margin: 0;
  color: #b3c1d4;
  font-size: 18px;
  line-height: 1.62;
  letter-spacing: -0.011em;
}

.o-intro-rule {
  height: 1px;
  margin: 100px 0 0;
  background: linear-gradient(90deg, #0ea5e9, rgba(14, 165, 233, 0.08));
}

.o-intro-points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.o-intro-points span {
  display: grid;
  min-height: 148px;
  align-content: center;
  padding: 30px 38px 30px 0;
  border-right: 1px solid var(--o-line);
  color: #aab8cb;
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: -0.006em;
}

.o-intro-points span + span {
  padding-left: 38px;
}

.o-intro-points span:last-child {
  border-right: 0;
}

.o-intro-points b {
  margin-bottom: 15px;
  color: white;
  font: 500 10px/1 "DM Mono", monospace;
  letter-spacing: 0.15em;
}

.o-system {
  padding: clamp(105px, 12vw, 175px) clamp(30px, 7vw, 120px);
  border-top: 1px solid var(--o-line);
  background: var(--o-bg-2);
}

.o-system-head {
  display: grid;
  max-width: 1320px;
  margin: 0 auto 85px;
  grid-template-columns: 0.42fr 1fr;
  gap: 50px;
}

.o-system-head > span {
  color: #38bdf8;
  font: 500 10px/1.4 "DM Mono", monospace;
  letter-spacing: 0.16em;
}

.o-system-head h2 {
  max-width: 960px;
  margin: 0;
  font: 500 clamp(51px, 5.5vw, 86px)/0.97 "Syne", sans-serif;
  letter-spacing: -0.06em;
}

.o-bento {
  display: grid;
  max-width: 1320px;
  margin: 0 auto;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* :not(.o-bento-main) — the wide card is a 2-column grid and `display: flex`
   here would outrank it and collapse the diagram onto a second row. */
.o-bento article:not(.o-bento-main) {
  display: flex;
  flex-direction: column;
}

.o-bento article {
  position: relative;
  min-height: 318px;
  padding: 34px 36px 36px;
  overflow: hidden;
  border: 1px solid var(--o-card-line);
  border-radius: 12px;
  background:
    linear-gradient(145deg, var(--o-card-glow), transparent 55%),
    var(--o-card);
}

.o-bento article:not(.o-bento-main)::after {
  position: absolute;
  right: -45px;
  bottom: -45px;
  width: 135px;
  height: 135px;
  border: 1px solid rgba(69, 166, 255, 0.14);
  border-radius: 50%;
  content: "";
}

.o-bento-main {
  display: grid;
  min-height: 520px !important;
  grid-column: 1 / -1;
  grid-template-columns: 0.7fr 1.3fr;
}

.o-bento-main > div:first-child {
  display: flex;
  flex-direction: column;
}

.o-bento-main > div:first-child h3 {
  margin-top: auto;
}

.o-bento article > span,
.o-bento-main > div:first-child > span {
  color: #38bdf8;
  font: 500 10px/1 "DM Mono", monospace;
  letter-spacing: 0.15em;
}

.o-bento article > svg,
.o-bento-main > div:first-child > svg {
  display: block;
  width: 32px;
  height: 32px;
  margin-top: 30px;
  color: #54baff;
}

.o-bento h3 {
  margin: auto 0 14px;
  padding-top: 44px;
  font: 600 27px/1.08 "Syne", sans-serif;
  letter-spacing: -0.035em;
}

.o-bento-main h3 {
  max-width: 420px;
  padding-top: 56px;
  font-size: 42px;
  line-height: 1.02;
}

.o-bento p {
  max-width: 46ch;
  margin: 0;
  color: #a7b6c9;
  font-size: 15px;
  line-height: 1.62;
  letter-spacing: -0.006em;
}

.o-boundary-map {
  position: relative;
  display: flex;
  min-height: 485px;
  align-items: center;
  justify-content: center;
  background-image:
    linear-gradient(rgba(79, 146, 224, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79, 146, 224, 0.07) 1px, transparent 1px);
  background-size: 32px 32px;
}

.o-boundary-map::before {
  position: absolute;
  inset: 50px 20px;
  border: 1px solid rgba(55, 177, 255, 0.22);
  border-radius: 50%;
  content: "";
  box-shadow: inset 0 0 70px rgba(14, 165, 233, 0.06);
}

.o-boundary-map > span,
.o-boundary-map > strong {
  position: relative;
  z-index: 2;
  display: grid;
  width: 100px;
  height: 100px;
  place-items: center;
  border: 1px solid rgba(112, 183, 255, 0.3);
  border-radius: 14px;
  background: var(--o-node, #101f36);
}

.o-boundary-map > strong {
  width: 170px;
  height: 190px;
  border-color: rgba(68, 190, 255, 0.6);
  box-shadow: 0 0 55px rgba(14, 165, 233, 0.2);
}

.o-boundary-map svg {
  width: 31px;
  height: 31px;
  color: #56c6ff;
}

.o-boundary-map b,
.o-boundary-map small {
  font: 500 9px/1.35 "DM Mono", monospace;
  letter-spacing: 0.1em;
  text-align: center;
}

.o-boundary-map small {
  margin-top: -20px;
  color: #37d492;
}

.o-boundary-map > i {
  position: relative;
  z-index: 2;
  width: 65px;
  height: 1px;
  background: linear-gradient(90deg, rgba(84, 198, 255, 0.2), #54c6ff);
}

.o-outcome {
  padding: clamp(110px, 13vw, 190px) clamp(30px, 8vw, 140px);
  border-top: 1px solid var(--o-line);
  background:
    radial-gradient(circle at 50% 0, rgba(33, 102, 224, 0.17), transparent 35%),
    var(--o-bg);
  text-align: center;
}

.o-outcome-label {
  color: #38bdf8;
  font: 500 10px/1 "DM Mono", monospace;
  letter-spacing: 0.16em;
}

.o-outcome blockquote {
  max-width: 1180px;
  margin: 60px auto 90px;
  font: 400 clamp(57px, 6.5vw, 104px)/0.94 "Instrument Serif", serif;
  letter-spacing: -0.04em;
}

.o-outcome-metrics {
  display: grid;
  max-width: 1120px;
  margin: 0 auto;
  border-top: 1px solid var(--o-line-2);
  border-left: 1px solid var(--o-line-2);
  grid-template-columns: repeat(3, 1fr);
}

.o-outcome-metrics span {
  display: grid;
  min-height: 186px;
  align-content: center;
  justify-items: center;
  padding: 30px 24px;
  border-right: 1px solid var(--o-line-2);
  border-bottom: 1px solid var(--o-line-2);
  color: #aab8cb;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}

.o-outcome-metrics b {
  display: block;
  margin-bottom: 16px;
  color: white;
  font: 500 58px/1 "Syne", sans-serif;
  letter-spacing: -0.03em;
}

.o-industries {
  display: grid;
  min-height: 720px;
  align-items: center;
  padding: clamp(100px, 12vw, 170px) clamp(30px, 8vw, 140px);
  border-top: 1px solid var(--o-line);
  background: var(--o-bg-2);
  grid-template-columns: 0.9fr 1.1fr;
  gap: 100px;
}

.o-industries > div > span {
  color: #38bdf8;
  font: 500 10px/1 "DM Mono", monospace;
  letter-spacing: 0.16em;
}

.o-industries h2 {
  max-width: 650px;
  margin: 30px 0 0;
  font: 500 clamp(56px, 6vw, 92px)/0.94 "Syne", sans-serif;
  letter-spacing: -0.06em;
}

.o-industries ol {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--o-line-2);
  list-style: none;
}

.o-industries li {
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 30px 0;
  border-bottom: 1px solid var(--o-line-2);
  font: 500 24px/1.15 "Syne", sans-serif;
  letter-spacing: -0.02em;
}

.o-industries li b {
  color: #8394ac;
  font: 500 10px/1 "DM Mono", monospace;
  letter-spacing: 0.12em;
}

.o-close {
  min-height: 760px;
  padding: 150px 30px;
  background:
    radial-gradient(circle at 50% 40%, rgba(24, 119, 255, 0.24), transparent 29%),
    var(--o-bg-close);
  text-align: center;
}

.o-close p {
  color: #38bdf8;
  font: 500 10px/1 "DM Mono", monospace;
  letter-spacing: 0.16em;
}

.o-close h2 {
  margin: 45px 0 55px;
  font: 500 clamp(67px, 8vw, 128px)/0.86 "Manrope", sans-serif;
  letter-spacing: -0.075em;
}

.o-close h2 em {
  color: #84caff;
  font-style: normal;
}

.o-footer {
  border-top: 1px solid var(--o-line);
  color: #8394aa;
  background: var(--o-bg-footer);
}

/* RESPONSIVE */

@media (max-width: 1180px) {
  .site-header {
    padding-right: 34px;
    padding-left: 34px;
  }

  .header-links {
    gap: 24px;
  }

  .o-bento-main {
    grid-template-columns: 0.85fr 1.15fr;
  }

  .o-boundary-map > i {
    width: 36px;
  }

  .m-hero-grid,
  .a-hero-grid {
    gap: 42px;
  }

  .b-hero-copy {
    width: 54vw;
  }

  .l-node-panel {
    grid-template-columns: 1fr 0.9fr;
  }
}

@media (max-width: 960px) {
  .proof-strip {
    grid-template-columns: repeat(3, 1fr);
  }

  .proof-strip > div {
    min-height: 110px;
  }

  .o-intro > div:nth-child(2),
  .o-system-head,
  .o-industries{
    grid-template-columns: 1fr;
  }

  .o-intro-points{
    grid-template-columns: repeat(2, 1fr);
  }

  .o-bento {
    grid-template-columns: 1fr 1fr;
  }

  .o-bento-main {
    grid-column: 1 / -1;
  }

  .o-industries {
    gap: 65px;
  }}

@media (max-width: 720px) {

  .skip-link {
    left: 12px;
  }

  .site-header {
    min-height: 70px;
    padding: 0 20px;
  }

  .site-brand {
    gap: 9px;
  }

  .brand-sigil {
    width: 23px;
  }

  .brand-word b {
    font-size: 11px;
  }

  .brand-word small {
    font-size: 5px;
  }

  .proof-strip {
    grid-template-columns: 1fr 1fr;
  }

  .proof-strip > div {
    min-height: 115px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
  }

  .proof-strip > div:last-child {
    grid-column: 1 / -1;
  }

  .site-footer {
    min-height: 310px;
    padding-bottom: 90px;
    grid-template-columns: 1fr;
    text-align: center;
  }

  .site-footer .site-brand,
  .site-footer > button {
    justify-self: center;
  }

  .o-hero {
    min-height: 980px;
  }

  .o-hero-image,
  .o-hero-shade {
    top: 70px;
  }

  .o-hero-image {
    object-position: 54% bottom;
  }

  .o-hero-shade {
    background:
      linear-gradient(180deg, rgba(5, 13, 25, 0.3), rgba(5, 13, 25, 0.72) 57%, rgba(5, 13, 25, 0.25)),
      radial-gradient(circle at 50% 40%, rgba(15, 23, 42, 0.1), rgba(5, 11, 23, 0.52));
  }

  .o-hero-copy {
    padding: 104px 20px 310px;
  }

  .o-hero-copy h1 {
    font-size: clamp(53px, 15.2vw, 72px);
  }

  .o-hero-copy > span {
    font-size: 12px;
  }

  .o-hero-copy > div{
    flex-direction: column;
  }

  .o-telemetry {
    min-height: 80px;
    flex-wrap: wrap;
    gap: 13px;
    padding: 13px 20px;
  }

  .o-telemetry span {
    width: 44%;
    text-align: center;
  }

  .o-intro,
  .o-system,
  .o-outcome,
  .o-industries{
    padding: 100px 22px;
  }

  .o-intro > div:nth-child(2) {
    margin-top: 40px;
    gap: 35px;
  }

  .o-intro h2,
  .o-system-head h2,
  .o-industries h2{
    font-size: clamp(46px, 13vw, 68px);
  }

  .o-intro-rule {
    margin-top: 65px;
  }

  .o-intro-points,
  .o-bento,
  .o-outcome-metrics{
    grid-template-columns: 1fr;
  }

  .o-intro-points span {
    min-height: 105px;
    border-right: 0;
    border-bottom: 1px solid rgba(150, 196, 255, 0.13);
  }

  .o-system-head {
    margin-bottom: 55px;
    gap: 25px;
  }

  .o-bento-main {
    min-height: auto !important;
    grid-template-columns: 1fr;
  }

  .o-bento-main h3 {
    margin-top: 80px;
    font-size: 34px;
  }

  .o-boundary-map {
    min-height: 420px;
    margin-top: 40px;
  }

  .o-boundary-map > span {
    width: 70px;
    height: 70px;
  }

  .o-boundary-map > strong {
    width: 125px;
    height: 155px;
  }

  .o-boundary-map > i {
    width: 20px;
  }

  .o-outcome blockquote {
    font-size: clamp(50px, 14vw, 72px);
  }

  .o-industries {
    gap: 55px;
  }

  .o-industries li {
    font-size: 17px;
  }

  .o-close{
    min-height: 650px;
    padding: 110px 22px;
  }

  .o-close h2{
    font-size: clamp(60px, 16vw, 82px);
  }}

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

/* 2026 DESIGN POLISH — a shared quality system with concept-specific expression */

:root {
  --page-progress: 0;
}

body {
  text-rendering: geometricPrecision;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid #73d9ff;
  outline-offset: 4px;
}

h1,
h2,
h3,
blockquote {
  text-wrap: balance;
}

p,
.o-hero-copy > span{
  text-wrap: pretty;
}

.header-action,
.primary-action {
  min-height: 50px;
  padding: 0 26px;
  letter-spacing: 0.012em;
}

.proof-strip b {
  font-size: 11px;
}

.proof-strip small {
  font-size: 8px;
}

.site-brand,
.header-links a,
.site-footer > button {
  transition:
    opacity 180ms ease,
    transform 180ms ease,
    color 180ms ease;
}

.site-brand:hover {
  opacity: 0.76;
}

.site-footer > button:hover {
  transform: translateX(4px);
}

.polish-reveal {
  opacity: 0;
  transform: translateY(34px);
  transition:
    opacity 780ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 780ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--reveal-order, 0) * 45ms);
}

.polish-reveal.is-visible {
  opacity: 1;
  transform: none;
}

.o-hero{
  --hero-x: 50%;
  --hero-y: 42%;
  isolation: isolate;
}

.o-hero::before{
  position: absolute;
  z-index: 3;
  inset: 86px 0 0;
  content: "";
  pointer-events: none;
}

.o-hero::before {
  background:
    radial-gradient(circle 420px at var(--hero-x) var(--hero-y), rgba(53, 153, 255, 0.11), transparent 72%),
    linear-gradient(90deg, transparent 49.94%, rgba(89, 175, 255, 0.08) 50%, transparent 50.06%);
}

.o-hero-image{
  transition:
    transform 1.2s cubic-bezier(0.16, 1, 0.3, 1),
    filter 600ms ease;
}

.o-hero-image {
  filter: saturate(1.14) contrast(1.04);
}

.o-bento article{
  transition:
    transform 260ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 260ms ease,
    background 260ms ease,
    box-shadow 260ms ease;
}

@media (hover: hover) {
  .o-bento article:hover {
    z-index: 2;
    border-color: rgba(96, 191, 255, 0.42);
    background:
      linear-gradient(145deg, rgba(38, 108, 207, 0.18), transparent 56%),
      #0e1c31;
    box-shadow: 0 28px 70px rgba(0, 5, 15, 0.25);
    transform: translateY(-6px);
  }}

@media (min-width: 961px) {
  .o-hero {
    min-height: max(780px, 100svh);
  }

  .o-hero-copy {
    padding-top: clamp(88px, 8vw, 126px);
    padding-bottom: 190px;
  }}

@media (max-width: 720px) {

  .polish-reveal {
    transform: translateY(22px);
  }

  .o-hero::before{
    inset: 70px 0 0;
  }

  .proof-strip b {
    font-size: 10px;
  }}

@media (prefers-reduced-motion: reduce) {
  .polish-reveal {
    opacity: 1;
    transform: none;
  }}

/* DENSITY + TYPE CALIBRATION
   Keep the five visual systems distinct while making the reading rhythm
   consistent enough for an executive audience. */

.brand-word b {
  font-size: 14px;
}

.brand-word small {
  font-size: 8.5px;
}

.proof-strip {
  min-height: 116px;
}

.proof-strip b {
  font-size: 12px;
}

.proof-strip small {
  font-size: 9px;
}

.site-footer {
  min-height: 210px;
}

.site-footer p {
  font-size: 13px;
  line-height: 1.55;
}

.site-footer > button {
  font-size: 9px;
}

.o-hero-copy a{
  font-size: 9.5px;
}

.o-telemetry{
  font-size: 9px;
}

.o-boundary-map b,
.o-boundary-map small {
  font-size: 9px;
}

.v3-page section p {
  font-size: 14px;
  line-height: 1.7;
}

.o-hero-copy > span{
  font-size: 15px;
  line-height: 1.65;
}

.o-hero-copy > p{
  font-size: 9.5px;
  line-height: 1;
}

.v3-page .o-hero h1 {
  font-size: clamp(58px, 6.35vw, 86px);
}

.v3-page section:not(:first-child) h2 {
  font-size: clamp(46px, 5.2vw, 76px);
}

.v3-page .o-close h2{
  font-size: clamp(54px, 6.3vw, 84px);
}

.v3-page .o-outcome blockquote {
  font-size: clamp(50px, 5.4vw, 78px);
}

@media (min-width: 961px) {
  .o-hero {
    min-height: max(720px, 100svh);
  }

  .o-hero-copy {
    padding-top: clamp(70px, 6vw, 96px);
    padding-bottom: 145px;
  }

  .o-intro,
  .o-industries {
    min-height: 0;
    padding-top: 100px;
    padding-bottom: 100px;
  }

  .o-intro > div:nth-child(2) {
    margin-top: 46px;
    gap: 60px;
  }

  .o-intro-rule {
    margin-top: 62px;
  }

  .o-intro-points span {
    min-height: 124px;
  }

  .o-system,
  .o-outcome {
    padding-top: 100px;
    padding-bottom: 100px;
  }

  .o-system-head {
    margin-bottom: 58px;
  }

  .o-bento article {
    min-height: 292px;
    padding: 30px 32px 32px;
  }

  .o-bento-main {
    min-height: 455px !important;
  }

  .o-bento article > svg,
  .o-bento-main > div:first-child > svg {
    margin-top: 26px;
  }

  .o-bento h3 {
    padding-top: 38px;
  }

  .o-bento-main h3 {
    padding-top: 44px;
    font-size: 38px;
  }

  .o-boundary-map {
    min-height: 395px;
  }

  .o-outcome blockquote {
    margin: 46px auto 62px;
  }

  .o-outcome-metrics span {
    min-height: 152px;
  }

  .o-industries {
    gap: 72px;
  }

  .o-industries li {
    padding: 22px 0;
  }

  .o-close {
    min-height: 540px;
    padding: 100px 30px;
  }}

@media (min-width: 721px) and (max-width: 960px) {
  .v3-page .o-hero h1{
    font-size: clamp(62px, 9vw, 78px);
  }

  .v3-page section:not(:first-child) h2 {
    font-size: clamp(48px, 7vw, 66px);
  }

  .o-intro,
  .o-system,
  .o-outcome,
  .o-industries{
    min-height: 0;
    padding-top: 88px;
    padding-bottom: 88px;
  }

  .o-close{
    min-height: 520px;
    padding: 92px 30px;
  }}

@media (max-width: 720px) {
  .v3-page section p {
    font-size: 15px;
    line-height: 1.65;
  }

  .o-hero-copy > span{
    font-size: 15px;
  }

  .v3-page .o-hero h1{
    font-size: clamp(48px, 13.5vw, 62px);
  }

  .v3-page section:not(:first-child) h2 {
    font-size: clamp(42px, 11.5vw, 56px);
  }

  .v3-page .o-close h2{
    font-size: clamp(48px, 13vw, 62px);
  }

  .o-intro,
  .o-system,
  .o-outcome,
  .o-industries{
    padding: 72px 20px;
  }

  .proof-strip {
    min-height: 0;
  }

  .proof-strip > div {
    min-height: 96px;
  }

  .o-hero-copy {
    padding-top: 86px;
  }

  .o-close{
    min-height: 480px;
    padding: 82px 20px;
  }

  .site-footer {
    min-height: 250px;
  }}

/* ===========================================================================
   OBSIDIAN — module typography
   The global passes above (`.v3-page section p`, the 9.5px eyebrow group)
   pulled this page's supporting copy below its legible floor and left a 6×
   gap between the 66px display type and an 11–14px body. This block restores
   a middle register for the modules under the hero. Scoped to `.obsidian`
   so the other four concepts are untouched.
   =========================================================================== */

.obsidian .o-bento p,
.obsidian .o-intro-points span {
  font-size: 15px;
  line-height: 1.62;
  letter-spacing: -0.006em;
}

.obsidian .o-intro > div:nth-child(2) p {
  font-size: 18px;
  line-height: 1.62;
}

.obsidian .o-outcome-metrics span {
  font-size: 14px;
  line-height: 1.5;
}

/* Reserve two lines of description in the 3-up row so a one-line card doesn't
   drop its title 23px below its neighbours' baseline. */
.obsidian .o-bento article:not(.o-bento-main) p {
  min-height: 3.24em;
}

/* ===========================================================================
   OBSIDIAN — background variants
   Three degrees of lighter, requested after the customer found the original
   too dark. Only the surface ramp moves: the hero photograph, its composition,
   the type and the electric-blue accent are identical across all four.
   Applied as a class on <body>; `?bg=harbor|slate|ashfall` selects one.
   =========================================================================== */

/* 01 · HARBOR — one step off the floor. Same authority, less weight. */
body.bg-harbor,
body.bg-harbor .obsidian {
  --o-bg: #17223c;
  --o-bg-2: #131c33;
  --o-bg-hero: #101830;
  --o-bg-close: #121b34;
  --o-bg-footer: #0f1729;
  --o-card: #1c2743;
  --o-card-glow: rgba(56, 108, 190, 0.13);
  --o-card-line: rgba(150, 196, 255, 0.19);
  --o-line: rgba(160, 200, 255, 0.16);
  --o-line-2: rgba(160, 200, 255, 0.19);
  --o-header-bg: rgba(16, 24, 44, 0.74);
  --o-shade-core: rgba(23, 34, 60, 0.1);
  --o-shade-mid: rgba(16, 24, 44, 0.16);
  --o-shade-edge: rgba(16, 24, 44, 0.64);
  --o-shade-top: rgba(16, 24, 44, 0.24);
  --o-shade-a: rgba(16, 24, 48, 0.05);
  --o-shade-b: rgba(16, 24, 48, 0.16);
  --o-node: #1d2c4b;
}

/* 02 · SLATE — clearly lighter. Dusk blue; the lights are on in the room. */
body.bg-slate,
body.bg-slate .obsidian {
  --o-bg: #253352;
  --o-bg-2: #1f2c48;
  --o-bg-hero: #1a2642;
  --o-bg-close: #1e2b47;
  --o-bg-footer: #1b273f;
  --o-card: #2b3a5c;
  --o-card-glow: rgba(74, 130, 214, 0.16);
  --o-card-line: rgba(168, 205, 255, 0.24);
  --o-line: rgba(176, 210, 255, 0.2);
  --o-line-2: rgba(176, 210, 255, 0.24);
  --o-header-bg: rgba(26, 38, 66, 0.76);
  --o-shade-core: rgba(37, 51, 82, 0.08);
  --o-shade-mid: rgba(26, 38, 66, 0.12);
  --o-shade-edge: rgba(26, 38, 66, 0.58);
  --o-shade-top: rgba(26, 38, 66, 0.2);
  --o-shade-a: rgba(26, 38, 66, 0.04);
  --o-shade-b: rgba(26, 38, 66, 0.12);
  --o-node: #2c3d61;
}

/* 03 · ASHFALL — the lightest the hero photograph will carry. Blue-grey
   daylight; the art still anchors the top without becoming a dark island. */
body.bg-ashfall,
body.bg-ashfall .obsidian {
  --o-bg: #3a4763;
  --o-bg-2: #333f5a;
  --o-bg-hero: #2b3751;
  --o-bg-close: #313d58;
  --o-bg-footer: #2e3a54;
  --o-card: #43516f;
  --o-card-glow: rgba(104, 158, 232, 0.18);
  --o-card-line: rgba(196, 222, 255, 0.28);
  --o-line: rgba(200, 224, 255, 0.24);
  --o-line-2: rgba(200, 224, 255, 0.3);
  --o-header-bg: rgba(43, 55, 81, 0.78);
  --o-shade-core: rgba(58, 71, 99, 0.06);
  --o-shade-mid: rgba(43, 55, 81, 0.1);
  --o-shade-edge: rgba(43, 55, 81, 0.5);
  --o-shade-top: rgba(43, 55, 81, 0.16);
  --o-shade-a: rgba(43, 55, 81, 0.03);
  --o-shade-b: rgba(43, 55, 81, 0.1);
  --o-node: #445473;
}

/* Muted copy has to walk back down the ramp as the surface climbs, or it
   loses contrast against it. Accent blue is left alone — it holds on all four. */
body.bg-slate .obsidian .o-bento p,
body.bg-slate .obsidian .o-intro-points span,
body.bg-slate .obsidian .o-outcome-metrics span,
body.bg-slate .obsidian .o-intro > div:nth-child(2) p {
  color: #c3d0e2;
}

body.bg-ashfall .obsidian .o-bento p,
body.bg-ashfall .obsidian .o-intro-points span,
body.bg-ashfall .obsidian .o-outcome-metrics span,
body.bg-ashfall .obsidian .o-intro > div:nth-child(2) p {
  color: #d7e1ef;
}

body.bg-ashfall .obsidian .o-intro h2 em {
  color: #97a6bd;
}

body.bg-ashfall .obsidian .o-industries li b {
  color: #a3b2c9;
}

/* ---- variant switcher -------------------------------------------------- */








@media (max-width: 720px) {


}

/* ===========================================================================
   OBSIDIAN — hero atmosphere variants
   The customer's objection was specifically the landing view: the top half of
   the hero photograph is an empty near-black field, so the headline sits in a
   void. These three put light into that void. The photograph itself is the
   same asset at the same crop in every one — the glow is a `screen`-blended
   layer above it, which can only add light, never cover the city below.
   =========================================================================== */

/* 04 · DAYBREAK — dawn over the facility. Light rises from behind the city and
   blooms up through the empty field; a warm core keeps it from going clinical. */
body.bg-daybreak,
body.bg-daybreak .obsidian {
  --o-bg: #1c2743;
  --o-bg-2: #17203a;
  --o-bg-hero: #141d34;
  --o-bg-close: #17213a;
  --o-bg-footer: #141c31;
  --o-card: #212e4d;
  --o-node: #22304f;
  --o-card-glow: rgba(96, 138, 214, 0.14);
  --o-card-line: rgba(168, 200, 255, 0.2);
  --o-line: rgba(176, 206, 255, 0.17);
  --o-line-2: rgba(176, 206, 255, 0.2);
  --o-header-bg: rgba(20, 29, 52, 0.72);

  --o-hero-wash:
    linear-gradient(180deg, rgba(20, 29, 52, 0.08), rgba(20, 29, 52, 0) 40%, rgba(20, 29, 52, 0.24));
  --o-hero-glow:
    radial-gradient(ellipse 130% 60% at 50% 98%, rgba(255, 176, 104, 0.24), rgba(255, 148, 88, 0.09) 32%, transparent 62%),
    radial-gradient(ellipse 110% 60% at 50% 72%, rgba(92, 160, 255, 0.24), transparent 66%),
    radial-gradient(ellipse 120% 74% at 50% 10%, rgba(126, 176, 255, 0.42), rgba(96, 148, 236, 0.2) 42%, transparent 78%),
    linear-gradient(180deg, rgba(150, 194, 255, 0.24), rgba(120, 168, 240, 0.08) 34%, transparent 58%);
}

/* 05 · CIRRUS — high, soft{
  --o-bg: #38455f;
  --o-bg-2: #313d57;
  --o-bg-hero: #2c3852;
  --o-bg-close: #313d57;
  --o-bg-footer: #2b3750;
  --o-card: #43506d;
  --o-node: #465573;
  --o-card-glow: rgba(140, 180, 240, 0.16);
  --o-card-line: rgba(206, 226, 255, 0.28);
  --o-line: rgba(210, 230, 255, 0.24);
  --o-line-2: rgba(210, 230, 255, 0.3);
  --o-header-bg: rgba(44, 56, 82, 0.74);

  --o-hero-wash:
    linear-gradient(180deg, rgba(44, 56, 82, 0.2), rgba(44, 56, 82, 0.02) 52%, rgba(44, 56, 82, 0.26));
  --o-hero-glow:
    linear-gradient(180deg, rgba(206, 228, 255, 0.36), rgba(176, 208, 250, 0.2) 44%, rgba(150, 190, 240, 0.08) 66%, transparent 82%),
    radial-gradient(ellipse 92% 54% at 50% 18%, rgba(232, 243, 255, 0.28), transparent 72%),
    radial-gradient(ellipse 130% 54% at 50% 94%, rgba(158, 200, 255, 0.2), transparent 66%);
}

/* 06 · ION — electric atmosphere. Keeps the energy of the original but trades
   the black field for saturated colour: an azure bloom behind the headline. */
/* The approved surface. Originally the "ion" variant; folded into the base
   theme when the variant switcher was removed, so it now IS the design. */
body.theme-obsidian,
body.theme-obsidian .obsidian {
  --o-bg: #111f3f;
  --o-bg-2: #0d1934;
  --o-bg-hero: #0b162f;
  --o-bg-close: #0d1935;
  --o-bg-footer: #0b1428;
  --o-card: #17264a;
  --o-node: #182a52;
  --o-card-glow: rgba(38, 128, 226, 0.18);
  --o-card-line: rgba(120, 190, 255, 0.24);
  --o-line: rgba(130, 195, 255, 0.19);
  --o-line-2: rgba(130, 195, 255, 0.23);
  --o-header-bg: rgba(11, 22, 47, 0.72);

  --o-hero-wash:
    radial-gradient(circle at 50% 44%, rgba(11, 22, 47, 0), rgba(11, 22, 47, 0.14) 58%, rgba(11, 22, 47, 0.34) 100%),
    linear-gradient(180deg, rgba(11, 22, 47, 0.06), rgba(11, 22, 47, 0) 44%, rgba(11, 22, 47, 0.22));
  --o-hero-glow:
    radial-gradient(ellipse 116% 72% at 50% 14%, rgba(0, 186, 255, 0.46), rgba(0, 124, 232, 0.2) 44%, transparent 78%),
    linear-gradient(180deg, rgba(58, 198, 255, 0.24), rgba(30, 150, 245, 0.08) 36%, transparent 60%),
    radial-gradient(ellipse 130% 52% at 50% 96%, rgba(0, 152, 255, 0.22), transparent 62%);
}

/* Cirrus lifts the hero field furthest{
  color: #e4edf8;
}
/* ===========================================================================
   PRODUCTION SECTIONS
   Interior pages and the expanded home sections. Everything below reuses the
   Obsidian tokens (--o-*) so a surface change still propagates in one place.
   =========================================================================== */

/* --- Interior page hero --------------------------------------------------- */

.f-page-hero {
  position: relative;
  padding-bottom: clamp(70px, 9vw, 120px);
  border-bottom: 1px solid var(--o-line);
  background:
    radial-gradient(ellipse 90% 70% at 50% -10%, rgba(0, 150, 255, 0.22), transparent 70%),
    var(--o-bg-hero);
}

.f-page-hero-copy {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(70px, 8vw, 110px) clamp(30px, 7vw, 60px) 0;
  text-align: center;
}

.f-page-hero-copy h1 {
  margin: 26px 0 0;
  font: 500 clamp(46px, 6vw, 88px)/0.92 "Manrope", sans-serif;
  letter-spacing: -0.062em;
}

.f-lede {
  max-width: 760px;
  margin: 32px auto 0;
  color: #b9c6d8;
  font-size: 17px;
  line-height: 1.68;
  letter-spacing: -0.011em;
}

/* --- Shared section head -------------------------------------------------- */

.f-section-head {
  max-width: 940px;
}

.f-section-head h2 {
  margin: 26px 0 0;
  font: 500 clamp(38px, 4.6vw, 64px)/1 "Manrope", sans-serif;
  letter-spacing: -0.052em;
}

.f-section-head h2 em {
  color: #73839a;
  font-style: normal;
}

.f-section-head > p {
  max-width: 66ch;
  margin: 24px 0 0;
  color: #b3c1d4;
  font-size: 17px;
  line-height: 1.65;
}

/* --- Generic card + list primitives --------------------------------------- */

.f-card,
.f-value-grid article,
.f-industry-grid article,
.f-platform-grid article,
.f-opt-grid article,
.f-persona-grid article,
.f-division-grid article,
.f-contact-intents > article {
  padding: 32px 34px 34px;
  border: 1px solid var(--o-card-line);
  border-radius: 12px;
  background:
    linear-gradient(145deg, var(--o-card-glow), transparent 55%),
    var(--o-card);
}

.f-check-list {
  display: grid;
  margin: 22px 0 0;
  padding: 0;
  gap: 12px;
  list-style: none;
}

.f-check-list li {
  position: relative;
  padding-left: 26px;
  color: #b3c1d4;
  font-size: 14px;
  line-height: 1.62;
}

.f-check-list li::before {
  position: absolute;
  top: 7px;
  left: 0;
  width: 12px;
  height: 7px;
  border-bottom: 1.6px solid #32baf7;
  border-left: 1.6px solid #32baf7;
  content: "";
  transform: rotate(-45deg);
}

.f-inline-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 54px;
  color: #8dccff;
  font: 500 9px/1 "DM Mono", monospace;
  letter-spacing: 0.08em;
}

.f-inline-link svg {
  transition: transform 180ms ease;
}

.f-inline-link:hover svg {
  transform: translateX(4px);
}

/* --- Home: value propositions --------------------------------------------- */

.f-value {
  padding: clamp(105px, 12vw, 175px) clamp(30px, 7vw, 120px);
  border-top: 1px solid var(--o-line);
  background: var(--o-bg-2);
}

.f-value-grid {
  display: grid;
  margin-top: 70px;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.f-value-grid svg {
  width: 28px;
  height: 28px;
  color: #32baf7;
}

.f-value-grid h3 {
  margin: 22px 0 0;
  font: 500 20px/1.25 "Manrope", sans-serif;
  letter-spacing: -0.03em;
}

.f-value-grid p {
  margin: 14px 0 0;
  color: #a9b8cc;
  font-size: 14px;
  line-height: 1.65;
}

/* --- Home: service list --------------------------------------------------- */

.f-services {
  padding: clamp(105px, 12vw, 175px) clamp(30px, 7vw, 120px);
  border-top: 1px solid var(--o-line);
  background: var(--o-bg);
}

.f-service-list {
  margin: 66px 0 0;
  padding: 0;
  border-top: 1px solid var(--o-line);
  list-style: none;
}

.f-service-list li {
  display: grid;
  align-items: baseline;
  padding: 32px 0;
  border-bottom: 1px solid var(--o-line);
  grid-template-columns: 90px 1fr;
  gap: 20px;
  transition: background 180ms ease;
}

.f-service-list li > span {
  color: #32baf7;
  font: 500 10px/1 "DM Mono", monospace;
  letter-spacing: 0.16em;
}

.f-service-list h3 {
  margin: 0;
  font: 500 26px/1.2 "Manrope", sans-serif;
  letter-spacing: -0.035em;
}

.f-service-list p {
  max-width: 74ch;
  margin: 12px 0 0;
  color: #a9b8cc;
  font-size: 15px;
  line-height: 1.62;
}

/* --- Partner metrics ------------------------------------------------------ */

.f-partner {
  padding: clamp(105px, 12vw, 175px) clamp(30px, 7vw, 120px);
  border-top: 1px solid var(--o-line);
  background: var(--o-bg-2);
}

.f-partner-metrics {
  display: grid;
  margin-top: 70px;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.f-partner-metrics > div {
  padding: 36px 34px;
  border: 1px solid var(--o-card-line);
  border-radius: 12px;
  background:
    linear-gradient(145deg, var(--o-card-glow), transparent 55%),
    var(--o-card);
}

.f-partner-metrics b {
  display: block;
  color: #8dccff;
  font: 500 clamp(44px, 5vw, 62px)/1 "Manrope", sans-serif;
  letter-spacing: -0.055em;
}

.f-partner-metrics span {
  display: block;
  margin-top: 16px;
  color: #a9b8cc;
  font-size: 14px;
  line-height: 1.6;
}

/* Provenance for third-party numbers — it should never read as our own claim. */
.f-metric-note,
.f-industry-note,
.f-division-note {
  max-width: 82ch;
  margin: 28px 0 0;
  color: #8595ac;
  font-size: 12.5px;
  line-height: 1.66;
}

/* --- Solutions: offerings ------------------------------------------------- */

.f-offering {
  display: grid;
  padding: clamp(80px, 9vw, 130px) clamp(30px, 7vw, 120px);
  border-top: 1px solid var(--o-line);
  grid-template-columns: 160px 1fr;
  gap: 40px;
}

.f-offering:nth-of-type(even) {
  background: var(--o-bg-2);
}

.f-offering-index span {
  color: #32baf7;
  font: 500 12px/1 "DM Mono", monospace;
  letter-spacing: 0.18em;
}

.f-offering-body {
  max-width: 900px;
}

.f-offering-body h2 {
  margin: 0;
  font: 500 clamp(30px, 3.4vw, 44px)/1.1 "Manrope", sans-serif;
  letter-spacing: -0.042em;
}

.f-offering-body > p {
  max-width: 72ch;
  margin: 20px 0 0;
  color: #b3c1d4;
  font-size: 16px;
  line-height: 1.66;
}

.f-addresses {
  max-width: 80ch;
  margin: 26px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--o-line);
  color: #93a3b9;
  font-size: 13px;
  line-height: 1.6;
}

.f-addresses b {
  color: #c8d6e8;
  font-weight: 500;
}

/* --- Industry grids ------------------------------------------------------- */

.f-industries-detail {
  padding: clamp(105px, 12vw, 175px) clamp(30px, 7vw, 120px);
  border-top: 1px solid var(--o-line);
  background: var(--o-bg);
}

.f-industry-grid {
  display: grid;
  margin-top: 66px;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.f-industry-grid h3 {
  margin: 0;
  font: 500 19px/1.25 "Manrope", sans-serif;
  letter-spacing: -0.03em;
}

.f-industry-grid p {
  margin: 14px 0 0;
  color: #a9b8cc;
  font-size: 14px;
  line-height: 1.62;
}

/* --- Why Forge: pillars --------------------------------------------------- */

.f-pillars {
  padding: clamp(105px, 12vw, 175px) clamp(30px, 7vw, 120px);
  border-top: 1px solid var(--o-line);
  background: var(--o-bg-2);
}

.f-pillar-grid {
  display: grid;
  margin-top: 70px;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.f-pillar-grid article {
  padding: 40px 42px 44px;
  border: 1px solid var(--o-card-line);
  border-radius: 12px;
  background:
    linear-gradient(145deg, var(--o-card-glow), transparent 55%),
    var(--o-card);
}

.f-pillar-num {
  color: #32baf7;
  font: 500 10px/1 "DM Mono", monospace;
  letter-spacing: 0.18em;
}

.f-pillar-grid h3 {
  margin: 20px 0 0;
  font: 500 24px/1.22 "Manrope", sans-serif;
  letter-spacing: -0.035em;
}

.f-pillar-grid p {
  margin: 16px 0 0;
  color: #a9b8cc;
  font-size: 15px;
  line-height: 1.66;
}

/* --- Why Forge: comparison table ------------------------------------------ */

.f-compare {
  padding: clamp(105px, 12vw, 175px) clamp(30px, 7vw, 120px);
  border-top: 1px solid var(--o-line);
  background: var(--o-bg);
}

.f-table-scroll {
  margin-top: 60px;
  overflow-x: auto;
  border: 1px solid var(--o-card-line);
  border-radius: 12px;
}

.f-compare-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  text-align: left;
}

.f-compare-table th,
.f-compare-table td {
  padding: 20px 24px;
  border-bottom: 1px solid var(--o-line);
  vertical-align: top;
}

.f-compare-table thead th {
  color: #cfdcec;
  background: rgba(10, 22, 46, 0.6);
  font: 500 10px/1.4 "DM Mono", monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.f-compare-table tbody th {
  width: 22%;
  color: #dbe6f4;
  font: 500 14px/1.5 "Manrope", sans-serif;
}

.f-compare-table td {
  color: #a9b8cc;
  font-size: 14px;
  line-height: 1.6;
}

/* The sovereign column is the argument — give it the accent and the weight. */
.f-compare-table td:last-child {
  color: #d3e4f6;
  background: rgba(22, 117, 255, 0.07);
  box-shadow: inset 2px 0 0 #106ff9;
}

.f-compare-table tbody tr:last-child th,
.f-compare-table tbody tr:last-child td {
  border-bottom: 0;
}

/* --- Why Forge: personas -------------------------------------------------- */

.f-personas {
  padding: clamp(105px, 12vw, 175px) clamp(30px, 7vw, 120px);
  border-top: 1px solid var(--o-line);
  background: var(--o-bg-2);
}

.f-persona-grid {
  display: grid;
  margin-top: 70px;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.f-persona-grid h3 {
  margin: 0;
  font: 500 22px/1.2 "Manrope", sans-serif;
  letter-spacing: -0.035em;
}

.f-persona-concern {
  margin: 16px 0 0;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--o-line);
  color: #93a3b9;
  font-size: 13.5px;
  line-height: 1.6;
}

/* --- About / webAI: prose split ------------------------------------------- */

.f-mission,
.f-heritage,
.f-selection,
.f-role,
.f-split,
.f-platform,
.f-optimization,
.f-division {
  padding: clamp(100px, 11vw, 165px) clamp(30px, 7vw, 120px);
  border-top: 1px solid var(--o-line);
}

.f-mission,
.f-selection,
.f-platform,
.f-division {
  background: var(--o-bg-2);
}

.f-heritage,
.f-role,
.f-split,
.f-optimization {
  background: var(--o-bg);
}

.f-split-body {
  display: grid;
  max-width: 1120px;
  margin-top: 48px;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}

.f-split-body p {
  margin: 0;
  color: #b3c1d4;
  font-size: 16px;
  line-height: 1.72;
  letter-spacing: -0.008em;
}

/* --- About: principles ---------------------------------------------------- */

.f-principles {
  display: grid;
  margin-top: 70px;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.f-principles article {
  display: grid;
  padding-top: 24px;
  border-top: 1px solid var(--o-line-2);
  align-content: start;
  gap: 12px;
}

.f-principles b {
  color: #dbe6f4;
  font: 500 15px/1.3 "Manrope", sans-serif;
  letter-spacing: -0.02em;
}

.f-principles span {
  color: #93a3b9;
  font-size: 13.5px;
  line-height: 1.6;
}

/* --- webAI: boundary flow diagram ----------------------------------------- */

.f-flow {
  margin-top: 66px;
}

.f-flow-boundary {
  position: relative;
  padding: 46px 34px 38px;
  border: 1px dashed rgba(120, 190, 255, 0.4);
  border-radius: 14px;
  background: rgba(11, 24, 50, 0.5);
}

.f-flow-label {
  position: absolute;
  top: -8px;
  left: 28px;
  padding: 0 10px;
  color: #32baf7;
  background: var(--o-bg);
  font: 500 9px/1 "DM Mono", monospace;
  letter-spacing: 0.18em;
}

.f-flow-nodes {
  display: grid;
  align-items: center;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 16px;
}

.f-flow-nodes > div:not(.f-flow-arrow) {
  padding: 24px 22px;
  border: 1px solid var(--o-card-line);
  border-radius: 10px;
  background: var(--o-node);
  text-align: center;
}

.f-flow-nodes b {
  display: block;
  font: 500 15px/1.2 "Manrope", sans-serif;
  letter-spacing: -0.02em;
}

.f-flow-nodes small {
  display: block;
  margin-top: 8px;
  color: #93a3b9;
  font-size: 12px;
  line-height: 1.5;
}

.f-flow-arrow {
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg, rgba(50, 186, 247, 0.2), #32baf7);
}

.f-flow-egress {
  margin: 24px 0 0;
  color: #93a3b9;
  font-size: 13px;
}

.f-flow-egress b {
  color: #16c784;
  font: 500 13px/1 "DM Mono", monospace;
}

/* --- webAI: platform + optimization --------------------------------------- */

.f-platform-grid {
  display: grid;
  margin-top: 66px;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.f-platform-grid h3,
.f-opt-grid h3,
.f-division-grid h3 {
  margin: 0;
  font: 500 21px/1.22 "Manrope", sans-serif;
  letter-spacing: -0.032em;
}

.f-platform-grid p,
.f-opt-grid p {
  margin: 14px 0 0;
  color: #a9b8cc;
  font-size: 14px;
  line-height: 1.66;
}

.f-opt-grid,
.f-division-grid {
  display: grid;
  margin-top: 66px;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.f-optimization .f-partner-metrics {
  margin-top: 20px;
}

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

.f-contact {
  display: grid;
  padding: clamp(90px, 10vw, 150px) clamp(30px, 7vw, 120px);
  border-top: 1px solid var(--o-line);
  background: var(--o-bg);
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
}

.f-contact-intents {
  display: grid;
  gap: 18px;
}

.f-contact-intents > article > span {
  color: #32baf7;
  font: 500 10px/1 "DM Mono", monospace;
  letter-spacing: 0.18em;
}

.f-contact-intents h3 {
  margin: 16px 0 0;
  font: 500 20px/1.24 "Manrope", sans-serif;
  letter-spacing: -0.03em;
}

.f-contact-intents > article p {
  margin: 12px 0 0;
  color: #a9b8cc;
  font-size: 14px;
  line-height: 1.62;
}

.f-contact-direct {
  padding-top: 26px;
  border-top: 1px solid var(--o-line);
}

.f-contact-direct h3 {
  margin: 0 0 16px;
  color: #cfdcec;
  font: 500 9px/1 "DM Mono", monospace;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.f-contact-direct ul {
  display: grid;
  margin: 0;
  padding: 0;
  gap: 10px;
  list-style: none;
  color: #b3c1d4;
  font-size: 14px;
}

.f-contact-direct a {
  color: #8dccff;
}

.f-contact-direct a:hover {
  text-decoration: underline;
}

.f-discretion {
  margin: 22px 0 0;
  color: #8595ac;
  font-size: 12.5px;
  line-height: 1.66;
}

/* --- Form ----------------------------------------------------------------- */

.f-form {
  display: grid;
  padding: clamp(34px, 4vw, 48px);
  border: 1px solid var(--o-card-line);
  border-radius: 14px;
  background:
    linear-gradient(145deg, var(--o-card-glow), transparent 55%),
    var(--o-card);
  gap: 20px;
}

.f-form-kicker {
  margin: 0;
  color: #32baf7;
  font: 500 9px/1 "DM Mono", monospace;
  letter-spacing: 0.18em;
}

.f-form h2 {
  margin: 0 0 6px;
  font: 500 clamp(28px, 3vw, 38px)/1.1 "Manrope", sans-serif;
  letter-spacing: -0.04em;
}

.f-field-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.f-form label {
  display: grid;
  gap: 9px;
}

.f-form label > span {
  color: #cfdcec;
  font: 500 9px/1 "DM Mono", monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.f-form label > span i {
  color: #ff8fa3;
  font-style: normal;
}

/* 16px minimum keeps iOS from zooming the viewport on focus. */
.f-form input,
.f-form select,
.f-form textarea {
  width: 100%;
  padding: 13px 15px;
  /* 0.48 alpha puts the control boundary at 3.17:1 against its own fill,
     clearing WCAG 1.4.11. At 0.24 it was 1.69:1. */
  border: 1px solid rgba(130, 195, 255, 0.48);
  border-radius: 7px;
  color: #f0f6ff;
  background: rgba(7, 16, 34, 0.7);
  font-size: 16px;
  font-family: "Manrope", sans-serif;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.f-form textarea {
  min-height: 118px;
  resize: vertical;
  line-height: 1.6;
}

.f-form select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #8dccff 50%),
    linear-gradient(135deg, #8dccff 50%, transparent 50%);
  background-position: calc(100% - 19px) 21px, calc(100% - 14px) 21px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}

.f-form ::placeholder {
  color: #8595ac;
}

.f-form input:focus-visible,
.f-form select:focus-visible,
.f-form textarea:focus-visible {
  border-color: #32baf7;
  outline: none;
  box-shadow: 0 0 0 3px rgba(50, 186, 247, 0.22);
}

.f-submit {
  justify-self: start;
  margin-top: 4px;
}

.f-submit:disabled {
  cursor: progress;
  opacity: 0.6;
  transform: none;
}

.f-form-note {
  margin: 0;
  color: #8595ac;
  font-size: 12.5px;
  line-height: 1.6;
}

.f-form-status {
  font-size: 13.5px;
  line-height: 1.6;
}

.f-form-status:empty {
  display: none;
}

.f-form-status[data-state="pending"] {
  color: #b3c1d4;
}

.f-form-status[data-state="ok"] {
  color: #16c784;
}

.f-form-status[data-state="error"] {
  color: #ff9db0;
}

/* The outcome of a submission made with JavaScript off.
 *
 * Hidden until the CRM sends the visitor back to #sent or #error. :target is what
 * makes this work with no script running at all: this site is static, so there is
 * no server here to render a query flag, and before this the no-JS visitor
 * submitted successfully and was shown nothing. Colours are reused from
 * .f-form-status rather than introduced, so scripts/check-contrast.mjs has
 * nothing new to clear. */
.f-form-outcome {
  display: none;
  margin: 0 0 18px;
  padding: 12px 14px;
  border: 1px solid currentColor;
  border-radius: 8px;
  font-size: 13.5px;
  line-height: 1.6;
}

.f-form-outcome:target {
  display: block;
}

.f-form-outcome-ok {
  color: #16c784;
}

.f-form-outcome-error {
  color: #ff9db0;
}

/* Off-screen rather than display:none — hidden fields that are `none` are
   commonly skipped by the bots this is meant to catch. */
.f-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Expanded footer ------------------------------------------------------ */

.site-footer {
  display: block;
  min-height: 0;
  padding: clamp(70px, 8vw, 100px) clamp(28px, 7vw, 120px) 40px;
  border-top: 1px solid var(--o-line);
  background: var(--o-bg-footer);
}

.footer-top {
  display: grid;
  grid-template-columns: 1.1fr 2fr;
  gap: clamp(40px, 6vw, 90px);
}

.footer-brand p {
  max-width: 44ch;
  margin: 22px 0 0;
  color: #93a3b9;
  font-size: 13.5px;
  line-height: 1.68;
  text-align: left;
}

.footer-partner {
  color: #32baf7 !important;
  font: 500 9px/1.4 "DM Mono", monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

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

.footer-nav h2 {
  margin: 0 0 18px;
  color: #cfdcec;
  font: 500 9px/1 "DM Mono", monospace;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.footer-nav ul {
  display: grid;
  margin: 0;
  padding: 0;
  gap: 11px;
  list-style: none;
}

.footer-nav a,
.footer-contact li {
  color: #a9b8cc;
  font-size: 13.5px;
  line-height: 1.5;
}

.footer-nav a:hover {
  color: #8dccff;
}

.footer-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: clamp(50px, 6vw, 76px);
  padding: 34px 0;
  border-top: 1px solid var(--o-line);
  border-bottom: 1px solid var(--o-line);
  gap: 24px;
  flex-wrap: wrap;
}

.footer-cta p {
  margin: 0;
  font: 500 clamp(20px, 2.4vw, 28px)/1.2 "Manrope", sans-serif;
  letter-spacing: -0.035em;
  text-align: left;
}

.footer-legal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 28px;
  gap: 16px;
  flex-wrap: wrap;
  color: #8595ac;
}

.footer-legal small {
  font: 500 10px/1.5 "DM Mono", monospace;
  letter-spacing: 0.06em;
}

/* --- Active navigation state ---------------------------------------------- */

.header-links a[aria-current="page"] {
  color: #8dccff;
}

.header-links a[aria-current="page"]::after {
  transform: scaleX(1);
}

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 1180px) {
  .f-value-grid,
  .f-platform-grid,
  .f-principles {
    grid-template-columns: repeat(2, 1fr);
  }

  .f-industry-grid,
  .f-persona-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .f-contact {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 960px) {
  .f-offering {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .f-split-body,
  .f-opt-grid,
  .f-division-grid,
  .f-pillar-grid,
  .f-partner-metrics {
    grid-template-columns: 1fr;
  }

  .footer-top {
    grid-template-columns: 1fr;
  }

  .f-flow-nodes {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* The connector is horizontal by design; stacked, it becomes a drop line. */
  .f-flow-arrow {
    width: 1px;
    height: 26px;
    justify-self: center;
    background: linear-gradient(180deg, rgba(50, 186, 247, 0.2), #32baf7);
  }
}

@media (max-width: 720px) {
  .f-value-grid,
  .f-industry-grid,
  .f-persona-grid,
  .f-platform-grid,
  .f-principles,
  .f-field-row,
  .footer-nav {
    grid-template-columns: 1fr;
  }

  .f-service-list li {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .f-page-hero-copy h1 br,
  .f-section-head h2 br {
    display: none;
  }

  .f-submit {
    justify-self: stretch;
  }

  .footer-cta {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* The comparison table scrolls inside its own box below ~960px; without a cue
   the truncated third column reads as a layout bug rather than as scrollable. */
.f-scroll-hint {
  display: none;
  margin: 44px 0 -32px;
  color: #8595ac;
  font: 500 9px/1 "DM Mono", monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.f-table-scroll:focus-visible {
  outline: 2px solid #32baf7;
  outline-offset: 3px;
}

@media (max-width: 960px) {
  .f-scroll-hint {
    display: block;
  }
}

/* ===========================================================================
   LEGAL PAGES
   Long-form prose at a readable measure. The draft notice is deliberately
   loud — these pages must not be mistaken for reviewed, binding text.
   =========================================================================== */

.f-page-hero-compact {
  padding-bottom: clamp(50px, 6vw, 80px);
}

.f-legal-date {
  margin: 26px 0 0;
  color: #8595ac;
  font: 500 9px/1.5 "DM Mono", monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.f-legal {
  padding: clamp(70px, 8vw, 110px) clamp(30px, 7vw, 120px) clamp(90px, 10vw, 150px);
  border-top: 1px solid var(--o-line);
  background: var(--o-bg);
}

.f-draft-notice {
  max-width: 78ch;
  margin: 0 auto 60px;
  padding: 26px 30px 28px;
  border: 1px solid rgba(255, 176, 87, 0.42);
  border-left: 3px solid #ffb057;
  border-radius: 10px;
  background: rgba(84, 56, 18, 0.28);
}

.f-draft-tag {
  margin: 0 0 12px;
  color: #ffc989;
  font: 500 9px/1 "DM Mono", monospace;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.f-draft-notice p:last-child {
  margin: 0;
  color: #f1ddc2;
  font-size: 14px;
  line-height: 1.68;
}

.f-draft-notice strong {
  color: #fff2df;
  font-weight: 600;
}

/* Inline marker for decisions the business still owes. */
.f-todo {
  padding: 1px 7px;
  border-radius: 4px;
  color: #ffc989;
  background: rgba(255, 176, 87, 0.14);
  font: 500 11px/1.5 "DM Mono", monospace;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.f-todo-block {
  padding: 18px 22px;
  border-left: 2px solid rgba(255, 176, 87, 0.5);
  border-radius: 0 8px 8px 0;
  background: rgba(84, 56, 18, 0.18);
}

.f-legal-body {
  max-width: 78ch;
  margin: 0 auto;
}

.f-legal-body h2 {
  margin: 58px 0 0;
  font: 500 clamp(24px, 2.6vw, 32px)/1.22 "Manrope", sans-serif;
  letter-spacing: -0.038em;
}

.f-legal-body h2:first-child {
  margin-top: 0;
}

.f-legal-body h3 {
  margin: 34px 0 0;
  color: #dbe6f4;
  font: 500 17px/1.3 "Manrope", sans-serif;
  letter-spacing: -0.025em;
}

.f-legal-body p {
  margin: 18px 0 0;
  color: #b3c1d4;
  font-size: 15.5px;
  line-height: 1.75;
  letter-spacing: -0.006em;
}

.f-legal-body ul {
  margin: 18px 0 0;
  padding-left: 20px;
  color: #b3c1d4;
}

.f-legal-body li {
  margin-top: 10px;
  font-size: 15.5px;
  line-height: 1.72;
}

.f-legal-body li::marker {
  color: #32baf7;
}

.f-legal-body strong {
  color: #e6eef9;
  font-weight: 600;
}

.f-legal-body em {
  color: #93a3b9;
  font-style: normal;
}

.f-legal-body code {
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(130, 195, 255, 0.11);
  font: 400 13px/1 "DM Mono", monospace;
}

.f-legal-body a {
  color: #8dccff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.f-legal-table {
  width: 100%;
  margin-top: 22px;
  border: 1px solid var(--o-card-line);
  border-radius: 10px;
  border-collapse: collapse;
  overflow: hidden;
  text-align: left;
}

.f-legal-table th,
.f-legal-table td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--o-line);
  vertical-align: top;
  font-size: 13.5px;
  line-height: 1.6;
}

.f-legal-table thead th {
  color: #cfdcec;
  background: rgba(10, 22, 46, 0.6);
  font: 500 9px/1.4 "DM Mono", monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.f-legal-table td {
  color: #a9b8cc;
}

.f-legal-table tbody tr:last-child td {
  border-bottom: 0;
}

@media (max-width: 720px) {
  .f-legal-table,
  .f-legal-table thead,
  .f-legal-table tbody,
  .f-legal-table tr,
  .f-legal-table th,
  .f-legal-table td {
    display: block;
  }

  /* Column headers carry no meaning once the rows stack. */
  .f-legal-table thead {
    display: none;
  }

  .f-legal-table tr {
    padding: 6px 0;
    border-bottom: 1px solid var(--o-line);
  }

  .f-legal-table tr:last-child {
    border-bottom: 0;
  }

  .f-legal-table td {
    border-bottom: 0;
  }

  .f-todo {
    white-space: normal;
  }
}

/* The nav sits at a readable size now, so five links plus the consultation CTA
   stop fitting before the old 960px drawer breakpoint — at 961px the button was
   wrapping to two lines. The drawer therefore starts at 1080px. */
@media (max-width: 1080px) {
  .site-header {
    grid-template-columns: auto 1fr auto;
  }

  .site-header > .header-links {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    display: grid;
    max-height: 0;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    overflow: hidden;
    border-bottom: 0;
    opacity: 0;
    transition:
      max-height 220ms ease,
      opacity 180ms ease;
  }

  .site-header > .header-links a {
    padding: 20px 28px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
  }

  .site-header.menu-visible > .header-links {
    max-height: 280px;
    opacity: 1;
  }

  .mobile-menu {
    display: grid;
  }

  .site-header > .header-action {
    display: none;
  }

  .o-header > .header-links{
    color: #b7c7d9;
    background: rgba(5, 13, 24, 0.97);
  }
}

/* Long CTA labels should never wrap inside the pill. */
.header-action span,
.primary-action span {
  white-space: nowrap;
}

/* Holding state for legal pages whose content is not yet approved. Centred and
   airy so it reads as deliberate rather than as a page that failed to load. */
.f-legal-stub {
  padding: clamp(40px, 6vw, 80px) 0 clamp(60px, 8vw, 110px);
  text-align: center;
}

.f-legal-stub p {
  max-width: 52ch;
  margin-inline: auto;
}

/* --- Legal page table of contents ---------------------------------------- */

.f-toc {
  margin: 0 0 56px;
  padding: 28px 32px 30px;
  border: 1px solid var(--o-card-line);
  border-radius: 10px;
  background: rgba(10, 22, 46, 0.45);
}

.f-toc h2 {
  margin: 0 0 16px;
  color: #cfdcec;
  font: 500 9px/1 "DM Mono", monospace;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.f-toc ol {
  display: grid;
  margin: 0;
  padding: 0 0 0 20px;
  gap: 9px;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 36px;
}

.f-toc li {
  color: #8595ac;
  font-size: 14px;
  line-height: 1.5;
}

.f-toc a {
  color: #b3c1d4;
  text-decoration: none;
}

.f-toc a:hover,
.f-toc a:focus-visible {
  color: #8dccff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- Conformance report tables -------------------------------------------
   Four dense columns of prose; the default legal-table sizing is too airy. */

.f-vpat {
  min-width: 760px;
}

.f-vpat th[scope="row"] {
  width: 22%;
  color: #dbe6f4;
  font: 500 13px/1.45 "Manrope", sans-serif;
  vertical-align: top;
}

.f-vpat td {
  font-size: 13px;
  line-height: 1.6;
}

.f-vpat td:nth-child(2) {
  width: 7%;
  white-space: nowrap;
}

/* The conformance verdict is the column a procurement reviewer scans. */
.f-vpat td:nth-child(3) {
  width: 13%;
  color: #dbe6f4;
  font: 500 12px/1.5 "DM Mono", monospace;
}

.f-vpat ul {
  margin: 10px 0 0;
  padding-left: 18px;
}

.f-vpat li {
  margin-top: 6px;
  font-size: 13px;
}

.f-vpat p {
  margin: 0 0 10px;
  font-size: 13px;
}

.f-vpat p:last-child {
  margin-bottom: 0;
}

.f-legal-body kbd {
  padding: 2px 6px;
  border: 1px solid var(--o-card-line);
  border-radius: 4px;
  background: rgba(130, 195, 255, 0.09);
  font: 400 12px/1 "DM Mono", monospace;
}

@media (max-width: 720px) {
  .f-toc ol {
    grid-template-columns: 1fr;
  }

  /* The conformance tables are genuinely tabular — keep them as tables and
     let them scroll, rather than stacking rows and losing the comparison. */
  .f-vpat,
  .f-vpat thead,
  .f-vpat tbody,
  .f-vpat tr,
  .f-vpat th,
  .f-vpat td {
    display: revert;
  }

  .f-vpat thead {
    display: table-header-group;
  }
}

/* Skip-link target. Zero-size and out of the tab order; exists only to receive
   programmatic focus past the navigation. */
#content-start {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ===========================================================================
   LEADERSHIP
   =========================================================================== */

.f-leadership {
  padding: clamp(100px, 11vw, 165px) clamp(30px, 7vw, 120px);
  border-top: 1px solid var(--o-line);
  background: var(--o-bg-2);
}

.f-leader {
  display: grid;
  max-width: 1180px;
  margin-top: 66px;
  grid-template-columns: 400px 1fr;
  gap: clamp(36px, 5vw, 70px);
  align-items: start;
}

.f-leader-portrait img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--o-card-line);
  border-radius: 12px;
  /* The source is a bright studio headshot; the site is deep navy. A slight
     cool grade and reduced brightness seat it in the page without altering
     the subject. */
  filter: saturate(0.92) brightness(0.94);
}

.f-leader-body h3 {
  margin: 0;
  font: 500 clamp(30px, 3.4vw, 42px)/1.1 "Manrope", sans-serif;
  letter-spacing: -0.04em;
}

.f-leader-role {
  margin: 12px 0 0;
  color: #32baf7;
  font: 500 10px/1 "DM Mono", monospace;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.f-leader-body > p:not(.f-leader-role) {
  max-width: 62ch;
  margin: 22px 0 0;
  color: #b3c1d4;
  font-size: 16px;
  line-height: 1.72;
}

.f-leader-body strong {
  color: #e6eef9;
  font-weight: 600;
}

.f-leader-track {
  margin-top: 38px;
  padding-top: 28px;
  border-top: 1px solid var(--o-line);
}

.f-leader-track h4,
.f-awards h3 {
  margin: 0 0 18px;
  color: #cfdcec;
  font: 500 9px/1 "DM Mono", monospace;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.f-timeline {
  display: grid;
  margin: 0;
  padding: 0;
  gap: 14px;
  list-style: none;
}

.f-timeline li {
  display: grid;
  align-items: baseline;
  grid-template-columns: 240px 1fr;
  gap: 16px;
}

.f-timeline b {
  color: #dbe6f4;
  font: 500 15px/1.35 "Manrope", sans-serif;
  letter-spacing: -0.02em;
}

.f-timeline span {
  color: #93a3b9;
  font-size: 13.5px;
  line-height: 1.5;
}

/* --- Awards --------------------------------------------------------------- */

.f-awards {
  max-width: 1180px;
  margin-top: clamp(56px, 6vw, 84px);
  padding-top: clamp(44px, 5vw, 64px);
  border-top: 1px solid var(--o-line);
}

.f-awards-intro {
  margin: 0 0 30px;
  color: #b3c1d4;
  font-size: 15.5px;
  line-height: 1.65;
}

.f-award-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.f-award-grid article {
  display: grid;
  padding: 26px 28px 28px;
  border: 1px solid var(--o-card-line);
  border-radius: 12px;
  background:
    linear-gradient(145deg, var(--o-card-glow), transparent 55%),
    var(--o-card);
  align-content: start;
  gap: 10px;
}

.f-award-grid b {
  color: #dbe6f4;
  font: 500 16px/1.3 "Manrope", sans-serif;
  letter-spacing: -0.025em;
}

.f-award-grid span {
  color: #93a3b9;
  font-size: 13px;
  line-height: 1.5;
}

/* Attribution matters: these were earned by BIAS, not by Forge. */
.f-awards-note {
  max-width: 82ch;
  margin: 26px 0 0;
  color: #8595ac;
  font-size: 12.5px;
  line-height: 1.66;
}

@media (max-width: 960px) {
  .f-leader {
    grid-template-columns: 1fr;
  }

  .f-leader-portrait {
    max-width: 360px;
  }

  .f-award-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 720px) {
  .f-award-grid {
    grid-template-columns: 1fr;
  }

  .f-timeline li {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}