/* =========================================================================
   Vanta Omega — holding page · Direction B "The Field"
   Recreates ui_kits/holding/index.html: the diamond at the source, a shared
   spine, every company hanging off it as a clickable node. Tokens live in
   colors_and_type.css; this file is layout + components only.
   ========================================================================= */

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

html { scroll-behavior: smooth; }
/* keep anchor targets clear of the sticky nav (matches the JS scroll offset) */
#top, #field, #approach, #contact { scroll-margin-top: 76px; }
body {
  margin: 0;
  background: var(--vo-void);
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; }
}

/* ── The mark · Containment ──────────────────────────────────────
   A diamond holding a diamond. Outer frame = the parent (platinum);
   held core = the child / light (Arc). Override per-instance with the
   --mark-stroke / --mark-core custom properties. */
.vo-mark { display: block; }
.vo-mark .frame {
  fill: none;
  stroke: var(--mark-stroke, var(--vo-platinum));
  stroke-width: 11;
  stroke-linejoin: miter;
}
.vo-mark .core { fill: var(--mark-core, var(--vo-arc)); }

/* Child marks keep their authentic geometry, color-adapted for the void. */
.child-mark { display: block; }

/* ── Institutional wordmark ─────────────────────────────────────── */
.vo-lockup { display: inline-flex; align-items: center; gap: 14px; }
.vo-lockup .name {
  font-family: var(--vo-font-sans);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1;
  white-space: nowrap;
  color: var(--vo-platinum);
}

/* ── Mono / eyebrow helpers ─────────────────────────────────────── */
.mono {
  font-family: var(--vo-font-mono);
  letter-spacing: var(--vo-track-mono);
  font-variant-numeric: tabular-nums;
  color: var(--vo-silver);
}
.eyebrow {
  font-family: var(--vo-font-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--vo-ash);
}

/* ── A portfolio company name set in the parent system ───────────
   prefix in platinum, the shared "vo" in the child's accent. */
.vo-name {
  font-family: var(--vo-font-sans);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--vo-platinum);
}
.vo-name .suffix { color: var(--accent, var(--vo-arc)); }

/* ── Status dot ─────────────────────────────────────────────────── */
.dot {
  width: 7px; height: 7px; border-radius: 999px;
  display: inline-block; flex: 0 0 auto;
  background: var(--vo-arc);
}

/* ── Primary action — Arc, sharp, decisive ──────────────────────── */
.arc-btn {
  font-family: var(--vo-font-sans);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.005em;
  padding: 12px 22px;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 90ms var(--vo-ease), border-color 90ms var(--vo-ease),
              color 90ms var(--vo-ease), transform 90ms var(--vo-ease);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
  background: var(--vo-arc);
  color: #fff;
}
.arc-btn:hover { background: var(--vo-arc-hover); }
.arc-btn:active { background: var(--vo-arc-press); transform: translateY(1px); }
.arc-btn .arrow { font-family: var(--vo-font-mono); }
.arc-btn.sm { padding: 8px 16px; font-size: 12.5px; }
.arc-btn.lg { padding: 15px 28px; font-size: 15px; }
.arc-btn.ghost {
  background: transparent;
  color: var(--vo-platinum);
  border-color: var(--vo-line);
}
.arc-btn.ghost:hover { background: rgba(255,255,255,0.04); border-color: var(--vo-line-strong); }
.arc-btn.ghost:active { background: rgba(255,255,255,0.04); }
.arc-btn.block { width: 100%; justify-content: center; }

/* ── Faint grid field — the only sanctioned background texture ──── */
.vo-grid {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 64px 64px;
}

.vo-page { background: var(--vo-void); min-height: 100vh; position: relative; }
.vo-page > .layer { position: relative; z-index: 1; }

