/* ═══════════════════════════════════════════════════════════════════
 * Ajaia — About · new section styles (Mission/Vision, Ecosystem,
 * Leadership, Impact, Global Reach). Builds on page.css + DS tokens.
 * ═══════════════════════════════════════════════════════════════════ */

/* ── Why We Began · graph header ── */
.why .founder-grid{ margin-top: clamp(40px,5vw,64px); }
.why-graph-head{ max-width: 720px; margin: 0 auto clamp(20px,3vw,36px); text-align:center; }
.why-graph-head h3{ font-family:var(--font-display); font-weight:700; color:var(--ink-900);
  font-size: clamp(22px,2.4vw,32px); letter-spacing:-.02em; line-height:1.18; margin:0; }
.why-graph-head p{ color:var(--ink-muted); font-size: clamp(15px,1.3vw,17px); line-height:1.6; margin:14px auto 0; max-width:60ch; }

/* ═══════════════ 2 · MISSION & VISION (split-screen) ═══════════════ */
.mv{ padding-block: clamp(64px,9vh,120px) 0; overflow:hidden; }
.mv-head{ margin-bottom: clamp(28px,4vw,52px); }
.mv-head h2{ font-family:var(--font-display); font-weight:700; color:#fff; font-size:clamp(26px,3.2vw,42px); line-height:1.12; letter-spacing:-.022em; margin:14px 0 0; max-width:20ch; }
.mv-split{ display:flex; min-height: clamp(440px, 62vh, 640px); border-top:1px solid var(--hair); }
.mv-panel{ position:relative; flex:1 1 0; overflow:hidden; cursor:default; isolation:isolate;
  border-left:1px solid var(--hair); transition: flex-grow .6s var(--ease);
  display:flex; align-items:flex-end; padding: clamp(28px,4vw,64px); }
.mv-panel:first-child{ border-left:none; }
.mv-panel::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background: linear-gradient(180deg, rgba(2,10,38,0) 0%, rgba(2,10,38,.35) 52%, rgba(2,10,38,.8) 100%); }
.mv-canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:.95; pointer-events:none; transition: opacity .5s var(--ease); }
.mv-body{ position:relative; z-index:2; max-width: 46ch; }
.mv-tag{ display:inline-block; font-family:var(--font-mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color: var(--ink-900); background: var(--sky-400); padding:5px 12px; margin-bottom:18px; }
.mv-panel[data-mv="vision"] .mv-tag{ background: var(--cream-100); }
.mv-body h3{ font-family:var(--font-display); font-weight:700; color:#fff; font-size:clamp(22px,2.4vw,32px);
  line-height:1.16; letter-spacing:-.02em; margin:0; }
.mv-body p{ color: var(--sky-100); font-size:clamp(15px,1.25vw,17px); line-height:1.62; margin:16px 0 0; }
.mv-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;
  max-height:0; opacity:0; overflow:hidden; transition: max-height .55s var(--ease), opacity .4s var(--ease), margin-top .5s var(--ease); }
