/* ============================================================
   SATURN — design system
   Typography: FG Futurist Light (display) / Acid Grotesk UltraLight (body)
   Palette: off white ground, near black ink, vertical accents
   ============================================================ */

@font-face {
  font-family: "FG Futurist";
  src: url("../fonts/FG_FuturistTRIAL-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Acid Grotesk";
  src: url("../fonts/FFF-AcidGrotesk-UltraLight-TRIAL.otf") format("opentype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ground */
  --bg: #f4f3f0;
  --bg-raise: #fbfaf8;
  --bg-dim: #ebeae6;

  /* ink */
  --ink: #161616;
  --ink-soft: #4d4d4d;
  --ink-mid: #8a8a8a;
  --ink-faint: #b5b3ae;
  --line: #dedcd6;

  /* vertical accents */
  --ventures: #929292;
  --ventures-deep: #6e6e6e;
  --ecosystem: #92bbd8;
  --ecosystem-deep: #6a94b4;
  --foundation: #baadf5;
  --foundation-deep: #9282d8;

  /* interactive default = neutral grey (blue belongs to ecosystem only) */
  --accent: #929292;
  --accent-deep: #6e6e6e;

  --font-display: "FG Futurist", "Futura", "Avenir Next", "Helvetica Neue", sans-serif;
  --font-body: "Acid Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "SF Mono", "IBM Plex Mono", ui-monospace, Menlo, monospace;

  /* elevation scale: layered so shadows read as real depth, not a blur */
  --sh-1: 0 1px 2px rgba(24, 22, 18, 0.05), 0 2px 8px rgba(24, 22, 18, 0.04);
  --sh-2: 0 2px 6px rgba(24, 22, 18, 0.06), 0 10px 24px rgba(24, 22, 18, 0.07);
  --sh-3: 0 4px 10px rgba(24, 22, 18, 0.06), 0 20px 44px rgba(24, 22, 18, 0.10);
  --sh-4: 0 10px 20px rgba(24, 22, 18, 0.08), 0 36px 80px rgba(24, 22, 18, 0.14);

  /* one vertical rhythm everywhere: section padding and the gap between
     a heading block and the content under it */
  --section-y: clamp(3.5rem, 6vw, 5.5rem);
  --block-gap: clamp(2.5rem, 5vw, 3.5rem);

  --max: 1800px;
  --pad: clamp(1.25rem, 3vw, 2.75rem);
  --nav-h: 88px;
}

/* per page accent override */
body.page-ventures   { --accent: var(--ventures);   --accent-deep: var(--ventures-deep); }
body.page-ecosystem  { --accent: var(--ecosystem);  --accent-deep: var(--ecosystem-deep); }
body.page-foundation { --accent: var(--foundation); --accent-deep: var(--foundation-deep); }

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 200;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--accent); color: var(--ink); }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* ---------- type scale ---------- */
h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: 0.04em;
}
.display-xl { font-size: clamp(2.6rem, 7vw, 5.8rem); }
.display-lg { font-size: clamp(2rem, 4.6vw, 3.6rem); }
.display-md { font-size: clamp(1.5rem, 3vw, 2.3rem); }

.kicker {
  font-family: var(--font-body);
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  color: var(--ink-mid);
  display: block;
  margin-bottom: 1.4rem;
}

/* rotating orbit mark */
.rotor {
  position: absolute;
  top: clamp(3rem, 8vw, 6rem);
  right: var(--pad);
  width: clamp(110px, 12vw, 190px);
  height: auto;
  animation: rotor-spin 26s linear infinite;
  pointer-events: none;
}
@keyframes rotor-spin { to { transform: rotate(360deg); } }
@media (max-width: 980px) { .rotor { display: none; } }
@media (prefers-reduced-motion: reduce) { .rotor { animation: none; } }

.lede {
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  color: var(--ink-soft);
  max-width: 58ch;
}
.accent-word { font-style: italic; color: var(--accent-deep); }
/* headline accents keyed to the vertical each phrase points at */
.ac-ventures   { font-style: italic; color: var(--ventures-deep); }
.ac-ecosystem  { font-style: italic; color: var(--ecosystem-deep); }
.ac-foundation { font-style: italic; color: var(--foundation-deep); }

.mono {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--ink-mid);
}

/* ---------- layout ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wrap { max-width: var(--max); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
section { position: relative; padding: var(--section-y) 0; }
.section-solid { background: var(--bg); }
.section-raise { background: var(--bg); }

/* ---------- nav: floating dark pill ---------- */
.navbar {
  position: fixed; top: 18px; left: 0; right: 0; z-index: 50;
  display: flex; justify-content: center;
  pointer-events: none;
}
.nav-pill {
  pointer-events: auto;
  position: relative;
  display: flex; align-items: center; gap: 0.2rem;
  border-radius: 999px;
  padding: 5px;
  /* top-lit gradient reads as a rounded solid, not a flat swatch */
  background: linear-gradient(180deg, #26262d 0%, #17171b 52%, #0d0d10 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.13),
    inset 0 -1px 0 rgba(0, 0, 0, 0.55),
    0 1px 2px rgba(16, 14, 12, 0.20),
    0 8px 20px rgba(16, 14, 12, 0.22),
    0 24px 56px rgba(16, 14, 12, 0.24);
}
.nav-logo {
  width: 40px; height: 40px; border-radius: 50%;
  background: radial-gradient(125% 125% at 30% 18%, #ffffff 0%, #f2f0ec 70%, #e6e3dd 100%);
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.34),
    0 3px 8px rgba(0, 0, 0, 0.24),
    inset 0 -1px 1px rgba(24, 22, 18, 0.10);
}
.nav-logo img { width: 30px; height: 30px; display: block; }
.nav-menu { display: flex; align-items: center; gap: 0.1rem; list-style: none; }
.nav-menu a.nav-link {
  display: inline-block;
  font-size: 0.82rem; letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.64);
  padding: 0.62rem 1.15rem; border-radius: 999px;
  transition: color 0.25s, background 0.25s;
  white-space: nowrap;
}
.nav-menu a.nav-link:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.nav-menu a.nav-link.active {
  background: linear-gradient(180deg, #ffffff 0%, #f1efeb 100%);
  color: #16161a;
  box-shadow:
    inset 0 1px 0 #fff,
    0 1px 2px rgba(0, 0, 0, 0.28),
    0 3px 10px rgba(0, 0, 0, 0.22);
}

/* dropdown */
.nav-drop { position: relative; }
.drop-panel {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(6px);
  min-width: 300px;
  background: linear-gradient(180deg, #212128 0%, #131317 100%);
  border-radius: 20px;
  padding: 0.5rem;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 2px 6px rgba(16, 14, 12, 0.22),
    0 22px 54px rgba(16, 14, 12, 0.32);
  opacity: 0; visibility: hidden;
  transition: opacity 0.22s, transform 0.22s, visibility 0.22s;
}
/* invisible hover bridge between pill and panel */
.drop-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.nav-drop:hover .drop-panel, .nav-drop:focus-within .drop-panel {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.drop-item {
  display: flex; flex-direction: column; gap: 0.1rem;
  padding: 0.75rem 0.9rem; border-radius: 13px;
  transition: background 0.2s;
}
.drop-item:hover { background: rgba(255, 255, 255, 0.07); }
.drop-item .t {
  font-family: var(--font-display); font-size: 0.8rem;
  letter-spacing: 0.22em; text-transform: uppercase;
}
.drop-item .d { font-size: 0.76rem; color: rgba(255, 255, 255, 0.5); line-height: 1.5; }
.drop-item.v-ventures .t   { color: #c9c9c9; }
.drop-item.v-ecosystem .t  { color: var(--ecosystem); }
.drop-item.v-foundation .t { color: var(--foundation); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-display);
  font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase;
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  border: 1px solid var(--ink);
  background: var(--ink); color: var(--bg);
  transition: background 0.25s, color 0.25s, transform 0.25s, border-color 0.25s;
}
.btn:hover { background: transparent; color: var(--ink); transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-accent { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }
.btn-accent:hover { background: transparent; color: var(--accent-deep); }
.btn .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.7; }

/* hamburger */
.nav-burger { display: none; background: none; border: 0; width: 42px; height: 42px; position: relative; z-index: 60; flex: 0 0 auto; }
.nav-burger span {
  position: absolute; left: 11px; right: 11px; height: 1.5px; background: #fff;
  transition: transform 0.3s, opacity 0.3s, top 0.3s;
}
.nav-burger span:nth-child(1) { top: 15px; }
.nav-burger span:nth-child(2) { top: 21px; }
.nav-burger span:nth-child(3) { top: 27px; }
body.nav-open .nav-burger span:nth-child(1) { top: 21px; transform: rotate(45deg); }
body.nav-open .nav-burger span:nth-child(2) { opacity: 0; }
body.nav-open .nav-burger span:nth-child(3) { top: 21px; transform: rotate(-45deg); }

/* ---------- reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.8s cubic-bezier(0.2, 0.6, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.6, 0.2, 1); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 0.12s; }
.reveal[data-delay="2"] { transition-delay: 0.24s; }
.reveal[data-delay="3"] { transition-delay: 0.36s; }

/* ---------- marquee ---------- */
.partners { padding: var(--section-y) 0; background: var(--bg); }
.partners .label {
  text-align: center; font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--ink-mid); margin-bottom: 1.8rem; font-family: var(--font-display);
}
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); }
.marquee-track { display: flex; align-items: center; gap: clamp(3rem, 6vw, 5.5rem); width: max-content; animation: marquee 40s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
/* every logo lives in the same box and scales to fit it */
.marquee-track img {
  width: 150px; height: 48px; object-fit: contain; flex: 0 0 auto;
  filter: grayscale(1) opacity(0.45);
  transition: filter 0.3s, transform 0.3s;
}
.marquee-track img:hover { filter: grayscale(0) opacity(1); transform: translateY(-3px); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- value prop diagram ---------- */
.vp-grid {
  display: grid; grid-template-columns: 1fr minmax(300px, 620px) 1fr;
  align-items: center; gap: clamp(1rem, 4vw, 3rem);
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
}
.vp-side {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.4vw, 3rem);
  letter-spacing: 0.16em; color: var(--ink);
  white-space: nowrap;
}
.vp-side.right { text-align: right; }
.vp-diagram svg { width: 100%; height: auto; display: block; }
.vp-diagram .orbit-line { stroke: var(--line); }
.vp-diagram .flow-line { stroke: var(--accent-deep); stroke-dasharray: 340; stroke-dashoffset: 340; }
.vp-diagram.in .flow-line { animation: drawline 1.6s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
.vp-diagram.in .flow-line.l2 { animation-delay: 0.35s; }
.vp-diagram.in .flow-line.l3 { animation-delay: 0.7s; }
@keyframes drawline { to { stroke-dashoffset: 0; } }
.vp-diagram .node-box { fill: var(--bg-raise); stroke: var(--line); }
.vp-diagram .node-label { font-family: var(--font-display); font-size: 13px; letter-spacing: 3px; fill: var(--ink); text-transform: uppercase; }
.vp-diagram .node-sub { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 1.5px; fill: var(--ink-mid); }
.vp-diagram .pulse { fill: var(--accent-deep); }

/* ---------- stats ---------- */
.stats-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.stat { border-top: 1px solid var(--line); padding-top: 1.4rem; }
.stat .num {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.5vw, 3.6rem);
  letter-spacing: 0.03em; line-height: 1;
  color: var(--ink); display: block;
}
.stat .num em { font-style: normal; color: var(--accent-deep); }
.stat .cap { margin-top: 0.7rem; font-size: 0.82rem; color: var(--ink-mid); line-height: 1.55; display: block; }

/* ---------- vertical cards ---------- */
.cards {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.4rem, 2.8vw, 2.2rem);
  margin-top: var(--block-gap);
  position: relative; isolation: isolate;
}
/* accent haze pooling behind and between the cards: gives the row atmosphere
   so the cards read as objects sitting above a surface */
