/* ==========================================================================
   FD FINANCIAL GROUP — CORPORATE HOMEPAGE
   Region order is load-bearing. Do not append out of order.

   00 FONTS       05 HEADER      10 PRINT
   01 TOKENS      06 RAIL
   02 RESET       07 SECTIONS 01-10
   03 BASE TYPE   08 SPATIAL
   04 LAYOUT      09 RESPONSIVE
   ========================================================================== */


/* ==========================================================================
   00 FONTS  (self-hosted, SIL Open Font License 1.1)
   Exactly the eight styles the site uses. Nothing else is packaged.
   Licences: assets/fonts/LICENSE-Libre-Baskerville.txt
             assets/fonts/LICENSE-IBM-Plex.txt
   ========================================================================== */

@font-face {
  font-family: 'Libre Baskerville';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/libre-baskerville-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Libre Baskerville';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/libre-baskerville-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Libre Baskerville';
  font-style: italic; font-weight: 400; font-display: swap;
  src: url('../fonts/libre-baskerville-latin-400-italic.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal; font-weight: 300; font-display: swap;
  src: url('../fonts/ibm-plex-sans-latin-300-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');
}


/* ==========================================================================
   01 TOKENS
   ========================================================================== */

:root {
  /* Surfaces */
  --l0:            #080B0D;   /* primary corporate dark */
  --l1:            #0C1013;   /* raised: Ecosystem + Featured Product */
  --inv:           #F5F6F6;   /* editorial light inversion: Principles */

  /* Green */
  --green:         #00B894;   /* on dark surfaces — 7.8:1 on --l0 */
  --green-ink:     #007A5E;   /* on light surfaces — 4.9:1 on --inv  [A11Y ADDITION] */
  --green-dim:     rgba(0,184,148,0.28);

  /* Foreground, dark surface */
  --fg:            #F2F4F5;
  --fg-2:          #A8AEBE;
  --fg-3:          #858B9E;   /* raised from #72788A for 5.8:1 at 11px */

  /* Hairlines, dark surface */
  --rule:          rgba(255,255,255,0.07);
  --rule-2:        rgba(255,255,255,0.14);

  /* Geometry */
  --radius:        2px;
  --u:             8px;
  --frame:         1440px;
  --rail:          48px;

  --pad-x:         20px;
  --pad-y:         72px;
  --gutter:        16px;

  /* Type */
  --f-serif:       'Libre Baskerville', Georgia, 'Times New Roman', serif;
  --f-sans:        'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --f-mono:        'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Motion */
  --e-enter:       cubic-bezier(0.22, 1, 0.36, 1);
  --e-state:       cubic-bezier(0.65, 0, 0.35, 1);
  --t-micro:       120ms;
  --t-state:       220ms;
  --t-enter:       480ms;
  --t-reveal:      600ms;
}

@media (min-width: 900px) {
  :root { --pad-x: 40px; --pad-y: 104px; --gutter: 20px; }
}
@media (min-width: 1200px) {
  :root { --pad-x: 64px; --pad-y: 160px; --gutter: 24px; }
}

/* Light inversion — token flip, not a separate stylesheet */
[data-surface="inv"] {
  --fg:     #080B0D;
  --fg-2:   #454B57;
  --fg-3:   #5E6473;
  --green:  var(--green-ink);
  --rule:   rgba(8,11,13,0.10);
  --rule-2: rgba(8,11,13,0.20);
}


/* ==========================================================================
   02 RESET
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

/* clip, NOT hidden — hidden creates a scroll container and silently kills
   position:sticky in the Independence section. */
body {
  overflow-x: clip;
  background: var(--l0);
  color: var(--fg);
  font-family: var(--f-sans);
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, canvas { display: block; max-width: 100%; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
table { border-collapse: collapse; width: 100%; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

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

:focus-visible {
  outline: 1px solid var(--green);
  outline-offset: 4px;
  border-radius: var(--radius);
}

.skip {
  position: absolute; top: -100px; left: var(--pad-x); z-index: 300;
  background: var(--green); color: #04140F;
  padding: 10px 18px; border-radius: var(--radius);
  font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase;
}
.skip:focus { top: 14px; }


/* ==========================================================================
   03 BASE TYPE
   ========================================================================== */

.eyebrow {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.display {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(30px, 4.2vw, 62px);
  line-height: 1.10;
  letter-spacing: -0.02em;
  color: var(--fg);
}

.h2 {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(27px, 3.4vw, 48px);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--fg);
  text-wrap: balance;
}

.h3 {
  font-family: var(--f-serif);
  font-weight: 700;
  font-size: clamp(19px, 1.7vw, 26px);
  line-height: 1.3;
  color: var(--fg);
}

.body {
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.75;
  color: var(--fg-2);
  font-weight: 300;
}

.idx {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.10em;
  color: var(--fg-3);
}

em { font-style: italic; }


/* Links ------------------------------------------------------------------ */

.lnk {
  display: inline-flex; align-items: baseline; gap: 8px;
  font-size: 14px; font-weight: 400; color: var(--fg);
  position: relative;
  transition: color var(--t-state) var(--e-state);
}
.lnk span { transition: transform var(--t-state) var(--e-state); }
.lnk:hover span, .lnk:focus-visible span { transform: translateX(3px); }

/* Institutional action — hairline. Never filled. */
.lnk--under::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -6px;
  height: 1px; background: var(--green);
  transform-origin: left; transition: transform var(--t-state) var(--e-state);
}
.lnk--under:hover::after, .lnk--under:focus-visible::after { transform: scaleX(0.6); }

.lnk--muted { color: var(--fg-2); }
.lnk--muted:hover, .lnk--muted:focus-visible { color: var(--fg); }
.lnk--down span { transition: transform var(--t-state) var(--e-state); }
.lnk--down:hover span { transform: translateY(3px); }

/* Product action — filled green. Exactly twice on the page. */
.btn-green {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--green); color: #04140F;
  padding: 14px 26px; border-radius: var(--radius);
  font-size: 14px; font-weight: 500; letter-spacing: 0.01em;
  transition: background var(--t-state) var(--e-state);
}
.btn-green:hover, .btn-green:focus-visible { background: #00D4AE; }
.btn-green span { transition: transform var(--t-state) var(--e-state); }
.btn-green:hover span { transform: translateX(3px); }

.btn-line {
  display: inline-flex; align-items: center; gap: 10px;
  border: 1px solid var(--rule-2); color: var(--fg);
  padding: 14px 26px; border-radius: var(--radius);
  font-size: 14px; font-weight: 400;
  transition: border-color var(--t-state) var(--e-state), color var(--t-state) var(--e-state);
}
.btn-line:hover, .btn-line:focus-visible { border-color: var(--fg-2); }


/* ==========================================================================
   04 LAYOUT
   ========================================================================== */

.frame {
  width: 100%;
  max-width: var(--frame);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter);
}

.sect {
  padding-block: var(--pad-y);
  position: relative;
  background: var(--l0);
}
.sect--raised { background: var(--l1); }
.sect--inv    { background: var(--inv); color: var(--fg); }

/* Full-bleed hairline opening each section */
.sect + .sect::before {
  content: ''; position: absolute; inset-inline: 0; top: 0;
  height: 1px; background: var(--rule);
}

.sect__head { margin-bottom: calc(var(--u) * 7); }
.sect__head .h2 { margin-top: 14px; }

/* Reveal ----------------------------------------------------------------
   Gated on .rv-on, which the reveal module adds as its FIRST action. Without
   JS — or if the module throws before mounting — nothing is ever hidden.
   Hiding content by default and relying on script to reveal it would leave
   the whole page blank with JS disabled. */
.rv-on .rv {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--t-reveal) var(--e-enter), transform var(--t-reveal) var(--e-enter);
  transition-delay: var(--rv-d, 0ms);
}
.rv-on .rv.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .rv-on .rv { transform: none; transition: opacity 200ms linear; }
}