/* ── Sticky nav: hairline + backdrop-blur once scrolled ─────────── */
.vo-nav {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px clamp(22px, 5vw, 56px);
  border-bottom: 1px solid transparent;
  background: transparent;
  transition: background 180ms var(--vo-ease), border-color 180ms var(--vo-ease);
}
.vo-nav.scrolled {
  border-bottom-color: var(--vo-line);
  background: rgba(8,9,11,0.72);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.vo-nav nav { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 30px); }
.vo-navlink { transition: opacity 120ms var(--vo-ease); }
.vo-navlink:hover { opacity: 0.62; }
.vo-nav .divider { width: 1px; height: 16px; background: var(--vo-line); }

/* ── Hero ───────────────────────────────────────────────────────── */
.vo-hero {
  text-align: center;
  padding: clamp(48px, 7vw, 86px) clamp(22px, 5vw, 56px) 0;
  max-width: 900px; margin: 0 auto;
}
.vo-hero h1 {
  font-family: var(--vo-font-sans);
  font-weight: 500;
  font-size: clamp(38px, 6.2vw, 70px);
  line-height: 1.0;
  letter-spacing: -0.038em;
  color: var(--vo-platinum);
  margin: 24px auto 0;
  max-width: 820px;
  text-wrap: balance;
}
.vo-hero p {
  font-family: var(--vo-font-sans);
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.55;
  color: var(--vo-silver);
  max-width: 560px;
  margin: 24px auto 0;
  text-wrap: pretty;
}

/* ── The Field section ──────────────────────────────────────────── */
.vo-field {
  padding: clamp(36px, 5vw, 56px) clamp(22px, 5vw, 56px) clamp(56px, 7vw, 88px);
}
.vo-field-caption {
  display: block; text-align: center; margin-top: 36px;
  font-size: 12px; color: var(--vo-pewter);
}

/* ── The backbone diagram ───────────────────────────────────────── */
.vo-field-diagram { display: flex; flex-direction: column; align-items: center; max-width: 1000px; margin: 0 auto; --vo-node-gap: clamp(28px, 4vw, 52px); }

.vo-source { position: relative; display: grid; place-items: center; }
.vo-source .glow {
  position: absolute; width: 240px; height: 240px; border-radius: 50%;
  background: radial-gradient(circle, var(--vo-arc-glow), transparent 66%);
  filter: blur(10px);
}
.vo-source .vo-mark { position: relative; }
.vo-source-label { letter-spacing: 0.22em; margin-top: 12px; font-size: 11px; color: var(--vo-ash); }

/* vertical stem from mark to spine */
.vo-stem { width: 1px; height: 30px; margin-top: 14px; background: linear-gradient(var(--vo-arc), var(--vo-arc-line)); }

/* horizontal spine row */
.vo-spine-row { position: relative; width: 100%; height: 1px; }
/* Endpoints sit at the col-1 / col-3 drop centers: half a column in from each
   edge, where a column is (100% - 2 gaps) / 3, so the offset is that / 2. */
.vo-spine { position: absolute; left: calc((100% - 2 * var(--vo-node-gap)) / 6); right: calc((100% - 2 * var(--vo-node-gap)) / 6); top: 0; height: 1px; background: var(--vo-line); }
.vo-spine-active { position: absolute; left: calc((100% - 2 * var(--vo-node-gap)) / 6); right: calc((100% - 2 * var(--vo-node-gap)) / 6); top: 0; height: 1px; background: var(--vo-arc-line); }

/* node grid */
.vo-node-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--vo-node-gap); width: 100%; margin-top: 0; }
.vo-nodecol { display: flex; flex-direction: column; align-items: center; }
.vo-drop { width: 1px; height: 40px; flex: 0 0 auto; }