.cards::before {
  content: ""; position: absolute; inset: -10% -5%; z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(34% 55% at 14% 32%, color-mix(in srgb, var(--ventures) 30%, transparent), transparent 70%),
    radial-gradient(34% 55% at 50% 76%, color-mix(in srgb, var(--ecosystem) 34%, transparent), transparent 70%),
    radial-gradient(34% 55% at 86% 30%, color-mix(in srgb, var(--foundation) 34%, transparent), transparent 70%);
  filter: blur(14px);
}
.card {
  --c: var(--ink-mid); --c-deep: var(--ink-soft);
  position: relative;
  /* top-lit surface gradient: the single biggest cue that a panel is solid */
  background: linear-gradient(168deg, #ffffff 0%, #fdfcfa 45%, #f6f4f0 100%);
  border: 0; border-radius: 22px;
  padding: clamp(1.8rem, 3.2vw, 2.6rem);
  display: flex; flex-direction: column; gap: 1.1rem;
  /* stacked shadows + a tinted ambient one so each card casts its own colour */
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 -1px 0 rgba(24, 22, 18, 0.05),
    0 1px 2px rgba(24, 22, 18, 0.05),
    0 5px 12px rgba(24, 22, 18, 0.05),
    0 18px 38px rgba(24, 22, 18, 0.09),
    0 22px 46px -18px color-mix(in srgb, var(--c) 55%, transparent);
  transition: transform 0.42s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.42s cubic-bezier(0.2, 0.7, 0.2, 1);
  overflow: hidden;
}
/* hairline edge, brighter at the top left where the light lands */
.card::after {
  content: ""; position: absolute; inset: 0; border-radius: 22px; padding: 1px;
  background: linear-gradient(
    155deg,
    rgba(255, 255, 255, 1) 0%,
    color-mix(in srgb, var(--c) 30%, rgba(255, 255, 255, 0.7)) 38%,
    rgba(24, 22, 18, 0.07) 100%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.card:hover {
  transform: translateY(-10px);
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 -1px 0 rgba(24, 22, 18, 0.05),
    0 2px 4px rgba(24, 22, 18, 0.06),
    0 10px 22px rgba(24, 22, 18, 0.07),
    0 34px 70px rgba(24, 22, 18, 0.13),
    0 34px 60px -20px color-mix(in srgb, var(--c) 75%, transparent);
}
.card.c-ventures   { --c: var(--ventures);   --c-deep: var(--ventures-deep); }
.card.c-ecosystem  { --c: var(--ecosystem);  --c-deep: var(--ecosystem-deep); }
.card.c-foundation { --c: var(--foundation); --c-deep: var(--foundation-deep); }
.card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 45%, #fff));
  z-index: 3;
}
/* vertical mark + label, replacing the old ASCII bracket glyph */
.card .glyph {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem;
  font-family: var(--font-mono); font-size: 0.72rem;
  letter-spacing: 0.18em; text-transform: lowercase;
  color: var(--c-deep); line-height: 1;
}
.card .glyph img { width: 42px; height: 42px; display: block; }
.card h3 { font-size: 1.15rem; letter-spacing: 0.22em; text-transform: uppercase; }
.card h3 .v { color: var(--c-deep); }
.card p { font-size: 0.9rem; color: var(--ink-soft); flex: 1; }
.card .tags { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.card .tags span {
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase;
  border: 1px solid var(--line); border-radius: 999px; padding: 0.28rem 0.7rem; color: var(--ink-mid);
}
.card .btn { align-self: flex-start; background: var(--c-deep); border-color: var(--c-deep); color: #fff; }
.card .btn:hover { background: transparent; color: var(--c-deep); }

/* ---------- contact ---------- */
.contact-tabs { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 2rem 0 2.4rem; }
.contact-tabs button {
  font-family: var(--font-display); font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase;
  padding: 0.7rem 1.3rem; border-radius: 999px;
  border: 1px solid var(--line); background: transparent; color: var(--ink-mid);
  transition: all 0.25s;
}
.contact-tabs button.active { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; max-width: 760px; margin-top: var(--block-gap); }
.field { display: flex; flex-direction: column; gap: 0.45rem; }
.field.full { grid-column: 1 / -1; }
.field label { font-family: var(--font-display); font-size: 0.62rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ink-mid); }
.field input, .field textarea, .field select {
  font: inherit; font-size: 0.95rem; color: var(--ink);
  background: var(--bg-raise); border: 1px solid var(--line); border-radius: 12px;
  padding: 0.9rem 1.1rem; outline: none; resize: vertical;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--accent-deep); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }
.field input:user-invalid { border-color: #c07a6a; }
.file-pick { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }
.file-pick input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); }
.file-btn {
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 0.7rem 1.2rem; border-radius: 999px; cursor: pointer;
  background: #fff; border: 1px solid var(--line); color: var(--ink-soft);
  box-shadow: inset 0 2px 4px rgba(24, 22, 18, 0.05);
  transition: border-color 0.25s, color 0.25s, box-shadow 0.25s;
}
.file-btn:hover { border-color: var(--accent-deep); color: var(--ink); }
.file-pick input:focus-visible + .file-btn { border-color: var(--accent-deep); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 26%, transparent); }
.file-name { font-size: 0.82rem; color: var(--ink-mid); overflow-wrap: anywhere; }
.file-name.has-file { color: var(--ink); }
.file-name.is-error { color: #c07a6a; }
.form-note { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.1em; color: var(--accent-deep); margin-top: 1.4rem; opacity: 0; transform: translateY(8px); transition: all 0.5s; }
.form-note.show { opacity: 1; transform: none; }

/* ---------- footer ---------- */
footer { position: relative; border: 0; background: var(--bg); padding: var(--section-y) 0 2rem; overflow: hidden; }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2.5rem; position: relative; }
.foot-logo { font-family: var(--font-display); font-size: 1.15rem; letter-spacing: 0.42em; text-transform: uppercase; }
.foot-tag { margin-top: 0.9rem; font-size: 0.82rem; color: var(--ink-mid); max-width: 30ch; }
.foot-col h4 { font-family: var(--font-display); font-size: 0.62rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-mid); margin-bottom: 1rem; }
.foot-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.55rem; }
.foot-col a { font-size: 0.84rem; color: var(--ink-soft); transition: color 0.2s; }
.foot-col a:hover { color: var(--ink); }
.foot-base { position: relative; margin-top: 3rem; padding-top: 1.4rem; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; color: var(--ink-mid); }