/* ==========================================================================
   05 HEADER
   ========================================================================== */

.hdr {
  position: fixed; inset-inline: 0; top: 0; z-index: 200;
  height: 72px;
  transition: background var(--t-state) var(--e-state),
              border-color var(--t-state) var(--e-state);
  border-bottom: 1px solid transparent;
}
.hdr[data-scrolled="true"] {
  background: rgba(8,11,13,0.86);
  border-bottom-color: var(--rule);
}
@supports (backdrop-filter: blur(8px)) {
  .hdr[data-scrolled="true"] { backdrop-filter: blur(10px); background: rgba(8,11,13,0.72); }
}

/* Inverted state while the light Principles section passes behind */
.hdr[data-theme="light"] {
  --fg: #080B0D; --fg-2: #454B57; --fg-3: #5E6473;
  --green: var(--green-ink); --rule: rgba(8,11,13,0.10); --rule-2: rgba(8,11,13,0.20);
  background: rgba(245,246,246,0.86);
  border-bottom-color: var(--rule);
}
@supports (backdrop-filter: blur(8px)) {
  .hdr[data-theme="light"][data-scrolled="true"] { background: rgba(245,246,246,0.74); }
}

.hdr__in {
  height: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}

.hdr__brand {
  font-family: var(--f-mono);
  font-size: 13px; font-weight: 500; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--fg);
  white-space: nowrap;
}
.hdr__brand b { color: var(--green); font-weight: 500; }

.hdr__nav { display: flex; align-items: center; gap: 24px; }
.hdr__list { display: flex; align-items: center; gap: 28px; }
.hdr__list a {
  font-size: 13.5px; color: var(--fg-2);
  transition: color var(--t-state) var(--e-state);
}
.hdr__list a:hover, .hdr__list a:focus-visible { color: var(--fg); }

/* The divider is the point: FD Intelligence is an exit, not a nav peer. */
.hdr__div { width: 1px; height: 18px; background: var(--rule-2); }

.hdr__product {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--f-mono);
  font-size: 11.5px; letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--fg);
  transition: color var(--t-state) var(--e-state);
}
.hdr__product i { font-style: normal; color: var(--green); transition: transform var(--t-state) var(--e-state); }
.hdr__product:hover i { transform: translate(2px, -2px); }

