/* ==========================================================================
   Nexus4AI — Concept B design system
   One identity, multiple frontiers. Tokens → base → components → pages → responsive → motion.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* Brand board v1.0 — primary palette */
  --navy: #0B1F33;
  --blue: #0EA5E9;   /* Human Health & Medicine */
  --green: #22C55E;  /* Plant & Environmental Biology */
  --purple: #8B5CF6; /* Molecular & Protein Science */
  --teal: #14B8A6;   /* Computational Science & AI */
  --coral: #F97316;  /* Chemistry & Compounds */
  /* Secondary palette */
  --white: #FFFFFF;
  --paper: #F6F9FC;  /* off-white */
  --line: #E5EAF0;   /* gray 100 */
  --muted: #64748B;  /* gray 600 — metadata only */
  --ink: var(--navy);
  --ink-soft: #4B5E72; /* body copy on paper/white: ≥ 6:1 */
  /* Context */
  --accent: var(--blue);
  --accent-text: color-mix(in srgb, var(--accent) 52%, var(--navy)); /* accent used as small text: ≥ 4.5:1 */
  --accent-display: color-mix(in srgb, var(--accent) 84%, var(--navy)); /* accent used as large display text: ≥ 3:1 */
  --brand-four: var(--navy);
  /* Type */
  --font: Inter, "Inter var", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-display: clamp(50px, 6.4vw, 100px);
  --fs-h1: clamp(42px, 5.6vw, 84px);
  --fs-h2: clamp(34px, 4.2vw, 62px);
  --fs-h3: clamp(20px, 1.6vw, 24px);
  --fs-lede: clamp(18px, 1.55vw, 23px);
  --fs-body: 17px;
  --fs-small: 14px;
  --fs-meta: 11px;
  /* Space & layout */
  --gutter: clamp(20px, 3vw, 40px);
  --page: min(100% - 2 * var(--gutter), 1360px);
  --section: clamp(72px, 8vw, 120px);
  --radius: 10px;
  --radius-sm: 6px;
  --header-h: 76px;
  --ease: cubic-bezier(.22, .8, .22, 1);
  --shadow-hover: 0 18px 40px -24px rgba(11, 31, 51, .35);
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 var(--fs-body)/1.55 var(--font); font-feature-settings: "ss01", "cv11"; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
body.menu-open { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { font-weight: 680; letter-spacing: -.035em; text-wrap: balance; }
p { text-wrap: pretty; }
.shell { width: var(--page); margin-inline: auto; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; z-index: 100; left: 12px; top: -60px; padding: 10px 14px; background: var(--navy); color: white; border-radius: var(--radius-sm); }
.skip:focus { top: 12px; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 70%, var(--navy)); outline-offset: 3px; border-radius: 2px; }
.i18n-pending #site { visibility: hidden; animation: i18n-reveal 0s 1.2s forwards; }
@keyframes i18n-reveal { to { visibility: visible; } }

/* ---------- 3. Typography components ---------- */
.eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; color: var(--muted); font: 600 var(--fs-meta)/1.3 var(--mono); letter-spacing: .22em; text-transform: uppercase; }
/* Connection motif: a line ending in a node — used wherever a section begins. */
.eyebrow::before { content: ""; flex: none; width: 28px; height: 2px; background: linear-gradient(90deg, var(--accent) 0 22px, transparent 22px), radial-gradient(circle, var(--accent) 0 2.5px, transparent 3px) right center / 6px 6px no-repeat; }
.accent-text { color: var(--accent-display); }
.hero-lede { color: var(--ink-soft); font-size: var(--fs-lede); line-height: 1.4; letter-spacing: -.012em; max-width: 36ch; }
.large-copy { color: var(--ink-soft); font-size: var(--fs-lede); line-height: 1.45; letter-spacing: -.01em; }
.section-intro { color: var(--ink-soft); font-size: var(--fs-body); max-width: 44ch; }
.text-link { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 600; font-size: 15px; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .25s var(--ease); padding-bottom: 2px; }
.text-link:hover, .text-link:focus-visible { background-size: 100% 1px; }

/* ---------- 4. Buttons ---------- */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; padding: 0 22px; border: 1px solid var(--navy); border-radius: 999px; background: var(--navy); color: white; font-size: 15px; font-weight: 550; text-decoration: none; cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease); }
.button span { transition: transform .2s var(--ease); }
.button:hover span, .button:focus-visible span { transform: translateX(3px); }
.button:hover { background: #16324d; border-color: #16324d; }
.button--ghost { background: transparent; color: var(--navy); border-color: color-mix(in srgb, var(--navy) 28%, transparent); }
.button--ghost:hover { background: white; border-color: var(--navy); color: var(--navy); }
.button--light { background: white; color: var(--navy); border-color: white; }
.button--light:hover { background: color-mix(in srgb, var(--accent) 14%, white); border-color: color-mix(in srgb, var(--accent) 14%, white); color: var(--navy); }
.button--outline-light { background: transparent; color: white; border-color: rgba(255, 255, 255, .45); }
.button--outline-light:hover { background: rgba(255, 255, 255, .08); border-color: white; color: white; }
.button--small { min-height: 42px; padding: 0 18px; font-size: 14px; }
.arrow-btn { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--c, var(--accent)) 55%, white); border-radius: 50%; color: color-mix(in srgb, var(--c, var(--accent)) 52%, var(--navy)); transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease); }

/* ---------- 5. Brand lockup (controlled component) ---------- */
.brand { display: inline-grid; justify-items: stretch; color: var(--navy); text-decoration: none; line-height: 1; }
.brand-word { font-size: var(--brand-size, 26px); font-weight: 800; letter-spacing: -.058em; line-height: .86; white-space: nowrap; }
.brand-four { color: var(--brand-four); transition: color .4s var(--ease); }
/* SCIENCE · PEOPLE · IMPACT spans exactly the wordmark width, as in the brand board. */
.brand-sig { display: flex; justify-content: space-between; margin-top: calc(var(--brand-size, 26px) * .3); font-size: max(9px, calc(var(--brand-size, 26px) * .175)); font-weight: 500; letter-spacing: .34em; line-height: 1; text-transform: uppercase; color: var(--navy); }
.brand-sig span:last-child { margin-right: -.34em; }
.brand--compact { --brand-size: 25px; min-height: 44px; align-content: center; }
/* Footer signature: a quiet sign-off (not a second hero). Signature text never drops below 8px. */
.brand--full { --brand-size: clamp(38px, 2.9vw, 42px); }
.brand--full .brand-sig { margin-top: calc(var(--brand-size) * .32); font-size: max(8px, calc(var(--brand-size) * .2)); letter-spacing: .3em; }
.brand--full .brand-sig span:last-child { margin-right: -.3em; }

/* ---------- 6. Header & navigation ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--paper) 88%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--navy) 8%, transparent); backdrop-filter: saturate(1.4) blur(16px); -webkit-backdrop-filter: saturate(1.4) blur(16px); }
.nav { min-height: var(--header-h); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 32px; }
.main-nav { justify-self: center; display: flex; align-items: center; gap: 30px; }
.main-nav > a, .nav-disclosure { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0; border: 0; background: none; color: #33485d; font-size: 14.5px; text-decoration: none; cursor: pointer; }
.main-nav > a::after, .nav-disclosure::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 6px; height: 2px; background: var(--accent); transition: right .22s var(--ease); }
.main-nav > a:hover, .nav-disclosure:hover { color: var(--navy); }
.main-nav > a:hover::after, .main-nav > a[aria-current="page"]::after, .nav-disclosure.is-active::after { right: 0; }
.main-nav > a[aria-current="page"], .nav-disclosure.is-active { color: var(--navy); font-weight: 600; }
.nav-disclosure svg { transition: transform .2s var(--ease); }
.nav-disclosure[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-group { position: relative; }
.nav-panel { position: absolute; top: calc(100% + 10px); left: 50%; width: 330px; padding: 10px; display: none; background: white; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 24px 60px -30px rgba(11, 31, 51, .35); transform: translateX(-50%); }
.nav-disclosure[aria-expanded="true"] + .nav-panel { display: grid; }
.nav-panel a { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 12px; border-radius: var(--radius-sm); color: var(--navy); font-size: 14.5px; text-decoration: none; }
.nav-panel a:hover, .nav-panel a:focus-visible { background: color-mix(in srgb, var(--c) 9%, white); }
.nav-panel i, .site-footer li i, .filter-bar i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.nav-contact { display: none !important; }
.nav-tools { display: flex; align-items: center; gap: 10px; }
.icon-btn, .menu-btn { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: white; color: var(--navy); cursor: pointer; transition: border-color .2s var(--ease); }
.icon-btn:hover, .menu-btn:hover { border-color: var(--navy); }
.menu-btn { display: none; }
.lang-select { min-height: 44px; padding: 0 4px; border: 0; background: transparent; color: var(--navy); font-size: 13.5px; font-weight: 550; cursor: pointer; }

/* ---------- 7. Sections ---------- */
.section { padding-block: var(--section); border-bottom: 1px solid var(--line); }
.section h2 { font-size: var(--fs-h2); line-height: 1.02; }
.section-head { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(260px, .6fr); gap: 48px; align-items: end; margin-bottom: clamp(40px, 5vw, 64px); }
.section-head--link { align-items: end; }
.section-head--link > .text-link { justify-self: end; }

