/* Metriq Foundation homepage — brand-aligned build using Metriq Brand Kit v3.2 */

:root {
  --page: var(--metriq-off-white, #F7FAF9);
  --surface: #FFFFFF;
  --surface-tint: #F0F7F4;
  --ink: var(--metriq-near-black, #0B0D0E);
  --text: var(--metriq-charcoal, #333333);
  --muted: #667371;
  --line: #D6E2DE;
  --line-dark: rgba(255, 255, 255, 0.12);
  --mint: var(--metriq-mint, #C6F5DD);
  --signal: var(--metriq-signal-green, #2AD189);
  --emerald: var(--metriq-emerald, #06A269);
  --teal: var(--metriq-deep-teal, #045B5D);
  --blue: var(--metriq-electric-blue, #1972DC);
  --gradient: var(--metriq-gradient, linear-gradient(90deg, #C6F5DD 0%, #2AD189 35%, #06A269 55%, #045B5D 76%, #1972DC 100%));
  --font-sans: Inter, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "DejaVu Sans Mono", "SFMono-Regular", Consolas, monospace;
  --wrap: 1320px;
  --gutter: clamp(1.25rem, 4vw, 4.5rem);
  --header-height: 78px;
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 10px;
  --shadow-sm: 0 18px 44px rgba(7, 31, 28, 0.08);
  --shadow-md: 0 32px 90px rgba(7, 31, 28, 0.12);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 24px);
  background: var(--ink);
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background: var(--page);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body.menu-open {
  overflow: hidden;
}

::selection {
  color: var(--ink);
  background: var(--mint);
}

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

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

button {
  font: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

p,
h1,
h2,
h3,
dl,
dd,
ul {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

.wrap {
  width: min(100%, var(--wrap));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section-pad {
  position: relative;
  padding-block: clamp(6rem, 10vw, 10rem);
}

.section-dark {
  color: var(--metriq-off-white, #F7FAF9);
  background: var(--ink);
}

.section-tint {
  background: var(--surface-tint);
}

.skip-link {
  position: fixed;
  z-index: 9999;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.75rem 1rem;
  transform: translateY(-180%);
  border-radius: 6px;
  background: var(--ink);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 700;
  transition: transform 160ms ease;
}

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

.brand-rule {
  position: fixed;
  z-index: 1000;
  inset: 0 0 auto;
  height: 3px;
  background: var(--gradient);
}

.scroll-progress {
  position: fixed;
  z-index: 1001;
  inset: 0 0 auto;
  height: 3px;
  pointer-events: none;
}

.scroll-progress span {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: var(--gradient);
}

/* Header ---------------------------------------------------------------- */

.site-header {
  position: fixed;
  z-index: 900;
  top: 3px;
  right: 0;
  left: 0;
  height: var(--header-height);
  border-bottom: 1px solid transparent;
  background: rgba(247, 250, 249, 0.78);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.site-header.is-scrolled {
  border-bottom-color: rgba(11, 13, 14, 0.08);
  background: rgba(247, 250, 249, 0.94);
  box-shadow: 0 10px 36px rgba(9, 31, 27, 0.05);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  gap: 2rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  min-width: 0;
}

.brand img {
  width: 124px;
  height: auto;
}

.brand-entity {
  padding-left: 0.9rem;
  border-left: 1px solid rgba(11, 13, 14, 0.22);
  color: var(--text);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 1;
  text-transform: uppercase;
}

.desktop-nav {
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 2vw, 2.15rem);
  margin-left: auto;
}

.desktop-nav a {
  position: relative;
  padding-block: 0.5rem;
  color: #44504e;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.045em;
}

.desktop-nav a::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  content: "";
  transform: scaleX(0);
  transform-origin: right center;
  background: var(--gradient);
  transition: transform 180ms ease;
}

.desktop-nav a:hover::after,
.desktop-nav a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left center;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.header-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 42px;
  padding: 0.65rem 0.95rem 0.65rem 1.1rem;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 0.77rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  transition: transform 160ms ease, background 160ms ease, color 160ms ease;
}

.header-cta svg {
  width: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.header-cta:hover,
.header-cta:focus-visible {
  transform: translateY(-2px);
  background: var(--emerald);
  color: #fff;
}

.menu-toggle {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(11, 13, 14, 0.16);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

.menu-toggle span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 17px;
  height: 1.5px;
  background: currentColor;
  transition: transform 180ms ease;
}

.menu-toggle span:first-child {
  transform: translate(-50%, -4px);
}

.menu-toggle span:last-child {
  transform: translate(-50%, 4px);
}

.menu-toggle[aria-expanded="true"] span:first-child {
  transform: translate(-50%, 0) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] span:last-child {
  transform: translate(-50%, 0) rotate(-45deg);
}

.mobile-menu {
  visibility: hidden;
  position: absolute;
  z-index: 850;
  top: var(--header-height);
  right: 0;
  left: 0;
  height: calc(100dvh - var(--header-height) - 3px);
  overflow-y: auto;
  transform: translateY(-1rem);
  opacity: 0;
  background: rgba(247, 250, 249, 0.98);
  transition: visibility 0s linear 220ms, opacity 200ms ease, transform 200ms ease;
}

.mobile-menu.is-open {
  visibility: visible;
  transform: translateY(0);
  opacity: 1;
  transition-delay: 0s;
}

.mobile-menu-inner {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.mobile-context {
  padding-bottom: 1rem;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.mobile-menu a:not(.mobile-menu-cta) {
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
  padding: 1rem 0;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-size: clamp(1.55rem, 6vw, 2.3rem);
  font-weight: 720;
  letter-spacing: -0.045em;
  line-height: 1.05;
}

.mobile-menu a:not(.mobile-menu-cta) span {
  width: 2rem;
  color: var(--emerald);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0;
}

.mobile-menu-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding: 1rem 1.1rem;
  border-radius: 10px;
  background: var(--ink);
  color: #fff;
  font-weight: 750;
}

/* Shared typography ------------------------------------------------------ */

.eyebrow,
.section-label,
.card-kicker,
.build-card-top,
.model-toolbar,
.work-card-topline,
.century-topline,
.evidence-topline,
.status-chip,
.ledger-label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.eyebrow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.65rem;
  color: var(--teal);
}

.eyebrow i {
  width: 18px;
  height: 1px;
  background: var(--signal);
}

.section-heading {
  display: grid;
  grid-template-columns: minmax(150px, 0.28fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 6rem);
  align-items: start;
  margin-bottom: clamp(3rem, 6vw, 5.5rem);
}

.section-label {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding-top: 0.65rem;
  color: var(--muted);
}

.section-label span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--emerald);
  font-size: 0.61rem;
  letter-spacing: 0;
}

.section-dark .section-label,
.section-heading-dark .section-label {
  color: rgba(247, 250, 249, 0.58);
}

.section-dark .section-label span,
.section-heading-dark .section-label span {
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--signal);
}

.section-heading-copy {
  max-width: 980px;
}

.section-heading h2,
.horizon h2,
.participate h2 {
  color: var(--ink);
  font-size: clamp(3rem, 6.2vw, 6.4rem);
  font-weight: 780;
  letter-spacing: -0.07em;
  line-height: 0.93;
}

.section-heading h2 span,
.horizon h2 span,
.participate h2 span {
  color: var(--emerald);
}

.section-heading-copy > p {
  max-width: 760px;
  margin-top: 1.8rem;
  color: var(--muted);
  font-size: clamp(1rem, 1.5vw, 1.24rem);
  line-height: 1.65;
}

.section-heading-dark h2,
.section-dark h2 {
  color: var(--metriq-off-white, #F7FAF9);
}

.section-heading-dark .section-heading-copy > p,
.section-dark .section-heading-copy > p {
  color: rgba(247, 250, 249, 0.64);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 52px;
  padding: 0.85rem 1.15rem 0.85rem 1.3rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.84rem;
  font-weight: 750;
  letter-spacing: 0.025em;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.button svg {
  width: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.button:hover,
.button:focus-visible {
  transform: translateY(-2px);
}

.button-primary {
  background: var(--ink);
  color: #fff;
}

.button-primary:hover,
.button-primary:focus-visible {
  background: var(--emerald);
}

.button-secondary {
  border-color: rgba(11, 13, 14, 0.18);
  background: rgba(255, 255, 255, 0.7);
  color: var(--ink);
}

.button-secondary:hover,
.button-secondary:focus-visible {
  border-color: var(--teal);
  background: #fff;
}

.button-light {
  background: var(--metriq-off-white, #F7FAF9);
  color: var(--ink);
}

.button-light:hover,
.button-light:focus-visible {
  background: var(--signal);
}

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 4px;
}

/* Hero ------------------------------------------------------------------ */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100vh;
  padding-top: calc(var(--header-height) + clamp(4.5rem, 8vw, 8rem));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.56), rgba(247, 250, 249, 0.96)),
    var(--page);
}

.hero-grid,
.outcomes-grid-bg {
  position: absolute;
  z-index: -3;
  inset: 0;
  opacity: 0.52;
  background-image:
    linear-gradient(rgba(4, 91, 93, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(4, 91, 93, 0.05) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.82) 58%, transparent 100%);
}

.hero-glow {
  position: absolute;
  z-index: -2;
  border-radius: 50%;
  filter: blur(10px);
  pointer-events: none;
}

.hero-glow-green {
  top: 3%;
  left: -12%;
  width: 42vw;
  height: 42vw;
  background: radial-gradient(circle, rgba(42, 209, 137, 0.16), transparent 68%);
}

.hero-glow-blue {
  right: -16%;
  bottom: 4%;
  width: 44vw;
  height: 44vw;
  background: radial-gradient(circle, rgba(25, 114, 220, 0.10), transparent 68%);
}

.hero-inner {
  display: block;
  padding-bottom: clamp(4.5rem, 7vw, 7rem);
}

.hero-copy {
  position: relative;
  z-index: 2;
  max-width: 960px;
}

.hero h1 {
  max-width: 940px;
  margin-top: 1.35rem;
  color: var(--ink);
  font-size: clamp(4.8rem, 8.6vw, 9.5rem);
  font-weight: 800;
  letter-spacing: -0.078em;
  line-height: 0.86;
}

.hero h1 span {
  display: block;
  color: var(--emerald);
}

.hero-lead {
  max-width: 690px;
  margin-top: 2rem;
  color: #3f4b49;
  font-size: clamp(1.08rem, 1.5vw, 1.3rem);
  line-height: 1.62;
}

.hero-mission {
  max-width: 700px;
  margin-top: 1rem;
  color: var(--ink);
  font-size: clamp(1rem, 1.35vw, 1.18rem);
  font-weight: 760;
  line-height: 1.45;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 2rem;
}

.pledge-card {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  max-width: 570px;
  margin-top: 2rem;
  padding: 1rem 1.15rem;
  border: 1px solid rgba(6, 162, 105, 0.22);
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(198, 245, 221, 0.56), rgba(255, 255, 255, 0.72));
}

.pledge-label {
  flex: 0 0 auto;
  color: var(--teal);
  font-family: var(--font-mono);
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.pledge-card p {
  color: #45514f;
  font-size: 0.9rem;
}

.pledge-card strong {
  color: var(--ink);
}

.hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.4rem;
  margin-top: 1.4rem;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.63rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.hero-facts li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.hero-facts li > span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 4px rgba(42, 209, 137, 0.12);
}


.process-strip {
  position: relative;
  border-top: 1px solid rgba(11, 13, 14, 0.08);
  border-bottom: 1px solid rgba(11, 13, 14, 0.08);
  background: rgba(255, 255, 255, 0.56);
}

.process-strip-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  min-height: 64px;
  overflow-x: auto;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  scrollbar-width: none;
  text-transform: uppercase;
}

.process-strip-inner::-webkit-scrollbar { display: none; }
.process-strip-inner span { white-space: nowrap; }
.process-strip-inner i { color: var(--emerald); font-style: normal; }

/* Mission --------------------------------------------------------------- */

.mission {
  background: var(--surface);
}

.build-categories {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.build-card {
  position: relative;
  min-height: 430px;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  overflow: hidden;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #fff;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.build-card:hover {
  z-index: 2;
  transform: translateY(-5px);
  background: #fbfefd;
  box-shadow: var(--shadow-sm);
}

.build-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--muted);
}

.build-card-top span {
  color: var(--emerald);
}

.build-icon {
  position: relative;
  width: 100%;
  height: 130px;
  margin: 3rem 0 2.2rem;
}

.infrastructure-icon::before,
.infrastructure-icon::after {
  position: absolute;
  content: "";
  border: 1px solid rgba(4, 91, 93, 0.18);
  border-radius: 50%;
}

.infrastructure-icon::before { inset: 4% 28%; }
.infrastructure-icon::after { inset: 23% 37%; }

.infrastructure-icon i {
  position: absolute;
  width: 10px;
  height: 10px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--emerald);
  box-shadow: 0 0 0 1px rgba(6, 162, 105, 0.25);
}

.infrastructure-icon i:nth-child(1) { top: 5%; left: 49%; }
.infrastructure-icon i:nth-child(2) { top: 50%; left: 28%; }
.infrastructure-icon i:nth-child(3) { top: 50%; right: 28%; }
.infrastructure-icon i:nth-child(4) { bottom: 5%; left: 49%; background: var(--blue); }

.products-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

.products-icon i {
  display: block;
  width: 60px;
  height: 86px;
  border: 1px solid rgba(4, 91, 93, 0.18);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(198, 245, 221, 0.8), rgba(255, 255, 255, 0.5));
}

.products-icon i:nth-child(2) {
  height: 116px;
  background: linear-gradient(180deg, rgba(42, 209, 137, 0.26), rgba(25, 114, 220, 0.1));
}

.companies-icon {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.35rem;
}

.companies-icon i {
  width: 34px;
  border-radius: 3px 3px 0 0;
  background: rgba(4, 91, 93, 0.13);
}

.companies-icon i:nth-child(1) { height: 34px; }
.companies-icon i:nth-child(2) { height: 55px; }
.companies-icon i:nth-child(3) { height: 82px; background: var(--emerald); }
.companies-icon i:nth-child(4) { height: 105px; background: var(--teal); }
.companies-icon i:nth-child(5) { height: 126px; background: var(--blue); }

.build-card h3 {
  color: var(--ink);
  font-size: clamp(1.7rem, 2.3vw, 2.35rem);
  font-weight: 750;
  letter-spacing: -0.045em;
  line-height: 1.02;
}

.build-card > p {
  margin-top: 1rem;
  color: var(--muted);
  line-height: 1.68;
}

.mission-statement,
.model-principle {
  display: grid;
  grid-template-columns: minmax(180px, 0.32fr) 1fr;
  gap: 2rem;
  align-items: baseline;
  margin-top: 2rem;
  padding: 1.75rem 0 0;
  border-top: 1px solid var(--line);
}

.mission-statement span,
.model-principle span {
  color: var(--teal);
  font-family: var(--font-mono);
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.mission-statement p,
.model-principle p {
  color: var(--ink);
  font-size: clamp(1.6rem, 3vw, 3.4rem);
  font-weight: 740;
  letter-spacing: -0.055em;
  line-height: 1;
}

/* Outcomes -------------------------------------------------------------- */

.outcomes {
  isolation: isolate;
  overflow: hidden;
}

.outcomes-grid-bg {
  z-index: -1;
  opacity: 0.42;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  mask-image: linear-gradient(180deg, transparent, #000 15%, #000 85%, transparent);
}

.outcome-stack {
  display: grid;
  gap: 1rem;
}

.outcome-panel {
  display: grid;
  grid-template-columns: 72px minmax(0, 1.25fr) minmax(190px, 0.65fr) minmax(160px, 0.45fr);
  gap: clamp(1.2rem, 3vw, 3.5rem);
  align-items: center;
  min-height: 230px;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.035);
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.outcome-panel:hover {
  transform: translateX(6px);
  border-color: rgba(42, 209, 137, 0.32);
  background: rgba(255, 255, 255, 0.055);
}

.outcome-index {
  color: rgba(247, 250, 249, 0.22);
  font-family: var(--font-mono);
  font-size: 2.2rem;
  font-weight: 700;
}

.outcome-copy .card-kicker {
  color: var(--signal);
}

.outcome-copy h3 {
  max-width: 740px;
  margin-top: 0.75rem;
  color: #fff;
  font-size: clamp(1.9rem, 3.3vw, 3.5rem);
  font-weight: 730;
  letter-spacing: -0.055em;
  line-height: 0.99;
}

.outcome-copy > p:last-child {
  max-width: 720px;
  margin-top: 1rem;
  color: rgba(247, 250, 249, 0.58);
  line-height: 1.68;
}

.outcome-signal {
  position: relative;
  height: 130px;
}

.abundance-signal {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.35rem;
}

.abundance-signal span {
  width: 24px;
  border-radius: 2px 2px 0 0;
  background: rgba(42, 209, 137, 0.22);
}

.abundance-signal span:nth-child(1) { height: 28px; }
.abundance-signal span:nth-child(2) { height: 52px; }
.abundance-signal span:nth-child(3) { height: 82px; }
.abundance-signal span:nth-child(4) { height: 116px; background: var(--signal); }
.abundance-signal i {
  position: absolute;
  top: 4px;
  right: 18%;
  width: 46%;
  height: 1px;
  transform: rotate(-29deg);
  background: rgba(25, 114, 220, 0.72);
}

.conservation-signal::before,
.conservation-signal::after {
  position: absolute;
  top: 50%;
  left: 50%;
  content: "";
  transform: translate(-50%, -50%);
  border: 1px solid rgba(42, 209, 137, 0.24);
  border-radius: 50%;
}

.conservation-signal::before { width: 118px; height: 118px; }
.conservation-signal::after { width: 76px; height: 76px; }

.conservation-signal span,
.conservation-signal i {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--signal);
}

.conservation-signal span:nth-child(1) { top: 8%; left: 48%; }
.conservation-signal span:nth-child(2) { top: 48%; left: 22%; }
.conservation-signal span:nth-child(3) { right: 22%; bottom: 14%; }
.conservation-signal i:nth-of-type(1) { bottom: 8%; left: 42%; background: var(--blue); }
.conservation-signal i:nth-of-type(2) { top: 34%; right: 19%; background: var(--emerald); }

.access-signal {
  display: grid;
  grid-template-columns: repeat(2, 56px);
  grid-template-rows: repeat(2, 56px);
  place-content: center;
  gap: 8px;
}

.access-signal span {
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.035);
}

.access-signal span:nth-child(1) { background: rgba(42, 209, 137, 0.20); }
.access-signal span:nth-child(4) { background: rgba(25, 114, 220, 0.20); }
.access-signal i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 7px rgba(42, 209, 137, 0.12);
}

.outcome-target {
  padding-left: 1.2rem;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.outcome-target span {
  display: block;
  color: rgba(247, 250, 249, 0.36);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
}

.outcome-target strong {
  display: block;
  margin-top: 0.65rem;
  color: rgba(247, 250, 249, 0.82);
  font-size: 0.84rem;
  line-height: 1.35;
}

.target-ledger {
  display: grid;
  grid-template-columns: 1.3fr repeat(4, 1fr);
  margin-top: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 12px;
  overflow: hidden;
}

.target-ledger > * {
  min-height: 74px;
  padding: 1rem;
  border-right: 1px solid rgba(255, 255, 255, 0.09);
}

.target-ledger > *:last-child { border-right: 0; }

.ledger-label {
  display: flex;
  align-items: center;
  color: rgba(247, 250, 249, 0.4);
}

.target-ledger div {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.target-ledger strong {
  color: var(--signal);
  font-size: 1.25rem;
}

.target-ledger span:not(.ledger-label) {
  color: rgba(247, 250, 249, 0.68);
  font-size: 0.75rem;
  font-weight: 650;
}

/* Operating model ------------------------------------------------------- */

.model {
  background: #fff;
}

.model-interface {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.model-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
}

.motion-control {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--teal);
  font-family: var(--font-mono);
  font-size: 0.61rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  text-transform: uppercase;
}

.motion-control i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 5px rgba(42, 209, 137, 0.12);
}

.motion-control[aria-pressed="true"] i {
  border-radius: 1px;
  background: var(--blue);
  box-shadow: none;
}

.model-layout {
  display: grid;
  grid-template-columns: 0.36fr 0.64fr;
  min-height: 560px;
}

.model-steps {
  border-right: 1px solid var(--line);
  background: #f9fcfb;
}

.model-step {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 0.65rem;
  align-items: center;
  width: 100%;
  min-height: 112px;
  padding: 1rem 1.25rem;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  text-align: left;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}

.model-step:last-child { border-bottom: 0; }

.model-step span {
  color: #9aaba7;
  font-family: var(--font-mono);
  font-size: 0.66rem;
}

.model-step strong {
  font-size: 0.92rem;
  line-height: 1.3;
}

.model-step:hover,
.model-step.is-active {
  background: #fff;
  color: var(--ink);
}

.model-step.is-active {
  box-shadow: inset 3px 0 0 var(--emerald);
}

.model-step.is-active span { color: var(--emerald); }

.model-detail {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: clamp(1.5rem, 3.5vw, 3.5rem);
}

.model-detail-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.09em;
}

#model-detail-kicker { color: var(--emerald); }

.model-detail-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(190px, 0.62fr);
  gap: 2rem;
  align-items: center;
  flex: 1;
  padding-block: 2rem;
}

.model-detail-copy h3 {
  color: var(--ink);
  font-size: clamp(2.2rem, 4.4vw, 4.8rem);
  font-weight: 760;
  letter-spacing: -0.065em;
  line-height: 0.95;
}

.model-detail-copy p {
  max-width: 590px;
  margin-top: 1.3rem;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.7;
}

.model-diagram {
  position: relative;
  aspect-ratio: 1;
  max-width: 280px;
  justify-self: end;
}

.diagram-rings,
.diagram-rings::before,
.diagram-rings::after {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(6, 162, 105, 0.16);
  border-radius: 50%;
}

.diagram-rings::before,
.diagram-rings::after {
  content: "";
}

.diagram-rings::before { inset: 18%; }
.diagram-rings::after { inset: 36%; }

.model-diagram img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 33%;
  transform: translate(-50%, -50%);
}

.diagram-node {
  position: absolute;
  width: 12px;
  height: 12px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--emerald);
  box-shadow: 0 0 0 1px rgba(6, 162, 105, 0.24);
}