.hdr__burger { display: none; width: 40px; height: 40px; margin-right: -8px; }
.hdr__burger span {
  display: block; width: 20px; height: 1px; background: var(--fg); margin: 5px auto;
  transition: transform var(--t-state) var(--e-state), opacity var(--t-micro) linear;
}
.hdr__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hdr__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hdr__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.hdr__panel { display: none; }


/* ==========================================================================
   06 RAIL  (>=1200 only — an editorial document cue, not navigation)
   ========================================================================== */

.rail {
  display: none;
  position: fixed; left: 0; top: 50%; transform: translateY(-50%);
  z-index: 150; width: var(--rail);
  padding-left: 22px;
  pointer-events: none;
}
.rail li {
  font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 0.12em;
  color: var(--fg-3); opacity: 0.16;
  padding-block: 5px;
  transition: opacity var(--t-state) var(--e-state), color var(--t-state) var(--e-state);
}
.rail li[data-active="true"] { opacity: 0.55; color: var(--fg-2); }
.rail[data-theme="light"] li { color: #5E6473; }


/* ==========================================================================
   07 SECTIONS
   ========================================================================== */

/* --- 01 HERO ------------------------------------------------------------ */

.hero {
  position: relative;
  min-height: max(640px, 100svh);
  display: flex; align-items: flex-end;
  padding-block: 120px 72px;
  background: var(--l0);
  overflow: clip;
}
.hero__in { position: relative; width: 100%; }
.hero__type { position: relative; z-index: 2; max-width: 620px; }
.hero__title { margin: 20px 0 26px; }
.hero__sub { max-width: 48ch; }
.hero__ctas {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 18px 36px; margin-top: 40px;
}

/* Field container. L0 state — the reduced language — lives here in CSS with
   zero JS. On mobile it is final; on desktop it is what precedes enhancement
   and what remains if the canvas never mounts. */
.hero__field {
  position: absolute; z-index: 1; pointer-events: none;
  left: var(--pad-x); top: -120px; bottom: 44%;
  width: 1px;
}
.hero__rule {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent, var(--rule-2) 22%, var(--rule-2) 78%, transparent);
}
.hero__mark {
  position: absolute; left: -1px; top: var(--t);
  width: 3px; height: 3px; background: var(--green); opacity: 0.7;
}
.hero__l0 { position: absolute; inset: 0; transition: opacity 240ms var(--e-enter); }
.hero__canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; transition: opacity 240ms var(--e-enter);
}


/* --- 02 WHO WE ARE ------------------------------------------------------ */

.who__lead   { grid-column: 1 / -1; }
.who__copy   { grid-column: 1 / -1; margin-top: 20px; }
.who__copy p + p { margin-top: 18px; }

.pillars {
  margin-top: calc(var(--u) * 8);
  display: grid; gap: 0;
  border-top: 1px solid var(--rule);
}
.pillar { padding-block: 28px; border-bottom: 1px solid var(--rule); }
.pillar__line { font-family: var(--f-serif); font-size: clamp(18px, 1.7vw, 24px); line-height: 1.35; margin-top: 10px; }


/* --- 03 WHAT WE DO ------------------------------------------------------ */

.row {
  position: relative;
  border-top: 1px solid var(--rule);
  padding-block: 44px;
}
.row::after {
  content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 1px;
  background: var(--green); transform: scaleX(0); transform-origin: left;
  transition: transform 320ms var(--e-enter);
}
.row:hover::after, .row:focus-within::after { transform: scaleX(1); }
.row__body { grid-column: 1 / -1; }
.row__idx { display: block; margin-bottom: 14px; transition: color var(--t-state) var(--e-state), font-weight var(--t-state) linear; }
/* Not colour-only: weight changes with the green. */
.row:hover .row__idx, .row:focus-within .row__idx { color: var(--green); font-weight: 500; }
.row__desc { margin-top: 14px; max-width: 52ch; }
.row__route { margin-top: 22px; display: inline-flex; }
.row:last-of-type { border-bottom: 1px solid var(--rule); }


/* --- 04 ECOSYSTEM ------------------------------------------------------- */

.eco { position: relative; margin-top: calc(var(--u) * 6); }
.js .eco[data-enhance-pending] { visibility: hidden; }

.eco__root {
  font-family: var(--f-mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg);
  padding-bottom: 18px;
}

/* TREE — the permanent state below 1200px, and the no-JS state everywhere. */
.eco__list { position: relative; padding-left: 18px; }
.eco__list::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 28px;
  width: 1px; background: var(--rule-2);
}
.eco__node { position: relative; padding: 0 0 30px 22px; }
.eco__node::before {
  content: ''; position: absolute; left: -18px; top: 11px;
  width: 32px; height: 1px; background: var(--rule-2);
}
.eco__btn {
  font-family: var(--f-serif); font-weight: 700;
  font-size: clamp(17px, 1.5vw, 21px); color: var(--fg);
  text-align: left;
  transition: color var(--t-state) var(--e-state);
}
.eco__state {
  display: inline-block; margin-left: 12px; vertical-align: 2px;
  font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--fg-3);
  border: 1px solid var(--rule-2); border-radius: var(--radius);
  padding: 2px 7px;
}
.eco__desc { margin-top: 8px; font-size: 14px; color: var(--fg-2); max-width: 46ch; }
.eco__route {
  display: inline-flex; align-items: baseline; gap: 7px;
  margin-top: 12px; font-size: 13px; color: var(--green);
}
.eco__route::after { content: ''; }
.eco__svg { display: none; }