/* ---------- 8. Heroes ---------- */
.page-hero { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, .55fr); gap: 64px; align-items: end; padding-block: clamp(72px, 9vw, 128px) clamp(48px, 5vw, 72px); border-bottom: 1px solid var(--line); }
.page-hero h1 { font-size: var(--fs-h1); line-height: .96; letter-spacing: -.055em; font-weight: 700; }
.page-hero-side p { color: var(--ink-soft); font-size: 18px; max-width: 34ch; }

/* Media hero — the "clean & focused" composition shared by Home and the frontier pages. */
.media-hero { position: relative; min-height: min(calc(100svh - var(--header-h)), 820px); display: grid; align-items: center; overflow: hidden; border-bottom: 1px solid var(--line); isolation: isolate; }
.media-hero-inner { position: relative; z-index: 2; padding-block: clamp(64px, 8vw, 120px); }
.media-hero-copy { max-width: min(660px, 47%); }
.media-hero h1 { margin-bottom: 28px; font-size: var(--fs-display); line-height: .9; letter-spacing: -.065em; font-weight: 720; }
.media-hero .hero-lede { margin-bottom: 36px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.media-hero-visual { position: absolute; z-index: 1; inset: 0 0 0 auto; width: 60%; touch-action: pan-y; }
/* The fade lives on a static wrapper; the image layers inside can drift and crossfade without moving the mask. */
.hero-drift { position: absolute; inset: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.55) 16%, #000 36%); mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.55) 16%, #000 36%); }
.hero-layers { position: absolute; inset: 0; transform: scale(1.02); transform-origin: 62% 48%; animation: hero-breathe 22s ease-in-out infinite; will-change: transform; }
.hero-layers .hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-layers .hero-image:not(.is-current) { opacity: 0; transition: opacity .65s var(--ease); }
.hero-layers .hero-image.is-entering { opacity: 1; }
.media-hero.is-offscreen .hero-layers { animation-play-state: paused; }
/* Scientific micro-motion: a slow, shallow drift — the living system breathes; it never spins or flashes. */
/* Perceptible within a few seconds, never fast: ~7% slow zoom with a 2% drift over 11 s, then back. */
@keyframes hero-breathe { 0%, 100% { transform: scale(1.03) translate3d(0, 0, 0); } 50% { transform: scale(1.1) translate3d(-2%, -1.4%, 0); } }
.hero-switch { position: absolute; z-index: 3; right: var(--gutter); bottom: 28px; display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .92); box-shadow: 0 10px 30px -18px rgba(11, 31, 51, .5); }
.hero-step { width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--navy); font-size: 16px; cursor: pointer; transition: background .2s var(--ease); }
.hero-step:hover { background: color-mix(in srgb, var(--c) 14%, white); }
.hero-dots { display: flex; }
.hero-dot { width: 24px; height: 40px; display: grid; place-items: center; padding: 0; border: 0; background: transparent; cursor: pointer; }
.hero-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: color-mix(in srgb, var(--c) 45%, white); transition: transform .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease); }
.hero-dot:hover::before { background: var(--c); }
.hero-dot[aria-pressed="true"]::before { background: var(--c); transform: scale(1.25); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent); }
.hero-current { min-width: 132px; padding-inline: 6px 2px; color: var(--navy); font-size: 13.5px; font-weight: 600; text-align: center; white-space: nowrap; }

/* ---------- 9. Home: intersections chain ---------- */
.intersections .section-head { margin-bottom: 72px; }
.chain { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-bottom: 48px; border-top: 1px solid var(--line); }
.chain li { position: relative; padding: 32px 24px 0 0; }
.chain li::before { content: ""; position: absolute; top: -6px; left: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 2px var(--navy); }
.chain li:last-child::before { background: var(--accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 18%, transparent); }
.chain h3 { margin-bottom: 8px; font-size: var(--fs-h3); }
.chain p { color: var(--ink-soft); font-size: 15px; line-height: 1.45; max-width: 22ch; }
.chain-track { top: -1px; left: 0; right: 0; height: 2px; }

/* ---------- 10. Frontier tiles ---------- */
.frontier-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.frontier-tile { height: 100%; display: flex; flex-direction: column; overflow: hidden; background: white; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); text-decoration: none; transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease); }
.frontier-tile-media { aspect-ratio: 4 / 3.4; overflow: hidden; background: color-mix(in srgb, var(--c) 20%, white); }
.frontier-tile-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.frontier-tile-body { position: relative; flex: 1; display: grid; grid-template-rows: auto 1fr auto; gap: 10px; padding: 22px 22px 20px; }
.frontier-tile h3 { color: color-mix(in srgb, var(--c) 52%, var(--navy)); font-size: 19px; line-height: 1.15; letter-spacing: -.02em; }
.frontier-tile h3::after { content: ""; display: block; width: 26px; height: 3px; margin-top: 12px; border-radius: 2px; background: var(--c); }
.frontier-tile-line { color: var(--ink-soft); font-size: 14.5px; }
.frontier-tile .arrow-btn { justify-self: end; }
.frontier-tile:hover, .frontier-tile:focus-visible { transform: translateY(-4px); box-shadow: var(--shadow-hover); border-color: color-mix(in srgb, var(--c) 35%, var(--line)); }
.frontier-tile:hover img { transform: scale(1.04); }
.frontier-tile:hover .arrow-btn, .project-card a:hover .arrow-btn, .project-card a:focus-visible .arrow-btn { background: var(--c); border-color: var(--c); color: white; transform: translateX(2px); }

/* ---------- 11. Project cards ---------- */
.projects-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.projects-grid--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.project-card a { height: 100%; display: flex; flex-direction: column; overflow: hidden; background: white; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); text-decoration: none; transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease); }
.project-card a:hover, .project-card a:focus-visible { transform: translateY(-4px); box-shadow: var(--shadow-hover); border-color: color-mix(in srgb, var(--c) 35%, var(--line)); }
.project-media { aspect-ratio: 2.15 / 1; overflow: hidden; background: color-mix(in srgb, var(--c) 18%, white); }
.project-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.project-card a:hover .project-media img { transform: scale(1.035); }
.project-body { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 24px 24px 22px; }
.project-category { color: color-mix(in srgb, var(--c) 52%, var(--navy)); font: 600 var(--fs-meta)/1.3 var(--mono); letter-spacing: .18em; text-transform: uppercase; }
.project-card .project-title { font-size: 22px; line-height: 1.15; letter-spacing: -.025em; }
.project-summary { color: var(--ink-soft); font-size: 15px; line-height: 1.5; }
.project-meta { margin-top: auto; padding-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 13px; }
/* A single related project reads as one wide horizontal card instead of half an empty grid. */
@media (min-width: 861px) {
  .projects-grid--compact > .project-card:only-child { grid-column: 1 / -1; }
  .projects-grid--compact > .project-card:only-child a { flex-direction: row; }
  .projects-grid--compact > .project-card:only-child .project-media { flex: 0 0 52%; aspect-ratio: auto; min-height: 300px; }
  .projects-grid--compact > .project-card:only-child .project-body { padding: 36px 40px; justify-content: center; }
  .projects-grid--compact > .project-card:only-child .project-meta { margin-top: 24px; }
}
.filter-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 40px; }
.filter-bar button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; background: white; color: var(--navy); font-size: 14px; cursor: pointer; transition: border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease); }
.filter-bar button:hover { border-color: var(--navy); }
.filter-bar button.active { background: var(--navy); border-color: var(--navy); color: white; }
.empty-state { margin-top: 20px; padding: 48px; background: white; border-radius: var(--radius); text-align: center; color: var(--ink-soft); }