/* ---------- vertical page hero ---------- */
.page-hero { padding-top: calc(var(--nav-h) + var(--section-y)); padding-bottom: var(--section-y); }
.page-hero .rule { width: 64px; height: 3px; background: var(--accent); margin-bottom: 2rem; }
.page-hero h1 { max-width: 18ch; }
.page-hero .lede { margin-top: 1.6rem; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 2.5vw, 2rem); margin-top: var(--block-gap); }
.pillar { border-top: 1px solid var(--line); padding-top: 1.3rem; }
.pillar .idx { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.2em; color: var(--accent-deep); }
.pillar h3 { font-size: 1rem; letter-spacing: 0.14em; text-transform: uppercase; margin: 0.7rem 0 0.6rem; }
.pillar p { font-size: 0.88rem; color: var(--ink-soft); }

.cta-band { text-align: center; }
.cta-band .display-lg { max-width: 22ch; margin: 0 auto 2.2rem; }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .vp-grid { grid-template-columns: 1fr; text-align: center; }
  .vp-side, .vp-side.right { text-align: center; }
  .cards { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .split { grid-template-columns: 1fr; }
  .pillars { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .nav-menu {
    position: fixed; inset: 0; z-index: 55;
    flex-direction: column; justify-content: center; gap: 2rem;
    background: #141414;
    opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.3s, visibility 0.3s;
  }
  body.nav-open .nav-menu { opacity: 1; visibility: visible; pointer-events: auto; }
  .nav-menu li { text-align: center; width: 100%; }
  .nav-menu a.nav-link { font-size: 1.1rem; font-family: var(--font-display); letter-spacing: 0.2em; text-transform: uppercase; }
  .nav-menu a.nav-link.active { background: #fff; color: #141414; }
  /* visibility must inherit here: a child set to visible stays tappable even when the closed menu is hidden */
  .nav-drop .drop-panel,
  .nav-drop:hover .drop-panel, .nav-drop:focus-within .drop-panel {
    position: static; left: auto; top: auto; min-width: 0; transform: none;
    opacity: 1; visibility: inherit; box-shadow: none; border: 0; background: transparent; text-align: center;
  }
  .drop-panel::before { display: none; }
  .drop-item { align-items: center; }
  .nav-burger { display: block; }
  .contact-form { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .marquee-track { animation-duration: 120s; }
  html { scroll-behavior: auto; }
}


/* ---------- story timeline (from saturn timeline.html) ---------- */
/* Local tokens mirror the site design system. Each falls back to a hard
     value, but reads the real site var first (distinct names avoid a cycle),
     so dropped into the site it inherits the true palette. */
  .saturn-tl {
    --s-ink:      var(--ink, #161616);
    --s-ink-soft: var(--ink-soft, #4d4d4d);
    --s-ink-mid:  var(--ink-mid, #8a8a8a);
    --s-dot:      var(--ink-faint, #b0aea9);
    --s-line:     #d8d5ce;
    --s-ec:       var(--ecosystem, #92bbd8);
    --s-ec-deep:  var(--ecosystem-deep, #6a94b4);
    --s-body: var(--font-body, "Acid Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif);
    --s-disp: var(--font-display, "FG Futurist", "Futura", "Avenir Next", "Helvetica Neue", sans-serif);

    --s-pad: clamp(6px, 3vw, 32px);   /* shared inset: timeline + text align */

    font-family: var(--s-body);
    color: var(--s-ink);
    -webkit-font-smoothing: antialiased;
    background: transparent;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: var(--block-gap) 0 0;
    box-sizing: border-box;
  }
  .saturn-tl *, .saturn-tl *::before, .saturn-tl *::after { box-sizing: border-box; }

  /* ---- track ---- */
  .stl-track { position: relative; padding: 0 var(--s-pad); }
  .stl-rail {
    position: absolute; height: 1px; top: 7px;   /* weight 1, grey, never changes */
    background: var(--s-line);
    transform: scaleX(0); transform-origin: left center;
    transition: transform 1s cubic-bezier(.16,1,.3,1);
  }
  .saturn-tl.in .stl-rail { transform: scaleX(1); }

  .stl-nodes { display: flex; list-style: none; margin: 0; padding: 0; position: relative; }
  .stl-node { flex: 1 1 0; min-width: 0; }
  .stl-btn {
    appearance: none; background: none; border: 0; padding: 0; margin: 0;
    font: inherit; color: inherit; cursor: pointer; text-align: center;
    display: flex; flex-direction: column; align-items: center; width: 100%;
  }
  .stl-dot {
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--s-dot);
    opacity: 0; transform: scale(.2);
    transition: transform .5s cubic-bezier(.34,1.56,.64,1), background .35s ease, box-shadow .35s ease;
  }
  .saturn-tl.in .stl-dot { opacity: 1; transform: scale(1); }
  .saturn-tl.in .stl-node:nth-child(1) .stl-dot { transition-delay: .35s; }
  .saturn-tl.in .stl-node:nth-child(2) .stl-dot { transition-delay: .50s; }
  .saturn-tl.in .stl-node:nth-child(3) .stl-dot { transition-delay: .65s; }
  .saturn-tl.in .stl-node:nth-child(4) .stl-dot { transition-delay: .80s; }

  .stl-yr {
    font-family: var(--s-disp); font-weight: 500;
    font-size: clamp(1rem, 2.2vw, 1.4rem); letter-spacing: .01em;
    color: var(--s-ink-mid); margin-top: 1.1rem;
  }
  .stl-cap {
    font-weight: 300; font-size: clamp(.72rem, 1.4vw, .84rem);
    line-height: 1.45; color: var(--s-ink-mid); margin-top: .5rem;
    max-width: 22ch;
  }
  .stl-yr, .stl-cap {
    opacity: 0; transform: translateY(10px);
    transition: color .35s ease, opacity .6s ease, transform .6s cubic-bezier(.16,1,.3,1);
  }
  .saturn-tl.in .stl-yr, .saturn-tl.in .stl-cap { opacity: 1; transform: none; }
  .saturn-tl.in .stl-node:nth-child(1) .stl-yr,  .saturn-tl.in .stl-node:nth-child(1) .stl-cap { transition-delay: .5s; }
  .saturn-tl.in .stl-node:nth-child(2) .stl-yr,  .saturn-tl.in .stl-node:nth-child(2) .stl-cap { transition-delay: .62s; }
  .saturn-tl.in .stl-node:nth-child(3) .stl-yr,  .saturn-tl.in .stl-node:nth-child(3) .stl-cap { transition-delay: .74s; }
  .saturn-tl.in .stl-node:nth-child(4) .stl-yr,  .saturn-tl.in .stl-node:nth-child(4) .stl-cap { transition-delay: .86s; }

  /* active / hover: only the DOT and the labels take colour, never the line */
  .stl-node.is-active .stl-dot,
  .stl-btn:hover .stl-dot {
    background: var(--s-ec);
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--s-ec) 22%, transparent);
  }
  .stl-node.is-active .stl-yr,
  .stl-btn:hover .stl-yr { color: var(--s-ec-deep); }
  .stl-node.is-active .stl-cap,
  .stl-btn:hover .stl-cap { color: var(--s-ink-soft); }
  .stl-btn:focus-visible { outline: 2px solid var(--s-ec-deep); outline-offset: 6px; border-radius: 6px; }

  /* ---- description panel (aligned to the timeline span) ---- */
  .stl-panel {
    position: relative; margin-top: clamp(2.5rem, 6vw, 4rem);
    padding: 0 var(--s-pad);
    min-height: 190px;
    opacity: 0; transition: opacity .6s ease .6s;
  }
  .saturn-tl.in .stl-panel { opacity: 1; }

  .stl-hint {
    font-weight: 300; font-size: clamp(.9rem, 1.5vw, 1.05rem);
    color: var(--s-ink-mid); font-style: italic;
    transition: opacity .4s ease;
  }
  .saturn-tl.touched .stl-hint { opacity: 0; }

  .stl-ghost {
    position: absolute; right: var(--s-pad); top: -1.6rem; z-index: 0;
    font-family: var(--s-disp); font-weight: 600;
    font-size: clamp(5rem, 13vw, 11rem); line-height: .9;
    color: var(--s-ec); opacity: 0; letter-spacing: -.02em;
    pointer-events: none; user-select: none;
    transition: opacity .5s ease;
  }
  .saturn-tl.touched .stl-ghost { opacity: .1; }

  .stl-descs { position: relative; z-index: 1; }
  .stl-desc {
    position: absolute; top: 0; left: 0; right: 0;
    font-weight: 300; font-size: clamp(1rem, 1.7vw, 1.18rem);
    line-height: 1.7; color: var(--s-ink-soft); max-width: 68ch;
    opacity: 0; transform: translateY(16px);
    transition: opacity .5s ease, transform .55s cubic-bezier(.16,1,.3,1);
    pointer-events: none;
  }
  .stl-desc.is-active { opacity: 1; transform: none; pointer-events: auto; }
  /* emphasis: italic, ecosystem blue */
  .stl-desc em { font-style: italic; font-weight: inherit; color: var(--s-ec-deep); }

  @media (prefers-reduced-motion: reduce) {
    .saturn-tl * { transition: none !important; }
    .stl-rail { transform: scaleX(1); }
    .stl-dot, .stl-yr, .stl-cap, .stl-panel { opacity: 1 !important; transform: none !important; }
  }

  @media (max-width: 640px) {
    .stl-cap { font-size: .68rem; }
    .stl-desc { font-size: 1rem; }
    .stl-panel { min-height: 240px; }
  }


/* ============================================================
   DEPTH PASS — lifts the page off the flat plane.
   Surfaces get top-lit gradients, interactive things get real
   shadows, and sections separate with light rather than lines.
   ============================================================ */

/* ---------- orbit widget (the system) ---------- */
.orbit-frame {
  margin-top: var(--block-gap);
  position: relative;
}
.orbit-frame iframe {
  display: block; width: 100%; border: 0;
  aspect-ratio: 7 / 4;
  background: transparent;
}
@media (max-width: 760px) {
  .orbit-frame iframe { aspect-ratio: 4 / 3; }
}

/* ---------- sections read as stacked planes ---------- */
.section-raise { background: var(--bg); border: 0; box-shadow: none; }
.section-solid { background: var(--bg); border: 0; box-shadow: none; }

/* ---------- buttons sit above the surface ---------- */
.btn {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 1px 2px rgba(24, 22, 18, 0.16),
    0 5px 14px rgba(24, 22, 18, 0.16);
}
.btn:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 2px 5px rgba(24, 22, 18, 0.14),
    0 12px 26px rgba(24, 22, 18, 0.18);
}
.btn-ghost { box-shadow: var(--sh-1); }

/* ---------- stats: each figure on its own raised shelf ---------- */
.stat {
  border-top: 0;
  background: linear-gradient(168deg, #ffffff 0%, #fbfaf7 100%);
  border-radius: 16px;
  padding: 1.5rem 1.4rem 1.6rem;
  box-shadow:
    inset 0 1px 0 #fff,
    0 1px 2px rgba(24, 22, 18, 0.04),
    0 8px 20px rgba(24, 22, 18, 0.06);
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.35s;
}
.stat:hover {
  transform: translateY(-4px);
  box-shadow:
    inset 0 1px 0 #fff,
    0 2px 5px rgba(24, 22, 18, 0.05),
    0 16px 34px rgba(24, 22, 18, 0.10);
}

/* ---------- pillars (vertical pages) ---------- */
.pillar {
  border-top: 0;
  background: linear-gradient(168deg, #ffffff 0%, #fbfaf7 100%);
  border-radius: 16px;
  padding: 1.6rem 1.5rem 1.8rem;
  box-shadow:
    inset 0 1px 0 #fff,
    0 1px 2px rgba(24, 22, 18, 0.04),
    0 8px 20px rgba(24, 22, 18, 0.06);
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.35s;
}
.pillar:hover {
  transform: translateY(-4px);
  box-shadow:
    inset 0 1px 0 #fff,
    0 2px 5px rgba(24, 22, 18, 0.05),
    0 16px 34px rgba(24, 22, 18, 0.10);
}
.pillar .idx {
  display: inline-block; margin-bottom: 0.2rem;
  color: var(--accent-deep);
}

/* ---------- partner band recedes, so the cards above pop ---------- */
.partners { background: var(--bg); border: 0; box-shadow: none; padding: var(--section-y) 0; }

/* ---------- form fields get inset depth ---------- */
.field input, .field textarea, .field select {
  background: #fff;
  box-shadow:
    inset 0 2px 4px rgba(24, 22, 18, 0.05),
    inset 0 1px 0 rgba(24, 22, 18, 0.04);
}
.field input:focus, .field textarea:focus, .field select:focus {
  box-shadow:
    inset 0 2px 4px rgba(24, 22, 18, 0.04),
    0 0 0 3px color-mix(in srgb, var(--accent) 26%, transparent);
}

/* ---------- footer sinks below the page ---------- */
footer { border: 0; background: var(--bg); box-shadow: none; }


/* ============================================================
   ECOSYSTEM — services + clients
   ============================================================ */

/* Service cards. Fixed height photo cards, so the hover reveal happens
   INSIDE the card: the detail text slides up into space the card already
   owns. Nothing overlaps the row below and nothing on the page moves.
   (The previous version grew the card over its neighbours, which reads as
   a bug rather than a reveal.) Touch devices show the detail all the time. */
.svc-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.2rem, 2.4vw, 1.8rem);
  margin-top: var(--block-gap);
}
.svc { position: relative; }
.svc-inner {
  height: 100%; min-height: 400px;
  display: flex; flex-direction: column; justify-content: flex-end;
  background: linear-gradient(168deg, #ffffff 0%, #fdfcfa 45%, #f6f4f0 100%);
  border-radius: 20px;
  padding: clamp(1.6rem, 2.6vw, 2.1rem);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.35),
    0 1px 2px rgba(24, 22, 18, 0.04),
    0 6px 16px rgba(24, 22, 18, 0.05);
  transition: box-shadow 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
  outline: none;
}
.svc:hover .svc-inner, .svc:focus-within .svc-inner, .svc.is-open .svc-inner {
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.35),
    0 2px 6px rgba(24, 22, 18, 0.06),
    0 20px 46px rgba(24, 22, 18, 0.14),
    0 20px 40px -18px color-mix(in srgb, var(--accent) 70%, transparent);
}
.svc:focus-within .svc-inner { box-shadow: 0 0 0 2px var(--accent-deep), 0 20px 46px rgba(24, 22, 18, 0.12); }
.svc-idx {
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.2em;
  color: var(--accent-deep); margin-bottom: 1rem;
}
.svc h3 {
  font-size: 1.05rem; letter-spacing: 0.14em; text-transform: uppercase;
  margin-bottom: 0.7rem;
}
.svc-teaser { font-size: 0.92rem; color: var(--ink-soft); }
.svc-more {
  font-size: 0.88rem; line-height: 1.75; color: var(--ink-soft);
  max-height: 0; opacity: 0; overflow: hidden; margin-top: 0;
  transform: translateY(6px);
  transition:
    max-height 0.55s cubic-bezier(0.2, 0.7, 0.2, 1),
    opacity 0.4s ease 0.08s,
    transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1),
    margin-top 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.svc:hover .svc-more, .svc:focus-within .svc-more, .svc.is-open .svc-more {
  max-height: 240px; opacity: 1; margin-top: 1rem; transform: none;
}

/* Photo backgrounds on the vertical pages. The image is pulled into one
   hue with a `color` blend (hue and saturation from the page tint, light
   and dark from the photo), so six different textures read as one set.
   A soft scrim keeps the white text legible when the card is closed.
   On hover a flat panel rises from the bottom (::before, so it can fade
   in) and the body copy sits on solid colour with the texture left
   showing only above the heading. */
.page-ventures  { --svc-tint: #8a8a8a; --svc-flat: 38, 40, 44; }
.page-ecosystem { --svc-tint: #6a94b4; --svc-flat: 31, 45, 61; }
.page-ventures .svc-inner, .page-ecosystem .svc-inner {
  position: relative; overflow: hidden;
  background-image:
    linear-gradient(180deg, rgba(var(--svc-flat), 0.10) 0%, rgba(var(--svc-flat), 0.42) 48%, rgba(var(--svc-flat), 0.82) 100%),
    linear-gradient(var(--svc-tint), var(--svc-tint)),
    var(--svc-img);
  background-blend-mode: normal, color, normal;
  background-size: cover; background-position: center;
  color: #fff;
}
.page-ventures .svc-inner::before, .page-ecosystem .svc-inner::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(var(--svc-flat), 0)    0%,
    rgba(var(--svc-flat), 0.35) 30%,
    rgba(var(--svc-flat), 0.94) 52%,
    rgba(var(--svc-flat), 1)    100%);
  opacity: 0;
  transition: opacity 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.page-ventures .svc:hover .svc-inner::before, .page-ventures .svc:focus-within .svc-inner::before, .page-ventures .svc.is-open .svc-inner::before,
.page-ecosystem .svc:hover .svc-inner::before, .page-ecosystem .svc:focus-within .svc-inner::before, .page-ecosystem .svc.is-open .svc-inner::before { opacity: 1; }
.page-ventures .svc-inner > *, .page-ecosystem .svc-inner > * { position: relative; }
.page-ventures .svc h3, .page-ecosystem .svc h3 { color: #fff; }
.page-ventures .svc-teaser, .page-ventures .svc-more,
.page-ecosystem .svc-teaser, .page-ecosystem .svc-more { color: rgba(255,255,255,0.86); }
.page-ventures .svc-idx, .page-ecosystem .svc-idx { color: rgba(255,255,255,0.72); }
.page-ecosystem .svc-1 .svc-inner { --svc-img: url("../img/cards/ecosystem-1.jpg"); }
.page-ecosystem .svc-2 .svc-inner { --svc-img: url("../img/cards/ecosystem-2.jpg"); }
.page-ecosystem .svc-3 .svc-inner { --svc-img: url("../img/cards/ecosystem-3.jpg"); }
.page-ecosystem .svc-4 .svc-inner { --svc-img: url("../img/cards/ecosystem-4.jpg"); }
.page-ecosystem .svc-5 .svc-inner { --svc-img: url("../img/cards/ecosystem-5.jpg"); }
.page-ecosystem .svc-6 .svc-inner { --svc-img: url("../img/cards/ecosystem-6.jpg"); }
.page-ventures .svc-1 .svc-inner { --svc-img: url("../img/cards/ventures-1.jpg"); }
.page-ventures .svc-2 .svc-inner { --svc-img: url("../img/cards/ventures-2.jpg"); }
.page-ventures .svc-3 .svc-inner { --svc-img: url("../img/cards/ventures-3.jpg"); }

/* Clients: quiet logo grid, no copy. */
.client-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: clamp(0.9rem, 2vw, 1.6rem);
  margin-top: var(--block-gap);
}
.client {
  display: flex; align-items: center; justify-content: center;
  height: 88px; padding: 0 1rem;
  background: linear-gradient(168deg, #ffffff 0%, #fbfaf7 100%);
  border-radius: 14px;
  box-shadow:
    inset 0 1px 0 #fff,
    0 1px 2px rgba(24, 22, 18, 0.04),
    0 6px 16px rgba(24, 22, 18, 0.05);
}
.client img {
  width: 140px; height: 40px; object-fit: contain;
  filter: grayscale(1) opacity(0.45);
  transition: filter 0.3s;
}
.client:hover img { filter: grayscale(0) opacity(1); }

/* Technology partners: the homepage marquee, reused. Runs slower because
   there are three times as many marks, and the vendor logos come in as
   grey PNGs so the grayscale filter is a no-op until hover. */
.platform-row {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  margin-top: var(--block-gap);
}
.platform-row img {
  width: 180px; height: 52px; object-fit: contain; object-position: left center;
  filter: grayscale(1) opacity(0.5);
  transition: filter 0.3s;
}
.platform-row img:hover { filter: grayscale(0) opacity(1); }

.contact-mail {
  font-family: var(--font-mono); font-size: 0.78rem;
  letter-spacing: 0.08em; color: var(--ink-mid);
  border-bottom: 1px solid var(--line); padding-bottom: 2px;
  transition: color 0.25s, border-color 0.25s;
}
.contact-mail:hover { color: var(--accent-deep); border-bottom-color: var(--accent-deep); }

@media (max-width: 1100px) {
  .client-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 980px) {
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .svc-grid { grid-template-columns: 1fr; }
  .client-grid { grid-template-columns: repeat(2, 1fr); }
}
/* Touch devices get no hover, so the cards sit open in a stacked layout. */
@media (max-width: 640px) {
  .stl-track { padding: 0; }
  .stl-rail { display: none; }
  .stl-nodes { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem 1.2rem; }
  .stl-node { min-width: 0; }
  .stl-btn { align-items: flex-start; text-align: left; }
  .stl-cap { text-align: left; }
}
/* touch: cards start collapsed and open on tap (site.js toggles .is-open).
   Hover states can stick after a tap on touch screens, so they are switched
   off here and only the tapped state counts. */
@media (hover: none) {
  .svc-inner { min-height: 240px; cursor: pointer; }
  .svc:hover .svc-inner { transform: none; }
  .svc:hover .svc-more { max-height: 0; opacity: 0; margin-top: 0; transform: translateY(6px); }
  .page-ventures .svc:hover .svc-inner::before, .page-ecosystem .svc:hover .svc-inner::before { opacity: 0; }
  .svc.is-open .svc-inner { transform: none; }
  .svc.is-open .svc-more { max-height: 320px; opacity: 1; margin-top: 1rem; transform: none; }
  .page-ventures .svc.is-open .svc-inner::before, .page-ecosystem .svc.is-open .svc-inner::before { opacity: 1; }
}
@media (max-width: 640px) {
  .svc-inner { min-height: 240px; }
}


/* ============================================================
   VERTICAL NAMING — "Saturn" stays plain, the vertical name is
   italic in its own colour. Applies everywhere the name appears.
   `em.` form is needed to outrank .stl-desc em inside the timeline.
   ============================================================ */
.sv-ventures,   em.sv-ventures   { font-style: italic; color: var(--ventures-deep); }
.sv-ecosystem,  em.sv-ecosystem  { font-style: italic; color: var(--ecosystem-deep); }
.sv-foundation, em.sv-foundation { font-style: italic; color: var(--foundation-deep); }

/* on the dark nav dropdown the lighter accents read better */
.drop-item .t { color: rgba(255, 255, 255, 0.92); }
.drop-item .sv-ventures   { color: #c9c9c9; }
.drop-item .sv-ecosystem  { color: var(--ecosystem); }
.drop-item .sv-foundation { color: var(--foundation); }

/* vertical cards: the name half italic in the card's accent */
.card h3 .v { font-style: italic; }


/* optional "what brings you here" select: same field skin, custom chevron
   so it matches across browsers */
.field select {
  appearance: none; -webkit-appearance: none;
  cursor: pointer;
  padding-right: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%238a8a8a' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.1rem center;
}
.field label .opt {
  text-transform: none; letter-spacing: 0.02em;
  color: var(--ink-faint); font-size: 0.92em;
}


/* ============================================================
   GET IN TOUCH — layout carried over from the existing
   saturn.africa site: sticky lowercase heading on the left,
   form on the right. Fields keep this site's rounded skin.
   ============================================================ */
.contact-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
  margin-top: var(--block-gap);
}
.contact-left { position: sticky; top: calc(var(--nav-h) + 2rem); }
.contact-heading {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.4vw, 3.6rem);
  font-weight: 300; line-height: 1;
  text-transform: lowercase; letter-spacing: 0.02em;
  color: var(--ink); margin-bottom: 1.6rem;
}
.contact-sub {
  font-size: 0.95rem; line-height: 1.85;
  color: var(--ink-soft); max-width: 46ch;
}
.contact-decoration { margin-top: 3rem; width: 60px; height: 60px; position: relative; }
.contact-decoration::before {
  content: ''; position: absolute; inset: 0;
  border: 1px solid var(--line); border-radius: 50%;
  animation: pulseRing 3s ease-in-out infinite;
}
.contact-decoration::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 6px; height: 6px; background: var(--ink-faint);
  border-radius: 50%; transform: translate(-50%, -50%);
}
@keyframes pulseRing {
  0%, 100% { transform: scale(1);    opacity: 0.55; }
  50%      { transform: scale(1.14); opacity: 0.95; }
}
@media (prefers-reduced-motion: reduce) { .contact-decoration::before { animation: none; } }

.contact-form-v2 { display: flex; flex-direction: column; gap: 1.4rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.contact-form-v2 .btn { align-self: flex-start; margin-top: 0.6rem; }

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .contact-left { position: static; }
  .form-row { grid-template-columns: 1fr; }
  .contact-decoration { display: none; }
}

/* ============================================================
   FOOTER — mission / explore, giant faint wordmark, base line.
   Carried over from the existing saturn.africa site.
   ============================================================ */
/* Recessed: the footer sits a step below the page. A slightly darker tone
   plus a soft inset shadow along the top edge reads as a pressed-in tray,
   with no hard rule between it and the section above. */
footer {
  position: relative; border: 0;
  background: var(--bg-dim);
  box-shadow:
    inset 0 18px 28px -18px rgba(24, 22, 18, 0.22),
    inset 0 1px 0 rgba(24, 22, 18, 0.05);
  padding: var(--section-y) 0 2rem; overflow: hidden;
}
.foot-top {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  margin-bottom: clamp(3rem, 7vw, 5rem);
  position: relative;
}
.foot-right { text-align: right; }
.foot-title {
  font-family: var(--font-body);
  font-size: 0.9rem; letter-spacing: 0.08em; text-transform: lowercase;
  color: var(--ink-mid); margin-bottom: 1.2rem;
}
.foot-mission {
  font-size: 0.9rem; line-height: 1.9; color: var(--ink-soft);
  max-width: 40ch;
}
.foot-links { list-style: none; }
.foot-links li { margin-bottom: 0.5rem; }
.foot-links a {
  font-size: 0.9rem; color: var(--ink-soft);
  transition: color 0.2s, padding-right 0.3s;
}
.foot-links a:hover { color: var(--ink); padding-right: 0.4rem; }
.foot-links a.l-ventures   { color: var(--ventures-deep); }
.foot-links a.l-ecosystem  { color: var(--ecosystem-deep); }
.foot-links a.l-foundation { color: var(--foundation-deep); }
.foot-wordmark {
  font-family: var(--font-display);
  font-size: clamp(5rem, 13vw, 13rem);
  font-weight: 300; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(22, 22, 22, 0.06);
  line-height: 1; white-space: nowrap; overflow: hidden;
  position: relative; user-select: none;
}
.foot-base {
  margin-top: 2rem; padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  position: relative;
}
.foot-base span {
  font-family: var(--font-body); font-size: 0.78rem;
  letter-spacing: 0.06em; color: var(--ink-faint);
}
@media (max-width: 760px) {
  .foot-top { grid-template-columns: 1fr; gap: 2.5rem; }
  .foot-right { text-align: left; }
  .foot-links a:hover { padding-right: 0; padding-left: 0.4rem; }
  .foot-wordmark { font-size: 13vw; letter-spacing: 0.1em; }
}


/* ============================================================
   VERTICAL CARDS WITH PHOTO BACKGROUNDS
   The three source images sit at very different brightness
   (dark moon / mid sky / pale lavender), so each carries a
   graded dark scrim. That keeps one text treatment across the
   row instead of white text on one card and ink on the others.
   ============================================================ */
.card.has-bg {
  min-height: 440px;
  background-image:
    linear-gradient(180deg,
      rgba(10, 10, 14, 0.26) 0%,
      rgba(10, 10, 14, 0.56) 46%,
      rgba(10, 10, 14, 0.78) 100%),
    var(--card-img);
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    0 1px 2px rgba(24, 22, 18, 0.10),
    0 8px 20px rgba(24, 22, 18, 0.12),
    0 24px 50px rgba(24, 22, 18, 0.18),
    0 22px 46px -18px color-mix(in srgb, var(--c) 55%, transparent);
}
.card.has-bg:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 2px 6px rgba(24, 22, 18, 0.12),
    0 14px 30px rgba(24, 22, 18, 0.16),
    0 40px 80px rgba(24, 22, 18, 0.24),
    0 34px 60px -20px color-mix(in srgb, var(--c) 80%, transparent);
}
/* hairline rim reads as light on a dark surface */
.card.has-bg::after {
  background: linear-gradient(155deg,
    rgba(255, 255, 255, 0.55) 0%,
    color-mix(in srgb, var(--c) 45%, rgba(255, 255, 255, 0.28)) 40%,
    rgba(255, 255, 255, 0.06) 100%);
}
.card.has-bg .glyph { color: rgba(255, 255, 255, 0.60); }
.card.has-bg h3 { color: #fff; }
.card.has-bg h3 .v { color: var(--c); }
.card.has-bg p { color: rgba(255, 255, 255, 0.80); }
.card.has-bg .tags span {
  border-color: rgba(255, 255, 255, 0.30);
  color: rgba(255, 255, 255, 0.75);
}
/* Read More sits at tag-pill scale and fills with the vertical's colour.
   --c-btn is a touch deeper than the brand accent so small white text
   still clears contrast on the fill. */
.card .btn {
  font-family: var(--font-mono);
  font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.42rem 1.05rem;
  border-radius: 999px;
  background: var(--c-btn); border: 1px solid var(--c-btn); color: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18), 0 4px 10px rgba(0, 0, 0, 0.14);
}
.card .btn .dot { display: none; }
.card .btn:hover {
  background: transparent; color: #fff;
  border-color: rgba(255, 255, 255, 0.6);
  box-shadow: none;
}

.card.c-ventures   { --card-img: url("../img/cards/card-ventures.jpg");   --c-btn: #6e6e6e; }
.card.c-ecosystem  { --card-img: url("../img/cards/card-ecosystem.jpg");  --c-btn: #4d7a99; }
.card.c-foundation { --card-img: url("../img/cards/card-foundation.jpg"); --c-btn: #6f5cbe; }

/* the accent haze behind the row is redundant once cards carry photos */
.cards:has(.has-bg)::before { opacity: 0; }


/* ============================================================
   VERTICAL LANDING HERO — full bleed image with the wordmark
   across it, mirroring the homepage planet + SATURN treatment.
   "Saturn" stays white; the vertical word takes its colour with
   a white outline so it holds up on light and dark artwork alike.
   ============================================================ */
.vhero {
  position: relative;
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: calc(var(--nav-h) + 2rem) var(--pad) 3rem;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}
/* keeps the wordmark readable without flattening the artwork */
.vhero::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(70% 55% at 50% 50%, rgba(10, 10, 14, 0.30), rgba(10, 10, 14, 0.06) 70%);
  pointer-events: none;
}
.vhero-title {
  position: relative; z-index: 2;
  font-family: var(--font-display); font-weight: 300;
  line-height: 1;
  text-align: center; color: #fff;
  text-shadow: 0 2px 24px rgba(10, 10, 14, 0.35);
}
.vhero-title .sat {
  display: block;
  font-size: clamp(2.8rem, 11vw, 9.5rem);
}
.vhero-word {
  display: block;
  margin-top: 0.35em;
  font-size: clamp(1.3rem, 3.4vw, 2.9rem);
  font-family: var(--font-body); font-weight: 200;
  font-style: normal; text-transform: lowercase; letter-spacing: 0.02em;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 6px 24px rgba(0, 0, 0, 0.22);
}
.page-ventures .vhero {
  background-image: url("../img/heroes/hero-ventures@2x.jpg");
  background-image: -webkit-image-set(url("../img/heroes/hero-ventures.jpg") 1x, url("../img/heroes/hero-ventures@2x.jpg") 2x);
  background-image: image-set(url("../img/heroes/hero-ventures.jpg") 1x, url("../img/heroes/hero-ventures@2x.jpg") 2x);
}
.page-ecosystem .vhero {
  background-image: url("../img/heroes/hero-ecosystem@2x.jpg");
  background-image: -webkit-image-set(url("../img/heroes/hero-ecosystem.jpg") 1x, url("../img/heroes/hero-ecosystem@2x.jpg") 2x);
  background-image: image-set(url("../img/heroes/hero-ecosystem.jpg") 1x, url("../img/heroes/hero-ecosystem@2x.jpg") 2x);
}
.page-foundation .vhero {
  background-image: url("../img/heroes/hero-foundation@2x.jpg");
  background-image: -webkit-image-set(url("../img/heroes/hero-foundation.jpg") 1x, url("../img/heroes/hero-foundation@2x.jpg") 2x);
  background-image: image-set(url("../img/heroes/hero-foundation.jpg") 1x, url("../img/heroes/hero-foundation@2x.jpg") 2x);
}

/* the pale ecosystem artwork needs a touch more hold under the type */
.page-ecosystem .vhero::after {
  background: radial-gradient(70% 55% at 50% 50%, rgba(10, 10, 14, 0.20), rgba(10, 10, 14, 0.04) 70%);
}
@media (max-width: 760px) { .vhero { min-height: 78vh; } }


/* ============================================================
   THE LOCKUP — SATURN is always caps, FG Futurist, widely
   tracked. The vertical name is always lowercase Acid Grotesk
   UltraLight. Italic only when it appears inside running copy,
   never in a heading or wordmark.
   ============================================================ */
.sat {
  font-family: var(--font-display);
  font-weight: 300; font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.28em;
}
.sv-ventures, .sv-ecosystem, .sv-foundation,
em.sv-ventures, em.sv-ecosystem, em.sv-foundation {
  font-family: var(--font-body);
  font-weight: 200;
  font-style: normal;
  text-transform: lowercase;
  letter-spacing: 0.02em;
}
/* running copy: italic, and SATURN tracks tighter so it sits in the sentence */
p .sv-ventures, p .sv-ecosystem, p .sv-foundation,
.stl-desc .sv-ventures, .stl-desc .sv-ecosystem, .stl-desc .sv-foundation {
  font-style: italic;
}
p .sat, .stl-desc .sat { letter-spacing: 0.12em; }

/* card headings follow the lockup */
.card h3 { letter-spacing: 0; text-transform: none; }
.card h3 .sat { font-size: 1.05em; }
.card h3 .v {
  font-family: var(--font-body); font-weight: 200;
  font-style: normal; text-transform: lowercase; letter-spacing: 0.02em;
}
/* nav dropdown follows the lockup */
.drop-item .t { text-transform: none; letter-spacing: 0; font-family: var(--font-display); }


/* ============================================================
   STARTUP SCHOOL (foundation page)
   Purple leads: buttons, accents, highlights.
   ============================================================ */

/* hero actions */
.cta-row { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2.4rem; }

/* nav apply pill, foundation page only */
.nav-apply {
  font-family: var(--font-mono); font-size: 0.62rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.62rem 1.15rem;
  white-space: nowrap; flex: 0 0 auto;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}

/* ---- reality strip ---- */
.reality-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.2rem, 2.4vw, 1.8rem);
  margin-top: var(--block-gap);
}
.reality {
  background: linear-gradient(168deg, #ffffff 0%, #faf8ff 100%);
  border-radius: 20px;
  padding: clamp(1.6rem, 3vw, 2.2rem);
  box-shadow:
    inset 0 1px 0 #fff,
    0 1px 2px rgba(24,22,18,0.04),
    0 10px 26px rgba(24,22,18,0.07),
    0 16px 34px -18px color-mix(in srgb, var(--foundation) 65%, transparent);
  border-top: 3px solid var(--foundation);
}
.reality .fig {
  display: block; font-family: var(--font-display); font-weight: 300;
  font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1;
  color: var(--foundation-deep); letter-spacing: 0.02em;
}
.reality .cap { display: block; margin-top: 0.9rem; font-size: 0.88rem; color: var(--ink-soft); }
.reality-note { margin-top: 1.8rem; font-size: clamp(1rem, 1.5vw, 1.15rem); color: var(--ink); }

/* ---- the gap: horizontal stepper ---- */
.gap-flow {
  display: flex; align-items: stretch; gap: 0.6rem;
  margin-top: var(--block-gap);
  overflow-x: auto; padding-bottom: 0.5rem;
  scrollbar-width: none;
}
.gap-flow::-webkit-scrollbar { display: none; }
.gap-step {
  flex: 1 1 0; min-width: 148px;
  display: flex; flex-direction: column; justify-content: center;
  text-align: center;
  padding: 1.4rem 1rem;
  border-radius: 16px;
  background: linear-gradient(168deg, #ffffff, #fbfaf7);
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(24,22,18,0.04), 0 8px 20px rgba(24,22,18,0.05);
  font-size: 0.86rem; color: var(--ink-soft);
  position: relative;
}
.gap-step.is-key {
  background: linear-gradient(168deg, var(--foundation), #a99adf);
  color: #fff; font-weight: 400;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    0 2px 6px rgba(24,22,18,0.10),
    0 16px 34px -10px color-mix(in srgb, var(--foundation) 85%, transparent);
  transform: scale(1.04);
}
.gap-arrow {
  flex: 0 0 auto; align-self: center;
  color: var(--ink-faint); font-size: 0.9rem; user-select: none;
}
.gap-note { margin-top: 1.6rem; }

/* ---- who we support: pills ---- */
.pill-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: var(--block-gap); }
.pill-row span {
  font-family: var(--font-mono); font-size: 0.62rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.45rem 0.95rem; border-radius: 999px;
  background: color-mix(in srgb, var(--foundation) 20%, #fff);
  color: var(--foundation-deep);
  border: 1px solid color-mix(in srgb, var(--foundation) 45%, #fff);
}

/* foundation page: purple leads the shared components */
.page-foundation .stat .num em { color: var(--foundation-deep); }
.page-foundation .stat { border-top: 3px solid var(--foundation); }

@media (max-width: 900px) {
  .reality-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .gap-flow { gap: 0.4rem; }
  .gap-step { min-width: 132px; font-size: 0.8rem; }
}


/* ============================================================
   STARTUP SCHOOL v2 — announcement bar, thesis, differentiators,
   checklist, quotes, three way CTA.
   ============================================================ */

/* sticky announcement bar; the nav pill drops below it */
.announce {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  background: linear-gradient(180deg, #9282d8, #7f6ecb);
  color: #fff; text-align: center;
  padding: 0.95rem var(--pad);
  font-family: var(--font-mono); font-size: 0.86rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  box-shadow: 0 1px 10px rgba(24, 22, 18, 0.16);
  overflow: hidden;
}
.announce-text { color: #fff; display: inline-block; white-space: nowrap; }
.announce-text .sat { letter-spacing: 0.26em; }
/* letters are wrapped by announce.js; each one animates on its own */
.announce-text .ch { display: inline-block; will-change: transform, opacity; }
.announce-text .ch.sp { width: 0.5em; }
body.has-announce .navbar { top: 64px; }
body.has-announce .vhero { padding-top: calc(var(--nav-h) + 64px + 2rem); }

/* image buttons: the apply artwork sits behind the label */
.btn-img {
  position: relative; overflow: hidden; isolation: isolate;
  color: #fff; border-radius: 999px;
  background-size: cover; background-position: center;
  box-shadow: 0 1px 2px rgba(0,0,0,0.22), 0 4px 10px rgba(0,0,0,0.18);
  transition: transform 0.25s, box-shadow 0.25s;
}
.btn-img::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(10, 10, 14, 0.28);
  transition: background 0.25s;
}
.btn-img:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0,0,0,0.24), 0 10px 22px rgba(0,0,0,0.22); }
.btn-img:hover::before { background: rgba(10, 10, 14, 0.14); }
.btn-img-apply { background-image: url("../img/buttons/apply.jpg"); }
.vhero-stack { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: clamp(1.4rem, 3vw, 2.2rem); }
.hero-apply {
  font-family: var(--font-mono); font-size: 0.72rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  padding: 0.95rem 1.9rem;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}

/* thesis: one statement, no decoration */
.thesis { max-width: 26ch; }
.thesis-body { margin-top: 1.6rem; max-width: 54ch; }

/* four differentiator cards */
.diff-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: var(--block-gap);
}
.diff {
  background: linear-gradient(168deg, #ffffff 0%, #faf8ff 100%);
  border-radius: 18px;
  padding: clamp(1.4rem, 2.6vw, 1.9rem);
  border: 1px solid color-mix(in srgb, var(--foundation) 28%, #fff);
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(24,22,18,0.04), 0 8px 20px rgba(24,22,18,0.05);
  transition: transform 0.35s cubic-bezier(0.2,0.7,0.2,1), box-shadow 0.35s, border-color 0.35s;
}
.diff:hover {
  transform: translateY(-6px);
  border-color: var(--foundation);
  box-shadow: inset 0 1px 0 #fff, 0 2px 6px rgba(24,22,18,0.06),
    0 18px 38px rgba(24,22,18,0.10), 0 18px 34px -16px color-mix(in srgb, var(--foundation) 70%, transparent);
}
.diff h3 {
  font-family: var(--font-body); font-weight: 200;
  font-size: 1rem; letter-spacing: 0.02em; text-transform: none;
  color: var(--foundation-deep); margin-bottom: 0.6rem;
}
.diff p { font-size: 0.9rem; color: var(--ink-soft); }

/* what you get: black and white photo cards from the first cohort events */
.diff-photo {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 360px; display: flex; flex-direction: column; justify-content: flex-end;
  border: 0; color: #fff;
  background-size: cover; background-position: center;
  /* the photo is greyscaled and lifted in CSS, so the files stay colour */
}
.diff-photo::after {
  content: ""; position: absolute; inset: 0; z-index: -2;
  filter: grayscale(1) contrast(0.84) brightness(0.96);
}
.diff-photo::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg,
    rgba(28, 26, 34, 0.04) 0%,
    rgba(28, 26, 34, 0.30) 38%,
    rgba(28, 26, 34, 0.86) 62%,
    rgba(28, 26, 34, 0.94) 100%);
}
.diff.diff-photo .diff-label { color: rgba(255,255,255,0.72); }
.diff.diff-photo h3 { color: #fff; }
.diff.diff-photo p { color: rgba(255,255,255,0.88); }
.diff-skills::after   { background-image: url("../img/program/skills.jpg");   background-image: image-set(url("../img/program/skills.jpg") 1x, url("../img/program/skills@2x.jpg") 2x); background-size: cover; background-position: center; }
.diff-coaching::after { background-image: url("../img/program/coaching.jpg"); background-image: image-set(url("../img/program/coaching.jpg") 1x, url("../img/program/coaching@2x.jpg") 2x); background-size: cover; background-position: center; }
.diff-funding::after  { background-image: url("../img/program/funding.jpg");  background-image: image-set(url("../img/program/funding.jpg") 1x, url("../img/program/funding@2x.jpg") 2x); background-size: cover; background-position: center; }
.diff-network::after  { background-image: url("../img/program/network.jpg");  background-image: image-set(url("../img/program/network.jpg") 1x, url("../img/program/network@2x.jpg") 2x); background-size: cover; background-position: center; }

/* who should apply: example tiles under the criteria */
.examples-lead { margin-top: var(--block-gap); font-size: 0.8rem; letter-spacing: 0.08em; color: var(--ink-mid); }
.examples { list-style: none; display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1rem; }
.examples li {
  font-size: 0.9rem; color: #fff;
  padding: 0.75rem 1.2rem; border-radius: 999px;
  background: linear-gradient(180deg, #9282d8, #7f6ecb);
  box-shadow: 0 1px 2px rgba(24,22,18,0.08), 0 6px 14px rgba(146,130,216,0.28);
}

/* foundation page: body copy runs the full width of the wrap */
.page-ventures .lede, .page-ecosystem .lede, .page-foundation .lede { max-width: none; }
.page-ventures .display-xl + .lede, .page-ecosystem .display-xl + .lede, .page-foundation .display-xl + .lede,
.page-foundation .lede-wide { margin-top: 2rem; }
.page-foundation .body-wide { margin-top: 1.6rem; }
.page-foundation .split .lede { max-width: 58ch; }
.checklist.checklist-stack { grid-template-columns: 1fr; margin-top: 2rem; }
.page-foundation .cta-row { margin-top: 2.6rem; }

/* who should apply: checklist */
.checklist { list-style: none; margin-top: var(--block-gap); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem 2.5rem; }
.checklist li {
  display: flex; align-items: flex-start; gap: 0.8rem;
  font-size: 1rem; color: var(--ink-soft);
}
.checklist li::before {
  content: ""; flex: 0 0 auto;
  width: 18px; height: 18px; margin-top: 0.35em;
  border-radius: 50%;
  background: color-mix(in srgb, var(--foundation) 26%, #fff);
  border: 1px solid var(--foundation);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.2l2.6 2.6L13 6.4' fill='none' stroke='%239282d8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center;
}

/* alumni quotes */
.quote-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.2rem, 2.4vw, 1.8rem);
  margin-top: var(--block-gap);
}
.quote {
  background: linear-gradient(168deg, #ffffff 0%, #faf8ff 100%);
  border-radius: 20px;
  padding: clamp(1.8rem, 3vw, 2.4rem);
  border-left: 3px solid var(--foundation);
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(24,22,18,0.04), 0 10px 24px rgba(24,22,18,0.06);
  font-size: clamp(1rem, 1.5vw, 1.15rem); line-height: 1.7;
  color: var(--ink);
}
.quote::before { content: "\201C"; display: block; font-family: var(--font-display); font-size: 2.4rem; line-height: 0.6; color: var(--foundation); margin-bottom: 0.6rem; }

/* three ways in */
.ways-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: var(--block-gap);
}
.way {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.7rem;
  padding: clamp(1.6rem, 3vw, 2.1rem);
  border-radius: 20px;
  background: linear-gradient(168deg, #ffffff 0%, #faf8ff 100%);
  border: 1px solid color-mix(in srgb, var(--foundation) 28%, #fff);
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(24,22,18,0.04), 0 10px 24px rgba(24,22,18,0.06);
  transition: transform 0.35s cubic-bezier(0.2,0.7,0.2,1), box-shadow 0.35s;
}
.way:hover { transform: translateY(-6px); box-shadow: inset 0 1px 0 #fff, 0 18px 38px rgba(24,22,18,0.10); }
/* the three cards each carry their own artwork, white text on a scrim */
.way-img {
  border: 0; color: #fff;
  background-size: cover; background-position: center;
  min-height: 300px; justify-content: flex-end;
  position: relative; overflow: hidden; isolation: isolate;
}
.way-img::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10,10,14,0.10) 0%, rgba(10,10,14,0.40) 50%, rgba(10,10,14,0.74) 100%);
}
.way-apply  { background-image: url("../img/buttons/apply.jpg"); }
.way-mentor { background-image: url("../img/buttons/mentor.jpg"); }
.way-fund   { background-image: url("../img/buttons/fund.jpg"); }
.way-img .way-t, .way-img .way-d { color: #fff; }
.way-img .way-d { opacity: 0.88; flex: 0; }
.way-img .btn { background: #fff; border-color: #fff; color: var(--ink); }
.way-img .btn:hover { background: transparent; color: #fff; border-color: rgba(255,255,255,0.7); }
.way-t { font-family: var(--font-display); font-size: 1.1rem; letter-spacing: 0.04em; color: var(--ink); }
.way-d { font-size: 0.88rem; color: var(--ink-soft); flex: 1; }
.way .btn { margin-top: 0.4rem; }

.read-more {
  display: inline-block; margin-top: 1.4rem;
  font-size: 0.95rem; color: var(--foundation-deep);
  border-bottom: 1px solid color-mix(in srgb, var(--foundation) 60%, #fff);
  padding-bottom: 2px;
  transition: border-color 0.25s, gap 0.25s;
}
.read-more:hover { border-bottom-color: var(--foundation-deep); }

@media (max-width: 980px) {
  .diff-grid { grid-template-columns: repeat(2, 1fr); }
  .checklist { grid-template-columns: 1fr; }
  .ways-grid { grid-template-columns: 1fr; }
  .quote-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .diff-grid { grid-template-columns: 1fr; }
  .announce { font-size: 0.62rem; letter-spacing: 0.1em; padding: 0.8rem 0.6rem; }
  .announce-text { white-space: normal; }
  body.has-announce .navbar { top: 70px; }
  body.has-announce .vhero { padding-top: calc(var(--nav-h) + 70px + 2rem); }
}


/* ============================================================
   SPEEDRUN REGISTER (foundation page only)
   Their energy comes from four moves, not from colour:
   big tight headlines, a category label above every card,
   the offer stated as a number, and repeated text as graphics.
   Saturn keeps its own typefaces and purple.
   ============================================================ */

/* headlines: bigger, tighter, blacker. FG Futurist only ships Light,
   so confidence comes from scale and negative tracking, not weight. */
.page-foundation main h2.display-lg,
.page-foundation main h2.display-xl {
  letter-spacing: -0.02em;
  color: #000;
}
.page-foundation main h2.display-xl { font-size: clamp(2.8rem, 7.4vw, 6.4rem); line-height: 0.98; }
.page-foundation main h2.display-lg { font-size: clamp(2.2rem, 5.2vw, 4.2rem); line-height: 1.02; }
.page-foundation .kicker {
  font-family: var(--font-mono); font-size: 0.66rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--foundation-deep);
}

/* the offer, stated as a number */
.offer { color: var(--foundation-deep); }

/* card anatomy: category label, benefit line, one detail line */
.diff .diff-label {
  display: block; font-family: var(--font-mono);
  font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--foundation-deep); margin-bottom: 0.9rem;
}
.diff h3 {
  font-family: var(--font-display); font-weight: 300;
  font-size: 1.35rem; letter-spacing: -0.01em; line-height: 1.15;
  color: #000; margin-bottom: 0.55rem; text-transform: none;
}

/* repeated text band, their "Got any questions?" device */
.text-band {
  overflow: hidden; padding: clamp(2rem, 4vw, 3rem) 0;
  background: var(--foundation-deep);
  -webkit-mask-image: none; mask-image: none;
}
.text-band-track {
  display: flex; align-items: center; gap: 2.5rem;
  width: max-content; animation: band-scroll 28s linear infinite;
}
.text-band span {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(1.6rem, 4vw, 3rem); letter-spacing: -0.01em;
  color: #fff; white-space: nowrap;
}
.text-band .dotmark { color: rgba(255,255,255,0.45); font-size: 0.7em; }
@keyframes band-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .text-band-track { animation: none; } }

/* standalone section CTA, small caps, sits under a block */
.section-cta {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin-top: var(--block-gap);
  font-family: var(--font-mono); font-size: 0.68rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: #000; border-bottom: 1px solid var(--foundation);
  padding-bottom: 4px;
  transition: color 0.25s, border-color 0.25s, gap 0.25s;
}
.section-cta:hover { color: var(--foundation-deep); border-color: var(--foundation-deep); gap: 0.85rem; }

/* the big proof sentence, their "$300M to fund over 300 startups" move */
.big-claim {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(1.6rem, 3.6vw, 3rem); line-height: 1.2;
  letter-spacing: -0.015em; color: #000; max-width: 22ch;
}
.big-claim em { font-style: normal; color: var(--foundation-deep); }

/* quotes: bold lead line pulled out, like theirs */
.quote .lead {
  display: block; font-family: var(--font-display); font-weight: 300;
  font-size: 1.3rem; line-height: 1.2; letter-spacing: -0.01em;
  color: #000; margin-bottom: 0.9rem;
}
.quote .body { font-size: 0.95rem; color: var(--ink-soft); line-height: 1.7; }
.quote .who {
  display: block; margin-top: 1.2rem;
  font-family: var(--font-mono); font-size: 0.62rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mid);
}