/* --- 05 FEATURED PRODUCT ------------------------------------------------ */

.feat__label {
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--fg-3);
}
.feat__lockup { margin: 22px 0 4px; font-family: var(--f-mono); font-size: 15px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg); }
.feat__lockup b { color: var(--green); font-weight: 500; }
.feat__by { font-size: 12.5px; color: var(--fg-3); }
.feat__title { margin: 26px 0 30px; }

.caps { border-top: 1px solid var(--rule); margin-bottom: 32px; }
.caps li { border-bottom: 1px solid var(--rule); }
.caps__item {
  width: 100%; display: flex; align-items: center; gap: 12px;
  padding: 13px 0; text-align: left;
  font-family: var(--f-mono); font-size: 11.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--fg-3);
  transition: color var(--t-state) var(--e-state);
}
.caps__item::before {
  content: ''; width: 14px; height: 1px; background: currentColor; flex: none;
  transition: width var(--t-state) var(--e-state);
}
.caps__item[aria-selected="true"], .caps__item:hover { color: var(--fg); }
.caps__item[aria-selected="true"]::before { width: 26px; background: var(--green); }
/* Non-interactive variant used while WEB-001 crops are pending */
.caps--static .caps__item { cursor: default; }

.feat__panel {
  position: relative; min-height: 300px;
  border-left: 1px solid var(--rule);
  background: var(--l1);
  overflow: clip;
}
.feat__crop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--t-state) var(--e-state); }
.feat__crop[data-active="true"] { opacity: 1; }

/* The system index — a finished editorial treatment of the platform's
   capability vocabulary. Never a fabricated dashboard.
   No right padding above 900: the hairlines run off the frame, which is the
   signal that the panel continues beyond it. */
.feat__ph { padding: 40px 32px; }
@media (min-width: 900px) { .feat__ph { padding-right: 0; } }
.feat__ph-note {
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--fg-3);
  padding-bottom: 26px; border-bottom: 1px solid var(--rule);
}
.feat__ph-list { margin-top: 4px; }
.feat__ph-list li {
  display: flex; align-items: baseline; gap: 18px;
  padding: 16px 0; border-bottom: 1px solid var(--rule);
}
.feat__ph-list li:last-child { border-bottom: 0; }
.feat__ph-idx {
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.1em;
  color: var(--fg-3); flex: none;
}
.feat__ph-name {
  font-family: var(--f-mono); font-size: clamp(15px, 1.5vw, 20px);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-2);
}


/* --- 06 HOW WE THINK ---------------------------------------------------- */

.think__chain { margin-top: 40px; }
.think__step {
  font-family: var(--f-serif); font-weight: 400;
  font-size: clamp(22px, 2.6vw, 38px); line-height: 1.15;
  color: var(--fg);
}
.think__link {
  display: block; width: 1px; height: 26px; margin: 12px 0 12px 2px;
  background: var(--green); opacity: 0.45;
}
.think__stmt { margin-top: 44px; }
.think__stmt p { font-family: var(--f-serif); font-size: clamp(17px, 1.5vw, 22px); line-height: 1.5; color: var(--fg); }
.think__stmt p + p { margin-top: 12px; color: var(--fg-2); }


/* --- 07 INDEPENDENCE ---------------------------------------------------- */

.ind__thesis .h2 { margin-top: 14px; }
.ind__list { margin-top: 40px; border-top: 1px solid var(--rule); }
.ind__item { padding-block: 30px; border-bottom: 1px solid var(--rule); }
/* The evidence column must out-run the thesis, or the pin is too short to
   read as a held position. */
@media (min-width: 1200px) { .ind__item { padding-block: 46px; } }
.ind__name { font-family: var(--f-serif); font-weight: 700; font-size: clamp(17px, 1.4vw, 21px); margin: 10px 0 8px; }
.ind__text { font-size: 14.5px; color: var(--fg-2); max-width: 54ch; }


/* --- 08 GLOBAL PERSPECTIVE ---------------------------------------------- */