/* ---------- 12. Project detail ---------- */
.project-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(40px, 6vw, 88px); align-items: center; padding-block: clamp(48px, 6vw, 96px); border-bottom: 1px solid var(--line); }
.back-link { display: inline-flex; align-items: center; min-height: 44px; gap: 8px; margin-bottom: 32px; color: var(--ink-soft); font-size: 15px; text-decoration: none; }
.back-link:hover span { text-decoration: underline; text-underline-offset: 4px; }
.project-hero .eyebrow { color: color-mix(in srgb, var(--c) 52%, var(--navy)); }
.project-hero .eyebrow::before { --accent: var(--c); }
.project-hero h1 { margin-bottom: 24px; font-size: var(--fs-h1); line-height: .96; letter-spacing: -.055em; font-weight: 700; }
.project-facts { display: grid; grid-template-columns: repeat(2, minmax(0, auto)); justify-content: start; gap: 12px 48px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); }
.project-facts dt { margin-bottom: 4px; color: var(--muted); font: 600 var(--fs-meta)/1.3 var(--mono); letter-spacing: .18em; text-transform: uppercase; }
.project-facts dd { font-size: 15.5px; }
.project-facts a { display: inline-block; padding-block: 4px; color: color-mix(in srgb, var(--c) 52%, var(--navy)); text-underline-offset: 4px; }
.project-figure { overflow: hidden; border-radius: var(--radius); aspect-ratio: 4 / 3; background: color-mix(in srgb, var(--c) 18%, white); }
.project-figure img { width: 100%; height: 100%; object-fit: cover; }
.project-story { display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; }
.project-story-head { max-width: 900px; }
.project-story-head h2 { margin-bottom: 24px; }
.story-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.story-grid li { padding: 28px 28px 8px 0; }
.story-grid li + li { padding-left: 28px; border-left: 1px solid var(--line); }
.story-grid span { color: color-mix(in srgb, var(--c, var(--accent)) 52%, var(--navy)); font: 600 12px/1 var(--mono); letter-spacing: .12em; }
.story-grid h3 { margin: 40px 0 10px; font-size: var(--fs-h3); }
.story-grid p { color: var(--ink-soft); font-size: 15px; }

/* ---------- 13. Frontier focus / topics ---------- */
.split-feature { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(48px, 7vw, 110px); align-items: start; }
.split-feature h2 { margin-bottom: 26px; }
.topic-list { border-top: 1px solid var(--line); }
.topic-list li { display: flex; align-items: center; gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--line); font-size: 21px; font-weight: 550; letter-spacing: -.015em; }
.topic-list li::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--accent); }
.coming-card { padding: 56px; border: 1px solid var(--line); border-radius: var(--radius); background: white; }
.coming-card h3 { margin-bottom: 8px; }
.coming-card p { color: var(--ink-soft); }

