/* ============================================================
   FOUNDRY.CSS — Foundry page components.
   Loaded after site.css, by foundry.html only.

   The page reuses site.css primitives (.head, .adapt__*, .formula,
   .board, .feat, .section) and adds: the SE-style page head, the
   factory component grid, and the engineer rows.
============================================================ */

/* ------------------------------------------------------------
   PAGE HEAD — same treatment as the Sovereign Enterprise page:
   soft violet wash, larger headline, the static tunnel mark.
   (Mirrors .page-head--se in se.css; duplicated here so each
   page's stylesheet stays self-contained.)
------------------------------------------------------------ */
/* Wash deepened from .11/.05 so the head reads as the page's opening rather
   than another light section. Deliberately short of a tinted band — the
   headline and the tunnel mark still have to sit on it. */
.page-head--fx {
  position: relative;
  overflow: hidden;
  padding: 176px 0 104px;
  background:
    radial-gradient(820px 460px at 74% 12%, rgba(94,94,255,.17), transparent 68%),
    linear-gradient(180deg, rgba(94,94,255,.085) 0%, rgba(94,94,255,0) 62%);
}
.page-head--fx .page-head__h1 {
  font-size: 66px;
  letter-spacing: -2.8px;
  line-height: 1.03;
  max-width: 15ch;
}
/* 21px, up from 18px. This is the page's opening statement, so it should not
   set at the same size as a section standfirst further down. */
.page-head--fx .page-head__lede {
  margin-top: 30px;
  font-size: 21px;
  line-height: 1.55;
  max-width: 62ch;
}
.page-head--fx .page-head__mark--tunnel {
  width: 620px;
  height: 620px;
  right: calc(var(--gutter) - 150px);
  transform: translateY(-46%);
  color: #3b3bb8;
  opacity: .30;
}
:root[data-theme="dark"] .page-head--fx .page-head__mark--tunnel {
  color: #a8a8ff;
  opacity: .30;
}
@media (max-width: 1024px) {
  .page-head--fx .page-head__mark--tunnel {
    width: 440px; height: 440px;
    right: calc(var(--gutter) - 120px);
    opacity: .22;
  }
}
@media (max-width: 980px) {
  .page-head--fx { padding: 140px 0 76px; }
  .page-head--fx .page-head__h1 { font-size: 44px; letter-spacing: -1.6px; }
}
@media (max-width: 760px) {
  .page-head--fx .page-head__mark--tunnel { display: none; }
}
@media (max-width: 560px) {
  .page-head--fx .page-head__h1 { font-size: 34px; letter-spacing: -1.1px; }
  .page-head--fx .page-head__lede { font-size: 17px; }
}

/* ------------------------------------------------------------
   SUB-NAV — centered, numbered, sticky under the 82px header.
   Same pattern as the Sovereign Enterprise page (.se-subnav).
------------------------------------------------------------ */
.fx-subnav {
  position: sticky;
  top: 82px;
  z-index: 400;
  background: var(--page-bg);
  border-bottom: 1px solid var(--border);
}
.fx-subnav__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.fx-subnav__inner::-webkit-scrollbar { display: none; }
.fx-subnav a {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
  padding: 15px 0 13px;
  border-bottom: 2px solid transparent;
  display: flex;
  align-items: baseline;
  gap: 7px;
  transition: color .2s ease, border-color .2s ease;
}
.fx-subnav a i {
  font-style: normal;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--border);
}
.fx-subnav a:hover { color: var(--text); }
.fx-subnav a.active { color: var(--text); border-bottom-color: var(--accent); }
.fx-subnav a.active i { color: var(--accent-text); }
@media (max-width: 1000px) { .fx-subnav__inner { justify-content: flex-start; gap: 22px; } }

/* Anchored sections land below header + sub-nav. */
.section[id] { scroll-margin-top: 148px; }

/* ------------------------------------------------------------
   THE FACTORY — component grid. Four parts in a row, and the
   full-width strip beneath for the part that makes it theirs:
   the ontology plug-in.
------------------------------------------------------------ */
.fx {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.fx--3 { grid-template-columns: repeat(3, 1fr); gap: 14px; }
.fx__item {
  border: 1px solid rgba(94,94,255,.20);
  border-radius: 4px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: linear-gradient(158deg, rgba(94,94,255,.075) 0%, rgba(94,94,255,.022) 62%, rgba(94,94,255,.008) 100%);
}
.fx__item--key {
  border-color: rgba(94,94,255,.45);
  background: linear-gradient(150deg, rgba(94,94,255,.17) 0%, rgba(94,94,255,.06) 70%);
}
/* The strip that spans the grid: how the factory becomes theirs.
   Same stacked eyebrow → name → body rhythm as the other cards. */
.fx__item--span {
  grid-column: 1 / -1;
  padding: 22px;
}
.fx__item--span .fx__body { max-width: 78ch; }
.fx__gloss {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.fx__name {
  font-size: 16.5px;
  font-weight: 500;
  letter-spacing: -.3px;
  color: var(--text);
}
.fx__body { font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.fx__body strong { color: var(--text); font-weight: 500; }
@media (max-width: 1024px) {
  .fx, .fx--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px)  {
  .fx, .fx--3 { grid-template-columns: 1fr; }
  .fx__item--span { flex-direction: column; gap: 8px; }
}

/* ------------------------------------------------------------
   ENGINEER ROWS — what our engineers do. Full-width hairline
   rows: role area, title, one line.
------------------------------------------------------------ */
.fdx { border-top: 1px solid var(--border); margin-top: 28px; }
.fdx__row {
  display: grid;
  grid-template-columns: 170px 250px 1fr;
  gap: 28px;
  padding: 19px 0;
  border-bottom: 1px solid var(--border);
  align-items: baseline;
}
.fdx__k {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.fdx__name {
  font-size: 17.5px;
  font-weight: 500;
  letter-spacing: -.3px;
  color: var(--text);
}
.fdx__body { font-size: 14.5px; line-height: 1.58; color: var(--muted); }
@media (max-width: 900px) {
  .fdx__row { grid-template-columns: 130px 1fr; gap: 8px 20px; }
  .fdx__body { grid-column: 2; margin-top: 6px; }
}
@media (max-width: 560px) {
  .fdx__row { grid-template-columns: 1fr; gap: 5px; }
  .fdx__body { grid-column: 1; margin-top: 3px; }
}