.matrix-wrap { margin-top: 46px; overflow-x: auto; }
.matrix { font-family: var(--f-mono); table-layout: fixed; }
.matrix thead td { border: 0; width: 200px; }
.matrix thead td::after { display: none; }
.matrix th, .matrix td {
  border: 1px solid var(--rule);
  text-align: left; vertical-align: middle;
}
.matrix thead th {
  font-size: 10px; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fg-3); padding: 0 0 14px 14px; border: 0; white-space: nowrap;
  transition: color var(--t-state) var(--e-state);
}
.matrix tbody th {
  font-size: 12px; font-weight: 400; letter-spacing: 0.06em;
  color: var(--fg-2); padding: 0 20px 0 0; border: 0; white-space: nowrap;
  transition: color var(--t-state) var(--e-state);
}
.matrix td {
  position: relative; height: 64px; border-right: 0; border-bottom: 0;
}
.matrix tbody tr:last-child td { border-bottom: 1px solid var(--rule); }
.matrix td:last-child { border-right: 1px solid var(--rule); }
/* Registration mark at each intersection — a drafting grid, not an assertion of ticks */
.matrix td::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px;
  background:
    linear-gradient(var(--rule-2), var(--rule-2)) center / 5px 1px no-repeat,
    linear-gradient(var(--rule-2), var(--rule-2)) center / 1px 5px no-repeat;
  transition: background-color var(--t-state) var(--e-state);
}
.matrix [data-hi="true"] { color: var(--fg); }
.matrix__note { margin-top: 20px; font-size: 12.5px; color: var(--fg-3); max-width: 60ch; }


/* --- 09 PRINCIPLES ------------------------------------------------------ */

.pr { padding-block: calc(var(--pad-y) * 0.8); }
.pr__band {
  min-height: 46vh;
  display: flex; align-items: center;
}
.pr__band:nth-child(even) .pr__stmt { padding-left: 0; }
.pr__i {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.16em;
  color: var(--fg-3); display: block; margin-bottom: 16px;
}
.pr__stmt {
  font-family: var(--f-serif); font-weight: 400;
  font-size: clamp(24px, 3.4vw, 52px); line-height: 1.2; letter-spacing: -0.015em;
  color: var(--fg); max-width: 20ch;
}
.pr__stmt em { color: var(--green); font-style: italic; }


/* --- 10 CLOSING + FOOTER ------------------------------------------------ */

.close__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.close__brand { margin-top: calc(var(--u) * 16); padding-top: 30px; border-top: 1px solid var(--rule); }
.close__brand-name {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--fg-3);
}
.close__motto {
  margin-top: 12px; font-family: var(--f-serif); font-style: italic;
  font-size: clamp(15px, 1.3vw, 18px); color: var(--fg-2);
}

.ftr { background: var(--l0); border-top: 1px solid var(--rule); padding-block: 40px; }
.ftr__in { display: flex; flex-direction: column; gap: 24px; }
.ftr__brand { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-2); }
.ftr__brand b { color: var(--green); font-weight: 500; }
.ftr__nav, .ftr__legal { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.ftr a { font-size: 12.5px; color: var(--fg-3); transition: color var(--t-state) var(--e-state); }
.ftr a:hover, .ftr a:focus-visible { color: var(--fg); }
.ftr__copy { font-size: 12px; color: var(--fg-3); opacity: 0.7; }
.ftr__reg { margin-top: 24px; font-size: 11.5px; color: var(--fg-3); opacity: 0.7; max-width: 68ch; line-height: 1.6; }


/* ==========================================================================
   07b · /intelligence — COMING SOON
   A closed door inside the same institution. No cards, no countdown, no
   waitlist, no gradient. One threshold line and a still fragment of the
   Signal Structure.
   ========================================================================== */

.cs-body { background: var(--l0); }
/* No section rail on this page, so the frame must not reserve its clearance. */
.cs-body .frame { padding-left: var(--pad-x); }

.cs {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-block: 120px 40px;
  overflow: clip;
}

/* The threshold — same reduced language as the corporate hero's L0 state. */
.cs__rule {
  position: absolute; z-index: 1; pointer-events: none;
  left: var(--pad-x); top: 0; bottom: 34%;
  width: 1px;
}
.cs__rule-line {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent, var(--rule-2) 20%, var(--rule-2) 80%, transparent);
}
.cs__mark {
  position: absolute; left: -1px; top: var(--t);
  width: 3px; height: 3px; background: var(--green); opacity: 0.7;
}

/* Still Signal Structure fragment — drawn once, never animated. */
.cs__field {
  position: absolute; z-index: 0; pointer-events: none;
  inset-inline: auto 0; top: -60px;
  width: 0; height: 0;
}
/* Dimmer than the corporate hero: this is a fragment, not the subject. */
.cs__canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; transition: opacity 400ms var(--e-enter);
}
.cs__canvas[data-in="true"] { opacity: 0.55; }

/* Content sits on the far side of the threshold line. */
.cs__in { position: relative; z-index: 2; }
.cs-body .cs__in,
.cs-body .cs__foot { padding-left: calc(var(--pad-x) + 26px); }

.cs__label {
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--fg-3);
}
.cs__lockup {
  margin: 22px 0 4px;
  font-family: var(--f-mono); font-weight: 500;
  font-size: clamp(16px, 1.6vw, 20px); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--fg);
}
.cs__lockup b { color: var(--green); font-weight: 500; }
.cs__by { font-size: 12.5px; color: var(--fg-3); }