/* ---------- 14. Collaborations / corporate / stats ---------- */
.collab-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.collab-grid li { padding: 34px 32px 40px; background: white; border: 1px solid var(--line); border-radius: var(--radius); }
.collab-grid li::before { content: ""; display: block; width: 26px; height: 3px; margin-bottom: 56px; border-radius: 2px; background: var(--accent); }
.collab-grid h3 { margin-bottom: 12px; font-size: var(--fs-h3); }
.collab-grid p { color: var(--ink-soft); font-size: 15.5px; }
.collab-flow { border-top: 1px solid var(--line); }
.collab-flow li { display: grid; grid-template-columns: 52px 1fr; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--line); font-size: 20px; letter-spacing: -.015em; }
.collab-flow span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--accent); color: var(--accent-text); font: 600 12px/1 var(--mono); }
.stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.stat-grid article { display: grid; align-content: start; gap: 12px; padding: 44px 40px; background: white; }
.stat-grid strong { color: var(--accent-display); font-size: clamp(40px, 4.4vw, 64px); font-weight: 680; letter-spacing: -.05em; line-height: 1; }
.stat-grid span { color: var(--ink-soft); max-width: 26ch; }
.corporate-hero { min-height: min(calc(100svh - var(--header-h)), 760px); display: grid; align-items: center; padding-block: 96px; background: var(--navy); color: white; }
.corporate-hero .eyebrow { color: #b8c8d8; }
.corporate-hero h1 { max-width: 16ch; margin-bottom: 28px; font-size: var(--fs-display); line-height: .92; letter-spacing: -.06em; font-weight: 720; }
.corporate-hero h1 span { color: #7fd0f5; }
.corporate-hero .hero-lede { margin-bottom: 36px; color: #c4d3e1; }

/* ---------- 15. Invitation (page ending system) ---------- */
.invite-section { padding-block: clamp(56px, 7vw, 104px); }
.invite { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: clamp(40px, 6vw, 96px); padding: clamp(40px, 6vw, 80px); overflow: hidden; border-radius: calc(var(--radius) + 4px); background: var(--navy); color: white; }
.invite .eyebrow { grid-column: 1 / -1; color: #b8c8d8; }
.invite h2 { font-size: clamp(32px, 3.8vw, 56px); line-height: 1.02; letter-spacing: -.045em; font-weight: 680; }
.invite-body { display: grid; align-content: end; gap: 28px; }
.invite-body p { color: #c4d3e1; font-size: 17.5px; max-width: 44ch; }
.invite-actions { display: flex; flex-wrap: wrap; gap: 12px; }
/* Five frontier nodes lead to an open node: the visitor as the next connection. */
.invite-net { position: absolute; top: clamp(40px, 6vw, 80px); right: clamp(40px, 6vw, 80px); display: flex; align-items: center; gap: 22px; }
.invite-net::before { content: ""; position: absolute; left: 4px; right: 12px; top: 50%; height: 1px; background: rgba(255, 255, 255, .22); }
.invite-net i { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.invite-net b { position: relative; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--accent); background: var(--navy); }

/* ---------- 16. Contact ---------- */
.contact-layout { display: grid; grid-template-columns: minmax(0, .5fr) minmax(0, 1.5fr); gap: clamp(40px, 6vw, 88px); align-items: start; }
.contact-aside ol { margin: 28px 0; border-top: 1px solid var(--line); }
.contact-aside li { display: grid; grid-template-columns: 44px 1fr; gap: 8px; padding: 18px 0; border-bottom: 1px solid var(--line); color: var(--ink-soft); font-size: 15.5px; }
.contact-aside li span { padding-top: 4px; color: var(--accent-text); font: 600 12px/1 var(--mono); }
.contact-note { padding: 18px 20px; border-left: 3px solid var(--accent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: white; color: var(--ink-soft); font-size: 14px; }
.contact-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 28px; padding: clamp(24px, 4vw, 48px); background: white; border: 1px solid var(--line); border-radius: var(--radius); }
.form-field { display: grid; gap: 8px; min-width: 0; border: 0; margin: 0; padding: 0; }
.form-field--wide, .form-actions, .form-success, .form-errors, .contact-context { grid-column: 1 / -1; }
.form-field { align-content: start; }
.form-field > label, .form-field > legend, .form-field > .label { padding: 0; color: var(--navy); font-size: 15px; font-weight: 600; }
.optional { color: var(--muted); font-weight: 400; }
.form-field input:not([type="radio"]), .form-field select, .form-field textarea { width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid #b9c6d3; border-radius: var(--radius-sm); background: white; color: var(--navy); font-size: 16px; transition: border-color .15s var(--ease), box-shadow .15s var(--ease); }
.form-field textarea { resize: vertical; min-height: 150px; line-height: 1.5; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: none; border-color: var(--accent-text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.field-hint { color: var(--muted); font-size: 13.5px; }
.field-error { display: none; color: #B42318; font-size: 13.5px; font-weight: 500; }
.has-error > .field-error { display: block; }
.form-field.has-error > input:not([type="radio"]), .form-field.has-error > select, .form-field.has-error > textarea { border-color: #B42318; box-shadow: inset 0 0 0 1px #B42318; }
.reason-group legend { margin-bottom: 12px; }
.reason-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.reason { position: relative; display: block; cursor: pointer; }
.reason input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.reason > span { height: 100%; display: grid; align-content: start; gap: 4px; padding: 14px 16px 14px 42px; border: 1px solid #c9d4df; border-radius: var(--radius-sm); background: white; transition: border-color .15s var(--ease), background .15s var(--ease), box-shadow .15s var(--ease); }
.reason > span::before { content: ""; position: absolute; left: 16px; top: 17px; width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #7b8da0; background: white; }
.reason strong { font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.reason small { color: var(--ink-soft); font-size: 13px; line-height: 1.4; }
.reason:hover > span { border-color: var(--navy); }
.reason input:checked + span { border-color: var(--accent-text); background: color-mix(in srgb, var(--accent) 7%, white); box-shadow: inset 0 0 0 1px var(--accent-text); }
.reason input:checked + span::before { box-shadow: inset 0 0 0 5px var(--accent-text); }
.reason input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--accent) 70%, var(--navy)); outline-offset: 2px; }
.has-error .reason > span { border-color: #d98a84; }
.form-actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px 24px; padding-top: 8px; }
.form-errors { padding: 18px 22px; border: 1px solid #f1b8b2; border-left: 4px solid #B42318; border-radius: var(--radius-sm); background: #FEF3F2; color: #7a1a12; font-size: 14.5px; }
.form-errors ul { margin-top: 8px; display: grid; gap: 4px; list-style: disc; padding-left: 20px; }
.form-errors a { color: inherit; }
.form-success { padding: 22px 24px; border-left: 4px solid #15803d; border-radius: var(--radius-sm); background: #f0fdf4; }
.form-success p { margin-top: 6px; color: var(--ink-soft); }
.contact-context { padding: 14px 18px; border-left: 3px solid var(--accent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--paper); color: var(--navy); font-size: 15px; }

/* ---------- 17. Footer ---------- */
.site-footer { padding-block: clamp(64px, 7vw, 96px) 32px; background: white; border-top: 1px solid var(--line); }
.footer-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 64px; align-items: start; padding-bottom: 48px; }
.footer-brand p { max-width: 32ch; margin-top: 22px; color: var(--ink-soft); font-size: 14.5px; line-height: 1.5; }
.footer-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.footer-title { margin-bottom: 16px; color: var(--muted); font: 600 var(--fs-meta)/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; }
.footer-nav ul { display: grid; gap: 4px; }
.footer-nav a { display: inline-flex; align-items: center; gap: 10px; min-height: 32px; color: var(--navy); font-size: 15px; text-decoration: none; }
.footer-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13.5px; }

/* ---------- 18. Search ---------- */
.search-dialog { width: min(880px, calc(100% - 24px)); max-width: none; padding: 0; border: 0; border-radius: var(--radius); background: transparent; }
.search-dialog::backdrop { background: rgba(7, 23, 37, .7); backdrop-filter: blur(6px); }
.search-panel { position: relative; padding: clamp(28px, 5vw, 52px); background: var(--paper); border-radius: var(--radius); }
.search-close { position: absolute; right: 18px; top: 18px; }
.search-label { display: block; margin-bottom: 14px; font-size: 20px; font-weight: 600; }
#site-search { width: 100%; min-height: 56px; padding: 0 18px; border: 1px solid #b9c6d3; border-radius: var(--radius-sm); background: white; font-size: 18px; }
.search-results { display: grid; margin-top: 18px; }
.search-results a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 4px; border-bottom: 1px solid var(--line); text-decoration: none; }
.search-results span { display: grid; gap: 3px; }
.search-results small { color: var(--ink-soft); }
.search-hint { margin-top: 20px; color: var(--muted); font: 600 var(--fs-meta)/1 var(--mono); letter-spacing: .13em; text-transform: uppercase; }
.no-results { padding: 16px 4px; color: var(--ink-soft); }

/* ---------- 19. What we do: computational discovery layer + value flow (from Baseline A, retained) ---------- */
.discovery { display: grid; grid-template-columns: minmax(0,.68fr) minmax(0,1.32fr); gap: 40px; align-items: center; padding-block: 104px 110px; }
.discovery-copy { max-width: 560px; }
.discovery-copy h2 { margin-bottom: 30px; }
.discovery-copy .large-copy { margin: 0 0 36px; font-size: clamp(18px,1.5vw,22px); }
.dl { position: relative; }
.dl-figure { position: relative; aspect-ratio: 820 / 480; container-type: inline-size; }
.dl-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dl-orbit { fill: none; stroke: #cddfea; stroke-width: 1; }
.dl-orbit--outer { stroke: #dbe7ef; stroke-dasharray: 2 6; }
.dl-spoke { stroke: var(--c); stroke-opacity: .42; stroke-width: 1.2; stroke-dasharray: 1; }
.dl-leader { stroke: var(--c); stroke-opacity: .6; fill: var(--c); }
.dl-pulse { fill: var(--c); opacity: 0; }
.dl-node { transform-box: fill-box; transform-origin: center; }
.dl-core { position: absolute; left: 50%; top: 47.5%; transform: translate(-50%,-50%); display: grid; justify-items: center; gap: 10px; text-align: center; pointer-events: none; }
.dl-logo { color: var(--navy); font-size: clamp(18px,3.6cqw,30px); font-weight: 800; letter-spacing: -.055em; line-height: 1; }
.dl-words { display: grid; color: #33495e; font: 600 clamp(8.5px,1.25cqw,10.5px)/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .2em; text-transform: uppercase; }
.dl-labels { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.dl-label { position: absolute; color: var(--ink-soft); font-size: 14px; line-height: 1.4; }
.dl-label--left { text-align: right; }
.dl-label h3 { text-wrap: balance; margin: 0 0 5px; color: color-mix(in srgb, var(--c) 52%, var(--navy)); font-size: 15.5px; font-weight: 650; line-height: 1.2; letter-spacing: -.01em; }
.dl-label ul { margin: 0; padding: 0; list-style: none; }

/* Discovery reveal (only when JS motion is allowed; content is visible by default) */
.dl.is-pending:not(.is-in) .dl-orbit:not(.dl-orbit--outer), .dl.is-pending:not(.is-in) .dl-spoke { stroke-dashoffset: 1; }
.dl.is-pending:not(.is-in) .dl-orbit--outer, .dl.is-pending:not(.is-in) .dl-leader, .dl.is-pending:not(.is-in) .dl-core-disc { opacity: 0; }
.dl.is-pending:not(.is-in) .dl-node { opacity: 0; transform: scale(.84); }
.dl.is-pending:not(.is-in) .dl-label { opacity: 0; transform: translateY(6px); }
.dl.is-pending:not(.is-in) .dl-core { opacity: 0; transform: translate(-50%,-50%) scale(.95); }
.dl.is-pending:not(.is-in) .dl-orbit:not(.dl-orbit--outer) { stroke-dasharray: 1; }
.dl.is-in .dl-orbit { stroke-dasharray: 1; transition: stroke-dashoffset 1.4s var(--ease), opacity 1.2s var(--ease); }
.dl.is-in .dl-orbit--outer { stroke-dasharray: 2 6; }
.dl.is-in .dl-node { transition: opacity .7s var(--ease) calc(.4s + var(--i) * .14s), transform .9s var(--ease) calc(.4s + var(--i) * .14s); }
.dl.is-in .dl-label { transition: opacity .7s var(--ease) calc(.5s + var(--i) * .14s), transform .8s var(--ease) calc(.5s + var(--i) * .14s); }
.dl.is-in .dl-leader { transition: opacity .6s var(--ease) calc(.7s + var(--i) * .14s); }
.dl.is-in .dl-spoke { transition: stroke-dashoffset .9s var(--ease) calc(1.15s + var(--i) * .1s); }
.dl.is-in .dl-core-disc, .dl.is-in .dl-core { transition: opacity .9s var(--ease) 1.75s, transform 1s var(--ease) 1.75s; }

/* Value creation flow */
.value-section { padding-top: 132px; }
.value-section .section-head h2 { max-width: 780px; }
.flow { position: relative; padding-top: 46px; }
.flow-steps { display: grid; grid-template-columns: repeat(5,1fr); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.flow-steps > li { position: relative; min-height: 300px; padding: 26px 22px; border-right: 1px solid var(--line); }
.flow-steps > li:first-child { border-left: 1px solid var(--line); }
.flow-steps > li > span { color: var(--accent-text); font: 600 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; }
.flow-steps h3 { margin: 90px 0 12px; font-size: 25px; letter-spacing: -.03em; transition: color .2s var(--ease); }
.flow-steps p { margin: 0; color: var(--ink-soft); font-size: 14px; }
.flow-steps > li::after { content: ""; position: absolute; top: -4px; left: 22px; width: 7px; height: 7px; border-radius: 50%; background: var(--paper); box-shadow: 0 0 0 1.5px var(--accent); transition: background .2s var(--ease); }
.flow-steps > li:hover::after { background: var(--accent); }
.flow-track { position: absolute; z-index: 1; left: 0; right: 0; top: 45px; height: 2px; background: var(--accent); transform-origin: left center; pointer-events: none; }
.flow.is-pending:not(.is-in) .flow-track { transform: scaleX(0); }
.flow.is-pending:not(.is-in) .flow-steps > li > * { opacity: 0; transform: translateY(8px); }
.flow.is-pending:not(.is-in) .flow-steps > li::after { opacity: 0; }
.flow.is-in .flow-track { transition: transform 1.9s cubic-bezier(.45,0,.3,1) .2s; }
.flow.is-in .flow-steps > li > * { transition: opacity .7s var(--ease) calc(.25s + var(--i) * .32s), transform .8s var(--ease) calc(.25s + var(--i) * .32s); }
.flow.is-in .flow-steps > li::after { transition: opacity .4s var(--ease) calc(.2s + var(--i) * .32s); }

/* ---------- 20. Homepage testimonial ---------- */
.testimonial-section { padding-block: clamp(48px, 5vw, 72px); border-top: 1px solid var(--line); }
.home-testimonial { max-width: 46rem; margin: 0 auto; text-align: center; }
.home-testimonial blockquote { margin: 0; }
.home-testimonial blockquote p { margin: 0; color: var(--navy); font-size: clamp(18px, 2.1vw, 22px); font-weight: 500; font-style: italic; line-height: 1.55; letter-spacing: -.015em; text-wrap: pretty; }
.home-testimonial blockquote p::before { content: "“"; }
.home-testimonial blockquote p::after { content: "”"; }
.home-testimonial figcaption { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin-top: 22px; color: var(--ink-soft); font-size: 15px; line-height: 1.35; }
.testimonial-name { color: var(--navy); font-weight: 650; }
.testimonial-affiliation::before { content: "— "; }

/* ---------- 21. Chain reveal (home) ---------- */
.chain .chain-track { top: -1px; left: 0; right: 0; bottom: auto; width: auto; height: 2px; transform-origin: left center; }
.chain.is-pending:not(.is-in) .chain-track { transform: scaleX(0); }
.chain.is-pending:not(.is-in) li > * { opacity: 0; transform: translateY(8px); }
.chain.is-pending:not(.is-in) li::before { opacity: 0; }
.chain.is-in .chain-track { transition: transform 1.8s cubic-bezier(.45, 0, .3, 1) .15s; }
.chain.is-in li > * { transition: opacity .7s var(--ease) calc(.2s + var(--i) * .26s), transform .8s var(--ease) calc(.2s + var(--i) * .26s); }
.chain.is-in li::before { transition: opacity .4s var(--ease) calc(.15s + var(--i) * .26s); }

/* Invitation reveal: the open node (the visitor) resolves last. */

/* ---------- 22. Responsive ---------- */
@media (max-width: 1150px) {
  .main-nav { gap: 22px; }
  .discovery { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .discovery-copy { max-width: 720px; }
  .dl { width: 100%; max-width: 900px; margin-inline: auto; }
  .frontier-tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .frontier-tiles li { grid-column: span 2; }
  .frontier-tiles li:nth-child(n+4) { grid-column: span 3; }
  .frontier-tiles li:nth-child(n+4) .frontier-tile-media { aspect-ratio: 2 / 1; }
  .chain { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 40px; border-top: 0; }
  .chain li { border-top: 1px solid var(--line); }
  .chain .chain-track { display: none; }
  .footer-top { grid-template-columns: minmax(0, 1fr); gap: 48px; }
}
@media (max-width: 1050px) {
  .nav { grid-template-columns: auto 1fr auto; }
  .site-header .nav { position: static; }
  /* The sticky header's backdrop-filter makes it the containing block, so the panel is positioned against the header. */
  .main-nav { position: absolute; z-index: 60; top: 100%; left: 0; right: 0; width: 100%; justify-self: stretch; max-height: calc(100svh - var(--header-h)); overflow: auto; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 12px var(--gutter) 28px; background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: 0 30px 60px -40px rgba(11, 31, 51, .45); }
  .main-nav.open { display: flex; }
  .main-nav > a, .nav-disclosure { width: 100%; min-height: 56px; justify-content: space-between; border-bottom: 1px solid var(--line); font-size: 18px; }
  .main-nav > a::after, .nav-disclosure::after { display: none; }
  .nav-panel { position: static; width: auto; padding: 4px 0 12px; border: 0; box-shadow: none; background: transparent; transform: none; }
  .nav-contact { display: flex !important; }
  .menu-btn { display: grid; }
  .nav-cta { display: none; }
  .page-hero, .split-feature, .project-hero, .contact-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .page-hero { align-items: start; }
  .collab-grid { grid-template-columns: minmax(0, 1fr); }
  .collab-grid li::before { margin-bottom: 28px; }
    .invite { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .reason-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .media-hero { min-height: 0; display: flex; flex-direction: column-reverse; align-items: stretch; }
  .media-hero-visual { position: relative; inset: auto; width: 100%; aspect-ratio: 16 / 10; }
  .media-hero-inner { padding-block: 8px 72px; }
  .media-hero-copy { max-width: 640px; }
  .hero-switch { top: 14px; bottom: auto; right: 12px; }
  .hero-drift { -webkit-mask-image: linear-gradient(0deg, transparent 0, #000 32%); mask-image: linear-gradient(0deg, transparent 0, #000 32%); }
}
@media (max-width: 860px) {
  .flow { padding-top: 0; }
    .flow-steps { grid-template-columns: 1fr; border-top: 0; }
  .flow-steps > li, .flow-steps > li:first-child { min-height: 0; padding: 22px 0 26px 30px; border: 0; border-bottom: 1px solid var(--line); }
  .flow-steps h3 { margin-top: 16px; }
  .flow-steps > li::after { top: 24px; left: -3px; }
  .flow .flow-track { top: 0; bottom: 0; left: 0; right: auto; width: 2px; height: auto; transform-origin: center top; }
  .flow.is-pending:not(.is-in) .flow-track { transform: scaleY(0); }
  .projects-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section-head { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .section-head--link > .text-link { justify-self: start; }
  .story-grid { grid-template-columns: minmax(0, 1fr); }
  .story-grid li, .story-grid li + li { padding: 24px 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .story-grid h3 { margin-top: 16px; }
  .stat-grid { grid-template-columns: minmax(0, 1fr); }
  .footer-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .discovery { padding-block: 80px; }
  .dl-figure { aspect-ratio: 470 / 480; max-width: 440px; margin-inline: auto; }
  .dl-logo { font-size: 20px; }
  .dl-words { font-size: 9.5px; }
  .dl-leader { display: none; }
  .dl-labels { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; margin-top: 28px; }
  .dl-label { position: static; width: auto !important; text-align: left; }
  .dl-label h3 { display: flex; gap: 8px; align-items: baseline; }
  .dl-label h3::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--c); transform: translateY(-1px); }
  .dl-label ul { padding-left: 16px; }
  .value-section { padding-top: 90px; }
}
@media (max-width: 700px) {
  :root { --header-h: 68px; }
  .brand--compact { --brand-size: 23px; }
  .nav { gap: 12px; }
  .nav-tools { gap: 6px; }
  .frontier-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .frontier-tiles li, .frontier-tiles li:nth-child(n+4) { grid-column: auto; }
  .frontier-tiles li:nth-child(n+4) .frontier-tile-media { aspect-ratio: 4 / 3.4; }
  .frontier-tiles li:last-child { grid-column: 1 / -1; }
  .frontier-tiles li:last-child .frontier-tile-media { aspect-ratio: 2 / 1; }
  .frontier-tile-body { padding: 16px 16px 14px; }
  .frontier-tile h3 { font-size: 17px; }
  .frontier-tile-line { font-size: 13.5px; }
  .chain { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
  .projects-grid, .projects-grid--compact { grid-template-columns: minmax(0, 1fr); }
    .contact-form { grid-template-columns: minmax(0, 1fr); }
  .reason-grid { grid-template-columns: minmax(0, 1fr); }
  .form-actions { flex-direction: column; align-items: stretch; }
  .form-actions .button { width: 100%; }
  .invite-net { position: relative; top: auto; right: auto; width: max-content; margin-bottom: 8px; }
  .invite-actions .button { width: 100%; justify-content: space-between; }
  .hero-actions .button { flex: 1 1 auto; }
  .project-facts { grid-template-columns: minmax(0, 1fr); }
  .footer-bottom { flex-direction: column; }
}
@media (max-width: 430px) {
  .chain { grid-template-columns: minmax(0, 1fr); }
  .chain p { max-width: none; }
  .lang-select { font-size: 13px; }
  .hero-current { min-width: 120px; }
}
@media (max-width: 370px) {
  .dl-labels { grid-template-columns: 1fr; }
  .frontier-tiles { grid-template-columns: minmax(0, 1fr); }
  .footer-nav { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 23. Motion preferences & print ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .frontier-tile:hover, .project-card a:hover { transform: none; }
  .frontier-tile:hover img, .project-card a:hover .project-media img { transform: none; }
}
@media print {
  .site-header, .search-dialog, .hero-switch, .invite-net { display: none !important; }
  .media-hero-visual { position: static; width: 100%; }
  body { background: white; }
}

/* ---------- B.1: continuous learning (value flow return path) ---------- */
.flow { padding-top: 0; }
.flow .flow-track { top: -1px; }
.flow-return { position: relative; margin-top: 0; padding: 0 10% 0; }
.flow-return-path { position: relative; display: block; height: 30px; margin-inline: 0; border: 1.5px dashed color-mix(in srgb, var(--accent) 55%, var(--line)); border-top: 0; border-radius: 0 0 28px 28px; }
/* Arrowhead: the loop re-enters the system at its start (Integrate), not at a single step. */
.flow-return-path::before { content: ""; position: absolute; left: -6px; top: -2px; border: 5px solid transparent; border-bottom: 7px solid color-mix(in srgb, var(--accent) 75%, var(--navy)); border-top: 0; }
.flow-return-path i { position: absolute; left: 0; right: 0; bottom: -4.5px; height: 7px; pointer-events: none; animation: learning-signal 7s cubic-bezier(.45, 0, .35, 1) infinite; }
.flow-return-path i::after { content: ""; position: absolute; right: 0; top: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
@keyframes learning-signal { 0% { transform: translateX(0); opacity: 0; } 8% { opacity: 1; } 82% { opacity: 1; } 92%, 100% { transform: translateX(-100%); opacity: 0; } }
.flow.is-pending:not(.is-in) .flow-return { opacity: 0; }
.flow.is-in .flow-return { transition: opacity .9s var(--ease) 2s; }
.flow-return p { max-width: 62ch; margin: 18px auto 0; color: var(--ink-soft); font-size: 15px; text-align: center; }
.flow-return strong { display: block; margin-bottom: 4px; color: var(--accent-text); font: 600 var(--fs-meta)/1.3 var(--mono); letter-spacing: .2em; text-transform: uppercase; }
@media (max-width: 860px) {
  .flow-return { padding: 20px 0 0 30px; }
  .flow-return-path { display: none; }
  .flow-return p { margin: 0; text-align: left; }
  .flow-return strong::before { content: "↺"; margin-right: 8px; font-size: 14px; letter-spacing: 0; }
}

/* ---------- B.1: contact refinements ---------- */
.reason-other { margin-top: 14px; padding: 16px 18px; border-left: 3px solid var(--accent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--paper); }
@media (prefers-reduced-motion: reduce) {
  .hero-layers { animation: none; transform: scale(1.02); }
  .flow-return-path i { display: none; }
}

/* ==========================================================================
   Final refinement round (2026-09-25)
   ========================================================================== */
[hidden] { display: none !important; }

/* Hero selector: the whole circle is the target; dots have hover / focus / active states. */
.hero-step { width: 44px; height: 44px; border: 1px solid var(--line); background: white; transition: background .2s var(--ease), border-color .2s var(--ease), transform .15s var(--ease); }
.hero-step:hover { border-color: color-mix(in srgb, var(--c) 45%, var(--line)); background: color-mix(in srgb, var(--c) 10%, white); }
.hero-step:active { transform: scale(.94); }
.hero-step-icon { display: grid; pointer-events: none; }
.hero-step[data-hero-prev] .hero-step-icon { transform: rotate(180deg); }
.hero-dot:focus-visible { outline: none; }
.hero-dot:focus-visible::before { box-shadow: 0 0 0 3px white, 0 0 0 5px color-mix(in srgb, var(--c) 70%, var(--navy)); }
.hero-dot:active::before { transform: scale(.85); }
.hero-dot:hover::before { transform: scale(1.2); }
.hero-dot[aria-pressed="true"]:hover::before { transform: scale(1.3); }

/* Frontier pages: the frontier colour continues discreetly after the hero (navy/white stay the base). */
.frontier-context .topic-list { border-top-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.frontier-context .topic-list li::before { background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent); }
.frontier-context .split-feature h2::after { content: ""; display: block; width: 42px; height: 3px; margin-top: 22px; border-radius: 2px; background: var(--accent); }
.frontier-context .section-head .text-link { color: var(--accent-text); }
.frontier-context .media-hero .button:hover { background: var(--accent-text); border-color: var(--accent-text); }
.frontier-context .coming-card { border-top: 3px solid var(--accent); }

/* Collaboration models: small scientific flow diagrams instead of flat text boxes. */
.cm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.cm-card { display: flex; flex-direction: column; padding: clamp(24px, 2.6vw, 36px); background: white; border: 1px solid var(--line); border-radius: var(--radius); }
.cm-card .eyebrow { margin-bottom: 18px; }
.cm-card h3 { margin-bottom: 12px; font-size: clamp(21px, 1.8vw, 26px); line-height: 1.12; letter-spacing: -.03em; }
.cm-text { margin-bottom: 32px; color: var(--ink-soft); font-size: 15.5px; }
.cm-diagram { margin-top: auto; padding: 22px 12px 18px; border-radius: var(--radius-sm); background: linear-gradient(180deg, var(--paper), white); border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.cm-sources { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); text-align: center; }
.cm-sources li { display: grid; justify-items: center; gap: 8px; padding-inline: 4px; color: var(--navy); font-size: 13px; font-weight: 600; line-height: 1.25; }
.cm-sources li { grid-template-rows: auto 1fr; }
.cm-sources i { order: 2; width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 16%, transparent); align-self: end; }
.cm-links { display: block; width: 100%; height: 44px; margin-top: 4px; overflow: visible; }
.cm-links path { fill: none; stroke: color-mix(in srgb, var(--c) 55%, var(--line)); stroke-width: 1.4; vector-effect: non-scaling-stroke; stroke-dasharray: 3 5; }
.cm-outcomes { display: grid; justify-items: center; gap: 0; }
.cm-outcomes li { position: relative; padding: 7px 16px; border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line)); border-radius: 999px; background: white; color: var(--navy); font-size: 13.5px; font-weight: 600; }
.cm-outcomes li + li { margin-top: 26px; }
.cm-outcomes li + li::before { content: ""; position: absolute; left: 50%; top: -27px; height: 26px; border-left: 1.5px dashed color-mix(in srgb, var(--accent) 55%, var(--line)); }
.cm-outcomes li:last-child { background: var(--navy); border-color: var(--navy); color: white; box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
/* Motion: the connections are travelled slowly and the outcome node breathes — only while visible. */
.cm-card.is-visible .cm-links path { animation: cm-travel 2.8s linear infinite; }
.cm-card.is-visible .cm-outcomes li:last-child { animation: cm-breathe 4.5s ease-in-out infinite; }
@keyframes cm-travel { to { stroke-dashoffset: -16; } }
@keyframes cm-breathe { 0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); } 50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 10%, transparent); } }

/* Contact: "Other" reason opens smoothly (no jump) and is inert when closed. */
.reason-other-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--ease), opacity .3s var(--ease); opacity: 0; }
.reason-other-wrap.is-open { grid-template-rows: 1fr; opacity: 1; }
.reason-other-wrap > .reason-other { min-height: 0; overflow: hidden; }
.reason-other-wrap:not(.is-open) > .reason-other { margin-top: 0; padding-block: 0; border-left-width: 0; }
.reason-other { transition: margin-top .3s var(--ease), padding .3s var(--ease); }
.form-field input::placeholder { color: #7a8a9b; opacity: 1; }

@media (max-width: 1050px) {
  .cm-grid { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
}
@media (prefers-reduced-motion: reduce) {
  .cm-card.is-visible .cm-links path, .cm-card.is-visible .cm-outcomes li:last-child { animation: none; }
  .reason-other-wrap, .reason-other { transition: none; }
}

/* Form fields share one height so side-by-side inputs and selects align exactly. */
.form-field input:not([type="radio"]), .form-field select { height: 50px; min-height: 50px; }
/* Collaboration diagrams share one height; content starts at the top so the three flows line up. */
.cm-diagram { min-height: 236px; }

/* Leaf Green is the lightest frontier colour: its large display text needs a slightly deeper mix to keep ≥ 3:1. */
:root[data-frontier="plant-environment"] { --accent-display: color-mix(in srgb, var(--accent) 76%, var(--navy)); }

/* Hit-area fix (2026-09-25): the hero copy layer (.media-hero-inner, z-index 2, full shell width and hero height)
   overlapped the frontier switcher inside .media-hero-visual (z-index 1) on shorter viewports and swallowed clicks.
   The layer itself is only a positioning box, so it no longer takes pointer events; its real content still does. */
.media-hero-inner { pointer-events: none; }
.media-hero-copy { pointer-events: auto; }

/* Footer signature (2026-09-25): the tagline is part of the lockup, not a free paragraph.
   The brand column is exactly as wide as NEXUS4AI / SCIENCE PEOPLE IMPACT (contain: inline-size keeps the tagline
   from widening it); the tagline may extend modestly past the lockup so it settles in two lines. */
.footer-brand { display: grid; grid-template-columns: max-content; justify-content: start; align-content: start; }
.footer-brand p { contain: inline-size; width: 132%; max-width: none; margin-top: 18px; font-size: 13.5px; line-height: 1.5; text-wrap: pretty; }

/* Hit-area fix, cause 2 (2026-09-25): the switcher is anchored right and its label had no fixed width, so changing
   frontier resized the pill and slid the left arrow and dots under the cursor (a second click on "the same" arrow
   landed on a dot). The label slot now has a constant width (longest label: 212 px), so the controls never move. */
.hero-current { box-sizing: border-box; width: 222px; min-width: 0; flex: none; }
@media (max-width: 500px) {
  /* Narrow phones: a constant two-line label box, so neither width nor height changes between frontiers. */
  .hero-current { width: 132px; height: 2.4em; display: grid; place-items: center; padding-inline: 2px; white-space: normal; font-size: 12px; line-height: 1.2; }
}
@media (max-width: 380px) {
  /* Small phones (≤380 px): the pill must still fit; arrows stay ≥ 40 px, dots keep their 24 × 40 targets. */
  .hero-switch { right: 8px; }
  .hero-step { width: 40px; height: 40px; }
  .hero-current { width: 116px; font-size: 11.5px; }
}

/* Footer signature, strict geometry (2026-09-25): the block is exactly as wide as the NEXUS4AI wordmark (N → I).
   The brand column is max-content of the wordmark; the tagline is contained (contain: inline-size) and uses 100 % of
   that width, sized so each language wraps into two balanced lines inside N → I. The mark stays subtle (38 px). */
.footer-brand, .brand--full { --brand-size: 38px; }
/* Optical alignment: the "N" has a left side-bearing of ~0.04em, so the signature and the tagline start at the N's ink. */
.footer-brand .brand-sig, .footer-brand p { padding-left: calc(var(--brand-size) * .04); }
.footer-brand p { box-sizing: border-box; width: 100%; margin-top: 14px; font-size: 9.7px; line-height: 1.65; text-wrap: balance; }
:root:lang(en) .footer-brand p, :root:lang(es) .footer-brand p { font-size: 9.1px; } /* EN/ES are ~5 % longer: two balanced lines inside N → I */

/* Frontier hero titles (2026-09-25): the whole frontier name is one conceptual unit and takes the frontier's display
   colour (the same tone already used for the accented expression; Leaf Green keeps its deeper mix for ≥ 3:1). */
.frontier-context .media-hero h1 { color: var(--accent-display); }

/* ---------- Collaborations (2026-09-26): opening + continuous collaboration cycle ---------- */
.page-hero--collab h1 .accent-text { display: block; }
.page-hero-lede { max-width: 52ch; margin-top: 30px; color: var(--ink-soft); font-size: var(--fs-lede); line-height: 1.5; }
.cy-section { padding-block: clamp(72px, 7vw, 104px) var(--section); }
.cy { --link: 56px; --core: 208px; --top: 124px; --fr: calc((100% - 4 * var(--link) - var(--core)) / 4); --line-c: color-mix(in srgb, var(--accent) 42%, var(--line)); position: relative; }
.cy-flow { position: relative; padding-top: var(--top); }
.cy-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) var(--link) minmax(0, 1fr) var(--link) var(--core) var(--link) minmax(0, 1fr) var(--link) minmax(0, 1fr); align-items: stretch; margin: 0; padding: 0; list-style: none; }
.cy-stage { position: relative; display: grid; align-content: start; gap: 18px; padding: 26px 22px 24px; background: white; border: 1px solid var(--line); border-radius: var(--radius); }
.cy-stage::before { content: ""; position: absolute; top: -4px; left: 50%; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: var(--paper); box-shadow: 0 0 0 1.5px var(--c); }
.cy-icon, .cy-picon { display: grid; place-items: center; border-radius: 50%; }
.cy-icon { width: 52px; height: 52px; background: color-mix(in srgb, var(--c) 12%, white); color: color-mix(in srgb, var(--c) 55%, var(--navy)); }
.cy-icon svg, .cy-picon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.cy-stage h3 { margin: 0 0 10px; color: var(--navy); font: 600 var(--fs-meta)/1.3 var(--mono); letter-spacing: .2em; text-transform: uppercase; }
.cy-stage ul { margin: 0; padding: 0; list-style: none; color: var(--ink-soft); font-size: 14.5px; line-height: 1.5; }
.cy-stage li + li { margin-top: 3px; }
/* Links: two opposite tracks with arrowheads; particles are pure CSS and only run while the diagram is visible. */
.cy-link { position: relative; align-self: center; height: 22px; }
.cy-track { position: absolute; left: 7px; right: 7px; height: 1.5px; background: var(--line-c); }
.cy-track--fwd { top: 4px; }
.cy-track--back { bottom: 4px; }
.cy-link--fwd .cy-track--back { opacity: .55; }
.cy-track::after { content: ""; position: absolute; top: -3.25px; border: 4px solid transparent; }
.cy-track--fwd::after { right: -2px; border-right: 0; border-left: 6px solid var(--line-c); }
.cy-track--back::after { left: -2px; border-left: 0; border-right: 6px solid var(--line-c); }
.cy-track i { position: absolute; inset: -2.25px 0; opacity: 0; pointer-events: none; }
.cy-track i::after { content: ""; position: absolute; top: 0; width: 6px; height: 6px; border-radius: 50%; }
.cy-track--fwd i::after { left: -3px; background: var(--from); }
.cy-track--back i::after { right: -3px; background: var(--to); }
/* Nexus4AI: the computational, integrative layer (existing wordmark; no new symbol). */
.cy-core { position: relative; display: grid; place-items: center; }
.cy-disc { position: relative; z-index: 1; width: var(--core); aspect-ratio: 1; display: grid; place-content: center; justify-items: center; gap: 12px; border-radius: 50%; background: white; border: 1px solid #dbe8f1; box-shadow: 0 10px 28px rgba(11, 31, 51, .09); text-align: center; }
.cy-core::before { content: ""; position: absolute; left: 50%; top: 50%; width: calc(var(--core) + 80px); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(14, 165, 233, .12) 45%, rgba(14, 165, 233, 0) 70%); pointer-events: none; }
.cy-logo { color: var(--navy); font-size: 28px; font-weight: 800; letter-spacing: -.055em; line-height: 1; }
.cy-words { display: grid; color: #33495e; font: 600 10.5px/1.6 var(--mono); letter-spacing: .2em; text-transform: uppercase; }
/* Learning loop: Applications → back over the top → Questions (and a second landing on Evidence). Same dashed language and
   travelling dot as "Learning moves through the network". */
.cy-loop { position: absolute; top: 22px; height: calc(var(--top) - 22px); left: calc(var(--fr) / 2); right: calc(var(--fr) / 2); border: 1.5px dashed color-mix(in srgb, var(--accent) 55%, var(--line)); border-bottom: 0; border-radius: 30px 30px 0 0; pointer-events: none; }
.cy-loop::before { content: ""; position: absolute; left: -6px; bottom: 9px; border: 5px solid transparent; border-top: 7px solid color-mix(in srgb, var(--accent) 75%, var(--navy)); border-bottom: 0; }
.cy-loop::after { content: ""; position: absolute; top: -5.5px; left: 72%; border: 4.5px solid transparent; border-left: 0; border-right: 6.5px solid color-mix(in srgb, var(--accent) 75%, var(--navy)); }
.cy-loop i { position: absolute; left: 0; right: 0; top: -4.5px; height: 7px; opacity: 0; pointer-events: none; }
.cy-loop i::after { content: ""; position: absolute; right: 0; top: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
.cy-drop { position: absolute; top: 22px; height: calc(var(--top) - 22px); left: calc(var(--fr) * 1.5 + var(--link)); border-left: 1.5px dashed color-mix(in srgb, var(--accent) 55%, var(--line)); pointer-events: none; }
.cy-drop::after { content: ""; position: absolute; left: -6px; bottom: 9px; border: 5px solid transparent; border-top: 7px solid color-mix(in srgb, var(--accent) 75%, var(--navy)); border-bottom: 0; }
.cy-loop-label { position: absolute; z-index: 1; top: 0; left: 50%; width: min(460px, 42%); transform: translateX(-50%); text-align: center; }
.cy-loop-title { display: inline-block; margin: 14px 0 10px; padding: 0 16px; background: var(--paper); color: var(--accent-text); font: 600 var(--fs-meta)/1.3 var(--mono); letter-spacing: .22em; text-transform: uppercase; }
.cy-loop-label p:not(.cy-loop-title) { margin: 0; color: var(--ink-soft); font-size: 14.5px; line-height: 1.5; }
/* One conceptual link between the whole partner ecosystem and the system (not one arrow per stage). */
.cy-uplink { position: absolute; left: 50%; top: calc(50% + var(--core) / 2 + 10px); bottom: -56px; width: 1.5px; margin-left: -.75px; background: var(--line-c); }
.cy-uplink::before { content: ""; position: absolute; left: -4.25px; top: -2px; border: 5px solid transparent; border-bottom: 7px solid var(--line-c); border-top: 0; }
.cy-uplink i { position: absolute; top: 0; bottom: 0; left: -2.25px; width: 6px; opacity: 0; pointer-events: none; }
.cy-uplink i::after { content: ""; position: absolute; bottom: -3px; left: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--navy); }
/* Ecosystem ↔ Nexus4AI is an exchange: arrowheads at both ends and two particles travelling the same link in opposite directions. */
.cy-uplink::after { content: ""; position: absolute; left: -4.25px; bottom: -2px; border: 5px solid transparent; border-top: 7px solid var(--line-c); border-bottom: 0; }
.cy-uplink i.cy-uplink-down::after { bottom: auto; top: -3px; background: #14B8A6; }
.cy-eco { margin-top: 56px; padding: 28px clamp(18px, 2.4vw, 32px) clamp(18px, 2.4vw, 28px); border: 1px solid var(--line); border-radius: var(--radius); background: color-mix(in srgb, white 45%, var(--paper)); text-align: center; }
.cy-eco-title { margin: 0; color: var(--navy); font: 600 var(--fs-meta)/1.3 var(--mono); letter-spacing: .22em; text-transform: uppercase; }
.cy-eco-intro { margin: 8px 0 22px; color: var(--ink-soft); font-size: 15px; }
.cy-partners { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; background: white; border: 1px solid var(--line); border-radius: var(--radius); text-align: left; }
.cy-partners > li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; padding: 20px 18px; }
.cy-partners > li + li { border-left: 1px solid var(--line); }
.cy-picon { width: 40px; height: 40px; background: #eef3f8; color: var(--navy); }
.cy-picon svg { width: 21px; height: 21px; }
.cy-partners h4 { margin: 2px 0 6px; color: var(--navy); font-size: 13px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; line-height: 1.3; }
.cy-partners p { margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.45; }
/* Reveal (motion allowed only): the same staged language as the discovery layer and value flow. */
.cy.is-pending:not(.is-in) .cy-stage, .cy.is-pending:not(.is-in) .cy-disc { opacity: 0; transform: translateY(8px); }
.cy.is-pending:not(.is-in) .cy-link, .cy.is-pending:not(.is-in) .cy-loop, .cy.is-pending:not(.is-in) .cy-drop, .cy.is-pending:not(.is-in) .cy-loop-label, .cy.is-pending:not(.is-in) .cy-uplink, .cy.is-pending:not(.is-in) .cy-eco { opacity: 0; }
.cy.is-in .cy-stage, .cy.is-in .cy-disc { transition: opacity .7s var(--ease) calc(.2s + var(--i) * .22s), transform .8s var(--ease) calc(.2s + var(--i) * .22s); }
.cy.is-in .cy-link { transition: opacity .6s var(--ease) 1.1s; }
.cy.is-in .cy-loop, .cy.is-in .cy-drop, .cy.is-in .cy-loop-label { transition: opacity .9s var(--ease) 1.6s; }
.cy.is-in .cy-uplink, .cy.is-in .cy-eco { transition: opacity .9s var(--ease) 1.3s; }
@keyframes cy-pass { 0% { transform: translateX(0); opacity: 0; } 3% { opacity: 1; } 17% { opacity: .9; } 20%, 100% { transform: translateX(100%); opacity: 0; } }
@keyframes cy-pass-back { 0% { transform: translateX(0); opacity: 0; } 3% { opacity: 1; } 17% { opacity: .9; } 20%, 100% { transform: translateX(-100%); opacity: 0; } }
@keyframes cy-fall { 0% { transform: translateY(0); opacity: 0; } 4% { opacity: .85; } 24% { opacity: .75; } 30%, 100% { transform: translateY(100%); opacity: 0; } }
@keyframes cy-rise { 0% { transform: translateY(0); opacity: 0; } 4% { opacity: .85; } 24% { opacity: .75; } 30%, 100% { transform: translateY(-100%); opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .cy.is-live .cy-link--both .cy-track--fwd i, .cy.is-live .cy-link--fwd .cy-track--fwd i { animation: cy-pass 8s cubic-bezier(.45, 0, .35, 1) var(--d) infinite; }
  .cy.is-live .cy-link--both .cy-track--back i { animation: cy-pass-back 8s cubic-bezier(.45, 0, .35, 1) var(--d) infinite; }
  .cy.is-live .cy-loop i { animation: learning-signal 7s cubic-bezier(.45, 0, .35, 1) 1s infinite; }
  .cy.is-live .cy-uplink i { animation: cy-rise 9s cubic-bezier(.45, 0, .35, 1) 3.4s infinite; }
  .cy.is-live .cy-uplink i.cy-uplink-down { animation: cy-fall 9s cubic-bezier(.45, 0, .35, 1) 7.9s infinite; }
}
@media (max-width: 1320px) { .cy { --link: 44px; --core: 188px; } .cy-stage { padding: 22px 18px 20px; } .cy-stage ul { font-size: 14px; } .cy-logo { font-size: 25px; } .cy-words { font-size: 9.5px; } }
/* ≤1100: vertical chain; the learning loop becomes a bracket on the right, travelling upwards to Questions. */
@media (max-width: 1100px) {
  .cy { --top: 0px; }
  .cy-loop-label { position: static; width: auto; max-width: 540px; margin: 0 auto 30px; transform: none; }
  .cy-loop-title { margin-top: 0; padding: 0; }
  .cy-row { grid-template-columns: minmax(0, 1fr); max-width: 640px; margin-inline: auto; padding-right: 44px; }
  .cy-stage { grid-template-columns: 52px minmax(0, 1fr); gap: 18px; padding: 20px; }
  .cy-stage::before { display: none; }
  .cy-link { width: 22px; height: 44px; justify-self: center; }
  .cy-track { left: auto; right: auto; top: 6px; bottom: 6px; width: 1.5px; height: auto; }
  .cy-track--fwd { left: 4px; }
  .cy-track--back { right: 4px; }
  .cy-track::after { top: auto; left: -3.25px; right: auto; }
  .cy-track--fwd::after { bottom: -2px; border: 4px solid transparent; border-bottom: 0; border-top: 6px solid var(--line-c); }
  .cy-track--back::after { top: -2px; border: 4px solid transparent; border-top: 0; border-bottom: 6px solid var(--line-c); }
  .cy-track i { inset: 0 -2.25px; }
  .cy-track i::after { left: 0; right: auto; }
  .cy-track--fwd i::after { top: -3px; }
  .cy-track--back i::after { top: auto; bottom: -3px; }
  .cy-core { padding-block: 10px; }
  .cy-uplink, .cy-drop { display: none; }
  .cy-loop { top: 44px; bottom: 44px; height: auto; left: auto; right: max(0px, calc((100% - 640px) / 2)); width: 26px; border: 1.5px dashed color-mix(in srgb, var(--accent) 55%, var(--line)); border-left: 0; border-radius: 0 26px 26px 0; }
  .cy-loop::before { left: -7px; top: -6px; bottom: auto; border: 5px solid transparent; border-left: 0; border-right: 7px solid color-mix(in srgb, var(--accent) 75%, var(--navy)); }
  .cy-loop::after { top: 55%; left: auto; right: -5.5px; border: 4.5px solid transparent; border-top: 0; border-bottom: 6.5px solid color-mix(in srgb, var(--accent) 75%, var(--navy)); }
  .cy-loop i { left: auto; right: -4.5px; top: 0; bottom: 0; width: 7px; height: auto; }
  .cy-loop i::after { top: auto; bottom: 0; right: 0; }
  .cy-eco { margin-top: 40px; }
  .cy-partners { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cy-partners > li + li { border-left: 0; }
  .cy-partners > li { border-top: 1px solid var(--line); }
  .cy-partners > li:nth-child(-n+2) { border-top: 0; }
  .cy-partners > li:nth-child(2n) { border-left: 1px solid var(--line); }
  .cy-partners > li:last-child:nth-child(2n+1) { grid-column: 1 / -1; }
}
@media (max-width: 1100px) and (prefers-reduced-motion: no-preference) {
  .cy.is-live .cy-link--both .cy-track--fwd i, .cy.is-live .cy-link--fwd .cy-track--fwd i { animation-name: cy-pass-y; }
  .cy.is-live .cy-link--both .cy-track--back i { animation-name: cy-pass-y-back; }
  .cy.is-live .cy-loop i { animation-name: cy-rise; animation-duration: 9s; }
}
@keyframes cy-pass-y { 0% { transform: translateY(0); opacity: 0; } 3% { opacity: 1; } 17% { opacity: .9; } 20%, 100% { transform: translateY(100%); opacity: 0; } }
@keyframes cy-pass-y-back { 0% { transform: translateY(0); opacity: 0; } 3% { opacity: 1; } 17% { opacity: .9; } 20%, 100% { transform: translateY(-100%); opacity: 0; } }
@media (max-width: 600px) {
  .cy-row { padding-right: 36px; }
  .cy-stage { grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 18px 16px; }
  .cy-icon { width: 44px; height: 44px; }
  .cy-icon svg { width: 21px; height: 21px; }
  .cy { --core: 172px; }
  .cy-logo { font-size: 23px; }
  .cy-partners { grid-template-columns: minmax(0, 1fr); }
  .cy-partners > li:nth-child(2n) { border-left: 0; }
  .cy-partners > li:nth-child(2) { border-top: 1px solid var(--line); }
  .cy-partners > li:last-child:nth-child(2n+1) { grid-column: auto; }
  .cy-eco { padding-inline: 14px; }
}

/* What we do (2026-09-26): the hero headline reads as a compact typographic block (same content, no hard break).
   EN/PT break "From biological / complexity to testable / discoveries."; ES keeps "De la complejidad biológica /
   a descubrimientos / comprobables." (the EN width would strand "biológica a"). Desktop (two-column) only: below 861 px the original break and wrapping are kept as they were. */
@media (min-width: 861px) {
  .page-hero--wwd h1 { max-width: 9.7em; text-wrap: wrap; }
  :root:lang(es) .page-hero--wwd h1 { max-width: 11em; }
  .page-hero--wwd .wwd-break { display: none; }
}