.diagram-node-a { top: 8%; left: 48%; }
.diagram-node-b { top: 48%; right: 5%; background: var(--blue); }
.diagram-node-c { bottom: 13%; left: 18%; background: var(--signal); }

.model-output {
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
}

.model-output > span {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
}

.model-output strong {
  display: block;
  margin-top: 0.5rem;
  color: var(--ink);
  font-size: 0.9rem;
}

.model-meter {
  height: 3px;
  margin-top: 1rem;
  overflow: hidden;
  border-radius: 99px;
  background: #e6eeeb;
}

.model-meter i {
  display: block;
  width: 20%;
  height: 100%;
  background: var(--gradient);
  transition: width 320ms ease;
}

/* Ecosystem ------------------------------------------------------------- */

.work-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.work-card {
  display: flex;
  min-height: 560px;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.work-card:hover {
  transform: translateY(-5px);
  border-color: rgba(6, 162, 105, 0.3);
  box-shadow: var(--shadow-sm);
}

.work-card-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
}

.work-card-topline span:first-child { color: var(--emerald); }

.work-symbol {
  position: relative;
  height: 190px;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(rgba(4, 91, 93, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(4, 91, 93, 0.035) 1px, transparent 1px),
    #fbfefd;
  background-size: 30px 30px;
}

/* Role-specific ecosystem diagrams are defined in the v3.7 section below. */

.work-copy {
  padding: clamp(1.5rem, 3vw, 2.25rem);
}

.work-copy h3 {
  color: var(--ink);
  font-size: clamp(2rem, 3.4vw, 3.35rem);
  font-weight: 750;
  letter-spacing: -0.06em;
  line-height: 0.98;
}

.work-copy > p {
  max-width: 590px;
  margin-top: 1rem;
  color: var(--muted);
  line-height: 1.68;
}

.work-copy dl {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 1.6rem;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.work-copy dl div {
  padding: 0.9rem 1rem;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.work-copy dt {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.work-copy dd {
  margin-top: 0.35rem;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 700;
}

.work-card > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding: 1.1rem 1.5rem;
  border-top: 1px solid var(--line);
  color: var(--teal);
  font-size: 0.78rem;
  font-weight: 750;
  transition: background 160ms ease, color 160ms ease;
}

.work-card > a:hover,
.work-card > a:focus-visible {
  background: var(--ink);
  color: #fff;
}

.ecosystem-links {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  margin-top: 1rem;
  padding: 1.25rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.ecosystem-links > span {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.ecosystem-links > div {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}

.ecosystem-links a {
  color: var(--teal);
  font-size: 0.8rem;
  font-weight: 700;
}

/* Long horizon ---------------------------------------------------------- */

.horizon {
  isolation: isolate;
  overflow: hidden;
}

.horizon-glow {
  position: absolute;
  z-index: -1;
  top: -25%;
  right: -8%;
  width: 55vw;
  height: 55vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(42, 209, 137, 0.15), transparent 67%);
}

.horizon-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(500px, 1.14fr);
  gap: clamp(3rem, 7vw, 8rem);
  align-items: center;
}

.horizon-copy .section-label {
  margin-bottom: 1.6rem;
}

.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.4rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid rgba(42, 209, 137, 0.25);
  border-radius: 999px;
  color: var(--signal);
  background: rgba(42, 209, 137, 0.05);
}

.status-chip::before {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  content: "";
  background: var(--signal);
}

.horizon h2,
.participate h2 {
  font-size: clamp(3.4rem, 6vw, 6.7rem);
}

.horizon-copy > p:not(.status-chip) {
  max-width: 660px;
  margin-top: 1.7rem;
  color: rgba(247, 250, 249, 0.62);
  font-size: 1.02rem;
  line-height: 1.75;
}

.horizon-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2rem;
  margin-top: 2rem;
}

.text-link-light {
  color: rgba(247, 250, 249, 0.76);
  font-size: 0.8rem;
  font-weight: 700;
}

.century-panel {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.035);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.24);
}