.mv-list li{ position:relative; padding-left:26px; color:#fff; font-size:14.5px; line-height:1.45; }
.mv-list li::before{ content:""; position:absolute; left:0; top:7px; width:9px; height:9px; background: var(--sky-400); }
.mv-panel[data-mv="vision"] .mv-list li::before{ background: var(--cream-100); }
.mv-panel:hover{ flex-grow:1.7; }
.mv-panel:hover .mv-canvas{ opacity:1; }
.mv-panel:hover .mv-list{ max-height:220px; opacity:1; margin-top:22px; }
/* without :hover support (touch) reveal lists by default */
@media (hover:none){ .mv-list{ max-height:220px; opacity:1; margin-top:22px; } }

/* ═══════════════ 4 · ECOSYSTEM (What Makes Us Different) ═══════════════ */
.eco-stage{ position:relative; margin-top: clamp(36px,5vw,64px); height: clamp(440px,52vw,600px);
  border:1px solid var(--card-bd); background:
    radial-gradient(80% 80% at 50% 46%, rgba(151,194,247,.16), transparent 70%), #fff;
  overflow:hidden; }
#ecoCanvas{ position:absolute; inset:0; width:100%; height:100%; z-index:0; }
.eco-nodes{ position:absolute; inset:0; z-index:2; }
.eco-node{ position:absolute; transform: translate(-50%,-50%); cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; }
.eco-node .bub{ width: var(--sz,62px); height: var(--sz,62px); border-radius:50%;
  background: #fff; border:1.5px solid var(--ink-900); color: var(--ink-900);
  display:grid; place-items:center; box-shadow: var(--shadow-1); transition: transform .3s var(--ease), box-shadow .3s, background .3s, color .3s; }
.eco-node.center .bub{ background: var(--ink-900); color:#fff; border-color: var(--ink-900); --sz:96px; }
.eco-node .bub svg{ width:42%; height:42%; }
.eco-node .lab{ font-weight:600; font-size:13.5px; color:var(--ink-900); letter-spacing:-.01em; white-space:nowrap; transition: color .3s; }
.eco-node:hover .bub, .eco-node.active .bub{ transform: scale(1.12); box-shadow: var(--shadow-2);
  background: var(--sky-400); color: var(--ink-900); border-color: var(--sky-400); }
.eco-node.center:hover .bub, .eco-node.center.active .bub{ background: var(--ink-900); color:#fff; transform:scale(1.06); }
.eco-detail{ position:absolute; left: clamp(18px,3vw,32px); bottom: clamp(18px,3vw,32px); z-index:3;
  width: min(340px, 70%); background: rgba(255,255,255,.86); backdrop-filter: blur(10px);
  border:1px solid var(--card-bd); border-left:3px solid var(--sky-400); padding:20px 22px;
  box-shadow: var(--shadow-1); opacity:0; transform: translateY(10px); transition: opacity .35s var(--ease), transform .35s var(--ease); pointer-events:none; }
.eco-detail.show{ opacity:1; transform:none; }
.eco-detail .et{ font-family:var(--font-display); font-weight:700; font-size:18px; color:var(--ink-900); margin:0 0 6px; letter-spacing:-.01em; }
.eco-detail .ed{ font-size:14px; line-height:1.55; color:var(--ink-muted); margin:0; }
.eco-hint{ position:absolute; right: clamp(16px,3vw,28px); top: clamp(16px,3vw,28px); z-index:3;
  font-family:var(--font-mono); font-size:12px; letter-spacing:.04em; color:var(--ink-subtle); display:flex; align-items:center; gap:8px; }
.eco-hint::before{ content:""; width:8px; height:8px; background:var(--sky-400); }

/* ═══════════════ 5 · LEADERSHIP / TEAM ═══════════════ */
.team-head{ max-width: 760px; margin: 26px 0 clamp(36px,5vw,56px); }
.team-head h2{ font-family:var(--font-display); font-weight:700; color:#fff; font-size:clamp(26px,3.2vw,42px); line-height:1.14; letter-spacing:-.022em; margin:0; }
.team-head .lead{ color: var(--sky-100); margin-top:18px; }
.team-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:18px; }
.tm-card{ position:relative; overflow:hidden; padding:24px 22px 26px; border:1px solid rgba(255,255,255,.12);
  background: rgba(151,194,247,.06); backdrop-filter: blur(8px); transition: transform .4s var(--ease), border-color .4s, background .4s; }
.tm-card::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0; transition:opacity .4s var(--ease);
  background: radial-gradient(180px 180px at var(--mx,50%) var(--my,30%), rgba(151,194,247,.22), transparent 70%); }
.tm-card:hover{ transform: translateY(-6px); border-color: rgba(151,194,247,.4); background: rgba(151,194,247,.1); }
.tm-card:hover::before{ opacity:1; }
.tm-card > *{ position:relative; z-index:1; }
.tm-portrait{ position:relative; aspect-ratio:1/1; margin-bottom:18px; border:1px solid rgba(151,194,247,.2);
  background: radial-gradient(120% 100% at 50% 0%, rgba(151,194,247,.14), rgba(2,12,46,.4)); overflow:hidden; }
.tm-portrait canvas{ position:absolute; inset:0; width:100%; height:100%; }
.tm-portrait .ini{ position:absolute; inset:0; display:grid; place-items:center; font-family:var(--font-display);
  font-weight:700; font-size:42px; color: rgba(255,255,255,.92); letter-spacing:-.02em; z-index:2; }
.tm-card h4{ font-family:var(--font-display); font-weight:700; font-size:18px; color:#fff; margin:0; letter-spacing:-.01em; }
.tm-card .role{ font-size:13px; color: var(--sky-300); margin:4px 0 12px; }
.tm-card p{ font-size:13.5px; line-height:1.55; color: rgba(225,238,255,.78); margin:0; }

/* ═══════════════ 6 · IMPACT & RESULTS (dashboard) ═══════════════ */
.impact-grid{ display:grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(160px, auto); gap:18px; margin-top: clamp(36px,5vw,56px); }
.metric-tile{ position:relative; overflow:hidden; padding:22px 24px; border:1px solid var(--card-bd); background:#fff;
  box-shadow: var(--shadow-1); display:flex; flex-direction:column; }
.metric-tile.big{ grid-column: span 1; grid-row: span 2; background: var(--ink-900); border-color: var(--ink-900); }
.metric-tile.wide{ grid-column: span 2; grid-row: span 2; }
.mt-label{ font-size:13px; color: var(--ink-subtle); letter-spacing:.01em; }
.metric-tile.big .mt-label{ color: var(--sky-200); }
.mt-val{ font-family:var(--font-display); font-weight:700; color:var(--ink-900); font-size:clamp(34px,3.6vw,52px); line-height:1; letter-spacing:-.025em; margin-top:10px; }
.metric-tile.big .mt-val{ color:#fff; font-size:clamp(44px,5vw,64px); margin-top:14px; }
.mt-foot{ font-size:13px; color:var(--ink-muted); margin-top:auto; padding-top:14px; line-height:1.45; }
.metric-tile.big .mt-foot{ color: var(--sky-100); }
.mt-spark{ width:100%; height:54px; margin-top:16px; }
.mt-chart{ width:100%; flex:1; min-height:120px; margin-top:14px; }
.mt-legend{ display:flex; gap:18px; margin-top:12px; font-size:12.5px; color:var(--ink-muted); }
.mt-legend i{ display:inline-block; width:11px; height:11px; margin-right:6px; vertical-align:-1px; }
.mt-legend i.navy{ background: var(--ink-700); } .mt-legend i.sky{ background: var(--sky-400); }

/* ═══════════════ 7 · GLOBAL REACH ═══════════════ */
.reach-grid{ display:grid; grid-template-columns: 1fr 1.05fr; gap: clamp(32px,5vw,72px); align-items:center; }
.reach-copy h2{ font-family:var(--font-display); font-weight:700; color:#fff; font-size:clamp(26px,3.2vw,42px); line-height:1.14; letter-spacing:-.022em; margin:14px 0 0; max-width:18ch; }
.reach-copy .lead{ color: var(--sky-100); margin-top:18px; max-width:46ch; }
.reach-stats{ list-style:none; margin:32px 0 0; padding:0; display:flex; gap: clamp(20px,3vw,40px); flex-wrap:wrap; }
.reach-stats li{ display:flex; flex-direction:column; gap:4px; }
.reach-stats b{ font-family:var(--font-display); font-weight:700; font-size:clamp(28px,3vw,40px); color: var(--cream-100); letter-spacing:-.02em; line-height:1; }
.reach-stats span{ font-size:13px; color: var(--sky-200); }
.globe-wrap{ position:relative; aspect-ratio:1/1; max-width: 560px; margin-inline:auto; width:100%; }
#globeCanvas{ position:absolute; inset:0; width:100%; height:100%; }
.globe-hq{ position:absolute; left:50%; bottom:2%; transform:translateX(-50%); z-index:2; white-space:nowrap;
  display:flex; align-items:center; gap:8px; font-size:12.5px; color: var(--sky-100);
  background: rgba(4,14,46,.6); border:1px solid rgba(151,194,247,.2); backdrop-filter: blur(8px); padding:7px 14px; }
.globe-hq .sq{ width:9px; height:9px; background: var(--sky-400); box-shadow:0 0 10px var(--sky-400); }

/* ── CTA extra button row ── */
.cta-card .cta-row{ gap:14px; flex-wrap:wrap; }
.cta-card .eyebrow{ margin-bottom:18px; }

/* ═══════════════ Responsive ═══════════════ */
@media (max-width: 1040px){
  .team-grid{ grid-template-columns: repeat(2,1fr); }
  .impact-grid{ grid-template-columns: repeat(2,1fr); }
  .metric-tile.wide{ grid-column: span 2; }
}
@media (max-width: 900px){
  .mv-split{ flex-direction:column; min-height:0; }
  .mv-panel{ border-left:none; border-top:1px solid var(--hair); min-height: 420px; }
  .mv-panel:first-child{ border-top:none; }
  .mv-list{ max-height:200px; opacity:1; }
  .reach-grid{ grid-template-columns: 1fr; }
  .reach-copy{ text-align:center; } .reach-copy .eyebrow{ justify-content:center; } .reach-copy .lead{ margin-inline:auto; } .reach-stats{ justify-content:center; }
}
@media (max-width: 620px){
  .team-grid{ grid-template-columns: 1fr; }
  .impact-grid{ grid-template-columns: 1fr; }
  .metric-tile.wide, .metric-tile.big{ grid-column: span 1; grid-row: auto; }
}