/* ── A company node hanging off the spine ───────────────────────── */
.vo-node {
  all: unset;
  box-sizing: border-box; width: 100%;
  background: var(--vo-graphite);
  border: 1px solid var(--vo-line);
  border-radius: 8px;
  padding: 24px 24px 20px;
  position: relative; overflow: hidden;
  cursor: pointer;
  transition: border-color 120ms var(--vo-ease), transform 180ms var(--vo-ease), box-shadow 180ms var(--vo-ease);
}
.vo-node:focus-visible { box-shadow: var(--vo-ring); }
.vo-node:hover {
  border-color: var(--vo-line-strong);
  transform: translateY(-4px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset, 0 18px 40px rgba(0,0,0,0.5);
}
.vo-node .topbar {
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--accent, var(--vo-arc)); opacity: 0.95;
}
.vo-node .wash {
  position: absolute; top: -40px; right: -40px; width: 140px; height: 140px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent, var(--vo-arc)) 13%, transparent), transparent 68%);
  opacity: 0; transition: opacity 180ms var(--vo-ease); pointer-events: none;
}
.vo-node:hover .wash { opacity: 1; }
.vo-node .node-head { position: relative; display: flex; align-items: center; gap: 12px; }
.vo-node .node-head .vo-name { font-size: 22px; }
.vo-node .node-tag {
  position: relative;
  font-family: var(--vo-font-sans); font-size: 14.5px; line-height: 1.45;
  color: var(--vo-silver); margin: 16px 0 18px; min-height: 42px;
}
.vo-node .node-foot {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid var(--vo-line-faint); padding-top: 14px;
}
.vo-node .node-foot .status-group { display: flex; align-items: center; gap: 7px; }
.vo-node .node-foot .node-arrow { margin-left: 2px; color: var(--vo-ash); transition: color 120ms var(--vo-ease); }
.vo-node:hover .node-foot .node-arrow { color: var(--vo-platinum); }

/* ── Approach ───────────────────────────────────────────────────── */
.vo-approach {
  border-top: 1px solid var(--vo-line);
  padding: clamp(52px, 7vw, 88px) clamp(22px, 5vw, 56px);
  max-width: 1120px; margin: 0 auto;
}
.vo-approach-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 6vw, 72px); align-items: start; }
.vo-approach-grid h2 {
  font-family: var(--vo-font-sans); font-weight: 500;
  font-size: clamp(26px, 3.4vw, 42px); line-height: 1.06; letter-spacing: -0.03em;
  color: var(--vo-platinum); margin: 18px 0 0; text-wrap: balance;
}
.vo-approach-list { display: flex; flex-direction: column; gap: 22px; }
.vo-approach-item { display: flex; gap: 16px; padding-bottom: 22px; border-bottom: 1px solid var(--vo-line); }
.vo-approach-item:last-child { border-bottom: none; padding-bottom: 0; }
.vo-approach-item .idx { font-family: var(--vo-font-mono); font-size: 12px; color: var(--vo-arc); padding-top: 3px; }
.vo-approach-item .ttl { font-family: var(--vo-font-sans); font-weight: 500; font-size: 16.5px; color: var(--vo-platinum); letter-spacing: -0.01em; }
.vo-approach-item p { font-family: var(--vo-font-sans); font-size: 14.5px; line-height: 1.55; color: var(--vo-silver); margin: 8px 0 0; }

/* ── Contact ────────────────────────────────────────────────────── */
.vo-contact {
  border-top: 1px solid var(--vo-line);
  padding: clamp(56px, 8vw, 96px) clamp(22px, 5vw, 56px);
  max-width: 1120px; margin: 0 auto; text-align: center;
}
.vo-contact .source { display: grid; place-items: center; margin-bottom: 26px; }
.vo-contact .source .glow {
  position: absolute; width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle, var(--vo-arc-glow), transparent 68%); filter: blur(10px);
}
.vo-contact .source .vo-mark { position: relative; }
.vo-contact h2 {
  font-family: var(--vo-font-sans); font-weight: 500;
  font-size: clamp(28px, 4vw, 48px); line-height: 1.02; letter-spacing: -0.035em;
  color: var(--vo-platinum); margin: 0 auto; max-width: 640px; text-wrap: balance;
}
.vo-contact h2 .suffix { color: var(--vo-arc); }
.vo-contact p {
  font-family: var(--vo-font-sans); font-size: 16px; line-height: 1.6;
  color: var(--vo-silver); max-width: 520px; margin: 22px auto 0;
}
.vo-contact .cta-row { display: flex; justify-content: center; margin-top: 34px; }