.century-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(247, 250, 249, 0.48);
}

.century-topline span:first-child { color: var(--signal); }

.century-markers {
  display: flex;
  justify-content: space-between;
  padding: 2.3rem 2rem 0;
  color: rgba(247, 250, 249, 0.35);
  font-family: var(--font-mono);
  font-size: 0.55rem;
}

.century-line {
  position: relative;
  height: 58px;
  margin: 0 2rem;
}

.century-line span {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: 2px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, var(--signal), var(--emerald), var(--teal), var(--blue));
}

.century-line i {
  position: absolute;
  top: 50%;
  width: 11px;
  height: 11px;
  transform: translate(-50%, -50%);
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 1px rgba(42, 209, 137, 0.55);
}

.century-line i:nth-of-type(1) { left: 0%; }
.century-line i:nth-of-type(2) { left: 25%; }
.century-line i:nth-of-type(3) { left: 50%; background: var(--emerald); }
.century-line i:nth-of-type(4) { left: 75%; background: var(--teal); }
.century-line i:nth-of-type(5) { left: 100%; background: var(--blue); }

.century-principles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.century-principles > div {
  min-height: 210px;
  padding: 1.5rem;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.century-principles > div:last-child { border-right: 0; }

.century-principles span {
  color: var(--signal);
  font-family: var(--font-mono);
  font-size: 0.6rem;
}

.century-principles strong {
  display: block;
  margin-top: 2.2rem;
  color: #fff;
  font-size: 1rem;
}

.century-principles p {
  margin-top: 0.65rem;
  color: rgba(247, 250, 249, 0.47);
  font-size: 0.8rem;
  line-height: 1.6;
}

/* Proof ----------------------------------------------------------------- */

.proof {
  background: #fff;
}

.evidence-board {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fbfefd;
}

.evidence-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
}