.cs__soon {
  margin: 40px 0 26px;
  font-family: var(--f-serif); font-weight: 400;
  font-size: clamp(34px, 5.2vw, 68px); line-height: 1.06; letter-spacing: -0.02em;
  color: var(--fg);
}
.cs__desc {
  font-size: clamp(15px, 1.15vw, 18px); font-weight: 300; line-height: 1.75;
  color: var(--fg-2); max-width: 52ch;
}
.cs__back { margin-top: 40px; }

.cs__foot {
  position: relative; z-index: 2;
  margin-top: calc(var(--u) * 14);
  padding-top: 28px; border-top: 1px solid var(--rule);
}
.cs__brand {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--fg-3);
}
.cs__motto {
  margin-top: 12px; font-family: var(--f-serif); font-style: italic;
  font-size: clamp(14px, 1.3vw, 18px); color: var(--fg-2);
}

@media (min-width: 900px) {
  .cs { padding-block: 160px 56px; }
  .cs-body .cs__in,
  .cs-body .cs__foot { padding-left: calc(var(--pad-x) + 46px); }
  .cs__rule { bottom: 40%; }
  .cs__field { width: 46%; height: 54%; top: -60px; right: 0; }
  .cs__foot { margin-top: calc(var(--u) * 18); }
}

@media (min-width: 1200px) {
  .cs { padding-block: 200px 64px; }
  .cs__field { width: 42%; height: 56%; right: -64px; }
}

@media (prefers-reduced-motion: reduce) {
  .cs__canvas { transition: opacity 200ms linear; }
}


/* ==========================================================================
   08 SPATIAL  (ecosystem projected mode, >=1200 — applied by JS)
   ========================================================================== */

.eco[data-spatial="true"] { min-height: 620px; }
.eco[data-spatial="true"] .eco__list { padding-left: 0; }
.eco[data-spatial="true"] .eco__list::before,
.eco[data-spatial="true"] .eco__node::before { display: none; }

.eco[data-spatial="true"] .eco__root {
  position: absolute; top: 0; left: 0; padding: 0;
  transform-origin: 0 0;
  will-change: transform;
  white-space: nowrap;
  border-left: 1px solid var(--green);
  padding-left: 12px;
}

/* State on its own line in spatial mode: inline, it wrapped out of a
   fixed-width node and broke the title block. */
.eco[data-spatial="true"] .eco__state {
  display: block; margin: 8px 0 0; vertical-align: baseline;
  width: max-content;
}
/* Anchor hairline where the connector lands — the node reads as attached
   to the structure rather than floating in it. */
.eco[data-spatial="true"] .eco__node::after {
  content: ''; position: absolute; left: -11px; top: 4px;
  width: 1px; height: 18px; background: var(--rule-2);
  transition: background var(--t-state) var(--e-state);
}
.eco[data-spatial="true"] .eco__node[data-engaged="true"]::after { background: var(--green); }

.eco[data-spatial="true"] .eco__node {
  position: absolute; top: 0; left: 0; padding: 0;
  width: var(--node-w, 300px);
  transform-origin: 0 0;
  will-change: transform, opacity;
  opacity: var(--o, 1);
  transition: opacity var(--t-state) var(--e-state), transform var(--t-state) var(--e-state);
}
.eco[data-spatial="true"] .eco__desc,
.eco[data-spatial="true"] .eco__route {
  opacity: 0; transform: translateY(4px);
  transition: opacity var(--t-state) var(--e-state) 60ms, transform var(--t-state) var(--e-state) 60ms;
  pointer-events: none;
}
.eco[data-spatial="true"] .eco__node[data-engaged="true"] { opacity: 1; }
.eco[data-spatial="true"] .eco__node[data-engaged="true"] .eco__desc,
.eco[data-spatial="true"] .eco__node[data-engaged="true"] .eco__route {
  opacity: 1; transform: none; pointer-events: auto;
}
.eco[data-spatial="true"] .eco__node[data-engaged="true"] .eco__btn { color: var(--fg); }

.eco[data-spatial="true"] .eco__svg {
  display: block; position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; overflow: visible;
}
.eco__wire { stroke: var(--rule-2); stroke-width: 1; fill: none; }
.eco__wire--hot {
  stroke: var(--green); stroke-width: 1; fill: none;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset var(--t-state) var(--e-state);
}
.eco__wire--hot[data-on="true"] { stroke-dashoffset: 0; }

/* Reduced motion: substitute a static affordance for the motion affordance */
@media (prefers-reduced-motion: reduce) {
  .eco[data-spatial="true"] .eco__node { transition: opacity 200ms linear; }
  .eco[data-spatial="true"] .eco__node[data-engaged="true"] .eco__btn {
    box-shadow: -10px 0 0 -9px var(--green);
  }
  .eco__wire--hot { transition: none; stroke-dashoffset: 0; opacity: 0; }
  .eco__wire--hot[data-on="true"] { opacity: 1; }
  .hero__canvas, .hero__l0 { transition: opacity 200ms linear; }
  .lnk span, .btn-green span, .hdr__product i { transition: none !important; }
}


/* --- 5B SPATIAL PASS ------------------------------------------------------
   Three new mount points. All Canvas 2D or SVG; no dependency added.
   ------------------------------------------------------------------------ */