/* ── Footer ─────────────────────────────────────────────────────── */
.vo-footer {
  border-top: 1px solid var(--vo-line);
  padding: 26px clamp(22px, 5vw, 56px) 38px;
  max-width: 1120px; margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between;
}
.vo-footer .left { display: flex; align-items: center; gap: 12px; }
.vo-footer .right { letter-spacing: 0.1em; font-size: 12px; color: var(--vo-ash); }
.vo-footer .suffix { color: var(--vo-arc); }

/* ── Company detail slide-over ──────────────────────────────────── */
.vo-scrim {
  position: fixed; inset: 0; z-index: 50; background: rgba(5,5,7,0.55);
  opacity: 0; pointer-events: none; transition: opacity 280ms var(--vo-ease);
}
.vo-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 51; width: min(460px, 92vw);
  background: var(--vo-graphite); border-left: 1px solid var(--vo-line);
  box-shadow: 0 18px 44px rgba(0,0,0,0.62);
  transform: translateX(100%); transition: transform 280ms var(--vo-ease);
  display: flex; flex-direction: column; overflow-y: auto;
}
body.drawer-open .vo-scrim { opacity: 1; pointer-events: auto; }
body.drawer-open .vo-drawer { transform: translateX(0); }

.vo-drawer .inner { padding: 26px 32px 40px; }
.vo-drawer .drawer-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 36px; }
.vo-drawer .drawer-head .kicker { font-size: 11.5px; color: var(--vo-ash); letter-spacing: 0.18em; }
.vo-drawer .drawer-close {
  all: unset; cursor: pointer; color: var(--vo-ash);
  font-family: var(--vo-font-mono); font-size: 18px; line-height: 1; padding: 4px;
}
.vo-drawer .drawer-close:hover { color: var(--vo-platinum); }
.vo-drawer .drawer-id { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.vo-drawer .drawer-id .vo-name { font-size: 38px; }
.vo-drawer .drawer-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-bottom: 22px; }
.vo-drawer .drawer-meta .mono { font-size: 11.5px; }
.vo-drawer .drawer-meta .status { color: var(--vo-silver); letter-spacing: 0.12em; }
.vo-drawer .drawer-meta .sep { width: 1px; height: 12px; background: var(--vo-line); margin: 0 4px; }
.vo-drawer .drawer-detail { font-family: var(--vo-font-sans); font-size: 16px; line-height: 1.6; color: var(--vo-silver); margin: 0 0 28px; }
.vo-drawer .facts {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1px;
  background: var(--vo-line); border: 1px solid var(--vo-line); border-radius: 8px;
  overflow: hidden; margin-bottom: 30px;
}
.vo-drawer .fact { background: var(--vo-obsidian); padding: 16px 14px; }
.vo-drawer .fact .k {
  font-family: var(--vo-font-mono); font-size: 10.5px; color: var(--vo-ash);
  letter-spacing: 0.12em; text-transform: uppercase; display: block; margin-bottom: 8px;
}
.vo-drawer .fact .v { font-family: var(--vo-font-sans); font-weight: 500; font-size: 14px; color: var(--vo-platinum); }

/* ── Tablet / mobile ────────────────────────────────────────────── */
@media (max-width: 860px) {
  .vo-node-grid { grid-template-columns: 1fr; gap: 0; max-width: 420px; margin: 0 auto; }
  .vo-spine-row { display: none; }
  .vo-stem { height: 24px; }
  .vo-drop { height: 24px; }
  .vo-nodecol:first-child .vo-drop { background: linear-gradient(var(--vo-arc), var(--vo-arc-line)) !important; }
  .vo-approach-grid { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 600px) {
  .vo-hide-sm { display: none !important; }
}