.evidence-topline span:first-child { color: var(--teal); }

.evidence-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.evidence-grid article {
  min-height: 260px;
  padding: 1.5rem;
  border-right: 1px solid var(--line);
}

.evidence-grid article:last-child { border-right: 0; }

.evidence-state {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.07em;
}

.evidence-state i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--emerald);
}

.state-simulated i { background: var(--blue); }
.state-proposed i { border: 1px solid #879591; background: transparent; }
.state-validated i { background: var(--signal); box-shadow: 0 0 0 4px rgba(42, 209, 137, 0.12); }

.evidence-grid h3 {
  margin-top: 2.4rem;
  color: var(--ink);
  font-size: 1.25rem;
  font-weight: 730;
  letter-spacing: -0.035em;
}

.evidence-grid p {
  margin-top: 0.8rem;
  color: var(--muted);
  font-size: 0.83rem;
  line-height: 1.65;
}

.proof-practices {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 1rem;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.proof-card {
  min-height: 250px;
  padding: 1.5rem;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.proof-card > span {
  color: var(--emerald);
  font-family: var(--font-mono);
  font-size: 0.62rem;
}

.proof-card h3 {
  margin-top: 3.2rem;
  color: var(--ink);
  font-size: 1.3rem;
  font-weight: 730;
  letter-spacing: -0.035em;
}

.proof-card p {
  margin-top: 0.75rem;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.65;
}

/* Participate ----------------------------------------------------------- */

.participate {
  isolation: isolate;
  overflow: hidden;
}

.participate-rings {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 8%;
  width: 620px;
  height: 620px;
  transform: translateY(-50%);
  border: 1px solid rgba(42, 209, 137, 0.08);
  border-radius: 50%;
}

.participate-rings::before,
.participate-rings::after {
  position: absolute;
  content: "";
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 50%;
}

.participate-rings::before { inset: 18%; }
.participate-rings::after { inset: 37%; background: radial-gradient(circle, rgba(42, 209, 137, 0.09), transparent 70%); }

.participate-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(520px, 1.22fr);
  gap: clamp(3rem, 7vw, 8rem);
  align-items: start;
}

.participate-copy .section-label { margin-bottom: 1.7rem; }

.participate-copy > p {
  max-width: 590px;
  margin-top: 1.7rem;
  color: rgba(247, 250, 249, 0.58);
  font-size: 1rem;
  line-height: 1.75;
}

.participate-options {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.participate-card {
  display: grid;
  grid-template-columns: 52px 1fr 32px;
  gap: 1.25rem;
  align-items: center;
  min-height: 170px;
  padding: 1.5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  transition: padding 180ms ease, background 180ms ease;
}

.participate-card:hover,
.participate-card:focus-visible {
  padding-right: 1rem;
  padding-left: 1rem;
  background: rgba(255, 255, 255, 0.035);
}

.participate-number {
  color: var(--signal);
  font-family: var(--font-mono);
  font-size: 0.65rem;
}

.participate-card small {
  color: rgba(247, 250, 249, 0.38);
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.1em;
}

.participate-card h3 {
  margin-top: 0.45rem;
  color: #fff;
  font-size: clamp(1.6rem, 2.6vw, 2.7rem);
  font-weight: 720;
  letter-spacing: -0.05em;
  line-height: 1.05;
}

.participate-card p {
  max-width: 560px;
  margin-top: 0.6rem;
  color: rgba(247, 250, 249, 0.5);
  font-size: 0.82rem;
}

.participate-card > i {
  color: var(--signal);
  font-size: 1.2rem;
  font-style: normal;
  transition: transform 180ms ease;
}

.participate-card:hover > i { transform: translate(4px, -4px); }

/* Footer ---------------------------------------------------------------- */

.site-footer {
  padding-top: clamp(4rem, 8vw, 7rem);
  background: #070909;
  color: var(--metriq-off-white, #F7FAF9);
}

.footer-main {
  display: grid;
  grid-template-columns: minmax(260px, 0.62fr) minmax(0, 1.38fr);
  gap: clamp(3rem, 8vw, 9rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

.footer-brand img {
  width: 170px;
}

.footer-entity {
  margin-top: 1rem;
  color: rgba(247, 250, 249, 0.48);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.footer-brand > p:last-child {
  max-width: 330px;
  margin-top: 1.5rem;
  color: rgba(247, 250, 249, 0.62);
  font-size: 1rem;
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}

.footer-links h2 {
  margin-bottom: 1.2rem;
  color: rgba(247, 250, 249, 0.38);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.footer-links a {
  display: block;
  width: fit-content;
  margin-top: 0.65rem;
  color: rgba(247, 250, 249, 0.72);
  font-size: 0.77rem;
  transition: color 150ms ease;
}

.footer-links a:hover,
.footer-links a:focus-visible { color: var(--signal); }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-height: 78px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(247, 250, 249, 0.35);
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.05em;
}

.footer-bottom p:last-child { text-align: right; }

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

.js .reveal {
  transform: none;
  opacity: 1;
}

.js .hero .reveal {
  transform: translateY(24px);
  opacity: 0;
  transition: opacity 680ms ease var(--delay, 0ms), transform 680ms cubic-bezier(.2,.7,.2,1) var(--delay, 0ms);
}

.js .hero .reveal.is-visible {
  transform: translateY(0);
  opacity: 1;
}

.model-detail-copy,
.model-diagram,
.model-output {
  transition: opacity 120ms ease;
}

.model-detail.is-changing .model-detail-copy,
.model-detail.is-changing .model-diagram,
.model-detail.is-changing .model-output {
  opacity: 0.45;
}


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

@media (max-width: 1180px) {
  .desktop-nav { display: none; }
  .menu-toggle { display: block; }
  .horizon-layout { grid-template-columns: 1fr; }
  .horizon-copy { max-width: 850px; }
  .participate-layout { grid-template-columns: 1fr; }
  .participate-copy { max-width: 850px; }
}

@media (max-width: 980px) {
  .hero { padding-top: calc(var(--header-height) + 4.5rem); }
  .section-heading { grid-template-columns: 1fr; gap: 1.4rem; }
  .section-label { padding-top: 0; }
  .build-categories { grid-template-columns: 1fr; }
  .build-card { min-height: 0; }
  .build-icon { max-width: 420px; }
  .outcome-panel { grid-template-columns: 56px 1fr minmax(150px, 0.45fr); }
  .outcome-target { grid-column: 2 / -1; padding: 1rem 0 0; border-top: 1px solid rgba(255,255,255,.1); border-left: 0; }
  .target-ledger { grid-template-columns: repeat(2, 1fr); }
  .target-ledger > * { border-bottom: 1px solid rgba(255,255,255,.09); }
  .ledger-label { grid-column: 1 / -1; }
  .model-layout { grid-template-columns: 1fr; }
  .model-steps { display: grid; grid-template-columns: repeat(5, minmax(150px, 1fr)); overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .model-step { grid-template-columns: 1fr; min-height: 104px; border-right: 1px solid var(--line); border-bottom: 0; }
  .model-step.is-active { box-shadow: inset 0 -3px 0 var(--emerald); }
  .work-grid { grid-template-columns: 1fr; }
  .work-card { min-height: 0; }
  .evidence-grid { grid-template-columns: repeat(2, 1fr); }
  .evidence-grid article { border-bottom: 1px solid var(--line); }
  .evidence-grid article:nth-child(2) { border-right: 0; }
  .proof-practices { grid-template-columns: repeat(2, 1fr); }
  .footer-main { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  :root { --header-height: 68px; }
  .site-header { top: 3px; }
  .header-cta { display: none; }
  .brand img { width: 108px; }
  .brand-entity { font-size: 0.61rem; letter-spacing: 0.14em; }
  .hero { min-height: auto; padding-top: calc(var(--header-height) + 3.5rem); }
  .hero h1 { max-width: 640px; font-size: clamp(3.5rem, 16vw, 5.5rem); }
  .hero-lead { margin-top: 1.5rem; }
  .hero-actions { display: grid; }
  .button { width: 100%; }
  .pledge-card { align-items: flex-start; flex-direction: column; gap: 0.4rem; }
  .hero-facts { flex-direction: column; }
  .process-strip-inner { justify-content: flex-start; }
  .section-heading h2, .horizon h2, .participate h2 { font-size: clamp(2.8rem, 13vw, 4.8rem); }
  .build-card { padding: 1.4rem; }
  .mission-statement, .model-principle { grid-template-columns: 1fr; gap: 0.75rem; }
  .outcome-panel { grid-template-columns: 1fr; gap: 1rem; }
  .outcome-index { font-size: 1rem; }
  .outcome-signal { height: 110px; }
  .outcome-target { grid-column: auto; }
  .target-ledger { grid-template-columns: 1fr; }
  .ledger-label { grid-column: auto; }
  .target-ledger > * { border-right: 0; }
  .model-toolbar { align-items: flex-start; flex-direction: column; }
  .model-detail { padding: 1.4rem; }
  .model-detail-body { grid-template-columns: 1fr; }
  .model-diagram { width: 220px; justify-self: center; }
  .work-card-topline { align-items: flex-start; flex-direction: column; gap: 0.3rem; }
  .work-symbol { height: 160px; }
  .work-copy dl { grid-template-columns: 1fr; }
  .ecosystem-links { align-items: flex-start; flex-direction: column; }
  .horizon-layout { grid-template-columns: 1fr; }
  .century-principles { grid-template-columns: 1fr; }
  .century-principles > div { min-height: 0; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.1); }
  .century-principles > div:last-child { border-bottom: 0; }
  .evidence-grid { grid-template-columns: 1fr; }
  .evidence-grid article { min-height: 0; border-right: 0; }
  .proof-practices { grid-template-columns: 1fr; }
  .proof-card { min-height: 0; }
  .proof-card h3 { margin-top: 1.8rem; }
  .participate-card { grid-template-columns: 36px 1fr 24px; gap: 0.8rem; }
  .footer-links { grid-template-columns: repeat(2, 1fr); }
  .footer-bottom { align-items: flex-start; flex-direction: column; justify-content: center; padding-block: 1.25rem; }
  .footer-bottom p:last-child { text-align: left; }
}

@media (max-width: 430px) {
  .brand-entity { display: none; }
  .eyebrow { font-size: 0.58rem; }
  .eyebrow i { display: none; }
  .eyebrow span:last-child { width: 100%; color: var(--muted); }
  .footer-links { grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; }
}

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

/* PRISM ecosystem card -------------------------------------------------- */

.work-card--wide {
  grid-column: 1 / -1;
  min-height: 430px;
  display: grid;
  grid-template-columns: minmax(300px, 0.86fr) minmax(0, 1.14fr);
  grid-template-rows: auto 1fr auto;
}

.work-card--wide .work-card-topline {
  grid-column: 1 / -1;
}

.work-card--wide .work-symbol {
  grid-column: 1;
  grid-row: 2;
  height: auto;
  min-height: 290px;
  border-right: 1px solid var(--line);
  border-bottom: 0;
}

.work-card--wide .work-copy {
  grid-column: 2;
  grid-row: 2;
  align-self: center;
}

.work-card--wide > a {
  grid-column: 1 / -1;
}

.prism-expansion {
  margin-bottom: 1rem;
  color: var(--emerald) !important;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  line-height: 1.5 !important;
}

.symbol-prism {
  display: grid;
  place-items: center;
  padding: clamp(1rem, 3vw, 2rem);
  background:
    radial-gradient(circle at 50% 50%, rgba(42, 209, 137, 0.12), transparent 38%),
    linear-gradient(rgba(4, 91, 93, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(4, 91, 93, 0.04) 1px, transparent 1px),
    #fbfefd;
  background-size: auto, 28px 28px, 28px 28px, auto;
}

.prism-diagram {
  width: min(100%, 640px);
  overflow: visible;
}

.prism-diagram path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.prism-input {
  stroke: var(--teal);
  stroke-width: 5;
}

.prism-body {
  fill: rgba(255, 255, 255, 0.78) !important;
  stroke: rgba(4, 91, 93, 0.38);
  stroke-width: 3;
}

.prism-core {
  stroke: rgba(4, 91, 93, 0.24);
  stroke-width: 2;
}

.prism-output {
  stroke-width: 4;
  opacity: 0.9;
}

.prism-output-a { stroke: #C6F5DD; }
.prism-output-b { stroke: #2AD189; }
.prism-output-c { stroke: #06A269; }
.prism-output-d { stroke: #045B5D; }
.prism-output-e { stroke: #1972DC; }

@media (max-width: 980px) {
  .work-card--wide {
    grid-column: auto;
    display: flex;
    min-height: 0;
  }

  .work-card--wide .work-symbol {
    min-height: 220px;
    height: 220px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
}


/* Official Metriq PRISM Laboratory ecosystem treatment */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.work-prism .work-symbol {
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    linear-gradient(rgba(4,91,93,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(4,91,93,.045) 1px, transparent 1px),
    linear-gradient(145deg, #fff, #edf7f3);
  background-size: 34px 34px, 34px 34px, auto;
}
.prism-card-symbol { width: min(70%, 300px); }
.prism-card-symbol img { width: 100%; height: auto; }
.prism-card-record {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  min-width: 120px;
  padding: .8rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255,255,255,.9);
}
.prism-card-record span { display: block; color: var(--blue); font-size: 1.6rem; font-weight: 780; }
.prism-card-record small { color: var(--muted); font-family: var(--font-mono); font-size: .48rem; letter-spacing: .07em; text-transform: uppercase; }
.prism-card-lockup { display: block; width: min(100%, 660px); margin-bottom: 1.4rem; }
.prism-card-lockup img { display: block; width: 100%; height: auto; }
.work-prism .work-copy > p { max-width: 760px; }
@media (max-width: 980px) {
  .prism-card-lockup { width: min(100%, 390px); }
}

/* v3.7 ecosystem diagrams -------------------------------------------------
 * Each illustration now communicates the actual role of the entity rather
 * than using a generic decorative motif.
 */
.ecosystem-visual {
  display: grid;
  place-items: center;
  padding: clamp(0.65rem, 1.8vw, 1.15rem);
}

.ecosystem-visual .ecosystem-diagram {
  width: min(100%, 510px);
  height: 100%;
  max-height: 174px;
  overflow: visible;
}

.ecosystem-diagram text {
  fill: var(--teal);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

/* Distributed network and ledger */
.eco-network-links path {
  stroke-width: 1.6;
  opacity: 0.6;
}

.eco-ledger-core rect,
.eco-core-stack > rect:first-child,
.eco-api-gateway rect,
.eco-prototype > rect:first-child,
.eco-inspection rect {
  fill: rgba(255,255,255,0.94);
  stroke: rgba(4,91,93,0.2);
  stroke-width: 1.2;
  filter: drop-shadow(0 12px 20px rgba(4,91,93,0.08));
}

.eco-ledger-core path,
.eco-core-stack rect:not(:first-child),
.eco-api-gateway path,
.eco-prototype rect:not(:first-child),
.eco-inspection path {
  fill: none;
  stroke: url(#eco-network-gradient);
  stroke-linecap: round;
  stroke-width: 2;
}

.eco-network-node circle:first-child {
  fill: #fff;
  stroke: rgba(4,91,93,0.2);
  stroke-width: 1.2;
  filter: drop-shadow(0 7px 13px rgba(4,91,93,0.1));
}

.eco-network-node circle:last-child {
  fill: var(--emerald);
}

.eco-network-node-b circle:last-child,
.eco-network-node-e circle:last-child { fill: var(--blue); }
.eco-network-node-c circle:last-child { fill: var(--signal); }
.eco-network-node-d circle:last-child { fill: var(--teal); }

/* Gravity core and OrbitR API */
.eco-core-stack rect:not(:first-child) {
  fill: rgba(198,245,221,0.34);
  stroke: rgba(6,162,105,0.32);
}

.eco-api-gateway path,
.eco-api-in,
.eco-api-out,
.eco-software-route {
  fill: none;
  stroke: url(#eco-software-gradient);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.eco-api-gateway circle,
.eco-software-packet {
  fill: var(--blue);
}

/* Automated manufacturing cell */
.eco-conveyor path:first-child,
.eco-conveyor-motion,
.eco-robot-lower path,
.eco-robot-upper path,
.eco-control-signal {
  fill: none;
  stroke: url(#eco-dynamics-gradient);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.eco-conveyor path:first-child { stroke-width: 5; }
.eco-conveyor-motion { stroke-width: 2; stroke-dasharray: 9 12; opacity: 0.5; }
.eco-conveyor circle { fill: #fff; stroke: rgba(4,91,93,0.28); stroke-width: 2; }
.eco-robot-base rect { fill: #fff; stroke: rgba(4,91,93,0.22); stroke-width: 1.4; }
.eco-robot-lower > path,
.eco-robot-upper > path:first-child { stroke-width: 13; }
.eco-robot-lower circle,
.eco-robot-upper circle { fill: #fff; stroke: var(--emerald); stroke-width: 4; }
.eco-robot-upper > path:nth-of-type(2) { stroke-width: 8; }
.eco-gripper { stroke-width: 3 !important; }
.eco-workpiece rect { fill: rgba(198,245,221,0.72); stroke: var(--emerald); stroke-width: 1.4; }
.eco-workpiece path { fill: none; stroke: rgba(4,91,93,0.45); stroke-linecap: round; stroke-width: 1.5; }
.eco-scan-line { fill: none; stroke: var(--blue); stroke-linecap: round; stroke-width: 2; }
.eco-control-signal { stroke-width: 1.8; stroke-dasharray: 5 8; opacity: 0.62; }
.eco-control-node { fill: var(--signal); }

/* Foundation problem-to-deployment path */
.eco-problem-node > path:first-child,
.eco-deployment-target circle {
  fill: rgba(255,255,255,0.92);
  stroke: rgba(4,91,93,0.22);
  stroke-width: 1.4;
}

.eco-problem-node > path:last-child,
.eco-deployment-target path,
.eco-program-route {
  fill: none;
  stroke: url(#eco-programs-gradient);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.eco-program-route { stroke-dasharray: 7 9; }
.eco-deployment-target circle:nth-child(2) { stroke: rgba(6,162,105,0.48); }
.eco-deployment-target circle:nth-child(3) { fill: var(--signal); stroke: none; }
.eco-deployment-target path { stroke-width: 3; }
.eco-program-packet { fill: var(--blue); }

@media (max-width: 720px) {
  .ecosystem-visual { padding: 0.45rem; }
  .ecosystem-visual .ecosystem-diagram { max-height: 146px; }
}

/* Component-specific strokes for diagrams whose gradients are scoped to
   another inline SVG. */
.eco-prototype rect:not(:first-child) {
  fill: rgba(198,245,221,0.42);
  stroke: rgba(6,162,105,0.32);
  stroke-width: 1.4;
}
.eco-inspection path:not(.eco-scan-line) {
  fill: none;
  stroke: rgba(4,91,93,0.42);
  stroke-linecap: round;
  stroke-width: 1.6;
}

/* Ensure legacy symbol-layout rules cannot constrain the new role-specific SVGs. */
.work-symbol.ecosystem-visual {
  grid-template-columns: minmax(0, 1fr);
  grid-auto-flow: row;
  gap: 0;
}