/* WHAT WE DO — one system, three states. Sticky, viewport-sized, and pulled
   out of flow with a negative margin so it consumes no layout height. */
.wwd { position: relative; }
.wwd__field {
  display: none;
  position: sticky; top: 0; z-index: 0;
  height: 100svh; margin-bottom: -100svh;
  pointer-events: none;
}
.wwd__canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; transition: opacity 500ms var(--e-enter);
}
.wwd__canvas[data-in="true"] { opacity: 1; }
/* Editorial rows always sit above the spatial layer. */
.wwd .frame { position: relative; z-index: 1; }

/* STATIC FIELDS — Featured (resolved grid) and Closing (resolved echo) */
.sf { position: absolute; z-index: 0; pointer-events: none; inset: 0; }
.sf__canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; transition: opacity 500ms var(--e-enter);
}
.sf__canvas[data-in="true"] { opacity: 1; }

.feat__panel { position: relative; }
.feat__panel > .feat__ph,
.feat__panel > .feat__crop { position: relative; z-index: 1; }
.feat__panel > .feat__crop { position: absolute; }

.close { position: relative; overflow: clip; }
.sf--close { inset: -8% -10% auto -10%; height: 116%; }
.close .frame { position: relative; z-index: 1; }

/* ECOSYSTEM — structural depth cues. All SVG; accessibility untouched. */
.eco__plane {
  stroke: rgba(255,255,255,0.055); stroke-width: 1; fill: none;
}
.eco__drop {
  stroke: rgba(255,255,255,0.085); stroke-width: 1; fill: none;
  stroke-dasharray: 1 3;
  transition: stroke var(--t-state) var(--e-state);
}
.eco__drop[data-on="true"] { stroke: var(--green-dim); }
.eco__rail {
  stroke: var(--rule); stroke-width: 1; fill: none;
  transition: stroke var(--t-state) var(--e-state);
}
.eco__rail[data-on="true"] { stroke: var(--green-dim); }
.eco__slot-tick { stroke: rgba(255,255,255,0.10); stroke-width: 1; }
.eco__slot-rail { stroke: rgba(255,255,255,0.06); stroke-width: 1; stroke-dasharray: 2 5; }

/* Node surface: a structural response, not a card. Two edges only. */
.eco[data-spatial="true"] .eco__node[data-engaged="true"]::before {
  content: ''; position: absolute; left: -11px; top: -14px;
  width: 46px; height: 1px; background: var(--green-dim);
}


/* ==========================================================================
   09 RESPONSIVE
   ========================================================================== */

/* ---- < 900px : mobile is the base. Only overrides below. ---- */

@media (max-width: 899.98px) {
  .hdr__nav {
    position: fixed; inset: 72px 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(8,11,13,0.98);
    border-bottom: 1px solid var(--rule);
    padding: 8px var(--pad-x) 24px;
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: opacity var(--t-state) var(--e-state), transform var(--t-state) var(--e-state), visibility 0s linear var(--t-state);
  }
  .hdr[data-open="true"] .hdr__nav {
    transform: none; opacity: 1; visibility: visible;
    transition-delay: 0s;
  }
  .hdr__burger { display: block; }
  .hdr__div { display: none; }
  /* Product route first in the panel, above the corporate links */
  .hdr__product { order: -1; padding: 18px 0; border-bottom: 1px solid var(--rule); }
  .hdr__list { flex-direction: column; align-items: stretch; gap: 0; }
  .hdr__list a { display: block; padding: 14px 0; font-size: 15px; }

  .hero { min-height: max(640px, 92svh); padding-block: 108px 56px; }
  .hero__title { font-size: clamp(28px, 8.2vw, 40px); }
  .hero__ctas { flex-direction: column; align-items: flex-start; gap: 22px; }
  .hero__ctas .lnk { width: auto; }

  .think__stmt { margin-top: 36px; }

  /* Matrix -> region blocks. Same DOM, no duplicated content. */
  .matrix-wrap { overflow-x: visible; }
  .matrix, .matrix tbody, .matrix tr, .matrix th, .matrix td { display: block; }
  .matrix thead { display: none; }
  .matrix tbody tr { padding-block: 22px; border-top: 1px solid var(--rule); }
  .matrix tbody tr:last-child { border-bottom: 1px solid var(--rule); }
  .matrix tbody th { font-size: 15px; color: var(--fg); padding: 0 0 12px; letter-spacing: 0; font-family: var(--f-sans); }
  .matrix td { height: auto; border: 0 !important; display: inline-block; padding: 4px 16px 4px 0; }
  .matrix td::after { display: none; }
  .matrix td .m-th { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; clip-path: none;
                     font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--fg-3); }

  .pr__band { min-height: 44vh; }
  .pr__stmt { max-width: 16ch; }
}

/* ---- >= 900px : tablet and up ---- */

@media (min-width: 900px) {
  .hero { padding-block: 150px 90px; }
  .hero__field {
    left: auto; right: 0; top: -150px; bottom: auto;
    width: 52%; height: 58%;
  }
  .hero__rule { left: 12%; width: 1px; right: auto; background: linear-gradient(to bottom, transparent, var(--rule-2) 18%, var(--rule-2) 82%, transparent); }
  .hero__mark { left: calc(12% - 1px); }

  .who__lead { grid-column: 1 / 6; }
  .who__copy { grid-column: 7 / -1; margin-top: 0; }
  /* The rules must FRAME the text, not touch it. Clearance is symmetric on
     both sides of every divider, and scales with the available width:
     28px at 1024 -> 32px at 1200 -> 39px at 1440 -> 48px at 1920.
     Column 1 keeps a zero left inset so the block stays on the page grid.

     The triptych starts at 1000px, not 900px: below that, three columns of
     ~273px cannot hold the 18px serif statements on one line, and the approved
     stacked treatment is the better composition. Only the threshold moved. */
  .pillars {
    border-bottom: 0;
    /* 2.7vw, not 3vw: with the real Libre Baskerville (wider than the Georgia
       fallback the first measurement used) "Understand before acting." was 2px
       short of fitting at exactly 1200. Clearance stays inside the approved
       28-48px band at every width; the font size is untouched. */
    --pillar-pad: clamp(28px, 2.7vw, 48px);
  }
  .pillar {
    border-bottom: 0;
    border-right: 1px solid var(--rule);
    padding-inline: var(--pillar-pad);
  }
  .pillar:first-child { padding-inline-start: 0; }
  .pillar:last-child  { padding-inline-end: 0; border-right: 0; }
  /* below 1000: keep the approved stacked rows, no vertical rules */
  .pillar { border-right: 0; padding-inline: 0; border-bottom: 1px solid var(--rule); }
  .pillar:nth-child(2), .pillar:nth-child(3) { padding-top: 28px; }
  .pillar:nth-child(2) { padding-top: 32px; }
  .pillar:nth-child(3) { padding-top: 64px; }

  .row { padding-block: 64px; }
  .row__body { grid-column: 2 / 10; }
  .row:nth-of-type(2) .row__body { grid-column: 3 / 11; }
  .row:nth-of-type(3) .row__body { grid-column: 2 / 10; }

  .feat__grid { display: grid; grid-template-columns: 5fr 7fr; gap: 0; align-items: stretch; }
  .feat__side { padding-right: 48px; }
  /* Bleeds to the viewport edge without creating horizontal overflow:
     frame padding, plus the frame's own centring gutter above 1440px. */
  .feat__panel {
    min-height: 460px;
    margin-right: calc(-1 * var(--pad-x) - max(0px, (100vw - var(--frame)) / 2));
  }

  .think__chain { grid-column: 1 / 8; }
  .think__stmt { grid-column: 8 / -1; margin-top: 0; align-self: end; }

  .ind__thesis { grid-column: 1 / 6; }
  .ind__list { grid-column: 6 / -1; margin-top: 0; }

  .pr__band { min-height: 52vh; }
  .pr__band:nth-child(even) .pr__stmt { padding-left: 8%; }

  .ftr__in { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; }
  .close__ctas { gap: 18px; }
}

/* ---- >= 1000px : the pillar triptych ---- */

@media (min-width: 1000px) {
  .pillars { grid-template-columns: repeat(3, 1fr); }
  .pillar {
    border-right: 1px solid var(--rule);
    border-bottom: 0;
    padding-inline: var(--pillar-pad);
  }
  .pillar:first-child { padding-inline-start: 0; }
  .pillar:last-child  { padding-inline-end: 0; border-right: 0; }
  .pillar:nth-child(2) { padding-top: 32px; }
  .pillar:nth-child(3) { padding-top: 64px; }
}


/* ---- >= 1200px : desktop refinement ---- */

@media (min-width: 1200px) {
  .rail { display: block; }
  .wwd__field { display: block; }
  /* Rail clearance belongs to the content frame, not to <body>: padding on
     <body> does not move a fixed header and leaves a dark strip beside the
     full-bleed light section. */
  .frame { padding-left: calc(var(--pad-x) + var(--rail)); }

  .hero { padding-block: 176px 104px; }
  /* Wide enough for the approved two-line treatment of the motto. */
  .hero__type { max-width: min(980px, 78%); }
  .hero__field { width: 44%; height: 62%; top: -176px; right: -64px; }

  .row__body { grid-column: 2 / 8; }
  .row:nth-of-type(2) .row__body { grid-column: 5 / 11; }
  .row:nth-of-type(3) .row__body { grid-column: 3 / 9; }

  .think__chain { grid-column: 2 / 7; }
  .think__stmt { grid-column: 8 / 13; }

  .ind__thesis { position: sticky; top: 128px; align-self: start; }

  .matrix-wrap { padding-inline: 0; }

  .pr__band { min-height: 56vh; }
}


/* ==========================================================================
   10 PRINT
   ========================================================================== */

@media print {
  .hdr, .rail, .hero__field, .eco__svg { display: none !important; }
  body { background: #fff; color: #000; padding-left: 0; }
  .sect { padding-block: 24pt; break-inside: avoid; }
  .rv { opacity: 1; transform: none; }
}